Merge remote-tracking branch 'upstream/master' into no-limits

src/components/appRouter.js

@@ -511,9 +511,16 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM
         return baseRoute;
     }
 
+    var popstateOccurred = false;
+    window.addEventListener('popstate', function () {
+        popstateOccurred = true;
+    });
+
     function getHandler(route) {
         return function (ctx, next) {
+            ctx.isBack = popstateOccurred;
             handleRoute(ctx, next, route);
+            popstateOccurred = false;
         };
     }
 

src/components/apphost.js

@@ -1,4 +1,4 @@
-define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSettings, browser, events, htmlMediaHelper) {
+define(["appSettings", "browser", "events", "htmlMediaHelper", "webSettings"], function (appSettings, browser, events, htmlMediaHelper, webSettings) {
     "use strict";
 
     function getBaseProfileOptions(item) {
@@ -276,15 +276,17 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
         features.push("otherapppromotions");
         features.push("displaymode");
         features.push("targetblank");
-        // allows users to connect to more than one server
-        //features.push("multiserver");
         features.push("screensaver");
 
-        if (!browser.orsay && !browser.tizen && !browser.msie && (browser.firefox || browser.ps4 || browser.edge || supportsCue())) {
+        webSettings.enableMultiServer().then(enabled => {
+            if (enabled) features.push("multiserver")
+        })
+
+        if (!browser.orsay && !browser.msie && (browser.firefox || browser.ps4 || browser.edge || supportsCue())) {
             features.push("subtitleappearancesettings");
         }
 
-        if (!browser.orsay && !browser.tizen) {
+        if (!browser.orsay) {
             features.push("subtitleburnsettings");
         }
 

src/components/autoFocuser.js

@@ -1,22 +1,29 @@
-define(["focusManager", "layoutManager"], function (focusManager, layoutManager) {
-    "use strict";
+/* eslint-disable indent */
+
+/**
+ * Module for performing auto-focus.
+ * @module components/autoFocuser
+ */
+
+import focusManager from "focusManager";
+import layoutManager from "layoutManager";
 
     /**
      * Previously selected element.
      */
-    var activeElement;
+    let activeElement;
 
     /**
-     * Returns true if AutoFocuser is enabled.
+     * Returns _true_ if AutoFocuser is enabled.
      */
-    function isEnabled() {
+    export function isEnabled() {
         return layoutManager.tv;
     }
 
     /**
-     * Start AutoFocuser
+     * Start AutoFocuser.
      */
-    function enable() {
+    export function enable() {
         if (!isEnabled()) {
             return;
         }
@@ -28,24 +35,19 @@ define(["focusManager", "layoutManager"], function (focusManager, layoutManager)
         console.debug("AutoFocuser enabled");
     }
 
-    /**
-     * Create an array from some source.
-     */
-    var arrayFrom = Array.prototype.from || function (src) {
-        return Array.prototype.slice.call(src);
-    }
-
     /**
      * Set focus on a suitable element, taking into account the previously selected.
+     * @param {HTMLElement} [container] - Element to limit scope.
+     * @returns {HTMLElement} Focused element.
      */
-    function autoFocus(container) {
+    export function autoFocus(container) {
         if (!isEnabled()) {
-            return;
+            return null;
         }
 
         container = container || document.body;
 
-        var candidates = [];
+        let candidates = [];
 
         if (activeElement) {
             // These elements are recreated
@@ -62,10 +64,10 @@ define(["focusManager", "layoutManager"], function (focusManager, layoutManager)
             candidates.push(activeElement);
         }
 
-        candidates = candidates.concat(arrayFrom(container.querySelectorAll(".btnResume")));
-        candidates = candidates.concat(arrayFrom(container.querySelectorAll(".btnPlay")));
+        candidates = candidates.concat(Array.from(container.querySelectorAll(".btnResume")));
+        candidates = candidates.concat(Array.from(container.querySelectorAll(".btnPlay")));
 
-        var focusedElement;
+        let focusedElement;
 
         candidates.every(function (element) {
             if (focusManager.isCurrentlyFocusable(element)) {
@@ -79,7 +81,7 @@ define(["focusManager", "layoutManager"], function (focusManager, layoutManager)
 
         if (!focusedElement) {
             // FIXME: Multiple itemsContainers
-            var itemsContainer = container.querySelector(".itemsContainer");
+            const itemsContainer = container.querySelector(".itemsContainer");
 
             if (itemsContainer) {
                 focusedElement = focusManager.autoFocus(itemsContainer);
@@ -93,9 +95,8 @@ define(["focusManager", "layoutManager"], function (focusManager, layoutManager)
         return focusedElement;
     }
 
-    return {
+    export default {
         isEnabled: isEnabled,
         enable: enable,
         autoFocus: autoFocus
     };
-});

src/components/castSenderApi.js

@@ -0,0 +1,34 @@
+define([], function() {
+    'use strict';
+
+    if (window.appMode === "cordova" || window.appMode === "android") {
+        return {
+            load: function () {
+                window.chrome = window.chrome || {};
+                return Promise.resolve();
+            }
+        };
+    } else {
+        var ccLoaded = false;
+        return {
+            load: function () {
+                if (ccLoaded) {
+                    return Promise.resolve();
+                }
+
+                return new Promise(function (resolve, reject) {
+                    var fileref = document.createElement("script");
+                    fileref.setAttribute("type", "text/javascript");
+
+                    fileref.onload = function () {
+                        ccLoaded = true;
+                        resolve();
+                    };
+
+                    fileref.setAttribute("src", "https://www.gstatic.com/cv/js/sender/v1/cast_sender.js");
+                    document.querySelector("head").appendChild(fileref);
+                });
+            }
+        };
+    }
+});

src/components/channelmapper/channelmapper.js

@@ -1,18 +1,7 @@
-define(["dialogHelper", "loading", "connectionManager", "globalize", "actionsheet", "emby-input", "paper-icon-button-light", "emby-button", "listViewStyle", "material-icons", "formDialogStyle"], function (dialogHelper, loading, connectionManager, globalize, actionsheet) {
+define(["dom", "dialogHelper", "loading", "connectionManager", "globalize", "actionsheet", "emby-input", "paper-icon-button-light", "emby-button", "listViewStyle", "material-icons", "formDialogStyle"], function (dom, dialogHelper, loading, connectionManager, globalize, actionsheet) {
     "use strict";
 
     return function (options) {
-        function parentWithClass(elem, className) {
-            while (!elem.classList || !elem.classList.contains(className)) {
-                elem = elem.parentNode;
-                if (!elem) {
-                    return null;
-                }
-            }
-
-            return elem;
-        }
-
         function mapChannel(button, channelId, providerChannelId) {
             loading.show();
             var providerId = options.providerId;
@@ -26,7 +15,7 @@ define(["dialogHelper", "loading", "connectionManager", "globalize", "actionshee
                 },
                 dataType: "json"
             }).then(function (mapping) {
-                var listItem = parentWithClass(button, "listItem");
+                var listItem = dom.parentWithClass(button, "listItem");
                 button.setAttribute("data-providerid", mapping.ProviderChannelId);
                 listItem.querySelector(".secondary").innerHTML = getMappingSecondaryName(mapping, currentMappingOptions.ProviderName);
                 loading.hide();
@@ -34,7 +23,7 @@ define(["dialogHelper", "loading", "connectionManager", "globalize", "actionshee
         }
 
         function onChannelsElementClick(e) {
-            var btnMap = parentWithClass(e.target, "btnMap");
+            var btnMap = dom.parentWithClass(e.target, "btnMap");
 
             if (btnMap) {
                 var channelId = btnMap.getAttribute("data-id");

src/components/collectioneditor/collectioneditor.js

@@ -1,25 +1,12 @@
-define(['dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectionManager', 'appRouter', 'globalize', 'emby-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button', 'flexStyles'], function (dialogHelper, loading, appHost, layoutManager, connectionManager, appRouter, globalize) {
+define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectionManager', 'appRouter', 'globalize', 'emby-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button', 'flexStyles'], function (dom, dialogHelper, loading, appHost, layoutManager, connectionManager, appRouter, globalize) {
     'use strict';
 
     var currentServerId;
 
-    function parentWithClass(elem, className) {
-
-        while (!elem.classList || !elem.classList.contains(className)) {
-            elem = elem.parentNode;
-
-            if (!elem) {
-                return null;
-            }
-        }
-
-        return elem;
-    }
-
     function onSubmit(e) {
         loading.show();
 
-        var panel = parentWithClass(this, 'dialog');
+        var panel = dom.parentWithClass(this, 'dialog');
 
         var collectionId = panel.querySelector('#selectCollectionToAddTo').value;
 

src/components/confirm/confirm.js

@@ -1,40 +1,65 @@
-define(['dialog', 'globalize'], function (dialog, globalize) {
+define(["browser", "dialog", "globalize"], function(browser, dialog, globalize) {
     'use strict';
 
-    return function (text, title) {
+    function replaceAll(str, find, replace) {
+        return str.split(find).join(replace);
+    }
 
-        var options;
-        if (typeof text === 'string') {
-            options = {
-                title: title,
-                text: text
-            };
-        } else {
-            options = text;
-        }
-
-        var items = [];
-
-        items.push({
-            name: options.cancelText || globalize.translate('ButtonCancel'),
-            id: 'cancel',
-            type: 'cancel'
-        });
-
-        items.push({
-            name: options.confirmText || globalize.translate('ButtonOk'),
-            id: 'ok',
-            type: options.primary === 'delete' ? 'delete' : 'submit'
-        });
-
-        options.buttons = items;
-
-        return dialog(options).then(function (result) {
-            if (result === 'ok') {
-                return Promise.resolve();
+    if (browser.tv && window.confirm) {
+        // Use the native confirm dialog
+        return function (options) {
+            if (typeof options === 'string') {
+                options = {
+                    title: '',
+                    text: options
+                };
             }
 
-            return Promise.reject();
-        });
-    };
+            var text = replaceAll(options.text || '', '<br/>', '\n');
+            var result = confirm(text);
+
+            if (result) {
+                return Promise.resolve();
+            } else {
+                return Promise.reject();
+            }
+        };
+    } else {
+        // Use our own dialog
+        return function (text, title) {
+            var options;
+            if (typeof text === 'string') {
+                options = {
+                    title: title,
+                    text: text
+                };
+            } else {
+                options = text;
+            }
+
+            var items = [];
+
+            items.push({
+                name: options.cancelText || globalize.translate('ButtonCancel'),
+                id: 'cancel',
+                type: 'cancel'
+            });
+
+            items.push({
+                name: options.confirmText || globalize.translate('ButtonOk'),
+                id: 'ok',
+                type: options.primary === 'delete' ? 'delete' : 'submit'
+            });
+
+            options.buttons = items;
+
+            return dialog(options).then(function (result) {
+                if (result === 'ok') {
+                    return Promise.resolve();
+                }
+
+                return Promise.reject();
+            });
+        };
+    }
 });

src/components/confirm/nativeconfirm.js

@@ -1,27 +0,0 @@
-define([], function () {
-    'use strict';
-
-    function replaceAll(str, find, replace) {
-
-        return str.split(find).join(replace);
-    }
-
-    return function (options) {
-
-        if (typeof options === 'string') {
-            options = {
-                title: '',
-                text: options
-            };
-        }
-
-        var text = replaceAll(options.text || '', '<br/>', '\n');
-        var result = confirm(text);
-
-        if (result) {
-            return Promise.resolve();
-        } else {
-            return Promise.reject();
-        }
-    };
-});

src/components/dialogHelper/dialogHelper.js

@@ -169,6 +169,15 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
         }, {
             passive: true
         });
+
+        dom.addEventListener((dlg.dialogContainer || backdrop), 'contextmenu', function (e) {
+            if (e.target === dlg.dialogContainer) {
+                // Close the application dialog menu
+                close(dlg);
+                // Prevent the default browser context menu from appearing
+                e.preventDefault();
+            }
+        });
     }
 
     function isHistoryEnabled(dlg) {

src/components/displaysettings/displaysettings.template.html

@@ -63,7 +63,7 @@
 
     <div class="selectContainer fldDateTimeLocale hide">
         <select is="emby-select" class="selectDateTimeLocale" label="${LabelDateTimeLocale}">
-            <option value="">${AutoBasedOnLanguageSetting}</option>
+            <option value="">${Auto}</option>
             <option value="ar">Arabic</option>
             <option value="be-BY">Belarusian (Belarus)</option>
             <option value="bg-BG">Bulgarian (Bulgaria)</option>

src/components/dom.js

@@ -1,8 +1,18 @@
-define([], function () {
-    'use strict';
+/* eslint-disable indent */
 
-    function parentWithAttribute(elem, name, value) {
+/**
+ * Useful DOM utilities.
+ * @module components/dom
+ */
 
+    /**
+     * Returns parent of element with specified attribute value.
+     * @param {HTMLElement} elem - Element whose parent need to find.
+     * @param {string} name - Attribute name.
+     * @param {mixed} value - Attribute value.
+     * @returns {HTMLElement} Parent with specified attribute value.
+     */
+    export function parentWithAttribute(elem, name, value) {
         while ((value ? elem.getAttribute(name) !== value : !elem.getAttribute(name))) {
             elem = elem.parentNode;
 
@@ -14,8 +24,13 @@ define([], function () {
         return elem;
     }
 
-    function parentWithTag(elem, tagNames) {
-
+    /**
+     * Returns parent of element with one of specified tag names.
+     * @param {HTMLElement} elem - Element whose parent need to find.
+     * @param {(string|Array)} tagNames - Tag name or array of tag names.
+     * @returns {HTMLElement} Parent with one of specified tag names.
+     */
+    export function parentWithTag(elem, tagNames) {
         // accept both string and array passed in
         if (!Array.isArray(tagNames)) {
             tagNames = [tagNames];
@@ -32,9 +47,14 @@ define([], function () {
         return elem;
     }
 
+    /**
+     * Returns _true_ if class list contains one of specified names.
+     * @param {DOMTokenList} classList - Class list.
+     * @param {Array} classNames - Array of class names.
+     * @returns {boolean} _true_ if class list contains one of specified names.
+     */
     function containsAnyClass(classList, classNames) {
-
-        for (var i = 0, length = classNames.length; i < length; i++) {
+        for (let i = 0, length = classNames.length; i < length; i++) {
             if (classList.contains(classNames[i])) {
                 return true;
             }
@@ -42,8 +62,13 @@ define([], function () {
         return false;
     }
 
-    function parentWithClass(elem, classNames) {
-
+    /**
+     * Returns parent of element with one of specified class names.
+     * @param {HTMLElement} elem - Element whose parent need to find.
+     * @param {(string|Array)} classNames - Class name or array of class names.
+     * @returns {HTMLElement} Parent with one of specified class names.
+     */
+    export function parentWithClass(elem, classNames) {
         // accept both string and array passed in
         if (!Array.isArray(classNames)) {
             classNames = [classNames];
@@ -60,9 +85,9 @@ define([], function () {
         return elem;
     }
 
-    var supportsCaptureOption = false;
+    let supportsCaptureOption = false;
     try {
-        var opts = Object.defineProperty({}, 'capture', {
+        const opts = Object.defineProperty({}, 'capture', {
             // eslint-disable-next-line getter-return
             get: function () {
                 supportsCaptureOption = true;
@@ -73,29 +98,58 @@ define([], function () {
         console.debug('error checking capture support');
     }
 
-    function addEventListenerWithOptions(target, type, handler, options) {
-        var optionsOrCapture = options;
+    /**
+     * Adds event listener to specified target.
+     * @param {EventTarget} target - Event target.
+     * @param {string} type - Event type.
+     * @param {function} handler - Event handler.
+     * @param {Object} [options] - Listener options.
+     */
+    export function addEventListener(target, type, handler, options) {
+        let optionsOrCapture = options || {};
         if (!supportsCaptureOption) {
-            optionsOrCapture = options.capture;
+            optionsOrCapture = optionsOrCapture.capture;
         }
         target.addEventListener(type, handler, optionsOrCapture);
     }
 
-    function removeEventListenerWithOptions(target, type, handler, options) {
-        var optionsOrCapture = options;
+    /**
+     * Removes event listener from specified target.
+     * @param {EventTarget} target - Event target.
+     * @param {string} type - Event type.
+     * @param {function} handler - Event handler.
+     * @param {Object} [options] - Listener options.
+     */
+    export function removeEventListener(target, type, handler, options) {
+        let optionsOrCapture = options || {};
         if (!supportsCaptureOption) {
-            optionsOrCapture = options.capture;
+            optionsOrCapture = optionsOrCapture.capture;
         }
         target.removeEventListener(type, handler, optionsOrCapture);
     }
 
-    var windowSize;
-    var windowSizeEventsBound;
+    /**
+     * Cached window size.
+     */
+    let windowSize;
+
+    /**
+     * Flag of event listener bound.
+     */
+    let windowSizeEventsBound;
+
+    /**
+     * Resets cached window size.
+     */
     function clearWindowSize() {
         windowSize = null;
     }
 
-    function getWindowSize() {
+    /**
+     * Returns window size.
+     * @returns {Object} Window size.
+     */
+    export function getWindowSize() {
         if (!windowSize) {
             windowSize = {
                 innerHeight: window.innerHeight,
@@ -104,46 +158,60 @@ define([], function () {
 
             if (!windowSizeEventsBound) {
                 windowSizeEventsBound = true;
-                addEventListenerWithOptions(window, "orientationchange", clearWindowSize, { passive: true });
-                addEventListenerWithOptions(window, 'resize', clearWindowSize, { passive: true });
+                addEventListener(window, "orientationchange", clearWindowSize, { passive: true });
+                addEventListener(window, 'resize', clearWindowSize, { passive: true });
             }
         }
 
         return windowSize;
     }
 
-    var standardWidths = [480, 720, 1280, 1440, 1920, 2560, 3840, 5120, 7680];
-    function getScreenWidth() {
-        var width = window.innerWidth;
-        var height = window.innerHeight;
+    /**
+     * Standard screen widths.
+     */
+    const standardWidths = [480, 720, 1280, 1440, 1920, 2560, 3840, 5120, 7680];
+
+    /**
+     * Returns screen width.
+     * @returns {number} Screen width.
+     */
+    export function getScreenWidth() {
+        let width = window.innerWidth;
+        const height = window.innerHeight;
 
         if (height > width) {
             width = height * (16.0 / 9.0);
         }
 
-        var closest = standardWidths.sort(function (a, b) {
+        const closest = standardWidths.sort(function (a, b) {
             return Math.abs(width - a) - Math.abs(width - b);
         })[0];
 
         return closest;
     }
 
-    var _animationEvent;
-    function whichAnimationEvent() {
+    /**
+     * Name of animation end event.
+     */
+    let _animationEvent;
 
+    /**
+     * Returns name of animation end event.
+     * @returns {string} Name of animation end event.
+     */
+    export function whichAnimationEvent() {
         if (_animationEvent) {
             return _animationEvent;
         }
 
-        var t;
-        var el = document.createElement("div");
-        var animations = {
+        const el = document.createElement("div");
+        const animations = {
             "animation": "animationend",
             "OAnimation": "oAnimationEnd",
             "MozAnimation": "animationend",
             "WebkitAnimation": "webkitAnimationEnd"
         };
-        for (t in animations) {
+        for (let t in animations) {
             if (el.style[t] !== undefined) {
                 _animationEvent = animations[t];
                 return animations[t];
@@ -154,26 +222,36 @@ define([], function () {
         return _animationEvent;
     }
 
-    function whichAnimationCancelEvent() {
-
+    /**
+     * Returns name of animation cancel event.
+     * @returns {string} Name of animation cancel event.
+     */
+    export function whichAnimationCancelEvent() {
         return whichAnimationEvent().replace('animationend', 'animationcancel').replace('AnimationEnd', 'AnimationCancel');
     }
 
-    var _transitionEvent;
-    function whichTransitionEvent() {
+    /**
+     * Name of transition end event.
+     */
+    let _transitionEvent;
+
+    /**
+     * Returns name of transition end event.
+     * @returns {string} Name of transition end event.
+     */
+    export function whichTransitionEvent() {
         if (_transitionEvent) {
             return _transitionEvent;
         }
 
-        var t;
-        var el = document.createElement("div");
-        var transitions = {
+        const el = document.createElement("div");
+        const transitions = {
             "transition": "transitionend",
             "OTransition": "oTransitionEnd",
             "MozTransition": "transitionend",
             "WebkitTransition": "webkitTransitionEnd"
         };
-        for (t in transitions) {
+        for (let t in transitions) {
             if (el.style[t] !== undefined) {
                 _transitionEvent = transitions[t];
                 return transitions[t];
@@ -184,16 +262,15 @@ define([], function () {
         return _transitionEvent;
     }
 
-    return {
+    export default {
         parentWithAttribute: parentWithAttribute,
         parentWithClass: parentWithClass,
         parentWithTag: parentWithTag,
-        addEventListener: addEventListenerWithOptions,
-        removeEventListener: removeEventListenerWithOptions,
+        addEventListener: addEventListener,
+        removeEventListener: removeEventListener,
         getWindowSize: getWindowSize,
         getScreenWidth: getScreenWidth,
         whichTransitionEvent: whichTransitionEvent,
         whichAnimationEvent: whichAnimationEvent,
         whichAnimationCancelEvent: whichAnimationCancelEvent
     };
-});

src/components/filedownloader.js

@@ -1,18 +1,14 @@
-define(['multi-download'], function (multiDownload) {
-    'use strict';
+import multiDownload from "multi-download"
 
-    return {
-        download: function (items) {
+export function download(items) {
 
-            if (window.NativeShell) {
-                items.map(function (item) {
-                    window.NativeShell.downloadFile(item.url);
-                });
-            } else {
-                multiDownload(items.map(function (item) {
-                    return item.url;
-                }));
-            }
-        }
-    };
-});
+    if (window.NativeShell) {
+        items.map(function (item) {
+            window.NativeShell.downloadFile(item.url);
+        });
+    } else {
+        multiDownload(items.map(function (item) {
+            return item.url;
+        }));
+    }
+}

src/components/filesystem.js

@@ -1,18 +1,13 @@
-define([], function () {
-    'use strict';
+export function fileExists(path) {
+    if (window.NativeShell && window.NativeShell.FileSystem) {
+        return window.NativeShell.FileSystem.fileExists(path);
+    }
+    return Promise.reject();
+}
 
-    return {
-        fileExists: function (path) {
-            if (window.NativeShell && window.NativeShell.FileSystem) {
-                return window.NativeShell.FileSystem.fileExists(path);
-            }
-            return Promise.reject();
-        },
-        directoryExists: function (path) {
-            if (window.NativeShell && window.NativeShell.FileSystem) {
-                return window.NativeShell.FileSystem.directoryExists(path);
-            }
-            return Promise.reject();
-        }
-    };
-});
+export function directoryExists(path) {
+    if (window.NativeShell && window.NativeShell.FileSystem) {
+        return window.NativeShell.FileSystem.directoryExists(path);
+    }
+    return Promise.reject();
+}

src/components/filterdialog/filterdialog.js

@@ -1,4 +1,4 @@
-define(["dialogHelper", "globalize", "connectionManager", "events", "browser", "require", "emby-checkbox", "emby-collapse", "css!./style"], function (dialogHelper, globalize, connectionManager, events, browser, require) {
+define(["dom", "dialogHelper", "globalize", "connectionManager", "events", "browser", "require", "emby-checkbox", "emby-collapse", "css!./style"], function (dom, dialogHelper, globalize, connectionManager, events, browser, require) {
     "use strict";
 
     function renderOptions(context, selector, cssClass, items, isCheckedFn) {
@@ -106,16 +106,6 @@ define(["dialogHelper", "globalize", "connectionManager", "events", "browser", "
         events.trigger(instance, "filterchange");
     }
 
-    function parentWithClass(elem, className) {
-        while (!elem.classList || !elem.classList.contains(className)) {
-            elem = elem.parentNode;
-            if (!elem) {
-                return null;
-            }
-        }
-        return elem;
-    }
-
     function setVisibility(context, options) {
         if (options.mode == "livetvchannels" || options.mode == "albums" || options.mode == "artists" || options.mode == "albumartists" || options.mode == "songs") {
             hideByClass(context, "videoStandard");
@@ -320,7 +310,7 @@ define(["dialogHelper", "globalize", "connectionManager", "events", "browser", "
                 triggerChange(self);
             });
             context.addEventListener("change", function (e) {
-                var chkGenreFilter = parentWithClass(e.target, "chkGenreFilter");
+                var chkGenreFilter = dom.parentWithClass(e.target, "chkGenreFilter");
                 if (chkGenreFilter) {
                     var filterName = chkGenreFilter.getAttribute("data-filter");
                     var filters = query.Genres || "";
@@ -334,7 +324,7 @@ define(["dialogHelper", "globalize", "connectionManager", "events", "browser", "
                     triggerChange(self);
                     return;
                 }
-                var chkTagFilter = parentWithClass(e.target, "chkTagFilter");
+                var chkTagFilter = dom.parentWithClass(e.target, "chkTagFilter");
                 if (chkTagFilter) {
                     var filterName = chkTagFilter.getAttribute("data-filter");
                     var filters = query.Tags || "";
@@ -348,7 +338,7 @@ define(["dialogHelper", "globalize", "connectionManager", "events", "browser", "
                     triggerChange(self);
                     return;
                 }
-                var chkYearFilter = parentWithClass(e.target, "chkYearFilter");
+                var chkYearFilter = dom.parentWithClass(e.target, "chkYearFilter");
                 if (chkYearFilter) {
                     var filterName = chkYearFilter.getAttribute("data-filter");
                     var filters = query.Years || "";
@@ -362,7 +352,7 @@ define(["dialogHelper", "globalize", "connectionManager", "events", "browser", "
                     triggerChange(self);
                     return;
                 }
-                var chkOfficialRatingFilter = parentWithClass(e.target, "chkOfficialRatingFilter");
+                var chkOfficialRatingFilter = dom.parentWithClass(e.target, "chkOfficialRatingFilter");
                 if (chkOfficialRatingFilter) {
                     var filterName = chkOfficialRatingFilter.getAttribute("data-filter");
                     var filters = query.OfficialRatings || "";

src/components/htmlvideoplayer/plugin.js

@@ -80,7 +80,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
         if (track) {
             var format = (track.Codec || '').toLowerCase();
             if (format === 'ssa' || format === 'ass') {
-                // libjass is needed here
                 return false;
             }
         }
@@ -1047,7 +1046,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
             lastCustomTrackMs = 0;
         }
 
-        function renderWithSubtitlesOctopus(videoElement, track, item) {
+        function renderSsaAss(videoElement, track, item) {
             var attachments = self._currentPlayOptions.mediaSource.MediaAttachments || [];
             var options = {
                 video: videoElement,
@@ -1059,89 +1058,25 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
                 legacyWorkerUrl: appRouter.baseUrl() + "/libraries/subtitles-octopus-worker-legacy.js",
                 onError: function() {
                     htmlMediaHelper.onErrorInternal(self, 'mediadecodeerror');
-                }
+                },
+
+                // new octopus options; override all, even defaults
+                renderMode: 'blend',
+                dropAllAnimations: false,
+                libassMemoryLimit: 40,
+                libassGlyphLimit: 40,
+                targetFps: 24,
+                prescaleTradeoff: 0.8,
+                softHeightLimit: 1080,
+                hardHeightLimit: 2160,
+                resizeVariation: 0.2,
+                renderAhead: 90
             };
             require(['JavascriptSubtitlesOctopus'], function(SubtitlesOctopus) {
                 currentSubtitlesOctopus = new SubtitlesOctopus(options);
             });
         }
 
-        function renderWithLibjass(videoElement, track, item) {
-
-            var rendererSettings = {};
-
-            if (browser.ps4) {
-                // Text outlines are not rendering very well
-                rendererSettings.enableSvg = false;
-            } else if (browser.edge || browser.msie) {
-                // svg not rendering at all
-                rendererSettings.enableSvg = false;
-            }
-
-            // probably safer to just disable everywhere
-            rendererSettings.enableSvg = false;
-
-            require(['libjass', 'ResizeObserver'], function (libjass, ResizeObserver) {
-
-                libjass.ASS.fromUrl(getTextTrackUrl(track, item)).then(function (ass) {
-
-                    var clock = new libjass.renderers.ManualClock();
-                    currentClock = clock;
-
-                    // Create a DefaultRenderer using the video element and the ASS object
-                    var renderer = new libjass.renderers.WebRenderer(ass, clock, videoElement.parentNode, rendererSettings);
-
-                    currentAssRenderer = renderer;
-
-                    renderer.addEventListener("ready", function () {
-                        try {
-                            renderer.resize(videoElement.offsetWidth, videoElement.offsetHeight, 0, 0);
-
-                            if (!self._resizeObserver) {
-                                self._resizeObserver = new ResizeObserver(onVideoResize, {});
-                                self._resizeObserver.observe(videoElement);
-                            }
-                            //clock.pause();
-                        } catch (ex) {
-                            //alert(ex);
-                        }
-                    });
-                }, function () {
-                    htmlMediaHelper.onErrorInternal(self, 'mediadecodeerror');
-                });
-            });
-        }
-
-        function renderSsaAss(videoElement, track, item) {
-            if (supportsCanvas() && supportsWebWorkers()) {
-                console.debug('rendering subtitles with SubtitlesOctopus');
-                renderWithSubtitlesOctopus(videoElement, track, item);
-            } else {
-                console.debug('rendering subtitles with libjass');
-                renderWithLibjass(videoElement, track, item);
-            }
-        }
-
-        function onVideoResize() {
-            if (browser.iOS) {
-                // the new sizes will be delayed for about 500ms with wkwebview
-                setTimeout(resetVideoRendererSize, 500);
-            } else {
-                resetVideoRendererSize();
-            }
-        }
-
-        function resetVideoRendererSize() {
-            var renderer = currentAssRenderer;
-            if (renderer) {
-                var videoElement = self._mediaElement;
-                var width = videoElement.offsetWidth;
-                var height = videoElement.offsetHeight;
-                console.debug('videoElement resized: ' + width + 'x' + height);
-                renderer.resize(width, height, 0, 0);
-            }
-        }
-
         function requiresCustomSubtitlesElement() {
 
             // after a system update, ps4 isn't showing anything when creating a track element dynamically
@@ -1231,7 +1166,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
             if (!itemHelper.isLocalItem(item) || track.IsExternal) {
                 var format = (track.Codec || '').toLowerCase();
                 if (format === 'ssa' || format === 'ass') {
-                    // libjass is needed here
                     renderSsaAss(videoElement, track, item);
                     return;
                 }

src/components/imagedownloader/imagedownloader.js

@@ -1,4 +1,4 @@
-define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader', 'browser', 'layoutManager', 'scrollHelper', 'globalize', 'require', 'emby-checkbox', 'paper-icon-button-light', 'emby-button', 'formDialogStyle', 'cardStyle'], function (loading, appHost, dialogHelper, connectionManager, imageLoader, browser, layoutManager, scrollHelper, globalize, require) {
+define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader', 'browser', 'layoutManager', 'scrollHelper', 'globalize', 'require', 'emby-checkbox', 'paper-icon-button-light', 'emby-button', 'formDialogStyle', 'cardStyle'], function (dom, loading, appHost, dialogHelper, connectionManager, imageLoader, browser, layoutManager, scrollHelper, globalize, require) {
     'use strict';
 
     var enableFocusTransform = !browser.slow && !browser.edge;
@@ -126,21 +126,7 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader'
         return html;
     }
 
-    function parentWithClass(elem, className) {
-
-        while (!elem.classList || !elem.classList.contains(className)) {
-            elem = elem.parentNode;
-
-            if (!elem) {
-                return null;
-            }
-        }
-
-        return elem;
-    }
-
     function downloadRemoteImage(page, apiClient, url, type, provider) {
-
         var options = getBaseRemoteOptions();
 
         options.Type = type;
@@ -152,7 +138,7 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader'
         apiClient.downloadRemoteImage(options).then(function () {
 
             hasChanges = true;
-            var dlg = parentWithClass(page, 'dialog');
+            var dlg = dom.parentWithClass(page, 'dialog');
             dialogHelper.close(dlg);
         });
     }
@@ -162,7 +148,6 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader'
     }
 
     function getRemoteImageHtml(image, imageType, apiClient) {
-
         var tagName = layoutManager.tv ? 'button' : 'div';
         var enableFooterButtons = !layoutManager.tv;
 
@@ -293,7 +278,6 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader'
     }
 
     function initEditor(page, apiClient) {
-
         page.querySelector('#selectBrowsableImageType').addEventListener('change', function () {
             browsableImageType = this.value;
             browsableImageStartIndex = 0;
@@ -319,14 +303,14 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader'
 
         page.addEventListener('click', function (e) {
 
-            var btnDownloadRemoteImage = parentWithClass(e.target, 'btnDownloadRemoteImage');
+            var btnDownloadRemoteImage = dom.parentWithClass(e.target, 'btnDownloadRemoteImage');
             if (btnDownloadRemoteImage) {
-                var card = parentWithClass(btnDownloadRemoteImage, 'card');
+                var card = dom.parentWithClass(btnDownloadRemoteImage, 'card');
                 downloadRemoteImage(page, apiClient, card.getAttribute('data-imageurl'), card.getAttribute('data-imagetype'), card.getAttribute('data-imageprovider'));
                 return;
             }
 
-            var btnImageCard = parentWithClass(e.target, 'btnImageCard');
+            var btnImageCard = dom.parentWithClass(e.target, 'btnImageCard');
             if (btnImageCard) {
                 downloadRemoteImage(page, apiClient, btnImageCard.getAttribute('data-imageurl'), btnImageCard.getAttribute('data-imagetype'), btnImageCard.getAttribute('data-imageprovider'));
             }
@@ -334,7 +318,6 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader'
     }
 
     function showEditor(itemId, serverId, itemType) {
-
         loading.show();
 
         require(['text!./imagedownloader.template.html'], function (template) {
@@ -380,7 +363,6 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader'
     }
 
     function onDialogClosed() {
-
         var dlg = this;
 
         if (layoutManager.tv) {
@@ -397,9 +379,7 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader'
 
     return {
         show: function (itemId, serverId, itemType, imageType) {
-
             return new Promise(function (resolve, reject) {
-
                 currentResolve = resolve;
                 currentReject = reject;
                 hasChanges = false;

src/components/input/keyboardnavigation.js

@@ -1,165 +1,168 @@
-define(["inputManager", "layoutManager"], function (inputManager, layoutManager) {
-    "use strict";
+/**
+ * Module for performing keyboard navigation.
+ * @module components/input/keyboardnavigation
+ */
 
-    /**
-     * Key name mapping.
-     */
-    // Add more to support old browsers
-    var KeyNames = {
-        13: "Enter",
-        19: "Pause",
-        27: "Escape",
-        32: "Space",
-        37: "ArrowLeft",
-        38: "ArrowUp",
-        39: "ArrowRight",
-        40: "ArrowDown",
-        // MediaRewind (Tizen/WebOS)
-        412: "MediaRewind",
-        // MediaStop (Tizen/WebOS)
-        413: "MediaStop",
-        // MediaPlay (Tizen/WebOS)
-        415: "MediaPlay",
-        // MediaFastForward (Tizen/WebOS)
-        417: "MediaFastForward",
-        // Back (WebOS)
-        461: "Back",
-        // Back (Tizen)
-        10009: "Back",
-        // MediaTrackPrevious (Tizen)
-        10232: "MediaTrackPrevious",
-        // MediaTrackNext (Tizen)
-        10233: "MediaTrackNext",
-        // MediaPlayPause (Tizen)
-        10252: "MediaPlayPause"
-    };
+import inputManager from "inputManager";
+import layoutManager from "layoutManager";
 
-    /**
-     * Keys used for keyboard navigation.
-     */
-    var NavigationKeys = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"];
+/**
+ * Key name mapping.
+ */
+const KeyNames = {
+    13: "Enter",
+    19: "Pause",
+    27: "Escape",
+    32: "Space",
+    37: "ArrowLeft",
+    38: "ArrowUp",
+    39: "ArrowRight",
+    40: "ArrowDown",
+    // MediaRewind (Tizen/WebOS)
+    412: "MediaRewind",
+    // MediaStop (Tizen/WebOS)
+    413: "MediaStop",
+    // MediaPlay (Tizen/WebOS)
+    415: "MediaPlay",
+    // MediaFastForward (Tizen/WebOS)
+    417: "MediaFastForward",
+    // Back (WebOS)
+    461: "Back",
+    // Back (Tizen)
+    10009: "Back",
+    // MediaTrackPrevious (Tizen)
+    10232: "MediaTrackPrevious",
+    // MediaTrackNext (Tizen)
+    10233: "MediaTrackNext",
+    // MediaPlayPause (Tizen)
+    10252: "MediaPlayPause"
+};
 
-    var hasFieldKey = false;
-    try {
-        hasFieldKey = "key" in new KeyboardEvent("keydown");
-    } catch (e) {
-        console.error("error checking 'key' field");
+/**
+ * Keys used for keyboard navigation.
+ */
+const NavigationKeys = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"];
+
+let hasFieldKey = false;
+try {
+    hasFieldKey = "key" in new KeyboardEvent("keydown");
+} catch (e) {
+    console.error("error checking 'key' field");
+}
+
+if (!hasFieldKey) {
+    // Add [a..z]
+    for (let i = 65; i <= 90; i++) {
+        KeyNames[i] = String.fromCharCode(i).toLowerCase();
     }
+}
 
-    if (!hasFieldKey) {
-        // Add [a..z]
-        for (var i = 65; i <= 90; i++) {
-            KeyNames[i] = String.fromCharCode(i).toLowerCase();
+/**
+ * Returns key name from event.
+ *
+ * @param {KeyboardEvent} event - Keyboard event.
+ * @return {string} Key name.
+ */
+export function getKeyName(event) {
+    return KeyNames[event.keyCode] || event.key;
+}
+
+/**
+ * Returns _true_ if key is used for navigation.
+ *
+ * @param {string} key - Key name.
+ * @return {boolean} _true_ if key is used for navigation.
+ */
+export function isNavigationKey(key) {
+    return NavigationKeys.indexOf(key) != -1;
+}
+
+export function enable() {
+    document.addEventListener("keydown", function (e) {
+        const key = getKeyName(e);
+
+        // Ignore navigation keys for non-TV
+        if (!layoutManager.tv && isNavigationKey(key)) {
+            return;
         }
-    }
 
-    /**
-     * Returns key name from event.
-     *
-     * @param {KeyboardEvent} keyboard event
-     * @return {string} key name
-     */
-    function getKeyName(event) {
-        return KeyNames[event.keyCode] || event.key;
-    }
+        let capture = true;
 
-    /**
-     * Returns _true_ if key is used for navigation.
-     *
-     * @param {string} key name
-     * @return {boolean} _true_ if key is used for navigation
-     */
-    function isNavigationKey(key) {
-        return NavigationKeys.indexOf(key) != -1;
-    }
+        switch (key) {
+            case "ArrowLeft":
+                inputManager.handle("left");
+                break;
+            case "ArrowUp":
+                inputManager.handle("up");
+                break;
+            case "ArrowRight":
+                inputManager.handle("right");
+                break;
+            case "ArrowDown":
+                inputManager.handle("down");
+                break;
 
-    function enable() {
-        document.addEventListener("keydown", function (e) {
-            var key = getKeyName(e);
+            case "Back":
+                inputManager.handle("back");
+                break;
 
-            // Ignore navigation keys for non-TV
-            if (!layoutManager.tv && isNavigationKey(key)) {
-                return;
-            }
-
-            var capture = true;
-
-            switch (key) {
-                case "ArrowLeft":
-                    inputManager.handle("left");
-                    break;
-                case "ArrowUp":
-                    inputManager.handle("up");
-                    break;
-                case "ArrowRight":
-                    inputManager.handle("right");
-                    break;
-                case "ArrowDown":
-                    inputManager.handle("down");
-                    break;
-
-                case "Back":
+            case "Escape":
+                if (layoutManager.tv) {
                     inputManager.handle("back");
-                    break;
-
-                case "Escape":
-                    if (layoutManager.tv) {
-                        inputManager.handle("back");
-                    } else {
-                        capture = false;
-                    }
-                    break;
-
-                case "MediaPlay":
-                    inputManager.handle("play");
-                    break;
-                case "Pause":
-                    inputManager.handle("pause");
-                    break;
-                case "MediaPlayPause":
-                    inputManager.handle("playpause");
-                    break;
-                case "MediaRewind":
-                    inputManager.handle("rewind");
-                    break;
-                case "MediaFastForward":
-                    inputManager.handle("fastforward");
-                    break;
-                case "MediaStop":
-                    inputManager.handle("stop");
-                    break;
-                case "MediaTrackPrevious":
-                    inputManager.handle("previoustrack");
-                    break;
-                case "MediaTrackNext":
-                    inputManager.handle("nexttrack");
-                    break;
-
-                default:
+                } else {
                     capture = false;
-            }
+                }
+                break;
 
-            if (capture) {
-                console.debug("disabling default event handling");
-                e.preventDefault();
-            }
-        });
-    }
+            case "MediaPlay":
+                inputManager.handle("play");
+                break;
+            case "Pause":
+                inputManager.handle("pause");
+                break;
+            case "MediaPlayPause":
+                inputManager.handle("playpause");
+                break;
+            case "MediaRewind":
+                inputManager.handle("rewind");
+                break;
+            case "MediaFastForward":
+                inputManager.handle("fastforward");
+                break;
+            case "MediaStop":
+                inputManager.handle("stop");
+                break;
+            case "MediaTrackPrevious":
+                inputManager.handle("previoustrack");
+                break;
+            case "MediaTrackNext":
+                inputManager.handle("nexttrack");
+                break;
 
-    // Gamepad initialisation. No script is required if no gamepads are present at init time, saving a bit of resources.
-    // Whenever the gamepad is connected, we hand all the control of the gamepad to gamepadtokey.js by removing the event handler
-    function attachGamepadScript(e) {
-        console.log("Gamepad connected! Attaching gamepadtokey.js script");
-        window.removeEventListener("gamepadconnected", attachGamepadScript);
-        require(["components/input/gamepadtokey"]);
-    }
+            default:
+                capture = false;
+        }
 
-    // No need to check for gamepads manually at load time, the eventhandler will be fired for that
-    window.addEventListener("gamepadconnected", attachGamepadScript);
+        if (capture) {
+            console.debug("disabling default event handling");
+            e.preventDefault();
+        }
+    });
+}
 
-    return {
-        enable: enable,
-        getKeyName: getKeyName,
-        isNavigationKey: isNavigationKey
-    };
-});
+// Gamepad initialisation. No script is required if no gamepads are present at init time, saving a bit of resources.
+// Whenever the gamepad is connected, we hand all the control of the gamepad to gamepadtokey.js by removing the event handler
+function attachGamepadScript(e) {
+    console.log("Gamepad connected! Attaching gamepadtokey.js script");
+    window.removeEventListener("gamepadconnected", attachGamepadScript);
+    require(["components/input/gamepadtokey"]);
+}
+
+// No need to check for gamepads manually at load time, the eventhandler will be fired for that
+window.addEventListener("gamepadconnected", attachGamepadScript);
+
+export default {
+    enable: enable,
+    getKeyName: getKeyName,
+    isNavigationKey: isNavigationKey
+};

src/components/itemidentifier/itemidentifier.js

@@ -296,8 +296,6 @@ define(["dialogHelper", "loading", "connectionManager", "require", "globalize",
 
             var html = "";
 
-            var providerIds = item.ProviderIds || {};
-
             for (var i = 0, length = idList.length; i < length; i++) {
 
                 var idInfo = idList[i];
@@ -306,9 +304,12 @@ define(["dialogHelper", "loading", "connectionManager", "require", "globalize",
 
                 html += '<div class="inputContainer">';
 
-                var idLabel = globalize.translate("LabelDynamicExternalId").replace("{0}", idInfo.Name);
+                var fullName = idInfo.Name;
+                if (idInfo.Type) {
+                    fullName = idInfo.Name + " " + globalize.translate(idInfo.Type);
+                }
 
-                var value = providerIds[idInfo.Key] || "";
+                var idLabel = globalize.translate("LabelDynamicExternalId").replace("{0}", fullName);
 
                 html += '<input is="emby-input" class="txtLookupId" data-providerkey="' + idInfo.Key + '" id="' + id + '" label="' + idLabel + '"/>';
 

src/components/libraryoptionseditor/libraryoptionseditor.js

@@ -396,6 +396,12 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
             parent.querySelector(".chkEnableEmbeddedTitlesContainer").classList.remove("hide");
         }
 
+        if (contentType === "tvshows") {
+            parent.querySelector(".chkEnableEmbeddedEpisodeInfosContainer").classList.remove("hide");
+        } else {
+            parent.querySelector(".chkEnableEmbeddedEpisodeInfosContainer").classList.add("hide");
+        }
+
         return populateMetadataSettings(parent, contentType);
     }
 
@@ -493,6 +499,7 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
             SeasonZeroDisplayName: parent.querySelector("#txtSeasonZeroName").value,
             AutomaticRefreshIntervalDays: parseInt(parent.querySelector("#selectAutoRefreshInterval").value),
             EnableEmbeddedTitles: parent.querySelector("#chkEnableEmbeddedTitles").checked,
+            EnableEmbeddedEpisodeInfos: parent.querySelector("#chkEnableEmbeddedEpisodeInfos").checked,
             SkipSubtitlesIfEmbeddedSubtitlesPresent: parent.querySelector("#chkSkipIfGraphicalSubsPresent").checked,
             SkipSubtitlesIfAudioTrackMatches: parent.querySelector("#chkSkipIfAudioTrackPresent").checked,
             SaveSubtitlesWithMedia: parent.querySelector("#chkSaveSubtitlesLocally").checked,
@@ -545,6 +552,7 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
         parent.querySelector("#chkImportMissingEpisodes").checked = options.ImportMissingEpisodes;
         parent.querySelector(".chkAutomaticallyGroupSeries").checked = options.EnableAutomaticSeriesGrouping;
         parent.querySelector("#chkEnableEmbeddedTitles").checked = options.EnableEmbeddedTitles;
+        parent.querySelector("#chkEnableEmbeddedEpisodeInfos").checked = options.EnableEmbeddedEpisodeInfos;
         parent.querySelector("#chkSkipIfGraphicalSubsPresent").checked = options.SkipSubtitlesIfEmbeddedSubtitlesPresent;
         parent.querySelector("#chkSaveSubtitlesLocally").checked = options.SaveSubtitlesWithMedia;
         parent.querySelector("#chkSkipIfAudioTrackPresent").checked = options.SkipSubtitlesIfAudioTrackMatches;

src/components/libraryoptionseditor/libraryoptionseditor.template.html

@@ -28,6 +28,13 @@
     </label>
     <div class="fieldDescription checkboxFieldDescription">${PreferEmbeddedTitlesOverFileNamesHelp}</div>
 </div>
+<div class="checkboxContainer checkboxContainer-withDescription chkEnableEmbeddedEpisodeInfosContainer hide advanced">
+    <label>
+        <input is="emby-checkbox" type="checkbox" id="chkEnableEmbeddedEpisodeInfos" />
+        <span>${PreferEmbeddedEpisodeInfosOverFileNames}</span>
+    </label>
+    <div class="fieldDescription checkboxFieldDescription">${PreferEmbeddedEpisodeInfosOverFileNamesHelp}</div>
+</div>
 
 <div class="checkboxContainer checkboxContainer-withDescription advanced">
     <label>

src/components/metadataeditor/metadataeditor.js

@@ -465,7 +465,12 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
             var id = "txt1" + idInfo.Key;
             var formatString = idInfo.UrlFormatString || '';
 
-            var labelText = globalize.translate('LabelDynamicExternalId').replace('{0}', idInfo.Name);
+            var fullName = idInfo.Name;
+            if (idInfo.Type) {
+                fullName = idInfo.Name + " " + globalize.translate(idInfo.Type);
+            }
+
+            var labelText = globalize.translate("LabelDynamicExternalId").replace("{0}", fullName);
 
             html += '<div class="inputContainer">';
             html += '<div class="flex align-items-center">';

src/components/playback/playbackmanager.js

@@ -3162,7 +3162,8 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
 
             // User clicked stop or content ended
             var state = self.getPlayerState(player);
-            var streamInfo = getPlayerData(player).streamInfo;
+            var data = getPlayerData(player);
+            var streamInfo = data.streamInfo;
 
             var nextItem = self._playNextAfterEnded ? self._playQueueManager.getNextItemInfo() : null;
 
@@ -3210,6 +3211,9 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                 showPlaybackInfoErrorMessage(self, displayErrorCode, nextItem);
             } else if (nextItem) {
                 self.nextTrack();
+            } else {
+                // Nothing more to play - clear data
+                data.streamInfo = null;
             }
         }
 

src/components/playlisteditor/playlisteditor.js

@@ -1,24 +1,10 @@
-define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager', 'connectionManager', 'userSettings', 'appRouter', 'globalize', 'emby-input', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button'], function (shell, dialogHelper, loading, layoutManager, playbackManager, connectionManager, userSettings, appRouter, globalize) {
+define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager', 'connectionManager', 'userSettings', 'appRouter', 'globalize', 'emby-input', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button'], function (dom, shell, dialogHelper, loading, layoutManager, playbackManager, connectionManager, userSettings, appRouter, globalize) {
     'use strict';
 
     var currentServerId;
 
-    function parentWithClass(elem, className) {
-
-        while (!elem.classList || !elem.classList.contains(className)) {
-            elem = elem.parentNode;
-
-            if (!elem) {
-                return null;
-            }
-        }
-
-        return elem;
-    }
-
     function onSubmit(e) {
-
-        var panel = parentWithClass(this, 'dialog');
+        var panel = dom.parentWithClass(this, 'dialog');
 
         var playlistId = panel.querySelector('#selectPlaylistToAddTo').value;
         var apiClient = connectionManager.getApiClient(currentServerId);
@@ -35,11 +21,9 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager',
     }
 
     function createPlaylist(apiClient, dlg) {
-
         loading.show();
 
         var url = apiClient.getUrl("Playlists", {
-
             Name: dlg.querySelector('#txtNewPlaylistName').value,
             Ids: dlg.querySelector('.fldSelectedItemIds').value || '',
             userId: apiClient.getCurrentUserId()
@@ -50,9 +34,7 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager',
             type: "POST",
             url: url,
             dataType: "json"
-
         }).then(function (result) {
-
             loading.hide();
 
             var id = result.Id;
@@ -63,16 +45,13 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager',
     }
 
     function redirectToPlaylist(apiClient, id) {
-
         appRouter.showItem(id, apiClient.serverId());
     }
 
     function addToPlaylist(apiClient, dlg, id) {
-
         var itemIds = dlg.querySelector('.fldSelectedItemIds').value || '';
 
         if (id === 'queue') {
-
             playbackManager.queue({
                 serverId: apiClient.serverId(),
                 ids: itemIds.split(',')
@@ -85,7 +64,6 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager',
         loading.show();
 
         var url = apiClient.getUrl("Playlists/" + id + "/Items", {
-
             Ids: itemIds,
             userId: apiClient.getCurrentUserId()
         });
@@ -95,7 +73,6 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager',
             url: url
 
         }).then(function () {
-
             loading.hide();
 
             dlg.submitted = true;
@@ -108,7 +85,6 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager',
     }
 
     function populatePlaylists(editorOptions, panel) {
-
         var select = panel.querySelector('#selectPlaylistToAddTo');
 
         loading.hide();
@@ -116,7 +92,6 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager',
         panel.querySelector('.newPlaylistInfo').classList.add('hide');
 
         var options = {
-
             Recursive: true,
             IncludeItemTypes: "Playlist",
             SortBy: 'SortName',
@@ -125,7 +100,6 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager',
 
         var apiClient = connectionManager.getApiClient(currentServerId);
         apiClient.getItems(apiClient.getCurrentUserId(), options).then(function (result) {
-
             var html = '';
 
             if (editorOptions.enableAddToPlayQueue !== false && playbackManager.isPlaying()) {
@@ -135,7 +109,6 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager',
             html += '<option value="">' + globalize.translate('OptionNew') + '</option>';
 
             html += result.Items.map(function (i) {
-
                 return '<option value="' + i.Id + '">' + i.Name + '</option>';
             });
 
@@ -159,7 +132,6 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager',
     }
 
     function getEditorHtml(items) {
-
         var html = '';
 
         html += '<div class="formDialogContent smoothScrollY" style="padding-top:2em;">';
@@ -195,7 +167,6 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager',
     }
 
     function initEditor(content, options, items) {
-
         content.querySelector('#selectPlaylistToAddTo').addEventListener('change', function () {
             if (this.value) {
                 content.querySelector('.newPlaylistInfo').classList.add('hide');
@@ -235,7 +206,6 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager',
     }
 
     PlaylistEditor.prototype.show = function (options) {
-
         var items = options.items || {};
         currentServerId = options.serverId;
 
@@ -272,7 +242,6 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager',
         initEditor(dlg, options, items);
 
         dlg.querySelector('.btnCancel').addEventListener('click', function () {
-
             dialogHelper.close(dlg);
         });
 
@@ -281,7 +250,6 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager',
         }
 
         return dialogHelper.open(dlg).then(function () {
-
             if (layoutManager.tv) {
                 centerFocus(dlg.querySelector('.formDialogContent'), false, false);
             }

src/components/prompt/nativeprompt.js

@@ -1,28 +0,0 @@
-define([], function () {
-    'use strict';
-
-    function replaceAll(str, find, replace) {
-
-        return str.split(find).join(replace);
-    }
-
-    return function (options) {
-
-        if (typeof options === 'string') {
-            options = {
-                label: '',
-                text: options
-            };
-        }
-
-        var label = replaceAll(options.label || '', '<br/>', '\n');
-
-        var result = prompt(label, options.text || '');
-
-        if (result) {
-            return Promise.resolve(result);
-        } else {
-            return Promise.reject(result);
-        }
-    };
-});

src/components/prompt/prompt.js

@@ -1,6 +1,10 @@
-define(['dialogHelper', 'layoutManager', 'scrollHelper', 'globalize', 'dom', 'require', 'material-icons', 'emby-button', 'paper-icon-button-light', 'emby-input', 'formDialogStyle'], function (dialogHelper, layoutManager, scrollHelper, globalize, dom, require) {
+define(["browser", 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize', 'dom', 'require', 'material-icons', 'emby-button', 'paper-icon-button-light', 'emby-input', 'formDialogStyle'], function(browser, dialogHelper, layoutManager, scrollHelper, globalize, dom, require) {
     'use strict';
 
+    function replaceAll(str, find, replace) {
+        return str.split(find).join(replace);
+    }
+
     function setInputProperties(dlg, options) {
         var txtInput = dlg.querySelector('#txtInput');
 
@@ -13,7 +17,6 @@ define(['dialogHelper', 'layoutManager', 'scrollHelper', 'globalize', 'dom', 're
     }
 
     function showDialog(options, template) {
-
         var dialogOptions = {
             removeOnClose: true,
             scrollY: false
@@ -71,34 +74,49 @@ define(['dialogHelper', 'layoutManager', 'scrollHelper', 'globalize', 'dom', 're
         dlg.style.minWidth = (Math.min(400, dom.getWindowSize().innerWidth - 50)) + 'px';
 
         return dialogHelper.open(dlg).then(function () {
-
             if (layoutManager.tv) {
                 scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false);
             }
 
-            var value = submitValue;
-
-            if (value) {
-                return value;
+            if (submitValue) {
+                return submitValue;
             } else {
                 return Promise.reject();
             }
         });
     }
 
-    return function (options) {
+    if ((browser.tv || browser.xboxOne) && window.confirm) {
+        return function (options) {
+            if (typeof options === 'string') {
+                options = {
+                    label: '',
+                    text: options
+                };
+            }
 
-        return new Promise(function (resolve, reject) {
-            require(['text!./prompt.template.html'], function (template) {
+            var label = replaceAll(options.label || '', '<br/>', '\n');
+            var result = prompt(label, options.text || '');
 
-                if (typeof options === 'string') {
-                    options = {
-                        title: '',
-                        text: options
-                    };
-                }
-                showDialog(options, template).then(resolve, reject);
+            if (result) {
+                return Promise.resolve(result);
+            } else {
+                return Promise.reject(result);
+            }
+        };
+    } else {
+        return function (options) {
+            return new Promise(function (resolve, reject) {
+                require(['text!./prompt.template.html'], function (template) {
+                    if (typeof options === 'string') {
+                        options = {
+                            title: '',
+                            text: options
+                        };
+                    }
+                    showDialog(options, template).then(resolve, reject);
+                });
             });
-        });
-    };
+        };
+    }
 });

src/components/refreshdialog/refreshdialog.js

@@ -1,19 +1,6 @@
-define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager', 'appRouter', 'globalize', 'emby-input', 'emby-checkbox', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button'], function (shell, dialogHelper, loading, layoutManager, connectionManager, appRouter, globalize) {
+define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager', 'appRouter', 'globalize', 'emby-input', 'emby-checkbox', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button'], function (dom, shell, dialogHelper, loading, layoutManager, connectionManager, appRouter, globalize) {
     'use strict';
 
-    function parentWithClass(elem, className) {
-
-        while (!elem.classList || !elem.classList.contains(className)) {
-            elem = elem.parentNode;
-
-            if (!elem) {
-                return null;
-            }
-        }
-
-        return elem;
-    }
-
     function getEditorHtml() {
 
         var html = '';
@@ -65,7 +52,7 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager'
         loading.show();
 
         var instance = this;
-        var dlg = parentWithClass(e.target, 'dialog');
+        var dlg = dom.parentWithClass(e.target, 'dialog');
         var options = instance.options;
 
         var apiClient = connectionManager.getApiClient(options.serverId);

src/components/sanitizefilename.js

@@ -1,96 +1,90 @@
 // From https://github.com/parshap/node-sanitize-filename
 
-define([], function () {
-    'use strict';
+const illegalRe = /[\/\?<>\\:\*\|":]/g;
+// eslint-disable-next-line no-control-regex
+const controlRe = /[\x00-\x1f\x80-\x9f]/g;
+const reservedRe = /^\.+$/;
+const windowsReservedRe = /^(con|prn|aux|nul|com[0-9]|lpt[0-9])(\..*)?$/i;
+const windowsTrailingRe = /[\. ]+$/;
 
-    var illegalRe = /[\/\?<>\\:\*\|":]/g;
-    // eslint-disable-next-line no-control-regex
-    var controlRe = /[\x00-\x1f\x80-\x9f]/g;
-    var reservedRe = /^\.+$/;
-    var windowsReservedRe = /^(con|prn|aux|nul|com[0-9]|lpt[0-9])(\..*)?$/i;
-    var windowsTrailingRe = /[\. ]+$/;
+function isHighSurrogate(codePoint) {
+    return codePoint >= 0xd800 && codePoint <= 0xdbff;
+}
 
-    function isHighSurrogate(codePoint) {
-        return codePoint >= 0xd800 && codePoint <= 0xdbff;
+function isLowSurrogate(codePoint) {
+    return codePoint >= 0xdc00 && codePoint <= 0xdfff;
+}
+
+function getByteLength(string) {
+    if (typeof string !== "string") {
+        throw new Error("Input must be string");
     }
 
-    function isLowSurrogate(codePoint) {
-        return codePoint >= 0xdc00 && codePoint <= 0xdfff;
-    }
-
-    function getByteLength(string) {
-        if (typeof string !== "string") {
-            throw new Error("Input must be string");
-        }
-
-        var charLength = string.length;
-        var byteLength = 0;
-        var codePoint = null;
-        var prevCodePoint = null;
-        for (var i = 0; i < charLength; i++) {
-            codePoint = string.charCodeAt(i);
-            // handle 4-byte non-BMP chars
-            // low surrogate
-            if (isLowSurrogate(codePoint)) {
-                // when parsing previous hi-surrogate, 3 is added to byteLength
-                if (prevCodePoint != null && isHighSurrogate(prevCodePoint)) {
-                    byteLength += 1;
-                } else {
-                    byteLength += 3;
-                }
-            } else if (codePoint <= 0x7f) {
+    const charLength = string.length;
+    let byteLength = 0;
+    let codePoint = null;
+    let prevCodePoint = null;
+    for (let i = 0; i < charLength; i++) {
+        codePoint = string.charCodeAt(i);
+        // handle 4-byte non-BMP chars
+        // low surrogate
+        if (isLowSurrogate(codePoint)) {
+            // when parsing previous hi-surrogate, 3 is added to byteLength
+            if (prevCodePoint != null && isHighSurrogate(prevCodePoint)) {
                 byteLength += 1;
-            } else if (codePoint >= 0x80 && codePoint <= 0x7ff) {
-                byteLength += 2;
-            } else if (codePoint >= 0x800 && codePoint <= 0xffff) {
+            } else {
                 byteLength += 3;
             }
-            prevCodePoint = codePoint;
+        } else if (codePoint <= 0x7f) {
+            byteLength += 1;
+        } else if (codePoint >= 0x80 && codePoint <= 0x7ff) {
+            byteLength += 2;
+        } else if (codePoint >= 0x800 && codePoint <= 0xffff) {
+            byteLength += 3;
         }
-
-        return byteLength;
+        prevCodePoint = codePoint;
     }
 
-    function truncate(string, byteLength) {
-        if (typeof string !== "string") {
-            throw new Error("Input must be string");
-        }
+    return byteLength;
+}
 
-        var charLength = string.length;
-        var curByteLength = 0;
-        var codePoint;
-        var segment;
-
-        for (var i = 0; i < charLength; i += 1) {
-            codePoint = string.charCodeAt(i);
-            segment = string[i];
-
-            if (isHighSurrogate(codePoint) && isLowSurrogate(string.charCodeAt(i + 1))) {
-                i += 1;
-                segment += string[i];
-            }
-
-            curByteLength += getByteLength(segment);
-
-            if (curByteLength === byteLength) {
-                return string.slice(0, i + 1);
-            } else if (curByteLength > byteLength) {
-                return string.slice(0, i - segment.length + 1);
-            }
-        }
-
-        return string;
+function truncate(string, byteLength) {
+    if (typeof string !== "string") {
+        throw new Error("Input must be string");
     }
 
-    return {
-        sanitize: function (input, replacement) {
-            var sanitized = input
-                .replace(illegalRe, replacement)
-                .replace(controlRe, replacement)
-                .replace(reservedRe, replacement)
-                .replace(windowsReservedRe, replacement)
-                .replace(windowsTrailingRe, replacement);
-            return truncate(sanitized, 255);
+    const charLength = string.length;
+    let curByteLength = 0;
+    let codePoint;
+    let segment;
+
+    for (let i = 0; i < charLength; i += 1) {
+        codePoint = string.charCodeAt(i);
+        segment = string[i];
+
+        if (isHighSurrogate(codePoint) && isLowSurrogate(string.charCodeAt(i + 1))) {
+            i += 1;
+            segment += string[i];
         }
-    };
-});
+
+        curByteLength += getByteLength(segment);
+
+        if (curByteLength === byteLength) {
+            return string.slice(0, i + 1);
+        } else if (curByteLength > byteLength) {
+            return string.slice(0, i - segment.length + 1);
+        }
+    }
+
+    return string;
+}
+
+export function sanitize(input, replacement) {
+    const sanitized = input
+        .replace(illegalRe, replacement)
+        .replace(controlRe, replacement)
+        .replace(reservedRe, replacement)
+        .replace(windowsReservedRe, replacement)
+        .replace(windowsTrailingRe, replacement);
+    return truncate(sanitized, 255);
+}

src/components/scrollManager.js

@@ -1,38 +1,46 @@
-define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManager) {
-    "use strict";
+/* eslint-disable indent */
+
+/**
+ * Module for controlling scroll behavior.
+ * @module components/scrollManager
+ */
+
+import dom from "dom";
+import browser from "browser";
+import layoutManager from "layoutManager";
 
     /**
      * Scroll time in ms.
      */
-    var ScrollTime = 270;
+    const ScrollTime = 270;
 
     /**
      * Epsilon for comparing values.
      */
-    var Epsilon = 1e-6;
+    const Epsilon = 1e-6;
 
     // FIXME: Need to scroll to top of page to fully show the top menu. This can be solved by some marker of top most elements or their containers
     /**
      * Returns minimum vertical scroll.
      * Scroll less than that value will be zeroed.
      *
-     * @return {number} minimum vertical scroll
+     * @return {number} Minimum vertical scroll.
      */
     function minimumScrollY() {
-        var topMenu = document.querySelector(".headerTop");
+        const topMenu = document.querySelector(".headerTop");
         if (topMenu) {
             return topMenu.clientHeight;
         }
         return 0;
     }
 
-    var supportsSmoothScroll = "scrollBehavior" in document.documentElement.style;
+    const supportsSmoothScroll = "scrollBehavior" in document.documentElement.style;
 
-    var supportsScrollToOptions = false;
+    let supportsScrollToOptions = false;
     try {
-        var elem = document.createElement("div");
+        const elem = document.createElement("div");
 
-        var opts = Object.defineProperty({}, "behavior", {
+        const opts = Object.defineProperty({}, "behavior", {
             // eslint-disable-next-line getter-return
             get: function () {
                 supportsScrollToOptions = true;
@@ -47,10 +55,10 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage
     /**
      * Returns value clamped by range [min, max].
      *
-     * @param {number} value clamped value
-     * @param {number} min begining of range
-     * @param {number} max ending of range
-     * @return {number} clamped value
+     * @param {number} value - Clamped value.
+     * @param {number} min - Begining of range.
+     * @param {number} max - Ending of range.
+     * @return {number} Clamped value.
      */
     function clamp(value, min, max) {
         return value <= min ? min : value >= max ? max : value;
@@ -60,15 +68,15 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage
      * Returns the required delta to fit range 1 into range 2.
      * In case of range 1 is bigger than range 2 returns delta to fit most out of range part.
      *
-     * @param {number} begin1 begining of range 1
-     * @param {number} end1 ending of range 1
-     * @param {number} begin2 begining of range 2
-     * @param {number} end2 ending of range 2
-     * @return {number} delta: <0 move range1 to the left, >0 - to the right
+     * @param {number} begin1 - Begining of range 1.
+     * @param {number} end1 - Ending of range 1.
+     * @param {number} begin2 - Begining of range 2.
+     * @param {number} end2 - Ending of range 2.
+     * @return {number} Delta: <0 move range1 to the left, >0 - to the right.
      */
     function fitRange(begin1, end1, begin2, end2) {
-        var delta1 = begin1 - begin2;
-        var delta2 = end2 - end1;
+        const delta1 = begin1 - begin2;
+        const delta2 = end2 - end1;
         if (delta1 < 0 && delta1 < delta2) {
             return -delta1;
         } else if (delta2 < 0) {
@@ -80,13 +88,21 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage
     /**
      * Ease value.
      *
-     * @param {number} t value in range [0, 1]
-     * @return {number} eased value in range [0, 1]
+     * @param {number} t - Value in range [0, 1].
+     * @return {number} Eased value in range [0, 1].
      */
     function ease(t) {
         return t*(2 - t); // easeOutQuad === ease-out
     }
 
+    /**
+     * @typedef {Object} Rect
+     * @property {number} left - X coordinate of top-left corner.
+     * @property {number} top - Y coordinate of top-left corner.
+     * @property {number} width - Width.
+     * @property {number} height - Height.
+     */
+
     /**
      * Document scroll wrapper helps to unify scrolling and fix issues of some browsers.
      *
@@ -100,41 +116,68 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage
      *
      * Tizen 5 Browser/Native: scrolls documentElement (and window); has a document.scrollingElement
      */
-    function DocumentScroller() {
-    }
-
-    DocumentScroller.prototype = {
+    class DocumentScroller {
+        /**
+         * Horizontal scroll position.
+         * @type {number}
+         */
         get scrollLeft() {
             return window.pageXOffset;
-        },
+        }
+
         set scrollLeft(val) {
             window.scroll(val, window.pageYOffset);
-        },
+        }
 
+        /**
+         * Vertical scroll position.
+         * @type {number}
+         */
         get scrollTop() {
             return window.pageYOffset;
-        },
+        }
+
         set scrollTop(val) {
             window.scroll(window.pageXOffset, val);
-        },
+        }
 
+        /**
+         * Horizontal scroll size (scroll width).
+         * @type {number}
+         */
         get scrollWidth() {
             return Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);
-        },
+        }
 
+        /**
+         * Vertical scroll size (scroll height).
+         * @type {number}
+         */
         get scrollHeight() {
             return Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
-        },
+        }
 
+        /**
+         * Horizontal client size (client width).
+         * @type {number}
+         */
         get clientWidth() {
             return Math.min(document.documentElement.clientWidth, document.body.clientWidth);
-        },
+        }
 
+        /**
+         * Vertical client size (client height).
+         * @type {number}
+         */
         get clientHeight() {
             return Math.min(document.documentElement.clientHeight, document.body.clientHeight);
-        },
+        }
 
-        getBoundingClientRect: function() {
+        /**
+         * Returns bounding client rect.
+         * @return {Rect} Bounding client rect.
+         */
+        getBoundingClientRect() {
             // Make valid viewport coordinates: documentElement.getBoundingClientRect returns rect of entire document relative to viewport
             return {
                 left: 0,
@@ -142,26 +185,34 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage
                 width: this.clientWidth,
                 height: this.clientHeight
             };
-        },
+        }
 
-        scrollTo: function() {
+        /**
+         * Scrolls window.
+         * @param {...mixed} args See window.scrollTo.
+         */
+        scrollTo() {
             window.scrollTo.apply(window, arguments);
         }
-    };
-
-    var documentScroller = new DocumentScroller();
+    }
 
     /**
-     * Returns parent element that can be scrolled. If no such, returns documentElement.
+     * Default (document) scroller.
+     */
+    const documentScroller = new DocumentScroller();
+
+    /**
+     * Returns parent element that can be scrolled. If no such, returns document scroller.
      *
-     * @param {HTMLElement} element element for which parent is being searched
-     * @param {boolean} vertical search for vertical scrollable parent
+     * @param {HTMLElement} element - Element for which parent is being searched.
+     * @param {boolean} vertical - Search for vertical scrollable parent.
+     * @param {HTMLElement|DocumentScroller} Parent element that can be scrolled or document scroller.
      */
     function getScrollableParent(element, vertical) {
         if (element) {
-            var nameScroll = "scrollWidth";
-            var nameClient = "clientWidth";
-            var nameClass = "scrollX";
+            let nameScroll = "scrollWidth";
+            let nameClient = "clientWidth";
+            let nameClass = "scrollX";
 
             if (vertical) {
                 nameScroll = "scrollHeight";
@@ -169,7 +220,7 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage
                 nameClass = "scrollY";
             }
 
-            var parent = element.parentElement;
+            let parent = element.parentElement;
 
             while (parent) {
                 // Skip 'emby-scroller' because it scrolls by itself
@@ -187,20 +238,20 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage
 
     /**
      * @typedef {Object} ScrollerData
-     * @property {number} scrollPos current scroll position
-     * @property {number} scrollSize scroll size
-     * @property {number} clientSize client size
+     * @property {number} scrollPos - Current scroll position.
+     * @property {number} scrollSize - Scroll size.
+     * @property {number} clientSize - Client size.
      */
 
     /**
-     * Returns scroll data for specified orientation.
+     * Returns scroller data for specified orientation.
      *
-     * @param {HTMLElement} scroller scroller
-     * @param {boolean} vertical vertical scroll data
-     * @return {ScrollerData} scroll data
+     * @param {HTMLElement} scroller - Scroller.
+     * @param {boolean} vertical - Vertical scroller data.
+     * @return {ScrollerData} Scroller data.
      */
     function getScrollerData(scroller, vertical) {
-        var data = {};
+        let data = {};
 
         if (!vertical) {
             data.scrollPos = scroller.scrollLeft;
@@ -218,14 +269,14 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage
     /**
      * Returns position of child of scroller for specified orientation.
      *
-     * @param {HTMLElement} scroller scroller
-     * @param {HTMLElement} element child of scroller
-     * @param {boolean} vertical vertical scroll
-     * @return {number} child position
+     * @param {HTMLElement} scroller - Scroller.
+     * @param {HTMLElement} element - Child of scroller.
+     * @param {boolean} vertical - Vertical scroll.
+     * @return {number} Child position.
      */
     function getScrollerChildPos(scroller, element, vertical) {
-        var elementRect = element.getBoundingClientRect();
-        var scrollerRect = scroller.getBoundingClientRect();
+        const elementRect = element.getBoundingClientRect();
+        const scrollerRect = scroller.getBoundingClientRect();
 
         if (!vertical) {
             return scroller.scrollLeft + elementRect.left - scrollerRect.left;
@@ -237,21 +288,21 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage
     /**
      * Returns scroll position for element.
      *
-     * @param {ScrollerData} scrollerData scroller data
-     * @param {number} elementPos child element position
-     * @param {number} elementSize child element size
-     * @param {boolean} centered scroll to center
-     * @return {number} scroll position
+     * @param {ScrollerData} scrollerData - Scroller data.
+     * @param {number} elementPos - Child element position.
+     * @param {number} elementSize - Child element size.
+     * @param {boolean} centered - Scroll to center.
+     * @return {number} Scroll position.
      */
     function calcScroll(scrollerData, elementPos, elementSize, centered) {
-        var maxScroll = scrollerData.scrollSize - scrollerData.clientSize;
+        const maxScroll = scrollerData.scrollSize - scrollerData.clientSize;
 
-        var scroll;
+        let scroll;
 
         if (centered) {
             scroll = elementPos + (elementSize - scrollerData.clientSize) / 2;
         } else {
-            var delta = fitRange(elementPos, elementPos + elementSize - 1, scrollerData.scrollPos, scrollerData.scrollPos + scrollerData.clientSize - 1);
+            const delta = fitRange(elementPos, elementPos + elementSize - 1, scrollerData.scrollPos, scrollerData.scrollPos + scrollerData.clientSize - 1);
             scroll = scrollerData.scrollPos - delta;
         }
 
@@ -261,14 +312,14 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage
     /**
      * Calls scrollTo function in proper way.
      *
-     * @param {HTMLElement} scroller scroller
-     * @param {ScrollToOptions} options scroll options
+     * @param {HTMLElement} scroller - Scroller.
+     * @param {ScrollToOptions} options - Scroll options.
      */
     function scrollToHelper(scroller, options) {
         if ("scrollTo" in scroller) {
             if (!supportsScrollToOptions) {
-                var scrollX = (options.left !== undefined ? options.left : scroller.scrollLeft);
-                var scrollY = (options.top !== undefined ? options.top : scroller.scrollTop);
+                const scrollX = (options.left !== undefined ? options.left : scroller.scrollLeft);
+                const scrollY = (options.top !== undefined ? options.top : scroller.scrollTop);
                 scroller.scrollTo(scrollX, scrollY);
             } else {
                 scroller.scrollTo(options);
@@ -286,14 +337,14 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage
     /**
      * Performs built-in scroll.
      *
-     * @param {HTMLElement} xScroller horizontal scroller
-     * @param {number} scrollX horizontal coordinate
-     * @param {HTMLElement} yScroller vertical scroller
-     * @param {number} scrollY vertical coordinate
-     * @param {boolean} smooth smooth scrolling
+     * @param {HTMLElement} xScroller - Horizontal scroller.
+     * @param {number} scrollX - Horizontal coordinate.
+     * @param {HTMLElement} yScroller - Vertical scroller.
+     * @param {number} scrollY - Vertical coordinate.
+     * @param {boolean} smooth - Smooth scrolling.
      */
     function builtinScroll(xScroller, scrollX, yScroller, scrollY, smooth) {
-        var scrollBehavior = smooth ? "smooth" : "instant";
+        const scrollBehavior = smooth ? "smooth" : "instant";
 
         if (xScroller !== yScroller) {
             scrollToHelper(xScroller, {left: scrollX, behavior: scrollBehavior});
@@ -303,7 +354,10 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage
         }
     }
 
-    var scrollTimer;
+    /**
+     * Requested frame for animated scroll.
+     */
+    let scrollTimer;
 
     /**
      * Resets scroll timer to stop scrolling.
@@ -316,29 +370,29 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage
     /**
      * Performs animated scroll.
      *
-     * @param {HTMLElement} xScroller horizontal scroller
-     * @param {number} scrollX horizontal coordinate
-     * @param {HTMLElement} yScroller vertical scroller
-     * @param {number} scrollY vertical coordinate
+     * @param {HTMLElement} xScroller - Horizontal scroller.
+     * @param {number} scrollX - Horizontal coordinate.
+     * @param {HTMLElement} yScroller - Vertical scroller.
+     * @param {number} scrollY - Vertical coordinate.
      */
     function animateScroll(xScroller, scrollX, yScroller, scrollY) {
 
-        var ox = xScroller.scrollLeft;
-        var oy = yScroller.scrollTop;
-        var dx = scrollX - ox;
-        var dy = scrollY - oy;
+        const ox = xScroller.scrollLeft;
+        const oy = yScroller.scrollTop;
+        const dx = scrollX - ox;
+        const dy = scrollY - oy;
 
         if (Math.abs(dx) < Epsilon && Math.abs(dy) < Epsilon) {
             return;
         }
 
-        var start;
+        let start;
 
         function scrollAnim(currentTimestamp) {
 
             start = start || currentTimestamp;
 
-            var k = Math.min(1, (currentTimestamp - start) / ScrollTime);
+            let k = Math.min(1, (currentTimestamp - start) / ScrollTime);
 
             if (k === 1) {
                 resetScrollTimer();
@@ -348,8 +402,8 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage
 
             k = ease(k);
 
-            var x = ox + dx*k;
-            var y = oy + dy*k;
+            const x = ox + dx*k;
+            const y = oy + dy*k;
 
             builtinScroll(xScroller, x, yScroller, y, false);
 
@@ -362,11 +416,11 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage
     /**
      * Performs scroll.
      *
-     * @param {HTMLElement} xScroller horizontal scroller
-     * @param {number} scrollX horizontal coordinate
-     * @param {HTMLElement} yScroller vertical scroller
-     * @param {number} scrollY vertical coordinate
-     * @param {boolean} smooth smooth scrolling
+     * @param {HTMLElement} xScroller - Horizontal scroller.
+     * @param {number} scrollX - Horizontal coordinate.
+     * @param {HTMLElement} yScroller - Vertical scroller.
+     * @param {number} scrollY - Vertical coordinate.
+     * @param {boolean} smooth - Smooth scrolling.
      */
     function doScroll(xScroller, scrollX, yScroller, scrollY, smooth) {
 
@@ -403,26 +457,26 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage
     /**
      * Returns true if scroll manager is enabled.
      */
-    var isEnabled = function() {
+    export function isEnabled() {
         return layoutManager.tv;
-    };
+    }
 
     /**
      * Scrolls the document to a given position.
      *
-     * @param {number} scrollX horizontal coordinate
-     * @param {number} scrollY vertical coordinate
-     * @param {boolean} [smooth=false] smooth scrolling
+     * @param {number} scrollX - Horizontal coordinate.
+     * @param {number} scrollY - Vertical coordinate.
+     * @param {boolean} [smooth=false] - Smooth scrolling.
      */
-    var scrollTo = function(scrollX, scrollY, smooth) {
+    export function scrollTo(scrollX, scrollY, smooth) {
 
         smooth = !!smooth;
 
         // Scroller is document itself by default
-        var scroller = getScrollableParent(null, false);
+        const scroller = getScrollableParent(null, false);
 
-        var xScrollerData = getScrollerData(scroller, false);
-        var yScrollerData = getScrollerData(scroller, true);
+        const xScrollerData = getScrollerData(scroller, false);
+        const yScrollerData = getScrollerData(scroller, true);
 
         scrollX = clamp(Math.round(scrollX), 0, xScrollerData.scrollSize - xScrollerData.clientSize);
         scrollY = clamp(Math.round(scrollY), 0, yScrollerData.scrollSize - yScrollerData.clientSize);
@@ -433,39 +487,39 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage
     /**
      * Scrolls the document to a given element.
      *
-     * @param {HTMLElement} element target element of scroll task
-     * @param {boolean} [smooth=false] smooth scrolling
+     * @param {HTMLElement} element - Target element of scroll task.
+     * @param {boolean} [smooth=false] - Smooth scrolling.
      */
-    var scrollToElement = function(element, smooth) {
+    export function scrollToElement(element, smooth) {
 
         smooth = !!smooth;
 
-        var scrollCenterX = true;
-        var scrollCenterY = true;
+        let scrollCenterX = true;
+        let scrollCenterY = true;
 
-        var offsetParent = element.offsetParent;
+        const offsetParent = element.offsetParent;
 
         // In Firefox offsetParent.offsetParent is BODY
-        var isFixed = offsetParent && (!offsetParent.offsetParent || window.getComputedStyle(offsetParent).position === "fixed");
+        const isFixed = offsetParent && (!offsetParent.offsetParent || window.getComputedStyle(offsetParent).position === "fixed");
 
         // Scroll fixed elements to nearest edge (or do not scroll at all)
         if (isFixed) {
             scrollCenterX = scrollCenterY = false;
         }
 
-        var xScroller = getScrollableParent(element, false);
-        var yScroller = getScrollableParent(element, true);
+        const xScroller = getScrollableParent(element, false);
+        const yScroller = getScrollableParent(element, true);
 
-        var elementRect = element.getBoundingClientRect();
+        const elementRect = element.getBoundingClientRect();
 
-        var xScrollerData = getScrollerData(xScroller, false);
-        var yScrollerData = getScrollerData(yScroller, true);
+        const xScrollerData = getScrollerData(xScroller, false);
+        const yScrollerData = getScrollerData(yScroller, true);
 
-        var xPos = getScrollerChildPos(xScroller, element, false);
-        var yPos = getScrollerChildPos(yScroller, element, true);
+        const xPos = getScrollerChildPos(xScroller, element, false);
+        const yPos = getScrollerChildPos(yScroller, element, true);
 
-        var scrollX = calcScroll(xScrollerData, xPos, elementRect.width, scrollCenterX);
-        var scrollY = calcScroll(yScrollerData, yPos, elementRect.height, scrollCenterY);
+        const scrollX = calcScroll(xScrollerData, xPos, elementRect.width, scrollCenterX);
+        let scrollY = calcScroll(yScrollerData, yPos, elementRect.height, scrollCenterY);
 
         // HACK: Scroll to top for top menu because it is hidden
         // FIXME: Need a marker to scroll top/bottom
@@ -490,9 +544,8 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage
         }, {capture: true});
     }
 
-    return {
+    export default {
         isEnabled: isEnabled,
         scrollTo: scrollTo,
         scrollToElement: scrollToElement
     };
-});

src/components/shell.js

@@ -10,12 +10,6 @@ define([], function () {
             }
 
         },
-        canExec: false,
-        exec: function (options) {
-            // options.path
-            // options.arguments
-            return Promise.reject();
-        },
         enableFullscreen: function () {
             if (window.NativeShell) {
                 window.NativeShell.enableFullscreen();

src/components/skinManager.js

@@ -116,8 +116,8 @@ define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdr
 
             var linkUrl = info.stylesheetPath;
             unloadTheme();
-            var link = document.createElement('link');
 
+            var link = document.createElement('link');
             link.setAttribute('rel', 'stylesheet');
             link.setAttribute('type', 'text/css');
             link.onload = function () {

src/components/subtitlesettings/subtitlesettings.js

@@ -2,15 +2,11 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi
     "use strict";
 
     function populateLanguages(select, languages) {
-
         var html = "";
 
         html += "<option value=''>" + globalize.translate('AnyLanguage') + "</option>";
-
         for (var i = 0, length = languages.length; i < length; i++) {
-
             var culture = languages[i];
-
             html += "<option value='" + culture.ThreeLetterISOLanguageName + "'>" + culture.DisplayName + "</option>";
         }
 
@@ -18,7 +14,6 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi
     }
 
     function getSubtitleAppearanceObject(context) {
-
         var appearanceSettings = {};
 
         appearanceSettings.textSize = context.querySelector('#selectTextSize').value;
@@ -102,14 +97,12 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi
     }
 
     function onSubmit(e) {
-
         var self = this;
         var apiClient = connectionManager.getApiClient(self.options.serverId);
         var userId = self.options.userId;
         var userSettings = self.options.userSettings;
 
         userSettings.setUserInfo(userId, apiClient).then(function () {
-
             var enableSaveConfirmation = self.options.enableSaveConfirmation;
             save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation);
         });
@@ -118,6 +111,7 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi
         if (e) {
             e.preventDefault();
         }
+
         return false;
     }
 
@@ -197,9 +191,7 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi
         var userSettings = self.options.userSettings;
 
         apiClient.getUser(userId).then(function (user) {
-
             userSettings.setUserInfo(userId, apiClient).then(function () {
-
                 self.dataLoaded = true;
 
                 var appearanceSettings = userSettings.getSubtitleAppearanceSettings(self.options.appearanceKey);
@@ -214,7 +206,6 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi
     };
 
     SubtitleSettings.prototype.destroy = function () {
-
         this.options = null;
     };
 

src/components/subtitlesettings/subtitlesettings.template.html

@@ -1,7 +1,5 @@
 <form style="margin:0 auto;">
-
     <div class="verticalSection">
-
         <h2 class="sectionTitle">
             ${Subtitles}
         </h2>
@@ -9,6 +7,7 @@
         <div class="selectContainer">
             <select is="emby-select" id="selectSubtitleLanguage" label="${LabelPreferredSubtitleLanguage}"></select>
         </div>
+
         <div class="selectContainer">
             <select is="emby-select" id="selectSubtitlePlaybackMode" label="${LabelSubtitlePlaybackMode}">
                 <option value="Default">${Default}</option>
@@ -23,6 +22,7 @@
             <div class="fieldDescription subtitlesOnlyForcedHelp subtitlesHelp hide">${OnlyForcedSubtitlesHelp}</div>
             <div class="fieldDescription subtitlesNoneHelp subtitlesHelp hide">${NoSubtitlesHelp}</div>
         </div>
+
         <div class="selectContainer fldBurnIn hide">
             <select is="emby-select" id="selectSubtitleBurnIn" label="${LabelBurnSubtitles}">
                 <option value="">${Auto}</option>
@@ -34,7 +34,6 @@
     </div>
 
     <div class="verticalSection subtitleAppearanceSection hide">
-
         <h2 class="sectionTitle">
             ${HeaderSubtitleAppearance}
         </h2>
@@ -61,6 +60,7 @@
                 <option value="extralarge">${ExtraLarge}</option>
             </select>
         </div>
+
         <div class="selectContainer">
             <select is="emby-select" id="selectFont" label="${LabelFont}">
                 <option value="">${Default}</option>
@@ -71,12 +71,15 @@
                 <option value="smallcaps">${SmallCaps}</option>
             </select>
         </div>
+
         <div class="inputContainer hide">
             <input is="emby-input" id="inputTextBackground" label="${LabelTextBackgroundColor}" type="text" />
         </div>
+
         <div class="inputContainer hide">
             <input is="emby-input" id="inputTextColor" label="${LabelTextColor}" type="text" />
         </div>
+
         <div class="selectContainer">
             <select is="emby-select" id="selectDropShadow" label="${LabelDropShadow}">
                 <option value="none">${None}</option>

src/components/subtitlesync/subtitlesync.js

@@ -1,4 +1,4 @@
-define(['playbackManager', 'text!./subtitlesync.template.html', 'css!./subtitlesync'], function (playbackManager, template, css) {
+define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html', 'css!./subtitlesync'], function (playbackManager, layoutManager, template, css) {
     "use strict";
 
     var player;
@@ -10,6 +10,7 @@ define(['playbackManager', 'text!./subtitlesync.template.html', 'css!./subtitles
     function init(instance) {
 
         var parent = document.createElement('div');
+        document.body.appendChild(parent);
         parent.innerHTML = template;
 
         subtitleSyncSlider = parent.querySelector(".subtitleSyncSlider");
@@ -17,6 +18,14 @@ define(['playbackManager', 'text!./subtitlesync.template.html', 'css!./subtitles
         subtitleSyncCloseButton = parent.querySelector(".subtitleSync-closeButton");
         subtitleSyncContainer = parent.querySelector(".subtitleSyncContainer");
 
+        if (layoutManager.tv) {
+            subtitleSyncSlider.classList.add("focusable");
+            // HACK: Delay to give time for registered element attach (Firefox)
+            setTimeout(function () {
+                subtitleSyncSlider.enableKeyboardDragging();
+            }, 0);
+        }
+
         subtitleSyncContainer.classList.add("hide");
 
         subtitleSyncTextField.updateOffset = function(offset) {
@@ -87,8 +96,6 @@ define(['playbackManager', 'text!./subtitlesync.template.html', 'css!./subtitles
             SubtitleSync.prototype.toggle("forceToHide");
         });
 
-        document.body.appendChild(parent);
-
         instance.element = parent;
     }
 

src/components/tvproviders/schedulesdirect.js

@@ -264,17 +264,13 @@ define(["jQuery", "loading", "emby-checkbox", "listViewStyle", "emby-input", "em
         self.init = function () {
             options = options || {};
 
-            if (options.showCancelButton) {
-                page.querySelector(".btnCancel").classList.remove("hide");
-            } else {
-                page.querySelector(".btnCancel").classList.add("hide");
-            }
+            // Only hide the buttons if explicitly set to false; default to showing if undefined or null
+            // FIXME: rename this option to clarify logic
+            var hideCancelButton = options.showCancelButton === false;
+            page.querySelector(".btnCancel").classList.toggle("hide", hideCancelButton);
 
-            if (options.showSubmitButton) {
-                page.querySelector(".btnSubmitListings").classList.remove("hide");
-            } else {
-                page.querySelector(".btnSubmitListings").classList.add("hide");
-            }
+            var hideSubmitButton = options.showSubmitButton === false;
+            page.querySelector(".btnSubmitListings").classList.toggle("hide", hideSubmitButton);
 
             $(".formLogin", page).on("submit", function () {
                 submitLoginForm();

src/components/tvproviders/xmltv.js

@@ -163,17 +163,13 @@ define(["jQuery", "loading", "emby-checkbox", "emby-input", "listViewStyle", "pa
         self.init = function () {
             options = options || {};
 
-            if (false !== options.showCancelButton) {
-                page.querySelector(".btnCancel").classList.remove("hide");
-            } else {
-                page.querySelector(".btnCancel").classList.add("hide");
-            }
+            // Only hide the buttons if explicitly set to false; default to showing if undefined or null
+            // FIXME: rename this option to clarify logic
+            var hideCancelButton = options.showCancelButton === false;
+            page.querySelector(".btnCancel").classList.toggle("hide", hideCancelButton);
 
-            if (false !== options.showSubmitButton) {
-                page.querySelector(".btnSubmitListings").classList.remove("hide");
-            } else {
-                page.querySelector(".btnSubmitListings").classList.add("hide");
-            }
+            var hideSubmitButton = options.showSubmitButton === false;
+            page.querySelector(".btnSubmitListings").classList.toggle("hide", hideSubmitButton);
 
             $("form", page).on("submit", function () {
                 submitListingsForm();