Merge branch 'master' into migrate-to-ES6-57

.eslintignore

@@ -2,4 +2,3 @@ node_modules
 dist
 .idea
 .vscode
-src/libraries

package.json

@@ -17,7 +17,7 @@
     "babel-loader": "^8.0.6",
     "browser-sync": "^2.26.12",
     "copy-webpack-plugin": "^5.1.1",
-    "css-loader": "^4.2.0",
+    "css-loader": "^4.2.1",
     "cssnano": "^4.1.10",
     "del": "^5.1.0",
     "eslint": "^7.6.0",
@@ -155,6 +155,8 @@
           "src/components/playlisteditor/playlisteditor.js",
           "src/components/playmenu.js",
           "src/components/prompt/prompt.js",
+          "src/components/recordingcreator/seriesrecordingeditor.js",
+          "src/components/recordingcreator/recordinghelper.js",
           "src/components/refreshdialog/refreshdialog.js",
           "src/components/sanatizefilename.js",
           "src/components/scrollManager.js",
@@ -169,6 +171,9 @@
           "src/components/syncPlay/playbackPermissionManager.js",
           "src/components/syncPlay/syncPlayManager.js",
           "src/components/syncPlay/timeSyncManager.js",
+          "src/components/viewManager/viewManager.js",
+          "src/components/tvproviders/schedulesdirect.js",
+          "src/components/tvproviders/xmltv.js",
           "src/components/toast/toast.js",
           "src/components/upnextdialog/upnextdialog.js",
           "src/components/viewContainer.js",
@@ -216,6 +221,11 @@
           "src/controllers/edititemmetadata.js",
           "src/controllers/favorites.js",
           "src/controllers/hometab.js",
+          "src/controllers/movies/moviecollections.js",
+          "src/controllers/movies/moviegenres.js",
+          "src/controllers/movies/movies.js",
+          "src/controllers/movies/moviesrecommended.js",
+          "src/controllers/movies/movietrailers.js",
           "src/controllers/playback/nowplaying.js",
           "src/controllers/playback/videoosd.js",
           "src/controllers/itemDetails/index.js",
@@ -268,6 +278,8 @@
           "src/elements/emby-tabs/emby-tabs.js",
           "src/elements/emby-textarea/emby-textarea.js",
           "src/elements/emby-toggle/emby-toggle.js",
+          "src/libraries/navdrawer/navdrawer.js",
+          "src/libraries/scroller.js",
           "src/plugins/backdropScreensaver/plugin.js",
           "src/plugins/bookPlayer/plugin.js",
           "src/plugins/bookPlayer/tableOfContents.js",
@@ -293,10 +305,13 @@
           "src/scripts/mouseManager.js",
           "src/scripts/multiDownload.js",
           "src/scripts/playlists.js",
+          "src/scripts/scrollHelper.js",
+          "src/scripts/serverNotifications.js",
           "src/scripts/routes.js",
           "src/scripts/settings/appSettings.js",
           "src/scripts/settings/userSettings.js",
           "src/scripts/settings/webSettings.js",
+          "src/scripts/shell.js",
           "src/scripts/taskbutton.js",
           "src/scripts/themeLoader.js",
           "src/scripts/touchHelper.js"

src/assets/css/librarybrowser.css

@@ -236,12 +236,6 @@
     text-align: center;
 }
 
-.layout-desktop .searchTabButton,
-.layout-mobile .searchTabButton,
-.layout-tv .headerSearchButton {
-    display: none !important;
-}
-
 .mainDrawer-scrollContainer {
     padding-bottom: 10vh;
 }

src/components/appRouter.js

@@ -1,6 +1,7 @@
 define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdrop', 'browser', 'page', 'appSettings', 'apphost', 'connectionManager'], function (loading, globalize, events, viewManager, skinManager, backdrop, browser, page, appSettings, appHost, connectionManager) {
     'use strict';
 
+    viewManager = viewManager.default || viewManager;
     browser = browser.default || browser;
     loading = loading.default || loading;
 

src/components/collectionEditor/collectionEditor.js

@@ -200,7 +200,7 @@ import 'flexStyles';
     }
 
     function centerFocus(elem, horiz, on) {
-        import('scrollHelper').then(scrollHelper => {
+        import('scrollHelper').then((scrollHelper) => {
             const fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });

src/components/dialogHelper/dialogHelper.js

@@ -354,7 +354,7 @@ import 'scrollStyles';
     }
 
     function centerFocus(elem, horiz, on) {
-        import('scrollHelper').then(scrollHelper => {
+        import('scrollHelper').then((scrollHelper) => {
             const fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });

src/components/filtermenu/filtermenu.js

@@ -151,6 +151,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
 
     function centerFocus(elem, horiz, on) {
         require(['scrollHelper'], function (scrollHelper) {
+            scrollHelper = scrollHelper.default || scrollHelper;
             var fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });

src/components/itemsrefresher.js

@@ -1,6 +1,7 @@
 define(['playbackManager', 'serverNotifications', 'events'], function (playbackManager, serverNotifications, events) {
     'use strict';
 
+    serverNotifications = serverNotifications.default || serverNotifications;
     playbackManager = playbackManager.default || playbackManager;
 
     function onUserDataChanged(e, apiClient, userData) {

src/components/notifications/notifications.js

@@ -2,6 +2,7 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
     'use strict';
 
     playbackManager = playbackManager.default || playbackManager;
+    serverNotifications = serverNotifications.default || serverNotifications;
 
     function onOneDocumentClick() {
         document.removeEventListener('click', onOneDocumentClick);

src/components/playlisteditor/playlisteditor.js

@@ -210,7 +210,7 @@ import 'emby-button';
     }
 
     function centerFocus(elem, horiz, on) {
-        import('scrollHelper').then(scrollHelper => {
+        import('scrollHelper').then((scrollHelper) => {
             const fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });

src/components/recordingcreator/recordingbutton.js

@@ -1,6 +1,8 @@
 define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom', 'recordingHelper', 'events', 'paper-icon-button-light', 'emby-button', 'css!./recordingfields'], function (globalize, connectionManager, require, loading, appHost, dom, recordingHelper, events) {
     'use strict';
 
+    recordingHelper = recordingHelper.default || recordingHelper;
+
     function onRecordingButtonClick(e) {
         var item = this.item;
 

src/components/recordingcreator/recordingcreator.js

@@ -1,6 +1,8 @@
 define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'datetime', 'imageLoader', 'recordingFields', 'events', 'emby-checkbox', 'emby-button', 'emby-collapse', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper, datetime, imageLoader, recordingFields, events) {
     'use strict';
 
+    scrollHelper = scrollHelper.default || scrollHelper;
+
     var currentDialog;
     var closeAction;
     var currentRecordingFields;

src/components/recordingcreator/recordingeditor.js

@@ -1,6 +1,7 @@
 define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'imageLoader', 'scrollStyles', 'emby-button', 'emby-collapse', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons', 'flexStyles'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper, imageLoader) {
     'use strict';
 
+    scrollHelper = scrollHelper.default || scrollHelper;
     loading = loading.default || loading;
 
     var currentDialog;
@@ -12,6 +13,8 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
     function deleteTimer(apiClient, timerId) {
         return new Promise(function (resolve, reject) {
             require(['recordingHelper'], function (recordingHelper) {
+                recordingHelper = recordingHelper.default || recordingHelper;
+
                 recordingHelper.cancelTimerWithConfirmation(timerId, apiClient.serverId()).then(resolve, reject);
             });
         });

src/components/recordingcreator/recordingfields.js

@@ -1,6 +1,8 @@
 define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loading', 'apphost', 'dom', 'recordingHelper', 'events', 'paper-icon-button-light', 'emby-button', 'css!./recordingfields', 'flexStyles'], function (globalize, connectionManager, serverNotifications, require, loading, appHost, dom, recordingHelper, events) {
     'use strict';
 
+    serverNotifications = serverNotifications.default || serverNotifications;
+    recordingHelper = recordingHelper.default || recordingHelper;
     loading = loading.default || loading;
 
     function loadData(parent, program, apiClient) {

src/components/recordingcreator/recordinghelper.js

@@ -1,7 +1,8 @@
-define(['globalize', 'loading', 'connectionManager'], function (globalize, loading, connectionManager) {
+import globalize from 'globalize';
-    'use strict';
+import loading from 'loading';
+import connectionManager from 'connectionManager';
 
-    loading = loading.default || loading;
+/*eslint prefer-const: "error"*/
 
 function changeRecordingToSeries(apiClient, timerId, programId, confirmTimerCancellation) {
     loading.show();
@@ -28,7 +29,7 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
 
 function cancelTimerWithConfirmation(timerId, serverId) {
     return new Promise(function (resolve, reject) {
-            require(['confirm'], function (confirm) {
+        import('confirm').then(({ default: confirm }) => {
             confirm.default({
 
                 text: globalize.translate('MessageConfirmRecordingCancellation'),
@@ -39,7 +40,7 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
             }).then(function () {
                 loading.show();
 
-                    var apiClient = connectionManager.getApiClient(serverId);
+                const apiClient = connectionManager.getApiClient(serverId);
                 cancelTimer(apiClient, timerId, true).then(resolve, reject);
             }, reject);
         });
@@ -48,7 +49,7 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
 
 function cancelSeriesTimerWithConfirmation(timerId, serverId) {
     return new Promise(function (resolve, reject) {
-            require(['confirm'], function (confirm) {
+        import('confirm').then(({ default: confirm }) => {
             confirm.default({
 
                 text: globalize.translate('MessageConfirmRecordingCancellation'),
@@ -59,9 +60,9 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
             }).then(function () {
                 loading.show();
 
-                    var apiClient = connectionManager.getApiClient(serverId);
+                const apiClient = connectionManager.getApiClient(serverId);
                 apiClient.cancelLiveTvSeriesTimer(timerId).then(function () {
-                        require(['toast'], function (toast) {
+                    import('toast').then(({default: toast}) => {
                         toast(globalize.translate('SeriesCancelled'));
                     });
 
@@ -86,7 +87,7 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
 function createRecording(apiClient, programId, isSeries) {
     loading.show();
     return apiClient.getNewLiveTvTimerDefaults({ programId: programId }).then(function (item) {
-            var promise = isSeries ?
+        const promise = isSeries ?
             apiClient.createLiveTvSeriesTimer(item) :
             apiClient.createLiveTvTimer(item);
 
@@ -98,15 +99,15 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
 }
 
 function sendToast(msg) {
-        require(['toast'], function (toast) {
+    import('toast').then(({ default: toast }) => {
         toast(msg);
     });
 }
 
 function showMultiCancellationPrompt(serverId, programId, timerId, timerStatus, seriesTimerId) {
     return new Promise(function (resolve, reject) {
-            require(['dialog'], function (dialog) {
+        import('dialog').then(({ default: dialog }) => {
-                var items = [];
+            const items = [];
 
             items.push({
                 name: globalize.translate('HeaderKeepRecording'),
@@ -140,7 +141,7 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
                 buttons: items
 
             }).then(function (result) {
-                    var apiClient = connectionManager.getApiClient(serverId);
+                const apiClient = connectionManager.getApiClient(serverId);
 
                 if (result === 'canceltimer') {
                     loading.show();
@@ -150,7 +151,7 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
                     loading.show();
 
                     apiClient.cancelLiveTvSeriesTimer(seriesTimerId).then(function () {
-                            require(['toast'], function (toast) {
+                        import('toast').then(({ default: toast }) => {
                             toast(globalize.translate('SeriesCancelled'));
                         });
 
@@ -166,8 +167,8 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
 }
 
 function toggleRecording(serverId, programId, timerId, timerStatus, seriesTimerId) {
-        var apiClient = connectionManager.getApiClient(serverId);
+    const apiClient = connectionManager.getApiClient(serverId);
-        var hasTimer = timerId && timerStatus !== 'Cancelled';
+    const hasTimer = timerId && timerStatus !== 'Cancelled';
     if (seriesTimerId && hasTimer) {
         // cancel
         return showMultiCancellationPrompt(serverId, programId, timerId, timerStatus, seriesTimerId);
@@ -183,7 +184,7 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
     }
 }
 
-    return {
+export default {
     cancelTimer: cancelTimer,
     createRecording: createRecording,
     changeRecordingToSeries: changeRecordingToSeries,
@@ -191,4 +192,4 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
     cancelTimerWithConfirmation: cancelTimerWithConfirmation,
     cancelSeriesTimerWithConfirmation: cancelSeriesTimerWithConfirmation
 };
-});
+

src/components/recordingcreator/seriesrecordingeditor.js

@@ -1,23 +1,38 @@
-define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'imageLoader', 'datetime', 'scrollStyles', 'emby-button', 'emby-checkbox', 'emby-input', 'emby-select', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons', 'flexStyles'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper, imageLoader, datetime) {
+import dialogHelper from 'dialogHelper';
-    'use strict';
+import globalize from 'globalize';
+import layoutManager from 'layoutManager';
+import connectionManager from 'connectionManager';
+import loading from 'loading';
+import scrollHelper from 'scrollHelper';
+import datetime from 'datetime';
+import 'scrollStyles';
+import 'emby-button';
+import 'emby-checkbox';
+import 'emby-input';
+import 'emby-select';
+import 'paper-icon-button-light';
+import 'css!./../formdialog';
+import 'css!./recordingcreator';
+import 'material-icons';
+import 'flexStyles';
 
-    loading = loading.default || loading;
+/*eslint prefer-const: "error"*/
 
-    var currentDialog;
+let currentDialog;
-    var recordingUpdated = false;
+let recordingUpdated = false;
-    var recordingDeleted = false;
+let recordingDeleted = false;
-    var currentItemId;
+let currentItemId;
-    var currentServerId;
+let currentServerId;
 
 function deleteTimer(apiClient, timerId) {
     return new Promise(function (resolve, reject) {
-            require(['recordingHelper'], function (recordingHelper) {
+        import('recordingHelper').then(({ default: recordingHelper }) => {
             recordingHelper.cancelSeriesTimerWithConfirmation(timerId, apiClient.serverId()).then(resolve, reject);
         });
     });
 }
 
-    function renderTimer(context, item, apiClient) {
+function renderTimer(context, item) {
     context.querySelector('#txtPrePaddingMinutes').value = item.PrePaddingSeconds / 60;
     context.querySelector('#txtPostPaddingMinutes').value = item.PostPaddingSeconds / 60;
 
@@ -47,9 +62,9 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
 }
 
 function onSubmit(e) {
-        var form = this;
+    const form = this;
 
-        var apiClient = connectionManager.getApiClient(currentServerId);
+    const apiClient = connectionManager.getApiClient(currentServerId);
 
     apiClient.getLiveTvSeriesTimer(currentItemId).then(function (item) {
         item.PrePaddingSeconds = form.querySelector('#txtPrePaddingMinutes').value * 60;
@@ -77,7 +92,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
     });
 
     context.querySelector('.btnCancelRecording').addEventListener('click', function () {
-            var apiClient = connectionManager.getApiClient(currentServerId);
+        const apiClient = connectionManager.getApiClient(currentServerId);
         deleteTimer(apiClient, currentItemId).then(function () {
             closeDialog(true);
         });
@@ -87,29 +102,29 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
 }
 
 function reload(context, id) {
-        var apiClient = connectionManager.getApiClient(currentServerId);
+    const apiClient = connectionManager.getApiClient(currentServerId);
 
     loading.show();
     if (typeof id === 'string') {
         currentItemId = id;
 
         apiClient.getLiveTvSeriesTimer(id).then(function (result) {
-                renderTimer(context, result, apiClient);
+            renderTimer(context, result);
             loading.hide();
         });
     } else if (id) {
         currentItemId = id.Id;
 
-            renderTimer(context, id, apiClient);
+        renderTimer(context, id);
         loading.hide();
     }
 }
 
 function fillKeepUpTo(context) {
-        var html = '';
+    let html = '';
 
-        for (var i = 0; i <= 50; i++) {
+    for (let i = 0; i <= 50; i++) {
-            var text;
+        let text;
 
         if (i === 0) {
             text = globalize.translate('AsManyAsPossible');
@@ -125,7 +140,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
     context.querySelector('.selectKeepUpTo').innerHTML = html;
 }
 
-    function onFieldChange(e) {
+function onFieldChange() {
     this.querySelector('.btnSubmit').click();
 }
 
@@ -136,8 +151,8 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
     loading.show();
     options = options || {};
 
-        require(['text!./seriesrecordingeditor.template.html'], function (template) {
+    import('text!./seriesrecordingeditor.template.html').then(({ default: template }) => {
-            var dialogOptions = {
+        const dialogOptions = {
             removeOnClose: true,
             scrollY: false
         };
@@ -148,7 +163,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
             dialogOptions.size = 'small';
         }
 
-            var dlg = options.context;
+        const dlg = options.context;
 
         dlg.classList.add('hide');
         dlg.innerHTML = globalize.translateHtml(template, 'core');
@@ -178,8 +193,8 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
         loading.show();
         options = options || {};
 
-            require(['text!./seriesrecordingeditor.template.html'], function (template) {
+        import('text!./seriesrecordingeditor.template.html').then(({ default: template }) => {
-                var dialogOptions = {
+            const dialogOptions = {
                 removeOnClose: true,
                 scrollY: false
             };
@@ -190,7 +205,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
                 dialogOptions.size = 'small';
             }
 
-                var dlg = dialogHelper.createDialog(dialogOptions);
+            const dlg = dialogHelper.createDialog(dialogOptions);
 
             dlg.classList.add('formDialog');
             dlg.classList.add('recordingDialog');
@@ -199,7 +214,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
                 dlg.style['min-width'] = '20%';
             }
 
-                var html = '';
+            let html = '';
 
             html += globalize.translateHtml(template, 'core');
 
@@ -241,8 +256,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
     });
 }
 
-    return {
+export default {
     show: showEditor,
     embed: embed
 };
-});

src/components/sortmenu/sortmenu.js

@@ -17,6 +17,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
 
     function centerFocus(elem, horiz, on) {
         require(['scrollHelper'], function (scrollHelper) {
+            scrollHelper = scrollHelper.default || scrollHelper;
             var fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });

src/components/subtitleeditor/subtitleeditor.js

@@ -337,6 +337,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
 
     function centerFocus(elem, horiz, on) {
         require(['scrollHelper'], function (scrollHelper) {
+            scrollHelper = scrollHelper.default || scrollHelper;
             var fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });

src/components/subtitlesettings/subtitleappearancehelper.js

@@ -3,31 +3,9 @@
  * @module components/subtitleSettings/subtitleAppearanceHelper
  */
 
-function getTextStyles(settings, isCue) {
+function getTextStyles(settings, preview) {
     let list = [];
 
-    if (isCue) {
-        switch (settings.textSize || '') {
-            case 'smaller':
-                list.push({ name: 'font-size', value: '.5em' });
-                break;
-            case 'small':
-                list.push({ name: 'font-size', value: '.7em' });
-                break;
-            case 'large':
-                list.push({ name: 'font-size', value: '1.3em' });
-                break;
-            case 'larger':
-                list.push({ name: 'font-size', value: '1.72em' });
-                break;
-            case 'extralarge':
-                list.push({ name: 'font-size', value: '2em' });
-                break;
-            default:
-            case 'medium':
-                break;
-        }
-    } else {
     switch (settings.textSize || '') {
         case 'smaller':
             list.push({ name: 'font-size', value: '.8em' });
@@ -49,7 +27,6 @@ function getTextStyles(settings, isCue) {
             list.push({ name: 'font-size', value: '1.36em' });
             break;
     }
-    }
 
     switch (settings.dropShadow || '') {
         case 'raised':
@@ -111,13 +88,43 @@ function getTextStyles(settings, isCue) {
             break;
     }
 
+    if (!preview) {
+        const pos = parseInt(settings.verticalPosition, 10);
+        const lineHeight = 1.35; // FIXME: It is better to read this value from element
+        const line = Math.abs(pos * lineHeight);
+        if (pos < 0) {
+            list.push({ name: 'min-height', value: `${line}em` });
+            list.push({ name: 'margin-top', value: '' });
+        } else {
+            list.push({ name: 'min-height', value: '' });
+            list.push({ name: 'margin-top', value: `${line}em` });
+        }
+    }
+
     return list;
 }
 
-export function getStyles(settings, isCue) {
+function getWindowStyles(settings, preview) {
+    const list = [];
+
+    if (!preview) {
+        const pos = parseInt(settings.verticalPosition, 10);
+        if (pos < 0) {
+            list.push({ name: 'top', value: '' });
+            list.push({ name: 'bottom', value: '0' });
+        } else {
+            list.push({ name: 'top', value: '0' });
+            list.push({ name: 'bottom', value: '' });
+        }
+    }
+
+    return list;
+}
+
+export function getStyles(settings, preview) {
     return {
-        text: getTextStyles(settings, isCue),
+        text: getTextStyles(settings, preview),
-        window: []
+        window: getWindowStyles(settings, preview)
     };
 }
 
@@ -130,7 +137,7 @@ function applyStyleList(styles, elem) {
 }
 
 export function applyStyles(elements, appearanceSettings) {
-    let styles = getStyles(appearanceSettings);
+    let styles = getStyles(appearanceSettings, !!elements.preview);
 
     if (elements.text) {
         applyStyleList(styles.text, elements.text);

src/components/subtitlesettings/subtitlesettings.css

@@ -0,0 +1,26 @@
+.subtitleappearance-fullpreview {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    pointer-events: none;
+    transition: 0.2s;
+}
+
+.subtitleappearance-fullpreview-hide {
+    opacity: 0;
+}
+
+.subtitleappearance-fullpreview-window {
+    position: absolute;
+    width: 100%;
+    font-size: 170%;
+    text-align: center;
+}
+
+.subtitleappearance-fullpreview-text {
+    display: inline-block;
+    max-width: 70%;
+}

src/components/subtitlesettings/subtitlesettings.js

@@ -2,6 +2,7 @@ import globalize from 'globalize';
 import appHost from 'apphost';
 import appSettings from 'appSettings';
 import focusManager from 'focusManager';
+import layoutManager from 'layoutManager';
 import loading from 'loading';
 import connectionManager from 'connectionManager';
 import subtitleAppearanceHelper from 'subtitleAppearanceHelper';
@@ -10,9 +11,11 @@ import dom from 'dom';
 import events from 'events';
 import 'listViewStyle';
 import 'emby-select';
+import 'emby-slider';
 import 'emby-input';
 import 'emby-checkbox';
 import 'flexStyles';
+import 'css!./subtitlesettings';
 
 /**
  * Subtitle settings.
@@ -27,6 +30,7 @@ function getSubtitleAppearanceObject(context) {
     appearanceSettings.font = context.querySelector('#selectFont').value;
     appearanceSettings.textBackground = context.querySelector('#inputTextBackground').value;
     appearanceSettings.textColor = context.querySelector('#inputTextColor').value;
+    appearanceSettings.verticalPosition = context.querySelector('#sliderVerticalPosition').value;
 
     return appearanceSettings;
 }
@@ -51,6 +55,7 @@ function loadForm(context, user, userSettings, appearanceSettings, apiClient) {
         context.querySelector('#inputTextBackground').value = appearanceSettings.textBackground || 'transparent';
         context.querySelector('#inputTextColor').value = appearanceSettings.textColor || '#ffffff';
         context.querySelector('#selectFont').value = appearanceSettings.font || '';
+        context.querySelector('#sliderVerticalPosition').value = appearanceSettings.verticalPosition;
 
         context.querySelector('#selectSubtitleBurnIn').value = appSettings.get('subtitleburnin') || '';
 
@@ -112,10 +117,45 @@ function onAppearanceFieldChange(e) {
 
     let elements = {
         window: view.querySelector('.subtitleappearance-preview-window'),
-        text: view.querySelector('.subtitleappearance-preview-text')
+        text: view.querySelector('.subtitleappearance-preview-text'),
+        preview: true
     };
 
     subtitleAppearanceHelper.applyStyles(elements, appearanceSettings);
+
+    subtitleAppearanceHelper.applyStyles({
+        window: view.querySelector('.subtitleappearance-fullpreview-window'),
+        text: view.querySelector('.subtitleappearance-fullpreview-text')
+    }, appearanceSettings);
+}
+
+const subtitlePreviewDelay = 1000;
+let subtitlePreviewTimer;
+
+function showSubtitlePreview(persistent) {
+    clearTimeout(subtitlePreviewTimer);
+
+    this._fullPreview.classList.remove('subtitleappearance-fullpreview-hide');
+
+    if (persistent) {
+        this._refFullPreview++;
+    }
+
+    if (this._refFullPreview === 0) {
+        subtitlePreviewTimer = setTimeout(hideSubtitlePreview.bind(this), subtitlePreviewDelay);
+    }
+}
+
+function hideSubtitlePreview(persistent) {
+    clearTimeout(subtitlePreviewTimer);
+
+    if (persistent) {
+        this._refFullPreview--;
+    }
+
+    if (this._refFullPreview === 0) {
+        this._fullPreview.classList.add('subtitleappearance-fullpreview-hide');
+    }
 }
 
 function embed(options, self) {
@@ -138,6 +178,36 @@ function embed(options, self) {
 
         if (appHost.supports('subtitleappearancesettings')) {
             options.element.querySelector('.subtitleAppearanceSection').classList.remove('hide');
+
+            self._fullPreview = options.element.querySelector('.subtitleappearance-fullpreview');
+            self._refFullPreview = 0;
+
+            const sliderVerticalPosition = options.element.querySelector('#sliderVerticalPosition');
+            sliderVerticalPosition.addEventListener('input', onAppearanceFieldChange);
+            sliderVerticalPosition.addEventListener('input', () => showSubtitlePreview.call(self));
+
+            const eventPrefix = window.PointerEvent ? 'pointer' : 'mouse';
+            sliderVerticalPosition.addEventListener(`${eventPrefix}enter`, () => showSubtitlePreview.call(self, true));
+            sliderVerticalPosition.addEventListener(`${eventPrefix}leave`, () => hideSubtitlePreview.call(self, true));
+
+            if (layoutManager.tv) {
+                sliderVerticalPosition.addEventListener('focus', () => showSubtitlePreview.call(self, true));
+                sliderVerticalPosition.addEventListener('blur', () => hideSubtitlePreview.call(self, true));
+
+                // Give CustomElements time to attach
+                setTimeout(() => {
+                    sliderVerticalPosition.classList.add('focusable');
+                    sliderVerticalPosition.enableKeyboardDragging();
+                }, 0);
+            }
+
+            options.element.querySelector('.chkPreview').addEventListener('change', (e) => {
+                if (e.target.checked) {
+                    showSubtitlePreview.call(self, true);
+                } else {
+                    hideSubtitlePreview.call(self, true);
+                }
+            });
         }
 
         self.loadData();

src/components/subtitlesettings/subtitlesettings.template.html

@@ -38,6 +38,16 @@
             ${HeaderSubtitleAppearance}
         </h2>
 
+        <div class="subtitleappearance-fullpreview subtitleappearance-fullpreview-hide">
+            <div class="subtitleappearance-fullpreview-window">
+                <div class="subtitleappearance-fullpreview-text">
+                    ${HeaderSubtitleAppearance}
+                    <br>
+                    ${TheseSettingsAffectSubtitlesOnThisDevice}
+                </div>
+            </div>
+        </div>
+
         <div style="margin: 2em 0 2em;">
             <div class="subtitleappearance-preview flex align-items-center justify-content-center" style="margin:2em 0;padding:1.6em;color:black;background:linear-gradient(140deg,#aa5cc3,#00a4dc);">
                 <div class="subtitleappearance-preview-window flex align-items-center justify-content-center" style="width: 90%; padding: .25em;">
@@ -89,6 +99,20 @@
                 <option value="">${DropShadow}</option>
             </select>
         </div>
+
+        <div class="sliderContainer-settings">
+            <div class="sliderContainer">
+                <input is="emby-slider" id="sliderVerticalPosition" label="${LabelSubtitleVerticalPosition}" type="range" min="-16" max="16" />
+            </div>
+            <div class="fieldDescription">${SubtitleVerticalPositionHelp}</div>
+        </div>
+
+        <div class="checkboxContainer">
+            <label>
+                <input is="emby-checkbox" type="checkbox" class="chkPreview" />
+                <span>${Preview}</span>
+            </label>
+        </div>
     </div>
 
     <button is="emby-button" type="submit" class="raised button-submit block btnSave hide">

src/components/tunerPicker.js

@@ -4,6 +4,7 @@ define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize'
     browser = browser.default || browser;
     loading = loading.default || loading;
     focusManager = focusManager.default || focusManager;
+    scrollHelper = scrollHelper.default || scrollHelper;
 
     var enableFocusTransform = !browser.slow && !browser.edge;
 

src/components/tvproviders/schedulesdirect.js

@@ -1,13 +1,19 @@
-define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'listViewStyle', 'emby-input', 'emby-select', 'emby-button', 'flexStyles'], function ($, loading, globalize) {
+import $ from 'jQuery';
-    'use strict';
+import loading from 'loading';
+import globalize from 'globalize';
+import 'emby-checkbox';
+import 'emby-input';
+import 'listViewStyle';
+import 'paper-icon-button-light';
+import 'emby-select';
+import 'emby-button';
+import 'flexStyles';
 
-    loading = loading.default || loading;
+export default function (page, providerId, options) {
-
-    return function (page, providerId, options) {
     function reload() {
         loading.show();
         ApiClient.getNamedConfiguration('livetv').then(function (config) {
-                var info = config.ListingProviders.filter(function (i) {
+            const info = config.ListingProviders.filter(function (i) {
                 return i.Id === providerId;
             })[0] || {};
             listingsId = info.ListingsId;
@@ -37,12 +43,12 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'listViewStyle', 'emb
 
     function setCountry(info) {
         ApiClient.getJSON(ApiClient.getUrl('LiveTv/ListingProviders/SchedulesDirect/Countries')).then(function (result) {
-                var i;
+            let i;
-                var length;
+            let length;
-                var countryList = [];
+            const countryList = [];
 
-                for (var region in result) {
+            for (const region in result) {
-                    var countries = result[region];
+                const countries = result[region];
 
                 if (countries.length && region !== 'ZZZ') {
                     for (i = 0, length = countries.length; i < length; i++) {
@@ -82,20 +88,20 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'listViewStyle', 'emb
             return Promise.resolve('');
         }
 
-            var buffer = new TextEncoder('utf-8').encode(str);
+        const buffer = new TextEncoder('utf-8').encode(str);
         return crypto.subtle.digest('SHA-256', buffer).then(function (hash) {
             return hex(hash);
         });
     }
 
     function hex(buffer) {
-            var hexCodes = [];
+        const hexCodes = [];
-            var view = new DataView(buffer);
+        const view = new DataView(buffer);
 
-            for (var i = 0; i < view.byteLength; i += 4) {
+        for (let i = 0; i < view.byteLength; i += 4) {
-                var value = view.getUint32(i);
+            const value = view.getUint32(i);
-                var stringValue = value.toString(16);
+            const stringValue = value.toString(16);
-                var paddedValue = ('00000000' + stringValue).slice(-'00000000'.length);
+            const paddedValue = ('00000000' + stringValue).slice(-'00000000'.length);
             hexCodes.push(paddedValue);
         }
 
@@ -105,14 +111,14 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'listViewStyle', 'emb
     function submitLoginForm() {
         loading.show();
         sha256(page.querySelector('.txtPass').value).then(function (passwordHash) {
-                var info = {
+            const info = {
                 Type: 'SchedulesDirect',
                 Username: page.querySelector('.txtUser').value,
                 EnableAllTuners: true,
                 Password: passwordHash,
                 Pw: page.querySelector('.txtPass').value
             };
-                var id = providerId;
+            const id = providerId;
 
             if (id) {
                 info.Id = id;
@@ -139,7 +145,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'listViewStyle', 'emb
     }
 
     function submitListingsForm() {
-            var selectedListingsId = $('#selectListing', page).val();
+        const selectedListingsId = $('#selectListing', page).val();
 
         if (!selectedListingsId) {
             return void Dashboard.alert({
@@ -148,9 +154,9 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'listViewStyle', 'emb
         }
 
         loading.show();
-            var id = providerId;
+        const id = providerId;
         ApiClient.getNamedConfiguration('livetv').then(function (config) {
-                var info = config.ListingProviders.filter(function (i) {
+            const info = config.ListingProviders.filter(function (i) {
                 return i.Id === id;
             })[0];
             info.ZipCode = page.querySelector('.txtZipCode').value;
@@ -233,14 +239,14 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'listViewStyle', 'emb
     }
 
     function refreshTunerDevices(page, providerInfo, devices) {
-            var html = '';
+        let html = '';
 
-            for (var i = 0, length = devices.length; i < length; i++) {
+        for (let i = 0, length = devices.length; i < length; i++) {
-                var device = devices[i];
+            const device = devices[i];
             html += '<div class="listItem">';
-                var enabledTuners = providerInfo.EnabledTuners || [];
+            const enabledTuners = providerInfo.EnabledTuners || [];
-                var isChecked = providerInfo.EnableAllTuners || enabledTuners.indexOf(device.Id) !== -1;
+            const isChecked = providerInfo.EnableAllTuners || enabledTuners.indexOf(device.Id) !== -1;
-                var checkedAttribute = isChecked ? ' checked' : '';
+            const checkedAttribute = isChecked ? ' checked' : '';
             html += '<label class="checkboxContainer listItemCheckboxContainer"><input type="checkbox" is="emby-checkbox" data-id="' + device.Id + '" class="chkTuner" ' + checkedAttribute + '/><span></span></label>';
             html += '<div class="listItemBody two-line">';
             html += '<div class="listItemBodyText">';
@@ -256,8 +262,8 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'listViewStyle', 'emb
         page.querySelector('.tunerList').innerHTML = html;
     }
 
-        var listingsId;
+    let listingsId;
-        var self = this;
+    const self = this;
 
     self.submit = function () {
         page.querySelector('.btnSubmitListingsContainer').click();
@@ -268,10 +274,10 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'listViewStyle', 'emb
 
         // Only hide the buttons if explicitly set to false; default to showing if undefined or null
         // FIXME: rename this option to clarify logic
-            var hideCancelButton = options.showCancelButton === false;
+        const hideCancelButton = options.showCancelButton === false;
         page.querySelector('.btnCancel').classList.toggle('hide', hideCancelButton);
 
-            var hideSubmitButton = options.showSubmitButton === false;
+        const hideSubmitButton = options.showSubmitButton === false;
         page.querySelector('.btnSubmitListings').classList.toggle('hide', hideSubmitButton);
 
         $('.formLogin', page).on('submit', function () {
@@ -295,5 +301,4 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'listViewStyle', 'emb
         $('.createAccountHelp', page).html(globalize.translate('MessageCreateAccountAt', '<a is="emby-linkbutton" class="button-link" href="http://www.schedulesdirect.org" target="_blank">http://www.schedulesdirect.org</a>'));
         reload();
     };
-    };
+}
-});

src/components/tvproviders/xmltv.js

@@ -1,12 +1,15 @@
-define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-input', 'listViewStyle', 'paper-icon-button-light'], function ($, loading, globalize) {
+import $ from 'jQuery';
-    'use strict';
+import loading from 'loading';
+import globalize from 'globalize';
+import 'emby-checkbox';
+import 'emby-input';
+import 'listViewStyle';
+import 'paper-icon-button-light';
 
-    loading = loading.default || loading;
+export default function (page, providerId, options) {
-
-    return function (page, providerId, options) {
     function getListingProvider(config, id) {
         if (config && id) {
-                var result = config.ListingProviders.filter(function (provider) {
+            const result = config.ListingProviders.filter(function (provider) {
                 return provider.Id === id;
             })[0];
 
@@ -46,7 +49,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-input', 'listVi
     }
 
     function getCategories(txtInput) {
-            var value = txtInput.value;
+        const value = txtInput.value;
 
         if (value) {
             return value.split('|');
@@ -57,9 +60,9 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-input', 'listVi
 
     function submitListingsForm() {
         loading.show();
-            var id = providerId;
+        const id = providerId;
         ApiClient.getNamedConfiguration('livetv').then(function (config) {
-                var info = config.ListingProviders.filter(function (provider) {
+            const info = config.ListingProviders.filter(function (provider) {
                 return provider.Id === id;
             })[0] || {};
             info.Type = 'xmltv';
@@ -114,14 +117,14 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-input', 'listVi
     }
 
     function refreshTunerDevices(page, providerInfo, devices) {
-            var html = '';
+        let html = '';
 
-            for (var i = 0, length = devices.length; i < length; i++) {
+        for (let i = 0, length = devices.length; i < length; i++) {
-                var device = devices[i];
+            const device = devices[i];
             html += '<div class="listItem">';
-                var enabledTuners = providerInfo.EnabledTuners || [];
+            const enabledTuners = providerInfo.EnabledTuners || [];
-                var isChecked = providerInfo.EnableAllTuners || enabledTuners.indexOf(device.Id) !== -1;
+            const isChecked = providerInfo.EnableAllTuners || enabledTuners.indexOf(device.Id) !== -1;
-                var checkedAttribute = isChecked ? ' checked' : '';
+            const checkedAttribute = isChecked ? ' checked' : '';
             html += '<label class="listItemCheckboxContainer"><input type="checkbox" is="emby-checkbox" class="chkTuner" data-id="' + device.Id + '" ' + checkedAttribute + '><span></span></label>';
             html += '<div class="listItemBody two-line">';
             html += '<div class="listItemBodyText">';
@@ -138,15 +141,15 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-input', 'listVi
     }
 
     function onSelectPathClick(e) {
-            var page = $(e.target).parents('.xmltvForm')[0];
+        const page = $(e.target).parents('.xmltvForm')[0];
 
-            require(['directorybrowser'], function (directoryBrowser) {
+        import('directorybrowser').then(({default: directoryBrowser}) => {
-                var picker = new directoryBrowser.default();
+            const picker = new directoryBrowser();
             picker.show({
                 includeFiles: true,
                 callback: function (path) {
                     if (path) {
-                            var txtPath = page.querySelector('.txtPath');
+                        const txtPath = page.querySelector('.txtPath');
                         txtPath.value = path;
                         txtPath.focus();
                     }
@@ -156,7 +159,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-input', 'listVi
         });
     }
 
-        var self = this;
+    const self = this;
 
     self.submit = function () {
         page.querySelector('.btnSubmitListings').click();
@@ -167,10 +170,10 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-input', 'listVi
 
         // Only hide the buttons if explicitly set to false; default to showing if undefined or null
         // FIXME: rename this option to clarify logic
-            var hideCancelButton = options.showCancelButton === false;
+        const hideCancelButton = options.showCancelButton === false;
         page.querySelector('.btnCancel').classList.toggle('hide', hideCancelButton);
 
-            var hideSubmitButton = options.showSubmitButton === false;
+        const hideSubmitButton = options.showSubmitButton === false;
         page.querySelector('.btnSubmitListings').classList.toggle('hide', hideSubmitButton);
 
         $('form', page).on('submit', function () {
@@ -187,5 +190,4 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-input', 'listVi
         });
         reload();
     };
-    };
+}
-});

src/components/viewManager/viewManager.js

@@ -1,22 +1,22 @@
-define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], function (viewContainer, focusManager, queryString, layoutManager) {
+import viewContainer from 'viewContainer';
-    'use strict';
+import focusManager from 'focusManager';
+import queryString from 'queryString';
+import layoutManager from 'layoutManager';
 
-    focusManager = focusManager.default || focusManager;
+let currentView;
-
+let dispatchPageEvents;
-    var currentView;
-    var dispatchPageEvents;
 
 viewContainer.setOnBeforeChange(function (newView, isRestored, options) {
-        var lastView = currentView;
+    const lastView = currentView;
     if (lastView) {
-            var beforeHideResult = dispatchViewEvent(lastView, null, 'viewbeforehide', true);
+        const beforeHideResult = dispatchViewEvent(lastView, null, 'viewbeforehide', true);
 
         if (!beforeHideResult) {
             // todo: cancel
         }
     }
 
-        var eventDetail = getViewEventDetail(newView, options, isRestored);
+    const eventDetail = getViewEventDetail(newView, options, isRestored);
 
     if (!newView.initComplete) {
         newView.initComplete = true;
@@ -36,14 +36,14 @@ define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], functi
 });
 
 function onViewChange(view, options, isRestore) {
-        var lastView = currentView;
+    const lastView = currentView;
     if (lastView) {
         dispatchViewEvent(lastView, null, 'viewhide');
     }
 
     currentView = view;
 
-        var eventDetail = getViewEventDetail(view, options, isRestore);
+    const eventDetail = getViewEventDetail(view, options, isRestore);
 
     if (!isRestore) {
         if (options.autoFocus !== false) {
@@ -65,7 +65,7 @@ define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], functi
 }
 
 function getProperties(view) {
-        var props = view.getAttribute('data-properties');
+    const props = view.getAttribute('data-properties');
 
     if (props) {
         return props.split(',');
@@ -88,7 +88,7 @@ define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], functi
 
     eventInfo.cancelable = isCancellable || false;
 
-        var eventResult = view.dispatchEvent(new CustomEvent(eventName, eventInfo));
+    const eventResult = view.dispatchEvent(new CustomEvent(eventName, eventInfo));
 
     if (dispatchPageEvents) {
         eventInfo.cancelable = false;
@@ -99,9 +99,9 @@ define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], functi
 }
 
 function getViewEventDetail(view, options, isRestore) {
-        var url = options.url;
+    const url = options.url;
-        var index = url.indexOf('?');
+    const index = url.indexOf('?');
-        var params = index === -1 ? {} : queryString.parse(url.substring(index + 1));
+    const params = index === -1 ? {} : queryString.parse(url.substring(index + 1));
 
     return {
         detail: {
@@ -126,11 +126,9 @@ define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], functi
 
 document.addEventListener('skinunload', resetCachedViews);
 
-    function ViewManager() {
+class ViewManager {
-    }
+    loadView(options) {
-
+        const lastView = currentView;
-    ViewManager.prototype.loadView = function (options) {
-        var lastView = currentView;
 
         // Record the element that has focus
         if (lastView) {
@@ -144,9 +142,9 @@ define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], functi
         viewContainer.loadView(options).then(function (view) {
             onViewChange(view, options);
         });
-    };
+    }
 
-    ViewManager.prototype.tryRestoreView = function (options, onViewChanging) {
+    tryRestoreView(options, onViewChanging) {
         if (options.cancel) {
             return Promise.reject({ cancelled: true });
         }
@@ -160,15 +158,15 @@ define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], functi
             onViewChanging();
             onViewChange(view, options, true);
         });
-    };
+    }
 
-    ViewManager.prototype.currentView = function () {
+    currentView() {
         return currentView;
-    };
+    }
 
-    ViewManager.prototype.dispatchPageEvents = function (value) {
+    dispatchPageEvents(value) {
         dispatchPageEvents = value;
-    };
+    }
+}
 
-    return new ViewManager();
+export default new ViewManager();
-});

src/components/viewSettings/viewSettings.js

@@ -29,6 +29,7 @@ define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'conne
 
     function centerFocus(elem, horiz, on) {
         require(['scrollHelper'], function (scrollHelper) {
+            scrollHelper = scrollHelper.default || scrollHelper;
             var fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });

src/controllers/list.js

@@ -1,4 +1,4 @@
-define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager', 'cardBuilder', 'loading', 'connectionManager', 'alphaNumericShortcuts', 'scroller', 'playbackManager', 'alphaPicker', 'emby-itemscontainer', 'emby-scroller'], function (globalize, listView, layoutManager, userSettings, focusManager, cardBuilder, loading, connectionManager, AlphaNumericShortcuts, scroller, playbackManager, AlphaPicker) {
+define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager', 'cardBuilder', 'loading', 'connectionManager', 'alphaNumericShortcuts', 'playbackManager', 'alphaPicker', 'emby-itemscontainer', 'emby-scroller'], function (globalize, listView, layoutManager, userSettings, focusManager, cardBuilder, loading, connectionManager, AlphaNumericShortcuts, playbackManager, AlphaPicker) {
     'use strict';
 
     playbackManager = playbackManager.default || playbackManager;

src/controllers/livetv/livetvsuggested.js

@@ -169,9 +169,6 @@ define(['layoutManager', 'userSettings', 'inputManager', 'loading', 'globalize',
             name: globalize.translate('HeaderSchedule')
         }, {
             name: globalize.translate('TabSeries')
-        }, {
-            name: globalize.translate('ButtonSearch'),
-            cssClass: 'searchTabButton'
         }];
     }
 
@@ -255,9 +252,6 @@ define(['layoutManager', 'userSettings', 'inputManager', 'loading', 'globalize',
                 case 5:
                     depends.push('controllers/livetv/livetvseriestimers');
                     break;
-
-                case 6:
-                    depends.push('scripts/searchtab');
             }
 
             require(depends, function (controllerFactory) {

src/controllers/movies/moviecollections.js

@@ -1,13 +1,18 @@
-define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (loading, events, libraryBrowser, imageLoader, listView, cardBuilder, userSettings, globalize) {
+import loading from 'loading';
-    'use strict';
+import libraryBrowser from 'libraryBrowser';
+import imageLoader from 'imageLoader';
+import listView from 'listView';
+import cardBuilder from 'cardBuilder';
+import * as userSettings from 'userSettings';
+import globalize from 'globalize';
+import 'emby-itemscontainer';
 
-    loading = loading.default || loading;
+/* eslint-disable indent */
-    libraryBrowser = libraryBrowser.default || libraryBrowser;
 
-    return function (view, params, tabContent) {
+    export default function (view, params, tabContent) {
         function getPageData(context) {
-            var key = getSavedQueryKey(context);
+            const key = getSavedQueryKey(context);
-            var pageData = data[key];
+            let pageData = data[key];
 
             if (!pageData) {
                 pageData = data[key] = {
@@ -47,9 +52,9 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
             return context.savedQueryKey;
         }
 
-        function onViewStyleChange() {
+        const onViewStyleChange = () => {
-            var viewStyle = self.getCurrentViewStyle();
+            const viewStyle = this.getCurrentViewStyle();
-            var itemsContainer = tabContent.querySelector('.itemsContainer');
+            const itemsContainer = tabContent.querySelector('.itemsContainer');
 
             if (viewStyle == 'List') {
                 itemsContainer.classList.add('vertical-list');
@@ -60,13 +65,13 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
             }
 
             itemsContainer.innerHTML = '';
-        }
+        };
 
-        function reloadItems(page) {
+        const reloadItems = (page) => {
             loading.show();
             isLoading = true;
-            var query = getQuery(page);
+            const query = getQuery(page);
-            ApiClient.getItems(ApiClient.getCurrentUserId(), query).then(function (result) {
+            ApiClient.getItems(ApiClient.getCurrentUserId(), query).then((result) => {
                 function onNextPageClick() {
                     if (isLoading) {
                         return;
@@ -90,8 +95,8 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
                 }
 
                 window.scrollTo(0, 0);
-                var html;
+                let html;
-                var pagingHtml = libraryBrowser.getQueryPagingHtml({
+                const pagingHtml = libraryBrowser.getQueryPagingHtml({
                     startIndex: query.StartIndex,
                     limit: query.Limit,
                     totalRecordCount: result.TotalRecordCount,
@@ -101,7 +106,7 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
                     sortButton: false,
                     filterButton: false
                 });
-                var viewStyle = self.getCurrentViewStyle();
+                const viewStyle = this.getCurrentViewStyle();
                 if (viewStyle == 'Thumb') {
                     html = cardBuilder.getCardsHtml({
                         items: result.Items,
@@ -155,22 +160,21 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
                         showTitle: true
                     });
                 }
-                var i;
-                var length;
-                var elems = tabContent.querySelectorAll('.paging');
 
-                for (i = 0, length = elems.length; i < length; i++) {
+                let elems = tabContent.querySelectorAll('.paging');
-                    elems[i].innerHTML = pagingHtml;
+
+                for (const elem of elems) {
+                    elem.innerHTML = pagingHtml;
                 }
 
                 elems = tabContent.querySelectorAll('.btnNextPage');
-                for (i = 0, length = elems.length; i < length; i++) {
+                for (const elem of elems) {
-                    elems[i].addEventListener('click', onNextPageClick);
+                    elem.addEventListener('click', onNextPageClick);
                 }
 
                 elems = tabContent.querySelectorAll('.btnPreviousPage');
-                for (i = 0, length = elems.length; i < length; i++) {
+                for (const elem of elems) {
-                    elems[i].addEventListener('click', onPreviousPageClick);
+                    elem.addEventListener('click', onPreviousPageClick);
                 }
 
                 if (!result.Items.length) {
@@ -182,28 +186,27 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
                     html += '</div>';
                 }
 
-                var itemsContainer = tabContent.querySelector('.itemsContainer');
+                const itemsContainer = tabContent.querySelector('.itemsContainer');
                 itemsContainer.innerHTML = html;
                 imageLoader.lazyChildren(itemsContainer);
                 libraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
                 loading.hide();
                 isLoading = false;
 
-                require(['autoFocuser'], function (autoFocuser) {
+                import('autoFocuser').then(({default: autoFocuser}) => {
                     autoFocuser.autoFocus(page);
                 });
             });
-        }
+        };
 
-        var self = this;
+        const data = {};
-        var data = {};
+        let isLoading = false;
-        var isLoading = false;
 
-        self.getCurrentViewStyle = function () {
+        this.getCurrentViewStyle = function () {
             return getPageData(tabContent).view;
         };
 
-        function initPage(tabContent) {
+        const initPage = (tabContent) => {
             tabContent.querySelector('.btnSort').addEventListener('click', function (e) {
                 libraryBrowser.showSortMenu({
                     items: [{
@@ -230,36 +233,37 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
                     button: e.target
                 });
             });
-            var btnSelectView = tabContent.querySelector('.btnSelectView');
+            const btnSelectView = tabContent.querySelector('.btnSelectView');
             btnSelectView.addEventListener('click', function (e) {
-                libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'List,Poster,PosterCard,Thumb,ThumbCard'.split(','));
+                libraryBrowser.showLayoutMenu(e.target, this.getCurrentViewStyle(), 'List,Poster,PosterCard,Thumb,ThumbCard'.split(','));
             });
             btnSelectView.addEventListener('layoutchange', function (e) {
-                var viewStyle = e.detail.viewStyle;
+                const viewStyle = e.detail.viewStyle;
                 getPageData(tabContent).view = viewStyle;
                 libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);
                 getQuery(tabContent).StartIndex = 0;
                 onViewStyleChange();
                 reloadItems(tabContent);
             });
-            tabContent.querySelector('.btnNewCollection').addEventListener('click', function () {
+            tabContent.querySelector('.btnNewCollection').addEventListener('click', () => {
-                require(['collectionEditor'], function (collectionEditor) {
+                import('collectionEditor').then(({default: collectionEditor}) => {
-                    var serverId = ApiClient.serverInfo().Id;
+                    const serverId = ApiClient.serverInfo().Id;
                     new collectionEditor.showEditor({
                         items: [],
                         serverId: serverId
                     });
                 });
             });
-        }
+        };
 
         initPage(tabContent);
         onViewStyleChange();
 
-        self.renderTab = function () {
+        this.renderTab = function () {
             reloadItems(tabContent);
         };
 
-        self.destroy = function () {};
+        this.destroy = function () {};
-    };
+    }
-});
+
+/* eslint-enable indent */

src/controllers/movies/moviegenres.js

@@ -1,13 +1,18 @@
-define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader', 'apphost', 'globalize', 'appRouter', 'dom', 'emby-button'], function (layoutManager, loading, libraryBrowser, cardBuilder, lazyLoader, appHost, globalize, appRouter, dom) {
+import layoutManager from 'layoutManager';
-    'use strict';
+import loading from 'loading';
+import libraryBrowser from 'libraryBrowser';
+import cardBuilder from 'cardBuilder';
+import lazyLoader from 'lazyLoader';
+import globalize from 'globalize';
+import appRouter from 'appRouter';
+import 'emby-button';
 
-    loading = loading.default || loading;
+/* eslint-disable indent */
-    libraryBrowser = libraryBrowser.default || libraryBrowser;
 
-    return function (view, params, tabContent) {
+    export default function (view, params, tabContent) {
         function getPageData() {
-            var key = getSavedQueryKey();
+            const key = getSavedQueryKey();
-            var pageData = data[key];
+            let pageData = data[key];
 
             if (!pageData) {
                 pageData = data[key] = {
@@ -37,7 +42,7 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
 
         function getPromise() {
             loading.show();
-            var query = getQuery();
+            const query = getQuery();
             return ApiClient.getGenres(ApiClient.getCurrentUserId(), query);
         }
 
@@ -53,18 +58,18 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
             return enableScrollX() ? 'overflowPortrait' : 'portrait';
         }
 
-        function fillItemsContainer(entry) {
+        const fillItemsContainer = (entry) => {
-            var elem = entry.target;
+            const elem = entry.target;
-            var id = elem.getAttribute('data-id');
+            const id = elem.getAttribute('data-id');
-            var viewStyle = self.getCurrentViewStyle();
+            const viewStyle = this.getCurrentViewStyle();
-            var limit = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ? 5 : 9;
+            let limit = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ? 5 : 9;
 
             if (enableScrollX()) {
                 limit = 10;
             }
 
-            var enableImageTypes = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ? 'Primary,Backdrop,Thumb' : 'Primary';
+            const enableImageTypes = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ? 'Primary,Backdrop,Thumb' : 'Primary';
-            var query = {
+            const query = {
                 SortBy: 'SortName',
                 SortOrder: 'Ascending',
                 IncludeItemTypes: 'Movie',
@@ -126,17 +131,17 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
                     tabContent.querySelector('.btnMoreFromGenre' + id + ' .material-icons').classList.remove('hide');
                 }
             });
-        }
+        };
 
         function reloadItems(context, promise) {
-            var query = getQuery();
+            const query = getQuery();
             promise.then(function (result) {
-                var elem = context.querySelector('#items');
+                const elem = context.querySelector('#items');
-                var html = '';
+                let html = '';
-                var items = result.Items;
+                const items = result.Items;
 
-                for (var i = 0, length = items.length; i < length; i++) {
+                for (let i = 0, length = items.length; i < length; i++) {
-                    var item = items[i];
+                    const item = items[i];
 
                     html += '<div class="verticalSection">';
                     html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">';
@@ -151,7 +156,7 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
                     html += '</a>';
                     html += '</div>';
                     if (enableScrollX()) {
-                        var scrollXClass = 'scrollX hiddenScrollX';
+                        let scrollXClass = 'scrollX hiddenScrollX';
 
                         if (layoutManager.tv) {
                             scrollXClass += 'smoothScrollX padded-top-focusscale padded-bottom-focusscale';
@@ -182,37 +187,37 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
             });
         }
 
-        function fullyReload() {
+        const fullyReload = () => {
-            self.preRender();
+            this.preRender();
-            self.renderTab();
+            this.renderTab();
-        }
+        };
 
-        var self = this;
+        const data = {};
-        var data = {};
 
-        self.getViewStyles = function () {
+        this.getViewStyles = function () {
             return 'Poster,PosterCard,Thumb,ThumbCard'.split(',');
         };
 
-        self.getCurrentViewStyle = function () {
+        this.getCurrentViewStyle = function () {
             return getPageData().view;
         };
 
-        self.setCurrentViewStyle = function (viewStyle) {
+        this.setCurrentViewStyle = function (viewStyle) {
             getPageData().view = viewStyle;
             libraryBrowser.saveViewSetting(getSavedQueryKey(), viewStyle);
             fullyReload();
         };
 
-        self.enableViewSelection = true;
+        this.enableViewSelection = true;
-        var promise;
+        let promise;
 
-        self.preRender = function () {
+        this.preRender = function () {
             promise = getPromise();
         };
 
-        self.renderTab = function () {
+        this.renderTab = function () {
             reloadItems(tabContent, promise);
         };
-    };
+    }
-});
+
+/* eslint-enable indent */

src/controllers/movies/movies.js

@@ -1,12 +1,18 @@
-define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser', 'alphaPicker', 'listView', 'cardBuilder', 'globalize', 'emby-itemscontainer'], function (loading, layoutManager, userSettings, events, libraryBrowser, AlphaPicker, listView, cardBuilder, globalize) {
+import loading from 'loading';
-    'use strict';
+import * as userSettings from 'userSettings';
+import events from 'events';
+import libraryBrowser from 'libraryBrowser';
+import AlphaPicker from 'alphaPicker';
+import listView from 'listView';
+import cardBuilder from 'cardBuilder';
+import globalize from 'globalize';
+import 'emby-itemscontainer';
 
-    loading = loading.default || loading;
+/* eslint-disable indent */
-    libraryBrowser = libraryBrowser.default || libraryBrowser;
 
-    return function (view, params, tabContent, options) {
+    export default function (view, params, tabContent, options) {
-        function onViewStyleChange() {
+        const onViewStyleChange = () => {
-            if (self.getCurrentViewStyle() == 'List') {
+            if (this.getCurrentViewStyle() == 'List') {
                 itemsContainer.classList.add('vertical-list');
                 itemsContainer.classList.remove('vertical-wrap');
             } else {
@@ -15,13 +21,13 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
             }
 
             itemsContainer.innerHTML = '';
-        }
+        };
 
-        function updateFilterControls() {
+        const updateFilterControls = () => {
-            if (self.alphaPicker) {
+            if (this.alphaPicker) {
-                self.alphaPicker.value(query.NameStartsWithOrGreater);
+                this.alphaPicker.value(query.NameStartsWithOrGreater);
-            }
             }
+        };
 
         function fetchData() {
             isLoading = true;
@@ -54,7 +60,7 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
 
             window.scrollTo(0, 0);
             updateFilterControls();
-            var pagingHtml = libraryBrowser.getQueryPagingHtml({
+            const pagingHtml = libraryBrowser.getQueryPagingHtml({
                 startIndex: query.StartIndex,
                 limit: query.Limit,
                 totalRecordCount: result.TotalRecordCount,
@@ -64,35 +70,30 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
                 sortButton: false,
                 filterButton: false
             });
-            var i;
-            var length;
-            var elems = tabContent.querySelectorAll('.paging');
 
-            for (i = 0, length = elems.length; i < length; i++) {
+            for (const elem of tabContent.querySelectorAll('.paging')) {
-                elems[i].innerHTML = pagingHtml;
+                elem.innerHTML = pagingHtml;
             }
 
-            elems = tabContent.querySelectorAll('.btnNextPage');
+            for (const elem of tabContent.querySelectorAll('.btnNextPage')) {
-            for (i = 0, length = elems.length; i < length; i++) {
+                elem.addEventListener('click', onNextPageClick);
-                elems[i].addEventListener('click', onNextPageClick);
             }
 
-            elems = tabContent.querySelectorAll('.btnPreviousPage');
+            for (const elem of tabContent.querySelectorAll('.btnPreviousPage')) {
-            for (i = 0, length = elems.length; i < length; i++) {
+                elem.addEventListener('click', onPreviousPageClick);
-                elems[i].addEventListener('click', onPreviousPageClick);
             }
 
             isLoading = false;
             loading.hide();
 
-            require(['autoFocuser'], function (autoFocuser) {
+            import('autoFocuser').then(({default: autoFocuser}) => {
                 autoFocuser.autoFocus(tabContent);
             });
         }
 
-        function getItemsHtml(items) {
+        const getItemsHtml = (items) => {
-            var html;
+            let html;
-            var viewStyle = self.getCurrentViewStyle();
+            const viewStyle = this.getCurrentViewStyle();
 
             if (viewStyle == 'Thumb') {
                 html = cardBuilder.getCardsHtml({
@@ -156,22 +157,22 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
             }
 
             return html;
-        }
+        };
 
-        function initPage(tabContent) {
+        const initPage = (tabContent) => {
             itemsContainer.fetchData = fetchData;
             itemsContainer.getItemsHtml = getItemsHtml;
             itemsContainer.afterRefresh = afterRefresh;
-            var alphaPickerElement = tabContent.querySelector('.alphaPicker');
+            let alphaPickerElement = tabContent.querySelector('.alphaPicker');
 
             if (alphaPickerElement) {
                 alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
-                    var newValue = e.detail.value;
+                    let newValue = e.detail.value;
                     query.NameStartsWithOrGreater = newValue;
                     query.StartIndex = 0;
                     itemsContainer.refreshItems();
                 });
-                self.alphaPicker = new AlphaPicker.default({
+                this.alphaPicker = new AlphaPicker({
                     element: alphaPickerElement,
                     valueChangeEvent: 'click'
                 });
@@ -181,14 +182,14 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
                 itemsContainer.classList.add('padded-right-withalphapicker');
             }
 
-            var btnFilter = tabContent.querySelector('.btnFilter');
+            const btnFilter = tabContent.querySelector('.btnFilter');
 
             if (btnFilter) {
-                btnFilter.addEventListener('click', function () {
+                btnFilter.addEventListener('click', () => {
-                    self.showFilterMenu();
+                    this.showFilterMenu();
                 });
             }
-            var btnSort = tabContent.querySelector('.btnSort');
+            const btnSort = tabContent.querySelector('.btnSort');
 
             if (btnSort) {
                 btnSort.addEventListener('click', function (e) {
@@ -231,24 +232,23 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
                     });
                 });
             }
-            var btnSelectView = tabContent.querySelector('.btnSelectView');
+            const btnSelectView = tabContent.querySelector('.btnSelectView');
             btnSelectView.addEventListener('click', function (e) {
-                libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'Banner,List,Poster,PosterCard,Thumb,ThumbCard'.split(','));
+                libraryBrowser.showLayoutMenu(e.target, this.getCurrentViewStyle, 'Banner,List,Poster,PosterCard,Thumb,ThumbCard'.split(','));
             });
             btnSelectView.addEventListener('layoutchange', function (e) {
-                var viewStyle = e.detail.viewStyle;
+                let viewStyle = e.detail.viewStyle;
                 userSettings.set(savedViewKey, viewStyle);
                 query.StartIndex = 0;
                 onViewStyleChange();
                 itemsContainer.refreshItems();
             });
-        }
+        };
 
-        var self = this;
+        let itemsContainer = tabContent.querySelector('.itemsContainer');
-        var itemsContainer = tabContent.querySelector('.itemsContainer');
+        const savedQueryKey = params.topParentId + '-' + options.mode;
-        var savedQueryKey = params.topParentId + '-' + options.mode;
+        const savedViewKey = savedQueryKey + '-view';
-        var savedViewKey = savedQueryKey + '-view';
+        let query = {
-        var query = {
             SortBy: 'SortName,ProductionYear',
             SortOrder: 'Ascending',
             IncludeItemTypes: 'Movie',
@@ -264,7 +264,7 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
             query['Limit'] = userSettings.libraryPageSize();
         }
 
-        var isLoading = false;
+        let isLoading = false;
 
         if (options.mode === 'favorites') {
             query.IsFavorite = true;
@@ -272,14 +272,14 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
 
         query = userSettings.loadQuerySettings(savedQueryKey, query);
 
-        self.showFilterMenu = function () {
+        this.showFilterMenu = function () {
-            require(['components/filterdialog/filterdialog'], function ({default: filterDialogFactory}) {
+            import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => {
-                var filterDialog = new filterDialogFactory({
+                let filterDialog = new filterDialogFactory({
                     query: query,
                     mode: 'movies',
                     serverId: ApiClient.serverId()
                 });
-                events.on(filterDialog, 'filterchange', function () {
+                events.on(filterDialog, 'filterchange', () => {
                     query.StartIndex = 0;
                     itemsContainer.refreshItems();
                 });
@@ -287,22 +287,23 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
             });
         };
 
-        self.getCurrentViewStyle = function () {
+        this.getCurrentViewStyle = function () {
             return userSettings.get(savedViewKey) || 'Poster';
         };
 
-        self.initTab = function () {
+        this.initTab = function () {
             initPage(tabContent);
             onViewStyleChange();
         };
 
-        self.renderTab = function () {
+        this.renderTab = function () {
             itemsContainer.refreshItems();
             updateFilterControls();
         };
 
-        self.destroy = function () {
+        this.destroy = function () {
             itemsContainer = null;
         };
-    };
+    }
-});
+
+/* eslint-enable indent */

src/controllers/movies/moviesrecommended.js

@@ -1,7 +1,20 @@
-define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu', 'mainTabsManager', 'cardBuilder', 'dom', 'imageLoader', 'playbackManager', 'globalize', 'emby-scroller', 'emby-itemscontainer', 'emby-tabs', 'emby-button'], function (events, layoutManager, inputManager, userSettings, libraryMenu, mainTabsManager, cardBuilder, dom, imageLoader, playbackManager, globalize) {
+import events from 'events';
-    'use strict';
+import layoutManager from 'layoutManager';
+import inputManager from 'inputManager';
+import * as userSettings from 'userSettings';
+import libraryMenu from 'libraryMenu';
+import * as mainTabsManager from 'mainTabsManager';
+import cardBuilder from 'cardBuilder';
+import dom from 'dom';
+import imageLoader from 'imageLoader';
+import playbackManager from 'playbackManager';
+import globalize from 'globalize';
+import 'emby-scroller';
+import 'emby-itemscontainer';
+import 'emby-tabs';
+import 'emby-button';
 
-    playbackManager = playbackManager.default || playbackManager;
+/* eslint-disable indent */
 
     function enableScrollX() {
         return !layoutManager.desktop;
@@ -16,7 +29,7 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
     }
 
     function loadLatest(page, userId, parentId) {
-        var options = {
+        const options = {
             IncludeItemTypes: 'Movie',
             Limit: 18,
             Fields: 'PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo',
@@ -26,8 +39,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
             EnableTotalRecordCount: false
         };
         ApiClient.getJSON(ApiClient.getUrl('Users/' + userId + '/Items/Latest', options)).then(function (items) {
-            var allowBottomPadding = !enableScrollX();
+            const allowBottomPadding = !enableScrollX();
-            var container = page.querySelector('#recentlyAddedItems');
+            const container = page.querySelector('#recentlyAddedItems');
             cardBuilder.buildCards(items, {
                 itemsContainer: container,
                 shape: getPortraitShape(),
@@ -45,8 +58,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
     }
 
     function loadResume(page, userId, parentId) {
-        var screenWidth = dom.getWindowSize().innerWidth;
+        let screenWidth = dom.getWindowSize().innerWidth;
-        var options = {
+        const options = {
             SortBy: 'DatePlayed',
             SortOrder: 'Descending',
             IncludeItemTypes: 'Movie',
@@ -67,8 +80,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
                 page.querySelector('#resumableSection').classList.add('hide');
             }
 
-            var allowBottomPadding = !enableScrollX();
+            const allowBottomPadding = !enableScrollX();
-            var container = page.querySelector('#resumableItems');
+            const container = page.querySelector('#resumableItems');
             cardBuilder.buildCards(result.Items, {
                 itemsContainer: container,
                 preferThumb: true,
@@ -88,8 +101,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
     }
 
     function getRecommendationHtml(recommendation) {
-        var html = '';
+        let html = '';
-        var title = '';
+        let title = '';
 
         switch (recommendation.RecommendationType) {
             case 'SimilarToRecentlyPlayed':
@@ -113,7 +126,7 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
 
         html += '<div class="verticalSection">';
         html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + title + '</h2>';
-        var allowBottomPadding = true;
+        const allowBottomPadding = true;
 
         if (enableScrollX()) {
             html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">';
@@ -141,8 +154,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
     }
 
     function loadSuggestions(page, userId, parentId) {
-        var screenWidth = dom.getWindowSize().innerWidth;
+        let screenWidth = dom.getWindowSize().innerWidth;
-        var url = ApiClient.getUrl('Movies/Recommendations', {
+        let url = ApiClient.getUrl('Movies/Recommendations', {
             userId: userId,
             categoryLimit: 6,
             ItemLimit: screenWidth >= 1920 ? 8 : screenWidth >= 1600 ? 8 : screenWidth >= 1200 ? 6 : 5,
@@ -157,9 +170,9 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
                 return;
             }
 
-            var html = recommendations.map(getRecommendationHtml).join('');
+            const html = recommendations.map(getRecommendationHtml).join('');
             page.querySelector('.noItemsMessage').classList.add('hide');
-            var recs = page.querySelector('.recommendations');
+            let recs = page.querySelector('.recommendations');
             recs.innerHTML = html;
             imageLoader.lazyChildren(recs);
 
@@ -169,7 +182,7 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
     }
 
     function autoFocus(page) {
-        require(['autoFocuser'], function (autoFocuser) {
+        import('autoFocuser').then(({default: autoFocuser}) => {
             autoFocuser.autoFocus(page);
         });
     }
@@ -195,17 +208,16 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
     }
 
     function initSuggestedTab(page, tabContent) {
-        var containers = tabContent.querySelectorAll('.itemsContainer');
+        const containers = tabContent.querySelectorAll('.itemsContainer');
 
-        for (var i = 0, length = containers.length; i < length; i++) {
+        for (const container of containers) {
-            setScrollClasses(containers[i], enableScrollX());
+            setScrollClasses(container, enableScrollX());
         }
     }
 
     function loadSuggestionsTab(view, params, tabContent) {
-        var parentId = params.topParentId;
+        const parentId = params.topParentId;
-        var userId = ApiClient.getCurrentUserId();
+        const userId = ApiClient.getCurrentUserId();
-        console.debug('loadSuggestionsTab');
         loadResume(tabContent, userId, parentId);
         loadLatest(tabContent, userId, parentId);
         loadSuggestions(tabContent, userId, parentId);
@@ -224,9 +236,6 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
             name: globalize.translate('TabCollections')
         }, {
             name: globalize.translate('TabGenres')
-        }, {
-            name: globalize.translate('ButtonSearch'),
-            cssClass: 'searchTabButton'
         }];
     }
 
@@ -249,13 +258,13 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
         }
     }
 
-    return function (view, params) {
+    export default function (view, params) {
         function onBeforeTabChange(e) {
             preLoadTab(view, parseInt(e.detail.selectedTabIndex));
         }
 
         function onTabChange(e) {
-            var newIndex = parseInt(e.detail.selectedTabIndex);
+            const newIndex = parseInt(e.detail.selectedTabIndex);
             loadTab(view, newIndex);
         }
 
@@ -267,52 +276,50 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
             mainTabsManager.setTabs(view, currentTabIndex, getTabs, getTabContainers, onBeforeTabChange, onTabChange);
         }
 
-        function getTabController(page, index, callback) {
+        const getTabController = (page, index, callback) => {
-            var depends = [];
+            let depends = '';
 
             switch (index) {
                 case 0:
-                    depends.push('controllers/movies/movies');
+                    depends = 'controllers/movies/movies';
                     break;
 
                 case 1:
+                    depends = 'controllers/movies/moviesrecommended.js';
                     break;
 
                 case 2:
-                    depends.push('controllers/movies/movietrailers');
+                    depends = 'controllers/movies/movietrailers';
                     break;
 
                 case 3:
-                    depends.push('controllers/movies/movies');
+                    depends = 'controllers/movies/movies';
                     break;
 
                 case 4:
-                    depends.push('controllers/movies/moviecollections');
+                    depends = 'controllers/movies/moviecollections';
                     break;
 
                 case 5:
-                    depends.push('controllers/movies/moviegenres');
+                    depends = 'controllers/movies/moviegenres';
                     break;
-
-                case 6:
-                    depends.push('scripts/searchtab');
             }
 
-            require(depends, function (controllerFactory) {
+            import(depends).then(({default: controllerFactory}) => {
-                var tabContent;
+                let tabContent;
 
                 if (index === suggestionsTabIndex) {
                     tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']");
-                    self.tabContent = tabContent;
+                    this.tabContent = tabContent;
                 }
 
-                var controller = tabControllers[index];
+                let controller = tabControllers[index];
 
                 if (!controller) {
                     tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']");
 
                     if (index === suggestionsTabIndex) {
-                        controller = self;
+                        controller = this;
                     } else if (index === 6) {
                         controller = new controllerFactory(view, tabContent, {
                             collectionType: 'movies',
@@ -335,7 +342,7 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
 
                 callback(controller);
             });
-        }
+        };
 
         function preLoadTab(page, index) {
             getTabController(page, index, function (controller) {
@@ -347,12 +354,12 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
 
         function loadTab(page, index) {
             currentTabIndex = index;
-            getTabController(page, index, function (controller) {
+            getTabController(page, index, ((controller) => {
                 if (renderedTabs.indexOf(index) == -1) {
                     renderedTabs.push(index);
                     controller.renderTab();
                 }
-            });
+            }));
         }
 
         function onPlaybackStop(e, state) {
@@ -370,22 +377,21 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
             }
         }
 
-        var self = this;
+        let currentTabIndex = parseInt(params.tab || getDefaultTabIndex(params.topParentId));
-        var currentTabIndex = parseInt(params.tab || getDefaultTabIndex(params.topParentId));
+        const suggestionsTabIndex = 1;
-        var suggestionsTabIndex = 1;
 
-        self.initTab = function () {
+        this.initTab = function () {
-            var tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
+            let tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
             initSuggestedTab(view, tabContent);
         };
 
-        self.renderTab = function () {
+        this.renderTab = function () {
-            var tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
+            let tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
             loadSuggestionsTab(view, params, tabContent);
         };
 
-        var tabControllers = [];
+        let tabControllers = [];
-        var renderedTabs = [];
+        let renderedTabs = [];
         view.addEventListener('viewshow', function (e) {
             initTabs();
             if (!view.getAttribute('data-title')) {
@@ -405,15 +411,14 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
             events.on(playbackManager, 'playbackstop', onPlaybackStop);
             inputManager.on(window, onInputCommand);
         });
-        view.addEventListener('viewbeforehide', function (e) {
+        view.addEventListener('viewbeforehide', function () {
             inputManager.off(window, onInputCommand);
         });
-        view.addEventListener('viewdestroy', function (e) {
+        for (const tabController of tabControllers) {
-            tabControllers.forEach(function (t) {
+            if (tabController.destroy) {
-                if (t.destroy) {
+                tabController.destroy();
-                    t.destroy();
             }
-            });
+        }
-        });
+    }
-    };
+
-});
+/* eslint-enable indent */

src/controllers/movies/movietrailers.js

@@ -1,13 +1,20 @@
-define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, AlphaPicker, listView, cardBuilder, userSettings, globalize) {
+import loading from 'loading';
-    'use strict';
+import events from 'events';
+import libraryBrowser from 'libraryBrowser';
+import imageLoader from 'imageLoader';
+import AlphaPicker from 'alphaPicker';
+import listView from 'listView';
+import cardBuilder from 'cardBuilder';
+import * as userSettings from 'userSettings';
+import globalize from 'globalize';
+import 'emby-itemscontainer';
 
-    loading = loading.default || loading;
+/* eslint-disable indent */
-    libraryBrowser = libraryBrowser.default || libraryBrowser;
 
-    return function (view, params, tabContent) {
+    export default function (view, params, tabContent) {
         function getPageData(context) {
-            var key = getSavedQueryKey(context);
+            const key = getSavedQueryKey(context);
-            var pageData = data[key];
+            let pageData = data[key];
 
             if (!pageData) {
                 pageData = data[key] = {
@@ -46,11 +53,11 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
             return context.savedQueryKey;
         }
 
-        function reloadItems() {
+        const reloadItems = () => {
             loading.show();
             isLoading = true;
-            var query = getQuery(tabContent);
+            const query = getQuery(tabContent);
-            ApiClient.getItems(ApiClient.getCurrentUserId(), query).then(function (result) {
+            ApiClient.getItems(ApiClient.getCurrentUserId(), query).then((result) => {
                 function onNextPageClick() {
                     if (isLoading) {
                         return;
@@ -75,7 +82,7 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
 
                 window.scrollTo(0, 0);
                 updateFilterControls(tabContent);
-                var pagingHtml = libraryBrowser.getQueryPagingHtml({
+                const pagingHtml = libraryBrowser.getQueryPagingHtml({
                     startIndex: query.StartIndex,
                     limit: query.Limit,
                     totalRecordCount: result.TotalRecordCount,
@@ -85,8 +92,8 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
                     sortButton: false,
                     filterButton: false
                 });
-                var html;
+                let html;
-                var viewStyle = self.getCurrentViewStyle();
+                const viewStyle = this.getCurrentViewStyle();
 
                 if (viewStyle == 'Thumb') {
                     html = cardBuilder.getCardsHtml({
@@ -142,22 +149,20 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
                     });
                 }
 
-                var i;
+                let elems = tabContent.querySelectorAll('.paging');
-                var length;
-                var elems = tabContent.querySelectorAll('.paging');
 
-                for (i = 0, length = elems.length; i < length; i++) {
+                for (const elem of elems) {
-                    elems[i].innerHTML = pagingHtml;
+                    elem.innerHTML = pagingHtml;
                 }
 
                 elems = tabContent.querySelectorAll('.btnNextPage');
-                for (i = 0, length = elems.length; i < length; i++) {
+                for (const elem of elems) {
-                    elems[i].addEventListener('click', onNextPageClick);
+                    elem.addEventListener('click', onNextPageClick);
                 }
 
                 elems = tabContent.querySelectorAll('.btnPreviousPage');
-                for (i = 0, length = elems.length; i < length; i++) {
+                for (const elem of elems) {
-                    elems[i].addEventListener('click', onPreviousPageClick);
+                    elem.addEventListener('click', onPreviousPageClick);
                 }
 
                 if (!result.Items.length) {
@@ -169,27 +174,26 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
                     html += '</div>';
                 }
 
-                var itemsContainer = tabContent.querySelector('.itemsContainer');
+                const itemsContainer = tabContent.querySelector('.itemsContainer');
                 itemsContainer.innerHTML = html;
                 imageLoader.lazyChildren(itemsContainer);
                 libraryBrowser.saveQueryValues(getSavedQueryKey(tabContent), query);
                 loading.hide();
                 isLoading = false;
             });
-        }
+        };
 
-        function updateFilterControls(tabContent) {
+        const updateFilterControls = (tabContent) => {
-            var query = getQuery(tabContent);
+            const query = getQuery(tabContent);
-            self.alphaPicker.value(query.NameStartsWithOrGreater);
+            this.alphaPicker.value(query.NameStartsWithOrGreater);
-        }
+        };
 
-        var self = this;
+        const data = {};
-        var data = {};
+        let isLoading = false;
-        var isLoading = false;
 
-        self.showFilterMenu = function () {
+        this.showFilterMenu = function () {
-            require(['components/filterdialog/filterdialog'], function ({default: filterDialogFactory}) {
+            import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => {
-                var filterDialog = new filterDialogFactory({
+                const filterDialog = new filterDialogFactory({
                     query: getQuery(tabContent),
                     mode: 'movies',
                     serverId: ApiClient.serverId()
@@ -202,21 +206,21 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
             });
         };
 
-        self.getCurrentViewStyle = function () {
+        this.getCurrentViewStyle = function () {
             return getPageData(tabContent).view;
         };
 
-        function initPage(tabContent) {
+        const initPage = (tabContent) => {
-            var alphaPickerElement = tabContent.querySelector('.alphaPicker');
+            const alphaPickerElement = tabContent.querySelector('.alphaPicker');
-            var itemsContainer = tabContent.querySelector('.itemsContainer');
+            const itemsContainer = tabContent.querySelector('.itemsContainer');
             alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
-                var newValue = e.detail.value;
+                const newValue = e.detail.value;
-                var query = getQuery(tabContent);
+                const query = getQuery(tabContent);
                 query.NameStartsWithOrGreater = newValue;
                 query.StartIndex = 0;
                 reloadItems();
             });
-            self.alphaPicker = new AlphaPicker.default({
+            this.alphaPicker = new AlphaPicker({
                 element: alphaPickerElement,
                 valueChangeEvent: 'click'
             });
@@ -226,7 +230,7 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
             itemsContainer.classList.add('padded-right-withalphapicker');
 
             tabContent.querySelector('.btnFilter').addEventListener('click', function () {
-                self.showFilterMenu();
+                this.showFilterMenu();
             });
             tabContent.querySelector('.btnSort').addEventListener('click', function (e) {
                 libraryBrowser.showSortMenu({
@@ -260,15 +264,16 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
                     button: e.target
                 });
             });
-        }
+        };
 
         initPage(tabContent);
 
-        self.renderTab = function () {
+        this.renderTab = function () {
             reloadItems();
             updateFilterControls(tabContent);
         };
 
-        self.destroy = function () {};
+        this.destroy = function () {};
-    };
+    }
-});
+
+/* eslint-enable indent */

src/controllers/music/musicrecommended.js

@@ -191,9 +191,6 @@ import 'flexStyles';
             name: globalize.translate('TabSongs')
         }, {
             name: globalize.translate('TabGenres')
-        }, {
-            name: globalize.translate('ButtonSearch'),
-            cssClass: 'searchTabButton'
         }];
     }
 
@@ -295,10 +292,6 @@ import 'flexStyles';
                 case 6:
                     depends = 'controllers/music/musicgenres';
                     break;
-
-                case 7:
-                    depends = 'scripts/searchtab';
-                    break;
             }
 
             import(depends).then(({default: controllerFactory}) => {

src/controllers/shows/tvrecommended.js

@@ -30,9 +30,6 @@ import 'emby-button';
             name: globalize.translate('TabNetworks')
         }, {
             name: globalize.translate('TabEpisodes')
-        }, {
-            name: globalize.translate('ButtonSearch'),
-            cssClass: 'searchTabButton'
         }];
     }
 
@@ -217,10 +214,6 @@ import 'emby-button';
                 case 6:
                     depends = 'controllers/shows/episodes';
                     break;
-
-                case 7:
-                    depends = 'scripts/searchtab';
-                    break;
             }
 
             import(depends).then(({default: controllerFactory}) => {

src/elements/emby-slider/emby-slider.css

@@ -230,3 +230,18 @@
     margin: 0;
     padding: 0.5em 0.75em;
 }
+
+/* FIXME: 'sliderContainer' is used to wrap slider's pieces */
+.sliderContainer-settings {
+    margin-bottom: 1.8em;
+    position: relative;
+}
+
+.sliderContainer-settings .mdl-slider-container {
+    height: 2.83em; /* similar to emby-input with its 110% font-size */
+}
+
+.sliderLabel {
+    display: block;
+    margin-bottom: 0.25em;
+}

src/elements/emby-slider/emby-slider.js

@@ -150,6 +150,16 @@ import 'emby-input';
             this.classList.add('show-focus');
         }
 
+        const topContainer = dom.parentWithClass(this, 'sliderContainer-settings');
+
+        if (topContainer && this.getAttribute('label')) {
+            const label = this.ownerDocument.createElement('label');
+            label.innerHTML = this.getAttribute('label');
+            label.classList.add('sliderLabel');
+            label.htmlFor = this.id;
+            topContainer.insertBefore(label, topContainer.firstChild);
+        }
+
         const containerElement = this.parentNode;
         containerElement.classList.add('mdl-slider-container');
 

src/libraries/navdrawer/navdrawer.js

@@ -1,15 +1,19 @@
-define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser, dom) {
+/* Cleaning this file properly is not neecessary, since it's an outdated library
-    "use strict";
+ * and will be replaced soon by a Vue component.
+ */
 
-    browser = browser.default || browser;
+import browser from 'browser';
+import dom from 'dom';
+import 'css!./navdrawer';
+import 'scrollStyles';
 
-    return function (options) {
+export default function (options) {
     function getTouches(e) {
         return e.changedTouches || e.targetTouches || e.touches;
     }
 
     function onMenuTouchStart(e) {
-            options.target.classList.remove("transition");
+        options.target.classList.remove('transition');
         var touches = getTouches(e);
         var touch = touches[0] || {};
         menuTouchStartX = touch.clientX;
@@ -32,27 +36,27 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
         var deltaY = endY - (menuTouchStartY || 0);
         setVelocity(deltaX);
 
-            if (isOpen && 1 !== dragMode && deltaX > 0) {
+        if (isOpen && dragMode !== 1 && deltaX > 0) {
             dragMode = 2;
         }
 
-            if (0 === dragMode && (!isOpen || Math.abs(deltaX) >= 10) && Math.abs(deltaY) < 5) {
+        if (dragMode === 0 && (!isOpen || Math.abs(deltaX) >= 10) && Math.abs(deltaY) < 5) {
             dragMode = 1;
-                scrollContainer.addEventListener("scroll", disableEvent);
+            scrollContainer.addEventListener('scroll', disableEvent);
             self.showMask();
-            } else if (0 === dragMode && Math.abs(deltaY) >= 5) {
+        } else if (dragMode === 0 && Math.abs(deltaY) >= 5) {
             dragMode = 2;
         }
 
-            if (1 === dragMode) {
+        if (dragMode === 1) {
             newPos = currentPos + deltaX;
             self.changeMenuPos();
         }
     }
 
     function onMenuTouchEnd(e) {
-            options.target.classList.add("transition");
+        options.target.classList.add('transition');
-            scrollContainer.removeEventListener("scroll", disableEvent);
+        scrollContainer.removeEventListener('scroll', disableEvent);
         dragMode = 0;
         var touches = getTouches(e);
         var touch = touches[0] || {};
@@ -71,9 +75,9 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
             if (((getTouches(e)[0] || {}).clientX || 0) <= options.handleSize) {
                 isPeeking = true;
 
-                    if (e.type === "touchstart") {
+                if (e.type === 'touchstart') {
-                        dom.removeEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {});
+                    dom.removeEventListener(edgeContainer, 'touchmove', onEdgeTouchMove, {});
-                        dom.addEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {});
+                    dom.addEventListener(edgeContainer, 'touchmove', onEdgeTouchMove, {});
                 }
 
                 onMenuTouchStart(e);
@@ -90,7 +94,7 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
     function onEdgeTouchEnd(e) {
         if (isPeeking) {
             isPeeking = false;
-                dom.removeEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {});
+            dom.removeEventListener(edgeContainer, 'touchmove', onEdgeTouchMove, {});
             onMenuTouchEnd(e);
         }
     }
@@ -144,8 +148,8 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
     function onMaskTransitionEnd() {
         var classList = mask.classList;
 
-            if (!classList.contains("backdrop")) {
+        if (!classList.contains('backdrop')) {
-                classList.add("hide");
+            classList.add('hide');
         }
     }
 
@@ -157,10 +161,10 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
     var startPoint = 0;
     var countStart = 0;
     var velocity = 0;
-        options.target.classList.add("transition");
+    options.target.classList.add('transition');
     var dragMode = 0;
-        var scrollContainer = options.target.querySelector(".mainDrawer-scrollContainer");
+    var scrollContainer = options.target.querySelector('.mainDrawer-scrollContainer');
-        scrollContainer.classList.add("scrollY");
+    scrollContainer.classList.add('scrollY');
 
     var TouchMenuLA = function () {
         self = this;
@@ -175,13 +179,13 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
     };
 
     TouchMenuLA.prototype.initElements = function () {
-            options.target.classList.add("touch-menu-la");
+        options.target.classList.add('touch-menu-la');
-            options.target.style.width = options.width + "px";
+        options.target.style.width = options.width + 'px';
-            options.target.style.left = -options.width + "px";
+        options.target.style.left = -options.width + 'px';
 
         if (!options.disableMask) {
-                mask = document.createElement("div");
+            mask = document.createElement('div');
-                mask.className = "tmla-mask hide";
+            mask.className = 'tmla-mask hide';
             document.body.appendChild(mask);
             dom.addEventListener(mask, dom.whichTransitionEvent(), onMaskTransitionEnd, {
                 passive: true
@@ -192,12 +196,12 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
     var menuTouchStartX;
     var menuTouchStartY;
     var menuTouchStartTime;
-        var edgeContainer = document.querySelector(".mainDrawerHandle");
+    var edgeContainer = document.querySelector('.mainDrawerHandle');
     var isPeeking = false;
 
     TouchMenuLA.prototype.animateToPosition = function (pos) {
         requestAnimationFrame(function () {
-                options.target.style.transform = pos ? "translateX(" + pos + "px)" : "none";
+            options.target.style.transform = pos ? 'translateX(' + pos + 'px)' : 'none';
         });
     };
 
@@ -208,7 +212,7 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
     };
 
     TouchMenuLA.prototype.clickMaskClose = function () {
-            mask.addEventListener("click", function () {
+        mask.addEventListener('click', function () {
             self.close();
         });
     };
@@ -235,7 +239,7 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
         this.animateToPosition(options.width);
         currentPos = options.width;
         this.isVisible = true;
-            options.target.classList.add("drawer-open");
+        options.target.classList.add('drawer-open');
         self.showMask();
         self.invoke(options.onChange);
     };
@@ -244,7 +248,7 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
         this.animateToPosition(0);
         currentPos = 0;
         self.isVisible = false;
-            options.target.classList.remove("drawer-open");
+        options.target.classList.remove('drawer-open');
         self.hideMask();
         self.invoke(options.onChange);
     };
@@ -261,13 +265,13 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
     var backgroundTouchStartTime;
 
     TouchMenuLA.prototype.showMask = function () {
-            mask.classList.remove("hide");
+        mask.classList.remove('hide');
-            mask.classList.add("backdrop");
+        mask.classList.add('backdrop');
     };
 
     TouchMenuLA.prototype.hideMask = function () {
-            mask.classList.add("hide");
+        mask.classList.add('hide');
-            mask.classList.remove("backdrop");
+        mask.classList.remove('backdrop');
     };
 
     TouchMenuLA.prototype.invoke = function (fn) {
@@ -284,26 +288,26 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
                 if (enabled) {
                     if (!_edgeSwipeEnabled) {
                         _edgeSwipeEnabled = true;
-                            dom.addEventListener(edgeContainer, "touchstart", onEdgeTouchStart, {
+                        dom.addEventListener(edgeContainer, 'touchstart', onEdgeTouchStart, {
                             passive: true
                         });
-                            dom.addEventListener(edgeContainer, "touchend", onEdgeTouchEnd, {
+                        dom.addEventListener(edgeContainer, 'touchend', onEdgeTouchEnd, {
                             passive: true
                         });
-                            dom.addEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, {
+                        dom.addEventListener(edgeContainer, 'touchcancel', onEdgeTouchEnd, {
                             passive: true
                         });
                     }
                 } else {
                     if (_edgeSwipeEnabled) {
                         _edgeSwipeEnabled = false;
-                            dom.removeEventListener(edgeContainer, "touchstart", onEdgeTouchStart, {
+                        dom.removeEventListener(edgeContainer, 'touchstart', onEdgeTouchStart, {
                             passive: true
                         });
-                            dom.removeEventListener(edgeContainer, "touchend", onEdgeTouchEnd, {
+                        dom.removeEventListener(edgeContainer, 'touchend', onEdgeTouchEnd, {
                             passive: true
                         });
-                            dom.removeEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, {
+                        dom.removeEventListener(edgeContainer, 'touchcancel', onEdgeTouchEnd, {
                             passive: true
                         });
                     }
@@ -322,26 +326,26 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
         self.initElements();
 
         if (browser.touch) {
-                dom.addEventListener(options.target, "touchstart", onMenuTouchStart, {
+            dom.addEventListener(options.target, 'touchstart', onMenuTouchStart, {
                 passive: true
             });
-                dom.addEventListener(options.target, "touchmove", onMenuTouchMove, {
+            dom.addEventListener(options.target, 'touchmove', onMenuTouchMove, {
                 passive: true
             });
-                dom.addEventListener(options.target, "touchend", onMenuTouchEnd, {
+            dom.addEventListener(options.target, 'touchend', onMenuTouchEnd, {
                 passive: true
             });
-                dom.addEventListener(options.target, "touchcancel", onMenuTouchEnd, {
+            dom.addEventListener(options.target, 'touchcancel', onMenuTouchEnd, {
                 passive: true
             });
-                dom.addEventListener(mask, "touchstart", onBackgroundTouchStart, {
+            dom.addEventListener(mask, 'touchstart', onBackgroundTouchStart, {
                 passive: true
             });
-                dom.addEventListener(mask, "touchmove", onBackgroundTouchMove, {});
+            dom.addEventListener(mask, 'touchmove', onBackgroundTouchMove, {});
-                dom.addEventListener(mask, "touchend", onBackgroundTouchEnd, {
+            dom.addEventListener(mask, 'touchend', onBackgroundTouchEnd, {
                 passive: true
             });
-                dom.addEventListener(mask, "touchcancel", onBackgroundTouchEnd, {
+            dom.addEventListener(mask, 'touchcancel', onBackgroundTouchEnd, {
                 passive: true
             });
         }
@@ -350,5 +354,4 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
     };
 
     return new TouchMenuLA();
-    };
+}
-});

src/libraries/scroller.js

@@ -1,8 +1,13 @@
-define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'scrollStyles'], function (browser, layoutManager, dom, focusManager, ResizeObserver) {
+/* Cleaning this file properly is not neecessary, since it's an outdated library
-    'use strict';
+ * and will be replaced soon by a Vue component.
+ */
 
-    browser = browser.default || browser;
+import browser from 'browser';
-    focusManager = focusManager.default || focusManager;
+import layoutManager from 'layoutManager';
+import dom from 'dom';
+import focusManager from 'focusManager';
+import ResizeObserver from 'ResizeObserver';
+import 'scrollStyles';
 
 /**
 * Return type of the value.
@@ -55,19 +60,8 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
 var dragTouchEvents = ['touchmove', 'touchend'];
 var wheelEvent = (document.implementation.hasFeature('Event.wheel', '3.0') ? 'wheel' : 'mousewheel');
 var interactiveElements = ['INPUT', 'SELECT', 'TEXTAREA'];
-    var tmpArray = [];
-    var time;
-
-    // Math shorthands
-    var abs = Math.abs;
-    var sqrt = Math.sqrt;
-    var pow = Math.pow;
-    var round = Math.round;
-    var max = Math.max;
-    var min = Math.min;
 
 var scrollerFactory = function (frame, options) {
-
     // Extend options
     var o = Object.assign({}, {
         slidee: null, // Selector, DOM element, or jQuery object with DOM element representing SLIDEE.
@@ -100,11 +94,9 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
         // native smooth scroll
         options.enableNativeScroll = true;
     } else if (options.requireAnimation && (browser.animate || browser.supportsCssAnimation())) {
-
         // transform is the only way to guarantee animation
         options.enableNativeScroll = false;
     } else if (!layoutManager.tv || !browser.animate) {
-
         options.enableNativeScroll = true;
     }
 
@@ -165,9 +157,7 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
     var frameSize = 0;
     var slideeSize = 0;
     function ensureSizeInfo() {
-
         if (requiresReflow) {
-
             requiresReflow = false;
 
             // Reset global variables
@@ -176,7 +166,7 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
             slideeSize = o.scrollWidth || Math.max(slideeElement[o.horizontal ? 'offsetWidth' : 'offsetHeight'], slideeElement[o.horizontal ? 'scrollWidth' : 'scrollHeight']);
 
             // Set position limits & relativess
-                self._pos.end = max(slideeSize - frameSize, 0);
+            self._pos.end = Math.max(slideeSize - frameSize, 0);
         }
     }
 
@@ -189,11 +179,9 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
      * @return {Void}
      */
     function load(isInit) {
-
         requiresReflow = true;
 
         if (!isInit) {
-
             ensureSizeInfo();
 
             // Fix possible overflowing
@@ -203,7 +191,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
     }
 
     function initFrameResizeObserver() {
-
         var observerOptions = {};
 
         self.frameResizeObserver = new ResizeObserver(onResize, observerOptions);
@@ -228,16 +215,13 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
     };
 
     function nativeScrollTo(container, pos, immediate) {
-
         if (container.scroll) {
             if (o.horizontal) {
-
                 container.scroll({
                     left: pos,
                     behavior: immediate ? 'instant' : 'smooth'
                 });
             } else {
-
                 container.scroll({
                     top: pos,
                     behavior: immediate ? 'instant' : 'smooth'
@@ -269,14 +253,12 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
          * @return {Void}
          */
     self.slideTo = function (newPos, immediate, fullItemPos) {
-
         ensureSizeInfo();
         var pos = self._pos;
 
         newPos = within(newPos, pos.start, pos.end);
 
         if (!transform) {
-
             nativeScrollTo(nativeScrollElement, newPos, immediate);
             return;
         }
@@ -294,7 +276,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
         }
 
         if (!immediate && o.skipSlideToWhenVisible && fullItemPos && fullItemPos.isVisible) {
-
             return;
         }
 
@@ -306,7 +287,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
     };
 
     function setStyleProperty(elem, name, value, speed, resetTransition) {
-
         var style = elem.style;
 
         if (resetTransition || browser.edge) {
@@ -328,7 +308,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
     }
 
     function renderAnimateWithTransform(fromPosition, toPosition, immediate) {
-
         var speed = o.speed;
 
         if (immediate) {
@@ -336,9 +315,9 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
         }
 
         if (o.horizontal) {
-                setStyleProperty(slideeElement, 'transform', 'translateX(' + (-round(toPosition)) + 'px)', speed);
+            setStyleProperty(slideeElement, 'transform', 'translateX(' + (-Math.round(toPosition)) + 'px)', speed);
         } else {
-                setStyleProperty(slideeElement, 'transform', 'translateY(' + (-round(toPosition)) + 'px)', speed);
+            setStyleProperty(slideeElement, 'transform', 'translateY(' + (-Math.round(toPosition)) + 'px)', speed);
         }
         self._pos.cur = toPosition;
 
@@ -346,7 +325,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
     }
 
     function getBoundingClientRect(elem) {
-
         // Support: BlackBerry 5, iOS 3 (original iPhone)
         // If we don't have gBCR, just use 0,0 rather than error
         if (elem.getBoundingClientRect) {
@@ -364,14 +342,10 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
      * @return {Object}
      */
     self.getPos = function (item) {
-
         var scrollElement = transform ? slideeElement : nativeScrollElement;
         var slideeOffset = getBoundingClientRect(scrollElement);
         var itemOffset = getBoundingClientRect(item);
 
-            var slideeStartPos = o.horizontal ? slideeOffset.left : slideeOffset.top;
-            var slideeEndPos = o.horizontal ? slideeOffset.right : slideeOffset.bottom;
-
         var offset = o.horizontal ? itemOffset.left - slideeOffset.left : itemOffset.top - slideeOffset.top;
 
         var size = o.horizontal ? itemOffset.width : itemOffset.height;
@@ -408,7 +382,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
     };
 
     self.getCenterPosition = function (item) {
-
         ensureSizeInfo();
 
         var pos = self.getPos(item);
@@ -453,7 +426,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
 
         // Bind dragging events
         if (transform) {
-
             if (isTouch) {
                 dragTouchEvents.forEach(function (eventName) {
                     dom.addEventListener(document, eventName, dragHandler, {
@@ -482,7 +454,7 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
         var pointer = dragging.touch ? event[dragging.released ? 'changedTouches' : 'touches'][0] : event;
         dragging.pathX = pointer.pageX - dragging.initX;
         dragging.pathY = pointer.pageY - dragging.initY;
-            dragging.path = sqrt(pow(dragging.pathX, 2) + pow(dragging.pathY, 2));
+        dragging.path = Math.sqrt(Math.pow(dragging.pathX, 2) + Math.pow(dragging.pathY, 2));
         dragging.delta = o.horizontal ? dragging.pathX : dragging.pathY;
 
         if (!dragging.released && dragging.path < 1) {
@@ -499,7 +471,7 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
             } else {
                 // If dragging path is sufficiently long we can confidently start a drag
                 // if drag is in different direction than scroll, ignore it
-                    if (o.horizontal ? abs(dragging.pathX) > abs(dragging.pathY) : abs(dragging.pathX) < abs(dragging.pathY)) {
+                if (o.horizontal ? Math.abs(dragging.pathX) > Math.abs(dragging.pathY) : Math.abs(dragging.pathX) < Math.abs(dragging.pathY)) {
                     dragging.init = 1;
                 } else {
                     return dragEnd();
@@ -520,7 +492,7 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
             dragEnd();
         }
 
-            self.slideTo(round(dragging.initPos - dragging.delta));
+        self.slideTo(Math.round(dragging.initPos - dragging.delta));
     }
 
     /**
@@ -557,9 +529,7 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
      * @return {Boolean}
      */
     function isInteractive(element) {
-
         while (element) {
-
             if (interactiveElements.indexOf(element.tagName) !== -1) {
                 return true;
             }
@@ -595,7 +565,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
      * @return {Void}
      */
     function scrollHandler(event) {
-
         ensureSizeInfo();
         var pos = self._pos;
         // Ignore if there is no scrolling to be done
@@ -612,7 +581,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
 
             self.slideBy(o.scrollBy * delta);
         } else {
-
             if (isSmoothScrollSupported) {
                 delta *= 12;
             }
@@ -631,7 +599,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
      * @return {Void}
      */
     self.destroy = function () {
-
         if (self.frameResizeObserver) {
             self.frameResizeObserver.disconnect();
             self.frameResizeObserver = null;
@@ -667,11 +634,9 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
     var contentRect = {};
 
     function onResize(entries) {
-
         var entry = entries[0];
 
         if (entry) {
-
             var newRect = entry.contentRect;
 
             // handle element being hidden
@@ -680,7 +645,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
             }
 
             if (newRect.width !== contentRect.width || newRect.height !== contentRect.height) {
-
                 contentRect = newRect;
 
                 load(false);
@@ -706,7 +670,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
     }
 
     self.getScrollPosition = function () {
-
         if (transform) {
             return self._pos.cur;
         }
@@ -719,7 +682,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
     };
 
     self.getScrollSize = function () {
-
         if (transform) {
             return slideeSize;
         }
@@ -795,7 +757,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
         initFrameResizeObserver();
 
         if (transform) {
-
             dom.addEventListener(dragSourceElement, 'touchstart', dragInitSlidee, {
                 passive: true
             });
@@ -812,9 +773,7 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
                     passive: true
                 });
             }
-
         } else if (o.horizontal) {
-
             // Don't bind to mouse events with vertical scroll since the mouse wheel can handle this natively
 
             if (o.mouseWheel) {
@@ -924,5 +883,4 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
     return Promise.resolve(instance);
 };
 
-    return scrollerFactory;
+export default scrollerFactory;
-});

src/plugins/htmlVideoPlayer/plugin.js

@@ -1132,7 +1132,7 @@ function tryRemoveElement(elem) {
          */
         getCueCss(appearance, selector) {
             return `${selector}::cue {
-                ${appearance.text.map((s) => `${s.name}:${s.value}!important;`).join('')}
+                ${appearance.text.map((s) => s.value !== undefined && s.value !== '' ? `${s.name}:${s.value}!important;` : '').join('')}
             }`;
         }
 
@@ -1150,7 +1150,7 @@ function tryRemoveElement(elem) {
                     document.getElementsByTagName('head')[0].appendChild(styleElem);
                 }
 
-                styleElem.innerHTML = this.getCueCss(subtitleAppearanceHelper.getStyles(userSettings.getSubtitleAppearanceSettings(), true), '.htmlvideoplayer');
+                styleElem.innerHTML = this.getCueCss(subtitleAppearanceHelper.getStyles(userSettings.getSubtitleAppearanceSettings()), '.htmlvideoplayer');
             });
         }
 
@@ -1195,18 +1195,29 @@ function tryRemoveElement(elem) {
 
             // download the track json
             this.fetchSubtitles(track, item).then(function (data) {
+                import('userSettings').then((userSettings) => {
                     // show in ui
                     console.debug(`downloaded ${data.TrackEvents.length} track events`);
+
+                    const subtitleAppearance = userSettings.getSubtitleAppearanceSettings();
+                    const cueLine = parseInt(subtitleAppearance.verticalPosition, 10);
+
                     // add some cues to show the text
                     // in safari, the cues need to be added before setting the track mode to showing
                     for (const trackEvent of data.TrackEvents) {
                         const trackCueObject = window.VTTCue || window.TextTrackCue;
                         const cue = new trackCueObject(trackEvent.StartPositionTicks / 10000000, trackEvent.EndPositionTicks / 10000000, normalizeTrackEventText(trackEvent.Text, false));
 
+                        if (cue.line === 'auto') {
+                            cue.line = cueLine;
+                        }
+
                         trackElement.addCue(cue);
                     }
+
                     trackElement.mode = 'showing';
                 });
+            });
         }
 
         /**

src/plugins/htmlVideoPlayer/style.css

@@ -33,16 +33,22 @@ video::-webkit-media-controls {
     text-shadow: 0.14em 0.14em 0.14em rgba(0, 0, 0, 1);
     -webkit-font-smoothing: antialiased;
     font-family: inherit;
+    line-height: normal; /* Restore value. See -webkit-media-text-track-container 'line-height' */
 }
 
-.htmlvideoplayer-moveupsubtitles::-webkit-media-text-track-display {
+.htmlvideoplayer::-webkit-media-text-track-container {
-    /* style the text itself */
+    font-size: 170% !important; /* Override element inline style */
-    margin-top: -2em;
+    line-height: 50%; /* Child element cannot set line height smaller than its parent has. This allow smaller values for children */
+}
+
+.htmlvideoplayer::-webkit-media-text-track-display {
+    max-width: 70%;
+    margin-left: 15%;
 }
 
 .videoSubtitles {
     position: fixed;
-    bottom: 10%;
+    bottom: 0;
     text-align: center;
     left: 0;
     right: 0;
@@ -53,7 +59,6 @@ video::-webkit-media-controls {
 .videoSubtitlesInner {
     max-width: 70%;
     background-color: rgba(0, 0, 0, 0.8);
-    padding: 0.25em;
     margin: auto;
     display: inline-block;
 }

src/plugins/sessionPlayer/plugin.js

@@ -1,6 +1,7 @@
 define(['playbackManager', 'events', 'serverNotifications', 'connectionManager'], function (playbackManager, events, serverNotifications, connectionManager) {
     'use strict';
 
+    serverNotifications = serverNotifications.default || serverNotifications;
     playbackManager = playbackManager.default || playbackManager;
 
     function getActivePlayerId() {

src/scripts/libraryMenu.js

@@ -1,6 +1,7 @@
 define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', 'viewManager', 'libraryBrowser', 'appRouter', 'apphost', 'playbackManager', 'syncPlayManager', 'groupSelectionMenu', 'browser', 'globalize', 'scripts/imagehelper', 'paper-icon-button-light', 'material-icons', 'scrollStyles', 'flexStyles'], function (dom, layoutManager, inputManager, connectionManager, events, viewManager, libraryBrowser, appRouter, appHost, playbackManager, syncPlayManager, groupSelectionMenu, browser, globalize, imageHelper) {
     'use strict';
 
+    viewManager = viewManager.default || viewManager;
     playbackManager = playbackManager.default || playbackManager;
     browser = browser.default || browser;
 
@@ -806,6 +807,8 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
         navDrawerScrollContainer.addEventListener('click', onMainDrawerClick);
         return new Promise(function (resolve, reject) {
             require(['navdrawer'], function (navdrawer) {
+                navdrawer = navdrawer.default || navdrawer;
+
                 navDrawerInstance = new navdrawer(getNavDrawerOptions());
 
                 if (!layoutManager.tv) {

src/scripts/scrollHelper.js

@@ -1,7 +1,6 @@
-define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
+import focusManager from 'focusManager';
-    'use strict';
+import dom from 'dom';
-
+import 'scrollStyles';
-    focusManager = focusManager.default || focusManager;
 
 function getBoundingClientRect(elem) {
     // Support: BlackBerry 5, iOS 3 (original iPhone)
@@ -13,25 +12,25 @@ define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
     }
 }
 
-    function getPosition(scrollContainer, item, horizontal) {
+export function getPosition(scrollContainer, item, horizontal) {
-        var slideeOffset = getBoundingClientRect(scrollContainer);
+    const slideeOffset = getBoundingClientRect(scrollContainer);
-        var itemOffset = getBoundingClientRect(item);
+    const itemOffset = getBoundingClientRect(item);
 
-        var offset = horizontal ? itemOffset.left - slideeOffset.left : itemOffset.top - slideeOffset.top;
+    let offset = horizontal ? itemOffset.left - slideeOffset.left : itemOffset.top - slideeOffset.top;
-        var size = horizontal ? itemOffset.width : itemOffset.height;
+    let size = horizontal ? itemOffset.width : itemOffset.height;
     if (!size && size !== 0) {
         size = item[horizontal ? 'offsetWidth' : 'offsetHeight'];
     }
 
-        var currentStart = horizontal ? scrollContainer.scrollLeft : scrollContainer.scrollTop;
+    const currentStart = horizontal ? scrollContainer.scrollLeft : scrollContainer.scrollTop;
 
     offset += currentStart;
 
-        var frameSize = horizontal ? scrollContainer.offsetWidth : scrollContainer.offsetHeight;
+    const frameSize = horizontal ? scrollContainer.offsetWidth : scrollContainer.offsetHeight;
 
-        var currentEnd = currentStart + frameSize;
+    const currentEnd = currentStart + frameSize;
 
-        var isVisible = offset >= currentStart && (offset + size) <= currentEnd;
+    const isVisible = offset >= currentStart && (offset + size) <= currentEnd;
 
     return {
         start: offset,
@@ -42,8 +41,8 @@ define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
     };
 }
 
-    function toCenter(container, elem, horizontal, skipWhenVisible) {
+export function toCenter(container, elem, horizontal, skipWhenVisible) {
-        var pos = getPosition(container, elem, horizontal);
+    const pos = getPosition(container, elem, horizontal);
 
     if (skipWhenVisible && pos.isVisible) {
         return;
@@ -64,8 +63,8 @@ define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
     }
 }
 
-    function toStart(container, elem, horizontal, skipWhenVisible) {
+export function toStart(container, elem, horizontal, skipWhenVisible) {
-        var pos = getPosition(container, elem, horizontal);
+    const pos = getPosition(container, elem, horizontal);
 
     if (skipWhenVisible && pos.isVisible) {
         return;
@@ -87,7 +86,7 @@ define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
 }
 
 function centerOnFocus(e, scrollSlider, horizontal) {
-        var focused = focusManager.focusableParent(e.target);
+    const focused = focusManager.focusableParent(e.target);
 
     if (focused) {
         toCenter(scrollSlider, focused, horizontal);
@@ -97,13 +96,12 @@ define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
 function centerOnFocusHorizontal(e) {
     centerOnFocus(e, this, true);
 }
+
 function centerOnFocusVertical(e) {
     centerOnFocus(e, this, false);
 }
 
-    return {
+export const centerFocus = {
-        getPosition: getPosition,
-        centerFocus: {
     on: function (element, horizontal) {
         if (horizontal) {
             dom.addEventListener(element, 'focus', centerOnFocusHorizontal, {
@@ -130,8 +128,11 @@ define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
             });
         }
     }
-        },
+};
+
+export default {
+    getPosition: getPosition,
+    centerFocus: centerFocus,
     toCenter: toCenter,
     toStart: toStart
 };
-});

src/scripts/searchtab.js

@@ -1,57 +0,0 @@
-define(['searchFields', 'searchResults', 'events'], function (SearchFields, SearchResults, events) {
-    'use strict';
-
-    SearchFields = SearchFields.default || SearchFields;
-    SearchResults = SearchResults.default || SearchResults;
-
-    function init(instance, tabContent, options) {
-        tabContent.innerHTML = '<div class="padded-left padded-right searchFields"></div><div class="searchResults padded-top" style="padding-top:1.5em;"></div>';
-        instance.searchFields = new SearchFields({
-            element: tabContent.querySelector('.searchFields')
-        });
-        instance.searchResults = new SearchResults({
-            element: tabContent.querySelector('.searchResults'),
-            serverId: ApiClient.serverId(),
-            parentId: options.parentId,
-            collectionType: options.collectionType
-        });
-        events.on(instance.searchFields, 'search', function (e, value) {
-            instance.searchResults.search(value);
-        });
-    }
-
-    function SearchTab(view, tabContent, options) {
-        var self = this;
-        options = options || {};
-        init(this, tabContent, options);
-
-        self.preRender = function () {};
-
-        self.renderTab = function () {
-            var searchFields = this.searchFields;
-
-            if (searchFields) {
-                searchFields.focus();
-            }
-        };
-    }
-
-    SearchTab.prototype.destroy = function () {
-        var searchFields = this.searchFields;
-
-        if (searchFields) {
-            searchFields.destroy();
-        }
-
-        this.searchFields = null;
-        var searchResults = this.searchResults;
-
-        if (searchResults) {
-            searchResults.destroy();
-        }
-
-        this.searchResults = null;
-    };
-
-    return SearchTab;
-});

src/scripts/serverNotifications.js

@@ -1,24 +1,26 @@
-define(['connectionManager', 'playbackManager', 'syncPlayManager', 'events', 'inputManager', 'focusManager', 'appRouter'], function (connectionManager, playbackManager, syncPlayManager, events, inputManager, focusManager, appRouter) {
+import connectionManager from 'connectionManager';
-    'use strict';
+import playbackManager from 'playbackManager';
+import syncPlayManager from 'syncPlayManager';
+import events from 'events';
+import inputManager from 'inputManager';
+import focusManager from 'focusManager';
+import appRouter from 'appRouter';
 
-    playbackManager = playbackManager.default || playbackManager;
+const serverNotifications = {};
-    focusManager = focusManager.default || focusManager;
-
-    var serverNotifications = {};
 
 function notifyApp() {
     inputManager.notify();
 }
 
 function displayMessage(cmd) {
-        var args = cmd.Arguments;
+    const args = cmd.Arguments;
     if (args.TimeoutMs) {
-            require(['toast'], function (toast) {
+        import('toast').then(({default: toast}) => {
             toast({ title: args.Header, text: args.Text });
         });
     } else {
-            require(['alert'], function (alert) {
+        import('alert').then(({default: alert}) => {
-                alert.default({ title: args.Header, text: args.Text });
+            alert({ title: args.Header, text: args.Text });
         });
     }
 }
@@ -147,10 +149,10 @@ define(['connectionManager', 'playbackManager', 'syncPlayManager', 'events', 'in
 }
 
 function onMessageReceived(e, msg) {
-        var apiClient = this;
+    const apiClient = this;
     if (msg.MessageType === 'Play') {
         notifyApp();
-            var serverId = apiClient.serverInfo().Id;
+        const serverId = apiClient.serverInfo().Id;
         if (msg.Data.PlayCommand === 'PlayNext') {
             playbackManager.queueNext({ ids: msg.Data.ItemIds, serverId: serverId });
         } else if (msg.Data.PlayCommand === 'PlayLast') {
@@ -185,11 +187,11 @@ define(['connectionManager', 'playbackManager', 'syncPlayManager', 'events', 'in
             notifyApp();
         }
     } else if (msg.MessageType === 'GeneralCommand') {
-            var cmd = msg.Data;
+        const cmd = msg.Data;
         processGeneralCommand(cmd, apiClient);
     } else if (msg.MessageType === 'UserDataChanged') {
         if (msg.Data.UserId === apiClient.getCurrentUserId()) {
-                for (var i = 0, length = msg.Data.UserDataList.length; i < length; i++) {
+            for (let i = 0, length = msg.Data.UserDataList.length; i < length; i++) {
                 events.trigger(serverNotifications, 'UserDataChanged', [apiClient, msg.Data.UserDataList[i]]);
             }
         }
@@ -210,5 +212,5 @@ define(['connectionManager', 'playbackManager', 'syncPlayManager', 'events', 'in
 events.on(connectionManager, 'apiclientcreated', function (e, newApiClient) {
     bindEvents(newApiClient);
 });
-    return serverNotifications;
+
-});
+export default serverNotifications;

src/scripts/settings/userSettings.js

@@ -15,6 +15,10 @@ function saveServerPreferences(instance) {
     instance.saveTimeout = setTimeout(onSaveTimeout.bind(instance), 50);
 }
 
+const defaultSubtitleAppearanceSettings = {
+    verticalPosition: -3
+};
+
 export class UserSettings {
     constructor() {
     }
@@ -412,7 +416,7 @@ export class UserSettings {
      */
     getSubtitleAppearanceSettings(key) {
         key = key || 'localplayersubtitleappearance3';
-        return JSON.parse(this.get(key, false) || '{}');
+        return Object.assign(defaultSubtitleAppearanceSettings, JSON.parse(this.get(key, false) || '{}'));
     }
 
     /**

src/scripts/shell.js

@@ -1,7 +1,5 @@
-define([], function () {
+// TODO: This seems like a good candidate for deprecation
-    'use strict';
+export default {
-
-    return {
     openUrl: function (url, target) {
         if (window.NativeShell) {
             window.NativeShell.openUrl(url, target);
@@ -20,4 +18,3 @@ define([], function () {
         }
     }
 };
-});

src/scripts/site.js

@@ -813,8 +813,8 @@ function initClient() {
         define('tvguide', [componentsPath + '/guide/guide'], returnFirstDependency);
         define('guide-settings-dialog', [componentsPath + '/guide/guide-settings'], returnFirstDependency);
         define('viewManager', [componentsPath + '/viewManager/viewManager'], function (viewManager) {
-            window.ViewManager = viewManager;
+            window.ViewManager = viewManager.default;
-            viewManager.dispatchPageEvents(true);
+            viewManager.default.dispatchPageEvents(true);
             return viewManager;
         });
         define('slideshow', [componentsPath + '/slideshow/slideshow'], returnFirstDependency);

src/strings/ar.json

@@ -99,9 +99,9 @@
     "DeleteUserConfirmation": "هل انت متاكد من انك تريد حذف هذا المستخدم ؟",
     "DeviceAccessHelp": "هذه الميزة تنطبق حصرياً على الأجهزة التي يمكن التعرف عليها فردياً ولن تمنع المتصفح من الدخول عليها. ترشيح الوصول لأجهزة المستخدم ستمنع المستخدمين من استعمال الأجهزة الجديدة إلى أن يتم اعتمادهم من هنا.",
     "DrmChannelsNotImported": "القنوات المجهزة بإدارة الحقوق الرقمية DRM لن تورّد.",
-    "EasyPasswordHelp": "الرمز الشخصي الميسرالخاص بك يمكنك من الاتصال إلى خادم مكتبتك، عبر تطبيقات أمبي على الأجهزة أو الدخول على حسابك في الشبكة الداخلية.",
+    "EasyPasswordHelp": "الرمز pin الميسر الخاص بك يستخدم للوصول بدون اتصل عبر التطبيقات المدعومة أو الدخول على حسابك في الشبكة الداخلية.",
     "EnablePhotos": "عرض الصور",
-    "EnablePhotosHelp": "سيتم اكتشاف الصور وعرضها مع ملفات الوسائط الأخرى",
+    "EnablePhotosHelp": "سيتم اكتشاف الصور وعرضها مع ملفات الوسائط الأخرى.",
     "ErrorAddingListingsToSchedulesDirect": "كان هناك خطأ في إضافة الاصطفاف لخدمة \"Schedules Direct\" الخاصة بك. خدمة \"Schedules Direct\" لا تسمح إلا بعدد محدود من الاصطفافات لكل حساب. قد تحتاج إلى تسجيل الدخول إلى موقع \"Schedules Direct\" لإزالة الاصطفافات الأخرى من حسابك قبل المتابعة.",
     "ErrorAddingMediaPathToVirtualFolder": "كان هناك خطأ في إضافة مسار الوسائط. الرجاء التأكد من صحة المسار وأن خادم أمبي لديه صلاحية الوصول إلى الموقع.",
     "ErrorAddingTunerDevice": "كان هناك خطأ في إضافة جهاز المولف. الرجاء التأكد من صلاحية الوصول إليه ثم عاود المحاولة.",
@@ -111,7 +111,7 @@
     "ErrorPleaseSelectLineup": "الرجاء اختيار اصطفاف ثم المحاولة مرة أخرى. إن لم تتوفر أية اصطفافات، فالرجاء التأكد من اسم المستخدم وكلمة المرور الخاصة بك، وتأكد من صحة رمزك البريدي.",
     "ErrorSavingTvProvider": "كان هناك خطأ في حفظ مزود التلفزة. الرجاء التأكد من صلاحية الوصول إليه ثم عاود المحاولة.",
     "ExitFullscreen": "الخروج من الشاشة الكاملة",
-    "ExtractChapterImagesHelp": "استخلاص صور الأبواب سيسمح لتطبيقات أمبي أن تظهر لك قوائم تصويرية لتبويبات الأفلام. هذه العملية قد تكون بطيئة، وتستغل قدرة المعالج بشكل ملحوظ، وقد تحتاج إلى حيازة بضعة غيغابايتات من مساحة التخزين بشكل مؤقت. هذه المهمة تعمل خلال عملية استكشاف المقاطع المرئية، كما يمكن أن تحدد لتكون مهمة ليلية مجدولة. يمكنك جدولة العملية من قسم جدولة المهام. لا ينصح بتشغيل هذه المهمة خلال ساعات الذروة من دخول المستخدمين.",
+    "ExtractChapterImagesHelp": "استخلاص صور الفصول سيسمح للتطبيقات أن تظهر لك قوائم تصويرية لتبويبات الأفلام. هذه العملية قد تكون بطيئة، وتستغل موارد الجهاز بشكل ملحوظ، وقد تحتاج إلى حيازة بضعة غيغابايتات من مساحة التخزين بشكل مؤقت. هذه المهمة تعمل خلال عملية استكشاف المقاطع المرئية، كما يمكن أن تحدد لتكون مهمة ليلية مجدولة. يمكنك جدولة العملية من قسم جدولة المهام. لا ينصح بتشغيل هذه المهمة خلال ساعات الذروة من دخول المستخدمين.",
     "FFmpegSavePathNotFound": "لم نستطع تحديد موقع ffmpeg باستخدام المسار الذي أدخلته. سوف نحتاج تطبيق FFprobe أيضاً ويجب أن يتواجد في نفس المكان. إن هذه الأجزاء تكون بالعادة محزومة معاً في نفس ملف الإنزال. الرجاء التأكد من المسار المدخل والمحاولة مرة أخرى.",
     "FastForward": "التقديم السريع",
     "FileNotFound": "الملف غير موجود.",
@@ -129,7 +129,7 @@
     "GuideProviderSelectListings": "إختر المبوبات",
     "H264CrfHelp": "معامل المعدل الثابت CRF هو الجودة الافتراضية لإعدادات مشفر x264. بإمكانك إعطاء قيمة تتراوح بين 0 و 51، وكلما قلت القيمة فسينتج عن ذلك جودة أفضل (على حساب حجم تخزين أعلى). القيم المعقول تتراوح بين 18 و 28. الافتراضي لـ x264  هي 23، لذا فبإمكانك استخدام هذه القيمة كنقطة بداية.",
     "EncoderPresetHelp": "اختر قيمة أعلى لتحسين السرة والأداء وقيمة أقل لتحسين الجودة.",
-    "HardwareAccelerationWarning": "تمكين التسريع بعتاد الحاسوب قد يتسبب في عدم استقرار بعض أنواع الأنظمة. تأكد من أن نظام التشغيل الخاص بك محدث إلى آخر نسخة وأن سواقات الفيديو محدثة أيضاً. إذا واجهت أية صعوبات في تسغيل الفيديو بعد تمكين هذه الخاصية، فعليك إرجاع الإعداد إلى وضعية آلي.",
+    "HardwareAccelerationWarning": "تمكين التسريع بعتاد الحاسوب قد يتسبب في عدم استقرار بعض أنواع الأنظمة. تأكد من أن نظام التشغيل الخاص بك محدث إلى آخر نسخة وأن سواقات الفيديو محدثة أيضاً. إذا واجهت أية صعوبات في تسغيل الفيديو بعد تمكين هذه الخاصية، فعليك إرجاع الإعداد إلى وضعية بلا None.",
     "HeaderAccessSchedule": "جدول الدخولات",
     "HeaderAccessScheduleHelp": "إنشئ جدول دخولات لكي تتمكن من تحديد ساعات للدخول.",
     "HeaderActiveDevices": "الأجهزة المفعّلة",
@@ -145,7 +145,7 @@
     "HeaderAllowMediaDeletionFrom": "السماح بحذف الوسائط من قبل",
     "HeaderApiKey": "مفتاح API",
     "HeaderApiKeys": "مفاتيح API",
-    "HeaderApiKeysHelp": "التطبيقات الخارجية تحتاج أن تمتلك مفتاح api لكي تتصل بخادم أمبي. هذه المفاتيح تُصدر عن طريق تسجيل الدخول بحساب أمبي، أو عن طريق منح التطبيق مفتاحاً أصدر يدوياً.",
+    "HeaderApiKeysHelp": "التطبيقات الخارجية تحتاج أن تمتلك مفتاح api لكي تتصل بالخادم. هذه المفاتيح تُصدر عن طريق تسجيل الدخول بمستخدم عادي، أو عن طريق منح التطبيق مفتاحاً أصدر يدوياً.",
     "HeaderApp": "التطبيق",
     "HeaderAudioSettings": "إعدادات الصوت",
     "HeaderBooks": "الكتب",
@@ -232,7 +232,7 @@
     "HeaderPreferredMetadataLanguage": "اللغة المفضلة لواصفات البيانات",
     "HeaderProfile": "الحساب",
     "HeaderProfileInformation": "معلومات العريضة",
-    "HeaderProfileServerSettingsHelp": "هذه القيم ستتحكم في كيفية تقديم شكل خادم أمبي في الجهاز",
+    "HeaderProfileServerSettingsHelp": "هذه القيم ستتحكم في كيفية تقديم شكل الخادم في للعملاء.",
     "HeaderRecentlyPlayed": "تم تشغيله مؤخراً",
     "HeaderRecordingPostProcessing": "تطبيق ما-بعد-المعالجة للتسجيل",
     "HeaderRemoteControl": "التحكم عن بعد",
@@ -254,7 +254,7 @@
     "HeaderSelectServerCachePath": "إختر مسار كاشة الخادم",
     "HeaderSelectServerCachePathHelp": "تصفح أو أدخل المسار الذي ترغب أن يُستخدم كاشة لملفات الخادم. يجب أن يكون هذا المجلد قابل للكتابة فيه.",
     "HeaderSelectTranscodingPath": "إختر المسار المؤقت للتشفير البيني",
-    "HeaderSelectTranscodingPathHelp": "تصفح أو أدخل  المسار الذي ترغب أن يُستخدم للملفات المؤقتة للتشفير البيني. يجب أن يكون هذا المجلد قابل للكتابة فيه.",
+    "HeaderSelectTranscodingPathHelp": "تصفح أو أدخل  المسار الذي ترغب أن يُستخدم لملفات التشفير البيني. يجب أن يكون هذا المجلد قابل للكتابة فيه.",
     "HeaderSendMessage": "أرسل رسالة",
     "HeaderSeries": "المسلسلات",
     "HeaderServerSettings": "إعدادات الخادم",
@@ -291,17 +291,17 @@
     "HeaderXmlSettings": "إعدادات xml",
     "HeaderYears": "السنوات",
     "HeadersFolders": "مجلدات",
-    "ImportFavoriteChannelsHelp": "عند التفعيل، فقط القنوات التي علّمت في المفضلة على هذا المولف ستورد إلى النظام.",
+    "ImportFavoriteChannelsHelp": "فقط القنوات التي علّمت في المفضلة على جهاز المولف ستورد.",
-    "ImportMissingEpisodesHelp": "عند التمكين، المعلومات الناقصة للحلقات ستورّد إلى قاعدة بيانات أمبي وستعرض داخل المواسم والمسلسلات. قد تتسبب هذه بأوقات أطول بكثير عند تمشيط المكنبات.",
+    "ImportMissingEpisodesHelp": "المعلومات الناقصة للحلقات ستورّد إلى قاعدة بياناتك وستعرض داخل المواسم والمسلسلات. قد تتسبب هذه بأوقات أطول بكثير عند تمشيط المكتبات.",
     "LabelAbortedByServerShutdown": "(تم إهماله بسبب عملية إغلاق الخادم)",
     "LabelAccessDay": "يوم الأسبوع:",
-    "LabelAccessEnd": "تاريخ النهاية",
+    "LabelAccessEnd": "وقت النهاية:",
-    "LabelAccessStart": "تاريخ البداية",
+    "LabelAccessStart": "وقت البداية:",
     "LabelAirDays": "أيام البث:",
     "LabelAirTime": "وقت البث:",
-    "LabelAlbum": "الألبوم",
+    "LabelAlbum": "الألبوم:",
     "LabelAlbumArtHelp": "PN المستخدمة في رسومات الألبوم، داخل سمة dlna:profileID في upnp:albumArtURI. بعض الأجهزة تحتاج قيمة محددة، مهما كان حجم الصورة.",
-    "LabelAlbumArtMaxHeight": "الارتفاع الأقصى لرسومات الألبوم",
+    "LabelAlbumArtMaxHeight": "الارتفاع الأقصى لرسومات الألبوم:",
     "LabelAlbumArtMaxHeightHelp": "الدقة القصوى لرسومات الألبوم المظهّرة عبر سمة upnp:albumArtURI.",
     "LabelAlbumArtMaxWidth": "العرض الأقصى لرسوم الألبوم:",
     "LabelAlbumArtMaxWidthHelp": "الدقة القصوى لرسومات الألبوم المظهّرة عبر سمة upnp:albumArtURI.",
@@ -310,42 +310,42 @@
     "LabelAll": "الجميع",
     "LabelAllowHWTranscoding": "السماح بالتشفير البيني بعتاد الحاسب",
     "LabelAppName": "اسم التطبيق",
-    "LabelAppNameExample": "مثال: Sickbeard، NzbDrone",
+    "LabelAppNameExample": "مثال: Sickbeard، Sonarr",
     "LabelArtists": "الفنانون:",
-    "LabelArtistsHelp": "فصل الاستعمالات المتعددة ;",
+    "LabelArtistsHelp": "افصل بين الفنانين ب ; فاصلة منقوطة.",
     "LabelAudioLanguagePreference": "اللغة المفضلة للصوت:",
     "LabelBindToLocalNetworkAddress": "إربطه إلى عنوان شبكة محلي:",
-    "LabelBindToLocalNetworkAddressHelp": "هذا خياري. امتطي عنوان الآي بي المحلي لربطه بخادم http. إذا ترك فارغاً، فإن الخادم سيربطه بجميع العناوين المتاحة. تغيير هذه القيمة يتطلب إعادة تشغيل خادم أمبي.",
+    "LabelBindToLocalNetworkAddressHelp": "تجاوز عنوان الآي بي المحلي لربطه بخادم http. إذا ترك فارغاً، فإن الخادم سيربطه بجميع العناوين المتاحة. تغيير هذه القيمة يتطلب إعادة تشغيل خادم جيلليفن.",
-    "LabelBlastMessageInterval": "فترات بث رسالة قيد التشغيل (بالثواني)",
+    "LabelBlastMessageInterval": "فترات بث رسالة قيد التشغيل",
-    "LabelBlastMessageIntervalHelp": "يحدد الفترة بالثواني بين يث رسائل قيد التشغيل",
+    "LabelBlastMessageIntervalHelp": "يحدد الفترة بالثواني بين بث رسائل قيد التشغيل.",
-    "LabelCache": "ذاكرة الكاشة",
+    "LabelCache": "مَخبأ (كاش):",
-    "LabelCachePath": "مسار ذاكرة الكاشة:",
+    "LabelCachePath": "مسار ذاكرة الكاش:",
-    "LabelCachePathHelp": "حدد موقع مخصص لملفات كاشة الخادم، مثل الصور وغيرها. أترك هذه الخانة فارغة لاستعمال القيمة التلقائية.",
+    "LabelCachePathHelp": "حدد موقع مخصص لملفات الخادم المؤقتة، مثل الصور وغيرها. أترك هذه الخانة فارغة لاستعمال القيمة الافتراضية.",
     "LabelCancelled": "تم الإلغاء",
-    "LabelCollection": "المجموعة",
+    "LabelCollection": "المجموعة:",
     "LabelCommunityRating": "تقييم المجتمع:",
-    "LabelContentType": "نوع المحتوى",
+    "LabelContentType": "نوع المحتوى:",
     "LabelCountry": "البلد:",
     "LabelCurrentPassword": "كلمة السر الحالية:",
-    "LabelCustomCertificatePath": "مسار شهادة ssl مخصص:",
+    "LabelCustomCertificatePath": "مسار شهادة SSL المخصص:",
     "LabelCustomCertificatePathHelp": "مسار ملف PKCS # 12 يحتوي على شهادة ومفتاح خاص لتمكين دعم TLS على مجال مخصص.",
-    "LabelCustomCss": "تنيسق CSS مخصوص:",
+    "LabelCustomCss": "تنيسق CSS مخصص:",
-    "LabelCustomCssHelp": "طبق تنسيق css مخصوصة لواجهة الويب.",
+    "LabelCustomCssHelp": "طبق تنسيقك css المخصص لواجهة الويب.",
     "LabelCustomDeviceDisplayName": "اسم العرض:",
-    "LabelCustomDeviceDisplayNameHelp": "أذكر اسم عرض مخصوص أو أتركه فارغاً لاستخدام",
+    "LabelCustomDeviceDisplayNameHelp": "أذكر اسم عرض مخصوص أو أتركه فارغاً لاستخدام الاسم المبلغ من الجهاز.",
     "LabelDateAddedBehavior": "كيف يتصرف المحتوى الجديد  نحو \"تاريخ الإضافة\" الخاص به:",
-    "LabelDateAddedBehaviorHelp": "إذا استعرضت قيمة واصفات البيانا فإنها سوف تستخدم قبل أن تستخدم أي من هذه الخيارات.",
+    "LabelDateAddedBehaviorHelp": "إذا اخذت واصفات البيانات قيمة، فإنها سوف تستخدم قبل أن تستخدم أي من هذه الخيارات.",
     "LabelDay": "اليوم:",
     "LabelDeathDate": "تاريخ الوفاة:",
-    "LabelDefaultUser": "المستخدم الافتراضي",
+    "LabelDefaultUser": "المستخدم الافتراضي:",
     "LabelDefaultUserHelp": "لتحديد مكتبة المستخدم التي تظهر على الأجهزة المتصلة. بإمكان الامتطاء على هذه القيمة لكل جهاز عن طريق عرائض الأجهزة.",
     "LabelDeviceDescription": "وصف الجهاز",
-    "LabelDidlMode": "طور didl:",
+    "LabelDidlMode": "طور DIDL:",
     "LabelDisplayMissingEpisodesWithinSeasons": "أظهر الحلقات المفقودة في مجلدات المواسم",
     "LabelDisplayName": "الاسم المعروض:",
     "LabelDisplaySpecialsWithinSeasons": "أظهر الحلقات الخاصة في المواسم التي بثت فيها",
     "LabelDownMixAudioScale": "تعزيز الصوت عند تقليل توزيع قنوات الصوت:",
-    "LabelDownMixAudioScaleHelp": "تعزيز الصوت عند تقليل توزيع قنوات الصوت. حدد القيمة بـ 1 للمحافظة على القيمة الأصلية للصوت.",
+    "LabelDownMixAudioScaleHelp": "تعزيز الصوت عند تقليل توزيع قنوات الصوت. حدد القيمة ب 1 للمحافظة على القيمة الأصلية للصوت.",
     "LabelDownloadLanguages": "إنزال اللغة:",
     "LabelDynamicExternalId": "معرفة {0}:",
     "LabelEasyPinCode": "الرمز الشخصي الميسر:",
@@ -354,8 +354,8 @@
     "LabelEnableAutomaticPortMap": "فعل الخاصية الآلية في التوفيق بين المنافذ",
     "LabelEnableAutomaticPortMapHelp": "حاول التوفيق بين المنفذ العالمي والمنفذ المحلي آلياً باستخدام آلية UPnP. هذه الخاصية قد لا تعمل مع بعض أنواع الراوترات.",
     "LabelEnableBlastAliveMessages": "بث رسائل قيد التشغيل",
-    "LabelEnableBlastAliveMessagesHelp": "فعل هذه الخاصية إذا كان الخادم لا يكتشف بكفاءة من قبل أجهزة UPnP الأخرى على شبكتك",
+    "LabelEnableBlastAliveMessagesHelp": "فعل هذه الخاصية إذا كان الخادم لا يكتشف بكفاءة من قبل أجهزة UPnP الأخرى على شبكتك.",
-    "LabelEnableDlnaClientDiscoveryInterval": "فترات استكشاف العملاء (بالثواني)",
+    "LabelEnableDlnaClientDiscoveryInterval": "فترات استكشاف العملاء",
     "LabelEnableDlnaClientDiscoveryIntervalHelp": "يحدد الفترة بالثواني بين عمليات بحث SSDP التي يقوم بها أمبي.",
     "LabelEnableDlnaDebugLogging": "تفعيل خاصية كشوفات أخطاء DLNA",
     "LabelEnableDlnaDebugLoggingHelp": "هذه ستنشئ سجلات كشفية ضخمة ولا ينبغي تفعيلها إلا عند الحاجة إليها بغرض استكشاف الأخطاء وحصرها.",
@@ -930,7 +930,7 @@
     "Backdrops": "خلفيات متغيرة للصفحة",
     "Backdrop": "خلفية متغيرة للصفحة",
     "Auto": "تلقائي",
-    "AuthProviderHelp": "حدد مقدم المصادقات ليتم استخدامه لمصادقة كلمة مرور هذا المستخدم.",
+    "AuthProviderHelp": "اختار مقدم المصادقة ليتم استخدامه لمصادقة كلمة مرور هذا المستخدم.",
     "AroundTime": "حول",
     "AttributeNew": "جديد",
     "AspectRatio": "نسبة العرض الى الارتفاع",
@@ -1038,7 +1038,7 @@
     "Director": "المخرج",
     "DirectPlaying": "بث بدون تحويل الصيغة",
     "DirectStreaming": "البث المباشر",
-    "DirectStreamHelp2": "البث المباشر للملف يستخدم طاقة معالجة قليلة جدًا دون أي خسارة في جودة الفيديو.",
+    "DirectStreamHelp2": "البث المباشر للملف يستخدم قوة معالجة قليلة جدًا دون أي خسارة في جودة الفيديو.",
     "DirectStreamHelp1": "الوسائط متوافقة مع الجهاز فيما يتعلق بالدقة ونوع الوسائط (H.264 ، AC3 ، إلخ) ، ولكنها في حاوية ملفات غير متوافقة (mkv ، avi ، wmv ، إلخ). سيتم إعادة حزم الفيديو في الوقت الحقيقي قبل بثه إلى الجهاز.",
     "DetectingDevices": "يتم الكشف عن الأجهزة",
     "Desktop": "سطح المكتب",
@@ -1139,5 +1139,51 @@
     "Dislike": "لم يعجبنى",
     "ButtonSyncPlay": "SyncPlay",
     "ExtraLarge": "كبير جدا",
-    "EnableNextVideoInfoOverlayHelp": "في نهاية الفيديو, عرض معلومات عن الفيديو القادم في قائمة التشغيل."
+    "EnableNextVideoInfoOverlayHelp": "في نهاية الفيديو, عرض معلومات عن الفيديو القادم في قائمة التشغيل.",
+    "LabelDroppedFrames": "الاطارات الساقطة:",
+    "LabelDropImageHere": "اسقط صورة هنا، او ضغط تصفح.",
+    "LabelDisplayOrder": "ترتيب المعروض:",
+    "LabelDisplayMode": "وضع المعروض:",
+    "LabelDisplayLanguageHelp": "ترجمة جيلليفين هو مشروع مستمر.",
+    "LabelDisplayLanguage": "لغة العرض:",
+    "LabelDiscNumber": "رقم القرص:",
+    "LabelDeinterlaceMethod": "طريقة تقليل التشابك:",
+    "LabelDefaultScreen": "الشاشة الافتراضية:",
+    "LabelDateTimeLocale": "وقت و تاريخ محلي:",
+    "LabelDateAdded": "تاريخ الاضافة:",
+    "LabelCustomRating": "تقييم مخصص:",
+    "LabelCriticRating": "تقييم النقاد:",
+    "LabelCorruptedFrames": "الإطارات التالفة:",
+    "LabelChannels": "القنوات:",
+    "LabelCertificatePasswordHelp": "اذا تطلبت شهادتك الامنية كلمة مرور، من فضلك ادخلها هنا.",
+    "LabelCertificatePassword": "كلمة مرور الشهادة الامنية:",
+    "LabelBurnSubtitles": "الترجمات المحروقة:",
+    "LabelBlockContentWithTags": "احجب العناصر بالعلامات:",
+    "LabelBitrate": "معدل البت:",
+    "LabelBirthYear": "عام الميلاد:",
+    "LabelBirthDate": "تاريخ الميلاد:",
+    "LabelAutomaticallyRefreshInternetMetadataEvery": "حدث وصف البيانات تلقائيا من الانترنت:",
+    "LabelAuthProvider": "مقدم التصديق:",
+    "LabelAudioSampleRate": "سرعة معينة الصوت:",
+    "LabelAudioCodec": "ترميز الصوت:",
+    "LabelAudioChannels": "قنوات الصوت:",
+    "LabelAudioBitrate": "معدل بث الصوت:",
+    "LabelAudioBitDepth": "عمق بث الصوت:",
+    "LabelAudio": "الصوت",
+    "LabelAllowedRemoteAddressesMode": "وضع مرشح عنوان المضيف IP البعيد:",
+    "LabelAllowedRemoteAddresses": "مرشح عنوان المضيف IP البعيد:",
+    "LabelAirsBeforeSeason": "عروض بث قبل الموسم:",
+    "LabelAirsBeforeEpisode": "عروض بث قبل الحلقة:",
+    "LabelAirsAfterSeason": "عروض بث بعد الموسم:",
+    "Label3DFormat": "صيغة ثلاثية الابعاد:",
+    "Kids": "اطفال",
+    "Items": "عناصر",
+    "ItemCount": "{0} عنصر",
+    "InstantMix": "خلط فوري",
+    "HeaderSyncPlayEnabled": "تزامن اللعب ممكَّن",
+    "HeaderSyncPlaySelectGroup": "انضم لمجموعة",
+    "EnableDetailsBannerHelp": "اظهر صوره اللافته اعلى عنصر تفاصيل الصفحة.",
+    "EnableDetailsBanner": "لافتة التفاصيل",
+    "EnableDecodingColorDepth10Vp9": "تمكين ترميز ال10 بت عبر العتاد الصلب من اجل VP9",
+    "EnableDecodingColorDepth10Hevc": "تمكين ترميز ال10 بت عبر العتاد الصلب من اجل HEVC"
 }

src/strings/en-us.json

@@ -1542,5 +1542,8 @@
     "ButtonCast": "Cast",
     "ButtonPlayer": "Player",
     "StopPlayback": "Stop playback",
-    "ClearQueue": "Clear queue"
+    "ClearQueue": "Clear queue",
+    "LabelSubtitleVerticalPosition": "Vertical position:",
+    "SubtitleVerticalPositionHelp": "Line number where text appears. Positive numbers indicate top down. Negative numbers indicate bottom up.",
+    "Preview": "Preview"
 }

src/strings/he.json

@@ -471,7 +471,7 @@
     "TabTrailers": "טריילרים",
     "TabTranscoding": "קידוד",
     "TabUpcoming": "בקרוב",
-    "Tags": "תגים",
+    "Tags": "מילות מפתח",
     "TellUsAboutYourself": "ספר לנו על עצמך",
     "ThisWizardWillGuideYou": "אשף זה יעזור לך בהתליך ההתקנה.",
     "Thursday": "חמישי",
@@ -588,7 +588,7 @@
     "MessageConfirmRestart": "‫האם אתה בטוח שברצונך לאתחל את שרת ה-Jellyfin‏?",
     "HeaderThisUserIsCurrentlyDisabled": "משתמש זה אינו פעיל כרגע",
     "HeaderTaskTriggers": "טריגרים של המשימה",
-    "HeaderTags": "תגיות",
+    "HeaderTags": "מילות מפתח",
     "HeaderStopRecording": "עצור הקלטה",
     "HeaderSortOrder": "סדר מיון",
     "HeaderSortBy": "מיין לפי",
@@ -867,5 +867,7 @@
     "OptionEveryday": "כל יום",
     "OptionEnableExternalContentInSuggestions": "הפעל תוכן חיצוני בהמלצות",
     "OptionEnableAccessToAllLibraries": "אפשר גישה לכל הספריות",
-    "OptionEnableAccessToAllChannels": "אפשר גישה לכל הערוצים"
+    "OptionEnableAccessToAllChannels": "אפשר גישה לכל הערוצים",
+    "HeaderSyncPlaySelectGroup": "הצטרף לקבוצה",
+    "TabUsers": "משתמשים"
 }

src/strings/ru.json

@@ -1542,5 +1542,8 @@
     "ButtonPlayer": "Проигрыватель",
     "PreviousTrack": "Перейти к предыдущему",
     "NextTrack": "Перейти к следующему",
-    "LabelUnstable": "Нестабильная"
+    "LabelUnstable": "Нестабильная",
+    "LabelSubtitleVerticalPosition": "Вертикальная позиция:",
+    "SubtitleVerticalPositionHelp": "Номер строки, где появляется текст. Положительные числа означают сверху вниз. Отрицательные числа означают снизу вверх.",
+    "Preview": "Предварительный просмотр"
 }

yarn.lock

@@ -3020,10 +3020,10 @@ css-has-pseudo@^0.10.0:
     postcss "^7.0.6"
     postcss-selector-parser "^5.0.0-rc.4"
 
-css-loader@^4.2.0:
+css-loader@^4.2.1:
-  version "4.2.0"
+  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-4.2.0.tgz#b57efb92ac8f0cd85bf92d89df9634ef1f51b8bf"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-4.2.1.tgz#9f48fd7eae1219d629a3f085ba9a9102ca1141a7"
-  integrity sha512-ko7a9b0iFpWtk9eSI/C8IICvZeGtYnjxYjw45rJprokXj/+kBd/siX4vAIBq9Uij8Jubc4jL1EvSnTjCEwaHSw==
+  integrity sha512-MoqmF1if7Z0pZIEXA4ZF9PgtCXxWbfzfJM+3p+OYfhcrwcqhaCRb74DSnfzRl7e024xEiCRn5hCvfUbTf2sgFA==
   dependencies:
     camelcase "^6.0.0"
     cssesc "^3.0.0"