Merge branch 'master' into feature-manually-add-subtitle

src/components/AppInfo.js

@@ -0,0 +1,4 @@
+
+export default {
+    isNativeApp: false
+};

src/components/ServerConnections.js

@@ -0,0 +1,82 @@
+import { ConnectionManager, Credentials, ApiClient, Events } from 'jellyfin-apiclient';
+import { appHost } from './apphost';
+import Dashboard from '../scripts/clientUtils';
+import AppInfo from './AppInfo';
+import { setUserInfo } from '../scripts/settings/userSettings';
+
+class ServerConnections extends ConnectionManager {
+    constructor() {
+        super(...arguments);
+        this.localApiClient = null;
+
+        Events.on(this, 'localusersignedout', function () {
+            setUserInfo(null, null);
+        });
+    }
+
+    initApiClient() {
+        if (!AppInfo.isNativeApp) {
+            console.debug('creating ApiClient singleton');
+
+            const apiClient = new ApiClient(
+                Dashboard.serverAddress(),
+                appHost.appName(),
+                appHost.appVersion(),
+                appHost.deviceName(),
+                appHost.deviceId()
+            );
+
+            apiClient.enableAutomaticNetworking = false;
+            apiClient.manualAddressOnly = true;
+
+            this.addApiClient(apiClient);
+
+            this.setLocalApiClient(apiClient);
+
+            console.debug('loaded ApiClient singleton');
+        }
+    }
+
+    setLocalApiClient(apiClient) {
+        if (apiClient) {
+            this.localApiClient = apiClient;
+            window.ApiClient = apiClient;
+        }
+    }
+
+    getLocalApiClient() {
+        return this.localApiClient;
+    }
+
+    currentApiClient() {
+        let apiClient = this.getLocalApiClient();
+
+        if (!apiClient) {
+            const server = this.getLastUsedServer();
+
+            if (server) {
+                apiClient = this.getApiClient(server.Id);
+            }
+        }
+
+        return apiClient;
+    }
+
+    onLocalUserSignedIn(user) {
+        const apiClient = this.getApiClient(user.ServerId);
+        this.setLocalApiClient(apiClient);
+        return setUserInfo(user.Id, apiClient);
+    }
+}
+
+const credentials = new Credentials();
+
+const capabilities = Dashboard.capabilities(appHost);
+
+export default new ServerConnections(
+    credentials,
+    appHost.appName(),
+    appHost.appVersion(),
+    appHost.deviceName(),
+    appHost.deviceId(),
+    capabilities);

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/dialogHelper';
+import datetime from '../../scripts/datetime';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-select/emby-select';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../formdialog.css';
+
+    function getDisplayTime(hours) {
+        let minutes = 0;
+        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('ErrorStartHourGreaterThanEnd'));
+        }
+
+        context.submitted = true;
+        options.schedule = Object.assign(options.schedule, updatedSchedule);
+        dialogHelper.close(context);
+    }
+
+    export function show(options) {
+        return new Promise((resolve, reject) => {
+            import('./accessSchedule.template.html').then(({default: template}) => {
+                const dlg = dialogHelper.createDialog({
+                    removeOnClose: true,
+                    size: 'small'
+                });
+                dlg.classList.add('formDialog');
+                let html = '';
+                html += globalize.translateHtml(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,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" title="${LabelPrevious}" tabindex="-1">
+    <button is="paper-icon-button-light" class="btnCancel autoSize" title="${Previous}" tabindex="-1">
         <span class="material-icons arrow_back" aria-hidden="true"></span>
     </button>
     <h3 class="formDialogHeaderTitle">
@@ -12,13 +12,13 @@
 
             <div class="selectContainer">
                 <select is="emby-select" id="selectDay" label="${LabelAccessDay}">
-                    <option value="Sunday">${OptionSunday}</option>
-                    <option value="Monday">${OptionMonday}</option>
-                    <option value="Tuesday">${OptionTuesday}</option>
-                    <option value="Wednesday">${OptionWednesday}</option>
-                    <option value="Thursday">${OptionThursday}</option>
-                    <option value="Friday">${OptionFriday}</option>
-                    <option value="Saturday">${OptionSaturday}</option>
+                    <option value="Sunday">${Sunday}</option>
+                    <option value="Monday">${Monday}</option>
+                    <option value="Tuesday">${Tuesday}</option>
+                    <option value="Wednesday">${Wednesday}</option>
+                    <option value="Thursday">${Thursday}</option>
+                    <option value="Friday">${Friday}</option>
+                    <option value="Saturday">${Saturday}</option>
                     <option value="Everyday">${OptionEveryday}</option>
                     <option value="Weekday">${OptionWeekdays}</option>
                     <option value="Weekend">${OptionWeekends}</option>
@@ -33,7 +33,7 @@
 
             <div class="formDialogFooter">
                 <button is="emby-button" type="submit" class="raised button-submit block formDialogFooterItem">
-                    <span>${ButtonAdd}</span>
+                    <span>${Add}</span>
                 </button>
             </div>
         </form>

src/components/accessschedule/accessschedule.js

@@ -1,89 +0,0 @@
-define(['dialogHelper', 'datetime', 'globalize', 'emby-select', 'paper-icon-button-light', 'formDialogStyle'], function (dialogHelper, datetime, globalize) {
-    '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

@@ -1,30 +1,22 @@
-import dialogHelper from 'dialogHelper';
-import layoutManager from 'layoutManager';
-import globalize from 'globalize';
-import dom from 'dom';
-import 'emby-button';
-import 'css!./actionsheet';
-import 'material-icons';
-import 'scrollStyles';
-import 'listViewStyle';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import layoutManager from '../layoutManager';
+import globalize from '../../scripts/globalize';
+import dom from '../../scripts/dom';
+import '../../elements/emby-button/emby-button';
+import './actionSheet.css';
+import 'material-design-icons-iconfont';
+import '../../assets/css/scrollstyles.css';
+import '../../components/listview/listview.css';
 
 function getOffsets(elems) {
-
-    let results = [];
+    const results = [];
 
     if (!document) {
         return results;
     }
 
-    let box;
-    for (let elem of elems) {
-        // 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 };
-        }
+    for (const elem of elems) {
+        const box = elem.getBoundingClientRect();
 
         results.push({
             top: box.top,
@@ -38,12 +30,11 @@ function getOffsets(elems) {
 }
 
 function getPosition(options, dlg) {
-
     const windowSize = dom.getWindowSize();
     const windowHeight = windowSize.innerHeight;
     const windowWidth = windowSize.innerWidth;
 
-    let pos = getOffsets([options.positionTo])[0];
+    const pos = getOffsets([options.positionTo])[0];
 
     if (options.positionY !== 'top') {
         pos.top += (pos.height || 0) / 2;
@@ -80,19 +71,18 @@ function getPosition(options, dlg) {
 }
 
 function centerFocus(elem, horiz, on) {
-    require(['scrollHelper'], function (scrollHelper) {
+    import('../../scripts/scrollHelper').then((scrollHelper) => {
         const fn = on ? 'on' : 'off';
         scrollHelper.centerFocus[fn](elem, horiz);
     });
 }
 
 export function show(options) {
-
     // items
     // positionTo
     // showCancel
     // title
-    let dialogOptions = {
+    const dialogOptions = {
         removeOnClose: true,
         enableHistory: options.enableHistory,
         scrollY: false
@@ -105,7 +95,6 @@ export function show(options) {
         isFullscreen = true;
         dialogOptions.autoFocus = true;
     } else {
-
         dialogOptions.modal = false;
         dialogOptions.entryAnimation = options.entryAnimation;
         dialogOptions.exitAnimation = options.exitAnimation;
@@ -114,7 +103,7 @@ export function show(options) {
         dialogOptions.autoFocus = false;
     }
 
-    let dlg = dialogHelper.createDialog(dialogOptions);
+    const dlg = dialogHelper.createDialog(dialogOptions);
 
     if (isFullscreen) {
         dlg.classList.add('actionsheet-fullscreen');
@@ -140,10 +129,9 @@ export function show(options) {
     }
 
     let renderIcon = false;
-    let icons = [];
+    const icons = [];
     let itemIcon;
-    for (let item of options.items) {
-
+    for (const item of options.items) {
         itemIcon = item.icon || (item.selected ? 'check' : null);
 
         if (itemIcon) {
@@ -153,7 +141,9 @@ export function show(options) {
     }
 
     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>';
+        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
@@ -166,7 +156,6 @@ export function show(options) {
     }
 
     if (options.title) {
-
         html += '<h1 class="actionSheetTitle">' + options.title + '</h1>';
     }
     if (options.text) {
@@ -197,10 +186,11 @@ export function show(options) {
         menuItemClass += ' actionsheet-xlargeFont';
     }
 
-    for (let [i, item] of options.items.entries()) {
+    // '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;
         }
@@ -214,7 +204,7 @@ export function show(options) {
         itemIcon = icons[i];
 
         if (itemIcon) {
-            html += '<span class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons ' + itemIcon + '"></span>';
+            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>';
         }
@@ -226,13 +216,13 @@ export function show(options) {
         html += '</div>';
 
         if (item.secondaryText) {
-            html += '<div class="listItemBodyText secondary">' + item.secondaryText + '</div>';
+            html += `<div class="listItemBodyText secondary">${item.secondaryText}</div>`;
         }
 
         html += '</div>';
 
         if (item.asideText) {
-            html += '<div class="listItemAside actionSheetItemAsideText">' + item.asideText + '</div>';
+            html += `<div class="listItemAside actionSheetItemAsideText">${item.asideText}</div>`;
         }
 
         html += '</button>';
@@ -240,7 +230,7 @@ export function show(options) {
 
     if (options.showCancel) {
         html += '<div class="buttons">';
-        html += '<button is="emby-button" type="button" class="btnCloseActionSheet">' + globalize.translate('ButtonCancel') + '</button>';
+        html += `<button is="emby-button" type="button" class="btnCloseActionSheet">${globalize.translate('ButtonCancel')}</button>`;
         html += '</div>';
     }
     html += '</div>';
@@ -251,15 +241,13 @@ export function show(options) {
         centerFocus(dlg.querySelector('.actionSheetScroller'), false, true);
     }
 
-    let btnCloseActionSheet = dlg.querySelector('.btnCloseActionSheet');
+    const 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;
@@ -270,26 +258,20 @@ export function show(options) {
     }
 
     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;
@@ -298,11 +280,9 @@ export function show(options) {
 
                 dialogHelper.close(dlg);
             }
-
         });
 
         dlg.addEventListener('close', function () {
-
             if (layoutManager.tv) {
                 centerFocus(dlg.querySelector('.actionSheetScroller'), false, false);
             }

src/components/activitylog.js

@@ -1,13 +1,23 @@
-define(['events', 'globalize', 'dom', 'date-fns', 'dfnshelper', 'userSettings', 'serverNotifications', 'connectionManager', 'emby-button', 'listViewStyle'], function (events, globalize, dom, datefns, dfnshelper, userSettings, serverNotifications, connectionManager) {
-    'use strict';
+import { Events } from 'jellyfin-apiclient';
+import globalize from '../scripts/globalize';
+import dom from '../scripts/dom';
+import * as datefns from 'date-fns';
+import dfnshelper from '../scripts/dfnshelper';
+import serverNotifications from '../scripts/serverNotifications';
+import '../elements/emby-button/emby-button';
+import './listview/listview.css';
+import ServerConnections from './ServerConnections';
+import alert from './alert';
+
+/* eslint-disable indent */
 
     function getEntryHtml(entry, apiClient) {
-        var html = '';
+        let html = '';
         html += '<div class="listItem listItem-border">';
-        var color = '#00a4dc';
-        var icon = 'notifications';
+        let color = '#00a4dc';
+        let icon = 'notifications';
 
-        if ('Error' == entry.Severity || 'Fatal' == entry.Severity || 'Warn' == entry.Severity) {
+        if (entry.Severity == 'Error' || entry.Severity == 'Fatal' || entry.Severity == 'Warn') {
             color = '#cc0000';
             icon = 'notification_important';
         }
@@ -34,10 +44,14 @@ define(['events', 'globalize', 'dom', 'date-fns', 'dfnshelper', 'userSettings',
         html += '</div>';
 
         if (entry.Overview) {
-            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>';
+            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) {
@@ -47,14 +61,15 @@ define(['events', 'globalize', 'dom', 'date-fns', 'dfnshelper', 'userSettings',
     }
 
     function reloadData(instance, elem, apiClient, startIndex, limit) {
-        if (null == startIndex) {
+        if (startIndex == null) {
             startIndex = parseInt(elem.getAttribute('data-activitystartindex') || '0');
         }
 
         limit = limit || parseInt(elem.getAttribute('data-activitylimit') || '7');
-        var minDate = new Date();
-        var hasUserId = 'false' !== elem.getAttribute('data-useractivity');
+        const minDate = new Date();
+        const hasUserId = elem.getAttribute('data-useractivity') !== 'false';
 
+        // TODO: Use date-fns
         if (hasUserId) {
             minDate.setTime(minDate.getTime() - 24 * 60 * 60 * 1000); // one day back
         } else {
@@ -70,7 +85,7 @@ define(['events', 'globalize', 'dom', 'date-fns', 'dfnshelper', 'userSettings',
             elem.setAttribute('data-activitystartindex', startIndex);
             elem.setAttribute('data-activitylimit', limit);
             if (!startIndex) {
-                var activityContainer = dom.parentWithClass(elem, 'activityContainer');
+                const activityContainer = dom.parentWithClass(elem, 'activityContainer');
 
                 if (activityContainer) {
                     if (result.Items.length) {
@@ -87,7 +102,7 @@ define(['events', 'globalize', 'dom', 'date-fns', 'dfnshelper', 'userSettings',
     }
 
     function onActivityLogUpdate(e, apiClient, data) {
-        var options = this.options;
+        const options = this.options;
 
         if (options && options.serverId === apiClient.serverId()) {
             reloadData(this, options.element, apiClient);
@@ -95,14 +110,14 @@ define(['events', 'globalize', 'dom', 'date-fns', 'dfnshelper', 'userSettings',
     }
 
     function onListClick(e) {
-        var btnEntryInfo = dom.parentWithClass(e.target, 'btnEntryInfo');
+        const btnEntryInfo = dom.parentWithClass(e.target, 'btnEntryInfo');
 
         if (btnEntryInfo) {
-            var id = btnEntryInfo.getAttribute('data-id');
-            var items = this.items;
+            const id = btnEntryInfo.getAttribute('data-id');
+            const items = this.items;
 
             if (items) {
-                var item = items.filter(function (i) {
+                const item = items.filter(function (i) {
                     return i.Id.toString() === id;
                 })[0];
 
@@ -114,43 +129,43 @@ define(['events', 'globalize', 'dom', 'date-fns', 'dfnshelper', 'userSettings',
     }
 
     function showItemOverview(item) {
-        require(['alert'], function (alert) {
-            alert({
-                text: item.Overview
-            });
+        alert({
+            text: item.Overview
         });
     }
 
-    function ActivityLog(options) {
+class ActivityLog {
+    constructor(options) {
         this.options = options;
-        var element = options.element;
+        const element = options.element;
         element.classList.add('activityLogListWidget');
         element.addEventListener('click', onListClick.bind(this));
-        var apiClient = connectionManager.getApiClient(options.serverId);
+        const apiClient = ServerConnections.getApiClient(options.serverId);
         reloadData(this, element, apiClient);
-        var onUpdate = onActivityLogUpdate.bind(this);
+        const onUpdate = onActivityLogUpdate.bind(this);
         this.updateFn = onUpdate;
-        events.on(serverNotifications, 'ActivityLogEntry', onUpdate);
+        Events.on(serverNotifications, 'ActivityLogEntry', onUpdate);
         apiClient.sendMessage('ActivityLogEntryStart', '0,1500');
     }
-
-    ActivityLog.prototype.destroy = function () {
-        var options = this.options;
+    destroy() {
+        const options = this.options;
 
         if (options) {
             options.element.classList.remove('activityLogListWidget');
-            connectionManager.getApiClient(options.serverId).sendMessage('ActivityLogEntryStop', '0,1500');
+            ServerConnections.getApiClient(options.serverId).sendMessage('ActivityLogEntryStop', '0,1500');
         }
 
-        var onUpdate = this.updateFn;
+        const onUpdate = this.updateFn;
 
         if (onUpdate) {
-            events.off(serverNotifications, 'ActivityLogEntry', onUpdate);
+            Events.off(serverNotifications, 'ActivityLogEntry', onUpdate);
         }
 
         this.items = null;
         this.options = null;
-    };
+    }
+}
 
-    return ActivityLog;
-});
+export default ActivityLog;
+
+/* eslint-enable indent */

src/components/alert.js

@@ -1,14 +1,17 @@
-define(['browser', 'dialog', 'globalize'], function (browser, dialog, globalize) {
-    'use strict';
+
+import browser from '../scripts/browser';
+import dialog from './dialog/dialog';
+import globalize from '../scripts/globalize';
+
+/* eslint-disable indent */
 
     function replaceAll(originalString, strReplace, strWith) {
-        var reg = new RegExp(strReplace, 'ig');
+        const reg = new RegExp(strReplace, 'ig');
         return originalString.replace(reg, strWith);
     }
 
-    return function (text, title) {
-
-        var options;
+    export default function (text, title) {
+        let options;
         if (typeof text === 'string') {
             options = {
                 title: title,
@@ -21,7 +24,7 @@ define(['browser', 'dialog', 'globalize'], function (browser, dialog, globalize)
         if (browser.tv && window.alert) {
             alert(replaceAll(options.text || '', '<br/>', '\n'));
         } else {
-            var items = [];
+            const items = [];
 
             items.push({
                 name: globalize.translate('ButtonGotIt'),
@@ -31,7 +34,7 @@ define(['browser', 'dialog', 'globalize'], function (browser, dialog, globalize)
 
             options.buttons = items;
 
-            return dialog(options).then(function (result) {
+            return dialog.show(options).then(function (result) {
                 if (result === 'ok') {
                     return Promise.resolve();
                 }
@@ -41,5 +44,6 @@ define(['browser', 'dialog', 'globalize'], function (browser, dialog, globalize)
         }
 
         return Promise.resolve();
-    };
-});
+    }
+
+/* eslint-enable indent */

src/components/alphaPicker/alphaPicker.js

@@ -0,0 +1,313 @@
+/* eslint-disable indent */
+
+/**
+ * Module alphaPicker.
+ * @module components/alphaPicker/alphaPicker
+ */
+
+import focusManager from '../focusManager';
+import layoutManager from '../layoutManager';
+import dom from '../../scripts/dom';
+import './style.css';
+import '../../elements/emby-button/paper-icon-button-light';
+import 'material-design-icons-iconfont';
+
+    const selectedButtonClass = 'alphaPickerButton-selected';
+
+    function focus() {
+        const scope = this;
+        const selected = scope.querySelector(`.${selectedButtonClass}`);
+
+        if (selected) {
+            focusManager.focus(selected);
+        } else {
+            focusManager.autoFocus(scope, true);
+        }
+    }
+
+    function getAlphaPickerButtonClassName(vertical) {
+        let alphaPickerButtonClassName = 'alphaPickerButton';
+
+        if (layoutManager.tv) {
+            alphaPickerButtonClassName += ' alphaPickerButton-tv';
+        }
+
+        if (vertical) {
+            alphaPickerButtonClassName += ' alphaPickerButton-vertical';
+        }
+
+        return alphaPickerButtonClassName;
+    }
+
+    function getLetterButton(l, vertical) {
+        return `<button data-value="${l}" class="${getAlphaPickerButtonClassName(vertical)}">${l}</button>`;
+    }
+
+    function mapLetters(letters, vertical) {
+        return letters.map(l => {
+            return getLetterButton(l, vertical);
+        });
+    }
+
+    function render(element, options) {
+        element.classList.add('alphaPicker');
+
+        if (layoutManager.tv) {
+            element.classList.add('alphaPicker-tv');
+        }
+
+        const vertical = element.classList.contains('alphaPicker-vertical');
+
+        if (!vertical) {
+            element.classList.add('focuscontainer-x');
+        }
+
+        let html = '';
+        let letters;
+
+        const alphaPickerButtonClassName = getAlphaPickerButtonClassName(vertical);
+
+        let rowClassName = 'alphaPickerRow';
+
+        if (vertical) {
+            rowClassName += ' alphaPickerRow-vertical';
+        }
+
+        html += `<div class="${rowClassName}">`;
+        if (options.mode === 'keyboard') {
+            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('');
+        }
+
+        letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
+        html += mapLetters(letters, vertical).join('');
+
+        if (options.mode === 'keyboard') {
+            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'];
+            html += `<div class="${rowClassName}">`;
+            html += '<br/>';
+            html += mapLetters(letters, vertical).join('');
+            html += '</div>';
+        } else {
+            html += '</div>';
+        }
+
+        element.innerHTML = html;
+
+        element.classList.add('focusable');
+        element.focus = focus;
+    }
+
+    export class AlphaPicker {
+        constructor(options) {
+            const self = this;
+
+            this.options = options;
+
+            const element = options.element;
+            const itemsContainer = options.itemsContainer;
+            const itemClass = options.itemClass;
+
+            let itemFocusValue;
+            let itemFocusTimeout;
+
+            function onItemFocusTimeout() {
+                itemFocusTimeout = null;
+                self.value(itemFocusValue);
+            }
+
+            let alphaFocusedElement;
+            let alphaFocusTimeout;
+
+            function onAlphaFocusTimeout() {
+                alphaFocusTimeout = null;
+
+                if (document.activeElement === alphaFocusedElement) {
+                    const value = alphaFocusedElement.getAttribute('data-value');
+                    self.value(value, true);
+                }
+            }
+
+            function onAlphaPickerInKeyboardModeClick(e) {
+                const alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
+
+                if (alphaPickerButton) {
+                    const value = alphaPickerButton.getAttribute('data-value');
+
+                    element.dispatchEvent(new CustomEvent('alphavalueclicked', {
+                        cancelable: false,
+                        detail: {
+                            value
+                        }
+                    }));
+                }
+            }
+
+            function onAlphaPickerClick(e) {
+                const alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
+
+                if (alphaPickerButton) {
+                    const value = alphaPickerButton.getAttribute('data-value');
+                    if ((this._currentValue || '').toUpperCase() === value.toUpperCase()) {
+                        this.value(null, true);
+                    } else {
+                        this.value(value, true);
+                    }
+                }
+            }
+
+            function onAlphaPickerFocusIn(e) {
+                if (alphaFocusTimeout) {
+                    clearTimeout(alphaFocusTimeout);
+                    alphaFocusTimeout = null;
+                }
+
+                const alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
+
+                if (alphaPickerButton) {
+                    alphaFocusedElement = alphaPickerButton;
+                    alphaFocusTimeout = setTimeout(onAlphaFocusTimeout, 600);
+                }
+            }
+
+            function onItemsFocusIn(e) {
+                const item = dom.parentWithClass(e.target, itemClass);
+
+                if (item) {
+                    const prefix = item.getAttribute('data-prefix');
+                    if (prefix && prefix.length) {
+                        itemFocusValue = prefix[0];
+                        if (itemFocusTimeout) {
+                            clearTimeout(itemFocusTimeout);
+                        }
+                        itemFocusTimeout = setTimeout(onItemFocusTimeout, 100);
+                    }
+                }
+            }
+
+            this.enabled = function (enabled) {
+                if (enabled) {
+                    if (itemsContainer) {
+                        itemsContainer.addEventListener('focus', onItemsFocusIn, true);
+                    }
+
+                    if (options.mode === 'keyboard') {
+                        element.addEventListener('click', onAlphaPickerInKeyboardModeClick);
+                    }
+
+                    if (options.valueChangeEvent !== 'click') {
+                        element.addEventListener('focus', onAlphaPickerFocusIn, true);
+                    } else {
+                        element.addEventListener('click', onAlphaPickerClick.bind(this));
+                    }
+                } else {
+                    if (itemsContainer) {
+                        itemsContainer.removeEventListener('focus', onItemsFocusIn, true);
+                    }
+
+                    element.removeEventListener('click', onAlphaPickerInKeyboardModeClick);
+                    element.removeEventListener('focus', onAlphaPickerFocusIn, true);
+                    element.removeEventListener('click', onAlphaPickerClick.bind(this));
+                }
+            };
+
+            render(element, options);
+
+            this.enabled(true);
+            this.visible(true);
+        }
+
+        value(value, applyValue) {
+            const element = this.options.element;
+            let btn;
+            let selected;
+
+            if (value !== undefined) {
+                if (value != null) {
+                    value = value.toUpperCase();
+                    this._currentValue = value;
+
+                    if (this.options.mode !== 'keyboard') {
+                        selected = element.querySelector(`.${selectedButtonClass}`);
+
+                        try {
+                            btn = element.querySelector(`.alphaPickerButton[data-value='${value}']`);
+                        } catch (err) {
+                            console.error('error in querySelector:', err);
+                        }
+
+                        if (btn && btn !== selected) {
+                            btn.classList.add(selectedButtonClass);
+                        }
+                        if (selected && selected !== btn) {
+                            selected.classList.remove(selectedButtonClass);
+                        }
+                    }
+                } else {
+                    this._currentValue = value;
+
+                    selected = element.querySelector(`.${selectedButtonClass}`);
+                    if (selected) {
+                        selected.classList.remove(selectedButtonClass);
+                    }
+                }
+            }
+
+            if (applyValue) {
+                element.dispatchEvent(new CustomEvent('alphavaluechanged', {
+                    cancelable: false,
+                    detail: {
+                        value
+                    }
+                }));
+            }
+
+            return this._currentValue;
+        }
+
+        on(name, fn) {
+            const element = this.options.element;
+            element.addEventListener(name, fn);
+        }
+
+        off(name, fn) {
+            const element = this.options.element;
+            element.removeEventListener(name, fn);
+        }
+
+        visible(visible) {
+            const element = this.options.element;
+            element.style.visibility = visible ? 'visible' : 'hidden';
+        }
+
+        values() {
+            const element = this.options.element;
+            const elems = element.querySelectorAll('.alphaPickerButton');
+            const values = [];
+            for (let i = 0, length = elems.length; i < length; i++) {
+                values.push(elems[i].getAttribute('data-value'));
+            }
+
+            return values;
+        }
+
+        focus() {
+            const element = this.options.element;
+            focusManager.autoFocus(element, true);
+        }
+
+        destroy() {
+            const element = this.options.element;
+            this.enabled(false);
+            element.classList.remove('focuscontainer-x');
+            this.options = null;
+        }
+    }
+
+/* eslint-enable indent */
+export default AlphaPicker;

src/components/alphaPicker/style.css

@@ -12,7 +12,6 @@
 .alphaPicker-fixed {
     position: fixed;
     bottom: 5.5em;
-    z-index: 999999;
 }
 
 .alphaPickerRow {

src/components/alphapicker/alphapicker.js

@@ -1,321 +0,0 @@
-define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-button-light', 'material-icons'], function (focusManager, layoutManager, dom) {
-    'use strict';
-
-    var selectedButtonClass = 'alphaPickerButton-selected';
-
-    function focus() {
-        var scope = this;
-        var selected = scope.querySelector('.' + selectedButtonClass);
-
-        if (selected) {
-            focusManager.focus(selected);
-        } else {
-            focusManager.autoFocus(scope, true);
-        }
-    }
-
-    function getAlphaPickerButtonClassName(vertical) {
-
-        var alphaPickerButtonClassName = 'alphaPickerButton';
-
-        if (layoutManager.tv) {
-            alphaPickerButtonClassName += ' alphaPickerButton-tv';
-        }
-
-        if (vertical) {
-            alphaPickerButtonClassName += ' alphaPickerButton-vertical';
-        }
-
-        return alphaPickerButtonClassName;
-    }
-
-    function getLetterButton(l, vertical) {
-        return '<button data-value="' + l + '" class="' + getAlphaPickerButtonClassName(vertical) + '">' + l + '</button>';
-    }
-
-    function mapLetters(letters, vertical) {
-
-        return letters.map(function (l) {
-            return getLetterButton(l, vertical);
-        });
-    }
-
-    function render(element, options) {
-
-        element.classList.add('alphaPicker');
-
-        if (layoutManager.tv) {
-            element.classList.add('alphaPicker-tv');
-        }
-
-        var vertical = element.classList.contains('alphaPicker-vertical');
-
-        if (!vertical) {
-            element.classList.add('focuscontainer-x');
-        }
-
-        var html = '';
-        var letters;
-
-        var alphaPickerButtonClassName = getAlphaPickerButtonClassName(vertical);
-
-        var rowClassName = 'alphaPickerRow';
-
-        if (vertical) {
-            rowClassName += ' alphaPickerRow-vertical';
-        }
-
-        html += '<div class="' + rowClassName + '">';
-        if (options.mode === 'keyboard') {
-            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('');
-        }
-
-        letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
-        html += mapLetters(letters, vertical).join('');
-
-        if (options.mode === 'keyboard') {
-            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'];
-            html += '<div class="' + rowClassName + '">';
-            html += '<br/>';
-            html += mapLetters(letters, vertical).join('');
-            html += '</div>';
-        } else {
-            html += '</div>';
-        }
-
-        element.innerHTML = html;
-
-        element.classList.add('focusable');
-        element.focus = focus;
-    }
-
-    function AlphaPicker(options) {
-
-        var self = this;
-        this.options = options;
-
-        var element = options.element;
-        var itemsContainer = options.itemsContainer;
-        var itemClass = options.itemClass;
-
-        var itemFocusValue;
-        var itemFocusTimeout;
-
-        function onItemFocusTimeout() {
-            itemFocusTimeout = null;
-            self.value(itemFocusValue);
-        }
-
-        var alphaFocusedElement;
-        var alphaFocusTimeout;
-
-        function onAlphaFocusTimeout() {
-
-            alphaFocusTimeout = null;
-
-            if (document.activeElement === alphaFocusedElement) {
-                var value = alphaFocusedElement.getAttribute('data-value');
-                self.value(value, true);
-            }
-        }
-
-        function onAlphaPickerInKeyboardModeClick(e) {
-
-            var alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
-
-            if (alphaPickerButton) {
-                var value = alphaPickerButton.getAttribute('data-value');
-
-                element.dispatchEvent(new CustomEvent('alphavalueclicked', {
-                    cancelable: false,
-                    detail: {
-                        value: value
-                    }
-                }));
-            }
-        }
-
-        function onAlphaPickerClick(e) {
-
-            var alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
-
-            if (alphaPickerButton) {
-                var value = alphaPickerButton.getAttribute('data-value');
-                if ((this._currentValue || '').toUpperCase() === value.toUpperCase()) {
-                    self.value(null, true);
-                } else {
-                    self.value(value, true);
-                }
-            }
-        }
-
-        function onAlphaPickerFocusIn(e) {
-
-            if (alphaFocusTimeout) {
-                clearTimeout(alphaFocusTimeout);
-                alphaFocusTimeout = null;
-            }
-
-            var alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
-
-            if (alphaPickerButton) {
-                alphaFocusedElement = alphaPickerButton;
-                alphaFocusTimeout = setTimeout(onAlphaFocusTimeout, 600);
-            }
-        }
-
-        function onItemsFocusIn(e) {
-
-            var item = dom.parentWithClass(e.target, itemClass);
-
-            if (item) {
-                var prefix = item.getAttribute('data-prefix');
-                if (prefix && prefix.length) {
-
-                    itemFocusValue = prefix[0];
-                    if (itemFocusTimeout) {
-                        clearTimeout(itemFocusTimeout);
-                    }
-                    itemFocusTimeout = setTimeout(onItemFocusTimeout, 100);
-                }
-            }
-        }
-
-        self.enabled = function (enabled) {
-
-            if (enabled) {
-
-                if (itemsContainer) {
-                    itemsContainer.addEventListener('focus', onItemsFocusIn, true);
-                }
-
-                if (options.mode === 'keyboard') {
-                    element.addEventListener('click', onAlphaPickerInKeyboardModeClick);
-                }
-
-                if (options.valueChangeEvent !== 'click') {
-                    element.addEventListener('focus', onAlphaPickerFocusIn, true);
-                } else {
-                    element.addEventListener('click', onAlphaPickerClick.bind(this));
-                }
-
-            } else {
-
-                if (itemsContainer) {
-                    itemsContainer.removeEventListener('focus', onItemsFocusIn, true);
-                }
-
-                element.removeEventListener('click', onAlphaPickerInKeyboardModeClick);
-                element.removeEventListener('focus', onAlphaPickerFocusIn, true);
-                element.removeEventListener('click', onAlphaPickerClick.bind(this));
-            }
-        };
-
-        render(element, options);
-
-        this.enabled(true);
-        this.visible(true);
-    }
-
-    AlphaPicker.prototype.value = function (value, applyValue) {
-
-        var element = this.options.element;
-        var btn;
-        var selected;
-
-        if (value !== undefined) {
-            if (value != null) {
-
-                value = value.toUpperCase();
-                this._currentValue = value;
-
-                if (this.options.mode !== 'keyboard') {
-                    selected = element.querySelector('.' + selectedButtonClass);
-
-                    try {
-                        btn = element.querySelector('.alphaPickerButton[data-value=\'' + value + '\']');
-                    } catch (err) {
-                        console.error('error in querySelector: ' + err);
-                    }
-
-                    if (btn && btn !== selected) {
-                        btn.classList.add(selectedButtonClass);
-                    }
-                    if (selected && selected !== btn) {
-                        selected.classList.remove(selectedButtonClass);
-                    }
-                }
-            } else {
-                this._currentValue = value;
-
-                selected = element.querySelector('.' + selectedButtonClass);
-                if (selected) {
-                    selected.classList.remove(selectedButtonClass);
-                }
-            }
-        }
-
-        if (applyValue) {
-            element.dispatchEvent(new CustomEvent('alphavaluechanged', {
-                cancelable: false,
-                detail: {
-                    value: value
-                }
-            }));
-        }
-
-        return this._currentValue;
-    };
-
-    AlphaPicker.prototype.on = function (name, fn) {
-        var element = this.options.element;
-        element.addEventListener(name, fn);
-    };
-
-    AlphaPicker.prototype.off = function (name, fn) {
-        var element = this.options.element;
-        element.removeEventListener(name, fn);
-    };
-
-    AlphaPicker.prototype.visible = function (visible) {
-
-        var element = this.options.element;
-        element.style.visibility = visible ? 'visible' : 'hidden';
-    };
-
-    AlphaPicker.prototype.values = function () {
-
-        var element = this.options.element;
-        var elems = element.querySelectorAll('.alphaPickerButton');
-        var values = [];
-        for (var i = 0, length = elems.length; i < length; i++) {
-
-            values.push(elems[i].getAttribute('data-value'));
-
-        }
-
-        return values;
-    };
-
-    AlphaPicker.prototype.focus = function () {
-
-        var element = this.options.element;
-        focusManager.autoFocus(element, true);
-    };
-
-    AlphaPicker.prototype.destroy = function () {
-
-        var element = this.options.element;
-        this.enabled(false);
-        element.classList.remove('focuscontainer-x');
-        this.options = null;
-    };
-
-    return AlphaPicker;
-});

src/components/appFooter/appFooter.js

@@ -1,17 +1,17 @@
-define(['browser', 'css!./appfooter'], function (browser) {
-    'use strict';
+import './appFooter.css';
 
-    function render(options) {
-        var elem = document.createElement('div');
-        elem.classList.add('appfooter');
+function render(options) {
+    const elem = document.createElement('div');
+    elem.classList.add('appfooter');
 
-        document.body.appendChild(elem);
+    document.body.appendChild(elem);
 
-        return elem;
-    }
+    return elem;
+}
 
-    function appFooter(options) {
-        var self = this;
+class appFooter {
+    constructor(options) {
+        const self = this;
 
         self.element = render(options);
         self.add = function (elem) {
@@ -26,12 +26,11 @@ define(['browser', 'css!./appfooter'], function (browser) {
             }
         };
     }
-
-    appFooter.prototype.destroy = function () {
-        var self = this;
+    destroy() {
+        const self = this;
 
         self.element = null;
-    };
+    }
+}
 
-    return appFooter;
-});
+export default new appFooter({});

src/components/apphost.js

@@ -1,439 +1,412 @@
-define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'globalize'], function (appSettings, browser, events, htmlMediaHelper, webSettings, globalize) {
-    'use strict';
 
-    function getBaseProfileOptions(item) {
-        var disableHlsVideoAudioCodecs = [];
+import appSettings from '../scripts/settings/appSettings';
+import browser from '../scripts/browser';
+import { Events } from 'jellyfin-apiclient';
+import * as htmlMediaHelper from '../components/htmlMediaHelper';
+import * as webSettings from '../scripts/settings/webSettings';
+import globalize from '../scripts/globalize';
+import profileBuilder from '../scripts/browserDeviceProfile';
 
-        if (item && htmlMediaHelper.enableHlsJsPlayer(item.RunTimeTicks, item.MediaType)) {
-            if (browser.edge || browser.msie) {
-                disableHlsVideoAudioCodecs.push('mp3');
-            }
+function getBaseProfileOptions(item) {
+    const disableHlsVideoAudioCodecs = [];
 
-            disableHlsVideoAudioCodecs.push('ac3');
-            disableHlsVideoAudioCodecs.push('eac3');
-            disableHlsVideoAudioCodecs.push('opus');
+    if (item && htmlMediaHelper.enableHlsJsPlayer(item.RunTimeTicks, item.MediaType)) {
+        if (browser.edge) {
+            disableHlsVideoAudioCodecs.push('mp3');
         }
 
-        return {
-            enableMkvProgressive: false,
-            disableHlsVideoAudioCodecs: disableHlsVideoAudioCodecs
-        };
+        disableHlsVideoAudioCodecs.push('ac3');
+        disableHlsVideoAudioCodecs.push('eac3');
+        disableHlsVideoAudioCodecs.push('opus');
     }
 
-    function getDeviceProfileForWindowsUwp(item) {
-        return new Promise(function (resolve, reject) {
-            require(['browserdeviceprofile', 'environments/windows-uwp/mediacaps'], function (profileBuilder, uwpMediaCaps) {
-                var profileOptions = getBaseProfileOptions(item);
-                profileOptions.supportsDts = uwpMediaCaps.supportsDTS();
-                profileOptions.supportsTrueHd = uwpMediaCaps.supportsDolby();
-                profileOptions.audioChannels = uwpMediaCaps.getAudioChannels();
-                resolve(profileBuilder(profileOptions));
-            });
-        });
-    }
+    return {
+        enableMkvProgressive: false,
+        disableHlsVideoAudioCodecs: disableHlsVideoAudioCodecs
+    };
+}
 
-    function getDeviceProfile(item, options) {
-        options = options || {};
+function getDeviceProfile(item, options = {}) {
+    return new Promise(function (resolve) {
+        let profile;
 
-        if (self.Windows) {
-            return getDeviceProfileForWindowsUwp(item);
+        if (window.NativeShell) {
+            profile = window.NativeShell.AppHost.getDeviceProfile(profileBuilder);
+        } else {
+            const builderOpts = getBaseProfileOptions(item);
+            profile = profileBuilder(builderOpts);
         }
 
-        return new Promise(function (resolve) {
-            require(['browserdeviceprofile'], function (profileBuilder) {
-                var profile;
+        resolve(profile);
+    });
+}
 
-                if (window.NativeShell) {
-                    profile = window.NativeShell.AppHost.getDeviceProfile(profileBuilder);
-                } else {
-                    var builderOpts = getBaseProfileOptions(item);
-                    builderOpts.enableSsaRender = (item && !options.isRetry && 'allcomplexformats' !== appSettings.get('subtitleburnin'));
-                    profile = profileBuilder(builderOpts);
-                }
+function escapeRegExp(str) {
+    return str.replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1');
+}
 
-                resolve(profile);
-            });
-        });
+function replaceAll(originalString, strReplace, strWith) {
+    const strReplace2 = escapeRegExp(strReplace);
+    const reg = new RegExp(strReplace2, 'ig');
+    return originalString.replace(reg, strWith);
+}
+
+function generateDeviceId() {
+    const keys = [];
+
+    if (keys.push(navigator.userAgent), keys.push(new Date().getTime()), window.btoa) {
+        const result = replaceAll(btoa(keys.join('|')), '=', '1');
+        return result;
     }
 
-    function escapeRegExp(str) {
-        return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, '\\$1');
-    }
+    return new Date().getTime();
+}
 
-    function replaceAll(originalString, strReplace, strWith) {
-        var strReplace2 = escapeRegExp(strReplace);
-        var reg = new RegExp(strReplace2, 'ig');
-        return originalString.replace(reg, strWith);
-    }
+function getDeviceId() {
+    if (!deviceId) {
+        const key = '_deviceId2';
 
-    function generateDeviceId() {
-        var keys = [];
+        deviceId = appSettings.get(key);
 
-        if (keys.push(navigator.userAgent), keys.push(new Date().getTime()), self.btoa) {
-            var result = replaceAll(btoa(keys.join('|')), '=', '1');
-            return Promise.resolve(result);
-        }
-
-        return Promise.resolve(new Date().getTime());
-    }
-
-    function getDeviceId() {
-        var key = '_deviceId2';
-        var deviceId = appSettings.get(key);
-
-        if (deviceId) {
-            return Promise.resolve(deviceId);
-        }
-
-        return generateDeviceId().then(function (deviceId) {
+        if (!deviceId) {
+            deviceId = generateDeviceId();
             appSettings.set(key, deviceId);
-            return deviceId;
-        });
+        }
     }
 
-    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';
+    return deviceId;
+}
+
+function getDeviceName() {
+    if (!deviceName) {
+        if (browser.tizen) {
+            deviceName = 'Samsung Smart TV';
+        } else if (browser.web0s) {
+            deviceName = 'LG Smart TV';
+        } else if (browser.operaTv) {
+            deviceName = 'Opera TV';
+        } else if (browser.xboxOne) {
+            deviceName = 'Xbox One';
+        } else if (browser.ps4) {
+            deviceName = 'Sony PS4';
+        } else if (browser.chrome) {
+            deviceName = 'Chrome';
+        } else if (browser.edgeChromium) {
+            deviceName = 'Edge Chromium';
+        } else if (browser.edge) {
+            deviceName = 'Edge';
+        } else if (browser.firefox) {
+            deviceName = 'Firefox';
+        } else if (browser.opera) {
+            deviceName = 'Opera';
+        } else if (browser.safari) {
+            deviceName = 'Safari';
+        } else {
+            deviceName = 'Web Browser';
+        }
 
         if (browser.ipad) {
             deviceName += ' iPad';
-        } else {
-            if (browser.iphone) {
-                deviceName += ' iPhone';
-            } else {
-                if (browser.android) {
-                    deviceName += ' Android';
-                }
-            }
+        } else if (browser.iphone) {
+            deviceName += ' iPhone';
+        } else if (browser.android) {
+            deviceName += ' Android';
         }
-
-        return deviceName;
     }
 
-    function supportsVoiceInput() {
-        if (!browser.tv) {
-            return window.SpeechRecognition || window.webkitSpeechRecognition || window.mozSpeechRecognition || window.oSpeechRecognition || window.msSpeechRecognition;
-        }
+    return deviceName;
+}
 
+function supportsVoiceInput() {
+    if (!browser.tv) {
+        return window.SpeechRecognition || window.webkitSpeechRecognition || window.mozSpeechRecognition || window.oSpeechRecognition || window.msSpeechRecognition;
+    }
+
+    return false;
+}
+
+function supportsFullscreen() {
+    if (browser.tv) {
         return false;
     }
 
-    function supportsFullscreen() {
-        if (browser.tv) {
-            return false;
-        }
+    const element = document.documentElement;
+    return (element.requestFullscreen || element.mozRequestFullScreen || element.webkitRequestFullscreen || element.msRequestFullscreen) || document.createElement('video').webkitEnterFullscreen;
+}
 
-        var element = document.documentElement;
-        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) {
-                var profile;
-
-                if (window.NativeShell) {
-                    profile = window.NativeShell.AppHost.getSyncProfile(profileBuilder, appSettings);
-                } else {
-                    profile = profileBuilder();
-                    profile.MaxStaticMusicBitrate = appSettings.maxStaticMusicBitrate();
-                }
-
-                resolve(profile);
-            });
-        });
-    }
-
-    function getDefaultLayout() {
-        return 'desktop';
-    }
-
-    function supportsHtmlMediaAutoplay() {
-        if (browser.edgeUwp || browser.tizen || browser.web0s || browser.orsay || browser.operaTv || browser.ps4 || browser.xboxOne) {
-            return true;
-        }
-
-        if (browser.mobile) {
-            return false;
-        }
+function getDefaultLayout() {
+    return 'desktop';
+}
 
+function supportsHtmlMediaAutoplay() {
+    if (browser.edgeUwp || browser.tizen || browser.web0s || browser.orsay || browser.operaTv || browser.ps4 || browser.xboxOne) {
         return true;
     }
 
-    function supportsCue() {
-        try {
-            var video = document.createElement('video');
-            var style = document.createElement('style');
-
-            style.textContent = 'video::cue {background: inherit}';
-            document.body.appendChild(style);
-            document.body.appendChild(video);
-
-            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);
-            return false;
-        }
+    if (browser.mobile) {
+        return false;
     }
 
-    function onAppVisible() {
-        if (isHidden) {
-            isHidden = false;
-            console.debug('triggering app resume event');
-            events.trigger(appHost, 'resume');
-        }
+    return true;
+}
+
+function supportsCue() {
+    try {
+        const video = document.createElement('video');
+        const style = document.createElement('style');
+
+        style.textContent = 'video::cue {background: inherit}';
+        document.body.appendChild(style);
+        document.body.appendChild(video);
+
+        const 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);
+        return false;
+    }
+}
+
+function onAppVisible() {
+    if (isHidden) {
+        isHidden = false;
+        Events.trigger(appHost, 'resume');
+    }
+}
+
+function onAppHidden() {
+    if (!isHidden) {
+        isHidden = true;
+    }
+}
+
+const supportedFeatures = function () {
+    const features = [];
+
+    if (navigator.share) {
+        features.push('sharing');
     }
 
-    function onAppHidden() {
-        if (!isHidden) {
-            isHidden = true;
-            console.debug('app is hidden');
-        }
+    if (!browser.edgeUwp && !browser.tv && !browser.xboxOne && !browser.ps4) {
+        features.push('filedownload');
     }
 
-    var supportedFeatures = function () {
-        var features = [];
+    if (browser.operaTv || browser.tizen || browser.orsay || browser.web0s) {
+        features.push('exit');
+    } else {
+        features.push('exitmenu');
+        features.push('plugins');
+    }
 
-        if (navigator.share) {
-            features.push('sharing');
-        }
+    if (!browser.operaTv && !browser.tizen && !browser.orsay && !browser.web0s && !browser.ps4) {
+        features.push('externallinks');
+        features.push('externalpremium');
+    }
 
-        if (!browser.edgeUwp && !browser.tv && !browser.xboxOne && !browser.ps4) {
-            features.push('filedownload');
-        }
+    if (!browser.operaTv) {
+        features.push('externallinkdisplay');
+    }
 
-        if (browser.operaTv || browser.tizen || browser.orsay || browser.web0s) {
-            features.push('exit');
+    if (supportsVoiceInput()) {
+        features.push('voiceinput');
+    }
+
+    if (supportsHtmlMediaAutoplay()) {
+        features.push('htmlaudioautoplay');
+        features.push('htmlvideoautoplay');
+    }
+
+    if (browser.edgeUwp) {
+        features.push('sync');
+    }
+
+    if (supportsFullscreen()) {
+        features.push('fullscreenchange');
+    }
+
+    if (browser.tv || browser.xboxOne || browser.ps4 || browser.mobile) {
+        features.push('physicalvolumecontrol');
+    }
+
+    if (!browser.tv && !browser.xboxOne && !browser.ps4) {
+        features.push('remotecontrol');
+    }
+
+    if (!browser.operaTv && !browser.tizen && !browser.orsay && !browser.web0s && !browser.edgeUwp) {
+        features.push('remotevideo');
+    }
+
+    features.push('displaylanguage');
+    features.push('otherapppromotions');
+    features.push('displaymode');
+    features.push('targetblank');
+    features.push('screensaver');
+
+    webSettings.getMultiServer().then(enabled => {
+        if (enabled) features.push('multiserver');
+    });
+
+    if (!browser.orsay && (browser.firefox || browser.ps4 || browser.edge || supportsCue())) {
+        features.push('subtitleappearancesettings');
+    }
+
+    if (!browser.orsay) {
+        features.push('subtitleburnsettings');
+    }
+
+    if (!browser.tv && !browser.ps4 && !browser.xboxOne) {
+        features.push('fileinput');
+    }
+
+    if (browser.chrome || browser.edgeChromium) {
+        features.push('chromecast');
+    }
+
+    return features;
+}();
+
+/**
+     * Do exit according to platform
+     */
+function doExit() {
+    try {
+        if (window.NativeShell) {
+            window.NativeShell.AppHost.exit();
+        } else if (browser.tizen) {
+            tizen.application.getCurrentApplication().exit();
+        } else if (browser.web0s) {
+            webOS.platformBack();
         } else {
-            features.push('exitmenu');
-            features.push('plugins');
+            window.close();
         }
+    } catch (err) {
+        console.error('error closing application: ' + err);
+    }
+}
 
-        if (!browser.operaTv && !browser.tizen && !browser.orsay && !browser.web0s && !browser.ps4) {
-            features.push('externallinks');
-            features.push('externalpremium');
-        }
+let exitPromise;
 
-        if (!browser.operaTv) {
-            features.push('externallinkdisplay');
-        }
-
-        if (supportsVoiceInput()) {
-            features.push('voiceinput');
-        }
-
-        if (supportsHtmlMediaAutoplay()) {
-            features.push('htmlaudioautoplay');
-            features.push('htmlvideoautoplay');
-        }
-
-        if (browser.edgeUwp) {
-            features.push('sync');
-        }
-
-        if (supportsFullscreen()) {
-            features.push('fullscreenchange');
-        }
-
-        if (browser.chrome || browser.edge && !browser.slow) {
-            if (!browser.noAnimation && !browser.edgeUwp && !browser.xboxOne) {
-                features.push('imageanalysis');
-            }
-        }
-
-        if (browser.tv || browser.xboxOne || browser.ps4 || browser.mobile) {
-            features.push('physicalvolumecontrol');
-        }
-
-        if (!browser.tv && !browser.xboxOne && !browser.ps4) {
-            features.push('remotecontrol');
-        }
-
-        if (!browser.operaTv && !browser.tizen && !browser.orsay && !browser.web0s && !browser.edgeUwp) {
-            features.push('remotevideo');
-        }
-
-        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 (!browser.orsay && !browser.msie && (browser.firefox || browser.ps4 || browser.edge || supportsCue())) {
-            features.push('subtitleappearancesettings');
-        }
-
-        if (!browser.orsay) {
-            features.push('subtitleburnsettings');
-        }
-
-        if (!browser.tv && !browser.ps4 && !browser.xboxOne) {
-            features.push('fileinput');
-        }
-
-        if (browser.chrome) {
-            features.push('chromecast');
-        }
-
-        return features;
-    }();
-
-    /**
-      * Do exit according to platform
-      */
-    function doExit() {
-        try {
-            if (window.NativeShell) {
-                window.NativeShell.AppHost.exit();
-            } else if (browser.tizen) {
-                tizen.application.getCurrentApplication().exit();
-            } else if (browser.web0s) {
-                webOS.platformBack();
-            } else {
-                window.close();
-            }
-        } catch (err) {
-            console.error('error closing application: ' + err);
-        }
+/**
+     * Ask user for exit
+     */
+function askForExit() {
+    if (exitPromise) {
+        return;
     }
 
-    var exitPromise;
-
-    /**
-      * Ask user for exit
-      */
-    function askForExit() {
-        if (exitPromise) {
-            return;
-        }
-
-        require(['actionsheet'], function (actionsheet) {
-            exitPromise = actionsheet.show({
-                title: globalize.translate('MessageConfirmAppExit'),
-                items: [
-                    {id: 'yes', name: globalize.translate('Yes')},
-                    {id: 'no', name: globalize.translate('No')}
-                ]
-            }).then(function (value) {
-                if (value === 'yes') {
-                    doExit();
-                }
-            }).finally(function () {
-                exitPromise = null;
-            });
-        });
-    }
-
-    var deviceId;
-    var deviceName;
-    var appName = 'Jellyfin Web';
-    var appVersion = '10.6.0';
-
-    var appHost = {
-        getWindowState: function () {
-            return document.windowState || 'Normal';
-        },
-        setWindowState: function (state) {
-            alert('setWindowState is not supported and should not be called');
-        },
-        exit: function () {
-            if (!!window.appMode && browser.tizen) {
-                askForExit();
-            } else {
+    import('../components/actionSheet/actionSheet').then((actionsheet) => {
+        exitPromise = actionsheet.show({
+            title: globalize.translate('MessageConfirmAppExit'),
+            items: [
+                {id: 'yes', name: globalize.translate('Yes')},
+                {id: 'no', name: globalize.translate('No')}
+            ]
+        }).then(function (value) {
+            if (value === 'yes') {
                 doExit();
             }
-        },
-        supports: function (command) {
-            if (window.NativeShell) {
-                return window.NativeShell.AppHost.supports(command);
-            }
+        }).finally(function () {
+            exitPromise = null;
+        });
+    });
+}
 
-            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) {
-                return window.NativeShell.AppHost.getDefaultLayout();
-            }
+let deviceId;
+let deviceName;
+const appName = 'Jellyfin Web';
+const appVersion = '10.7.0';
 
-            return getDefaultLayout();
-        },
-        getDeviceProfile: getDeviceProfile,
-        init: function () {
-            if (window.NativeShell) {
-                return window.NativeShell.AppHost.init();
-            }
-
-            deviceName = getDeviceName();
-            getDeviceId().then(function (id) {
-                deviceId = id;
-            });
-        },
-        deviceName: function () {
-            return window.NativeShell ? window.NativeShell.AppHost.deviceName() : deviceName;
-        },
-        deviceId: function () {
-            return window.NativeShell ? window.NativeShell.AppHost.deviceId() : deviceId;
-        },
-        appName: function () {
-            return window.NativeShell ? window.NativeShell.AppHost.appName() : appName;
-        },
-        appVersion: function () {
-            return window.NativeShell ? window.NativeShell.AppHost.appVersion() : appVersion;
-        },
-        getPushTokenInfo: function () {
-            return {};
-        },
-        setThemeColor: function (color) {
-            var metaThemeColor = document.querySelector('meta[name=theme-color]');
-
-            if (metaThemeColor) {
-                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 isHidden = false;
-    var hidden;
-    var visibilityChange;
-
-    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();
+export const appHost = {
+    getWindowState: function () {
+        return document.windowState || 'Normal';
+    },
+    setWindowState: function () {
+        alert('setWindowState is not supported and should not be called');
+    },
+    exit: function () {
+        if (!!window.appMode && browser.tizen) {
+            askForExit();
         } else {
-            onAppVisible();
+            doExit();
+        }
+    },
+    supports: function (command) {
+        if (window.NativeShell) {
+            return window.NativeShell.AppHost.supports(command);
         }
-    }, false);
 
-    if (self.addEventListener) {
-        self.addEventListener('focus', onAppVisible);
-        self.addEventListener('blur', onAppHidden);
+        return supportedFeatures.indexOf(command.toLowerCase()) !== -1;
+    },
+    preferVisualCards: browser.android || browser.chrome,
+    getDefaultLayout: function () {
+        if (window.NativeShell) {
+            return window.NativeShell.AppHost.getDefaultLayout();
+        }
+
+        return getDefaultLayout();
+    },
+    getDeviceProfile: getDeviceProfile,
+    init: function () {
+        if (window.NativeShell) {
+            return window.NativeShell.AppHost.init();
+        }
+
+        return {
+            deviceId: getDeviceId(),
+            deviceName: getDeviceName()
+        };
+    },
+    deviceName: function () {
+        return window.NativeShell ? window.NativeShell.AppHost.deviceName() : getDeviceName();
+    },
+    deviceId: function () {
+        return window.NativeShell ? window.NativeShell.AppHost.deviceId() : getDeviceId();
+    },
+    appName: function () {
+        return window.NativeShell ? window.NativeShell.AppHost.appName() : appName;
+    },
+    appVersion: function () {
+        return window.NativeShell ? window.NativeShell.AppHost.appVersion() : appVersion;
+    },
+    getPushTokenInfo: function () {
+        return {};
+    },
+    setUserScalable: function (scalable) {
+        if (!browser.tv) {
+            const 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);
+        }
     }
+};
 
-    return appHost;
-});
+let isHidden = false;
+let hidden;
+let visibilityChange;
+
+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 {
+        onAppVisible();
+    }
+}, false);
+
+if (window.addEventListener) {
+    window.addEventListener('focus', onAppVisible);
+    window.addEventListener('blur', onAppHidden);
+}
+
+// load app host on module load
+appHost.init();

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.

src/components/backdrop/backdrop.js

@@ -1,5 +1,11 @@
-define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings', 'css!./backdrop'], function (browser, connectionManager, playbackManager, dom, userSettings) {
-    'use strict';
+import browser from '../../scripts/browser';
+import { playbackManager } from '../playback/playbackmanager';
+import dom from '../../scripts/dom';
+import * as userSettings from '../../scripts/settings/userSettings';
+import './backdrop.css';
+import ServerConnections from '../ServerConnections';
+
+/* eslint-disable indent */
 
     function enableAnimation(elem) {
         if (browser.slow) {
@@ -22,71 +28,70 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
         return true;
     }
 
-    function Backdrop() {
-    }
+    class Backdrop {
+        load(url, parent, existingBackdropImage) {
+            const img = new Image();
+            const self = this;
 
-    Backdrop.prototype.load = function (url, parent, existingBackdropImage) {
-        var img = new Image();
-        var self = this;
-
-        img.onload = function () {
-            if (self.isDestroyed) {
-                return;
-            }
-
-            var backdropImage = document.createElement('div');
-            backdropImage.classList.add('backdropImage');
-            backdropImage.classList.add('displayingBackdropImage');
-            backdropImage.style.backgroundImage = "url('" + url + "')";
-            backdropImage.setAttribute('data-url', url);
-
-            backdropImage.classList.add('backdropImageFadeIn');
-            parent.appendChild(backdropImage);
-
-            if (!enableAnimation(backdropImage)) {
-                if (existingBackdropImage && existingBackdropImage.parentNode) {
-                    existingBackdropImage.parentNode.removeChild(existingBackdropImage);
+            img.onload = () => {
+                if (self.isDestroyed) {
+                    return;
                 }
-                internalBackdrop(true);
-                return;
-            }
 
-            var onAnimationComplete = function () {
-                dom.removeEventListener(backdropImage, dom.whichAnimationEvent(), onAnimationComplete, {
+                const backdropImage = document.createElement('div');
+                backdropImage.classList.add('backdropImage');
+                backdropImage.classList.add('displayingBackdropImage');
+                backdropImage.style.backgroundImage = `url('${url}')`;
+                backdropImage.setAttribute('data-url', url);
+
+                backdropImage.classList.add('backdropImageFadeIn');
+                parent.appendChild(backdropImage);
+
+                if (!enableAnimation(backdropImage)) {
+                    if (existingBackdropImage && existingBackdropImage.parentNode) {
+                        existingBackdropImage.parentNode.removeChild(existingBackdropImage);
+                    }
+                    internalBackdrop(true);
+                    return;
+                }
+
+                const onAnimationComplete = () => {
+                    dom.removeEventListener(backdropImage, dom.whichAnimationEvent(), onAnimationComplete, {
+                        once: true
+                    });
+                    if (backdropImage === self.currentAnimatingElement) {
+                        self.currentAnimatingElement = null;
+                    }
+                    if (existingBackdropImage && existingBackdropImage.parentNode) {
+                        existingBackdropImage.parentNode.removeChild(existingBackdropImage);
+                    }
+                };
+
+                dom.addEventListener(backdropImage, dom.whichAnimationEvent(), onAnimationComplete, {
                     once: true
                 });
-                if (backdropImage === self.currentAnimatingElement) {
-                    self.currentAnimatingElement = null;
-                }
-                if (existingBackdropImage && existingBackdropImage.parentNode) {
-                    existingBackdropImage.parentNode.removeChild(existingBackdropImage);
-                }
+
+                internalBackdrop(true);
             };
 
-            dom.addEventListener(backdropImage, dom.whichAnimationEvent(), onAnimationComplete, {
-                once: true
-            });
-
-            internalBackdrop(true);
-        };
-
-        img.src = url;
-    };
-
-    Backdrop.prototype.cancelAnimation = function () {
-        var elem = this.currentAnimatingElement;
-        if (elem) {
-            elem.classList.remove('backdropImageFadeIn');
-            this.currentAnimatingElement = null;
+            img.src = url;
         }
-    };
 
-    Backdrop.prototype.destroy = function () {
-        this.isDestroyed = true;
-        this.cancelAnimation();
-    };
+        cancelAnimation() {
+            const elem = this.currentAnimatingElement;
+            if (elem) {
+                elem.classList.remove('backdropImageFadeIn');
+                this.currentAnimatingElement = null;
+            }
+        }
 
-    var backdropContainer;
+        destroy() {
+            this.isDestroyed = true;
+            this.cancelAnimation();
+        }
+    }
+
+    let backdropContainer;
     function getBackdropContainer() {
         if (!backdropContainer) {
             backdropContainer = document.querySelector('.backdropContainer');
@@ -101,7 +106,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
         return backdropContainer;
     }
 
-    function clearBackdrop(clearAll) {
+    export function clearBackdrop(clearAll) {
         clearRotation();
 
         if (currentLoadingBackdrop) {
@@ -109,7 +114,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
             currentLoadingBackdrop = null;
         }
 
-        var elem = getBackdropContainer();
+        const elem = getBackdropContainer();
         elem.innerHTML = '';
 
         if (clearAll) {
@@ -119,7 +124,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
         internalBackdrop(false);
     }
 
-    var backgroundContainer;
+    let backgroundContainer;
     function getBackgroundContainer() {
         if (!backgroundContainer) {
             backgroundContainer = document.querySelector('.backgroundContainer');
@@ -135,31 +140,27 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
         }
     }
 
-    var hasInternalBackdrop;
+    let hasInternalBackdrop;
     function internalBackdrop(enabled) {
         hasInternalBackdrop = enabled;
         setBackgroundContainerBackgroundEnabled();
     }
 
-    var hasExternalBackdrop;
-    function externalBackdrop(enabled) {
+    let hasExternalBackdrop;
+    export function externalBackdrop(enabled) {
         hasExternalBackdrop = enabled;
         setBackgroundContainerBackgroundEnabled();
     }
 
-    function getRandom(min, max) {
-        return Math.floor(Math.random() * (max - min) + min);
-    }
-
-    var currentLoadingBackdrop;
+    let currentLoadingBackdrop;
     function setBackdropImage(url) {
         if (currentLoadingBackdrop) {
             currentLoadingBackdrop.destroy();
             currentLoadingBackdrop = null;
         }
 
-        var elem = getBackdropContainer();
-        var existingBackdropImage = elem.querySelector('.displayingBackdropImage');
+        const elem = getBackdropContainer();
+        const existingBackdropImage = elem.querySelector('.displayingBackdropImage');
 
         if (existingBackdropImage && existingBackdropImage.getAttribute('data-url') === url) {
             if (existingBackdropImage.getAttribute('data-url') === url) {
@@ -168,7 +169,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
             existingBackdropImage.classList.remove('displayingBackdropImage');
         }
 
-        var instance = new Backdrop();
+        const instance = new Backdrop();
         instance.load(url, elem, existingBackdropImage);
         currentLoadingBackdrop = instance;
     }
@@ -176,9 +177,9 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
     function getItemImageUrls(item, imageOptions) {
         imageOptions = imageOptions || {};
 
-        var apiClient = connectionManager.getApiClient(item.ServerId);
+        const apiClient = ServerConnections.getApiClient(item.ServerId);
         if (item.BackdropImageTags && item.BackdropImageTags.length > 0) {
-            return item.BackdropImageTags.map(function (imgTag, index) {
+            return item.BackdropImageTags.map((imgTag, index) => {
                 return apiClient.getScaledImageUrl(item.BackdropItemId || item.Id, Object.assign(imageOptions, {
                     type: 'Backdrop',
                     tag: imgTag,
@@ -189,7 +190,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
         }
 
         if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
-            return item.ParentBackdropImageTags.map(function (imgTag, index) {
+            return item.ParentBackdropImageTags.map((imgTag, index) => {
                 return apiClient.getScaledImageUrl(item.ParentBackdropItemId, Object.assign(imageOptions, {
                     type: 'Backdrop',
                     tag: imgTag,
@@ -203,13 +204,13 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
     }
 
     function getImageUrls(items, imageOptions) {
-        var list = [];
-        var onImg = function (img) {
+        const list = [];
+        const onImg = img => {
             list.push(img);
         };
 
-        for (var i = 0, length = items.length; i < length; i++) {
-            var itemImages = getItemImageUrls(items[i], imageOptions);
+        for (let i = 0, length = items.length; i < length; i++) {
+            const itemImages = getItemImageUrls(items[i], imageOptions);
             itemImages.forEach(onImg);
         }
 
@@ -229,7 +230,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
 
         // If you don't care about the order of the elements inside
         // the array, you should sort both arrays here.
-        for (var i = 0; i < a.length; ++i) {
+        for (let i = 0; i < a.length; ++i) {
             if (a[i] !== b[i]) {
                 return false;
             }
@@ -242,12 +243,12 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
         return userSettings.enableBackdrops();
     }
 
-    var rotationInterval;
-    var currentRotatingImages = [];
-    var currentRotationIndex = -1;
-    function setBackdrops(items, imageOptions, enableImageRotation) {
+    let rotationInterval;
+    let currentRotatingImages = [];
+    let currentRotationIndex = -1;
+    export function setBackdrops(items, imageOptions, enableImageRotation) {
         if (enabled()) {
-            var images = getImageUrls(items, imageOptions);
+            const images = getImageUrls(items, imageOptions);
 
             if (images.length) {
                 startRotation(images, enableImageRotation);
@@ -279,7 +280,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
             return;
         }
 
-        var newIndex = currentRotationIndex + 1;
+        let newIndex = currentRotationIndex + 1;
         if (newIndex >= currentRotatingImages.length) {
             newIndex = 0;
         }
@@ -289,7 +290,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
     }
 
     function clearRotation() {
-        var interval = rotationInterval;
+        const interval = rotationInterval;
         if (interval) {
             clearInterval(interval);
         }
@@ -299,7 +300,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
         currentRotationIndex = -1;
     }
 
-    function setBackdrop(url, imageOptions) {
+    export function setBackdrop(url, imageOptions) {
         if (url && typeof url !== 'string') {
             url = getImageUrls([url], imageOptions)[0];
         }
@@ -312,10 +313,11 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
         }
     }
 
-    return {
-        setBackdrops: setBackdrops,
-        setBackdrop: setBackdrop,
-        clear: clearBackdrop,
-        externalBackdrop: externalBackdrop
-    };
-});
+/* eslint-enable indent */
+
+export default {
+    setBackdrops: setBackdrops,
+    setBackdrop: setBackdrop,
+    clearBackdrop: clearBackdrop,
+    externalBackdrop: externalBackdrop
+};

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

@@ -167,8 +167,9 @@ button::-moz-focus-inner {
     position: relative;
     background-clip: content-box !important;
     color: inherit;
+}
 
-    /* This is only needed for scalable cards */
+.cardScalable .cardImageContainer {
     height: 100%;
     contain: strict;
 }
@@ -192,9 +193,14 @@ button::-moz-focus-inner {
 
     /* Needed in case this is a button */
     display: block;
-
-    /* Needed in case this is a button */
     margin: 0 !important;
+    border: 0 !important;
+    padding: 0 !important;
+    cursor: pointer;
+    color: inherit;
+    width: 100%;
+    font-family: inherit;
+    font-size: inherit;
 
     /* Needed in safari */
     height: 100%;
@@ -203,27 +209,25 @@ button::-moz-focus-inner {
     contain: strict;
 }
 
-.cardContent-button {
-    border: 0 !important;
-    padding: 0 !important;
-    cursor: pointer;
-    color: inherit;
-    width: 100%;
-    vertical-align: middle;
-    font-family: inherit;
-    font-size: inherit;
+.defaultCardBackground {
+    display: flex;
 }
 
-.cardContent-button:not(.defaultCardBackground) {
+.cardContent:not(.defaultCardBackground) {
     background-color: transparent;
 }
 
+.cardBox:not(.visualCardBox) .cardPadder {
+    background-color: #242424;
+}
+
 .visualCardBox .cardContent {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
 }
 
-.cardContent-shadow {
+.cardContent-shadow,
+.cardBox:not(.visualCardBox) .cardPadder {
     box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
 }
 
@@ -239,33 +243,13 @@ button::-moz-focus-inner {
     border: none;
 }
 
-.cardImage-img {
-    max-height: 100%;
-    max-width: 100%;
-
-    /* This is simply for lazy image purposes, to ensure the image is visible sooner when scrolling */
-    min-height: 70%;
-    min-width: 70%;
-    margin: auto;
-}
-
-.coveredImage-img {
-    width: 100%;
-    height: 100%;
-}
-
-.coveredImage-noscale-img {
-    max-height: none;
-    max-width: none;
-}
-
 .coveredImage {
     background-size: cover;
     background-position: center center;
 }
 
-.coveredImage-noScale {
-    background-size: cover;
+.coveredImage.coveredImage-contain {
+    background-size: contain;
 }
 
 .cardFooter {
@@ -306,6 +290,10 @@ button::-moz-focus-inner {
     text-align: left;
 }
 
+.dialog .cardText {
+    text-overflow: initial;
+}
+
 .cardText-secondary {
     font-size: 86%;
 }
@@ -368,6 +356,8 @@ button::-moz-focus-inner {
 .cardDefaultText {
     white-space: normal;
     text-align: center;
+    font-size: 2em;
+    font-weight: bold;
 }
 
 .cardImageContainer .cardImageIcon {

src/components/cardbuilder/cardBuilder.js

@@ -5,22 +5,22 @@
  * @module components/cardBuilder/cardBuilder
  */
 
-import datetime from 'datetime';
-import imageLoader from 'imageLoader';
-import connectionManager from 'connectionManager';
-import itemHelper from 'itemHelper';
-import focusManager from 'focusManager';
-import indicators from 'indicators';
-import globalize from 'globalize';
-import layoutManager from 'layoutManager';
-import dom from 'dom';
-import browser from 'browser';
-import playbackManager from 'playbackManager';
-import itemShortcuts from 'itemShortcuts';
-import imageHelper from 'scripts/imagehelper';
-import 'css!./card';
-import 'paper-icon-button-light';
-import 'programStyles';
+import datetime from '../../scripts/datetime';
+import imageLoader from '../images/imageLoader';
+import itemHelper from '../itemHelper';
+import focusManager from '../focusManager';
+import indicators from '../indicators/indicators';
+import globalize from '../../scripts/globalize';
+import layoutManager from '../layoutManager';
+import dom from '../../scripts/dom';
+import browser from '../../scripts/browser';
+import { playbackManager } from '../playback/playbackmanager';
+import itemShortcuts from '../shortcuts';
+import imageHelper from '../../scripts/imagehelper';
+import './card.css';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../guide/programs.css';
+import ServerConnections from '../ServerConnections';
 
         const enableFocusTransform = !browser.slow && !browser.edge;
 
@@ -277,7 +277,7 @@ import 'programStyles';
          */
         function getImageWidth(shape, screenWidth, isOrientationLandscape) {
             const imagesPerRow = getPostersPerRow(shape, screenWidth, isOrientationLandscape);
-            return Math.round(screenWidth / imagesPerRow) * 2;
+            return Math.round(screenWidth / imagesPerRow);
         }
 
         /**
@@ -291,12 +291,10 @@ import 'programStyles';
             const primaryImageAspectRatio = imageLoader.getPrimaryImageAspectRatio(items);
 
             if (['auto', 'autohome', 'autooverflow', 'autoVertical'].includes(options.shape)) {
-
                 const requestedShape = options.shape;
                 options.shape = null;
 
                 if (primaryImageAspectRatio) {
-
                     if (primaryImageAspectRatio >= 3) {
                         options.shape = 'banner';
                         options.coverImage = true;
@@ -364,18 +362,16 @@ import 'programStyles';
             let hasOpenRow;
             let hasOpenSection;
 
-            let sectionTitleTagName = options.sectionTitleTagName || 'div';
+            const sectionTitleTagName = options.sectionTitleTagName || 'div';
             let apiClient;
             let lastServerId;
 
-            for (let i = 0; i < items.length; i++) {
-
-                let item = items[i];
-                let serverId = item.ServerId || options.serverId;
+            for (const [i, item] of items.entries()) {
+                const serverId = item.ServerId || options.serverId;
 
                 if (serverId !== lastServerId) {
                     lastServerId = serverId;
-                    apiClient = connectionManager.getApiClient(lastServerId);
+                    apiClient = ServerConnections.getApiClient(lastServerId);
                 }
 
                 if (options.indexBy) {
@@ -396,7 +392,6 @@ import 'programStyles';
                     }
 
                     if (newIndexValue !== currentIndexValue) {
-
                         if (hasOpenRow) {
                             html += '</div>';
                             hasOpenRow = false;
@@ -404,7 +399,6 @@ import 'programStyles';
                         }
 
                         if (hasOpenSection) {
-
                             html += '</div>';
 
                             if (isVertical) {
@@ -428,7 +422,6 @@ import 'programStyles';
                 }
 
                 if (options.rows && itemsInRow === 0) {
-
                     if (hasOpenRow) {
                         html += '</div>';
                         hasOpenRow = false;
@@ -503,94 +496,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]
-                });
-
-            } else if (item.ImageTags && item.ImageTags.Primary) {
-
+                imgType = 'Backdrop';
+                imgTag = item.ParentBackdropImageTags[0];
+                itemId = item.ParentBackdropItemId;
+            } else if (item.ImageTags && item.ImageTags.Primary && (item.Type !== 'Episode' || item.ChildCount !== 0)) {
+                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;
                 }
@@ -601,18 +549,16 @@ import 'programStyles';
                         coverImage = (Math.abs(primaryImageAspectRatio - uiAspect) / uiAspect) <= 0.2;
                     }
                 }
-
+            } else if (item.SeriesPrimaryImageTag) {
+                imgType = 'Primary';
+                imgTag = item.SeriesPrimaryImageTag;
+                itemId = item.SeriesId;
             } 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 +570,15 @@ import 'programStyles';
                     }
                 }
             } else if (item.ParentPrimaryImageTag) {
-
-                imgUrl = apiClient.getScaledImageUrl(item.ParentPrimaryImageItemId, {
-                    type: 'Primary',
-                    maxWidth: width,
-                    tag: item.ParentPrimaryImageTag
-                });
-            } else if (item.SeriesPrimaryImageTag) {
-
-                imgUrl = apiClient.getScaledImageUrl(item.SeriesId, {
-                    type: 'Primary',
-                    maxWidth: width,
-                    tag: item.SeriesPrimaryImageTag
-                });
+                imgType = 'Primary';
+                imgTag = item.ParentPrimaryImageTag;
+                itemId = item.ParentPrimaryImageItemId;
             } 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 +586,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
+                });
+            }
+
+            const blurHashes = options.imageBlurhashes || item.ImageBlurHashes || {};
+
             return {
                 imgUrl: imgUrl,
+                blurhash: (blurHashes[imgType] || {})[imgTag],
                 forceName: forceName,
                 coverImage: coverImage
             };
@@ -736,7 +656,7 @@ import 'programStyles';
                 for (let i = 0; i < character.length; i++) {
                     sum += parseInt(character.charAt(i));
                 }
-                let index = String(sum).substr(-1);
+                const index = String(sum).substr(-1);
 
                 return (index % numRandomColors) + 1;
             } else {
@@ -761,9 +681,8 @@ import 'programStyles';
             let valid = 0;
 
             for (let i = 0; i < lines.length; i++) {
-
                 let currentCssClass = cssClass;
-                let text = lines[i];
+                const text = lines[i];
 
                 if (valid > 0 && isOuterFooter) {
                     currentCssClass += ' cardText-secondary';
@@ -788,8 +707,7 @@ import 'programStyles';
             }
 
             if (forceLines) {
-
-                let linesLength = maxLines || Math.min(lines.length, maxLines || lines.length);
+                const linesLength = maxLines || Math.min(lines.length, maxLines || lines.length);
 
                 while (valid < linesLength) {
                     html += "<div class='" + cssClass + "'>&nbsp;</div>";
@@ -820,7 +738,6 @@ import 'programStyles';
             let airTimeText = '';
 
             if (item.StartDate) {
-
                 try {
                     let date = datetime.parseISO8601Date(item.StartDate);
 
@@ -867,9 +784,8 @@ import 'programStyles';
             const showOtherText = isOuterFooter ? !overlayText : overlayText;
 
             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"><span class="material-icons more_horiz"></span></button>';
+                    html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions cardText-secondary" data-action="menu"><span class="material-icons more_vert"></span></button>';
                 }
             }
 
@@ -882,9 +798,7 @@ import 'programStyles';
 
             if (showOtherText) {
                 if ((options.showParentTitle || options.showParentTitleOrTitle) && !parentTitleUnderneath) {
-
                     if (isOuterFooter && item.Type === 'Episode' && item.SeriesName) {
-
                         if (item.SeriesId) {
                             lines.push(getTextActionButton({
                                 Id: item.SeriesId,
@@ -897,15 +811,12 @@ import 'programStyles';
                             lines.push(item.SeriesName);
                         }
                     } else {
-
                         if (isUsingLiveTvNaming(item)) {
-
                             lines.push(item.Name);
 
                             if (!item.EpisodeTitle) {
                                 titleAdded = true;
                             }
-
                         } else {
                             const parentTitle = item.SeriesName || item.Series || item.Album || item.AlbumArtist || '';
 
@@ -923,7 +834,6 @@ import 'programStyles';
             }
 
             if (showMediaTitle) {
-
                 const name = options.showTitle === 'auto' && !item.IsFolder && item.MediaType === 'Photo' ? '' : itemHelper.getDisplayName(item, {
                     includeParentInfo: options.includeParentInfoInTitle
                 });
@@ -940,7 +850,6 @@ import 'programStyles';
 
             if (showOtherText) {
                 if (options.showParentTitle && parentTitleUnderneath) {
-
                     if (isOuterFooter && item.AlbumArtists && item.AlbumArtists.length) {
                         item.AlbumArtists[0].Type = 'MusicArtist';
                         item.AlbumArtists[0].IsFolder = true;
@@ -974,7 +883,6 @@ import 'programStyles';
                 }
 
                 if (options.showPremiereDate) {
-
                     if (item.PremiereDate) {
                         try {
                             lines.push(datetime.toLocaleDateString(
@@ -983,7 +891,6 @@ import 'programStyles';
                             ));
                         } catch (err) {
                             lines.push('');
-
                         }
                     } else {
                         lines.push('');
@@ -991,14 +898,10 @@ import 'programStyles';
                 }
 
                 if (options.showYear || options.showSeriesYear) {
-
                     if (item.Type === 'Series') {
                         if (item.Status === 'Continuing') {
-
                             lines.push(globalize.translate('SeriesYearToPresent', item.ProductionYear || ''));
-
                         } else {
-
                             if (item.EndDate && item.ProductionYear) {
                                 const endYear = datetime.parseISO8601Date(item.EndDate).getFullYear();
                                 lines.push(item.ProductionYear + ((endYear === item.ProductionYear) ? '' : (' - ' + endYear)));
@@ -1012,9 +915,7 @@ import 'programStyles';
                 }
 
                 if (options.showRuntime) {
-
                     if (item.RunTimeTicks) {
-
                         lines.push(datetime.getDisplayRunningTime(item.RunTimeTicks));
                     } else {
                         lines.push('');
@@ -1022,14 +923,11 @@ import 'programStyles';
                 }
 
                 if (options.showAirTime) {
-
                     lines.push(getAirTimeText(item, options.showAirDateTime, options.showAirEndTime) || '');
                 }
 
                 if (options.showChannelName) {
-
                     if (item.ChannelId) {
-
                         lines.push(getTextActionButton({
 
                             Id: item.ChannelId,
@@ -1046,7 +944,6 @@ import 'programStyles';
                 }
 
                 if (options.showCurrentProgram && item.Type === 'TvChannel') {
-
                     if (item.CurrentProgram) {
                         lines.push(item.CurrentProgram.Name);
                     } else {
@@ -1055,7 +952,6 @@ import 'programStyles';
                 }
 
                 if (options.showCurrentProgramTime && item.Type === 'TvChannel') {
-
                     if (item.CurrentProgram) {
                         lines.push(getAirTimeText(item.CurrentProgram, false, true) || '');
                     } else {
@@ -1065,7 +961,6 @@ import 'programStyles';
 
                 if (options.showSeriesTimerTime) {
                     if (item.RecordAnyTime) {
-
                         lines.push(globalize.translate('Anytime'));
                     } else {
                         lines.push(datetime.getDisplayTime(item.StartDate));
@@ -1091,6 +986,10 @@ import 'programStyles';
                 lines = [];
             }
 
+            if (overlayText && showTitle) {
+                lines = [item.Name];
+            }
+
             const addRightTextMargin = isOuterFooter && options.cardLayout && !options.centerText && options.cardFooterAside !== 'none' && layoutManager.mobile;
 
             html += getCardTextLines(lines, cssClass, !options.overlayText, isOuterFooter, options.cardLayout, addRightTextMargin, options.lines);
@@ -1100,7 +999,6 @@ import 'programStyles';
             }
 
             if (html) {
-
                 if (!isOuterFooter || logoUrl || options.cardLayout) {
                     html = '<div class="' + footerClass + '">' + html;
 
@@ -1142,31 +1040,25 @@ import 'programStyles';
          * @returns {string} HTML markup for the item count indicator.
          */
         function getItemCountsHtml(options, item) {
-            let counts = [];
+            const counts = [];
             let childText;
 
             if (item.Type === 'Playlist') {
-
                 childText = '';
 
                 if (item.RunTimeTicks) {
-
                     let minutes = item.RunTimeTicks / 600000000;
 
                     minutes = minutes || 1;
 
                     childText += globalize.translate('ValueMinutes', Math.round(minutes));
-
                 } else {
                     childText += globalize.translate('ValueMinutes', 0);
                 }
 
                 counts.push(childText);
-
             } else if (item.Type === 'Genre' || item.Type === 'Studio') {
-
                 if (item.MovieCount) {
-
                     childText = item.MovieCount === 1 ?
                         globalize.translate('ValueOneMovie') :
                         globalize.translate('ValueMovieCount', item.MovieCount);
@@ -1175,7 +1067,6 @@ import 'programStyles';
                 }
 
                 if (item.SeriesCount) {
-
                     childText = item.SeriesCount === 1 ?
                         globalize.translate('ValueOneSeries') :
                         globalize.translate('ValueSeriesCount', item.SeriesCount);
@@ -1183,18 +1074,14 @@ import 'programStyles';
                     counts.push(childText);
                 }
                 if (item.EpisodeCount) {
-
                     childText = item.EpisodeCount === 1 ?
                         globalize.translate('ValueOneEpisode') :
                         globalize.translate('ValueEpisodeCount', item.EpisodeCount);
 
                     counts.push(childText);
                 }
-
             } else if (item.Type === 'MusicGenre' || options.context === 'MusicArtist') {
-
                 if (item.AlbumCount) {
-
                     childText = item.AlbumCount === 1 ?
                         globalize.translate('ValueOneAlbum') :
                         globalize.translate('ValueAlbumCount', item.AlbumCount);
@@ -1202,7 +1089,6 @@ import 'programStyles';
                     counts.push(childText);
                 }
                 if (item.SongCount) {
-
                     childText = item.SongCount === 1 ?
                         globalize.translate('ValueOneSong') :
                         globalize.translate('ValueSongCount', item.SongCount);
@@ -1210,16 +1096,13 @@ import 'programStyles';
                     counts.push(childText);
                 }
                 if (item.MusicVideoCount) {
-
                     childText = item.MusicVideoCount === 1 ?
                         globalize.translate('ValueOneMusicVideo') :
                         globalize.translate('ValueMusicVideoCount', item.MusicVideoCount);
 
                     counts.push(childText);
                 }
-
             } else if (item.Type === 'Series') {
-
                 childText = item.RecursiveItemCount === 1 ?
                     globalize.translate('ValueOneEpisode') :
                     globalize.translate('ValueEpisodeCount', item.RecursiveItemCount);
@@ -1235,10 +1118,11 @@ import 'programStyles';
         /**
          * Imports the refresh indicator element.
          */
-        function requireRefreshIndicator() {
+        function importRefreshIndicator() {
             if (!refreshIndicatorLoaded) {
                 refreshIndicatorLoaded = true;
-                require(['emby-itemrefreshindicator']);
+                /* eslint-disable-next-line  @babel/no-unused-expressions */
+                import('../../elements/emby-itemrefreshindicator/emby-itemrefreshindicator');
             }
         }
 
@@ -1272,13 +1156,11 @@ import 'programStyles';
             let shape = options.shape;
 
             if (shape === 'mixed') {
-
                 shape = null;
 
                 const primaryImageAspectRatio = item.PrimaryImageAspectRatio;
 
                 if (primaryImageAspectRatio) {
-
                     if (primaryImageAspectRatio >= 1.33) {
                         shape = 'mixedBackdrop';
                     } else if (primaryImageAspectRatio > 0.71) {
@@ -1321,6 +1203,7 @@ import 'programStyles';
 
             const imgInfo = getCardImageUrl(item, apiClient, options, shape);
             const imgUrl = imgInfo.imgUrl;
+            const blurhash = imgInfo.blurhash;
 
             const forceName = imgInfo.forceName;
 
@@ -1333,8 +1216,8 @@ import 'programStyles';
             if (coveredImage) {
                 cardImageContainerClass += ' coveredImage';
 
-                if (item.MediaType === 'Photo' || item.Type === 'PhotoAlbum' || item.Type === 'Folder' || item.ProgramInfo || item.Type === 'Program' || item.Type === 'Recording') {
-                    cardImageContainerClass += ' coveredImage-noScale';
+                if (item.Type === 'TvChannel') {
+                    cardImageContainerClass += ' coveredImage-contain';
                 }
             }
 
@@ -1369,7 +1252,6 @@ import 'programStyles';
             }
 
             if (overlayText) {
-
                 logoUrl = null;
 
                 footerCssClass = progressHtml ? 'innerCardFooter fullInnerCardFooter' : 'innerCardFooter';
@@ -1384,7 +1266,7 @@ import 'programStyles';
             }
 
             const mediaSourceCount = item.MediaSourceCount || 1;
-            if (mediaSourceCount > 1) {
+            if (mediaSourceCount > 1 && options.disableIndicators !== true) {
                 innerCardFooter += '<div class="mediaSourceIndicator">' + mediaSourceCount + '</div>';
             }
 
@@ -1426,7 +1308,7 @@ import 'programStyles';
                 }
 
                 if (options.overlayMoreButton) {
-                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><span class="material-icons cardOverlayButtonIcon more_horiz"></span></button>';
+                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><span class="material-icons cardOverlayButtonIcon more_vert"></span></button>';
                 }
             }
 
@@ -1440,58 +1322,60 @@ import 'programStyles';
             let cardBoxClose = '';
             let cardScalableClose = '';
 
-            let cardContentClass = 'cardContent';
-            if (!options.cardLayout) {
-                cardContentClass += ' cardContent-shadow';
+            const cardContentClass = 'cardContent';
+
+            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="' + cardImageContainerClass + ' ' + cardContentClass + ' itemAction lazy" data-src="' + imgUrl + '" ' + blurhashAttrib + '>') : ('<button data-action="' + action + '" class="' + cardImageContainerClass + ' ' + cardContentClass + ' itemAction">');
 
                 cardImageContainerClose = '</button>';
             }
 
-            let cardScalableClass = 'cardScalable';
+            const cardScalableClass = 'cardScalable';
 
-            cardImageContainerOpen = '<div class="' + cardBoxClass + '"><div class="' + cardScalableClass + '"><div class="cardPadder-' + shape + '"></div>' + cardImageContainerOpen;
+            cardImageContainerOpen = '<div class="' + cardBoxClass + '"><div class="' + cardScalableClass + '"><div class="cardPadder cardPadder-' + shape + '"></div>' + cardImageContainerOpen;
             cardBoxClose = '</div>';
             cardScalableClose = '</div>';
 
-            let indicatorsHtml = '';
+            if (options.disableIndicators !== true) {
+                let indicatorsHtml = '';
 
-            if (options.missingIndicator !== false) {
-                indicatorsHtml += indicators.getMissingIndicator(item);
-            }
+                if (options.missingIndicator !== false) {
+                    indicatorsHtml += indicators.getMissingIndicator(item);
+                }
 
-            indicatorsHtml += indicators.getSyncIndicator(item);
-            indicatorsHtml += indicators.getTimerIndicator(item);
+                indicatorsHtml += indicators.getSyncIndicator(item);
+                indicatorsHtml += indicators.getTimerIndicator(item);
 
-            indicatorsHtml += indicators.getTypeIndicator(item);
+                indicatorsHtml += indicators.getTypeIndicator(item);
 
-            if (options.showGroupCount) {
+                if (options.showGroupCount) {
+                    indicatorsHtml += indicators.getChildCountIndicatorHtml(item, {
+                        minCount: 1
+                    });
+                } else {
+                    indicatorsHtml += indicators.getPlayedIndicatorHtml(item);
+                }
 
-                indicatorsHtml += indicators.getChildCountIndicatorHtml(item, {
-                    minCount: 1
-                });
-            } else {
-                indicatorsHtml += indicators.getPlayedIndicatorHtml(item);
-            }
+                if (item.Type === 'CollectionFolder' || item.CollectionType) {
+                    const refreshClass = item.RefreshProgress ? '' : ' class="hide"';
+                    indicatorsHtml += '<div is="emby-itemrefreshindicator"' + refreshClass + ' data-progress="' + (item.RefreshProgress || 0) + '" data-status="' + item.RefreshStatus + '"></div>';
+                    importRefreshIndicator();
+                }
 
-            if (item.Type === 'CollectionFolder' || item.CollectionType) {
-                const refreshClass = item.RefreshProgress ? '' : ' class="hide"';
-                indicatorsHtml += '<div is="emby-itemrefreshindicator"' + refreshClass + ' data-progress="' + (item.RefreshProgress || 0) + '" data-status="' + item.RefreshStatus + '"></div>';
-                requireRefreshIndicator();
-            }
-
-            if (indicatorsHtml) {
-                cardImageContainerOpen += '<div class="cardIndicators">' + indicatorsHtml + '</div>';
+                if (indicatorsHtml) {
+                    cardImageContainerOpen += '<div class="cardIndicators">' + indicatorsHtml + '</div>';
+                }
             }
 
             if (!imgUrl) {
@@ -1539,8 +1423,8 @@ import 'programStyles';
 
             let additionalCardContent = '';
 
-            if (layoutManager.desktop) {
-                additionalCardContent += getHoverMenuHtml(item, action);
+            if (layoutManager.desktop && !options.disableHoverMenu) {
+                additionalCardContent += getHoverMenuHtml(item, action, options);
             }
 
             return '<' + tagName + ' data-index="' + index + '"' + timerAttributes + actionAttribute + ' data-isfolder="' + (item.IsFolder || false) + '" data-serverid="' + (item.ServerId || options.serverId) + '" data-id="' + (item.Id || item.ItemId) + '" data-type="' + item.Type + '"' + mediaTypeData + collectionTypeData + channelIdData + positionTicksData + collectionIdData + playlistIdData + contextData + parentIdData + ' data-prefix="' + prefix + '" class="' + className + '">' + cardImageContainerOpen + innerCardFooter + cardImageContainerClose + overlayButtons + additionalCardContent + cardScalableClose + outerCardFooter + cardBoxClose + '</' + tagName + '>';
@@ -1550,9 +1434,10 @@ import 'programStyles';
          * Generates HTML markup for the card overlay.
          * @param {object} item - Item used to generate the card overlay.
          * @param {string} action - Action assigned to the overlay.
+         * @param {Array} options - Card builder options.
          * @returns {string} HTML markup of the card overlay.
          */
-        function getHoverMenuHtml(item, action) {
+        function getHoverMenuHtml(item, action, options) {
             let html = '';
 
             html += '<div class="cardOverlayContainer itemAction" data-action="' + action + '">';
@@ -1568,20 +1453,20 @@ import 'programStyles';
             const userData = item.UserData || {};
 
             if (itemHelper.canMarkPlayed(item)) {
-                require(['emby-playstatebutton']);
+                /* eslint-disable-next-line  @babel/no-unused-expressions */
+                import('../../elements/emby-playstatebutton/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) + '"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover check"></span></button>';
             }
 
             if (itemHelper.canRate(item)) {
-
                 const likes = userData.Likes == null ? '' : userData.Likes;
 
-                require(['emby-ratingbutton']);
+                /* eslint-disable-next-line  @babel/no-unused-expressions */
+                import('../../elements/emby-ratingbutton/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) + '"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover favorite"></span></button>';
             }
 
-            html += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover more_horiz"></span></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>';
 
@@ -1605,6 +1490,8 @@ import 'programStyles';
                 case 'MusicArtist':
                 case 'Person':
                     return '<span class="cardImageIcon material-icons person"></span>';
+                case 'Audio':
+                    return '<span class="cardImageIcon material-icons audiotrack"></span>';
                 case 'Movie':
                     return '<span class="cardImageIcon material-icons movie"></span>';
                 case 'Series':
@@ -1613,6 +1500,12 @@ import 'programStyles';
                     return '<span class="cardImageIcon material-icons book"></span>';
                 case 'Folder':
                     return '<span class="cardImageIcon material-icons folder"></span>';
+                case 'BoxSet':
+                    return '<span class="cardImageIcon material-icons collections"></span>';
+                case 'Playlist':
+                    return '<span class="cardImageIcon material-icons view_list"></span>';
+                case 'PhotoAlbum':
+                    return '<span class="cardImageIcon material-icons photo_album"></span>';
             }
 
             if (options && options.defaultCardImageIcon) {
@@ -1646,7 +1539,6 @@ import 'programStyles';
             const html = buildCardsHtmlInternal(items, options);
 
             if (html) {
-
                 if (options.itemsContainer.cardBuilderHtml !== html) {
                     options.itemsContainer.innerHTML = html;
 
@@ -1659,7 +1551,6 @@ import 'programStyles';
 
                 imageLoader.lazyChildren(options.itemsContainer);
             } else {
-
                 options.itemsContainer.innerHTML = html;
                 options.itemsContainer.cardBuilderHtml = null;
             }
@@ -1683,7 +1574,6 @@ import 'programStyles';
             indicatorsElem = card.querySelector('.cardIndicators');
 
             if (!indicatorsElem) {
-
                 const cardImageContainer = card.querySelector('.cardImageContainer');
                 indicatorsElem = document.createElement('div');
                 indicatorsElem.classList.add('cardIndicators');
@@ -1707,11 +1597,9 @@ import 'programStyles';
             let itemProgressBar = null;
 
             if (userData.Played) {
-
                 playedIndicator = card.querySelector('.playedIndicator');
 
                 if (!playedIndicator) {
-
                     playedIndicator = document.createElement('div');
                     playedIndicator.classList.add('playedIndicator');
                     playedIndicator.classList.add('indicator');
@@ -1720,10 +1608,8 @@ import 'programStyles';
                 }
                 playedIndicator.innerHTML = '<span class="material-icons indicatorIcon check"></span>';
             } else {
-
                 playedIndicator = card.querySelector('.playedIndicator');
                 if (playedIndicator) {
-
                     playedIndicator.parentNode.removeChild(playedIndicator);
                 }
             }
@@ -1731,7 +1617,6 @@ import 'programStyles';
                 countIndicator = card.querySelector('.countIndicator');
 
                 if (!countIndicator) {
-
                     countIndicator = document.createElement('div');
                     countIndicator.classList.add('countIndicator');
                     indicatorsElem = ensureIndicators(card, indicatorsElem);
@@ -1739,10 +1624,8 @@ import 'programStyles';
                 }
                 countIndicator.innerHTML = userData.UnplayedItemCount;
             } else if (enableCountIndicator) {
-
                 countIndicator = card.querySelector('.countIndicator');
                 if (countIndicator) {
-
                     countIndicator.parentNode.removeChild(countIndicator);
                 }
             }
@@ -1754,7 +1637,6 @@ import 'programStyles';
             });
 
             if (progressHtml) {
-
                 itemProgressBar = card.querySelector('.itemProgressBar');
 
                 if (!itemProgressBar) {
@@ -1773,7 +1655,6 @@ import 'programStyles';
 
                 itemProgressBar.innerHTML = progressHtml;
             } else {
-
                 itemProgressBar = card.querySelector('.itemProgressBar');
                 if (itemProgressBar) {
                     itemProgressBar.parentNode.removeChild(itemProgressBar);
@@ -1804,7 +1685,7 @@ import 'programStyles';
             const cells = itemsContainer.querySelectorAll('.card[data-id="' + programId + '"]');
 
             for (let i = 0, length = cells.length; i < length; i++) {
-                let cell = cells[i];
+                const cell = cells[i];
                 const icon = cell.querySelector('.timerIndicator');
                 if (!icon) {
                     const indicatorsElem = ensureIndicators(cell);
@@ -1823,8 +1704,8 @@ import 'programStyles';
             const cells = itemsContainer.querySelectorAll('.card[data-timerid="' + timerId + '"]');
 
             for (let i = 0; i < cells.length; i++) {
-                let cell = cells[i];
-                let icon = cell.querySelector('.timerIndicator');
+                const cell = cells[i];
+                const icon = cell.querySelector('.timerIndicator');
                 if (icon) {
                     icon.parentNode.removeChild(icon);
                 }
@@ -1841,8 +1722,8 @@ import 'programStyles';
             const cells = itemsContainer.querySelectorAll('.card[data-seriestimerid="' + cancelledTimerId + '"]');
 
             for (let i = 0; i < cells.length; i++) {
-                let cell = cells[i];
-                let icon = cell.querySelector('.timerIndicator');
+                const cell = cells[i];
+                const icon = cell.querySelector('.timerIndicator');
                 if (icon) {
                     icon.parentNode.removeChild(icon);
                 }

src/components/cardbuilder/chaptercardbuilder.js

@@ -1,13 +1,22 @@
-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 '../../scripts/datetime';
+import imageLoader from '../images/imageLoader';
+import layoutManager from '../layoutManager';
+import browser from '../../scripts/browser';
+import ServerConnections from '../ServerConnections';
 
+    const enableFocusTransform = !browser.slow && !browser.edge;
+
+     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,38 +26,36 @@ 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) {
-
             if ((videoStream.Width / videoStream.Height) <= 1.2) {
                 shape = (options.squareShape || 'square');
             }
         }
 
-        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);
-
-        for (var i = 0, length = chapters.length; i < length; i++) {
+        const apiClient = ServerConnections.getApiClient(item.ServerId);
 
+        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,51 +69,45 @@ define(['datetime', 'imageLoader', 'connectionManager', 'layoutManager', 'browse
         return html;
     }
 
-    function getImgUrl(item, chapter, index, maxWidth, apiClient) {
+    function getImgUrl({Id}, {ImageTag}, index, maxWidth, apiClient) {
+        if (ImageTag) {
+            return apiClient.getScaledImageUrl(Id, {
 
-        if (chapter.ImageTag) {
-
-            return apiClient.getScaledImageUrl(item.Id, {
-
-                maxWidth: maxWidth * 2,
-                tag: chapter.ImageTag,
+                maxWidth: maxWidth,
+                tag: ImageTag,
                 type: 'Chapter',
-                index: index
+                index
             });
         }
 
         return null;
     }
 
-    function buildChapterCard(item, apiClient, chapter, index, options, className, shape) {
+    function buildChapterCard(item, apiClient, chapter, index, {width, coverImage}, className, shape) {
+        const imgUrl = getImgUrl(item, chapter, index, width || 400, apiClient);
 
-        var imgUrl = getImgUrl(item, chapter, index, options.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 += '<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>';
-
-        return html;
+        return `<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>`;
     }
 
-    function buildChapterCards(item, chapters, options) {
-
+    export function buildChapterCards(item, chapters, options) {
         if (options.parentContainer) {
             // Abort if the container has been disposed
             if (!document.body.contains(options.parentContainer)) {
@@ -121,15 +122,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,8 +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,
             centerText: true,
@@ -15,8 +20,8 @@ define(['cardBuilder'], function (cardBuilder) {
         cardBuilder.buildCards(items, options);
     }
 
-    return {
-        buildPeopleCards: buildPeopleCards
-    };
+ /* eslint-enable indent */
 
-});
+export default {
+    buildPeopleCards: buildPeopleCards
+};

src/components/castSenderApi.js

@@ -1,34 +1,28 @@
-define([], function() {
-    'use strict';
-
-    if (window.appMode === 'cordova' || window.appMode === 'android') {
-        return {
-            load: function () {
-                window.chrome = window.chrome || {};
+class CastSenderApi {
+    load() {
+        if (window.appMode === 'cordova' || window.appMode === 'android') {
+            window.chrome = window.chrome || {};
+            return Promise.resolve();
+        } else {
+            let ccLoaded = false;
+            if (ccLoaded) {
                 return Promise.resolve();
             }
-        };
-    } else {
-        var ccLoaded = false;
-        return {
-            load: function () {
-                if (ccLoaded) {
-                    return Promise.resolve();
-                }
 
-                return new Promise(function (resolve, reject) {
-                    var fileref = document.createElement('script');
-                    fileref.setAttribute('type', 'text/javascript');
+            return new Promise(function (resolve) {
+                const fileref = document.createElement('script');
+                fileref.setAttribute('type', 'text/javascript');
 
-                    fileref.onload = function () {
-                        ccLoaded = true;
-                        resolve();
-                    };
+                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);
+            });
+        }
     }
-});
+}
+
+export default CastSenderApi;

src/components/channelMapper/channelMapper.js

@@ -1,21 +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';
+import dom from '../../scripts/dom';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import loading from '../loading/loading';
+import globalize from '../../scripts/globalize';
+import actionsheet from '../actionSheet/actionSheet';
+import '../../elements/emby-input/emby-input';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-button/emby-button';
+import '../listview/listview.css';
+import 'material-design-icons-iconfont';
+import '../formdialog.css';
+import ServerConnections from '../ServerConnections';
 
-    return function (options) {
+export default class channelMapper {
+    constructor(options) {
         function mapChannel(button, channelId, providerChannelId) {
             loading.show();
-            var providerId = options.providerId;
-            connectionManager.getApiClient(options.serverId).ajax({
+            const providerId = options.providerId;
+            ServerConnections.getApiClient(options.serverId).ajax({
                 type: 'POST',
                 url: ApiClient.getUrl('LiveTv/ChannelMappings'),
-                data: {
+                data: JSON.stringify({
                     providerId: providerId,
                     tunerChannelId: channelId,
                     providerChannelId: providerChannelId
-                },
+                }),
+                contentType: 'application/json',
                 dataType: 'json'
-            }).then(function (mapping) {
-                var listItem = dom.parentWithClass(button, 'listItem');
+            }).then(mapping => {
+                const listItem = dom.parentWithClass(button, 'listItem');
                 button.setAttribute('data-providerid', mapping.ProviderChannelId);
                 listItem.querySelector('.secondary').innerHTML = getMappingSecondaryName(mapping, currentMappingOptions.ProviderName);
                 loading.hide();
@@ -23,42 +35,42 @@ define(['dom', 'dialogHelper', 'loading', 'connectionManager', 'globalize', 'act
         }
 
         function onChannelsElementClick(e) {
-            var btnMap = dom.parentWithClass(e.target, 'btnMap');
+            const btnMap = dom.parentWithClass(e.target, 'btnMap');
 
             if (btnMap) {
-                var channelId = btnMap.getAttribute('data-id');
-                var providerChannelId = btnMap.getAttribute('data-providerid');
-                var menuItems = currentMappingOptions.ProviderChannels.map(function (m) {
+                const channelId = btnMap.getAttribute('data-id');
+                const providerChannelId = btnMap.getAttribute('data-providerid');
+                const menuItems = currentMappingOptions.ProviderChannels.map(m => {
                     return {
                         name: m.Name,
                         id: m.Id,
                         selected: m.Id.toLowerCase() === providerChannelId.toLowerCase()
                     };
-                }).sort(function (a, b) {
+                }).sort((a, b) => {
                     return a.name.localeCompare(b.name);
                 });
                 actionsheet.show({
                     positionTo: btnMap,
                     items: menuItems
-                }).then(function (newChannelId) {
+                }).then(newChannelId => {
                     mapChannel(btnMap, channelId, newChannelId);
                 });
             }
         }
 
         function getChannelMappingOptions(serverId, providerId) {
-            var apiClient = connectionManager.getApiClient(serverId);
+            const apiClient = ServerConnections.getApiClient(serverId);
             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 = '';
+            let html = '';
             html += '<div class="listItem">';
             html += '<span class="material-icons listItemIcon dvr"></span>';
             html += '<div class="listItemBody two-line">';
@@ -73,16 +85,16 @@ define(['dom', 'dialogHelper', 'loading', 'connectionManager', 'globalize', 'act
 
             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>';
+            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">';
+            let 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('Channels')}</h1>`;
             html += '<div class="channels paperList">';
             html += '</div>';
             html += '</form>';
@@ -91,30 +103,29 @@ define(['dom', 'dialogHelper', 'loading', 'connectionManager', 'globalize', 'act
         }
 
         function initEditor(dlg, options) {
-            getChannelMappingOptions(options.serverId, options.providerId).then(function (result) {
+            getChannelMappingOptions(options.serverId, options.providerId).then(result => {
                 currentMappingOptions = result;
-                var channelsElement = dlg.querySelector('.channels');
-                channelsElement.innerHTML = result.TunerChannels.map(function (channel) {
+                const channelsElement = dlg.querySelector('.channels');
+                channelsElement.innerHTML = result.TunerChannels.map(channel => {
                     return getTunerChannelHtml(channel, result.ProviderName);
                 }).join('');
                 channelsElement.addEventListener('click', onChannelsElementClick);
             });
         }
 
-        var currentMappingOptions;
-        var self = this;
+        let currentMappingOptions;
 
-        self.show = function () {
-            var dialogOptions = {
+        this.show = () => {
+            const dialogOptions = {
                 removeOnClose: true
             };
             dialogOptions.size = 'small';
-            var dlg = dialogHelper.createDialog(dialogOptions);
+            const 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');
+            let html = '';
+            const title = globalize.translate('MapChannels');
             html += '<div class="formDialogHeader">';
             html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
             html += '<h3 class="formDialogHeaderTitle">';
@@ -124,13 +135,13 @@ define(['dom', 'dialogHelper', 'loading', 'connectionManager', 'globalize', 'act
             html += getEditorHtml();
             dlg.innerHTML = html;
             initEditor(dlg, options);
-            dlg.querySelector('.btnCancel').addEventListener('click', function () {
+            dlg.querySelector('.btnCancel').addEventListener('click', () => {
                 dialogHelper.close(dlg);
             });
-            return new Promise(function (resolve, reject) {
+            return new Promise(resolve => {
                 dlg.addEventListener('close', resolve);
                 dialogHelper.open(dlg);
             });
         };
-    };
-});
+    }
+}

src/components/chromecast/chromecasthelpers.js

@@ -1,234 +0,0 @@
-define(['events'], function (events) {
-    'use strict';
-
-    // LinkParser
-    //
-    // https://github.com/ravisorg/LinkParser
-    //
-    // Locate and extract almost any URL within a string. Handles protocol-less domains, IPv4 and
-    // IPv6, unrecognised TLDs, and more.
-    //
-    // This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
-    // http://creativecommons.org/licenses/by-sa/4.0/
-    (function () {
-
-        // Original URL regex from the Android android.text.util.Linkify function, found here:
-        // http://stackoverflow.com/a/19696443
-        //
-        // However there were problems with it, most probably related to the fact it was
-        // written in 2007, and it's been highly modified.
-        //
-        // 1) I didn't like the fact that it was tied to specific TLDs, since new ones
-        // are being added all the time it wouldn't be reasonable to expect developer to
-        // be continually updating their regular expressions.
-        //
-        // 2) It didn't allow unicode characters in the domains which are now allowed in
-        // many languages, (including some IDN TLDs). Again these are constantly being
-        // added to and it doesn't seem reasonable to hard-code them. Note this ended up
-        // not being possible in standard JS due to the way it handles multibyte strings.
-        // It is possible using XRegExp, however a big performance hit results. Disabled
-        // for now.
-        //
-        // 3) It didn't allow for IPv6 hostnames
-        // IPv6 regex from http://stackoverflow.com/a/17871737
-        //
-        // 4) It was very poorly commented
-        //
-        // 5) It wasn't as smart as it could have been about what should be part of a
-        // URL and what should be part of human language.
-
-        var protocols = '(?:(?:http|https|rtsp|ftp):\\/\\/)';
-        var credentials = "(?:(?:[a-z0-9\\$\\-\\_\\.\\+\\!\\*\\'\\(\\)\\,\\;\\?\\&\\=]|(?:\\%[a-f0-9]{2})){1,64}" // username (1-64 normal or url escaped characters)
-            + "(?:\\:(?:[a-z0-9\\$\\-\\_\\.\\+\\!\\*\\'\\(\\)\\,\\;\\?\\&\\=]|(?:\\%[a-f0-9]{2})){1,25})?" // followed by optional password (: + 1-25 normal or url escaped characters)
-            + '\\@)';
-
-        // IPv6 Regex http://forums.intermapper.com/viewtopic.php?t=452
-        // by Dartware, LLC is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License
-        // http://intermapper.com/
-        var ipv6 = '('
-            + '(([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))'
-            + '|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))'
-            + '|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))'
-            + '|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))'
-            + '|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))'
-            + '|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))'
-            + '|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))'
-            + '|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))'
-            + ')(%.+)?';
-
-        var ipv4 = '(?:25[0-5]|2[0-4][0-9]|[0-1][0-9]{2}|[1-9][0-9]|[1-9])\\.'
-            + '(?:25[0-5]|2[0-4][0-9]|[0-1][0-9]{2}|[1-9][0-9]|[1-9]|0)\\.'
-            + '(?:25[0-5]|2[0-4][0-9]|[0-1][0-9]{2}|[1-9][0-9]|[1-9]|0)\\.'
-            + '(?:25[0-5]|2[0-4][0-9]|[0-1][0-9]{2}|[1-9][0-9]|[0-9])';
-
-        // This would have been a lot cleaner if JS RegExp supported conditionals...
-        var linkRegExpString =
-
-            // begin match for protocol / username / password / host
-            '(?:'
-
-            // ============================
-            // If we have a recognized protocol at the beginning of the URL, we're
-            // more relaxed about what we accept, because we assume the user wants
-            // this to be a URL, and we're not accidentally matching human language
-            + protocols + '?'
-
-            // optional username:password@
-            + credentials + '?'
-
-            // IP address (both v4 and v6)
-            + '(?:'
-
-            // IPv6
-            + ipv6
-
-            // IPv4
-            + '|' + ipv4
-
-            + ')'
-
-            // end match for protocol / username / password / host
-            + ')'
-
-            // optional port number
-            + '(?:\\:\\d{1,5})?'
-
-            // plus optional path and query params (no unicode allowed here?)
-            + '(?:'
-            + '\\/(?:'
-            // some characters we'll accept because it's unlikely human language
-            // would use them after a URL unless they were part of the url
-            + '(?:[a-z0-9\\/\\@\\&\\#\\~\\*\\_\\-\\+])'
-            + '|(?:\\%[a-f0-9]{2})'
-            // some characters are much more likely to be used AFTER a url and
-            // were not intended to be included in the url itself. Mostly end
-            // of sentence type things. It's also likely that the URL would
-            // still work if any of these characters were missing from the end
-            // because we parsed it incorrectly. For these characters to be accepted
-            // they must be followed by another character that we're reasonably
-            // sure is part of the url
-            + "|(?:[\\;\\?\\:\\.\\!\\'\\(\\)\\,\\=]+(?=(?:[a-z0-9\\/\\@\\&\\#\\~\\*\\_\\-\\+])|(?:\\%[a-f0-9]{2})))"
-            + ')*'
-            + '|\\b|\$'
-            + ')';
-
-        // regex = XRegExp(regex,'gi');
-        var linkRegExp = RegExp(linkRegExpString, 'gi');
-
-        var protocolRegExp = RegExp('^' + protocols, 'i');
-
-        // if url doesn't begin with a known protocol, add http by default
-        function ensureProtocol(url) {
-            if (!url.match(protocolRegExp)) {
-                url = 'http://' + url;
-            }
-            return url;
-        }
-
-        // look for links in the text
-        var LinkParser = {
-            parse: function (text) {
-                var links = [];
-                var match;
-
-                // eslint-disable-next-line no-cond-assign
-                while (match = linkRegExp.exec(text)) {
-                    console.debug(match);
-                    var txt = match[0];
-                    var pos = match.index;
-                    var len = txt.length;
-                    var url = ensureProtocol(text);
-                    links.push({ 'pos': pos, 'text': txt, 'len': len, 'url': url });
-                }
-
-                return links;
-            }
-
-        };
-
-        window.LinkParser = LinkParser;
-    })();
-
-    var cache = {};
-
-    function isValidIpAddress(address) {
-
-        var links = LinkParser.parse(address);
-
-        return links.length == 1;
-    }
-
-    function isLocalIpAddress(address) {
-
-        address = address.toLowerCase();
-
-        if (address.indexOf('127.0.0.1') !== -1) {
-            return true;
-        }
-        if (address.indexOf('localhost') !== -1) {
-            return true;
-        }
-
-        return false;
-    }
-
-    function getServerAddress(apiClient) {
-
-        var serverAddress = apiClient.serverAddress();
-
-        if (isValidIpAddress(serverAddress) && !isLocalIpAddress(serverAddress)) {
-            return Promise.resolve(serverAddress);
-        }
-
-        var cachedValue = getCachedValue(serverAddress);
-        if (cachedValue) {
-            return Promise.resolve(cachedValue);
-        }
-
-        return apiClient.getEndpointInfo().then(function (endpoint) {
-            if (endpoint.IsInNetwork) {
-                return apiClient.getPublicSystemInfo().then(function (info) {
-                    var localAddress = info.LocalAddress;
-                    if (!localAddress) {
-                        console.debug('No valid local address returned, defaulting to external one');
-                        localAddress = serverAddress;
-                    }
-                    addToCache(serverAddress, localAddress);
-                    return localAddress;
-                });
-            } else {
-                addToCache(serverAddress, serverAddress);
-                return serverAddress;
-            }
-        });
-    }
-
-    function clearCache() {
-        cache = {};
-    }
-
-    function addToCache(key, value) {
-        cache[key] = {
-            value: value,
-            time: new Date().getTime()
-        };
-    }
-
-    function getCachedValue(key) {
-
-        var obj = cache[key];
-
-        if (obj && (new Date().getTime() - obj.time) < 180000) {
-            return obj.value;
-        }
-
-        return null;
-    }
-
-    events.on(ConnectionManager, 'localusersignedin', clearCache);
-    events.on(ConnectionManager, 'localusersignedout', clearCache);
-
-    return {
-        getServerAddress: getServerAddress
-    };
-});

src/components/collectionEditor/collectionEditor.js

@@ -1,16 +1,32 @@
-define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectionManager', 'appRouter', 'globalize', 'emby-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button', 'flexStyles'], function (dom, dialogHelper, loading, appHost, layoutManager, connectionManager, appRouter, globalize) {
-    'use strict';
+import dom from '../../scripts/dom';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import loading from '../loading/loading';
+import layoutManager from '../layoutManager';
+import { appRouter } from '../appRouter';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-input/emby-input';
+import '../../elements/emby-select/emby-select';
+import 'material-design-icons-iconfont';
+import '../formdialog.css';
+import '../../assets/css/flexstyles.scss';
+import ServerConnections from '../ServerConnections';
+import toast from '../toast/toast';
 
-    var currentServerId;
+/* eslint-disable indent */
+
+    let currentServerId;
 
     function onSubmit(e) {
         loading.show();
 
-        var panel = dom.parentWithClass(this, 'dialog');
+        const panel = dom.parentWithClass(this, 'dialog');
 
-        var collectionId = panel.querySelector('#selectCollectionToAddTo').value;
+        const collectionId = panel.querySelector('#selectCollectionToAddTo').value;
 
-        var apiClient = connectionManager.getApiClient(currentServerId);
+        const apiClient = ServerConnections.getApiClient(currentServerId);
 
         if (collectionId) {
             addToCollection(apiClient, panel, collectionId);
@@ -23,8 +39,7 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
     }
 
     function createCollection(apiClient, dlg) {
-
-        var url = apiClient.getUrl('Collections', {
+        const url = apiClient.getUrl('Collections', {
 
             Name: dlg.querySelector('#txtNewCollectionName').value,
             IsLocked: !dlg.querySelector('#chkEnableInternetMetadata').checked,
@@ -36,27 +51,23 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
             url: url,
             dataType: 'json'
 
-        }).then(function (result) {
-
+        }).then(result => {
             loading.hide();
 
-            var id = result.Id;
+            const id = result.Id;
 
             dlg.submitted = true;
             dialogHelper.close(dlg);
             redirectToCollection(apiClient, id);
-
         });
     }
 
     function redirectToCollection(apiClient, id) {
-
         appRouter.showItem(id, apiClient.serverId());
     }
 
     function addToCollection(apiClient, dlg, id) {
-
-        var url = apiClient.getUrl('Collections/' + id + '/Items', {
+        const url = apiClient.getUrl(`Collections/${id}/Items`, {
 
             Ids: dlg.querySelector('.fldSelectedItemIds').value || ''
         });
@@ -65,16 +76,13 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
             type: 'POST',
             url: url
 
-        }).then(function () {
-
+        }).then(() => {
             loading.hide();
 
             dlg.submitted = true;
             dialogHelper.close(dlg);
 
-            require(['toast'], function (toast) {
-                toast(globalize.translate('MessageItemsAdded'));
-            });
+            toast(globalize.translate('MessageItemsAdded'));
         });
     }
 
@@ -83,14 +91,13 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
     }
 
     function populateCollections(panel) {
-
         loading.show();
 
-        var select = panel.querySelector('#selectCollectionToAddTo');
+        const select = panel.querySelector('#selectCollectionToAddTo');
 
         panel.querySelector('.newCollectionInfo').classList.add('hide');
 
-        var options = {
+        const options = {
 
             Recursive: true,
             IncludeItemTypes: 'BoxSet',
@@ -98,16 +105,14 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
             EnableTotalRecordCount: false
         };
 
-        var apiClient = connectionManager.getApiClient(currentServerId);
-        apiClient.getItems(apiClient.getCurrentUserId(), options).then(function (result) {
+        const apiClient = ServerConnections.getApiClient(currentServerId);
+        apiClient.getItems(apiClient.getCurrentUserId(), options).then(result => {
+            let html = '';
 
-            var html = '';
+            html += `<option value="">${globalize.translate('OptionNew')}</option>`;
 
-            html += '<option value="">' + globalize.translate('OptionNew') + '</option>';
-
-            html += result.Items.map(function (i) {
-
-                return '<option value="' + i.Id + '">' + i.Name + '</option>';
+            html += result.Items.map(i => {
+                return `<option value="${i.Id}">${i.Name}</option>`;
             });
 
             select.innerHTML = html;
@@ -119,8 +124,7 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
     }
 
     function getEditorHtml() {
-
-        var html = '';
+        let html = '';
 
         html += '<div class="formDialogContent smoothScrollY" style="padding-top:2em;">';
         html += '<div class="dialogContentInner dialog-content-centered">';
@@ -134,27 +138,27 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
         html += '<br/>';
         html += '<br/>';
         html += '<div class="selectContainer">';
-        html += '<select is="emby-select" label="' + globalize.translate('LabelCollection') + '" id="selectCollectionToAddTo" autofocus></select>';
+        html += `<select is="emby-select" label="${globalize.translate('LabelCollection')}" id="selectCollectionToAddTo" autofocus></select>`;
         html += '</div>';
         html += '</div>';
 
         html += '<div class="newCollectionInfo">';
 
         html += '<div class="inputContainer">';
-        html += '<input is="emby-input" type="text" id="txtNewCollectionName" required="required" label="' + globalize.translate('LabelName') + '" />';
-        html += '<div class="fieldDescription">' + globalize.translate('NewCollectionNameExample') + '</div>';
+        html += `<input is="emby-input" type="text" id="txtNewCollectionName" required="required" label="${globalize.translate('LabelName')}" />`;
+        html += `<div class="fieldDescription">${globalize.translate('NewCollectionNameExample')}</div>`;
         html += '</div>';
 
         html += '<label class="checkboxContainer">';
         html += '<input is="emby-checkbox" type="checkbox" id="chkEnableInternetMetadata" />';
-        html += '<span>' + globalize.translate('SearchForCollectionInternetMetadata') + '</span>';
+        html += `<span>${globalize.translate('SearchForCollectionInternetMetadata')}</span>`;
         html += '</label>';
 
         // newCollectionInfo
         html += '</div>';
 
         html += '<div class="formDialogFooter">';
-        html += '<button is="emby-button" type="submit" class="raised btnSubmit block formDialogFooterItem button-submit">' + globalize.translate('ButtonOk') + '</button>';
+        html += `<button is="emby-button" type="submit" class="raised btnSubmit block formDialogFooterItem button-submit">${globalize.translate('ButtonOk')}</button>`;
         html += '</div>';
 
         html += '<input type="hidden" class="fldSelectedItemIds" />';
@@ -167,7 +171,6 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
     }
 
     function initEditor(content, items) {
-
         content.querySelector('#selectCollectionToAddTo').addEventListener('change', function () {
             if (this.value) {
                 content.querySelector('.newCollectionInfo').classList.add('hide');
@@ -188,7 +191,7 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
         } else {
             content.querySelector('.fldSelectCollection').classList.add('hide');
 
-            var selectCollectionToAddTo = content.querySelector('#selectCollectionToAddTo');
+            const selectCollectionToAddTo = content.querySelector('#selectCollectionToAddTo');
             selectCollectionToAddTo.innerHTML = '';
             selectCollectionToAddTo.value = '';
             triggerChange(selectCollectionToAddTo);
@@ -196,79 +199,70 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
     }
 
     function centerFocus(elem, horiz, on) {
-        require(['scrollHelper'], function (scrollHelper) {
-            var fn = on ? 'on' : 'off';
+        import('../../scripts/scrollHelper').then((scrollHelper) => {
+            const fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });
     }
 
-    function CollectionEditor() {
+    export class showEditor {
+        constructor(options) {
+            const items = options.items || {};
+            currentServerId = options.serverId;
 
-    }
-
-    CollectionEditor.prototype.show = function (options) {
-
-        var items = options.items || {};
-        currentServerId = options.serverId;
-
-        var dialogOptions = {
-            removeOnClose: true,
-            scrollY: false
-        };
-
-        if (layoutManager.tv) {
-            dialogOptions.size = 'fullscreen';
-        } else {
-            dialogOptions.size = 'small';
-        }
-
-        var dlg = dialogHelper.createDialog(dialogOptions);
-
-        dlg.classList.add('formDialog');
-
-        var html = '';
-        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"><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') + '"><span class="material-icons info"></span><span style="margin-left:.25em;">' + globalize.translate('Help') + '</span></a>';
-        }
-
-        html += '</div>';
-
-        html += getEditorHtml();
-
-        dlg.innerHTML = html;
-
-        initEditor(dlg, items);
-
-        dlg.querySelector('.btnCancel').addEventListener('click', function () {
-
-            dialogHelper.close(dlg);
-        });
-
-        if (layoutManager.tv) {
-            centerFocus(dlg.querySelector('.formDialogContent'), false, true);
-        }
-
-        return dialogHelper.open(dlg).then(function () {
+            const dialogOptions = {
+                removeOnClose: true,
+                scrollY: false
+            };
 
             if (layoutManager.tv) {
-                centerFocus(dlg.querySelector('.formDialogContent'), false, false);
+                dialogOptions.size = 'fullscreen';
+            } else {
+                dialogOptions.size = 'small';
             }
 
-            if (dlg.submitted) {
-                return Promise.resolve();
+            const dlg = dialogHelper.createDialog(dialogOptions);
+
+            dlg.classList.add('formDialog');
+
+            let html = '';
+            const 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"><span class="material-icons arrow_back"></span></button>';
+            html += '<h3 class="formDialogHeaderTitle">';
+            html += title;
+            html += '</h3>';
+
+            html += '</div>';
+
+            html += getEditorHtml();
+
+            dlg.innerHTML = html;
+
+            initEditor(dlg, items);
+
+            dlg.querySelector('.btnCancel').addEventListener('click', () => {
+                dialogHelper.close(dlg);
+            });
+
+            if (layoutManager.tv) {
+                centerFocus(dlg.querySelector('.formDialogContent'), false, true);
             }
 
-            return Promise.reject();
-        });
-    };
+            return dialogHelper.open(dlg).then(() => {
+                if (layoutManager.tv) {
+                    centerFocus(dlg.querySelector('.formDialogContent'), false, false);
+                }
 
-    return CollectionEditor;
-});
+                if (dlg.submitted) {
+                    return Promise.resolve();
+                }
+
+                return Promise.reject();
+            });
+        }
+    }
+
+/* eslint-enable indent */
+export default showEditor;

src/components/confirm/confirm.js

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

src/components/deletehelper.js

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

src/components/dialog/dialog.js

@@ -1,20 +1,30 @@
-define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 'require', 'material-icons', 'emby-button', 'paper-icon-button-light', 'emby-input', 'formDialogStyle', 'flexStyles'], function (dialogHelper, dom, layoutManager, scrollHelper, globalize, require) {
-    'use strict';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import dom from '../../scripts/dom';
+import layoutManager from '../layoutManager';
+import scrollHelper from '../../scripts/scrollHelper';
+import globalize from '../../scripts/globalize';
+import 'material-design-icons-iconfont';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-input/emby-input';
+import '../formdialog.css';
+import '../../assets/css/flexstyles.scss';
+
+/* eslint-disable indent */
 
     function showDialog(options, template) {
-
-        var dialogOptions = {
+        const dialogOptions = {
             removeOnClose: true,
             scrollY: false
         };
 
-        var enableTvLayout = layoutManager.tv;
+        const enableTvLayout = layoutManager.tv;
 
         if (enableTvLayout) {
             dialogOptions.size = 'fullscreen';
         }
 
-        var dlg = dialogHelper.createDialog(dialogOptions);
+        const dlg = dialogHelper.createDialog(dialogOptions);
 
         dlg.classList.add('formDialog');
 
@@ -22,7 +32,7 @@ define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 're
 
         dlg.classList.add('align-items-center');
         dlg.classList.add('justify-content-center');
-        var formDialogContent = dlg.querySelector('.formDialogContent');
+        const formDialogContent = dlg.querySelector('.formDialogContent');
         formDialogContent.classList.add('no-grow');
 
         if (enableTvLayout) {
@@ -30,41 +40,36 @@ define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 're
             formDialogContent.style['max-height'] = '60%';
             scrollHelper.centerFocus.on(formDialogContent, false);
         } else {
-            formDialogContent.style.maxWidth = (Math.min((options.buttons.length * 150) + 200, dom.getWindowSize().innerWidth - 50)) + 'px';
+            formDialogContent.style.maxWidth = `${Math.min((options.buttons.length * 150) + 200, dom.getWindowSize().innerWidth - 50)}px`;
             dlg.classList.add('dialog-fullscreen-lowres');
         }
 
-        //dlg.querySelector('.btnCancel').addEventListener('click', function (e) {
-        //    dialogHelper.close(dlg);
-        //});
-
         if (options.title) {
             dlg.querySelector('.formDialogHeaderTitle').innerHTML = options.title || '';
         } else {
             dlg.querySelector('.formDialogHeaderTitle').classList.add('hide');
         }
 
-        var displayText = options.html || options.text || '';
+        const displayText = options.html || options.text || '';
         dlg.querySelector('.text').innerHTML = displayText;
 
         if (!displayText) {
             dlg.querySelector('.dialogContentInner').classList.add('hide');
         }
 
-        var i;
-        var length;
-        var html = '';
-        var hasDescriptions = false;
+        let i;
+        let length;
+        let html = '';
+        let hasDescriptions = false;
 
         for (i = 0, length = options.buttons.length; i < length; i++) {
+            const item = options.buttons[i];
+            const autoFocus = i === 0 ? ' autofocus' : '';
 
-            var item = options.buttons[i];
-            var autoFocus = i === 0 ? ' autofocus' : '';
-
-            var buttonClass = 'btnOption raised formDialogFooterItem formDialogFooterItem-autosize';
+            let buttonClass = 'btnOption raised formDialogFooterItem formDialogFooterItem-autosize';
 
             if (item.type) {
-                buttonClass += ' button-' + item.type;
+                buttonClass += ` button-${item.type}`;
             }
 
             if (item.description) {
@@ -75,10 +80,10 @@ define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 're
                 buttonClass += ' formDialogFooterItem-vertical formDialogFooterItem-nomarginbottom';
             }
 
-            html += '<button is="emby-button" type="button" class="' + buttonClass + '" data-id="' + item.id + '"' + autoFocus + '>' + item.name + '</button>';
+            html += `<button is="emby-button" type="button" class="${buttonClass}" data-id="${item.id}"${autoFocus}>${item.name}</button>`;
 
             if (item.description) {
-                html += '<div class="formDialogFooterItem formDialogFooterItem-autosize fieldDescription" style="margin-top:.25em!important;margin-bottom:1.25em!important;">' + item.description + '</div>';
+                html += `<div class="formDialogFooterItem formDialogFooterItem-autosize fieldDescription" style="margin-top:.25em!important;margin-bottom:1.25em!important;">${item.description}</div>`;
             }
         }
 
@@ -88,19 +93,18 @@ define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 're
             dlg.querySelector('.formDialogFooter').classList.add('formDialogFooter-vertical');
         }
 
-        var dialogResult;
+        let dialogResult;
         function onButtonClick() {
             dialogResult = this.getAttribute('data-id');
             dialogHelper.close(dlg);
         }
 
-        var buttons = dlg.querySelectorAll('.btnOption');
+        const buttons = dlg.querySelectorAll('.btnOption');
         for (i = 0, length = buttons.length; i < length; i++) {
             buttons[i].addEventListener('click', onButtonClick);
         }
 
-        return dialogHelper.open(dlg).then(function () {
-
+        return dialogHelper.open(dlg).then(() => {
             if (enableTvLayout) {
                 scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false);
             }
@@ -113,9 +117,8 @@ define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 're
         });
     }
 
-    return function (text, title) {
-
-        var options;
+    export async function show(text, title) {
+        let options;
         if (typeof text === 'string') {
             options = {
                 title: title,
@@ -125,10 +128,13 @@ define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 're
             options = text;
         }
 
-        return new Promise(function (resolve, reject) {
-            require(['text!./dialog.template.html'], function (template) {
-                showDialog(options, template).then(resolve, reject);
-            });
+        const { default: template } = await import('./dialog.template.html');
+        return new Promise((resolve, reject) => {
+            showDialog(options, template).then(resolve, reject);
         });
-    };
-});
+    }
+
+/* eslint-enable indent */
+export default {
+    show: show
+};

src/components/dialog/dialog.template.html

@@ -4,12 +4,8 @@
 
 <div class="formDialogContent smoothScrollY">
     <div class="dialogContentInner dialog-content-centered" style="padding-top:1em;padding-bottom: 1em; text-align: center;">
-
-        <div class="text">
-
-        </div>
+        <div class="text"></div>
     </div>
 </div>
 
-<div class="formDialogFooter formDialogFooter-clear formDialogFooter-flex" style="padding-bottom: 1.5em;">
-</div>
+<div class="formDialogFooter formDialogFooter-clear formDialogFooter-flex" style="margin:1em"></div>

src/components/dialogHelper/dialogHelper.js

@@ -1,10 +1,17 @@
-define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager', 'dom', 'css!./dialoghelper.css', 'scrollStyles'], function (appRouter, focusManager, browser, layoutManager, inputManager, dom) {
-    'use strict';
+import { appRouter } from '../appRouter';
+import focusManager from '../focusManager';
+import browser from '../../scripts/browser';
+import layoutManager from '../layoutManager';
+import inputManager from '../../scripts/inputManager';
+import dom from '../../scripts/dom';
+import './dialoghelper.css';
+import '../../assets/css/scrollstyles.css';
 
-    var globalOnOpenCallback;
+/* eslint-disable indent */
+
+    let globalOnOpenCallback;
 
     function enableAnimation() {
-
         // too slow
         if (browser.tv) {
             return false;
@@ -14,7 +21,6 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
     }
 
     function removeCenterFocus(dlg) {
-
         if (layoutManager.tv) {
             if (dlg.classList.contains('scrollX')) {
                 centerFocus(dlg, true, false);
@@ -25,9 +31,8 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
     }
 
     function tryRemoveElement(elem) {
-        var parentNode = elem.parentNode;
+        const parentNode = elem.parentNode;
         if (parentNode) {
-
             // Seeing crashes in edge webview
             try {
                 parentNode.removeChild(elem);
@@ -38,15 +43,13 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
     }
 
     function DialogHashHandler(dlg, hash, resolve) {
-
-        var self = this;
+        const self = this;
         self.originalUrl = window.location.href;
-        var activeElement = document.activeElement;
-        var removeScrollLockOnClose = false;
+        const activeElement = document.activeElement;
+        let removeScrollLockOnClose = false;
 
         function onHashChange(e) {
-
-            var isBack = self.originalUrl === window.location.href;
+            const isBack = self.originalUrl === window.location.href;
 
             if (isBack || !isOpened(dlg)) {
                 window.removeEventListener('popstate', onHashChange);
@@ -59,7 +62,6 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
         }
 
         function onBackCommand(e) {
-
             if (e.detail.command === 'back') {
                 self.closedByBack = true;
                 e.preventDefault();
@@ -69,7 +71,6 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
         }
 
         function onDialogClosed() {
-
             if (!isHistoryEnabled(dlg)) {
                 inputManager.off(dlg, onBackCommand);
             }
@@ -84,9 +85,9 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
             }
 
             if (!self.closedByBack && isHistoryEnabled(dlg)) {
-                var state = history.state || {};
+                const state = window.history.state || {};
                 if (state.dialogId === hash) {
-                    history.back();
+                    window.history.back();
                 }
             }
 
@@ -97,7 +98,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
             if (dlg.getAttribute('data-removeonclose') !== 'false') {
                 removeCenterFocus(dlg);
 
-                var dialogContainer = dlg.dialogContainer;
+                const dialogContainer = dlg.dialogContainer;
                 if (dialogContainer) {
                     tryRemoveElement(dialogContainer);
                     dlg.dialogContainer = null;
@@ -108,7 +109,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
 
             //resolve();
             // if we just called history.back(), then use a timeout to allow the history events to fire first
-            setTimeout(function () {
+            setTimeout(() => {
                 resolve({
                     element: dlg,
                     closedByBack: self.closedByBack
@@ -118,7 +119,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
 
         dlg.addEventListener('close', onDialogClosed);
 
-        var center = !dlg.classList.contains('dialog-fixedSize');
+        const center = !dlg.classList.contains('dialog-fixedSize');
         if (center) {
             dlg.classList.add('centeredDialog');
         }
@@ -141,7 +142,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 {
@@ -150,11 +151,10 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
     }
 
     function addBackdropOverlay(dlg) {
-
-        var backdrop = document.createElement('div');
+        const backdrop = document.createElement('div');
         backdrop.classList.add('dialogBackdrop');
 
-        var backdropParent = dlg.dialogContainer || dlg;
+        const backdropParent = dlg.dialogContainer || dlg;
         backdropParent.parentNode.insertBefore(backdrop, backdropParent);
         dlg.backdrop = backdrop;
 
@@ -162,7 +162,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
         void backdrop.offsetWidth;
         backdrop.classList.add('dialogBackdropOpened');
 
-        dom.addEventListener((dlg.dialogContainer || backdrop), 'click', function (e) {
+        dom.addEventListener((dlg.dialogContainer || backdrop), 'click', e => {
             if (e.target === dlg.dialogContainer) {
                 close(dlg);
             }
@@ -170,7 +170,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
             passive: true
         });
 
-        dom.addEventListener((dlg.dialogContainer || backdrop), 'contextmenu', function (e) {
+        dom.addEventListener((dlg.dialogContainer || backdrop), 'contextmenu', e => {
             if (e.target === dlg.dialogContainer) {
                 // Close the application dialog menu
                 close(dlg);
@@ -184,40 +184,36 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
         return dlg.getAttribute('data-history') === 'true';
     }
 
-    function open(dlg) {
-
+    export function open(dlg) {
         if (globalOnOpenCallback) {
             globalOnOpenCallback(dlg);
         }
 
-        var parent = dlg.parentNode;
+        const parent = dlg.parentNode;
         if (parent) {
             parent.removeChild(dlg);
         }
 
-        var dialogContainer = document.createElement('div');
+        const dialogContainer = document.createElement('div');
         dialogContainer.classList.add('dialogContainer');
         dialogContainer.appendChild(dlg);
         dlg.dialogContainer = dialogContainer;
         document.body.appendChild(dialogContainer);
 
-        return new Promise(function (resolve, reject) {
-
-            new DialogHashHandler(dlg, 'dlg' + new Date().getTime(), resolve);
+        return new Promise((resolve, reject) => {
+            new DialogHashHandler(dlg, `dlg${new Date().getTime()}`, resolve);
         });
     }
 
     function isOpened(dlg) {
-
         //return dlg.opened;
         return !dlg.classList.contains('hide');
     }
 
-    function close(dlg) {
-
+    export function close(dlg) {
         if (isOpened(dlg)) {
             if (isHistoryEnabled(dlg)) {
-                history.back();
+                window.history.back();
             } else {
                 closeDialog(dlg);
             }
@@ -225,15 +221,13 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
     }
 
     function closeDialog(dlg) {
-
         if (!dlg.classList.contains('hide')) {
-
             dlg.dispatchEvent(new CustomEvent('closing', {
                 bubbles: false,
                 cancelable: false
             }));
 
-            var onAnimationFinish = function () {
+            const onAnimationFinish = () => {
                 focusManager.popScope(dlg);
 
                 dlg.classList.add('hide');
@@ -248,8 +242,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
     }
 
     function animateDialogOpen(dlg) {
-
-        var onAnimationFinish = function () {
+        const onAnimationFinish = () => {
             focusManager.pushScope(dlg);
 
             if (dlg.getAttribute('data-autofocus') === 'true') {
@@ -263,8 +256,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
         };
 
         if (enableAnimation()) {
-
-            var onFinish = function () {
+            const onFinish = () => {
                 dom.removeEventListener(dlg, dom.whichAnimationEvent(), onFinish, {
                     once: true
                 });
@@ -280,27 +272,24 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
     }
 
     function animateDialogClose(dlg, onAnimationFinish) {
-
         if (enableAnimation()) {
-
-            var animated = true;
+            let animated = true;
 
             switch (dlg.animationConfig.exit.name) {
-
                 case 'fadeout':
-                    dlg.style.animation = 'fadeout ' + dlg.animationConfig.exit.timing.duration + 'ms ease-out normal both';
+                    dlg.style.animation = `fadeout ${dlg.animationConfig.exit.timing.duration}ms ease-out normal both`;
                     break;
                 case 'scaledown':
-                    dlg.style.animation = 'scaledown ' + dlg.animationConfig.exit.timing.duration + 'ms ease-out normal both';
+                    dlg.style.animation = `scaledown ${dlg.animationConfig.exit.timing.duration}ms ease-out normal both`;
                     break;
                 case 'slidedown':
-                    dlg.style.animation = 'slidedown ' + dlg.animationConfig.exit.timing.duration + 'ms ease-out normal both';
+                    dlg.style.animation = `slidedown ${dlg.animationConfig.exit.timing.duration}ms ease-out normal both`;
                     break;
                 default:
                     animated = false;
                     break;
             }
-            var onFinish = function () {
+            const onFinish = () => {
                 dom.removeEventListener(dlg, dom.whichAnimationEvent(), onFinish, {
                     once: true
                 });
@@ -318,14 +307,9 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
         onAnimationFinish();
     }
 
-    var supportsOverscrollBehavior = 'overscroll-behavior-y' in document.body.style;
+    const supportsOverscrollBehavior = 'overscroll-behavior-y' in document.body.style;
 
     function shouldLockDocumentScroll(options) {
-
-        if (supportsOverscrollBehavior && (options.size || !browser.touch)) {
-            return false;
-        }
-
         if (options.lockScroll != null) {
             return options.lockScroll;
         }
@@ -334,6 +318,10 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
             return true;
         }
 
+        if (supportsOverscrollBehavior && (options.size || !browser.touch)) {
+            return false;
+        }
+
         if (options.size) {
             return true;
         }
@@ -342,8 +330,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
     }
 
     function removeBackdrop(dlg) {
-
-        var backdrop = dlg.backdrop;
+        const backdrop = dlg.backdrop;
 
         if (!backdrop) {
             return;
@@ -351,12 +338,11 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
 
         dlg.backdrop = null;
 
-        var onAnimationFinish = function () {
+        const onAnimationFinish = () => {
             tryRemoveElement(backdrop);
         };
 
         if (enableAnimation()) {
-
             backdrop.classList.remove('dialogBackdropOpened');
 
             // this is not firing animatonend
@@ -368,20 +354,19 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
     }
 
     function centerFocus(elem, horiz, on) {
-        require(['scrollHelper'], function (scrollHelper) {
-            var fn = on ? 'on' : 'off';
+        import('../../scripts/scrollHelper').then((scrollHelper) => {
+            const fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });
     }
 
-    function createDialog(options) {
-
+    export function createDialog(options) {
         options = options || {};
 
         // If there's no native dialog support, use a plain div
         // Also not working well in samsung tizen browser, content inside not clickable
         // Just go ahead and always use a plain div because we're seeing issues overlaying absoltutely positioned content over a modal dialog
-        var dlg = document.createElement('div');
+        const dlg = document.createElement('div');
 
         dlg.classList.add('focuscontainer');
         dlg.classList.add('hide');
@@ -390,7 +375,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
             dlg.setAttribute('data-lockscroll', 'true');
         }
 
-        if (options.enableHistory !== false && appRouter.enableNativeHistory()) {
+        if (options.enableHistory === true) {
             dlg.setAttribute('data-history', 'true');
         }
 
@@ -406,17 +391,14 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
             dlg.setAttribute('data-autofocus', 'true');
         }
 
-        var defaultEntryAnimation;
-        var defaultExitAnimation;
-
-        defaultEntryAnimation = 'scaleup';
-        defaultExitAnimation = 'scaledown';
-        var entryAnimation = options.entryAnimation || defaultEntryAnimation;
-        var exitAnimation = options.exitAnimation || defaultExitAnimation;
+        const defaultEntryAnimation = 'scaleup';
+        const defaultExitAnimation = 'scaledown';
+        const entryAnimation = options.entryAnimation || defaultEntryAnimation;
+        const exitAnimation = options.exitAnimation || defaultExitAnimation;
 
         // If it's not fullscreen then lower the default animation speed to make it open really fast
-        var entryAnimationDuration = options.entryAnimationDuration || (options.size !== 'fullscreen' ? 180 : 280);
-        var exitAnimationDuration = options.exitAnimationDuration || (options.size !== 'fullscreen' ? 120 : 220);
+        const entryAnimationDuration = options.entryAnimationDuration || (options.size !== 'fullscreen' ? 180 : 280);
+        const exitAnimationDuration = options.exitAnimationDuration || (options.size !== 'fullscreen' ? 120 : 220);
 
         dlg.animationConfig = {
             // scale up
@@ -461,24 +443,22 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
 
         if (options.size) {
             dlg.classList.add('dialog-fixedSize');
-            dlg.classList.add('dialog-' + options.size);
+            dlg.classList.add(`dialog-${options.size}`);
         }
 
         if (enableAnimation()) {
-
             switch (dlg.animationConfig.entry.name) {
-
                 case 'fadein':
-                    dlg.style.animation = 'fadein ' + entryAnimationDuration + 'ms ease-out normal';
+                    dlg.style.animation = `fadein ${entryAnimationDuration}ms ease-out normal`;
                     break;
                 case 'scaleup':
-                    dlg.style.animation = 'scaleup ' + entryAnimationDuration + 'ms ease-out normal both';
+                    dlg.style.animation = `scaleup ${entryAnimationDuration}ms ease-out normal both`;
                     break;
                 case 'slideup':
-                    dlg.style.animation = 'slideup ' + entryAnimationDuration + 'ms ease-out normal';
+                    dlg.style.animation = `slideup ${entryAnimationDuration}ms ease-out normal`;
                     break;
                 case 'slidedown':
-                    dlg.style.animation = 'slidedown ' + entryAnimationDuration + 'ms ease-out normal';
+                    dlg.style.animation = `slidedown ${entryAnimationDuration}ms ease-out normal`;
                     break;
                 default:
                     break;
@@ -488,12 +468,15 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
         return dlg;
     }
 
-    return {
-        open: open,
-        close: close,
-        createDialog: createDialog,
-        setOnOpen: function (val) {
-            globalOnOpenCallback = val;
-        }
-    };
-});
+    export function setOnOpen(val) {
+        globalOnOpenCallback = val;
+    }
+
+/* eslint-enable indent */
+
+export default {
+    open: open,
+    close: close,
+    createDialog: createDialog,
+    setOnOpen: setOnOpen
+};

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,9 +1,20 @@
-define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-input', 'paper-icon-button-light', 'css!./directorybrowser', 'formDialogStyle', 'emby-button'], function(loading, dialogHelper, dom, globalize) {
-    'use strict';
+import loading from '../loading/loading';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import dom from '../../scripts/dom';
+import globalize from '../../scripts/globalize';
+import '../listview/listview.css';
+import '../../elements/emby-input/emby-input';
+import '../../elements/emby-button/paper-icon-button-light';
+import './directorybrowser.css';
+import '../formdialog.css';
+import '../../elements/emby-button/emby-button';
+import alert from '../alert';
+
+/* eslint-disable indent */
 
     function getSystemInfo() {
         return systemInfo ? Promise.resolve(systemInfo) : ApiClient.getPublicSystemInfo().then(
-            function(info) {
+            info => {
                 systemInfo = info;
                 return info;
             }
@@ -21,9 +32,9 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
 
         loading.show();
 
-        var promises = [];
+        const promises = [];
 
-        if ('Network' === path) {
+        if (path === 'Network') {
             promises.push(ApiClient.getNetworkDevices());
         } else {
             if (path) {
@@ -35,10 +46,10 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
         }
 
         Promise.all(promises).then(
-            function(responses) {
-                var folders = responses[0];
-                var parentPath = responses[1] || '';
-                var html = '';
+            responses => {
+                const folders = responses[0];
+                const parentPath = responses[1] || '';
+                let html = '';
 
                 page.querySelector('.results').scrollTop = 0;
                 page.querySelector('#txtDirectoryPickerPath').value = path || '';
@@ -46,9 +57,9 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
                 if (path) {
                     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';
+                for (let i = 0, length = folders.length; i < length; i++) {
+                    const folder = folders[i];
+                    const cssClass = folder.Type === 'File' ? 'lnkPath lnkFile' : 'lnkPath lnkDirectory';
                     html += getItem(cssClass, folder.Type, folder.Path, folder.Name);
                 }
 
@@ -58,7 +69,7 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
 
                 page.querySelector('.results').innerHTML = html;
                 loading.hide();
-            }, function() {
+            }, () => {
                 if (updatePathOnError) {
                     page.querySelector('#txtDirectoryPickerPath').value = '';
                     page.querySelector('.results').innerHTML = '';
@@ -69,8 +80,8 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
     }
 
     function getItem(cssClass, type, path, name) {
-        var html = '';
-        html += '<div class="listItem listItem-border ' + cssClass + '" data-type="' + type + '" data-path="' + path + '">';
+        let 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;
@@ -82,20 +93,19 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
     }
 
     function getEditorHtml(options, systemInfo) {
-        var html = '';
+        let 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/>' : '';
+            const 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()) {
+            if (systemInfo.OperatingSystem.toLowerCase() === 'bsd') {
                 html += '<br/>';
                 html += '<br/>';
                 html += globalize.translate('MessageDirectoryPickerBSDInstruction');
                 html += '<br/>';
-            } else if ('linux' === systemInfo.OperatingSystem.toLowerCase()) {
+            } else if (systemInfo.OperatingSystem.toLowerCase() === 'linux') {
                 html += '<br/>';
                 html += '<br/>';
                 html += globalize.translate('MessageDirectoryPickerLinuxInstruction');
@@ -106,17 +116,17 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
         html += '<form style="margin:auto;">';
         html += '<div class="inputContainer" style="display: flex; align-items: center;">';
         html += '<div style="flex-grow:1;">';
-        var labelKey;
+        let labelKey;
         if (options.includeFiles !== true) {
             labelKey = 'LabelFolder';
         } else {
             labelKey = 'LabelPath';
         }
-        var readOnlyAttribute = options.pathReadOnly ? ' readonly' : '';
-        html += '<input is="emby-input" id="txtDirectoryPickerPath" type="text" required="required" ' + readOnlyAttribute + ' label="' + globalize.translate(labelKey) + '"/>';
+        const 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') + '"><span class="material-icons search"></span></button>';
+            html += `<button type="button" is="paper-icon-button-light" class="btnRefreshDirectories emby-input-iconbutton" title="${globalize.translate('Refresh')}"><span class="material-icons search"></span></button>`;
         }
         html += '</div>';
         if (!readOnlyAttribute) {
@@ -124,14 +134,14 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
         }
         if (options.enableNetworkSharePath) {
             html += '<div class="inputContainer" style="margin-top:2em;">';
-            html += '<input is="emby-input" id="txtNetworkPath" type="text" label="' + globalize.translate('LabelOptionalNetworkPath') + '"/>';
+            html += `<input is="emby-input" id="txtNetworkPath" type="text" label="${globalize.translate('LabelOptionalNetworkPath')}"/>`;
             html += '<div class="fieldDescription">';
-            html += globalize.translate('LabelOptionalNetworkPathHelp');
+            html += globalize.translate('LabelOptionalNetworkPathHelp', '<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 += `<button is="emby-button" type="submit" class="raised button-submit block formDialogFooterItem">${globalize.translate('ButtonOk')}</button>`;
         html += '</div>';
         html += '</form>';
         html += '</div>';
@@ -148,20 +158,19 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
     }
 
     function alertTextWithOptions(options) {
-        require(['alert'], function(alert) {
-            alert(options);
-        });
+        alert(options);
     }
 
     function validatePath(path, validateWriteable, apiClient) {
         return apiClient.ajax({
             type: 'POST',
             url: apiClient.getUrl('Environment/ValidatePath'),
-            data: {
+            data: JSON.stringify({
                 ValidateWriteable: validateWriteable,
                 Path: path
-            }
-        }).catch(function(response) {
+            }),
+            contentType: 'application/json'
+        }).catch(response => {
             if (response) {
                 if (response.status === 404) {
                     alertText(globalize.translate('PathNotFound'));
@@ -181,10 +190,10 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
     }
 
     function initEditor(content, options, fileOptions) {
-        content.addEventListener('click', function(e) {
-            var lnkPath = dom.parentWithClass(e.target, 'lnkPath');
+        content.addEventListener('click', e => {
+            const lnkPath = dom.parentWithClass(e.target, 'lnkPath');
             if (lnkPath) {
-                var path = lnkPath.getAttribute('data-path');
+                const path = lnkPath.getAttribute('data-path');
                 if (lnkPath.classList.contains('lnkFile')) {
                     content.querySelector('#txtDirectoryPickerPath').value = path;
                 } else {
@@ -193,25 +202,25 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
             }
         });
 
-        content.addEventListener('click', function(e) {
+        content.addEventListener('click', e => {
             if (dom.parentWithClass(e.target, 'btnRefreshDirectories')) {
-                var path = content.querySelector('#txtDirectoryPickerPath').value;
+                const 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', e => {
+            const txtDirectoryPickerPath = dom.parentWithTag(e.target, 'INPUT');
+            if (txtDirectoryPickerPath && txtDirectoryPickerPath.id === 'txtDirectoryPickerPath') {
                 refreshDirectoryBrowser(content, txtDirectoryPickerPath.value, fileOptions);
             }
         });
 
         content.querySelector('form').addEventListener('submit', function(e) {
             if (options.callback) {
-                var networkSharePath = this.querySelector('#txtNetworkPath');
+                let networkSharePath = this.querySelector('#txtNetworkPath');
                 networkSharePath = networkSharePath ? networkSharePath.value : null;
-                var path = this.querySelector('#txtDirectoryPickerPath').value;
+                const path = this.querySelector('#txtDirectoryPickerPath').value;
                 validatePath(path, options.validateWriteable, ApiClient).then(options.callback(path, networkSharePath));
             }
             e.preventDefault();
@@ -225,77 +234,79 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
             return Promise.resolve(options.path);
         } else {
             return ApiClient.getJSON(ApiClient.getUrl('Environment/DefaultDirectoryBrowser')).then(
-                function(result) {
+                result => {
                     return result.Path || '';
-                }, function() {
+                }, () => {
                     return '';
                 }
             );
         }
     }
 
-    function directoryBrowser() {
-        var currentDialog;
-        var self = this;
-        self.show = function(options) {
-            options = options || {};
-            var fileOptions = {
-                includeDirectories: true
-            };
-            if (options.includeDirectories != null) {
-                fileOptions.includeDirectories = options.includeDirectories;
-            }
-            if (options.includeFiles != null) {
-                fileOptions.includeFiles = options.includeFiles;
-            }
-            Promise.all([getSystemInfo(), getDefaultPath(options)]).then(
-                function(responses) {
-                    var systemInfo = responses[0];
-                    var initialPath = responses[1];
-                    var dlg = dialogHelper.createDialog({
-                        size: 'medium-tall',
-                        removeOnClose: true,
-                        scrollY: false
-                    });
-                    dlg.classList.add('ui-body-a');
-                    dlg.classList.add('background-theme-a');
-                    dlg.classList.add('directoryPicker');
-                    dlg.classList.add('formDialog');
-
-                    var html = '';
-                    html += '<div class="formDialogHeader">';
-                    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 += getEditorHtml(options, systemInfo);
-                    dlg.innerHTML = html;
-                    initEditor(dlg, options, fileOptions);
-                    dlg.addEventListener('close', onDialogClosed);
-                    dialogHelper.open(dlg);
-                    dlg.querySelector('.btnCloseDialog').addEventListener('click', function() {
-                        dialogHelper.close(dlg);
-                    });
-                    currentDialog = dlg;
-                    dlg.querySelector('#txtDirectoryPickerPath').value = initialPath;
-                    var txtNetworkPath = dlg.querySelector('#txtNetworkPath');
-                    if (txtNetworkPath) {
-                        txtNetworkPath.value = options.networkSharePath || '';
-                    }
-                    if (!options.pathReadOnly) {
-                        refreshDirectoryBrowser(dlg, initialPath, fileOptions, true);
-                    }
+    class directoryBrowser {
+        constructor() {
+            let currentDialog;
+            this.show = options => {
+                options = options || {};
+                const fileOptions = {
+                    includeDirectories: true
+                };
+                if (options.includeDirectories != null) {
+                    fileOptions.includeDirectories = options.includeDirectories;
                 }
-            );
-        };
-        self.close = function() {
-            if (currentDialog) {
-                dialogHelper.close(currentDialog);
-            }
-        };
+                if (options.includeFiles != null) {
+                    fileOptions.includeFiles = options.includeFiles;
+                }
+                Promise.all([getSystemInfo(), getDefaultPath(options)]).then(
+                    responses => {
+                        const systemInfo = responses[0];
+                        const initialPath = responses[1];
+                        const dlg = dialogHelper.createDialog({
+                            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');
+
+                        let html = '';
+                        html += '<div class="formDialogHeader">';
+                        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 += getEditorHtml(options, systemInfo);
+                        dlg.innerHTML = html;
+                        initEditor(dlg, options, fileOptions);
+                        dlg.addEventListener('close', onDialogClosed);
+                        dialogHelper.open(dlg);
+                        dlg.querySelector('.btnCloseDialog').addEventListener('click', () => {
+                            dialogHelper.close(dlg);
+                        });
+                        currentDialog = dlg;
+                        dlg.querySelector('#txtDirectoryPickerPath').value = initialPath;
+                        const txtNetworkPath = dlg.querySelector('#txtNetworkPath');
+                        if (txtNetworkPath) {
+                            txtNetworkPath.value = options.networkSharePath || '';
+                        }
+                        if (!options.pathReadOnly) {
+                            refreshDirectoryBrowser(dlg, initialPath, fileOptions, true);
+                        }
+                    }
+                );
+            };
+            this.close = () => {
+                if (currentDialog) {
+                    dialogHelper.close(currentDialog);
+                }
+            };
+        }
     }
 
-    var systemInfo;
-    return directoryBrowser;
-});
+    let systemInfo;
+
+/* eslint-enable indent */
+export default directoryBrowser;

src/components/displaySettings/displaySettings.js

@@ -0,0 +1,247 @@
+import browser from '../../scripts/browser';
+import layoutManager from '../layoutManager';
+import { pluginManager } from '../pluginManager';
+import { appHost } from '../apphost';
+import focusManager from '../focusManager';
+import datetime from '../../scripts/datetime';
+import globalize from '../../scripts/globalize';
+import loading from '../loading/loading';
+import skinManager from '../../scripts/themeManager';
+import { Events } from 'jellyfin-apiclient';
+import '../../elements/emby-select/emby-select';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-button/emby-button';
+import ServerConnections from '../ServerConnections';
+import toast from '../toast/toast';
+
+/* eslint-disable indent */
+
+    function fillThemes(context, userSettings) {
+        const select = context.querySelector('#selectTheme');
+
+        skinManager.getThemes().then(themes => {
+            select.innerHTML = themes.map(t => {
+                return `<option value="${t.id}">${t.name}</option>`;
+            }).join('');
+
+            // get default theme
+            const defaultTheme = themes.find(theme => {
+                return theme.default;
+            });
+
+            // set the current theme
+            select.value = userSettings.theme() || defaultTheme.id;
+        });
+    }
+
+    function loadScreensavers(context, userSettings) {
+        const selectScreensaver = context.querySelector('.selectScreensaver');
+        const options = pluginManager.ofType('screensaver').map(plugin => {
+            return {
+                name: plugin.name,
+                value: plugin.id
+            };
+        });
+
+        options.unshift({
+            name: globalize.translate('None'),
+            value: 'none'
+        });
+
+        selectScreensaver.innerHTML = options.map(o => {
+            return `<option value="${o.value}">${o.name}</option>`;
+        }).join('');
+
+        selectScreensaver.value = userSettings.screensaver();
+
+        if (!selectScreensaver.value) {
+            // TODO: set the default instead of none
+            selectScreensaver.value = 'none';
+        }
+    }
+
+    function showOrHideMissingEpisodesField(context) {
+        if (browser.tizen || browser.web0s) {
+            context.querySelector('.fldDisplayMissingEpisodes').classList.add('hide');
+            return;
+        }
+
+        context.querySelector('.fldDisplayMissingEpisodes').classList.remove('hide');
+    }
+
+    function loadForm(context, user, userSettings) {
+        if (appHost.supports('displaylanguage')) {
+            context.querySelector('.languageSection').classList.remove('hide');
+        } else {
+            context.querySelector('.languageSection').classList.add('hide');
+        }
+
+        if (appHost.supports('displaymode')) {
+            context.querySelector('.fldDisplayMode').classList.remove('hide');
+        } else {
+            context.querySelector('.fldDisplayMode').classList.add('hide');
+        }
+
+        if (appHost.supports('externallinks')) {
+            context.querySelector('.learnHowToContributeContainer').classList.remove('hide');
+        } else {
+            context.querySelector('.learnHowToContributeContainer').classList.add('hide');
+        }
+
+        if (appHost.supports('screensaver')) {
+            context.querySelector('.selectScreensaverContainer').classList.remove('hide');
+        } else {
+            context.querySelector('.selectScreensaverContainer').classList.add('hide');
+        }
+
+        if (datetime.supportsLocalization()) {
+            context.querySelector('.fldDateTimeLocale').classList.remove('hide');
+        } else {
+            context.querySelector('.fldDateTimeLocale').classList.add('hide');
+        }
+
+        if (!browser.tizen && !browser.web0s) {
+            context.querySelector('.fldBackdrops').classList.remove('hide');
+            context.querySelector('.fldThemeSong').classList.remove('hide');
+            context.querySelector('.fldThemeVideo').classList.remove('hide');
+        } else {
+            context.querySelector('.fldBackdrops').classList.add('hide');
+            context.querySelector('.fldThemeSong').classList.add('hide');
+            context.querySelector('.fldThemeVideo').classList.add('hide');
+        }
+
+        fillThemes(context, userSettings);
+        loadScreensavers(context, userSettings);
+
+        context.querySelector('.chkDisplayMissingEpisodes').checked = user.Configuration.DisplayMissingEpisodes || false;
+
+        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();
+
+        context.querySelector('.selectLayout').value = layoutManager.getSavedLayout() || '';
+
+        showOrHideMissingEpisodesField(context);
+
+        loading.hide();
+    }
+
+    function saveUser(context, user, userSettingsInstance, apiClient) {
+        user.Configuration.DisplayMissingEpisodes = context.querySelector('.chkDisplayMissingEpisodes').checked;
+
+        if (appHost.supports('displaylanguage')) {
+            userSettingsInstance.language(context.querySelector('#selectLanguage').value);
+        }
+
+        userSettingsInstance.dateTimeLocale(context.querySelector('.selectDateTimeLocale').value);
+
+        userSettingsInstance.enableThemeSongs(context.querySelector('#chkThemeSong').checked);
+        userSettingsInstance.enableThemeVideos(context.querySelector('#chkThemeVideo').checked);
+        userSettingsInstance.theme(context.querySelector('#selectTheme').value);
+        userSettingsInstance.screensaver(context.querySelector('.selectScreensaver').value);
+
+        userSettingsInstance.libraryPageSize(context.querySelector('#txtLibraryPageSize').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());
+        }
+
+        layoutManager.setLayout(context.querySelector('.selectLayout').value);
+        return apiClient.updateUserConfiguration(user.Id, user.Configuration);
+    }
+
+    function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) {
+        loading.show();
+
+        apiClient.getUser(userId).then(user => {
+            saveUser(context, user, userSettings, apiClient).then(() => {
+                loading.hide();
+                if (enableSaveConfirmation) {
+                    toast(globalize.translate('SettingsSaved'));
+                }
+                Events.trigger(instance, 'saved');
+            }, () => {
+                loading.hide();
+            });
+        });
+    }
+
+    function onSubmit(e) {
+        const self = this;
+        const apiClient = ServerConnections.getApiClient(self.options.serverId);
+        const userId = self.options.userId;
+        const userSettings = self.options.userSettings;
+
+        userSettings.setUserInfo(userId, apiClient).then(() => {
+            const enableSaveConfirmation = self.options.enableSaveConfirmation;
+            save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation);
+        });
+
+        // Disable default form submission
+        if (e) {
+            e.preventDefault();
+        }
+        return false;
+    }
+
+    async function embed(options, self) {
+        const { default: template } = await import('./displaySettings.template.html');
+        options.element.innerHTML = globalize.translateHtml(template, 'core');
+        options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self));
+        if (options.enableSaveButton) {
+            options.element.querySelector('.btnSave').classList.remove('hide');
+        }
+        self.loadData(options.autoFocus);
+    }
+
+    class DisplaySettings {
+        constructor(options) {
+            this.options = options;
+            embed(options, this);
+        }
+
+        loadData(autoFocus) {
+            const self = this;
+            const context = self.options.element;
+
+            loading.show();
+
+            const userId = self.options.userId;
+            const apiClient = ServerConnections.getApiClient(self.options.serverId);
+            const userSettings = self.options.userSettings;
+
+            return apiClient.getUser(userId).then(user => {
+                return userSettings.setUserInfo(userId, apiClient).then(() => {
+                    self.dataLoaded = true;
+                    loadForm(context, user, userSettings);
+                    if (autoFocus) {
+                        focusManager.autoFocus(context);
+                    }
+                });
+            });
+        }
+
+        submit() {
+            onSubmit.call(this);
+        }
+
+        destroy() {
+            this.options = null;
+        }
+    }
+
+/* eslint-enable indent */
+export default DisplaySettings;

src/components/displaySettings/displaySettings.template.html

@@ -1,5 +1,4 @@
 <form style="margin: 0 auto;">
-
     <h2 class="sectionTitle">
         ${Display}
     </h2>
@@ -123,43 +122,47 @@
         <div class="fieldDescription">${LabelPleaseRestart}</div>
     </div>
 
-    <div class="selectContainer hide selectSkinContainer">
-        <select is="emby-select" class="selectSkin" label="${LabelSkin}"></select>
-    </div>
-
     <div class="selectContainer">
         <select id="selectTheme" is="emby-select" label="${LabelTheme}"></select>
     </div>
 
-    <div class="selectContainer selectDashboardThemeContainer hide">
-        <select id="selectDashboardTheme" is="emby-select" label="${LabelDashboardTheme}"></select>
-    </div>
-
     <div class="selectContainer hide selectScreensaverContainer">
         <select is="emby-select" class="selectScreensaver" label="${LabelScreensaver}"></select>
     </div>
 
-    <div class="selectContainer fldSoundEffects hide">
-        <select is="emby-select" class="selectSoundEffects" label="${LabelSoundEffects}"></select>
-    </div>
-
-    <div class="inputContainer inputContainer-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 fldFadein">
+    <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">
         <label>
             <input type="checkbox" is="emby-checkbox" id="chkBackdrops" />
-            <span>${EnableBackdrops}</span>
+            <span>${Backdrops}</span>
         </label>
         <div class="fieldDescription checkboxFieldDescription">${EnableBackdropsHelp}</div>
     </div>
@@ -167,7 +170,7 @@
     <div class="checkboxContainer checkboxContainer-withDescription fldThemeSong hide">
         <label>
             <input type="checkbox" is="emby-checkbox" id="chkThemeSong" />
-            <span>${EnableThemeSongs}</span>
+            <span>${ThemeSongs}</span>
         </label>
         <div class="fieldDescription checkboxFieldDescription">${EnableThemeSongsHelp}</div>
     </div>
@@ -175,18 +178,11 @@
     <div class="checkboxContainer checkboxContainer-withDescription fldThemeVideo hide">
         <label>
             <input type="checkbox" is="emby-checkbox" id="chkThemeVideo" />
-            <span>${EnableThemeVideos}</span>
+            <span>${ThemeVideos}</span>
         </label>
         <div class="fieldDescription checkboxFieldDescription">${EnableThemeVideosHelp}</div>
     </div>
 
-    <div class="checkboxContainer hide fldAutorun">
-        <label>
-            <input type="checkbox" is="emby-checkbox" class="chkRunAtStartup" />
-            <span>${RunAtStartup}</span>
-        </label>
-    </div>
-
     <div class="checkboxContainer checkboxContainer-withDescription fldDisplayMissingEpisodes hide">
         <label>
             <input type="checkbox" is="emby-checkbox" class="chkDisplayMissingEpisodes" />

src/components/displaysettings/displaysettings.js

@@ -1,317 +0,0 @@
-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';
-
-    function fillThemes(select, isDashboard) {
-        select.innerHTML = skinManager.getThemes().map(function (t) {
-            var value = t.id;
-            if (t.isDefault && !isDashboard) {
-                value = '';
-            } else if (t.isDefaultServerDashboard && isDashboard) {
-                value = '';
-            }
-
-            return '<option value="' + value + '">' + t.name + '</option>';
-        }).join('');
-    }
-
-    function loadScreensavers(context, userSettings) {
-        var selectScreensaver = context.querySelector('.selectScreensaver');
-        var options = pluginManager.ofType('screensaver').map(function (plugin) {
-            return {
-                name: plugin.name,
-                value: plugin.id
-            };
-        });
-
-        options.unshift({
-            name: globalize.translate('None'),
-            value: 'none'
-        });
-
-        selectScreensaver.innerHTML = options.map(function (o) {
-            return '<option value="' + o.value + '">' + o.name + '</option>';
-        }).join('');
-        selectScreensaver.value = userSettings.screensaver();
-
-        if (!selectScreensaver.value) {
-            // TODO: set the default instead of none
-            selectScreensaver.value = 'none';
-        }
-    }
-
-    function loadSoundEffects(context, userSettings) {
-
-        var selectSoundEffects = context.querySelector('.selectSoundEffects');
-        var options = pluginManager.ofType('soundeffects').map(function (plugin) {
-            return {
-                name: plugin.name,
-                value: plugin.id
-            };
-        });
-
-        options.unshift({
-            name: globalize.translate('None'),
-            value: 'none'
-        });
-
-        selectSoundEffects.innerHTML = options.map(function (o) {
-            return '<option value="' + o.value + '">' + o.name + '</option>';
-        }).join('');
-        selectSoundEffects.value = userSettings.soundEffects();
-
-        if (!selectSoundEffects.value) {
-            // TODO: set the default instead of none
-            selectSoundEffects.value = 'none';
-        }
-    }
-
-    function loadSkins(context, userSettings) {
-
-        var selectSkin = context.querySelector('.selectSkin');
-
-        var options = pluginManager.ofType('skin').map(function (plugin) {
-            return {
-                name: plugin.name,
-                value: plugin.id
-            };
-        });
-
-        selectSkin.innerHTML = options.map(function (o) {
-            return '<option value="' + o.value + '">' + o.name + '</option>';
-        }).join('');
-        selectSkin.value = userSettings.skin();
-
-        if (!selectSkin.value && options.length) {
-            selectSkin.value = options[0].value;
-        }
-
-        if (options.length > 1 && appHost.supports('skins')) {
-            context.querySelector('.selectSkinContainer').classList.remove('hide');
-        } else {
-            context.querySelector('.selectSkinContainer').classList.add('hide');
-        }
-    }
-
-    function showOrHideMissingEpisodesField(context, user, apiClient) {
-
-        if (browser.tizen || browser.web0s) {
-            context.querySelector('.fldDisplayMissingEpisodes').classList.add('hide');
-            return;
-        }
-
-        context.querySelector('.fldDisplayMissingEpisodes').classList.remove('hide');
-    }
-
-    function loadForm(context, user, userSettings, apiClient) {
-
-        var loggedInUserId = apiClient.getCurrentUserId();
-        var userId = user.Id;
-
-        if (user.Policy.IsAdministrator) {
-            context.querySelector('.selectDashboardThemeContainer').classList.remove('hide');
-        } else {
-            context.querySelector('.selectDashboardThemeContainer').classList.add('hide');
-        }
-
-        if (appHost.supports('displaylanguage')) {
-            context.querySelector('.languageSection').classList.remove('hide');
-        } else {
-            context.querySelector('.languageSection').classList.add('hide');
-        }
-
-        if (appHost.supports('displaymode')) {
-            context.querySelector('.fldDisplayMode').classList.remove('hide');
-        } else {
-            context.querySelector('.fldDisplayMode').classList.add('hide');
-        }
-
-        if (appHost.supports('externallinks')) {
-            context.querySelector('.learnHowToContributeContainer').classList.remove('hide');
-        } else {
-            context.querySelector('.learnHowToContributeContainer').classList.add('hide');
-        }
-
-        if (appHost.supports('runatstartup')) {
-            context.querySelector('.fldAutorun').classList.remove('hide');
-        } else {
-            context.querySelector('.fldAutorun').classList.add('hide');
-        }
-
-        if (appHost.supports('soundeffects')) {
-            context.querySelector('.fldSoundEffects').classList.remove('hide');
-        } else {
-            context.querySelector('.fldSoundEffects').classList.add('hide');
-        }
-
-        if (appHost.supports('screensaver')) {
-            context.querySelector('.selectScreensaverContainer').classList.remove('hide');
-        } else {
-            context.querySelector('.selectScreensaverContainer').classList.add('hide');
-        }
-
-        if (datetime.supportsLocalization()) {
-            context.querySelector('.fldDateTimeLocale').classList.remove('hide');
-        } else {
-            context.querySelector('.fldDateTimeLocale').classList.add('hide');
-        }
-
-        if (!browser.tizen && !browser.web0s) {
-            context.querySelector('.fldBackdrops').classList.remove('hide');
-            context.querySelector('.fldThemeSong').classList.remove('hide');
-            context.querySelector('.fldThemeVideo').classList.remove('hide');
-        } else {
-            context.querySelector('.fldBackdrops').classList.add('hide');
-            context.querySelector('.fldThemeSong').classList.add('hide');
-            context.querySelector('.fldThemeVideo').classList.add('hide');
-        }
-
-        context.querySelector('.chkRunAtStartup').checked = appSettings.runAtStartup();
-
-        var selectTheme = context.querySelector('#selectTheme');
-        var selectDashboardTheme = context.querySelector('#selectDashboardTheme');
-
-        fillThemes(selectTheme);
-        fillThemes(selectDashboardTheme, true);
-        loadScreensavers(context, userSettings);
-        loadSoundEffects(context, userSettings);
-        loadSkins(context, userSettings);
-
-        context.querySelector('.chkDisplayMissingEpisodes').checked = user.Configuration.DisplayMissingEpisodes || false;
-
-        context.querySelector('#chkThemeSong').checked = userSettings.enableThemeSongs();
-        context.querySelector('#chkThemeVideo').checked = userSettings.enableThemeVideos();
-        context.querySelector('#chkFadein').checked = userSettings.enableFastFadein();
-        context.querySelector('#chkBackdrops').checked = userSettings.enableBackdrops();
-
-        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() || '';
-
-        context.querySelector('.selectLayout').value = layoutManager.getSavedLayout() || '';
-
-        showOrHideMissingEpisodesField(context, user, apiClient);
-
-        loading.hide();
-    }
-
-    function saveUser(context, user, userSettingsInstance, apiClient) {
-
-        appSettings.runAtStartup(context.querySelector('.chkRunAtStartup').checked);
-
-        user.Configuration.DisplayMissingEpisodes = context.querySelector('.chkDisplayMissingEpisodes').checked;
-
-        if (appHost.supports('displaylanguage')) {
-            userSettingsInstance.language(context.querySelector('#selectLanguage').value);
-        }
-
-        userSettingsInstance.dateTimeLocale(context.querySelector('.selectDateTimeLocale').value);
-
-        userSettingsInstance.enableThemeSongs(context.querySelector('#chkThemeSong').checked);
-        userSettingsInstance.enableThemeVideos(context.querySelector('#chkThemeVideo').checked);
-        userSettingsInstance.dashboardTheme(context.querySelector('#selectDashboardTheme').value);
-        userSettingsInstance.theme(context.querySelector('#selectTheme').value);
-        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.enableBackdrops(context.querySelector('#chkBackdrops').checked);
-
-        if (user.Id === apiClient.getCurrentUserId()) {
-            skinManager.setTheme(userSettingsInstance.theme());
-        }
-
-        layoutManager.setLayout(context.querySelector('.selectLayout').value);
-        return apiClient.updateUserConfiguration(user.Id, user.Configuration);
-    }
-
-    function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) {
-        loading.show();
-
-        apiClient.getUser(userId).then(function (user) {
-            saveUser(context, user, userSettings, apiClient).then(function () {
-                loading.hide();
-                if (enableSaveConfirmation) {
-                    require(['toast'], function (toast) {
-                        toast(globalize.translate('SettingsSaved'));
-                    });
-                }
-                events.trigger(instance, 'saved');
-            }, function () {
-                loading.hide();
-            });
-        });
-    }
-
-    function onSubmit(e) {
-        var self = this;
-        var apiClient = connectionManager.getApiClient(self.options.serverId);
-        var userId = self.options.userId;
-        var userSettings = self.options.userSettings;
-
-        userSettings.setUserInfo(userId, apiClient).then(function () {
-            var enableSaveConfirmation = self.options.enableSaveConfirmation;
-            save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation);
-        });
-
-        // Disable default form submission
-        if (e) {
-            e.preventDefault();
-        }
-        return false;
-    }
-
-    function embed(options, self) {
-        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) {
-                options.element.querySelector('.btnSave').classList.remove('hide');
-            }
-            self.loadData(options.autoFocus);
-        });
-    }
-
-    function DisplaySettings(options) {
-        this.options = options;
-        embed(options, this);
-    }
-
-    DisplaySettings.prototype.loadData = function (autoFocus) {
-        var self = this;
-        var context = self.options.element;
-
-        loading.show();
-
-        var userId = self.options.userId;
-        var apiClient = connectionManager.getApiClient(self.options.serverId);
-        var userSettings = self.options.userSettings;
-
-        return apiClient.getUser(userId).then(function (user) {
-            return userSettings.setUserInfo(userId, apiClient).then(function () {
-                self.dataLoaded = true;
-                loadForm(context, user, userSettings, apiClient);
-                if (autoFocus) {
-                    focusManager.autoFocus(context);
-                }
-            });
-        });
-    };
-
-    DisplaySettings.prototype.submit = function () {
-        onSubmit.call(this);
-    };
-
-    DisplaySettings.prototype.destroy = function () {
-        this.options = null;
-    };
-
-    return DisplaySettings;
-});

src/components/favoriteitems.js

@@ -1,5 +1,14 @@
-define(['loading', 'libraryBrowser', 'cardBuilder', 'dom', 'apphost', 'imageLoader', 'globalize', 'layoutManager', 'scrollStyles', 'emby-itemscontainer'], function (loading, libraryBrowser, cardBuilder, dom, appHost, imageLoader, globalize, layoutManager) {
-    'use strict';
+import loading from './loading/loading';
+import cardBuilder from './cardbuilder/cardBuilder';
+import dom from '../scripts/dom';
+import { appHost } from './apphost';
+import imageLoader from './images/imageLoader';
+import globalize from '../scripts/globalize';
+import layoutManager from './layoutManager';
+import '../assets/css/scrollstyles.css';
+import '../elements/emby-itemscontainer/emby-itemscontainer';
+
+/* eslint-disable indent */
 
     function enableScrollX() {
         return !layoutManager.desktop;
@@ -19,21 +28,21 @@ define(['loading', 'libraryBrowser', 'cardBuilder', 'dom', 'apphost', 'imageLoad
 
     function getSections() {
         return [{
-            name: 'HeaderFavoriteMovies',
+            name: 'Movies',
             types: 'Movie',
             id: 'favoriteMovies',
             shape: getPosterShape(),
             showTitle: false,
             overlayPlayButton: true
         }, {
-            name: 'HeaderFavoriteShows',
+            name: 'Shows',
             types: 'Series',
             id: 'favoriteShows',
             shape: getPosterShape(),
             showTitle: false,
             overlayPlayButton: true
         }, {
-            name: 'HeaderFavoriteEpisodes',
+            name: 'Episodes',
             types: 'Episode',
             id: 'favoriteEpisode',
             shape: getThumbShape(),
@@ -44,7 +53,7 @@ define(['loading', 'libraryBrowser', 'cardBuilder', 'dom', 'apphost', 'imageLoad
             overlayText: false,
             centerText: true
         }, {
-            name: 'HeaderFavoriteVideos',
+            name: 'Videos',
             types: 'Video,MusicVideo',
             id: 'favoriteVideos',
             shape: getThumbShape(),
@@ -54,7 +63,7 @@ define(['loading', 'libraryBrowser', 'cardBuilder', 'dom', 'apphost', 'imageLoad
             overlayText: false,
             centerText: true
         }, {
-            name: 'HeaderFavoriteArtists',
+            name: 'Artists',
             types: 'MusicArtist',
             id: 'favoriteArtists',
             shape: getSquareShape(),
@@ -66,7 +75,7 @@ define(['loading', 'libraryBrowser', 'cardBuilder', 'dom', 'apphost', 'imageLoad
             overlayPlayButton: true,
             coverImage: true
         }, {
-            name: 'HeaderFavoriteAlbums',
+            name: 'Albums',
             types: 'MusicAlbum',
             id: 'favoriteAlbums',
             shape: getSquareShape(),
@@ -78,7 +87,7 @@ define(['loading', 'libraryBrowser', 'cardBuilder', 'dom', 'apphost', 'imageLoad
             overlayPlayButton: true,
             coverImage: true
         }, {
-            name: 'HeaderFavoriteSongs',
+            name: 'Songs',
             types: 'Audio',
             id: 'favoriteSongs',
             shape: getSquareShape(),
@@ -94,8 +103,8 @@ define(['loading', 'libraryBrowser', 'cardBuilder', 'dom', 'apphost', 'imageLoad
     }
 
     function loadSection(elem, userId, topParentId, section, isSingleSection) {
-        var screenWidth = dom.getWindowSize().innerWidth;
-        var options = {
+        const screenWidth = dom.getWindowSize().innerWidth;
+        const options = {
             SortBy: 'SortName',
             SortOrder: 'Ascending',
             Filters: 'IsFavorite',
@@ -118,9 +127,9 @@ define(['loading', 'libraryBrowser', 'cardBuilder', 'dom', 'apphost', 'imageLoad
             }
         }
 
-        var promise;
+        let promise;
 
-        if ('MusicArtist' === section.types) {
+        if (section.types === 'MusicArtist') {
             promise = ApiClient.getArtists(userId, options);
         } else {
             options.IncludeItemTypes = section.types;
@@ -128,7 +137,7 @@ define(['loading', 'libraryBrowser', 'cardBuilder', 'dom', 'apphost', 'imageLoad
         }
 
         return promise.then(function (result) {
-            var html = '';
+            let html = '';
 
             if (result.Items.length) {
                 if (html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">', !layoutManager.tv && options.Limit && result.Items.length >= options.Limit) {
@@ -144,7 +153,7 @@ define(['loading', 'libraryBrowser', 'cardBuilder', 'dom', 'apphost', 'imageLoad
 
                 html += '</div>';
                 if (enableScrollX()) {
-                    var scrollXClass = 'scrollX hiddenScrollX';
+                    let scrollXClass = 'scrollX hiddenScrollX';
                     if (layoutManager.tv) {
                         scrollXClass += ' smoothScrollX';
                     }
@@ -154,14 +163,13 @@ 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 cardLayout = (appHost.preferVisualCards || supportsImageAnalysis) && section.autoCardLayout && section.showTitle;
+                let cardLayout = appHost.preferVisualCards && section.autoCardLayout && section.showTitle;
                 cardLayout = false;
                 html += cardBuilder.getCardsHtml(result.Items, {
                     preferThumb: section.preferThumb,
                     shape: section.shape,
                     centerText: section.centerText && !cardLayout,
-                    overlayText: false !== section.overlayText,
+                    overlayText: section.overlayText !== false,
                     showTitle: section.showTitle,
                     showParentTitle: section.showParentTitle,
                     scalable: true,
@@ -180,10 +188,10 @@ define(['loading', 'libraryBrowser', 'cardBuilder', 'dom', 'apphost', 'imageLoad
         });
     }
 
-    function loadSections(page, userId, topParentId, types) {
+    export function loadSections(page, userId, topParentId, types) {
         loading.show();
-        var sections = getSections();
-        var sectionid = getParameterByName('sectionid');
+        let sections = getSections();
+        const sectionid = getParameterByName('sectionid');
 
         if (sectionid) {
             sections = sections.filter(function (s) {
@@ -193,30 +201,28 @@ define(['loading', 'libraryBrowser', 'cardBuilder', 'dom', 'apphost', 'imageLoad
 
         if (types) {
             sections = sections.filter(function (s) {
-                return -1 !== types.indexOf(s.id);
+                return types.indexOf(s.id) !== -1;
             });
         }
 
-        var i;
-        var length;
-        var elem = page.querySelector('.favoriteSections');
+        let elem = page.querySelector('.favoriteSections');
 
         if (!elem.innerHTML) {
-            var html = '';
+            let html = '';
 
-            for (i = 0, length = sections.length; i < length; i++) {
+            for (let i = 0, length = sections.length; i < length; i++) {
                 html += '<div class="verticalSection section' + sections[i].id + '"></div>';
             }
 
             elem.innerHTML = html;
         }
 
-        var promises = [];
+        const promises = [];
 
-        for (i = 0, length = sections.length; i < length; i++) {
-            var section = sections[i];
+        for (let i = 0, length = sections.length; i < length; i++) {
+            const section = sections[i];
             elem = page.querySelector('.section' + section.id);
-            promises.push(loadSection(elem, userId, topParentId, section, 1 === sections.length));
+            promises.push(loadSection(elem, userId, topParentId, section, sections.length === 1));
         }
 
         Promise.all(promises).then(function () {
@@ -224,7 +230,8 @@ define(['loading', 'libraryBrowser', 'cardBuilder', 'dom', 'apphost', 'imageLoad
         });
     }
 
-    return {
-        render: loadSections
-    };
-});
+export default {
+    render: loadSections
+};
+
+/* eslint-enable indent */

src/components/fetchhelper.js

@@ -1,24 +1,20 @@
-define([], function () {
-    'use strict';
-
-    function getFetchPromise(request) {
-
-        var headers = request.headers || {};
+/* eslint-disable indent */
+    export function getFetchPromise(request) {
+        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) {
-
             if (typeof request.data === 'string') {
                 fetchRequest.body = request.data;
             } else {
@@ -29,16 +25,15 @@ define([], function () {
         }
 
         if (contentType) {
-
             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}`;
             }
         }
 
@@ -50,12 +45,10 @@ 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 +56,46 @@ 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');
         }
 
         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 +104,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/filedownloader.js

@@ -1,14 +0,0 @@
-import multiDownload from 'multi-download';
-
-export function download(items) {
-
-    if (window.NativeShell) {
-        items.map(function (item) {
-            window.NativeShell.downloadFile(item);
-        });
-    } else {
-        multiDownload(items.map(function (item) {
-            return item.url;
-        }));
-    }
-}

src/components/filterdialog/filterdialog.js

@@ -1,21 +1,28 @@
-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 '../../scripts/dom';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import globalize from '../../scripts/globalize';
+import { Events } from 'jellyfin-apiclient';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-collapse/emby-collapse';
+import './style.css';
+import ServerConnections from '../ServerConnections';
 
+/* eslint-disable indent */
     function renderOptions(context, selector, cssClass, items, isCheckedFn) {
-        var elem = context.querySelector(selector);
+        const elem = context.querySelector(selector);
         if (items.length) {
             elem.classList.remove('hide');
         } else {
             elem.classList.add('hide');
         }
-        var html = '';
+        let html = '';
         html += '<div class="checkboxList">';
         html += items.map(function (filter) {
-            var itemHtml = '';
-            var checkedHtml = isCheckedFn(filter) ? ' checked' : '';
+            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 += `<input is="emby-checkbox" type="checkbox" ${checkedHtml} data-filter="${filter}" class="${cssClass}"/>`;
+            itemHtml += `<span>${filter}</span>`;
             itemHtml += '</label>';
             return itemHtml;
         }).join('');
@@ -24,21 +31,24 @@ define(['dom', 'dialogHelper', 'globalize', 'connectionManager', 'events', 'brow
     }
 
     function renderFilters(context, result, query) {
+        if (result.Tags) {
+            result.Tags.length = Math.min(result.Tags.length, 50);
+        }
         renderOptions(context, '.genreFilters', 'chkGenreFilter', result.Genres, function (i) {
-            var delimeter = '|';
-            return (delimeter + (query.Genres || '') + delimeter).indexOf(delimeter + i + delimeter) != -1;
+            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;
+            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;
+            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;
+            const delimeter = ',';
+            return (delimeter + (query.Years || '') + delimeter).includes(delimeter + i + delimeter);
         });
     }
 
@@ -52,59 +62,58 @@ 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') {
+        if (options.mode === 'livetvchannels' || options.mode === 'albums' || options.mode === 'artists' || options.mode === 'albumartists' || options.mode === 'songs') {
             hideByClass(context, 'videoStandard');
         }
 
@@ -115,263 +124,287 @@ define(['dom', 'dialogHelper', 'globalize', 'connectionManager', 'events', 'brow
             context.querySelector('.yearFilters').classList.remove('hide');
         }
 
-        if (options.mode == 'movies' || options.mode == 'episodes') {
+        if (options.mode === 'movies' || options.mode === 'episodes') {
             context.querySelector('.videoTypeFilters').classList.remove('hide');
         }
 
-        if (options.mode == 'movies' || options.mode == 'series' || options.mode == 'episodes') {
+        if (options.mode === 'movies' || options.mode === 'series' || options.mode === 'episodes') {
             context.querySelector('.features').classList.remove('hide');
         }
 
-        if (options.mode == 'series') {
+        if (options.mode === 'series') {
             context.querySelector('.seriesStatus').classList.remove('hide');
         }
 
-        if (options.mode == 'episodes') {
+        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 = '|';
+                    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 = '|';
+                    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 = ',';
+                    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 = '|';
+                    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('./filterdialog.template.html').then(({default: template}) => {
+                return new Promise((resolve) => {
+                    const dlg = dialogHelper.createDialog({
                         removeOnClose: true,
                         modal: false
                     });
@@ -379,19 +412,22 @@ define(['dom', 'dialogHelper', 'globalize', 'connectionManager', 'events', 'brow
                     dlg.classList.add('background-theme-a');
                     dlg.classList.add('formDialog');
                     dlg.classList.add('filterDialog');
-                    dlg.innerHTML = globalize.translateDocument(template);
-                    setVisibility(dlg, options);
+                    dlg.innerHTML = globalize.translateHtml(template);
+                    setVisibility(dlg, this.options);
                     dialogHelper.open(dlg);
                     dlg.addEventListener('close', resolve);
-                    updateFilterControls(dlg, options);
-                    bindEvents(dlg);
-                    if (enableDynamicFilters(options.mode)) {
+                    updateFilterControls(dlg, this.options);
+                    this.bindEvents(dlg);
+                    if (enableDynamicFilters(this.options.mode)) {
                         dlg.classList.add('dynamicFilterDialog');
-                        var apiClient = connectionManager.getApiClient(options.serverId);
-                        loadDynamicFilters(dlg, apiClient, apiClient.getCurrentUserId(), options.query);
+                        const apiClient = ServerConnections.getApiClient(this.options.serverId);
+                        loadDynamicFilters(dlg, apiClient, apiClient.getCurrentUserId(), this.options.query);
                     }
                 });
             });
-        };
-    };
-});
+        }
+    }
+
+/* eslint-enable indent */
+
+export default FilterDialog;

src/components/filterdialog/filterdialog.template.html

@@ -1,17 +1,17 @@
 <div style="margin: 0;padding:1.5em 2em;" class="filterDialogContent">
 
-    <div is="emby-collapse" title="${HeaderFilters}">
+    <div is="emby-collapse" title="${Filters}">
         <div class="collapseContent">
             <div class="checkboxList">
                 <label>
                     <input type="checkbox" is="emby-checkbox" class="chkStandardFilter videoStandard"
                         data-filter="IsPlayed" />
-                    <span>${OptionPlayed}</span>
+                    <span>${Played}</span>
                 </label>
                 <label>
                     <input type="checkbox" is="emby-checkbox" class="chkStandardFilter videoStandard"
                         data-filter="IsUnPlayed" />
-                    <span>${OptionUnplayed}</span>
+                    <span>${Unplayed}</span>
                 </label>
                 <label>
                     <input type="checkbox" is="emby-checkbox" class="chkStandardFilter videoStandard"
@@ -21,7 +21,7 @@
                 <label>
                     <input type="checkbox" is="emby-checkbox" class="chkStandardFilter chkFavorite"
                         data-filter="IsFavorite" />
-                    <span>${OptionFavorite}</span>
+                    <span>${Favorites}</span>
                 </label>
                 <label>
                     <input type="checkbox" is="emby-checkbox" class="chkStandardFilter chkLikes" data-filter="Likes" />
@@ -53,30 +53,30 @@
             <div class="checkboxList">
                 <label>
                     <input type="checkbox" is="emby-checkbox" class="chkStatus" data-filter="Continuing" />
-                    <span>${OptionContinuing}</span>
+                    <span>${Continuing}</span>
                 </label>
                 <label>
                     <input type="checkbox" is="emby-checkbox" class="chkStatus" data-filter="Ended" />
-                    <span>${OptionEnded}</span>
+                    <span>${Ended}</span>
                 </label>
             </div>
         </div>
     </div>
 
-    <div is="emby-collapse" title="${HeaderFeatures}" class="features hide">
+    <div is="emby-collapse" title="${Features}" class="features hide">
         <div class="collapseContent">
             <div class="checkboxList">
                 <label>
                     <input type="checkbox" is="emby-checkbox" class="chkFeatureFilter" id="chkSubtitle" />
-                    <span>${OptionHasSubtitles}</span>
+                    <span>${Subtitles}</span>
                 </label>
                 <label>
                     <input type="checkbox" is="emby-checkbox" class="chkFeatureFilter" id="chkTrailer" />
-                    <span>${OptionHasTrailer}</span>
+                    <span>${ButtonTrailer}</span>
                 </label>
                 <label>
                     <input type="checkbox" is="emby-checkbox" class="chkFeatureFilter" id="chkSpecialFeature" />
-                    <span>${OptionHasSpecialFeatures}</span>
+                    <span>${SpecialFeatures}</span>
                 </label>
                 <label>
                     <input type="checkbox" is="emby-checkbox" class="chkFeatureFilter" id="chkThemeSong" />
@@ -90,7 +90,7 @@
         </div>
     </div>
 
-    <div is="emby-collapse" title="${HeaderGenres}" class="genreFilters hide">
+    <div is="emby-collapse" title="${Genres}" class="genreFilters hide">
         <div class="collapseContent filterOptions">
         </div>
     </div>
@@ -100,7 +100,7 @@
         </div>
     </div>
 
-    <div is="emby-collapse" title="${HeaderTags}" class="tagFilters hide">
+    <div is="emby-collapse" title="${Tags}" class="tagFilters hide">
         <div class="collapseContent filterOptions">
         </div>
     </div>

src/components/filtermenu/filtermenu.js

@@ -1,282 +1,231 @@
-define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost', 'inputManager', 'layoutManager', 'connectionManager', 'appRouter', 'globalize', 'userSettings', 'emby-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button', 'flexStyles'], function (require, dom, focusManager, dialogHelper, loading, appHost, inputManager, layoutManager, connectionManager, appRouter, globalize, userSettings) {
-    'use strict';
+import dom from '../../scripts/dom';
+import focusManager from '../focusManager';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import inputManager from '../../scripts/inputManager';
+import layoutManager from '../layoutManager';
+import globalize from '../../scripts/globalize';
+import * as userSettings from '../../scripts/settings/userSettings';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-input/emby-input';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-select/emby-select';
+import 'material-design-icons-iconfont';
+import '../formdialog.css';
+import '../../assets/css/flexstyles.scss';
+import ServerConnections from '../ServerConnections';
 
-    function onSubmit(e) {
+function onSubmit(e) {
+    e.preventDefault();
+    return false;
+}
+function renderOptions(context, selector, cssClass, items, isCheckedFn) {
+    const elem = context.querySelector(selector);
 
-        e.preventDefault();
-        return false;
+    if (items.length) {
+        elem.classList.remove('hide');
+    } else {
+        elem.classList.add('hide');
     }
 
-    function renderOptions(context, selector, cssClass, items, isCheckedFn) {
+    let html = '';
 
-        var elem = context.querySelector(selector);
+    html += items.map(function (filter) {
+        let itemHtml = '';
 
-        if (items.length) {
+        const checkedHtml = isCheckedFn(filter) ? ' checked' : '';
+        itemHtml += '<label>';
+        itemHtml += '<input is="emby-checkbox" type="checkbox"' + checkedHtml + ' data-filter="' + filter.Id + '" class="' + cssClass + '"/>';
+        itemHtml += '<span>' + filter.Name + '</span>';
+        itemHtml += '</label>';
 
-            elem.classList.remove('hide');
+        return itemHtml;
+    }).join('');
 
+    elem.querySelector('.filterOptions').innerHTML = html;
+}
+
+function renderDynamicFilters(context, result, options) {
+    renderOptions(context, '.genreFilters', 'chkGenreFilter', result.Genres, function (i) {
+        // Switching from | to ,
+        const delimeter = (options.settings.GenreIds || '').indexOf('|') === -1 ? ',' : '|';
+        return (delimeter + (options.settings.GenreIds || '') + delimeter).indexOf(delimeter + i.Id + delimeter) !== -1;
+    });
+}
+
+function setBasicFilter(context, key, elem) {
+    let value = elem.checked;
+    value = value ? value : null;
+    userSettings.setFilter(key, value);
+}
+function moveCheckboxFocus(elem, offset) {
+    const parent = dom.parentWithClass(elem, 'checkboxList-verticalwrap');
+    const elems = focusManager.getFocusableElements(parent);
+
+    let index = -1;
+    for (let i = 0, length = elems.length; i < length; i++) {
+        if (elems[i] === elem) {
+            index = i;
+            break;
+        }
+    }
+
+    index += offset;
+
+    index = Math.min(elems.length - 1, index);
+    index = Math.max(0, index);
+
+    const newElem = elems[index];
+    if (newElem) {
+        focusManager.focus(newElem);
+    }
+}
+function centerFocus(elem, horiz, on) {
+    import('../../scripts/scrollHelper').then((scrollHelper) => {
+        const fn = on ? 'on' : 'off';
+        scrollHelper.centerFocus[fn](elem, horiz);
+    });
+}
+function onInputCommand(e) {
+    switch (e.detail.command) {
+        case 'left':
+            moveCheckboxFocus(e.target, -1);
+            e.preventDefault();
+            break;
+        case 'right':
+            moveCheckboxFocus(e.target, 1);
+            e.preventDefault();
+            break;
+        default:
+            break;
+    }
+}
+function saveValues(context, settings, settingsKey) {
+    let elems = context.querySelectorAll('.simpleFilter');
+    for (let i = 0, length = elems.length; i < length; i++) {
+        if (elems[i].tagName === 'INPUT') {
+            setBasicFilter(context, settingsKey + '-filter-' + elems[i].getAttribute('data-settingname'), elems[i]);
         } else {
-            elem.classList.add('hide');
+            setBasicFilter(context, settingsKey + '-filter-' + elems[i].getAttribute('data-settingname'), elems[i].querySelector('input'));
         }
-
-        var html = '';
-
-        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.Id + '" class="' + cssClass + '"/>';
-            itemHtml += '<span>' + filter.Name + '</span>';
-            itemHtml += '</label>';
-
-            return itemHtml;
-
-        }).join('');
-
-        elem.querySelector('.filterOptions').innerHTML = html;
     }
 
-    function renderDynamicFilters(context, result, options) {
+    // Video type
+    const videoTypes = [];
+    elems = context.querySelectorAll('.chkVideoTypeFilter');
 
-        // If there's a huge number of these they will be really show to render
-        //if (result.Tags) {
-        //    result.Tags.length = Math.min(result.Tags.length, 50);
-        //}
+    for (let i = 0, length = elems.length; i < length; i++) {
+        if (elems[i].checked) {
+            videoTypes.push(elems[i].getAttribute('data-filter'));
+        }
+    }
+    userSettings.setFilter(settingsKey + '-filter-VideoTypes', videoTypes.join(','));
 
-        renderOptions(context, '.genreFilters', 'chkGenreFilter', result.Genres, function (i) {
+    // Series status
+    const seriesStatuses = [];
+    elems = context.querySelectorAll('.chkSeriesStatus');
 
-            // Switching from | to ,
-            var delimeter = (options.settings.GenreIds || '').indexOf('|') === -1 ? ',' : '|';
-            return (delimeter + (options.settings.GenreIds || '') + delimeter).indexOf(delimeter + i.Id + delimeter) !== -1;
-        });
-
-        //renderOptions(context, '.officialRatingFilters', 'chkOfficialRatingFilter', result.OfficialRatings, function (i) {
-        //    var delimeter = '|';
-        //    return (delimeter + (query.OfficialRatings || '') + delimeter).indexOf(delimeter + i + delimeter) != -1;
-        //});
-
-        //renderOptions(context, '.tagFilters', 'chkTagFilter', result.Tags, function (i) {
-        //    var delimeter = '|';
-        //    return (delimeter + (query.Tags || '') + delimeter).indexOf(delimeter + i + delimeter) != -1;
-        //});
-
-        //renderOptions(context, '.yearFilters', 'chkYearFilter', result.Years, function (i) {
-
-        //    var delimeter = ',';
-        //    return (delimeter + (query.Years || '') + delimeter).indexOf(delimeter + i + delimeter) != -1;
-        //});
+    for (let i = 0, length = elems.length; i < length; i++) {
+        if (elems[i].checked) {
+            seriesStatuses.push(elems[i].getAttribute('data-filter'));
+        }
     }
 
-    function loadDynamicFilters(context, options) {
+    // Genres
+    const genres = [];
+    elems = context.querySelectorAll('.chkGenreFilter');
 
-        var apiClient = connectionManager.getApiClient(options.serverId);
-
-        var filterMenuOptions = Object.assign(options.filterMenuOptions, {
-
-            UserId: apiClient.getCurrentUserId(),
-            ParentId: options.parentId,
-            IncludeItemTypes: options.itemTypes.join(',')
-        });
-
-        apiClient.getFilters(filterMenuOptions).then(function (result) {
-
-            renderDynamicFilters(context, result, options);
-        }, function () {
-
-            // older server
-        });
+    for (let i = 0, length = elems.length; i < length; i++) {
+        if (elems[i].checked) {
+            genres.push(elems[i].getAttribute('data-filter'));
+        }
     }
-
-    function initEditor(context, settings) {
-
-        context.querySelector('form').addEventListener('submit', onSubmit);
-
-        var elems = context.querySelectorAll('.simpleFilter');
-        var i;
-        var length;
-
-        for (i = 0, length = elems.length; i < length; i++) {
-
-            if (elems[i].tagName === 'INPUT') {
-                elems[i].checked = settings[elems[i].getAttribute('data-settingname')] || false;
-            } else {
-                elems[i].querySelector('input').checked = settings[elems[i].getAttribute('data-settingname')] || false;
-            }
-        }
-
-        var videoTypes = settings.VideoTypes ? settings.VideoTypes.split(',') : [];
-        elems = context.querySelectorAll('.chkVideoTypeFilter');
-
-        for (i = 0, length = elems.length; i < length; i++) {
-
-            elems[i].checked = videoTypes.indexOf(elems[i].getAttribute('data-filter')) !== -1;
-        }
-
-        var seriesStatuses = settings.SeriesStatus ? settings.SeriesStatus.split(',') : [];
-        elems = context.querySelectorAll('.chkSeriesStatus');
-
-        for (i = 0, length = elems.length; i < length; i++) {
-
-            elems[i].checked = seriesStatuses.indexOf(elems[i].getAttribute('data-filter')) !== -1;
-        }
-
-        if (context.querySelector('.basicFilterSection .viewSetting:not(.hide)')) {
-            context.querySelector('.basicFilterSection').classList.remove('hide');
+    userSettings.setFilter(settingsKey + '-filter-GenreIds', genres.join(','));
+}
+function bindCheckboxInput(context, on) {
+    const elems = context.querySelectorAll('.checkboxList-verticalwrap');
+    for (let i = 0, length = elems.length; i < length; i++) {
+        if (on) {
+            inputManager.on(elems[i], onInputCommand);
         } else {
-            context.querySelector('.basicFilterSection').classList.add('hide');
+            inputManager.off(elems[i], onInputCommand);
         }
+    }
+}
+function initEditor(context, settings) {
+    context.querySelector('form').addEventListener('submit', onSubmit);
 
-        if (context.querySelector('.featureSection .viewSetting:not(.hide)')) {
-            context.querySelector('.featureSection').classList.remove('hide');
+    let elems = context.querySelectorAll('.simpleFilter');
+    let i;
+    let length;
+
+    for (i = 0, length = elems.length; i < length; i++) {
+        if (elems[i].tagName === 'INPUT') {
+            elems[i].checked = settings[elems[i].getAttribute('data-settingname')] || false;
         } else {
-            context.querySelector('.featureSection').classList.add('hide');
+            elems[i].querySelector('input').checked = settings[elems[i].getAttribute('data-settingname')] || false;
         }
     }
 
-    function saveValues(context, settings, settingsKey) {
+    const videoTypes = settings.VideoTypes ? settings.VideoTypes.split(',') : [];
+    elems = context.querySelectorAll('.chkVideoTypeFilter');
 
-        var elems = context.querySelectorAll('.simpleFilter');
-        var i;
-        var length;
-        for (i = 0, length = elems.length; i < length; i++) {
-
-            if (elems[i].tagName === 'INPUT') {
-                setBasicFilter(context, settingsKey + '-filter-' + elems[i].getAttribute('data-settingname'), elems[i]);
-            } else {
-                setBasicFilter(context, settingsKey + '-filter-' + elems[i].getAttribute('data-settingname'), elems[i].querySelector('input'));
-            }
-        }
-
-        // Video type
-        var videoTypes = [];
-        elems = context.querySelectorAll('.chkVideoTypeFilter');
-
-        for (i = 0, length = elems.length; i < length; i++) {
-
-            if (elems[i].checked) {
-                videoTypes.push(elems[i].getAttribute('data-filter'));
-            }
-        }
-        userSettings.setFilter(settingsKey + '-filter-VideoTypes', videoTypes.join(','));
-
-        // Series status
-        var seriesStatuses = [];
-        elems = context.querySelectorAll('.chkSeriesStatus');
-
-        for (i = 0, length = elems.length; i < length; i++) {
-
-            if (elems[i].checked) {
-                seriesStatuses.push(elems[i].getAttribute('data-filter'));
-            }
-        }
-
-        // Genres
-        var genres = [];
-        elems = context.querySelectorAll('.chkGenreFilter');
-
-        for (i = 0, length = elems.length; i < length; i++) {
-
-            if (elems[i].checked) {
-                genres.push(elems[i].getAttribute('data-filter'));
-            }
-        }
-        userSettings.setFilter(settingsKey + '-filter-GenreIds', genres.join(','));
+    for (i = 0, length = elems.length; i < length; i++) {
+        elems[i].checked = videoTypes.indexOf(elems[i].getAttribute('data-filter')) !== -1;
     }
 
-    function setBasicFilter(context, key, elem) {
+    const seriesStatuses = settings.SeriesStatus ? settings.SeriesStatus.split(',') : [];
+    elems = context.querySelectorAll('.chkSeriesStatus');
 
-        var value = elem.checked;
-        value = value ? value : null;
-        userSettings.setFilter(key, value);
+    for (i = 0, length = elems.length; i < length; i++) {
+        elems[i].checked = seriesStatuses.indexOf(elems[i].getAttribute('data-filter')) !== -1;
     }
 
-    function centerFocus(elem, horiz, on) {
-        require(['scrollHelper'], function (scrollHelper) {
-            var fn = on ? 'on' : 'off';
-            scrollHelper.centerFocus[fn](elem, horiz);
-        });
+    if (context.querySelector('.basicFilterSection .viewSetting:not(.hide)')) {
+        context.querySelector('.basicFilterSection').classList.remove('hide');
+    } else {
+        context.querySelector('.basicFilterSection').classList.add('hide');
     }
 
-    function moveCheckboxFocus(elem, offset) {
-
-        var parent = dom.parentWithClass(elem, 'checkboxList-verticalwrap');
-        var elems = focusManager.getFocusableElements(parent);
-
-        var index = -1;
-        for (var i = 0, length = elems.length; i < length; i++) {
-            if (elems[i] === elem) {
-                index = i;
-                break;
-            }
-        }
-
-        index += offset;
-
-        index = Math.min(elems.length - 1, index);
-        index = Math.max(0, index);
-
-        var newElem = elems[index];
-        if (newElem) {
-            focusManager.focus(newElem);
-        }
+    if (context.querySelector('.featureSection .viewSetting:not(.hide)')) {
+        context.querySelector('.featureSection').classList.remove('hide');
+    } else {
+        context.querySelector('.featureSection').classList.add('hide');
     }
+}
+function loadDynamicFilters(context, options) {
+    const apiClient = ServerConnections.getApiClient(options.serverId);
 
-    function onInputCommand(e) {
-        switch (e.detail.command) {
+    const filterMenuOptions = Object.assign(options.filterMenuOptions, {
 
-            case 'left':
-                moveCheckboxFocus(e.target, -1);
-                e.preventDefault();
-                break;
-            case 'right':
-                moveCheckboxFocus(e.target, 1);
-                e.preventDefault();
-                break;
-            default:
-                break;
-        }
-    }
+        UserId: apiClient.getCurrentUserId(),
+        ParentId: options.parentId,
+        IncludeItemTypes: options.itemTypes.join(',')
+    });
 
-    function FilterMenu() {
-
-    }
-
-    function bindCheckboxInput(context, on) {
-
-        var elems = context.querySelectorAll('.checkboxList-verticalwrap');
-        for (var i = 0, length = elems.length; i < length; i++) {
-            if (on) {
-                inputManager.on(elems[i], onInputCommand);
-            } else {
-                inputManager.off(elems[i], onInputCommand);
-            }
-        }
-    }
-
-    FilterMenu.prototype.show = function (options) {
-
-        return new Promise(function (resolve, reject) {
-
-            require(['text!./filtermenu.template.html'], function (template) {
-
-                var dialogOptions = {
+    apiClient.getFilters(filterMenuOptions).then((result) => {
+        renderDynamicFilters(context, result, options);
+    });
+}
+class FilterMenu {
+    show(options) {
+        return new Promise( (resolve, reject) => {
+            import('./filtermenu.template.html').then(({ default: template }) => {
+                const dialogOptions = {
                     removeOnClose: true,
                     scrollY: false
                 };
-
                 if (layoutManager.tv) {
                     dialogOptions.size = 'fullscreen';
                 } else {
                     dialogOptions.size = 'small';
                 }
 
-                var dlg = dialogHelper.createDialog(dialogOptions);
+                const dlg = dialogHelper.createDialog(dialogOptions);
 
                 dlg.classList.add('formDialog');
 
-                var html = '';
+                let html = '';
 
                 html += '<div class="formDialogHeader">';
                 html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
@@ -286,10 +235,10 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
 
                 html += template;
 
-                dlg.innerHTML = globalize.translateDocument(html, 'core');
+                dlg.innerHTML = globalize.translateHtml(html, 'core');
 
-                var settingElements = dlg.querySelectorAll('.viewSetting');
-                for (var i = 0, length = settingElements.length; i < length; i++) {
+                const settingElements = dlg.querySelectorAll('.viewSetting');
+                for (let i = 0, length = settingElements.length; i < length; i++) {
                     if (options.visibleSettings.indexOf(settingElements[i].getAttribute('data-settingname')) === -1) {
                         settingElements[i].classList.add('hide');
                     } else {
@@ -301,9 +250,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
                 loadDynamicFilters(dlg, options);
 
                 bindCheckboxInput(dlg, true);
-
                 dlg.querySelector('.btnCancel').addEventListener('click', function () {
-
                     dialogHelper.close(dlg);
                 });
 
@@ -311,20 +258,13 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
                     centerFocus(dlg.querySelector('.formDialogContent'), false, true);
                 }
 
-                var submitted;
+                let submitted;
 
                 dlg.querySelector('form').addEventListener('change', function () {
-
                     submitted = true;
-                    //if (options.onChange) {
-                    //    saveValues(dlg, options.settings, options.settingsKey);
-                    //    options.onChange();
-                    //}
-
                 }, true);
 
-                dialogHelper.open(dlg).then(function () {
-
+                dialogHelper.open(dlg).then( function() {
                     bindCheckboxInput(dlg, false);
 
                     if (layoutManager.tv) {
@@ -332,19 +272,16 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
                     }
 
                     if (submitted) {
-
                         //if (!options.onChange) {
                         saveValues(dlg, options.settings, options.settingsKey);
-                        resolve();
+                        return resolve();
                         //}
-                        return;
                     }
-
-                    reject();
+                    return resolve();
                 });
             });
         });
-    };
+    }
+}
 
-    return FilterMenu;
-});
+export default FilterMenu;

src/components/focusManager.js

@@ -1,21 +1,21 @@
-define(['dom', 'scrollManager'], function (dom, scrollManager) {
-    'use strict';
+/* eslint-disable indent */
 
-    var scopes = [];
+import dom from '../scripts/dom';
+import scrollManager from './scrollManager';
+
+    const scopes = [];
     function pushScope(elem) {
         scopes.push(elem);
     }
 
     function popScope(elem) {
-
         if (scopes.length) {
             scopes.length -= 1;
         }
     }
 
     function autoFocus(view, defaultToFirst, findAutoFocusElement) {
-
-        var element;
+        let element;
         if (findAutoFocusElement !== false) {
             element = view.querySelector('*[autofocus]');
             if (element) {
@@ -37,7 +37,6 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
     }
 
     function focus(element) {
-
         try {
             element.focus({
                 preventScroll: scrollManager.isEnabled()
@@ -47,19 +46,16 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
         }
     }
 
-    var focusableTagNames = ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON', 'A'];
-    var focusableContainerTagNames = ['BODY', 'DIALOG'];
-    var focusableQuery = focusableTagNames.map(function (t) {
-
+    const focusableTagNames = ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON', 'A'];
+    const focusableContainerTagNames = ['BODY', 'DIALOG'];
+    const focusableQuery = focusableTagNames.map(function (t) {
         if (t === 'INPUT') {
             t += ':not([type="range"]):not([type="file"])';
         }
         return t + ':not([tabindex="-1"]):not(:disabled)';
-
     }).join(',') + ',.focusable';
 
     function isFocusable(elem) {
-
         if (focusableTagNames.indexOf(elem.tagName) !== -1) {
             return true;
         }
@@ -73,7 +69,7 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
 
     function normalizeFocusable(elem, originalElement) {
         if (elem) {
-            var tagName = elem.tagName;
+            const tagName = elem.tagName;
             if (!tagName || tagName === 'HTML' || tagName === 'BODY') {
                 elem = originalElement;
             }
@@ -83,11 +79,10 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
     }
 
     function focusableParent(elem) {
-
-        var originalElement = elem;
+        const originalElement = elem;
 
         while (!isFocusable(elem)) {
-            var parent = elem.parentNode;
+            const parent = elem.parentNode;
 
             if (!parent) {
                 return normalizeFocusable(elem, originalElement);
@@ -101,7 +96,6 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
 
     // Determines if a focusable element can be focused at a given point in time
     function isCurrentlyFocusableInternal(elem) {
-
         // http://stackoverflow.com/questions/19669786/check-if-element-is-visible-in-dom
         if (elem.offsetParent === null) {
             return false;
@@ -112,7 +106,6 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
 
     // Determines if a focusable element can be focused at a given point in time
     function isCurrentlyFocusable(elem) {
-
         if (elem.disabled) {
             return false;
         }
@@ -122,7 +115,7 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
         }
 
         if (elem.tagName === 'INPUT') {
-            var type = elem.type;
+            const type = elem.type;
             if (type === 'range') {
                 return false;
             }
@@ -139,12 +132,11 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
     }
 
     function getFocusableElements(parent, limit, excludeClass) {
-        var elems = (parent || getDefaultScope()).querySelectorAll(focusableQuery);
-        var focusableElements = [];
+        const elems = (parent || getDefaultScope()).querySelectorAll(focusableQuery);
+        const focusableElements = [];
 
-        for (var i = 0, length = elems.length; i < length; i++) {
-
-            var elem = elems[i];
+        for (let i = 0, length = elems.length; i < length; i++) {
+            const elem = elems[i];
 
             if (excludeClass && elem.classList.contains(excludeClass)) {
                 continue;
@@ -163,12 +155,11 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
     }
 
     function isFocusContainer(elem, direction) {
-
         if (focusableContainerTagNames.indexOf(elem.tagName) !== -1) {
             return true;
         }
 
-        var classList = elem.classList;
+        const classList = elem.classList;
 
         if (classList.contains('focuscontainer')) {
             return true;
@@ -217,8 +208,7 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
     }
 
     function getOffset(elem) {
-
-        var box;
+        let box;
 
         // Support: BlackBerry 5, iOS 3 (original iPhone)
         // If we don't have gBCR, just use 0,0 rather than error
@@ -234,9 +224,8 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
         }
 
         if (box.right === null) {
-
             // Create a new object because some browsers will throw an error when trying to set data onto the Rect object
-            var newBox = {
+            const newBox = {
                 top: box.top,
                 left: box.left,
                 width: box.width,
@@ -253,7 +242,6 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
     }
 
     function nav(activeElement, direction, container, focusableElements) {
-
         activeElement = activeElement || document.activeElement;
 
         if (activeElement) {
@@ -267,31 +255,27 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
             return;
         }
 
-        var focusableContainer = dom.parentWithClass(activeElement, 'focusable');
+        const focusableContainer = dom.parentWithClass(activeElement, 'focusable');
 
-        var rect = getOffset(activeElement);
+        const rect = getOffset(activeElement);
 
         // Get elements and work out x/y points
-        var cache = [];
-        var point1x = parseFloat(rect.left) || 0;
-        var point1y = parseFloat(rect.top) || 0;
-        var point2x = parseFloat(point1x + rect.width - 1) || point1x;
-        var point2y = parseFloat(point1y + rect.height - 1) || point1y;
-        // Shortcuts to help with compression
-        var min = Math.min;
-        var max = Math.max;
+        const point1x = parseFloat(rect.left) || 0;
+        const point1y = parseFloat(rect.top) || 0;
+        const point2x = parseFloat(point1x + rect.width - 1) || point1x;
+        const point2y = parseFloat(point1y + rect.height - 1) || point1y;
 
-        var sourceMidX = rect.left + (rect.width / 2);
-        var sourceMidY = rect.top + (rect.height / 2);
+        const sourceMidX = rect.left + (rect.width / 2);
+        const sourceMidY = rect.top + (rect.height / 2);
 
-        var focusable = focusableElements || container.querySelectorAll(focusableQuery);
+        const focusable = focusableElements || container.querySelectorAll(focusableQuery);
 
-        var maxDistance = Infinity;
-        var minDistance = maxDistance;
-        var nearestElement;
+        const maxDistance = Infinity;
+        let minDistance = maxDistance;
+        let nearestElement;
 
-        for (var i = 0, length = focusable.length; i < length; i++) {
-            var curr = focusable[i];
+        for (let i = 0, length = focusable.length; i < length; i++) {
+            const curr = focusable[i];
 
             if (curr === activeElement) {
                 continue;
@@ -301,11 +285,7 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
                 continue;
             }
 
-            //if (!isCurrentlyFocusableInternal(curr)) {
-            //    continue;
-            //}
-
-            var elementRect = getOffset(curr);
+            const elementRect = getOffset(curr);
 
             // not currently visible
             if (!elementRect.width && !elementRect.height) {
@@ -313,7 +293,6 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
             }
 
             switch (direction) {
-
                 case 0:
                     // left
                     if (elementRect.left >= rect.left) {
@@ -354,22 +333,21 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
                     break;
             }
 
-            var x = elementRect.left;
-            var y = elementRect.top;
-            var x2 = x + elementRect.width - 1;
-            var y2 = y + elementRect.height - 1;
+            const x = elementRect.left;
+            const y = elementRect.top;
+            const x2 = x + elementRect.width - 1;
+            const y2 = y + elementRect.height - 1;
 
-            var intersectX = intersects(point1x, point2x, x, x2);
-            var intersectY = intersects(point1y, point2y, y, y2);
+            const intersectX = intersects(point1x, point2x, x, x2);
+            const intersectY = intersects(point1y, point2y, y, y2);
 
-            var midX = elementRect.left + (elementRect.width / 2);
-            var midY = elementRect.top + (elementRect.height / 2);
+            const midX = elementRect.left + (elementRect.width / 2);
+            const midY = elementRect.top + (elementRect.height / 2);
 
-            var distX;
-            var distY;
+            let distX;
+            let distY;
 
             switch (direction) {
-
                 case 0:
                     // left
                     distX = Math.abs(point1x - Math.min(point1x, x2));
@@ -394,7 +372,7 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
                     break;
             }
 
-            var dist = Math.sqrt(distX * distX + distY * distY);
+            const dist = Math.sqrt(distX * distX + distY * distY);
 
             if (dist < minDistance) {
                 nearestElement = curr;
@@ -403,10 +381,9 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
         }
 
         if (nearestElement) {
-
             // See if there's a focusable container, and if so, send the focus command to that
             if (activeElement) {
-                var nearestElementFocusableParent = dom.parentWithClass(nearestElement, 'focusable');
+                const nearestElementFocusableParent = dom.parentWithClass(nearestElement, 'focusable');
                 if (nearestElementFocusableParent && nearestElementFocusableParent !== nearestElement) {
                     if (focusableContainer !== nearestElementFocusableParent) {
                         nearestElement = nearestElementFocusableParent;
@@ -418,28 +395,24 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
     }
 
     function intersectsInternal(a1, a2, b1, b2) {
-
         return (b1 >= a1 && b1 <= a2) || (b2 >= a1 && b2 <= a2);
     }
 
     function intersects(a1, a2, b1, b2) {
-
         return intersectsInternal(a1, a2, b1, b2) || intersectsInternal(b1, b2, a1, a2);
     }
 
     function sendText(text) {
-        var elem = document.activeElement;
+        const elem = document.activeElement;
 
         elem.value = text;
     }
 
     function focusFirst(container, focusableSelector) {
+        const elems = container.querySelectorAll(focusableSelector);
 
-        var elems = container.querySelectorAll(focusableSelector);
-
-        for (var i = 0, length = elems.length; i < length; i++) {
-
-            var elem = elems[i];
+        for (let i = 0, length = elems.length; i < length; i++) {
+            const elem = elems[i];
 
             if (isCurrentlyFocusableInternal(elem)) {
                 focus(elem);
@@ -449,12 +422,10 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
     }
 
     function focusLast(container, focusableSelector) {
+        const elems = [].slice.call(container.querySelectorAll(focusableSelector), 0).reverse();
 
-        var elems = [].slice.call(container.querySelectorAll(focusableSelector), 0).reverse();
-
-        for (var i = 0, length = elems.length; i < length; i++) {
-
-            var elem = elems[i];
+        for (let i = 0, length = elems.length; i < length; i++) {
+            const elem = elems[i];
 
             if (isCurrentlyFocusableInternal(elem)) {
                 focus(elem);
@@ -464,15 +435,13 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
     }
 
     function moveFocus(sourceElement, container, focusableSelector, offset) {
-
-        var elems = container.querySelectorAll(focusableSelector);
-        var list = [];
-        var i;
-        var length;
-        var elem;
+        const elems = container.querySelectorAll(focusableSelector);
+        const list = [];
+        let i;
+        let length;
+        let elem;
 
         for (i = 0, length = elems.length; i < length; i++) {
-
             elem = elems[i];
 
             if (isCurrentlyFocusableInternal(elem)) {
@@ -480,10 +449,9 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
             }
         }
 
-        var currentIndex = -1;
+        let currentIndex = -1;
 
         for (i = 0, length = list.length; i < length; i++) {
-
             elem = list[i];
 
             if (sourceElement === elem || elem.contains(sourceElement)) {
@@ -496,47 +464,48 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
             return;
         }
 
-        var newIndex = currentIndex + offset;
+        let newIndex = currentIndex + offset;
         newIndex = Math.max(0, newIndex);
         newIndex = Math.min(newIndex, list.length - 1);
 
-        var newElem = list[newIndex];
+        const newElem = list[newIndex];
         if (newElem) {
             focus(newElem);
         }
     }
 
-    return {
-        autoFocus: autoFocus,
-        focus: focus,
-        focusableParent: focusableParent,
-        getFocusableElements: getFocusableElements,
-        moveLeft: function (sourceElement, options) {
-            var container = options ? options.container : null;
-            var focusableElements = options ? options.focusableElements : null;
-            nav(sourceElement, 0, container, focusableElements);
-        },
-        moveRight: function (sourceElement, options) {
-            var container = options ? options.container : null;
-            var focusableElements = options ? options.focusableElements : null;
-            nav(sourceElement, 1, container, focusableElements);
-        },
-        moveUp: function (sourceElement, options) {
-            var container = options ? options.container : null;
-            var focusableElements = options ? options.focusableElements : null;
-            nav(sourceElement, 2, container, focusableElements);
-        },
-        moveDown: function (sourceElement, options) {
-            var container = options ? options.container : null;
-            var focusableElements = options ? options.focusableElements : null;
-            nav(sourceElement, 3, container, focusableElements);
-        },
-        sendText: sendText,
-        isCurrentlyFocusable: isCurrentlyFocusable,
-        pushScope: pushScope,
-        popScope: popScope,
-        focusFirst: focusFirst,
-        focusLast: focusLast,
-        moveFocus: moveFocus
-    };
-});
+/* eslint-enable indent */
+
+export default {
+    autoFocus: autoFocus,
+    focus: focus,
+    focusableParent: focusableParent,
+    getFocusableElements: getFocusableElements,
+    moveLeft: function (sourceElement, options) {
+        const container = options ? options.container : null;
+        const focusableElements = options ? options.focusableElements : null;
+        nav(sourceElement, 0, container, focusableElements);
+    },
+    moveRight: function (sourceElement, options) {
+        const container = options ? options.container : null;
+        const focusableElements = options ? options.focusableElements : null;
+        nav(sourceElement, 1, container, focusableElements);
+    },
+    moveUp: function (sourceElement, options) {
+        const container = options ? options.container : null;
+        const focusableElements = options ? options.focusableElements : null;
+        nav(sourceElement, 2, container, focusableElements);
+    },
+    moveDown: function (sourceElement, options) {
+        const container = options ? options.container : null;
+        const focusableElements = options ? options.focusableElements : null;
+        nav(sourceElement, 3, container, focusableElements);
+    },
+    sendText: sendText,
+    isCurrentlyFocusable: isCurrentlyFocusable,
+    pushScope: pushScope,
+    popScope: popScope,
+    focusFirst: focusFirst,
+    focusLast: focusLast,
+    moveFocus: moveFocus
+};

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: center;
+    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/groupedcards.js

@@ -1,28 +1,32 @@
-define(['dom', 'appRouter', 'connectionManager'], function (dom, appRouter, connectionManager) {
-    'use strict';
+/* eslint-disable indent */
+
+import dom from '../scripts/dom';
+import { appRouter } from './appRouter';
+import Dashboard from '../scripts/clientUtils';
+import ServerConnections from './ServerConnections';
 
     function onGroupedCardClick(e, card) {
-        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 playedIndicatorHtml = playedIndicator ? playedIndicator.innerHTML : null;
-        var options = {
+        const itemId = card.getAttribute('data-id');
+        const serverId = card.getAttribute('data-serverid');
+        const apiClient = ServerConnections.getApiClient(serverId);
+        const userId = apiClient.getCurrentUserId();
+        const playedIndicator = card.querySelector('.playedIndicator');
+        const playedIndicatorHtml = playedIndicator ? playedIndicator.innerHTML : null;
+        const options = {
             Limit: parseInt(playedIndicatorHtml || '10'),
             Fields: 'PrimaryImageAspectRatio,DateCreated',
             ParentId: itemId,
             GroupItems: false
         };
-        var actionableParent = dom.parentWithTag(e.target, ['A', 'BUTTON', 'INPUT']);
+        const 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 (1 === items.length) {
+                if (items.length === 1) {
                     return void appRouter.showItem(items[0]);
                 }
 
-                var url = 'itemdetails.html?id=' + itemId + '&serverId=' + serverId;
+                const url = 'details?id=' + itemId + '&serverId=' + serverId;
                 Dashboard.navigate(url);
             });
             e.stopPropagation();
@@ -31,15 +35,12 @@ define(['dom', 'appRouter', 'connectionManager'], function (dom, appRouter, conn
         }
     }
 
-    function onItemsContainerClick(e) {
-        var groupedCard = dom.parentWithClass(e.target, 'groupedCard');
+    export default function onItemsContainerClick(e) {
+        const groupedCard = dom.parentWithClass(e.target, 'groupedCard');
 
         if (groupedCard) {
             onGroupedCardClick(e, groupedCard);
         }
     }
 
-    return {
-        onItemsContainerClick: onItemsContainerClick
-    };
-});
+/* eslint-enable indent */

src/components/guide/guide-settings.js

@@ -1,160 +1,149 @@
-define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectionManager', 'require', 'loading', 'scrollHelper', 'emby-checkbox', 'emby-radio', 'css!./../formdialog', 'material-icons'], function (dialogHelper, globalize, userSettings, layoutManager, connectionManager, require, loading, scrollHelper) {
-    'use strict';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import globalize from '../../scripts/globalize';
+import * as userSettings from '../../scripts/settings/userSettings';
+import layoutManager from '../layoutManager';
+import scrollHelper from '../../scripts/scrollHelper';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-radio/emby-radio';
+import '../formdialog.css';
+import 'material-design-icons-iconfont';
 
-    function saveCategories(context, options) {
+function saveCategories(context, options) {
+    const categories = [];
 
-        var categories = [];
+    const chkCategorys = context.querySelectorAll('.chkCategory');
+    for (const chkCategory of chkCategorys) {
+        const type = chkCategory.getAttribute('data-type');
 
-        var chkCategorys = context.querySelectorAll('.chkCategory');
-        for (var i = 0, length = chkCategorys.length; i < length; i++) {
-
-            var type = chkCategorys[i].getAttribute('data-type');
-
-            if (chkCategorys[i].checked) {
-                categories.push(type);
-            }
-        }
-
-        if (categories.length >= 4) {
-            categories.push('series');
-        }
-
-        // differentiate between none and all
-        categories.push('all');
-        options.categories = categories;
-    }
-
-    function loadCategories(context, options) {
-
-        var selectedCategories = options.categories || [];
-
-        var chkCategorys = context.querySelectorAll('.chkCategory');
-        for (var i = 0, length = chkCategorys.length; i < length; i++) {
-
-            var type = chkCategorys[i].getAttribute('data-type');
-
-            chkCategorys[i].checked = !selectedCategories.length || selectedCategories.indexOf(type) !== -1;
+        if (chkCategory.checked) {
+            categories.push(type);
         }
     }
 
-    function save(context) {
+    if (categories.length >= 4) {
+        categories.push('series');
+    }
 
-        var i;
-        var length;
+    // differentiate between none and all
+    categories.push('all');
+    options.categories = categories;
+}
 
-        var chkIndicators = context.querySelectorAll('.chkIndicator');
-        for (i = 0, length = chkIndicators.length; i < length; i++) {
+function loadCategories(context, options) {
+    const selectedCategories = options.categories || [];
 
-            var type = chkIndicators[i].getAttribute('data-type');
-            userSettings.set('guide-indicator-' + type, chkIndicators[i].checked);
+    const chkCategorys = context.querySelectorAll('.chkCategory');
+    for (const chkCategory of chkCategorys) {
+        const type = chkCategory.getAttribute('data-type');
+
+        chkCategory.checked = !selectedCategories.length || selectedCategories.indexOf(type) !== -1;
+    }
+}
+
+function save(context) {
+    const chkIndicators = context.querySelectorAll('.chkIndicator');
+
+    for (const chkIndicator of chkIndicators) {
+        const type = chkIndicator.getAttribute('data-type');
+        userSettings.set('guide-indicator-' + type, chkIndicator.checked);
+    }
+
+    userSettings.set('guide-colorcodedbackgrounds', context.querySelector('.chkColorCodedBackgrounds').checked);
+    userSettings.set('livetv-favoritechannelsattop', context.querySelector('.chkFavoriteChannelsAtTop').checked);
+
+    const sortBys = context.querySelectorAll('.chkSortOrder');
+    for (const sortBy of sortBys) {
+        if (sortBy.checked) {
+            userSettings.set('livetv-channelorder', sortBy.value);
+            break;
         }
+    }
+}
 
-        userSettings.set('guide-colorcodedbackgrounds', context.querySelector('.chkColorCodedBackgrounds').checked);
-        userSettings.set('livetv-favoritechannelsattop', context.querySelector('.chkFavoriteChannelsAtTop').checked);
+function load(context) {
+    const chkIndicators = context.querySelectorAll('.chkIndicator');
 
-        var sortBys = context.querySelectorAll('.chkSortOrder');
-        for (i = 0, length = sortBys.length; i < length; i++) {
-            if (sortBys[i].checked) {
-                userSettings.set('livetv-channelorder', sortBys[i].value);
-                break;
-            }
+    for (const chkIndicator of chkIndicators) {
+        const type = chkIndicator.getAttribute('data-type');
+
+        if (chkIndicator.getAttribute('data-default') === 'true') {
+            chkIndicator.checked = userSettings.get('guide-indicator-' + type) !== 'false';
+        } else {
+            chkIndicator.checked = userSettings.get('guide-indicator-' + type) === 'true';
         }
     }
 
-    function load(context) {
+    context.querySelector('.chkColorCodedBackgrounds').checked = userSettings.get('guide-colorcodedbackgrounds') === 'true';
+    context.querySelector('.chkFavoriteChannelsAtTop').checked = userSettings.get('livetv-favoritechannelsattop') !== 'false';
 
-        var i;
-        var length;
+    const sortByValue = userSettings.get('livetv-channelorder') || 'Number';
 
-        var chkIndicators = context.querySelectorAll('.chkIndicator');
-        for (i = 0, length = chkIndicators.length; i < length; i++) {
+    const sortBys = context.querySelectorAll('.chkSortOrder');
+    for (const sortBy of sortBys) {
+        sortBy.checked = sortBy.value === sortByValue;
+    }
+}
 
-            var type = chkIndicators[i].getAttribute('data-type');
+function showEditor(options) {
+    return new Promise(function (resolve, reject) {
+        let settingsChanged = false;
 
-            if (chkIndicators[i].getAttribute('data-default') === 'true') {
-                chkIndicators[i].checked = userSettings.get('guide-indicator-' + type) !== 'false';
+        import('./guide-settings.template.html').then(({ default: template }) => {
+            const dialogOptions = {
+                removeOnClose: true,
+                scrollY: false
+            };
+
+            if (layoutManager.tv) {
+                dialogOptions.size = 'fullscreen';
             } else {
-                chkIndicators[i].checked = userSettings.get('guide-indicator-' + type) === 'true';
+                dialogOptions.size = 'small';
             }
-        }
 
-        context.querySelector('.chkColorCodedBackgrounds').checked = userSettings.get('guide-colorcodedbackgrounds') === 'true';
-        context.querySelector('.chkFavoriteChannelsAtTop').checked = userSettings.get('livetv-favoritechannelsattop') !== 'false';
+            const dlg = dialogHelper.createDialog(dialogOptions);
 
-        var sortByValue = userSettings.get('livetv-channelorder') || 'Number';
+            dlg.classList.add('formDialog');
 
-        var sortBys = context.querySelectorAll('.chkSortOrder');
-        for (i = 0, length = sortBys.length; i < length; i++) {
-            sortBys[i].checked = sortBys[i].value === sortByValue;
-        }
-    }
+            let html = '';
 
-    function showEditor(options) {
+            html += globalize.translateHtml(template, 'core');
 
-        return new Promise(function (resolve, reject) {
+            dlg.innerHTML = html;
 
-            var settingsChanged = false;
-
-            require(['text!./guide-settings.template.html'], function (template) {
-
-                var dialogOptions = {
-                    removeOnClose: true,
-                    scrollY: false
-                };
-
-                if (layoutManager.tv) {
-                    dialogOptions.size = 'fullscreen';
-                } else {
-                    dialogOptions.size = 'small';
-                }
-
-                var dlg = dialogHelper.createDialog(dialogOptions);
-
-                dlg.classList.add('formDialog');
-
-                var html = '';
-
-                html += globalize.translateDocument(template, 'core');
-
-                dlg.innerHTML = html;
-
-                dlg.addEventListener('change', function () {
-
-                    settingsChanged = true;
-                });
-
-                dlg.addEventListener('close', function () {
-
-                    if (layoutManager.tv) {
-                        scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false);
-                    }
-
-                    save(dlg);
-                    saveCategories(dlg, options);
-
-                    if (settingsChanged) {
-                        resolve();
-                    } else {
-                        reject();
-                    }
-                });
-
-                dlg.querySelector('.btnCancel').addEventListener('click', function () {
-                    dialogHelper.close(dlg);
-                });
-
-                if (layoutManager.tv) {
-                    scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
-                }
-
-                load(dlg);
-                loadCategories(dlg, options);
-                dialogHelper.open(dlg);
+            dlg.addEventListener('change', function () {
+                settingsChanged = true;
             });
-        });
-    }
 
-    return {
-        show: showEditor
-    };
-});
+            dlg.addEventListener('close', function () {
+                if (layoutManager.tv) {
+                    scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false);
+                }
+
+                save(dlg);
+                saveCategories(dlg, options);
+
+                if (settingsChanged) {
+                    resolve();
+                } else {
+                    reject();
+                }
+            });
+
+            dlg.querySelector('.btnCancel').addEventListener('click', function () {
+                dialogHelper.close(dlg);
+            });
+
+            if (layoutManager.tv) {
+                scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
+            }
+
+            load(dlg);
+            loadCategories(dlg, options);
+            dialogHelper.open(dlg);
+        });
+    });
+}
+
+export default {
+    show: showEditor
+};

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

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

src/components/guide/guide.css

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

src/components/guide/tvguide.template.html

@@ -10,7 +10,7 @@
     <div class="guide-headerTimeslots">
         <div class="guide-channelTimeslotHeader">
             <button is="paper-icon-button-light" type="button" class="btnGuideViewSettings" title="${ButtonMore}">
-                <span class="material-icons btnGuideViewSettingsIcon more_horiz" aria-hidden="true"></span>
+                <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" title="${LabelPrevious}">
+    <button is="paper-icon-button-light" type="button" class="btnPreviousPage" title="${Previous}">
         <span class="material-icons arrow_back" aria-hidden="true"></span>
     </button>
-    <button is="paper-icon-button-light" type="button" class="btnNextPage" title="${LabelNext}">
+    <button is="paper-icon-button-light" type="button" class="btnNextPage" title="${Next}">
         <span class="material-icons arrow_forward" aria-hidden="true"></span>
     </button>
 </div>

src/components/homeScreenSettings/homeScreenSettings.js

@@ -1,30 +1,40 @@
-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';
 
-    var numConfigurableSections = 7;
+import layoutManager from '../layoutManager';
+import focusManager from '../focusManager';
+import globalize from '../../scripts/globalize';
+import loading from '../loading/loading';
+import { Events } from 'jellyfin-apiclient';
+import homeSections from '../homesections/homesections';
+import dom from '../../scripts/dom';
+import '../listview/listview.css';
+import '../../elements/emby-select/emby-select';
+import '../../elements/emby-checkbox/emby-checkbox';
+import ServerConnections from '../ServerConnections';
+import toast from '../toast/toast';
+
+/* eslint-disable indent */
+
+    const numConfigurableSections = 7;
 
     function renderViews(page, user, result) {
-
-        var folderHtml = '';
+        let folderHtml = '';
 
         folderHtml += '<div class="checkboxList">';
-        folderHtml += result.map(function (i) {
+        folderHtml += result.map(i => {
+            let currentHtml = '';
 
-            var currentHtml = '';
+            const id = `chkGroupFolder${i.Id}`;
 
-            var id = 'chkGroupFolder' + i.Id;
+            const isChecked = user.Configuration.GroupedFolders.includes(i.Id);
 
-            var isChecked = user.Configuration.GroupedFolders.indexOf(i.Id) !== -1;
-
-            var checkedHtml = isChecked ? ' checked="checked"' : '';
+            const checkedHtml = isChecked ? ' checked="checked"' : '';
 
             currentHtml += '<label>';
-            currentHtml += '<input type="checkbox" is="emby-checkbox" class="chkGroupFolder" data-folderid="' + i.Id + '" id="' + id + '"' + checkedHtml + '/>';
-            currentHtml += '<span>' + i.Name + '</span>';
+            currentHtml += `<input type="checkbox" is="emby-checkbox" class="chkGroupFolder" data-folderid="${i.Id}" id="${id}"${checkedHtml}/>`;
+            currentHtml += `<span>${i.Name}</span>`;
             currentHtml += '</label>';
 
             return currentHtml;
-
         }).join('');
 
         folderHtml += '</div>';
@@ -33,22 +43,22 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
     }
 
     function getLandingScreenOptions(type) {
-
-        var list = [];
+        const 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 +68,6 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
                 value: 'collections'
             });
         } else if (type === 'tvshows') {
-
             list.push({
                 name: globalize.translate('Shows'),
                 value: 'shows',
@@ -68,49 +77,49 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
                 name: globalize.translate('Suggestions'),
                 value: 'suggestions'
             });
-
             list.push({
-                name: globalize.translate('Latest'),
-                value: 'latest'
+                name: globalize.translate('Upcoming'),
+                value: 'upcoming'
             });
             list.push({
-                name: globalize.translate('Favorites'),
-                value: 'favorites'
+                name: globalize.translate('Genres'),
+                value: 'genres'
+            });
+            list.push({
+                name: globalize.translate('Networks'),
+                value: 'networks'
+            });
+            list.push({
+                name: globalize.translate('Episodes'),
+                value: 'episodes'
             });
         } else if (type === 'music') {
-
-            list.push({
-                name: globalize.translate('Suggestions'),
-                value: 'suggestions',
-                isDefault: true
-            });
-
             list.push({
                 name: globalize.translate('Albums'),
-                value: 'albums'
+                value: 'albums',
+                isDefault: true
+            });
+            list.push({
+                name: globalize.translate('Suggestions'),
+                value: 'suggestions'
             });
-
             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',
@@ -126,28 +135,22 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
     }
 
     function getLandingScreenOptionsHtml(type, userValue) {
+        return getLandingScreenOptions(type).map(o => {
+            const selected = userValue === o.value || (o.isDefault && !userValue);
+            const selectedHtml = selected ? ' selected' : '';
+            const optionValue = o.isDefault ? '' : o.value;
 
-        return getLandingScreenOptions(type).map(function (o) {
-
-            var selected = userValue === o.value || (o.isDefault && !userValue);
-            var selectedHtml = selected ? ' selected' : '';
-            var optionValue = o.isDefault ? '' : o.value;
-
-            return '<option value="' + optionValue + '"' + selectedHtml + '>' + o.name + '</option>';
+            return `<option value="${optionValue}"${selectedHtml}>${o.name}</option>`;
         }).join('');
     }
 
     function renderViewOrder(context, user, result) {
+        let html = '';
 
-        var html = '';
+        html += result.Items.map((view) => {
+            let currentHtml = '';
 
-        var index = 0;
-
-        html += result.Items.map(function (view) {
-
-            var currentHtml = '';
-
-            currentHtml += '<div class="listItem viewItem" data-viewid="' + view.Id + '">';
+            currentHtml += `<div class="listItem viewItem" data-viewid="${view.Id}">`;
 
             currentHtml += '<span class="material-icons listItemIcon folder_open"></span>';
 
@@ -159,29 +162,25 @@ 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') + '"><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 += `<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>';
 
-            index++;
             return currentHtml;
-
         }).join('');
 
         context.querySelector('.viewOrderList').innerHTML = html;
     }
 
     function updateHomeSectionValues(context, userSettings) {
+        for (let i = 1; i <= 7; i++) {
+            const select = context.querySelector(`#selectHomeSection${i}`);
+            const defaultValue = homeSections.getDefaultSection(i - 1);
 
-        for (var i = 1; i <= 7; i++) {
+            const option = select.querySelector(`option[value=${defaultValue}]`) || select.querySelector('option[value=""]');
 
-            var select = context.querySelector('#selectHomeSection' + i);
-            var defaultValue = homeSections.getDefaultSection(i - 1);
-
-            var option = select.querySelector('option[value=' + defaultValue + ']') || select.querySelector('option[value=""]');
-
-            var userValue = userSettings.get('homesection' + (i - 1));
+            const userValue = userSettings.get(`homesection${i - 1}`);
 
             option.value = '';
 
@@ -196,43 +195,39 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
     }
 
     function getPerLibrarySettingsHtml(item, user, userSettings, apiClient) {
+        let html = '';
 
-        var html = '';
-
-        var isChecked;
+        let isChecked;
 
         if (item.Type === 'Channel' || item.CollectionType === 'boxsets' || item.CollectionType === 'playlists') {
-            isChecked = (user.Configuration.MyMediaExcludes || []).indexOf(item.Id) === -1;
+            isChecked = !(user.Configuration.MyMediaExcludes || []).includes(item.Id);
             html += '<div>';
             html += '<label>';
-            html += '<input type="checkbox" is="emby-checkbox" class="chkIncludeInMyMedia" data-folderid="' + item.Id + '"' + (isChecked ? ' checked="checked"' : '') + '/>';
-            html += '<span>' + globalize.translate('DisplayInMyMedia') + '</span>';
+            html += `<input type="checkbox" is="emby-checkbox" class="chkIncludeInMyMedia" data-folderid="${item.Id}"${isChecked ? ' checked="checked"' : ''}/>`;
+            html += `<span>${globalize.translate('DisplayInMyMedia')}</span>`;
             html += '</label>';
             html += '</div>';
         }
 
-        var excludeFromLatest = ['playlists', 'livetv', 'boxsets', 'channels'];
-        if (excludeFromLatest.indexOf(item.CollectionType || '') === -1) {
-
-            isChecked = user.Configuration.LatestItemsExcludes.indexOf(item.Id) === -1;
+        const excludeFromLatest = ['playlists', 'livetv', 'boxsets', 'channels'];
+        if (!excludeFromLatest.includes(item.CollectionType || '')) {
+            isChecked = !user.Configuration.LatestItemsExcludes.includes(item.Id);
             html += '<label class="fldIncludeInLatest">';
-            html += '<input type="checkbox" is="emby-checkbox" class="chkIncludeInLatest" data-folderid="' + item.Id + '"' + (isChecked ? ' checked="checked"' : '') + '/>';
-            html += '<span>' + globalize.translate('DisplayInOtherHomeScreenSections') + '</span>';
+            html += `<input type="checkbox" is="emby-checkbox" class="chkIncludeInLatest" data-folderid="${item.Id}"${isChecked ? ' checked="checked"' : ''}/>`;
+            html += `<span>${globalize.translate('DisplayInOtherHomeScreenSections')}</span>`;
             html += '</label>';
         }
 
         if (html) {
-
-            html = '<div class="checkboxListContainer">' + html + '</div>';
+            html = `<div class="checkboxListContainer">${html}</div>`;
         }
 
         if (item.CollectionType === 'movies' || item.CollectionType === 'tvshows' || item.CollectionType === 'music' || item.CollectionType === 'livetv') {
-
-            var idForLanding = item.CollectionType === 'livetv' ? item.CollectionType : item.Id;
+            const idForLanding = item.CollectionType === 'livetv' ? item.CollectionType : item.Id;
             html += '<div class="selectContainer">';
-            html += '<select is="emby-select" class="selectLanding" data-folderid="' + idForLanding + '" label="' + globalize.translate('LabelDefaultScreen') + '">';
+            html += `<select is="emby-select" class="selectLanding" data-folderid="${idForLanding}" label="${globalize.translate('LabelDefaultScreen')}">`;
 
-            var userValue = userSettings.get('landing-' + idForLanding);
+            const userValue = userSettings.get(`landing-${idForLanding}`);
 
             html += getLandingScreenOptionsHtml(item.CollectionType, userValue);
 
@@ -241,8 +236,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
         }
 
         if (html) {
-
-            var prefix = '';
+            let prefix = '';
             prefix += '<div class="verticalSection">';
 
             prefix += '<h2 class="sectionTitle">';
@@ -257,12 +251,10 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
     }
 
     function renderPerLibrarySettings(context, user, userViews, userSettings, apiClient) {
+        const elem = context.querySelector('.perLibrarySettings');
+        let html = '';
 
-        var elem = context.querySelector('.perLibrarySettings');
-        var html = '';
-
-        for (var i = 0, length = userViews.length; i < length; i++) {
-
+        for (let i = 0, length = userViews.length; i < length; i++) {
             html += getPerLibrarySettingsHtml(userViews[i], user, userSettings, apiClient);
         }
 
@@ -270,16 +262,14 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
     }
 
     function loadForm(context, user, userSettings, apiClient) {
-
         context.querySelector('.chkHidePlayedFromLatest').checked = user.Configuration.HidePlayedInLatest || false;
 
         updateHomeSectionValues(context, userSettings);
 
-        var promise1 = apiClient.getUserViews({ IncludeHidden: true }, user.Id);
-        var promise2 = apiClient.getJSON(apiClient.getUrl('Users/' + user.Id + '/GroupingOptions'));
-
-        Promise.all([promise1, promise2]).then(function (responses) {
+        const promise1 = apiClient.getUserViews({ IncludeHidden: true }, user.Id);
+        const promise2 = apiClient.getJSON(apiClient.getUrl(`Users/${user.Id}/GroupingOptions`));
 
+        Promise.all([promise1, promise2]).then(responses => {
             renderViewOrder(context, user, responses[0]);
 
             renderPerLibrarySettings(context, user, responses[0].Items, userSettings, apiClient);
@@ -290,48 +280,23 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
         });
     }
 
-    function getSibling(elem, type, className) {
-
-        var sibling = elem[type];
-
-        while (sibling != null) {
-            if (sibling.classList.contains(className)) {
-                break;
-            }
-        }
-
-        if (sibling != null) {
-            if (!sibling.classList.contains(className)) {
-                sibling = null;
-            }
-        }
-
-        return sibling;
-    }
-
     function onSectionOrderListClick(e) {
-
-        var target = dom.parentWithClass(e.target, 'btnViewItemMove');
+        const target = dom.parentWithClass(e.target, 'btnViewItemMove');
 
         if (target) {
-            var viewItem = dom.parentWithClass(target, 'viewItem');
+            const viewItem = dom.parentWithClass(target, 'viewItem');
 
             if (viewItem) {
-                var ul = dom.parentWithClass(viewItem, 'paperList');
-
                 if (target.classList.contains('btnViewItemDown')) {
-
-                    var next = viewItem.nextSibling;
+                    const next = viewItem.nextSibling;
 
                     if (next) {
                         viewItem.parentNode.removeChild(viewItem);
                         next.parentNode.insertBefore(viewItem, next.nextSibling);
                         focusManager.focus(e.target);
                     }
-
                 } else {
-
-                    var prev = viewItem.previousSibling;
+                    const prev = viewItem.previousSibling;
 
                     if (prev) {
                         viewItem.parentNode.removeChild(viewItem);
@@ -344,44 +309,37 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
     }
 
     function getCheckboxItems(selector, context, isChecked) {
+        const inputs = context.querySelectorAll(selector);
+        const list = [];
 
-        var inputs = context.querySelectorAll(selector);
-        var list = [];
-
-        for (var i = 0, length = inputs.length; i < length; i++) {
-
+        for (let i = 0, length = inputs.length; i < length; i++) {
             if (inputs[i].checked === isChecked) {
                 list.push(inputs[i]);
             }
-
         }
 
         return list;
     }
 
     function saveUser(context, user, userSettingsInstance, apiClient) {
-
         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(i => {
             return i.getAttribute('data-folderid');
         });
 
-        user.Configuration.MyMediaExcludes = getCheckboxItems('.chkIncludeInMyMedia', context, false).map(function (i) {
-
+        user.Configuration.MyMediaExcludes = getCheckboxItems('.chkIncludeInMyMedia', context, false).map(i => {
             return i.getAttribute('data-folderid');
         });
 
-        user.Configuration.GroupedFolders = getCheckboxItems('.chkGroupFolder', context, true).map(function (i) {
-
+        user.Configuration.GroupedFolders = getCheckboxItems('.chkGroupFolder', context, true).map(i => {
             return i.getAttribute('data-folderid');
         });
 
-        var viewItems = context.querySelectorAll('.viewItem');
-        var orderedViews = [];
-        var i;
-        var length;
+        const viewItems = context.querySelectorAll('.viewItem');
+        const orderedViews = [];
+        let i;
+        let length;
         for (i = 0, length = viewItems.length; i < length; i++) {
             orderedViews.push(viewItems[i].getAttribute('data-viewid'));
         }
@@ -398,48 +356,40 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
         userSettingsInstance.set('homesection5', context.querySelector('#selectHomeSection6').value);
         userSettingsInstance.set('homesection6', context.querySelector('#selectHomeSection7').value);
 
-        var selectLandings = context.querySelectorAll('.selectLanding');
+        const selectLandings = context.querySelectorAll('.selectLanding');
         for (i = 0, length = selectLandings.length; i < length; i++) {
-            var selectLanding = selectLandings[i];
-            userSettingsInstance.set('landing-' + selectLanding.getAttribute('data-folderid'), selectLanding.value);
+            const selectLanding = selectLandings[i];
+            userSettingsInstance.set(`landing-${selectLanding.getAttribute('data-folderid')}`, selectLanding.value);
         }
 
         return apiClient.updateUserConfiguration(user.Id, user.Configuration);
     }
 
     function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) {
-
         loading.show();
 
-        apiClient.getUser(userId).then(function (user) {
-
-            saveUser(context, user, userSettings, apiClient).then(function () {
-
+        apiClient.getUser(userId).then(user => {
+            saveUser(context, user, userSettings, apiClient).then(() => {
                 loading.hide();
                 if (enableSaveConfirmation) {
-                    require(['toast'], function (toast) {
-                        toast(globalize.translate('SettingsSaved'));
-                    });
+                    toast(globalize.translate('SettingsSaved'));
                 }
 
-                events.trigger(instance, 'saved');
-
-            }, function () {
+                Events.trigger(instance, 'saved');
+            }, () => {
                 loading.hide();
             });
         });
     }
 
     function onSubmit(e) {
+        const self = this;
+        const apiClient = ServerConnections.getApiClient(self.options.serverId);
+        const userId = self.options.userId;
+        const userSettings = self.options.userSettings;
 
-        var self = this;
-        var apiClient = connectionManager.getApiClient(self.options.serverId);
-        var userId = self.options.userId;
-        var userSettings = self.options.userSettings;
-
-        userSettings.setUserInfo(userId, apiClient).then(function () {
-
-            var enableSaveConfirmation = self.options.enableSaveConfirmation;
+        userSettings.setUserInfo(userId, apiClient).then(() => {
+            const enableSaveConfirmation = self.options.enableSaveConfirmation;
             save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation);
         });
 
@@ -451,14 +401,13 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
     }
 
     function onChange(e) {
-
-        var chkIncludeInMyMedia = dom.parentWithClass(e.target, 'chkIncludeInMyMedia');
+        const chkIncludeInMyMedia = dom.parentWithClass(e.target, 'chkIncludeInMyMedia');
         if (!chkIncludeInMyMedia) {
             return;
         }
 
-        var section = dom.parentWithClass(chkIncludeInMyMedia, 'verticalSection');
-        var fldIncludeInLatest = section.querySelector('.fldIncludeInLatest');
+        const section = dom.parentWithClass(chkIncludeInMyMedia, 'verticalSection');
+        const fldIncludeInLatest = section.querySelector('.fldIncludeInLatest');
         if (fldIncludeInLatest) {
             if (chkIncludeInMyMedia.checked) {
                 fldIncludeInLatest.classList.remove('hide');
@@ -469,14 +418,12 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
     }
 
     function embed(options, self) {
-
-        require(['text!./homescreensettings.template.html'], function (template) {
-
-            for (var i = 1; i <= numConfigurableSections; i++) {
-                template = template.replace('{section' + i + 'label}', globalize.translate('LabelHomeScreenSectionValue', i));
+        return import('./homeScreenSettings.template.html').then(({default: template}) => {
+            for (let i = 1; i <= numConfigurableSections; i++) {
+                template = template.replace(`{section${i}label}`, globalize.translate('LabelHomeScreenSectionValue', i));
             }
 
-            options.element.innerHTML = globalize.translateDocument(template, 'core');
+            options.element.innerHTML = globalize.translateHtml(template, 'core');
 
             options.element.querySelector('.viewOrderList').addEventListener('click', onSectionOrderListClick);
             options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self));
@@ -496,47 +443,44 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
         });
     }
 
-    function HomeScreenSettings(options) {
+    class HomeScreenSettings {
+        constructor(options) {
+            this.options = options;
+            embed(options, this);
+        }
 
-        this.options = options;
+        loadData(autoFocus) {
+            const self = this;
+            const context = self.options.element;
 
-        embed(options, this);
+            loading.show();
+
+            const userId = self.options.userId;
+            const apiClient = ServerConnections.getApiClient(self.options.serverId);
+            const userSettings = self.options.userSettings;
+
+            apiClient.getUser(userId).then(user => {
+                userSettings.setUserInfo(userId, apiClient).then(() => {
+                    self.dataLoaded = true;
+
+                    loadForm(context, user, userSettings, apiClient);
+
+                    if (autoFocus) {
+                        focusManager.autoFocus(context);
+                    }
+                });
+            });
+        }
+
+        submit() {
+            onSubmit.call(this);
+        }
+
+        destroy() {
+            this.options = null;
+        }
     }
 
-    HomeScreenSettings.prototype.loadData = function (autoFocus) {
+/* eslint-enable indent */
 
-        var self = this;
-        var context = self.options.element;
-
-        loading.show();
-
-        var userId = self.options.userId;
-        var apiClient = connectionManager.getApiClient(self.options.serverId);
-        var userSettings = self.options.userSettings;
-
-        apiClient.getUser(userId).then(function (user) {
-
-            userSettings.setUserInfo(userId, apiClient).then(function () {
-
-                self.dataLoaded = true;
-
-                loadForm(context, user, userSettings, apiClient);
-
-                if (autoFocus) {
-                    focusManager.autoFocus(context);
-                }
-            });
-        });
-    };
-
-    HomeScreenSettings.prototype.submit = function () {
-        onSubmit.call(this);
-    };
-
-    HomeScreenSettings.prototype.destroy = function () {
-
-        this.options = null;
-    };
-
-    return HomeScreenSettings;
-});
+export default HomeScreenSettings;

src/components/homeScreenSettings/homeScreenSettings.template.html

@@ -1,6 +1,6 @@
 <form style="margin:0 auto;">
     <div class="verticalSection verticalSection-extrabottompadding">
-        <h2 class="sectionTitle">${HeaderHome}</h2>
+        <h2 class="sectionTitle">${Home}</h2>
 
         <div class="selectContainer hide selectTVHomeScreenContainer">
             <select is="emby-select" class="selectTVHomeScreen" label="${LabelTVHomeScreen}">
@@ -25,7 +25,7 @@
                 <option value="resume">${HeaderContinueWatching}</option>
                 <option value="resumeaudio">${HeaderContinueListening}</option>
                 <option value="latestmedia">${HeaderLatestMedia}</option>
-                <option value="nextup">${HeaderNextUp}</option>
+                <option value="nextup">${NextUp}</option>
                 <option value="livetv">${LiveTV}</option>
                 <option value="none">${None}</option>
             </select>
@@ -38,7 +38,7 @@
                 <option value="resume">${HeaderContinueWatching}</option>
                 <option value="resumeaudio">${HeaderContinueListening}</option>
                 <option value="latestmedia">${HeaderLatestMedia}</option>
-                <option value="nextup">${HeaderNextUp}</option>
+                <option value="nextup">${NextUp}</option>
                 <option value="livetv">${LiveTV}</option>
                 <option value="none">${None}</option>
             </select>
@@ -51,7 +51,7 @@
                 <option value="resume">${HeaderContinueWatching}</option>
                 <option value="resumeaudio">${HeaderContinueListening}</option>
                 <option value="latestmedia">${HeaderLatestMedia}</option>
-                <option value="nextup">${HeaderNextUp}</option>
+                <option value="nextup">${NextUp}</option>
                 <option value="livetv">${LiveTV}</option>
                 <option value="none">${None}</option>
             </select>
@@ -64,7 +64,7 @@
                 <option value="resume">${HeaderContinueWatching}</option>
                 <option value="resumeaudio">${HeaderContinueListening}</option>
                 <option value="latestmedia">${HeaderLatestMedia}</option>
-                <option value="nextup">${HeaderNextUp}</option>
+                <option value="nextup">${NextUp}</option>
                 <option value="livetv">${LiveTV}</option>
                 <option value="none">${None}</option>
             </select>
@@ -77,7 +77,7 @@
                 <option value="resume">${HeaderContinueWatching}</option>
                 <option value="resumeaudio">${HeaderContinueListening}</option>
                 <option value="latestmedia">${HeaderLatestMedia}</option>
-                <option value="nextup">${HeaderNextUp}</option>
+                <option value="nextup">${NextUp}</option>
                 <option value="livetv">${LiveTV}</option>
                 <option value="none">${None}</option>
             </select>
@@ -90,7 +90,7 @@
                 <option value="resume">${HeaderContinueWatching}</option>
                 <option value="resumeaudio">${HeaderContinueListening}</option>
                 <option value="latestmedia">${HeaderLatestMedia}</option>
-                <option value="nextup">${HeaderNextUp}</option>
+                <option value="nextup">${NextUp}</option>
                 <option value="livetv">${LiveTV}</option>
                 <option value="none">${None}</option>
             </select>
@@ -103,7 +103,7 @@
                 <option value="resume">${HeaderContinueWatching}</option>
                 <option value="resumeaudio">${HeaderContinueListening}</option>
                 <option value="latestmedia">${HeaderLatestMedia}</option>
-                <option value="nextup">${HeaderNextUp}</option>
+                <option value="nextup">${NextUp}</option>
                 <option value="livetv">${LiveTV}</option>
                 <option value="none">${None}</option>
             </select>

src/components/homesections/homesections.js

@@ -1,7 +1,21 @@
-define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'layoutManager', 'imageLoader', 'globalize', 'itemShortcuts', 'itemHelper', 'appRouter', 'scripts/imagehelper', 'paper-icon-button-light', 'emby-itemscontainer', 'emby-scroller', 'emby-button', 'css!./homesections'], function (connectionManager, cardBuilder, appSettings, dom, appHost, layoutManager, imageLoader, globalize, itemShortcuts, itemHelper, appRouter, imageHelper) {
-    'use strict';
+import cardBuilder from '../cardbuilder/cardBuilder';
+import dom from '../../scripts/dom';
+import layoutManager from '../layoutManager';
+import imageLoader from '../images/imageLoader';
+import globalize from '../../scripts/globalize';
+import { appRouter } from '../appRouter';
+import imageHelper from '../../scripts/imagehelper';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-itemscontainer/emby-itemscontainer';
+import '../../elements/emby-scroller/emby-scroller';
+import '../../elements/emby-button/emby-button';
+import './homesections.css';
+import Dashboard from '../../scripts/clientUtils';
+import ServerConnections from '../ServerConnections';
 
-    function getDefaultSection(index) {
+/* eslint-disable indent */
+
+    export function getDefaultSection(index) {
         switch (index) {
             case 0:
                 return 'smalllibrarytiles';
@@ -23,9 +37,9 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function getAllSectionsToShow(userSettings, sectionCount) {
-        var sections = [];
-        for (var i = 0, length = sectionCount; i < length; i++) {
-            var section = userSettings.get('homesection' + i) || getDefaultSection(i);
+        const sections = [];
+        for (let i = 0, length = sectionCount; i < length; i++) {
+            let section = userSettings.get('homesection' + i) || getDefaultSection(i);
             if (section === 'folders') {
                 section = getDefaultSection(0);
             }
@@ -36,22 +50,22 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         return sections;
     }
 
-    function loadSections(elem, apiClient, user, userSettings) {
+    export function loadSections(elem, apiClient, user, userSettings) {
         return getUserViews(apiClient, user.Id).then(function (userViews) {
-            var html = '';
+            let html = '';
 
             if (userViews.length) {
-                var sectionCount = 7;
-                for (var i = 0; i < sectionCount; i++) {
+                const sectionCount = 7;
+                for (let i = 0; i < sectionCount; i++) {
                     html += '<div class="verticalSection section' + i + '"></div>';
                 }
 
                 elem.innerHTML = html;
                 elem.classList.add('homeSectionsContainer');
 
-                var promises = [];
-                var sections = getAllSectionsToShow(userSettings, sectionCount);
-                for (var i = 0; i < sections.length; i++) {
+                const promises = [];
+                const sections = getAllSectionsToShow(userSettings, sectionCount);
+                for (let i = 0; i < sections.length; i++) {
                     promises.push(loadSection(elem, apiClient, user, userSettings, userViews, sections, i));
                 }
 
@@ -62,7 +76,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
                     });
                 });
             } else {
-                var noLibDescription;
+                let noLibDescription;
                 if (user['Policy'] && user['Policy']['IsAdministrator']) {
                     noLibDescription = globalize.translate('NoCreatedLibraries', '<br><a id="button-createLibrary" class="button-link">', '</a>');
                 } else {
@@ -75,7 +89,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
                 html += '</div>';
                 elem.innerHTML = html;
 
-                var createNowLink = elem.querySelector('#button-createLibrary');
+                const createNowLink = elem.querySelector('#button-createLibrary');
                 if (createNowLink) {
                     createNowLink.addEventListener('click', function () {
                         Dashboard.navigate('library.html');
@@ -85,9 +99,9 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         });
     }
 
-    function destroySections(elem) {
-        var elems = elem.querySelectorAll('.itemsContainer');
-        for (var i = 0; i < elems.length; i++) {
+    export function destroySections(elem) {
+        const elems = elem.querySelectorAll('.itemsContainer');
+        for (let i = 0; i < elems.length; i++) {
             elems[i].fetchData = null;
             elems[i].parentContainer = null;
             elems[i].getItemsHtml = null;
@@ -96,35 +110,32 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         elem.innerHTML = '';
     }
 
-    function pause(elem) {
-        var elems = elem.querySelectorAll('.itemsContainer');
-        for (var i = 0; i < elems.length; i++) {
+    export function pause(elem) {
+        const elems = elem.querySelectorAll('.itemsContainer');
+        for (let i = 0; i < elems.length; i++) {
             elems[i].pause();
         }
     }
 
-    function resume(elem, options) {
-        var elems = elem.querySelectorAll('.itemsContainer');
-        var i;
-        var length;
-        var promises = [];
+    export function resume(elem, options) {
+        const elems = elem.querySelectorAll('.itemsContainer');
+        const promises = [];
 
-        for (i = 0, length = elems.length; i < length; i++) {
+        for (let i = 0, length = elems.length; i < length; i++) {
             promises.push(elems[i].resume(options));
         }
 
-        var promise = Promise.all(promises);
+        const promise = Promise.all(promises);
         if (!options || options.returnPromise !== false) {
             return promise;
         }
     }
 
     function loadSection(page, apiClient, user, userSettings, userViews, allSections, index) {
+        const section = allSections[index];
+        const userId = user.Id;
 
-        var section = allSections[index];
-        var userId = user.Id;
-
-        var elem = page.querySelector('.section' + index);
+        const elem = page.querySelector('.section' + index);
 
         if (section === 'latestmedia') {
             loadRecentlyAdded(elem, apiClient, user, userViews);
@@ -168,11 +179,11 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function getPortraitShape() {
-        return enableScrollX() ? 'autooverflow' : 'auto';
+        return enableScrollX() ? 'overflowPortrait' : 'portrait';
     }
 
     function getLibraryButtonsHtml(items) {
-        var html = '';
+        let html = '';
 
         html += '<div class="verticalSection verticalSection-extrabottompadding">';
         html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderMyMedia') + '</h2>';
@@ -180,9 +191,9 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x" data-multiselect="false">';
 
         // library card background images
-        for (var i = 0, length = items.length; i < length; i++) {
-            var item = items[i];
-            var icon = imageHelper.getLibraryIcon(item.CollectionType);
+        for (let i = 0, length = items.length; i < length; i++) {
+            const item = items[i];
+            const icon = imageHelper.getLibraryIcon(item.CollectionType);
             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>';
         }
 
@@ -194,24 +205,16 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
     function loadlibraryButtons(elem, apiClient, user, userSettings, userViews) {
         elem.classList.remove('verticalSection');
-        var html = getLibraryButtonsHtml(userViews);
+        const html = getLibraryButtonsHtml(userViews);
 
         elem.innerHTML = html;
         imageLoader.lazyChildren(elem);
     }
 
-    /**
-     * Returns a random integer between min (inclusive) and max (inclusive)
-     * Using Math.round() will give you a non-uniform distribution!
-     */
-    function getRandomInt(min, max) {
-        return Math.floor(Math.random() * (max - min + 1)) + min;
-    }
-
     function getFetchLatestItemsFn(serverId, parentId, collectionType) {
         return function () {
-            var apiClient = connectionManager.getApiClient(serverId);
-            var limit = 16;
+            const apiClient = ServerConnections.getApiClient(serverId);
+            let limit = 16;
 
             if (enableScrollX()) {
                 if (collectionType === 'music') {
@@ -227,9 +230,9 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
                 }
             }
 
-            var options = {
+            const options = {
                 Limit: limit,
-                Fields: 'PrimaryImageAspectRatio,BasicSyncInfo',
+                Fields: 'PrimaryImageAspectRatio,BasicSyncInfo,Path',
                 ImageTypeLimit: 1,
                 EnableImageTypes: 'Primary,Backdrop,Thumb',
                 ParentId: parentId
@@ -241,8 +244,8 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
     function getLatestItemsHtmlFn(itemType, viewType) {
         return function (items) {
-            var cardLayout = false;
-            var shape;
+            const cardLayout = false;
+            let shape;
             if (itemType === 'Channel' || viewType === 'movies' || viewType === 'books' || viewType === 'tvshows') {
                 shape = getPortraitShape();
             } else if (viewType === 'music' || viewType === 'homevideos') {
@@ -254,7 +257,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
             return cardBuilder.getCardsHtml({
                 items: items,
                 shape: shape,
-                preferThumb: viewType !== 'movies' && itemType !== 'Channel' && viewType !== 'music' ? 'auto' : null,
+                preferThumb: viewType !== 'movies' && viewType !== 'tvshows' && itemType !== 'Channel' && viewType !== 'music' ? 'auto' : null,
                 showUnplayedIndicator: false,
                 showChildCountIndicator: true,
                 context: 'home',
@@ -272,7 +275,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function renderLatestSection(elem, apiClient, user, parent) {
-        var html = '';
+        let html = '';
 
         html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">';
         if (!layoutManager.tv) {
@@ -303,7 +306,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
         elem.innerHTML = html;
 
-        var itemsContainer = elem.querySelector('.itemsContainer');
+        const itemsContainer = elem.querySelector('.itemsContainer');
         itemsContainer.fetchData = getFetchLatestItemsFn(apiClient.serverId(), parent.Id, parent.CollectionType);
         itemsContainer.getItemsHtml = getLatestItemsHtmlFn(parent.Type, parent.CollectionType);
         itemsContainer.parentContainer = elem;
@@ -311,10 +314,10 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
     function loadRecentlyAdded(elem, apiClient, user, userViews) {
         elem.classList.remove('verticalSection');
-        var excludeViewTypes = ['playlists', 'livetv', 'boxsets', 'channels'];
+        const excludeViewTypes = ['playlists', 'livetv', 'boxsets', 'channels'];
 
-        for (var i = 0, length = userViews.length; i < length; i++) {
-            var item = userViews[i];
+        for (let i = 0, length = userViews.length; i < length; i++) {
+            const item = userViews[i];
             if (user.Configuration.LatestItemsExcludes.indexOf(item.Id) !== -1) {
                 continue;
             }
@@ -323,7 +326,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
                 continue;
             }
 
-            var frag = document.createElement('div');
+            const frag = document.createElement('div');
             frag.classList.add('verticalSection');
             frag.classList.add('hide');
             elem.appendChild(frag);
@@ -332,14 +335,8 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         }
     }
 
-    function getRequirePromise(deps) {
-        return new Promise(function (resolve, reject) {
-            require(deps, resolve);
-        });
-    }
-
-    function loadLibraryTiles(elem, apiClient, user, userSettings, shape, userViews, allSections) {
-        var html = '';
+    export function loadLibraryTiles(elem, apiClient, user, userSettings, shape, userViews, allSections) {
+        let html = '';
         if (userViews.length) {
             html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderMyMedia') + '</h2>';
             if (enableScrollX()) {
@@ -372,10 +369,10 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
     function getContinueWatchingFetchFn(serverId) {
         return function () {
-            var apiClient = connectionManager.getApiClient(serverId);
-            var screenWidth = dom.getWindowSize().innerWidth;
+            const apiClient = ServerConnections.getApiClient(serverId);
+            const screenWidth = dom.getWindowSize().innerWidth;
 
-            var limit;
+            let limit;
             if (enableScrollX()) {
                 limit = 12;
             } else {
@@ -383,7 +380,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
                 limit = Math.min(limit, 5);
             }
 
-            var options = {
+            const options = {
                 Limit: limit,
                 Recursive: true,
                 Fields: 'PrimaryImageAspectRatio,BasicSyncInfo',
@@ -398,7 +395,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function getContinueWatchingItemsHtml(items) {
-        var cardLayout = false;
+        const cardLayout = false;
         return cardBuilder.getCardsHtml({
             items: items,
             preferThumb: true,
@@ -419,7 +416,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function loadResumeVideo(elem, apiClient, userId) {
-        var html = '';
+        let html = '';
 
         html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderContinueWatching') + '</h2>';
         if (enableScrollX()) {
@@ -437,7 +434,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         elem.classList.add('hide');
         elem.innerHTML = html;
 
-        var itemsContainer = elem.querySelector('.itemsContainer');
+        const itemsContainer = elem.querySelector('.itemsContainer');
         itemsContainer.fetchData = getContinueWatchingFetchFn(apiClient.serverId());
         itemsContainer.getItemsHtml = getContinueWatchingItemsHtml;
         itemsContainer.parentContainer = elem;
@@ -445,10 +442,10 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
     function getContinueListeningFetchFn(serverId) {
         return function () {
-            var apiClient = connectionManager.getApiClient(serverId);
-            var screenWidth = dom.getWindowSize().innerWidth;
+            const apiClient = ServerConnections.getApiClient(serverId);
+            const screenWidth = dom.getWindowSize().innerWidth;
 
-            var limit;
+            let limit;
             if (enableScrollX()) {
                 limit = 12;
             } else {
@@ -456,7 +453,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
                 limit = Math.min(limit, 5);
             }
 
-            var options = {
+            const options = {
                 Limit: limit,
                 Recursive: true,
                 Fields: 'PrimaryImageAspectRatio,BasicSyncInfo',
@@ -471,7 +468,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function getContinueListeningItemsHtml(items) {
-        var cardLayout = false;
+        const cardLayout = false;
         return cardBuilder.getCardsHtml({
             items: items,
             preferThumb: true,
@@ -492,7 +489,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function loadResumeAudio(elem, apiClient, userId) {
-        var html = '';
+        let html = '';
 
         html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderContinueWatching') + '</h2>';
         if (enableScrollX()) {
@@ -510,7 +507,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         elem.classList.add('hide');
         elem.innerHTML = html;
 
-        var itemsContainer = elem.querySelector('.itemsContainer');
+        const itemsContainer = elem.querySelector('.itemsContainer');
         itemsContainer.fetchData = getContinueListeningFetchFn(apiClient.serverId());
         itemsContainer.getItemsHtml = getContinueListeningItemsHtml;
         itemsContainer.parentContainer = elem;
@@ -518,7 +515,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
     function getOnNowFetchFn(serverId) {
         return function () {
-            var apiClient = connectionManager.getApiClient(serverId);
+            const apiClient = ServerConnections.getApiClient(serverId);
             return apiClient.getLiveTvRecommendedPrograms({
                 userId: apiClient.getCurrentUserId(),
                 IsAiring: true,
@@ -532,7 +529,6 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function getOnNowItemsHtml(items) {
-        var cardLayout = false;
         return cardBuilder.getCardsHtml({
             items: items,
             preferThumb: 'auto',
@@ -559,7 +555,6 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
             return Promise.resolve();
         }
 
-        var userId = user.Id;
         return apiClient.getLiveTvRecommendedPrograms({
             userId: apiClient.getCurrentUserId(),
             IsAiring: true,
@@ -569,7 +564,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
             EnableTotalRecordCount: false,
             Fields: 'ChannelInfo,PrimaryImageAspectRatio'
         }).then(function (result) {
-            var html = '';
+            let html = '';
             if (result.Items.length) {
                 elem.classList.remove('padded-left');
                 elem.classList.remove('padded-right');
@@ -632,7 +627,6 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
                     html += '</h2>';
                     html += '<span class="material-icons chevron_right"></span>';
                     html += '</a>';
-
                 } else {
                     html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('HeaderOnNow') + '</h2>';
                 }
@@ -654,7 +648,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
                 elem.innerHTML = html;
 
-                var itemsContainer = elem.querySelector('.itemsContainer');
+                const itemsContainer = elem.querySelector('.itemsContainer');
                 itemsContainer.parentContainer = elem;
                 itemsContainer.fetchData = getOnNowFetchFn(apiClient.serverId());
                 itemsContainer.getItemsHtml = getOnNowItemsHtml;
@@ -664,10 +658,10 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
     function getNextUpFetchFn(serverId) {
         return function () {
-            var apiClient = connectionManager.getApiClient(serverId);
+            const apiClient = ServerConnections.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',
@@ -677,7 +671,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function getNextUpItemsHtml(items) {
-        var cardLayout = false;
+        const cardLayout = false;
         return cardBuilder.getCardsHtml({
             items: items,
             preferThumb: true,
@@ -695,7 +689,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function loadNextUp(elem, apiClient, userId) {
-        var html = '';
+        let html = '';
 
         html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">';
         if (!layoutManager.tv) {
@@ -703,12 +697,12 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
                 serverId: apiClient.serverId()
             }) + '" class="button-flat button-flat-mini sectionTitleTextButton">';
             html += '<h2 class="sectionTitle sectionTitle-cards">';
-            html += globalize.translate('HeaderNextUp');
+            html += globalize.translate('NextUp');
             html += '</h2>';
             html += '<span class="material-icons chevron_right"></span>';
             html += '</a>';
         } else {
-            html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('HeaderNextUp') + '</h2>';
+            html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('NextUp') + '</h2>';
         }
         html += '</div>';
 
@@ -727,7 +721,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         elem.classList.add('hide');
         elem.innerHTML = html;
 
-        var itemsContainer = elem.querySelector('.itemsContainer');
+        const itemsContainer = elem.querySelector('.itemsContainer');
         itemsContainer.fetchData = getNextUpFetchFn(apiClient.serverId());
         itemsContainer.getItemsHtml = getNextUpItemsHtml;
         itemsContainer.parentContainer = elem;
@@ -735,7 +729,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
     function getLatestRecordingsFetchFn(serverId, activeRecordingsOnly) {
         return function () {
-            var apiClient = connectionManager.getApiClient(serverId);
+            const apiClient = ServerConnections.getApiClient(serverId);
             return apiClient.getLiveTvRecordings({
                 userId: apiClient.getCurrentUserId(),
                 Limit: enableScrollX() ? 12 : 5,
@@ -749,7 +743,6 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
     function getLatestRecordingItemsHtml(activeRecordingsOnly) {
         return function (items) {
-            var cardLayout = false;
             return cardBuilder.getCardsHtml({
                 items: items,
                 shape: enableScrollX() ? 'autooverflow' : 'auto',
@@ -774,11 +767,11 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function loadLatestLiveTvRecordings(elem, activeRecordingsOnly, apiClient, userId) {
-        var title = activeRecordingsOnly ?
+        const title = activeRecordingsOnly ?
             globalize.translate('HeaderActiveRecordings') :
             globalize.translate('HeaderLatestRecordings');
 
-        var html = '';
+        let html = '';
 
         html += '<div class="sectionTitleContainer sectionTitleContainer-cards">';
         html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + title + '</h2>';
@@ -799,18 +792,19 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         elem.classList.add('hide');
         elem.innerHTML = html;
 
-        var itemsContainer = elem.querySelector('.itemsContainer');
+        const itemsContainer = elem.querySelector('.itemsContainer');
         itemsContainer.fetchData = getLatestRecordingsFetchFn(apiClient.serverId(), activeRecordingsOnly);
         itemsContainer.getItemsHtml = getLatestRecordingItemsHtml(activeRecordingsOnly);
         itemsContainer.parentContainer = elem;
     }
 
-    return {
-        loadLibraryTiles: loadLibraryTiles,
-        getDefaultSection: getDefaultSection,
-        loadSections: loadSections,
-        destroySections: destroySections,
-        pause: pause,
-        resume: resume
-    };
-});
+export default {
+    loadLibraryTiles: loadLibraryTiles,
+    getDefaultSection: getDefaultSection,
+    loadSections: loadSections,
+    destroySections: destroySections,
+    pause: pause,
+    resume: resume
+};
+
+/* eslint-enable indent */

src/components/htmlMediaHelper.js

@@ -1,17 +1,21 @@
-define(['appSettings', 'browser', 'events'], function (appSettings, browser, events) {
-    'use strict';
 
-    function getSavedVolume() {
+/* eslint-disable indent */
+
+import appSettings from '../scripts/settings/appSettings' ;
+import browser from '../scripts/browser';
+import { Events } from 'jellyfin-apiclient';
+
+    export function getSavedVolume() {
         return appSettings.get('volume') || 1;
     }
 
-    function saveVolume(value) {
+    export function saveVolume(value) {
         if (value) {
             appSettings.set('volume', value);
         }
     }
 
-    function getCrossOriginValue(mediaSource) {
+    export function getCrossOriginValue(mediaSource) {
         if (mediaSource.IsRemote) {
             return null;
         }
@@ -20,7 +24,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
     }
 
     function canPlayNativeHls() {
-        var media = document.createElement('video');
+        const media = document.createElement('video');
 
         if (media.canPlayType('application/x-mpegURL').replace(/no/, '') ||
             media.canPlayType('application/vnd.apple.mpegURL').replace(/no/, '')) {
@@ -30,34 +34,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
         return false;
     }
 
-    function enableHlsShakaPlayer(item, mediaSource, mediaType) {
-        /* eslint-disable-next-line compat/compat */
-        if (!!window.MediaSource && !!MediaSource.isTypeSupported) {
-
-            if (canPlayNativeHls()) {
-
-                if (browser.edge && mediaType === 'Video') {
-                    return true;
-                }
-
-                // simple playback should use the native support
-                if (mediaSource.RunTimeTicks) {
-                    //if (!browser.edge) {
-                    //return false;
-                    //}
-                }
-
-                //return false;
-            }
-
-            return true;
-        }
-
-        return false;
-    }
-
-    function enableHlsJsPlayer(runTimeTicks, mediaType) {
-
+    export function enableHlsJsPlayer(runTimeTicks, mediaType) {
         if (window.MediaSource == null) {
             return false;
         }
@@ -73,7 +50,6 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
         }
 
         if (canPlayNativeHls()) {
-
             // Having trouble with chrome's native support and transcoded music
             if (browser.android && mediaType === 'Audio') {
                 return true;
@@ -96,17 +72,16 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
         return true;
     }
 
-    var recoverDecodingErrorDate;
-    var recoverSwapAudioCodecDate;
-    function handleHlsJsMediaError(instance, reject) {
-
-        var hlsPlayer = instance._hlsPlayer;
+    let recoverDecodingErrorDate;
+    let recoverSwapAudioCodecDate;
+    export function handleHlsJsMediaError(instance, reject) {
+        const hlsPlayer = instance._hlsPlayer;
 
         if (!hlsPlayer) {
             return;
         }
 
-        var now = Date.now();
+        let now = Date.now();
 
         if (window.performance && window.performance.now) {
             now = performance.now(); // eslint-disable-line compat/compat
@@ -134,21 +109,20 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
         }
     }
 
-    function onErrorInternal(instance, type) {
-
+    export function onErrorInternal(instance, type) {
         // Needed for video
         if (instance.destroyCustomTrack) {
             instance.destroyCustomTrack(instance._mediaElement);
         }
 
-        events.trigger(instance, 'error', [
+        Events.trigger(instance, 'error', [
             {
                 type: type
             }
         ]);
     }
 
-    function isValidDuration(duration) {
+    export function isValidDuration(duration) {
         if (duration && !isNaN(duration) && duration !== Number.POSITIVE_INFINITY && duration !== Number.NEGATIVE_INFINITY) {
             return true;
         }
@@ -162,13 +136,10 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
         }
     }
 
-    function seekOnPlaybackStart(instance, element, ticks, onMediaReady) {
-
-        var seconds = (ticks || 0) / 10000000;
+    export function seekOnPlaybackStart(instance, element, ticks, onMediaReady) {
+        const seconds = (ticks || 0) / 10000000;
 
         if (seconds) {
-            var src = (instance.currentSrc() || '').toLowerCase();
-
             // Appending #t=xxx to the query string doesn't seem to work with HLS
             // For plain video files, not all browsers support it either
 
@@ -178,8 +149,8 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
                 if (onMediaReady) onMediaReady();
             } else {
                 // update video player position when media is ready to be sought
-                var events = ['durationchange', 'loadeddata', 'play', 'loadedmetadata'];
-                var onMediaChange = function(e) {
+                const events = ['durationchange', 'loadeddata', 'play', 'loadedmetadata'];
+                const onMediaChange = function(e) {
                     if (element.currentTime === 0 && element.duration >= seconds) {
                         // seek only when video position is exactly zero,
                         // as this is true only if video hasn't started yet or
@@ -200,23 +171,18 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
         }
     }
 
-    function applySrc(elem, src, options) {
-
+    export function applySrc(elem, src, options) {
         if (window.Windows && options.mediaSource && options.mediaSource.IsLocal) {
-
             return Windows.Storage.StorageFile.getFileFromPathAsync(options.url).then(function (file) {
+                const playlist = new Windows.Media.Playback.MediaPlaybackList();
 
-                var playlist = new Windows.Media.Playback.MediaPlaybackList();
-
-                var source1 = Windows.Media.Core.MediaSource.createFromStorageFile(file);
-                var startTime = (options.playerStartPositionTicks || 0) / 10000;
+                const source1 = Windows.Media.Core.MediaSource.createFromStorageFile(file);
+                const startTime = (options.playerStartPositionTicks || 0) / 10000;
                 playlist.items.append(new Windows.Media.Playback.MediaPlaybackItem(source1, startTime));
                 elem.src = URL.createObjectURL(playlist, { oneTimeOnly: true });
                 return Promise.resolve();
             });
-
         } else {
-
             elem.src = src;
         }
 
@@ -224,19 +190,16 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
     }
 
     function onSuccessfulPlay(elem, onErrorFn) {
-
         elem.addEventListener('error', onErrorFn);
     }
 
-    function playWithPromise(elem, onErrorFn) {
-
+    export function playWithPromise(elem, onErrorFn) {
         try {
-            var promise = elem.play();
+            const promise = elem.play();
             if (promise && promise.then) {
                 // Chrome now returns a promise
                 return promise.catch(function (e) {
-
-                    var errorName = (e.name || '').toLowerCase();
+                    const errorName = (e.name || '').toLowerCase();
                     // safari uses aborterror
                     if (errorName === 'notallowederror' ||
                         errorName === 'aborterror') {
@@ -256,9 +219,8 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
         }
     }
 
-    function destroyCastPlayer(instance) {
-
-        var player = instance._castPlayer;
+    export function destroyCastPlayer(instance) {
+        const player = instance._castPlayer;
         if (player) {
             try {
                 player.unload();
@@ -270,21 +232,8 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
         }
     }
 
-    function destroyShakaPlayer(instance) {
-        var player = instance._shakaPlayer;
-        if (player) {
-            try {
-                player.destroy();
-            } catch (err) {
-                console.error(err);
-            }
-
-            instance._shakaPlayer = null;
-        }
-    }
-
-    function destroyHlsPlayer(instance) {
-        var player = instance._hlsPlayer;
+    export function destroyHlsPlayer(instance) {
+        const player = instance._hlsPlayer;
         if (player) {
             try {
                 player.destroy();
@@ -296,8 +245,8 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
         }
     }
 
-    function destroyFlvPlayer(instance) {
-        var player = instance._flvPlayer;
+    export function destroyFlvPlayer(instance) {
+        const player = instance._flvPlayer;
         if (player) {
             try {
                 player.unload();
@@ -311,11 +260,9 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
         }
     }
 
-    function bindEventsToHlsPlayer(instance, hls, elem, onErrorFn, resolve, reject) {
-
+    export function bindEventsToHlsPlayer(instance, hls, elem, onErrorFn, resolve, reject) {
         hls.on(Hls.Events.MANIFEST_PARSED, function () {
             playWithPromise(elem, onErrorFn).then(resolve, function () {
-
                 if (reject) {
                     reject();
                     reject = null;
@@ -324,14 +271,12 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
         });
 
         hls.on(Hls.Events.ERROR, function (event, data) {
-
             console.error('HLS Error: Type: ' + data.type + ' Details: ' + (data.details || '') + ' Fatal: ' + (data.fatal || false));
 
             switch (data.type) {
                 case Hls.ErrorTypes.NETWORK_ERROR:
                     // try to recover network error
                     if (data.response && data.response.code && data.response.code >= 400) {
-
                         console.debug('hls.js response error code: ' + data.response.code);
 
                         // Trigger failure differently depending on whether this is prior to start of playback, or after
@@ -345,7 +290,6 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
                         }
 
                         return;
-
                     }
 
                     break;
@@ -358,7 +302,6 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
                     case Hls.ErrorTypes.NETWORK_ERROR:
 
                         if (data.response && data.response.code === 0) {
-
                             // This could be a CORS error related to access control response headers
 
                             console.debug('hls.js response error code: ' + data.response.code);
@@ -380,9 +323,8 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
                         break;
                     case Hls.ErrorTypes.MEDIA_ERROR:
                         console.debug('fatal media error encountered, try to recover');
-                        var currentReject = reject;
+                        handleHlsJsMediaError(instance, reject);
                         reject = null;
-                        handleHlsJsMediaError(instance, currentReject);
                         break;
                     default:
 
@@ -403,8 +345,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
         });
     }
 
-    function onEndedInternal(instance, elem, onErrorFn) {
-
+    export function onEndedInternal(instance, elem, onErrorFn) {
         elem.removeEventListener('error', onErrorFn);
 
         elem.src = '';
@@ -413,37 +354,34 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
 
         destroyHlsPlayer(instance);
         destroyFlvPlayer(instance);
-        destroyShakaPlayer(instance);
         destroyCastPlayer(instance);
 
-        var stopInfo = {
+        const stopInfo = {
             src: instance._currentSrc
         };
 
-        events.trigger(instance, 'stopped', [stopInfo]);
+        Events.trigger(instance, 'stopped', [stopInfo]);
 
         instance._currentTime = null;
         instance._currentSrc = null;
         instance._currentPlayOptions = null;
     }
 
-    function getBufferedRanges(instance, elem) {
+    export function getBufferedRanges(instance, elem) {
+        const ranges = [];
+        const seekable = elem.buffered || [];
 
-        var ranges = [];
-        var seekable = elem.buffered || [];
-
-        var offset;
-        var currentPlayOptions = instance._currentPlayOptions;
+        let offset;
+        const currentPlayOptions = instance._currentPlayOptions;
         if (currentPlayOptions) {
             offset = currentPlayOptions.transcodingOffsetTicks;
         }
 
         offset = offset || 0;
 
-        for (var i = 0, length = seekable.length; i < length; i++) {
-
-            var start = seekable.start(i);
-            var end = seekable.end(i);
+        for (let i = 0, length = seekable.length; i < length; i++) {
+            let start = seekable.start(i);
+            let end = seekable.end(i);
 
             if (!isValidDuration(start)) {
                 start = 0;
@@ -462,23 +400,4 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
         return ranges;
     }
 
-    return {
-        getSavedVolume: getSavedVolume,
-        saveVolume: saveVolume,
-        enableHlsJsPlayer: enableHlsJsPlayer,
-        enableHlsShakaPlayer: enableHlsShakaPlayer,
-        handleHlsJsMediaError: handleHlsJsMediaError,
-        isValidDuration: isValidDuration,
-        onErrorInternal: onErrorInternal,
-        seekOnPlaybackStart: seekOnPlaybackStart,
-        applySrc: applySrc,
-        playWithPromise: playWithPromise,
-        destroyHlsPlayer: destroyHlsPlayer,
-        destroyFlvPlayer: destroyFlvPlayer,
-        destroyCastPlayer: destroyCastPlayer,
-        bindEventsToHlsPlayer: bindEventsToHlsPlayer,
-        onEndedInternal: onEndedInternal,
-        getCrossOriginValue: getCrossOriginValue,
-        getBufferedRanges: getBufferedRanges
-    };
-});
+/* eslint-enable indent */

src/components/htmlaudioplayer/plugin.js

@@ -1,503 +0,0 @@
-define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelper'], function (events, browser, require, appHost, appSettings, htmlMediaHelper) {
-    'use strict';
-
-    function getDefaultProfile() {
-        return new Promise(function (resolve, reject) {
-            require(['browserdeviceprofile'], function (profileBuilder) {
-                resolve(profileBuilder({}));
-            });
-        });
-    }
-
-    var fadeTimeout;
-    function fade(instance, elem, startingVolume) {
-        instance._isFadingOut = true;
-
-        // Need to record the starting volume on each pass rather than querying elem.volume
-        // This is due to iOS safari not allowing volume changes and always returning the system volume value
-        var newVolume = Math.max(0, startingVolume - 0.15);
-        console.debug('fading volume to ' + newVolume);
-        elem.volume = newVolume;
-
-        if (newVolume <= 0) {
-            instance._isFadingOut = false;
-            return Promise.resolve();
-        }
-
-        return new Promise(function (resolve, reject) {
-            cancelFadeTimeout();
-            fadeTimeout = setTimeout(function () {
-                fade(instance, elem, newVolume).then(resolve, reject);
-            }, 100);
-        });
-    }
-
-    function cancelFadeTimeout() {
-        var timeout = fadeTimeout;
-        if (timeout) {
-            clearTimeout(timeout);
-            fadeTimeout = null;
-        }
-    }
-
-    function supportsFade() {
-        if (browser.tv) {
-            // Not working on tizen.
-            // We could possibly enable on other tv's, but all smart tv browsers tend to be pretty primitive
-            return false;
-        }
-
-        return true;
-    }
-
-    function requireHlsPlayer(callback) {
-        require(['hlsjs'], function (hls) {
-            window.Hls = hls;
-            callback();
-        });
-    }
-
-    function enableHlsPlayer(url, item, mediaSource, mediaType) {
-        if (!htmlMediaHelper.enableHlsJsPlayer(mediaSource.RunTimeTicks, mediaType)) {
-            return Promise.reject();
-        }
-
-        if (url.indexOf('.m3u8') !== -1) {
-            return Promise.resolve();
-        }
-
-        // issue head request to get content type
-        return new Promise(function (resolve, reject) {
-
-            require(['fetchHelper'], function (fetchHelper) {
-                fetchHelper.ajax({
-                    url: url,
-                    type: 'HEAD'
-                }).then(function (response) {
-                    var contentType = (response.headers.get('Content-Type') || '').toLowerCase();
-                    if (contentType === 'application/x-mpegurl') {
-                        resolve();
-                    } else {
-                        reject();
-                    }
-                }, reject);
-            });
-        });
-    }
-
-    function HtmlAudioPlayer() {
-        var self = this;
-
-        self.name = 'Html Audio Player';
-        self.type = 'mediaplayer';
-        self.id = 'htmlaudioplayer';
-
-        // Let any players created by plugins take priority
-        self.priority = 1;
-
-        self.play = function (options) {
-
-            self._started = false;
-            self._timeUpdated = false;
-            self._currentTime = null;
-
-            var elem = createMediaElement();
-            return setCurrentSrc(elem, options);
-        };
-
-        function setCurrentSrc(elem, options) {
-
-            elem.removeEventListener('error', onError);
-
-            unBindEvents(elem);
-            bindEvents(elem);
-
-            var val = options.url;
-            console.debug('playing url: ' + val);
-
-            // Convert to seconds
-            var seconds = (options.playerStartPositionTicks || 0) / 10000000;
-            if (seconds) {
-                val += '#t=' + seconds;
-            }
-
-            htmlMediaHelper.destroyHlsPlayer(self);
-
-            self._currentPlayOptions = options;
-
-            var crossOrigin = htmlMediaHelper.getCrossOriginValue(options.mediaSource);
-            if (crossOrigin) {
-                elem.crossOrigin = crossOrigin;
-            }
-
-            return enableHlsPlayer(val, options.item, options.mediaSource, 'Audio').then(function () {
-
-                return new Promise(function (resolve, reject) {
-
-                    requireHlsPlayer(function () {
-                        var hls = new Hls({
-                            manifestLoadingTimeOut: 20000,
-                            xhrSetup: function(xhr, url) {
-                                xhr.withCredentials = true;
-                            }
-                            //appendErrorMaxRetry: 6,
-                            //debug: true
-                        });
-                        hls.loadSource(val);
-                        hls.attachMedia(elem);
-
-                        htmlMediaHelper.bindEventsToHlsPlayer(self, hls, elem, onError, resolve, reject);
-
-                        self._hlsPlayer = hls;
-
-                        self._currentSrc = val;
-                    });
-                });
-
-            }, function () {
-
-                elem.autoplay = true;
-
-                // Safari will not send cookies without this
-                elem.crossOrigin = 'use-credentials';
-
-                return htmlMediaHelper.applySrc(elem, val, options).then(function () {
-
-                    self._currentSrc = val;
-
-                    return htmlMediaHelper.playWithPromise(elem, onError);
-                });
-            });
-        }
-
-        function bindEvents(elem) {
-            elem.addEventListener('timeupdate', onTimeUpdate);
-            elem.addEventListener('ended', onEnded);
-            elem.addEventListener('volumechange', onVolumeChange);
-            elem.addEventListener('pause', onPause);
-            elem.addEventListener('playing', onPlaying);
-            elem.addEventListener('play', onPlay);
-        }
-
-        function unBindEvents(elem) {
-            elem.removeEventListener('timeupdate', onTimeUpdate);
-            elem.removeEventListener('ended', onEnded);
-            elem.removeEventListener('volumechange', onVolumeChange);
-            elem.removeEventListener('pause', onPause);
-            elem.removeEventListener('playing', onPlaying);
-            elem.removeEventListener('play', onPlay);
-        }
-
-        self.stop = function (destroyPlayer) {
-
-            cancelFadeTimeout();
-
-            var elem = self._mediaElement;
-            var src = self._currentSrc;
-
-            if (elem && src) {
-
-                if (!destroyPlayer || !supportsFade()) {
-
-                    elem.pause();
-
-                    htmlMediaHelper.onEndedInternal(self, elem, onError);
-
-                    if (destroyPlayer) {
-                        self.destroy();
-                    }
-                    return Promise.resolve();
-                }
-
-                var originalVolume = elem.volume;
-
-                return fade(self, elem, elem.volume).then(function () {
-
-                    elem.pause();
-                    elem.volume = originalVolume;
-
-                    htmlMediaHelper.onEndedInternal(self, elem, onError);
-
-                    if (destroyPlayer) {
-                        self.destroy();
-                    }
-                });
-            }
-            return Promise.resolve();
-        };
-
-        self.destroy = function () {
-            unBindEvents(self._mediaElement);
-        };
-
-        function createMediaElement() {
-
-            var elem = self._mediaElement;
-
-            if (elem) {
-                return elem;
-            }
-
-            elem = document.querySelector('.mediaPlayerAudio');
-
-            if (!elem) {
-                elem = document.createElement('audio');
-                elem.classList.add('mediaPlayerAudio');
-                elem.classList.add('hide');
-
-                document.body.appendChild(elem);
-            }
-
-            elem.volume = htmlMediaHelper.getSavedVolume();
-
-            self._mediaElement = elem;
-
-            return elem;
-        }
-
-        function onEnded() {
-
-            htmlMediaHelper.onEndedInternal(self, this, onError);
-        }
-
-        function onTimeUpdate() {
-
-            // Get the player position + the transcoding offset
-            var time = this.currentTime;
-
-            // Don't trigger events after user stop
-            if (!self._isFadingOut) {
-                self._currentTime = time;
-                events.trigger(self, 'timeupdate');
-            }
-        }
-
-        function onVolumeChange() {
-
-            if (!self._isFadingOut) {
-                htmlMediaHelper.saveVolume(this.volume);
-                events.trigger(self, 'volumechange');
-            }
-        }
-
-        function onPlaying(e) {
-
-            if (!self._started) {
-                self._started = true;
-                this.removeAttribute('controls');
-
-                htmlMediaHelper.seekOnPlaybackStart(self, e.target, self._currentPlayOptions.playerStartPositionTicks);
-            }
-            events.trigger(self, 'playing');
-        }
-
-        function onPlay(e) {
-
-            events.trigger(self, 'unpause');
-        }
-
-        function onPause() {
-            events.trigger(self, 'pause');
-        }
-
-        function onError() {
-
-            var errorCode = this.error ? (this.error.code || 0) : 0;
-            var errorMessage = this.error ? (this.error.message || '') : '';
-            console.error('media element error: ' + errorCode.toString() + ' ' + errorMessage);
-
-            var type;
-
-            switch (errorCode) {
-                case 1:
-                    // MEDIA_ERR_ABORTED
-                    // This will trigger when changing media while something is playing
-                    return;
-                case 2:
-                    // MEDIA_ERR_NETWORK
-                    type = 'network';
-                    break;
-                case 3:
-                    // MEDIA_ERR_DECODE
-                    if (self._hlsPlayer) {
-                        htmlMediaHelper.handleHlsJsMediaError(self);
-                        return;
-                    } else {
-                        type = 'mediadecodeerror';
-                    }
-                    break;
-                case 4:
-                    // MEDIA_ERR_SRC_NOT_SUPPORTED
-                    type = 'medianotsupported';
-                    break;
-                default:
-                    // seeing cases where Edge is firing error events with no error code
-                    // example is start playing something, then immediately change src to something else
-                    return;
-            }
-
-            htmlMediaHelper.onErrorInternal(self, type);
-        }
-    }
-
-    HtmlAudioPlayer.prototype.currentSrc = function () {
-        return this._currentSrc;
-    };
-
-    HtmlAudioPlayer.prototype.canPlayMediaType = function (mediaType) {
-
-        return (mediaType || '').toLowerCase() === 'audio';
-    };
-
-    HtmlAudioPlayer.prototype.getDeviceProfile = function (item) {
-
-        if (appHost.getDeviceProfile) {
-            return appHost.getDeviceProfile(item);
-        }
-
-        return getDefaultProfile();
-    };
-
-    // Save this for when playback stops, because querying the time at that point might return 0
-    HtmlAudioPlayer.prototype.currentTime = function (val) {
-
-        var mediaElement = this._mediaElement;
-        if (mediaElement) {
-            if (val != null) {
-                mediaElement.currentTime = val / 1000;
-                return;
-            }
-
-            var currentTime = this._currentTime;
-            if (currentTime) {
-                return currentTime * 1000;
-            }
-
-            return (mediaElement.currentTime || 0) * 1000;
-        }
-    };
-
-    HtmlAudioPlayer.prototype.duration = function (val) {
-
-        var mediaElement = this._mediaElement;
-        if (mediaElement) {
-            var duration = mediaElement.duration;
-            if (htmlMediaHelper.isValidDuration(duration)) {
-                return duration * 1000;
-            }
-        }
-
-        return null;
-    };
-
-    HtmlAudioPlayer.prototype.seekable = function () {
-        var mediaElement = this._mediaElement;
-        if (mediaElement) {
-
-            var seekable = mediaElement.seekable;
-            if (seekable && seekable.length) {
-
-                var start = seekable.start(0);
-                var end = seekable.end(0);
-
-                if (!htmlMediaHelper.isValidDuration(start)) {
-                    start = 0;
-                }
-                if (!htmlMediaHelper.isValidDuration(end)) {
-                    end = 0;
-                }
-
-                return (end - start) > 0;
-            }
-
-            return false;
-        }
-    };
-
-    HtmlAudioPlayer.prototype.getBufferedRanges = function () {
-        var mediaElement = this._mediaElement;
-        if (mediaElement) {
-
-            return htmlMediaHelper.getBufferedRanges(this, mediaElement);
-        }
-
-        return [];
-    };
-
-    HtmlAudioPlayer.prototype.pause = function () {
-        var mediaElement = this._mediaElement;
-        if (mediaElement) {
-            mediaElement.pause();
-        }
-    };
-
-    // This is a retry after error
-    HtmlAudioPlayer.prototype.resume = function () {
-        var mediaElement = this._mediaElement;
-        if (mediaElement) {
-            mediaElement.play();
-        }
-    };
-
-    HtmlAudioPlayer.prototype.unpause = function () {
-        var mediaElement = this._mediaElement;
-        if (mediaElement) {
-            mediaElement.play();
-        }
-    };
-
-    HtmlAudioPlayer.prototype.paused = function () {
-
-        var mediaElement = this._mediaElement;
-        if (mediaElement) {
-            return mediaElement.paused;
-        }
-
-        return false;
-    };
-
-    HtmlAudioPlayer.prototype.setVolume = function (val) {
-        var mediaElement = this._mediaElement;
-        if (mediaElement) {
-            mediaElement.volume = val / 100;
-        }
-    };
-
-    HtmlAudioPlayer.prototype.getVolume = function () {
-        var mediaElement = this._mediaElement;
-        if (mediaElement) {
-
-            return Math.min(Math.round(mediaElement.volume * 100), 100);
-        }
-    };
-
-    HtmlAudioPlayer.prototype.volumeUp = function () {
-        this.setVolume(Math.min(this.getVolume() + 2, 100));
-    };
-
-    HtmlAudioPlayer.prototype.volumeDown = function () {
-        this.setVolume(Math.max(this.getVolume() - 2, 0));
-    };
-
-    HtmlAudioPlayer.prototype.setMute = function (mute) {
-
-        var mediaElement = this._mediaElement;
-        if (mediaElement) {
-            mediaElement.muted = mute;
-        }
-    };
-
-    HtmlAudioPlayer.prototype.isMuted = function () {
-        var mediaElement = this._mediaElement;
-        if (mediaElement) {
-            return mediaElement.muted;
-        }
-        return false;
-    };
-
-    HtmlAudioPlayer.prototype.destroy = function () {
-
-    };
-
-    return HtmlAudioPlayer;
-});

src/components/htmlvideoplayer/style.css

@@ -1,71 +0,0 @@
-.videoPlayerContainer {
-    position: fixed !important;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    display: flex;
-    align-items: center;
-    background: #000 !important;
-}
-
-.videoPlayerContainer-onTop {
-    z-index: 1000;
-}
-
-.videoPlayerContainer .libassjs-canvas-parent {
-    order: -1;
-}
-
-video::-webkit-media-controls {
-    display: none !important;
-}
-
-.htmlvideoplayer {
-    margin: 0 !important;
-    padding: 0 !important;
-    width: 100%;
-    height: 100%;
-}
-
-.htmlvideoplayer::cue {
-    background-color: transparent;
-    text-shadow: 0.14em 0.14em 0.14em rgba(0, 0, 0, 1);
-    -webkit-font-smoothing: antialiased;
-    font-family: inherit;
-}
-
-.htmlvideoplayer-moveupsubtitles::-webkit-media-text-track-display {
-    /* style the text itself */
-    margin-top: -2em;
-}
-
-.videoSubtitles {
-    position: fixed;
-    bottom: 10%;
-    text-align: center;
-    left: 0;
-    right: 0;
-    color: #fff;
-    font-size: 170%;
-}
-
-.videoSubtitlesInner {
-    max-width: 70%;
-    background-color: rgba(0, 0, 0, 0.8);
-    padding: 0.25em;
-    margin: auto;
-    display: inline-block;
-}
-
-@keyframes htmlvideoplayer-zoomin {
-    from {
-        transform: scale3d(0.2, 0.2, 0.2);
-        opacity: 0.6;
-    }
-
-    to {
-        transform: none;
-        opacity: initial;
-    }
-}

src/components/imageDownloader/imageDownloader.js

@@ -1,24 +1,38 @@
-define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader', 'browser', 'layoutManager', 'scrollHelper', 'globalize', 'require', 'emby-checkbox', 'paper-icon-button-light', 'emby-button', 'formDialogStyle', 'cardStyle'], function (dom, loading, appHost, dialogHelper, connectionManager, imageLoader, browser, layoutManager, scrollHelper, globalize, require) {
-    'use strict';
+import dom from '../../scripts/dom';
+import loading from '../loading/loading';
+import { appHost } from '../apphost';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import imageLoader from '../images/imageLoader';
+import browser from '../../scripts/browser';
+import layoutManager from '../layoutManager';
+import scrollHelper from '../../scripts/scrollHelper';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-button/emby-button';
+import '../formdialog.css';
+import '../cardbuilder/card.css';
+import ServerConnections from '../ServerConnections';
 
-    var enableFocusTransform = !browser.slow && !browser.edge;
+/* eslint-disable indent */
 
-    var currentItemId;
-    var currentItemType;
-    var currentResolve;
-    var currentReject;
-    var hasChanges = false;
+    const enableFocusTransform = !browser.slow && !browser.edge;
+
+    let currentItemId;
+    let currentItemType;
+    let currentResolve;
+    let currentReject;
+    let hasChanges = false;
 
     // These images can be large and we're seeing memory problems in safari
-    var browsableImagePageSize = browser.slow ? 6 : 30;
+    const browsableImagePageSize = browser.slow ? 6 : 30;
 
-    var browsableImageStartIndex = 0;
-    var browsableImageType = 'Primary';
-    var selectedProvider;
+    let browsableImageStartIndex = 0;
+    let browsableImageType = 'Primary';
+    let selectedProvider;
 
     function getBaseRemoteOptions() {
-
-        var options = {};
+        const options = {};
 
         options.itemId = currentItemId;
 
@@ -26,58 +40,53 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
     }
 
     function reloadBrowsableImages(page, apiClient) {
-
         loading.show();
 
-        var options = getBaseRemoteOptions();
+        const options = getBaseRemoteOptions();
 
         options.type = browsableImageType;
         options.startIndex = browsableImageStartIndex;
         options.limit = browsableImagePageSize;
         options.IncludeAllLanguages = page.querySelector('#chkAllLanguages').checked;
 
-        var provider = selectedProvider || '';
+        const provider = selectedProvider || '';
 
         if (provider) {
             options.ProviderName = provider;
         }
 
         apiClient.getAvailableRemoteImages(options).then(function (result) {
-
             renderRemoteImages(page, apiClient, result, browsableImageType, options.startIndex, options.limit);
 
             page.querySelector('#selectBrowsableImageType').value = browsableImageType;
 
-            var providersHtml = result.Providers.map(function (p) {
+            const providersHtml = result.Providers.map(function (p) {
                 return '<option value="' + p + '">' + p + '</option>';
             });
 
-            var selectImageProvider = page.querySelector('#selectImageProvider');
+            const selectImageProvider = page.querySelector('#selectImageProvider');
             selectImageProvider.innerHTML = '<option value="">' + globalize.translate('All') + '</option>' + providersHtml;
             selectImageProvider.value = provider;
 
             loading.hide();
         });
-
     }
 
     function renderRemoteImages(page, apiClient, imagesResult, imageType, startIndex, limit) {
-
         page.querySelector('.availableImagesPaging').innerHTML = getPagingHtml(startIndex, limit, imagesResult.TotalRecordCount);
 
-        var html = '';
-
-        for (var i = 0, length = imagesResult.Images.length; i < length; i++) {
+        let html = '';
 
+        for (let i = 0, length = imagesResult.Images.length; i < length; i++) {
             html += getRemoteImageHtml(imagesResult.Images[i], imageType, apiClient);
         }
 
-        var availableImagesList = page.querySelector('.availableImagesList');
+        const availableImagesList = page.querySelector('.availableImagesList');
         availableImagesList.innerHTML = html;
         imageLoader.lazyChildren(availableImagesList);
 
-        var btnNextPage = page.querySelector('.btnNextPage');
-        var btnPreviousPage = page.querySelector('.btnPreviousPage');
+        const btnNextPage = page.querySelector('.btnNextPage');
+        const btnPreviousPage = page.querySelector('.btnPreviousPage');
 
         if (btnNextPage) {
             btnNextPage.addEventListener('click', function () {
@@ -92,23 +101,21 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
                 reloadBrowsableImages(page, apiClient);
             });
         }
-
     }
 
     function getPagingHtml(startIndex, limit, totalRecordCount) {
+        let html = '';
 
-        var html = '';
-
-        var recordsEnd = Math.min(startIndex + limit, totalRecordCount);
+        const recordsEnd = Math.min(startIndex + limit, totalRecordCount);
 
         // 20 is the minimum page size
-        var showControls = totalRecordCount > limit;
+        const showControls = totalRecordCount > limit;
 
         html += '<div class="listPaging">';
 
         html += '<span style="margin-right: 10px;">';
 
-        var startAtDisplay = totalRecordCount ? startIndex + 1 : 0;
+        const startAtDisplay = totalRecordCount ? startIndex + 1 : 0;
         html += globalize.translate('ListPaging', startAtDisplay, recordsEnd, totalRecordCount);
 
         html += '</span>';
@@ -127,7 +134,7 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
     }
 
     function downloadRemoteImage(page, apiClient, url, type, provider) {
-        var options = getBaseRemoteOptions();
+        const options = getBaseRemoteOptions();
 
         options.Type = type;
         options.ImageUrl = url;
@@ -136,9 +143,8 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
         loading.show();
 
         apiClient.downloadRemoteImage(options).then(function () {
-
             hasChanges = true;
-            var dlg = dom.parentWithClass(page, 'dialog');
+            const dlg = dom.parentWithClass(page, 'dialog');
             dialogHelper.close(dlg);
         });
     }
@@ -148,17 +154,17 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
     }
 
     function getRemoteImageHtml(image, imageType, apiClient) {
-        var tagName = layoutManager.tv ? 'button' : 'div';
-        var enableFooterButtons = !layoutManager.tv;
+        const tagName = layoutManager.tv ? 'button' : 'div';
+        const enableFooterButtons = !layoutManager.tv;
 
         // TODO move card creation code to Card component
 
-        var html = '';
+        let html = '';
 
-        var cssClass = 'card scalableCard imageEditorCard';
-        var cardBoxCssClass = 'cardBox visualCardBox';
+        let cssClass = 'card scalableCard imageEditorCard';
+        const cardBoxCssClass = 'cardBox visualCardBox';
 
-        var shape = 'backdrop';
+        let shape;
         if (imageType === 'Backdrop' || imageType === 'Art' || imageType === 'Thumb' || imageType === 'Logo') {
             shape = 'backdrop';
         } else if (imageType === 'Banner') {
@@ -166,7 +172,6 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
         } else if (imageType === 'Disc') {
             shape = 'square';
         } else {
-
             if (currentItemType === 'Episode') {
                 shape = 'backdrop';
             } else if (currentItemType === 'MusicAlbum' || currentItemType === 'MusicArtist') {
@@ -203,9 +208,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>';
@@ -217,19 +222,16 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
         html += '<div class="cardText cardTextCentered">' + image.ProviderName + '</div>';
 
         if (image.Width || image.Height || image.Language) {
-
             html += '<div class="cardText cardText-secondary cardTextCentered">';
 
             if (image.Width && image.Height) {
                 html += image.Width + ' x ' + image.Height;
 
                 if (image.Language) {
-
                     html += ' • ' + image.Language;
                 }
             } else {
                 if (image.Language) {
-
                     html += image.Language;
                 }
             }
@@ -238,13 +240,11 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
         }
 
         if (image.CommunityRating != null) {
-
             html += '<div class="cardText cardText-secondary cardTextCentered">';
 
             if (image.RatingType === 'Likes') {
                 html += image.CommunityRating + (image.CommunityRating === 1 ? ' like' : ' likes');
             } else {
-
                 if (image.CommunityRating) {
                     html += image.CommunityRating.toFixed(1);
 
@@ -270,7 +270,6 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
         // end footer
 
         html += '</div>';
-        //html += '</div>';
 
         html += '</' + tagName + '>';
 
@@ -287,7 +286,6 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
         });
 
         page.querySelector('#selectImageProvider').addEventListener('change', function () {
-
             browsableImageStartIndex = 0;
             selectedProvider = this.value;
 
@@ -295,22 +293,20 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
         });
 
         page.querySelector('#chkAllLanguages').addEventListener('change', function () {
-
             browsableImageStartIndex = 0;
 
             reloadBrowsableImages(page, apiClient);
         });
 
         page.addEventListener('click', function (e) {
-
-            var btnDownloadRemoteImage = dom.parentWithClass(e.target, 'btnDownloadRemoteImage');
+            const btnDownloadRemoteImage = dom.parentWithClass(e.target, 'btnDownloadRemoteImage');
             if (btnDownloadRemoteImage) {
-                var card = dom.parentWithClass(btnDownloadRemoteImage, 'card');
+                const card = dom.parentWithClass(btnDownloadRemoteImage, 'card');
                 downloadRemoteImage(page, apiClient, card.getAttribute('data-imageurl'), card.getAttribute('data-imagetype'), card.getAttribute('data-imageprovider'));
                 return;
             }
 
-            var btnImageCard = dom.parentWithClass(e.target, 'btnImageCard');
+            const btnImageCard = dom.parentWithClass(e.target, 'btnImageCard');
             if (btnImageCard) {
                 downloadRemoteImage(page, apiClient, btnImageCard.getAttribute('data-imageurl'), btnImageCard.getAttribute('data-imagetype'), btnImageCard.getAttribute('data-imageprovider'));
             }
@@ -320,26 +316,25 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
     function showEditor(itemId, serverId, itemType) {
         loading.show();
 
-        require(['text!./imagedownloader.template.html'], function (template) {
-
-            var apiClient = connectionManager.getApiClient(serverId);
+        import('./imageDownloader.template.html').then(({default: template}) => {
+            const apiClient = ServerConnections.getApiClient(serverId);
 
             currentItemId = itemId;
             currentItemType = itemType;
 
-            var dialogOptions = {
+            const dialogOptions = {
                 removeOnClose: true
             };
 
             if (layoutManager.tv) {
                 dialogOptions.size = 'fullscreen';
             } else {
-                dialogOptions.size = 'fullscreen-border';
+                dialogOptions.size = 'small';
             }
 
-            var dlg = dialogHelper.createDialog(dialogOptions);
+            const dlg = dialogHelper.createDialog(dialogOptions);
 
-            dlg.innerHTML = globalize.translateDocument(template, 'core');
+            dlg.innerHTML = globalize.translateHtml(template, 'core');
 
             if (layoutManager.tv) {
                 scrollHelper.centerFocus.on(dlg, false);
@@ -350,11 +345,10 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
 
             dialogHelper.open(dlg);
 
-            var editorContent = dlg.querySelector('.formDialogContent');
+            const editorContent = dlg.querySelector('.formDialogContent');
             initEditor(editorContent, apiClient);
 
             dlg.querySelector('.btnCancel').addEventListener('click', function () {
-
                 dialogHelper.close(dlg);
             });
 
@@ -363,7 +357,7 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
     }
 
     function onDialogClosed() {
-        var dlg = this;
+        const dlg = this;
 
         if (layoutManager.tv) {
             scrollHelper.centerFocus.off(dlg, false);
@@ -377,18 +371,20 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
         }
     }
 
-    return {
-        show: function (itemId, serverId, itemType, imageType) {
-            return new Promise(function (resolve, reject) {
-                currentResolve = resolve;
-                currentReject = reject;
-                hasChanges = false;
-                browsableImageStartIndex = 0;
-                browsableImageType = imageType || 'Primary';
-                selectedProvider = null;
+export function show(itemId, serverId, itemType, imageType) {
+    return new Promise(function (resolve, reject) {
+        currentResolve = resolve;
+        currentReject = reject;
+        hasChanges = false;
+        browsableImageStartIndex = 0;
+        browsableImageType = imageType || 'Primary';
+        selectedProvider = null;
+        showEditor(itemId, serverId, itemType);
+    });
+}
 
-                showEditor(itemId, serverId, itemType);
-            });
-        }
-    };
-});
+export default {
+    show: show
+};
+
+/* eslint-enable indent */

src/components/imageDownloader/imageDownloader.template.html

@@ -5,7 +5,7 @@
     </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,16 +1,27 @@
-define(['globalize', 'dom', 'dialogHelper', 'emby-checkbox', 'emby-select', 'emby-input'], function (globalize, dom, dialogHelper) {
-    'use strict';
+/* eslint-disable indent */
+
+/**
+ * Module for image Options Editor.
+ * @module components/imageOptionsEditor/imageOptionsEditor
+ */
+
+import globalize from '../../scripts/globalize';
+import dom from '../../scripts/dom';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-select/emby-select';
+import '../../elements/emby-input/emby-input';
 
     function getDefaultImageConfig(itemType, type) {
         return {
             Type: type,
             MinWidth: 0,
-            Limit: 'Primary' === type ? 1 : 0
+            Limit: type === 'Primary' ? 1 : 0
         };
     }
 
     function findImageOptions(imageOptions, type) {
-        return imageOptions.filter(function (i) {
+        return imageOptions.filter(i => {
             return i.Type == type;
         })[0];
     }
@@ -31,14 +42,14 @@ define(['globalize', 'dom', 'dialogHelper', 'emby-checkbox', 'emby-select', 'emb
     }
 
     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');
+        const supportedImageTypes = availableOptions.SupportedImageTypes || [];
+        setVisibilityOfBackdrops(context.querySelector('.backdropFields'), supportedImageTypes.includes('Backdrop'));
+        setVisibilityOfBackdrops(context.querySelector('.screenshotFields'), supportedImageTypes.includes('Screenshot'));
+        Array.prototype.forEach.call(context.querySelectorAll('.imageType'), i => {
+            const imageType = i.getAttribute('data-imagetype');
+            const container = dom.parentWithTag(i, 'LABEL');
 
-            if (-1 == supportedImageTypes.indexOf(imageType)) {
+            if (!supportedImageTypes.includes(imageType)) {
                 container.classList.add('hide');
             } else {
                 container.classList.remove('hide');
@@ -50,16 +61,16 @@ define(['globalize', 'dom', 'dialogHelper', 'emby-checkbox', 'emby-select', 'emb
                 i.checked = false;
             }
         });
-        var backdropConfig = getImageConfig(options, availableOptions, 'Backdrop', itemType);
+        const 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);
+        const 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)'), c => {
             return {
                 Type: c.getAttribute('data-imagetype'),
                 Limit: c.checked ? 1 : 0,
@@ -78,35 +89,36 @@ define(['globalize', 'dom', 'dialogHelper', 'emby-checkbox', 'emby-select', 'emb
         });
     }
 
-    function editor() {
-        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);
+    async function showEditor(itemType, options, availableOptions) {
+        const response = await fetch('components/imageOptionsEditor/imageOptionsEditor.template.html');
+        const template = await response.text();
 
-                xhr.onload = function (e) {
-                    var template = this.response;
-                    var dlg = dialogHelper.createDialog({
-                        size: 'medium-tall',
-                        removeOnClose: true,
-                        scrollY: false
-                    });
-                    dlg.classList.add('formDialog');
-                    dlg.innerHTML = globalize.translateDocument(template);
-                    dlg.addEventListener('close', function () {
-                        saveValues(dlg, options);
-                    });
-                    loadValues(dlg, itemType, options, availableOptions);
-                    dialogHelper.open(dlg).then(resolve, resolve);
-                    dlg.querySelector('.btnCancel').addEventListener('click', function () {
-                        dialogHelper.close(dlg);
-                    });
-                };
-
-                xhr.send();
-            });
-        };
+        const dlg = dialogHelper.createDialog({
+            size: 'small',
+            removeOnClose: true,
+            scrollY: false
+        });
+        dlg.classList.add('formDialog');
+        dlg.innerHTML = globalize.translateHtml(template);
+        dlg.addEventListener('close', function () {
+            saveValues(dlg, options);
+        });
+        loadValues(dlg, itemType, options, availableOptions);
+        dialogHelper.open(dlg).then(() => {
+            return;
+        }).catch(() => {
+            return;
+        });
+        dlg.querySelector('.btnCancel').addEventListener('click', function () {
+            dialogHelper.close(dlg);
+        });
     }
 
-    return editor;
-});
+export class editor {
+    constructor() {
+        this.show = showEditor;
+    }
+}
+
+/* eslint-enable indent */
+export default editor;

src/components/imageOptionsEditor/imageOptionsEditor.template.html

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

src/components/imageUploader/imageUploader.js

@@ -1,34 +1,45 @@
-define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', 'layoutManager', 'globalize', 'require', 'emby-button', 'emby-select', 'formDialogStyle', 'css!./style'], function (dialogHelper, connectionManager, dom, loading, scrollHelper, layoutManager, globalize, require) {
-    'use strict';
+/* eslint-disable indent */
 
-    var currentItemId;
-    var currentServerId;
-    var currentFile;
-    var hasChanges = false;
+/**
+ * Module for imageUploader.
+ * @module components/imageUploader/imageUploader
+ */
+
+import dialogHelper from '../dialogHelper/dialogHelper';
+import dom from '../../scripts/dom';
+import loading from '../loading/loading';
+import scrollHelper from '../../scripts/scrollHelper';
+import layoutManager from '../layoutManager';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-select/emby-select';
+import '../formdialog.css';
+import './style.css';
+import ServerConnections from '../ServerConnections';
+import toast from '../toast/toast';
+
+    let currentItemId;
+    let currentServerId;
+    let currentFile;
+    let hasChanges = false;
 
     function onFileReaderError(evt) {
-
         loading.hide();
 
         switch (evt.target.error.code) {
             case evt.target.error.NOT_FOUND_ERR:
-                require(['toast'], function (toast) {
-                    toast(globalize.translate('MessageFileReadError'));
-                });
+                toast(globalize.translate('MessageFileReadError'));
                 break;
             case evt.target.error.ABORT_ERR:
                 break; // noop
             default:
-                require(['toast'], function (toast) {
-                    toast(globalize.translate('MessageFileReadError'));
-                });
+                toast(globalize.translate('MessageFileReadError'));
                 break;
         }
     }
 
     function setFiles(page, files) {
-
-        var file = files[0];
+        const file = files[0];
 
         if (!file || !file.type.match('image.*')) {
             page.querySelector('#imageOutput').innerHTML = '';
@@ -39,25 +50,25 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
 
         currentFile = file;
 
-        var reader = new FileReader();
+        const reader = new FileReader();
 
         reader.onerror = onFileReaderError;
-        reader.onloadstart = function () {
+        reader.onloadstart = () => {
             page.querySelector('#fldUpload').classList.add('hide');
         };
-        reader.onabort = function () {
+        reader.onabort = () => {
             loading.hide();
             console.debug('File read cancelled');
         };
 
         // Closure to capture the file information.
-        reader.onload = (function (theFile) {
-            return function (e) {
-
+        reader.onload = (theFile => {
+            return e => {
                 // Render thumbnail.
-                var html = ['<img style="max-width:100%;max-height:100%;" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join('');
+                const html = ['<img style="max-width:100%;max-height:100%;" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join('');
 
                 page.querySelector('#imageOutput').innerHTML = html;
+                page.querySelector('#dropImageText').classList.add('hide');
                 page.querySelector('#fldUpload').classList.remove('hide');
             };
         })(file);
@@ -67,36 +78,30 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
     }
 
     function onSubmit(e) {
-
-        var file = currentFile;
+        const file = currentFile;
 
         if (!file) {
             return false;
         }
 
         if (!file.type.startsWith('image/')) {
-            require(['toast'], function (toast) {
-                toast(globalize.translate('MessageImageFileTypeAllowed'));
-            });
+            toast(globalize.translate('MessageImageFileTypeAllowed'));
             e.preventDefault();
             return false;
         }
 
         loading.show();
 
-        var dlg = dom.parentWithClass(this, 'dialog');
+        const dlg = dom.parentWithClass(this, 'dialog');
 
-        var imageType = dlg.querySelector('#selectImageType').value;
+        const imageType = dlg.querySelector('#selectImageType').value;
         if (imageType === 'None') {
-            require(['toast'], function(toast) {
-                toast(globalize.translate('MessageImageTypeNotSelected'));
-            });
+            toast(globalize.translate('MessageImageTypeNotSelected'));
             e.preventDefault();
             return false;
         }
 
-        connectionManager.getApiClient(currentServerId).uploadItemImage(currentItemId, imageType, file).then(function () {
-
+        ServerConnections.getApiClient(currentServerId).uploadItemImage(currentItemId, imageType, file).then(() => {
             dlg.querySelector('#uploadImage').value = '';
 
             loading.hide();
@@ -109,50 +114,46 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
     }
 
     function initEditor(page) {
-
         page.querySelector('form').addEventListener('submit', onSubmit);
 
         page.querySelector('#uploadImage').addEventListener('change', function () {
             setFiles(page, this.files);
         });
 
-        page.querySelector('.btnBrowse').addEventListener('click', function () {
+        page.querySelector('.btnBrowse').addEventListener('click', () => {
             page.querySelector('#uploadImage').click();
         });
     }
 
-    function showEditor(options, resolve, reject) {
-
+    function showEditor(options, resolve) {
         options = options || {};
 
-        require(['text!./imageuploader.template.html'], function (template) {
-
+        return import('./imageUploader.template.html').then(({default: template}) => {
             currentItemId = options.itemId;
             currentServerId = options.serverId;
 
-            var dialogOptions = {
+            const dialogOptions = {
                 removeOnClose: true
             };
 
             if (layoutManager.tv) {
                 dialogOptions.size = 'fullscreen';
             } else {
-                dialogOptions.size = 'fullscreen-border';
+                dialogOptions.size = 'small';
             }
 
-            var dlg = dialogHelper.createDialog(dialogOptions);
+            const dlg = dialogHelper.createDialog(dialogOptions);
 
             dlg.classList.add('formDialog');
 
-            dlg.innerHTML = globalize.translateDocument(template, 'core');
+            dlg.innerHTML = globalize.translateHtml(template, 'core');
 
             if (layoutManager.tv) {
                 scrollHelper.centerFocus.on(dlg, false);
             }
 
             // Has to be assigned a z-index after the call to .open()
-            dlg.addEventListener('close', function () {
-
+            dlg.addEventListener('close', () => {
                 if (layoutManager.tv) {
                     scrollHelper.centerFocus.off(dlg, false);
                 }
@@ -167,22 +168,21 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
 
             dlg.querySelector('#selectImageType').value = options.imageType || 'Primary';
 
-            dlg.querySelector('.btnCancel').addEventListener('click', function () {
-
+            dlg.querySelector('.btnCancel').addEventListener('click', () => {
                 dialogHelper.close(dlg);
             });
         });
     }
 
-    return {
-        show: function (options) {
+    export function show(options) {
+        return new Promise(resolve => {
+            hasChanges = false;
 
-            return new Promise(function (resolve, reject) {
+            showEditor(options, resolve);
+        });
+    }
 
-                hasChanges = false;
-
-                showEditor(options, resolve, reject);
-            });
-        }
-    };
-});
+/* eslint-enable indent */
+export default {
+    show: show
+};

src/components/imageUploader/imageUploader.template.html

@@ -5,7 +5,7 @@
     </h3>
 </div>
 
-<div class="formDialogContent">
+<div class="formDialogContent smoothScrollY">
     <div class="dialogContentInner">
 
         <form class="uploadItemImageForm" style="max-width: 100%;">
@@ -20,7 +20,7 @@
             </div>
             <div>
                 <div class="imageEditor-dropZone fieldDescription">
-                    <div>${LabelDropImageHere}</div>
+                    <div id="dropImageText">${LabelDropImageHere}</div>
                     <output id="imageOutput" class="flex align-items-center justify-content-center" style="position: absolute;top:0;left:0;right:0;bottom:0;width:100%;"></output>
                     <input type="file" accept="image/*" id="uploadImage" name="uploadImage" style="position: absolute;top:0;left:0;right:0;bottom:0;width:100%;opacity:0;" />
                 </div>

src/components/imageeditor/imageeditor.js

@@ -1,14 +1,31 @@
-define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager', 'focusManager', 'globalize', 'scrollHelper', 'imageLoader', 'require', 'browser', 'apphost', 'cardStyle', 'formDialogStyle', 'emby-button', 'paper-icon-button-light', 'css!./imageeditor'], function (dialogHelper, connectionManager, loading, dom, layoutManager, focusManager, globalize, scrollHelper, imageLoader, require, browser, appHost) {
-    'use strict';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import loading from '../loading/loading';
+import dom from '../../scripts/dom';
+import layoutManager from '../layoutManager';
+import focusManager from '../focusManager';
+import globalize from '../../scripts/globalize';
+import scrollHelper from '../../scripts/scrollHelper';
+import imageLoader from '../images/imageLoader';
+import browser from '../../scripts/browser';
+import { appHost } from '../apphost';
+import '../cardbuilder/card.css';
+import '../formdialog.css';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-button/paper-icon-button-light';
+import './imageeditor.css';
+import ServerConnections from '../ServerConnections';
+import alert from '../alert';
+import confirm from '../confirm/confirm';
 
-    var enableFocusTransform = !browser.slow && !browser.edge;
+/* eslint-disable indent */
 
-    var currentItem;
-    var hasChanges = false;
+    const enableFocusTransform = !browser.slow && !browser.edge;
+
+    let currentItem;
+    let hasChanges = false;
 
     function getBaseRemoteOptions() {
-
-        var options = {};
+        const options = {};
 
         options.itemId = currentItem.Id;
 
@@ -16,17 +33,15 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
     }
 
     function reload(page, item, focusContext) {
-
         loading.show();
 
-        var apiClient;
+        let apiClient;
 
         if (item) {
-            apiClient = connectionManager.getApiClient(item.ServerId);
+            apiClient = ServerConnections.getApiClient(item.ServerId);
             reloadItem(page, item, apiClient, focusContext);
         } else {
-
-            apiClient = connectionManager.getApiClient(currentItem.ServerId);
+            apiClient = ServerConnections.getApiClient(currentItem.ServerId);
             apiClient.getItem(apiClient.getCurrentUserId(), currentItem.Id).then(function (item) {
                 reloadItem(page, item, apiClient, focusContext);
             });
@@ -34,9 +49,8 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
     }
 
     function addListeners(container, className, eventName, fn) {
-
         container.addEventListener(eventName, function (e) {
-            var elem = dom.parentWithClass(e.target, className);
+            const elem = dom.parentWithClass(e.target, className);
             if (elem) {
                 fn.call(elem, e);
             }
@@ -44,14 +58,11 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
     }
 
     function reloadItem(page, item, apiClient, focusContext) {
-
         currentItem = item;
 
         apiClient.getRemoteImageProviders(getBaseRemoteOptions()).then(function (providers) {
-
-            var btnBrowseAllImages = page.querySelectorAll('.btnBrowseAllImages');
-            for (var i = 0, length = btnBrowseAllImages.length; i < length; i++) {
-
+            const btnBrowseAllImages = page.querySelectorAll('.btnBrowseAllImages');
+            for (let i = 0, length = btnBrowseAllImages.length; i < length; i++) {
                 if (providers.length) {
                     btnBrowseAllImages[i].classList.remove('hide');
                 } else {
@@ -60,7 +71,6 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
             }
 
             apiClient.getItemImageInfos(currentItem.Id).then(function (imageInfos) {
-
                 renderStandardImages(page, apiClient, item, imageInfos, providers);
                 renderBackdrops(page, apiClient, item, imageInfos, providers);
                 renderScreenshots(page, apiClient, item, imageInfos, providers);
@@ -74,7 +84,6 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
     }
 
     function getImageUrl(item, apiClient, type, index, options) {
-
         options = options || {};
         options.type = type;
         options.index = index;
@@ -94,13 +103,12 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
     }
 
     function getCardHtml(image, index, numImages, apiClient, imageProviders, imageSize, tagName, enableFooterButtons) {
-
         // TODO move card creation code to Card component
 
-        var html = '';
+        let html = '';
 
-        var cssClass = 'card scalableCard imageEditorCard';
-        var cardBoxCssClass = 'cardBox visualCardBox';
+        let cssClass = 'card scalableCard imageEditorCard';
+        const cardBoxCssClass = 'cardBox visualCardBox';
 
         cssClass += ' backdropCard backdropCard-scalable';
 
@@ -130,9 +138,9 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
 
         html += '<div class="cardContent">';
 
-        var imageUrl = getImageUrl(currentItem, apiClient, image.ImageType, image.ImageIndex, { maxWidth: imageSize });
+        const 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>';
@@ -153,7 +161,6 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
             html += '<div class="cardText cardTextCentered">';
 
             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') + '"><span class="material-icons chevron_left"></span></button>';
                 } else {
@@ -183,13 +190,10 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
     }
 
     function deleteImage(context, itemId, type, index, apiClient, enableConfirmation) {
-
-        var afterConfirm = function () {
+        const afterConfirm = function () {
             apiClient.deleteItemImage(itemId, type, index).then(function () {
-
                 hasChanges = true;
                 reload(context);
-
             });
         };
 
@@ -198,49 +202,36 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
             return;
         }
 
-        require(['confirm'], function (confirm) {
-
-            confirm({
-
-                text: globalize.translate('ConfirmDeleteImage'),
-                confirmText: globalize.translate('Delete'),
-                primary: 'delete'
-
-            }).then(afterConfirm);
-        });
+        confirm({
+            text: globalize.translate('ConfirmDeleteImage'),
+            confirmText: globalize.translate('Delete'),
+            primary: 'delete'
+        }).then(afterConfirm);
     }
 
     function moveImage(context, apiClient, itemId, type, index, newIndex, focusContext) {
-
         apiClient.updateItemImageIndex(itemId, type, index, newIndex).then(function () {
-
             hasChanges = true;
             reload(context, null, focusContext);
         }, function () {
-
-            require(['alert'], function (alert) {
-                alert(globalize.translate('DefaultErrorMessage'));
-            });
+            alert(globalize.translate('ErrorDefault'));
         });
     }
 
     function renderImages(page, item, apiClient, images, imageProviders, elem) {
+        let html = '';
 
-        var html = '';
-
-        var imageSize = 300;
-        var windowSize = dom.getWindowSize();
+        let imageSize = 300;
+        const windowSize = dom.getWindowSize();
         if (windowSize.innerWidth >= 1280) {
             imageSize = Math.round(windowSize.innerWidth / 4);
         }
 
-        var tagName = layoutManager.tv ? 'button' : 'div';
-        var enableFooterButtons = !layoutManager.tv;
-
-        for (var i = 0, length = images.length; i < length; i++) {
-
-            var image = images[i];
+        const tagName = layoutManager.tv ? 'button' : 'div';
+        const enableFooterButtons = !layoutManager.tv;
 
+        for (let i = 0, length = images.length; i < length; i++) {
+            const image = images[i];
             html += getCardHtml(image, i, length, apiClient, imageProviders, imageSize, tagName, enableFooterButtons);
         }
 
@@ -249,8 +240,7 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
     }
 
     function renderStandardImages(page, apiClient, item, imageInfos, imageProviders) {
-
-        var images = imageInfos.filter(function (i) {
+        const images = imageInfos.filter(function (i) {
             return i.ImageType !== 'Screenshot' && i.ImageType !== 'Backdrop' && i.ImageType !== 'Chapter';
         });
 
@@ -258,10 +248,8 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
     }
 
     function renderBackdrops(page, apiClient, item, imageInfos, imageProviders) {
-
-        var images = imageInfos.filter(function (i) {
+        const images = imageInfos.filter(function (i) {
             return i.ImageType === 'Backdrop';
-
         }).sort(function (a, b) {
             return a.ImageIndex - b.ImageIndex;
         });
@@ -275,10 +263,8 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
     }
 
     function renderScreenshots(page, apiClient, item, imageInfos, imageProviders) {
-
-        var images = imageInfos.filter(function (i) {
+        const images = imageInfos.filter(function (i) {
             return i.ImageType === 'Screenshot';
-
         }).sort(function (a, b) {
             return a.ImageIndex - b.ImageIndex;
         });
@@ -292,32 +278,26 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
     }
 
     function showImageDownloader(page, imageType) {
-
-        require(['imageDownloader'], function (ImageDownloader) {
-
+        import('../imageDownloader/imageDownloader').then((ImageDownloader) => {
             ImageDownloader.show(currentItem.Id, currentItem.ServerId, currentItem.Type, imageType).then(function () {
-
                 hasChanges = true;
                 reload(page);
             });
-
         });
     }
 
     function showActionSheet(context, imageCard) {
+        const itemId = imageCard.getAttribute('data-id');
+        const serverId = imageCard.getAttribute('data-serverid');
+        const apiClient = ServerConnections.getApiClient(serverId);
 
-        var itemId = imageCard.getAttribute('data-id');
-        var serverId = imageCard.getAttribute('data-serverid');
-        var apiClient = connectionManager.getApiClient(serverId);
+        const type = imageCard.getAttribute('data-imagetype');
+        const index = parseInt(imageCard.getAttribute('data-index'));
+        const providerCount = parseInt(imageCard.getAttribute('data-providers'));
+        const numImages = parseInt(imageCard.getAttribute('data-numimages'));
 
-        var type = imageCard.getAttribute('data-imagetype');
-        var index = parseInt(imageCard.getAttribute('data-index'));
-        var providerCount = parseInt(imageCard.getAttribute('data-providers'));
-        var numImages = parseInt(imageCard.getAttribute('data-numimages'));
-
-        require(['actionsheet'], function (actionSheet) {
-
-            var commands = [];
+        import('../actionSheet/actionSheet').then(({default: actionSheet}) => {
+            const commands = [];
 
             commands.push({
                 name: globalize.translate('Delete'),
@@ -353,9 +333,7 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
                 positionTo: imageCard
 
             }).then(function (id) {
-
                 switch (id) {
-
                     case 'delete':
                         deleteImage(context, itemId, type, index, apiClient, false);
                         break;
@@ -371,16 +349,14 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
                     default:
                         break;
                 }
-
             });
         });
     }
 
     function initEditor(context, options) {
-
-        var uploadButtons = context.querySelectorAll('.btnOpenUploadMenu');
-        var isFileInputSupported = appHost.supports('fileinput');
-        for (var i = 0, length = uploadButtons.length; i < length; i++) {
+        const uploadButtons = context.querySelectorAll('.btnOpenUploadMenu');
+        const isFileInputSupported = appHost.supports('fileinput');
+        for (let i = 0, length = uploadButtons.length; i < length; i++) {
             if (isFileInputSupported) {
                 uploadButtons[i].classList.remove('hide');
             } else {
@@ -389,10 +365,9 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
         }
 
         addListeners(context, 'btnOpenUploadMenu', 'click', function () {
-            var imageType = this.getAttribute('data-imagetype');
-
-            require(['imageUploader'], function (imageUploader) {
+            const imageType = this.getAttribute('data-imagetype');
 
+            import('../imageUploader/imageUploader').then(({default: imageUploader}) => {
                 imageUploader.show({
 
                     theme: options.theme,
@@ -401,7 +376,6 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
                     serverId: currentItem.ServerId
 
                 }).then(function (hasChanged) {
-
                     if (hasChanged) {
                         hasChanges = true;
                         reload(context);
@@ -423,48 +397,46 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
         });
 
         addListeners(context, 'btnDeleteImage', 'click', function () {
-            var type = this.getAttribute('data-imagetype');
-            var index = this.getAttribute('data-index');
+            const type = this.getAttribute('data-imagetype');
+            let index = this.getAttribute('data-index');
             index = index === 'null' ? null : parseInt(index);
-            var apiClient = connectionManager.getApiClient(currentItem.ServerId);
+            const apiClient = ServerConnections.getApiClient(currentItem.ServerId);
             deleteImage(context, currentItem.Id, type, index, apiClient, true);
         });
 
         addListeners(context, 'btnMoveImage', 'click', function () {
-            var type = this.getAttribute('data-imagetype');
-            var index = this.getAttribute('data-index');
-            var newIndex = this.getAttribute('data-newindex');
-            var apiClient = connectionManager.getApiClient(currentItem.ServerId);
+            const type = this.getAttribute('data-imagetype');
+            const index = this.getAttribute('data-index');
+            const newIndex = this.getAttribute('data-newindex');
+            const apiClient = ServerConnections.getApiClient(currentItem.ServerId);
             moveImage(context, apiClient, currentItem.Id, type, index, newIndex, dom.parentWithClass(this, 'itemsContainer'));
         });
     }
 
     function showEditor(options, resolve, reject) {
-
-        var itemId = options.itemId;
-        var serverId = options.serverId;
+        const itemId = options.itemId;
+        const serverId = options.serverId;
 
         loading.show();
 
-        require(['text!./imageeditor.template.html'], function (template) {
-            var apiClient = connectionManager.getApiClient(serverId);
+        import('./imageeditor.template.html').then(({default: template}) => {
+            const apiClient = ServerConnections.getApiClient(serverId);
             apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
-
-                var dialogOptions = {
+                const dialogOptions = {
                     removeOnClose: true
                 };
 
                 if (layoutManager.tv) {
                     dialogOptions.size = 'fullscreen';
                 } else {
-                    dialogOptions.size = 'fullscreen-border';
+                    dialogOptions.size = 'small';
                 }
 
-                var dlg = dialogHelper.createDialog(dialogOptions);
+                const dlg = dialogHelper.createDialog(dialogOptions);
 
                 dlg.classList.add('formDialog');
 
-                dlg.innerHTML = globalize.translateDocument(template, 'core');
+                dlg.innerHTML = globalize.translateHtml(template, 'core');
 
                 if (layoutManager.tv) {
                     scrollHelper.centerFocus.on(dlg, false);
@@ -474,7 +446,6 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
 
                 // Has to be assigned a z-index after the call to .open()
                 dlg.addEventListener('close', function () {
-
                     if (layoutManager.tv) {
                         scrollHelper.centerFocus.off(dlg, false);
                     }
@@ -493,22 +464,21 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
                 reload(dlg, item);
 
                 dlg.querySelector('.btnCancel').addEventListener('click', function () {
-
                     dialogHelper.close(dlg);
                 });
             });
         });
     }
 
-    return {
-        show: function (options) {
+export function show (options) {
+    return new Promise(function (resolve, reject) {
+        hasChanges = false;
+        showEditor(options, resolve, reject);
+    });
+}
 
-            return new Promise(function (resolve, reject) {
+export default {
+    show
+};
 
-                hasChanges = false;
-
-                showEditor(options, resolve, reject);
-            });
-        }
-    };
-});
+/* eslint-enable indent */

src/components/imageeditor/imageeditor.template.html

@@ -5,7 +5,7 @@
     </h3>
 </div>
 
-<div class="formDialogContent">
+<div class="formDialogContent smoothScrollY">
     <div class="dialogContentInner">
 
         <div id="imagesContainer">

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,6 +1,7 @@
-import * as lazyLoader from 'lazyLoader';
-import * as userSettings from 'userSettings';
-import 'css!./style';
+import * as lazyLoader from '../lazyLoader/lazyLoaderIntersectionObserver';
+import * as userSettings from '../../scripts/settings/userSettings';
+import { decode, isBlurhashValid } from 'blurhash';
+import './style.css';
 /* eslint-disable indent */
 
     export function lazyImage(elem, source = elem.getAttribute('data-src')) {
@@ -11,78 +12,136 @@ import 'css!./style';
         fillImageElement(elem, source);
     }
 
+    function itemBlurhashing(target, blurhashstr) {
+        if (isBlurhashValid(blurhashstr)) {
+            // Although the default values recommended by Blurhash developers is 32x32, a size of 18x18 seems to be the sweet spot for us,
+            // improving the performance and reducing the memory usage, while retaining almost full blur quality.
+            // Lower values had more visible pixelation
+            const width = 18;
+            const height = 18;
+            let pixels;
+            try {
+                pixels = decode(blurhashstr, width, height);
+            } catch (err) {
+                console.error('Blurhash decode error: ', err);
+                target.classList.add('non-blurhashable');
+                return;
+            }
+            const canvas = document.createElement('canvas');
+            canvas.width = width;
+            canvas.height = height;
+            const ctx = canvas.getContext('2d');
+            const imgData = ctx.createImageData(width, height);
+
+            imgData.data.set(pixels);
+            ctx.putImageData(imgData, 0, 0);
+
+            requestAnimationFrame(() => {
+                canvas.classList.add('blurhash-canvas');
+                if (userSettings.enableFastFadein()) {
+                    canvas.classList.add('lazy-blurhash-fadein-fast');
+                } else {
+                    canvas.classList.add('lazy-blurhash-fadein');
+                }
+
+                target.parentNode.insertBefore(canvas, target);
+                target.classList.add('blurhashed');
+                target.removeAttribute('data-blurhash');
+            });
+        }
+    }
+
     export function fillImage(entry) {
         if (!entry) {
             throw new Error('entry cannot be null');
         }
+        const target = entry.target;
+        let source = undefined;
 
-        var source = undefined;
-        if (entry.target) {
-            source = entry.target.getAttribute('data-src');
+        if (target) {
+            source = target.getAttribute('data-src');
         } else {
             source = entry;
         }
 
         if (entry.intersectionRatio > 0) {
-            if (source) fillImageElement(entry.target, source);
+            if (source) fillImageElement(target, source);
         } else if (!source) {
-            emptyImageElement(entry.target);
+            requestAnimationFrame(() => {
+                emptyImageElement(target);
+            });
         }
     }
 
     function fillImageElement(elem, url) {
         if (url === undefined) {
-            throw new Error('url cannot be undefined');
+            throw new TypeError('url cannot be undefined');
         }
 
-        let preloaderImg = new Image();
+        const preloaderImg = new Image();
         preloaderImg.src = url;
 
+        elem.classList.add('lazy-hidden');
+
         preloaderImg.addEventListener('load', () => {
-            if (elem.tagName !== 'IMG') {
-                elem.style.backgroundImage = "url('" + url + "')";
-            } else {
-                elem.setAttribute('src', url);
-            }
+            requestAnimationFrame(() => {
+                if (elem.tagName !== 'IMG') {
+                    elem.style.backgroundImage = "url('" + url + "')";
+                    if (elem.classList.contains('blurhashed')) {
+                        elem.style.backgroundColor = '#fff';
+                    }
+                } else {
+                    elem.setAttribute('src', url);
+                }
+                elem.removeAttribute('data-src');
 
-            if (userSettings.enableFastFadein()) {
-                elem.classList.add('lazy-image-fadein-fast');
-            } else {
-                elem.classList.add('lazy-image-fadein');
-            }
-
-            elem.removeAttribute('data-src');
+                elem.classList.remove('lazy-hidden');
+                if (userSettings.enableFastFadein()) {
+                    elem.classList.add('lazy-image-fadein-fast');
+                } else {
+                    elem.classList.add('lazy-image-fadein');
+                }
+            });
         });
     }
 
     function emptyImageElement(elem) {
-        var url;
+        let url;
 
         if (elem.tagName !== 'IMG') {
             url = elem.style.backgroundImage.slice(4, -1).replace(/"/g, '');
             elem.style.backgroundImage = 'none';
+            elem.style.backgroundColor = null;
         } else {
             url = elem.getAttribute('src');
             elem.setAttribute('src', '');
         }
-
         elem.setAttribute('data-src', url);
 
-        elem.classList.remove('lazy-image-fadein-fast');
-        elem.classList.remove('lazy-image-fadein');
+        elem.classList.remove('lazy-image-fadein-fast', 'lazy-image-fadein');
+        elem.classList.add('lazy-hidden');
     }
 
     export function lazyChildren(elem) {
+        if (userSettings.enableBlurhash()) {
+            for (const lazyElem of elem.querySelectorAll('.lazy')) {
+                const blurhashstr = lazyElem.getAttribute('data-blurhash');
+                if (!lazyElem.classList.contains('blurhashed', 'non-blurhashable') && blurhashstr) {
+                    itemBlurhashing(lazyElem, blurhashstr);
+                } else if (!blurhashstr && !lazyElem.classList.contains('blurhashed')) {
+                    lazyElem.classList.add('non-blurhashable');
+                }
+            }
+        }
+
         lazyLoader.lazyChildren(elem, fillImage);
     }
 
     export function getPrimaryImageAspectRatio(items) {
+        const values = [];
 
-        var values = [];
-
-        for (var i = 0, length = items.length; i < length; i++) {
-
-            var ratio = items[i].PrimaryImageAspectRatio || 0;
+        for (let i = 0, length = items.length; i < length; i++) {
+            const ratio = items[i].PrimaryImageAspectRatio || 0;
 
             if (!ratio) {
                 continue;
@@ -100,9 +159,9 @@ import 'css!./style';
             return a - b;
         });
 
-        var half = Math.floor(values.length / 2);
+        const half = Math.floor(values.length / 2);
 
-        var result;
+        let result;
 
         if (values.length % 2) {
             result = values[half];
@@ -111,13 +170,13 @@ import 'css!./style';
         }
 
         // If really close to 2:3 (poster image), just return 2:3
-        var aspect2x3 = 2 / 3;
+        const aspect2x3 = 2 / 3;
         if (Math.abs(aspect2x3 - result) <= 0.15) {
             return aspect2x3;
         }
 
         // If really close to 16:9 (episode image), just return 16:9
-        var aspect16x9 = 16 / 9;
+        const aspect16x9 = 16 / 9;
         if (Math.abs(aspect16x9 - result) <= 0.2) {
             return aspect16x9;
         }
@@ -128,7 +187,7 @@ import 'css!./style';
         }
 
         // If really close to 4:3 (poster image), just return 2:3
-        var aspect4x3 = 4 / 3;
+        const aspect4x3 = 4 / 3;
         if (Math.abs(aspect4x3 - result) <= 0.15) {
             return aspect4x3;
         }
@@ -137,15 +196,21 @@ import 'css!./style';
     }
 
     export function fillImages(elems) {
-
-        for (var i = 0, length = elems.length; i < length; i++) {
-            var elem = elems[0];
+        for (let i = 0, length = elems.length; i < length; i++) {
+            const elem = elems[0];
             fillImage(elem);
         }
     }
 
+    export function setLazyImage(element, url) {
+        element.classList.add('lazy');
+        element.setAttribute('data-src', url);
+        lazyImage(element);
+    }
+
 /* eslint-enable indent */
 export default {
+    setLazyImage: setLazyImage,
     fillImages: fillImages,
     fillImage: fillImage,
     lazyImage: lazyImage,

src/components/images/style.css

@@ -1,13 +1,42 @@
-.cardImageContainer.lazy {
+.lazy-image-fadein {
+    opacity: 1;
+    transition: opacity 0.5s;
+}
+
+.lazy-image-fadein-fast {
+    opacity: 1;
+    transition: opacity 0.1s;
+}
+
+.lazy-hidden {
     opacity: 0;
 }
 
-.cardImageContainer.lazy.lazy-image-fadein {
-    opacity: 1;
-    transition: opacity 0.7s;
+@keyframes fadein {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
 }
 
-.cardImageContainer.lazy.lazy-image-fadein-fast {
-    opacity: 1;
-    transition: opacity 0.2s;
+.lazy-blurhash-fadein-fast {
+    animation: fadein 0.1s;
+}
+
+.lazy-blurhash-fadein {
+    animation: fadein 0.4s;
+}
+
+.blurhash-canvas {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
 }

src/components/indicators/indicators.js

@@ -1,8 +1,8 @@
-import datetime from 'datetime';
-import itemHelper from 'itemHelper';
-import 'emby-progressbar';
-import 'css!./indicators.css';
-import 'material-icons';
+import datetime from '../../scripts/datetime';
+import itemHelper from '../itemHelper';
+import '../../elements/emby-progressbar/emby-progressbar';
+import './indicators.css';
+import 'material-design-icons-iconfont';
 
 export function enableProgressIndicator(item) {
     if (item.MediaType === 'Video' && item.Type !== 'TvChannel') {
@@ -82,7 +82,7 @@ export function enablePlayedIndicator(item) {
 
 export function getPlayedIndicatorHtml(item) {
     if (enablePlayedIndicator(item)) {
-        let userData = item.UserData || {};
+        const userData = item.UserData || {};
         if (userData.UnplayedItemCount) {
             return '<div class="countIndicator indicator">' + userData.UnplayedItemCount + '</div>';
         }
@@ -148,7 +148,7 @@ export function getTypeIndicator(item) {
     };
 
     const icon = iconT[item.Type];
-    return icon ? '<div class="indicator videoIndicator"><span class="material-icons indicatorIcon '+ icon +'"></span></div>' : '';
+    return icon ? '<div class="indicator videoIndicator"><span class="material-icons indicatorIcon ' + icon + '"></span></div>' : '';
 }
 
 export function getMissingIndicator(item) {

src/components/itemContextMenu.js

@@ -1,14 +1,22 @@
-define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', 'playbackManager', 'loading', 'appSettings', 'browser', 'actionsheet'], function (appHost, globalize, connectionManager, itemHelper, appRouter, playbackManager, loading, appSettings, browser, actionsheet) {
-    'use strict';
+import browser from '../scripts/browser';
+import globalize from '../scripts/globalize';
+import actionsheet from './actionSheet/actionSheet';
+import { appHost } from './apphost';
+import { appRouter } from './appRouter';
+import itemHelper from './itemHelper';
+import { playbackManager } from './playback/playbackmanager';
+import ServerConnections from './ServerConnections';
+import toast from './toast/toast';
 
-    function getCommands(options) {
-        var item = options.item;
-        var user = options.user;
+/* eslint-disable indent */
+    export function getCommands(options) {
+        const item = options.item;
+        const user = options.user;
 
-        var canPlay = playbackManager.canPlay(item);
-        var restrictOptions = (browser.operaTv || browser.web0s) && !user.Policy.IsAdministrator;
+        const canPlay = playbackManager.canPlay(item);
+        const restrictOptions = (browser.operaTv || browser.web0s) && !user.Policy.IsAdministrator;
 
-        var commands = [];
+        const commands = [];
 
         if (canPlay && item.MediaType !== 'Photo') {
             if (options.play !== false) {
@@ -28,6 +36,23 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
             }
         }
 
+        if (playbackManager.getCurrentPlayer() !== null) {
+            if (options.stopPlayback) {
+                commands.push({
+                    name: globalize.translate('StopPlayback'),
+                    id: 'stopPlayback',
+                    icon: 'stop'
+                });
+            }
+            if (options.clearQueue) {
+                commands.push({
+                    name: globalize.translate('ClearQueue'),
+                    id: 'clearQueue',
+                    icon: 'clear_all'
+                });
+            }
+        }
+
         if (playbackManager.canQueue(item)) {
             if (options.queue !== false) {
                 commands.push({
@@ -44,13 +69,6 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
                     icon: 'playlist_add'
                 });
             }
-
-            //if (options.queueAllFromHere) {
-            //    commands.push({
-            //        name: globalize.translate("QueueAllFromHere"),
-            //        id: "queueallfromhere"
-            //    });
-            //}
         }
 
         if (item.IsFolder || item.Type === 'MusicArtist' || item.Type === 'MusicGenre') {
@@ -124,7 +142,6 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
         }
 
         if (item.CanDelete && options.deleteItem !== false) {
-
             if (item.Type === 'Playlist' || item.Type === 'BoxSet') {
                 commands.push({
                     name: globalize.translate('Delete'),
@@ -161,10 +178,10 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
             });
         }
 
-        var canEdit = itemHelper.canEdit(user, item);
+        const 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');
+                const text = (item.Type === 'Timer' || item.Type === 'SeriesTimer') ? globalize.translate('Edit') : globalize.translate('EditMetadata');
                 commands.push({
                     name: text,
                     id: 'edit',
@@ -288,10 +305,11 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
                 icon: 'album'
             });
         }
-
-        if (options.openArtist !== false && item.ArtistItems && item.ArtistItems.length) {
+        // Show Album Artist by default, as a song can have multiple artists, which specific one would this option refer to?
+        // Although some albums can have multiple artists, it's not as common as songs.
+        if (options.openArtist !== false && item.AlbumArtists && item.AlbumArtists.length) {
             commands.push({
-                name: globalize.translate('ViewArtist'),
+                name: globalize.translate('ViewAlbumArtist'),
                 id: 'artist',
                 icon: 'person'
             });
@@ -311,31 +329,31 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
     }
 
     function executeCommand(item, id, options) {
-        var itemId = item.Id;
-        var serverId = item.ServerId;
-        var apiClient = connectionManager.getApiClient(serverId);
+        const itemId = item.Id;
+        const serverId = item.ServerId;
+        const apiClient = ServerConnections.getApiClient(serverId);
 
         return new Promise(function (resolve, reject) {
             switch (id) {
                 case 'addtocollection':
-                    require(['collectionEditor'], function (collectionEditor) {
-                        new collectionEditor().show({
+                    import('./collectionEditor/collectionEditor').then(({default: collectionEditor}) => {
+                        new collectionEditor({
                             items: [itemId],
                             serverId: serverId
                         }).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                     });
                     break;
                 case 'addtoplaylist':
-                    require(['playlistEditor'], function (playlistEditor) {
-                        new playlistEditor().show({
+                    import('./playlisteditor/playlisteditor').then(({default: playlistEditor}) => {
+                        new playlistEditor({
                             items: [itemId],
                             serverId: serverId
                         }).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                     });
                     break;
                 case 'download':
-                    require(['fileDownloader'], function (fileDownloader) {
-                        var downloadHref = apiClient.getItemDownloadUrl(itemId);
+                    import('../scripts/fileDownloader').then((fileDownloader) => {
+                        const downloadHref = apiClient.getItemDownloadUrl(itemId);
                         fileDownloader.download([{
                             url: downloadHref,
                             itemId: itemId,
@@ -346,19 +364,17 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
                         getResolveFunction(getResolveFunction(resolve, id), id)();
                     });
                     break;
-                case 'copy-stream':
-                    var downloadHref = apiClient.getItemDownloadUrl(itemId);
-                    var textAreaCopy = function () {
-                        var textArea = document.createElement('textarea');
+                case 'copy-stream': {
+                    const downloadHref = apiClient.getItemDownloadUrl(itemId);
+                    const textAreaCopy = function () {
+                        const 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'));
-                            });
+                            toast(globalize.translate('CopyStreamURLSuccess'));
                         } else {
                             prompt(globalize.translate('CopyStreamURL'), downloadHref);
                         }
@@ -371,17 +387,16 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
                     } else {
                         /* eslint-disable-next-line compat/compat */
                         navigator.clipboard.writeText(downloadHref).then(function () {
-                            require(['toast'], function (toast) {
-                                toast(globalize.translate('CopyStreamURLSuccess'));
-                            });
+                            toast(globalize.translate('CopyStreamURLSuccess'));
                         }).catch(function () {
                             textAreaCopy();
                         });
                     }
                     getResolveFunction(resolve, id)();
                     break;
+                }
                 case 'editsubtitles':
-                    require(['subtitleEditor'], function (subtitleEditor) {
+                    import('./subtitleeditor/subtitleeditor').then(({default: subtitleEditor}) => {
                         subtitleEditor.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                     });
                     break;
@@ -389,7 +404,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
                     editItem(apiClient, item).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                     break;
                 case 'editimages':
-                    require(['imageEditor'], function (imageEditor) {
+                    import('./imageeditor/imageeditor').then((imageEditor) => {
                         imageEditor.show({
                             itemId: itemId,
                             serverId: serverId
@@ -397,13 +412,13 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
                     });
                     break;
                 case 'identify':
-                    require(['itemIdentifier'], function (itemIdentifier) {
+                    import('./itemidentifier/itemidentifier').then((itemIdentifier) => {
                         itemIdentifier.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                     });
                     break;
                 case 'moremediainfo':
-                    require(['itemMediaInfo'], function (itemMediaInfo) {
-                        itemMediaInfo.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
+                    import('./itemMediaInfo/itemMediaInfo').then((itemMediaInfo) => {
+                        itemMediaInfo.show(itemId, serverId).then(getResolveFunction(resolve, id), getResolveFunction(resolve, id));
                     });
                     break;
                 case 'refresh':
@@ -430,8 +445,14 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
                     play(item, false, true, true);
                     getResolveFunction(resolve, id)();
                     break;
+                case 'stopPlayback':
+                    playbackManager.stop();
+                    break;
+                case 'clearQueue':
+                    playbackManager.clearQueue();
+                    break;
                 case 'record':
-                    require(['recordingCreator'], function (recordingCreator) {
+                    import('./recordingcreator/recordingcreator').then(({default: recordingCreator}) => {
                         recordingCreator.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                     });
                     break;
@@ -450,7 +471,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
                     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':
@@ -458,7 +479,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
                     getResolveFunction(resolve, id)();
                     break;
                 case 'artist':
-                    appRouter.showItem(item.ArtistItems[0].Id, item.ServerId);
+                    appRouter.showItem(item.AlbumArtists[0].Id, item.ServerId);
                     getResolveFunction(resolve, id)();
                     break;
                 case 'playallfromhere':
@@ -502,8 +523,8 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
     }
 
     function deleteTimer(apiClient, item, resolve, command) {
-        require(['recordingHelper'], function (recordingHelper) {
-            var timerId = item.TimerId || item.Id;
+        import('./recordingcreator/recordinghelper').then(({default: recordingHelper}) => {
+            const timerId = item.TimerId || item.Id;
             recordingHelper.cancelTimerWithConfirmation(timerId, item.ServerId).then(function () {
                 getResolveFunction(resolve, command, true)();
             });
@@ -511,7 +532,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
     }
 
     function deleteSeriesTimer(apiClient, item, resolve, command) {
-        require(['recordingHelper'], function (recordingHelper) {
+        import('./recordingcreator/recordinghelper').then(({default: recordingHelper}) => {
             recordingHelper.cancelSeriesTimerWithConfirmation(item.Id, item.ServerId).then(function () {
                 getResolveFunction(resolve, command, true)();
             });
@@ -519,9 +540,9 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
     }
 
     function play(item, resume, queue, queueNext) {
-        var method = queue ? (queueNext ? 'queueNext' : 'queue') : 'play';
+        const method = queue ? (queueNext ? 'queueNext' : 'queue') : 'play';
 
-        var startPosition = 0;
+        let startPosition = 0;
         if (resume && item.UserData && item.UserData.PlaybackPositionTicks) {
             startPosition = item.UserData.PlaybackPositionTicks;
         }
@@ -542,18 +563,18 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
 
     function editItem(apiClient, item) {
         return new Promise(function (resolve, reject) {
-            var serverId = apiClient.serverInfo().Id;
+            const serverId = apiClient.serverInfo().Id;
 
             if (item.Type === 'Timer') {
-                require(['recordingEditor'], function (recordingEditor) {
+                import('./recordingcreator/recordingeditor').then(({default: recordingEditor}) => {
                     recordingEditor.show(item.Id, serverId).then(resolve, reject);
                 });
             } else if (item.Type === 'SeriesTimer') {
-                require(['seriesRecordingEditor'], function (recordingEditor) {
+                import('./recordingcreator/seriesrecordingeditor').then(({default: recordingEditor}) => {
                     recordingEditor.show(item.Id, serverId).then(resolve, reject);
                 });
             } else {
-                require(['metadataEditor'], function (metadataEditor) {
+                import('./metadataEditor/metadataEditor').then(({default: metadataEditor}) => {
                     metadataEditor.show(item.Id, serverId).then(resolve, reject);
                 });
             }
@@ -562,7 +583,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
 
     function deleteItem(apiClient, item) {
         return new Promise(function (resolve, reject) {
-            require(['deleteHelper'], function (deleteHelper) {
+            import('../scripts/deleteHelper').then((deleteHelper) => {
                 deleteHelper.deleteItem({
                     item: item,
                     navigate: false
@@ -574,7 +595,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
     }
 
     function refresh(apiClient, item) {
-        require(['refreshDialog'], function (refreshDialog) {
+        import('./refreshdialog/refreshdialog').then(({default: refreshDialog}) => {
             new refreshDialog({
                 itemIds: [item.Id],
                 serverId: apiClient.serverInfo().Id,
@@ -583,8 +604,8 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
         });
     }
 
-    function show(options) {
-        var commands = getCommands(options);
+    export function show(options) {
+        const commands = getCommands(options);
         if (!commands.length) {
             return Promise.reject();
         }
@@ -598,8 +619,9 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
         });
     }
 
-    return {
-        getCommands: getCommands,
-        show: show
-    };
-});
+/* eslint-enable indent */
+
+export default {
+    getCommands: getCommands,
+    show: show
+};

src/components/itemHelper.js

@@ -0,0 +1,350 @@
+import { appHost } from './apphost';
+import globalize from '../scripts/globalize';
+
+export function getDisplayName(item, options = {}) {
+    if (!item) {
+        throw new Error('null item passed into getDisplayName');
+    }
+
+    if (item.Type === 'Timer') {
+        item = item.ProgramInfo || item;
+    }
+
+    let name = ((item.Type === 'Program' || item.Type === 'Recording') && (item.IsSeries || item.EpisodeTitle) ? item.EpisodeTitle : item.Name) || '';
+
+    if (item.Type === 'TvChannel') {
+        if (item.ChannelNumber) {
+            return item.ChannelNumber + ' ' + name;
+        }
+        return name;
+    }
+    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) {
+        let displayIndexNumber = item.IndexNumber;
+
+        let number = displayIndexNumber;
+        let nameSeparator = ' - ';
+
+        if (options.includeParentInfo !== false) {
+            number = 'S' + item.ParentIndexNumber + ':E' + number;
+        } else {
+            nameSeparator = '. ';
+        }
+
+        if (item.IndexNumberEnd) {
+            displayIndexNumber = item.IndexNumberEnd;
+            number += '-' + displayIndexNumber;
+        }
+
+        if (number) {
+            name = name ? (number + nameSeparator + name) : number;
+        }
+    }
+
+    return name;
+}
+
+export function supportsAddingToCollection(item) {
+    const invalidTypes = ['Genre', 'MusicGenre', 'Studio', 'UserView', 'CollectionFolder', 'Audio', 'Program', 'Timer', 'SeriesTimer'];
+
+    if (item.Type === 'Recording') {
+        if (item.Status !== 'Completed') {
+            return false;
+        }
+    }
+
+    return !item.CollectionType && invalidTypes.indexOf(item.Type) === -1 && item.MediaType !== 'Photo' && !isLocalItem(item);
+}
+
+export function supportsAddingToPlaylist(item) {
+    if (item.Type === 'Program') {
+        return false;
+    }
+    if (item.Type === 'TvChannel') {
+        return false;
+    }
+    if (item.Type === 'Timer') {
+        return false;
+    }
+    if (item.Type === 'SeriesTimer') {
+        return false;
+    }
+    if (item.MediaType === 'Photo') {
+        return false;
+    }
+
+    if (item.Type === 'Recording') {
+        if (item.Status !== 'Completed') {
+            return false;
+        }
+    }
+
+    if (isLocalItem(item)) {
+        return false;
+    }
+    if (item.CollectionType === 'livetv') {
+        return false;
+    }
+
+    return item.MediaType || item.IsFolder || item.Type === 'Genre' || item.Type === 'MusicGenre' || item.Type === 'MusicArtist';
+}
+
+export function canEdit(user, item) {
+    const itemType = item.Type;
+
+    if (itemType === 'UserRootFolder' || itemType === 'UserView') {
+        return false;
+    }
+
+    if (itemType === 'Program') {
+        return false;
+    }
+
+    if (itemType === 'Timer') {
+        return false;
+    }
+
+    if (itemType === 'SeriesTimer') {
+        return false;
+    }
+
+    if (item.Type === 'Recording') {
+        if (item.Status !== 'Completed') {
+            return false;
+        }
+    }
+
+    if (isLocalItem(item)) {
+        return false;
+    }
+
+    return user.Policy.IsAdministrator;
+}
+
+export function isLocalItem(item) {
+    if (item && item.Id && item.Id.indexOf('local') === 0) {
+        return true;
+    }
+
+    return false;
+}
+
+export function canIdentify (user, item) {
+    const itemType = item.Type;
+
+    if (itemType === 'Movie' ||
+        itemType === 'Trailer' ||
+        itemType === 'Series' ||
+        itemType === 'BoxSet' ||
+        itemType === 'Person' ||
+        itemType === 'Book' ||
+        itemType === 'MusicAlbum' ||
+        itemType === 'MusicArtist' ||
+        itemType === 'MusicVideo') {
+        if (user.Policy.IsAdministrator) {
+            if (!isLocalItem(item)) {
+                return true;
+            }
+        }
+    }
+
+    return false;
+}
+
+export function canEditImages (user, item) {
+    const itemType = item.Type;
+
+    if (item.MediaType === 'Photo') {
+        return false;
+    }
+
+    if (itemType === 'UserView') {
+        if (user.Policy.IsAdministrator) {
+            return true;
+        }
+
+        return false;
+    }
+
+    if (item.Type === 'Recording') {
+        if (item.Status !== 'Completed') {
+            return false;
+        }
+    }
+
+    return itemType !== 'Timer' && itemType !== 'SeriesTimer' && canEdit(user, item) && !isLocalItem(item);
+}
+
+export function canSync (user, item) {
+    if (user && !user.Policy.EnableContentDownloading) {
+        return false;
+    }
+
+    if (isLocalItem(item)) {
+        return false;
+    }
+
+    return item.SupportsSync;
+}
+
+export function canShare (item, user) {
+    if (item.Type === 'Program') {
+        return false;
+    }
+    if (item.Type === 'TvChannel') {
+        return false;
+    }
+    if (item.Type === 'Timer') {
+        return false;
+    }
+    if (item.Type === 'SeriesTimer') {
+        return false;
+    }
+    if (item.Type === 'Recording') {
+        if (item.Status !== 'Completed') {
+            return false;
+        }
+    }
+    if (isLocalItem(item)) {
+        return false;
+    }
+    return user.Policy.EnablePublicSharing && appHost.supports('sharing');
+}
+
+export function enableDateAddedDisplay (item) {
+    return !item.IsFolder && item.MediaType && item.Type !== 'Program' && item.Type !== 'TvChannel' && item.Type !== 'Trailer';
+}
+
+export function canMarkPlayed (item) {
+    if (item.Type === 'Program') {
+        return false;
+    }
+
+    if (item.MediaType === 'Video') {
+        if (item.Type !== 'TvChannel') {
+            return true;
+        }
+    } else if (item.MediaType === 'Audio') {
+        if (item.Type === 'AudioPodcast') {
+            return true;
+        }
+        if (item.Type === 'AudioBook') {
+            return true;
+        }
+    }
+
+    if (item.Type === 'Series' ||
+        item.Type === 'Season' ||
+        item.Type === 'BoxSet' ||
+        item.MediaType === 'Book' ||
+        item.MediaType === 'Recording') {
+        return true;
+    }
+
+    return false;
+}
+
+export function canRate (item) {
+    if (item.Type === 'Program'
+        || item.Type === 'Timer'
+        || item.Type === 'SeriesTimer'
+        || item.Type === 'CollectionFolder'
+        || item.Type === 'UserView'
+        || item.Type === 'Channel'
+        || !item.UserData) {
+        return false;
+    }
+
+    return true;
+}
+
+export function canConvert (item, user) {
+    if (!user.Policy.EnableMediaConversion) {
+        return false;
+    }
+
+    if (isLocalItem(item)) {
+        return false;
+    }
+
+    const mediaType = item.MediaType;
+    if (mediaType === 'Book' || mediaType === 'Photo' || mediaType === 'Audio') {
+        return false;
+    }
+
+    const collectionType = item.CollectionType;
+    if (collectionType === 'livetv') {
+        return false;
+    }
+
+    const type = item.Type;
+    if (type === 'Channel' || type === 'Person' || type === 'Year' || type === 'Program' || type === 'Timer' || type === 'SeriesTimer') {
+        return false;
+    }
+
+    if (item.LocationType === 'Virtual' && !item.IsFolder) {
+        return false;
+    }
+
+    if (item.IsPlaceHolder) {
+        return false;
+    }
+
+    return true;
+}
+
+export function canRefreshMetadata (item, user) {
+    if (user.Policy.IsAdministrator) {
+        const collectionType = item.CollectionType;
+        if (collectionType === 'livetv') {
+            return false;
+        }
+
+        if (item.Type !== 'Timer' && item.Type !== 'SeriesTimer' && item.Type !== 'Program' && item.Type !== 'TvChannel' && !(item.Type === 'Recording' && item.Status !== 'Completed')) {
+            if (!isLocalItem(item)) {
+                return true;
+            }
+        }
+    }
+
+    return false;
+}
+
+export function supportsMediaSourceSelection (item) {
+    if (item.MediaType !== 'Video') {
+        return false;
+    }
+    if (item.Type === 'TvChannel') {
+        return false;
+    }
+    if (!item.MediaSources || (item.MediaSources.length === 1 && item.MediaSources[0].Type === 'Placeholder')) {
+        return false;
+    }
+    if (item.EnableMediaSourceDisplay === false) {
+        return false;
+    }
+    if (item.EnableMediaSourceDisplay == null && item.SourceType && item.SourceType !== 'Library') {
+        return false;
+    }
+
+    return true;
+}
+
+export default {
+    getDisplayName: getDisplayName,
+    supportsAddingToCollection: supportsAddingToCollection,
+    supportsAddingToPlaylist: supportsAddingToPlaylist,
+    isLocalItem: isLocalItem,
+    canIdentify: canIdentify,
+    canEdit: canEdit,
+    canEditImages: canEditImages,
+    canSync: canSync,
+    canShare: canShare,
+    enableDateAddedDisplay: enableDateAddedDisplay,
+    canMarkPlayed: canMarkPlayed,
+    canRate: canRate,
+    canConvert: canConvert,
+    canRefreshMetadata: canRefreshMetadata,
+    supportsMediaSourceSelection: supportsMediaSourceSelection
+};

src/components/itemMediaInfo/itemMediaInfo.js

@@ -1,44 +1,75 @@
-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';
+/* eslint-disable indent */
+
+/**
+ * Module for display media info.
+ * @module components/itemMediaInfo/itemMediaInfo
+ */
+
+import dialogHelper from '../dialogHelper/dialogHelper';
+import layoutManager from '../layoutManager';
+import globalize from '../../scripts/globalize';
+import loading from '../loading/loading';
+import '../../elements/emby-select/emby-select';
+import '../listview/listview.css';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../formdialog.css';
+import 'material-design-icons-iconfont';
+import '../../assets/css/flexstyles.scss';
+import ServerConnections from '../ServerConnections';
 
     function setMediaInfo(user, page, item) {
-        var html = item.MediaSources.map(function (version) {
+        let html = item.MediaSources.map(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');
+        const mediaInfoContent = page.querySelector('#mediaInfoContent');
         mediaInfoContent.innerHTML = html;
     }
 
     function getMediaSourceHtml(user, item, version) {
-        var html = '';
+        let 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/>';
+            const 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];
+        for (let i = 0, length = version.MediaStreams.length; i < length; i++) {
+            const stream = version.MediaStreams[i];
             if (stream.Type === 'Data') {
                 continue;
             }
+
             html += '<div class="mediaInfoStream">';
-            var displayType = globalize.translate('MediaInfoStreamType' + stream.Type);
-            html += '<h2 class="mediaInfoStreamType">' + displayType + '</h2>';
-            var attributes = [];
+            let translateString;
+            switch (stream.Type) {
+                case 'Audio':
+                case 'Data':
+                case 'Subtitle':
+                case 'Video':
+                    translateString = stream.Type;
+                    break;
+                case 'EmbeddedImage':
+                    translateString = 'Image';
+                    break;
+            }
+
+            const displayType = globalize.translate(translateString);
+            html += `<h2 class="mediaInfoStreamType">${displayType}</h2>`;
+            const attributes = [];
             if (stream.DisplayTitle) {
                 attributes.push(createAttribute('Title', stream.DisplayTitle));
             }
@@ -61,7 +92,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
                 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));
@@ -79,16 +110,28 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
                 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'));
+                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.VideoRange) {
+                attributes.push(createAttribute(globalize.translate('MediaInfoVideoRange'), stream.VideoRange));
+            }
+            if (stream.ColorSpace) {
+                attributes.push(createAttribute(globalize.translate('MediaInfoColorSpace'), stream.ColorSpace));
+            }
+            if (stream.ColorTransfer) {
+                attributes.push(createAttribute(globalize.translate('MediaInfoColorTransfer'), stream.ColorTransfer));
+            }
+            if (stream.ColorPrimaries) {
+                attributes.push(createAttribute(globalize.translate('MediaInfoColorPrimaries'), stream.ColorPrimaries));
             }
             if (stream.PixelFormat) {
                 attributes.push(createAttribute(globalize.translate('MediaInfoPixelFormat'), stream.PixelFormat));
@@ -116,13 +159,13 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
     }
 
     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 = {
+    function loadMediaInfo(itemId, serverId, template) {
+        const apiClient = ServerConnections.getApiClient(serverId);
+        return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(item => {
+            const dialogOptions = {
                 size: 'small',
                 removeOnClose: true,
                 scrollY: false
@@ -130,35 +173,35 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
             if (layoutManager.tv) {
                 dialogOptions.size = 'fullscreen';
             }
-            var dlg = dialogHelper.createDialog(dialogOptions);
+            const dlg = dialogHelper.createDialog(dialogOptions);
             dlg.classList.add('formDialog');
-            var html = '';
-            html += globalize.translateDocument(template, 'core');
+            let html = '';
+            html += globalize.translateHtml(template, 'core');
             dlg.innerHTML = html;
             if (layoutManager.tv) {
                 dlg.querySelector('.formDialogContent');
             }
             dialogHelper.open(dlg);
-            dlg.querySelector('.btnCancel').addEventListener('click', function (e) {
+            dlg.querySelector('.btnCancel').addEventListener('click', () => {
                 dialogHelper.close(dlg);
             });
-            apiClient.getCurrentUser().then(function (user) {
+            apiClient.getCurrentUser().then(user => {
                 setMediaInfo(user, dlg, item);
             });
             loading.hide();
         });
     }
 
-    function showMediaInfo(itemId, serverId) {
+    export function show(itemId, serverId) {
         loading.show();
-        return new Promise(function (resolve, reject) {
-            require(['text!./itemMediaInfo.template.html'], function (template) {
-                showMediaInfoMore(itemId, serverId, template).then(resolve, reject);
+        return import('./itemMediaInfo.template.html').then(({default: template}) => {
+            return new Promise((resolve, reject) => {
+                loadMediaInfo(itemId, serverId, template).then(resolve, reject);
             });
         });
     }
 
-    return {
-        show: showMediaInfo
-    };
-});
+/* eslint-enable indent */
+export default {
+    show: show
+};

src/components/itemMediaInfo/itemMediaInfo.template.html

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

src/components/itemhelper.js

@@ -1,365 +0,0 @@
-define(['apphost', 'globalize'], function (appHost, globalize) {
-    'use strict';
-
-    function getDisplayName(item, options) {
-
-        if (!item) {
-            throw new Error('null item passed into getDisplayName');
-        }
-
-        options = options || {};
-
-        if (item.Type === 'Timer') {
-            item = item.ProgramInfo || item;
-        }
-
-        var name = ((item.Type === 'Program' || item.Type === 'Recording') && (item.IsSeries || item.EpisodeTitle) ? item.EpisodeTitle : item.Name) || '';
-
-        if (item.Type === 'TvChannel') {
-            if (item.ChannelNumber) {
-                return item.ChannelNumber + ' ' + name;
-            }
-            return name;
-        }
-        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) {
-
-            var displayIndexNumber = item.IndexNumber;
-
-            var number = displayIndexNumber;
-            var nameSeparator = ' - ';
-
-            if (options.includeParentInfo !== false) {
-                number = 'S' + item.ParentIndexNumber + ':E' + number;
-            } else {
-                nameSeparator = '. ';
-            }
-
-            if (item.IndexNumberEnd) {
-
-                displayIndexNumber = item.IndexNumberEnd;
-                number += '-' + displayIndexNumber;
-            }
-
-            if (number) {
-                name = name ? (number + nameSeparator + name) : number;
-            }
-        }
-
-        return name;
-    }
-
-    function supportsAddingToCollection(item) {
-
-        var invalidTypes = ['Genre', 'MusicGenre', 'Studio', 'UserView', 'CollectionFolder', 'Audio', 'Program', 'Timer', 'SeriesTimer'];
-
-        if (item.Type === 'Recording') {
-            if (item.Status !== 'Completed') {
-                return false;
-            }
-        }
-
-        return !item.CollectionType && invalidTypes.indexOf(item.Type) === -1 && item.MediaType !== 'Photo' && !isLocalItem(item);
-    }
-
-    function supportsAddingToPlaylist(item) {
-
-        if (item.Type === 'Program') {
-            return false;
-        }
-        if (item.Type === 'TvChannel') {
-            return false;
-        }
-        if (item.Type === 'Timer') {
-            return false;
-        }
-        if (item.Type === 'SeriesTimer') {
-            return false;
-        }
-        if (item.MediaType === 'Photo') {
-            return false;
-        }
-
-        if (item.Type === 'Recording') {
-            if (item.Status !== 'Completed') {
-                return false;
-            }
-        }
-
-        if (isLocalItem(item)) {
-            return false;
-        }
-        if (item.CollectionType === 'livetv') {
-            return false;
-        }
-
-        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') {
-            return false;
-        }
-
-        if (itemType === 'Program') {
-            return false;
-        }
-
-        if (itemType === 'Timer') {
-            return false;
-        }
-
-        if (itemType === 'SeriesTimer') {
-            return false;
-        }
-
-        if (item.Type === 'Recording') {
-            if (item.Status !== 'Completed') {
-                return false;
-            }
-        }
-
-        if (isLocalItem(item)) {
-            return false;
-        }
-
-        return user.Policy.IsAdministrator;
-    }
-
-    function isLocalItem(item) {
-
-        if (item && item.Id && item.Id.indexOf('local') === 0) {
-            return true;
-        }
-
-        return false;
-    }
-
-    return {
-        getDisplayName: getDisplayName,
-        supportsAddingToCollection: supportsAddingToCollection,
-        supportsAddingToPlaylist: supportsAddingToPlaylist,
-        isLocalItem: isLocalItem,
-
-        canIdentify: function (user, item) {
-
-            var itemType = item.Type;
-
-            if (itemType === 'Movie' ||
-                itemType === 'Trailer' ||
-                itemType === 'Series' ||
-                itemType === 'BoxSet' ||
-                itemType === 'Person' ||
-                itemType === 'Book' ||
-                itemType === 'MusicAlbum' ||
-                itemType === 'MusicArtist' ||
-                itemType === 'MusicVideo') {
-
-                if (user.Policy.IsAdministrator) {
-
-                    if (!isLocalItem(item)) {
-                        return true;
-                    }
-                }
-            }
-
-            return false;
-        },
-
-        canEdit: canEdit,
-
-        canEditImages: function (user, item) {
-
-            var itemType = item.Type;
-
-            if (item.MediaType === 'Photo') {
-                return false;
-            }
-
-            if (itemType === 'UserView') {
-                if (user.Policy.IsAdministrator) {
-
-                    return true;
-                }
-
-                return false;
-            }
-
-            if (item.Type === 'Recording') {
-                if (item.Status !== 'Completed') {
-                    return false;
-                }
-            }
-
-            return itemType !== 'Timer' && itemType !== 'SeriesTimer' && canEdit(user, item) && !isLocalItem(item);
-        },
-
-        canSync: function (user, item) {
-
-            if (user && !user.Policy.EnableContentDownloading) {
-                return false;
-            }
-
-            if (isLocalItem(item)) {
-                return false;
-            }
-
-            return item.SupportsSync;
-        },
-
-        canShare: function (item, user) {
-
-            if (item.Type === 'Program') {
-                return false;
-            }
-            if (item.Type === 'TvChannel') {
-                return false;
-            }
-            if (item.Type === 'Timer') {
-                return false;
-            }
-            if (item.Type === 'SeriesTimer') {
-                return false;
-            }
-            if (item.Type === 'Recording') {
-                if (item.Status !== 'Completed') {
-                    return false;
-                }
-            }
-            if (isLocalItem(item)) {
-                return false;
-            }
-            return user.Policy.EnablePublicSharing && appHost.supports('sharing');
-        },
-
-        enableDateAddedDisplay: function (item) {
-            return !item.IsFolder && item.MediaType && item.Type !== 'Program' && item.Type !== 'TvChannel' && item.Type !== 'Trailer';
-        },
-
-        canMarkPlayed: function (item) {
-
-            if (item.Type === 'Program') {
-                return false;
-            }
-
-            if (item.MediaType === 'Video') {
-                if (item.Type !== 'TvChannel') {
-                    return true;
-                }
-            } else if (item.MediaType === 'Audio') {
-                if (item.Type === 'AudioPodcast') {
-                    return true;
-                }
-                if (item.Type === 'AudioBook') {
-                    return true;
-                }
-            }
-
-            if (item.Type === 'Series' ||
-                item.Type === 'Season' ||
-                item.Type === 'BoxSet' ||
-                item.MediaType === 'Book' ||
-                item.MediaType === 'Recording') {
-                return true;
-            }
-
-            return false;
-        },
-
-        canRate: function (item) {
-
-            if (item.Type === 'Program'
-                || item.Type === 'Timer'
-                || item.Type === 'SeriesTimer'
-                || item.Type === 'CollectionFolder'
-                || item.Type === 'UserView'
-                || item.Type === 'Channel'
-                || !item.UserData) {
-                return false;
-            }
-
-            return true;
-        },
-
-        canConvert: function (item, user) {
-
-            if (!user.Policy.EnableMediaConversion) {
-                return false;
-            }
-
-            if (isLocalItem(item)) {
-                return false;
-            }
-
-            var mediaType = item.MediaType;
-            if (mediaType === 'Book' || mediaType === 'Photo' || mediaType === 'Audio') {
-                return false;
-            }
-
-            var collectionType = item.CollectionType;
-            if (collectionType === 'livetv') {
-                return false;
-            }
-
-            var type = item.Type;
-            if (type === 'Channel' || type === 'Person' || type === 'Year' || type === 'Program' || type === 'Timer' || type === 'SeriesTimer') {
-                return false;
-            }
-
-            if (item.LocationType === 'Virtual' && !item.IsFolder) {
-                return false;
-            }
-
-            if (item.IsPlaceHolder) {
-                return false;
-            }
-
-            return true;
-        },
-
-        canRefreshMetadata: function (item, user) {
-
-            if (user.Policy.IsAdministrator) {
-
-                var collectionType = item.CollectionType;
-                if (collectionType === 'livetv') {
-                    return false;
-                }
-
-                if (item.Type !== 'Timer' && item.Type !== 'SeriesTimer' && item.Type !== 'Program' && item.Type !== 'TvChannel' && !(item.Type === 'Recording' && item.Status !== 'Completed')) {
-
-                    if (!isLocalItem(item)) {
-                        return true;
-                    }
-                }
-            }
-
-            return false;
-        },
-
-        supportsMediaSourceSelection: function (item) {
-
-            if (item.MediaType !== 'Video') {
-                return false;
-            }
-            if (item.Type === 'TvChannel') {
-                return false;
-            }
-            if (!item.MediaSources || (item.MediaSources.length === 1 && item.MediaSources[0].Type === 'Placeholder')) {
-                return false;
-            }
-            if (item.EnableMediaSourceDisplay === false) {
-                return false;
-            }
-            if (item.EnableMediaSourceDisplay == null && item.SourceType && item.SourceType !== 'Library') {
-                return false;
-            }
-
-            return true;
-        }
-    };
-});

src/components/itemidentifier/itemidentifier.js

@@ -1,36 +1,53 @@
-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';
+/* eslint-disable indent */
 
-    var enableFocusTransform = !browser.slow && !browser.edge;
+/**
+ * Module for itemidentifier media item.
+ * @module components/itemidentifier/itemidentifier
+ */
 
-    var currentItem;
-    var currentItemType;
-    var currentServerId;
-    var currentResolve;
-    var currentReject;
-    var hasChanges = false;
-    var currentSearchResult;
+import dialogHelper from '../dialogHelper/dialogHelper';
+import loading from '../loading/loading';
+import globalize from '../../scripts/globalize';
+import scrollHelper from '../../scripts/scrollHelper';
+import layoutManager from '../layoutManager';
+import focusManager from '../focusManager';
+import browser from '../../scripts/browser';
+import '../../elements/emby-input/emby-input';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../formdialog.css';
+import 'material-design-icons-iconfont';
+import '../cardbuilder/card.css';
+import ServerConnections from '../ServerConnections';
+import toast from '../toast/toast';
+
+    const enableFocusTransform = !browser.slow && !browser.edge;
+
+    let currentItem;
+    let currentItemType;
+    let currentServerId;
+    let currentResolve;
+    let currentReject;
+    let hasChanges = false;
+    let currentSearchResult;
 
     function getApiClient() {
-        return connectionManager.getApiClient(currentServerId);
+        return ServerConnections.getApiClient(currentServerId);
     }
 
     function searchForIdentificationResults(page) {
-
-        var lookupInfo = {
+        let lookupInfo = {
             ProviderIds: {}
         };
 
-        var i;
-        var length;
-        var identifyField = page.querySelectorAll('.identifyField');
-        var value;
+        let i;
+        let length;
+        const identifyField = page.querySelectorAll('.identifyField');
+        let value;
         for (i = 0, length = identifyField.length; i < length; i++) {
-
             value = identifyField[i].value;
 
             if (value) {
-
                 if (identifyField[i].type === 'number') {
                     value = parseInt(value);
                 }
@@ -39,11 +56,10 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
             }
         }
 
-        var hasId = false;
+        let hasId = false;
 
-        var txtLookupId = page.querySelectorAll('.txtLookupId');
+        const txtLookupId = page.querySelectorAll('.txtLookupId');
         for (i = 0, length = txtLookupId.length; i < length; i++) {
-
             value = txtLookupId[i].value;
 
             if (value) {
@@ -53,9 +69,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
         }
 
         if (!hasId && !lookupInfo.Name) {
-            require(['toast'], function (toast) {
-                toast(globalize.translate('PleaseEnterNameOrId'));
-            });
+            toast(globalize.translate('PleaseEnterNameOrId'));
             return;
         }
 
@@ -71,60 +85,54 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
 
         loading.show();
 
-        var apiClient = getApiClient();
+        const apiClient = getApiClient();
 
         apiClient.ajax({
             type: 'POST',
-            url: apiClient.getUrl('Items/RemoteSearch/' + currentItemType),
+            url: apiClient.getUrl(`Items/RemoteSearch/${currentItemType}`),
             data: JSON.stringify(lookupInfo),
             contentType: 'application/json',
             dataType: 'json'
 
-        }).then(function (results) {
-
+        }).then(results => {
             loading.hide();
             showIdentificationSearchResults(page, results);
         });
     }
 
     function showIdentificationSearchResults(page, results) {
-
-        var identificationSearchResults = page.querySelector('.identificationSearchResults');
+        const 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');
 
-        var html = '';
-        var i;
-        var length;
+        let html = '';
+        let i;
+        let length;
         for (i = 0, length = results.length; i < length; i++) {
-
-            var result = results[i];
+            const result = results[i];
             html += getSearchResultHtml(result, i);
         }
 
-        var elem = page.querySelector('.identificationSearchResultList');
+        const elem = page.querySelector('.identificationSearchResultList');
         elem.innerHTML = html;
 
         function onSearchImageClick() {
-            var index = parseInt(this.getAttribute('data-index'));
+            const index = parseInt(this.getAttribute('data-index'));
 
-            var currentResult = results[index];
+            const currentResult = results[index];
 
             if (currentItem != null) {
-
                 showIdentifyOptions(page, currentResult);
             } else {
-
                 finishFindNewDialog(page, currentResult);
             }
         }
 
-        var searchImages = elem.querySelectorAll('.card');
+        const searchImages = elem.querySelectorAll('.card');
         for (i = 0, length = searchImages.length; i < length; i++) {
-
             searchImages[i].addEventListener('click', onSearchImageClick);
         }
 
@@ -142,8 +150,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
     }
 
     function showIdentifyOptions(page, identifyResult) {
-
-        var identifyOptionsForm = page.querySelector('.identifyOptionsForm');
+        const identifyOptionsForm = page.querySelector('.identifyOptionsForm');
 
         page.querySelector('.popupIdentifyForm').classList.add('hide');
         page.querySelector('.identificationSearchResults').classList.add('hide');
@@ -153,19 +160,19 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
 
         currentSearchResult = identifyResult;
 
-        var lines = [];
+        const lines = [];
         lines.push(identifyResult.Name);
 
         if (identifyResult.ProductionYear) {
             lines.push(identifyResult.ProductionYear);
         }
 
-        var resultHtml = lines.join('<br/>');
+        let resultHtml = lines.join('<br/>');
 
         if (identifyResult.ImageUrl) {
-            var displayUrl = getSearchImageDisplayUrl(identifyResult.ImageUrl, identifyResult.SearchProviderName);
+            const 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;
@@ -174,13 +181,12 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
     }
 
     function getSearchResultHtml(result, index) {
-
         // TODO move card creation code to Card component
 
-        var html = '';
-        var cssClass = 'card scalableCard';
-        var cardBoxCssClass = 'cardBox';
-        var padderClass;
+        let html = '';
+        let cssClass = 'card scalableCard';
+        let cardBoxCssClass = 'cardBox';
+        let padderClass;
 
         if (currentItemType === 'Episode') {
             cssClass += ' backdropCard backdropCard-scalable';
@@ -203,30 +209,31 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
 
         cardBoxCssClass += ' cardBox-bottompadded';
 
-        html += '<button type="button" class="' + cssClass + '" data-index="' + index + '">';
-        html += '<div class="' + cardBoxCssClass + '">';
+        html += `<button type="button" class="${cssClass}" data-index="${index}">`;
+        html += `<div class="${cardBoxCssClass}">`;
         html += '<div class="cardScalable">';
-        html += '<div class="' + padderClass + '"></div>';
+        html += `<div class="${padderClass}"></div>`;
 
         html += '<div class="cardContent searchImage">';
 
         if (result.ImageUrl) {
-            var displayUrl = getSearchImageDisplayUrl(result.ImageUrl, result.SearchProviderName);
+            const displayUrl = getSearchImageDisplayUrl(result.ImageUrl, result.SearchProviderName);
 
-            html += '<div class="cardImageContainer coveredImage" style="background-image:url(\'' + displayUrl + '\');"></div>';
+            html += `<div class="cardImageContainer coveredImage" style="background-image:url('${displayUrl}');"></div>`;
         } else {
-
-            html += '<div class="cardImageContainer coveredImage defaultCardBackground defaultCardBackground1"><div class="cardText cardCenteredText">' + result.Name + '</div></div>';
+            html += `<div class="cardImageContainer coveredImage defaultCardBackground defaultCardBackground1"><div class="cardText cardCenteredText">${result.Name}</div></div>`;
         }
         html += '</div>';
         html += '</div>';
 
-        var numLines = 2;
+        let numLines = 3;
         if (currentItemType === 'MusicAlbum') {
             numLines++;
         }
 
-        var lines = [result.Name];
+        const lines = [result.Name];
+
+        lines.push(result.SearchProviderName);
 
         if (result.AlbumArtist) {
             lines.push(result.AlbumArtist.Name);
@@ -235,8 +242,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
             lines.push(result.ProductionYear);
         }
 
-        for (var i = 0; i < numLines; i++) {
-
+        for (let i = 0; i < numLines; i++) {
             if (i === 0) {
                 html += '<div class="cardText cardText-first cardTextCentered">';
             } else {
@@ -252,36 +258,32 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
     }
 
     function getSearchImageDisplayUrl(url, provider) {
-        var apiClient = getApiClient();
+        const apiClient = getApiClient();
 
         return apiClient.getUrl('Items/RemoteSearch/Image', { imageUrl: url, ProviderName: provider });
     }
 
     function submitIdentficationResult(page) {
-
         loading.show();
 
-        var options = {
+        const options = {
             ReplaceAllImages: page.querySelector('#chkIdentifyReplaceImages').checked
         };
 
-        var apiClient = getApiClient();
+        const apiClient = getApiClient();
 
         apiClient.ajax({
             type: 'POST',
-            url: apiClient.getUrl('Items/RemoteSearch/Apply/' + currentItem.Id, options),
+            url: apiClient.getUrl(`Items/RemoteSearch/Apply/${currentItem.Id}`, options),
             data: JSON.stringify(currentSearchResult),
             contentType: 'application/json'
 
-        }).then(function () {
-
+        }).then(() => {
             hasChanges = true;
             loading.hide();
 
             dialogHelper.close(page);
-
-        }, function () {
-
+        }, () => {
             loading.hide();
 
             dialogHelper.close(page);
@@ -289,29 +291,26 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
     }
 
     function showIdentificationForm(page, item) {
+        const apiClient = getApiClient();
 
-        var apiClient = getApiClient();
+        apiClient.getJSON(apiClient.getUrl(`Items/${item.Id}/ExternalIdInfos`)).then(idList => {
+            let html = '';
 
-        apiClient.getJSON(apiClient.getUrl('Items/' + item.Id + '/ExternalIdInfos')).then(function (idList) {
+            for (let i = 0, length = idList.length; i < length; i++) {
+                const idInfo = idList[i];
 
-            var html = '';
-
-            for (var i = 0, length = idList.length; i < length; i++) {
-
-                var idInfo = idList[i];
-
-                var id = 'txtLookup' + idInfo.Key;
+                const id = `txtLookup${idInfo.Key}`;
 
                 html += '<div class="inputContainer">';
 
-                var fullName = idInfo.Name;
+                let 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);
+                const idLabel = globalize.translate('LabelDynamicExternalId', fullName);
 
-                html += '<input is="emby-input" class="txtLookupId" data-providerkey="' + idInfo.Key + '" id="' + id + '" label="' + idLabel + '"/>';
+                html += `<input is="emby-input" class="txtLookupId" data-providerkey="${idInfo.Key}" id="${id}" label="${idLabel}"/>`;
 
                 html += '</div>';
             }
@@ -319,11 +318,9 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
             page.querySelector('#txtLookupName').value = '';
 
             if (item.Type === 'Person' || item.Type === 'BoxSet') {
-
                 page.querySelector('.fldLookupYear').classList.add('hide');
                 page.querySelector('#txtLookupYear').value = '';
             } else {
-
                 page.querySelector('.fldLookupYear').classList.remove('hide');
                 page.querySelector('#txtLookupYear').value = '';
             }
@@ -335,20 +332,17 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
     }
 
     function showEditor(itemId) {
-
         loading.show();
 
-        require(['text!./itemidentifier.template.html'], function (template) {
-
-            var apiClient = getApiClient();
-
-            apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
+        return import('./itemidentifier.template.html').then(({default: template}) => {
+            const apiClient = getApiClient();
 
+            apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(item => {
                 currentItem = item;
                 currentItemType = currentItem.Type;
 
-                var dialogOptions = {
-                    size: 'fullscreen-border',
+                const dialogOptions = {
+                    size: 'small',
                     removeOnClose: true,
                     scrollY: false
                 };
@@ -357,13 +351,13 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
                     dialogOptions.size = 'fullscreen';
                 }
 
-                var dlg = dialogHelper.createDialog(dialogOptions);
+                const dlg = dialogHelper.createDialog(dialogOptions);
 
                 dlg.classList.add('formDialog');
                 dlg.classList.add('recordingDialog');
 
-                var html = '';
-                html += globalize.translateDocument(template, 'core');
+                let html = '';
+                html += globalize.translateHtml(template, 'core');
 
                 dlg.innerHTML = html;
 
@@ -384,22 +378,19 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
 
                 dialogHelper.open(dlg);
 
-                dlg.querySelector('.popupIdentifyForm').addEventListener('submit', function (e) {
-
+                dlg.querySelector('.popupIdentifyForm').addEventListener('submit', e => {
                     e.preventDefault();
                     searchForIdentificationResults(dlg);
                     return false;
                 });
 
-                dlg.querySelector('.identifyOptionsForm').addEventListener('submit', function (e) {
-
+                dlg.querySelector('.identifyOptionsForm').addEventListener('submit', e => {
                     e.preventDefault();
                     submitIdentficationResult(dlg);
                     return false;
                 });
 
-                dlg.querySelector('.btnCancel').addEventListener('click', function (e) {
-
+                dlg.querySelector('.btnCancel').addEventListener('click', () => {
                     dialogHelper.close(dlg);
                 });
 
@@ -412,7 +403,6 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
     }
 
     function onDialogClosed() {
-
         loading.hide();
         if (hasChanges) {
             currentResolve();
@@ -421,15 +411,14 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
         }
     }
 
+    // TODO investigate where this was used
     function showEditorFindNew(itemName, itemYear, itemType, resolveFunc) {
-
         currentItem = null;
         currentItemType = itemType;
 
-        require(['text!./itemidentifier.template.html'], function (template) {
-
-            var dialogOptions = {
-                size: 'fullscreen-border',
+        return import('./itemidentifier.template.html').then(({default: template}) => {
+            const dialogOptions = {
+                size: 'small',
                 removeOnClose: true,
                 scrollY: false
             };
@@ -438,13 +427,13 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
                 dialogOptions.size = 'fullscreen';
             }
 
-            var dlg = dialogHelper.createDialog(dialogOptions);
+            const dlg = dialogHelper.createDialog(dialogOptions);
 
             dlg.classList.add('formDialog');
             dlg.classList.add('recordingDialog');
 
-            var html = '';
-            html += globalize.translateDocument(template, 'core');
+            let html = '';
+            html += globalize.translateHtml(template, 'core');
 
             dlg.innerHTML = html;
 
@@ -454,22 +443,19 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
 
             dialogHelper.open(dlg);
 
-            dlg.querySelector('.btnCancel').addEventListener('click', function (e) {
-
+            dlg.querySelector('.btnCancel').addEventListener('click', () => {
                 dialogHelper.close(dlg);
             });
 
-            dlg.querySelector('.popupIdentifyForm').addEventListener('submit', function (e) {
-
+            dlg.querySelector('.popupIdentifyForm').addEventListener('submit', e => {
                 e.preventDefault();
                 searchForIdentificationResults(dlg);
                 return false;
             });
 
-            dlg.addEventListener('close', function () {
-
+            dlg.addEventListener('close', () => {
                 loading.hide();
-                var foundItem = hasChanges ? currentSearchResult : null;
+                const foundItem = hasChanges ? currentSearchResult : null;
 
                 resolveFunc(foundItem);
             });
@@ -481,16 +467,12 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
     }
 
     function showIdentificationFormFindNew(dlg, itemName, itemYear, itemType) {
-
         dlg.querySelector('#txtLookupName').value = itemName;
 
         if (itemType === 'Person' || itemType === 'BoxSet') {
-
             dlg.querySelector('.fldLookupYear').classList.add('hide');
             dlg.querySelector('#txtLookupYear').value = '';
-
         } else {
-
             dlg.querySelector('.fldLookupYear').classList.remove('hide');
             dlg.querySelector('#txtLookupYear').value = itemYear;
         }
@@ -498,29 +480,28 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
         dlg.querySelector('.formDialogHeaderTitle').innerHTML = globalize.translate('Search');
     }
 
-    return {
-        show: function (itemId, serverId) {
+    export function show(itemId, serverId) {
+        return new Promise((resolve, reject) => {
+            currentResolve = resolve;
+            currentReject = reject;
+            currentServerId = serverId;
+            hasChanges = false;
 
-            return new Promise(function (resolve, reject) {
+            showEditor(itemId);
+        });
+    }
 
-                currentResolve = resolve;
-                currentReject = reject;
-                currentServerId = serverId;
-                hasChanges = false;
+    export function showFindNew(itemName, itemYear, itemType, serverId) {
+        return new Promise((resolve) => {
+            currentServerId = serverId;
 
-                showEditor(itemId);
-            });
-        },
+            hasChanges = false;
+            showEditorFindNew(itemName, itemYear, itemType, resolve);
+        });
+    }
 
-        showFindNew: function (itemName, itemYear, itemType, serverId) {
-
-            return new Promise(function (resolve, reject) {
-
-                currentServerId = serverId;
-
-                hasChanges = false;
-                showEditorFindNew(itemName, itemYear, itemType, resolve);
-            });
-        }
-    };
-});
+/* eslint-enable indent */
+export default {
+    show: show,
+    showFindNew: showFindNew
+};

src/components/itemsrefresher.js

@@ -1,149 +1,130 @@
-define(['playbackManager', 'serverNotifications', 'events'], function (playbackManager, serverNotifications, events) {
-    'use strict';
+import { playbackManager } from './playback/playbackmanager';
+import serverNotifications from '../scripts/serverNotifications';
+import { Events } from 'jellyfin-apiclient';
 
-    function onUserDataChanged(e, apiClient, userData) {
+function onUserDataChanged(e, apiClient, userData) {
+    const instance = this;
 
-        var instance = this;
-
-        var eventsToMonitor = getEventsToMonitor(instance);
-
-        // TODO: Check user data change reason?
-        if (eventsToMonitor.indexOf('markfavorite') !== -1) {
-
-            instance.notifyRefreshNeeded();
-        } else if (eventsToMonitor.indexOf('markplayed') !== -1) {
-
-            instance.notifyRefreshNeeded();
-        }
-    }
-
-    function getEventsToMonitor(instance) {
-
-        var options = instance.options;
-        var monitor = options ? options.monitorEvents : null;
-        if (monitor) {
-            return monitor.split(',');
-        }
-
-        return [];
-    }
-
-    function onTimerCreated(e, apiClient, data) {
-
-        var instance = this;
-
-        if (getEventsToMonitor(instance).indexOf('timers') !== -1) {
-
-            instance.notifyRefreshNeeded();
-            return;
-        }
-    }
-
-    function onSeriesTimerCreated(e, apiClient, data) {
-
-        var instance = this;
-        if (getEventsToMonitor(instance).indexOf('seriestimers') !== -1) {
-
-            instance.notifyRefreshNeeded();
-            return;
-        }
-    }
-
-    function onTimerCancelled(e, apiClient, data) {
-        var instance = this;
-
-        if (getEventsToMonitor(instance).indexOf('timers') !== -1) {
-
-            instance.notifyRefreshNeeded();
-            return;
-        }
-    }
-
-    function onSeriesTimerCancelled(e, apiClient, data) {
-
-        var instance = this;
-        if (getEventsToMonitor(instance).indexOf('seriestimers') !== -1) {
-
-            instance.notifyRefreshNeeded();
-            return;
-        }
-    }
-
-    function onLibraryChanged(e, apiClient, data) {
-
-        var instance = this;
-        var eventsToMonitor = getEventsToMonitor(instance);
-        if (eventsToMonitor.indexOf('seriestimers') !== -1 || eventsToMonitor.indexOf('timers') !== -1) {
-
-            // yes this is an assumption
-            return;
-        }
-
-        var itemsAdded = data.ItemsAdded || [];
-        var itemsRemoved = data.ItemsRemoved || [];
-        if (!itemsAdded.length && !itemsRemoved.length) {
-            return;
-        }
-
-        var options = instance.options || {};
-        var parentId = options.parentId;
-        if (parentId) {
-            var foldersAddedTo = data.FoldersAddedTo || [];
-            var foldersRemovedFrom = data.FoldersRemovedFrom || [];
-            var collectionFolders = data.CollectionFolders || [];
-
-            if (foldersAddedTo.indexOf(parentId) === -1 && foldersRemovedFrom.indexOf(parentId) === -1 && collectionFolders.indexOf(parentId) === -1) {
-                return;
-            }
-        }
+    const eventsToMonitor = getEventsToMonitor(instance);
 
+    // TODO: Check user data change reason?
+    if (eventsToMonitor.indexOf('markfavorite') !== -1) {
+        instance.notifyRefreshNeeded();
+    } else if (eventsToMonitor.indexOf('markplayed') !== -1) {
         instance.notifyRefreshNeeded();
     }
+}
 
-    function onPlaybackStopped(e, stopInfo) {
+function getEventsToMonitor(instance) {
+    const options = instance.options;
+    const monitor = options ? options.monitorEvents : null;
+    if (monitor) {
+        return monitor.split(',');
+    }
 
-        var instance = this;
+    return [];
+}
 
-        var state = stopInfo.state;
+function onTimerCreated(e, apiClient, data) {
+    const instance = this;
 
-        var eventsToMonitor = getEventsToMonitor(instance);
-        if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Video') {
+    if (getEventsToMonitor(instance).indexOf('timers') !== -1) {
+        instance.notifyRefreshNeeded();
+        return;
+    }
+}
 
-            if (eventsToMonitor.indexOf('videoplayback') !== -1) {
+function onSeriesTimerCreated(e, apiClient, data) {
+    const instance = this;
+    if (getEventsToMonitor(instance).indexOf('seriestimers') !== -1) {
+        instance.notifyRefreshNeeded();
+        return;
+    }
+}
 
-                instance.notifyRefreshNeeded(true);
-                return;
-            }
-        } else if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Audio') {
+function onTimerCancelled(e, apiClient, data) {
+    const instance = this;
 
-            if (eventsToMonitor.indexOf('audioplayback') !== -1) {
+    if (getEventsToMonitor(instance).indexOf('timers') !== -1) {
+        instance.notifyRefreshNeeded();
+        return;
+    }
+}
 
-                instance.notifyRefreshNeeded(true);
-                return;
-            }
+function onSeriesTimerCancelled(e, apiClient, data) {
+    const instance = this;
+    if (getEventsToMonitor(instance).indexOf('seriestimers') !== -1) {
+        instance.notifyRefreshNeeded();
+        return;
+    }
+}
+
+function onLibraryChanged(e, apiClient, data) {
+    const instance = this;
+    const eventsToMonitor = getEventsToMonitor(instance);
+    if (eventsToMonitor.indexOf('seriestimers') !== -1 || eventsToMonitor.indexOf('timers') !== -1) {
+        // yes this is an assumption
+        return;
+    }
+
+    const itemsAdded = data.ItemsAdded || [];
+    const itemsRemoved = data.ItemsRemoved || [];
+    if (!itemsAdded.length && !itemsRemoved.length) {
+        return;
+    }
+
+    const options = instance.options || {};
+    const parentId = options.parentId;
+    if (parentId) {
+        const foldersAddedTo = data.FoldersAddedTo || [];
+        const foldersRemovedFrom = data.FoldersRemovedFrom || [];
+        const collectionFolders = data.CollectionFolders || [];
+
+        if (foldersAddedTo.indexOf(parentId) === -1 && foldersRemovedFrom.indexOf(parentId) === -1 && collectionFolders.indexOf(parentId) === -1) {
+            return;
         }
     }
 
-    function addNotificationEvent(instance, name, handler, owner) {
+    instance.notifyRefreshNeeded();
+}
 
-        var localHandler = handler.bind(instance);
+function onPlaybackStopped(e, stopInfo) {
+    const instance = this;
+
+    const state = stopInfo.state;
+
+    const eventsToMonitor = getEventsToMonitor(instance);
+    if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Video') {
+        if (eventsToMonitor.indexOf('videoplayback') !== -1) {
+            instance.notifyRefreshNeeded(true);
+            return;
+        }
+    } else if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Audio') {
+        if (eventsToMonitor.indexOf('audioplayback') !== -1) {
+            instance.notifyRefreshNeeded(true);
+            return;
+        }
+    }
+}
+
+function addNotificationEvent(instance, name, handler, owner) {
+    const localHandler = handler.bind(instance);
+    owner = owner || serverNotifications;
+    Events.on(owner, name, localHandler);
+    instance['event_' + name] = localHandler;
+}
+
+function removeNotificationEvent(instance, name, owner) {
+    const handler = instance['event_' + name];
+    if (handler) {
         owner = owner || serverNotifications;
-        events.on(owner, name, localHandler);
-        instance['event_' + name] = localHandler;
+        Events.off(owner, name, handler);
+        instance['event_' + name] = null;
     }
+}
 
-    function removeNotificationEvent(instance, name, owner) {
-
-        var handler = instance['event_' + name];
-        if (handler) {
-            owner = owner || serverNotifications;
-            events.off(owner, name, handler);
-            instance['event_' + name] = null;
-        }
-    }
-
-    function ItemsRefresher(options) {
-
+class ItemsRefresher {
+    constructor(options) {
         this.options = options || {};
 
         addNotificationEvent(this, 'UserDataChanged', onUserDataChanged);
@@ -155,25 +136,20 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
         addNotificationEvent(this, 'playbackstop', onPlaybackStopped, playbackManager);
     }
 
-    ItemsRefresher.prototype.pause = function () {
-
+    pause() {
         clearRefreshInterval(this, true);
 
         this.paused = true;
-    };
-
-    ItemsRefresher.prototype.resume = function (options) {
+    }
 
+    resume(options) {
         this.paused = false;
 
-        var refreshIntervalEndTime = this.refreshIntervalEndTime;
+        const refreshIntervalEndTime = this.refreshIntervalEndTime;
         if (refreshIntervalEndTime) {
-
-            var remainingMs = refreshIntervalEndTime - new Date().getTime();
+            const remainingMs = refreshIntervalEndTime - new Date().getTime();
             if (remainingMs > 0 && !this.needsRefresh) {
-
                 resetRefreshInterval(this, remainingMs);
-
             } else {
                 this.needsRefresh = true;
                 this.refreshIntervalEndTime = null;
@@ -185,10 +161,9 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
         }
 
         return Promise.resolve();
-    };
-
-    ItemsRefresher.prototype.refreshItems = function () {
+    }
 
+    refreshItems() {
         if (!this.fetchData) {
             return Promise.resolve();
         }
@@ -201,16 +176,15 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
         this.needsRefresh = false;
 
         return this.fetchData().then(onDataFetched.bind(this));
-    };
-
-    ItemsRefresher.prototype.notifyRefreshNeeded = function (isInForeground) {
+    }
 
+    notifyRefreshNeeded(isInForeground) {
         if (this.paused) {
             this.needsRefresh = true;
             return;
         }
 
-        var timeout = this.refreshTimeout;
+        const timeout = this.refreshTimeout;
         if (timeout) {
             clearTimeout(timeout);
         }
@@ -220,49 +194,9 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
         } else {
             this.refreshTimeout = setTimeout(this.refreshItems.bind(this), 10000);
         }
-    };
-
-    function clearRefreshInterval(instance, isPausing) {
-
-        if (instance.refreshInterval) {
-
-            clearInterval(instance.refreshInterval);
-            instance.refreshInterval = null;
-
-            if (!isPausing) {
-                instance.refreshIntervalEndTime = null;
-            }
-        }
     }
 
-    function resetRefreshInterval(instance, intervalMs) {
-
-        clearRefreshInterval(instance);
-
-        if (!intervalMs) {
-            var options = instance.options;
-            if (options) {
-                intervalMs = options.refreshIntervalMs;
-            }
-        }
-
-        if (intervalMs) {
-            instance.refreshInterval = setInterval(instance.notifyRefreshNeeded.bind(instance), intervalMs);
-            instance.refreshIntervalEndTime = new Date().getTime() + intervalMs;
-        }
-    }
-
-    function onDataFetched(result) {
-
-        resetRefreshInterval(this);
-
-        if (this.afterRefresh) {
-            this.afterRefresh(result);
-        }
-    }
-
-    ItemsRefresher.prototype.destroy = function () {
-
+    destroy() {
         clearRefreshInterval(this);
 
         removeNotificationEvent(this, 'UserDataChanged');
@@ -275,7 +209,42 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
 
         this.fetchData = null;
         this.options = null;
-    };
+    }
+}
 
-    return ItemsRefresher;
-});
+function clearRefreshInterval(instance, isPausing) {
+    if (instance.refreshInterval) {
+        clearInterval(instance.refreshInterval);
+        instance.refreshInterval = null;
+
+        if (!isPausing) {
+            instance.refreshIntervalEndTime = null;
+        }
+    }
+}
+
+function resetRefreshInterval(instance, intervalMs) {
+    clearRefreshInterval(instance);
+
+    if (!intervalMs) {
+        const options = instance.options;
+        if (options) {
+            intervalMs = options.refreshIntervalMs;
+        }
+    }
+
+    if (intervalMs) {
+        instance.refreshInterval = setInterval(instance.notifyRefreshNeeded.bind(instance), intervalMs);
+        instance.refreshIntervalEndTime = new Date().getTime() + intervalMs;
+    }
+}
+
+function onDataFetched(result) {
+    resetRefreshInterval(this);
+
+    if (this.afterRefresh) {
+        this.afterRefresh(result);
+    }
+}
+
+export default ItemsRefresher;

src/components/layoutManager.js

@@ -1,22 +1,21 @@
-define(['browser', 'appSettings', 'events'], function (browser, appSettings, events) {
-    'use strict';
 
-    function setLayout(instance, layout, selectedLayout) {
-        if (layout === selectedLayout) {
-            instance[layout] = true;
-            document.documentElement.classList.add('layout-' + layout);
-        } else {
-            instance[layout] = false;
-            document.documentElement.classList.remove('layout-' + layout);
-        }
+import { appHost } from './apphost';
+import browser from '../scripts/browser';
+import appSettings from '../scripts/settings/appSettings';
+import { Events } from 'jellyfin-apiclient';
+
+function setLayout(instance, layout, selectedLayout) {
+    if (layout === selectedLayout) {
+        instance[layout] = true;
+        document.documentElement.classList.add('layout-' + layout);
+    } else {
+        instance[layout] = false;
+        document.documentElement.classList.remove('layout-' + layout);
     }
+}
 
-    function LayoutManager() {
-
-    }
-
-    LayoutManager.prototype.setLayout = function (layout, save) {
-
+class LayoutManager {
+    setLayout(layout, save) {
         if (!layout || layout === 'auto') {
             this.autoLayout();
 
@@ -33,15 +32,14 @@ define(['browser', 'appSettings', 'events'], function (browser, appSettings, eve
             }
         }
 
-        events.trigger(this, 'modechange');
-    };
+        Events.trigger(this, 'modechange');
+    }
 
-    LayoutManager.prototype.getSavedLayout = function (layout) {
+    getSavedLayout() {
         return appSettings.get('layout');
-    };
-
-    LayoutManager.prototype.autoLayout = function () {
+    }
 
+    autoLayout() {
         // Take a guess at initial layout. The consuming app can override
         if (browser.mobile) {
             this.setLayout('mobile', false);
@@ -50,16 +48,24 @@ define(['browser', 'appSettings', 'events'], function (browser, appSettings, eve
         } else {
             this.setLayout(this.defaultLayout || 'tv', false);
         }
-    };
+    }
 
-    LayoutManager.prototype.init = function () {
-        var saved = this.getSavedLayout();
+    init() {
+        const saved = this.getSavedLayout();
         if (saved) {
             this.setLayout(saved, false);
         } else {
             this.autoLayout();
         }
-    };
+    }
+}
 
-    return new LayoutManager();
-});
+const layoutManager = new LayoutManager();
+
+if (appHost.getDefaultLayout) {
+    layoutManager.defaultLayout = appHost.getDefaultLayout();
+}
+
+layoutManager.init();
+
+export default layoutManager;

src/components/lazyLoader/lazyLoaderIntersectionObserver.js

@@ -11,9 +11,9 @@
                 (entries) => {
                     entries.forEach(entry => {
                         callback(entry);
-                    },
-                    {rootMargin: '50%'});
-                });
+                    });
+                },
+                {rootMargin: '25%'});
 
             this.observer = observer;
         }

src/components/libraryoptionseditor/libraryoptionseditor.js

@@ -1,63 +1,73 @@
-define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], function(globalize, dom) {
-    'use strict';
+/* eslint-disable indent */
+
+/**
+ * Module for library options editor.
+ * @module components/libraryoptionseditor/libraryoptionseditor
+ */
+
+import globalize from '../../scripts/globalize';
+import dom from '../../scripts/dom';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-select/emby-select';
+import '../../elements/emby-input/emby-input';
 
     function populateLanguages(parent) {
-        return ApiClient.getCultures().then(function(languages) {
+        return ApiClient.getCultures().then(languages => {
             populateLanguagesIntoSelect(parent.querySelector('#selectLanguage'), languages);
             populateLanguagesIntoList(parent.querySelector('.subtitleDownloadLanguages'), languages);
         });
     }
 
     function populateLanguagesIntoSelect(select, languages) {
-        var html = '';
+        let 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>';
+        for (let i = 0; i < languages.length; i++) {
+            const culture = languages[i];
+            html += `<option value='${culture.TwoLetterISOLanguageName}'>${culture.DisplayName}</option>`;
         }
         select.innerHTML = html;
     }
 
     function populateLanguagesIntoList(element, languages) {
-        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>';
+        let html = '';
+        for (let i = 0; i < languages.length; i++) {
+            const culture = languages[i];
+            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 = '';
+        return ApiClient.getCountries().then(allCountries => {
+            let 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>';
+            for (let i = 0; i < allCountries.length; i++) {
+                const culture = allCountries[i];
+                html += `<option value='${culture.TwoLetterISORegionName}'>${culture.DisplayName}</option>`;
             }
             select.innerHTML = html;
         });
     }
 
     function populateRefreshInterval(select) {
-        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>';
+        let html = '';
+        html += `<option value='0'>${globalize.translate('Never')}</option>`;
+        html += [30, 60, 90].map(val => {
+            return `<option value='${val}'>${globalize.translate('EveryNDays', val)}</option>`;
         }).join('');
         select.innerHTML = html;
     }
 
     function renderMetadataReaders(page, plugins) {
-        var html = '';
-        var elem = page.querySelector('.metadataReaders');
+        let html = '';
+        const elem = page.querySelector('.metadataReaders');
 
         if (plugins.length < 1) return elem.innerHTML = '', elem.classList.add('hide'), !1;
-        html += '<h3 class="checkboxListLabel">' + globalize.translate('LabelMetadataReaders') + '</h3>';
+        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 + '">';
+        for (let i = 0; i < plugins.length; i++) {
+            const plugin = plugins[i];
+            html += `<div class="listItem localReaderOption sortableOption" data-pluginname="${plugin.Name}">`;
             html += '<span class="listItemIcon material-icons live_tv"></span>';
             html += '<div class="listItemBody">';
             html += '<h3 class="listItemBodyText">';
@@ -65,14 +75,14 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
             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 + '"><span class="material-icons keyboard_arrow_up"></span></button>';
+                html += `<button type="button" is="paper-icon-button-light" title="${globalize.translate('Up')}" 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 + '"><span class="material-icons keyboard_arrow_down"></span></button>';
+                html += `<button type="button" is="paper-icon-button-light" title="${globalize.translate('Down')}" class="btnSortableMoveDown btnSortable" data-pluginindex="${i}"><span class="material-icons keyboard_arrow_down"></span></button>`;
             }
             html += '</div>';
         }
         html += '</div>';
-        html += '<div class="fieldDescription">' + globalize.translate('LabelMetadataReadersHelp') + '</div>';
+        html += `<div class="fieldDescription">${globalize.translate('LabelMetadataReadersHelp')}</div>`;
         if (plugins.length < 2) {
             elem.classList.add('hide');
         } else {
@@ -83,25 +93,25 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
     }
 
     function renderMetadataSavers(page, metadataSavers) {
-        var html = '';
-        var elem = page.querySelector('.metadataSavers');
+        let html = '';
+        const elem = page.querySelector('.metadataSavers');
         if (!metadataSavers.length) return elem.innerHTML = '', elem.classList.add('hide'), false;
-        html += '<h3 class="checkboxListLabel">' + globalize.translate('LabelMetadataSavers') + '</h3>';
+        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>';
+        for (let i = 0; i < metadataSavers.length; i++) {
+            const 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 += '</div>';
-        html += '<div class="fieldDescription" style="margin-top:.25em;">' + globalize.translate('LabelMetadataSaversHelp') + '</div>';
+        html += `<div class="fieldDescription" style="margin-top:.25em;">${globalize.translate('LabelMetadataSaversHelp')}</div>`;
         elem.innerHTML = html;
         elem.classList.remove('hide');
         return true;
     }
 
     function getMetadataFetchersForTypeHtml(availableTypeOptions, libraryOptionsForType) {
-        var html = '';
-        var plugins = availableTypeOptions.MetadataFetchers;
+        let html = '';
+        let plugins = availableTypeOptions.MetadataFetchers;
 
         plugins = getOrderedPlugins(plugins, libraryOptionsForType.MetadataFetcherOrder || []);
         if (!plugins.length) return html;
@@ -112,15 +122,20 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
 
         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"' : '';
+            const isChecked = libraryOptionsForType.MetadataFetchers ? libraryOptionsForType.MetadataFetchers.includes(plugin.Name) : plugin.DefaultEnabled;
+            const 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>';
-            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>' : 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>';
+            if (index > 0) {
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate('Up') + '" 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('Down') + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + index + '"><span class="material-icons keyboard_arrow_down"></span></button>';
+            }
+            html += '</div>';
         });
 
         html += '</div>';
@@ -130,19 +145,19 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
     }
 
     function getTypeOptions(allOptions, type) {
-        var allTypeOptions = allOptions.TypeOptions || [];
-        for (var i = 0; i < allTypeOptions.length; i++) {
-            var typeOptions = allTypeOptions[i];
+        const allTypeOptions = allOptions.TypeOptions || [];
+        for (let i = 0; i < allTypeOptions.length; i++) {
+            const typeOptions = allTypeOptions[i];
             if (typeOptions.Type === type) return typeOptions;
         }
         return null;
     }
 
     function renderMetadataFetchers(page, availableOptions, libraryOptions) {
-        var html = '';
-        var elem = page.querySelector('.metadataFetchers');
-        for (var i = 0; i < availableOptions.TypeOptions.length; i++) {
-            var availableTypeOptions = availableOptions.TypeOptions[i];
+        let html = '';
+        const elem = page.querySelector('.metadataFetchers');
+        for (let i = 0; i < availableOptions.TypeOptions.length; i++) {
+            const availableTypeOptions = availableOptions.TypeOptions[i];
             html += getMetadataFetchersForTypeHtml(availableTypeOptions, getTypeOptions(libraryOptions, availableTypeOptions.Type) || {});
         }
         elem.innerHTML = html;
@@ -161,41 +176,41 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
     }
 
     function renderSubtitleFetchers(page, availableOptions, libraryOptions) {
-        var html = '';
-        var elem = page.querySelector('.subtitleFetchers');
+        let html = '';
+        const elem = page.querySelector('.subtitleFetchers');
 
-        var plugins = availableOptions.SubtitleFetchers;
+        let 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>';
+        for (let i = 0; i < plugins.length; i++) {
+            const plugin = plugins[i];
+            html += `<div class="listItem subtitleFetcherItem sortableOption" data-pluginname="${plugin.Name}">`;
+            const isChecked = libraryOptions.DisabledSubtitleFetchers ? !libraryOptions.DisabledSubtitleFetchers.includes(plugin.Name) : plugin.DefaultEnabled;
+            const 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>';
             if (i > 0) {
-                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>';
+                html += `<button type="button" is="paper-icon-button-light" title="${globalize.translate('Up')}" 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 + '"><span class="material-icons keyboard_arrow_down"></span></button>';
+                html += `<button type="button" is="paper-icon-button-light" title="${globalize.translate('Down')}" class="btnSortableMoveDown btnSortable" data-pluginindex="${i}"><span class="material-icons keyboard_arrow_down"></span></button>`;
             }
             html += '</div>';
         }
         html += '</div>';
-        html += '<div class="fieldDescription">' + globalize.translate('SubtitleDownloadersHelp') + '</div>';
+        html += `<div class="fieldDescription">${globalize.translate('SubtitleDownloadersHelp')}</div>`;
         elem.innerHTML = html;
     }
 
     function getImageFetchersForTypeHtml(availableTypeOptions, libraryOptionsForType) {
-        var html = '';
-        var plugins = availableTypeOptions.ImageFetchers;
+        let html = '';
+        let plugins = availableTypeOptions.ImageFetchers;
 
         plugins = getOrderedPlugins(plugins, libraryOptionsForType.ImageFetcherOrder || []);
         if (!plugins.length) return html;
@@ -203,17 +218,17 @@ 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>';
-        var supportedImageTypes = availableTypeOptions.SupportedImageTypes || [];
-        if (supportedImageTypes.length > 1 || 1 === supportedImageTypes.length && 'Primary' !== supportedImageTypes[0]) {
+        const supportedImageTypes = availableTypeOptions.SupportedImageTypes || [];
+        if (supportedImageTypes.length > 1 || supportedImageTypes.length === 1 && supportedImageTypes[0] !== 'Primary') {
             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 class="checkboxList paperList checkboxList-paperList">';
-        for (var i = 0; i < plugins.length; i++) {
-            var plugin = plugins[i];
+        for (let i = 0; i < plugins.length; i++) {
+            const 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"' : '';
+            const isChecked = libraryOptionsForType.ImageFetchers ? libraryOptionsForType.ImageFetchers.includes(plugin.Name) : plugin.DefaultEnabled;
+            const 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">';
@@ -221,9 +236,9 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
             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 + '"><span class="material-icons keyboard_arrow_up"></span></button>';
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate('Up') + '" 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 + '"><span class="material-icons keyboard_arrow_down"></span></button>';
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate('Down') + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><span class="material-icons keyboard_arrow_down"></span></button>';
             }
             html += '</div>';
         }
@@ -234,31 +249,29 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
     }
 
     function renderImageFetchers(page, availableOptions, libraryOptions) {
-        var html = '';
-        var elem = page.querySelector('.imageFetchers');
-        for (var i = 0; i < availableOptions.TypeOptions.length; i++) {
-            var availableTypeOptions = availableOptions.TypeOptions[i];
+        let html = '';
+        const elem = page.querySelector('.imageFetchers');
+        for (let i = 0; i < availableOptions.TypeOptions.length; i++) {
+            const 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');
         } else {
             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');
+    function populateMetadataSettings(parent, contentType) {
+        const isNewLibrary = parent.classList.contains('newlibrary');
         return ApiClient.getJSON(ApiClient.getUrl('Libraries/AvailableOptions', {
             LibraryContentType: contentType,
             IsNewLibrary: isNewLibrary
-        })).then(function(availableOptions) {
+        })).then(availableOptions => {
             currentAvailableOptions = availableOptions;
             parent.availableOptions = availableOptions;
             renderMetadataSavers(parent, availableOptions.MetadataSavers);
@@ -267,22 +280,22 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
             renderSubtitleFetchers(parent, availableOptions, {});
             renderImageFetchers(parent, availableOptions, {});
             availableOptions.SubtitleFetchers.length ? parent.querySelector('.subtitleDownloadSettings').classList.remove('hide') : parent.querySelector('.subtitleDownloadSettings').classList.add('hide');
-        }).catch(function() {
+        }).catch(() => {
             return Promise.resolve();
         });
     }
 
     function adjustSortableListElement(elem) {
-        var btnSortable = elem.querySelector('.btnSortable');
-        var inner = btnSortable.querySelector('.material-icons');
+        const btnSortable = elem.querySelector('.btnSortable');
+        const inner = btnSortable.querySelector('.material-icons');
         if (elem.previousSibling) {
-            btnSortable.title = globalize.translate('ButtonUp');
+            btnSortable.title = globalize.translate('Up');
             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.title = globalize.translate('Down');
             btnSortable.classList.remove('btnSortableMoveUp');
             btnSortable.classList.add('btnSortableMoveDown');
             inner.classList.remove('keyboard_arrow_up');
@@ -291,22 +304,22 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
     }
 
     function showImageOptionsForType(type) {
-        require(['imageoptionseditor'], function(ImageOptionsEditor) {
-            var typeOptions = getTypeOptions(currentLibraryOptions, type);
+        import('../imageOptionsEditor/imageOptionsEditor').then(({default: ImageOptionsEditor}) => {
+            let typeOptions = getTypeOptions(currentLibraryOptions, type);
             if (!typeOptions) {
                 typeOptions = {
                     Type: type
                 };
                 currentLibraryOptions.TypeOptions.push(typeOptions);
             }
-            var availableOptions = getTypeOptions(currentAvailableOptions || {}, type);
-            var imageOptionsEditor = new ImageOptionsEditor();
+            const availableOptions = getTypeOptions(currentAvailableOptions || {}, type);
+            const imageOptionsEditor = new ImageOptionsEditor();
             imageOptionsEditor.show(type, typeOptions, availableOptions);
         });
     }
 
     function onImageFetchersContainerClick(e) {
-        var btnImageOptionsForType = dom.parentWithClass(e.target, 'btnImageOptionsForType');
+        const btnImageOptionsForType = dom.parentWithClass(e.target, 'btnImageOptionsForType');
         if (btnImageOptionsForType) {
             return void showImageOptionsForType(dom.parentWithClass(btnImageOptionsForType, 'imageFetcher').getAttribute('data-type'));
         }
@@ -314,18 +327,18 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
     }
 
     function onSortableContainerClick(e) {
-        var btnSortable = dom.parentWithClass(e.target, 'btnSortable');
+        const btnSortable = dom.parentWithClass(e.target, 'btnSortable');
         if (btnSortable) {
-            var li = dom.parentWithClass(btnSortable, 'sortableOption');
-            var list = dom.parentWithClass(li, 'paperList');
+            const li = dom.parentWithClass(btnSortable, 'sortableOption');
+            const list = dom.parentWithClass(li, 'paperList');
             if (btnSortable.classList.contains('btnSortableMoveDown')) {
-                var next = li.nextSibling;
+                const next = li.nextSibling;
                 if (next) {
                     li.parentNode.removeChild(li);
                     next.parentNode.insertBefore(li, next.nextSibling);
                 }
             } else {
-                var prev = li.previousSibling;
+                const prev = li.previousSibling;
                 if (prev) {
                     li.parentNode.removeChild(li);
                     prev.parentNode.insertBefore(li, prev);
@@ -342,41 +355,36 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
         parent.querySelector('.imageFetchers').addEventListener('click', onImageFetchersContainerClick);
     }
 
-    function embed(parent, contentType, libraryOptions) {
+    export async function embed(parent, contentType, libraryOptions) {
         currentLibraryOptions = {
             TypeOptions: []
         };
         currentAvailableOptions = null;
-        var isNewLibrary = null === libraryOptions;
+        const isNewLibrary = libraryOptions === null;
         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.onload = function(e) {
-                var template = this.response;
-                parent.innerHTML = globalize.translateDocument(template);
-                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);
-                        bindEvents(parent);
-                        resolve();
-                    });
-                });
-            };
-            xhr.send();
+
+        const { default: template } = await import('./libraryoptionseditor.template.html');
+
+        parent.innerHTML = globalize.translateHtml(template);
+        populateRefreshInterval(parent.querySelector('#selectAutoRefreshInterval'));
+        const promises = [populateLanguages(parent), populateCountries(parent.querySelector('#selectCountry'))];
+        Promise.all(promises).then(function() {
+            return setContentType(parent, contentType).then(function() {
+                libraryOptions && setLibraryOptions(parent, libraryOptions);
+                bindEvents(parent);
+                return;
+            });
         });
     }
 
-    function setAdvancedVisible(parent, visible) {
-        var elems = parent.querySelectorAll('.advanced');
-        for (var i = 0; i < elems.length; i++) {
+    export function setAdvancedVisible(parent, visible) {
+        const elems = parent.querySelectorAll('.advanced');
+        for (let i = 0; i < elems.length; i++) {
             visible ? elems[i].classList.remove('advancedHide') : elems[i].classList.add('advancedHide');
         }
     }
 
-    function setContentType(parent, contentType) {
+    export function setContentType(parent, contentType) {
         if (contentType === 'homevideos' || contentType === 'photos') {
             parent.querySelector('.chkEnablePhotosContainer').classList.remove('hide');
         } else {
@@ -390,12 +398,10 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
         }
 
         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');
@@ -417,47 +423,47 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
     }
 
     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'), elem => {
             return !elem.checked;
-        }), function(elem) {
+        }), elem => {
             return elem.getAttribute('data-pluginname');
         });
 
-        options.SubtitleFetcherOrder = Array.prototype.map.call(parent.querySelectorAll('.subtitleFetcherItem'), function(elem) {
+        options.SubtitleFetcherOrder = Array.prototype.map.call(parent.querySelectorAll('.subtitleFetcherItem'), elem => {
             return elem.getAttribute('data-pluginname');
         });
     }
 
     function setMetadataFetchersIntoOptions(parent, options) {
-        var sections = parent.querySelectorAll('.metadataFetcher');
-        for (var i = 0; i < sections.length; i++) {
-            var section = sections[i];
-            var type = section.getAttribute('data-type');
-            var typeOptions = getTypeOptions(options, type);
+        const sections = parent.querySelectorAll('.metadataFetcher');
+        for (let i = 0; i < sections.length; i++) {
+            const section = sections[i];
+            const type = section.getAttribute('data-type');
+            let typeOptions = getTypeOptions(options, type);
             if (!typeOptions) {
                 typeOptions = {
                     Type: type
                 };
                 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'), elem => {
                 return elem.checked;
-            }), function(elem) {
+            }), elem => {
                 return elem.getAttribute('data-pluginname');
             });
 
-            typeOptions.MetadataFetcherOrder = Array.prototype.map.call(section.querySelectorAll('.metadataFetcherItem'), function(elem) {
+            typeOptions.MetadataFetcherOrder = Array.prototype.map.call(section.querySelectorAll('.metadataFetcherItem'), elem => {
                 return elem.getAttribute('data-pluginname');
             });
         }
     }
 
     function setImageFetchersIntoOptions(parent, options) {
-        var sections = parent.querySelectorAll('.imageFetcher');
-        for (var i = 0; i < sections.length; i++) {
-            var section = sections[i];
-            var type = section.getAttribute('data-type');
-            var typeOptions = getTypeOptions(options, type);
+        const sections = parent.querySelectorAll('.imageFetcher');
+        for (let i = 0; i < sections.length; i++) {
+            const section = sections[i];
+            const type = section.getAttribute('data-type');
+            let typeOptions = getTypeOptions(options, type);
             if (!typeOptions) {
                 typeOptions = {
                     Type: type
@@ -465,23 +471,23 @@ 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'), elem => {
                 return elem.checked;
-            }), function(elem) {
+            }), elem => {
                 return elem.getAttribute('data-pluginname');
             });
 
-            typeOptions.ImageFetcherOrder = Array.prototype.map.call(section.querySelectorAll('.imageFetcherItem'), function(elem) {
+            typeOptions.ImageFetcherOrder = Array.prototype.map.call(section.querySelectorAll('.imageFetcherItem'), elem => {
                 return elem.getAttribute('data-pluginname');
             });
         }
     }
 
-    function setImageOptionsIntoOptions(parent, options) {
-        var originalTypeOptions = (currentLibraryOptions || {}).TypeOptions || [];
-        for (var i = 0; i < originalTypeOptions.length; i++) {
-            var originalTypeOption = originalTypeOptions[i];
-            var typeOptions = getTypeOptions(options, originalTypeOption.Type);
+    function setImageOptionsIntoOptions(options) {
+        const originalTypeOptions = (currentLibraryOptions || {}).TypeOptions || [];
+        for (let i = 0; i < originalTypeOptions.length; i++) {
+            const originalTypeOption = originalTypeOptions[i];
+            let typeOptions = getTypeOptions(options, originalTypeOption.Type);
 
             if (!typeOptions) {
                 typeOptions = {
@@ -493,16 +499,14 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
         }
     }
 
-    function getLibraryOptions(parent) {
-        var options = {
+    export function getLibraryOptions(parent) {
+        const 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,
             EnableInternetProviders: true,
-            ImportMissingEpisodes: parent.querySelector('#chkImportMissingEpisodes').checked,
             SaveLocalMetadata: parent.querySelector('#chkSaveLocal').checked,
             EnableAutomaticSeriesGrouping: parent.querySelector('.chkAutomaticallyGroupSeries').checked,
             PreferredMetadataLanguage: parent.querySelector('#selectLanguage').value,
@@ -515,39 +519,39 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
             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) {
+            MetadataSavers: Array.prototype.map.call(Array.prototype.filter.call(parent.querySelectorAll('.chkMetadataSaver'), elem => {
                 return elem.checked;
-            }), function(elem) {
+            }), elem => {
                 return elem.getAttribute('data-pluginname');
             }),
             TypeOptions: []
         };
 
-        options.LocalMetadataReaderOrder = Array.prototype.map.call(parent.querySelectorAll('.localReaderOption'), function(elem) {
+        options.LocalMetadataReaderOrder = Array.prototype.map.call(parent.querySelectorAll('.localReaderOption'), 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'), elem => {
             return elem.checked;
-        }), function(elem) {
+        }), elem => {
             return elem.getAttribute('data-lang');
         });
         setSubtitleFetchersIntoOptions(parent, options);
         setMetadataFetchersIntoOptions(parent, options);
         setImageFetchersIntoOptions(parent, options);
-        setImageOptionsIntoOptions(parent, options);
+        setImageOptionsIntoOptions(options);
 
         return options;
     }
 
     function getOrderedPlugins(plugins, configuredOrder) {
         plugins = plugins.slice(0);
-        plugins.sort(function(a, b) {
+        plugins.sort((a, b) => {
             return a = configuredOrder.indexOf(a.Name), b = configuredOrder.indexOf(b.Name), a < b ? -1 : a > b ? 1 : 0;
         });
         return plugins;
     }
 
-    function setLibraryOptions(parent, options) {
+    export function setLibraryOptions(parent, options) {
         currentLibraryOptions = options;
         currentAvailableOptions = parent.availableOptions;
         parent.querySelector('#selectLanguage').value = options.PreferredMetadataLanguage || '';
@@ -558,9 +562,7 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
         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;
@@ -568,11 +570,11 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
         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('.chkMetadataSaver'), elem => {
+            elem.checked = options.MetadataSavers ? options.MetadataSavers.includes(elem.getAttribute('data-pluginname')) : elem.getAttribute('data-defaultenabled') === 'true';
         });
-        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'), elem => {
+            elem.checked = !!options.SubtitleDownloadLanguages && options.SubtitleDownloadLanguages.includes(elem.getAttribute('data-lang'));
         });
         renderMetadataReaders(parent, getOrderedPlugins(parent.availableOptions.MetadataReaders, options.LocalMetadataReaderOrder || []));
         renderMetadataFetchers(parent, parent.availableOptions, options);
@@ -580,14 +582,14 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
         renderSubtitleFetchers(parent, parent.availableOptions, options);
     }
 
-    var currentLibraryOptions;
-    var currentAvailableOptions;
+    let currentLibraryOptions;
+    let currentAvailableOptions;
 
-    return {
-        embed: embed,
-        setContentType: setContentType,
-        getLibraryOptions: getLibraryOptions,
-        setLibraryOptions: setLibraryOptions,
-        setAdvancedVisible: setAdvancedVisible
-    };
-});
+/* eslint-enable indent */
+export default {
+    embed: embed,
+    setContentType: setContentType,
+    getLibraryOptions: getLibraryOptions,
+    setLibraryOptions: setLibraryOptions,
+    setAdvancedVisible: setAdvancedVisible
+};

src/components/libraryoptionseditor/libraryoptionseditor.template.html

@@ -69,30 +69,14 @@
     <div class="fieldDescription checkboxFieldDescription">${LabelSaveLocalMetadataHelp}</div>
 </div>
 
-<div class="checkboxContainer checkboxContainer-withDescription hide chkDownloadImagesInAdvanceContainer advanced">
-    <label>
-        <input is="emby-checkbox" type="checkbox" id="chkDownloadImagesInAdvance" />
-        <span>${OptionDownloadImagesInAdvance}</span>
-    </label>
-    <div class="fieldDescription checkboxFieldDescription">${OptionDownloadImagesInAdvanceHelp}</div>
-</div>
-
 <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>
 </div>
 
-<div class="checkboxContainer checkboxContainer-withDescription hide chkImportMissingEpisodesContainer advanced">
-    <label>
-        <input is="emby-checkbox" type="checkbox" id="chkImportMissingEpisodes" />
-        <span>${LabelDisplayMissingEpisodesWithinSeasons}</span>
-    </label>
-    <div class="fieldDescription checkboxFieldDescription">${ImportMissingEpisodesHelp}</div>
-</div>
-
 <div class="chapterSettingsSection hide">
     <h2>${HeaderChapterImages}</h2>
     <div class="checkboxContainer checkboxContainer-withDescription fldExtractChapterImages">

src/components/listview/listview.css

@@ -185,6 +185,17 @@
     .listItemBody {
         padding-right: 0.5em;
     }
+
+    .listItemMediaInfo {
+        display: none;
+    }
+}
+
+@media all and (max-width: 40em) {
+    [data-type='Movie'] .listItemImage,
+    [data-type='Series'] .listItemImage {
+        display: none;
+    }
 }
 
 .listItemImage-large-tv {

src/components/listview/listview.js

@@ -1,19 +1,32 @@
-define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutManager', 'globalize', 'datetime', 'apphost', 'css!./listview', 'emby-ratingbutton', 'emby-playstatebutton'], function (itemHelper, mediaInfo, indicators, connectionManager, layoutManager, globalize, datetime, appHost) {
-    'use strict';
+/* eslint-disable indent */
+
+/**
+ * Module for display list view.
+ * @module components/listview/listview
+ */
+
+import itemHelper from '../itemHelper';
+import mediaInfo from '../mediainfo/mediainfo';
+import indicators from '../indicators/indicators';
+import layoutManager from '../layoutManager';
+import globalize from '../../scripts/globalize';
+import datetime from '../../scripts/datetime';
+import cardBuilder from '../cardbuilder/cardBuilder';
+import './listview.css';
+import '../../elements/emby-ratingbutton/emby-ratingbutton';
+import '../../elements/emby-playstatebutton/emby-playstatebutton';
+import ServerConnections from '../ServerConnections';
 
     function getIndex(item, options) {
-
         if (options.index === 'disc') {
-
             return item.ParentIndexNumber == null ? '' : globalize.translate('ValueDiscNumber', item.ParentIndexNumber);
         }
 
-        var sortBy = (options.sortBy || '').toLowerCase();
-        var code;
-        var name;
+        const sortBy = (options.sortBy || '').toLowerCase();
+        let code;
+        let name;
 
         if (sortBy.indexOf('sortname') === 0) {
-
             if (item.Type === 'Episode') {
                 return '';
             }
@@ -29,11 +42,9 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
             return name.toUpperCase();
         }
         if (sortBy.indexOf('officialrating') === 0) {
-
             return item.OfficialRating || globalize.translate('Unrated');
         }
         if (sortBy.indexOf('communityrating') === 0) {
-
             if (item.CommunityRating == null) {
                 return globalize.translate('Unrated');
             }
@@ -41,7 +52,6 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
             return Math.floor(item.CommunityRating);
         }
         if (sortBy.indexOf('criticrating') === 0) {
-
             if (item.CriticRating == null) {
                 return globalize.translate('Unrated');
             }
@@ -49,7 +59,6 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
             return Math.floor(item.CriticRating);
         }
         if (sortBy.indexOf('albumartist') === 0) {
-
             // SortName
             if (!item.AlbumArtist) {
                 return '';
@@ -68,73 +77,63 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
     }
 
     function getImageUrl(item, width) {
+        const apiClient = ServerConnections.getApiClient(item.ServerId);
+        let itemId;
 
-        var apiClient = connectionManager.getApiClient(item.ServerId);
-
-        var options = {
-            maxWidth: width * 2,
+        const options = {
+            maxWidth: width,
             type: 'Primary'
         };
 
         if (item.ImageTags && item.ImageTags.Primary) {
-
             options.tag = item.ImageTags.Primary;
-            return apiClient.getScaledImageUrl(item.Id, options);
-        }
-
-        if (item.AlbumId && item.AlbumPrimaryImageTag) {
-
+            itemId = item.Id;
+        } else 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;
         }
 
+        if (itemId) {
+            return apiClient.getScaledImageUrl(itemId, options);
+        }
         return null;
     }
 
     function getChannelImageUrl(item, width) {
-
-        var apiClient = connectionManager.getApiClient(item.ServerId);
-
-        var options = {
-            maxWidth: width * 2,
+        const apiClient = ServerConnections.getApiClient(item.ServerId);
+        const options = {
+            maxWidth: width,
             type: 'Primary'
         };
 
         if (item.ChannelId && item.ChannelPrimaryImageTag) {
-
             options.tag = item.ChannelPrimaryImageTag;
-            return apiClient.getScaledImageUrl(item.ChannelId, options);
         }
 
-        return null;
+        if (item.ChannelId) {
+            return apiClient.getScaledImageUrl(item.ChannelId, options);
+        }
     }
 
     function getTextLinesHtml(textlines, isLargeStyle) {
+        let html = '';
 
-        var html = '';
-
-        var largeTitleTagName = layoutManager.tv ? 'h2' : 'div';
-
-        for (var i = 0, length = textlines.length; i < length; i++) {
-
-            var text = textlines[i];
+        const largeTitleTagName = layoutManager.tv ? 'h2' : 'div';
 
+        for (const [i, text] of textlines.entries()) {
             if (!text) {
                 continue;
             }
 
             if (i === 0) {
                 if (isLargeStyle) {
-                    html += '<' + largeTitleTagName + ' class="listItemBodyText">';
+                    html += `<${largeTitleTagName} class="listItemBodyText">`;
                 } else {
                     html += '<div class="listItemBodyText">';
                 }
@@ -143,7 +142,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
             }
             html += (textlines[i] || '&nbsp;');
             if (i === 0 && isLargeStyle) {
-                html += '</' + largeTitleTagName + '>';
+                html += `</${largeTitleTagName}>`;
             } else {
                 html += '</div>';
             }
@@ -153,14 +152,12 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
     }
 
     function getRightButtonsHtml(options) {
+        let html = '';
 
-        var html = '';
+        for (let i = 0, length = options.rightButtons.length; i < length; i++) {
+            const button = options.rightButtons[i];
 
-        for (var i = 0, length = options.rightButtons.length; i < length; i++) {
-
-            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 + '"><span class="material-icons ' + button.icon + '"></span></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;
@@ -170,37 +167,33 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
         return item.Id;
     }
 
-    function getListViewHtml(options) {
+    export function getListViewHtml(options) {
+        const items = options.items;
 
-        var items = options.items;
+        let groupTitle = '';
+        const action = options.action || 'link';
 
-        var groupTitle = '';
-        var action = options.action || 'link';
+        const isLargeStyle = options.imageSize === 'large';
+        const enableOverview = options.enableOverview;
 
-        var isLargeStyle = options.imageSize === 'large';
-        var enableOverview = options.enableOverview;
+        const clickEntireItem = layoutManager.tv ? true : false;
+        const outerTagName = clickEntireItem ? 'button' : 'div';
+        const enableSideMediaInfo = options.enableSideMediaInfo != null ? options.enableSideMediaInfo : true;
 
-        var clickEntireItem = layoutManager.tv ? true : false;
-        var outerTagName = clickEntireItem ? 'button' : 'div';
-        var enableSideMediaInfo = options.enableSideMediaInfo != null ? options.enableSideMediaInfo : true;
+        let outerHtml = '';
 
-        var outerHtml = '';
+        const enableContentWrapper = options.enableOverview && !layoutManager.tv;
+        const containerAlbumArtistIds = (options.containerAlbumArtists || []).map(getId);
 
-        var enableContentWrapper = options.enableOverview && !layoutManager.tv;
-        var containerAlbumArtistIds = (options.containerAlbumArtists || []).map(getId);
+        for (let i = 0, length = items.length; i < length; i++) {
+            const item = items[i];
 
-        for (var i = 0, length = items.length; i < length; i++) {
-
-            var item = items[i];
-
-            var html = '';
+            let html = '';
 
             if (options.showIndex) {
-
-                var itemGroupTitle = getIndex(item, options);
+                const itemGroupTitle = getIndex(item, options);
 
                 if (itemGroupTitle !== groupTitle) {
-
                     if (html) {
                         html += '</div>';
                     }
@@ -219,7 +212,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                 }
             }
 
-            var cssClass = 'listItem';
+            let cssClass = 'listItem';
 
             if (options.border || (options.highlight !== false && !layoutManager.tv)) {
                 cssClass += ' listItem-border';
@@ -233,74 +226,70 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                 cssClass += ' listItem-focusscale';
             }
 
-            var downloadWidth = 80;
+            let downloadWidth = 80;
 
             if (isLargeStyle) {
                 cssClass += ' listItem-largeImage';
                 downloadWidth = 500;
             }
 
-            var playlistItemId = item.PlaylistItemId ? (' data-playlistitemid="' + item.PlaylistItemId + '"') : '';
+            const playlistItemId = item.PlaylistItemId ? (` data-playlistitemid="${item.PlaylistItemId}"`) : '';
 
-            var positionTicksData = item.UserData && item.UserData.PlaybackPositionTicks ? (' data-positionticks="' + item.UserData.PlaybackPositionTicks + '"') : '';
-            var collectionIdData = options.collectionId ? (' data-collectionid="' + options.collectionId + '"') : '';
-            var playlistIdData = options.playlistId ? (' data-playlistid="' + options.playlistId + '"') : '';
-            var mediaTypeData = item.MediaType ? (' data-mediatype="' + item.MediaType + '"') : '';
-            var collectionTypeData = item.CollectionType ? (' data-collectiontype="' + item.CollectionType + '"') : '';
-            var channelIdData = item.ChannelId ? (' data-channelid="' + item.ChannelId + '"') : '';
+            const positionTicksData = item.UserData && item.UserData.PlaybackPositionTicks ? (` data-positionticks="${item.UserData.PlaybackPositionTicks}"`) : '';
+            const collectionIdData = options.collectionId ? (` data-collectionid="${options.collectionId}"`) : '';
+            const playlistIdData = options.playlistId ? (` data-playlistid="${options.playlistId}"`) : '';
+            const mediaTypeData = item.MediaType ? (` data-mediatype="${item.MediaType}"`) : '';
+            const collectionTypeData = item.CollectionType ? (` data-collectiontype="${item.CollectionType}"`) : '';
+            const channelIdData = item.ChannelId ? (` data-channelid="${item.ChannelId}"`) : '';
 
             if (enableContentWrapper) {
-
                 cssClass += ' listItem-withContentWrapper';
             }
 
-            html += '<' + outerTagName + ' class="' + cssClass + '"' + playlistItemId + ' data-action="' + action + '" data-isfolder="' + item.IsFolder + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-type="' + item.Type + '"' + mediaTypeData + collectionTypeData + channelIdData + positionTicksData + collectionIdData + playlistIdData + '>';
+            html += `<${outerTagName} class="${cssClass}"${playlistItemId} data-action="${action}" data-isfolder="${item.IsFolder}" data-id="${item.Id}" data-serverid="${item.ServerId}" data-type="${item.Type}"${mediaTypeData}${collectionTypeData}${channelIdData}${positionTicksData}${collectionIdData}${playlistIdData}>`;
 
             if (enableContentWrapper) {
-
                 html += '<div class="listItem-content">';
             }
 
             if (!clickEntireItem && options.dragHandle) {
-                //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 += '<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';
+                const imgUrl = options.imageSource === 'channel' ? getChannelImageUrl(item, downloadWidth) : getImageUrl(item, downloadWidth);
+                let imageClass = isLargeStyle ? 'listItemImage listItemImage-large' : 'listItemImage';
 
                 if (isLargeStyle && layoutManager.tv) {
                     imageClass += ' listItemImage-large-tv';
                 }
 
-                var playOnImageClick = options.imagePlayButton && !layoutManager.tv;
+                const playOnImageClick = options.imagePlayButton && !layoutManager.tv;
 
                 if (!clickEntireItem) {
                     imageClass += ' itemAction';
                 }
 
-                var imageAction = playOnImageClick ? 'resume' : action;
+                const imageAction = playOnImageClick ? 'link' : action;
 
                 if (imgUrl) {
                     html += '<div data-action="' + imageAction + '" class="' + imageClass + ' lazy" data-src="' + imgUrl + '" item-icon>';
                 } else {
-                    html += '<div class="' + imageClass + '">';
+                    html += '<div class="' + imageClass + ' cardImageContainer ' + cardBuilder.getDefaultBackgroundClass(item.Name) + '">' + cardBuilder.getDefaultText(item, options);
                 }
 
-                var indicatorsHtml = '';
+                let indicatorsHtml = '';
                 indicatorsHtml += indicators.getPlayedIndicatorHtml(item);
 
                 if (indicatorsHtml) {
-                    html += '<div class="indicators listItemIndicators">' + indicatorsHtml + '</div>';
+                    html += `<div class="indicators listItemIndicators">${indicatorsHtml}</div>`;
                 }
 
                 if (playOnImageClick) {
                     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, {
+                const progressHtml = indicators.getProgressBarHtml(item, {
                     containerClass: 'listItemProgressBar'
                 });
 
@@ -311,13 +300,12 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
             }
 
             if (options.showIndexNumberLeft) {
-
                 html += '<div class="listItem-indexnumberleft">';
                 html += (item.IndexNumber || '&nbsp;');
                 html += '</div>';
             }
 
-            var textlines = [];
+            const textlines = [];
 
             if (options.showProgramDateTime) {
                 textlines.push(datetime.toLocaleString(datetime.parseISO8601Date(item.StartDate), {
@@ -340,7 +328,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                 }
             }
 
-            var parentTitle = null;
+            let parentTitle = null;
 
             if (options.showParentTitle) {
                 if (item.Type === 'Episode') {
@@ -350,18 +338,16 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                 }
             }
 
-            var displayName = itemHelper.getDisplayName(item, {
+            let displayName = itemHelper.getDisplayName(item, {
                 includeParentInfo: options.includeParentInfoInTitle
             });
 
             if (options.showIndexNumber && item.IndexNumber != null) {
-                displayName = item.IndexNumber + '. ' + displayName;
+                displayName = `${item.IndexNumber}. ${displayName}`;
             }
 
             if (options.showParentTitle && options.parentTitleWithTitle) {
-
                 if (displayName) {
-
                     if (parentTitle) {
                         parentTitle += ' - ';
                     }
@@ -379,29 +365,15 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
 
             if (item.IsFolder) {
                 if (options.artist !== false) {
-
                     if (item.AlbumArtist && item.Type === 'MusicAlbum') {
                         textlines.push(item.AlbumArtist);
                     }
                 }
             } else {
-
-                var showArtist = options.artist === true;
-                var artistItems = item.ArtistItems;
-
-                if (!showArtist && options.artist !== false) {
-
-                    if (!artistItems || !artistItems.length) {
-                        showArtist = true;
-                    } else if (artistItems.length > 1 || containerAlbumArtistIds.indexOf(artistItems[0].Id) === -1) {
-                        showArtist = true;
-                    }
-                }
-
-                if (showArtist) {
-
+                if (options.artist) {
+                    const artistItems = item.ArtistItems;
                     if (artistItems && item.Type !== 'MusicAlbum') {
-                        textlines.push(artistItems.map(function (a) {
+                        textlines.push(artistItems.map(a => {
                             return a.Name;
                         }).join(', '));
                     }
@@ -409,7 +381,6 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
             }
 
             if (item.Type === 'TvChannel') {
-
                 if (item.CurrentProgram) {
                     textlines.push(itemHelper.getDisplayName(item.CurrentProgram));
                 }
@@ -424,23 +395,22 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                 cssClass += ' listItemBody-noleftpadding';
             }
 
-            html += '<div class="' + cssClass + '">';
-
-            const moreIcon = 'more_horiz';
+            html += `<div class="${cssClass}">`;
 
             html += getTextLinesHtml(textlines, isLargeStyle);
 
             if (options.mediaInfo !== false) {
                 if (!enableSideMediaInfo) {
+                    const mediaInfoClass = 'secondary listItemMediaInfo listItemBodyText';
 
-                    var mediaInfoClass = 'secondary listItemMediaInfo listItemBodyText';
-
-                    html += '<div class="' + mediaInfoClass + '">' + mediaInfo.getPrimaryMediaInfoHtml(item, {
+                    html += `<div class="${mediaInfoClass}">`;
+                    html += mediaInfo.getPrimaryMediaInfoHtml(item, {
                         episodeTitle: false,
                         originalAirDate: false,
                         subtitles: false
 
-                    }) + '</div>';
+                    });
+                    html += '</div>';
                 }
             }
 
@@ -454,7 +424,8 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
 
             if (options.mediaInfo !== false) {
                 if (enableSideMediaInfo) {
-                    html += '<div class="secondary listItemMediaInfo">' + mediaInfo.getPrimaryMediaInfoHtml(item, {
+                    html += '<div class="secondary listItemMediaInfo">';
+                    html += mediaInfo.getPrimaryMediaInfoHtml(item, {
 
                         year: false,
                         container: false,
@@ -462,7 +433,8 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                         criticRating: false,
                         endsAt: false
 
-                    }) + '</div>';
+                    });
+                    html += '</div>';
                 }
             }
 
@@ -473,15 +445,10 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
             html += '<div class="listViewUserDataButtons">';
 
             if (!clickEntireItem) {
-
                 if (options.addToListButton) {
                     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"><span class="material-icons ' + moreIcon + '"></span></button>';
-                }
-
                 if (options.infoButton) {
                     html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="link"><span class="material-icons info_outline"></span></button>';
                 }
@@ -491,18 +458,21 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                 }
 
                 if (options.enableUserDataButtons !== false) {
+                    const userData = item.UserData || {};
+                    const likes = userData.Likes == null ? '' : userData.Likes;
 
-                    var userData = item.UserData || {};
-                    var likes = userData.Likes == null ? '' : userData.Likes;
-
-                    if (itemHelper.canMarkPlayed(item)) {
+                    if (itemHelper.canMarkPlayed(item) && options.enablePlayedButton !== false) {
                         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)) {
+                    if (itemHelper.canRate(item) && options.enableRatingButton !== false) {
                         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>';
                     }
                 }
+
+                if (options.moreButton !== false) {
+                    html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="menu"><span class="material-icons more_vert"></span></button>';
+                }
             }
             html += '</div>';
 
@@ -516,7 +486,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                 }
             }
 
-            html += '</' + outerTagName + '>';
+            html += `</${outerTagName}>`;
 
             outerHtml += html;
         }
@@ -524,7 +494,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
         return outerHtml;
     }
 
-    return {
-        getListViewHtml: getListViewHtml
-    };
-});
+/* eslint-enable indent */
+export default {
+    getListViewHtml: getListViewHtml
+};

src/components/loading/loading.js

@@ -1,84 +1,74 @@
-define(['components/loading/loadingLegacy', 'browser', 'css!./loading'], function (loadingLegacy, browser) {
-    'use strict';
+import './loading.css';
 
-    if (browser.tizen || browser.operaTv || browser.chromecast || browser.orsay || browser.web0s || browser.ps4) {
-        return loadingLegacy;
+let loadingElem;
+let layer1;
+let layer2;
+let layer3;
+let layer4;
+let circleLefts;
+let circleRights;
+
+export function show() {
+    let elem = loadingElem;
+
+    if (!elem) {
+        elem = document.createElement('div');
+        loadingElem = elem;
+
+        elem.classList.add('docspinner');
+        elem.classList.add('mdl-spinner');
+
+        elem.innerHTML = '<div class="mdl-spinner__layer mdl-spinner__layer-1"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle mdl-spinner__circleLeft"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle mdl-spinner__circleRight"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-2"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle mdl-spinner__circleLeft"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle mdl-spinner__circleRight"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-3"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle mdl-spinner__circleLeft"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle mdl-spinner__circleRight"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-4"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle mdl-spinner__circleLeft"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle mdl-spinner__circleRight"></div></div></div>';
+
+        document.body.appendChild(elem);
+
+        layer1 = elem.querySelector('.mdl-spinner__layer-1');
+        layer2 = elem.querySelector('.mdl-spinner__layer-2');
+        layer3 = elem.querySelector('.mdl-spinner__layer-3');
+        layer4 = elem.querySelector('.mdl-spinner__layer-4');
+
+        circleLefts = elem.querySelectorAll('.mdl-spinner__circleLeft');
+        circleRights = elem.querySelectorAll('.mdl-spinner__circleRight');
     }
 
-    var loadingElem;
-    var layer1;
-    var layer2;
-    var layer3;
-    var layer4;
-    var circleLefts;
-    var circleRights;
+    elem.classList.add('mdlSpinnerActive');
 
-    return {
-        show: function () {
-            var elem = loadingElem;
+    layer1.classList.add('mdl-spinner__layer-1-active');
+    layer2.classList.add('mdl-spinner__layer-2-active');
+    layer3.classList.add('mdl-spinner__layer-3-active');
+    layer4.classList.add('mdl-spinner__layer-4-active');
 
-            if (!elem) {
+    for (let i = 0, length = circleLefts.length; i < length; i++) {
+        circleLefts[i].classList.add('mdl-spinner__circleLeft-active');
+    }
 
-                elem = document.createElement('div');
-                loadingElem = elem;
+    for (let i = 0, length = circleRights.length; i < length; i++) {
+        circleRights[i].classList.add('mdl-spinner__circleRight-active');
+    }
+}
 
-                elem.classList.add('docspinner');
-                elem.classList.add('mdl-spinner');
+export function hide() {
+    const elem = loadingElem;
 
-                elem.innerHTML = '<div class="mdl-spinner__layer mdl-spinner__layer-1"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle mdl-spinner__circleLeft"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle mdl-spinner__circleRight"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-2"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle mdl-spinner__circleLeft"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle mdl-spinner__circleRight"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-3"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle mdl-spinner__circleLeft"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle mdl-spinner__circleRight"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-4"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle mdl-spinner__circleLeft"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle mdl-spinner__circleRight"></div></div></div>';
+    if (elem) {
+        elem.classList.remove('mdlSpinnerActive');
 
-                document.body.appendChild(elem);
+        elem.classList.remove('mdl-spinner__layer-1-active');
+        elem.classList.remove('mdl-spinner__layer-2-active');
+        elem.classList.remove('mdl-spinner__layer-3-active');
+        elem.classList.remove('mdl-spinner__layer-4-active');
 
-                layer1 = elem.querySelector('.mdl-spinner__layer-1');
-                layer2 = elem.querySelector('.mdl-spinner__layer-2');
-                layer3 = elem.querySelector('.mdl-spinner__layer-3');
-                layer4 = elem.querySelector('.mdl-spinner__layer-4');
-
-                circleLefts = elem.querySelectorAll('.mdl-spinner__circleLeft');
-                circleRights = elem.querySelectorAll('.mdl-spinner__circleRight');
-            }
-
-            elem.classList.add('mdlSpinnerActive');
-
-            layer1.classList.add('mdl-spinner__layer-1-active');
-            layer2.classList.add('mdl-spinner__layer-2-active');
-            layer3.classList.add('mdl-spinner__layer-3-active');
-            layer4.classList.add('mdl-spinner__layer-4-active');
-
-            var i;
-            var length;
-
-            for (i = 0, length = circleLefts.length; i < length; i++) {
-                circleLefts[i].classList.add('mdl-spinner__circleLeft-active');
-            }
-
-            for (i = 0, length = circleRights.length; i < length; i++) {
-                circleRights[i].classList.add('mdl-spinner__circleRight-active');
-            }
-        },
-        hide: function () {
-            var elem = loadingElem;
-
-            if (elem) {
-
-                elem.classList.remove('mdlSpinnerActive');
-
-                elem.classList.remove('mdl-spinner__layer-1-active');
-                elem.classList.remove('mdl-spinner__layer-2-active');
-                elem.classList.remove('mdl-spinner__layer-3-active');
-                elem.classList.remove('mdl-spinner__layer-4-active');
-
-                var i;
-                var length;
-
-                for (i = 0, length = circleLefts.length; i < length; i++) {
-                    circleLefts[i].classList.remove('mdl-spinner__circleLeft-active');
-                }
-
-                for (i = 0, length = circleRights.length; i < length; i++) {
-                    circleRights[i].classList.remove('mdl-spinner__circleRight-active');
-                }
-            }
+        for (let i = 0, length = circleLefts.length; i < length; i++) {
+            circleLefts[i].classList.remove('mdl-spinner__circleLeft-active');
         }
-    };
-});
+
+        for (let i = 0, length = circleRights.length; i < length; i++) {
+            circleRights[i].classList.remove('mdl-spinner__circleRight-active');
+        }
+    }
+}
+
+export default {
+    show: show,
+    hide: hide
+};

src/components/loading/loadingLegacy.css

@@ -1,10 +0,0 @@
-.loading-spinner {
-    margin-top: -3em;
-    margin-left: -3em;
-    width: 6em;
-    height: 6em;
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    z-index: 9999999;
-}

src/components/loading/loadingLegacy.js

@@ -1,28 +0,0 @@
-define(['require', 'css!./loadingLegacy'], function (require) {
-    'use strict';
-
-    var loadingElem;
-
-    return {
-        show: function () {
-            var elem = loadingElem;
-            if (!elem) {
-                elem = document.createElement('img');
-                elem.src = require.toUrl('.').split('?')[0] + '/loader.gif';
-
-                loadingElem = elem;
-                elem.classList.add('loading-spinner');
-
-                document.body.appendChild(elem);
-            }
-
-            elem.classList.remove('hide');
-        },
-        hide: function () {
-            var elem = loadingElem;
-            if (elem) {
-                elem.classList.add('hide');
-            }
-        }
-    };
-});

src/components/loadingdialog/loadingdialog.js

@@ -1,92 +0,0 @@
-define(['loading', 'events', 'dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 'require', 'material-icons', 'emby-button', 'paper-icon-button-light', 'emby-input', 'formDialogStyle', 'flexStyles'], function (loading, events, dialogHelper, dom, layoutManager, scrollHelper, globalize, require) {
-    'use strict';
-
-    function showDialog(instance, options, template) {
-        var dialogOptions = {
-            removeOnClose: true,
-            scrollY: false
-        };
-
-        var enableTvLayout = layoutManager.tv;
-        if (enableTvLayout) {
-            dialogOptions.size = 'fullscreen';
-        }
-
-        var dlg = dialogHelper.createDialog(dialogOptions);
-
-        var configuredButtons = [];
-
-        dlg.classList.add('formDialog');
-
-        dlg.innerHTML = globalize.translateHtml(template, 'core');
-
-        dlg.classList.add('align-items-center');
-        dlg.classList.add('justify-items-center');
-
-        var formDialogContent = dlg.querySelector('.formDialogContent');
-        formDialogContent.style['flex-grow'] = 'initial';
-        formDialogContent.style['max-width'] = '50%';
-        formDialogContent.style['max-height'] = '60%';
-
-        if (enableTvLayout) {
-            scrollHelper.centerFocus.on(formDialogContent, false);
-            dlg.querySelector('.formDialogHeader').style.marginTop = '15%';
-        } else {
-            dlg.classList.add('dialog-fullscreen-lowres');
-        }
-
-        //dlg.querySelector('.btnCancel').addEventListener('click', function (e) {
-        //    dialogHelper.close(dlg);
-        //});
-
-        dlg.querySelector('.formDialogHeaderTitle').innerHTML = options.title;
-
-        dlg.querySelector('.text').innerHTML = options.text;
-
-        instance.dlg = dlg;
-
-        return dialogHelper.open(dlg).then(function () {
-            if (enableTvLayout) {
-                scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false);
-            }
-
-            loading.hide();
-        });
-    }
-
-    function LoadingDialog(options) {
-        this.options = options;
-    }
-
-    LoadingDialog.prototype.show = function () {
-        var instance = this;
-        loading.show();
-
-        return new Promise(function (resolve, reject) {
-            require(['text!./../dialog/dialog.template.html'], function (template) {
-                showDialog(instance, instance.options, template);
-                resolve();
-            });
-        });
-    };
-
-    LoadingDialog.prototype.setTitle = function (title) {
-    };
-
-    LoadingDialog.prototype.setText = function (text) {
-    };
-
-    LoadingDialog.prototype.hide = function () {
-        if (this.dlg) {
-            dialogHelper.close(this.dlg);
-            this.dlg = null;
-        }
-    };
-
-    LoadingDialog.prototype.destroy = function () {
-        this.dlg = null;
-        this.options = null;
-    };
-
-    return LoadingDialog;
-});

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/logoscreensaver/style.css

@@ -1,18 +0,0 @@
-.logoScreenSaver {
-    background: #101010;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 1000;
-    text-align: center;
-}
-
-.logoScreenSaverImage {
-    height: 120px;
-    position: absolute;
-    top: 50%;
-    margin-top: -60px;
-    margin-left: -197px;
-}

src/components/maintabsmanager.js

@@ -1,31 +1,17 @@
-define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom, browser, events) {
-    'use strict';
+import dom from '../scripts/dom';
+import browser from '../scripts/browser';
+import { Events } from 'jellyfin-apiclient';
+import '../elements/emby-tabs/emby-tabs';
+import '../elements/emby-button/emby-button';
 
-    var tabOwnerView;
-    var queryScope = document.querySelector('.skinHeader');
-    var footerTabsContainer;
-    var headerTabsContainer;
-    var tabsElem;
+/* eslint-disable indent */
 
-    function enableTabsInFooter() {
-        return false;
-    }
-
-    function getTabsContainerElem() {
-    }
-
-    function ensureElements(enableInFooter) {
-
-        if (enableInFooter) {
-            if (!footerTabsContainer) {
-                footerTabsContainer = document.createElement('div');
-                footerTabsContainer.classList.add('footerTabs');
-                footerTabsContainer.classList.add('sectionTabs');
-                footerTabsContainer.classList.add('hide');
-                //appFooter.add(footerTabsContainer);
-            }
-        }
+    let tabOwnerView;
+    const queryScope = document.querySelector('.skinHeader');
+    let headerTabsContainer;
+    let tabsElem;
 
+    function ensureElements() {
         if (!headerTabsContainer) {
             headerTabsContainer = queryScope.querySelector('.headerTabs');
         }
@@ -37,14 +23,12 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
     }
 
     function allowSwipe(target) {
-
         function allowSwipeOn(elem) {
-
             if (dom.parentWithTag(elem, 'input')) {
                 return false;
             }
 
-            var classList = elem.classList;
+            const classList = elem.classList;
             if (classList) {
                 return !classList.contains('scrollX') && !classList.contains('animatedScrollX');
             }
@@ -52,7 +36,7 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
             return true;
         }
 
-        var parent = target;
+        let parent = target;
         while (parent != null) {
             if (!allowSwipeOn(parent)) {
                 return false;
@@ -64,31 +48,28 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
     }
 
     function configureSwipeTabs(view, tabsElem, getTabContainersFn) {
-
         if (!browser.touch) {
             return;
         }
 
         // implement without hammer
-        var pageCount = getTabContainersFn().length;
-        var onSwipeLeft = function (e, target) {
+        const onSwipeLeft = function (e, target) {
             if (allowSwipe(target) && view.contains(target)) {
                 tabsElem.selectNext();
             }
         };
 
-        var onSwipeRight = function (e, target) {
+        const onSwipeRight = function (e, target) {
             if (allowSwipe(target) && view.contains(target)) {
                 tabsElem.selectPrevious();
             }
         };
 
-        require(['touchHelper'], function (TouchHelper) {
+        import('../scripts/touchHelper').then(({default: TouchHelper}) => {
+            const touchHelper = new TouchHelper(view.parentNode.parentNode);
 
-            var touchHelper = new TouchHelper(view.parentNode.parentNode);
-
-            events.on(touchHelper, 'swipeleft', onSwipeLeft);
-            events.on(touchHelper, 'swiperight', onSwipeRight);
+            Events.on(touchHelper, 'swipeleft', onSwipeLeft);
+            Events.on(touchHelper, 'swiperight', onSwipeRight);
 
             view.addEventListener('viewdestroy', function () {
                 touchHelper.destroy();
@@ -96,29 +77,20 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
         });
     }
 
-    function setTabs(view, selectedIndex, getTabsFn, getTabContainersFn, onBeforeTabChange, onTabChange, setSelectedIndex) {
-
-        var enableInFooter = enableTabsInFooter();
-
+    export function setTabs(view, selectedIndex, getTabsFn, getTabContainersFn, onBeforeTabChange, onTabChange, setSelectedIndex) {
         if (!view) {
             if (tabOwnerView) {
-
                 if (!headerTabsContainer) {
                     headerTabsContainer = queryScope.querySelector('.headerTabs');
                 }
 
-                ensureElements(enableInFooter);
+                ensureElements();
 
                 document.body.classList.remove('withSectionTabs');
 
                 headerTabsContainer.innerHTML = '';
                 headerTabsContainer.classList.add('hide');
 
-                if (footerTabsContainer) {
-                    footerTabsContainer.innerHTML = '';
-                    footerTabsContainer.classList.add('hide');
-                }
-
                 tabOwnerView = null;
             }
             return {
@@ -127,28 +99,26 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
             };
         }
 
-        ensureElements(enableInFooter);
+        ensureElements();
 
-        var tabsContainerElem = enableInFooter ? footerTabsContainer : headerTabsContainer;
+        const tabsContainerElem = headerTabsContainer;
 
         if (!tabOwnerView) {
             tabsContainerElem.classList.remove('hide');
         }
 
         if (tabOwnerView !== view) {
+            let index = 0;
 
-            var index = 0;
-
-            var indexAttribute = selectedIndex == null ? '' : (' data-index="' + selectedIndex + '"');
-            var tabsHtml = '<div is="emby-tabs"' + indexAttribute + ' class="tabs-viewmenubar"><div class="emby-tabs-slider" style="white-space:nowrap;">' + getTabsFn().map(function (t) {
-
-                var tabClass = 'emby-tab-button';
+            const indexAttribute = selectedIndex == null ? '' : (' data-index="' + selectedIndex + '"');
+            const tabsHtml = '<div is="emby-tabs"' + indexAttribute + ' class="tabs-viewmenubar"><div class="emby-tabs-slider" style="white-space:nowrap;">' + getTabsFn().map(function (t) {
+                let tabClass = 'emby-tab-button';
 
                 if (t.enabled === false) {
                     tabClass += ' hide';
                 }
 
-                var tabHtml;
+                let tabHtml;
 
                 if (t.cssClass) {
                     tabClass += ' ' + t.cssClass;
@@ -162,7 +132,6 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
 
                 index++;
                 return tabHtml;
-
             }).join('') + '</div></div>';
 
             tabsContainerElem.innerHTML = tabsHtml;
@@ -176,23 +145,15 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
             configureSwipeTabs(view, tabsElem, getTabContainersFn);
 
             tabsElem.addEventListener('beforetabchange', function (e) {
-
-                var tabContainers = getTabContainersFn();
+                const tabContainers = getTabContainersFn();
                 if (e.detail.previousIndex != null) {
-
-                    var previousPanel = tabContainers[e.detail.previousIndex];
+                    const previousPanel = tabContainers[e.detail.previousIndex];
                     if (previousPanel) {
                         previousPanel.classList.remove('is-active');
                     }
                 }
 
-                var newPanel = tabContainers[e.detail.selectedTabIndex];
-
-                //if (e.detail.previousIndex != null && e.detail.previousIndex != e.detail.selectedTabIndex) {
-                //    if (newPanel.animate && (animateTabs || []).indexOf(e.detail.selectedTabIndex) != -1) {
-                //        fadeInRight(newPanel);
-                //    }
-                //}
+                const newPanel = tabContainers[e.detail.selectedTabIndex];
 
                 if (newPanel) {
                     newPanel.classList.add('is-active');
@@ -210,16 +171,11 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
                 if (tabsElem.selectedIndex) {
                     tabsElem.selectedIndex(selectedIndex);
                 } else {
-
                     tabsElem.readySelectedIndex = selectedIndex;
                     tabsElem.addEventListener('ready', onViewTabsReady);
                 }
             }
 
-            //if (enableSwipe !== false) {
-            //    libraryBrowser.configureSwipeTabs(ownerpage, tabs);
-            //}
-
             return {
                 tabsContainer: tabsContainerElem,
                 tabs: tabsContainerElem.querySelector('[is="emby-tabs"]'),
@@ -241,9 +197,8 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
         };
     }
 
-    function selectedTabIndex(index) {
-
-        var tabsContainerElem = headerTabsContainer;
+    export function selectedTabIndex(index) {
+        const tabsContainerElem = headerTabsContainer;
 
         if (!tabsElem) {
             tabsElem = tabsContainerElem.querySelector('[is="emby-tabs"]');
@@ -256,13 +211,8 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
         }
     }
 
-    function getTabsElement() {
+    export function getTabsElement() {
         return document.querySelector('.tabs-viewmenubar');
     }
 
-    return {
-        setTabs: setTabs,
-        getTabsElement: getTabsElement,
-        selectedTabIndex: selectedTabIndex
-    };
-});
+/* eslint-enable indent */

src/components/mediaLibraryCreator/mediaLibraryCreator.js

@@ -0,0 +1,234 @@
+/* eslint-disable indent */
+
+/**
+ * Module for media library creator.
+ * @module components/mediaLibraryCreator/mediaLibraryCreator
+ */
+
+import loading from '../loading/loading';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import dom from '../../scripts/dom';
+import 'jquery';
+import libraryoptionseditor from '../libraryoptionseditor/libraryoptionseditor';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-input/emby-input';
+import '../../elements/emby-select/emby-select';
+import '../../elements/emby-toggle/emby-toggle';
+import '../listview/listview.css';
+import '../formdialog.css';
+import '../../assets/css/flexstyles.scss';
+import toast from '../toast/toast';
+import alert from '../alert';
+
+    function onAddLibrary() {
+        if (isCreating) {
+            return false;
+        }
+
+        if (pathInfos.length == 0) {
+            alert({
+                text: globalize.translate('PleaseAddAtLeastOneFolder'),
+                type: 'error'
+            });
+
+            return false;
+        }
+
+        isCreating = true;
+        loading.show();
+        const dlg = dom.parentWithClass(this, 'dlg-librarycreator');
+        const name = $('#txtValue', dlg).val();
+        let type = $('#selectCollectionType', dlg).val();
+
+        if (type == 'mixed') {
+            type = null;
+        }
+
+        const libraryOptions = libraryoptionseditor.getLibraryOptions(dlg.querySelector('.libraryOptions'));
+        libraryOptions.PathInfos = pathInfos;
+        ApiClient.addVirtualFolder(name, type, currentOptions.refresh, libraryOptions).then(() => {
+            hasChanges = true;
+            isCreating = false;
+            loading.hide();
+            dialogHelper.close(dlg);
+        }, () => {
+            toast(globalize.translate('ErrorAddingMediaPathToVirtualFolder'));
+
+            isCreating = false;
+            loading.hide();
+        });
+        return false;
+    }
+
+    function getCollectionTypeOptionsHtml(collectionTypeOptions) {
+        return collectionTypeOptions.map(i => {
+            return `<option value="${i.value}">${i.name}</option>`;
+        }).join('');
+    }
+
+    function initEditor(page, collectionTypeOptions) {
+        $('#selectCollectionType', page).html(getCollectionTypeOptionsHtml(collectionTypeOptions)).val('').on('change', function () {
+            const value = this.value;
+            const dlg = $(this).parents('.dialog')[0];
+            libraryoptionseditor.setContentType(dlg.querySelector('.libraryOptions'), value == 'mixed' ? '' : value);
+
+            if (value) {
+                dlg.querySelector('.libraryOptions').classList.remove('hide');
+            } else {
+                dlg.querySelector('.libraryOptions').classList.add('hide');
+            }
+
+            if (value != 'mixed') {
+                const index = this.selectedIndex;
+
+                if (index != -1) {
+                    const name = this.options[index].innerHTML.replace('*', '').replace('&amp;', '&');
+                    $('#txtValue', dlg).val(name);
+                    const folderOption = collectionTypeOptions.filter(i => {
+                        return i.value == value;
+                    })[0];
+                    $('.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);
+    }
+
+    function onToggleAdvancedChange() {
+        const dlg = dom.parentWithClass(this, 'dlg-librarycreator');
+        libraryoptionseditor.setAdvancedVisible(dlg.querySelector('.libraryOptions'), this.checked);
+    }
+
+    function onAddButtonClick() {
+        const page = dom.parentWithClass(this, 'dlg-librarycreator');
+
+        import('../directorybrowser/directorybrowser').then(({default: directoryBrowser}) => {
+            const picker = new directoryBrowser();
+            picker.show({
+                enableNetworkSharePath: true,
+                callback: function (path, networkSharePath) {
+                    if (path) {
+                        addMediaLocation(page, path, networkSharePath);
+                    }
+
+                    picker.close();
+                }
+            });
+        });
+    }
+
+    function getFolderHtml(pathInfo, index) {
+        let 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>`;
+
+        if (pathInfo.NetworkPath) {
+            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}"><span class="material-icons remove_circle"></span></button>`;
+        html += '</div>';
+        return html;
+    }
+
+    function renderPaths(page) {
+        const foldersHtml = pathInfos.map(getFolderHtml).join('');
+        const folderList = page.querySelector('.folderList');
+        folderList.innerHTML = foldersHtml;
+
+        if (foldersHtml) {
+            folderList.classList.remove('hide');
+        } else {
+            folderList.classList.add('hide');
+        }
+    }
+
+    function addMediaLocation(page, path, networkSharePath) {
+        const pathLower = path.toLowerCase();
+        const pathFilter = pathInfos.filter(p => {
+            return p.Path.toLowerCase() == pathLower;
+        });
+
+        if (!pathFilter.length) {
+            const pathInfo = {
+                Path: path
+            };
+
+            if (networkSharePath) {
+                pathInfo.NetworkPath = networkSharePath;
+            }
+
+            pathInfos.push(pathInfo);
+            renderPaths(page);
+        }
+    }
+
+    function onRemoveClick(e) {
+        const button = dom.parentWithClass(e.target, 'btnRemovePath');
+        const index = parseInt(button.getAttribute('data-index'));
+        const location = pathInfos[index].Path;
+        const locationLower = location.toLowerCase();
+        pathInfos = pathInfos.filter(p => {
+            return p.Path.toLowerCase() != locationLower;
+        });
+        renderPaths(dom.parentWithClass(button, 'dlg-librarycreator'));
+    }
+
+    function onDialogClosed() {
+        currentResolve(hasChanges);
+    }
+
+    function initLibraryOptions(dlg) {
+        libraryoptionseditor.embed(dlg.querySelector('.libraryOptions')).then(() => {
+            $('#selectCollectionType', dlg).trigger('change');
+            onToggleAdvancedChange.call(dlg.querySelector('.chkAdvanced'));
+        });
+    }
+
+export class showEditor {
+    constructor(options) {
+        return new Promise((resolve) => {
+            currentOptions = options;
+            currentResolve = resolve;
+            hasChanges = false;
+            import('./mediaLibraryCreator.template.html').then(({default: template}) => {
+                const dlg = dialogHelper.createDialog({
+                    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.translateHtml(template);
+                initEditor(dlg, options.collectionTypeOptions);
+                dlg.addEventListener('close', onDialogClosed);
+                dialogHelper.open(dlg);
+                dlg.querySelector('.btnCancel').addEventListener('click', () => {
+                    dialogHelper.close(dlg);
+                });
+                pathInfos = [];
+                renderPaths(dlg);
+                initLibraryOptions(dlg);
+            });
+        });
+    }
+}
+
+    let pathInfos = [];
+    let currentResolve;
+    let currentOptions;
+    let hasChanges = false;
+    let isCreating = false;
+
+/* eslint-enable indent */
+export default showEditor;

src/components/mediaLibraryCreator/mediaLibraryCreator.template.html

@@ -24,8 +24,8 @@
 
         <div class="folders">
             <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}">
+                <h1 style="margin: .5em 0;">${Folders}</h1>
+                <button is="emby-button" type="button" class="fab btnAddFolder submit" style="margin-left:1em;" title="${Add}">
                     <span class="material-icons add"></span>
                 </button>
             </div>

src/components/mediaLibraryEditor/mediaLibraryEditor.js

@@ -0,0 +1,243 @@
+/* eslint-disable indent */
+
+/**
+ * Module for media library editor.
+ * @module components/mediaLibraryEditor/mediaLibraryEditor
+ */
+
+import 'jquery';
+import loading from '../loading/loading';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import dom from '../../scripts/dom';
+import libraryoptionseditor from '../libraryoptionseditor/libraryoptionseditor';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-button/emby-button';
+import '../listview/listview.css';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../formdialog.css';
+import '../../elements/emby-toggle/emby-toggle';
+import '../../assets/css/flexstyles.scss';
+import toast from '../toast/toast';
+import confirm from '../confirm/confirm';
+
+    function onEditLibrary() {
+        if (isCreating) {
+            return false;
+        }
+
+        isCreating = true;
+        loading.show();
+        const dlg = dom.parentWithClass(this, 'dlg-libraryeditor');
+        let libraryOptions = libraryoptionseditor.getLibraryOptions(dlg.querySelector('.libraryOptions'));
+        libraryOptions = Object.assign(currentOptions.library.LibraryOptions || {}, libraryOptions);
+        ApiClient.updateVirtualFolderOptions(currentOptions.library.ItemId, libraryOptions).then(() => {
+            hasChanges = true;
+            isCreating = false;
+            loading.hide();
+            dialogHelper.close(dlg);
+        }, () => {
+            isCreating = false;
+            loading.hide();
+        });
+        return false;
+    }
+
+    function addMediaLocation(page, path, networkSharePath) {
+        const virtualFolder = currentOptions.library;
+        const refreshAfterChange = currentOptions.refresh;
+        ApiClient.addMediaPath(virtualFolder.Name, path, networkSharePath, refreshAfterChange).then(() => {
+            hasChanges = true;
+            refreshLibraryFromServer(page);
+        }, () => {
+            toast(globalize.translate('ErrorAddingMediaPathToVirtualFolder'));
+        });
+    }
+
+    function updateMediaLocation(page, path, networkSharePath) {
+        const virtualFolder = currentOptions.library;
+        ApiClient.updateMediaPath(virtualFolder.Name, {
+            Path: path,
+            NetworkPath: networkSharePath
+        }).then(() => {
+            hasChanges = true;
+            refreshLibraryFromServer(page);
+        }, () => {
+            toast(globalize.translate('ErrorAddingMediaPathToVirtualFolder'));
+        });
+    }
+
+    function onRemoveClick(btnRemovePath, location) {
+        const button = btnRemovePath;
+        const virtualFolder = currentOptions.library;
+
+        confirm({
+            title: globalize.translate('HeaderRemoveMediaLocation'),
+            text: globalize.translate('MessageConfirmRemoveMediaLocation'),
+            confirmText: globalize.translate('Delete'),
+            primary: 'delete'
+        }).then(() => {
+            const refreshAfterChange = currentOptions.refresh;
+            ApiClient.removeMediaPath(virtualFolder.Name, location, refreshAfterChange).then(() => {
+                hasChanges = true;
+                refreshLibraryFromServer(dom.parentWithClass(button, 'dlg-libraryeditor'));
+            }, () => {
+                toast(globalize.translate('ErrorDefault'));
+            });
+        });
+    }
+
+    function onListItemClick(e) {
+        const listItem = dom.parentWithClass(e.target, 'listItem');
+
+        if (listItem) {
+            const index = parseInt(listItem.getAttribute('data-index'));
+            const pathInfos = (currentOptions.library.LibraryOptions || {}).PathInfos || [];
+            const pathInfo = index == null ? {} : pathInfos[index] || {};
+            const originalPath = pathInfo.Path || (index == null ? null : currentOptions.library.Locations[index]);
+            const btnRemovePath = dom.parentWithClass(e.target, 'btnRemovePath');
+
+            if (btnRemovePath) {
+                onRemoveClick(btnRemovePath, originalPath);
+                return;
+            }
+
+            showDirectoryBrowser(dom.parentWithClass(listItem, 'dlg-libraryeditor'), originalPath, pathInfo.NetworkPath);
+        }
+    }
+
+    function getFolderHtml(pathInfo, index) {
+        let 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 += '<h3 class="listItemBodyText">';
+        html += pathInfo.Path;
+        html += '</h3>';
+
+        if (pathInfo.NetworkPath) {
+            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}"><span class="material-icons remove_circle"></span></button>`;
+        html += '</div>';
+        return html;
+    }
+
+    function refreshLibraryFromServer(page) {
+        ApiClient.getVirtualFolders().then(result => {
+            const library = result.filter(f => {
+                return f.Name === currentOptions.library.Name;
+            })[0];
+
+            if (library) {
+                currentOptions.library = library;
+                renderLibrary(page, currentOptions);
+            }
+        });
+    }
+
+    function renderLibrary(page, options) {
+        let pathInfos = (options.library.LibraryOptions || {}).PathInfos || [];
+
+        if (!pathInfos.length) {
+            pathInfos = options.library.Locations.map(p => {
+                return {
+                    Path: p
+                };
+            });
+        }
+
+        if (options.library.CollectionType === 'boxsets') {
+            page.querySelector('.folders').classList.add('hide');
+        } else {
+            page.querySelector('.folders').classList.remove('hide');
+        }
+
+        page.querySelector('.folderList').innerHTML = pathInfos.map(getFolderHtml).join('');
+    }
+
+    function onAddButtonClick() {
+        showDirectoryBrowser(dom.parentWithClass(this, 'dlg-libraryeditor'));
+    }
+
+    function showDirectoryBrowser(context, originalPath, networkPath) {
+        import('../directorybrowser/directorybrowser').then(({default: directoryBrowser}) => {
+            const picker = new directoryBrowser();
+            picker.show({
+                enableNetworkSharePath: true,
+                pathReadOnly: originalPath != null,
+                path: originalPath,
+                networkSharePath: networkPath,
+                callback: function (path, networkSharePath) {
+                    if (path) {
+                        if (originalPath) {
+                            updateMediaLocation(context, originalPath, networkSharePath);
+                        } else {
+                            addMediaLocation(context, path, networkSharePath);
+                        }
+                    }
+
+                    picker.close();
+                }
+            });
+        });
+    }
+
+    function onToggleAdvancedChange() {
+        const 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(() => {
+            onToggleAdvancedChange.call(dlg.querySelector('.chkAdvanced'));
+        });
+    }
+
+    function onDialogClosed() {
+        currentDeferred.resolveWith(null, [hasChanges]);
+    }
+
+export class showEditor {
+    constructor(options) {
+        const deferred = jQuery.Deferred();
+        currentOptions = options;
+        currentDeferred = deferred;
+        hasChanges = false;
+        import('./mediaLibraryEditor.template.html').then(({default: template}) => {
+            const dlg = dialogHelper.createDialog({
+                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.translateHtml(template);
+            dlg.querySelector('.formDialogHeaderTitle').innerHTML = options.library.Name;
+            initEditor(dlg, options);
+            dlg.addEventListener('close', onDialogClosed);
+            dialogHelper.open(dlg);
+            dlg.querySelector('.btnCancel').addEventListener('click', () => {
+                dialogHelper.close(dlg);
+            });
+            refreshLibraryFromServer(dlg);
+        });
+        return deferred.promise();
+    }
+}
+
+    let currentDeferred;
+    let currentOptions;
+    let hasChanges = false;
+    let isCreating = false;
+
+/* eslint-enable indent */
+export default showEditor;

src/components/mediaLibraryEditor/mediaLibraryEditor.template.html

@@ -18,8 +18,8 @@
 
         <div class="folders hide">
             <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}">
+                <h1 style="margin: .5em 0;">${Folders}</h1>
+                <button is="emby-button" type="button" class="fab btnAddFolder submit" style="margin-left:1em;" title="${Add}">
                     <span class="material-icons add"></span>
                 </button>
             </div>

src/components/mediainfo/mediainfo.css

@@ -41,6 +41,8 @@
     width: auto !important;
     height: auto !important;
     font-size: 1.4em;
+    margin-right: 0.125em;
+    color: #f2b01e;
 }
 
 .mediaInfoCriticRating {

src/components/mediainfo/mediainfo.js

@@ -1,24 +1,28 @@
-define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'material-icons', 'css!./mediainfo.css', 'programStyles', 'emby-button'], function (datetime, globalize, appRouter, itemHelper, indicators) {
-    'use strict';
+import datetime from '../../scripts/datetime';
+import globalize from '../../scripts/globalize';
+import { appRouter } from '../appRouter';
+import itemHelper from '../itemHelper';
+import indicators from '../indicators/indicators';
+import 'material-design-icons-iconfont';
+import './mediainfo.css';
+import '../guide/programs.css';
+import '../../elements/emby-button/emby-button';
 
+/* eslint-disable indent */
     function getTimerIndicator(item) {
-
-        var status;
+        let status;
 
         if (item.Type === 'SeriesTimer') {
             return '<span class="material-icons mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon 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 mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon fiber_smart_record"></span>';
             }
@@ -30,16 +34,14 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
     }
 
     function getProgramInfoHtml(item, options) {
-        var html = '';
+        let html = '';
 
-        var miscInfo = [];
-        var text;
-        var date;
+        const miscInfo = [];
+        let text;
+        let date;
 
         if (item.StartDate && options.programTime !== false) {
-
             try {
-
                 text = '';
 
                 date = datetime.parseISO8601Date(item.StartDate);
@@ -48,35 +50,34 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
                     text += datetime.toLocaleDateString(date, { weekday: 'short', month: 'short', day: 'numeric' });
                 }
 
-                text += ' ' + datetime.getDisplayTime(date);
+                text += ` ${datetime.getDisplayTime(date)}`;
 
                 if (item.EndDate) {
                     date = datetime.parseISO8601Date(item.EndDate);
-                    text += ' - ' + datetime.getDisplayTime(date);
+                    text += ` - ${datetime.getDisplayTime(date)}`;
                 }
 
                 miscInfo.push(text);
             } catch (e) {
-                console.error('error parsing date: ' + item.StartDate);
+                console.error('error parsing date:', item.StartDate);
             }
         }
 
         if (item.ChannelNumber) {
-            miscInfo.push('CH ' + item.ChannelNumber);
+            miscInfo.push(`CH ${item.ChannelNumber}`);
         }
 
         if (item.ChannelName) {
-
             if (options.interactive && item.ChannelId) {
                 miscInfo.push({
-                    html: '<a is="emby-linkbutton" class="button-flat mediaInfoItem" href="' + appRouter.getRouteUrl({
+                    html: `<a is="emby-linkbutton" class="button-flat mediaInfoItem" href="${appRouter.getRouteUrl({
 
                         ServerId: item.ServerId,
                         Type: 'TvChannel',
                         Name: item.ChannelName,
                         Id: item.ChannelId
 
-                    }) + '">' + item.ChannelName + '</a>'
+                    })}">${item.ChannelName}</a>`
                 });
             } else {
                 miscInfo.push(item.ChannelName);
@@ -84,7 +85,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
         }
 
         if (options.timerIndicator !== false) {
-            var timerHtml = getTimerIndicator(item);
+            const timerHtml = getTimerIndicator(item);
             if (timerHtml) {
                 miscInfo.push({
                     html: timerHtml
@@ -92,31 +93,28 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
             }
         }
 
-        html += miscInfo.map(function (m) {
+        html += miscInfo.map(m => {
             return getMediaInfoItem(m);
         }).join('');
 
         return html;
     }
 
-    function getMediaInfoHtml(item, options) {
-        var html = '';
+    export function getMediaInfoHtml(item, options = {}) {
+        let html = '';
 
-        var miscInfo = [];
-        options = options || {};
-        var text;
-        var date;
-        var minutes;
-        var count;
+        const miscInfo = [];
+        let text;
+        let date;
+        let minutes;
+        let count;
 
-        var showFolderRuntime = item.Type === 'MusicAlbum' || item.MediaType === 'MusicArtist' || item.MediaType === 'Playlist' || item.MediaType === 'MusicGenre';
+        const showFolderRuntime = item.Type === 'MusicAlbum' || item.MediaType === 'MusicArtist' || item.MediaType === 'Playlist' || item.MediaType === 'MusicGenre';
 
         if (showFolderRuntime) {
-
             count = item.SongCount || item.ChildCount;
 
             if (count) {
-
                 miscInfo.push(globalize.translate('TrackCount', count));
             }
 
@@ -124,33 +122,28 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
                 miscInfo.push(datetime.getDisplayRunningTime(item.RunTimeTicks));
             }
         } else if (item.Type === 'PhotoAlbum' || item.Type === 'BoxSet') {
-
             count = item.ChildCount;
 
             if (count) {
-
                 miscInfo.push(globalize.translate('ItemCount', count));
             }
         }
 
         if ((item.Type === 'Episode' || item.MediaType === 'Photo') && options.originalAirDate !== false) {
-
             if (item.PremiereDate) {
-
                 try {
                     date = datetime.parseISO8601Date(item.PremiereDate);
 
                     text = datetime.toLocaleDateString(date);
                     miscInfo.push(text);
                 } catch (e) {
-                    console.error('error parsing date: ' + item.PremiereDate);
+                    console.error('error parsing date:', item.PremiereDate);
                 }
             }
         }
 
         if (item.Type === 'SeriesTimer') {
             if (item.RecordAnyTime) {
-
                 miscInfo.push(globalize.translate('Anytime'));
             } else {
                 miscInfo.push(datetime.getDisplayTime(item.StartDate));
@@ -164,7 +157,6 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
         }
 
         if (item.StartDate && item.Type !== 'Program' && item.Type !== 'SeriesTimer') {
-
             try {
                 date = datetime.parseISO8601Date(item.StartDate);
 
@@ -176,31 +168,25 @@ 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);
             }
         }
 
         if (options.year !== false && item.ProductionYear && item.Type === 'Series') {
-
             if (item.Status === 'Continuing') {
                 miscInfo.push(globalize.translate('SeriesYearToPresent', item.ProductionYear));
-
             } else if (item.ProductionYear) {
-
                 text = item.ProductionYear;
 
                 if (item.EndDate) {
-
                     try {
-
-                        var endYear = datetime.parseISO8601Date(item.EndDate).getFullYear();
+                        const 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);
                     }
                 }
 
@@ -209,29 +195,27 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
         }
 
         if (item.Type === 'Program') {
-
             if (options.programIndicator !== false) {
                 if (item.IsLive) {
                     miscInfo.push({
-                        html: '<div class="mediaInfoProgramAttribute mediaInfoItem liveTvProgram">' + globalize.translate('Live') + '</div>'
+                        html: `<div class="mediaInfoProgramAttribute mediaInfoItem liveTvProgram">${globalize.translate('Live')}</div>`
                     });
                 } else if (item.IsPremiere) {
                     miscInfo.push({
-                        html: '<div class="mediaInfoProgramAttribute mediaInfoItem premiereTvProgram">' + globalize.translate('Premiere') + '</div>'
+                        html: `<div class="mediaInfoProgramAttribute mediaInfoItem premiereTvProgram">${globalize.translate('Premiere')}</div>`
                     });
                 } else if (item.IsSeries && !item.IsRepeat) {
                     miscInfo.push({
-                        html: '<div class="mediaInfoProgramAttribute mediaInfoItem newTvProgram">' + globalize.translate('AttributeNew') + '</div>'
+                        html: `<div class="mediaInfoProgramAttribute mediaInfoItem newTvProgram">${globalize.translate('New')}</div>`
                     });
                 } else if (item.IsSeries && item.IsRepeat) {
                     miscInfo.push({
-                        html: '<div class="mediaInfoProgramAttribute mediaInfoItem repeatTvProgram">' + globalize.translate('Repeat') + '</div>'
+                        html: `<div class="mediaInfoProgramAttribute mediaInfoItem repeatTvProgram">${globalize.translate('Repeat')}</div>`
                     });
                 }
             }
 
             if ((item.IsSeries || item.EpisodeTitle) && options.episodeTitle !== false) {
-
                 text = itemHelper.getDisplayName(item, {
                     includeIndexNumber: options.episodeTitleIndexNumber
                 });
@@ -242,13 +226,12 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
             } else if (item.IsMovie && item.ProductionYear && options.originalAirDate !== false) {
                 miscInfo.push(item.ProductionYear);
             } else if (item.PremiereDate && options.originalAirDate !== false) {
-
                 try {
                     date = datetime.parseISO8601Date(item.PremiereDate);
                     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);
@@ -257,34 +240,28 @@ 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.ProductionYear) {
-
                     miscInfo.push(item.ProductionYear);
                 } else if (item.PremiereDate) {
-
                     try {
                         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') {
-
                 miscInfo.push(datetime.getDisplayRunningTime(item.RunTimeTicks));
-
             } else {
                 minutes = item.RunTimeTicks / 600000000;
 
                 minutes = minutes || 1;
 
-                miscInfo.push(Math.round(minutes) + ' mins');
+                miscInfo.push(`${Math.round(minutes)} mins`);
             }
         }
 
@@ -300,35 +277,35 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
         }
 
         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) {
             miscInfo.push(item.Container);
         }
 
-        html += miscInfo.map(function (m) {
+        html += miscInfo.map(m => {
             return getMediaInfoItem(m);
         }).join('');
 
-        html += getStarIconsHtml(item);
+        if (options.starRating !== false) {
+            html += getStarIconsHtml(item);
+        }
 
         if (item.HasSubtitles && options.subtitles !== false) {
             html += '<div class="mediaInfoItem mediaInfoText closedCaptionMediaInfoText">CC</div>';
         }
 
         if (item.CriticRating && options.criticRating !== false) {
-
             if (item.CriticRating >= 60) {
-                html += '<div class="mediaInfoItem mediaInfoCriticRating mediaInfoCriticRatingFresh">' + item.CriticRating + '</div>';
+                html += `<div class="mediaInfoItem mediaInfoCriticRating mediaInfoCriticRatingFresh">${item.CriticRating}</div>`;
             } else {
-                html += '<div class="mediaInfoItem mediaInfoCriticRating mediaInfoCriticRatingRotten">' + item.CriticRating + '</div>';
+                html += `<div class="mediaInfoItem mediaInfoCriticRating mediaInfoCriticRatingRotten">${item.CriticRating}</div>`;
             }
         }
 
         if (options.endsAt !== false) {
-
-            var endsAt = getEndsAt(item);
+            const endsAt = getEndsAt(item);
             if (endsAt) {
                 html += getMediaInfoItem(endsAt, 'endsAt');
             }
@@ -339,15 +316,13 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
         return html;
     }
 
-    function getEndsAt(item) {
-
+    export function getEndsAt(item) {
         if (item.MediaType === 'Video' && item.RunTimeTicks) {
-
             if (!item.StartDate) {
-                var endDate = new Date().getTime() + (item.RunTimeTicks / 10000);
+                let endDate = new Date().getTime() + (item.RunTimeTicks / 10000);
                 endDate = new Date(endDate);
 
-                var displayTime = datetime.getDisplayTime(endDate);
+                const displayTime = datetime.getDisplayTime(endDate);
                 return globalize.translate('EndsAtValue', displayTime);
             }
         }
@@ -355,12 +330,11 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
         return null;
     }
 
-    function getEndsAtFromPosition(runtimeTicks, positionTicks, includeText) {
-
-        var endDate = new Date().getTime() + ((runtimeTicks - (positionTicks || 0)) / 10000);
+    export function getEndsAtFromPosition(runtimeTicks, positionTicks, includeText) {
+        let endDate = new Date().getTime() + ((runtimeTicks - (positionTicks || 0)) / 10000);
         endDate = new Date(endDate);
 
-        var displayTime = datetime.getDisplayTime(endDate);
+        const displayTime = datetime.getDisplayTime(endDate);
 
         if (includeText === false) {
             return displayTime;
@@ -369,23 +343,21 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
     }
 
     function getMediaInfoItem(m, cssClass) {
-
-        cssClass = cssClass ? (cssClass + ' mediaInfoItem') : 'mediaInfoItem';
-        var mediaInfoText = m;
+        cssClass = cssClass ? (`${cssClass} mediaInfoItem`) : 'mediaInfoItem';
+        let mediaInfoText = m;
 
         if (typeof (m) !== 'string' && typeof (m) !== 'number') {
-
             if (m.html) {
                 return m.html;
             }
             mediaInfoText = m.text;
-            cssClass += ' ' + m.cssClass;
+            cssClass += ` ${m.cssClass}`;
         }
-        return '<div class="' + cssClass + '">' + mediaInfoText + '</div>';
+        return `<div class="${cssClass}">${mediaInfoText}</div>`;
     }
 
     function getStarIconsHtml(item) {
-        var html = '';
+        let html = '';
 
         if (item.CommunityRating) {
             html += '<div class="starRatingContainer mediaInfoItem">';
@@ -399,53 +371,47 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
     }
 
     function dynamicEndTime(elem, item) {
-
-        var interval = setInterval(function () {
-
+        const interval = setInterval(() => {
             if (!document.body.contains(elem)) {
-
                 clearInterval(interval);
                 return;
             }
 
             elem.innerHTML = getEndsAt(item);
-
         }, 60000);
     }
 
-    function fillPrimaryMediaInfo(elem, item, options) {
-        var html = getPrimaryMediaInfoHtml(item, options);
+    export function fillPrimaryMediaInfo(elem, item, options) {
+        const html = getPrimaryMediaInfoHtml(item, options);
 
         elem.innerHTML = html;
         afterFill(elem, item, options);
     }
 
-    function fillSecondaryMediaInfo(elem, item, options) {
-        var html = getSecondaryMediaInfoHtml(item, options);
+    export function fillSecondaryMediaInfo(elem, item, options) {
+        const html = getSecondaryMediaInfoHtml(item, options);
 
         elem.innerHTML = html;
         afterFill(elem, item, options);
     }
 
     function afterFill(elem, item, options) {
-
         if (options.endsAt !== false) {
-            var endsAtElem = elem.querySelector('.endsAt');
+            const endsAtElem = elem.querySelector('.endsAt');
             if (endsAtElem) {
                 dynamicEndTime(endsAtElem, item);
             }
         }
 
-        var lnkChannel = elem.querySelector('.lnkChannel');
+        const lnkChannel = elem.querySelector('.lnkChannel');
         if (lnkChannel) {
             lnkChannel.addEventListener('click', onChannelLinkClick);
         }
     }
 
     function onChannelLinkClick(e) {
-
-        var channelId = this.getAttribute('data-id');
-        var serverId = this.getAttribute('data-serverid');
+        const channelId = this.getAttribute('data-id');
+        const serverId = this.getAttribute('data-serverid');
 
         appRouter.showItem(channelId, serverId);
 
@@ -453,18 +419,15 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
         return false;
     }
 
-    function getPrimaryMediaInfoHtml(item, options) {
-
-        options = options || {};
-        if (options.interactive == null) {
+    export function getPrimaryMediaInfoHtml(item, options = {}) {
+        if (options.interactive === undefined) {
             options.interactive = false;
         }
 
         return getMediaInfoHtml(item, options);
     }
 
-    function getSecondaryMediaInfoHtml(item, options) {
-
+    export function getSecondaryMediaInfoHtml(item, options) {
         options = options || {};
         if (options.interactive == null) {
             options.interactive = false;
@@ -476,13 +439,11 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
         return '';
     }
 
-    function getResolutionText(i) {
-
-        var width = i.Width;
-        var height = i.Height;
+    export function getResolutionText(i) {
+        const width = i.Width;
+        const height = i.Height;
 
         if (width && height) {
-
             if (width >= 3800 || height >= 2000) {
                 return '4K';
             }
@@ -505,45 +466,41 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
                 return '720p';
             }
             if (width >= 700 || height >= 400) {
-
                 if (i.IsInterlaced) {
                     return '480i';
                 }
                 return '480p';
             }
-
         }
         return null;
     }
 
     function getAudioStreamForDisplay(item) {
-
         if (!item.MediaSources) {
             return null;
         }
 
-        var mediaSource = item.MediaSources[0];
+        const mediaSource = item.MediaSources[0];
         if (!mediaSource) {
             return null;
         }
 
-        return (mediaSource.MediaStreams || []).filter(function (i) {
+        return (mediaSource.MediaStreams || []).filter(i => {
             return i.Type === 'Audio' && (i.Index === mediaSource.DefaultAudioStreamIndex || mediaSource.DefaultAudioStreamIndex == null);
         })[0];
     }
 
-    function getMediaInfoStats(item, options) {
-
+    export function getMediaInfoStats(item, options) {
         options = options || {};
 
-        var list = [];
+        const list = [];
 
-        var mediaSource = (item.MediaSources || [])[0] || {};
+        const mediaSource = (item.MediaSources || [])[0] || {};
 
-        var videoStream = (mediaSource.MediaStreams || []).filter(function (i) {
+        const videoStream = (mediaSource.MediaStreams || []).filter(i => {
             return i.Type === 'Video';
         })[0] || {};
-        var audioStream = getAudioStreamForDisplay(item) || {};
+        const audioStream = getAudioStreamForDisplay(item) || {};
 
         if (item.VideoType === 'Dvd') {
             list.push({
@@ -559,11 +516,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
             });
         }
 
-        //if (mediaSource.Container) {
-        //    html += '<div class="mediaInfoIcon mediaInfoText">' + mediaSource.Container + '</div>';
-        //}
-
-        var resolutionText = getResolutionText(videoStream);
+        const resolutionText = getResolutionText(videoStream);
         if (resolutionText) {
             list.push({
                 type: 'mediainfo',
@@ -578,23 +531,16 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
             });
         }
 
-        var channels = audioStream.Channels;
-        var channelText;
+        const channels = audioStream.Channels;
+        let channelText;
 
         if (channels === 8) {
-
             channelText = '7.1';
-
         } else if (channels === 7) {
-
             channelText = '6.1';
-
         } else if (channels === 6) {
-
             channelText = '5.1';
-
         } else if (channels === 2) {
-
             channelText = '2.0';
         }
 
@@ -605,7 +551,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
             });
         }
 
-        var audioCodec = (audioStream.Codec || '').toLowerCase();
+        const audioCodec = (audioStream.Codec || '').toLowerCase();
 
         if ((audioCodec === 'dca' || audioCodec === 'dts') && audioStream.Profile) {
             list.push({
@@ -620,28 +566,27 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
         }
 
         if (item.DateCreated && itemHelper.enableDateAddedDisplay(item)) {
-
-            var dateCreated = datetime.parseISO8601Date(item.DateCreated);
+            const dateCreated = datetime.parseISO8601Date(item.DateCreated);
 
             list.push({
                 type: 'added',
-                text: globalize.translate('AddedOnValue', datetime.toLocaleDateString(dateCreated) + ' ' + datetime.getDisplayTime(dateCreated))
+                text: globalize.translate('AddedOnValue', `${datetime.toLocaleDateString(dateCreated)} ${datetime.getDisplayTime(dateCreated)}`)
             });
         }
 
         return list;
     }
 
-    return {
-        getMediaInfoHtml: getPrimaryMediaInfoHtml,
-        fill: fillPrimaryMediaInfo,
-        getEndsAt: getEndsAt,
-        getEndsAtFromPosition: getEndsAtFromPosition,
-        getPrimaryMediaInfoHtml: getPrimaryMediaInfoHtml,
-        getSecondaryMediaInfoHtml: getSecondaryMediaInfoHtml,
-        fillPrimaryMediaInfo: fillPrimaryMediaInfo,
-        fillSecondaryMediaInfo: fillSecondaryMediaInfo,
-        getMediaInfoStats: getMediaInfoStats,
-        getResolutionText: getResolutionText
-    };
-});
+/* eslint-enable indent */
+
+export default {
+    getMediaInfoHtml: getPrimaryMediaInfoHtml,
+    getEndsAt: getEndsAt,
+    getEndsAtFromPosition: getEndsAtFromPosition,
+    getPrimaryMediaInfoHtml: getPrimaryMediaInfoHtml,
+    getSecondaryMediaInfoHtml: getSecondaryMediaInfoHtml,
+    fillPrimaryMediaInfo: fillPrimaryMediaInfo,
+    fillSecondaryMediaInfo: fillSecondaryMediaInfo,
+    getMediaInfoStats: getMediaInfoStats,
+    getResolutionText: getResolutionText
+};

src/components/medialibrarycreator/medialibrarycreator.js

@@ -1,222 +0,0 @@
-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) {
-            return false;
-        }
-
-        if (pathInfos.length == 0) {
-            require(['alert'], function (alert) {
-                alert({
-                    text: globalize.translate('PleaseAddAtLeastOneFolder'),
-                    type: 'error'
-                });
-            });
-
-            return false;
-        }
-
-        isCreating = true;
-        loading.show();
-        var dlg = dom.parentWithClass(this, 'dlg-librarycreator');
-        var name = $('#txtValue', dlg).val();
-        var type = $('#selectCollectionType', dlg).val();
-
-        if (type == 'mixed') {
-            type = null;
-        }
-
-        var libraryOptions = libraryoptionseditor.getLibraryOptions(dlg.querySelector('.libraryOptions'));
-        libraryOptions.PathInfos = pathInfos;
-        ApiClient.addVirtualFolder(name, type, currentOptions.refresh, libraryOptions).then(function () {
-            hasChanges = true;
-            isCreating = false;
-            loading.hide();
-            dialogHelper.close(dlg);
-        }, function () {
-            require(['toast'], function (toast) {
-                toast(globalize.translate('ErrorAddingMediaPathToVirtualFolder'));
-            });
-
-            isCreating = false;
-            loading.hide();
-        });
-        return false;
-    }
-
-    function getCollectionTypeOptionsHtml(collectionTypeOptions) {
-        return collectionTypeOptions.map(function (i) {
-            return '<option value="' + i.value + '">' + i.name + '</option>';
-        }).join('');
-    }
-
-    function initEditor(page, collectionTypeOptions) {
-        $('#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);
-
-            if (value) {
-                dlg.querySelector('.libraryOptions').classList.remove('hide');
-            } else {
-                dlg.querySelector('.libraryOptions').classList.add('hide');
-            }
-
-            if (value != 'mixed') {
-                var index = this.selectedIndex;
-
-                if (index != -1) {
-                    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 || '');
-                }
-            }
-        });
-        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);
-    }
-
-    function onAddButtonClick() {
-        var page = dom.parentWithClass(this, 'dlg-librarycreator');
-
-        require(['directorybrowser'], function (directoryBrowser) {
-            var picker = new directoryBrowser();
-            picker.show({
-                enableNetworkSharePath: true,
-                callback: function (path, networkSharePath) {
-                    if (path) {
-                        addMediaLocation(page, path, networkSharePath);
-                    }
-
-                    picker.close();
-                }
-            });
-        });
-    }
-
-    function getFolderHtml(pathInfo, index) {
-        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>';
-
-        if (pathInfo.NetworkPath) {
-            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 + '"><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');
-        folderList.innerHTML = foldersHtml;
-
-        if (foldersHtml) {
-            folderList.classList.remove('hide');
-        } else {
-            folderList.classList.add('hide');
-        }
-    }
-
-    function addMediaLocation(page, path, networkSharePath) {
-        var pathLower = path.toLowerCase();
-        var pathFilter = pathInfos.filter(function (p) {
-            return p.Path.toLowerCase() == pathLower;
-        });
-
-        if (!pathFilter.length) {
-            var pathInfo = {
-                Path: path
-            };
-
-            if (networkSharePath) {
-                pathInfo.NetworkPath = networkSharePath;
-            }
-
-            pathInfos.push(pathInfo);
-            renderPaths(page);
-        }
-    }
-
-    function onRemoveClick(e) {
-        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'));
-    }
-
-    function onDialogClosed() {
-        currentResolve(hasChanges);
-    }
-
-    function initLibraryOptions(dlg) {
-        libraryoptionseditor.embed(dlg.querySelector('.libraryOptions')).then(function () {
-            $('#selectCollectionType', dlg).trigger('change');
-            onToggleAdvancedChange.call(dlg.querySelector('.chkAdvanced'));
-        });
-    }
-
-    function editor() {
-        this.show = function (options) {
-            return new Promise(function (resolve, reject) {
-                currentOptions = options;
-                currentResolve = resolve;
-                hasChanges = false;
-                var xhr = new XMLHttpRequest();
-                xhr.open('GET', 'components/medialibrarycreator/medialibrarycreator.template.html', true);
-
-                xhr.onload = function (e) {
-                    var template = this.response;
-                    var dlg = dialogHelper.createDialog({
-                        size: 'medium-tall',
-                        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);
-                    initEditor(dlg, options.collectionTypeOptions);
-                    dlg.addEventListener('close', onDialogClosed);
-                    dialogHelper.open(dlg);
-                    dlg.querySelector('.btnCancel').addEventListener('click', function () {
-                        dialogHelper.close(dlg);
-                    });
-                    pathInfos = [];
-                    renderPaths(dlg);
-                    initLibraryOptions(dlg);
-                };
-
-                xhr.send();
-            });
-        };
-    }
-
-    var pathInfos = [];
-    var currentResolve;
-    var currentOptions;
-    var hasChanges = false;
-    var isCreating = false;
-    return editor;
-});