Merge remote-tracking branch 'upstream/master' into hwaccel

src/addplugin.html

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

src/addserver.html

@@ -3,7 +3,7 @@
         <form class="addServerForm" style="margin: 0 auto;">
             <h1>${HeaderConnectToServer}</h1>
             <div class="inputContainer">
-                <input is="emby-input" type="text" id="txtServerHost" required="required" label="${LabelServerHost}" autocomplete="off" spellcheck="false" autocapitalize="none" autocorrect="off" />
+                <input is="emby-input" type="url" id="txtServerHost" required="required" label="${LabelServerHost}"/>
                 <div class="fieldDescription">${LabelServerHostHelp}</div>
             </div>
             <br />

src/apikeys.html

@@ -4,18 +4,19 @@
             <div class="detailSectionHeader">
                 <h2 style="margin:.6em 0;vertical-align:middle;display:inline-block;">${HeaderApiKeys}</h2>
                 <button is="emby-button" type="button" class="fab btnNewKey submit" style="margin-left:1em;" title="${ButtonAdd}">
-                    <i class="material-icons">add</i>
+                    <span class="material-icons add" aria-hidden="true"></span>
                 </button>
             </div>
             <p>${HeaderApiKeysHelp}</p>
             <br />
             <table class="tblApiKeys detailTable">
+                <caption class="clipForScreenReader">${ApiKeysCaption}</caption>
                 <thead>
                     <tr>
-                        <th class="detailTableHeaderCell"></th>
-                        <th class="detailTableHeaderCell">${HeaderApiKey}</th>
-                        <th class="detailTableHeaderCell">${HeaderApp}</th>
-                        <th class="detailTableHeaderCell">${HeaderDateIssued}</th>
+                        <th scope="col" class="detailTableHeaderCell"></th>
+                        <th scope="col" class="detailTableHeaderCell">${HeaderApiKey}</th>
+                        <th scope="col" class="detailTableHeaderCell">${HeaderApp}</th>
+                        <th scope="col" class="detailTableHeaderCell">${HeaderDateIssued}</th>
                     </tr>
                 </thead>
                 <tbody class="resultBody"></tbody>

src/assets/css/librarybrowser.css

@@ -21,7 +21,11 @@
 }
 
 .libraryPage {
-    padding-top: 7em;
+    padding-top: 7em !important;
+}
+
+.layout-mobile .libraryPage {
+    padding-top: 4em !important;
 }
 
 .itemDetailPage {
@@ -128,10 +132,6 @@
     margin-top: 0;
 }
 
-.layout-mobile .pageTitleWithDefaultLogo {
-    background-image: url(../img/icon-transparent.png);
-}
-
 .headerLeft,
 .skinHeader {
     display: -webkit-box;
@@ -242,10 +242,11 @@
 }
 
 .mainDrawer-scrollContainer {
-    margin-bottom: 10vh;
+    padding-bottom: 10vh;
 }
 
 @media all and (min-width: 40em) {
+    .dashboardDocument .adminDrawerLogo,
     .dashboardDocument .mainDrawerButton {
         display: none !important;
     }
@@ -313,7 +314,7 @@
     }
 
     .dashboardDocument .mainDrawer-scrollContainer {
-        margin-top: 4.6em !important;
+        margin-top: 4.65em !important;
     }
 }
 
@@ -516,6 +517,13 @@
 
 .itemName {
     margin: 0.5em 0;
+    font-weight: 600;
+}
+
+.nameContainer {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
 }
 
 .itemMiscInfo {
@@ -533,7 +541,6 @@
 .layout-mobile .itemName,
 .layout-mobile .itemMiscInfo,
 .layout-mobile .mainDetailButtons {
-    display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
@@ -575,7 +582,6 @@
 
 .infoText {
     white-space: nowrap;
-    overflow: hidden;
     text-overflow: ellipsis;
     text-align: left;
 }
@@ -606,12 +612,11 @@
 }
 
 .detailLogo {
-    width: 67.25vw;
-    height: 14.5vh;
+    width: 30vw;
+    height: 25vh;
     position: absolute;
-    top: 15vh;
-    right: 0;
-    -webkit-background-size: contain;
+    top: 10vh;
+    right: 20vw;
     background-size: contain;
 }
 
@@ -619,26 +624,8 @@
     display: none;
 }
 
-@media all and (max-width: 87.5em) {
-    .detailLogo {
-        right: 5%;
-    }
-}
-
-@media all and (max-width: 75em) {
-    .detailLogo {
-        right: 2%;
-    }
-}
-
 @media all and (max-width: 68.75em) {
     .detailLogo {
-        width: 14.91em;
-        height: 3.5em;
-        right: 5%;
-        bottom: 5%;
-        top: auto;
-        background-position: center right;
         display: none;
     }
 }
@@ -657,12 +644,7 @@ div.itemDetailGalleryLink.defaultCardBackground {
     height: 23vw; /* Dirty hack to get it to look somewhat square. Less than ideal. */
 }
 
-.btnSyncComplete i {
-    -webkit-border-radius: 100em;
-    border-radius: 100em;
-}
-
-.itemDetailGalleryLink.defaultCardBackground > i {
+.itemDetailGalleryLink.defaultCardBackground > .material-icons {
     font-size: 15vw;
     margin-top: 50%;
     transform: translateY(-50%);
@@ -694,10 +676,6 @@ div.itemDetailGalleryLink.defaultCardBackground {
     }
 }
 
-.btnSyncComplete {
-    background: #673ab7 !important;
-}
-
 .emby-button.detailFloatingButton {
     position: absolute;
     background-color: rgba(0, 0, 0, 0.5) !important;
@@ -709,7 +687,7 @@ div.itemDetailGalleryLink.defaultCardBackground {
     color: rgba(255, 255, 255, 0.76);
 }
 
-.emby-button.detailFloatingButton i {
+.emby-button.detailFloatingButton .material-icons {
     font-size: 3.5em;
 }
 
@@ -1166,3 +1144,21 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
     margin-top: 0;
     font-size: 1.4em;
 }
+
+.overview-controls {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.detail-clamp-text {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 12;
+    -webkit-box-orient: vertical;
+}
+
+@media all and (min-width: 40em) {
+    .detail-clamp-text {
+        -webkit-line-clamp: 6;
+    }
+}

src/assets/css/site.css

@@ -5,6 +5,17 @@ html {
     height: 100%;
 }
 
+.clipForScreenReader {
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
+    height: 1px;
+    width: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+}
+
 .material-icons {
     /* Fix font ligatures on older WebOS versions */
     -webkit-font-feature-settings: "liga";
@@ -96,3 +107,24 @@ div[data-role=page] {
     margin-right: auto;
     width: 85%;
 }
+
+.headroom {
+    will-change: transform;
+    transition: transform 200ms linear;
+}
+
+.headroom--pinned {
+    transform: translateY(0%);
+}
+
+.headroom--unpinned {
+    transform: translateY(-100%);
+}
+
+.force-scroll {
+    overflow-y: scroll;
+}
+
+.hide-scroll {
+    overflow-y: hidden;
+}

src/assets/css/videoosd.css

@@ -30,7 +30,7 @@
     opacity: 0;
 }
 
-.osdHeader .headerButton:not(.headerBackButton):not(.headerCastButton) {
+.osdHeader .headerButton:not(.headerBackButton):not(.headerCastButton):not(.headerSyncButton) {
     display: none;
 }
 

src/bundle.js

@@ -5,127 +5,185 @@
 var _define = window.define;
 
 // document-register-element
-var docRegister = require("document-register-element");
-_define("document-register-element", function() {
+var docRegister = require('document-register-element');
+_define('document-register-element', function() {
     return docRegister;
 });
 
 // fetch
-var fetch = require("whatwg-fetch");
-_define("fetch", function() {
+var fetch = require('whatwg-fetch');
+_define('fetch', function() {
     return fetch;
 });
 
+// Blurhash
+var blurhash = require('blurhash');
+_define('blurhash', function() {
+    return blurhash;
+});
+
 // query-string
-var query = require("query-string");
-_define("queryString", function() {
+var query = require('query-string');
+_define('queryString', function() {
     return query;
 });
 
 // flvjs
-var flvjs = require("flv.js/dist/flv").default;
-_define("flvjs", function() {
+var flvjs = require('flv.js/dist/flv').default;
+_define('flvjs', function() {
     return flvjs;
 });
 
 // jstree
-var jstree = require("jstree");
-require("jstree/dist/themes/default/style.css");
-_define("jstree", function() {
+var jstree = require('jstree');
+require('jstree/dist/themes/default/style.css');
+_define('jstree', function() {
     return jstree;
 });
 
 // jquery
-var jquery = require("jquery");
-_define("jQuery", function() {
+var jquery = require('jquery');
+_define('jQuery', function() {
     return jquery;
 });
 
 // hlsjs
-var hlsjs = require("hls.js");
-_define("hlsjs", function() {
+var hlsjs = require('hls.js');
+_define('hlsjs', function() {
     return hlsjs;
 });
 
 // howler
-var howler = require("howler");
-_define("howler", function() {
+var howler = require('howler');
+_define('howler', function() {
     return howler;
 });
 
 // resize-observer-polyfill
-var resize = require("resize-observer-polyfill").default;
-_define("resize-observer-polyfill", function() {
+var resize = require('resize-observer-polyfill').default;
+_define('resize-observer-polyfill', function() {
     return resize;
 });
 
 // shaka
-var shaka = require("shaka-player");
-_define("shaka", function() {
+var shaka = require('shaka-player');
+_define('shaka', function() {
     return shaka;
 });
 
 // swiper
-var swiper = require("swiper/js/swiper");
-require("swiper/css/swiper.min.css");
-_define("swiper", function() {
+var swiper = require('swiper/js/swiper');
+require('swiper/css/swiper.min.css');
+_define('swiper', function() {
     return swiper;
 });
 
 // sortable
-var sortable = require("sortablejs").default;
-_define("sortable", function() {
+var sortable = require('sortablejs').default;
+_define('sortable', function() {
     return sortable;
 });
 
 // webcomponents
-var webcomponents = require("webcomponents.js/webcomponents-lite");
-_define("webcomponents", function() {
+var webcomponents = require('webcomponents.js/webcomponents-lite');
+_define('webcomponents', function() {
     return webcomponents;
 });
 
 // libass-wasm
-var libass_wasm = require("libass-wasm");
-_define("JavascriptSubtitlesOctopus", function() {
-    return libass_wasm;
+var libassWasm = require('libass-wasm');
+_define('JavascriptSubtitlesOctopus', function() {
+    return libassWasm;
 });
 
 // material-icons
-var material_icons = require("material-design-icons-iconfont/dist/material-design-icons.css");
-_define("material-icons", function() {
-    return material_icons;
+var materialIcons = require('material-design-icons-iconfont/dist/material-design-icons.css');
+_define('material-icons', function() {
+    return materialIcons;
 });
 
 // noto font
-var noto = require("jellyfin-noto");
-_define("jellyfin-noto", function () {
+var noto = require('jellyfin-noto');
+_define('jellyfin-noto', function () {
     return noto;
 });
 
+var epubjs = require('epubjs');
+_define('epubjs', function () {
+    return epubjs;
+});
+
 // page.js
-var page = require("page");
-_define("page", function() {
+var page = require('page');
+_define('page', function() {
     return page;
 });
 
-var polyfill = require("@babel/polyfill/dist/polyfill");
-_define("polyfill", function () {
+// core-js
+var polyfill = require('@babel/polyfill/dist/polyfill');
+_define('polyfill', function () {
     return polyfill;
 });
 
 // domtokenlist-shim
-var classlist = require("classlist.js");
-_define("classlist-polyfill", function () {
+var classlist = require('classlist.js');
+_define('classlist-polyfill', function () {
     return classlist;
 });
 
 // Date-FNS
-var date_fns = require("date-fns");
-_define("date-fns", function () {
-    return date_fns;
+var dateFns = require('date-fns');
+_define('date-fns', function () {
+    return dateFns;
 });
 
-var date_fns_locale = require("date-fns/locale");
-_define("date-fns/locale", function () {
-    return date_fns_locale;
+var dateFnsLocale = require('date-fns/locale');
+_define('date-fns/locale', function () {
+    return dateFnsLocale;
+});
+
+var fast_text_encoding = require('fast-text-encoding');
+_define('fast-text-encoding', function () {
+    return fast_text_encoding;
+});
+
+// intersection-observer
+var intersection_observer = require('intersection-observer');
+_define('intersection-observer', function () {
+    return intersection_observer;
+});
+
+// screenfull
+var screenfull = require('screenfull');
+_define('screenfull', function () {
+    return screenfull;
+});
+
+// headroom.js
+var headroom = require('headroom.js/dist/headroom');
+_define('headroom', function () {
+    return headroom;
+});
+
+// apiclient
+var apiclient = require('jellyfin-apiclient');
+
+_define('apiclient', function () {
+    return apiclient.ApiClient;
+});
+
+_define('events', function () {
+    return apiclient.Events;
+});
+
+_define('credentialprovider', function () {
+    return apiclient.Credentials;
+});
+
+_define('connectionManagerFactory', function () {
+    return apiclient.ConnectionManager;
+});
+
+_define('appStorage', function () {
+    return apiclient.AppStorage;
 });

src/components/accessSchedule/accessSchedule.js

@@ -0,0 +1,98 @@
+/* eslint-disable indent */
+
+/**
+ * Module for controlling user parental control from.
+ * @module components/accessSchedule/accessSchedule
+ */
+
+import dialogHelper from 'dialogHelper';
+import datetime from 'datetime';
+import globalize from 'globalize';
+import 'emby-select';
+import 'paper-icon-button-light';
+import 'formDialogStyle';
+
+    function getDisplayTime(hours) {
+        let minutes = 0;
+        const pct = hours % 1;
+
+        if (pct) {
+            minutes = parseInt(60 * pct);
+        }
+
+        return datetime.getDisplayTime(new Date(2000, 1, 1, hours, minutes, 0, 0));
+    }
+
+    function populateHours(context) {
+        let html = '';
+
+        for (let i = 0; i < 24; i++) {
+            html += `<option value="${i}">${getDisplayTime(i)}</option>`;
+        }
+
+        html += `<option value="24">${getDisplayTime(0)}</option>`;
+        context.querySelector('#selectStart').innerHTML = html;
+        context.querySelector('#selectEnd').innerHTML = html;
+    }
+
+    function loadSchedule(context, {DayOfWeek, StartHour, EndHour}) {
+        context.querySelector('#selectDay').value = DayOfWeek || 'Sunday';
+        context.querySelector('#selectStart').value = StartHour || 0;
+        context.querySelector('#selectEnd').value = EndHour || 0;
+    }
+
+    function submitSchedule(context, options) {
+        const updatedSchedule = {
+            DayOfWeek: context.querySelector('#selectDay').value,
+            StartHour: context.querySelector('#selectStart').value,
+            EndHour: context.querySelector('#selectEnd').value
+        };
+
+        if (parseFloat(updatedSchedule.StartHour) >= parseFloat(updatedSchedule.EndHour)) {
+            return void alert(globalize.translate('ErrorMessageStartHourGreaterThanEnd'));
+        }
+
+        context.submitted = true;
+        options.schedule = Object.assign(options.schedule, updatedSchedule);
+        dialogHelper.close(context);
+    }
+
+    export function show(options) {
+        return new Promise((resolve, reject) => {
+            // TODO: remove require
+            require(['text!./components/accessSchedule/accessSchedule.template.html'], template => {
+                const dlg = dialogHelper.createDialog({
+                    removeOnClose: true,
+                    size: 'small'
+                });
+                dlg.classList.add('formDialog');
+                let html = '';
+                html += globalize.translateDocument(template);
+                dlg.innerHTML = html;
+                populateHours(dlg);
+                loadSchedule(dlg, options.schedule);
+                dialogHelper.open(dlg);
+                dlg.addEventListener('close', () => {
+                    if (dlg.submitted) {
+                        resolve(options.schedule);
+                    } else {
+                        reject();
+                    }
+                });
+                dlg.querySelector('.btnCancel').addEventListener('click', () => {
+                    dialogHelper.close(dlg);
+                });
+                dlg.querySelector('form').addEventListener('submit', event => {
+                    submitSchedule(dlg, options);
+                    event.preventDefault();
+                    return false;
+                });
+            });
+        });
+    }
+
+/* eslint-enable indent */
+
+export default {
+    show: show
+};

src/components/accessSchedule/accessSchedule.template.html

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

src/components/accessschedule/accessschedule.js

@@ -1,89 +0,0 @@
-define(["dialogHelper", "datetime", "emby-select", "paper-icon-button-light", "formDialogStyle"], function (dialogHelper, datetime) {
-    "use strict";
-
-    function getDisplayTime(hours) {
-        var minutes = 0;
-        var pct = hours % 1;
-
-        if (pct) {
-            minutes = parseInt(60 * pct);
-        }
-
-        return datetime.getDisplayTime(new Date(2000, 1, 1, hours, minutes, 0, 0));
-    }
-
-    function populateHours(context) {
-        var html = "";
-
-        for (var i = 0; i < 24; i++) {
-            html += '<option value="' + i + '">' + getDisplayTime(i) + "</option>";
-        }
-
-        html += '<option value="24">' + getDisplayTime(0) + "</option>";
-        context.querySelector("#selectStart").innerHTML = html;
-        context.querySelector("#selectEnd").innerHTML = html;
-    }
-
-    function loadSchedule(context, schedule) {
-        context.querySelector("#selectDay").value = schedule.DayOfWeek || "Sunday";
-        context.querySelector("#selectStart").value = schedule.StartHour || 0;
-        context.querySelector("#selectEnd").value = schedule.EndHour || 0;
-    }
-
-    function submitSchedule(context, options) {
-        var updatedSchedule = {
-            DayOfWeek: context.querySelector("#selectDay").value,
-            StartHour: context.querySelector("#selectStart").value,
-            EndHour: context.querySelector("#selectEnd").value
-        };
-
-        if (parseFloat(updatedSchedule.StartHour) >= parseFloat(updatedSchedule.EndHour)) {
-            return void alert(Globalize.translate("ErrorMessageStartHourGreaterThanEnd"));
-        }
-
-        context.submitted = true;
-        options.schedule = Object.assign(options.schedule, updatedSchedule);
-        dialogHelper.close(context);
-    }
-
-    return {
-        show: function (options) {
-            return new Promise(function (resolve, reject) {
-                var xhr = new XMLHttpRequest();
-                xhr.open("GET", "components/accessschedule/accessschedule.template.html", true);
-
-                xhr.onload = function (e) {
-                    var template = this.response;
-                    var dlg = dialogHelper.createDialog({
-                        removeOnClose: true,
-                        size: "small"
-                    });
-                    dlg.classList.add("formDialog");
-                    var html = "";
-                    html += Globalize.translateDocument(template);
-                    dlg.innerHTML = html;
-                    populateHours(dlg);
-                    loadSchedule(dlg, options.schedule);
-                    dialogHelper.open(dlg);
-                    dlg.addEventListener("close", function () {
-                        if (dlg.submitted) {
-                            resolve(options.schedule);
-                        } else {
-                            reject();
-                        }
-                    });
-                    dlg.querySelector(".btnCancel").addEventListener("click", function (e) {
-                        dialogHelper.close(dlg);
-                    });
-                    dlg.querySelector("form").addEventListener("submit", function (e) {
-                        submitSchedule(dlg, options);
-                        e.preventDefault();
-                        return false;
-                    });
-                };
-
-                xhr.send();
-            });
-        }
-    };
-});

src/components/actionSheet/actionSheet.js

@@ -0,0 +1,340 @@
+import dialogHelper from 'dialogHelper';
+import layoutManager from 'layoutManager';
+import globalize from 'globalize';
+import dom from 'dom';
+import 'emby-button';
+import 'css!./actionSheet';
+import 'material-icons';
+import 'scrollStyles';
+import 'listViewStyle';
+
+function getOffsets(elems) {
+
+    let results = [];
+
+    if (!document) {
+        return results;
+    }
+
+    for (let elem of elems) {
+        let box = elem.getBoundingClientRect();
+
+        results.push({
+            top: box.top,
+            left: box.left,
+            width: box.width,
+            height: box.height
+        });
+    }
+
+    return results;
+}
+
+function getPosition(options, dlg) {
+
+    const windowSize = dom.getWindowSize();
+    const windowHeight = windowSize.innerHeight;
+    const windowWidth = windowSize.innerWidth;
+
+    let pos = getOffsets([options.positionTo])[0];
+
+    if (options.positionY !== 'top') {
+        pos.top += (pos.height || 0) / 2;
+    }
+
+    pos.left += (pos.width || 0) / 2;
+
+    const height = dlg.offsetHeight || 300;
+    const width = dlg.offsetWidth || 160;
+
+    // Account for popup size
+    pos.top -= height / 2;
+    pos.left -= width / 2;
+
+    // Avoid showing too close to the bottom
+    const overflowX = pos.left + width - windowWidth;
+    const overflowY = pos.top + height - windowHeight;
+
+    if (overflowX > 0) {
+        pos.left -= (overflowX + 20);
+    }
+    if (overflowY > 0) {
+        pos.top -= (overflowY + 20);
+    }
+
+    pos.top += (options.offsetTop || 0);
+    pos.left += (options.offsetLeft || 0);
+
+    // Do some boundary checking
+    pos.top = Math.max(pos.top, 10);
+    pos.left = Math.max(pos.left, 10);
+
+    return pos;
+}
+
+function centerFocus(elem, horiz, on) {
+    require(['scrollHelper'], function (scrollHelper) {
+        const fn = on ? 'on' : 'off';
+        scrollHelper.centerFocus[fn](elem, horiz);
+    });
+}
+
+export function show(options) {
+
+    // items
+    // positionTo
+    // showCancel
+    // title
+    let dialogOptions = {
+        removeOnClose: true,
+        enableHistory: options.enableHistory,
+        scrollY: false
+    };
+
+    let isFullscreen;
+
+    if (layoutManager.tv) {
+        dialogOptions.size = 'fullscreen';
+        isFullscreen = true;
+        dialogOptions.autoFocus = true;
+    } else {
+
+        dialogOptions.modal = false;
+        dialogOptions.entryAnimation = options.entryAnimation;
+        dialogOptions.exitAnimation = options.exitAnimation;
+        dialogOptions.entryAnimationDuration = options.entryAnimationDuration || 140;
+        dialogOptions.exitAnimationDuration = options.exitAnimationDuration || 100;
+        dialogOptions.autoFocus = false;
+    }
+
+    let dlg = dialogHelper.createDialog(dialogOptions);
+
+    if (isFullscreen) {
+        dlg.classList.add('actionsheet-fullscreen');
+    } else {
+        dlg.classList.add('actionsheet-not-fullscreen');
+    }
+
+    dlg.classList.add('actionSheet');
+
+    if (options.dialogClass) {
+        dlg.classList.add(options.dialogClass);
+    }
+
+    let html = '';
+
+    const scrollClassName = layoutManager.tv ? 'scrollY smoothScrollY hiddenScrollY' : 'scrollY';
+    let style = '';
+
+    // Admittedly a hack but right now the scrollbar is being factored into the width which is causing truncation
+    if (options.items.length > 20) {
+        const minWidth = dom.getWindowSize().innerWidth >= 300 ? 240 : 200;
+        style += 'min-width:' + minWidth + 'px;';
+    }
+
+    let renderIcon = false;
+    let icons = [];
+    let itemIcon;
+    for (let item of options.items) {
+
+        itemIcon = item.icon || (item.selected ? 'check' : null);
+
+        if (itemIcon) {
+            renderIcon = true;
+        }
+        icons.push(itemIcon || '');
+    }
+
+    if (layoutManager.tv) {
+        html += `<button is="paper-icon-button-light" class="btnCloseActionSheet hide-mouse-idle-tv" tabindex="-1">
+                     <span class="material-icons arrow_back"></span>
+                 </button>`;
+    }
+
+    // If any items have an icon, give them all an icon just to make sure they're all lined up evenly
+    const center = options.title && (!renderIcon /*|| itemsWithIcons.length != options.items.length*/);
+
+    if (center || layoutManager.tv) {
+        html += '<div class="actionSheetContent actionSheetContent-centered">';
+    } else {
+        html += '<div class="actionSheetContent">';
+    }
+
+    if (options.title) {
+
+        html += '<h1 class="actionSheetTitle">' + options.title + '</h1>';
+    }
+    if (options.text) {
+        html += '<p class="actionSheetText">' + options.text + '</p>';
+    }
+
+    let scrollerClassName = 'actionSheetScroller';
+    if (layoutManager.tv) {
+        scrollerClassName += ' actionSheetScroller-tv focuscontainer-x focuscontainer-y';
+    }
+    html += '<div class="' + scrollerClassName + ' ' + scrollClassName + '" style="' + style + '">';
+
+    let menuItemClass = 'listItem listItem-button actionSheetMenuItem';
+
+    if (options.border || options.shaded) {
+        menuItemClass += ' listItem-border';
+    }
+
+    if (options.menuItemClass) {
+        menuItemClass += ' ' + options.menuItemClass;
+    }
+
+    if (layoutManager.tv) {
+        menuItemClass += ' listItem-focusscale';
+    }
+
+    if (layoutManager.mobile) {
+        menuItemClass += ' actionsheet-xlargeFont';
+    }
+
+    // 'options.items' is HTMLOptionsCollection, so no fancy loops
+    for (let i = 0; i < options.items.length; i++) {
+        const item = options.items[i];
+
+        if (item.divider) {
+
+            html += '<div class="actionsheetDivider"></div>';
+            continue;
+        }
+
+        const autoFocus = item.selected && layoutManager.tv ? ' autoFocus' : '';
+
+        // Check for null in case int 0 was passed in
+        const optionId = item.id == null || item.id === '' ? item.value : item.id;
+        html += '<button' + autoFocus + ' is="emby-button" type="button" class="' + menuItemClass + '" data-id="' + optionId + '">';
+
+        itemIcon = icons[i];
+
+        if (itemIcon) {
+            html += `<span class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons ${itemIcon}"></span>`;
+        } else if (renderIcon && !center) {
+            html += '<span class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons check" style="visibility:hidden;"></span>';
+        }
+
+        html += '<div class="listItemBody actionsheetListItemBody">';
+
+        html += '<div class="listItemBodyText actionSheetItemText">';
+        html += (item.name || item.textContent || item.innerText);
+        html += '</div>';
+
+        if (item.secondaryText) {
+            html += `<div class="listItemBodyText secondary">${item.secondaryText}</div>`;
+        }
+
+        html += '</div>';
+
+        if (item.asideText) {
+            html += `<div class="listItemAside actionSheetItemAsideText">${item.asideText}</div>`;
+        }
+
+        html += '</button>';
+    }
+
+    if (options.showCancel) {
+        html += '<div class="buttons">';
+        html += `<button is="emby-button" type="button" class="btnCloseActionSheet">${globalize.translate('ButtonCancel')}</button>`;
+        html += '</div>';
+    }
+    html += '</div>';
+
+    dlg.innerHTML = html;
+
+    if (layoutManager.tv) {
+        centerFocus(dlg.querySelector('.actionSheetScroller'), false, true);
+    }
+
+    let btnCloseActionSheet = dlg.querySelector('.btnCloseActionSheet');
+    if (btnCloseActionSheet) {
+        btnCloseActionSheet.addEventListener('click', function () {
+            dialogHelper.close(dlg);
+        });
+    }
+
+    // Seeing an issue in some non-chrome browsers where this is requiring a double click
+    //var eventName = browser.firefox ? 'mousedown' : 'click';
+    let selectedId;
+
+    let timeout;
+    if (options.timeout) {
+        timeout = setTimeout(function () {
+            dialogHelper.close(dlg);
+        }, options.timeout);
+    }
+
+    return new Promise(function (resolve, reject) {
+
+        let isResolved;
+
+        dlg.addEventListener('click', function (e) {
+
+            const actionSheetMenuItem = dom.parentWithClass(e.target, 'actionSheetMenuItem');
+
+            if (actionSheetMenuItem) {
+                selectedId = actionSheetMenuItem.getAttribute('data-id');
+
+                if (options.resolveOnClick) {
+
+                    if (options.resolveOnClick.indexOf) {
+
+                        if (options.resolveOnClick.indexOf(selectedId) !== -1) {
+
+                            resolve(selectedId);
+                            isResolved = true;
+                        }
+
+                    } else {
+                        resolve(selectedId);
+                        isResolved = true;
+                    }
+                }
+
+                dialogHelper.close(dlg);
+            }
+
+        });
+
+        dlg.addEventListener('close', function () {
+
+            if (layoutManager.tv) {
+                centerFocus(dlg.querySelector('.actionSheetScroller'), false, false);
+            }
+
+            if (timeout) {
+                clearTimeout(timeout);
+                timeout = null;
+            }
+
+            if (!isResolved) {
+                if (selectedId != null) {
+                    if (options.callback) {
+                        options.callback(selectedId);
+                    }
+
+                    resolve(selectedId);
+                } else {
+                    reject();
+                }
+            }
+        });
+
+        dialogHelper.open(dlg);
+
+        const pos = options.positionTo && dialogOptions.size !== 'fullscreen' ? getPosition(options, dlg) : null;
+
+        if (pos) {
+            dlg.style.position = 'fixed';
+            dlg.style.margin = 0;
+            dlg.style.left = pos.left + 'px';
+            dlg.style.top = pos.top + 'px';
+        }
+    });
+}
+
+export default {
+    show: show
+};

src/components/actionsheet/actionsheet.js

@@ -1,360 +0,0 @@
-define(['dialogHelper', 'layoutManager', 'globalize', 'browser', 'dom', 'emby-button', 'css!./actionsheet', 'material-icons', 'scrollStyles', 'listViewStyle'], function (dialogHelper, layoutManager, globalize, browser, dom) {
-    'use strict';
-
-    function getOffsets(elems) {
-
-        var doc = document;
-        var results = [];
-
-        if (!doc) {
-            return results;
-        }
-
-        var box;
-        var elem;
-
-        for (var i = 0, length = elems.length; i < length; i++) {
-
-            elem = elems[i];
-            // Support: BlackBerry 5, iOS 3 (original iPhone)
-            // If we don't have gBCR, just use 0,0 rather than error
-            if (elem.getBoundingClientRect) {
-                box = elem.getBoundingClientRect();
-            } else {
-                box = { top: 0, left: 0 };
-            }
-
-            results[i] = {
-                top: box.top,
-                left: box.left,
-                width: box.width,
-                height: box.height
-            };
-        }
-
-        return results;
-    }
-
-    function getPosition(options, dlg) {
-
-        var windowSize = dom.getWindowSize();
-        var windowHeight = windowSize.innerHeight;
-        var windowWidth = windowSize.innerWidth;
-
-        var pos = getOffsets([options.positionTo])[0];
-
-        if (options.positionY !== 'top') {
-            pos.top += (pos.height || 0) / 2;
-        }
-
-        pos.left += (pos.width || 0) / 2;
-
-        var height = dlg.offsetHeight || 300;
-        var width = dlg.offsetWidth || 160;
-
-        // Account for popup size
-        pos.top -= height / 2;
-        pos.left -= width / 2;
-
-        // Avoid showing too close to the bottom
-        var overflowX = pos.left + width - windowWidth;
-        var overflowY = pos.top + height - windowHeight;
-
-        if (overflowX > 0) {
-            pos.left -= (overflowX + 20);
-        }
-        if (overflowY > 0) {
-            pos.top -= (overflowY + 20);
-        }
-
-        pos.top += (options.offsetTop || 0);
-        pos.left += (options.offsetLeft || 0);
-
-        // Do some boundary checking
-        pos.top = Math.max(pos.top, 10);
-        pos.left = Math.max(pos.left, 10);
-
-        return pos;
-    }
-
-    function centerFocus(elem, horiz, on) {
-        require(['scrollHelper'], function (scrollHelper) {
-            var fn = on ? 'on' : 'off';
-            scrollHelper.centerFocus[fn](elem, horiz);
-        });
-    }
-
-    function show(options) {
-
-        // items
-        // positionTo
-        // showCancel
-        // title
-        var dialogOptions = {
-            removeOnClose: true,
-            enableHistory: options.enableHistory,
-            scrollY: false
-        };
-
-        var backButton = false;
-        var isFullscreen;
-
-        if (layoutManager.tv) {
-            dialogOptions.size = 'fullscreen';
-            isFullscreen = true;
-            backButton = true;
-            dialogOptions.autoFocus = true;
-        } else {
-
-            dialogOptions.modal = false;
-            dialogOptions.entryAnimation = options.entryAnimation;
-            dialogOptions.exitAnimation = options.exitAnimation;
-            dialogOptions.entryAnimationDuration = options.entryAnimationDuration || 140;
-            dialogOptions.exitAnimationDuration = options.exitAnimationDuration || 100;
-            dialogOptions.autoFocus = false;
-        }
-
-        var dlg = dialogHelper.createDialog(dialogOptions);
-
-        if (isFullscreen) {
-            dlg.classList.add('actionsheet-fullscreen');
-        } else {
-            dlg.classList.add('actionsheet-not-fullscreen');
-        }
-
-        dlg.classList.add('actionSheet');
-
-        if (options.dialogClass) {
-            dlg.classList.add(options.dialogClass);
-        }
-
-        var html = '';
-
-        var scrollClassName = layoutManager.tv ? 'scrollY smoothScrollY hiddenScrollY' : 'scrollY';
-        var style = '';
-
-        // Admittedly a hack but right now the scrollbar is being factored into the width which is causing truncation
-        if (options.items.length > 20) {
-            var minWidth = dom.getWindowSize().innerWidth >= 300 ? 240 : 200;
-            style += "min-width:" + minWidth + "px;";
-        }
-
-        var i;
-        var length;
-        var option;
-        var renderIcon = false;
-        var icons = [];
-        var itemIcon;
-        for (i = 0, length = options.items.length; i < length; i++) {
-
-            option = options.items[i];
-
-            itemIcon = option.icon || (option.selected ? 'check' : null);
-
-            if (itemIcon) {
-                renderIcon = true;
-            }
-            icons.push(itemIcon || '');
-        }
-
-        if (layoutManager.tv) {
-            html += '<button is="paper-icon-button-light" class="btnCloseActionSheet hide-mouse-idle-tv" tabindex="-1"><i class="material-icons arrow_back"></i></button>';
-        }
-
-        // If any items have an icon, give them all an icon just to make sure they're all lined up evenly
-        var center = options.title && (!renderIcon /*|| itemsWithIcons.length != options.items.length*/);
-
-        if (center || layoutManager.tv) {
-            html += '<div class="actionSheetContent actionSheetContent-centered">';
-        } else {
-            html += '<div class="actionSheetContent">';
-        }
-
-        if (options.title) {
-
-            html += '<h1 class="actionSheetTitle">';
-            html += options.title;
-            html += '</h1>';
-        }
-        if (options.text) {
-            html += '<p class="actionSheetText">';
-            html += options.text;
-            html += '</p>';
-        }
-
-        var scrollerClassName = 'actionSheetScroller';
-        if (layoutManager.tv) {
-            scrollerClassName += ' actionSheetScroller-tv focuscontainer-x focuscontainer-y';
-        }
-        html += '<div class="' + scrollerClassName + ' ' + scrollClassName + '" style="' + style + '">';
-
-        var menuItemClass = 'listItem listItem-button actionSheetMenuItem';
-
-        if (options.border || options.shaded) {
-            menuItemClass += ' listItem-border';
-        }
-
-        if (options.menuItemClass) {
-            menuItemClass += ' ' + options.menuItemClass;
-        }
-
-        if (layoutManager.tv) {
-            menuItemClass += ' listItem-focusscale';
-        }
-
-        if (layoutManager.mobile) {
-            menuItemClass += ' actionsheet-xlargeFont';
-        }
-
-        for (i = 0, length = options.items.length; i < length; i++) {
-
-            option = options.items[i];
-
-            if (option.divider) {
-
-                html += '<div class="actionsheetDivider"></div>';
-                continue;
-            }
-
-            var autoFocus = option.selected && layoutManager.tv ? ' autoFocus' : '';
-
-            // Check for null in case int 0 was passed in
-            var optionId = option.id == null || option.id === '' ? option.value : option.id;
-            html += '<button' + autoFocus + ' is="emby-button" type="button" class="' + menuItemClass + '" data-id="' + optionId + '">';
-
-            itemIcon = icons[i];
-
-            if (itemIcon) {
-
-                html += '<i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons">' + itemIcon + '</i>';
-            } else if (renderIcon && !center) {
-                html += '<i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons" style="visibility:hidden;">check</i>';
-            }
-
-            html += '<div class="listItemBody actionsheetListItemBody">';
-
-            html += '<div class="listItemBodyText actionSheetItemText">';
-            html += (option.name || option.textContent || option.innerText);
-            html += '</div>';
-
-            if (option.secondaryText) {
-                html += '<div class="listItemBodyText secondary">';
-                html += option.secondaryText;
-                html += '</div>';
-            }
-
-            html += '</div>';
-
-            if (option.asideText) {
-                html += '<div class="listItemAside actionSheetItemAsideText">';
-                html += option.asideText;
-                html += '</div>';
-            }
-
-            html += '</button>';
-        }
-
-        if (options.showCancel) {
-            html += '<div class="buttons">';
-            html += '<button is="emby-button" type="button" class="btnCloseActionSheet">' + globalize.translate('ButtonCancel') + '</button>';
-            html += '</div>';
-        }
-        html += '</div>';
-
-        dlg.innerHTML = html;
-
-        if (layoutManager.tv) {
-            centerFocus(dlg.querySelector('.actionSheetScroller'), false, true);
-        }
-
-        var btnCloseActionSheet = dlg.querySelector('.btnCloseActionSheet');
-        if (btnCloseActionSheet) {
-            dlg.querySelector('.btnCloseActionSheet').addEventListener('click', function () {
-                dialogHelper.close(dlg);
-            });
-        }
-
-        // Seeing an issue in some non-chrome browsers where this is requiring a double click
-        //var eventName = browser.firefox ? 'mousedown' : 'click';
-        var selectedId;
-
-        var timeout;
-        if (options.timeout) {
-            timeout = setTimeout(function () {
-                dialogHelper.close(dlg);
-            }, options.timeout);
-        }
-
-        return new Promise(function (resolve, reject) {
-
-            var isResolved;
-
-            dlg.addEventListener('click', function (e) {
-
-                var actionSheetMenuItem = dom.parentWithClass(e.target, 'actionSheetMenuItem');
-
-                if (actionSheetMenuItem) {
-                    selectedId = actionSheetMenuItem.getAttribute('data-id');
-
-                    if (options.resolveOnClick) {
-
-                        if (options.resolveOnClick.indexOf) {
-
-                            if (options.resolveOnClick.indexOf(selectedId) !== -1) {
-
-                                resolve(selectedId);
-                                isResolved = true;
-                            }
-
-                        } else {
-                            resolve(selectedId);
-                            isResolved = true;
-                        }
-                    }
-
-                    dialogHelper.close(dlg);
-                }
-
-            });
-
-            dlg.addEventListener('close', function () {
-
-                if (layoutManager.tv) {
-                    centerFocus(dlg.querySelector('.actionSheetScroller'), false, false);
-                }
-
-                if (timeout) {
-                    clearTimeout(timeout);
-                    timeout = null;
-                }
-
-                if (!isResolved) {
-                    if (selectedId != null) {
-                        if (options.callback) {
-                            options.callback(selectedId);
-                        }
-
-                        resolve(selectedId);
-                    } else {
-                        reject();
-                    }
-                }
-            });
-
-            dialogHelper.open(dlg);
-
-            var pos = options.positionTo && dialogOptions.size !== 'fullscreen' ? getPosition(options, dlg) : null;
-
-            if (pos) {
-                dlg.style.position = 'fixed';
-                dlg.style.margin = 0;
-                dlg.style.left = pos.left + 'px';
-                dlg.style.top = pos.top + 'px';
-            }
-        });
-    }
-
-    return {
-        show: show
-    };
-});

src/components/activitylog.js

@@ -1,59 +1,63 @@
-define(["events", "globalize", "dom", "date-fns", "dfnshelper", "userSettings", "serverNotifications", "connectionManager", "emby-button", "listViewStyle"], function (events, globalize, dom, datefns, dfnshelper, userSettings, serverNotifications, connectionManager) {
-    "use strict";
+define(['events', 'globalize', 'dom', 'date-fns', 'dfnshelper', 'userSettings', 'serverNotifications', 'connectionManager', 'emby-button', 'listViewStyle'], function (events, globalize, dom, datefns, dfnshelper, userSettings, serverNotifications, connectionManager) {
+    'use strict';
 
     function getEntryHtml(entry, apiClient) {
-        var html = "";
+        var html = '';
         html += '<div class="listItem listItem-border">';
-        var color = "#00a4dc";
-        var icon = "notifications";
+        var color = '#00a4dc';
+        var icon = 'notifications';
 
-        if ("Error" == entry.Severity || "Fatal" == entry.Severity || "Warn" == entry.Severity) {
-            color = "#cc0000";
-            icon = "notification_important";
+        if ('Error' == entry.Severity || 'Fatal' == entry.Severity || 'Warn' == entry.Severity) {
+            color = '#cc0000';
+            icon = 'notification_important';
         }
 
         if (entry.UserId && entry.UserPrimaryImageTag) {
-            html += '<i class="listItemIcon material-icons" style="width:2em!important;height:2em!important;padding:0;color:transparent;background-color:' + color + ";background-image:url('" + apiClient.getUserImageUrl(entry.UserId, {
-                type: "Primary",
+            html += '<span class="listItemIcon material-icons dvr" style="width:2em!important;height:2em!important;padding:0;color:transparent;background-color:' + color + ";background-image:url('" + apiClient.getUserImageUrl(entry.UserId, {
+                type: 'Primary',
                 tag: entry.UserPrimaryImageTag
-            }) + "');background-repeat:no-repeat;background-position:center center;background-size: cover;\">dvr</i>";
+            }) + "');background-repeat:no-repeat;background-position:center center;background-size: cover;\"></span>";
         } else {
-            html += '<i class="listItemIcon material-icons" style="background-color:' + color + '">' + icon + '</i>';
+            html += '<span class="listItemIcon material-icons ' + icon + '" style="background-color:' + color + '"></span>';
         }
 
         html += '<div class="listItemBody three-line">';
         html += '<div class="listItemBodyText">';
         html += entry.Name;
-        html += "</div>";
+        html += '</div>';
         html += '<div class="listItemBodyText secondary">';
         html += datefns.formatRelative(Date.parse(entry.Date), Date.parse(new Date()), { locale: dfnshelper.getLocale() });
-        html += "</div>";
+        html += '</div>';
         html += '<div class="listItemBodyText secondary listItemBodyText-nowrap">';
-        html += entry.ShortOverview || "";
-        html += "</div>";
-        html += "</div>";
+        html += entry.ShortOverview || '';
+        html += '</div>';
+        html += '</div>';
 
         if (entry.Overview) {
-            html += '<button type="button" is="paper-icon-button-light" class="btnEntryInfo" data-id="' + entry.Id + '" title="' + globalize.translate("Info") + '"><i class="material-icons">info</i></button>';
+            html += `<button type="button" is="paper-icon-button-light" class="btnEntryInfo" data-id="${entry.Id}" title="${globalize.translate('Info')}">
+                       <span class="material-icons info"></span>
+                    </button>`;
         }
 
-        return html += "</div>";
+        html += '</div>';
+
+        return html;
     }
 
     function renderList(elem, apiClient, result, startIndex, limit) {
         elem.innerHTML = result.Items.map(function (i) {
             return getEntryHtml(i, apiClient);
-        }).join("");
+        }).join('');
     }
 
     function reloadData(instance, elem, apiClient, startIndex, limit) {
         if (null == startIndex) {
-            startIndex = parseInt(elem.getAttribute("data-activitystartindex") || "0");
+            startIndex = parseInt(elem.getAttribute('data-activitystartindex') || '0');
         }
 
-        limit = limit || parseInt(elem.getAttribute("data-activitylimit") || "7");
+        limit = limit || parseInt(elem.getAttribute('data-activitylimit') || '7');
         var minDate = new Date();
-        var hasUserId = "false" !== elem.getAttribute("data-useractivity");
+        var hasUserId = 'false' !== elem.getAttribute('data-useractivity');
 
         if (hasUserId) {
             minDate.setTime(minDate.getTime() - 24 * 60 * 60 * 1000); // one day back
@@ -61,22 +65,22 @@ define(["events", "globalize", "dom", "date-fns", "dfnshelper", "userSettings",
             minDate.setTime(minDate.getTime() - 7 * 24 * 60 * 60 * 1000); // one week back
         }
 
-        ApiClient.getJSON(ApiClient.getUrl("System/ActivityLog/Entries", {
+        ApiClient.getJSON(ApiClient.getUrl('System/ActivityLog/Entries', {
             startIndex: startIndex,
             limit: limit,
             minDate: minDate.toISOString(),
             hasUserId: hasUserId
         })).then(function (result) {
-            elem.setAttribute("data-activitystartindex", startIndex);
-            elem.setAttribute("data-activitylimit", limit);
+            elem.setAttribute('data-activitystartindex', startIndex);
+            elem.setAttribute('data-activitylimit', limit);
             if (!startIndex) {
-                var activityContainer = dom.parentWithClass(elem, "activityContainer");
+                var activityContainer = dom.parentWithClass(elem, 'activityContainer');
 
                 if (activityContainer) {
                     if (result.Items.length) {
-                        activityContainer.classList.remove("hide");
+                        activityContainer.classList.remove('hide');
                     } else {
-                        activityContainer.classList.add("hide");
+                        activityContainer.classList.add('hide');
                     }
                 }
             }
@@ -95,10 +99,10 @@ define(["events", "globalize", "dom", "date-fns", "dfnshelper", "userSettings",
     }
 
     function onListClick(e) {
-        var btnEntryInfo = dom.parentWithClass(e.target, "btnEntryInfo");
+        var btnEntryInfo = dom.parentWithClass(e.target, 'btnEntryInfo');
 
         if (btnEntryInfo) {
-            var id = btnEntryInfo.getAttribute("data-id");
+            var id = btnEntryInfo.getAttribute('data-id');
             var items = this.items;
 
             if (items) {
@@ -114,7 +118,7 @@ define(["events", "globalize", "dom", "date-fns", "dfnshelper", "userSettings",
     }
 
     function showItemOverview(item) {
-        require(["alert"], function (alert) {
+        require(['alert'], function (alert) {
             alert({
                 text: item.Overview
             });
@@ -124,28 +128,28 @@ define(["events", "globalize", "dom", "date-fns", "dfnshelper", "userSettings",
     function ActivityLog(options) {
         this.options = options;
         var element = options.element;
-        element.classList.add("activityLogListWidget");
-        element.addEventListener("click", onListClick.bind(this));
+        element.classList.add('activityLogListWidget');
+        element.addEventListener('click', onListClick.bind(this));
         var apiClient = connectionManager.getApiClient(options.serverId);
         reloadData(this, element, apiClient);
         var onUpdate = onActivityLogUpdate.bind(this);
         this.updateFn = onUpdate;
-        events.on(serverNotifications, "ActivityLogEntry", onUpdate);
-        apiClient.sendMessage("ActivityLogEntryStart", "0,1500");
+        events.on(serverNotifications, 'ActivityLogEntry', onUpdate);
+        apiClient.sendMessage('ActivityLogEntryStart', '0,1500');
     }
 
     ActivityLog.prototype.destroy = function () {
         var options = this.options;
 
         if (options) {
-            options.element.classList.remove("activityLogListWidget");
-            connectionManager.getApiClient(options.serverId).sendMessage("ActivityLogEntryStop", "0,1500");
+            options.element.classList.remove('activityLogListWidget');
+            connectionManager.getApiClient(options.serverId).sendMessage('ActivityLogEntryStop', '0,1500');
         }
 
         var onUpdate = this.updateFn;
 
         if (onUpdate) {
-            events.off(serverNotifications, "ActivityLogEntry", onUpdate);
+            events.off(serverNotifications, 'ActivityLogEntry', onUpdate);
         }
 
         this.items = null;

src/components/alphaPicker/alphaPicker.js

@@ -67,7 +67,7 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
 
         html += '<div class="' + rowClassName + '">';
         if (options.mode === 'keyboard') {
-            html += '<button data-value=" " is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><i class="material-icons alphaPickerButtonIcon space_bar"></i></button>';
+            html += '<button data-value=" " is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><span class="material-icons alphaPickerButtonIcon space_bar"></span></button>';
         } else {
             letters = ['#'];
             html += mapLetters(letters, vertical).join('');
@@ -77,7 +77,7 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
         html += mapLetters(letters, vertical).join('');
 
         if (options.mode === 'keyboard') {
-            html += '<button data-value="backspace" is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><i class="material-icons alphaPickerButtonIcon">backspace</i></button>';
+            html += '<button data-value="backspace" is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><span class="material-icons alphaPickerButtonIcon backspace"></span></button>';
             html += '</div>';
 
             letters = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
@@ -132,7 +132,7 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
             if (alphaPickerButton) {
                 var value = alphaPickerButton.getAttribute('data-value');
 
-                element.dispatchEvent(new CustomEvent("alphavalueclicked", {
+                element.dispatchEvent(new CustomEvent('alphavalueclicked', {
                     cancelable: false,
                     detail: {
                         value: value
@@ -262,7 +262,7 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
         }
 
         if (applyValue) {
-            element.dispatchEvent(new CustomEvent("alphavaluechanged", {
+            element.dispatchEvent(new CustomEvent('alphavaluechanged', {
                 cancelable: false,
                 detail: {
                     value: value

src/components/appFooter/appFooter.js

@@ -1,4 +1,4 @@
-define(['browser', 'css!./appfooter'], function (browser) {
+define(['browser', 'css!./appFooter'], function (browser) {
     'use strict';
 
     function render(options) {

src/components/appRouter.js

@@ -1,4 +1,4 @@
-define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinManager', 'pluginManager', 'backdrop', 'browser', 'page', 'appSettings', 'apphost', 'connectionManager'], function (loading, globalize, events, viewManager, layoutManager, skinManager, pluginManager, backdrop, browser, page, appSettings, appHost, connectionManager) {
+define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdrop', 'browser', 'page', 'appSettings', 'apphost', 'connectionManager'], function (loading, globalize, events, viewManager, skinManager, backdrop, browser, page, appSettings, appHost, connectionManager) {
     'use strict';
 
     var appRouter = {
@@ -16,7 +16,7 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM
             show('/settings/settings.html');
         },
         showNowPlaying: function () {
-            show("/nowplaying.html");
+            show('/nowplaying.html');
         }
     };
 
@@ -26,11 +26,11 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM
         connectionManager.connect({
             enableAutoLogin: appSettings.enableAutoLogin()
         }).then(function (result) {
-            handleConnectionResult(result, loading);
+            handleConnectionResult(result);
         });
     }
 
-    function handleConnectionResult(result, loading) {
+    function handleConnectionResult(result) {
         switch (result.State) {
             case 'SignedIn':
                 loading.hide();
@@ -200,8 +200,8 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM
 
         var apiClient = this;
 
-        if (data.status === 401) {
-            if (data.errorCode === "ParentalControl") {
+        if (data.status === 403) {
+            if (data.errorCode === 'ParentalControl') {
 
                 var isCurrentAllowed = currentRouteInfo ? (currentRouteInfo.route.anonymous || currentRouteInfo.route.startup) : true;
 
@@ -246,13 +246,11 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM
         }
 
         if (setQuality) {
-
-            var quality = 100;
-
+            var quality;
             var type = options.type || 'Primary';
 
             if (browser.tv || browser.slow) {
-
+                // TODO: wtf
                 if (browser.chrome) {
                     // webp support
                     quality = type === 'Primary' ? 40 : 50;
@@ -268,6 +266,7 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM
     }
 
     function getMaxBandwidth() {
+        /* eslint-disable compat/compat */
         if (navigator.connection) {
             var max = navigator.connection.downlinkMax;
             if (max && max > 0 && max < Number.POSITIVE_INFINITY) {
@@ -279,6 +278,7 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM
                 return max;
             }
         }
+        /* eslint-enable compat/compat */
 
         return null;
     }
@@ -382,7 +382,7 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM
 
             if (firstResult.State !== 'SignedIn' && !route.anonymous) {
 
-                handleConnectionResult(firstResult, loading);
+                handleConnectionResult(firstResult);
                 return;
             }
         }
@@ -461,7 +461,6 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM
         return Promise.resolve();
     }
 
-    var isHandlingBackToDefault;
     var isDummyBackToHome;
 
     function loadContent(ctx, route, html, request) {
@@ -539,15 +538,15 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM
     }
 
     function param(name, url) {
-        name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
-        var regexS = "[\\?&]" + name + "=([^&#]*)";
-        var regex = new RegExp(regexS, "i");
+        name = name.replace(/[\[]/, '\\\[').replace(/[\]]/, '\\\]');
+        var regexS = '[\\?&]' + name + '=([^&#]*)';
+        var regex = new RegExp(regexS, 'i');
 
         var results = regex.exec(url || getWindowLocationSearch());
         if (results == null) {
-            return "";
+            return '';
         } else {
-            return decodeURIComponent(results[1].replace(/\+/g, " "));
+            return decodeURIComponent(results[1].replace(/\+/g, ' '));
         }
     }
 
@@ -577,7 +576,8 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM
 
     function showDirect(path) {
         return new Promise(function(resolve, reject) {
-            resolveOnNextShow = resolve, page.show(baseUrl()+path);
+            resolveOnNextShow = resolve;
+            page.show(baseUrl() + path);
         });
     }
 
@@ -586,8 +586,7 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM
             path = '/' + path;
         }
 
-        var baseRoute = baseUrl();
-        path = path.replace(baseRoute, '');
+        path = path.replace(baseUrl(), '');
 
         if (currentRouteInfo && currentRouteInfo.path === path) {
             // can't use this with home right now due to the back menu
@@ -618,10 +617,11 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM
     }
 
     function showItem(item, serverId, options) {
+        // TODO: Refactor this so it only gets items, not strings.
         if (typeof (item) === 'string') {
             var apiClient = serverId ? connectionManager.getApiClient(serverId) : connectionManager.currentApiClient();
-            apiClient.getItem(apiClient.getCurrentUserId(), item).then(function (item) {
-                appRouter.showItem(item, options);
+            apiClient.getItem(apiClient.getCurrentUserId(), item).then(function (itemObject) {
+                appRouter.showItem(itemObject, options);
             });
         } else {
             if (arguments.length === 2) {

src/components/apphost.js

@@ -1,17 +1,17 @@
-define(["appSettings", "browser", "events", "htmlMediaHelper", "webSettings"], function (appSettings, browser, events, htmlMediaHelper, webSettings) {
-    "use strict";
+define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'globalize'], function (appSettings, browser, events, htmlMediaHelper, webSettings, globalize) {
+    'use strict';
 
     function getBaseProfileOptions(item) {
         var disableHlsVideoAudioCodecs = [];
 
         if (item && htmlMediaHelper.enableHlsJsPlayer(item.RunTimeTicks, item.MediaType)) {
-            if (browser.edge || browser.msie) {
-                disableHlsVideoAudioCodecs.push("mp3");
+            if (browser.edge) {
+                disableHlsVideoAudioCodecs.push('mp3');
             }
 
-            disableHlsVideoAudioCodecs.push("ac3");
-            disableHlsVideoAudioCodecs.push("eac3");
-            disableHlsVideoAudioCodecs.push("opus");
+            disableHlsVideoAudioCodecs.push('ac3');
+            disableHlsVideoAudioCodecs.push('eac3');
+            disableHlsVideoAudioCodecs.push('opus');
         }
 
         return {
@@ -22,7 +22,7 @@ define(["appSettings", "browser", "events", "htmlMediaHelper", "webSettings"], f
 
     function getDeviceProfileForWindowsUwp(item) {
         return new Promise(function (resolve, reject) {
-            require(["browserdeviceprofile", "environments/windows-uwp/mediacaps"], function (profileBuilder, uwpMediaCaps) {
+            require(['browserdeviceprofile', 'environments/windows-uwp/mediacaps'], function (profileBuilder, uwpMediaCaps) {
                 var profileOptions = getBaseProfileOptions(item);
                 profileOptions.supportsDts = uwpMediaCaps.supportsDTS();
                 profileOptions.supportsTrueHd = uwpMediaCaps.supportsDolby();
@@ -40,26 +40,15 @@ define(["appSettings", "browser", "events", "htmlMediaHelper", "webSettings"], f
         }
 
         return new Promise(function (resolve) {
-            require(["browserdeviceprofile"], function (profileBuilder) {
+            require(['browserdeviceprofile'], function (profileBuilder) {
                 var profile;
 
                 if (window.NativeShell) {
                     profile = window.NativeShell.AppHost.getDeviceProfile(profileBuilder);
                 } else {
-                    profile = profileBuilder(getBaseProfileOptions(item));
-
-                    if (item && !options.isRetry && "allcomplexformats" !== appSettings.get("subtitleburnin")) {
-                        if (!browser.orsay && !browser.tizen) {
-                            profile.SubtitleProfiles.push({
-                                Format: "ass",
-                                Method: "External"
-                            });
-                            profile.SubtitleProfiles.push({
-                                Format: "ssa",
-                                Method: "External"
-                            });
-                        }
-                    }
+                    var builderOpts = getBaseProfileOptions(item);
+                    builderOpts.enableSsaRender = (item && !options.isRetry && 'allcomplexformats' !== appSettings.get('subtitleburnin'));
+                    profile = profileBuilder(builderOpts);
                 }
 
                 resolve(profile);
@@ -68,12 +57,12 @@ define(["appSettings", "browser", "events", "htmlMediaHelper", "webSettings"], f
     }
 
     function escapeRegExp(str) {
-        return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
+        return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, '\\$1');
     }
 
     function replaceAll(originalString, strReplace, strWith) {
         var strReplace2 = escapeRegExp(strReplace);
-        var reg = new RegExp(strReplace2, "ig");
+        var reg = new RegExp(strReplace2, 'ig');
         return originalString.replace(reg, strWith);
     }
 
@@ -81,7 +70,7 @@ define(["appSettings", "browser", "events", "htmlMediaHelper", "webSettings"], f
         var keys = [];
 
         if (keys.push(navigator.userAgent), keys.push(new Date().getTime()), self.btoa) {
-            var result = replaceAll(btoa(keys.join("|")), "=", "1");
+            var result = replaceAll(btoa(keys.join('|')), '=', '1');
             return Promise.resolve(result);
         }
 
@@ -89,7 +78,7 @@ define(["appSettings", "browser", "events", "htmlMediaHelper", "webSettings"], f
     }
 
     function getDeviceId() {
-        var key = "_deviceId2";
+        var key = '_deviceId2';
         var deviceId = appSettings.get(key);
 
         if (deviceId) {
@@ -104,18 +93,36 @@ define(["appSettings", "browser", "events", "htmlMediaHelper", "webSettings"], f
 
     function getDeviceName() {
         var deviceName;
-        deviceName = browser.tizen ? "Samsung Smart TV" : browser.web0s ? "LG Smart TV" : browser.operaTv ? "Opera TV" : browser.xboxOne ? "Xbox One" : browser.ps4 ? "Sony PS4" : browser.chrome ? "Chrome" : browser.edge ? "Edge" : browser.firefox ? "Firefox" : browser.msie ? "Internet Explorer" : browser.opera ? "Opera" : browser.safari ? "Safari" : "Web Browser";
+        if (browser.tizen) {
+            deviceName = 'Samsung Smart TV';
+        } else if (browser.web0s) {
+            deviceName = 'LG Smart TV';
+        } else if (browser.operaTv) {
+            deviceName = 'Opera TV';
+        } else if (browser.xboxOne) {
+            deviceName = 'Xbox One';
+        } else if (browser.ps4) {
+            deviceName = 'Sony PS4';
+        } else if (browser.chrome) {
+            deviceName = 'Chrome';
+        } else if (browser.edge) {
+            deviceName = 'Edge';
+        } else if (browser.firefox) {
+            deviceName = 'Firefox';
+        } else if (browser.opera) {
+            deviceName = 'Opera';
+        } else if (browser.safari) {
+            deviceName = 'Safari';
+        } else {
+            deviceName = 'Web Browser';
+        }
 
         if (browser.ipad) {
-            deviceName += " iPad";
-        } else {
-            if (browser.iphone) {
-                deviceName += " iPhone";
-            } else {
-                if (browser.android) {
-                    deviceName += " Android";
-                }
-            }
+            deviceName += ' iPad';
+        } else if (browser.iphone) {
+            deviceName += ' iPhone';
+        } else if (browser.android) {
+            deviceName += ' Android';
         }
 
         return deviceName;
@@ -135,12 +142,12 @@ define(["appSettings", "browser", "events", "htmlMediaHelper", "webSettings"], f
         }
 
         var element = document.documentElement;
-        return (element.requestFullscreen || element.mozRequestFullScreen || element.webkitRequestFullscreen || element.msRequestFullscreen) || document.createElement("video").webkitEnterFullscreen;
+        return (element.requestFullscreen || element.mozRequestFullScreen || element.webkitRequestFullscreen || element.msRequestFullscreen) || document.createElement('video').webkitEnterFullscreen;
     }
 
     function getSyncProfile() {
         return new Promise(function (resolve) {
-            require(["browserdeviceprofile", "appSettings"], function (profileBuilder, appSettings) {
+            require(['browserdeviceprofile', 'appSettings'], function (profileBuilder, appSettings) {
                 var profile;
 
                 if (window.NativeShell) {
@@ -156,7 +163,7 @@ define(["appSettings", "browser", "events", "htmlMediaHelper", "webSettings"], f
     }
 
     function getDefaultLayout() {
-        return "desktop";
+        return 'desktop';
     }
 
     function supportsHtmlMediaAutoplay() {
@@ -173,20 +180,20 @@ define(["appSettings", "browser", "events", "htmlMediaHelper", "webSettings"], f
 
     function supportsCue() {
         try {
-            var video = document.createElement("video");
-            var style = document.createElement("style");
+            var video = document.createElement('video');
+            var style = document.createElement('style');
 
-            style.textContent = "video::cue {background: inherit}";
+            style.textContent = 'video::cue {background: inherit}';
             document.body.appendChild(style);
             document.body.appendChild(video);
 
-            var cue = window.getComputedStyle(video, "::cue").background;
+            var cue = window.getComputedStyle(video, '::cue').background;
             document.body.removeChild(style);
             document.body.removeChild(video);
 
             return !!cue.length;
         } catch (err) {
-            console.error("error detecting cue support: " + err);
+            console.error('error detecting cue support: ' + err);
             return false;
         }
     }
@@ -194,15 +201,15 @@ define(["appSettings", "browser", "events", "htmlMediaHelper", "webSettings"], f
     function onAppVisible() {
         if (isHidden) {
             isHidden = false;
-            console.debug("triggering app resume event");
-            events.trigger(appHost, "resume");
+            console.debug('triggering app resume event');
+            events.trigger(appHost, 'resume');
         }
     }
 
     function onAppHidden() {
         if (!isHidden) {
             isHidden = true;
-            console.debug("app is hidden");
+            console.debug('app is hidden');
         }
     }
 
@@ -210,92 +217,88 @@ define(["appSettings", "browser", "events", "htmlMediaHelper", "webSettings"], f
         var features = [];
 
         if (navigator.share) {
-            features.push("sharing");
+            features.push('sharing');
         }
 
         if (!browser.edgeUwp && !browser.tv && !browser.xboxOne && !browser.ps4) {
-            features.push("filedownload");
+            features.push('filedownload');
         }
 
         if (browser.operaTv || browser.tizen || browser.orsay || browser.web0s) {
-            features.push("exit");
+            features.push('exit');
         } else {
-            features.push("exitmenu");
-            features.push("plugins");
+            features.push('exitmenu');
+            features.push('plugins');
         }
 
         if (!browser.operaTv && !browser.tizen && !browser.orsay && !browser.web0s && !browser.ps4) {
-            features.push("externallinks");
-            features.push("externalpremium");
+            features.push('externallinks');
+            features.push('externalpremium');
         }
 
         if (!browser.operaTv) {
-            features.push("externallinkdisplay");
+            features.push('externallinkdisplay');
         }
 
         if (supportsVoiceInput()) {
-            features.push("voiceinput");
-        }
-
-        if (!browser.tv && !browser.xboxOne) {
-            browser.ps4;
+            features.push('voiceinput');
         }
 
         if (supportsHtmlMediaAutoplay()) {
-            features.push("htmlaudioautoplay");
-            features.push("htmlvideoautoplay");
+            features.push('htmlaudioautoplay');
+            features.push('htmlvideoautoplay');
         }
 
         if (browser.edgeUwp) {
-            features.push("sync");
+            features.push('sync');
         }
 
         if (supportsFullscreen()) {
-            features.push("fullscreenchange");
+            features.push('fullscreenchange');
         }
 
         if (browser.chrome || browser.edge && !browser.slow) {
             if (!browser.noAnimation && !browser.edgeUwp && !browser.xboxOne) {
-                features.push("imageanalysis");
+                features.push('imageanalysis');
             }
         }
 
         if (browser.tv || browser.xboxOne || browser.ps4 || browser.mobile) {
-            features.push("physicalvolumecontrol");
+            features.push('physicalvolumecontrol');
         }
 
         if (!browser.tv && !browser.xboxOne && !browser.ps4) {
-            features.push("remotecontrol");
+            features.push('remotecontrol');
         }
 
         if (!browser.operaTv && !browser.tizen && !browser.orsay && !browser.web0s && !browser.edgeUwp) {
-            features.push("remotevideo");
+            features.push('remotevideo');
         }
 
-        features.push("displaylanguage");
-        features.push("otherapppromotions");
-        features.push("displaymode");
-        features.push("targetblank");
-        features.push("screensaver");
+        features.push('displaylanguage');
+        features.push('otherapppromotions');
+        features.push('displaymode');
+        features.push('targetblank');
+        features.push('screensaver');
 
         webSettings.enableMultiServer().then(enabled => {
-            if (enabled) features.push("multiserver");
+            if (enabled) features.push('multiserver');
         });
 
-        if (!browser.orsay && !browser.msie && (browser.firefox || browser.ps4 || browser.edge || supportsCue())) {
-            features.push("subtitleappearancesettings");
+        if (!browser.orsay && (browser.firefox || browser.ps4 || browser.edge || supportsCue())) {
+            features.push('subtitleappearancesettings');
         }
 
         if (!browser.orsay) {
-            features.push("subtitleburnsettings");
+            features.push('subtitleburnsettings');
         }
 
         if (!browser.tv && !browser.ps4 && !browser.xboxOne) {
-            features.push("fileinput");
+            features.push('fileinput');
         }
 
         if (browser.chrome) {
-            features.push("chromecast");
+            features.push('chromecast');
         }
 
         return features;
@@ -316,7 +319,7 @@ define(["appSettings", "browser", "events", "htmlMediaHelper", "webSettings"], f
                 window.close();
             }
         } catch (err) {
-            console.error("error closing application: " + err);
+            console.error('error closing application: ' + err);
         }
     }
 
@@ -330,15 +333,15 @@ define(["appSettings", "browser", "events", "htmlMediaHelper", "webSettings"], f
             return;
         }
 
-        require(["actionsheet"], function (actionsheet) {
+        require(['actionsheet'], function (actionsheet) {
             exitPromise = actionsheet.show({
-                title: Globalize.translate("MessageConfirmAppExit"),
+                title: globalize.translate('MessageConfirmAppExit'),
                 items: [
-                    {id: "yes", name: Globalize.translate("Yes")},
-                    {id: "no", name: Globalize.translate("No")}
+                    {id: 'yes', name: globalize.translate('Yes')},
+                    {id: 'no', name: globalize.translate('No')}
                 ]
             }).then(function (value) {
-                if (value === "yes") {
+                if (value === 'yes') {
                     doExit();
                 }
             }).finally(function () {
@@ -349,17 +352,15 @@ define(["appSettings", "browser", "events", "htmlMediaHelper", "webSettings"], f
 
     var deviceId;
     var deviceName;
-    var appName = "Jellyfin Web";
-    var appVersion = "10.5.0";
-    var visibilityChange;
-    var visibilityState;
+    var appName = 'Jellyfin Web';
+    var appVersion = '10.6.0';
 
     var appHost = {
         getWindowState: function () {
-            return document.windowState || "Normal";
+            return document.windowState || 'Normal';
         },
         setWindowState: function (state) {
-            alert("setWindowState is not supported and should not be called");
+            alert('setWindowState is not supported and should not be called');
         },
         exit: function () {
             if (!!window.appMode && browser.tizen) {
@@ -376,7 +377,6 @@ define(["appSettings", "browser", "events", "htmlMediaHelper", "webSettings"], f
             return -1 !== supportedFeatures.indexOf(command.toLowerCase());
         },
         preferVisualCards: browser.android || browser.chrome,
-        moreIcon: browser.android ? "more_vert" : "more_horiz",
         getSyncProfile: getSyncProfile,
         getDefaultLayout: function () {
             if (window.NativeShell) {
@@ -412,58 +412,44 @@ define(["appSettings", "browser", "events", "htmlMediaHelper", "webSettings"], f
             return {};
         },
         setThemeColor: function (color) {
-            var metaThemeColor = document.querySelector("meta[name=theme-color]");
+            var metaThemeColor = document.querySelector('meta[name=theme-color]');
 
             if (metaThemeColor) {
-                metaThemeColor.setAttribute("content", color);
+                metaThemeColor.setAttribute('content', color);
             }
         },
         setUserScalable: function (scalable) {
             if (!browser.tv) {
-                var att = scalable ? "width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes" : "width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no";
-                document.querySelector("meta[name=viewport]").setAttribute("content", att);
+                var att = scalable ? 'width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes' : 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no';
+                document.querySelector('meta[name=viewport]').setAttribute('content', att);
             }
         }
     };
 
-    var doc = self.document;
     var isHidden = false;
+    var hidden;
+    var visibilityChange;
 
-    if (doc) {
-        if (void 0 !== doc.visibilityState) {
-            visibilityChange = "visibilitychange";
-            visibilityState = "hidden";
+    if (typeof document.hidden !== 'undefined') { /* eslint-disable-line compat/compat */
+        hidden = 'hidden';
+        visibilityChange = 'visibilitychange';
+    } else if (typeof document.webkitHidden !== 'undefined') {
+        hidden = 'webkitHidden';
+        visibilityChange = 'webkitvisibilitychange';
+    }
+
+    document.addEventListener(visibilityChange, function () {
+        /* eslint-disable-next-line compat/compat */
+        if (document[hidden]) {
+            onAppHidden();
         } else {
-            if (void 0 !== doc.mozHidden) {
-                visibilityChange = "mozvisibilitychange";
-                visibilityState = "mozVisibilityState";
-            } else {
-                if (void 0 !== doc.msHidden) {
-                    visibilityChange = "msvisibilitychange";
-                    visibilityState = "msVisibilityState";
-                } else {
-                    if (void 0 !== doc.webkitHidden) {
-                        visibilityChange = "webkitvisibilitychange";
-                        visibilityState = "webkitVisibilityState";
-                    }
-                }
-            }
+            onAppVisible();
         }
-    }
-
-    if (doc) {
-        doc.addEventListener(visibilityChange, function () {
-            if (document[visibilityState]) {
-                onAppHidden();
-            } else {
-                onAppVisible();
-            }
-        });
-    }
+    }, false);
 
     if (self.addEventListener) {
-        self.addEventListener("focus", onAppVisible);
-        self.addEventListener("blur", onAppHidden);
+        self.addEventListener('focus', onAppVisible);
+        self.addEventListener('blur', onAppHidden);
     }
 
     return appHost;

src/components/autoFocuser.js

@@ -5,8 +5,8 @@
  * @module components/autoFocuser
  */
 
-import focusManager from "focusManager";
-import layoutManager from "layoutManager";
+import focusManager from 'focusManager';
+import layoutManager from 'layoutManager';
 
     /**
      * Previously selected element.
@@ -28,11 +28,11 @@ import layoutManager from "layoutManager";
             return;
         }
 
-        window.addEventListener("focusin", function (e) {
+        window.addEventListener('focusin', function (e) {
             activeElement = e.target;
         });
 
-        console.debug("AutoFocuser enabled");
+        console.debug('AutoFocuser enabled');
     }
 
     /**
@@ -51,21 +51,21 @@ import layoutManager from "layoutManager";
 
         if (activeElement) {
             // These elements are recreated
-            if (activeElement.classList.contains("btnPreviousPage")) {
-                candidates.push(container.querySelector(".btnPreviousPage"));
-                candidates.push(container.querySelector(".btnNextPage"));
-            } else if (activeElement.classList.contains("btnNextPage")) {
-                candidates.push(container.querySelector(".btnNextPage"));
-                candidates.push(container.querySelector(".btnPreviousPage"));
-            } else if (activeElement.classList.contains("btnSelectView")) {
-                candidates.push(container.querySelector(".btnSelectView"));
+            if (activeElement.classList.contains('btnPreviousPage')) {
+                candidates.push(container.querySelector('.btnPreviousPage'));
+                candidates.push(container.querySelector('.btnNextPage'));
+            } else if (activeElement.classList.contains('btnNextPage')) {
+                candidates.push(container.querySelector('.btnNextPage'));
+                candidates.push(container.querySelector('.btnPreviousPage'));
+            } else if (activeElement.classList.contains('btnSelectView')) {
+                candidates.push(container.querySelector('.btnSelectView'));
             }
 
             candidates.push(activeElement);
         }
 
-        candidates = candidates.concat(Array.from(container.querySelectorAll(".btnResume")));
-        candidates = candidates.concat(Array.from(container.querySelectorAll(".btnPlay")));
+        candidates = candidates.concat(Array.from(container.querySelectorAll('.btnResume')));
+        candidates = candidates.concat(Array.from(container.querySelectorAll('.btnPlay')));
 
         let focusedElement;
 
@@ -81,7 +81,7 @@ import layoutManager from "layoutManager";
 
         if (!focusedElement) {
             // FIXME: Multiple itemsContainers
-            const itemsContainer = container.querySelector(".itemsContainer");
+            const itemsContainer = container.querySelector('.itemsContainer');
 
             if (itemsContainer) {
                 focusedElement = focusManager.autoFocus(itemsContainer);

src/components/backdrop/backdrop.js

@@ -1,4 +1,4 @@
-define(['browser', 'connectionManager', 'playbackManager', 'dom', "userSettings", 'css!./backdrop'], function (browser, connectionManager, playbackManager, dom, userSettings) {
+define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings', 'css!./backdrop'], function (browser, connectionManager, playbackManager, dom, userSettings) {
     'use strict';
 
     function enableAnimation(elem) {
@@ -180,7 +180,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', "userSettings"
         if (item.BackdropImageTags && item.BackdropImageTags.length > 0) {
             return item.BackdropImageTags.map(function (imgTag, index) {
                 return apiClient.getScaledImageUrl(item.BackdropItemId || item.Id, Object.assign(imageOptions, {
-                    type: "Backdrop",
+                    type: 'Backdrop',
                     tag: imgTag,
                     maxWidth: dom.getScreenWidth(),
                     index: index
@@ -191,7 +191,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', "userSettings"
         if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
             return item.ParentBackdropImageTags.map(function (imgTag, index) {
                 return apiClient.getScaledImageUrl(item.ParentBackdropItemId, Object.assign(imageOptions, {
-                    type: "Backdrop",
+                    type: 'Backdrop',
                     tag: imgTag,
                     maxWidth: dom.getScreenWidth(),
                     index: index

src/components/backdropscreensaver/plugin.js

@@ -1,56 +0,0 @@
-define(["connectionManager"], function (connectionManager) {
-
-    return function () {
-
-        var self = this;
-
-        self.name = "Backdrop ScreenSaver";
-        self.type = "screensaver";
-        self.id = "backdropscreensaver";
-        self.supportsAnonymous = false;
-
-        var currentSlideshow;
-
-        self.show = function () {
-
-            var query = {
-                ImageTypes: "Backdrop",
-                EnableImageTypes: "Backdrop",
-                IncludeItemTypes: "Movie,Series,MusicArtist",
-                SortBy: "Random",
-                Recursive: true,
-                Fields: "Taglines",
-                ImageTypeLimit: 1,
-                StartIndex: 0,
-                Limit: 200
-            };
-
-            var apiClient = connectionManager.currentApiClient();
-            apiClient.getItems(apiClient.getCurrentUserId(), query).then(function (result) {
-
-                if (result.Items.length) {
-
-                    require(["slideshow"], function (slideshow) {
-
-                        var newSlideShow = new slideshow({
-                            showTitle: true,
-                            cover: true,
-                            items: result.Items
-                        });
-
-                        newSlideShow.show();
-                        currentSlideshow = newSlideShow;
-                    });
-                }
-            });
-        };
-
-        self.hide = function () {
-
-            if (currentSlideshow) {
-                currentSlideshow.hide();
-                currentSlideshow = null;
-            }
-        };
-    };
-});

src/components/cardbuilder/card.css

@@ -306,6 +306,10 @@ button::-moz-focus-inner {
     text-align: left;
 }
 
+.dialog .cardText {
+    text-overflow: initial;
+}
+
 .cardText-secondary {
     font-size: 86%;
 }

src/components/cardbuilder/cardBuilder.js

@@ -286,7 +286,7 @@ import 'programStyles';
          * @param {Object} options - Options for handling the items.
          */
         function setCardData(items, options) {
-            options.shape = options.shape || "auto";
+            options.shape = options.shape || 'auto';
 
             const primaryImageAspectRatio = imageLoader.getPrimaryImageAspectRatio(items);
 
@@ -503,94 +503,49 @@ import 'programStyles';
             const primaryImageAspectRatio = item.PrimaryImageAspectRatio;
             let forceName = false;
             let imgUrl = null;
+            let imgTag = null;
             let coverImage = false;
             let uiAspect = null;
+            let imgType = null;
+            let itemId = null;
 
             if (options.preferThumb && item.ImageTags && item.ImageTags.Thumb) {
-
-                imgUrl = apiClient.getScaledImageUrl(item.Id, {
-                    type: "Thumb",
-                    maxWidth: width,
-                    tag: item.ImageTags.Thumb
-                });
-
+                imgType = 'Thumb';
+                imgTag = item.ImageTags.Thumb;
             } else if ((options.preferBanner || shape === 'banner') && item.ImageTags && item.ImageTags.Banner) {
-
-                imgUrl = apiClient.getScaledImageUrl(item.Id, {
-                    type: "Banner",
-                    maxWidth: width,
-                    tag: item.ImageTags.Banner
-                });
-
+                imgType = 'Banner';
+                imgTag = item.ImageTags.Banner;
             } else if (options.preferDisc && item.ImageTags && item.ImageTags.Disc) {
-
-                imgUrl = apiClient.getScaledImageUrl(item.Id, {
-                    type: "Disc",
-                    maxWidth: width,
-                    tag: item.ImageTags.Disc
-                });
-
+                imgType = 'Disc';
+                imgTag = item.ImageTags.Disc;
             } else if (options.preferLogo && item.ImageTags && item.ImageTags.Logo) {
-
-                imgUrl = apiClient.getScaledImageUrl(item.Id, {
-                    type: "Logo",
-                    maxWidth: width,
-                    tag: item.ImageTags.Logo
-                });
-
+                imgType = 'Logo';
+                imgTag = item.ImageTags.Logo;
             } else if (options.preferLogo && item.ParentLogoImageTag && item.ParentLogoItemId) {
-
-                imgUrl = apiClient.getScaledImageUrl(item.ParentLogoItemId, {
-                    type: "Logo",
-                    maxWidth: width,
-                    tag: item.ParentLogoImageTag
-                });
-
+                imgType = 'Logo';
+                imgTag = item.ParentLogoImageTag;
+                itemId = item.ParentLogoItemId;
             } else if (options.preferThumb && item.SeriesThumbImageTag && options.inheritThumb !== false) {
-
-                imgUrl = apiClient.getScaledImageUrl(item.SeriesId, {
-                    type: "Thumb",
-                    maxWidth: width,
-                    tag: item.SeriesThumbImageTag
-                });
-
+                imgType = 'Thumb';
+                imgTag = item.SeriesThumbImageTag;
+                itemId = item.SeriesId;
             } else if (options.preferThumb && item.ParentThumbItemId && options.inheritThumb !== false && item.MediaType !== 'Photo') {
-
-                imgUrl = apiClient.getScaledImageUrl(item.ParentThumbItemId, {
-                    type: "Thumb",
-                    maxWidth: width,
-                    tag: item.ParentThumbImageTag
-                });
-
+                imgType = 'Thumb';
+                imgTag = item.ParentThumbImageTag;
+                itemId = item.ParentThumbItemId;
             } else if (options.preferThumb && item.BackdropImageTags && item.BackdropImageTags.length) {
-
-                imgUrl = apiClient.getScaledImageUrl(item.Id, {
-                    type: "Backdrop",
-                    maxWidth: width,
-                    tag: item.BackdropImageTags[0]
-                });
-
+                imgType = 'Backdrop';
+                imgTag = item.BackdropImageTags[0];
                 forceName = true;
-
             } else if (options.preferThumb && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length && options.inheritThumb !== false && item.Type === 'Episode') {
-
-                imgUrl = apiClient.getScaledImageUrl(item.ParentBackdropItemId, {
-                    type: "Backdrop",
-                    maxWidth: width,
-                    tag: item.ParentBackdropImageTags[0]
-                });
-
+                imgType = 'Backdrop';
+                imgTag = item.ParentBackdropImageTags[0];
+                itemId = item.ParentBackdropItemId;
             } else if (item.ImageTags && item.ImageTags.Primary) {
-
+                imgType = 'Primary';
+                imgTag = item.ImageTags.Primary;
                 height = width && primaryImageAspectRatio ? Math.round(width / primaryImageAspectRatio) : null;
 
-                imgUrl = apiClient.getScaledImageUrl(item.Id, {
-                    type: "Primary",
-                    maxHeight: height,
-                    maxWidth: width,
-                    tag: item.ImageTags.Primary
-                });
-
                 if (options.preferThumb && options.showTitle !== false) {
                     forceName = true;
                 }
@@ -603,16 +558,11 @@ import 'programStyles';
                 }
 
             } else if (item.PrimaryImageTag) {
-
+                imgType = 'Primary';
+                imgTag = item.PrimaryImageTag;
+                itemId = item.PrimaryImageItemId;
                 height = width && primaryImageAspectRatio ? Math.round(width / primaryImageAspectRatio) : null;
 
-                imgUrl = apiClient.getScaledImageUrl(item.PrimaryImageItemId || item.Id || item.ItemId, {
-                    type: "Primary",
-                    maxHeight: height,
-                    maxWidth: width,
-                    tag: item.PrimaryImageTag
-                });
-
                 if (options.preferThumb && options.showTitle !== false) {
                     forceName = true;
                 }
@@ -624,30 +574,19 @@ import 'programStyles';
                     }
                 }
             } else if (item.ParentPrimaryImageTag) {
-
-                imgUrl = apiClient.getScaledImageUrl(item.ParentPrimaryImageItemId, {
-                    type: "Primary",
-                    maxWidth: width,
-                    tag: item.ParentPrimaryImageTag
-                });
+                imgType = 'Primary';
+                imgTag = item.ParentPrimaryImageTag;
+                itemId = item.ParentPrimaryImageItemId;
             } else if (item.SeriesPrimaryImageTag) {
-
-                imgUrl = apiClient.getScaledImageUrl(item.SeriesId, {
-                    type: "Primary",
-                    maxWidth: width,
-                    tag: item.SeriesPrimaryImageTag
-                });
+                imgType = 'Primary';
+                imgTag = item.SeriesPrimaryImageTag;
+                itemId = item.SeriesId;
             } else if (item.AlbumId && item.AlbumPrimaryImageTag) {
-
+                imgType = 'Primary';
+                imgTag = item.AlbumPrimaryImageTag;
+                itemId = item.AlbumId;
                 height = width && primaryImageAspectRatio ? Math.round(width / primaryImageAspectRatio) : null;
 
-                imgUrl = apiClient.getScaledImageUrl(item.AlbumId, {
-                    type: "Primary",
-                    maxHeight: height,
-                    maxWidth: width,
-                    tag: item.AlbumPrimaryImageTag
-                });
-
                 if (primaryImageAspectRatio) {
                     uiAspect = getDesiredAspect(shape);
                     if (uiAspect) {
@@ -655,57 +594,46 @@ import 'programStyles';
                     }
                 }
             } else if (item.Type === 'Season' && item.ImageTags && item.ImageTags.Thumb) {
-
-                imgUrl = apiClient.getScaledImageUrl(item.Id, {
-                    type: "Thumb",
-                    maxWidth: width,
-                    tag: item.ImageTags.Thumb
-                });
-
+                imgType = 'Thumb';
+                imgTag = item.ImageTags.Thumb;
             } else if (item.BackdropImageTags && item.BackdropImageTags.length) {
-
-                imgUrl = apiClient.getScaledImageUrl(item.Id, {
-                    type: "Backdrop",
-                    maxWidth: width,
-                    tag: item.BackdropImageTags[0]
-                });
-
+                imgType = 'Backdrop';
+                imgTag = item.BackdropImageTags[0];
             } else if (item.ImageTags && item.ImageTags.Thumb) {
-
-                imgUrl = apiClient.getScaledImageUrl(item.Id, {
-                    type: "Thumb",
-                    maxWidth: width,
-                    tag: item.ImageTags.Thumb
-                });
-
+                imgType = 'Thumb';
+                imgTag = item.ImageTags.Thumb;
             } else if (item.SeriesThumbImageTag && options.inheritThumb !== false) {
-
-                imgUrl = apiClient.getScaledImageUrl(item.SeriesId, {
-                    type: "Thumb",
-                    maxWidth: width,
-                    tag: item.SeriesThumbImageTag
-                });
-
+                imgType = 'Thumb';
+                imgTag = item.SeriesThumbImageTag;
+                itemId = item.SeriesId;
             } else if (item.ParentThumbItemId && options.inheritThumb !== false) {
-
-                imgUrl = apiClient.getScaledImageUrl(item.ParentThumbItemId, {
-                    type: "Thumb",
-                    maxWidth: width,
-                    tag: item.ParentThumbImageTag
-                });
-
+                imgType = 'Thumb';
+                imgTag = item.ParentThumbImageTag;
+                itemId = item.ParentThumbItemId;
             } else if (item.ParentBackdropImageTags && item.ParentBackdropImageTags.length && options.inheritThumb !== false) {
-
-                imgUrl = apiClient.getScaledImageUrl(item.ParentBackdropItemId, {
-                    type: "Backdrop",
-                    maxWidth: width,
-                    tag: item.ParentBackdropImageTags[0]
-                });
-
+                imgType = 'Backdrop';
+                imgTag = item.ParentBackdropImageTags[0];
+                itemId = item.ParentBackdropItemId;
             }
 
+            if (!itemId) {
+                itemId = item.Id;
+            }
+
+            if (imgTag && imgType) {
+                imgUrl = apiClient.getScaledImageUrl(itemId, {
+                    type: imgType,
+                    maxHeight: height,
+                    maxWidth: width,
+                    tag: imgTag
+                });
+            }
+
+            let blurHashes = options.imageBlurhashes || item.ImageBlurHashes || {};
+
             return {
                 imgUrl: imgUrl,
+                blurhash: (blurHashes[imgType] || {})[imgTag],
                 forceName: forceName,
                 coverImage: coverImage
             };
@@ -778,7 +706,7 @@ import 'programStyles';
                 if (text) {
                     html += "<div class='" + currentCssClass + "'>";
                     html += text;
-                    html += "</div>";
+                    html += '</div>';
                     valid++;
 
                     if (maxLines && valid >= maxLines) {
@@ -835,7 +763,7 @@ import 'programStyles';
                         airTimeText += ' - ' + datetime.getDisplayTime(date);
                     }
                 } catch (e) {
-                    console.error("error parsing date: " + item.StartDate);
+                    console.error('error parsing date: ' + item.StartDate);
                 }
             }
 
@@ -869,11 +797,11 @@ import 'programStyles';
             if (isOuterFooter && options.cardLayout && layoutManager.mobile) {
 
                 if (options.cardFooterAside !== 'none') {
-                    html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions cardText-secondary" data-action="menu"><i class="material-icons more_horiz"></i></button>';
+                    html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions cardText-secondary" data-action="menu"><span class="material-icons more_vert"></span></button>';
                 }
             }
 
-            const cssClass = options.centerText ? "cardText cardTextCentered" : "cardText";
+            const cssClass = options.centerText ? 'cardText cardTextCentered' : 'cardText';
             const serverId = item.ServerId || options.serverId;
 
             let lines = [];
@@ -907,7 +835,7 @@ import 'programStyles';
                             }
 
                         } else {
-                            const parentTitle = item.SeriesName || item.Series || item.Album || item.AlbumArtist || "";
+                            const parentTitle = item.SeriesName || item.Series || item.Album || item.AlbumArtist || '';
 
                             if (parentTitle || showTitle) {
                                 lines.push(parentTitle);
@@ -946,7 +874,7 @@ import 'programStyles';
                         item.AlbumArtists[0].IsFolder = true;
                         lines.push(getTextActionButton(item.AlbumArtists[0], null, serverId));
                     } else {
-                        lines.push(isUsingLiveTvNaming(item) ? item.Name : (item.SeriesName || item.Series || item.Album || item.AlbumArtist || ""));
+                        lines.push(isUsingLiveTvNaming(item) ? item.Name : (item.SeriesName || item.Series || item.Album || item.AlbumArtist || ''));
                     }
                 }
 
@@ -993,7 +921,7 @@ import 'programStyles';
                 if (options.showYear || options.showSeriesYear) {
 
                     if (item.Type === 'Series') {
-                        if (item.Status === "Continuing") {
+                        if (item.Status === 'Continuing') {
 
                             lines.push(globalize.translate('SeriesYearToPresent', item.ProductionYear || ''));
 
@@ -1105,7 +1033,7 @@ import 'programStyles';
                     html = '<div class="' + footerClass + '">' + html;
 
                     //cardFooter
-                    html += "</div>";
+                    html += '</div>';
                 }
             }
 
@@ -1191,7 +1119,7 @@ import 'programStyles';
                     counts.push(childText);
                 }
 
-            } else if (item.Type === 'MusicGenre' || options.context === "MusicArtist") {
+            } else if (item.Type === 'MusicGenre' || options.context === 'MusicArtist') {
 
                 if (item.AlbumCount) {
 
@@ -1304,7 +1232,7 @@ import 'programStyles';
             }
 
             if (options.cardClass) {
-                className += " " + options.cardClass;
+                className += ' ' + options.cardClass;
             }
 
             if (layoutManager.desktop) {
@@ -1321,6 +1249,7 @@ import 'programStyles';
 
             const imgInfo = getCardImageUrl(item, apiClient, options, shape);
             const imgUrl = imgInfo.imgUrl;
+            const blurhash = imgInfo.blurhash;
 
             const forceName = imgInfo.forceName;
 
@@ -1356,13 +1285,13 @@ import 'programStyles';
 
             if (options.showChannelLogo && item.ChannelPrimaryImageTag) {
                 logoUrl = apiClient.getScaledImageUrl(item.ChannelId, {
-                    type: "Primary",
+                    type: 'Primary',
                     height: logoHeight,
                     tag: item.ChannelPrimaryImageTag
                 });
             } else if (options.showLogo && item.ParentLogoImageTag) {
                 logoUrl = apiClient.getScaledImageUrl(item.ParentLogoItemId, {
-                    type: "Logo",
+                    type: 'Logo',
                     height: logoHeight,
                     tag: item.ParentLogoImageTag
                 });
@@ -1418,15 +1347,15 @@ import 'programStyles';
                 const btnCssClass = 'cardOverlayButton cardOverlayButton-br itemAction';
 
                 if (options.centerPlayButton) {
-                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayButton-centered" data-action="play"><i class="material-icons cardOverlayButtonIcon play_arrow"></i></button>';
+                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayButton-centered" data-action="play"><span class="material-icons cardOverlayButtonIcon play_arrow"></span></button>';
                 }
 
                 if (overlayPlayButton && !item.IsPlaceHolder && (item.LocationType !== 'Virtual' || !item.MediaType || item.Type === 'Program') && item.Type !== 'Person') {
-                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="play"><i class="material-icons cardOverlayButtonIcon play_arrow"></i></button>';
+                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="play"><span class="material-icons cardOverlayButtonIcon play_arrow"></span></button>';
                 }
 
                 if (options.overlayMoreButton) {
-                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="material-icons cardOverlayButtonIcon more_horiz"></i></button>';
+                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><span class="material-icons cardOverlayButtonIcon more_vert"></span></button>';
                 }
             }
 
@@ -1445,15 +1374,20 @@ import 'programStyles';
                 cardContentClass += ' cardContent-shadow';
             }
 
+            let blurhashAttrib = '';
+            if (blurhash && blurhash.length > 0) {
+                blurhashAttrib = 'data-blurhash="' + blurhash + '"';
+            }
+
             if (layoutManager.tv) {
 
                 // Don't use the IMG tag with safari because it puts a white border around it
-                cardImageContainerOpen = imgUrl ? ('<div class="' + cardImageContainerClass + ' ' + cardContentClass + ' lazy" data-src="' + imgUrl + '">') : ('<div class="' + cardImageContainerClass + ' ' + cardContentClass + '">');
+                cardImageContainerOpen = imgUrl ? ('<div class="' + cardImageContainerClass + ' ' + cardContentClass + ' lazy" data-src="' + imgUrl + '" ' + blurhashAttrib + '>') : ('<div class="' + cardImageContainerClass + ' ' + cardContentClass + '">');
 
                 cardImageContainerClose = '</div>';
             } else {
                 // Don't use the IMG tag with safari because it puts a white border around it
-                cardImageContainerOpen = imgUrl ? ('<button data-action="' + action + '" class="cardContent-button ' + cardImageContainerClass + ' ' + cardContentClass + ' itemAction lazy" data-src="' + imgUrl + '">') : ('<button data-action="' + action + '" class="cardContent-button ' + cardImageContainerClass + ' ' + cardContentClass + ' itemAction">');
+                cardImageContainerOpen = imgUrl ? ('<button data-action="' + action + '" class="cardContent-button ' + cardImageContainerClass + ' ' + cardContentClass + ' itemAction lazy" data-src="' + imgUrl + '" ' + blurhashAttrib + '>') : ('<button data-action="' + action + '" class="cardContent-button ' + cardImageContainerClass + ' ' + cardContentClass + ' itemAction">');
 
                 cardImageContainerClose = '</button>';
             }
@@ -1518,7 +1452,7 @@ import 'programStyles';
             let actionAttribute;
 
             if (tagName === 'button') {
-                className += " itemAction";
+                className += ' itemAction';
                 actionAttribute = ' data-action="' + action + '"';
             } else {
                 actionAttribute = '';
@@ -1560,7 +1494,7 @@ import 'programStyles';
             const btnCssClass = 'cardOverlayButton cardOverlayButton-hover itemAction paper-icon-button-light';
 
             if (playbackManager.canPlay(item)) {
-                html += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayFab-primary" data-action="resume"><i class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover play_arrow"></i></button>';
+                html += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayFab-primary" data-action="resume"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover play_arrow"></span></button>';
             }
 
             html += '<div class="cardOverlayButton-br flex">';
@@ -1569,7 +1503,7 @@ import 'programStyles';
 
             if (itemHelper.canMarkPlayed(item)) {
                 require(['emby-playstatebutton']);
-                html += '<button is="emby-playstatebutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><i class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover">check</i></button>';
+                html += '<button is="emby-playstatebutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover check"></span></button>';
             }
 
             if (itemHelper.canRate(item)) {
@@ -1577,10 +1511,10 @@ import 'programStyles';
                 const likes = userData.Likes == null ? '' : userData.Likes;
 
                 require(['emby-ratingbutton']);
-                html += '<button is="emby-ratingbutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover">favorite</i></button>';
+                html += '<button is="emby-ratingbutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover favorite"></span></button>';
             }
 
-            html += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover more_horiz"></i></button>';
+            html += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover more_vert"></span></button>';
 
             html += '</div>';
             html += '</div>';
@@ -1596,27 +1530,27 @@ import 'programStyles';
          */
         export function getDefaultText(item, options) {
             if (item.CollectionType) {
-                return '<i class="cardImageIcon material-icons ' + imageHelper.getLibraryIcon(item.CollectionType) + '"></i>';
+                return '<span class="cardImageIcon material-icons ' + imageHelper.getLibraryIcon(item.CollectionType) + '"></span>';
             }
 
             switch (item.Type) {
                 case 'MusicAlbum':
-                    return '<i class="cardImageIcon material-icons">album</i>';
+                    return '<span class="cardImageIcon material-icons album"></span>';
                 case 'MusicArtist':
                 case 'Person':
-                    return '<i class="cardImageIcon material-icons">person</i>';
+                    return '<span class="cardImageIcon material-icons person"></span>';
                 case 'Movie':
-                    return '<i class="cardImageIcon material-icons">movie</i>';
+                    return '<span class="cardImageIcon material-icons movie"></span>';
                 case 'Series':
-                    return '<i class="cardImageIcon material-icons">tv</i>';
+                    return '<span class="cardImageIcon material-icons tv"></span>';
                 case 'Book':
-                    return '<i class="cardImageIcon material-icons">book</i>';
+                    return '<span class="cardImageIcon material-icons book"></span>';
                 case 'Folder':
-                    return '<i class="cardImageIcon material-icons">folder</i>';
+                    return '<span class="cardImageIcon material-icons folder"></span>';
             }
 
             if (options && options.defaultCardImageIcon) {
-                return '<i class="cardImageIcon material-icons">' + options.defaultCardImageIcon + '</i>';
+                return '<span class="cardImageIcon material-icons ' + options.defaultCardImageIcon + '"></span>';
             }
 
             const defaultName = isUsingLiveTvNaming(item) ? item.Name : itemHelper.getDisplayName(item);
@@ -1718,7 +1652,7 @@ import 'programStyles';
                     indicatorsElem = ensureIndicators(card, indicatorsElem);
                     indicatorsElem.appendChild(playedIndicator);
                 }
-                playedIndicator.innerHTML = '<i class="material-icons indicatorIcon">check</i>';
+                playedIndicator.innerHTML = '<span class="material-icons indicatorIcon check"></span>';
             } else {
 
                 playedIndicator = card.querySelector('.playedIndicator');
@@ -1808,7 +1742,7 @@ import 'programStyles';
                 const icon = cell.querySelector('.timerIndicator');
                 if (!icon) {
                     const indicatorsElem = ensureIndicators(cell);
-                    indicatorsElem.insertAdjacentHTML('beforeend', '<i class="material-icons timerIndicator indicatorIcon fiber_manual_record"></i>');
+                    indicatorsElem.insertAdjacentHTML('beforeend', '<span class="material-icons timerIndicator indicatorIcon fiber_manual_record"></span>');
                 }
                 cell.setAttribute('data-timerid', newTimerId);
             }

src/components/cardbuilder/chaptercardbuilder.js

@@ -1,13 +1,23 @@
-define(['datetime', 'imageLoader', 'connectionManager', 'layoutManager', 'browser'], function (datetime, imageLoader, connectionManager, layoutManager, browser) {
-    'use strict';
+/* eslint-disable indent */
 
-    var enableFocusTransform = !browser.slow && !browser.edge;
+/**
+ * Module for building cards from item data.
+ * @module components/cardBuilder/chaptercardbuilder
+ */
 
-    function buildChapterCardsHtml(item, chapters, options) {
+import datetime from 'datetime';
+import imageLoader from 'imageLoader';
+import connectionManager from 'connectionManager';
+import layoutManager from 'layoutManager';
+import browser from 'browser';
+
+    const enableFocusTransform = !browser.slow && !browser.edge;
+
+     function buildChapterCardsHtml(item, chapters, options) {
 
         // TODO move card creation code to Card component
 
-        var className = 'card itemAction chapterCard';
+        let className = 'card itemAction chapterCard';
 
         if (layoutManager.tv) {
             className += ' show-focus';
@@ -17,12 +27,12 @@ define(['datetime', 'imageLoader', 'connectionManager', 'layoutManager', 'browse
             }
         }
 
-        var mediaStreams = ((item.MediaSources || [])[0] || {}).MediaStreams || [];
-        var videoStream = mediaStreams.filter(function (i) {
-            return i.Type === 'Video';
+        const mediaStreams = ((item.MediaSources || [])[0] || {}).MediaStreams || [];
+        const videoStream = mediaStreams.filter(({Type}) => {
+            return Type === 'Video';
         })[0] || {};
 
-        var shape = (options.backdropShape || 'backdrop');
+        let shape = (options.backdropShape || 'backdrop');
 
         if (videoStream.Width && videoStream.Height) {
 
@@ -31,24 +41,24 @@ define(['datetime', 'imageLoader', 'connectionManager', 'layoutManager', 'browse
             }
         }
 
-        className += ' ' + shape + 'Card';
+        className += ` ${shape}Card`;
 
         if (options.block || options.rows) {
             className += ' block';
         }
 
-        var html = '';
-        var itemsInRow = 0;
+        let html = '';
+        let itemsInRow = 0;
 
-        var apiClient = connectionManager.getApiClient(item.ServerId);
+        const apiClient = connectionManager.getApiClient(item.ServerId);
 
-        for (var i = 0, length = chapters.length; i < length; i++) {
+        for (let i = 0, length = chapters.length; i < length; i++) {
 
             if (options.rows && itemsInRow === 0) {
                 html += '<div class="cardColumn">';
             }
 
-            var chapter = chapters[i];
+            const chapter = chapters[i];
 
             html += buildChapterCard(item, apiClient, chapter, i, options, className, shape);
             itemsInRow++;
@@ -62,50 +72,50 @@ define(['datetime', 'imageLoader', 'connectionManager', 'layoutManager', 'browse
         return html;
     }
 
-    function getImgUrl(item, chapter, index, maxWidth, apiClient) {
+    function getImgUrl({Id}, {ImageTag}, index, maxWidth, apiClient) {
 
-        if (chapter.ImageTag) {
+        if (ImageTag) {
 
-            return apiClient.getScaledImageUrl(item.Id, {
+            return apiClient.getScaledImageUrl(Id, {
 
                 maxWidth: maxWidth * 2,
-                tag: chapter.ImageTag,
-                type: "Chapter",
-                index: index
+                tag: ImageTag,
+                type: 'Chapter',
+                index
             });
         }
 
         return null;
     }
 
-    function buildChapterCard(item, apiClient, chapter, index, options, className, shape) {
+    function buildChapterCard(item, apiClient, chapter, index, {width, coverImage}, className, shape) {
 
-        var imgUrl = getImgUrl(item, chapter, index, options.width || 400, apiClient);
+        const imgUrl = getImgUrl(item, chapter, index, width || 400, apiClient);
 
-        var cardImageContainerClass = 'cardContent cardContent-shadow cardImageContainer chapterCardImageContainer';
-        if (options.coverImage) {
+        let cardImageContainerClass = 'cardContent cardContent-shadow cardImageContainer chapterCardImageContainer';
+        if (coverImage) {
             cardImageContainerClass += ' coveredImage';
         }
-        var dataAttributes = ' data-action="play" data-isfolder="' + item.IsFolder + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-type="' + item.Type + '" data-mediatype="' + item.MediaType + '" data-positionticks="' + chapter.StartPositionTicks + '"';
-        var cardImageContainer = imgUrl ? ('<div class="' + cardImageContainerClass + ' lazy" data-src="' + imgUrl + '">') : ('<div class="' + cardImageContainerClass + '">');
+        const dataAttributes = ` data-action="play" data-isfolder="${item.IsFolder}" data-id="${item.Id}" data-serverid="${item.ServerId}" data-type="${item.Type}" data-mediatype="${item.MediaType}" data-positionticks="${chapter.StartPositionTicks}"`;
+        let cardImageContainer = imgUrl ? (`<div class="${cardImageContainerClass} lazy" data-src="${imgUrl}">`) : (`<div class="${cardImageContainerClass}">`);
 
         if (!imgUrl) {
-            cardImageContainer += '<i class="material-icons cardImageIcon local_movies"></i>';
+            cardImageContainer += '<span class="material-icons cardImageIcon local_movies"></span>';
         }
 
-        var nameHtml = '';
-        nameHtml += '<div class="cardText">' + chapter.Name + '</div>';
-        nameHtml += '<div class="cardText">' + datetime.getDisplayRunningTime(chapter.StartPositionTicks) + '</div>';
+        let nameHtml = '';
+        nameHtml += `<div class="cardText">${chapter.Name}</div>`;
+        nameHtml += `<div class="cardText">${datetime.getDisplayRunningTime(chapter.StartPositionTicks)}</div>`;
 
-        var cardBoxCssClass = 'cardBox';
-        var cardScalableClass = 'cardScalable';
+        const cardBoxCssClass = 'cardBox';
+        const cardScalableClass = 'cardScalable';
 
-        var html = '<button type="button" class="' + className + '"' + dataAttributes + '><div class="' + cardBoxCssClass + '"><div class="' + cardScalableClass + '"><div class="cardPadder-' + shape + '"></div>' + cardImageContainer + '</div><div class="innerCardFooter">' + nameHtml + '</div></div></div></button>';
+        const html = `<button type="button" class="${className}"${dataAttributes}><div class="${cardBoxCssClass}"><div class="${cardScalableClass}"><div class="cardPadder-${shape}"></div>${cardImageContainer}</div><div class="innerCardFooter">${nameHtml}</div></div></div></button>`;
 
         return html;
     }
 
-    function buildChapterCards(item, chapters, options) {
+    export function buildChapterCards(item, chapters, options) {
 
         if (options.parentContainer) {
             // Abort if the container has been disposed
@@ -121,15 +131,16 @@ define(['datetime', 'imageLoader', 'connectionManager', 'layoutManager', 'browse
             }
         }
 
-        var html = buildChapterCardsHtml(item, chapters, options);
+        const html = buildChapterCardsHtml(item, chapters, options);
 
         options.itemsContainer.innerHTML = html;
 
         imageLoader.lazyChildren(options.itemsContainer);
     }
 
-    return {
-        buildChapterCards: buildChapterCards
-    };
+/* eslint-enable indent */
+
+export default {
+    buildChapterCards: buildChapterCards
+};
 
-});

src/components/cardbuilder/peoplecardbuilder.js

@@ -1,7 +1,13 @@
-define(['cardBuilder'], function (cardBuilder) {
-    'use strict';
+/* eslint-disable indent */
 
-    function buildPeopleCards(items, options) {
+/**
+ * Module for building cards from item data.
+ * @module components/cardBuilder/peoplecardbuilder
+ */
+
+import cardBuilder from 'cardBuilder';
+
+    export function buildPeopleCards(items, options) {
 
         options = Object.assign(options || {}, {
             cardLayout: false,
@@ -15,8 +21,8 @@ define(['cardBuilder'], function (cardBuilder) {
         cardBuilder.buildCards(items, options);
     }
 
-    return {
-        buildPeopleCards: buildPeopleCards
-    };
+ /* eslint-enable indent */
 
-});
+export default {
+    buildPeopleCards: buildPeopleCards
+};

src/components/castSenderApi.js

@@ -1,7 +1,7 @@
 define([], function() {
     'use strict';
 
-    if (window.appMode === "cordova" || window.appMode === "android") {
+    if (window.appMode === 'cordova' || window.appMode === 'android') {
         return {
             load: function () {
                 window.chrome = window.chrome || {};
@@ -17,16 +17,16 @@ define([], function() {
                 }
 
                 return new Promise(function (resolve, reject) {
-                    var fileref = document.createElement("script");
-                    fileref.setAttribute("type", "text/javascript");
+                    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);
+                    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,33 +1,33 @@
-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";
+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 mapChannel(button, channelId, providerChannelId) {
             loading.show();
             var providerId = options.providerId;
             connectionManager.getApiClient(options.serverId).ajax({
-                type: "POST",
-                url: ApiClient.getUrl("LiveTv/ChannelMappings"),
+                type: 'POST',
+                url: ApiClient.getUrl('LiveTv/ChannelMappings'),
                 data: {
                     providerId: providerId,
                     tunerChannelId: channelId,
                     providerChannelId: providerChannelId
                 },
-                dataType: "json"
+                dataType: 'json'
             }).then(function (mapping) {
-                var listItem = dom.parentWithClass(button, "listItem");
-                button.setAttribute("data-providerid", mapping.ProviderChannelId);
-                listItem.querySelector(".secondary").innerHTML = getMappingSecondaryName(mapping, currentMappingOptions.ProviderName);
+                var listItem = dom.parentWithClass(button, 'listItem');
+                button.setAttribute('data-providerid', mapping.ProviderChannelId);
+                listItem.querySelector('.secondary').innerHTML = getMappingSecondaryName(mapping, currentMappingOptions.ProviderName);
                 loading.hide();
             });
         }
 
         function onChannelsElementClick(e) {
-            var btnMap = dom.parentWithClass(e.target, "btnMap");
+            var btnMap = dom.parentWithClass(e.target, 'btnMap');
 
             if (btnMap) {
-                var channelId = btnMap.getAttribute("data-id");
-                var providerChannelId = btnMap.getAttribute("data-providerid");
+                var channelId = btnMap.getAttribute('data-id');
+                var providerChannelId = btnMap.getAttribute('data-providerid');
                 var menuItems = currentMappingOptions.ProviderChannels.map(function (m) {
                     return {
                         name: m.Name,
@@ -48,56 +48,56 @@ define(["dom", "dialogHelper", "loading", "connectionManager", "globalize", "act
 
         function getChannelMappingOptions(serverId, providerId) {
             var apiClient = connectionManager.getApiClient(serverId);
-            return apiClient.getJSON(apiClient.getUrl("LiveTv/ChannelMappingOptions", {
+            return apiClient.getJSON(apiClient.getUrl('LiveTv/ChannelMappingOptions', {
                 providerId: providerId
             }));
         }
 
         function getMappingSecondaryName(mapping, providerName) {
-            return (mapping.ProviderChannelName || "") + " - " + providerName;
+            return (mapping.ProviderChannelName || '') + ' - ' + providerName;
         }
 
         function getTunerChannelHtml(channel, providerName) {
-            var html = "";
+            var html = '';
             html += '<div class="listItem">';
-            html += '<i class="material-icons listItemIcon">dvr</i>';
+            html += '<span class="material-icons listItemIcon dvr"></span>';
             html += '<div class="listItemBody two-line">';
             html += '<h3 class="listItemBodyText">';
             html += channel.Name;
-            html += "</h3>";
+            html += '</h3>';
             html += '<div class="secondary listItemBodyText">';
 
             if (channel.ProviderChannelName) {
                 html += getMappingSecondaryName(channel, providerName);
             }
 
-            html += "</div>";
-            html += "</div>";
-            html += '<button class="btnMap autoSize" is="paper-icon-button-light" type="button" data-id="' + channel.Id + '" data-providerid="' + channel.ProviderChannelId + '"><i class="material-icons mode_edit"></i></button>';
-            return html += "</div>";
+            html += '</div>';
+            html += '</div>';
+            html += '<button class="btnMap autoSize" is="paper-icon-button-light" type="button" data-id="' + channel.Id + '" data-providerid="' + channel.ProviderChannelId + '"><span class="material-icons mode_edit"></span></button>';
+            return html += '</div>';
         }
 
         function getEditorHtml() {
-            var html = "";
-            html += '<div class="formDialogContent">';
+            var html = '';
+            html += '<div class="formDialogContent smoothScrollY">';
             html += '<div class="dialogContentInner dialog-content-centered">';
             html += '<form style="margin:auto;">';
-            html += "<h1>" + globalize.translate("HeaderChannels") + "</h1>";
+            html += '<h1>' + globalize.translate('HeaderChannels') + '</h1>';
             html += '<div class="channels paperList">';
-            html += "</div>";
-            html += "</form>";
-            html += "</div>";
-            return html += "</div>";
+            html += '</div>';
+            html += '</form>';
+            html += '</div>';
+            return html += '</div>';
         }
 
         function initEditor(dlg, options) {
             getChannelMappingOptions(options.serverId, options.providerId).then(function (result) {
                 currentMappingOptions = result;
-                var channelsElement = dlg.querySelector(".channels");
+                var channelsElement = dlg.querySelector('.channels');
                 channelsElement.innerHTML = result.TunerChannels.map(function (channel) {
                     return getTunerChannelHtml(channel, result.ProviderName);
-                }).join("");
-                channelsElement.addEventListener("click", onChannelsElementClick);
+                }).join('');
+                channelsElement.addEventListener('click', onChannelsElementClick);
             });
         }
 
@@ -108,27 +108,27 @@ define(["dom", "dialogHelper", "loading", "connectionManager", "globalize", "act
             var dialogOptions = {
                 removeOnClose: true
             };
-            dialogOptions.size = "small";
+            dialogOptions.size = 'small';
             var dlg = dialogHelper.createDialog(dialogOptions);
-            dlg.classList.add("formDialog");
-            dlg.classList.add("ui-body-a");
-            dlg.classList.add("background-theme-a");
-            var html = "";
-            var title = globalize.translate("MapChannels");
+            dlg.classList.add('formDialog');
+            dlg.classList.add('ui-body-a');
+            dlg.classList.add('background-theme-a');
+            var html = '';
+            var title = globalize.translate('MapChannels');
             html += '<div class="formDialogHeader">';
-            html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>';
+            html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
             html += '<h3 class="formDialogHeaderTitle">';
             html += title;
-            html += "</h3>";
-            html += "</div>";
+            html += '</h3>';
+            html += '</div>';
             html += getEditorHtml();
             dlg.innerHTML = html;
             initEditor(dlg, options);
-            dlg.querySelector(".btnCancel").addEventListener("click", function () {
+            dlg.querySelector('.btnCancel').addEventListener('click', function () {
                 dialogHelper.close(dlg);
             });
             return new Promise(function (resolve, reject) {
-                dlg.addEventListener("close", resolve);
+                dlg.addEventListener('close', resolve);
                 dialogHelper.open(dlg);
             });
         };

src/components/collectionEditor/collectionEditor.js

@@ -24,7 +24,7 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
 
     function createCollection(apiClient, dlg) {
 
-        var url = apiClient.getUrl("Collections", {
+        var url = apiClient.getUrl('Collections', {
 
             Name: dlg.querySelector('#txtNewCollectionName').value,
             IsLocked: !dlg.querySelector('#chkEnableInternetMetadata').checked,
@@ -32,9 +32,9 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
         });
 
         apiClient.ajax({
-            type: "POST",
+            type: 'POST',
             url: url,
-            dataType: "json"
+            dataType: 'json'
 
         }).then(function (result) {
 
@@ -56,13 +56,13 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
 
     function addToCollection(apiClient, dlg, id) {
 
-        var url = apiClient.getUrl("Collections/" + id + "/Items", {
+        var url = apiClient.getUrl('Collections/' + id + '/Items', {
 
             Ids: dlg.querySelector('.fldSelectedItemIds').value || ''
         });
 
         apiClient.ajax({
-            type: "POST",
+            type: 'POST',
             url: url
 
         }).then(function () {
@@ -93,8 +93,8 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
         var options = {
 
             Recursive: true,
-            IncludeItemTypes: "BoxSet",
-            SortBy: "SortName",
+            IncludeItemTypes: 'BoxSet',
+            SortBy: 'SortName',
             EnableTotalRecordCount: false
         };
 
@@ -230,13 +230,13 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
         var title = items.length ? globalize.translate('HeaderAddToCollection') : globalize.translate('NewCollection');
 
         html += '<div class="formDialogHeader">';
-        html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>';
+        html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
         html += '<h3 class="formDialogHeaderTitle">';
         html += title;
         html += '</h3>';
 
         if (appHost.supports('externallinks')) {
-            html += '<a is="emby-linkbutton" class="button-link btnHelp flex align-items-center" href="https://web.archive.org/web/20181216120305/https://github.com/MediaBrowser/Wiki/wiki/Collections" target="_blank" style="margin-left:auto;margin-right:.5em;padding:.25em;" title="' + globalize.translate('Help') + '"><i class="material-icons">info</i><span style="margin-left:.25em;">' + globalize.translate('Help') + '</span></a>';
+            html += '<a is="emby-linkbutton" class="button-link btnHelp flex align-items-center" href="https://web.archive.org/web/20181216120305/https://github.com/MediaBrowser/Wiki/wiki/Collections" target="_blank" style="margin-left:auto;margin-right:.5em;padding:.25em;" title="' + globalize.translate('Help') + '"><span class="material-icons info"></span><span style="margin-left:.25em;">' + globalize.translate('Help') + '</span></a>';
         }
 
         html += '</div>';

src/components/confirm/confirm.js

@@ -1,4 +1,4 @@
-define(["browser", "dialog", "globalize"], function(browser, dialog, globalize) {
+define(['browser', 'dialog', 'globalize'], function(browser, dialog, globalize) {
     'use strict';
 
     function replaceAll(str, find, replace) {

src/components/deletehelper.js

@@ -1,57 +0,0 @@
-define(['connectionManager', 'confirm', 'appRouter', 'globalize'], function (connectionManager, confirm, appRouter, globalize) {
-    'use strict';
-
-    function alertText(options) {
-
-        return new Promise(function (resolve, reject) {
-
-            require(['alert'], function (alert) {
-                alert(options).then(resolve, resolve);
-            });
-        });
-    }
-
-    function deleteItem(options) {
-
-        var item = options.item;
-        var itemId = item.Id;
-        var parentId = item.SeasonId || item.SeriesId || item.ParentId;
-        var serverId = item.ServerId;
-
-        var msg = globalize.translate('ConfirmDeleteItem');
-        var title = globalize.translate('HeaderDeleteItem');
-        var apiClient = connectionManager.getApiClient(item.ServerId);
-
-        return confirm({
-
-            title: title,
-            text: msg,
-            confirmText: globalize.translate('Delete'),
-            primary: 'delete'
-
-        }).then(function () {
-
-            return apiClient.deleteItem(itemId).then(function () {
-
-                if (options.navigate) {
-                    if (parentId) {
-                        appRouter.showItem(parentId, serverId);
-                    } else {
-                        appRouter.goHome();
-                    }
-                }
-            }, function (err) {
-
-                var result = function () {
-                    return Promise.reject(err);
-                };
-
-                return alertText(globalize.translate('ErrorDeletingItem')).then(result, result);
-            });
-        });
-    }
-
-    return {
-        deleteItem: deleteItem
-    };
-});

src/components/dialogHelper/dialogHelper.js

@@ -141,7 +141,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
         animateDialogOpen(dlg);
 
         if (isHistoryEnabled(dlg)) {
-            appRouter.pushState({ dialogId: hash }, "Dialog", '#' + hash);
+            appRouter.pushState({ dialogId: hash }, 'Dialog', '#' + hash);
 
             window.addEventListener('popstate', onHashChange);
         } else {

src/components/dialogHelper/dialoghelper.css

@@ -126,25 +126,10 @@
 }
 
 @media all and (min-width: 80em) and (min-height: 45em) {
-    .dialog-medium {
-        width: 80%;
-        height: 80%;
-    }
-
-    .dialog-medium-tall {
-        width: 80%;
-        height: 90%;
-    }
-
     .dialog-small {
         width: 60%;
         height: 80%;
     }
-
-    .dialog-fullscreen-border {
-        width: 90%;
-        height: 90%;
-    }
 }
 
 .noScroll {

src/components/directorybrowser/directorybrowser.js

@@ -1,4 +1,4 @@
-define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-icon-button-light', 'css!./directorybrowser', 'formDialogStyle', 'emby-button'], function(loading, dialogHelper, dom) {
+define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-input', 'paper-icon-button-light', 'css!./directorybrowser', 'formDialogStyle', 'emby-button'], function(loading, dialogHelper, dom, globalize) {
     'use strict';
 
     function getSystemInfo() {
@@ -16,14 +16,14 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
 
     function refreshDirectoryBrowser(page, path, fileOptions, updatePathOnError) {
         if (path && typeof path !== 'string') {
-            throw new Error("invalid path");
+            throw new Error('invalid path');
         }
 
         loading.show();
 
         var promises = [];
 
-        if ("Network" === path) {
+        if ('Network' === path) {
             promises.push(ApiClient.getNetworkDevices());
         } else {
             if (path) {
@@ -37,31 +37,31 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
         Promise.all(promises).then(
             function(responses) {
                 var folders = responses[0];
-                var parentPath = responses[1] || "";
-                var html = "";
+                var parentPath = responses[1] || '';
+                var html = '';
 
-                page.querySelector(".results").scrollTop = 0;
-                page.querySelector("#txtDirectoryPickerPath").value = path || "";
+                page.querySelector('.results').scrollTop = 0;
+                page.querySelector('#txtDirectoryPickerPath').value = path || '';
 
                 if (path) {
-                    html += getItem("lnkPath lnkDirectory", "", parentPath, "...");
+                    html += getItem('lnkPath lnkDirectory', '', parentPath, '...');
                 }
                 for (var i = 0, length = folders.length; i < length; i++) {
                     var folder = folders[i];
-                    var cssClass = "File" === folder.Type ? "lnkPath lnkFile" : "lnkPath lnkDirectory";
+                    var cssClass = 'File' === folder.Type ? 'lnkPath lnkFile' : 'lnkPath lnkDirectory';
                     html += getItem(cssClass, folder.Type, folder.Path, folder.Name);
                 }
 
                 if (!path) {
-                    html += getItem("lnkPath lnkDirectory", "", "Network", Globalize.translate("ButtonNetwork"));
+                    html += getItem('lnkPath lnkDirectory', '', 'Network', globalize.translate('ButtonNetwork'));
                 }
 
-                page.querySelector(".results").innerHTML = html;
+                page.querySelector('.results').innerHTML = html;
                 loading.hide();
             }, function() {
                 if (updatePathOnError) {
-                    page.querySelector("#txtDirectoryPickerPath").value = "";
-                    page.querySelector(".results").innerHTML = "";
+                    page.querySelector('#txtDirectoryPickerPath').value = '';
+                    page.querySelector('.results').innerHTML = '';
                     loading.hide();
                 }
             }
@@ -69,74 +69,73 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
     }
 
     function getItem(cssClass, type, path, name) {
-        var html = "";
+        var html = '';
         html += '<div class="listItem listItem-border ' + cssClass + '" data-type="' + type + '" data-path="' + path + '">';
         html += '<div class="listItemBody" style="padding-left:0;padding-top:.5em;padding-bottom:.5em;">';
         html += '<div class="listItemBodyText">';
         html += name;
-        html += "</div>";
-        html += "</div>";
-        html += '<i class="material-icons arrow_forward" style="font-size:inherit;"></i>';
-        html += "</div>";
+        html += '</div>';
+        html += '</div>';
+        html += '<span class="material-icons arrow_forward" style="font-size:inherit;"></span>';
+        html += '</div>';
         return html;
     }
 
     function getEditorHtml(options, systemInfo) {
-        var html = "";
+        var html = '';
         html += '<div class="formDialogContent scrollY">';
         html += '<div class="dialogContentInner dialog-content-centered" style="padding-top:2em;">';
         if (!options.pathReadOnly) {
-            var instruction = options.instruction ? options.instruction + "<br/><br/>" : "";
+            var instruction = options.instruction ? options.instruction + '<br/><br/>' : '';
             html += '<div class="infoBanner" style="margin-bottom:1.5em;">';
             html += instruction;
-            html += Globalize.translate("MessageDirectoryPickerInstruction", "<b>\\\\server</b>", "<b>\\\\192.168.1.101</b>");
-            if ("bsd" === systemInfo.OperatingSystem.toLowerCase()) {
-                html += "<br/>";
-                html += "<br/>";
-                html += Globalize.translate("MessageDirectoryPickerBSDInstruction");
-                html += "<br/>";
-            } else if ("linux" === systemInfo.OperatingSystem.toLowerCase()) {
-                html += "<br/>";
-                html += "<br/>";
-                html += Globalize.translate("MessageDirectoryPickerLinuxInstruction");
-                html += "<br/>";
+            if ('bsd' === systemInfo.OperatingSystem.toLowerCase()) {
+                html += '<br/>';
+                html += '<br/>';
+                html += globalize.translate('MessageDirectoryPickerBSDInstruction');
+                html += '<br/>';
+            } else if ('linux' === systemInfo.OperatingSystem.toLowerCase()) {
+                html += '<br/>';
+                html += '<br/>';
+                html += globalize.translate('MessageDirectoryPickerLinuxInstruction');
+                html += '<br/>';
             }
-            html += "</div>";
+            html += '</div>';
         }
         html += '<form style="margin:auto;">';
         html += '<div class="inputContainer" style="display: flex; align-items: center;">';
         html += '<div style="flex-grow:1;">';
         var labelKey;
         if (options.includeFiles !== true) {
-            labelKey = "LabelFolder";
+            labelKey = 'LabelFolder';
         } else {
-            labelKey = "LabelPath";
+            labelKey = 'LabelPath';
         }
-        var readOnlyAttribute = options.pathReadOnly ? " readonly" : "";
-        html += '<input is="emby-input" id="txtDirectoryPickerPath" type="text" required="required" ' + readOnlyAttribute + ' label="' + Globalize.translate(labelKey) + '"/>';
-        html += "</div>";
+        var readOnlyAttribute = options.pathReadOnly ? ' readonly' : '';
+        html += '<input is="emby-input" id="txtDirectoryPickerPath" type="text" required="required" ' + readOnlyAttribute + ' label="' + globalize.translate(labelKey) + '"/>';
+        html += '</div>';
         if (!readOnlyAttribute) {
-            html += '<button type="button" is="paper-icon-button-light" class="btnRefreshDirectories emby-input-iconbutton" title="' + Globalize.translate("ButtonRefresh") + '"><i class="material-icons">search</i></button>';
+            html += '<button type="button" is="paper-icon-button-light" class="btnRefreshDirectories emby-input-iconbutton" title="' + globalize.translate('ButtonRefresh') + '"><span class="material-icons search"></span></button>';
         }
-        html += "</div>";
+        html += '</div>';
         if (!readOnlyAttribute) {
             html += '<div class="results paperList" style="max-height: 200px; overflow-y: auto;"></div>';
         }
         if (options.enableNetworkSharePath) {
             html += '<div class="inputContainer" style="margin-top:2em;">';
-            html += '<input is="emby-input" id="txtNetworkPath" type="text" label="' + Globalize.translate("LabelOptionalNetworkPath") + '"/>';
+            html += '<input is="emby-input" id="txtNetworkPath" type="text" label="' + globalize.translate('LabelOptionalNetworkPath') + '"/>';
             html += '<div class="fieldDescription">';
-            html += Globalize.translate("LabelOptionalNetworkPathHelp");
-            html += "</div>";
-            html += "</div>";
+            html += globalize.translate('LabelOptionalNetworkPathHelp', '<b>\\\\server</b>', '<b>\\\\192.168.1.101</b>');
+            html += '</div>';
+            html += '</div>';
         }
         html += '<div class="formDialogFooter">';
-        html += '<button is="emby-button" type="submit" class="raised button-submit block formDialogFooterItem">' + Globalize.translate("ButtonOk") + "</button>";
-        html += "</div>";
-        html += "</form>";
-        html += "</div>";
-        html += "</div>";
-        html += "</div>";
+        html += '<button is="emby-button" type="submit" class="raised button-submit block formDialogFooterItem">' + globalize.translate('ButtonOk') + '</button>';
+        html += '</div>';
+        html += '</form>';
+        html += '</div>';
+        html += '</div>';
+        html += '</div>';
 
         return html;
     }
@@ -148,15 +147,15 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
     }
 
     function alertTextWithOptions(options) {
-        require(["alert"], function(alert) {
+        require(['alert'], function(alert) {
             alert(options);
         });
     }
 
     function validatePath(path, validateWriteable, apiClient) {
         return apiClient.ajax({
-            type: "POST",
-            url: apiClient.getUrl("Environment/ValidatePath"),
+            type: 'POST',
+            url: apiClient.getUrl('Environment/ValidatePath'),
             data: {
                 ValidateWriteable: validateWriteable,
                 Path: path
@@ -164,14 +163,14 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
         }).catch(function(response) {
             if (response) {
                 if (response.status === 404) {
-                    alertText(Globalize.translate("PathNotFound"));
+                    alertText(globalize.translate('PathNotFound'));
                     return Promise.reject();
                 }
                 if (response.status === 500) {
                     if (validateWriteable) {
-                        alertText(Globalize.translate("WriteAccessRequired"));
+                        alertText(globalize.translate('WriteAccessRequired'));
                     } else {
-                        alertText(Globalize.translate("PathNotFound"));
+                        alertText(globalize.translate('PathNotFound'));
                     }
                     return Promise.reject();
                 }
@@ -181,37 +180,37 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
     }
 
     function initEditor(content, options, fileOptions) {
-        content.addEventListener("click", function(e) {
-            var lnkPath = dom.parentWithClass(e.target, "lnkPath");
+        content.addEventListener('click', function(e) {
+            var lnkPath = dom.parentWithClass(e.target, 'lnkPath');
             if (lnkPath) {
-                var path = lnkPath.getAttribute("data-path");
-                if (lnkPath.classList.contains("lnkFile")) {
-                    content.querySelector("#txtDirectoryPickerPath").value = path;
+                var path = lnkPath.getAttribute('data-path');
+                if (lnkPath.classList.contains('lnkFile')) {
+                    content.querySelector('#txtDirectoryPickerPath').value = path;
                 } else {
                     refreshDirectoryBrowser(content, path, fileOptions, true);
                 }
             }
         });
 
-        content.addEventListener("click", function(e) {
-            if (dom.parentWithClass(e.target, "btnRefreshDirectories")) {
-                var path = content.querySelector("#txtDirectoryPickerPath").value;
+        content.addEventListener('click', function(e) {
+            if (dom.parentWithClass(e.target, 'btnRefreshDirectories')) {
+                var path = content.querySelector('#txtDirectoryPickerPath').value;
                 refreshDirectoryBrowser(content, path, fileOptions);
             }
         });
 
-        content.addEventListener("change", function(e) {
-            var txtDirectoryPickerPath = dom.parentWithTag(e.target, "INPUT");
-            if (txtDirectoryPickerPath && "txtDirectoryPickerPath" === txtDirectoryPickerPath.id) {
+        content.addEventListener('change', function(e) {
+            var txtDirectoryPickerPath = dom.parentWithTag(e.target, 'INPUT');
+            if (txtDirectoryPickerPath && 'txtDirectoryPickerPath' === txtDirectoryPickerPath.id) {
                 refreshDirectoryBrowser(content, txtDirectoryPickerPath.value, fileOptions);
             }
         });
 
-        content.querySelector("form").addEventListener("submit", function(e) {
+        content.querySelector('form').addEventListener('submit', function(e) {
             if (options.callback) {
-                var networkSharePath = this.querySelector("#txtNetworkPath");
+                var networkSharePath = this.querySelector('#txtNetworkPath');
                 networkSharePath = networkSharePath ? networkSharePath.value : null;
-                var path = this.querySelector("#txtDirectoryPickerPath").value;
+                var path = this.querySelector('#txtDirectoryPickerPath').value;
                 validatePath(path, options.validateWriteable, ApiClient).then(options.callback(path, networkSharePath));
             }
             e.preventDefault();
@@ -224,11 +223,11 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
         if (options.path) {
             return Promise.resolve(options.path);
         } else {
-            return ApiClient.getJSON(ApiClient.getUrl("Environment/DefaultDirectoryBrowser")).then(
+            return ApiClient.getJSON(ApiClient.getUrl('Environment/DefaultDirectoryBrowser')).then(
                 function(result) {
-                    return result.Path || "";
+                    return result.Path || '';
                 }, function() {
-                    return "";
+                    return '';
                 }
             );
         }
@@ -253,35 +252,35 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
                     var systemInfo = responses[0];
                     var initialPath = responses[1];
                     var dlg = dialogHelper.createDialog({
-                        size: "medium-tall",
+                        size: 'small',
                         removeOnClose: true,
                         scrollY: false
                     });
-                    dlg.classList.add("ui-body-a");
-                    dlg.classList.add("background-theme-a");
-                    dlg.classList.add("directoryPicker");
-                    dlg.classList.add("formDialog");
+                    dlg.classList.add('ui-body-a');
+                    dlg.classList.add('background-theme-a');
+                    dlg.classList.add('directoryPicker');
+                    dlg.classList.add('formDialog');
 
-                    var html = "";
+                    var html = '';
                     html += '<div class="formDialogHeader">';
-                    html += '<button is="paper-icon-button-light" class="btnCloseDialog autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>';
+                    html += '<button is="paper-icon-button-light" class="btnCloseDialog autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
                     html += '<h3 class="formDialogHeaderTitle">';
-                    html += options.header || Globalize.translate("HeaderSelectPath");
-                    html += "</h3>";
-                    html += "</div>";
+                    html += options.header || globalize.translate('HeaderSelectPath');
+                    html += '</h3>';
+                    html += '</div>';
                     html += getEditorHtml(options, systemInfo);
                     dlg.innerHTML = html;
                     initEditor(dlg, options, fileOptions);
-                    dlg.addEventListener("close", onDialogClosed);
+                    dlg.addEventListener('close', onDialogClosed);
                     dialogHelper.open(dlg);
-                    dlg.querySelector(".btnCloseDialog").addEventListener("click", function() {
+                    dlg.querySelector('.btnCloseDialog').addEventListener('click', function() {
                         dialogHelper.close(dlg);
                     });
                     currentDialog = dlg;
-                    dlg.querySelector("#txtDirectoryPickerPath").value = initialPath;
-                    var txtNetworkPath = dlg.querySelector("#txtNetworkPath");
+                    dlg.querySelector('#txtDirectoryPickerPath').value = initialPath;
+                    var txtNetworkPath = dlg.querySelector('#txtNetworkPath');
                     if (txtNetworkPath) {
-                        txtNetworkPath.value = options.networkSharePath || "";
+                        txtNetworkPath.value = options.networkSharePath || '';
                     }
                     if (!options.pathReadOnly) {
                         refreshDirectoryBrowser(dlg, initialPath, fileOptions, true);

src/components/displaySettings/displaySettings.js

@@ -1,5 +1,5 @@
 define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', 'apphost', 'focusManager', 'datetime', 'globalize', 'loading', 'connectionManager', 'skinManager', 'dom', 'events', 'emby-select', 'emby-checkbox', 'emby-button'], function (require, browser, layoutManager, appSettings, pluginManager, appHost, focusManager, datetime, globalize, loading, connectionManager, skinManager, dom, events) {
-    "use strict";
+    'use strict';
 
     function fillThemes(select, isDashboard) {
         select.innerHTML = skinManager.getThemes().map(function (t) {
@@ -181,11 +181,15 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
         context.querySelector('#chkThemeSong').checked = userSettings.enableThemeSongs();
         context.querySelector('#chkThemeVideo').checked = userSettings.enableThemeVideos();
         context.querySelector('#chkFadein').checked = userSettings.enableFastFadein();
+        context.querySelector('#chkBlurhash').checked = userSettings.enableBlurhash();
         context.querySelector('#chkBackdrops').checked = userSettings.enableBackdrops();
+        context.querySelector('#chkDetailsBanner').checked = userSettings.detailsBanner();
 
         context.querySelector('#selectLanguage').value = userSettings.language() || '';
         context.querySelector('.selectDateTimeLocale').value = userSettings.dateTimeLocale() || '';
 
+        context.querySelector('#txtLibraryPageSize').value = userSettings.libraryPageSize();
+
         selectDashboardTheme.value = userSettings.dashboardTheme() || '';
         selectTheme.value = userSettings.theme() || '';
 
@@ -215,10 +219,14 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
         userSettingsInstance.soundEffects(context.querySelector('.selectSoundEffects').value);
         userSettingsInstance.screensaver(context.querySelector('.selectScreensaver').value);
 
+        userSettingsInstance.libraryPageSize(context.querySelector('#txtLibraryPageSize').value);
+
         userSettingsInstance.skin(context.querySelector('.selectSkin').value);
 
         userSettingsInstance.enableFastFadein(context.querySelector('#chkFadein').checked);
+        userSettingsInstance.enableBlurhash(context.querySelector('#chkBlurhash').checked);
         userSettingsInstance.enableBackdrops(context.querySelector('#chkBackdrops').checked);
+        userSettingsInstance.detailsBanner(context.querySelector('#chkDetailsBanner').checked);
 
         if (user.Id === apiClient.getCurrentUserId()) {
             skinManager.setTheme(userSettingsInstance.theme());
@@ -265,7 +273,7 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
     }
 
     function embed(options, self) {
-        require(['text!./displaysettings.template.html'], function (template) {
+        require(['text!./displaySettings.template.html'], function (template) {
             options.element.innerHTML = globalize.translateDocument(template, 'core');
             options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self));
             if (options.enableSaveButton) {

src/components/displaySettings/displaySettings.template.html

@@ -56,7 +56,7 @@
         <div class="fieldDescription">
             <div>${LabelDisplayLanguageHelp}</div>
             <div class="learnHowToContributeContainer hide" style="margin-top: .25em;">
-                <a is="emby-linkbutton" class="button-link" href="https://github.com/jellyfin/jellyfin" target="_blank">${LearnHowYouCanContribute}</a>
+                <a is="emby-linkbutton" rel="noopener noreferrer" class="button-link" href="https://github.com/jellyfin/jellyfin" target="_blank">${LearnHowYouCanContribute}</a>
             </div>
         </div>
     </div>
@@ -143,12 +143,33 @@
         <select is="emby-select" class="selectSoundEffects" label="${LabelSoundEffects}"></select>
     </div>
 
-    <div class="checkboxContainer checkboxContainer-withDescription fldFadein">
+    <div class="inputContainer inputContainer-withDescription">
+        <input is="emby-input" type="number" id="txtLibraryPageSize" pattern="[0-9]*" required="required" min="0" max="1000" step="1" label="${LabelLibraryPageSize}" />
+        <div class="fieldDescription">${LabelLibraryPageSizeHelp}</div>
+    </div>
+
+    <div class="checkboxContainer checkboxContainer-withDescription">
         <label>
             <input type="checkbox" is="emby-checkbox" id="chkFadein" />
-            <span>${EnableFastImageFadeIn}</span>
+            <span>${EnableFasterAnimations}</span>
         </label>
-        <div class="fieldDescription checkboxFieldDescription">${EnableFastImageFadeInHelp}</div>
+        <div class="fieldDescription checkboxFieldDescription">${EnableFasterAnimationsHelp}</div>
+    </div>
+
+    <div class="checkboxContainer checkboxContainer-withDescription">
+        <label>
+            <input type="checkbox" is="emby-checkbox" id="chkBlurhash" />
+            <span>${EnableBlurhash}</span>
+        </label>
+        <div class="fieldDescription checkboxFieldDescription">${EnableBlurhashHelp}</div>
+    </div>
+
+    <div class="checkboxContainer checkboxContainer-withDescription">
+        <label>
+            <input type="checkbox" is="emby-checkbox" id="chkDetailsBanner" />
+            <span>${EnableDetailsBanner}</span>
+        </label>
+        <div class="fieldDescription checkboxFieldDescription">${EnableDetailsBannerHelp}</div>
     </div>
 
     <div class="checkboxContainer checkboxContainer-withDescription fldBackdrops hide">

src/components/favoriteitems.js

@@ -1,41 +1,41 @@
-define(["loading", "libraryBrowser", "cardBuilder", "dom", "apphost", "imageLoader", "globalize", "layoutManager", "scrollStyles", "emby-itemscontainer"], function (loading, libraryBrowser, cardBuilder, dom, appHost, imageLoader, globalize, layoutManager) {
-    "use strict";
+define(['loading', 'libraryBrowser', 'cardBuilder', 'dom', 'apphost', 'imageLoader', 'globalize', 'layoutManager', 'scrollStyles', 'emby-itemscontainer'], function (loading, libraryBrowser, cardBuilder, dom, appHost, imageLoader, globalize, layoutManager) {
+    'use strict';
 
     function enableScrollX() {
         return !layoutManager.desktop;
     }
 
     function getThumbShape() {
-        return enableScrollX() ? "overflowBackdrop" : "backdrop";
+        return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
     }
 
     function getPosterShape() {
-        return enableScrollX() ? "overflowPortrait" : "portrait";
+        return enableScrollX() ? 'overflowPortrait' : 'portrait';
     }
 
     function getSquareShape() {
-        return enableScrollX() ? "overflowSquare" : "square";
+        return enableScrollX() ? 'overflowSquare' : 'square';
     }
 
     function getSections() {
         return [{
-            name: "HeaderFavoriteMovies",
-            types: "Movie",
-            id: "favoriteMovies",
+            name: 'HeaderFavoriteMovies',
+            types: 'Movie',
+            id: 'favoriteMovies',
             shape: getPosterShape(),
             showTitle: false,
             overlayPlayButton: true
         }, {
-            name: "HeaderFavoriteShows",
-            types: "Series",
-            id: "favoriteShows",
+            name: 'HeaderFavoriteShows',
+            types: 'Series',
+            id: 'favoriteShows',
             shape: getPosterShape(),
             showTitle: false,
             overlayPlayButton: true
         }, {
-            name: "HeaderFavoriteEpisodes",
-            types: "Episode",
-            id: "favoriteEpisode",
+            name: 'HeaderFavoriteEpisodes',
+            types: 'Episode',
+            id: 'favoriteEpisode',
             shape: getThumbShape(),
             preferThumb: false,
             showTitle: true,
@@ -44,9 +44,9 @@ define(["loading", "libraryBrowser", "cardBuilder", "dom", "apphost", "imageLoad
             overlayText: false,
             centerText: true
         }, {
-            name: "HeaderFavoriteVideos",
-            types: "Video,MusicVideo",
-            id: "favoriteVideos",
+            name: 'HeaderFavoriteVideos',
+            types: 'Video,MusicVideo',
+            id: 'favoriteVideos',
             shape: getThumbShape(),
             preferThumb: true,
             showTitle: true,
@@ -54,9 +54,9 @@ define(["loading", "libraryBrowser", "cardBuilder", "dom", "apphost", "imageLoad
             overlayText: false,
             centerText: true
         }, {
-            name: "HeaderFavoriteArtists",
-            types: "MusicArtist",
-            id: "favoriteArtists",
+            name: 'HeaderFavoriteArtists',
+            types: 'MusicArtist',
+            id: 'favoriteArtists',
             shape: getSquareShape(),
             preferThumb: false,
             showTitle: true,
@@ -66,9 +66,9 @@ define(["loading", "libraryBrowser", "cardBuilder", "dom", "apphost", "imageLoad
             overlayPlayButton: true,
             coverImage: true
         }, {
-            name: "HeaderFavoriteAlbums",
-            types: "MusicAlbum",
-            id: "favoriteAlbums",
+            name: 'HeaderFavoriteAlbums',
+            types: 'MusicAlbum',
+            id: 'favoriteAlbums',
             shape: getSquareShape(),
             preferThumb: false,
             showTitle: true,
@@ -78,9 +78,9 @@ define(["loading", "libraryBrowser", "cardBuilder", "dom", "apphost", "imageLoad
             overlayPlayButton: true,
             coverImage: true
         }, {
-            name: "HeaderFavoriteSongs",
-            types: "Audio",
-            id: "favoriteSongs",
+            name: 'HeaderFavoriteSongs',
+            types: 'Audio',
+            id: 'favoriteSongs',
             shape: getSquareShape(),
             preferThumb: false,
             showTitle: true,
@@ -88,7 +88,7 @@ define(["loading", "libraryBrowser", "cardBuilder", "dom", "apphost", "imageLoad
             showParentTitle: true,
             centerText: true,
             overlayMoreButton: true,
-            action: "instantmix",
+            action: 'instantmix',
             coverImage: true
         }];
     }
@@ -96,13 +96,13 @@ define(["loading", "libraryBrowser", "cardBuilder", "dom", "apphost", "imageLoad
     function loadSection(elem, userId, topParentId, section, isSingleSection) {
         var screenWidth = dom.getWindowSize().innerWidth;
         var options = {
-            SortBy: "SortName",
-            SortOrder: "Ascending",
-            Filters: "IsFavorite",
+            SortBy: 'SortName',
+            SortOrder: 'Ascending',
+            Filters: 'IsFavorite',
             Recursive: true,
-            Fields: "PrimaryImageAspectRatio,BasicSyncInfo",
+            Fields: 'PrimaryImageAspectRatio,BasicSyncInfo',
             CollapseBoxSetItems: false,
-            ExcludeLocationTypes: "Virtual",
+            ExcludeLocationTypes: 'Virtual',
             EnableTotalRecordCount: false
         };
 
@@ -120,7 +120,7 @@ define(["loading", "libraryBrowser", "cardBuilder", "dom", "apphost", "imageLoad
 
         var promise;
 
-        if ("MusicArtist" === section.types) {
+        if ('MusicArtist' === section.types) {
             promise = ApiClient.getArtists(userId, options);
         } else {
             options.IncludeItemTypes = section.types;
@@ -128,25 +128,25 @@ define(["loading", "libraryBrowser", "cardBuilder", "dom", "apphost", "imageLoad
         }
 
         return promise.then(function (result) {
-            var html = "";
+            var html = '';
 
             if (result.Items.length) {
                 if (html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">', !layoutManager.tv && options.Limit && result.Items.length >= options.Limit) {
-                    html += '<a is="emby-linkbutton" href="' + ("list.html?serverId=" + ApiClient.serverId() + "&type=" + section.types + "&IsFavorite=true") + '" class="more button-flat button-flat-mini sectionTitleTextButton">';
+                    html += '<a is="emby-linkbutton" href="' + ('list.html?serverId=' + ApiClient.serverId() + '&type=' + section.types + '&IsFavorite=true') + '" class="more button-flat button-flat-mini sectionTitleTextButton">';
                     html += '<h2 class="sectionTitle sectionTitle-cards">';
                     html += globalize.translate(section.name);
-                    html += "</h2>";
-                    html += '<i class="material-icons chevron_right"></i>';
-                    html += "</a>";
+                    html += '</h2>';
+                    html += '<span class="material-icons chevron_right"></span>';
+                    html += '</a>';
                 } else {
-                    html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate(section.name) + "</h2>";
+                    html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate(section.name) + '</h2>';
                 }
 
-                html += "</div>";
+                html += '</div>';
                 if (enableScrollX()) {
-                    var scrollXClass = "scrollX hiddenScrollX";
+                    var scrollXClass = 'scrollX hiddenScrollX';
                     if (layoutManager.tv) {
-                        scrollXClass += " smoothScrollX";
+                        scrollXClass += ' smoothScrollX';
                     }
 
                     html += '<div is="emby-itemscontainer" class="itemsContainer ' + scrollXClass + ' padded-left padded-right">';
@@ -154,7 +154,7 @@ define(["loading", "libraryBrowser", "cardBuilder", "dom", "apphost", "imageLoad
                     html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right">';
                 }
 
-                var supportsImageAnalysis = appHost.supports("imageanalysis");
+                var supportsImageAnalysis = appHost.supports('imageanalysis');
                 var cardLayout = (appHost.preferVisualCards || supportsImageAnalysis) && section.autoCardLayout && section.showTitle;
                 cardLayout = false;
                 html += cardBuilder.getCardsHtml(result.Items, {
@@ -172,7 +172,7 @@ define(["loading", "libraryBrowser", "cardBuilder", "dom", "apphost", "imageLoad
                     allowBottomPadding: !enableScrollX(),
                     cardLayout: cardLayout
                 });
-                html += "</div>";
+                html += '</div>';
             }
 
             elem.innerHTML = html;
@@ -183,7 +183,7 @@ define(["loading", "libraryBrowser", "cardBuilder", "dom", "apphost", "imageLoad
     function loadSections(page, userId, topParentId, types) {
         loading.show();
         var sections = getSections();
-        var sectionid = getParameterByName("sectionid");
+        var sectionid = getParameterByName('sectionid');
 
         if (sectionid) {
             sections = sections.filter(function (s) {
@@ -199,10 +199,10 @@ define(["loading", "libraryBrowser", "cardBuilder", "dom", "apphost", "imageLoad
 
         var i;
         var length;
-        var elem = page.querySelector(".favoriteSections");
+        var elem = page.querySelector('.favoriteSections');
 
         if (!elem.innerHTML) {
-            var html = "";
+            var html = '';
 
             for (i = 0, length = sections.length; i < length; i++) {
                 html += '<div class="verticalSection section' + sections[i].id + '"></div>';
@@ -215,7 +215,7 @@ define(["loading", "libraryBrowser", "cardBuilder", "dom", "apphost", "imageLoad
 
         for (i = 0, length = sections.length; i < length; i++) {
             var section = sections[i];
-            elem = page.querySelector(".section" + section.id);
+            elem = page.querySelector('.section' + section.id);
             promises.push(loadSection(elem, userId, topParentId, section, 1 === sections.length));
         }
 

src/components/fetchhelper.js

@@ -1,21 +1,19 @@
-define([], function () {
-    'use strict';
+/* eslint-disable indent */
+    export function getFetchPromise(request) {
 
-    function getFetchPromise(request) {
-
-        var headers = request.headers || {};
+        const headers = request.headers || {};
 
         if (request.dataType === 'json') {
             headers.accept = 'application/json';
         }
 
-        var fetchRequest = {
+        const fetchRequest = {
             headers: headers,
             method: request.type,
             credentials: 'same-origin'
         };
 
-        var contentType = request.contentType;
+        let contentType = request.contentType;
 
         if (request.data) {
 
@@ -33,12 +31,12 @@ define([], function () {
             headers['Content-Type'] = contentType;
         }
 
-        var url = request.url;
+        let url = request.url;
 
         if (request.query) {
-            var paramString = paramsToString(request.query);
+            const paramString = paramsToString(request.query);
             if (paramString) {
-                url += '?' + paramString;
+                url += `?${paramString}`;
             }
         }
 
@@ -51,11 +49,11 @@ define([], function () {
 
     function fetchWithTimeout(url, options, timeoutMs) {
 
-        console.debug('fetchWithTimeout: timeoutMs: ' + timeoutMs + ', url: ' + url);
+        console.debug(`fetchWithTimeout: timeoutMs: ${timeoutMs}, url: ${url}`);
 
         return new Promise(function (resolve, reject) {
 
-            var timeout = setTimeout(reject, timeoutMs);
+            const timeout = setTimeout(reject, timeoutMs);
 
             options = options || {};
             options.credentials = 'same-origin';
@@ -63,50 +61,47 @@ define([], function () {
             fetch(url, options).then(function (response) {
                 clearTimeout(timeout);
 
-                console.debug('fetchWithTimeout: succeeded connecting to url: ' + url);
+                console.debug(`fetchWithTimeout: succeeded connecting to url: ${url}`);
 
                 resolve(response);
             }, function (error) {
 
                 clearTimeout(timeout);
 
-                console.debug('fetchWithTimeout: timed out connecting to url: ' + url);
+                console.debug(`fetchWithTimeout: timed out connecting to url: ${url}`);
 
-                reject();
+                reject(error);
             });
         });
     }
 
+    /**
+     * @param params {Record<string, string | number | boolean>}
+     * @returns {string} Query string
+     */
     function paramsToString(params) {
-
-        var values = [];
-
-        for (var key in params) {
-
-            var value = params[key];
-
-            if (value !== null && value !== undefined && value !== '') {
-                values.push(encodeURIComponent(key) + "=" + encodeURIComponent(value));
-            }
-        }
-        return values.join('&');
+        return Object.entries(params)
+            // eslint-disable-next-line no-unused-vars
+            .filter(([_, v]) => v !== null && v !== undefined && v !== '')
+            .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
+            .join('&');
     }
 
-    function ajax(request) {
+    export function ajax(request) {
         if (!request) {
-            throw new Error("Request cannot be null");
+            throw new Error('Request cannot be null');
         }
 
         request.headers = request.headers || {};
 
-        console.debug('requesting url: ' + request.url);
+        console.debug(`requesting url: ${request.url}`);
 
         return getFetchPromise(request).then(function (response) {
-            console.debug('response status: ' + response.status + ', url: ' + request.url);
+            console.debug(`response status: ${response.status}, url: ${request.url}`);
             if (response.status < 400) {
                 if (request.dataType === 'json' || request.headers.accept === 'application/json') {
                     return response.json();
-                } else if (request.dataType === 'text' || (response.headers.get('Content-Type') || '').toLowerCase().indexOf('text/') === 0) {
+                } else if (request.dataType === 'text' || (response.headers.get('Content-Type') || '').toLowerCase().startsWith('text/')) {
                     return response.text();
                 } else {
                     return response;
@@ -115,12 +110,8 @@ define([], function () {
                 return Promise.reject(response);
             }
         }, function (err) {
-            console.error('request failed to url: ' + request.url);
+            console.error(`request failed to url: ${request.url}`);
             throw err;
         });
     }
-    return {
-        getFetchPromise: getFetchPromise,
-        ajax: ajax
-    };
-});
+/* eslint-enable indent */

src/components/filterdialog/filterdialog.js

@@ -1,52 +1,59 @@
-define(["dom", "dialogHelper", "globalize", "connectionManager", "events", "browser", "require", "emby-checkbox", "emby-collapse", "css!./style"], function (dom, dialogHelper, globalize, connectionManager, events, browser, require) {
-    "use strict";
+import dom from 'dom';
+import dialogHelper from 'dialogHelper';
+import globalize from 'globalize';
+import connectionManager from 'connectionManager';
+import events from 'events';
+import 'emby-checkbox';
+import 'emby-collapse';
+import 'css!./style.css';
 
+/* eslint-disable indent */
     function renderOptions(context, selector, cssClass, items, isCheckedFn) {
-        var elem = context.querySelector(selector);
+        const elem = context.querySelector(selector);
         if (items.length) {
-            elem.classList.remove("hide");
+            elem.classList.remove('hide');
         } else {
-            elem.classList.add("hide");
+            elem.classList.add('hide');
         }
-        var html = "";
+        let html = '';
         html += '<div class="checkboxList">';
         html += items.map(function (filter) {
-            var itemHtml = "";
-            var checkedHtml = isCheckedFn(filter) ? " checked" : "";
-            itemHtml += "<label>";
-            itemHtml += '<input is="emby-checkbox" type="checkbox"' + checkedHtml + ' data-filter="' + filter + '" class="' + cssClass + '"/>';
-            itemHtml += "<span>" + filter + "</span>";
-            itemHtml += "</label>";
+            let itemHtml = '';
+            const checkedHtml = isCheckedFn(filter) ? 'checked' : '';
+            itemHtml += '<label>';
+            itemHtml += `<input is="emby-checkbox" type="checkbox" ${checkedHtml} data-filter="${filter}" class="${cssClass}"/>`;
+            itemHtml += `<span>${filter}</span>`;
+            itemHtml += '</label>';
             return itemHtml;
-        }).join("");
-        html += "</div>";
-        elem.querySelector(".filterOptions").innerHTML = html;
+        }).join('');
+        html += '</div>';
+        elem.querySelector('.filterOptions').innerHTML = html;
     }
 
     function renderFilters(context, result, query) {
         if (result.Tags) {
             result.Tags.length = Math.min(result.Tags.length, 50);
         }
-        renderOptions(context, ".genreFilters", "chkGenreFilter", result.Genres, function (i) {
-            var delimeter = "|";
-            return (delimeter + (query.Genres || "") + delimeter).indexOf(delimeter + i + delimeter) != -1;
+        renderOptions(context, '.genreFilters', 'chkGenreFilter', result.Genres, function (i) {
+            const delimeter = '|';
+            return (delimeter + (query.Genres || '') + delimeter).includes(delimeter + i + delimeter);
         });
-        renderOptions(context, ".officialRatingFilters", "chkOfficialRatingFilter", result.OfficialRatings, function (i) {
-            var delimeter = "|";
-            return (delimeter + (query.OfficialRatings || "") + delimeter).indexOf(delimeter + i + delimeter) != -1;
+        renderOptions(context, '.officialRatingFilters', 'chkOfficialRatingFilter', result.OfficialRatings, function (i) {
+            const delimeter = '|';
+            return (delimeter + (query.OfficialRatings || '') + delimeter).includes(delimeter + i + delimeter);
         });
-        renderOptions(context, ".tagFilters", "chkTagFilter", result.Tags, function (i) {
-            var delimeter = "|";
-            return (delimeter + (query.Tags || "") + delimeter).indexOf(delimeter + i + delimeter) != -1;
+        renderOptions(context, '.tagFilters', 'chkTagFilter', result.Tags, function (i) {
+            const delimeter = '|';
+            return (delimeter + (query.Tags || '') + delimeter).includes(delimeter + i + delimeter);
         });
-        renderOptions(context, ".yearFilters", "chkYearFilter", result.Years, function (i) {
-            var delimeter = ",";
-            return (delimeter + (query.Years || "") + delimeter).indexOf(delimeter + i + delimeter) != -1;
+        renderOptions(context, '.yearFilters', 'chkYearFilter', result.Years, function (i) {
+            const delimeter = ',';
+            return (delimeter + (query.Years || '') + delimeter).includes(delimeter + i + delimeter);
         });
     }
 
     function loadDynamicFilters(context, apiClient, userId, itemQuery) {
-        return apiClient.getJSON(apiClient.getUrl("Items/Filters", {
+        return apiClient.getJSON(apiClient.getUrl('Items/Filters', {
             UserId: userId,
             ParentId: itemQuery.ParentId,
             IncludeItemTypes: itemQuery.IncludeItemTypes
@@ -55,346 +62,372 @@ define(["dom", "dialogHelper", "globalize", "connectionManager", "events", "brow
         });
     }
 
+    /**
+     * @param context {HTMLDivElement} Dialog
+     * @param options {any} Options
+     */
     function updateFilterControls(context, options) {
-        var elems;
-        var i;
-        var length;
-        var query = options.query;
+        const query = options.query;
 
-        if (options.mode == "livetvchannels") {
-            context.querySelector(".chkFavorite").checked = query.IsFavorite == true;
-            context.querySelector(".chkLikes").checked = query.IsLiked == true;
-            context.querySelector(".chkDislikes").checked = query.IsDisliked == true;
+        if (options.mode === 'livetvchannels') {
+            context.querySelector('.chkFavorite').checked = query.IsFavorite === true;
+            context.querySelector('.chkLikes').checked = query.IsLiked === true;
+            context.querySelector('.chkDislikes').checked = query.IsDisliked === true;
         } else {
-            elems = context.querySelectorAll(".chkStandardFilter");
-            for (i = 0, length = elems.length; i < length; i++) {
-                var chkStandardFilter = elems[i];
-                var filters = "," + (query.Filters || "");
-                var filterName = chkStandardFilter.getAttribute("data-filter");
-                chkStandardFilter.checked = filters.indexOf("," + filterName) != -1;
+            for (const elem of context.querySelectorAll('.chkStandardFilter')) {
+                const filters = `,${query.Filters || ''}`;
+                const filterName = elem.getAttribute('data-filter');
+                elem.checked = filters.includes(`,${filterName}`);
             }
         }
 
-        elems = context.querySelectorAll(".chkVideoTypeFilter");
-        for (i = 0, length = elems.length; i < length; i++) {
-            var chkVideoTypeFilter = elems[i];
-            var filters = "," + (query.VideoTypes || "");
-            var filterName = chkVideoTypeFilter.getAttribute("data-filter");
-            chkVideoTypeFilter.checked = filters.indexOf("," + filterName) != -1;
+        for (const elem of context.querySelectorAll('.chkVideoTypeFilter')) {
+            const filters = `,${query.VideoTypes || ''}`;
+            const filterName = elem.getAttribute('data-filter');
+            elem.checked = filters.includes(`,${filterName}`);
         }
-        context.querySelector(".chk3DFilter").checked = query.Is3D == true;
-        context.querySelector(".chkHDFilter").checked = query.IsHD == true;
-        context.querySelector(".chk4KFilter").checked = query.Is4K == true;
-        context.querySelector(".chkSDFilter").checked = query.IsHD == true;
-        context.querySelector("#chkSubtitle").checked = query.HasSubtitles == true;
-        context.querySelector("#chkTrailer").checked = query.HasTrailer == true;
-        context.querySelector("#chkThemeSong").checked = query.HasThemeSong == true;
-        context.querySelector("#chkThemeVideo").checked = query.HasThemeVideo == true;
-        context.querySelector("#chkSpecialFeature").checked = query.HasSpecialFeature == true;
-        context.querySelector("#chkSpecialEpisode").checked = query.ParentIndexNumber == 0;
-        context.querySelector("#chkMissingEpisode").checked = query.IsMissing == true;
-        context.querySelector("#chkFutureEpisode").checked = query.IsUnaired == true;
-        for (i = 0, length = elems.length; i < length; i++) {
-            var chkStatus = elems[i];
-            var filters = "," + (query.SeriesStatus || "");
-            var filterName = chkStatus.getAttribute("data-filter");
-            chkStatus.checked = filters.indexOf("," + filterName) != -1;
+        context.querySelector('.chk3DFilter').checked = query.Is3D === true;
+        context.querySelector('.chkHDFilter').checked = query.IsHD === true;
+        context.querySelector('.chk4KFilter').checked = query.Is4K === true;
+        context.querySelector('.chkSDFilter').checked = query.IsHD === true;
+        context.querySelector('#chkSubtitle').checked = query.HasSubtitles === true;
+        context.querySelector('#chkTrailer').checked = query.HasTrailer === true;
+        context.querySelector('#chkThemeSong').checked = query.HasThemeSong === true;
+        context.querySelector('#chkThemeVideo').checked = query.HasThemeVideo === true;
+        context.querySelector('#chkSpecialFeature').checked = query.HasSpecialFeature === true;
+        context.querySelector('#chkSpecialEpisode').checked = query.ParentIndexNumber === 0;
+        context.querySelector('#chkMissingEpisode').checked = query.IsMissing === true;
+        context.querySelector('#chkFutureEpisode').checked = query.IsUnaired === true;
+        for (const elem of context.querySelectorAll('.chkStatus')) {
+            const filters = `,${query.SeriesStatus || ''}`;
+            const filterName = elem.getAttribute('data-filter');
+            elem.checked = filters.includes(`,${filterName}`);
         }
     }
 
+    /**
+     * @param instance {FilterDialog} An instance of FilterDialog
+     */
     function triggerChange(instance) {
-        events.trigger(instance, "filterchange");
+        events.trigger(instance, 'filterchange');
     }
 
     function setVisibility(context, options) {
-        if (options.mode == "livetvchannels" || options.mode == "albums" || options.mode == "artists" || options.mode == "albumartists" || options.mode == "songs") {
-            hideByClass(context, "videoStandard");
+        if (options.mode === 'livetvchannels' || options.mode === 'albums' || options.mode === 'artists' || options.mode === 'albumartists' || options.mode === 'songs') {
+            hideByClass(context, 'videoStandard');
         }
 
         if (enableDynamicFilters(options.mode)) {
-            context.querySelector(".genreFilters").classList.remove("hide");
-            context.querySelector(".officialRatingFilters").classList.remove("hide");
-            context.querySelector(".tagFilters").classList.remove("hide");
-            context.querySelector(".yearFilters").classList.remove("hide");
+            context.querySelector('.genreFilters').classList.remove('hide');
+            context.querySelector('.officialRatingFilters').classList.remove('hide');
+            context.querySelector('.tagFilters').classList.remove('hide');
+            context.querySelector('.yearFilters').classList.remove('hide');
         }
 
-        if (options.mode == "movies" || options.mode == "episodes") {
-            context.querySelector(".videoTypeFilters").classList.remove("hide");
+        if (options.mode === 'movies' || options.mode === 'episodes') {
+            context.querySelector('.videoTypeFilters').classList.remove('hide');
         }
 
-        if (options.mode == "movies" || options.mode == "series" || options.mode == "episodes") {
-            context.querySelector(".features").classList.remove("hide");
+        if (options.mode === 'movies' || options.mode === 'series' || options.mode === 'episodes') {
+            context.querySelector('.features').classList.remove('hide');
         }
 
-        if (options.mode == "series") {
-            context.querySelector(".seriesStatus").classList.remove("hide");
+        if (options.mode === 'series') {
+            context.querySelector('.seriesStatus').classList.remove('hide');
         }
 
-        if (options.mode == "episodes") {
-            showByClass(context, "episodeFilter");
+        if (options.mode === 'episodes') {
+            showByClass(context, 'episodeFilter');
         }
     }
 
     function showByClass(context, className) {
-        var elems = context.querySelectorAll("." + className);
-
-        for (var i = 0, length = elems.length; i < length; i++) {
-            elems[i].classList.remove("hide");
+        for (const elem of context.querySelectorAll(`.${className}`)) {
+            elem.classList.remove('hide');
         }
     }
 
     function hideByClass(context, className) {
-        var elems = context.querySelectorAll("." + className);
-
-        for (var i = 0, length = elems.length; i < length; i++) {
-            elems[i].classList.add("hide");
+        for (const elem of context.querySelectorAll(`.${className}`)) {
+            elem.classList.add('hide');
         }
     }
 
     function enableDynamicFilters(mode) {
-        return mode == "movies" || mode == "series" || mode == "albums" || mode == "albumartists" || mode == "artists" || mode == "songs" || mode == "episodes";
+        return mode === 'movies' || mode === 'series' || mode === 'albums' || mode === 'albumartists' || mode === 'artists' || mode === 'songs' || mode === 'episodes';
     }
 
-    return function (options) {
-        function onFavoriteChange() {
-            var query = options.query;
-            query.StartIndex = 0;
-            query.IsFavorite = !!this.checked || null;
-            triggerChange(self);
+    class FilterDialog {
+        constructor(options) {
+            /**
+             * @private
+             */
+            this.options = options;
         }
 
-        function onStandardFilterChange() {
-            var query = options.query;
-            var filterName = this.getAttribute("data-filter");
-            var filters = query.Filters || "";
-            filters = ("," + filters).replace("," + filterName, "").substring(1);
+        /**
+         * @private
+         */
+        onFavoriteChange(elem) {
+            const query = this.options.query;
+            query.StartIndex = 0;
+            query.IsFavorite = !!elem.checked || null;
+            triggerChange(this);
+        }
 
-            if (this.checked) {
-                filters = filters ? filters + "," + filterName : filterName;
+        /**
+         * @private
+         */
+        onStandardFilterChange(elem) {
+            const query = this.options.query;
+            const filterName = elem.getAttribute('data-filter');
+            let filters = query.Filters || '';
+            filters = (`,${filters}`).replace(`,${filterName}`, '').substring(1);
+
+            if (elem.checked) {
+                filters = filters ? `${filters},${filterName}` : filterName;
             }
 
             query.StartIndex = 0;
             query.Filters = filters;
-            triggerChange(self);
+            triggerChange(this);
         }
 
-        function onVideoTypeFilterChange() {
-            var query = options.query;
-            var filterName = this.getAttribute("data-filter");
-            var filters = query.VideoTypes || "";
-            filters = ("," + filters).replace("," + filterName, "").substring(1);
+        /**
+         * @private
+         */
+        onVideoTypeFilterChange(elem) {
+            const query = this.options.query;
+            const filterName = elem.getAttribute('data-filter');
+            let filters = query.VideoTypes || '';
+            filters = (`,${filters}`).replace(`,${filterName}`, '').substring(1);
 
-            if (this.checked) {
-                filters = filters ? filters + "," + filterName : filterName;
+            if (elem.checked) {
+                filters = filters ? `${filters},${filterName}` : filterName;
             }
 
             query.StartIndex = 0;
             query.VideoTypes = filters;
-            triggerChange(self);
+            triggerChange(this);
         }
 
-        function onStatusChange() {
-            var query = options.query;
-            var filterName = this.getAttribute("data-filter");
-            var filters = query.SeriesStatus || "";
-            filters = ("," + filters).replace("," + filterName, "").substring(1);
+        /**
+         * @private
+         */
+        onStatusChange(elem) {
+            const query = this.options.query;
+            const filterName = elem.getAttribute('data-filter');
+            let filters = query.SeriesStatus || '';
+            filters = (`,${filters}`).replace(`,${filterName}`, '').substring(1);
 
-            if (this.checked) {
-                filters = filters ? filters + "," + filterName : filterName;
+            if (elem.checked) {
+                filters = filters ? `${filters},${filterName}` : filterName;
             }
 
             query.SeriesStatus = filters;
             query.StartIndex = 0;
-            triggerChange(self);
+            triggerChange(this);
         }
 
-        function bindEvents(context) {
-            var elems;
-            var i;
-            var length;
-            var query = options.query;
+        /**
+         * @param context {HTMLDivElement} The dialog
+         */
+        bindEvents(context) {
+            const query = this.options.query;
 
-            if (options.mode == "livetvchannels") {
-                elems = context.querySelectorAll(".chkFavorite");
-                for (i = 0, length = elems.length; i < length; i++) {
-                    elems[i].addEventListener("change", onFavoriteChange);
+            if (this.options.mode === 'livetvchannels') {
+                for (const elem of context.querySelectorAll('.chkFavorite')) {
+                    elem.addEventListener('change', () => this.onFavoriteChange(elem));
                 }
-                context.querySelector(".chkLikes").addEventListener("change", function () {
+
+                const chkLikes = context.querySelector('.chkLikes');
+                chkLikes.addEventListener('change', () => {
                     query.StartIndex = 0;
-                    query.IsLiked = this.checked ? true : null;
-                    triggerChange(self);
+                    query.IsLiked = chkLikes.checked ? true : null;
+                    triggerChange(this);
                 });
-                context.querySelector(".chkDislikes").addEventListener("change", function () {
+                const chkDislikes = context.querySelector('.chkDislikes');
+                chkDislikes.addEventListener('change', () => {
                     query.StartIndex = 0;
-                    query.IsDisliked = this.checked ? true : null;
-                    triggerChange(self);
+                    query.IsDisliked = chkDislikes.checked ? true : null;
+                    triggerChange(this);
                 });
             } else {
-                elems = context.querySelectorAll(".chkStandardFilter");
-                for (i = 0, length = elems.length; i < length; i++) {
-                    elems[i].addEventListener("change", onStandardFilterChange);
+                for (const elem of context.querySelectorAll('.chkStandardFilter')) {
+                    elem.addEventListener('change', () => this.onStandardFilterChange(elem));
                 }
             }
-            elems = context.querySelectorAll(".chkVideoTypeFilter");
-            for (i = 0, length = elems.length; i < length; i++) {
-                elems[i].addEventListener("change", onVideoTypeFilterChange);
+
+            for (const elem of context.querySelectorAll('.chkVideoTypeFilter')) {
+                elem.addEventListener('change', () => this.onVideoTypeFilterChange(elem));
             }
-            context.querySelector(".chk3DFilter").addEventListener("change", function () {
+            const chk3DFilter = context.querySelector('.chk3DFilter');
+            chk3DFilter.addEventListener('change', () => {
                 query.StartIndex = 0;
-                query.Is3D = this.checked ? true : null;
-                triggerChange(self);
+                query.Is3D = chk3DFilter.checked ? true : null;
+                triggerChange(this);
             });
-            context.querySelector(".chk4KFilter").addEventListener("change", function () {
+            const chk4KFilter = context.querySelector('.chk4KFilter');
+            chk4KFilter.addEventListener('change', () => {
                 query.StartIndex = 0;
-                query.Is4K = this.checked ? true : null;
-                triggerChange(self);
+                query.Is4K = chk4KFilter.checked ? true : null;
+                triggerChange(this);
             });
-            context.querySelector(".chkHDFilter").addEventListener("change", function () {
+            const chkHDFilter = context.querySelector('.chkHDFilter');
+            chkHDFilter.addEventListener('change', () => {
                 query.StartIndex = 0;
-                query.IsHD = this.checked ? true : null;
-                triggerChange(self);
+                query.IsHD = chkHDFilter.checked ? true : null;
+                triggerChange(this);
             });
-            context.querySelector(".chkSDFilter").addEventListener("change", function () {
+            const chkSDFilter = context.querySelector('.chkSDFilter');
+            chkSDFilter.addEventListener('change', () => {
                 query.StartIndex = 0;
-                query.IsHD = this.checked ? false : null;
-                triggerChange(self);
+                query.IsHD = chkSDFilter.checked ? false : null;
+                triggerChange(this);
             });
-            elems = context.querySelectorAll(".chkStatus");
-            for (i = 0, length = elems.length; i < length; i++) {
-                elems[i].addEventListener("change", onStatusChange);
+            for (const elem of context.querySelectorAll('.chkStatus')) {
+                elem.addEventListener('change', () => this.onStatusChange(elem));
             }
-            context.querySelector("#chkTrailer").addEventListener("change", function () {
+            const chkTrailer = context.querySelector('#chkTrailer');
+            chkTrailer.addEventListener('change', () => {
                 query.StartIndex = 0;
-                query.HasTrailer = this.checked ? true : null;
-                triggerChange(self);
+                query.HasTrailer = chkTrailer.checked ? true : null;
+                triggerChange(this);
             });
-            context.querySelector("#chkThemeSong").addEventListener("change", function () {
+            const chkThemeSong = context.querySelector('#chkThemeSong');
+            chkThemeSong.addEventListener('change', () => {
                 query.StartIndex = 0;
-                query.HasThemeSong = this.checked ? true : null;
-                triggerChange(self);
+                query.HasThemeSong = chkThemeSong.checked ? true : null;
+                triggerChange(this);
             });
-            context.querySelector("#chkSpecialFeature").addEventListener("change", function () {
+            const chkSpecialFeature = context.querySelector('#chkSpecialFeature');
+            chkSpecialFeature.addEventListener('change', () => {
                 query.StartIndex = 0;
-                query.HasSpecialFeature = this.checked ? true : null;
-                triggerChange(self);
+                query.HasSpecialFeature = chkSpecialFeature.checked ? true : null;
+                triggerChange(this);
             });
-            context.querySelector("#chkThemeVideo").addEventListener("change", function () {
+            const chkThemeVideo = context.querySelector('#chkThemeVideo');
+            chkThemeVideo.addEventListener('change', () => {
                 query.StartIndex = 0;
-                query.HasThemeVideo = this.checked ? true : null;
-                triggerChange(self);
+                query.HasThemeVideo = chkThemeVideo.checked ? true : null;
+                triggerChange(this);
             });
-            context.querySelector("#chkMissingEpisode").addEventListener("change", function () {
+            const chkMissingEpisode = context.querySelector('#chkMissingEpisode');
+            chkMissingEpisode.addEventListener('change', () => {
                 query.StartIndex = 0;
-                query.IsMissing = this.checked ? true : false;
-                triggerChange(self);
+                query.IsMissing = !!chkMissingEpisode.checked;
+                triggerChange(this);
             });
-            context.querySelector("#chkSpecialEpisode").addEventListener("change", function () {
+            const chkSpecialEpisode = context.querySelector('#chkSpecialEpisode');
+            chkSpecialEpisode.addEventListener('change', () => {
                 query.StartIndex = 0;
-                query.ParentIndexNumber = this.checked ? 0 : null;
-                triggerChange(self);
+                query.ParentIndexNumber = chkSpecialEpisode.checked ? 0 : null;
+                triggerChange(this);
             });
-            context.querySelector("#chkFutureEpisode").addEventListener("change", function () {
+            const chkFutureEpisode = context.querySelector('#chkFutureEpisode');
+            chkFutureEpisode.addEventListener('change', () => {
                 query.StartIndex = 0;
-                if (this.checked) {
+                if (chkFutureEpisode.checked) {
                     query.IsUnaired = true;
                     query.IsVirtualUnaired = null;
                 } else {
                     query.IsUnaired = null;
                     query.IsVirtualUnaired = false;
                 }
-                triggerChange(self);
+                triggerChange(this);
             });
-            context.querySelector("#chkSubtitle").addEventListener("change", function () {
+            const chkSubtitle = context.querySelector('#chkSubtitle');
+            chkSubtitle.addEventListener('change', () => {
                 query.StartIndex = 0;
-                query.HasSubtitles = this.checked ? true : null;
-                triggerChange(self);
+                query.HasSubtitles = chkSubtitle.checked ? true : null;
+                triggerChange(this);
             });
-            context.addEventListener("change", function (e) {
-                var chkGenreFilter = dom.parentWithClass(e.target, "chkGenreFilter");
+            context.addEventListener('change', (e) => {
+                const chkGenreFilter = dom.parentWithClass(e.target, 'chkGenreFilter');
                 if (chkGenreFilter) {
-                    var filterName = chkGenreFilter.getAttribute("data-filter");
-                    var filters = query.Genres || "";
-                    var delimiter = "|";
-                    filters = (delimiter + filters).replace(delimiter + filterName, "").substring(1);
+                    const filterName = chkGenreFilter.getAttribute('data-filter');
+                    let filters = query.Genres || '';
+                    const delimiter = '|';
+                    filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
                     if (chkGenreFilter.checked) {
                         filters = filters ? (filters + delimiter + filterName) : filterName;
                     }
                     query.StartIndex = 0;
                     query.Genres = filters;
-                    triggerChange(self);
+                    triggerChange(this);
                     return;
                 }
-                var chkTagFilter = dom.parentWithClass(e.target, "chkTagFilter");
+                const chkTagFilter = dom.parentWithClass(e.target, 'chkTagFilter');
                 if (chkTagFilter) {
-                    var filterName = chkTagFilter.getAttribute("data-filter");
-                    var filters = query.Tags || "";
-                    var delimiter = "|";
-                    filters = (delimiter + filters).replace(delimiter + filterName, "").substring(1);
+                    const filterName = chkTagFilter.getAttribute('data-filter');
+                    let filters = query.Tags || '';
+                    const delimiter = '|';
+                    filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
                     if (chkTagFilter.checked) {
                         filters = filters ? (filters + delimiter + filterName) : filterName;
                     }
                     query.StartIndex = 0;
                     query.Tags = filters;
-                    triggerChange(self);
+                    triggerChange(this);
                     return;
                 }
-                var chkYearFilter = dom.parentWithClass(e.target, "chkYearFilter");
+                const chkYearFilter = dom.parentWithClass(e.target, 'chkYearFilter');
                 if (chkYearFilter) {
-                    var filterName = chkYearFilter.getAttribute("data-filter");
-                    var filters = query.Years || "";
-                    var delimiter = ",";
-                    filters = (delimiter + filters).replace(delimiter + filterName, "").substring(1);
+                    const filterName = chkYearFilter.getAttribute('data-filter');
+                    let filters = query.Years || '';
+                    const delimiter = ',';
+                    filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
                     if (chkYearFilter.checked) {
                         filters = filters ? (filters + delimiter + filterName) : filterName;
                     }
                     query.StartIndex = 0;
                     query.Years = filters;
-                    triggerChange(self);
+                    triggerChange(this);
                     return;
                 }
-                var chkOfficialRatingFilter = dom.parentWithClass(e.target, "chkOfficialRatingFilter");
+                const chkOfficialRatingFilter = dom.parentWithClass(e.target, 'chkOfficialRatingFilter');
                 if (chkOfficialRatingFilter) {
-                    var filterName = chkOfficialRatingFilter.getAttribute("data-filter");
-                    var filters = query.OfficialRatings || "";
-                    var delimiter = "|";
-                    filters = (delimiter + filters).replace(delimiter + filterName, "").substring(1);
+                    const filterName = chkOfficialRatingFilter.getAttribute('data-filter');
+                    let filters = query.OfficialRatings || '';
+                    const delimiter = '|';
+                    filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
                     if (chkOfficialRatingFilter.checked) {
                         filters = filters ? (filters + delimiter + filterName) : filterName;
                     }
                     query.StartIndex = 0;
                     query.OfficialRatings = filters;
-                    triggerChange(self);
-                    return;
+                    triggerChange(this);
                 }
             });
         }
 
-        var self = this;
-
-        self.show = function () {
-            return new Promise(function (resolve, reject) {
-                require(["text!./filterdialog.template.html"], function (template) {
-                    var dlg = dialogHelper.createDialog({
+        show() {
+            return import('text!./filterdialog.template.html').then(({default: template}) => {
+                return new Promise((resolve) => {
+                    const dlg = dialogHelper.createDialog({
                         removeOnClose: true,
                         modal: false
                     });
-                    dlg.classList.add("ui-body-a");
-                    dlg.classList.add("background-theme-a");
-                    dlg.classList.add("formDialog");
-                    dlg.classList.add("filterDialog");
+                    dlg.classList.add('ui-body-a');
+                    dlg.classList.add('background-theme-a');
+                    dlg.classList.add('formDialog');
+                    dlg.classList.add('filterDialog');
                     dlg.innerHTML = globalize.translateDocument(template);
-                    setVisibility(dlg, options);
+                    setVisibility(dlg, this.options);
                     dialogHelper.open(dlg);
-                    dlg.addEventListener("close", resolve);
-                    updateFilterControls(dlg, options);
-                    bindEvents(dlg);
-                    if (enableDynamicFilters(options.mode)) {
-                        dlg.classList.add("dynamicFilterDialog");
-                        var apiClient = connectionManager.getApiClient(options.serverId);
-                        loadDynamicFilters(dlg, apiClient, apiClient.getCurrentUserId(), options.query);
+                    dlg.addEventListener('close', resolve);
+                    updateFilterControls(dlg, this.options);
+                    this.bindEvents(dlg);
+                    if (enableDynamicFilters(this.options.mode)) {
+                        dlg.classList.add('dynamicFilterDialog');
+                        const apiClient = connectionManager.getApiClient(this.options.serverId);
+                        loadDynamicFilters(dlg, apiClient, apiClient.getCurrentUserId(), this.options.query);
                     }
                 });
             });
-        };
-    };
-});
+        }
+    }
+
+/* eslint-enable indent */
+
+export default FilterDialog;

src/components/filtermenu/filtermenu.js

@@ -279,7 +279,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
                 var html = '';
 
                 html += '<div class="formDialogHeader">';
-                html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><i class="material-icons arrow_back"></i></button>';
+                html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
                 html += '<h3 class="formDialogHeaderTitle">${Filters}</h3>';
 
                 html += '</div>';

src/components/focusManager.js

@@ -117,7 +117,7 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
             return false;
         }
 
-        if (elem.getAttribute('tabindex') === "-1") {
+        if (elem.getAttribute('tabindex') === '-1') {
             return false;
         }
 

src/components/formdialog.css

@@ -19,6 +19,10 @@
     margin-bottom: 0;
 }
 
+.formDialogHeaderTitle:first-child {
+    margin-left: 1em;
+}
+
 .formDialogContent:not(.no-grow) {
     flex-grow: 1;
 }
@@ -46,10 +50,16 @@
     right: 0;
     display: flex;
     position: absolute;
-    padding: 1.25em 1em;
+    padding: 1em 1em;
 
     /* Without this emby-checkbox is able to appear on top */
     z-index: 1;
+    align-items: flex-end;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+}
+
+.layout-tv .formDialogFooter {
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
@@ -69,8 +79,12 @@
 
 .formDialogFooterItem {
     margin: 0.5em !important;
-    flex-grow: 1;
     text-align: center;
+    flex-basis: 12em;
+}
+
+.layout-tv .formDialogFooterItem {
+    flex-grow: 1;
     flex-basis: 0;
 }
 

src/components/fullscreenManager.js

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

src/components/groupedcards.js

@@ -1,28 +1,28 @@
-define(["dom", "appRouter", "connectionManager"], function (dom, appRouter, connectionManager) {
-    "use strict";
+define(['dom', 'appRouter', 'connectionManager'], function (dom, appRouter, connectionManager) {
+    'use strict';
 
     function onGroupedCardClick(e, card) {
-        var itemId = card.getAttribute("data-id");
-        var serverId = card.getAttribute("data-serverid");
+        var itemId = card.getAttribute('data-id');
+        var serverId = card.getAttribute('data-serverid');
         var apiClient = connectionManager.getApiClient(serverId);
         var userId = apiClient.getCurrentUserId();
-        var playedIndicator = card.querySelector(".playedIndicator");
+        var playedIndicator = card.querySelector('.playedIndicator');
         var playedIndicatorHtml = playedIndicator ? playedIndicator.innerHTML : null;
         var options = {
-            Limit: parseInt(playedIndicatorHtml || "10"),
-            Fields: "PrimaryImageAspectRatio,DateCreated",
+            Limit: parseInt(playedIndicatorHtml || '10'),
+            Fields: 'PrimaryImageAspectRatio,DateCreated',
             ParentId: itemId,
             GroupItems: false
         };
-        var actionableParent = dom.parentWithTag(e.target, ["A", "BUTTON", "INPUT"]);
+        var actionableParent = dom.parentWithTag(e.target, ['A', 'BUTTON', 'INPUT']);
 
-        if (!actionableParent || actionableParent.classList.contains("cardContent")) {
-            apiClient.getJSON(apiClient.getUrl("Users/" + userId + "/Items/Latest", options)).then(function (items) {
+        if (!actionableParent || actionableParent.classList.contains('cardContent')) {
+            apiClient.getJSON(apiClient.getUrl('Users/' + userId + '/Items/Latest', options)).then(function (items) {
                 if (1 === items.length) {
                     return void appRouter.showItem(items[0]);
                 }
 
-                var url = "itemdetails.html?id=" + itemId + "&serverId=" + serverId;
+                var url = 'itemdetails.html?id=' + itemId + '&serverId=' + serverId;
                 Dashboard.navigate(url);
             });
             e.stopPropagation();
@@ -32,7 +32,7 @@ define(["dom", "appRouter", "connectionManager"], function (dom, appRouter, conn
     }
 
     function onItemsContainerClick(e) {
-        var groupedCard = dom.parentWithClass(e.target, "groupedCard");
+        var groupedCard = dom.parentWithClass(e.target, 'groupedCard');
 
         if (groupedCard) {
             onGroupedCardClick(e, groupedCard);

src/components/guide/guide-settings.template.html

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

src/components/guide/guide.js

@@ -1,4 +1,4 @@
-define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager', 'scrollHelper', 'serverNotifications', 'loading', 'datetime', 'focusManager', 'playbackManager', 'userSettings', 'imageLoader', 'events', 'layoutManager', 'itemShortcuts', 'dom', 'css!./guide.css', 'programStyles', 'material-icons', 'scrollStyles', 'emby-button', 'paper-icon-button-light', 'emby-tabs', 'emby-scroller', 'flexStyles', 'registerElement'], function (require, inputManager, browser, globalize, connectionManager, scrollHelper, serverNotifications, loading, datetime, focusManager, playbackManager, userSettings, imageLoader, events, layoutManager, itemShortcuts, dom) {
+define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager', 'scrollHelper', 'serverNotifications', 'loading', 'datetime', 'focusManager', 'playbackManager', 'userSettings', 'imageLoader', 'events', 'layoutManager', 'itemShortcuts', 'dom', 'css!./guide.css', 'programStyles', 'material-icons', 'scrollStyles', 'emby-programcell', 'emby-button', 'paper-icon-button-light', 'emby-tabs', 'emby-scroller', 'flexStyles', 'registerElement'], function (require, inputManager, browser, globalize, connectionManager, scrollHelper, serverNotifications, loading, datetime, focusManager, playbackManager, userSettings, imageLoader, events, layoutManager, itemShortcuts, dom) {
     'use strict';
 
     function showViewSettings(instance) {
@@ -227,7 +227,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
             channelQuery.Limit = channelLimit;
             channelQuery.AddCurrentProgram = false;
             channelQuery.EnableUserData = false;
-            channelQuery.EnableImageTypes = "Primary";
+            channelQuery.EnableImageTypes = 'Primary';
 
             var categories = self.categoryOptions.categories || [];
             var displayMovieContent = !categories.length || categories.indexOf('movies') !== -1;
@@ -261,8 +261,8 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
             }
 
             if (userSettings.get('livetv-channelorder') === 'DatePlayed') {
-                channelQuery.SortBy = "DatePlayed";
-                channelQuery.SortOrder = "Descending";
+                channelQuery.SortBy = 'DatePlayed';
+                channelQuery.SortOrder = 'Descending';
             } else {
                 channelQuery.SortBy = null;
                 channelQuery.SortOrder = null;
@@ -329,7 +329,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
                     ImageTypeLimit: 1,
                     EnableImages: false,
                     //EnableImageTypes: layoutManager.tv ? "Primary,Backdrop" : "Primary",
-                    SortBy: "StartDate",
+                    SortBy: 'StartDate',
                     EnableTotalRecordCount: false,
                     EnableUserData: false
                 };
@@ -415,7 +415,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
             var status;
 
             if (item.Type === 'SeriesTimer') {
-                return '<i class="material-icons programIcon seriesTimerIcon fiber_smart_record"></i>';
+                return '<span class="material-icons programIcon seriesTimerIcon fiber_smart_record"></span>';
             } else if (item.TimerId || item.SeriesTimerId) {
 
                 status = item.Status || 'Cancelled';
@@ -429,13 +429,13 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
             if (item.SeriesTimerId) {
 
                 if (status !== 'Cancelled') {
-                    return '<i class="material-icons programIcon seriesTimerIcon fiber_smart_record"></i>';
+                    return '<span class="material-icons programIcon seriesTimerIcon fiber_smart_record"></span>';
                 }
 
-                return '<i class="material-icons programIcon seriesTimerIcon seriesTimerIcon-inactive fiber_smart_record"></i>';
+                return '<span class="material-icons programIcon seriesTimerIcon seriesTimerIcon-inactive fiber_smart_record"></span>';
             }
 
-            return '<i class="material-icons programIcon timerIcon fiber_manual_record"></i>';
+            return '<span class="material-icons programIcon timerIcon fiber_manual_record"></span>';
         }
 
         function getChannelProgramsHtml(context, date, channel, programs, options, listInfo) {
@@ -502,7 +502,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
                 var endPercent = (renderEndMs - renderStartMs) / msPerDay;
                 endPercent *= 100;
 
-                var cssClass = "programCell itemAction";
+                var cssClass = 'programCell itemAction';
                 var accentCssClass = null;
                 var displayInnerContent = true;
 
@@ -525,11 +525,11 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
                 }
 
                 if (displayInnerContent && enableColorCodedBackgrounds && accentCssClass) {
-                    cssClass += " programCell-" + accentCssClass;
+                    cssClass += ' programCell-' + accentCssClass;
                 }
 
                 if (now >= startDateLocalMs && now < endDateLocalMs) {
-                    cssClass += " programCell-active";
+                    cssClass += ' programCell-active';
                 }
 
                 var timerAttributes = '';
@@ -545,11 +545,11 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
                 html += '<button' + isAttribute + ' data-action="' + clickAction + '"' + timerAttributes + ' data-channelid="' + program.ChannelId + '" data-id="' + program.Id + '" data-serverid="' + program.ServerId + '" data-startdate="' + program.StartDate + '" data-enddate="' + program.EndDate + '" data-type="' + program.Type + '" class="' + cssClass + '" style="left:' + startPercent + '%;width:' + endPercent + '%;">';
 
                 if (displayInnerContent) {
-                    var guideProgramNameClass = "guideProgramName";
+                    var guideProgramNameClass = 'guideProgramName';
 
                     html += '<div class="' + guideProgramNameClass + '">';
 
-                    html += '<div class="guide-programNameCaret hide"><i class="guideProgramNameCaretIcon material-icons keyboard_arrow_left"></i></div>';
+                    html += '<div class="guide-programNameCaret hide"><span class="guideProgramNameCaretIcon material-icons keyboard_arrow_left"></span></div>';
 
                     html += '<div class="guideProgramNameText">' + program.Name;
 
@@ -577,7 +577,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
                     html += '</div>';
 
                     if (program.IsHD && options.showHdIcon) {
-                        //html += '<i class="guideHdIcon material-icons programIcon">hd</i>';
+                        //html += '<span class="guideHdIcon material-icons programIcon hd"></span>';
                         if (layoutManager.tv) {
                             html += '<div class="programIcon guide-programTextIcon guide-programTextIcon-tv">HD</div>';
                         } else {
@@ -630,7 +630,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
                     var url = apiClient.getScaledImageUrl(channel.Id, {
                         maxHeight: 220,
                         tag: channel.ImageTags.Primary,
-                        type: "Primary"
+                        type: 'Primary'
                     });
 
                     html += '<div class="guideChannelImage lazy" data-src="' + url + '"></div>';
@@ -1105,7 +1105,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
 
                 var icon = cell.querySelector('.timerIcon');
                 if (!icon) {
-                    cell.querySelector('.guideProgramName').insertAdjacentHTML('beforeend', '<i class="timerIcon material-icons programIcon fiber_manual_record"></i>');
+                    cell.querySelector('.guideProgramName').insertAdjacentHTML('beforeend', '<span class="timerIcon material-icons programIcon fiber_manual_record"></span>');
                 }
 
                 if (newTimerId) {
@@ -1252,18 +1252,5 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
         });
     }
 
-    var ProgramCellPrototype = Object.create(HTMLButtonElement.prototype);
-
-    ProgramCellPrototype.detachedCallback = function () {
-        this.posLeft = null;
-        this.posWidth = null;
-        this.guideProgramName = null;
-    };
-
-    document.registerElement('emby-programcell', {
-        prototype: ProgramCellPrototype,
-        extends: 'button'
-    });
-
     return Guide;
 });

src/components/guide/tvguide.template.html

@@ -9,8 +9,8 @@
 
     <div class="guide-headerTimeslots">
         <div class="guide-channelTimeslotHeader">
-            <button is="paper-icon-button-light" type="button" class="btnGuideViewSettings">
-                <i class="material-icons btnGuideViewSettingsIcon more_horiz"></i>
+            <button is="paper-icon-button-light" type="button" class="btnGuideViewSettings" title="${ButtonMore}">
+                <span class="material-icons btnGuideViewSettingsIcon more_vert" aria-hidden="true"></span>
             </button>
         </div>
         <div class="timeslotHeaders scrollX guideScroller"></div>
@@ -29,10 +29,10 @@
 </div>
 
 <div class="guideOptions hide">
-    <button is="paper-icon-button-light" type="button" class="btnPreviousPage">
-        <i class="material-icons arrow_back"></i>
+    <button is="paper-icon-button-light" type="button" class="btnPreviousPage" title="${LabelPrevious}">
+        <span class="material-icons arrow_back" aria-hidden="true"></span>
     </button>
-    <button is="paper-icon-button-light" type="button" class="btnNextPage">
-        <i class="material-icons arrow_forward"></i>
+    <button is="paper-icon-button-light" type="button" class="btnNextPage" title="${LabelNext}">
+        <span class="material-icons arrow_forward" aria-hidden="true"></span>
     </button>
 </div>

src/components/headroom/headroom.css

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

src/components/headroom/headroom.js

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

src/components/homeScreenSettings/homeScreenSettings.js

@@ -1,5 +1,5 @@
 define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loading', 'connectionManager', 'homeSections', 'dom', 'events', 'listViewStyle', 'emby-select', 'emby-checkbox'], function (require, appHost, layoutManager, focusManager, globalize, loading, connectionManager, homeSections, dom, events) {
-    "use strict";
+    'use strict';
 
     var numConfigurableSections = 7;
 
@@ -37,18 +37,19 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
         var list = [];
 
         if (type === 'movies') {
-
             list.push({
                 name: globalize.translate('Movies'),
                 value: 'movies',
                 isDefault: true
             });
-
             list.push({
                 name: globalize.translate('Suggestions'),
                 value: 'suggestions'
             });
-
+            list.push({
+                name: globalize.translate('Genres'),
+                value: 'genres'
+            });
             list.push({
                 name: globalize.translate('Favorites'),
                 value: 'favorites'
@@ -58,7 +59,6 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
                 value: 'collections'
             });
         } else if (type === 'tvshows') {
-
             list.push({
                 name: globalize.translate('Shows'),
                 value: 'shows',
@@ -68,49 +68,45 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
                 name: globalize.translate('Suggestions'),
                 value: 'suggestions'
             });
-
             list.push({
                 name: globalize.translate('Latest'),
                 value: 'latest'
             });
+            list.push({
+                name: globalize.translate('Genres'),
+                value: 'genres'
+            });
             list.push({
                 name: globalize.translate('Favorites'),
                 value: 'favorites'
             });
         } else if (type === 'music') {
-
             list.push({
                 name: globalize.translate('Suggestions'),
                 value: 'suggestions',
                 isDefault: true
             });
-
             list.push({
                 name: globalize.translate('Albums'),
                 value: 'albums'
             });
-
             list.push({
                 name: globalize.translate('HeaderAlbumArtists'),
                 value: 'albumartists'
             });
-
             list.push({
                 name: globalize.translate('Artists'),
                 value: 'artists'
             });
-
             list.push({
                 name: globalize.translate('Playlists'),
                 value: 'playlists'
             });
-
             list.push({
                 name: globalize.translate('Genres'),
                 value: 'genres'
             });
         } else if (type === 'livetv') {
-
             list.push({
                 name: globalize.translate('Suggestions'),
                 value: 'suggestions',
@@ -149,7 +145,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
 
             currentHtml += '<div class="listItem viewItem" data-viewid="' + view.Id + '">';
 
-            currentHtml += '<i class="material-icons listItemIcon folder_open"></i>';
+            currentHtml += '<span class="material-icons listItemIcon folder_open"></span>';
 
             currentHtml += '<div class="listItemBody">';
 
@@ -159,8 +155,8 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
 
             currentHtml += '</div>';
 
-            currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemUp btnViewItemMove autoSize" title="' + globalize.translate('Up') + '"><i class="material-icons keyboard_arrow_up"></i></button>';
-            currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemDown btnViewItemMove autoSize" title="' + globalize.translate('Down') + '"><i class="material-icons keyboard_arrow_down"></i></button>';
+            currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemUp btnViewItemMove autoSize" title="' + globalize.translate('Up') + '"><span class="material-icons keyboard_arrow_up"></span></button>';
+            currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemDown btnViewItemMove autoSize" title="' + globalize.translate('Down') + '"><span class="material-icons keyboard_arrow_down"></span></button>';
 
             currentHtml += '</div>';
 
@@ -276,7 +272,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
         updateHomeSectionValues(context, userSettings);
 
         var promise1 = apiClient.getUserViews({ IncludeHidden: true }, user.Id);
-        var promise2 = apiClient.getJSON(apiClient.getUrl("Users/" + user.Id + "/GroupingOptions"));
+        var promise2 = apiClient.getJSON(apiClient.getUrl('Users/' + user.Id + '/GroupingOptions'));
 
         Promise.all([promise1, promise2]).then(function (responses) {
 
@@ -363,17 +359,17 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
 
         user.Configuration.HidePlayedInLatest = context.querySelector('.chkHidePlayedFromLatest').checked;
 
-        user.Configuration.LatestItemsExcludes = getCheckboxItems(".chkIncludeInLatest", context, false).map(function (i) {
+        user.Configuration.LatestItemsExcludes = getCheckboxItems('.chkIncludeInLatest', context, false).map(function (i) {
 
             return i.getAttribute('data-folderid');
         });
 
-        user.Configuration.MyMediaExcludes = getCheckboxItems(".chkIncludeInMyMedia", context, false).map(function (i) {
+        user.Configuration.MyMediaExcludes = getCheckboxItems('.chkIncludeInMyMedia', context, false).map(function (i) {
 
             return i.getAttribute('data-folderid');
         });
 
-        user.Configuration.GroupedFolders = getCheckboxItems(".chkGroupFolder", context, true).map(function (i) {
+        user.Configuration.GroupedFolders = getCheckboxItems('.chkGroupFolder', context, true).map(function (i) {
 
             return i.getAttribute('data-folderid');
         });
@@ -470,7 +466,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
 
     function embed(options, self) {
 
-        require(['text!./homescreensettings.template.html'], function (template) {
+        require(['text!./homeScreenSettings.template.html'], function (template) {
 
             for (var i = 1; i <= numConfigurableSections; i++) {
                 template = template.replace('{section' + i + 'label}', globalize.translate('LabelHomeScreenSectionValue', i));

src/components/homeScreenSettings/homeScreenSettings.template.html

@@ -10,6 +10,13 @@
             <div class="fieldDescription">${LabelPleaseRestart}</div>
         </div>
 
+        <div class="verticalSection verticalSection-extrabottompadding">
+            <label class="checkboxContainer">
+                <input class="chkHidePlayedFromLatest" type="checkbox" is="emby-checkbox" />
+                <span>${HideWatchedContentFromLatestMedia}</span>
+            </label>
+        </div>
+
         <div class="selectContainer">
             <select is="emby-select" id="selectHomeSection1" label="{section1label}">
                 <option value="smalllibrarytiles">${HeaderMyMedia}</option>
@@ -110,13 +117,6 @@
 
     <div class="perLibrarySettings"></div>
 
-    <div class="verticalSection verticalSection-extrabottompadding">
-        <label class="checkboxContainer">
-            <input class="chkHidePlayedFromLatest" type="checkbox" is="emby-checkbox" />
-            <span>${HideWatchedContentFromLatestMedia}</span>
-        </label>
-    </div>
-
     <div class="verticalSection verticalSection-extrabottompadding">
         <h2 class="sectionTitle">${HeaderLibraryFolders}</h2>
         <div>

src/components/homesections/homesections.js

@@ -64,21 +64,21 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
             } else {
                 var noLibDescription;
                 if (user['Policy'] && user['Policy']['IsAdministrator']) {
-                    noLibDescription = Globalize.translate("NoCreatedLibraries", '<a id="button-createLibrary" class="button-link">', '</a>');
+                    noLibDescription = globalize.translate('NoCreatedLibraries', '<br><a id="button-createLibrary" class="button-link">', '</a>');
                 } else {
-                    noLibDescription = Globalize.translate("AskAdminToCreateLibrary");
+                    noLibDescription = globalize.translate('AskAdminToCreateLibrary');
                 }
 
                 html += '<div class="centerMessage padded-left padded-right">';
-                html += '<h2>' + Globalize.translate("MessageNothingHere") + '</h2>';
+                html += '<h2>' + globalize.translate('MessageNothingHere') + '</h2>';
                 html += '<p>' + noLibDescription + '</p>';
                 html += '</div>';
                 elem.innerHTML = html;
 
-                var createNowLink = elem.querySelector("#button-createLibrary");
+                var createNowLink = elem.querySelector('#button-createLibrary');
                 if (createNowLink) {
-                    createNowLink.addEventListener("click", function () {
-                        Dashboard.navigate("library.html");
+                    createNowLink.addEventListener('click', function () {
+                        Dashboard.navigate('library.html');
                     });
                 }
             }
@@ -131,7 +131,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         } else if (section === 'librarytiles' || section === 'smalllibrarytiles' || section === 'smalllibrarytiles-automobile' || section === 'librarytiles-automobile') {
             loadLibraryTiles(elem, apiClient, user, userSettings, 'smallBackdrop', userViews, allSections);
         } else if (section === 'librarybuttons') {
-            loadlibraryButtons(elem, apiClient, user, userSettings, userViews, allSections);
+            loadlibraryButtons(elem, apiClient, user, userSettings, userViews);
         } else if (section === 'resume') {
             loadResumeVideo(elem, apiClient, userId);
         } else if (section === 'resumeaudio') {
@@ -172,7 +172,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function getLibraryButtonsHtml(items) {
-        var html = "";
+        var html = '';
 
         html += '<div class="verticalSection verticalSection-extrabottompadding">';
         html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderMyMedia') + '</h2>';
@@ -183,7 +183,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         for (var i = 0, length = items.length; i < length; i++) {
             var item = items[i];
             var icon = imageHelper.getLibraryIcon(item.CollectionType);
-            html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl(item) + '" class="raised homeLibraryButton"><i class="material-icons homeLibraryIcon ' + icon + '"></i><span class="homeLibraryText">' + item.Name + '</span></a>';
+            html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl(item) + '" class="raised homeLibraryButton"><span class="material-icons homeLibraryIcon ' + icon + '"></span><span class="homeLibraryText">' + item.Name + '</span></a>';
         }
 
         html += '</div>';
@@ -229,9 +229,9 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
             var options = {
                 Limit: limit,
-                Fields: "PrimaryImageAspectRatio,BasicSyncInfo",
+                Fields: 'PrimaryImageAspectRatio,BasicSyncInfo,Path',
                 ImageTypeLimit: 1,
-                EnableImageTypes: "Primary,Backdrop,Thumb",
+                EnableImageTypes: 'Primary,Backdrop,Thumb',
                 ParentId: parentId
             };
 
@@ -243,9 +243,9 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         return function (items) {
             var cardLayout = false;
             var shape;
-            if (itemType === 'Channel' || viewType === 'movies' || viewType === 'books') {
+            if (itemType === 'Channel' || viewType === 'movies' || viewType === 'books' || viewType === 'tvshows') {
                 shape = getPortraitShape();
-            } else if (viewType === 'music') {
+            } else if (viewType === 'music' || viewType === 'homevideos') {
                 shape = getSquareShape();
             } else {
                 shape = getThumbShape();
@@ -282,7 +282,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
             html += '<h2 class="sectionTitle sectionTitle-cards">';
             html += globalize.translate('LatestFromLibrary', parent.Name);
             html += '</h2>';
-            html += '<i class="material-icons chevron_right"></i>';
+            html += '<span class="material-icons chevron_right"></span>';
             html += '</a>';
         } else {
             html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('LatestFromLibrary', parent.Name) + '</h2>';
@@ -386,9 +386,9 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
             var options = {
                 Limit: limit,
                 Recursive: true,
-                Fields: "PrimaryImageAspectRatio,BasicSyncInfo",
+                Fields: 'PrimaryImageAspectRatio,BasicSyncInfo',
                 ImageTypeLimit: 1,
-                EnableImageTypes: "Primary,Backdrop,Thumb",
+                EnableImageTypes: 'Primary,Backdrop,Thumb',
                 EnableTotalRecordCount: false,
                 MediaTypes: 'Video'
             };
@@ -459,9 +459,9 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
             var options = {
                 Limit: limit,
                 Recursive: true,
-                Fields: "PrimaryImageAspectRatio,BasicSyncInfo",
+                Fields: 'PrimaryImageAspectRatio,BasicSyncInfo',
                 ImageTypeLimit: 1,
-                EnableImageTypes: "Primary,Backdrop,Thumb",
+                EnableImageTypes: 'Primary,Backdrop,Thumb',
                 EnableTotalRecordCount: false,
                 MediaTypes: 'Audio'
             };
@@ -524,9 +524,9 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
                 IsAiring: true,
                 limit: 24,
                 ImageTypeLimit: 1,
-                EnableImageTypes: "Primary,Thumb,Backdrop",
+                EnableImageTypes: 'Primary,Thumb,Backdrop',
                 EnableTotalRecordCount: false,
-                Fields: "ChannelInfo,PrimaryImageAspectRatio"
+                Fields: 'ChannelInfo,PrimaryImageAspectRatio'
             });
         };
     }
@@ -565,9 +565,9 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
             IsAiring: true,
             limit: 1,
             ImageTypeLimit: 1,
-            EnableImageTypes: "Primary,Thumb,Backdrop",
+            EnableImageTypes: 'Primary,Thumb,Backdrop',
             EnableTotalRecordCount: false,
-            Fields: "ChannelInfo,PrimaryImageAspectRatio"
+            Fields: 'ChannelInfo,PrimaryImageAspectRatio'
         }).then(function (result) {
             var html = '';
             if (result.Items.length) {
@@ -630,7 +630,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
                     html += '<h2 class="sectionTitle sectionTitle-cards">';
                     html += globalize.translate('HeaderOnNow');
                     html += '</h2>';
-                    html += '<i class="material-icons chevron_right"></i>';
+                    html += '<span class="material-icons chevron_right"></span>';
                     html += '</a>';
 
                 } else {
@@ -667,10 +667,10 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
             var apiClient = connectionManager.getApiClient(serverId);
             return apiClient.getNextUpEpisodes({
                 Limit: enableScrollX() ? 24 : 15,
-                Fields: "PrimaryImageAspectRatio,SeriesInfo,DateCreated,BasicSyncInfo",
+                Fields: 'PrimaryImageAspectRatio,SeriesInfo,DateCreated,BasicSyncInfo,Path',
                 UserId: apiClient.getCurrentUserId(),
                 ImageTypeLimit: 1,
-                EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
+                EnableImageTypes: 'Primary,Backdrop,Banner,Thumb',
                 EnableTotalRecordCount: false
             });
         };
@@ -705,7 +705,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
             html += '<h2 class="sectionTitle sectionTitle-cards">';
             html += globalize.translate('HeaderNextUp');
             html += '</h2>';
-            html += '<i class="material-icons chevron_right"></i>';
+            html += '<span class="material-icons chevron_right"></span>';
             html += '</a>';
         } else {
             html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('HeaderNextUp') + '</h2>';
@@ -739,7 +739,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
             return apiClient.getLiveTvRecordings({
                 userId: apiClient.getCurrentUserId(),
                 Limit: enableScrollX() ? 12 : 5,
-                Fields: "PrimaryImageAspectRatio,BasicSyncInfo",
+                Fields: 'PrimaryImageAspectRatio,BasicSyncInfo',
                 EnableTotalRecordCount: false,
                 IsLibraryItem: activeRecordingsOnly ? null : false,
                 IsInProgress: activeRecordingsOnly ? true : null

src/components/htmlMediaHelper.js

@@ -2,12 +2,12 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
     'use strict';
 
     function getSavedVolume() {
-        return appSettings.get("volume") || 1;
+        return appSettings.get('volume') || 1;
     }
 
     function saveVolume(value) {
         if (value) {
-            appSettings.set("volume", value);
+            appSettings.set('volume', value);
         }
     }
 
@@ -31,7 +31,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
     }
 
     function enableHlsShakaPlayer(item, mediaSource, mediaType) {
-
+        /* eslint-disable-next-line compat/compat */
         if (!!window.MediaSource && !!MediaSource.isTypeSupported) {
 
             if (canPlayNativeHls()) {
@@ -109,7 +109,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
         var now = Date.now();
 
         if (window.performance && window.performance.now) {
-            now = performance.now();
+            now = performance.now(); // eslint-disable-line compat/compat
         }
 
         if (!recoverDecodingErrorDate || (now - recoverDecodingErrorDate) > 3000) {
@@ -162,7 +162,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
         }
     }
 
-    function seekOnPlaybackStart(instance, element, ticks) {
+    function seekOnPlaybackStart(instance, element, ticks, onMediaReady) {
 
         var seconds = (ticks || 0) / 10000000;
 
@@ -175,9 +175,10 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
             if (element.duration >= seconds) {
                 // media is ready, seek immediately
                 setCurrentTimeIfNeeded(element, seconds);
+                if (onMediaReady) onMediaReady();
             } else {
                 // update video player position when media is ready to be sought
-                var events = ["durationchange", "loadeddata", "play", "loadedmetadata"];
+                var events = ['durationchange', 'loadeddata', 'play', 'loadedmetadata'];
                 var onMediaChange = function(e) {
                     if (element.currentTime === 0 && element.duration >= seconds) {
                         // seek only when video position is exactly zero,
@@ -189,10 +190,11 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
                         events.map(function(name) {
                             element.removeEventListener(name, onMediaChange);
                         });
+                        if (onMediaReady) onMediaReady();
                     }
                 };
                 events.map(function (name) {
-                    element.addEventListener(name, onMediaChange);
+                    return element.addEventListener(name, onMediaChange);
                 });
             }
         }
@@ -371,13 +373,13 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
                                 onErrorInternal(instance, 'network');
                             }
                         } else {
-                            console.debug("fatal network error encountered, try to recover");
+                            console.debug('fatal network error encountered, try to recover');
                             hls.startLoad();
                         }
 
                         break;
                     case Hls.ErrorTypes.MEDIA_ERROR:
-                        console.debug("fatal media error encountered, try to recover");
+                        console.debug('fatal media error encountered, try to recover');
                         var currentReject = reject;
                         reject = null;
                         handleHlsJsMediaError(instance, currentReject);
@@ -407,7 +409,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
 
         elem.src = '';
         elem.innerHTML = '';
-        elem.removeAttribute("src");
+        elem.removeAttribute('src');
 
         destroyHlsPlayer(instance);
         destroyFlvPlayer(instance);

src/components/imageDownloader/imageDownloader.js

@@ -109,15 +109,15 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
         html += '<span style="margin-right: 10px;">';
 
         var startAtDisplay = totalRecordCount ? startIndex + 1 : 0;
-        html += globalize.translate("ListPaging", startAtDisplay, recordsEnd, totalRecordCount);
+        html += globalize.translate('ListPaging', startAtDisplay, recordsEnd, totalRecordCount);
 
         html += '</span>';
 
         if (showControls) {
             html += '<div data-role="controlgroup" data-type="horizontal" style="display:inline-block;">';
 
-            html += '<button is="paper-icon-button-light" title="' + globalize.translate('Previous') + '" class="btnPreviousPage autoSize" ' + (startIndex ? '' : 'disabled') + '><i class="material-icons arrow_back"></i></button>';
-            html += '<button is="paper-icon-button-light" title="' + globalize.translate('Next') + '" class="btnNextPage autoSize" ' + (startIndex + limit >= totalRecordCount ? 'disabled' : '') + '><i class="material-icons arrow_forward"></i></button>';
+            html += '<button is="paper-icon-button-light" title="' + globalize.translate('Previous') + '" class="btnPreviousPage autoSize" ' + (startIndex ? '' : 'disabled') + '><span class="material-icons arrow_back"></span></button>';
+            html += '<button is="paper-icon-button-light" title="' + globalize.translate('Next') + '" class="btnNextPage autoSize" ' + (startIndex + limit >= totalRecordCount ? 'disabled' : '') + '><span class="material-icons arrow_forward"></span></button>';
             html += '</div>';
         }
 
@@ -144,7 +144,7 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
     }
 
     function getDisplayUrl(url, apiClient) {
-        return apiClient.getUrl("Images/Remote", { imageUrl: url });
+        return apiClient.getUrl('Images/Remote', { imageUrl: url });
     }
 
     function getRemoteImageHtml(image, imageType, apiClient) {
@@ -155,21 +155,21 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
 
         var html = '';
 
-        var cssClass = "card scalableCard imageEditorCard";
+        var cssClass = 'card scalableCard imageEditorCard';
         var cardBoxCssClass = 'cardBox visualCardBox';
 
         var shape = 'backdrop';
-        if (imageType === "Backdrop" || imageType === "Art" || imageType === "Thumb" || imageType === "Logo") {
+        if (imageType === 'Backdrop' || imageType === 'Art' || imageType === 'Thumb' || imageType === 'Logo') {
             shape = 'backdrop';
-        } else if (imageType === "Banner") {
+        } else if (imageType === 'Banner') {
             shape = 'banner';
-        } else if (imageType === "Disc") {
+        } else if (imageType === 'Disc') {
             shape = 'square';
         } else {
 
-            if (currentItemType === "Episode") {
+            if (currentItemType === 'Episode') {
                 shape = 'backdrop';
-            } else if (currentItemType === "MusicAlbum" || currentItemType === "MusicArtist") {
+            } else if (currentItemType === 'MusicAlbum' || currentItemType === 'MusicArtist') {
                 shape = 'square';
             } else {
                 shape = 'portrait';
@@ -203,9 +203,9 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
         html += '<div class="cardContent">';
 
         if (layoutManager.tv || !appHost.supports('externallinks')) {
-            html += '<div class="cardImageContainer lazy" data-src="' + getDisplayUrl(image.Url, apiClient) + '" style="background-position:center bottom;"></div>';
+            html += '<div class="cardImageContainer lazy" data-src="' + getDisplayUrl(image.Url, apiClient) + '" style="background-position:center center;background-size:contain;"></div>';
         } else {
-            html += '<a is="emby-linkbutton" target="_blank" href="' + getDisplayUrl(image.Url, apiClient) + '" class="button-link cardImageContainer lazy" data-src="' + getDisplayUrl(image.Url, apiClient) + '" style="background-position:center bottom;"></a>';
+            html += '<a is="emby-linkbutton" target="_blank" href="' + getDisplayUrl(image.Url, apiClient) + '" class="button-link cardImageContainer lazy" data-src="' + getDisplayUrl(image.Url, apiClient) + '" style="background-position:center center;background-size:contain"></a>';
         }
 
         html += '</div>';
@@ -241,18 +241,18 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
 
             html += '<div class="cardText cardText-secondary cardTextCentered">';
 
-            if (image.RatingType === "Likes") {
-                html += image.CommunityRating + (image.CommunityRating === 1 ? " like" : " likes");
+            if (image.RatingType === 'Likes') {
+                html += image.CommunityRating + (image.CommunityRating === 1 ? ' like' : ' likes');
             } else {
 
                 if (image.CommunityRating) {
                     html += image.CommunityRating.toFixed(1);
 
                     if (image.VoteCount) {
-                        html += ' • ' + image.VoteCount + (image.VoteCount === 1 ? " vote" : " votes");
+                        html += ' • ' + image.VoteCount + (image.VoteCount === 1 ? ' vote' : ' votes');
                     }
                 } else {
-                    html += "Unrated";
+                    html += 'Unrated';
                 }
             }
 
@@ -262,7 +262,7 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
         if (enableFooterButtons) {
             html += '<div class="cardText cardTextCentered">';
 
-            html += '<button is="paper-icon-button-light" class="btnDownloadRemoteImage autoSize" raised" title="' + globalize.translate('Download') + '"><i class="material-icons cloud_download"></i></button>';
+            html += '<button is="paper-icon-button-light" class="btnDownloadRemoteImage autoSize" raised" title="' + globalize.translate('Download') + '"><span class="material-icons cloud_download"></span></button>';
             html += '</div>';
         }
 
@@ -320,7 +320,7 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
     function showEditor(itemId, serverId, itemType) {
         loading.show();
 
-        require(['text!./imagedownloader.template.html'], function (template) {
+        require(['text!./imageDownloader.template.html'], function (template) {
 
             var apiClient = connectionManager.getApiClient(serverId);
 
@@ -334,7 +334,7 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
             if (layoutManager.tv) {
                 dialogOptions.size = 'fullscreen';
             } else {
-                dialogOptions.size = 'fullscreen-border';
+                dialogOptions.size = 'small';
             }
 
             var dlg = dialogHelper.createDialog(dialogOptions);

src/components/imageDownloader/imageDownloader.template.html

@@ -1,11 +1,11 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>
     <h3 class="formDialogHeaderTitle">
         ${Search}
     </h3>
 </div>
 
-<div class="formDialogContent">
+<div class="formDialogContent smoothScrollY">
     <div class="dialogContentInner">
         <div class="flex align-items-center justify-content-center flex-wrap-wrap" style="margin: 2em 0;">
 

src/components/imageOptionsEditor/imageOptionsEditor.js

@@ -1,11 +1,11 @@
-define(["globalize", "dom", "dialogHelper", "emby-checkbox", "emby-select", "emby-input"], function (globalize, dom, dialogHelper) {
-    "use strict";
+define(['globalize', 'dom', 'dialogHelper', 'emby-checkbox', 'emby-select', 'emby-input'], function (globalize, dom, dialogHelper) {
+    'use strict';
 
     function getDefaultImageConfig(itemType, type) {
         return {
             Type: type,
             MinWidth: 0,
-            Limit: "Primary" === type ? 1 : 0
+            Limit: 'Primary' === type ? 1 : 0
         };
     }
 
@@ -21,27 +21,27 @@ define(["globalize", "dom", "dialogHelper", "emby-checkbox", "emby-select", "emb
 
     function setVisibilityOfBackdrops(elem, visible) {
         if (visible) {
-            elem.classList.remove("hide");
-            elem.querySelector("input").setAttribute("required", "required");
+            elem.classList.remove('hide');
+            elem.querySelector('input').setAttribute('required', 'required');
         } else {
-            elem.classList.add("hide");
-            elem.querySelector("input").setAttribute("required", "");
-            elem.querySelector("input").removeAttribute("required");
+            elem.classList.add('hide');
+            elem.querySelector('input').setAttribute('required', '');
+            elem.querySelector('input').removeAttribute('required');
         }
     }
 
     function loadValues(context, itemType, options, availableOptions) {
         var supportedImageTypes = availableOptions.SupportedImageTypes || [];
-        setVisibilityOfBackdrops(context.querySelector(".backdropFields"), -1 != supportedImageTypes.indexOf("Backdrop"));
-        setVisibilityOfBackdrops(context.querySelector(".screenshotFields"), -1 != supportedImageTypes.indexOf("Screenshot"));
-        Array.prototype.forEach.call(context.querySelectorAll(".imageType"), function (i) {
-            var imageType = i.getAttribute("data-imagetype");
-            var container = dom.parentWithTag(i, "LABEL");
+        setVisibilityOfBackdrops(context.querySelector('.backdropFields'), -1 != supportedImageTypes.indexOf('Backdrop'));
+        setVisibilityOfBackdrops(context.querySelector('.screenshotFields'), -1 != supportedImageTypes.indexOf('Screenshot'));
+        Array.prototype.forEach.call(context.querySelectorAll('.imageType'), function (i) {
+            var imageType = i.getAttribute('data-imagetype');
+            var container = dom.parentWithTag(i, 'LABEL');
 
             if (-1 == supportedImageTypes.indexOf(imageType)) {
-                container.classList.add("hide");
+                container.classList.add('hide');
             } else {
-                container.classList.remove("hide");
+                container.classList.remove('hide');
             }
 
             if (getImageConfig(options, availableOptions, imageType, itemType).Limit) {
@@ -50,31 +50,31 @@ define(["globalize", "dom", "dialogHelper", "emby-checkbox", "emby-select", "emb
                 i.checked = false;
             }
         });
-        var backdropConfig = getImageConfig(options, availableOptions, "Backdrop", itemType);
-        context.querySelector("#txtMaxBackdrops").value = backdropConfig.Limit;
-        context.querySelector("#txtMinBackdropDownloadWidth").value = backdropConfig.MinWidth;
-        var screenshotConfig = getImageConfig(options, availableOptions, "Screenshot", itemType);
-        context.querySelector("#txtMaxScreenshots").value = screenshotConfig.Limit;
-        context.querySelector("#txtMinScreenshotDownloadWidth").value = screenshotConfig.MinWidth;
+        var backdropConfig = getImageConfig(options, availableOptions, 'Backdrop', itemType);
+        context.querySelector('#txtMaxBackdrops').value = backdropConfig.Limit;
+        context.querySelector('#txtMinBackdropDownloadWidth').value = backdropConfig.MinWidth;
+        var screenshotConfig = getImageConfig(options, availableOptions, 'Screenshot', itemType);
+        context.querySelector('#txtMaxScreenshots').value = screenshotConfig.Limit;
+        context.querySelector('#txtMinScreenshotDownloadWidth').value = screenshotConfig.MinWidth;
     }
 
     function saveValues(context, options) {
-        options.ImageOptions = Array.prototype.map.call(context.querySelectorAll(".imageType:not(.hide)"), function (c) {
+        options.ImageOptions = Array.prototype.map.call(context.querySelectorAll('.imageType:not(.hide)'), function (c) {
             return {
-                Type: c.getAttribute("data-imagetype"),
+                Type: c.getAttribute('data-imagetype'),
                 Limit: c.checked ? 1 : 0,
                 MinWidth: 0
             };
         });
         options.ImageOptions.push({
-            Type: "Backdrop",
-            Limit: context.querySelector("#txtMaxBackdrops").value,
-            MinWidth: context.querySelector("#txtMinBackdropDownloadWidth").value
+            Type: 'Backdrop',
+            Limit: context.querySelector('#txtMaxBackdrops').value,
+            MinWidth: context.querySelector('#txtMinBackdropDownloadWidth').value
         });
         options.ImageOptions.push({
-            Type: "Screenshot",
-            Limit: context.querySelector("#txtMaxScreenshots").value,
-            MinWidth: context.querySelector("#txtMinScreenshotDownloadWidth").value
+            Type: 'Screenshot',
+            Limit: context.querySelector('#txtMaxScreenshots').value,
+            MinWidth: context.querySelector('#txtMinScreenshotDownloadWidth').value
         });
     }
 
@@ -82,23 +82,23 @@ define(["globalize", "dom", "dialogHelper", "emby-checkbox", "emby-select", "emb
         this.show = function (itemType, options, availableOptions) {
             return new Promise(function (resolve, reject) {
                 var xhr = new XMLHttpRequest();
-                xhr.open("GET", "components/imageoptionseditor/imageoptionseditor.template.html", true);
+                xhr.open('GET', 'components/imageOptionsEditor/imageOptionsEditor.template.html', true);
 
                 xhr.onload = function (e) {
                     var template = this.response;
                     var dlg = dialogHelper.createDialog({
-                        size: "medium-tall",
+                        size: 'small',
                         removeOnClose: true,
                         scrollY: false
                     });
-                    dlg.classList.add("formDialog");
+                    dlg.classList.add('formDialog');
                     dlg.innerHTML = globalize.translateDocument(template);
-                    dlg.addEventListener("close", function () {
+                    dlg.addEventListener('close', function () {
                         saveValues(dlg, options);
                     });
                     loadValues(dlg, itemType, options, availableOptions);
                     dialogHelper.open(dlg).then(resolve, resolve);
-                    dlg.querySelector(".btnCancel").addEventListener("click", function () {
+                    dlg.querySelector('.btnCancel').addEventListener('click', function () {
                         dialogHelper.close(dlg);
                     });
                 };

src/components/imageOptionsEditor/imageOptionsEditor.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>
+    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>
     <h3 class="formDialogHeaderTitle">
         ${HeaderImageOptions}
     </h3>

src/components/imageUploader/imageUploader.js

@@ -74,7 +74,7 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
             return false;
         }
 
-        if (!file.type.startsWith("image/")) {
+        if (!file.type.startsWith('image/')) {
             require(['toast'], function (toast) {
                 toast(globalize.translate('MessageImageFileTypeAllowed'));
             });
@@ -87,9 +87,9 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
         var dlg = dom.parentWithClass(this, 'dialog');
 
         var imageType = dlg.querySelector('#selectImageType').value;
-        if (imageType === "None") {
-            require(["toast"], function(toast) {
-                toast(globalize.translate("MessageImageTypeNotSelected"));
+        if (imageType === 'None') {
+            require(['toast'], function(toast) {
+                toast(globalize.translate('MessageImageTypeNotSelected'));
             });
             e.preventDefault();
             return false;
@@ -112,11 +112,11 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
 
         page.querySelector('form').addEventListener('submit', onSubmit);
 
-        page.querySelector('#uploadImage').addEventListener("change", function () {
+        page.querySelector('#uploadImage').addEventListener('change', function () {
             setFiles(page, this.files);
         });
 
-        page.querySelector('.btnBrowse').addEventListener("click", function () {
+        page.querySelector('.btnBrowse').addEventListener('click', function () {
             page.querySelector('#uploadImage').click();
         });
     }
@@ -125,7 +125,7 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
 
         options = options || {};
 
-        require(['text!./imageuploader.template.html'], function (template) {
+        require(['text!./imageUploader.template.html'], function (template) {
 
             currentItemId = options.itemId;
             currentServerId = options.serverId;
@@ -137,7 +137,7 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
             if (layoutManager.tv) {
                 dialogOptions.size = 'fullscreen';
             } else {
-                dialogOptions.size = 'fullscreen-border';
+                dialogOptions.size = 'small';
             }
 
             var dlg = dialogHelper.createDialog(dialogOptions);

src/components/imageUploader/imageUploader.template.html

@@ -1,11 +1,11 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>
     <h3 class="formDialogHeaderTitle">
         ${HeaderUploadImage}
     </h3>
 </div>
 
-<div class="formDialogContent">
+<div class="formDialogContent smoothScrollY">
     <div class="dialogContentInner">
 
         <form class="uploadItemImageForm" style="max-width: 100%;">
@@ -14,7 +14,7 @@
                 <h2 style="margin:0;">${HeaderAddUpdateImage}</h2>
 
                 <button is="emby-button" type="button" class="raised raised-mini btnBrowse" style="margin-left:1.5em;">
-                    <i class="material-icons">folder</i>
+                    <span class="material-icons folder"></span>
                     <span>${Browse}</span>
                 </button>
             </div>

src/components/imageeditor/imageeditor.js

@@ -99,10 +99,10 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
 
         var html = '';
 
-        var cssClass = "card scalableCard imageEditorCard";
+        var cssClass = 'card scalableCard imageEditorCard';
         var cardBoxCssClass = 'cardBox visualCardBox';
 
-        cssClass += " backdropCard backdropCard-scalable";
+        cssClass += ' backdropCard backdropCard-scalable';
 
         if (tagName === 'button') {
             cssClass += ' btnImageCard';
@@ -132,7 +132,7 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
 
         var imageUrl = getImageUrl(currentItem, apiClient, image.ImageType, image.ImageIndex, { maxWidth: imageSize });
 
-        html += '<div class="cardImageContainer" style="background-image:url(\'' + imageUrl + '\');background-position:center bottom;"></div>';
+        html += '<div class="cardImageContainer" style="background-image:url(\'' + imageUrl + '\');background-position:center center;background-size:contain;"></div>';
 
         html += '</div>';
         html += '</div>';
@@ -152,26 +152,26 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
         if (enableFooterButtons) {
             html += '<div class="cardText cardTextCentered">';
 
-            if (image.ImageType === "Backdrop" || image.ImageType === "Screenshot") {
+            if (image.ImageType === 'Backdrop' || image.ImageType === 'Screenshot') {
 
                 if (index > 0) {
-                    html += '<button type="button" is="paper-icon-button-light" class="btnMoveImage autoSize" data-imagetype="' + image.ImageType + '" data-index="' + image.ImageIndex + '" data-newindex="' + (image.ImageIndex - 1) + '" title="' + globalize.translate('MoveLeft') + '"><i class="material-icons chevron_left"></i></button>';
+                    html += '<button type="button" is="paper-icon-button-light" class="btnMoveImage autoSize" data-imagetype="' + image.ImageType + '" data-index="' + image.ImageIndex + '" data-newindex="' + (image.ImageIndex - 1) + '" title="' + globalize.translate('MoveLeft') + '"><span class="material-icons chevron_left"></span></button>';
                 } else {
-                    html += '<button type="button" is="paper-icon-button-light" class="autoSize" disabled title="' + globalize.translate('MoveLeft') + '"><i class="material-icons chevron_left"></i></button>';
+                    html += '<button type="button" is="paper-icon-button-light" class="autoSize" disabled title="' + globalize.translate('MoveLeft') + '"><span class="material-icons chevron_left"></span></button>';
                 }
 
                 if (index < numImages - 1) {
-                    html += '<button type="button" is="paper-icon-button-light" class="btnMoveImage autoSize" data-imagetype="' + image.ImageType + '" data-index="' + image.ImageIndex + '" data-newindex="' + (image.ImageIndex + 1) + '" title="' + globalize.translate('MoveRight') + '"><i class="material-icons chevron_right"></i></button>';
+                    html += '<button type="button" is="paper-icon-button-light" class="btnMoveImage autoSize" data-imagetype="' + image.ImageType + '" data-index="' + image.ImageIndex + '" data-newindex="' + (image.ImageIndex + 1) + '" title="' + globalize.translate('MoveRight') + '"><span class="material-icons chevron_right"></span></button>';
                 } else {
-                    html += '<button type="button" is="paper-icon-button-light" class="autoSize" disabled title="' + globalize.translate('MoveRight') + '"><i class="material-icons chevron_right"></i></button>';
+                    html += '<button type="button" is="paper-icon-button-light" class="autoSize" disabled title="' + globalize.translate('MoveRight') + '"><span class="material-icons chevron_right"></span></button>';
                 }
             } else {
                 if (imageProviders.length) {
-                    html += '<button type="button" is="paper-icon-button-light" data-imagetype="' + image.ImageType + '" class="btnSearchImages autoSize" title="' + globalize.translate('Search') + '"><i class="material-icons">search</i></button>';
+                    html += '<button type="button" is="paper-icon-button-light" data-imagetype="' + image.ImageType + '" class="btnSearchImages autoSize" title="' + globalize.translate('Search') + '"><span class="material-icons search"></span></button>';
                 }
             }
 
-            html += '<button type="button" is="paper-icon-button-light" data-imagetype="' + image.ImageType + '" data-index="' + (image.ImageIndex != null ? image.ImageIndex : "null") + '" class="btnDeleteImage autoSize" title="' + globalize.translate('Delete') + '"><i class="material-icons">delete</i></button>';
+            html += '<button type="button" is="paper-icon-button-light" data-imagetype="' + image.ImageType + '" data-index="' + (image.ImageIndex != null ? image.ImageIndex : 'null') + '" class="btnDeleteImage autoSize" title="' + globalize.translate('Delete') + '"><span class="material-icons delete"></span></button>';
             html += '</div>';
         }
 
@@ -251,7 +251,7 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
     function renderStandardImages(page, apiClient, item, imageInfos, imageProviders) {
 
         var images = imageInfos.filter(function (i) {
-            return i.ImageType !== "Screenshot" && i.ImageType !== "Backdrop" && i.ImageType !== "Chapter";
+            return i.ImageType !== 'Screenshot' && i.ImageType !== 'Backdrop' && i.ImageType !== 'Chapter';
         });
 
         renderImages(page, item, apiClient, images, imageProviders, page.querySelector('#images'));
@@ -260,7 +260,7 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
     function renderBackdrops(page, apiClient, item, imageInfos, imageProviders) {
 
         var images = imageInfos.filter(function (i) {
-            return i.ImageType === "Backdrop";
+            return i.ImageType === 'Backdrop';
 
         }).sort(function (a, b) {
             return a.ImageIndex - b.ImageIndex;
@@ -277,7 +277,7 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
     function renderScreenshots(page, apiClient, item, imageInfos, imageProviders) {
 
         var images = imageInfos.filter(function (i) {
-            return i.ImageType === "Screenshot";
+            return i.ImageType === 'Screenshot';
 
         }).sort(function (a, b) {
             return a.ImageIndex - b.ImageIndex;
@@ -425,7 +425,7 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
         addListeners(context, 'btnDeleteImage', 'click', function () {
             var type = this.getAttribute('data-imagetype');
             var index = this.getAttribute('data-index');
-            index = index === "null" ? null : parseInt(index);
+            index = index === 'null' ? null : parseInt(index);
             var apiClient = connectionManager.getApiClient(currentItem.ServerId);
             deleteImage(context, currentItem.Id, type, index, apiClient, true);
         });
@@ -457,7 +457,7 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
                 if (layoutManager.tv) {
                     dialogOptions.size = 'fullscreen';
                 } else {
-                    dialogOptions.size = 'fullscreen-border';
+                    dialogOptions.size = 'small';
                 }
 
                 var dlg = dialogHelper.createDialog(dialogOptions);

src/components/imageeditor/imageeditor.template.html

@@ -1,21 +1,21 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>
     <h3 class="formDialogHeaderTitle">
         ${HeaderEditImages}
     </h3>
 </div>
 
-<div class="formDialogContent">
+<div class="formDialogContent smoothScrollY">
     <div class="dialogContentInner">
 
         <div id="imagesContainer">
             <div class="imageEditor-buttons first-imageEditor-buttons">
                 <h2 style="margin:0;">${Images}</h2>
                 <button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;">
-                    <i class="material-icons">search</i>
+                    <span class="material-icons search"></span>
                 </button>
                 <button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-left: .5em;">
-                    <i class="material-icons">add</i>
+                    <span class="material-icons add"></span>
                 </button>
             </div>
             <div id="images" class="itemsContainer vertical-wrap">
@@ -27,10 +27,10 @@
             <div class="imageEditor-buttons">
                 <h2 style="margin:0;">${Backdrops}</h2>
                 <button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;" data-imagetype="Backdrop">
-                    <i class="material-icons">search</i>
+                    <span class="material-icons search"></span>
                 </button>
                 <button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-left: .5em;" data-imagetype="Backdrop">
-                    <i class="material-icons">add</i>
+                    <span class="material-icons add"></span>
                 </button>
             </div>
             <div id="backdrops" class="itemsContainer vertical-wrap">
@@ -42,10 +42,10 @@
             <div class="imageEditor-buttons">
                 <h2 style="margin: 0;">${Screenshots}</h2>
                 <button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;" data-imagetype="Screenshot">
-                    <i class="material-icons">search</i>
+                    <span class="material-icons search"></span>
                 </button>
                 <button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-left: .5em;" data-imagetype="Screenshot">
-                    <i class="material-icons">add</i>
+                    <span class="material-icons add"></span>
                 </button>
             </div>
             <div id="screenshots" class="itemsContainer vertical-wrap">

src/components/images/imageFetcher.js

@@ -1,38 +0,0 @@
-define(['dom'], function (dom) {
-    'use strict';
-
-    function loadImage(elem, url) {
-
-        if (!elem) {
-            return Promise.reject('elem cannot be null');
-        }
-
-        if (elem.tagName !== "IMG") {
-
-            elem.style.backgroundImage = "url('" + url + "')";
-            return Promise.resolve();
-
-            //return loadImageIntoImg(document.createElement('img'), url).then(function () {
-            //    elem.style.backgroundImage = "url('" + url + "')";
-            //    return Promise.resolve();
-            //});
-
-        }
-        return loadImageIntoImg(elem, url);
-    }
-
-    function loadImageIntoImg(elem, url) {
-        return new Promise(function (resolve, reject) {
-
-            dom.addEventListener(elem, 'load', resolve, {
-                once: true
-            });
-            elem.setAttribute("src", url);
-        });
-    }
-
-    return {
-        loadImage: loadImage
-    };
-
-});

src/components/images/imageLoader.js

@@ -1,54 +1,150 @@
-define(['lazyLoader', 'imageFetcher', 'layoutManager', 'browser', 'appSettings', 'userSettings', 'require', 'css!./style'], function (lazyLoader, imageFetcher, layoutManager, browser, appSettings, userSettings, require) {
-    'use strict';
-
-    var requestIdleCallback = window.requestIdleCallback || function (fn) {
-        fn();
-    };
-
-    var self = {};
-
-    function fillImage(elem, source, enableEffects) {
-
-        if (!elem) {
-            throw new Error('elem cannot be null');
-        }
-
-        if (!source) {
-            source = elem.getAttribute('data-src');
-        }
+import * as lazyLoader from 'lazyLoader';
+import * as userSettings from 'userSettings';
+import * as blurhash from 'blurhash';
+import 'css!./style';
+/* eslint-disable indent */
 
+    export function lazyImage(elem, source = elem.getAttribute('data-src')) {
         if (!source) {
             return;
         }
 
-        fillImageElement(elem, source, enableEffects);
+        fillImageElement(elem, source);
     }
 
-    function fillImageElement(elem, source, enableEffects) {
-        imageFetcher.loadImage(elem, source).then(function () {
+    async function itemBlurhashing(target, blurhashstr) {
+        if (blurhash.isBlurhashValid(blurhashstr)) {
+            // Although the default values recommended by Blurhash developers is 32x32, a size of 18x18 seems to be the sweet spot for us,
+            // improving the performance and reducing the memory usage, while retaining almost full blur quality.
+            // Lower values had more visible pixelation
+            let width = 18;
+            let height = 18;
+            let pixels;
+            try {
+                pixels = blurhash.decode(blurhashstr, width, height);
+            } catch (err) {
+                console.error('Blurhash decode error: ', err);
+                target.classList.add('non-blurhashable');
+                return;
+            }
+            let canvas = document.createElement('canvas');
+            canvas.width = width;
+            canvas.height = height;
+            let ctx = canvas.getContext('2d');
+            let imgData = ctx.createImageData(width, height);
 
-            if (enableEffects !== false) {
-                fadeIn(elem);
+            imgData.data.set(pixels);
+            ctx.putImageData(imgData, 0, 0);
+
+            let child = target.appendChild(canvas);
+            child.classList.add('blurhash-canvas');
+            child.style.opacity = 1;
+            if (userSettings.enableFastFadein()) {
+                child.classList.add('lazy-blurhash-fadein-fast');
+            } else {
+                child.classList.add('lazy-blurhash-fadein');
             }
 
-            elem.removeAttribute("data-src");
-        });
-    }
-
-    function fadeIn(elem) {
-        if (userSettings.enableFastFadein()) {
-            elem.classList.add('lazy-image-fadein-fast');
-        } else {
-            elem.classList.add('lazy-image-fadein');
+            target.classList.add('blurhashed');
+            target.removeAttribute('data-blurhash');
         }
     }
 
-    function lazyChildren(elem) {
+    function switchCanvas(elem) {
+        let child = elem.getElementsByClassName('blurhash-canvas')[0];
+        if (child) {
+            child.style.opacity = elem.getAttribute('data-src') ? 1 : 0;
+        }
+    }
 
+    export function fillImage(entry) {
+        if (!entry) {
+            throw new Error('entry cannot be null');
+        }
+        let target = entry.target;
+        var source = undefined;
+
+        if (target) {
+            source = target.getAttribute('data-src');
+            var blurhashstr = target.getAttribute('data-blurhash');
+        } else {
+            source = entry;
+        }
+
+        if (userSettings.enableBlurhash()) {
+            if (!target.classList.contains('blurhashed', 'non-blurhashable') && blurhashstr) {
+                itemBlurhashing(target, blurhashstr);
+            } else if (!blurhashstr && !target.classList.contains('blurhashed')) {
+                target.classList.add('non-blurhashable');
+            }
+        }
+
+        if (entry.intersectionRatio > 0) {
+            if (source) fillImageElement(target, source);
+        } else if (!source) {
+            emptyImageElement(target);
+        }
+    }
+
+    function fillImageElement(elem, url) {
+        if (url === undefined) {
+            throw new TypeError('url cannot be undefined');
+        }
+
+        let preloaderImg = new Image();
+        preloaderImg.src = url;
+
+        // This is necessary here, so changing blurhash settings without reloading the page works
+        if (!userSettings.enableBlurhash() || elem.classList.contains('non-blurhashable')) {
+            elem.classList.add('lazy-hidden');
+        }
+
+        preloaderImg.addEventListener('load', () => {
+            if (elem.tagName !== 'IMG') {
+                elem.style.backgroundImage = "url('" + url + "')";
+            } else {
+                elem.setAttribute('src', url);
+            }
+            elem.removeAttribute('data-src');
+
+            if (elem.classList.contains('non-blurhashable') || !userSettings.enableBlurhash()) {
+                elem.classList.remove('lazy-hidden');
+                if (userSettings.enableFastFadein()) {
+                    elem.classList.add('lazy-image-fadein-fast');
+                } else {
+                    elem.classList.add('lazy-image-fadein');
+                }
+            } else {
+                switchCanvas(elem);
+            }
+        });
+    }
+
+    function emptyImageElement(elem) {
+        var url;
+
+        if (elem.tagName !== 'IMG') {
+            url = elem.style.backgroundImage.slice(4, -1).replace(/"/g, '');
+            elem.style.backgroundImage = 'none';
+        } else {
+            url = elem.getAttribute('src');
+            elem.setAttribute('src', '');
+        }
+        elem.setAttribute('data-src', url);
+
+        if (elem.classList.contains('non-blurhashable') || !userSettings.enableBlurhash()) {
+            elem.classList.remove('lazy-image-fadein-fast', 'lazy-image-fadein');
+            elem.classList.add('lazy-hidden');
+        } else {
+            switchCanvas(elem);
+        }
+    }
+
+    export function lazyChildren(elem) {
         lazyLoader.lazyChildren(elem, fillImage);
     }
 
-    function getPrimaryImageAspectRatio(items) {
+    export function getPrimaryImageAspectRatio(items) {
 
         var values = [];
 
@@ -108,7 +204,7 @@ define(['lazyLoader', 'imageFetcher', 'layoutManager', 'browser', 'appSettings',
         return result;
     }
 
-    function fillImages(elems) {
+    export function fillImages(elems) {
 
         for (var i = 0, length = elems.length; i < length; i++) {
             var elem = elems[0];
@@ -116,10 +212,11 @@ define(['lazyLoader', 'imageFetcher', 'layoutManager', 'browser', 'appSettings',
         }
     }
 
-    self.fillImages = fillImages;
-    self.lazyImage = fillImage;
-    self.lazyChildren = lazyChildren;
-    self.getPrimaryImageAspectRatio = getPrimaryImageAspectRatio;
-
-    return self;
-});
+/* eslint-enable indent */
+export default {
+    fillImages: fillImages,
+    fillImage: fillImage,
+    lazyImage: lazyImage,
+    lazyChildren: lazyChildren,
+    getPrimaryImageAspectRatio: getPrimaryImageAspectRatio
+};

src/components/images/style.css

@@ -1,44 +1,32 @@
 .lazy-image-fadein {
-    opacity: 0;
-    animation: lazy-image-fadein 330ms ease-in normal both;
-    -webkit-animation-duration: 0.8s;
-    -moz-animation-duration: 0.8s;
-    -o-animation-duration: 0.8s;
-    animation-duration: 0.8s;
-    -webkit-animation-name: popInAnimation;
-    -moz-animation-name: popInAnimation;
-    -o-animation-name: popInAnimation;
-    animation-name: popInAnimation;
-    -webkit-animation-fill-mode: forwards;
-    -moz-animation-fill-mode: forwards;
-    -o-animation-fill-mode: forwards;
-    animation-fill-mode: forwards;
-    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
-    -moz-animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
-    -o-animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
-    animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
+    opacity: 1;
+    transition: opacity 0.7s;
 }
 
 .lazy-image-fadein-fast {
-    animation: lazy-image-fadein 160ms ease-in normal both;
+    opacity: 1;
+    transition: opacity 0.2s;
 }
 
-@keyframes lazy-image-fadein {
-    from {
-        opacity: 0;
-    }
-
-    to {
-        opacity: 1;
-    }
+.lazy-hidden {
+    opacity: 0;
 }
 
-@keyframes popInAnimation {
-    0% {
-        opacity: 0;
-    }
-
-    100% {
-        opacity: 1;
-    }
+.lazy-blurhash-fadein-fast {
+    transition: opacity 0.2s;
+}
+
+.lazy-blurhash-fadein {
+    transition: opacity 0.7s;
+}
+
+.blurhash-canvas {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
 }

src/components/indicators/indicators.js

@@ -1,237 +1,183 @@
-define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], function (datetime, itemHelper) {
-    'use strict';
+import datetime from 'datetime';
+import itemHelper from 'itemHelper';
+import 'emby-progressbar';
+import 'css!./indicators.css';
+import 'material-icons';
 
-    function enableProgressIndicator(item) {
-        if (item.MediaType === 'Video') {
-            if (item.Type !== 'TvChannel') {
-                return true;
-            }
-        }
-
-        if (item.Type === 'AudioBook' || item.Type === 'AudioPodcast') {
-            return true;
-        }
-
-        return false;
+export function enableProgressIndicator(item) {
+    if (item.MediaType === 'Video' && item.Type !== 'TvChannel') {
+        return true;
     }
 
-    function getProgressHtml(pct, options) {
-        var containerClass = 'itemProgressBar';
-        if (options) {
-            if (options.containerClass) {
-                containerClass += ' ' + options.containerClass;
-            }
-        }
-
-        return '<div class="' + containerClass + '"><div class="itemProgressBarForeground" style="width:' + pct + '%;"></div></div>';
+    if (item.Type === 'AudioBook' || item.Type === 'AudioPodcast') {
+        return true;
     }
 
-    function getAutoTimeProgressHtml(pct, options, isRecording, start, end) {
-        var containerClass = 'itemProgressBar';
-        if (options) {
-            if (options.containerClass) {
-                containerClass += ' ' + options.containerClass;
-            }
-        }
+    return false;
+}
 
-        var foregroundClass = 'itemProgressBarForeground';
-        if (isRecording) {
-            foregroundClass += ' itemProgressBarForeground-recording';
-        }
-
-        return '<div is="emby-progressbar" data-automode="time" data-starttime="' + start + '" data-endtime="' + end + '" class="' + containerClass + '"><div class="' + foregroundClass + '" style="width:' + pct + '%;"></div></div>';
+export function getProgressHtml(pct, options) {
+    let containerClass = 'itemProgressBar';
+    if (options && options.containerClass) {
+        containerClass += ' ' + options.containerClass;
     }
 
-    function getProgressBarHtml(item, options) {
-        var pct;
-        if (enableProgressIndicator(item) && item.Type !== "Recording") {
-            var userData = options ? (options.userData || item.UserData) : item.UserData;
-            if (userData) {
-                pct = userData.PlayedPercentage;
-                if (pct && pct < 100) {
-                    return getProgressHtml(pct, options);
-                }
+    return '<div class="' + containerClass + '"><div class="itemProgressBarForeground" style="width:' + pct + '%;"></div></div>';
+}
+
+function getAutoTimeProgressHtml(pct, options, isRecording, start, end) {
+    let containerClass = 'itemProgressBar';
+    if (options && options.containerClass) {
+        containerClass += ' ' + options.containerClass;
+    }
+
+    let foregroundClass = 'itemProgressBarForeground';
+    if (isRecording) {
+        foregroundClass += ' itemProgressBarForeground-recording';
+    }
+
+    return '<div is="emby-progressbar" data-automode="time" data-starttime="' + start + '" data-endtime="' + end + '" class="' + containerClass + '"><div class="' + foregroundClass + '" style="width:' + pct + '%;"></div></div>';
+}
+
+export function getProgressBarHtml(item, options) {
+    let pct;
+    if (enableProgressIndicator(item) && item.Type !== 'Recording') {
+        const userData = options && options.userData ? options.userData : item.UserData;
+
+        if (userData) {
+            pct = userData.PlayedPercentage;
+            if (pct && pct < 100) {
+                return getProgressHtml(pct, options);
             }
         }
+    }
 
-        if ((item.Type === 'Program' || item.Type === 'Timer' || item.Type === 'Recording') && item.StartDate && item.EndDate) {
-            var startDate = 0;
-            var endDate = 1;
+    if ((item.Type === 'Program' || item.Type === 'Timer' || item.Type === 'Recording') && item.StartDate && item.EndDate) {
+        let startDate = 0;
+        let endDate = 1;
 
+        try {
+            startDate = datetime.parseISO8601Date(item.StartDate).getTime();
+            endDate = datetime.parseISO8601Date(item.EndDate).getTime();
+        } catch (err) {
+            console.error(err);
+        }
+
+        const now = new Date().getTime();
+        const total = endDate - startDate;
+        pct = 100 * ((now - startDate) / total);
+
+        if (pct > 0 && pct < 100) {
+            const isRecording = item.Type === 'Timer' || item.Type === 'Recording' || item.TimerId;
+            return getAutoTimeProgressHtml(pct, options, isRecording, startDate, endDate);
+        }
+    }
+
+    return '';
+}
+
+export function enablePlayedIndicator(item) {
+    return itemHelper.canMarkPlayed(item);
+}
+
+export function getPlayedIndicatorHtml(item) {
+    if (enablePlayedIndicator(item)) {
+        let userData = item.UserData || {};
+        if (userData.UnplayedItemCount) {
+            return '<div class="countIndicator indicator">' + userData.UnplayedItemCount + '</div>';
+        }
+
+        if (userData.PlayedPercentage && userData.PlayedPercentage >= 100 || (userData.Played)) {
+            return '<div class="playedIndicator indicator"><span class="material-icons indicatorIcon check"></span></div>';
+        }
+    }
+
+    return '';
+}
+
+export function getChildCountIndicatorHtml(item, options) {
+    const minCount = options && options.minCount ? options.minCount : 0;
+
+    if (item.ChildCount && item.ChildCount > minCount) {
+        return '<div class="countIndicator indicator">' + item.ChildCount + '</div>';
+    }
+
+    return '';
+}
+
+export function getTimerIndicator(item) {
+    let status;
+
+    if (item.Type === 'SeriesTimer') {
+        return '<span class="material-icons timerIndicator indicatorIcon fiber_smart_record"></span>';
+    } else if (item.TimerId || item.SeriesTimerId) {
+        status = item.Status || 'Cancelled';
+    } else if (item.Type === 'Timer') {
+        status = item.Status;
+    } else {
+        return '';
+    }
+
+    if (item.SeriesTimerId) {
+        if (status !== 'Cancelled') {
+            return '<span class="material-icons timerIndicator indicatorIcon fiber_smart_record"></span>';
+        }
+
+        return '<span class="material-icons timerIndicator timerIndicator-inactive indicatorIcon fiber_smart_record"></span>';
+    }
+
+    return '<span class="material-icons timerIndicator indicatorIcon fiber_manual_record"></span>';
+}
+
+export function getSyncIndicator(item) {
+    if (item.SyncPercent === 100) {
+        return '<div class="syncIndicator indicator fullSyncIndicator"><span class="material-icons indicatorIcon file_download"></span></div>';
+    } else if (item.SyncPercent != null) {
+        return '<div class="syncIndicator indicator emptySyncIndicator"><span class="material-icons indicatorIcon file_download"></span></div>';
+    }
+
+    return '';
+}
+
+export function getTypeIndicator(item) {
+    const iconT = {
+        'Video' : 'videocam',
+        'Folder' : 'folder',
+        'PhotoAlbum' : 'photo_album',
+        'Photo' : 'photo'
+    };
+
+    const icon = iconT[item.Type];
+    return icon ? '<div class="indicator videoIndicator"><span class="material-icons indicatorIcon ' + icon + '"></span></div>' : '';
+}
+
+export function getMissingIndicator(item) {
+    if (item.Type === 'Episode' && item.LocationType === 'Virtual') {
+        if (item.PremiereDate) {
             try {
-                startDate = datetime.parseISO8601Date(item.StartDate).getTime();
-                endDate = datetime.parseISO8601Date(item.EndDate).getTime();
+                const premiereDate = datetime.parseISO8601Date(item.PremiereDate).getTime();
+                if (premiereDate > new Date().getTime()) {
+                    return '<div class="unairedIndicator">Unaired</div>';
+                }
             } catch (err) {
                 console.error(err);
             }
-
-            var now = new Date().getTime();
-            var total = endDate - startDate;
-            pct = 100 * ((now - startDate) / total);
-
-            if (pct > 0 && pct < 100) {
-                var isRecording = item.Type === 'Timer' || item.Type === 'Recording' || item.TimerId;
-                return getAutoTimeProgressHtml(pct, options, isRecording, startDate, endDate);
-            }
         }
-
-        return '';
+        return '<div class="missingIndicator">Missing</div>';
     }
 
-    function enablePlayedIndicator(item) {
-        return itemHelper.canMarkPlayed(item);
-    }
+    return '';
+}
 
-    function getPlayedIndicator(item) {
-        if (enablePlayedIndicator(item)) {
-            var userData = item.UserData || {};
-            if (userData.UnplayedItemCount) {
-                return '<div class="countIndicator indicator">' + userData.UnplayedItemCount + '</div>';
-            }
-
-            if (userData.PlayedPercentage && userData.PlayedPercentage >= 100 || (userData.Played)) {
-                return '<div class="playedIndicator indicator"><i class="material-icons indicatorIcon">check</i></div>';
-            }
-        }
-
-        return '';
-    }
-
-    function getCountIndicatorHtml(count) {
-        return '<div class="countIndicator indicator">' + count + '</div>';
-    }
-
-    function getChildCountIndicatorHtml(item, options) {
-        var minCount = 0;
-        if (options) {
-            minCount = options.minCount || minCount;
-        }
-
-        if (item.ChildCount && item.ChildCount > minCount) {
-            return getCountIndicatorHtml(item.ChildCount);
-        }
-
-        return '';
-    }
-
-    function getTimerIndicator(item) {
-        var status;
-
-        if (item.Type === 'SeriesTimer') {
-            return '<i class="material-icons timerIndicator indicatorIcon fiber_smart_record"></i>';
-        } else if (item.TimerId || item.SeriesTimerId) {
-            status = item.Status || 'Cancelled';
-        } else if (item.Type === 'Timer') {
-            status = item.Status;
-        } else {
-            return '';
-        }
-
-        if (item.SeriesTimerId) {
-            if (status !== 'Cancelled') {
-                return '<i class="material-icons timerIndicator indicatorIcon fiber_smart_record"></i>';
-            }
-
-            return '<i class="material-icons timerIndicator timerIndicator-inactive indicatorIcon fiber_smart_record"></i>';
-        }
-
-        return '<i class="material-icons timerIndicator indicatorIcon fiber_manual_record"></i>';
-    }
-
-    function getSyncIndicator(item) {
-        if (item.SyncPercent === 100) {
-            return '<div class="syncIndicator indicator fullSyncIndicator"><i class="material-icons indicatorIcon file_download"></i></div>';
-        } else if (item.SyncPercent != null) {
-            return '<div class="syncIndicator indicator emptySyncIndicator"><i class="material-icons indicatorIcon file_download"></i></div>';
-        }
-
-        return '';
-    }
-
-    function getTypeIndicator(item) {
-        if (item.Type === 'Video') {
-            return '<div class="indicator videoIndicator"><i class="material-icons indicatorIcon">videocam</i></div>';
-        }
-        if (item.Type === 'Folder') {
-            return '<div class="indicator videoIndicator"><i class="material-icons indicatorIcon">folder</i></div>';
-        }
-        if (item.Type === 'PhotoAlbum') {
-            return '<div class="indicator videoIndicator"><i class="material-icons indicatorIcon photo_album"></i></div>';
-        }
-        if (item.Type === 'Photo') {
-            return '<div class="indicator videoIndicator"><i class="material-icons indicatorIcon">photo</i></div>';
-        }
-
-        return '';
-    }
-
-    function getMissingIndicator(item) {
-        if (item.Type === 'Episode' && item.LocationType === 'Virtual') {
-            if (item.PremiereDate) {
-                try {
-                    var premiereDate = datetime.parseISO8601Date(item.PremiereDate).getTime();
-                    if (premiereDate > new Date().getTime()) {
-                        return '<div class="unairedIndicator">Unaired</div>';
-                    }
-                } catch (err) {
-                    console.error(err);
-                }
-            }
-            return '<div class="missingIndicator">Missing</div>';
-        }
-
-        return '';
-    }
-
-    var ProgressBarPrototype = Object.create(HTMLDivElement.prototype);
-
-    function onAutoTimeProgress() {
-        var start = parseInt(this.getAttribute('data-starttime'));
-        var end = parseInt(this.getAttribute('data-endtime'));
-
-        var now = new Date().getTime();
-        var total = end - start;
-        var pct = 100 * ((now - start) / total);
-
-        pct = Math.min(100, pct);
-        pct = Math.max(0, pct);
-
-        var itemProgressBarForeground = this.querySelector('.itemProgressBarForeground');
-        itemProgressBarForeground.style.width = pct + '%';
-    }
-
-    ProgressBarPrototype.attachedCallback = function () {
-        if (this.timeInterval) {
-            clearInterval(this.timeInterval);
-        }
-
-        if (this.getAttribute('data-automode') === 'time') {
-            this.timeInterval = setInterval(onAutoTimeProgress.bind(this), 60000);
-        }
-    };
-
-    ProgressBarPrototype.detachedCallback = function () {
-        if (this.timeInterval) {
-            clearInterval(this.timeInterval);
-            this.timeInterval = null;
-        }
-    };
-
-    document.registerElement('emby-progressbar', {
-        prototype: ProgressBarPrototype,
-        extends: 'div'
-    });
-
-    return {
-        getProgressHtml: getProgressHtml,
-        getProgressBarHtml: getProgressBarHtml,
-        getPlayedIndicatorHtml: getPlayedIndicator,
-        getChildCountIndicatorHtml: getChildCountIndicatorHtml,
-        enableProgressIndicator: enableProgressIndicator,
-        getTimerIndicator: getTimerIndicator,
-        enablePlayedIndicator: enablePlayedIndicator,
-        getSyncIndicator: getSyncIndicator,
-        getTypeIndicator: getTypeIndicator,
-        getMissingIndicator: getMissingIndicator
-    };
-});
+export default {
+    getProgressHtml: getProgressHtml,
+    getProgressBarHtml: getProgressBarHtml,
+    getPlayedIndicatorHtml: getPlayedIndicatorHtml,
+    getChildCountIndicatorHtml: getChildCountIndicatorHtml,
+    enableProgressIndicator: enableProgressIndicator,
+    getTimerIndicator: getTimerIndicator,
+    enablePlayedIndicator: enablePlayedIndicator,
+    getSyncIndicator: getSyncIndicator,
+    getTypeIndicator: getTypeIndicator,
+    getMissingIndicator: getMissingIndicator
+};

src/components/itemContextMenu.js

@@ -1,5 +1,5 @@
-define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter", "playbackManager", "loading", "appSettings", "browser", "actionsheet"], function (appHost, globalize, connectionManager, itemHelper, appRouter, playbackManager, loading, appSettings, browser, actionsheet) {
-    "use strict";
+define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', 'playbackManager', 'loading', 'appSettings', 'browser', 'actionsheet'], function (appHost, globalize, connectionManager, itemHelper, appRouter, playbackManager, loading, appSettings, browser, actionsheet) {
+    'use strict';
 
     function getCommands(options) {
         var item = options.item;
@@ -10,20 +10,20 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
 
         var commands = [];
 
-        if (canPlay && item.MediaType !== "Photo") {
+        if (canPlay && item.MediaType !== 'Photo') {
             if (options.play !== false) {
                 commands.push({
-                    name: globalize.translate("Play"),
-                    id: "resume",
-                    icon: ""
+                    name: globalize.translate('Play'),
+                    id: 'resume',
+                    icon: 'play_arrow'
                 });
             }
 
-            if (options.playAllFromHere && item.Type !== "Program" && item.Type !== "TvChannel") {
+            if (options.playAllFromHere && item.Type !== 'Program' && item.Type !== 'TvChannel') {
                 commands.push({
-                    name: globalize.translate("PlayAllFromHere"),
-                    id: "playallfromhere",
-                    icon: ""
+                    name: globalize.translate('PlayAllFromHere'),
+                    id: 'playallfromhere',
+                    icon: 'play_arrow'
                 });
             }
         }
@@ -31,17 +31,17 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
         if (playbackManager.canQueue(item)) {
             if (options.queue !== false) {
                 commands.push({
-                    name: globalize.translate("AddToPlayQueue"),
-                    id: "queue",
-                    icon: "playlist_add"
+                    name: globalize.translate('AddToPlayQueue'),
+                    id: 'queue',
+                    icon: 'playlist_add'
                 });
             }
 
             if (options.queue !== false) {
                 commands.push({
-                    name: globalize.translate("PlayNext"),
-                    id: "queuenext",
-                    icon: "playlist_add"
+                    name: globalize.translate('PlayNext'),
+                    id: 'queuenext',
+                    icon: 'playlist_add'
                 });
             }
 
@@ -53,24 +53,24 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
             //}
         }
 
-        if (item.IsFolder || item.Type === "MusicArtist" || item.Type === "MusicGenre") {
-            if (item.CollectionType !== "livetv") {
+        if (item.IsFolder || item.Type === 'MusicArtist' || item.Type === 'MusicGenre') {
+            if (item.CollectionType !== 'livetv') {
                 if (options.shuffle !== false) {
                     commands.push({
-                        name: globalize.translate("Shuffle"),
-                        id: "shuffle",
-                        icon: "shuffle"
+                        name: globalize.translate('Shuffle'),
+                        id: 'shuffle',
+                        icon: 'shuffle'
                     });
                 }
             }
         }
 
-        if (item.MediaType === "Audio" || item.Type === "MusicAlbum" || item.Type === "MusicArtist" || item.Type === "MusicGenre") {
+        if (item.MediaType === 'Audio' || item.Type === 'MusicAlbum' || item.Type === 'MusicArtist' || item.Type === 'MusicGenre') {
             if (options.instantMix !== false && !itemHelper.isLocalItem(item)) {
                 commands.push({
-                    name: globalize.translate("InstantMix"),
-                    id: "instantmix",
-                    icon: "explore"
+                    name: globalize.translate('InstantMix'),
+                    id: 'instantmix',
+                    icon: 'explore'
                 });
             }
         }
@@ -84,74 +84,74 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
         if (!restrictOptions) {
             if (itemHelper.supportsAddingToCollection(item)) {
                 commands.push({
-                    name: globalize.translate("AddToCollection"),
-                    id: "addtocollection",
-                    icon: "playlist_add"
+                    name: globalize.translate('AddToCollection'),
+                    id: 'addtocollection',
+                    icon: 'playlist_add'
                 });
             }
 
-            if (itemHelper.supportsAddingToPlaylist(item)) {
+            if (itemHelper.supportsAddingToPlaylist(item) && options.playlist !== false) {
                 commands.push({
-                    name: globalize.translate("AddToPlaylist"),
-                    id: "addtoplaylist",
-                    icon: "playlist_add"
+                    name: globalize.translate('AddToPlaylist'),
+                    id: 'addtoplaylist',
+                    icon: 'playlist_add'
                 });
             }
         }
 
-        if ((item.Type === "Timer") && user.Policy.EnableLiveTvManagement && options.cancelTimer !== false) {
+        if ((item.Type === 'Timer') && user.Policy.EnableLiveTvManagement && options.cancelTimer !== false) {
             commands.push({
-                name: globalize.translate("CancelRecording"),
-                id: "canceltimer",
-                icon: "cancel"
+                name: globalize.translate('CancelRecording'),
+                id: 'canceltimer',
+                icon: 'cancel'
             });
         }
 
-        if ((item.Type === "Recording" && item.Status === "InProgress") && user.Policy.EnableLiveTvManagement && options.cancelTimer !== false) {
+        if ((item.Type === 'Recording' && item.Status === 'InProgress') && user.Policy.EnableLiveTvManagement && options.cancelTimer !== false) {
             commands.push({
-                name: globalize.translate("CancelRecording"),
-                id: "canceltimer",
-                icon: "cancel"
+                name: globalize.translate('CancelRecording'),
+                id: 'canceltimer',
+                icon: 'cancel'
             });
         }
 
-        if ((item.Type === "SeriesTimer") && user.Policy.EnableLiveTvManagement && options.cancelTimer !== false) {
+        if ((item.Type === 'SeriesTimer') && user.Policy.EnableLiveTvManagement && options.cancelTimer !== false) {
             commands.push({
-                name: globalize.translate("CancelSeries"),
-                id: "cancelseriestimer",
-                icon: "cancel"
+                name: globalize.translate('CancelSeries'),
+                id: 'cancelseriestimer',
+                icon: 'cancel'
             });
         }
 
         if (item.CanDelete && options.deleteItem !== false) {
 
-            if (item.Type === "Playlist" || item.Type === "BoxSet") {
+            if (item.Type === 'Playlist' || item.Type === 'BoxSet') {
                 commands.push({
-                    name: globalize.translate("Delete"),
-                    id: "delete",
-                    icon: "delete"
+                    name: globalize.translate('Delete'),
+                    id: 'delete',
+                    icon: 'delete'
                 });
             } else {
                 commands.push({
-                    name: globalize.translate("DeleteMedia"),
-                    id: "delete",
-                    icon: "delete"
+                    name: globalize.translate('DeleteMedia'),
+                    id: 'delete',
+                    icon: 'delete'
                 });
             }
         }
 
         // Books are promoted to major download Button and therefor excluded in the context menu
-        if ((item.CanDownload && appHost.supports("filedownload")) && item.Type !== "Book") {
+        if ((item.CanDownload && appHost.supports('filedownload')) && item.Type !== 'Book') {
             commands.push({
-                name: globalize.translate("Download"),
-                id: "download",
-                icon: "file_download"
+                name: globalize.translate('Download'),
+                id: 'download',
+                icon: 'file_download'
             });
 
             commands.push({
-                name: globalize.translate("CopyStreamURL"),
-                id: "copy-stream",
-                icon: "content_copy"
+                name: globalize.translate('CopyStreamURL'),
+                id: 'copy-stream',
+                icon: 'content_copy'
             });
         }
 
@@ -163,12 +163,12 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
 
         var canEdit = itemHelper.canEdit(user, item);
         if (canEdit) {
-            if (options.edit !== false && item.Type !== "SeriesTimer") {
-                var text = (item.Type === "Timer" || item.Type === "SeriesTimer") ? globalize.translate("Edit") : globalize.translate("EditMetadata");
+            if (options.edit !== false && item.Type !== 'SeriesTimer') {
+                var text = (item.Type === 'Timer' || item.Type === 'SeriesTimer') ? globalize.translate('Edit') : globalize.translate('EditMetadata');
                 commands.push({
                     name: text,
-                    id: "edit",
-                    icon: "edit"
+                    id: 'edit',
+                    icon: 'edit'
                 });
             }
         }
@@ -176,20 +176,20 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
         if (itemHelper.canEditImages(user, item)) {
             if (options.editImages !== false) {
                 commands.push({
-                    name: globalize.translate("EditImages"),
-                    id: "editimages",
-                    icon: "image"
+                    name: globalize.translate('EditImages'),
+                    id: 'editimages',
+                    icon: 'image'
                 });
             }
         }
 
         if (canEdit) {
-            if (item.MediaType === "Video" && item.Type !== "TvChannel" && item.Type !== "Program" && item.LocationType !== "Virtual" && !(item.Type === "Recording" && item.Status !== "Completed")) {
+            if (item.MediaType === 'Video' && item.Type !== 'TvChannel' && item.Type !== 'Program' && item.LocationType !== 'Virtual' && !(item.Type === 'Recording' && item.Status !== 'Completed')) {
                 if (options.editSubtitles !== false) {
                     commands.push({
-                        name: globalize.translate("EditSubtitles"),
-                        id: "editsubtitles",
-                        icon: "closed_caption"
+                        name: globalize.translate('EditSubtitles'),
+                        id: 'editsubtitles',
+                        icon: 'closed_caption'
                     });
                 }
             }
@@ -198,9 +198,9 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
         if (options.identify !== false) {
             if (itemHelper.canIdentify(user, item)) {
                 commands.push({
-                    name: globalize.translate("Identify"),
-                    id: "identify",
-                    icon: "edit"
+                    name: globalize.translate('Identify'),
+                    id: 'identify',
+                    icon: 'edit'
                 });
             }
         }
@@ -208,54 +208,54 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
         if (item.MediaSources) {
             if (options.moremediainfo !== false) {
                 commands.push({
-                    name: globalize.translate("MoreMediaInfo"),
-                    id: "moremediainfo",
-                    icon: "info"
+                    name: globalize.translate('MoreMediaInfo'),
+                    id: 'moremediainfo',
+                    icon: 'info'
                 });
             }
         }
 
-        if (item.Type === "Program" && options.record !== false) {
+        if (item.Type === 'Program' && options.record !== false) {
             if (item.TimerId) {
                 commands.push({
-                    name: Globalize.translate("ManageRecording"),
-                    id: "record",
-                    icon: "fiber_manual_record"
+                    name: globalize.translate('ManageRecording'),
+                    id: 'record',
+                    icon: 'fiber_manual_record'
                 });
             }
         }
 
-        if (item.Type === "Program" && options.record !== false) {
+        if (item.Type === 'Program' && options.record !== false) {
             if (!item.TimerId) {
                 commands.push({
-                    name: Globalize.translate("Record"),
-                    id: "record",
-                    icon: "fiber_manual_record"
+                    name: globalize.translate('Record'),
+                    id: 'record',
+                    icon: 'fiber_manual_record'
                 });
             }
         }
 
         if (itemHelper.canRefreshMetadata(item, user)) {
             commands.push({
-                name: globalize.translate("RefreshMetadata"),
-                id: "refresh",
-                icon: "refresh"
+                name: globalize.translate('RefreshMetadata'),
+                id: 'refresh',
+                icon: 'refresh'
             });
         }
 
         if (item.PlaylistItemId && options.playlistId) {
             commands.push({
-                name: globalize.translate("RemoveFromPlaylist"),
-                id: "removefromplaylist",
-                icon: "remove"
+                name: globalize.translate('RemoveFromPlaylist'),
+                id: 'removefromplaylist',
+                icon: 'remove'
             });
         }
 
         if (options.collectionId) {
             commands.push({
-                name: globalize.translate("RemoveFromCollection"),
-                id: "removefromcollection",
-                icon: "remove"
+                name: globalize.translate('RemoveFromCollection'),
+                id: 'removefromcollection',
+                icon: 'remove'
             });
         }
 
@@ -263,9 +263,9 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
             if (options.share === true) {
                 if (itemHelper.canShare(item, user)) {
                     commands.push({
-                        name: globalize.translate("Share"),
-                        id: "share",
-                        icon: "share"
+                        name: globalize.translate('Share'),
+                        id: 'share',
+                        icon: 'share'
                     });
                 }
             }
@@ -274,26 +274,26 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
         if (options.sync !== false) {
             if (itemHelper.canSync(user, item)) {
                 commands.push({
-                    name: globalize.translate("Sync"),
-                    id: "sync",
-                    icon: "sync"
+                    name: globalize.translate('Sync'),
+                    id: 'sync',
+                    icon: 'sync'
                 });
             }
         }
 
-        if (options.openAlbum !== false && item.AlbumId && item.MediaType !== "Photo") {
+        if (options.openAlbum !== false && item.AlbumId && item.MediaType !== 'Photo') {
             commands.push({
-                name: Globalize.translate("ViewAlbum"),
-                id: "album",
-                icon: "album"
+                name: globalize.translate('ViewAlbum'),
+                id: 'album',
+                icon: 'album'
             });
         }
 
         if (options.openArtist !== false && item.ArtistItems && item.ArtistItems.length) {
             commands.push({
-                name: Globalize.translate("ViewArtist"),
-                id: "artist",
-                icon: "person"
+                name: globalize.translate('ViewArtist'),
+                id: 'artist',
+                icon: 'person'
             });
         }
 
@@ -317,173 +317,181 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
 
         return new Promise(function (resolve, reject) {
             switch (id) {
-                case "addtocollection":
-                    require(["collectionEditor"], function (collectionEditor) {
+                case 'addtocollection':
+                    require(['collectionEditor'], function (collectionEditor) {
                         new collectionEditor().show({
                             items: [itemId],
                             serverId: serverId
                         }).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                     });
                     break;
-                case "addtoplaylist":
-                    require(["playlistEditor"], function (playlistEditor) {
+                case 'addtoplaylist':
+                    require(['playlistEditor'], function (playlistEditor) {
                         new playlistEditor().show({
                             items: [itemId],
                             serverId: serverId
                         }).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                     });
                     break;
-                case "download":
-                    require(["fileDownloader"], function (fileDownloader) {
+                case 'download':
+                    require(['fileDownloader'], function (fileDownloader) {
                         var downloadHref = apiClient.getItemDownloadUrl(itemId);
                         fileDownloader.download([{
                             url: downloadHref,
                             itemId: itemId,
-                            serverId: serverId
+                            serverId: serverId,
+                            title: item.Name,
+                            filename: item.Path.replace(/^.*[\\\/]/, '')
                         }]);
                         getResolveFunction(getResolveFunction(resolve, id), id)();
                     });
                     break;
-                case "copy-stream":
+                case 'copy-stream':
                     var downloadHref = apiClient.getItemDownloadUrl(itemId);
                     var textAreaCopy = function () {
-                        var textArea = document.createElement("textarea");
+                        var textArea = document.createElement('textarea');
                         textArea.value = downloadHref;
                         document.body.appendChild(textArea);
                         textArea.focus();
                         textArea.select();
-                        if (document.execCommand("copy")) {
-                            require(["toast"], function (toast) {
-                                toast(globalize.translate("CopyStreamURLSuccess"));
+
+                        if (document.execCommand('copy')) {
+                            require(['toast'], function (toast) {
+                                toast(globalize.translate('CopyStreamURLSuccess'));
                             });
                         } else {
-                            prompt(globalize.translate("CopyStreamURL"), downloadHref);
+                            prompt(globalize.translate('CopyStreamURL'), downloadHref);
                         }
                         document.body.removeChild(textArea);
                     };
+
+                    /* eslint-disable-next-line compat/compat */
                     if (navigator.clipboard === undefined) {
                         textAreaCopy();
                     } else {
+                        /* eslint-disable-next-line compat/compat */
                         navigator.clipboard.writeText(downloadHref).then(function () {
-                            require(["toast"], function (toast) {
-                                toast(globalize.translate("CopyStreamURLSuccess"));
+                            require(['toast'], function (toast) {
+                                toast(globalize.translate('CopyStreamURLSuccess'));
                             });
-                        }, textAreaCopy);
+                        }).catch(function () {
+                            textAreaCopy();
+                        });
                     }
                     getResolveFunction(resolve, id)();
                     break;
-                case "editsubtitles":
-                    require(["subtitleEditor"], function (subtitleEditor) {
+                case 'editsubtitles':
+                    require(['subtitleEditor'], function (subtitleEditor) {
                         subtitleEditor.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                     });
                     break;
-                case "edit":
+                case 'edit':
                     editItem(apiClient, item).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                     break;
-                case "editimages":
-                    require(["imageEditor"], function (imageEditor) {
+                case 'editimages':
+                    require(['imageEditor'], function (imageEditor) {
                         imageEditor.show({
                             itemId: itemId,
                             serverId: serverId
                         }).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                     });
                     break;
-                case "identify":
-                    require(["itemIdentifier"], function (itemIdentifier) {
+                case 'identify':
+                    require(['itemIdentifier'], function (itemIdentifier) {
                         itemIdentifier.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                     });
                     break;
-                case "moremediainfo":
-                    require(["itemMediaInfo"], function (itemMediaInfo) {
+                case 'moremediainfo':
+                    require(['itemMediaInfo'], function (itemMediaInfo) {
                         itemMediaInfo.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                     });
                     break;
-                case "refresh":
+                case 'refresh':
                     refresh(apiClient, item);
                     getResolveFunction(resolve, id)();
                     break;
-                case "open":
+                case 'open':
                     appRouter.showItem(item);
                     getResolveFunction(resolve, id)();
                     break;
-                case "play":
+                case 'play':
                     play(item, false);
                     getResolveFunction(resolve, id)();
                     break;
-                case "resume":
+                case 'resume':
                     play(item, true);
                     getResolveFunction(resolve, id)();
                     break;
-                case "queue":
+                case 'queue':
                     play(item, false, true);
                     getResolveFunction(resolve, id)();
                     break;
-                case "queuenext":
+                case 'queuenext':
                     play(item, false, true, true);
                     getResolveFunction(resolve, id)();
                     break;
-                case "record":
-                    require(["recordingCreator"], function (recordingCreator) {
+                case 'record':
+                    require(['recordingCreator'], function (recordingCreator) {
                         recordingCreator.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                     });
                     break;
-                case "shuffle":
+                case 'shuffle':
                     playbackManager.shuffle(item);
                     getResolveFunction(resolve, id)();
                     break;
-                case "instantmix":
+                case 'instantmix':
                     playbackManager.instantMix(item);
                     getResolveFunction(resolve, id)();
                     break;
-                case "delete":
+                case 'delete':
                     deleteItem(apiClient, item).then(getResolveFunction(resolve, id, true, true), getResolveFunction(resolve, id));
                     break;
-                case "share":
+                case 'share':
                     navigator.share({
                         title: item.Name,
                         text: item.Overview,
-                        url: "https://github.com/jellyfin/jellyfin"
+                        url: `${apiClient.serverAddress()}/web/index.html#!/${appRouter.getRouteUrl(item)}`
                     });
                     break;
-                case "album":
+                case 'album':
                     appRouter.showItem(item.AlbumId, item.ServerId);
                     getResolveFunction(resolve, id)();
                     break;
-                case "artist":
+                case 'artist':
                     appRouter.showItem(item.ArtistItems[0].Id, item.ServerId);
                     getResolveFunction(resolve, id)();
                     break;
-                case "playallfromhere":
+                case 'playallfromhere':
                     getResolveFunction(resolve, id)();
                     break;
-                case "queueallfromhere":
+                case 'queueallfromhere':
                     getResolveFunction(resolve, id)();
                     break;
-                case "removefromplaylist":
+                case 'removefromplaylist':
                     apiClient.ajax({
-                        url: apiClient.getUrl("Playlists/" + options.playlistId + "/Items", {
-                            EntryIds: [item.PlaylistItemId].join(",")
+                        url: apiClient.getUrl('Playlists/' + options.playlistId + '/Items', {
+                            EntryIds: [item.PlaylistItemId].join(',')
                         }),
-                        type: "DELETE"
+                        type: 'DELETE'
                     }).then(function () {
                         getResolveFunction(resolve, id, true)();
                     });
                     break;
-                case "removefromcollection":
+                case 'removefromcollection':
                     apiClient.ajax({
-                        type: "DELETE",
-                        url: apiClient.getUrl("Collections/" + options.collectionId + "/Items", {
+                        type: 'DELETE',
+                        url: apiClient.getUrl('Collections/' + options.collectionId + '/Items', {
 
-                            Ids: [item.Id].join(",")
+                            Ids: [item.Id].join(',')
                         })
                     }).then(function () {
                         getResolveFunction(resolve, id, true)();
                     });
                     break;
-                case "canceltimer":
+                case 'canceltimer':
                     deleteTimer(apiClient, item, resolve, id);
                     break;
-                case "cancelseriestimer":
+                case 'cancelseriestimer':
                     deleteSeriesTimer(apiClient, item, resolve, id);
                     break;
                 default:
@@ -494,7 +502,7 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
     }
 
     function deleteTimer(apiClient, item, resolve, command) {
-        require(["recordingHelper"], function (recordingHelper) {
+        require(['recordingHelper'], function (recordingHelper) {
             var timerId = item.TimerId || item.Id;
             recordingHelper.cancelTimerWithConfirmation(timerId, item.ServerId).then(function () {
                 getResolveFunction(resolve, command, true)();
@@ -503,7 +511,7 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
     }
 
     function deleteSeriesTimer(apiClient, item, resolve, command) {
-        require(["recordingHelper"], function (recordingHelper) {
+        require(['recordingHelper'], function (recordingHelper) {
             recordingHelper.cancelSeriesTimerWithConfirmation(item.Id, item.ServerId).then(function () {
                 getResolveFunction(resolve, command, true)();
             });
@@ -511,14 +519,14 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
     }
 
     function play(item, resume, queue, queueNext) {
-        var method = queue ? (queueNext ? "queueNext" : "queue") : "play";
+        var method = queue ? (queueNext ? 'queueNext' : 'queue') : 'play';
 
         var startPosition = 0;
         if (resume && item.UserData && item.UserData.PlaybackPositionTicks) {
             startPosition = item.UserData.PlaybackPositionTicks;
         }
 
-        if (item.Type === "Program") {
+        if (item.Type === 'Program') {
             playbackManager[method]({
                 ids: [item.ChannelId],
                 startPositionTicks: startPosition,
@@ -536,16 +544,16 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
         return new Promise(function (resolve, reject) {
             var serverId = apiClient.serverInfo().Id;
 
-            if (item.Type === "Timer") {
-                require(["recordingEditor"], function (recordingEditor) {
+            if (item.Type === 'Timer') {
+                require(['recordingEditor'], function (recordingEditor) {
                     recordingEditor.show(item.Id, serverId).then(resolve, reject);
                 });
-            } else if (item.Type === "SeriesTimer") {
-                require(["seriesRecordingEditor"], function (recordingEditor) {
+            } else if (item.Type === 'SeriesTimer') {
+                require(['seriesRecordingEditor'], function (recordingEditor) {
                     recordingEditor.show(item.Id, serverId).then(resolve, reject);
                 });
             } else {
-                require(["metadataEditor"], function (metadataEditor) {
+                require(['metadataEditor'], function (metadataEditor) {
                     metadataEditor.show(item.Id, serverId).then(resolve, reject);
                 });
             }
@@ -554,7 +562,7 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
 
     function deleteItem(apiClient, item) {
         return new Promise(function (resolve, reject) {
-            require(["deleteHelper"], function (deleteHelper) {
+            require(['deleteHelper'], function (deleteHelper) {
                 deleteHelper.deleteItem({
                     item: item,
                     navigate: false
@@ -566,11 +574,11 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
     }
 
     function refresh(apiClient, item) {
-        require(["refreshDialog"], function (refreshDialog) {
+        require(['refreshDialog'], function (refreshDialog) {
             new refreshDialog({
                 itemIds: [item.Id],
                 serverId: apiClient.serverInfo().Id,
-                mode: item.Type === "CollectionFolder" ? "scan" : null
+                mode: item.Type === 'CollectionFolder' ? 'scan' : null
             }).show();
         });
     }
@@ -584,7 +592,7 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
         return actionsheet.show({
             items: commands,
             positionTo: options.positionTo,
-            resolveOnClick: ["share"]
+            resolveOnClick: ['share']
         }).then(function (id) {
             return executeCommand(options.item, id, options);
         });

src/components/itemHelper.js

@@ -4,7 +4,7 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
     function getDisplayName(item, options) {
 
         if (!item) {
-            throw new Error("null item passed into getDisplayName");
+            throw new Error('null item passed into getDisplayName');
         }
 
         options = options || {};
@@ -15,31 +15,31 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
 
         var name = ((item.Type === 'Program' || item.Type === 'Recording') && (item.IsSeries || item.EpisodeTitle) ? item.EpisodeTitle : item.Name) || '';
 
-        if (item.Type === "TvChannel") {
+        if (item.Type === 'TvChannel') {
             if (item.ChannelNumber) {
                 return item.ChannelNumber + ' ' + name;
             }
             return name;
         }
-        if (item.Type === "Episode" && item.ParentIndexNumber === 0) {
+        if (item.Type === 'Episode' && item.ParentIndexNumber === 0) {
             name = globalize.translate('ValueSpecialEpisodeName', name);
-        } else if ((item.Type === "Episode" || item.Type === 'Program') && item.IndexNumber != null && item.ParentIndexNumber != null && options.includeIndexNumber !== false) {
+        } else if ((item.Type === 'Episode' || item.Type === 'Program') && item.IndexNumber != null && item.ParentIndexNumber != null && options.includeIndexNumber !== false) {
 
             var displayIndexNumber = item.IndexNumber;
 
             var number = displayIndexNumber;
-            var nameSeparator = " - ";
+            var nameSeparator = ' - ';
 
             if (options.includeParentInfo !== false) {
-                number = "S" + item.ParentIndexNumber + ":E" + number;
+                number = 'S' + item.ParentIndexNumber + ':E' + number;
             } else {
-                nameSeparator = ". ";
+                nameSeparator = '. ';
             }
 
             if (item.IndexNumberEnd) {
 
                 displayIndexNumber = item.IndexNumberEnd;
-                number += "-" + displayIndexNumber;
+                number += '-' + displayIndexNumber;
             }
 
             if (number) {
@@ -94,14 +94,14 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
             return false;
         }
 
-        return item.MediaType || item.IsFolder || item.Type === "Genre" || item.Type === "MusicGenre" || item.Type === "MusicArtist";
+        return item.MediaType || item.IsFolder || item.Type === 'Genre' || item.Type === 'MusicGenre' || item.Type === 'MusicArtist';
     }
 
     function canEdit(user, item) {
 
         var itemType = item.Type;
 
-        if (itemType === "UserRootFolder" || itemType === "UserView") {
+        if (itemType === 'UserRootFolder' || itemType === 'UserView') {
             return false;
         }
 
@@ -149,15 +149,15 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
 
             var itemType = item.Type;
 
-            if (itemType === "Movie" ||
-                itemType === "Trailer" ||
-                itemType === "Series" ||
-                itemType === "BoxSet" ||
-                itemType === "Person" ||
-                itemType === "Book" ||
-                itemType === "MusicAlbum" ||
-                itemType === "MusicArtist" ||
-                itemType === "MusicVideo") {
+            if (itemType === 'Movie' ||
+                itemType === 'Trailer' ||
+                itemType === 'Series' ||
+                itemType === 'BoxSet' ||
+                itemType === 'Person' ||
+                itemType === 'Book' ||
+                itemType === 'MusicAlbum' ||
+                itemType === 'MusicArtist' ||
+                itemType === 'MusicVideo') {
 
                 if (user.Policy.IsAdministrator) {
 
@@ -259,11 +259,11 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
                 }
             }
 
-            if (item.Type === "Series" ||
-                item.Type === "Season" ||
-                item.Type === "BoxSet" ||
-                item.MediaType === "Book" ||
-                item.MediaType === "Recording") {
+            if (item.Type === 'Series' ||
+                item.Type === 'Season' ||
+                item.Type === 'BoxSet' ||
+                item.MediaType === 'Book' ||
+                item.MediaType === 'Recording') {
                 return true;
             }
 

src/components/itemMediaInfo/itemMediaInfo.js

@@ -1,145 +1,145 @@
-define(["dialogHelper", "require", "layoutManager", "globalize", "userSettings", "connectionManager", "loading", "focusManager", "dom", "apphost", "emby-select", "listViewStyle", "paper-icon-button-light", "css!./../formdialog", "material-icons", "emby-button", "flexStyles"], function (dialogHelper, require, layoutManager, globalize, userSettings, connectionManager, loading, focusManager, dom, appHost) {
-    "use strict";
+define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings', 'connectionManager', 'loading', 'focusManager', 'dom', 'apphost', 'emby-select', 'listViewStyle', 'paper-icon-button-light', 'css!./../formdialog', 'material-icons', 'emby-button', 'flexStyles'], function (dialogHelper, require, layoutManager, globalize, userSettings, connectionManager, loading, focusManager, dom, appHost) {
+    'use strict';
 
     function setMediaInfo(user, page, item) {
         var html = item.MediaSources.map(function (version) {
             return getMediaSourceHtml(user, item, version);
         }).join('<div style="border-top:1px solid #444;margin: 1em 0;"></div>');
         if (item.MediaSources.length > 1) {
-            html = "<br/>" + html;
+            html = '<br/>' + html;
         }
-        var mediaInfoContent = page.querySelector("#mediaInfoContent");
+        var mediaInfoContent = page.querySelector('#mediaInfoContent');
         mediaInfoContent.innerHTML = html;
     }
 
     function getMediaSourceHtml(user, item, version) {
-        var html = "";
+        var html = '';
         if (version.Name) {
-            html += '<div><h2 class="mediaInfoStreamType">' + version.Name + "</h2></div>";
+            html += '<div><h2 class="mediaInfoStreamType">' + version.Name + '</h2></div>';
         }
         if (version.Container) {
-            html += createAttribute(globalize.translate("MediaInfoContainer"), version.Container) + "<br/>";
+            html += createAttribute(globalize.translate('MediaInfoContainer'), version.Container) + '<br/>';
         }
         if (version.Formats && version.Formats.length) {
-            html += createAttribute(globalize.translate("MediaInfoFormat"), version.Formats.join(",")) + "<br/>";
+            html += createAttribute(globalize.translate('MediaInfoFormat'), version.Formats.join(',')) + '<br/>';
         }
         if (version.Path && user && user.Policy.IsAdministrator) {
-            html += createAttribute(globalize.translate("MediaInfoPath"), version.Path) + "<br/>";
+            html += createAttribute(globalize.translate('MediaInfoPath'), version.Path) + '<br/>';
         }
         if (version.Size) {
-            var size = (version.Size / (1024 * 1024)).toFixed(0) + " MB";
-            html += createAttribute(globalize.translate("MediaInfoSize"), size) + "<br/>";
+            var size = (version.Size / (1024 * 1024)).toFixed(0) + ' MB';
+            html += createAttribute(globalize.translate('MediaInfoSize'), size) + '<br/>';
         }
         for (var i = 0, length = version.MediaStreams.length; i < length; i++) {
             var stream = version.MediaStreams[i];
-            if (stream.Type === "Data") {
+            if (stream.Type === 'Data') {
                 continue;
             }
             html += '<div class="mediaInfoStream">';
-            var displayType = globalize.translate("MediaInfoStreamType" + stream.Type);
-            html += '<h2 class="mediaInfoStreamType">' + displayType + "</h2>";
+            var displayType = globalize.translate('MediaInfoStreamType' + stream.Type);
+            html += '<h2 class="mediaInfoStreamType">' + displayType + '</h2>';
             var attributes = [];
             if (stream.DisplayTitle) {
-                attributes.push(createAttribute("Title", stream.DisplayTitle));
+                attributes.push(createAttribute('Title', stream.DisplayTitle));
             }
-            if (stream.Language && stream.Type !== "Video") {
-                attributes.push(createAttribute(globalize.translate("MediaInfoLanguage"), stream.Language));
+            if (stream.Language && stream.Type !== 'Video') {
+                attributes.push(createAttribute(globalize.translate('MediaInfoLanguage'), stream.Language));
             }
             if (stream.Codec) {
-                attributes.push(createAttribute(globalize.translate("MediaInfoCodec"), stream.Codec.toUpperCase()));
+                attributes.push(createAttribute(globalize.translate('MediaInfoCodec'), stream.Codec.toUpperCase()));
             }
             if (stream.CodecTag) {
-                attributes.push(createAttribute(globalize.translate("MediaInfoCodecTag"), stream.CodecTag));
+                attributes.push(createAttribute(globalize.translate('MediaInfoCodecTag'), stream.CodecTag));
             }
             if (stream.IsAVC != null) {
-                attributes.push(createAttribute("AVC", (stream.IsAVC ? "Yes" : "No")));
+                attributes.push(createAttribute('AVC', (stream.IsAVC ? 'Yes' : 'No')));
             }
             if (stream.Profile) {
-                attributes.push(createAttribute(globalize.translate("MediaInfoProfile"), stream.Profile));
+                attributes.push(createAttribute(globalize.translate('MediaInfoProfile'), stream.Profile));
             }
             if (stream.Level) {
-                attributes.push(createAttribute(globalize.translate("MediaInfoLevel"), stream.Level));
+                attributes.push(createAttribute(globalize.translate('MediaInfoLevel'), stream.Level));
             }
             if (stream.Width || stream.Height) {
-                attributes.push(createAttribute(globalize.translate("MediaInfoResolution"), stream.Width + "x" + stream.Height));
+                attributes.push(createAttribute(globalize.translate('MediaInfoResolution'), stream.Width + 'x' + stream.Height));
             }
-            if (stream.AspectRatio && stream.Codec !== "mjpeg") {
-                attributes.push(createAttribute(globalize.translate("MediaInfoAspectRatio"), stream.AspectRatio));
+            if (stream.AspectRatio && stream.Codec !== 'mjpeg') {
+                attributes.push(createAttribute(globalize.translate('MediaInfoAspectRatio'), stream.AspectRatio));
             }
-            if (stream.Type === "Video") {
+            if (stream.Type === 'Video') {
                 if (stream.IsAnamorphic != null) {
-                    attributes.push(createAttribute(globalize.translate("MediaInfoAnamorphic"), (stream.IsAnamorphic ? "Yes" : "No")));
+                    attributes.push(createAttribute(globalize.translate('MediaInfoAnamorphic'), (stream.IsAnamorphic ? 'Yes' : 'No')));
                 }
-                attributes.push(createAttribute(globalize.translate("MediaInfoInterlaced"), (stream.IsInterlaced ? "Yes" : "No")));
+                attributes.push(createAttribute(globalize.translate('MediaInfoInterlaced'), (stream.IsInterlaced ? 'Yes' : 'No')));
             }
             if (stream.AverageFrameRate || stream.RealFrameRate) {
-                attributes.push(createAttribute(globalize.translate("MediaInfoFramerate"), (stream.AverageFrameRate || stream.RealFrameRate)));
+                attributes.push(createAttribute(globalize.translate('MediaInfoFramerate'), (stream.AverageFrameRate || stream.RealFrameRate)));
             }
             if (stream.ChannelLayout) {
-                attributes.push(createAttribute(globalize.translate("MediaInfoLayout"), stream.ChannelLayout));
+                attributes.push(createAttribute(globalize.translate('MediaInfoLayout'), stream.ChannelLayout));
             }
             if (stream.Channels) {
-                attributes.push(createAttribute(globalize.translate("MediaInfoChannels"), stream.Channels + " ch"));
+                attributes.push(createAttribute(globalize.translate('MediaInfoChannels'), stream.Channels + ' ch'));
             }
-            if (stream.BitRate && stream.Codec !== "mjpeg") {
-                attributes.push(createAttribute(globalize.translate("MediaInfoBitrate"), (parseInt(stream.BitRate / 1000)) + " kbps"));
+            if (stream.BitRate && stream.Codec !== 'mjpeg') {
+                attributes.push(createAttribute(globalize.translate('MediaInfoBitrate'), (parseInt(stream.BitRate / 1000)) + ' kbps'));
             }
             if (stream.SampleRate) {
-                attributes.push(createAttribute(globalize.translate("MediaInfoSampleRate"), stream.SampleRate + " Hz"));
+                attributes.push(createAttribute(globalize.translate('MediaInfoSampleRate'), stream.SampleRate + ' Hz'));
             }
             if (stream.BitDepth) {
-                attributes.push(createAttribute(globalize.translate("MediaInfoBitDepth"), stream.BitDepth + " bit"));
+                attributes.push(createAttribute(globalize.translate('MediaInfoBitDepth'), stream.BitDepth + ' bit'));
             }
             if (stream.PixelFormat) {
-                attributes.push(createAttribute(globalize.translate("MediaInfoPixelFormat"), stream.PixelFormat));
+                attributes.push(createAttribute(globalize.translate('MediaInfoPixelFormat'), stream.PixelFormat));
             }
             if (stream.RefFrames) {
-                attributes.push(createAttribute(globalize.translate("MediaInfoRefFrames"), stream.RefFrames));
+                attributes.push(createAttribute(globalize.translate('MediaInfoRefFrames'), stream.RefFrames));
             }
             if (stream.NalLengthSize) {
-                attributes.push(createAttribute("NAL", stream.NalLengthSize));
+                attributes.push(createAttribute('NAL', stream.NalLengthSize));
             }
-            if (stream.Type !== "Video") {
-                attributes.push(createAttribute(globalize.translate("MediaInfoDefault"), (stream.IsDefault ? "Yes" : "No")));
+            if (stream.Type !== 'Video') {
+                attributes.push(createAttribute(globalize.translate('MediaInfoDefault'), (stream.IsDefault ? 'Yes' : 'No')));
             }
-            if (stream.Type === "Subtitle") {
-                attributes.push(createAttribute(globalize.translate("MediaInfoForced"), (stream.IsForced ? "Yes" : "No")));
-                attributes.push(createAttribute(globalize.translate("MediaInfoExternal"), (stream.IsExternal ? "Yes" : "No")));
+            if (stream.Type === 'Subtitle') {
+                attributes.push(createAttribute(globalize.translate('MediaInfoForced'), (stream.IsForced ? 'Yes' : 'No')));
+                attributes.push(createAttribute(globalize.translate('MediaInfoExternal'), (stream.IsExternal ? 'Yes' : 'No')));
             }
-            if (stream.Type === "Video" && version.Timestamp) {
-                attributes.push(createAttribute(globalize.translate("MediaInfoTimestamp"), version.Timestamp));
+            if (stream.Type === 'Video' && version.Timestamp) {
+                attributes.push(createAttribute(globalize.translate('MediaInfoTimestamp'), version.Timestamp));
             }
-            html += attributes.join("<br/>");
-            html += "</div>";
+            html += attributes.join('<br/>');
+            html += '</div>';
         }
         return html;
     }
 
     function createAttribute(label, value) {
-        return '<span class="mediaInfoLabel">' + label + '</span><span class="mediaInfoAttribute">' + value + "</span>";
+        return '<span class="mediaInfoLabel">' + label + '</span><span class="mediaInfoAttribute">' + value + '</span>';
     }
 
     function showMediaInfoMore(itemId, serverId, template) {
         var apiClient = connectionManager.getApiClient(serverId);
         return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
             var dialogOptions = {
-                size: "small",
+                size: 'small',
                 removeOnClose: true,
                 scrollY: false
             };
             if (layoutManager.tv) {
-                dialogOptions.size = "fullscreen";
+                dialogOptions.size = 'fullscreen';
             }
             var dlg = dialogHelper.createDialog(dialogOptions);
-            dlg.classList.add("formDialog");
-            var html = "";
-            html += globalize.translateDocument(template, "core");
+            dlg.classList.add('formDialog');
+            var html = '';
+            html += globalize.translateDocument(template, 'core');
             dlg.innerHTML = html;
             if (layoutManager.tv) {
-                dlg.querySelector(".formDialogContent");
+                dlg.querySelector('.formDialogContent');
             }
             dialogHelper.open(dlg);
-            dlg.querySelector(".btnCancel").addEventListener("click", function (e) {
+            dlg.querySelector('.btnCancel').addEventListener('click', function (e) {
                 dialogHelper.close(dlg);
             });
             apiClient.getCurrentUser().then(function (user) {
@@ -152,7 +152,7 @@ define(["dialogHelper", "require", "layoutManager", "globalize", "userSettings",
     function showMediaInfo(itemId, serverId) {
         loading.show();
         return new Promise(function (resolve, reject) {
-            require(["text!./itemMediaInfo.template.html"], function (template) {
+            require(['text!./itemMediaInfo.template.html'], function (template) {
                 showMediaInfoMore(itemId, serverId, template).then(resolve, reject);
             });
         });

src/components/itemMediaInfo/itemMediaInfo.template.html

@@ -1,6 +1,6 @@
 <div class="formDialogHeader">
     <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
-        <i class="material-icons arrow_back"></i>
+        <span class="material-icons arrow_back"></span>
     </button>
     <h3 class="formDialogHeaderTitle">${HeaderMediaInfo}</h3>
 </div>

src/components/itemidentifier/itemidentifier.js

@@ -1,5 +1,5 @@
-define(["dialogHelper", "loading", "connectionManager", "require", "globalize", "scrollHelper", "layoutManager", "focusManager", "browser", "emby-input", "emby-checkbox", "paper-icon-button-light", "css!./../formdialog", "material-icons", "cardStyle"], function (dialogHelper, loading, connectionManager, require, globalize, scrollHelper, layoutManager, focusManager, browser) {
-    "use strict";
+define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize', 'scrollHelper', 'layoutManager', 'focusManager', 'browser', 'emby-input', 'emby-checkbox', 'paper-icon-button-light', 'css!./../formdialog', 'material-icons', 'cardStyle'], function (dialogHelper, loading, connectionManager, require, globalize, scrollHelper, layoutManager, focusManager, browser) {
+    'use strict';
 
     var enableFocusTransform = !browser.slow && !browser.edge;
 
@@ -23,7 +23,7 @@ define(["dialogHelper", "loading", "connectionManager", "require", "globalize",
 
         var i;
         var length;
-        var identifyField = page.querySelectorAll(".identifyField");
+        var identifyField = page.querySelectorAll('.identifyField');
         var value;
         for (i = 0, length = identifyField.length; i < length; i++) {
 
@@ -31,17 +31,17 @@ define(["dialogHelper", "loading", "connectionManager", "require", "globalize",
 
             if (value) {
 
-                if (identifyField[i].type === "number") {
+                if (identifyField[i].type === 'number') {
                     value = parseInt(value);
                 }
 
-                lookupInfo[identifyField[i].getAttribute("data-lookup")] = value;
+                lookupInfo[identifyField[i].getAttribute('data-lookup')] = value;
             }
         }
 
         var hasId = false;
 
-        var txtLookupId = page.querySelectorAll(".txtLookupId");
+        var txtLookupId = page.querySelectorAll('.txtLookupId');
         for (i = 0, length = txtLookupId.length; i < length; i++) {
 
             value = txtLookupId[i].value;
@@ -49,12 +49,12 @@ define(["dialogHelper", "loading", "connectionManager", "require", "globalize",
             if (value) {
                 hasId = true;
             }
-            lookupInfo.ProviderIds[txtLookupId[i].getAttribute("data-providerkey")] = value;
+            lookupInfo.ProviderIds[txtLookupId[i].getAttribute('data-providerkey')] = value;
         }
 
         if (!hasId && !lookupInfo.Name) {
-            require(["toast"], function (toast) {
-                toast(globalize.translate("PleaseEnterNameOrId"));
+            require(['toast'], function (toast) {
+                toast(globalize.translate('PleaseEnterNameOrId'));
             });
             return;
         }
@@ -74,11 +74,11 @@ define(["dialogHelper", "loading", "connectionManager", "require", "globalize",
         var apiClient = getApiClient();
 
         apiClient.ajax({
-            type: "POST",
-            url: apiClient.getUrl("Items/RemoteSearch/" + currentItemType),
+            type: 'POST',
+            url: apiClient.getUrl('Items/RemoteSearch/' + currentItemType),
             data: JSON.stringify(lookupInfo),
-            contentType: "application/json",
-            dataType: "json"
+            contentType: 'application/json',
+            dataType: 'json'
 
         }).then(function (results) {
 
@@ -89,14 +89,14 @@ define(["dialogHelper", "loading", "connectionManager", "require", "globalize",
 
     function showIdentificationSearchResults(page, results) {
 
-        var identificationSearchResults = page.querySelector(".identificationSearchResults");
+        var identificationSearchResults = page.querySelector('.identificationSearchResults');
 
-        page.querySelector(".popupIdentifyForm").classList.add("hide");
-        identificationSearchResults.classList.remove("hide");
-        page.querySelector(".identifyOptionsForm").classList.add("hide");
-        page.querySelector(".dialogContentInner").classList.remove("dialog-content-centered");
+        page.querySelector('.popupIdentifyForm').classList.add('hide');
+        identificationSearchResults.classList.remove('hide');
+        page.querySelector('.identifyOptionsForm').classList.add('hide');
+        page.querySelector('.dialogContentInner').classList.remove('dialog-content-centered');
 
-        var html = "";
+        var html = '';
         var i;
         var length;
         for (i = 0, length = results.length; i < length; i++) {
@@ -105,11 +105,11 @@ define(["dialogHelper", "loading", "connectionManager", "require", "globalize",
             html += getSearchResultHtml(result, i);
         }
 
-        var elem = page.querySelector(".identificationSearchResultList");
+        var elem = page.querySelector('.identificationSearchResultList');
         elem.innerHTML = html;
 
         function onSearchImageClick() {
-            var index = parseInt(this.getAttribute("data-index"));
+            var index = parseInt(this.getAttribute('data-index'));
 
             var currentResult = results[index];
 
@@ -122,10 +122,10 @@ define(["dialogHelper", "loading", "connectionManager", "require", "globalize",
             }
         }
 
-        var searchImages = elem.querySelectorAll(".card");
+        var searchImages = elem.querySelectorAll('.card');
         for (i = 0, length = searchImages.length; i < length; i++) {
 
-            searchImages[i].addEventListener("click", onSearchImageClick);
+            searchImages[i].addEventListener('click', onSearchImageClick);
         }
 
         if (layoutManager.tv) {
@@ -143,13 +143,13 @@ define(["dialogHelper", "loading", "connectionManager", "require", "globalize",
 
     function showIdentifyOptions(page, identifyResult) {
 
-        var identifyOptionsForm = page.querySelector(".identifyOptionsForm");
+        var identifyOptionsForm = page.querySelector('.identifyOptionsForm');
 
-        page.querySelector(".popupIdentifyForm").classList.add("hide");
-        page.querySelector(".identificationSearchResults").classList.add("hide");
-        identifyOptionsForm.classList.remove("hide");
-        page.querySelector("#chkIdentifyReplaceImages").checked = true;
-        page.querySelector(".dialogContentInner").classList.add("dialog-content-centered");
+        page.querySelector('.popupIdentifyForm').classList.add('hide');
+        page.querySelector('.identificationSearchResults').classList.add('hide');
+        identifyOptionsForm.classList.remove('hide');
+        page.querySelector('#chkIdentifyReplaceImages').checked = true;
+        page.querySelector('.dialogContentInner').classList.add('dialog-content-centered');
 
         currentSearchResult = identifyResult;
 
@@ -160,48 +160,48 @@ define(["dialogHelper", "loading", "connectionManager", "require", "globalize",
             lines.push(identifyResult.ProductionYear);
         }
 
-        var resultHtml = lines.join("<br/>");
+        var resultHtml = lines.join('<br/>');
 
         if (identifyResult.ImageUrl) {
             var displayUrl = getSearchImageDisplayUrl(identifyResult.ImageUrl, identifyResult.SearchProviderName);
 
-            resultHtml = '<div style="display:flex;align-items:center;"><img src="' + displayUrl + '" style="max-height:240px;" /><div style="margin-left:1em;">' + resultHtml + "</div>";
+            resultHtml = '<div style="display:flex;align-items:center;"><img src="' + displayUrl + '" style="max-height:240px;" /><div style="margin-left:1em;">' + resultHtml + '</div>';
         }
 
-        page.querySelector(".selectedSearchResult").innerHTML = resultHtml;
+        page.querySelector('.selectedSearchResult').innerHTML = resultHtml;
 
-        focusManager.focus(identifyOptionsForm.querySelector(".btnSubmit"));
+        focusManager.focus(identifyOptionsForm.querySelector('.btnSubmit'));
     }
 
     function getSearchResultHtml(result, index) {
 
         // TODO move card creation code to Card component
 
-        var html = "";
-        var cssClass = "card scalableCard";
-        var cardBoxCssClass = "cardBox";
+        var html = '';
+        var cssClass = 'card scalableCard';
+        var cardBoxCssClass = 'cardBox';
         var padderClass;
 
-        if (currentItemType === "Episode") {
-            cssClass += " backdropCard backdropCard-scalable";
-            padderClass = "cardPadder-backdrop";
-        } else if (currentItemType === "MusicAlbum" || currentItemType === "MusicArtist") {
-            cssClass += " squareCard squareCard-scalable";
-            padderClass = "cardPadder-square";
+        if (currentItemType === 'Episode') {
+            cssClass += ' backdropCard backdropCard-scalable';
+            padderClass = 'cardPadder-backdrop';
+        } else if (currentItemType === 'MusicAlbum' || currentItemType === 'MusicArtist') {
+            cssClass += ' squareCard squareCard-scalable';
+            padderClass = 'cardPadder-square';
         } else {
-            cssClass += " portraitCard portraitCard-scalable";
-            padderClass = "cardPadder-portrait";
+            cssClass += ' portraitCard portraitCard-scalable';
+            padderClass = 'cardPadder-portrait';
         }
 
         if (layoutManager.tv) {
-            cssClass += " show-focus";
+            cssClass += ' show-focus';
 
             if (enableFocusTransform) {
-                cssClass += " show-animation";
+                cssClass += ' show-animation';
             }
         }
 
-        cardBoxCssClass += " cardBox-bottompadded";
+        cardBoxCssClass += ' cardBox-bottompadded';
 
         html += '<button type="button" class="' + cssClass + '" data-index="' + index + '">';
         html += '<div class="' + cardBoxCssClass + '">';
@@ -218,11 +218,11 @@ define(["dialogHelper", "loading", "connectionManager", "require", "globalize",
 
             html += '<div class="cardImageContainer coveredImage defaultCardBackground defaultCardBackground1"><div class="cardText cardCenteredText">' + result.Name + '</div></div>';
         }
-        html += "</div>";
-        html += "</div>";
+        html += '</div>';
+        html += '</div>';
 
         var numLines = 2;
-        if (currentItemType === "MusicAlbum") {
+        if (currentItemType === 'MusicAlbum') {
             numLines++;
         }
 
@@ -242,19 +242,19 @@ define(["dialogHelper", "loading", "connectionManager", "require", "globalize",
             } else {
                 html += '<div class="cardText cardText-secondary cardTextCentered">';
             }
-            html += lines[i] || "&nbsp;";
-            html += "</div>";
+            html += lines[i] || '&nbsp;';
+            html += '</div>';
         }
 
-        html += "</div>";
-        html += "</button>";
+        html += '</div>';
+        html += '</button>';
         return html;
     }
 
     function getSearchImageDisplayUrl(url, provider) {
         var apiClient = getApiClient();
 
-        return apiClient.getUrl("Items/RemoteSearch/Image", { imageUrl: url, ProviderName: provider });
+        return apiClient.getUrl('Items/RemoteSearch/Image', { imageUrl: url, ProviderName: provider });
     }
 
     function submitIdentficationResult(page) {
@@ -262,16 +262,16 @@ define(["dialogHelper", "loading", "connectionManager", "require", "globalize",
         loading.show();
 
         var options = {
-            ReplaceAllImages: page.querySelector("#chkIdentifyReplaceImages").checked
+            ReplaceAllImages: page.querySelector('#chkIdentifyReplaceImages').checked
         };
 
         var apiClient = getApiClient();
 
         apiClient.ajax({
-            type: "POST",
-            url: apiClient.getUrl("Items/RemoteSearch/Apply/" + currentItem.Id, options),
+            type: 'POST',
+            url: apiClient.getUrl('Items/RemoteSearch/Apply/' + currentItem.Id, options),
             data: JSON.stringify(currentSearchResult),
-            contentType: "application/json"
+            contentType: 'application/json'
 
         }).then(function () {
 
@@ -292,45 +292,45 @@ define(["dialogHelper", "loading", "connectionManager", "require", "globalize",
 
         var apiClient = getApiClient();
 
-        apiClient.getJSON(apiClient.getUrl("Items/" + item.Id + "/ExternalIdInfos")).then(function (idList) {
+        apiClient.getJSON(apiClient.getUrl('Items/' + item.Id + '/ExternalIdInfos')).then(function (idList) {
 
-            var html = "";
+            var html = '';
 
             for (var i = 0, length = idList.length; i < length; i++) {
 
                 var idInfo = idList[i];
 
-                var id = "txtLookup" + idInfo.Key;
+                var id = 'txtLookup' + idInfo.Key;
 
                 html += '<div class="inputContainer">';
 
                 var fullName = idInfo.Name;
                 if (idInfo.Type) {
-                    fullName = idInfo.Name + " " + globalize.translate(idInfo.Type);
+                    fullName = idInfo.Name + ' ' + globalize.translate(idInfo.Type);
                 }
 
-                var idLabel = globalize.translate("LabelDynamicExternalId", fullName);
+                var idLabel = globalize.translate('LabelDynamicExternalId', fullName);
 
                 html += '<input is="emby-input" class="txtLookupId" data-providerkey="' + idInfo.Key + '" id="' + id + '" label="' + idLabel + '"/>';
 
-                html += "</div>";
+                html += '</div>';
             }
 
-            page.querySelector("#txtLookupName").value = "";
+            page.querySelector('#txtLookupName').value = '';
 
-            if (item.Type === "Person" || item.Type === "BoxSet") {
+            if (item.Type === 'Person' || item.Type === 'BoxSet') {
 
-                page.querySelector(".fldLookupYear").classList.add("hide");
-                page.querySelector("#txtLookupYear").value = "";
+                page.querySelector('.fldLookupYear').classList.add('hide');
+                page.querySelector('#txtLookupYear').value = '';
             } else {
 
-                page.querySelector(".fldLookupYear").classList.remove("hide");
-                page.querySelector("#txtLookupYear").value = "";
+                page.querySelector('.fldLookupYear').classList.remove('hide');
+                page.querySelector('#txtLookupYear').value = '';
             }
 
-            page.querySelector(".identifyProviderIds").innerHTML = html;
+            page.querySelector('.identifyProviderIds').innerHTML = html;
 
-            page.querySelector(".formDialogHeaderTitle").innerHTML = globalize.translate("Identify");
+            page.querySelector('.formDialogHeaderTitle').innerHTML = globalize.translate('Identify');
         });
     }
 
@@ -338,7 +338,7 @@ define(["dialogHelper", "loading", "connectionManager", "require", "globalize",
 
         loading.show();
 
-        require(["text!./itemidentifier.template.html"], function (template) {
+        require(['text!./itemidentifier.template.html'], function (template) {
 
             var apiClient = getApiClient();
 
@@ -348,30 +348,30 @@ define(["dialogHelper", "loading", "connectionManager", "require", "globalize",
                 currentItemType = currentItem.Type;
 
                 var dialogOptions = {
-                    size: "fullscreen-border",
+                    size: 'small',
                     removeOnClose: true,
                     scrollY: false
                 };
 
                 if (layoutManager.tv) {
-                    dialogOptions.size = "fullscreen";
+                    dialogOptions.size = 'fullscreen';
                 }
 
                 var dlg = dialogHelper.createDialog(dialogOptions);
 
-                dlg.classList.add("formDialog");
-                dlg.classList.add("recordingDialog");
+                dlg.classList.add('formDialog');
+                dlg.classList.add('recordingDialog');
 
-                var html = "";
-                html += globalize.translateDocument(template, "core");
+                var html = '';
+                html += globalize.translateDocument(template, 'core');
 
                 dlg.innerHTML = html;
 
                 // Has to be assigned a z-index after the call to .open()
-                dlg.addEventListener("close", onDialogClosed);
+                dlg.addEventListener('close', onDialogClosed);
 
                 if (layoutManager.tv) {
-                    scrollHelper.centerFocus.on(dlg.querySelector(".formDialogContent"), false);
+                    scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
                 }
 
                 if (item.Path) {
@@ -384,26 +384,26 @@ define(["dialogHelper", "loading", "connectionManager", "require", "globalize",
 
                 dialogHelper.open(dlg);
 
-                dlg.querySelector(".popupIdentifyForm").addEventListener("submit", function (e) {
+                dlg.querySelector('.popupIdentifyForm').addEventListener('submit', function (e) {
 
                     e.preventDefault();
                     searchForIdentificationResults(dlg);
                     return false;
                 });
 
-                dlg.querySelector(".identifyOptionsForm").addEventListener("submit", function (e) {
+                dlg.querySelector('.identifyOptionsForm').addEventListener('submit', function (e) {
 
                     e.preventDefault();
                     submitIdentficationResult(dlg);
                     return false;
                 });
 
-                dlg.querySelector(".btnCancel").addEventListener("click", function (e) {
+                dlg.querySelector('.btnCancel').addEventListener('click', function (e) {
 
                     dialogHelper.close(dlg);
                 });
 
-                dlg.classList.add("identifyDialog");
+                dlg.classList.add('identifyDialog');
 
                 showIdentificationForm(dlg, item);
                 loading.hide();
@@ -426,47 +426,47 @@ define(["dialogHelper", "loading", "connectionManager", "require", "globalize",
         currentItem = null;
         currentItemType = itemType;
 
-        require(["text!./itemidentifier.template.html"], function (template) {
+        require(['text!./itemidentifier.template.html'], function (template) {
 
             var dialogOptions = {
-                size: "fullscreen-border",
+                size: 'small',
                 removeOnClose: true,
                 scrollY: false
             };
 
             if (layoutManager.tv) {
-                dialogOptions.size = "fullscreen";
+                dialogOptions.size = 'fullscreen';
             }
 
             var dlg = dialogHelper.createDialog(dialogOptions);
 
-            dlg.classList.add("formDialog");
-            dlg.classList.add("recordingDialog");
+            dlg.classList.add('formDialog');
+            dlg.classList.add('recordingDialog');
 
-            var html = "";
-            html += globalize.translateDocument(template, "core");
+            var html = '';
+            html += globalize.translateDocument(template, 'core');
 
             dlg.innerHTML = html;
 
             if (layoutManager.tv) {
-                scrollHelper.centerFocus.on(dlg.querySelector(".formDialogContent"), false);
+                scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
             }
 
             dialogHelper.open(dlg);
 
-            dlg.querySelector(".btnCancel").addEventListener("click", function (e) {
+            dlg.querySelector('.btnCancel').addEventListener('click', function (e) {
 
                 dialogHelper.close(dlg);
             });
 
-            dlg.querySelector(".popupIdentifyForm").addEventListener("submit", function (e) {
+            dlg.querySelector('.popupIdentifyForm').addEventListener('submit', function (e) {
 
                 e.preventDefault();
                 searchForIdentificationResults(dlg);
                 return false;
             });
 
-            dlg.addEventListener("close", function () {
+            dlg.addEventListener('close', function () {
 
                 loading.hide();
                 var foundItem = hasChanges ? currentSearchResult : null;
@@ -474,7 +474,7 @@ define(["dialogHelper", "loading", "connectionManager", "require", "globalize",
                 resolveFunc(foundItem);
             });
 
-            dlg.classList.add("identifyDialog");
+            dlg.classList.add('identifyDialog');
 
             showIdentificationFormFindNew(dlg, itemName, itemYear, itemType);
         });
@@ -482,20 +482,20 @@ define(["dialogHelper", "loading", "connectionManager", "require", "globalize",
 
     function showIdentificationFormFindNew(dlg, itemName, itemYear, itemType) {
 
-        dlg.querySelector("#txtLookupName").value = itemName;
+        dlg.querySelector('#txtLookupName').value = itemName;
 
-        if (itemType === "Person" || itemType === "BoxSet") {
+        if (itemType === 'Person' || itemType === 'BoxSet') {
 
-            dlg.querySelector(".fldLookupYear").classList.add("hide");
-            dlg.querySelector("#txtLookupYear").value = "";
+            dlg.querySelector('.fldLookupYear').classList.add('hide');
+            dlg.querySelector('#txtLookupYear').value = '';
 
         } else {
 
-            dlg.querySelector(".fldLookupYear").classList.remove("hide");
-            dlg.querySelector("#txtLookupYear").value = itemYear;
+            dlg.querySelector('.fldLookupYear').classList.remove('hide');
+            dlg.querySelector('#txtLookupYear').value = itemYear;
         }
 
-        dlg.querySelector(".formDialogHeaderTitle").innerHTML = globalize.translate("Search");
+        dlg.querySelector('.formDialogHeaderTitle').innerHTML = globalize.translate('Search');
     }
 
     return {

src/components/itemidentifier/itemidentifier.template.html

@@ -1,6 +1,6 @@
 <div class="formDialogHeader">
     <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
-        <i class="material-icons arrow_back"></i>
+        <span class="material-icons arrow_back"></span>
     </button>
     <h3 class="formDialogHeaderTitle">${Identify}</h3>
 </div>

src/components/layoutManager.js

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

src/components/lazyLoader/lazyLoaderIntersectionObserver.js

@@ -0,0 +1,67 @@
+/* eslint-disable indent */
+    export class LazyLoader {
+        constructor(options) {
+            this.options = options;
+        }
+
+        createObserver() {
+            const callback = this.options.callback;
+
+            const observer = new IntersectionObserver(
+                (entries) => {
+                    entries.forEach(entry => {
+                        callback(entry);
+                    },
+                    {rootMargin: '50%'});
+                });
+
+            this.observer = observer;
+        }
+
+        addElements(elements) {
+            let observer = this.observer;
+
+            if (!observer) {
+                this.createObserver();
+                observer = this.observer;
+            }
+
+            Array.from(elements).forEach(element => {
+                observer.observe(element);
+            });
+        }
+
+        destroyObserver() {
+            const observer = this.observer;
+
+            if (observer) {
+                observer.disconnect();
+                this.observer = null;
+            }
+        }
+
+        destroy() {
+            this.destroyObserver();
+            this.options = null;
+        }
+    }
+
+    function unveilElements(elements, root, callback) {
+        if (!elements.length) {
+            return;
+        }
+        const lazyLoader = new LazyLoader({
+            callback: callback
+        });
+        lazyLoader.addElements(elements);
+    }
+
+    export function lazyChildren(elem, callback) {
+        unveilElements(elem.getElementsByClassName('lazy'), elem, callback);
+    }
+
+/* eslint-enable indent */
+export default {
+    LazyLoader: LazyLoader,
+    lazyChildren: lazyChildren
+};

src/components/lazyloader/lazyedgehack.css

@@ -1,5 +0,0 @@
-.lazy {
-    /* In edge, intersection observer will not fire on 0px sized elements */
-    min-width: 0.1em;
-    min-height: 0.1em;
-}

src/components/lazyloader/lazyloader-intersectionobserver.js

@@ -1,103 +0,0 @@
-define(['require', 'browser'], function (require, browser) {
-    'use strict';
-
-    function LazyLoader(options) {
-
-        this.options = options;
-    }
-
-    if (browser.edge) {
-        require(['css!./lazyedgehack']);
-    }
-
-    LazyLoader.prototype.createObserver = function () {
-
-        var observerOptions = {};
-        var options = this.options;
-        var loadedCount = 0;
-        var callback = options.callback;
-
-        observerOptions.rootMargin = "50%";
-
-        var observerId = 'obs' + new Date().getTime();
-
-        var self = this;
-        var observer = new IntersectionObserver(function (entries) {
-            for (var j = 0, length2 = entries.length; j < length2; j++) {
-                var entry = entries[j];
-
-                if (entry.intersectionRatio > 0) {
-
-                    // Stop watching and load the image
-                    var target = entry.target;
-
-                    observer.unobserve(target);
-
-                    if (!target[observerId]) {
-                        target[observerId] = 1;
-                        callback(target);
-                        loadedCount++;
-
-                        if (loadedCount >= self.elementCount) {
-                            self.destroyObserver();
-                        }
-                    }
-                }
-            }
-        },
-        observerOptions
-        );
-
-        this.observer = observer;
-    };
-
-    LazyLoader.prototype.addElements = function (elements) {
-
-        var observer = this.observer;
-
-        if (!observer) {
-            this.createObserver();
-            observer = this.observer;
-        }
-
-        this.elementCount = (this.elementCount || 0) + elements.length;
-
-        for (var i = 0, length = elements.length; i < length; i++) {
-            observer.observe(elements[i]);
-        }
-    };
-
-    LazyLoader.prototype.destroyObserver = function (elements) {
-
-        var observer = this.observer;
-
-        if (observer) {
-            observer.disconnect();
-            this.observer = null;
-        }
-    };
-
-    LazyLoader.prototype.destroy = function (elements) {
-
-        this.destroyObserver();
-        this.options = null;
-    };
-
-    function unveilElements(elements, root, callback) {
-
-        if (!elements.length) {
-            return;
-        }
-        var lazyLoader = new LazyLoader({
-            callback: callback
-        });
-        lazyLoader.addElements(elements);
-    }
-
-    LazyLoader.lazyChildren = function (elem, callback) {
-
-        unveilElements(elem.getElementsByClassName('lazy'), elem, callback);
-    };
-
-    return LazyLoader;
-});

src/components/lazyloader/lazyloader-scroll.js

@@ -1,189 +0,0 @@
-define(['visibleinviewport', 'dom', 'browser'], function (visibleinviewport, dom, browser) {
-    'use strict';
-
-    var thresholdX;
-    var thresholdY;
-
-    var requestIdleCallback = window.requestIdleCallback || function (fn) {
-        fn();
-    };
-
-    function resetThresholds() {
-
-        var threshold = 0.3;
-
-        thresholdX = screen.availWidth * threshold;
-        thresholdY = screen.availHeight * threshold;
-    }
-
-    function resetThresholdsOnTimer() {
-
-        setTimeout(resetThresholds, 500);
-    }
-
-    if (browser.iOS) {
-        dom.addEventListener(window, "orientationchange", resetThresholdsOnTimer, { passive: true });
-        dom.addEventListener(window, 'resize', resetThresholdsOnTimer, { passive: true });
-    } else {
-        dom.addEventListener(window, "orientationchange", resetThresholds, { passive: true });
-        dom.addEventListener(window, 'resize', resetThresholds, { passive: true });
-    }
-    resetThresholds();
-
-    function isVisible(elem) {
-        return visibleinviewport(elem, true, thresholdX, thresholdY);
-    }
-
-    var wheelEvent = (document.implementation.hasFeature('Event.wheel', '3.0') ? 'wheel' : 'mousewheel');
-    var self = {};
-
-    function cancelAll(tokens) {
-        for (var i = 0, length = tokens.length; i < length; i++) {
-
-            tokens[i] = true;
-        }
-    }
-
-    function unveilElementsInternal(instance, callback) {
-
-        var unveiledElements = [];
-        var cancellationTokens = [];
-        var loadedCount = 0;
-
-        function unveilInternal(tokenIndex) {
-
-            var anyFound = false;
-            var out = false;
-
-            var elements = instance.elements;
-            // TODO: This out construct assumes left to right, top to bottom
-
-            for (var i = 0, length = elements.length; i < length; i++) {
-
-                if (cancellationTokens[tokenIndex]) {
-                    return;
-                }
-                if (unveiledElements[i]) {
-                    continue;
-                }
-                var elem = elements[i];
-                if (!out && isVisible(elem)) {
-                    anyFound = true;
-                    unveiledElements[i] = true;
-                    callback(elem);
-                    loadedCount++;
-                } else {
-
-                    if (anyFound) {
-                        out = true;
-                    }
-                }
-            }
-
-            if (loadedCount >= elements.length) {
-                dom.removeEventListener(document, 'focus', unveil, {
-                    capture: true,
-                    passive: true
-                });
-                dom.removeEventListener(document, 'scroll', unveil, {
-                    capture: true,
-                    passive: true
-                });
-                dom.removeEventListener(document, wheelEvent, unveil, {
-                    capture: true,
-                    passive: true
-                });
-                dom.removeEventListener(window, 'resize', unveil, {
-                    capture: true,
-                    passive: true
-                });
-            }
-        }
-
-        function unveil() {
-
-            cancelAll(cancellationTokens);
-
-            var index = cancellationTokens.length;
-            cancellationTokens.length++;
-
-            setTimeout(function () {
-                unveilInternal(index);
-            }, 1);
-        }
-
-        dom.addEventListener(document, 'focus', unveil, {
-            capture: true,
-            passive: true
-        });
-        dom.addEventListener(document, 'scroll', unveil, {
-            capture: true,
-            passive: true
-        });
-        dom.addEventListener(document, wheelEvent, unveil, {
-            capture: true,
-            passive: true
-        });
-        dom.addEventListener(window, 'resize', unveil, {
-            capture: true,
-            passive: true
-        });
-
-        unveil();
-    }
-
-    function LazyLoader(options) {
-
-        this.options = options;
-    }
-
-    LazyLoader.prototype.createObserver = function () {
-
-        unveilElementsInternal(this, this.options.callback);
-        this.observer = 1;
-    };
-
-    LazyLoader.prototype.addElements = function (elements) {
-
-        this.elements = this.elements || [];
-
-        for (var i = 0, length = elements.length; i < length; i++) {
-            this.elements.push(elements[i]);
-        }
-
-        var observer = this.observer;
-
-        if (!observer) {
-            this.createObserver();
-        }
-
-    };
-
-    LazyLoader.prototype.destroyObserver = function (elements) {
-
-    };
-
-    LazyLoader.prototype.destroy = function (elements) {
-
-        this.destroyObserver();
-        this.options = null;
-    };
-
-    function unveilElements(elements, root, callback) {
-
-        if (!elements.length) {
-            return;
-        }
-        var lazyLoader = new LazyLoader({
-            callback: callback
-        });
-        lazyLoader.addElements(elements);
-    }
-
-    LazyLoader.lazyChildren = function (elem, callback) {
-
-        unveilElements(elem.getElementsByClassName('lazy'), elem, callback);
-    };
-
-    return LazyLoader;
-});

src/components/libraryoptionseditor/libraryoptionseditor.js

@@ -1,130 +1,136 @@
-define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], function(globalize, dom) {
-    "use strict";
+define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], function(globalize, dom) {
+    'use strict';
 
     function populateLanguages(parent) {
         return ApiClient.getCultures().then(function(languages) {
-            populateLanguagesIntoSelect(parent.querySelector("#selectLanguage"), languages);
-            populateLanguagesIntoList(parent.querySelector(".subtitleDownloadLanguages"), languages);
+            populateLanguagesIntoSelect(parent.querySelector('#selectLanguage'), languages);
+            populateLanguagesIntoList(parent.querySelector('.subtitleDownloadLanguages'), languages);
         });
     }
 
     function populateLanguagesIntoSelect(select, languages) {
-        var html = "";
+        var html = '';
         html += "<option value=''></option>";
         for (var i = 0; i < languages.length; i++) {
             var culture = languages[i];
-            html += "<option value='" + culture.TwoLetterISOLanguageName + "'>" + culture.DisplayName + "</option>";
+            html += "<option value='" + culture.TwoLetterISOLanguageName + "'>" + culture.DisplayName + '</option>';
         }
         select.innerHTML = html;
     }
 
     function populateLanguagesIntoList(element, languages) {
-        var html = "";
+        var html = '';
         for (var i = 0; i < languages.length; i++) {
             var culture = languages[i];
-            html += '<label><input type="checkbox" is="emby-checkbox" class="chkSubtitleLanguage" data-lang="' + culture.ThreeLetterISOLanguageName.toLowerCase() + '" /><span>' + culture.DisplayName + "</span></label>";
+            html += '<label><input type="checkbox" is="emby-checkbox" class="chkSubtitleLanguage" data-lang="' + culture.ThreeLetterISOLanguageName.toLowerCase() + '" /><span>' + culture.DisplayName + '</span></label>';
         }
         element.innerHTML = html;
     }
 
     function populateCountries(select) {
         return ApiClient.getCountries().then(function(allCountries) {
-            var html = "";
+            var html = '';
             html += "<option value=''></option>";
             for (var i = 0; i < allCountries.length; i++) {
                 var culture = allCountries[i];
-                html += "<option value='" + culture.TwoLetterISORegionName + "'>" + culture.DisplayName + "</option>";
+                html += "<option value='" + culture.TwoLetterISORegionName + "'>" + culture.DisplayName + '</option>';
             }
             select.innerHTML = html;
         });
     }
 
     function populateRefreshInterval(select) {
-        var html = "";
-        html += "<option value='0'>" + globalize.translate("Never") + "</option>";
+        var html = '';
+        html += "<option value='0'>" + globalize.translate('Never') + '</option>';
         html += [30, 60, 90].map(function(val) {
-            return "<option value='" + val + "'>" + globalize.translate("EveryNDays", val) + "</option>";
-        }).join("");
+            return "<option value='" + val + "'>" + globalize.translate('EveryNDays', val) + '</option>';
+        }).join('');
         select.innerHTML = html;
     }
 
     function renderMetadataReaders(page, plugins) {
-        var html = "";
-        var elem = page.querySelector(".metadataReaders");
+        var html = '';
+        var elem = page.querySelector('.metadataReaders');
 
-        if (plugins.length < 1) return elem.innerHTML = "", elem.classList.add("hide"), !1;
-        html += '<h3 class="checkboxListLabel">' + globalize.translate("LabelMetadataReaders") + "</h3>";
+        if (plugins.length < 1) return elem.innerHTML = '', elem.classList.add('hide'), !1;
+        html += '<h3 class="checkboxListLabel">' + globalize.translate('LabelMetadataReaders') + '</h3>';
         html += '<div class="checkboxList paperList checkboxList-paperList">';
         for (var i = 0; i < plugins.length; i++) {
             var plugin = plugins[i];
             html += '<div class="listItem localReaderOption sortableOption" data-pluginname="' + plugin.Name + '">';
-            html += '<i class="listItemIcon material-icons live_tv"></i>';
+            html += '<span class="listItemIcon material-icons live_tv"></span>';
             html += '<div class="listItemBody">';
             html += '<h3 class="listItemBodyText">';
             html += plugin.Name;
-            html += "</h3>";
-            html += "</div>";
+            html += '</h3>';
+            html += '</div>';
             if (i > 0) {
-                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="material-icons keyboard_arrow_up"></i></button>';
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate('ButtonUp') + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><span class="material-icons keyboard_arrow_up"></span></button>';
             } else if (plugins.length > 1) {
-                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="material-icons keyboard_arrow_down"></i></button>';
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate('ButtonDown') + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><span class="material-icons keyboard_arrow_down"></span></button>';
             }
-            html += "</div>";
+            html += '</div>';
         }
-        html += "</div>";
-        html += '<div class="fieldDescription">' + globalize.translate("LabelMetadataReadersHelp") + "</div>";
+        html += '</div>';
+        html += '<div class="fieldDescription">' + globalize.translate('LabelMetadataReadersHelp') + '</div>';
         if (plugins.length < 2) {
-            elem.classList.add("hide");
+            elem.classList.add('hide');
         } else {
-            elem.classList.remove("hide");
+            elem.classList.remove('hide');
         }
         elem.innerHTML = html;
         return true;
     }
 
     function renderMetadataSavers(page, metadataSavers) {
-        var html = "";
-        var elem = page.querySelector(".metadataSavers");
-        if (!metadataSavers.length) return elem.innerHTML = "", elem.classList.add("hide"), false;
-        html += '<h3 class="checkboxListLabel">' + globalize.translate("LabelMetadataSavers") + "</h3>";
+        var html = '';
+        var elem = page.querySelector('.metadataSavers');
+        if (!metadataSavers.length) return elem.innerHTML = '', elem.classList.add('hide'), false;
+        html += '<h3 class="checkboxListLabel">' + globalize.translate('LabelMetadataSavers') + '</h3>';
         html += '<div class="checkboxList paperList checkboxList-paperList">';
         for (var i = 0; i < metadataSavers.length; i++) {
             var plugin = metadataSavers[i];
-            html += '<label><input type="checkbox" data-defaultenabled="' + plugin.DefaultEnabled + '" is="emby-checkbox" class="chkMetadataSaver" data-pluginname="' + plugin.Name + '" ' + false + "><span>" + plugin.Name + "</span></label>";
+            html += '<label><input type="checkbox" data-defaultenabled="' + plugin.DefaultEnabled + '" is="emby-checkbox" class="chkMetadataSaver" data-pluginname="' + plugin.Name + '" ' + false + '><span>' + plugin.Name + '</span></label>';
         }
-        html += "</div>";
-        html += '<div class="fieldDescription" style="margin-top:.25em;">' + globalize.translate("LabelMetadataSaversHelp") + "</div>";
+        html += '</div>';
+        html += '<div class="fieldDescription" style="margin-top:.25em;">' + globalize.translate('LabelMetadataSaversHelp') + '</div>';
         elem.innerHTML = html;
-        elem.classList.remove("hide");
+        elem.classList.remove('hide');
         return true;
     }
 
     function getMetadataFetchersForTypeHtml(availableTypeOptions, libraryOptionsForType) {
-        var html = "";
+        var html = '';
         var plugins = availableTypeOptions.MetadataFetchers;
 
         plugins = getOrderedPlugins(plugins, libraryOptionsForType.MetadataFetcherOrder || []);
         if (!plugins.length) return html;
 
         html += '<div class="metadataFetcher" data-type="' + availableTypeOptions.Type + '">';
-        html += '<h3 class="checkboxListLabel">' + globalize.translate("LabelTypeMetadataDownloaders", globalize.translate(availableTypeOptions.Type)) + "</h3>";
+        html += '<h3 class="checkboxListLabel">' + globalize.translate('LabelTypeMetadataDownloaders', globalize.translate(availableTypeOptions.Type)) + '</h3>';
         html += '<div class="checkboxList paperList checkboxList-paperList">';
-        for (var i = 0; i < plugins.length; i++) {
-            var plugin = plugins[i];
+
+        plugins.forEach((plugin, index) => {
             html += '<div class="listItem metadataFetcherItem sortableOption" data-pluginname="' + plugin.Name + '">';
             var isChecked = libraryOptionsForType.MetadataFetchers ? -1 !== libraryOptionsForType.MetadataFetchers.indexOf(plugin.Name) : plugin.DefaultEnabled;
-            var checkedHtml = isChecked ? ' checked="checked"' : "";
-            html += '<label class="listItemCheckboxContainer"><input type="checkbox" is="emby-checkbox" class="chkMetadataFetcher" data-pluginname="' + plugin.Name + '" ' + checkedHtml + "><span></span></label>";
+            var checkedHtml = isChecked ? ' checked="checked"' : '';
+            html += '<label class="listItemCheckboxContainer"><input type="checkbox" is="emby-checkbox" class="chkMetadataFetcher" data-pluginname="' + plugin.Name + '" ' + checkedHtml + '><span></span></label>';
             html += '<div class="listItemBody">';
             html += '<h3 class="listItemBodyText">';
             html += plugin.Name;
-            html += "</h3>";
-            html += "</div>";
-            i > 0 ? html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="material-icons keyboard_arrow_up"></i></button>' : plugins.length > 1 && (html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="material-icons keyboard_arrow_down"></i></button>'), html += "</div>";
-        }
-        html += "</div>";
-        html += '<div class="fieldDescription">' + globalize.translate("LabelMetadataDownloadersHelp") + "</div>";
-        html += "</div>";
+            html += '</h3>';
+            html += '</div>';
+            if (index > 0) {
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate('ButtonUp') + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + index + '"><span class="material-icons keyboard_arrow_up"></span></button>';
+            } else if (plugins.length > 1) {
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate('ButtonDown') + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + index + '"><span class="material-icons keyboard_arrow_down"></span></button>';
+            }
+            html += '</div>';
+        });
+
+        html += '</div>';
+        html += '<div class="fieldDescription">' + globalize.translate('LabelMetadataDownloadersHelp') + '</div>';
+        html += '</div>';
         return html;
     }
 
@@ -138,62 +144,62 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
     }
 
     function renderMetadataFetchers(page, availableOptions, libraryOptions) {
-        var html = "";
-        var elem = page.querySelector(".metadataFetchers");
+        var html = '';
+        var elem = page.querySelector('.metadataFetchers');
         for (var i = 0; i < availableOptions.TypeOptions.length; i++) {
             var availableTypeOptions = availableOptions.TypeOptions[i];
             html += getMetadataFetchersForTypeHtml(availableTypeOptions, getTypeOptions(libraryOptions, availableTypeOptions.Type) || {});
         }
         elem.innerHTML = html;
         if (html) {
-            elem.classList.remove("hide");
-            page.querySelector(".fldAutoRefreshInterval").classList.remove("hide");
-            page.querySelector(".fldMetadataLanguage").classList.remove("hide");
-            page.querySelector(".fldMetadataCountry").classList.remove("hide");
+            elem.classList.remove('hide');
+            page.querySelector('.fldAutoRefreshInterval').classList.remove('hide');
+            page.querySelector('.fldMetadataLanguage').classList.remove('hide');
+            page.querySelector('.fldMetadataCountry').classList.remove('hide');
         } else {
-            elem.classList.add("hide");
-            page.querySelector(".fldAutoRefreshInterval").classList.add("hide");
-            page.querySelector(".fldMetadataLanguage").classList.add("hide");
-            page.querySelector(".fldMetadataCountry").classList.add("hide");
+            elem.classList.add('hide');
+            page.querySelector('.fldAutoRefreshInterval').classList.add('hide');
+            page.querySelector('.fldMetadataLanguage').classList.add('hide');
+            page.querySelector('.fldMetadataCountry').classList.add('hide');
         }
         return true;
     }
 
     function renderSubtitleFetchers(page, availableOptions, libraryOptions) {
-        var html = "";
-        var elem = page.querySelector(".subtitleFetchers");
+        var html = '';
+        var elem = page.querySelector('.subtitleFetchers');
 
         var plugins = availableOptions.SubtitleFetchers;
         plugins = getOrderedPlugins(plugins, libraryOptions.SubtitleFetcherOrder || []);
         if (!plugins.length) return html;
 
-        html += '<h3 class="checkboxListLabel">' + globalize.translate("LabelSubtitleDownloaders") + "</h3>";
+        html += '<h3 class="checkboxListLabel">' + globalize.translate('LabelSubtitleDownloaders') + '</h3>';
         html += '<div class="checkboxList paperList checkboxList-paperList">';
         for (var i = 0; i < plugins.length; i++) {
             var plugin = plugins[i];
             html += '<div class="listItem subtitleFetcherItem sortableOption" data-pluginname="' + plugin.Name + '">';
             var isChecked = libraryOptions.DisabledSubtitleFetchers ? -1 === libraryOptions.DisabledSubtitleFetchers.indexOf(plugin.Name) : plugin.DefaultEnabled;
-            var checkedHtml = isChecked ? ' checked="checked"' : "";
-            html += '<label class="listItemCheckboxContainer"><input type="checkbox" is="emby-checkbox" class="chkSubtitleFetcher" data-pluginname="' + plugin.Name + '" ' + checkedHtml + "><span></span></label>";
+            var checkedHtml = isChecked ? ' checked="checked"' : '';
+            html += '<label class="listItemCheckboxContainer"><input type="checkbox" is="emby-checkbox" class="chkSubtitleFetcher" data-pluginname="' + plugin.Name + '" ' + checkedHtml + '><span></span></label>';
             html += '<div class="listItemBody">';
             html += '<h3 class="listItemBodyText">';
             html += plugin.Name;
-            html += "</h3>";
-            html += "</div>";
+            html += '</h3>';
+            html += '</div>';
             if (i > 0) {
-                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="material-icons keyboard_arrow_up"></i></button>';
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate('ButtonUp') + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><span class="material-icons keyboard_arrow_up"></span></button>';
             } else if (plugins.length > 1) {
-                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="material-icons keyboard_arrow_down"></i></button>';
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate('ButtonDown') + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><span class="material-icons keyboard_arrow_down"></span></button>';
             }
-            html += "</div>";
+            html += '</div>';
         }
-        html += "</div>";
-        html += '<div class="fieldDescription">' + globalize.translate("SubtitleDownloadersHelp") + "</div>";
+        html += '</div>';
+        html += '<div class="fieldDescription">' + globalize.translate('SubtitleDownloadersHelp') + '</div>';
         elem.innerHTML = html;
     }
 
     function getImageFetchersForTypeHtml(availableTypeOptions, libraryOptionsForType) {
-        var html = "";
+        var html = '';
         var plugins = availableTypeOptions.ImageFetchers;
 
         plugins = getOrderedPlugins(plugins, libraryOptionsForType.ImageFetcherOrder || []);
@@ -201,60 +207,60 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
 
         html += '<div class="imageFetcher" data-type="' + availableTypeOptions.Type + '">';
         html += '<div class="flex align-items-center" style="margin:1.5em 0 .5em;">';
-        html += '<h3 class="checkboxListLabel" style="margin:0;">' + globalize.translate("HeaderTypeImageFetchers", availableTypeOptions.Type) + "</h3>";
+        html += '<h3 class="checkboxListLabel" style="margin:0;">' + globalize.translate('HeaderTypeImageFetchers', availableTypeOptions.Type) + '</h3>';
         var supportedImageTypes = availableTypeOptions.SupportedImageTypes || [];
-        if (supportedImageTypes.length > 1 || 1 === supportedImageTypes.length && "Primary" !== supportedImageTypes[0]) {
-            html += '<button is="emby-button" class="raised btnImageOptionsForType" type="button" style="margin-left:1.5em;font-size:90%;"><span>' + globalize.translate("HeaderFetcherSettings") + "</span></button>";
+        if (supportedImageTypes.length > 1 || 1 === supportedImageTypes.length && 'Primary' !== supportedImageTypes[0]) {
+            html += '<button is="emby-button" class="raised btnImageOptionsForType" type="button" style="margin-left:1.5em;font-size:90%;"><span>' + globalize.translate('HeaderFetcherSettings') + '</span></button>';
         }
-        html += "</div>";
+        html += '</div>';
         html += '<div class="checkboxList paperList checkboxList-paperList">';
         for (var i = 0; i < plugins.length; i++) {
             var plugin = plugins[i];
             html += '<div class="listItem imageFetcherItem sortableOption" data-pluginname="' + plugin.Name + '">';
             var isChecked = libraryOptionsForType.ImageFetchers ? -1 !== libraryOptionsForType.ImageFetchers.indexOf(plugin.Name) : plugin.DefaultEnabled;
-            var checkedHtml = isChecked ? ' checked="checked"' : "";
-            html += '<label class="listItemCheckboxContainer"><input type="checkbox" is="emby-checkbox" class="chkImageFetcher" data-pluginname="' + plugin.Name + '" ' + checkedHtml + "><span></span></label>";
+            var checkedHtml = isChecked ? ' checked="checked"' : '';
+            html += '<label class="listItemCheckboxContainer"><input type="checkbox" is="emby-checkbox" class="chkImageFetcher" data-pluginname="' + plugin.Name + '" ' + checkedHtml + '><span></span></label>';
             html += '<div class="listItemBody">';
             html += '<h3 class="listItemBodyText">';
             html += plugin.Name;
-            html += "</h3>";
-            html += "</div>";
+            html += '</h3>';
+            html += '</div>';
             if (i > 0) {
-                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="material-icons keyboard_arrow_up"></i></button>';
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate('ButtonUp') + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><span class="material-icons keyboard_arrow_up"></span></button>';
             } else if (plugins.length > 1) {
-                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="material-icons keyboard_arrow_down"></i></button>';
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate('ButtonDown') + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><span class="material-icons keyboard_arrow_down"></span></button>';
             }
-            html += "</div>";
+            html += '</div>';
         }
-        html += "</div>";
-        html += '<div class="fieldDescription">' + globalize.translate("LabelImageFetchersHelp") + "</div>";
-        html += "</div>";
+        html += '</div>';
+        html += '<div class="fieldDescription">' + globalize.translate('LabelImageFetchersHelp') + '</div>';
+        html += '</div>';
         return html;
     }
 
     function renderImageFetchers(page, availableOptions, libraryOptions) {
-        var html = "";
-        var elem = page.querySelector(".imageFetchers");
+        var html = '';
+        var elem = page.querySelector('.imageFetchers');
         for (var i = 0; i < availableOptions.TypeOptions.length; i++) {
             var availableTypeOptions = availableOptions.TypeOptions[i];
             html += getImageFetchersForTypeHtml(availableTypeOptions, getTypeOptions(libraryOptions, availableTypeOptions.Type) || {});
         }
         elem.innerHTML = html;
         if (html) {
-            elem.classList.remove("hide");
-            page.querySelector(".chkDownloadImagesInAdvanceContainer").classList.remove("hide");
-            page.querySelector(".chkSaveLocalContainer").classList.remove("hide");
+            elem.classList.remove('hide');
+            page.querySelector('.chkDownloadImagesInAdvanceContainer').classList.remove('hide');
+            page.querySelector('.chkSaveLocalContainer').classList.remove('hide');
         } else {
-            elem.classList.add("hide");
-            page.querySelector(".chkDownloadImagesInAdvanceContainer").classList.add("hide");
-            page.querySelector(".chkSaveLocalContainer").classList.add("hide");
+            elem.classList.add('hide');
+            page.querySelector('.chkDownloadImagesInAdvanceContainer').classList.add('hide');
+            page.querySelector('.chkSaveLocalContainer').classList.add('hide');
         }
         return true;
     }
 
     function populateMetadataSettings(parent, contentType, isNewLibrary) {
-        var isNewLibrary = parent.classList.contains("newlibrary");
-        return ApiClient.getJSON(ApiClient.getUrl("Libraries/AvailableOptions", {
+        var isNewLibrary = parent.classList.contains('newlibrary');
+        return ApiClient.getJSON(ApiClient.getUrl('Libraries/AvailableOptions', {
             LibraryContentType: contentType,
             IsNewLibrary: isNewLibrary
         })).then(function(availableOptions) {
@@ -265,70 +271,80 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
             renderMetadataFetchers(parent, availableOptions, {});
             renderSubtitleFetchers(parent, availableOptions, {});
             renderImageFetchers(parent, availableOptions, {});
-            availableOptions.SubtitleFetchers.length ? parent.querySelector(".subtitleDownloadSettings").classList.remove("hide") : parent.querySelector(".subtitleDownloadSettings").classList.add("hide");
+            availableOptions.SubtitleFetchers.length ? parent.querySelector('.subtitleDownloadSettings').classList.remove('hide') : parent.querySelector('.subtitleDownloadSettings').classList.add('hide');
         }).catch(function() {
             return Promise.resolve();
         });
     }
 
     function adjustSortableListElement(elem) {
-        var btnSortable = elem.querySelector(".btnSortable");
-        var inner = btnSortable.querySelector("i");
+        var btnSortable = elem.querySelector('.btnSortable');
+        var inner = btnSortable.querySelector('.material-icons');
         if (elem.previousSibling) {
-            btnSortable.title = globalize.translate("ButtonUp");
-            btnSortable.classList.add("btnSortableMoveUp");
-            btnSortable.classList.remove("btnSortableMoveDown");
-            inner.classList.remove("keyboard_arrow_down");
-            inner.classList.add("keyboard_arrow_up");
+            btnSortable.title = globalize.translate('ButtonUp');
+            btnSortable.classList.add('btnSortableMoveUp');
+            btnSortable.classList.remove('btnSortableMoveDown');
+            inner.classList.remove('keyboard_arrow_down');
+            inner.classList.add('keyboard_arrow_up');
         } else {
-            btnSortable.title = globalize.translate("ButtonDown");
-            btnSortable.classList.remove("btnSortableMoveUp");
-            btnSortable.classList.add("btnSortableMoveDown");
-            inner.classList.remove("keyboard_arrow_up");
-            inner.classList.add("keyboard_arrow_down");
+            btnSortable.title = globalize.translate('ButtonDown');
+            btnSortable.classList.remove('btnSortableMoveUp');
+            btnSortable.classList.add('btnSortableMoveDown');
+            inner.classList.remove('keyboard_arrow_up');
+            inner.classList.add('keyboard_arrow_down');
         }
     }
 
     function showImageOptionsForType(type) {
-        require(["imageoptionseditor"], function(ImageOptionsEditor) {
+        require(['imageoptionseditor'], function(ImageOptionsEditor) {
             var typeOptions = getTypeOptions(currentLibraryOptions, type);
-            typeOptions || (typeOptions = {
-                Type: type
-            }, currentLibraryOptions.TypeOptions.push(typeOptions));
+            if (!typeOptions) {
+                typeOptions = {
+                    Type: type
+                };
+                currentLibraryOptions.TypeOptions.push(typeOptions);
+            }
             var availableOptions = getTypeOptions(currentAvailableOptions || {}, type);
-            (new ImageOptionsEditor).show(type, typeOptions, availableOptions);
+            var imageOptionsEditor = new ImageOptionsEditor();
+            imageOptionsEditor.show(type, typeOptions, availableOptions);
         });
     }
 
     function onImageFetchersContainerClick(e) {
-        var btnImageOptionsForType = dom.parentWithClass(e.target, "btnImageOptionsForType");
+        var btnImageOptionsForType = dom.parentWithClass(e.target, 'btnImageOptionsForType');
         if (btnImageOptionsForType) {
-            return void showImageOptionsForType(dom.parentWithClass(btnImageOptionsForType, "imageFetcher").getAttribute("data-type"));
+            return void showImageOptionsForType(dom.parentWithClass(btnImageOptionsForType, 'imageFetcher').getAttribute('data-type'));
         }
         onSortableContainerClick.call(this, e);
     }
 
     function onSortableContainerClick(e) {
-        var btnSortable = dom.parentWithClass(e.target, "btnSortable");
+        var btnSortable = dom.parentWithClass(e.target, 'btnSortable');
         if (btnSortable) {
-            var li = dom.parentWithClass(btnSortable, "sortableOption");
-            var list = dom.parentWithClass(li, "paperList");
-            if (btnSortable.classList.contains("btnSortableMoveDown")) {
+            var li = dom.parentWithClass(btnSortable, 'sortableOption');
+            var list = dom.parentWithClass(li, 'paperList');
+            if (btnSortable.classList.contains('btnSortableMoveDown')) {
                 var next = li.nextSibling;
-                next && (li.parentNode.removeChild(li), next.parentNode.insertBefore(li, next.nextSibling));
+                if (next) {
+                    li.parentNode.removeChild(li);
+                    next.parentNode.insertBefore(li, next.nextSibling);
+                }
             } else {
                 var prev = li.previousSibling;
-                prev && (li.parentNode.removeChild(li), prev.parentNode.insertBefore(li, prev));
+                if (prev) {
+                    li.parentNode.removeChild(li);
+                    prev.parentNode.insertBefore(li, prev);
+                }
             }
-            Array.prototype.forEach.call(list.querySelectorAll(".sortableOption"), adjustSortableListElement);
+            Array.prototype.forEach.call(list.querySelectorAll('.sortableOption'), adjustSortableListElement);
         }
     }
 
     function bindEvents(parent) {
-        parent.querySelector(".metadataReaders").addEventListener("click", onSortableContainerClick);
-        parent.querySelector(".subtitleFetchers").addEventListener("click", onSortableContainerClick);
-        parent.querySelector(".metadataFetchers").addEventListener("click", onSortableContainerClick);
-        parent.querySelector(".imageFetchers").addEventListener("click", onImageFetchersContainerClick);
+        parent.querySelector('.metadataReaders').addEventListener('click', onSortableContainerClick);
+        parent.querySelector('.subtitleFetchers').addEventListener('click', onSortableContainerClick);
+        parent.querySelector('.metadataFetchers').addEventListener('click', onSortableContainerClick);
+        parent.querySelector('.imageFetchers').addEventListener('click', onImageFetchersContainerClick);
     }
 
     function embed(parent, contentType, libraryOptions) {
@@ -337,15 +353,15 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
         };
         currentAvailableOptions = null;
         var isNewLibrary = null === libraryOptions;
-        isNewLibrary && parent.classList.add("newlibrary");
+        isNewLibrary && parent.classList.add('newlibrary');
         return new Promise(function(resolve, reject) {
             var xhr = new XMLHttpRequest;
-            xhr.open("GET", "components/libraryoptionseditor/libraryoptionseditor.template.html", true);
+            xhr.open('GET', 'components/libraryoptionseditor/libraryoptionseditor.template.html', true);
             xhr.onload = function(e) {
                 var template = this.response;
                 parent.innerHTML = globalize.translateDocument(template);
-                populateRefreshInterval(parent.querySelector("#selectAutoRefreshInterval"));
-                var promises = [populateLanguages(parent), populateCountries(parent.querySelector("#selectCountry"))];
+                populateRefreshInterval(parent.querySelector('#selectAutoRefreshInterval'));
+                var promises = [populateLanguages(parent), populateCountries(parent.querySelector('#selectCountry'))];
                 Promise.all(promises).then(function() {
                     return setContentType(parent, contentType).then(function() {
                         libraryOptions && setLibraryOptions(parent, libraryOptions);
@@ -359,69 +375,69 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
     }
 
     function setAdvancedVisible(parent, visible) {
-        var elems = parent.querySelectorAll(".advanced");
+        var elems = parent.querySelectorAll('.advanced');
         for (var i = 0; i < elems.length; i++) {
-            visible ? elems[i].classList.remove("advancedHide") : elems[i].classList.add("advancedHide");
+            visible ? elems[i].classList.remove('advancedHide') : elems[i].classList.add('advancedHide');
         }
     }
 
     function setContentType(parent, contentType) {
-        if (contentType === "homevideos" || contentType === "photos") {
-            parent.querySelector(".chkEnablePhotosContainer").classList.remove("hide");
+        if (contentType === 'homevideos' || contentType === 'photos') {
+            parent.querySelector('.chkEnablePhotosContainer').classList.remove('hide');
         } else {
-            parent.querySelector(".chkEnablePhotosContainer").classList.add("hide");
+            parent.querySelector('.chkEnablePhotosContainer').classList.add('hide');
         }
 
-        if (contentType !== "tvshows" && contentType !== "movies" && contentType !== "homevideos" && contentType !== "musicvideos" && contentType !== "mixed") {
-            parent.querySelector(".chapterSettingsSection").classList.add("hide");
+        if (contentType !== 'tvshows' && contentType !== 'movies' && contentType !== 'homevideos' && contentType !== 'musicvideos' && contentType !== 'mixed') {
+            parent.querySelector('.chapterSettingsSection').classList.add('hide');
         } else {
-            parent.querySelector(".chapterSettingsSection").classList.remove("hide");
+            parent.querySelector('.chapterSettingsSection').classList.remove('hide');
         }
 
-        if (contentType === "tvshows") {
-            parent.querySelector(".chkImportMissingEpisodesContainer").classList.remove("hide");
-            parent.querySelector(".chkAutomaticallyGroupSeriesContainer").classList.remove("hide");
-            parent.querySelector(".fldSeasonZeroDisplayName").classList.remove("hide");
-            parent.querySelector("#txtSeasonZeroName").setAttribute("required", "required");
+        if (contentType === 'tvshows') {
+            parent.querySelector('.chkImportMissingEpisodesContainer').classList.remove('hide');
+            parent.querySelector('.chkAutomaticallyGroupSeriesContainer').classList.remove('hide');
+            parent.querySelector('.fldSeasonZeroDisplayName').classList.remove('hide');
+            parent.querySelector('#txtSeasonZeroName').setAttribute('required', 'required');
         } else {
-            parent.querySelector(".chkImportMissingEpisodesContainer").classList.add("hide");
-            parent.querySelector(".chkAutomaticallyGroupSeriesContainer").classList.add("hide");
-            parent.querySelector(".fldSeasonZeroDisplayName").classList.add("hide");
-            parent.querySelector("#txtSeasonZeroName").removeAttribute("required");
+            parent.querySelector('.chkImportMissingEpisodesContainer').classList.add('hide');
+            parent.querySelector('.chkAutomaticallyGroupSeriesContainer').classList.add('hide');
+            parent.querySelector('.fldSeasonZeroDisplayName').classList.add('hide');
+            parent.querySelector('#txtSeasonZeroName').removeAttribute('required');
         }
 
-        if (contentType === "books" || contentType === "boxsets" || contentType === "playlists" || contentType === "music") {
-            parent.querySelector(".chkEnableEmbeddedTitlesContainer").classList.add("hide");
+        if (contentType === 'books' || contentType === 'boxsets' || contentType === 'playlists' || contentType === 'music') {
+            parent.querySelector('.chkEnableEmbeddedTitlesContainer').classList.add('hide');
         } else {
-            parent.querySelector(".chkEnableEmbeddedTitlesContainer").classList.remove("hide");
+            parent.querySelector('.chkEnableEmbeddedTitlesContainer').classList.remove('hide');
         }
 
-        if (contentType === "tvshows") {
-            parent.querySelector(".chkEnableEmbeddedEpisodeInfosContainer").classList.remove("hide");
+        if (contentType === 'tvshows') {
+            parent.querySelector('.chkEnableEmbeddedEpisodeInfosContainer').classList.remove('hide');
         } else {
-            parent.querySelector(".chkEnableEmbeddedEpisodeInfosContainer").classList.add("hide");
+            parent.querySelector('.chkEnableEmbeddedEpisodeInfosContainer').classList.add('hide');
         }
 
         return populateMetadataSettings(parent, contentType);
     }
 
     function setSubtitleFetchersIntoOptions(parent, options) {
-        options.DisabledSubtitleFetchers = Array.prototype.map.call(Array.prototype.filter.call(parent.querySelectorAll(".chkSubtitleFetcher"), function(elem) {
+        options.DisabledSubtitleFetchers = Array.prototype.map.call(Array.prototype.filter.call(parent.querySelectorAll('.chkSubtitleFetcher'), function(elem) {
             return !elem.checked;
         }), function(elem) {
-            return elem.getAttribute("data-pluginname");
+            return elem.getAttribute('data-pluginname');
         });
 
-        options.SubtitleFetcherOrder = Array.prototype.map.call(parent.querySelectorAll(".subtitleFetcherItem"), function(elem) {
-            return elem.getAttribute("data-pluginname");
+        options.SubtitleFetcherOrder = Array.prototype.map.call(parent.querySelectorAll('.subtitleFetcherItem'), function(elem) {
+            return elem.getAttribute('data-pluginname');
         });
     }
 
     function setMetadataFetchersIntoOptions(parent, options) {
-        var sections = parent.querySelectorAll(".metadataFetcher");
+        var sections = parent.querySelectorAll('.metadataFetcher');
         for (var i = 0; i < sections.length; i++) {
             var section = sections[i];
-            var type = section.getAttribute("data-type");
+            var type = section.getAttribute('data-type');
             var typeOptions = getTypeOptions(options, type);
             if (!typeOptions) {
                 typeOptions = {
@@ -429,23 +445,23 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
                 };
                 options.TypeOptions.push(typeOptions);
             }
-            typeOptions.MetadataFetchers = Array.prototype.map.call(Array.prototype.filter.call(section.querySelectorAll(".chkMetadataFetcher"), function(elem) {
+            typeOptions.MetadataFetchers = Array.prototype.map.call(Array.prototype.filter.call(section.querySelectorAll('.chkMetadataFetcher'), function(elem) {
                 return elem.checked;
             }), function(elem) {
-                return elem.getAttribute("data-pluginname");
+                return elem.getAttribute('data-pluginname');
             });
 
-            typeOptions.MetadataFetcherOrder = Array.prototype.map.call(section.querySelectorAll(".metadataFetcherItem"), function(elem) {
-                return elem.getAttribute("data-pluginname");
+            typeOptions.MetadataFetcherOrder = Array.prototype.map.call(section.querySelectorAll('.metadataFetcherItem'), function(elem) {
+                return elem.getAttribute('data-pluginname');
             });
         }
     }
 
     function setImageFetchersIntoOptions(parent, options) {
-        var sections = parent.querySelectorAll(".imageFetcher");
+        var sections = parent.querySelectorAll('.imageFetcher');
         for (var i = 0; i < sections.length; i++) {
             var section = sections[i];
-            var type = section.getAttribute("data-type");
+            var type = section.getAttribute('data-type');
             var typeOptions = getTypeOptions(options, type);
             if (!typeOptions) {
                 typeOptions = {
@@ -454,14 +470,14 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
                 options.TypeOptions.push(typeOptions);
             }
 
-            typeOptions.ImageFetchers = Array.prototype.map.call(Array.prototype.filter.call(section.querySelectorAll(".chkImageFetcher"), function(elem) {
+            typeOptions.ImageFetchers = Array.prototype.map.call(Array.prototype.filter.call(section.querySelectorAll('.chkImageFetcher'), function(elem) {
                 return elem.checked;
             }), function(elem) {
-                return elem.getAttribute("data-pluginname");
+                return elem.getAttribute('data-pluginname');
             });
 
-            typeOptions.ImageFetcherOrder = Array.prototype.map.call(section.querySelectorAll(".imageFetcherItem"), function(elem) {
-                return elem.getAttribute("data-pluginname");
+            typeOptions.ImageFetcherOrder = Array.prototype.map.call(section.querySelectorAll('.imageFetcherItem'), function(elem) {
+                return elem.getAttribute('data-pluginname');
             });
         }
     }
@@ -485,40 +501,40 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
     function getLibraryOptions(parent) {
         var options = {
             EnableArchiveMediaFiles: false,
-            EnablePhotos: parent.querySelector(".chkEnablePhotos").checked,
-            EnableRealtimeMonitor: parent.querySelector(".chkEnableRealtimeMonitor").checked,
-            ExtractChapterImagesDuringLibraryScan: parent.querySelector(".chkExtractChaptersDuringLibraryScan").checked,
-            EnableChapterImageExtraction: parent.querySelector(".chkExtractChapterImages").checked,
-            DownloadImagesInAdvance: parent.querySelector("#chkDownloadImagesInAdvance").checked,
+            EnablePhotos: parent.querySelector('.chkEnablePhotos').checked,
+            EnableRealtimeMonitor: parent.querySelector('.chkEnableRealtimeMonitor').checked,
+            ExtractChapterImagesDuringLibraryScan: parent.querySelector('.chkExtractChaptersDuringLibraryScan').checked,
+            EnableChapterImageExtraction: parent.querySelector('.chkExtractChapterImages').checked,
+            DownloadImagesInAdvance: parent.querySelector('#chkDownloadImagesInAdvance').checked,
             EnableInternetProviders: true,
-            ImportMissingEpisodes: parent.querySelector("#chkImportMissingEpisodes").checked,
-            SaveLocalMetadata: parent.querySelector("#chkSaveLocal").checked,
-            EnableAutomaticSeriesGrouping: parent.querySelector(".chkAutomaticallyGroupSeries").checked,
-            PreferredMetadataLanguage: parent.querySelector("#selectLanguage").value,
-            MetadataCountryCode: parent.querySelector("#selectCountry").value,
-            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,
-            RequirePerfectSubtitleMatch: parent.querySelector("#chkRequirePerfectMatch").checked,
-            MetadataSavers: Array.prototype.map.call(Array.prototype.filter.call(parent.querySelectorAll(".chkMetadataSaver"), function(elem) {
+            ImportMissingEpisodes: parent.querySelector('#chkImportMissingEpisodes').checked,
+            SaveLocalMetadata: parent.querySelector('#chkSaveLocal').checked,
+            EnableAutomaticSeriesGrouping: parent.querySelector('.chkAutomaticallyGroupSeries').checked,
+            PreferredMetadataLanguage: parent.querySelector('#selectLanguage').value,
+            MetadataCountryCode: parent.querySelector('#selectCountry').value,
+            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,
+            RequirePerfectSubtitleMatch: parent.querySelector('#chkRequirePerfectMatch').checked,
+            MetadataSavers: Array.prototype.map.call(Array.prototype.filter.call(parent.querySelectorAll('.chkMetadataSaver'), function(elem) {
                 return elem.checked;
             }), function(elem) {
-                return elem.getAttribute("data-pluginname");
+                return elem.getAttribute('data-pluginname');
             }),
             TypeOptions: []
         };
 
-        options.LocalMetadataReaderOrder = Array.prototype.map.call(parent.querySelectorAll(".localReaderOption"), function(elem) {
-            return elem.getAttribute("data-pluginname");
+        options.LocalMetadataReaderOrder = Array.prototype.map.call(parent.querySelectorAll('.localReaderOption'), function(elem) {
+            return elem.getAttribute('data-pluginname');
         });
-        options.SubtitleDownloadLanguages = Array.prototype.map.call(Array.prototype.filter.call(parent.querySelectorAll(".chkSubtitleLanguage"), function(elem) {
+        options.SubtitleDownloadLanguages = Array.prototype.map.call(Array.prototype.filter.call(parent.querySelectorAll('.chkSubtitleLanguage'), function(elem) {
             return elem.checked;
         }), function(elem) {
-            return elem.getAttribute("data-lang");
+            return elem.getAttribute('data-lang');
         });
         setSubtitleFetchersIntoOptions(parent, options);
         setMetadataFetchersIntoOptions(parent, options);
@@ -539,29 +555,29 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
     function setLibraryOptions(parent, options) {
         currentLibraryOptions = options;
         currentAvailableOptions = parent.availableOptions;
-        parent.querySelector("#selectLanguage").value = options.PreferredMetadataLanguage || "";
-        parent.querySelector("#selectCountry").value = options.MetadataCountryCode || "";
-        parent.querySelector("#selectAutoRefreshInterval").value = options.AutomaticRefreshIntervalDays || "0";
-        parent.querySelector("#txtSeasonZeroName").value = options.SeasonZeroDisplayName || "Specials";
-        parent.querySelector(".chkEnablePhotos").checked = options.EnablePhotos;
-        parent.querySelector(".chkEnableRealtimeMonitor").checked = options.EnableRealtimeMonitor;
-        parent.querySelector(".chkExtractChaptersDuringLibraryScan").checked = options.ExtractChapterImagesDuringLibraryScan;
-        parent.querySelector(".chkExtractChapterImages").checked = options.EnableChapterImageExtraction;
-        parent.querySelector("#chkDownloadImagesInAdvance").checked = options.DownloadImagesInAdvance;
-        parent.querySelector("#chkSaveLocal").checked = options.SaveLocalMetadata;
-        parent.querySelector("#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;
-        parent.querySelector("#chkRequirePerfectMatch").checked = options.RequirePerfectSubtitleMatch;
-        Array.prototype.forEach.call(parent.querySelectorAll(".chkMetadataSaver"), function(elem) {
-            elem.checked = options.MetadataSavers ? -1 !== options.MetadataSavers.indexOf(elem.getAttribute("data-pluginname")) : "true" === elem.getAttribute("data-defaultenabled");
+        parent.querySelector('#selectLanguage').value = options.PreferredMetadataLanguage || '';
+        parent.querySelector('#selectCountry').value = options.MetadataCountryCode || '';
+        parent.querySelector('#selectAutoRefreshInterval').value = options.AutomaticRefreshIntervalDays || '0';
+        parent.querySelector('#txtSeasonZeroName').value = options.SeasonZeroDisplayName || 'Specials';
+        parent.querySelector('.chkEnablePhotos').checked = options.EnablePhotos;
+        parent.querySelector('.chkEnableRealtimeMonitor').checked = options.EnableRealtimeMonitor;
+        parent.querySelector('.chkExtractChaptersDuringLibraryScan').checked = options.ExtractChapterImagesDuringLibraryScan;
+        parent.querySelector('.chkExtractChapterImages').checked = options.EnableChapterImageExtraction;
+        parent.querySelector('#chkDownloadImagesInAdvance').checked = options.DownloadImagesInAdvance;
+        parent.querySelector('#chkSaveLocal').checked = options.SaveLocalMetadata;
+        parent.querySelector('#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;
+        parent.querySelector('#chkRequirePerfectMatch').checked = options.RequirePerfectSubtitleMatch;
+        Array.prototype.forEach.call(parent.querySelectorAll('.chkMetadataSaver'), function(elem) {
+            elem.checked = options.MetadataSavers ? -1 !== options.MetadataSavers.indexOf(elem.getAttribute('data-pluginname')) : 'true' === elem.getAttribute('data-defaultenabled');
         });
-        Array.prototype.forEach.call(parent.querySelectorAll(".chkSubtitleLanguage"), function(elem) {
-            elem.checked = !!options.SubtitleDownloadLanguages && -1 !== options.SubtitleDownloadLanguages.indexOf(elem.getAttribute("data-lang"));
+        Array.prototype.forEach.call(parent.querySelectorAll('.chkSubtitleLanguage'), function(elem) {
+            elem.checked = !!options.SubtitleDownloadLanguages && -1 !== options.SubtitleDownloadLanguages.indexOf(elem.getAttribute('data-lang'));
         });
         renderMetadataReaders(parent, getOrderedPlugins(parent.availableOptions.MetadataReaders, options.LocalMetadataReaderOrder || []));
         renderMetadataFetchers(parent, parent.availableOptions, options);

src/components/libraryoptionseditor/libraryoptionseditor.template.html

@@ -79,7 +79,7 @@
 
 <div class="checkboxContainer checkboxContainer-withDescription chkAutomaticallyGroupSeriesContainer hide advanced">
     <label>
-        <input type="checkbox" is="emby-checkbox" class="chkAutomaticallyGroupSeries" checked />
+        <input type="checkbox" is="emby-checkbox" class="chkAutomaticallyGroupSeries" />
         <span>${OptionAutomaticallyGroupSeries}</span>
     </label>
     <div class="fieldDescription checkboxFieldDescription">${OptionAutomaticallyGroupSeriesHelp}</div>

src/components/listview/listview.js

@@ -70,52 +70,53 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
     function getImageUrl(item, width) {
 
         var apiClient = connectionManager.getApiClient(item.ServerId);
+        let itemId;
 
         var options = {
             maxWidth: width * 2,
-            type: "Primary"
+            type: 'Primary'
         };
 
         if (item.ImageTags && item.ImageTags.Primary) {
-
             options.tag = item.ImageTags.Primary;
-            return apiClient.getScaledImageUrl(item.Id, options);
+            itemId = item.Id;
         }
 
         if (item.AlbumId && item.AlbumPrimaryImageTag) {
-
             options.tag = item.AlbumPrimaryImageTag;
-            return apiClient.getScaledImageUrl(item.AlbumId, options);
+            itemId = item.AlbumId;
         } else if (item.SeriesId && item.SeriesPrimaryImageTag) {
-
             options.tag = item.SeriesPrimaryImageTag;
-            return apiClient.getScaledImageUrl(item.SeriesId, options);
-
+            itemId = item.SeriesId;
         } else if (item.ParentPrimaryImageTag) {
-
             options.tag = item.ParentPrimaryImageTag;
-            return apiClient.getScaledImageUrl(item.ParentPrimaryImageItemId, options);
+            itemId = item.ParentPrimaryImageItemId;
         }
+        let blurHashes = item.ImageBlurHashes || {};
+        let blurhashstr = (blurHashes[options.type] || {})[options.tag];
 
-        return null;
+        if (itemId) {
+            return { url: apiClient.getScaledImageUrl(itemId, options), blurhash: blurhashstr };
+        }
     }
 
     function getChannelImageUrl(item, width) {
 
         var apiClient = connectionManager.getApiClient(item.ServerId);
-
         var options = {
             maxWidth: width * 2,
-            type: "Primary"
+            type: 'Primary'
         };
 
         if (item.ChannelId && item.ChannelPrimaryImageTag) {
-
             options.tag = item.ChannelPrimaryImageTag;
-            return apiClient.getScaledImageUrl(item.ChannelId, options);
         }
+        let blurHashes = item.ImageBlurHashes || {};
+        let blurhashstr = (blurHashes[options.type])[options.tag];
 
-        return null;
+        if (item.ChannelId) {
+            return { url: apiClient.getScaledImageUrl(item.ChannelId, options), blurhash: blurhashstr };
+        }
     }
 
     function getTextLinesHtml(textlines, isLargeStyle) {
@@ -160,7 +161,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
 
             var button = options.rightButtons[i];
 
-            html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="custom" data-customaction="' + button.id + '" title="' + button.title + '"><i class="material-icons">' + button.icon + '</i></button>';
+            html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="custom" data-customaction="' + button.id + '" title="' + button.title + '"><span class="material-icons ' + button.icon + '"></span></button>';
         }
 
         return html;
@@ -219,7 +220,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                 }
             }
 
-            var cssClass = "listItem";
+            var cssClass = 'listItem';
 
             if (options.border || (options.highlight !== false && !layoutManager.tv)) {
                 cssClass += ' listItem-border';
@@ -236,7 +237,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
             var downloadWidth = 80;
 
             if (isLargeStyle) {
-                cssClass += " listItem-largeImage";
+                cssClass += ' listItem-largeImage';
                 downloadWidth = 500;
             }
 
@@ -262,14 +263,16 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
             }
 
             if (!clickEntireItem && options.dragHandle) {
-                //html += '<button is="paper-icon-button-light" class="listViewDragHandle listItemButton"><i class="material-icons drag_handle"></i></button>';
+                //html += '<button is="paper-icon-button-light" class="listViewDragHandle listItemButton"><span class="material-icons drag_handle"></span></button>';
                 // Firefox and Edge are not allowing the button to be draggable
-                html += '<i class="listViewDragHandle material-icons listItemIcon listItemIcon-transparent drag_handle"></i>';
+                html += '<span class="listViewDragHandle material-icons listItemIcon listItemIcon-transparent drag_handle"></span>';
             }
 
             if (options.image !== false) {
-                var imgUrl = options.imageSource === 'channel' ? getChannelImageUrl(item, downloadWidth) : getImageUrl(item, downloadWidth);
-                var imageClass = isLargeStyle ? 'listItemImage listItemImage-large' : 'listItemImage';
+                let imgData = options.imageSource === 'channel' ? getChannelImageUrl(item, downloadWidth) : getImageUrl(item, downloadWidth);
+                let imgUrl = imgData.url;
+                let blurhash = imgData.blurhash;
+                let imageClass = isLargeStyle ? 'listItemImage listItemImage-large' : 'listItemImage';
 
                 if (isLargeStyle && layoutManager.tv) {
                     imageClass += ' listItemImage-large-tv';
@@ -283,8 +286,13 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
 
                 var imageAction = playOnImageClick ? 'resume' : action;
 
+                let blurhashAttrib = '';
+                if (blurhash && blurhash.length > 0) {
+                    blurhashAttrib = 'data-blurhash="' + blurhash + '"';
+                }
+
                 if (imgUrl) {
-                    html += '<div data-action="' + imageAction + '" class="' + imageClass + ' lazy" data-src="' + imgUrl + '" item-icon>';
+                    html += '<div data-action="' + imageAction + '" class="' + imageClass + ' lazy" data-src="' + imgUrl + '" ' + blurhashAttrib + ' item-icon>';
                 } else {
                     html += '<div class="' + imageClass + '">';
                 }
@@ -297,7 +305,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                 }
 
                 if (playOnImageClick) {
-                    html += '<button is="paper-icon-button-light" class="listItemImageButton itemAction" data-action="resume"><i class="material-icons listItemImageButton-icon play_arrow"></i></button>';
+                    html += '<button is="paper-icon-button-light" class="listItemImageButton itemAction" data-action="resume"><span class="material-icons listItemImageButton-icon play_arrow"></span></button>';
                 }
 
                 var progressHtml = indicators.getProgressBarHtml(item, {
@@ -355,7 +363,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
             });
 
             if (options.showIndexNumber && item.IndexNumber != null) {
-                displayName = item.IndexNumber + ". " + displayName;
+                displayName = item.IndexNumber + '. ' + displayName;
             }
 
             if (options.showParentTitle && options.parentTitleWithTitle) {
@@ -426,7 +434,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
 
             html += '<div class="' + cssClass + '">';
 
-            var moreIcon = '&#xE5D3;';
+            const moreIcon = 'more_vert';
 
             html += getTextLinesHtml(textlines, isLargeStyle);
 
@@ -475,15 +483,15 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
             if (!clickEntireItem) {
 
                 if (options.addToListButton) {
-                    html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="addtoplaylist"><i class="material-icons playlist_add"></i></button>';
+                    html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="addtoplaylist"><span class="material-icons playlist_add"></span></button>';
                 }
 
                 if (options.moreButton !== false) {
-                    html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="menu"><i class="material-icons">' + moreIcon + '</i></button>';
+                    html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="menu"><span class="material-icons ' + moreIcon + '"></span></button>';
                 }
 
                 if (options.infoButton) {
-                    html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="link"><i class="material-icons info_outline"></i></button>';
+                    html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="link"><span class="material-icons info_outline"></span></button>';
                 }
 
                 if (options.rightButtons) {
@@ -496,11 +504,11 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                     var likes = userData.Likes == null ? '' : userData.Likes;
 
                     if (itemHelper.canMarkPlayed(item)) {
-                        html += '<button is="emby-playstatebutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><i class="material-icons">check</i></button>';
+                        html += '<button is="emby-playstatebutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><span class="material-icons check"></span></button>';
                     }
 
                     if (itemHelper.canRate(item)) {
-                        html += '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="material-icons">favorite</i></button>';
+                        html += '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><span class="material-icons favorite"></span></button>';
                     }
                 }
             }

src/components/loading/loading.js

@@ -19,7 +19,7 @@ define(['components/loading/loadingLegacy', 'browser', 'css!./loading'], functio
 
             if (!elem) {
 
-                elem = document.createElement("div");
+                elem = document.createElement('div');
                 loadingElem = elem;
 
                 elem.classList.add('docspinner');

src/components/loading/loadingLegacy.js

@@ -7,7 +7,7 @@ define(['require', 'css!./loadingLegacy'], function (require) {
         show: function () {
             var elem = loadingElem;
             if (!elem) {
-                elem = document.createElement("img");
+                elem = document.createElement('img');
                 elem.src = require.toUrl('.').split('?')[0] + '/loader.gif';
 
                 loadingElem = elem;

src/components/logoscreensaver/plugin.js

@@ -1,192 +0,0 @@
-define(["pluginManager"], function (pluginManager) {
-
-    return function () {
-
-        var self = this;
-
-        self.name = "Logo ScreenSaver";
-        self.type = "screensaver";
-        self.id = "logoscreensaver";
-        self.supportsAnonymous = true;
-
-        var interval;
-
-        function animate() {
-
-            var animations = [
-
-                bounceInLeft,
-                bounceInRight,
-                swing,
-                tada,
-                wobble,
-                rotateIn,
-                rotateOut
-            ];
-
-            var elem = document.querySelector(".logoScreenSaverImage");
-
-            if (elem && elem.animate) {
-                var random = getRandomInt(0, animations.length - 1);
-
-                animations[random](elem, 1);
-            }
-        }
-
-        function getRandomInt(min, max) {
-            return Math.floor(Math.random() * (max - min + 1)) + min;
-        }
-
-        function bounceInLeft(elem, iterations) {
-            var keyframes = [
-                { transform: "translate3d(-3000px, 0, 0)", opacity: "0", offset: 0 },
-                { transform: "translate3d(25px, 0, 0)", opacity: "1", offset: 0.6 },
-                { transform: "translate3d(-100px, 0, 0)", offset: 0.75 },
-                { transform: "translate3d(5px, 0, 0)", offset: 0.9 },
-                { transform: "none", opacity: "1", offset: 1 }];
-            var timing = { duration: 900, iterations: iterations, easing: "cubic-bezier(0.215, 0.610, 0.355, 1.000)" };
-            return elem.animate(keyframes, timing);
-        }
-
-        function bounceInRight(elem, iterations) {
-            var keyframes = [
-                { transform: "translate3d(3000px, 0, 0)", opacity: "0", offset: 0 },
-                { transform: "translate3d(-25px, 0, 0)", opacity: "1", offset: 0.6 },
-                { transform: "translate3d(100px, 0, 0)", offset: 0.75 },
-                { transform: "translate3d(-5px, 0, 0)", offset: 0.9 },
-                { transform: "none", opacity: "1", offset: 1 }];
-            var timing = { duration: 900, iterations: iterations, easing: "cubic-bezier(0.215, 0.610, 0.355, 1.000)" };
-            return elem.animate(keyframes, timing);
-        }
-
-        function shake(elem, iterations) {
-            var keyframes = [
-                { transform: "translate3d(0, 0, 0)", offset: 0 },
-                { transform: "translate3d(-10px, 0, 0)", offset: 0.1 },
-                { transform: "translate3d(10px, 0, 0)", offset: 0.2 },
-                { transform: "translate3d(-10px, 0, 0)", offset: 0.3 },
-                { transform: "translate3d(10px, 0, 0)", offset: 0.4 },
-                { transform: "translate3d(-10px, 0, 0)", offset: 0.5 },
-                { transform: "translate3d(10px, 0, 0)", offset: 0.6 },
-                { transform: "translate3d(-10px, 0, 0)", offset: 0.7 },
-                { transform: "translate3d(10px, 0, 0)", offset: 0.8 },
-                { transform: "translate3d(-10px, 0, 0)", offset: 0.9 },
-                { transform: "translate3d(0, 0, 0)", offset: 1 }];
-            var timing = { duration: 900, iterations: iterations };
-            return elem.animate(keyframes, timing);
-        }
-
-        function swing(elem, iterations) {
-            var keyframes = [
-                { transform: "translate(0%)", offset: 0 },
-                { transform: "rotate3d(0, 0, 1, 15deg)", offset: 0.2 },
-                { transform: "rotate3d(0, 0, 1, -10deg)", offset: 0.4 },
-                { transform: "rotate3d(0, 0, 1, 5deg)", offset: 0.6 },
-                { transform: "rotate3d(0, 0, 1, -5deg)", offset: 0.8 },
-                { transform: "rotate3d(0, 0, 1, 0deg)", offset: 1 }];
-            var timing = { duration: 900, iterations: iterations };
-            return elem.animate(keyframes, timing);
-        }
-
-        function tada(elem, iterations) {
-            var keyframes = [
-                { transform: "scale3d(1, 1, 1)", offset: 0 },
-                { transform: "scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)", offset: 0.1 },
-                { transform: "scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)", offset: 0.2 },
-                { transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)", offset: 0.3 },
-                { transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)", offset: 0.4 },
-                { transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)", offset: 0.5 },
-                { transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)", offset: 0.6 },
-                { transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)", offset: 0.7 },
-                { transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)", offset: 0.8 },
-                { transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)", offset: 0.9 },
-                { transform: "scale3d(1, 1, 1)", offset: 1 }];
-            var timing = { duration: 900, iterations: iterations };
-            return elem.animate(keyframes, timing);
-        }
-
-        function wobble(elem, iterations) {
-            var keyframes = [
-                { transform: "translate(0%)", offset: 0 },
-                { transform: "translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)", offset: 0.15 },
-                { transform: "translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)", offset: 0.45 },
-                { transform: "translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)", offset: 0.6 },
-                { transform: "translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)", offset: 0.75 },
-                { transform: "translateX(0%)", offset: 1 }];
-            var timing = { duration: 900, iterations: iterations };
-            return elem.animate(keyframes, timing);
-        }
-
-        function rotateIn(elem, iterations) {
-            var transformOrigin = elem.style["transform-origin"];
-            var keyframes = [{ transform: "rotate3d(0, 0, 1, -200deg)", opacity: "0", transformOrigin: "center", offset: 0 },
-                { transform: "none", opacity: "1", transformOrigin: "center", offset: 1 }];
-            var timing = { duration: 900, iterations: iterations };
-            return elem.animate(keyframes, timing);
-        }
-
-        function rotateOut(elem, iterations) {
-            var transformOrigin = elem.style["transform-origin"];
-            var keyframes = [{ transform: "none", opacity: "1", transformOrigin: "center", offset: 0 },
-                { transform: "rotate3d(0, 0, 1, 200deg)", opacity: "0", transformOrigin: "center", offset: 1 }];
-            var timing = { duration: 900, iterations: iterations };
-            return elem.animate(keyframes, timing);
-
-        }
-
-        function fadeOut(elem, iterations) {
-            var keyframes = [
-                { opacity: "1", offset: 0 },
-                { opacity: "0", offset: 1 }];
-            var timing = { duration: 400, iterations: iterations };
-            return elem.animate(keyframes, timing);
-        }
-
-        function stopInterval() {
-            if (interval) {
-                clearInterval(interval);
-                interval = null;
-            }
-        }
-
-        self.show = function () {
-
-            require(["css!" + pluginManager.mapPath(self, "style.css")], function () {
-
-                var elem = document.querySelector(".logoScreenSaver");
-
-                if (!elem) {
-                    elem = document.createElement("div");
-                    elem.classList.add("logoScreenSaver");
-                    document.body.appendChild(elem);
-
-                    elem.innerHTML = '<img class="logoScreenSaverImage" src="assets/img/banner-light.png" />';
-                }
-
-                stopInterval();
-                interval = setInterval(animate, 3000);
-            });
-        };
-
-        self.hide = function () {
-
-            stopInterval();
-
-            var elem = document.querySelector(".logoScreenSaver");
-
-            if (elem) {
-
-                var onAnimationFinish = function () {
-                    elem.parentNode.removeChild(elem);
-                };
-
-                if (elem.animate) {
-                    var animation = fadeOut(elem, 1);
-                    animation.onfinish = onAnimationFinish;
-                } else {
-                    onAnimationFinish();
-                }
-            }
-        };
-    };
-});

src/components/maintabsmanager.js

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

src/components/mediaLibraryCreator/mediaLibraryCreator.js

@@ -1,5 +1,5 @@
-define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionseditor/libraryoptionseditor", "emby-toggle", "emby-input", "emby-select", "paper-icon-button-light", "listViewStyle", "formDialogStyle", "emby-button", "flexStyles"], function (loading, dialogHelper, dom, $, libraryoptionseditor) {
-    "use strict";
+define(['loading', 'dialogHelper', 'dom', 'jQuery', 'components/libraryoptionseditor/libraryoptionseditor', 'globalize', 'emby-toggle', 'emby-input', 'emby-select', 'paper-icon-button-light', 'listViewStyle', 'formDialogStyle', 'emby-button', 'flexStyles'], function (loading, dialogHelper, dom, $, libraryoptionseditor, globalize) {
+    'use strict';
 
     function onAddLibrary() {
         if (isCreating) {
@@ -7,10 +7,10 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed
         }
 
         if (pathInfos.length == 0) {
-            require(["alert"], function (alert) {
+            require(['alert'], function (alert) {
                 alert({
-                    text: Globalize.translate("PleaseAddAtLeastOneFolder"),
-                    type: "error"
+                    text: globalize.translate('PleaseAddAtLeastOneFolder'),
+                    type: 'error'
                 });
             });
 
@@ -19,15 +19,15 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed
 
         isCreating = true;
         loading.show();
-        var dlg = dom.parentWithClass(this, "dlg-librarycreator");
-        var name = $("#txtValue", dlg).val();
-        var type = $("#selectCollectionType", dlg).val();
+        var dlg = dom.parentWithClass(this, 'dlg-librarycreator');
+        var name = $('#txtValue', dlg).val();
+        var type = $('#selectCollectionType', dlg).val();
 
-        if (type == "mixed") {
+        if (type == 'mixed') {
             type = null;
         }
 
-        var libraryOptions = libraryoptionseditor.getLibraryOptions(dlg.querySelector(".libraryOptions"));
+        var libraryOptions = libraryoptionseditor.getLibraryOptions(dlg.querySelector('.libraryOptions'));
         libraryOptions.PathInfos = pathInfos;
         ApiClient.addVirtualFolder(name, type, currentOptions.refresh, libraryOptions).then(function () {
             hasChanges = true;
@@ -35,8 +35,8 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed
             loading.hide();
             dialogHelper.close(dlg);
         }, function () {
-            require(["toast"], function (toast) {
-                toast(Globalize.translate("ErrorAddingMediaPathToVirtualFolder"));
+            require(['toast'], function (toast) {
+                toast(globalize.translate('ErrorAddingMediaPathToVirtualFolder'));
             });
 
             isCreating = false;
@@ -47,50 +47,50 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed
 
     function getCollectionTypeOptionsHtml(collectionTypeOptions) {
         return collectionTypeOptions.map(function (i) {
-            return '<option value="' + i.value + '">' + i.name + "</option>";
-        }).join("");
+            return '<option value="' + i.value + '">' + i.name + '</option>';
+        }).join('');
     }
 
     function initEditor(page, collectionTypeOptions) {
-        $("#selectCollectionType", page).html(getCollectionTypeOptionsHtml(collectionTypeOptions)).val("").on("change", function () {
+        $('#selectCollectionType', page).html(getCollectionTypeOptionsHtml(collectionTypeOptions)).val('').on('change', function () {
             var value = this.value;
-            var dlg = $(this).parents(".dialog")[0];
-            libraryoptionseditor.setContentType(dlg.querySelector(".libraryOptions"), value == "mixed" ? "" : value);
+            var dlg = $(this).parents('.dialog')[0];
+            libraryoptionseditor.setContentType(dlg.querySelector('.libraryOptions'), value == 'mixed' ? '' : value);
 
             if (value) {
-                dlg.querySelector(".libraryOptions").classList.remove("hide");
+                dlg.querySelector('.libraryOptions').classList.remove('hide');
             } else {
-                dlg.querySelector(".libraryOptions").classList.add("hide");
+                dlg.querySelector('.libraryOptions').classList.add('hide');
             }
 
-            if (value != "mixed") {
+            if (value != 'mixed') {
                 var index = this.selectedIndex;
 
                 if (index != -1) {
-                    var name = this.options[index].innerHTML.replace("*", "").replace("&amp;", "&");
-                    $("#txtValue", dlg).val(name);
+                    var name = this.options[index].innerHTML.replace('*', '').replace('&amp;', '&');
+                    $('#txtValue', dlg).val(name);
                     var folderOption = collectionTypeOptions.filter(function (i) {
                         return i.value == value;
                     })[0];
-                    $(".collectionTypeFieldDescription", dlg).html(folderOption.message || "");
+                    $('.collectionTypeFieldDescription', dlg).html(folderOption.message || '');
                 }
             }
         });
-        page.querySelector(".btnAddFolder").addEventListener("click", onAddButtonClick);
-        page.querySelector(".btnSubmit").addEventListener("click", onAddLibrary);
-        page.querySelector(".folderList").addEventListener("click", onRemoveClick);
-        page.querySelector(".chkAdvanced").addEventListener("change", onToggleAdvancedChange);
+        page.querySelector('.btnAddFolder').addEventListener('click', onAddButtonClick);
+        page.querySelector('.btnSubmit').addEventListener('click', onAddLibrary);
+        page.querySelector('.folderList').addEventListener('click', onRemoveClick);
+        page.querySelector('.chkAdvanced').addEventListener('change', onToggleAdvancedChange);
     }
 
     function onToggleAdvancedChange() {
-        var dlg = dom.parentWithClass(this, "dlg-librarycreator");
-        libraryoptionseditor.setAdvancedVisible(dlg.querySelector(".libraryOptions"), this.checked);
+        var dlg = dom.parentWithClass(this, 'dlg-librarycreator');
+        libraryoptionseditor.setAdvancedVisible(dlg.querySelector('.libraryOptions'), this.checked);
     }
 
     function onAddButtonClick() {
-        var page = dom.parentWithClass(this, "dlg-librarycreator");
+        var page = dom.parentWithClass(this, 'dlg-librarycreator');
 
-        require(["directorybrowser"], function (directoryBrowser) {
+        require(['directorybrowser'], function (directoryBrowser) {
             var picker = new directoryBrowser();
             picker.show({
                 enableNetworkSharePath: true,
@@ -106,30 +106,30 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed
     }
 
     function getFolderHtml(pathInfo, index) {
-        var html = "";
+        var html = '';
         html += '<div class="listItem listItem-border lnkPath" style="padding-left:.5em;">';
-        html += '<div class="' + (pathInfo.NetworkPath ? "listItemBody two-line" : "listItemBody") + '">';
-        html += '<div class="listItemBodyText">' + pathInfo.Path + "</div>";
+        html += '<div class="' + (pathInfo.NetworkPath ? 'listItemBody two-line' : 'listItemBody') + '">';
+        html += '<div class="listItemBodyText">' + pathInfo.Path + '</div>';
 
         if (pathInfo.NetworkPath) {
-            html += '<div class="listItemBodyText secondary">' + pathInfo.NetworkPath + "</div>";
+            html += '<div class="listItemBodyText secondary">' + pathInfo.NetworkPath + '</div>';
         }
 
-        html += "</div>";
-        html += '<button type="button" is="paper-icon-button-light"" class="listItemButton btnRemovePath" data-index="' + index + '"><i class="material-icons">remove_circle</i></button>';
-        html += "</div>";
+        html += '</div>';
+        html += '<button type="button" is="paper-icon-button-light"" class="listItemButton btnRemovePath" data-index="' + index + '"><span class="material-icons remove_circle"></span></button>';
+        html += '</div>';
         return html;
     }
 
     function renderPaths(page) {
-        var foldersHtml = pathInfos.map(getFolderHtml).join("");
-        var folderList = page.querySelector(".folderList");
+        var foldersHtml = pathInfos.map(getFolderHtml).join('');
+        var folderList = page.querySelector('.folderList');
         folderList.innerHTML = foldersHtml;
 
         if (foldersHtml) {
-            folderList.classList.remove("hide");
+            folderList.classList.remove('hide');
         } else {
-            folderList.classList.add("hide");
+            folderList.classList.add('hide');
         }
     }
 
@@ -154,14 +154,14 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed
     }
 
     function onRemoveClick(e) {
-        var button = dom.parentWithClass(e.target, "btnRemovePath");
-        var index = parseInt(button.getAttribute("data-index"));
+        var button = dom.parentWithClass(e.target, 'btnRemovePath');
+        var index = parseInt(button.getAttribute('data-index'));
         var location = pathInfos[index].Path;
         var locationLower = location.toLowerCase();
         pathInfos = pathInfos.filter(function (p) {
             return p.Path.toLowerCase() != locationLower;
         });
-        renderPaths(dom.parentWithClass(button, "dlg-librarycreator"));
+        renderPaths(dom.parentWithClass(button, 'dlg-librarycreator'));
     }
 
     function onDialogClosed() {
@@ -169,9 +169,9 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed
     }
 
     function initLibraryOptions(dlg) {
-        libraryoptionseditor.embed(dlg.querySelector(".libraryOptions")).then(function () {
-            $("#selectCollectionType", dlg).trigger("change");
-            onToggleAdvancedChange.call(dlg.querySelector(".chkAdvanced"));
+        libraryoptionseditor.embed(dlg.querySelector('.libraryOptions')).then(function () {
+            $('#selectCollectionType', dlg).trigger('change');
+            onToggleAdvancedChange.call(dlg.querySelector('.chkAdvanced'));
         });
     }
 
@@ -182,25 +182,25 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed
                 currentResolve = resolve;
                 hasChanges = false;
                 var xhr = new XMLHttpRequest();
-                xhr.open("GET", "components/medialibrarycreator/medialibrarycreator.template.html", true);
+                xhr.open('GET', 'components/mediaLibraryCreator/mediaLibraryCreator.template.html', true);
 
                 xhr.onload = function (e) {
                     var template = this.response;
                     var dlg = dialogHelper.createDialog({
-                        size: "medium-tall",
+                        size: 'small',
                         modal: false,
                         removeOnClose: true,
                         scrollY: false
                     });
-                    dlg.classList.add("ui-body-a");
-                    dlg.classList.add("background-theme-a");
-                    dlg.classList.add("dlg-librarycreator");
-                    dlg.classList.add("formDialog");
-                    dlg.innerHTML = Globalize.translateDocument(template);
+                    dlg.classList.add('ui-body-a');
+                    dlg.classList.add('background-theme-a');
+                    dlg.classList.add('dlg-librarycreator');
+                    dlg.classList.add('formDialog');
+                    dlg.innerHTML = globalize.translateDocument(template);
                     initEditor(dlg, options.collectionTypeOptions);
-                    dlg.addEventListener("close", onDialogClosed);
+                    dlg.addEventListener('close', onDialogClosed);
                     dialogHelper.open(dlg);
-                    dlg.querySelector(".btnCancel").addEventListener("click", function () {
+                    dlg.querySelector('.btnCancel').addEventListener('click', function () {
                         dialogHelper.close(dlg);
                     });
                     pathInfos = [];

src/components/mediaLibraryCreator/mediaLibraryCreator.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>
+    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>
     <h3 class="formDialogHeaderTitle">${ButtonAddMediaLibrary}</h3>
 </div>
 
@@ -26,7 +26,7 @@
             <div style="display: flex; align-items: center;">
                 <h1 style="margin: .5em 0;">${HeadersFolders}</h1>
                 <button is="emby-button" type="button" class="fab btnAddFolder submit" style="margin-left:1em;" title="${ButtonAdd}">
-                    <i class="material-icons">add</i>
+                    <span class="material-icons add"></span>
                 </button>
             </div>
             <div class="paperList folderList hide" style="margin-bottom:2em;"></div>

src/components/mediaLibraryEditor/mediaLibraryEditor.js

@@ -1,5 +1,5 @@
-define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionseditor/libraryoptionseditor", "emby-button", "listViewStyle", "paper-icon-button-light", "formDialogStyle", "emby-toggle", "flexStyles"], function (jQuery, loading, dialogHelper, dom, libraryoptionseditor) {
-    "use strict";
+define(['jQuery', 'loading', 'dialogHelper', 'dom', 'components/libraryoptionseditor/libraryoptionseditor', 'globalize', 'emby-button', 'listViewStyle', 'paper-icon-button-light', 'formDialogStyle', 'emby-toggle', 'flexStyles'], function (jQuery, loading, dialogHelper, dom, libraryoptionseditor, globalize) {
+    'use strict';
 
     function onEditLibrary() {
         if (isCreating) {
@@ -8,8 +8,8 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
 
         isCreating = true;
         loading.show();
-        var dlg = dom.parentWithClass(this, "dlg-libraryeditor");
-        var libraryOptions = libraryoptionseditor.getLibraryOptions(dlg.querySelector(".libraryOptions"));
+        var dlg = dom.parentWithClass(this, 'dlg-libraryeditor');
+        var libraryOptions = libraryoptionseditor.getLibraryOptions(dlg.querySelector('.libraryOptions'));
         libraryOptions = Object.assign(currentOptions.library.LibraryOptions || {}, libraryOptions);
         ApiClient.updateVirtualFolderOptions(currentOptions.library.ItemId, libraryOptions).then(function () {
             hasChanges = true;
@@ -30,8 +30,8 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
             hasChanges = true;
             refreshLibraryFromServer(page);
         }, function () {
-            require(["toast"], function (toast) {
-                toast(Globalize.translate("ErrorAddingMediaPathToVirtualFolder"));
+            require(['toast'], function (toast) {
+                toast(globalize.translate('ErrorAddingMediaPathToVirtualFolder'));
             });
         });
     }
@@ -45,8 +45,8 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
             hasChanges = true;
             refreshLibraryFromServer(page);
         }, function () {
-            require(["toast"], function (toast) {
-                toast(Globalize.translate("ErrorAddingMediaPathToVirtualFolder"));
+            require(['toast'], function (toast) {
+                toast(globalize.translate('ErrorAddingMediaPathToVirtualFolder'));
             });
         });
     }
@@ -55,20 +55,20 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
         var button = btnRemovePath;
         var virtualFolder = currentOptions.library;
 
-        require(["confirm"], function (confirm) {
+        require(['confirm'], function (confirm) {
             confirm({
-                title: Globalize.translate("HeaderRemoveMediaLocation"),
-                text: Globalize.translate("MessageConfirmRemoveMediaLocation"),
-                confirmText: Globalize.translate("ButtonDelete"),
-                primary: "delete"
+                title: globalize.translate('HeaderRemoveMediaLocation'),
+                text: globalize.translate('MessageConfirmRemoveMediaLocation'),
+                confirmText: globalize.translate('ButtonDelete'),
+                primary: 'delete'
             }).then(function () {
                 var refreshAfterChange = currentOptions.refresh;
                 ApiClient.removeMediaPath(virtualFolder.Name, location, refreshAfterChange).then(function () {
                     hasChanges = true;
-                    refreshLibraryFromServer(dom.parentWithClass(button, "dlg-libraryeditor"));
+                    refreshLibraryFromServer(dom.parentWithClass(button, 'dlg-libraryeditor'));
                 }, function () {
-                    require(["toast"], function (toast) {
-                        toast(Globalize.translate("DefaultErrorMessage"));
+                    require(['toast'], function (toast) {
+                        toast(globalize.translate('DefaultErrorMessage'));
                     });
                 });
             });
@@ -76,39 +76,39 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
     }
 
     function onListItemClick(e) {
-        var listItem = dom.parentWithClass(e.target, "listItem");
+        var listItem = dom.parentWithClass(e.target, 'listItem');
 
         if (listItem) {
-            var index = parseInt(listItem.getAttribute("data-index"));
+            var index = parseInt(listItem.getAttribute('data-index'));
             var pathInfos = (currentOptions.library.LibraryOptions || {}).PathInfos || [];
             var pathInfo = null == index ? {} : pathInfos[index] || {};
             var originalPath = pathInfo.Path || (null == index ? null : currentOptions.library.Locations[index]);
-            var btnRemovePath = dom.parentWithClass(e.target, "btnRemovePath");
+            var btnRemovePath = dom.parentWithClass(e.target, 'btnRemovePath');
 
             if (btnRemovePath) {
                 onRemoveClick(btnRemovePath, originalPath);
                 return;
             }
 
-            showDirectoryBrowser(dom.parentWithClass(listItem, "dlg-libraryeditor"), originalPath, pathInfo.NetworkPath);
+            showDirectoryBrowser(dom.parentWithClass(listItem, 'dlg-libraryeditor'), originalPath, pathInfo.NetworkPath);
         }
     }
 
     function getFolderHtml(pathInfo, index) {
-        var html = "";
+        var html = '';
         html += '<div class="listItem listItem-border lnkPath" data-index="' + index + '" style="padding-left:.5em;">';
-        html += '<div class="' + (pathInfo.NetworkPath ? "listItemBody two-line" : "listItemBody") + '">';
+        html += '<div class="' + (pathInfo.NetworkPath ? 'listItemBody two-line' : 'listItemBody') + '">';
         html += '<h3 class="listItemBodyText">';
         html += pathInfo.Path;
-        html += "</h3>";
+        html += '</h3>';
 
         if (pathInfo.NetworkPath) {
-            html += '<div class="listItemBodyText secondary">' + pathInfo.NetworkPath + "</div>";
+            html += '<div class="listItemBodyText secondary">' + pathInfo.NetworkPath + '</div>';
         }
 
-        html += "</div>";
-        html += '<button type="button" is="paper-icon-button-light" class="listItemButton btnRemovePath" data-index="' + index + '"><i class="material-icons">remove_circle</i></button>';
-        html += "</div>";
+        html += '</div>';
+        html += '<button type="button" is="paper-icon-button-light" class="listItemButton btnRemovePath" data-index="' + index + '"><span class="material-icons remove_circle"></span></button>';
+        html += '</div>';
         return html;
     }
 
@@ -137,20 +137,20 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
         }
 
         if (options.library.CollectionType === 'boxsets') {
-            page.querySelector(".folders").classList.add("hide");
+            page.querySelector('.folders').classList.add('hide');
         } else {
-            page.querySelector(".folders").classList.remove("hide");
+            page.querySelector('.folders').classList.remove('hide');
         }
 
-        page.querySelector(".folderList").innerHTML = pathInfos.map(getFolderHtml).join("");
+        page.querySelector('.folderList').innerHTML = pathInfos.map(getFolderHtml).join('');
     }
 
     function onAddButtonClick() {
-        showDirectoryBrowser(dom.parentWithClass(this, "dlg-libraryeditor"));
+        showDirectoryBrowser(dom.parentWithClass(this, 'dlg-libraryeditor'));
     }
 
     function showDirectoryBrowser(context, originalPath, networkPath) {
-        require(["directorybrowser"], function (directoryBrowser) {
+        require(['directorybrowser'], function (directoryBrowser) {
             var picker = new directoryBrowser();
             picker.show({
                 enableNetworkSharePath: true,
@@ -173,18 +173,18 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
     }
 
     function onToggleAdvancedChange() {
-        var dlg = dom.parentWithClass(this, "dlg-libraryeditor");
-        libraryoptionseditor.setAdvancedVisible(dlg.querySelector(".libraryOptions"), this.checked);
+        var dlg = dom.parentWithClass(this, 'dlg-libraryeditor');
+        libraryoptionseditor.setAdvancedVisible(dlg.querySelector('.libraryOptions'), this.checked);
     }
 
     function initEditor(dlg, options) {
         renderLibrary(dlg, options);
-        dlg.querySelector(".btnAddFolder").addEventListener("click", onAddButtonClick);
-        dlg.querySelector(".folderList").addEventListener("click", onListItemClick);
-        dlg.querySelector(".chkAdvanced").addEventListener("change", onToggleAdvancedChange);
-        dlg.querySelector(".btnSubmit").addEventListener("click", onEditLibrary);
-        libraryoptionseditor.embed(dlg.querySelector(".libraryOptions"), options.library.CollectionType, options.library.LibraryOptions).then(function () {
-            onToggleAdvancedChange.call(dlg.querySelector(".chkAdvanced"));
+        dlg.querySelector('.btnAddFolder').addEventListener('click', onAddButtonClick);
+        dlg.querySelector('.folderList').addEventListener('click', onListItemClick);
+        dlg.querySelector('.chkAdvanced').addEventListener('change', onToggleAdvancedChange);
+        dlg.querySelector('.btnSubmit').addEventListener('click', onEditLibrary);
+        libraryoptionseditor.embed(dlg.querySelector('.libraryOptions'), options.library.CollectionType, options.library.LibraryOptions).then(function () {
+            onToggleAdvancedChange.call(dlg.querySelector('.chkAdvanced'));
         });
     }
 
@@ -199,26 +199,26 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
             currentDeferred = deferred;
             hasChanges = false;
             var xhr = new XMLHttpRequest();
-            xhr.open("GET", "components/medialibraryeditor/medialibraryeditor.template.html", true);
+            xhr.open('GET', 'components/mediaLibraryEditor/mediaLibraryEditor.template.html', true);
 
             xhr.onload = function (e) {
                 var template = this.response;
                 var dlg = dialogHelper.createDialog({
-                    size: "medium-tall",
+                    size: 'small',
                     modal: false,
                     removeOnClose: true,
                     scrollY: false
                 });
-                dlg.classList.add("dlg-libraryeditor");
-                dlg.classList.add("ui-body-a");
-                dlg.classList.add("background-theme-a");
-                dlg.classList.add("formDialog");
-                dlg.innerHTML = Globalize.translateDocument(template);
-                dlg.querySelector(".formDialogHeaderTitle").innerHTML = options.library.Name;
+                dlg.classList.add('dlg-libraryeditor');
+                dlg.classList.add('ui-body-a');
+                dlg.classList.add('background-theme-a');
+                dlg.classList.add('formDialog');
+                dlg.innerHTML = globalize.translateDocument(template);
+                dlg.querySelector('.formDialogHeaderTitle').innerHTML = options.library.Name;
                 initEditor(dlg, options);
-                dlg.addEventListener("close", onDialogClosed);
+                dlg.addEventListener('close', onDialogClosed);
                 dialogHelper.open(dlg);
-                dlg.querySelector(".btnCancel").addEventListener("click", function () {
+                dlg.querySelector('.btnCancel').addEventListener('click', function () {
                     dialogHelper.close(dlg);
                 });
                 refreshLibraryFromServer(dlg);

src/components/mediaLibraryEditor/mediaLibraryEditor.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>
+    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>
     <h3 class="formDialogHeaderTitle"></h3>
 </div>
 
@@ -20,7 +20,7 @@
             <div style="display: flex; align-items: center;">
                 <h1 style="margin: .5em 0;">${HeadersFolders}</h1>
                 <button is="emby-button" type="button" class="fab btnAddFolder submit" style="margin-left:1em;" title="${ButtonAdd}">
-                    <i class="material-icons">add</i>
+                    <span class="material-icons add"></span>
                 </button>
             </div>
             <div class="paperList folderList" style="margin-bottom:2em;"></div>

src/components/mediainfo/mediainfo.js

@@ -6,7 +6,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
         var status;
 
         if (item.Type === 'SeriesTimer') {
-            return '<i class="material-icons mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon fiber_smart_record"></i>';
+            return '<span class="material-icons mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon fiber_smart_record"></span>';
         } else if (item.TimerId || item.SeriesTimerId) {
 
             status = item.Status || 'Cancelled';
@@ -20,13 +20,13 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
         if (item.SeriesTimerId) {
 
             if (status !== 'Cancelled') {
-                return '<i class="material-icons mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon fiber_smart_record"></i>';
+                return '<span class="material-icons mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon fiber_smart_record"></span>';
             }
 
-            return '<i class="material-icons mediaInfoItem mediaInfoIconItem fiber_smart_record"></i>';
+            return '<span class="material-icons mediaInfoItem mediaInfoIconItem fiber_smart_record"></span>';
         }
 
-        return '<i class="material-icons mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon fiber_manual_record"></i>';
+        return '<span class="material-icons mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon fiber_manual_record"></span>';
     }
 
     function getProgramInfoHtml(item, options) {
@@ -57,7 +57,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
 
                 miscInfo.push(text);
             } catch (e) {
-                console.error("error parsing date: " + item.StartDate);
+                console.error('error parsing date: ' + item.StartDate);
             }
         }
 
@@ -109,7 +109,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
         var minutes;
         var count;
 
-        var showFolderRuntime = item.Type === "MusicAlbum" || item.MediaType === 'MusicArtist' || item.MediaType === 'Playlist' || item.MediaType === 'MusicGenre';
+        var showFolderRuntime = item.Type === 'MusicAlbum' || item.MediaType === 'MusicArtist' || item.MediaType === 'Playlist' || item.MediaType === 'MusicGenre';
 
         if (showFolderRuntime) {
 
@@ -123,7 +123,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
             if (item.RunTimeTicks) {
                 miscInfo.push(datetime.getDisplayRunningTime(item.RunTimeTicks));
             }
-        } else if (item.Type === "PhotoAlbum" || item.Type === "BoxSet") {
+        } else if (item.Type === 'PhotoAlbum' || item.Type === 'BoxSet') {
 
             count = item.ChildCount;
 
@@ -133,7 +133,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
             }
         }
 
-        if ((item.Type === "Episode" || item.MediaType === 'Photo') && options.originalAirDate !== false) {
+        if ((item.Type === 'Episode' || item.MediaType === 'Photo') && options.originalAirDate !== false) {
 
             if (item.PremiereDate) {
 
@@ -143,7 +143,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
                     text = datetime.toLocaleDateString(date);
                     miscInfo.push(text);
                 } catch (e) {
-                    console.error("error parsing date: " + item.PremiereDate);
+                    console.error('error parsing date: ' + item.PremiereDate);
                 }
             }
         }
@@ -171,18 +171,18 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
                 text = datetime.toLocaleDateString(date);
                 miscInfo.push(text);
 
-                if (item.Type !== "Recording") {
+                if (item.Type !== 'Recording') {
                     text = datetime.getDisplayTime(date);
                     miscInfo.push(text);
                 }
             } catch (e) {
-                console.error("error parsing date: " + item.StartDate);
+                console.error('error parsing date: ' + item.StartDate);
             }
         }
 
-        if (options.year !== false && item.ProductionYear && item.Type === "Series") {
+        if (options.year !== false && item.ProductionYear && item.Type === 'Series') {
 
-            if (item.Status === "Continuing") {
+            if (item.Status === 'Continuing') {
                 miscInfo.push(globalize.translate('SeriesYearToPresent', item.ProductionYear));
 
             } else if (item.ProductionYear) {
@@ -196,11 +196,11 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
                         var endYear = datetime.parseISO8601Date(item.EndDate).getFullYear();
 
                         if (endYear !== item.ProductionYear) {
-                            text += "-" + datetime.parseISO8601Date(item.EndDate).getFullYear();
+                            text += '-' + datetime.parseISO8601Date(item.EndDate).getFullYear();
                         }
 
                     } catch (e) {
-                        console.error("error parsing date: " + item.EndDate);
+                        console.error('error parsing date: ' + item.EndDate);
                     }
                 }
 
@@ -248,7 +248,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
                     text = globalize.translate('OriginalAirDateValue', datetime.toLocaleDateString(date));
                     miscInfo.push(text);
                 } catch (e) {
-                    console.error("error parsing date: " + item.PremiereDate);
+                    console.error('error parsing date: ' + item.PremiereDate);
                 }
             } else if (item.ProductionYear) {
                 miscInfo.push(item.ProductionYear);
@@ -256,7 +256,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
         }
 
         if (options.year !== false) {
-            if (item.Type !== "Series" && item.Type !== "Episode" && item.Type !== "Person" && item.MediaType !== 'Photo' && item.Type !== 'Program' && item.Type !== 'Season') {
+            if (item.Type !== 'Series' && item.Type !== 'Episode' && item.Type !== 'Person' && item.MediaType !== 'Photo' && item.Type !== 'Program' && item.Type !== 'Season') {
 
                 if (item.ProductionYear) {
 
@@ -267,15 +267,15 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
                         text = datetime.parseISO8601Date(item.PremiereDate).getFullYear();
                         miscInfo.push(text);
                     } catch (e) {
-                        console.error("error parsing date: " + item.PremiereDate);
+                        console.error('error parsing date: ' + item.PremiereDate);
                     }
                 }
             }
         }
 
-        if (item.RunTimeTicks && item.Type !== "Series" && item.Type !== 'Program' && !showFolderRuntime && options.runtime !== false) {
+        if (item.RunTimeTicks && item.Type !== 'Series' && item.Type !== 'Program' && item.Type !== 'Book' && !showFolderRuntime && options.runtime !== false) {
 
-            if (item.Type === "Audio") {
+            if (item.Type === 'Audio') {
 
                 miscInfo.push(datetime.getDisplayRunningTime(item.RunTimeTicks));
 
@@ -284,11 +284,11 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
 
                 minutes = minutes || 1;
 
-                miscInfo.push(Math.round(minutes) + " mins");
+                miscInfo.push(Math.round(minutes) + ' mins');
             }
         }
 
-        if (item.OfficialRating && item.Type !== "Season" && item.Type !== "Episode") {
+        if (item.OfficialRating && item.Type !== 'Season' && item.Type !== 'Episode') {
             miscInfo.push({
                 text: item.OfficialRating,
                 cssClass: 'mediaInfoOfficialRating'
@@ -296,11 +296,11 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
         }
 
         if (item.Video3DFormat) {
-            miscInfo.push("3D");
+            miscInfo.push('3D');
         }
 
         if (item.MediaType === 'Photo' && item.Width && item.Height) {
-            miscInfo.push(item.Width + "x" + item.Height);
+            miscInfo.push(item.Width + 'x' + item.Height);
         }
 
         if (options.container !== false && item.Type === 'Audio' && item.Container) {
@@ -390,7 +390,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
         if (item.CommunityRating) {
             html += '<div class="starRatingContainer mediaInfoItem">';
 
-            html += '<i class="material-icons starIcon">star</i>';
+            html += '<span class="material-icons starIcon star"></span>';
             html += item.CommunityRating.toFixed(1);
             html += '</div>';
         }
@@ -490,26 +490,26 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
                 if (i.IsInterlaced) {
                     return '1440i';
                 }
-                return '1440P';
+                return '1440p';
             }
             if (width >= 1800 || height >= 1000) {
                 if (i.IsInterlaced) {
                     return '1080i';
                 }
-                return '1080P';
+                return '1080p';
             }
             if (width >= 1200 || height >= 700) {
                 if (i.IsInterlaced) {
                     return '720i';
                 }
-                return '720P';
+                return '720p';
             }
             if (width >= 700 || height >= 400) {
 
                 if (i.IsInterlaced) {
                     return '480i';
                 }
-                return '480P';
+                return '480p';
             }
 
         }

src/components/metadataEditor/metadataEditor.js

@@ -142,9 +142,9 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
             Status: form.querySelector('#selectStatus').value,
             AirDays: getSelectedAirDays(form),
             AirTime: form.querySelector('#txtAirTime').value,
-            Genres: getListValues(form.querySelector("#listGenres")),
-            Tags: getListValues(form.querySelector("#listTags")),
-            Studios: getListValues(form.querySelector("#listStudios")).map(function (element) {
+            Genres: getListValues(form.querySelector('#listGenres')),
+            Tags: getListValues(form.querySelector('#listTags')),
+            Studios: getListValues(form.querySelector('#listStudios')).map(function (element) {
                 return { Name: element };
             }),
 
@@ -158,7 +158,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
             OfficialRating: form.querySelector('#selectOfficialRating').value,
             CustomRating: form.querySelector('#selectCustomRating').value,
             People: currentItem.People,
-            LockData: form.querySelector("#chkLockData").checked,
+            LockData: form.querySelector('#chkLockData').checked,
             LockedFields: Array.prototype.filter.call(form.querySelectorAll('.selectLockedField'), function (c) {
                 return !c.checked;
             }).map(function (c) {
@@ -177,14 +177,14 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
         item.PreferredMetadataLanguage = form.querySelector('#selectLanguage').value;
         item.PreferredMetadataCountryCode = form.querySelector('#selectCountry').value;
 
-        if (currentItem.Type === "Person") {
+        if (currentItem.Type === 'Person') {
 
             var placeOfBirth = form.querySelector('#txtPlaceOfBirth').value;
 
             item.ProductionLocations = placeOfBirth ? [placeOfBirth] : [];
         }
 
-        if (currentItem.Type === "Series") {
+        if (currentItem.Type === 'Series') {
 
             // 600000000
             var seriesRuntime = form.querySelector('#txtSeriesRuntime').value;
@@ -245,50 +245,6 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
         });
     }
 
-    function showMoreMenu(context, button, user) {
-
-        require(['itemContextMenu'], function (itemContextMenu) {
-
-            var item = currentItem;
-
-            itemContextMenu.show({
-
-                item: item,
-                positionTo: button,
-                edit: false,
-                editImages: true,
-                editSubtitles: true,
-                sync: false,
-                share: false,
-                play: false,
-                queue: false,
-                user: user
-
-            }).then(function (result) {
-
-                if (result.deleted) {
-                    afterDeleted(context, item);
-
-                } else if (result.updated) {
-                    reload(context, item.Id, item.ServerId);
-                }
-            });
-        });
-    }
-
-    function afterDeleted(context, item) {
-
-        var parentId = item.ParentId || item.SeasonId || item.SeriesId;
-
-        if (parentId) {
-            reload(context, parentId, item.ServerId);
-        } else {
-            require(['appRouter'], function (appRouter) {
-                appRouter.goHome();
-            });
-        }
-    }
-
     function onEditorClick(e) {
 
         var btnRemoveFromEditorList = dom.parentWithClass(e.target, 'btnRemoveFromEditorList');
@@ -307,6 +263,12 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
         return connectionManager.getApiClient(currentItem.ServerId);
     }
 
+    function bindAll(elems, eventName, fn) {
+        for (var i = 0, length = elems.length; i < length; i++) {
+            elems[i].addEventListener(eventName, fn);
+        }
+    }
+
     function init(context, apiClient) {
 
         context.querySelector('.externalIds').addEventListener('click', function (e) {
@@ -322,19 +284,16 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
             }
         });
 
-        context.querySelector('.btnCancel').addEventListener('click', function () {
+        if (!layoutManager.desktop) {
+            context.querySelector('.btnBack').classList.remove('hide');
+            context.querySelector('.btnClose').classList.add('hide');
+        }
 
+        bindAll(context.querySelectorAll('.btnCancel'), 'click', function (event) {
+            event.preventDefault();
             closeDialog(false);
         });
 
-        context.querySelector('.btnMore').addEventListener('click', function (e) {
-
-            getApiClient().getCurrentUser().then(function (user) {
-                showMoreMenu(context, e.target, user);
-            });
-
-        });
-
         context.querySelector('.btnHeaderSave').addEventListener('click', function (e) {
 
             context.querySelector('.btnSave').click();
@@ -349,14 +308,14 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
             }
         });
 
-        context.removeEventListener('click', onEditorClick);
-        context.addEventListener('click', onEditorClick);
+        context.removeEventListener('submit', onEditorClick);
+        context.addEventListener('submit', onEditorClick);
 
         var form = context.querySelector('form');
         form.removeEventListener('submit', onSubmit);
         form.addEventListener('submit', onSubmit);
 
-        context.querySelector("#btnAddPerson").addEventListener('click', function (event, data) {
+        context.querySelector('#btnAddPerson').addEventListener('click', function (event, data) {
 
             editPerson(context, {}, -1);
         });
@@ -403,7 +362,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
     function populateCountries(select, allCountries) {
 
-        var html = "";
+        var html = '';
 
         html += "<option value=''></option>";
 
@@ -411,7 +370,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
             var culture = allCountries[i];
 
-            html += "<option value='" + culture.TwoLetterISORegionName + "'>" + culture.DisplayName + "</option>";
+            html += "<option value='" + culture.TwoLetterISORegionName + "'>" + culture.DisplayName + '</option>';
         }
 
         select.innerHTML = html;
@@ -419,7 +378,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
     function populateLanguages(select, languages) {
 
-        var html = "";
+        var html = '';
 
         html += "<option value=''></option>";
 
@@ -427,7 +386,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
             var culture = languages[i];
 
-            html += "<option value='" + culture.TwoLetterISOLanguageName + "'>" + culture.DisplayName + "</option>";
+            html += "<option value='" + culture.TwoLetterISOLanguageName + "'>" + culture.DisplayName + '</option>';
         }
 
         select.innerHTML = html;
@@ -462,12 +421,12 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
             var idInfo = externalIds[i];
 
-            var id = "txt1" + idInfo.Key;
+            var id = 'txt1' + idInfo.Key;
             var formatString = idInfo.UrlFormatString || '';
 
             var fullName = idInfo.Name;
             if (idInfo.Type) {
-                fullName = idInfo.Name + " " + globalize.translate(idInfo.Type);
+                fullName = idInfo.Name + ' ' + globalize.translate(idInfo.Type);
             }
 
             var labelText = globalize.translate('LabelDynamicExternalId', fullName);
@@ -482,7 +441,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
             html += '</div>';
 
             if (formatString) {
-                html += '<button type="button" is="paper-icon-button-light" class="btnOpenExternalId align-self-flex-end" data-fieldid="' + id + '"><i class="material-icons open_in_browser"></i></button>';
+                html += '<button type="button" is="paper-icon-button-light" class="btnOpenExternalId align-self-flex-end" data-fieldid="' + id + '"><span class="material-icons open_in_browser"></span></button>';
             }
             html += '</div>';
 
@@ -544,37 +503,37 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
             hideElement('#fldPath', context);
         }
 
-        if (item.Type === "Series" || item.Type === "Movie" || item.Type === "Trailer") {
+        if (item.Type === 'Series' || item.Type === 'Movie' || item.Type === 'Trailer') {
             showElement('#fldOriginalName', context);
         } else {
             hideElement('#fldOriginalName', context);
         }
 
-        if (item.Type === "Series") {
+        if (item.Type === 'Series') {
             showElement('#fldSeriesRuntime', context);
         } else {
             hideElement('#fldSeriesRuntime', context);
         }
 
-        if (item.Type === "Series" || item.Type === "Person") {
+        if (item.Type === 'Series' || item.Type === 'Person') {
             showElement('#fldEndDate', context);
         } else {
             hideElement('#fldEndDate', context);
         }
 
-        if (item.Type === "MusicAlbum") {
+        if (item.Type === 'MusicAlbum') {
             showElement('#albumAssociationMessage', context);
         } else {
             hideElement('#albumAssociationMessage', context);
         }
 
-        if (item.Type === "Movie" || item.Type === "Trailer") {
+        if (item.Type === 'Movie' || item.Type === 'Trailer') {
             showElement('#fldCriticRating', context);
         } else {
             hideElement('#fldCriticRating', context);
         }
 
-        if (item.Type === "Series") {
+        if (item.Type === 'Series') {
             showElement('#fldStatus', context);
             showElement('#fldAirDays', context);
             showElement('#fldAirTime', context);
@@ -584,19 +543,19 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
             hideElement('#fldAirTime', context);
         }
 
-        if (item.MediaType === "Video" && item.Type !== "TvChannel") {
+        if (item.MediaType === 'Video' && item.Type !== 'TvChannel') {
             showElement('#fld3dFormat', context);
         } else {
             hideElement('#fld3dFormat', context);
         }
 
-        if (item.Type === "Audio") {
+        if (item.Type === 'Audio') {
             showElement('#fldAlbumArtist', context);
         } else {
             hideElement('#fldAlbumArtist', context);
         }
 
-        if (item.Type === "Audio" || item.Type === "MusicVideo") {
+        if (item.Type === 'Audio' || item.Type === 'MusicVideo') {
             showElement('#fldArtist', context);
             showElement('#fldAlbum', context);
         } else {
@@ -604,29 +563,29 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
             hideElement('#fldAlbum', context);
         }
 
-        if (item.Type === "Episode" && item.ParentIndexNumber === 0) {
+        if (item.Type === 'Episode' && item.ParentIndexNumber === 0) {
             showElement('#collapsibleSpecialEpisodeInfo', context);
         } else {
             hideElement('#collapsibleSpecialEpisodeInfo', context);
         }
 
-        if (item.Type === "Person" ||
-            item.Type === "Genre" ||
-            item.Type === "Studio" ||
-            item.Type === "MusicGenre" ||
-            item.Type === "TvChannel" ||
-            item.Type === "Book") {
+        if (item.Type === 'Person' ||
+            item.Type === 'Genre' ||
+            item.Type === 'Studio' ||
+            item.Type === 'MusicGenre' ||
+            item.Type === 'TvChannel' ||
+            item.Type === 'Book') {
             hideElement('#peopleCollapsible', context);
         } else {
             showElement('#peopleCollapsible', context);
         }
 
-        if (item.Type === "Person" || item.Type === "Genre" || item.Type === "Studio" || item.Type === "MusicGenre" || item.Type === "TvChannel") {
+        if (item.Type === 'Person' || item.Type === 'Genre' || item.Type === 'Studio' || item.Type === 'MusicGenre' || item.Type === 'TvChannel') {
             hideElement('#fldCommunityRating', context);
             hideElement('#genresCollapsible', context);
             hideElement('#studiosCollapsible', context);
 
-            if (item.Type === "TvChannel") {
+            if (item.Type === 'TvChannel') {
                 showElement('#fldOfficialRating', context);
             } else {
                 hideElement('#fldOfficialRating', context);
@@ -642,7 +601,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
         showElement('#tagsCollapsible', context);
 
-        if (item.Type === "TvChannel") {
+        if (item.Type === 'TvChannel') {
             hideElement('#metadataSettingsCollapsible', context);
             hideElement('#fldPremiereDate', context);
             hideElement('#fldDateAdded', context);
@@ -654,39 +613,39 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
             showElement('#fldYear', context);
         }
 
-        if (item.Type === "TvChannel") {
+        if (item.Type === 'TvChannel') {
             hideElement('.overviewContainer', context);
         } else {
             showElement('.overviewContainer', context);
         }
 
-        if (item.Type === "Person") {
+        if (item.Type === 'Person') {
             //todo
             context.querySelector('#txtProductionYear').label(globalize.translate('LabelBirthYear'));
-            context.querySelector("#txtPremiereDate").label(globalize.translate('LabelBirthDate'));
-            context.querySelector("#txtEndDate").label(globalize.translate('LabelDeathDate'));
+            context.querySelector('#txtPremiereDate').label(globalize.translate('LabelBirthDate'));
+            context.querySelector('#txtEndDate').label(globalize.translate('LabelDeathDate'));
             showElement('#fldPlaceOfBirth');
         } else {
             context.querySelector('#txtProductionYear').label(globalize.translate('LabelYear'));
-            context.querySelector("#txtPremiereDate").label(globalize.translate('LabelReleaseDate'));
-            context.querySelector("#txtEndDate").label(globalize.translate('LabelEndDate'));
+            context.querySelector('#txtPremiereDate').label(globalize.translate('LabelReleaseDate'));
+            context.querySelector('#txtEndDate').label(globalize.translate('LabelEndDate'));
             hideElement('#fldPlaceOfBirth');
         }
 
-        if (item.MediaType === "Video" && item.Type !== "TvChannel") {
+        if (item.MediaType === 'Video' && item.Type !== 'TvChannel') {
             showElement('#fldOriginalAspectRatio');
         } else {
             hideElement('#fldOriginalAspectRatio');
         }
 
-        if (item.Type === "Audio" || item.Type === "Episode" || item.Type === "Season") {
+        if (item.Type === 'Audio' || item.Type === 'Episode' || item.Type === 'Season') {
             showElement('#fldIndexNumber');
 
-            if (item.Type === "Episode") {
+            if (item.Type === 'Episode') {
                 context.querySelector('#txtIndexNumber').label(globalize.translate('LabelEpisodeNumber'));
-            } else if (item.Type === "Season") {
+            } else if (item.Type === 'Season') {
                 context.querySelector('#txtIndexNumber').label(globalize.translate('LabelSeasonNumber'));
-            } else if (item.Type === "Audio") {
+            } else if (item.Type === 'Audio') {
                 context.querySelector('#txtIndexNumber').label(globalize.translate('LabelTrackNumber'));
             } else {
                 context.querySelector('#txtIndexNumber').label(globalize.translate('LabelNumber'));
@@ -695,12 +654,12 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
             hideElement('#fldIndexNumber');
         }
 
-        if (item.Type === "Audio" || item.Type === "Episode") {
+        if (item.Type === 'Audio' || item.Type === 'Episode') {
             showElement('#fldParentIndexNumber');
 
-            if (item.Type === "Episode") {
+            if (item.Type === 'Episode') {
                 context.querySelector('#txtParentIndexNumber').label(globalize.translate('LabelSeasonNumber'));
-            } else if (item.Type === "Audio") {
+            } else if (item.Type === 'Audio') {
                 context.querySelector('#txtParentIndexNumber').label(globalize.translate('LabelDiscNumber'));
             } else {
                 context.querySelector('#txtParentIndexNumber').label(globalize.translate('LabelParentNumber'));
@@ -709,12 +668,12 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
             hideElement('#fldParentIndexNumber', context);
         }
 
-        if (item.Type === "BoxSet") {
+        if (item.Type === 'BoxSet') {
             showElement('#fldDisplayOrder', context);
             hideElement('.seriesDisplayOrderDescription', context);
 
             context.querySelector('#selectDisplayOrder').innerHTML = '<option value="SortName">' + globalize.translate('SortName') + '</option><option value="PremiereDate">' + globalize.translate('ReleaseDate') + '</option>';
-        } else if (item.Type === "Series") {
+        } else if (item.Type === 'Series') {
             showElement('#fldDisplayOrder', context);
             showElement('.seriesDisplayOrderDescription', context);
 
@@ -731,19 +690,19 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
         populateRatings(parentalRatingOptions, select, item.OfficialRating);
 
-        select.value = item.OfficialRating || "";
+        select.value = item.OfficialRating || '';
 
         select = context.querySelector('#selectCustomRating');
 
         populateRatings(parentalRatingOptions, select, item.CustomRating);
 
-        select.value = item.CustomRating || "";
+        select.value = item.CustomRating || '';
 
         var selectStatus = context.querySelector('#selectStatus');
         populateStatus(selectStatus);
-        selectStatus.value = item.Status || "";
+        selectStatus.value = item.Status || '';
 
-        context.querySelector('#select3dFormat', context).value = item.Video3DFormat || "";
+        context.querySelector('#select3dFormat', context).value = item.Video3DFormat || '';
 
         Array.prototype.forEach.call(context.querySelectorAll('.chkAirDay', context), function (el) {
             el.checked = (item.AirDays || []).indexOf(el.getAttribute('data-day')) !== -1;
@@ -759,7 +718,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
         populateListView(context.querySelector('#listTags'), item.Tags);
 
         var lockData = (item.LockData || false);
-        var chkLockData = context.querySelector("#chkLockData");
+        var chkLockData = context.querySelector('#chkLockData');
         chkLockData.checked = lockData;
         if (chkLockData.checked) {
             hideElement('.providerSettingsContainer', context);
@@ -769,33 +728,29 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
         fillMetadataSettings(context, item, item.LockedFields);
 
         context.querySelector('#txtPath').value = item.Path || '';
-        context.querySelector('#txtName').value = item.Name || "";
-        context.querySelector('#txtOriginalName').value = item.OriginalTitle || "";
+        context.querySelector('#txtName').value = item.Name || '';
+        context.querySelector('#txtOriginalName').value = item.OriginalTitle || '';
         context.querySelector('#txtOverview').value = item.Overview || '';
         context.querySelector('#txtTagline').value = (item.Taglines && item.Taglines.length ? item.Taglines[0] : '');
-        context.querySelector('#txtSortName').value = item.ForcedSortName || "";
-        context.querySelector('#txtCommunityRating').value = item.CommunityRating || "";
+        context.querySelector('#txtSortName').value = item.ForcedSortName || '';
+        context.querySelector('#txtCommunityRating').value = item.CommunityRating || '';
 
-        context.querySelector('#txtCriticRating').value = item.CriticRating || "";
+        context.querySelector('#txtCriticRating').value = item.CriticRating || '';
 
         context.querySelector('#txtIndexNumber').value = item.IndexNumber == null ? '' : item.IndexNumber;
         context.querySelector('#txtParentIndexNumber').value = item.ParentIndexNumber == null ? '' : item.ParentIndexNumber;
 
-        context.querySelector('#txtAirsBeforeSeason').value = ('AirsBeforeSeasonNumber' in item) ? item.AirsBeforeSeasonNumber : "";
-        context.querySelector('#txtAirsAfterSeason').value = ('AirsAfterSeasonNumber' in item) ? item.AirsAfterSeasonNumber : "";
-        context.querySelector('#txtAirsBeforeEpisode').value = ('AirsBeforeEpisodeNumber' in item) ? item.AirsBeforeEpisodeNumber : "";
+        context.querySelector('#txtAirsBeforeSeason').value = ('AirsBeforeSeasonNumber' in item) ? item.AirsBeforeSeasonNumber : '';
+        context.querySelector('#txtAirsAfterSeason').value = ('AirsAfterSeasonNumber' in item) ? item.AirsAfterSeasonNumber : '';
+        context.querySelector('#txtAirsBeforeEpisode').value = ('AirsBeforeEpisodeNumber' in item) ? item.AirsBeforeEpisodeNumber : '';
 
-        context.querySelector('#txtAlbum').value = item.Album || "";
+        context.querySelector('#txtAlbum').value = item.Album || '';
 
         context.querySelector('#txtAlbumArtist').value = (item.AlbumArtists || []).map(function (a) {
             return a.Name;
         }).join(';');
 
-        if (item.Type === 'Series') {
-            context.querySelector('#selectDisplayOrder').value = item.DisplayOrder || '';
-        } else {
-            context.querySelector('#selectDisplayOrder').value = item.DisplayOrder || '';
-        }
+        context.querySelector('#selectDisplayOrder').value = item.DisplayOrder || '';
 
         context.querySelector('#txtArtist').value = (item.ArtistItems || []).map(function (a) {
             return a.Name;
@@ -839,17 +794,17 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
             context.querySelector('#txtEndDate').value = '';
         }
 
-        context.querySelector('#txtProductionYear').value = item.ProductionYear || "";
+        context.querySelector('#txtProductionYear').value = item.ProductionYear || '';
 
         context.querySelector('#txtAirTime').value = item.AirTime || '';
 
         var placeofBirth = item.ProductionLocations && item.ProductionLocations.length ? item.ProductionLocations[0] : '';
         context.querySelector('#txtPlaceOfBirth').value = placeofBirth;
 
-        context.querySelector('#txtOriginalAspectRatio').value = item.AspectRatio || "";
+        context.querySelector('#txtOriginalAspectRatio').value = item.AspectRatio || '';
 
-        context.querySelector('#selectLanguage').value = item.PreferredMetadataLanguage || "";
-        context.querySelector('#selectCountry').value = item.PreferredMetadataCountryCode || "";
+        context.querySelector('#selectLanguage').value = item.PreferredMetadataLanguage || '';
+        context.querySelector('#selectCountry').value = item.PreferredMetadataCountryCode || '';
 
         if (item.RunTimeTicks) {
 
@@ -857,13 +812,13 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
             context.querySelector('#txtSeriesRuntime').value = Math.round(minutes);
         } else {
-            context.querySelector('#txtSeriesRuntime', context).value = "";
+            context.querySelector('#txtSeriesRuntime', context).value = '';
         }
     }
 
     function populateRatings(allParentalRatings, select, currentValue) {
 
-        var html = "";
+        var html = '';
 
         html += "<option value=''></option>";
 
@@ -893,18 +848,18 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
             rating = ratings[i];
 
-            html += "<option value='" + rating.Value + "'>" + rating.Name + "</option>";
+            html += "<option value='" + rating.Value + "'>" + rating.Name + '</option>';
         }
 
         select.innerHTML = html;
     }
 
     function populateStatus(select) {
-        var html = "";
+        var html = '';
 
         html += "<option value=''></option>";
-        html += "<option value='Continuing'>" + globalize.translate('Continuing') + "</option>";
-        html += "<option value='Ended'>" + globalize.translate('Ended') + "</option>";
+        html += "<option value='Continuing'>" + globalize.translate('Continuing') + '</option>';
+        html += "<option value='Ended'>" + globalize.translate('Ended') + '</option>';
         select.innerHTML = html;
     }
 
@@ -922,7 +877,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
         for (var i = 0; i < items.length; i++) {
             html += '<div class="listItem">';
 
-            html += '<i class="material-icons listItemIcon live_tv" style="background-color:#333;"></i>';
+            html += '<span class="material-icons listItemIcon live_tv" style="background-color:#333;"></span>';
 
             html += '<div class="listItemBody">';
 
@@ -932,7 +887,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
             html += '</div>';
 
-            html += '<button type="button" is="paper-icon-button-light" data-index="' + i + '" class="btnRemoveFromEditorList autoSize"><i class="material-icons">delete</i></button>';
+            html += '<button type="button" is="paper-icon-button-light" data-index="' + i + '" class="btnRemoveFromEditorList autoSize"><span class="material-icons delete"></span></button>';
 
             html += '</div>';
         }
@@ -953,7 +908,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
             html += '<div class="listItem">';
 
-            html += '<i class="material-icons listItemIcon" style="background-color:#333;">person</i>';
+            html += '<span class="material-icons listItemIcon person" style="background-color:#333;"></span>';
 
             html += '<div class="listItemBody">';
             html += '<button style="text-align:left;" type="button" class="btnEditPerson clearButton" data-index="' + i + '">';
@@ -969,7 +924,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
             html += '</button>';
             html += '</div>';
 
-            html += '<button type="button" is="paper-icon-button-light" data-index="' + i + '" class="btnDeletePerson autoSize"><i class="material-icons">delete</i></button>';
+            html += '<button type="button" is="paper-icon-button-light" data-index="' + i + '" class="btnDeletePerson autoSize"><span class="material-icons delete"></span></button>';
 
             html += '</div>';
         }
@@ -999,30 +954,30 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
         lockedFields = lockedFields || [];
 
         var lockedFieldsList = [
-            { name: globalize.translate('Name'), value: "Name" },
-            { name: globalize.translate('Overview'), value: "Overview" },
-            { name: globalize.translate('Genres'), value: "Genres" },
-            { name: globalize.translate('ParentalRating'), value: "OfficialRating" },
-            { name: globalize.translate('People'), value: "Cast" }
+            { name: globalize.translate('Name'), value: 'Name' },
+            { name: globalize.translate('Overview'), value: 'Overview' },
+            { name: globalize.translate('Genres'), value: 'Genres' },
+            { name: globalize.translate('ParentalRating'), value: 'OfficialRating' },
+            { name: globalize.translate('People'), value: 'Cast' }
         ];
 
-        if (item.Type === "Person") {
-            lockedFieldsList.push({ name: globalize.translate('BirthLocation'), value: "ProductionLocations" });
+        if (item.Type === 'Person') {
+            lockedFieldsList.push({ name: globalize.translate('BirthLocation'), value: 'ProductionLocations' });
         } else {
-            lockedFieldsList.push({ name: globalize.translate('ProductionLocations'), value: "ProductionLocations" });
+            lockedFieldsList.push({ name: globalize.translate('ProductionLocations'), value: 'ProductionLocations' });
         }
 
-        if (item.Type === "Series") {
-            lockedFieldsList.push({ name: globalize.translate('Runtime'), value: "Runtime" });
+        if (item.Type === 'Series') {
+            lockedFieldsList.push({ name: globalize.translate('Runtime'), value: 'Runtime' });
         }
 
-        lockedFieldsList.push({ name: globalize.translate('Studios'), value: "Studios" });
-        lockedFieldsList.push({ name: globalize.translate('Tags'), value: "Tags" });
+        lockedFieldsList.push({ name: globalize.translate('Studios'), value: 'Studios' });
+        lockedFieldsList.push({ name: globalize.translate('Tags'), value: 'Tags' });
 
         var html = '';
 
-        html += "<h2>" + globalize.translate('HeaderEnabledFields') + "</h2>";
-        html += "<p>" + globalize.translate('HeaderEnabledFieldsHelp') + "</p>";
+        html += '<h2>' + globalize.translate('HeaderEnabledFields') + '</h2>';
+        html += '<p>' + globalize.translate('HeaderEnabledFieldsHelp') + '</p>';
         html += getLockedFieldsHtml(lockedFieldsList, lockedFields);
         container.innerHTML = html;
     }
@@ -1051,7 +1006,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
             setFieldVisibilities(context, item);
             fillItemInfo(context, item, metadataEditorInfo.ParentalRatingOptions);
 
-            if (item.MediaType === "Video" && item.Type !== "Episode" && item.Type !== "TvChannel") {
+            if (item.MediaType === 'Video' && item.Type !== 'Episode' && item.Type !== 'TvChannel') {
                 showElement('#fldTagline', context);
             } else {
                 hideElement('#fldTagline', context);
@@ -1071,7 +1026,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
     function show(itemId, serverId, resolve, reject) {
         loading.show();
 
-        require(['text!./metadataeditor.template.html'], function (template) {
+        require(['text!./metadataEditor.template.html'], function (template) {
 
             var dialogOptions = {
                 removeOnClose: true,
@@ -1081,7 +1036,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
             if (layoutManager.tv) {
                 dialogOptions.size = 'fullscreen';
             } else {
-                dialogOptions.size = 'medium-tall';
+                dialogOptions.size = 'small';
             }
 
             var dlg = dialogHelper.createDialog(dialogOptions);
@@ -1128,7 +1083,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
                 loading.show();
 
-                require(['text!./metadataeditor.template.html'], function (template) {
+                require(['text!./metadataEditor.template.html'], function (template) {
 
                     elem.innerHTML = globalize.translateDocument(template, 'core');
 

src/components/metadataEditor/metadataEditor.template.html

@@ -1,15 +1,15 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>
+    <button is="paper-icon-button-light" class="btnCancel btnBack autoSize hide" tabindex="-1"><span class="material-icons arrow_back"></span></button>
     <h3 class="formDialogHeaderTitle">
         ${Edit}
     </h3>
     <div style="margin-left: auto;" class="flex align-items-center justify-content-center">
         <button is="emby-button" type="button" class="btnHeaderSave button-accent-flat button-flat hide" tabindex="-1">
-            <i class="material-icons">check</i>
+            <span class="material-icons check"></span>
             <span>${Save}</span>
         </button>
-        <button is="paper-icon-button-light" class="btnMore autoSize" tabindex="-1">
-            <i class="material-icons more_horiz"></i>
+        <button is="paper-icon-button-light" class="btnCancel btnClose autoSize" tabindex="-1">
+            <span class="material-icons close"></span>
         </button>
     </div>
 </div>
@@ -57,11 +57,13 @@
                 <div id="fldAlbum" class="hide inputContainer">
                     <input is="emby-input" id="txtAlbum" type="text" label="${LabelAlbum}" />
                 </div>
-                <div id="fldParentIndexNumber" class="hide inputContainer">
-                    <input is="emby-input" id="txtParentIndexNumber" type="number" />
-                </div>
-                <div id="fldIndexNumber" class="hide inputContainer">
-                    <input is="emby-input" id="txtIndexNumber" type="number" pattern="[0-9]*" />
+                <div class="inlineForm">
+                    <div id="fldParentIndexNumber" class="hide inputContainer">
+                        <input is="emby-input" id="txtParentIndexNumber" type="number" />
+                    </div>
+                    <div id="fldIndexNumber" class="hide inputContainer">
+                        <input is="emby-input" id="txtIndexNumber" type="number" pattern="[0-9]*" />
+                    </div>
                 </div>
                 <div id="fldCommunityRating" class="hide inputContainer">
                     <input is="emby-input" id="txtCommunityRating" type="number" step=".1" min="0" max="10" label="${LabelCommunityRating}" />
@@ -129,24 +131,28 @@
                 <div id="fldSeriesRuntime" class="inputContainer hide">
                     <input is="emby-input" id="txtSeriesRuntime" type="number" label="${LabelRuntimeMinutes}" />
                 </div>
-                <div id="fldOfficialRating" class="selectContainer hide">
-                    <select is="emby-select" id="selectOfficialRating" label="${LabelParentalRating}"></select>
+                <div class="inlineForm">
+                    <div id="fldOfficialRating" class="selectContainer hide">
+                        <select is="emby-select" id="selectOfficialRating" label="${LabelParentalRating}"></select>
+                    </div>
+                    <div id="fldCustomRating" class="selectContainer hide">
+                        <select is="emby-select" id="selectCustomRating" label="${LabelCustomRating}"></select>
+                    </div>
                 </div>
-                <div id="fldCustomRating" class="selectContainer hide">
-                    <select is="emby-select" id="selectCustomRating" label="${LabelCustomRating}"></select>
-                </div>
-                <div id="fldOriginalAspectRatio" class="inputContainer hide">
-                    <input is="emby-input" id="txtOriginalAspectRatio" type="text" label="${LabelOriginalAspectRatio}" />
-                </div>
-                <div id="fld3dFormat" class="selectContainer hide">
-                    <select is="emby-select" id="select3dFormat" label="${Label3DFormat}">
-                        <option value=""></option>
-                        <option value="HalfSideBySide">HSBS</option>
-                        <option value="HalfTopAndBottom">HTAB</option>
-                        <option value="FullSideBySide">FSBS</option>
-                        <option value="FullTopAndBottom">FTAB</option>
-                        <option value="MVC">MVC</option>
-                    </select>
+                <div class="inlineForm">
+                    <div id="fldOriginalAspectRatio" class="inputContainer hide">
+                        <input is="emby-input" id="txtOriginalAspectRatio" type="text" label="${LabelOriginalAspectRatio}" />
+                    </div>
+                    <div id="fld3dFormat" class="selectContainer hide">
+                        <select is="emby-select" id="select3dFormat" label="${Label3DFormat}">
+                            <option value=""></option>
+                            <option value="HalfSideBySide">HSBS</option>
+                            <option value="HalfTopAndBottom">HTAB</option>
+                            <option value="FullSideBySide">FSBS</option>
+                            <option value="FullTopAndBottom">FTAB</option>
+                            <option value="MVC">MVC</option>
+                        </select>
+                    </div>
                 </div>
 
                 <div id="fldDisplayOrder" class="fldDisplaySetting selectContainer hide">
@@ -160,14 +166,16 @@
                 <h2>
                     ${HeaderSpecialEpisodeInfo}
                 </h2>
-                <div class="inputContainer">
-                    <input is="emby-input" id="txtAirsBeforeSeason" type="number" pattern="[0-9]*" label="${LabelAirsBeforeSeason}" />
-                </div>
-                <div class="inputContainer">
-                    <input is="emby-input" id="txtAirsAfterSeason" type="number" pattern="[0-9]*" label="${LabelAirsAfterSeason}" />
-                </div>
-                <div class="inputContainer">
-                    <input is="emby-input" id="txtAirsBeforeEpisode" type="number" pattern="[0-9]*" label="${LabelAirsBeforeEpisode}" />
+                <div class="inlineForm">
+                    <div class="inputContainer">
+                        <input is="emby-input" id="txtAirsBeforeSeason" type="number" pattern="[0-9]*" label="${LabelAirsBeforeSeason}" />
+                    </div>
+                    <div class="inputContainer">
+                        <input is="emby-input" id="txtAirsAfterSeason" type="number" pattern="[0-9]*" label="${LabelAirsAfterSeason}" />
+                    </div>
+                    <div class="inputContainer">
+                        <input is="emby-input" id="txtAirsBeforeEpisode" type="number" pattern="[0-9]*" label="${LabelAirsBeforeEpisode}" />
+                    </div>
                 </div>
             </div>
 
@@ -184,7 +192,7 @@
                     ${Genres}
                 </h2>
                 <button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-left:1em;" title="${Add}">
-                    <i class="material-icons">add</i>
+                    <span class="material-icons add"></span>
                 </button>
                 <div class="paperList" id="listGenres"></div>
             </div>
@@ -193,7 +201,7 @@
                     ${People}
                 </h2>
                 <button is="emby-button" type="button" id="btnAddPerson" class="fab btnAddPerson" style="margin-left:1em;" title="${Add}">
-                    <i class="material-icons">add</i>
+                    <span class="material-icons add"></span>
                 </button>
                 <div id="peopleList" class="paperList">
                 </div>
@@ -203,7 +211,7 @@
                     ${Studios}
                 </h2>
                 <button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-left:1em;" title="${Add}">
-                    <i class="material-icons">add</i>
+                    <span class="material-icons add"></span>
                 </button>
                 <div class="paperList" id="listStudios"></div>
             </div>
@@ -212,7 +220,7 @@
                     ${Tags}
                 </h2>
                 <button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-left:1em;" title="${Add}">
-                    <i class="material-icons">add</i>
+                    <span class="material-icons add"></span>
                 </button>
                 <div class="paperList" id="listTags"></div>
             </div>
@@ -240,8 +248,11 @@
             </div>
             <br />
             <div class="formDialogFooter">
+                <button is="emby-button" class="raised button-cancel block btnCancel formDialogFooterItem">
+                    <span>${Cancel}</span>
+                </button>
                 <button is="emby-button" type="submit" class="raised button-submit block btnSave formDialogFooterItem">
-                    <span>${Save}</span>
+                    <span>${SaveChanges}</span>
                 </button>
             </div>
 

src/components/metadataEditor/personEditor.js

@@ -11,7 +11,7 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'require', 'paper-icon-but
     function show(person) {
         return new Promise(function (resolve, reject) {
 
-            require(['text!./personeditor.template.html'], function (template) {
+            require(['text!./personEditor.template.html'], function (template) {
 
                 var dialogOptions = {
                     removeOnClose: true,
@@ -21,7 +21,7 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'require', 'paper-icon-but
                 if (layoutManager.tv) {
                     dialogOptions.size = 'fullscreen';
                 } else {
-                    dialogOptions.size = 'medium-tall';
+                    dialogOptions.size = 'small';
                 }
 
                 var dlg = dialogHelper.createDialog(dialogOptions);

src/components/metadataEditor/personEditor.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>
     <h3 class="formDialogHeaderTitle">
         ${Edit}
     </h3>

src/components/multiSelect/multiSelect.js

@@ -1,5 +1,5 @@
-define(["browser", "appStorage", "apphost", "loading", "connectionManager", "globalize", "appRouter", "dom", "css!./multiselect"], function (browser, appStorage, appHost, loading, connectionManager, globalize, appRouter, dom) {
-    "use strict";
+define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'globalize', 'appRouter', 'dom', 'css!./multiSelect'], function (browser, appStorage, appHost, loading, connectionManager, globalize, appRouter, dom) {
+    'use strict';
 
     var selectedItems = [];
     var selectedElements = [];
@@ -15,12 +15,12 @@ define(["browser", "appStorage", "apphost", "loading", "connectionManager", "glo
 
             selectedItems = [];
             selectedElements = [];
-            var elems = document.querySelectorAll(".itemSelectionPanel");
+            var elems = document.querySelectorAll('.itemSelectionPanel');
             for (var i = 0, length = elems.length; i < length; i++) {
 
                 var parent = elems[i].parentNode;
                 parent.removeChild(elems[i]);
-                parent.classList.remove("withMultiSelect");
+                parent.classList.remove('withMultiSelect');
             }
         }
     }
@@ -28,13 +28,13 @@ define(["browser", "appStorage", "apphost", "loading", "connectionManager", "glo
     function onItemSelectionPanelClick(e, itemSelectionPanel) {
 
         // toggle the checkbox, if it wasn't clicked on
-        if (!dom.parentWithClass(e.target, "chkItemSelect")) {
-            var chkItemSelect = itemSelectionPanel.querySelector(".chkItemSelect");
+        if (!dom.parentWithClass(e.target, 'chkItemSelect')) {
+            var chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect');
 
             if (chkItemSelect) {
 
-                if (chkItemSelect.classList.contains("checkedInitial")) {
-                    chkItemSelect.classList.remove("checkedInitial");
+                if (chkItemSelect.classList.contains('checkedInitial')) {
+                    chkItemSelect.classList.remove('checkedInitial');
                 } else {
                     var newValue = !chkItemSelect.checked;
                     chkItemSelect.checked = newValue;
@@ -50,7 +50,7 @@ define(["browser", "appStorage", "apphost", "loading", "connectionManager", "glo
 
     function updateItemSelection(chkItemSelect, selected) {
 
-        var id = dom.parentWithAttribute(chkItemSelect, "data-id").getAttribute("data-id");
+        var id = dom.parentWithAttribute(chkItemSelect, 'data-id').getAttribute('data-id');
 
         if (selected) {
 
@@ -73,7 +73,7 @@ define(["browser", "appStorage", "apphost", "loading", "connectionManager", "glo
         }
 
         if (selectedItems.length) {
-            var itemSelectionCount = document.querySelector(".itemSelectionCount");
+            var itemSelectionCount = document.querySelector('.itemSelectionCount');
             if (itemSelectionCount) {
                 itemSelectionCount.innerHTML = selectedItems.length;
             }
@@ -88,27 +88,27 @@ define(["browser", "appStorage", "apphost", "loading", "connectionManager", "glo
 
     function showSelection(item, isChecked) {
 
-        var itemSelectionPanel = item.querySelector(".itemSelectionPanel");
+        var itemSelectionPanel = item.querySelector('.itemSelectionPanel');
 
         if (!itemSelectionPanel) {
 
-            itemSelectionPanel = document.createElement("div");
-            itemSelectionPanel.classList.add("itemSelectionPanel");
+            itemSelectionPanel = document.createElement('div');
+            itemSelectionPanel.classList.add('itemSelectionPanel');
 
-            var parent = item.querySelector(".cardBox") || item.querySelector(".cardContent");
-            parent.classList.add("withMultiSelect");
+            var parent = item.querySelector('.cardBox') || item.querySelector('.cardContent');
+            parent.classList.add('withMultiSelect');
             parent.appendChild(itemSelectionPanel);
 
-            var cssClass = "chkItemSelect";
+            var cssClass = 'chkItemSelect';
             if (isChecked && !browser.firefox) {
                 // In firefox, the initial tap hold doesnt' get treated as a click
                 // In other browsers it does, so we need to make sure that initial click is ignored
-                cssClass += " checkedInitial";
+                cssClass += ' checkedInitial';
             }
-            var checkedAttribute = isChecked ? " checked" : "";
+            var checkedAttribute = isChecked ? ' checked' : '';
             itemSelectionPanel.innerHTML = '<label class="checkboxContainer"><input type="checkbox" is="emby-checkbox" data-outlineclass="multiSelectCheckboxOutline" class="' + cssClass + '"' + checkedAttribute + '/><span></span></label>';
-            var chkItemSelect = itemSelectionPanel.querySelector(".chkItemSelect");
-            chkItemSelect.addEventListener("change", onSelectionChange);
+            var chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect');
+            chkItemSelect.addEventListener('change', onSelectionChange);
         }
     }
 
@@ -118,27 +118,27 @@ define(["browser", "appStorage", "apphost", "loading", "connectionManager", "glo
 
         if (!selectionCommandsPanel) {
 
-            selectionCommandsPanel = document.createElement("div");
-            selectionCommandsPanel.classList.add("selectionCommandsPanel");
+            selectionCommandsPanel = document.createElement('div');
+            selectionCommandsPanel.classList.add('selectionCommandsPanel');
 
             document.body.appendChild(selectionCommandsPanel);
             currentSelectionCommandsPanel = selectionCommandsPanel;
 
-            var html = "";
+            var html = '';
 
-            html += '<button is="paper-icon-button-light" class="btnCloseSelectionPanel autoSize"><i class="material-icons">close</i></button>';
+            html += '<button is="paper-icon-button-light" class="btnCloseSelectionPanel autoSize"><span class="material-icons close"></span></button>';
             html += '<h1 class="itemSelectionCount"></h1>';
 
-            var moreIcon = "&#xE5D3;";
-            html += '<button is="paper-icon-button-light" class="btnSelectionPanelOptions autoSize" style="margin-left:auto;"><i class="material-icons">' + moreIcon + '</i></button>';
+            const moreIcon = 'more_vert';
+            html += '<button is="paper-icon-button-light" class="btnSelectionPanelOptions autoSize" style="margin-left:auto;"><span class="material-icons ' + moreIcon + '"></span></button>';
 
             selectionCommandsPanel.innerHTML = html;
 
-            selectionCommandsPanel.querySelector(".btnCloseSelectionPanel").addEventListener("click", hideSelections);
+            selectionCommandsPanel.querySelector('.btnCloseSelectionPanel').addEventListener('click', hideSelections);
 
-            var btnSelectionPanelOptions = selectionCommandsPanel.querySelector(".btnSelectionPanelOptions");
+            var btnSelectionPanelOptions = selectionCommandsPanel.querySelector('.btnSelectionPanelOptions');
 
-            dom.addEventListener(btnSelectionPanelOptions, "click", showMenuForSelectedItems, { passive: true });
+            dom.addEventListener(btnSelectionPanelOptions, 'click', showMenuForSelectedItems, { passive: true });
         }
     }
 
@@ -146,7 +146,7 @@ define(["browser", "appStorage", "apphost", "loading", "connectionManager", "glo
 
         return new Promise(function (resolve, reject) {
 
-            require(["alert"], function (alert) {
+            require(['alert'], function (alert) {
                 alert(options).then(resolve, resolve);
             });
         });
@@ -156,15 +156,15 @@ define(["browser", "appStorage", "apphost", "loading", "connectionManager", "glo
 
         return new Promise(function (resolve, reject) {
 
-            var msg = globalize.translate("ConfirmDeleteItem");
-            var title = globalize.translate("HeaderDeleteItem");
+            var msg = globalize.translate('ConfirmDeleteItem');
+            var title = globalize.translate('HeaderDeleteItem');
 
             if (itemIds.length > 1) {
-                msg = globalize.translate("ConfirmDeleteItems");
-                title = globalize.translate("HeaderDeleteItems");
+                msg = globalize.translate('ConfirmDeleteItems');
+                title = globalize.translate('HeaderDeleteItems');
             }
 
-            require(["confirm"], function (confirm) {
+            require(['confirm'], function (confirm) {
 
                 confirm(msg, title).then(function () {
                     var promises = itemIds.map(function (itemId) {
@@ -173,7 +173,7 @@ define(["browser", "appStorage", "apphost", "loading", "connectionManager", "glo
 
                     Promise.all(promises).then(resolve, function () {
 
-                        alertText(globalize.translate("ErrorDeletingItem")).then(reject, reject);
+                        alertText(globalize.translate('ErrorDeletingItem')).then(reject, reject);
                     });
                 }, reject);
 
@@ -190,58 +190,58 @@ define(["browser", "appStorage", "apphost", "loading", "connectionManager", "glo
             var menuItems = [];
 
             menuItems.push({
-                name: globalize.translate("AddToCollection"),
-                id: "addtocollection",
-                icon: "add"
+                name: globalize.translate('AddToCollection'),
+                id: 'addtocollection',
+                icon: 'add'
             });
 
             menuItems.push({
-                name: globalize.translate("AddToPlaylist"),
-                id: "playlist",
-                icon: "playlist_add"
+                name: globalize.translate('AddToPlaylist'),
+                id: 'playlist',
+                icon: 'playlist_add'
             });
 
             // TODO: Be more dynamic based on what is selected
             if (user.Policy.EnableContentDeletion) {
                 menuItems.push({
-                    name: globalize.translate("Delete"),
-                    id: "delete",
-                    icon: "delete"
+                    name: globalize.translate('Delete'),
+                    id: 'delete',
+                    icon: 'delete'
                 });
             }
 
-            if (user.Policy.EnableContentDownloading && appHost.supports("filedownload")) {
+            if (user.Policy.EnableContentDownloading && appHost.supports('filedownload')) {
                 menuItems.push({
-                    name: Globalize.translate("ButtonDownload"),
-                    id: "download",
-                    icon: "file_download"
+                    name: globalize.translate('ButtonDownload'),
+                    id: 'download',
+                    icon: 'file_download'
                 });
             }
 
             if (user.Policy.IsAdministrator) {
                 menuItems.push({
-                    name: globalize.translate("GroupVersions"),
-                    id: "groupvideos",
-                    icon: "call_merge"
+                    name: globalize.translate('GroupVersions'),
+                    id: 'groupvideos',
+                    icon: 'call_merge'
                 });
             }
 
             menuItems.push({
-                name: globalize.translate("MarkPlayed"),
-                id: "markplayed",
-                icon: "check_box"
+                name: globalize.translate('MarkPlayed'),
+                id: 'markplayed',
+                icon: 'check_box'
             });
 
             menuItems.push({
-                name: globalize.translate("MarkUnplayed"),
-                id: "markunplayed",
-                icon: "check_box_outline_blank"
+                name: globalize.translate('MarkUnplayed'),
+                id: 'markunplayed',
+                icon: 'check_box_outline_blank'
             });
 
             menuItems.push({
-                name: globalize.translate("RefreshMetadata"),
-                id: "refresh",
-                icon: "refresh"
+                name: globalize.translate('RefreshMetadata'),
+                id: 'refresh',
+                icon: 'refresh'
             });
 
             require(['actionsheet'], function (actionsheet) {
@@ -253,8 +253,8 @@ define(["browser", "appStorage", "apphost", "loading", "connectionManager", "glo
                         var serverId = apiClient.serverInfo().Id;
 
                         switch (id) {
-                            case "addtocollection":
-                                require(["collectionEditor"], function (collectionEditor) {
+                            case 'addtocollection':
+                                require(['collectionEditor'], function (collectionEditor) {
                                     new collectionEditor().show({
                                         items: items,
                                         serverId: serverId
@@ -263,8 +263,8 @@ define(["browser", "appStorage", "apphost", "loading", "connectionManager", "glo
                                 hideSelections();
                                 dispatchNeedsRefresh();
                                 break;
-                            case "playlist":
-                                require(["playlistEditor"], function (playlistEditor) {
+                            case 'playlist':
+                                require(['playlistEditor'], function (playlistEditor) {
                                     new playlistEditor().show({
                                         items: items,
                                         serverId: serverId
@@ -273,30 +273,30 @@ define(["browser", "appStorage", "apphost", "loading", "connectionManager", "glo
                                 hideSelections();
                                 dispatchNeedsRefresh();
                                 break;
-                            case "delete":
+                            case 'delete':
                                 deleteItems(apiClient, items).then(dispatchNeedsRefresh);
                                 hideSelections();
                                 dispatchNeedsRefresh();
                                 break;
-                            case "groupvideos":
+                            case 'groupvideos':
                                 combineVersions(apiClient, items);
                                 break;
-                            case "markplayed":
+                            case 'markplayed':
                                 items.forEach(function (itemId) {
                                     apiClient.markPlayed(apiClient.getCurrentUserId(), itemId);
                                 });
                                 hideSelections();
                                 dispatchNeedsRefresh();
                                 break;
-                            case "markunplayed":
+                            case 'markunplayed':
                                 items.forEach(function (itemId) {
                                     apiClient.markUnplayed(apiClient.getCurrentUserId(), itemId);
                                 });
                                 hideSelections();
                                 dispatchNeedsRefresh();
                                 break;
-                            case "refresh":
-                                require(["refreshDialog"], function (refreshDialog) {
+                            case 'refresh':
+                                require(['refreshDialog'], function (refreshDialog) {
                                     new refreshDialog({
                                         itemIds: items,
                                         serverId: serverId
@@ -321,7 +321,7 @@ define(["browser", "appStorage", "apphost", "loading", "connectionManager", "glo
 
         [].forEach.call(selectedElements, function (i) {
 
-            var container = dom.parentWithAttribute(i, "is", "emby-itemscontainer");
+            var container = dom.parentWithAttribute(i, 'is', 'emby-itemscontainer');
 
             if (container && elems.indexOf(container) === -1) {
                 elems.push(container);
@@ -337,9 +337,9 @@ define(["browser", "appStorage", "apphost", "loading", "connectionManager", "glo
 
         if (selection.length < 2) {
 
-            require(["alert"], function (alert) {
+            require(['alert'], function (alert) {
                 alert({
-                    text: globalize.translate("PleaseSelectTwoItems")
+                    text: globalize.translate('PleaseSelectTwoItems')
                 });
             });
             return;
@@ -349,8 +349,8 @@ define(["browser", "appStorage", "apphost", "loading", "connectionManager", "glo
 
         apiClient.ajax({
 
-            type: "POST",
-            url: apiClient.getUrl("Videos/MergeVersions", { Ids: selection.join(",") })
+            type: 'POST',
+            url: apiClient.getUrl('Videos/MergeVersions', { Ids: selection.join(',') })
 
         }).then(function () {
 
@@ -362,8 +362,8 @@ define(["browser", "appStorage", "apphost", "loading", "connectionManager", "glo
 
     function showSelections(initialCard) {
 
-        require(["emby-checkbox"], function () {
-            var cards = document.querySelectorAll(".card");
+        require(['emby-checkbox'], function () {
+            var cards = document.querySelectorAll('.card');
             for (var i = 0, length = cards.length; i < length; i++) {
                 showSelection(cards[i], initialCard === cards[i]);
             }
@@ -379,9 +379,9 @@ define(["browser", "appStorage", "apphost", "loading", "connectionManager", "glo
 
         if (selectedItems.length) {
 
-            var card = dom.parentWithClass(target, "card");
+            var card = dom.parentWithClass(target, 'card');
             if (card) {
-                var itemSelectionPanel = card.querySelector(".itemSelectionPanel");
+                var itemSelectionPanel = card.querySelector('.itemSelectionPanel');
                 if (itemSelectionPanel) {
                     return onItemSelectionPanelClick(e, itemSelectionPanel);
                 }
@@ -393,7 +393,7 @@ define(["browser", "appStorage", "apphost", "loading", "connectionManager", "glo
         }
     }
 
-    document.addEventListener("viewbeforehide", hideSelections);
+    document.addEventListener('viewbeforehide', hideSelections);
 
     return function (options) {
 
@@ -403,7 +403,7 @@ define(["browser", "appStorage", "apphost", "loading", "connectionManager", "glo
 
         function onTapHold(e) {
 
-            var card = dom.parentWithClass(e.target, "card");
+            var card = dom.parentWithClass(e.target, 'card');
 
             if (card) {
 
@@ -440,7 +440,7 @@ define(["browser", "appStorage", "apphost", "loading", "connectionManager", "glo
                 var element = touch.target;
 
                 if (element) {
-                    var card = dom.parentWithClass(element, "card");
+                    var card = dom.parentWithClass(element, 'card');
 
                     if (card) {
 
@@ -509,7 +509,7 @@ define(["browser", "appStorage", "apphost", "loading", "connectionManager", "glo
                 return;
             }
 
-            var card = dom.parentWithClass(touchTarget, "card");
+            var card = dom.parentWithClass(touchTarget, 'card');
             touchTarget = null;
 
             if (card) {
@@ -522,27 +522,27 @@ define(["browser", "appStorage", "apphost", "loading", "connectionManager", "glo
 
             // mobile safari doesn't allow contextmenu override
             if (browser.touch && !browser.safari) {
-                element.addEventListener("contextmenu", onTapHold);
+                element.addEventListener('contextmenu', onTapHold);
             } else {
-                dom.addEventListener(element, "touchstart", onTouchStart, {
+                dom.addEventListener(element, 'touchstart', onTouchStart, {
                     passive: true
                 });
-                dom.addEventListener(element, "touchmove", onTouchMove, {
+                dom.addEventListener(element, 'touchmove', onTouchMove, {
                     passive: true
                 });
-                dom.addEventListener(element, "touchend", onTouchEnd, {
+                dom.addEventListener(element, 'touchend', onTouchEnd, {
                     passive: true
                 });
-                dom.addEventListener(element, "touchcancel", onTouchEnd, {
+                dom.addEventListener(element, 'touchcancel', onTouchEnd, {
                     passive: true
                 });
-                dom.addEventListener(element, "mousedown", onMouseDown, {
+                dom.addEventListener(element, 'mousedown', onMouseDown, {
                     passive: true
                 });
-                dom.addEventListener(element, "mouseleave", onMouseOut, {
+                dom.addEventListener(element, 'mouseleave', onMouseOut, {
                     passive: true
                 });
-                dom.addEventListener(element, "mouseup", onMouseOut, {
+                dom.addEventListener(element, 'mouseup', onMouseOut, {
                     passive: true
                 });
             }
@@ -551,38 +551,38 @@ define(["browser", "appStorage", "apphost", "loading", "connectionManager", "glo
         initTapHold(container);
 
         if (options.bindOnClick !== false) {
-            container.addEventListener("click", onContainerClick);
+            container.addEventListener('click', onContainerClick);
         }
 
         self.onContainerClick = onContainerClick;
 
         self.destroy = function () {
 
-            container.removeEventListener("click", onContainerClick);
-            container.removeEventListener("contextmenu", onTapHold);
+            container.removeEventListener('click', onContainerClick);
+            container.removeEventListener('contextmenu', onTapHold);
 
             var element = container;
 
-            dom.removeEventListener(element, "touchstart", onTouchStart, {
+            dom.removeEventListener(element, 'touchstart', onTouchStart, {
                 passive: true
             });
-            dom.removeEventListener(element, "touchmove", onTouchMove, {
+            dom.removeEventListener(element, 'touchmove', onTouchMove, {
                 passive: true
             });
-            dom.removeEventListener(element, "touchend", onTouchEnd, {
+            dom.removeEventListener(element, 'touchend', onTouchEnd, {
                 passive: true
             });
             // this fires in safari due to magnifying class
             //dom.removeEventListener(element, "touchcancel", onTouchEnd, {
             //    passive: true
             //});
-            dom.removeEventListener(element, "mousedown", onMouseDown, {
+            dom.removeEventListener(element, 'mousedown', onMouseDown, {
                 passive: true
             });
-            dom.removeEventListener(element, "mouseleave", onMouseOut, {
+            dom.removeEventListener(element, 'mouseleave', onMouseOut, {
                 passive: true
             });
-            dom.removeEventListener(element, "mouseup", onMouseOut, {
+            dom.removeEventListener(element, 'mouseup', onMouseOut, {
                 passive: true
             });
         };

src/components/notifications/notifications.js

@@ -5,7 +5,9 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
         document.removeEventListener('click', onOneDocumentClick);
         document.removeEventListener('keydown', onOneDocumentClick);
 
-        if (window.Notification) {
+        // don't request notification permissions if they're already granted or denied
+        if (window.Notification && window.Notification.permission === 'default') {
+            /* eslint-disable-next-line compat/compat */
             Notification.requestPermission();
         }
     }
@@ -26,6 +28,7 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
     }
 
     function resetRegistration() {
+        /* eslint-disable-next-line compat/compat */
         var serviceWorker = navigator.serviceWorker;
         if (serviceWorker) {
             serviceWorker.ready.then(function (registration) {
@@ -43,7 +46,7 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
     function showNonPersistentNotification(title, options, timeoutMs) {
 
         try {
-            var notif = new Notification(title, options);
+            var notif = new Notification(title, options); /* eslint-disable-line compat/compat */
 
             if (notif.show) {
                 notif.show();
@@ -94,10 +97,10 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
         }
 
         var notification = {
-            title: "New " + item.Type,
+            title: 'New ' + item.Type,
             body: body,
             vibrate: true,
-            tag: "newItem" + item.Id,
+            tag: 'newItem' + item.Id,
             data: {
                 //options: {
                 //    url: LibraryBrowser.getHref(item)
@@ -112,7 +115,7 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
             notification.icon = apiClient.getScaledImageUrl(item.Id, {
                 width: 80,
                 tag: imageTags.Primary,
-                type: "Primary"
+                type: 'Primary'
             });
         }
 
@@ -136,11 +139,11 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
 
             Recursive: true,
             Limit: 3,
-            Filters: "IsNotFolder",
-            SortBy: "DateCreated",
-            SortOrder: "Descending",
+            Filters: 'IsNotFolder',
+            SortBy: 'DateCreated',
+            SortOrder: 'Descending',
             Ids: newItems.join(','),
-            MediaTypes: "Audio,Video",
+            MediaTypes: 'Audio,Video',
             EnableTotalRecordCount: false
 
         }).then(function (result) {
@@ -168,7 +171,7 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
             }
 
             var notification = {
-                tag: "install" + installation.Id,
+                tag: 'install' + installation.Id,
                 data: {}
             };
 
@@ -213,25 +216,25 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
     });
 
     events.on(serverNotifications, 'PackageInstallationCompleted', function (e, apiClient, data) {
-        showPackageInstallNotification(apiClient, data, "completed");
+        showPackageInstallNotification(apiClient, data, 'completed');
     });
 
     events.on(serverNotifications, 'PackageInstallationFailed', function (e, apiClient, data) {
-        showPackageInstallNotification(apiClient, data, "failed");
+        showPackageInstallNotification(apiClient, data, 'failed');
     });
 
     events.on(serverNotifications, 'PackageInstallationCancelled', function (e, apiClient, data) {
-        showPackageInstallNotification(apiClient, data, "cancelled");
+        showPackageInstallNotification(apiClient, data, 'cancelled');
     });
 
     events.on(serverNotifications, 'PackageInstalling', function (e, apiClient, data) {
-        showPackageInstallNotification(apiClient, data, "progress");
+        showPackageInstallNotification(apiClient, data, 'progress');
     });
 
     events.on(serverNotifications, 'ServerShuttingDown', function (e, apiClient, data) {
         var serverId = apiClient.serverInfo().Id;
         var notification = {
-            tag: "restart" + serverId,
+            tag: 'restart' + serverId,
             title: globalize.translate('ServerNameIsShuttingDown', apiClient.serverInfo().Name)
         };
         showNotification(notification, 0, apiClient);
@@ -240,7 +243,7 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
     events.on(serverNotifications, 'ServerRestarting', function (e, apiClient, data) {
         var serverId = apiClient.serverInfo().Id;
         var notification = {
-            tag: "restart" + serverId,
+            tag: 'restart' + serverId,
             title: globalize.translate('ServerNameIsRestarting', apiClient.serverInfo().Name)
         };
         showNotification(notification, 0, apiClient);
@@ -250,7 +253,7 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
 
         var serverId = apiClient.serverInfo().Id;
         var notification = {
-            tag: "restart" + serverId,
+            tag: 'restart' + serverId,
             title: globalize.translate('PleaseRestartServerName', apiClient.serverInfo().Name)
         };