merge branch master into standalone

.eslintrc.js

@@ -44,12 +44,12 @@ module.exports = {
         'no-restricted-globals': ['error'].concat(restrictedGlobals),
         'no-trailing-spaces': ['error'],
         '@babel/no-unused-expressions': ['error', { 'allowShortCircuit': true, 'allowTernary': true, 'allowTaggedTemplates': true }],
-        //'no-unused-vars': ['error', { 'vars': 'all', 'args': 'none', 'ignoreRestSiblings': true }],
         'one-var': ['error', 'never'],
         'padded-blocks': ['error', 'never'],
-        //'prefer-const': ['error', {'destructuring': 'all'}],
+        'prefer-const': ['error', {'destructuring': 'all'}],
         'quotes': ['error', 'single', { 'avoidEscape': true, 'allowTemplateLiterals': false }],
         '@babel/semi': ['error'],
+        'no-var': ['error'],
         'space-before-blocks': ['error'],
         'space-infix-ops': 'error',
         'yoda': 'error'

.gitignore

@@ -3,6 +3,9 @@ dist
 web
 node_modules
 
+# config
+config.json
+
 # ide
 .idea
 .vscode

CONTRIBUTORS.md

@@ -34,11 +34,13 @@
  - [Ryan Hartzell](https://github.com/ryan-hartzell)
  - [Thibault Nocchi](https://github.com/ThibaultNocchi)
  - [MrTimscampi](https://github.com/MrTimscampi)
+ - [ConfusedPolarBear](https://github.com/ConfusedPolarBear)
  - [Sarab Singh](https://github.com/sarab97)
  - [GuilhermeHideki](https://github.com/GuilhermeHideki)
  - [Andrei Oanca](https://github.com/OancaAndrei)
  - [Cromefire_](https://github.com/cromefire)
  - [Orry Verducci](https://github.com/orryverducci)
+ - [Camc314](https://github.com/camc314)
 
 # Emby Contributors
 

fedora/jellyfin-web.spec

@@ -11,11 +11,12 @@ Source0:        jellyfin-web-%{version}.tar.gz
 
 %if 0%{?centos}
 BuildRequires:  yarn
-# sadly the yarn RPM at https://dl.yarnpkg.com/rpm/ uses git but doesn't Requires: it
-BuildRequires: git
 %else
 BuildRequires:  nodejs-yarn
 %endif
+# sadly the yarn RPM at https://dl.yarnpkg.com/rpm/ uses git but doesn't Requires: it
+# ditto for Fedora's yarn RPM
+BuildRequires: git
 BuildArch:		noarch
 
 # Disable Automatic Dependency Processing

package.json

@@ -5,28 +5,28 @@
   "repository": "https://github.com/jellyfin/jellyfin-web",
   "license": "GPL-2.0-or-later",
   "devDependencies": {
-    "@babel/core": "^7.11.6",
+    "@babel/core": "^7.12.3",
-    "@babel/eslint-parser": "^7.11.5",
+    "@babel/eslint-parser": "^7.12.1",
-    "@babel/eslint-plugin": "^7.11.5",
+    "@babel/eslint-plugin": "^7.12.1",
     "@babel/plugin-proposal-class-properties": "^7.10.1",
-    "@babel/plugin-proposal-private-methods": "^7.10.1",
+    "@babel/plugin-proposal-private-methods": "^7.12.1",
-    "@babel/plugin-transform-modules-amd": "^7.10.5",
+    "@babel/plugin-transform-modules-amd": "^7.12.1",
-    "@babel/polyfill": "^7.11.5",
+    "@babel/polyfill": "^7.12.1",
-    "@babel/preset-env": "^7.11.5",
+    "@babel/preset-env": "^7.12.1",
     "autoprefixer": "^9.8.6",
     "babel-loader": "^8.0.6",
-    "browser-sync": "^2.26.12",
+    "browser-sync": "^2.26.13",
-    "confusing-browser-globals": "^1.0.9",
+    "confusing-browser-globals": "^1.0.10",
     "copy-webpack-plugin": "^5.1.1",
-    "css-loader": "^4.2.2",
+    "css-loader": "^5.0.0",
     "cssnano": "^4.1.10",
-    "del": "^5.1.0",
+    "del": "^6.0.0",
-    "eslint": "^7.8.1",
+    "eslint": "^7.12.0",
     "eslint-plugin-compat": "^3.5.1",
     "eslint-plugin-eslint-comments": "^3.2.0",
-    "eslint-plugin-import": "^2.21.2",
+    "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-promise": "^4.2.1",
-    "file-loader": "^6.1.0",
+    "file-loader": "^6.1.1",
     "gulp": "^4.0.2",
     "gulp-babel": "^8.0.0",
     "gulp-cli": "^2.3.0",
@@ -40,17 +40,17 @@
     "gulp-sass": "^4.0.2",
     "gulp-sourcemaps": "^2.6.5",
     "gulp-terser": "^1.4.0",
-    "html-webpack-plugin": "^4.4.1",
+    "html-webpack-plugin": "^4.5.0",
     "lazypipe": "^1.0.2",
     "node-sass": "^4.13.1",
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.7.0",
-    "style-loader": "^1.1.3",
+    "style-loader": "^2.0.0",
-    "stylelint": "^13.7.0",
+    "stylelint": "^13.7.2",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-no-browser-hacks": "^1.2.1",
     "stylelint-order": "^4.1.0",
-    "webpack": "^4.44.1",
+    "webpack": "^5.2.0",
     "webpack-merge": "^4.2.2",
     "webpack-stream": "^6.1.0",
     "worker-plugin": "^5.0.0"
@@ -64,11 +64,11 @@
     "epubjs": "^0.3.85",
     "fast-text-encoding": "^1.0.3",
     "flv.js": "^1.5.0",
-    "headroom.js": "^0.11.0",
+    "headroom.js": "^0.12.0",
-    "hls.js": "^0.14.11",
+    "hls.js": "^0.14.16",
-    "howler": "^2.2.0",
+    "howler": "^2.2.1",
     "intersection-observer": "^0.11.0",
-    "jellyfin-apiclient": "^1.4.1",
+    "jellyfin-apiclient": "^1.4.2",
     "jellyfin-noto": "https://github.com/jellyfin/jellyfin-noto",
     "jquery": "^3.5.1",
     "jstree": "^3.3.10",
@@ -77,11 +77,11 @@
     "material-design-icons-iconfont": "^6.1.0",
     "native-promise-only": "^0.8.0-a",
     "page": "^1.11.6",
-    "query-string": "^6.13.1",
+    "query-string": "^6.13.6",
     "resize-observer-polyfill": "^1.5.1",
     "screenfull": "^5.0.2",
-    "sortablejs": "^1.10.2",
+    "sortablejs": "^1.12.0",
-    "swiper": "^6.2.0",
+    "swiper": "^6.3.4",
     "webcomponents.js": "^0.7.24",
     "whatwg-fetch": "^3.4.1"
   },
@@ -166,6 +166,8 @@
           "src/components/playmenu.js",
           "src/components/pluginManager.js",
           "src/components/prompt/prompt.js",
+          "src/components/qualityOptions.js",
+          "src/components/quickConnectSettings/quickConnectSettings.js",
           "src/components/recordingcreator/recordingbutton.js",
           "src/components/recordingcreator/recordingcreator.js",
           "src/components/recordingcreator/seriesrecordingeditor.js",
@@ -173,7 +175,6 @@
           "src/components/refreshdialog/refreshdialog.js",
           "src/components/recordingcreator/recordingeditor.js",
           "src/components/recordingcreator/recordingfields.js",
-          "src/components/qualityOptions.js",
           "src/components/remotecontrol/remotecontrol.js",
           "src/components/sanatizefilename.js",
           "src/components/scrollManager.js",
@@ -213,7 +214,7 @@
           "src/components/castSenderApi.js",
           "src/controllers/session/addServer/index.js",
           "src/controllers/session/forgotPassword/index.js",
-          "src/controllers/session/redeemPassword/index.js",
+          "src/controllers/session/resetPassword/index.js",
           "src/controllers/session/login/index.js",
           "src/controllers/session/selectServer/index.js",
           "src/controllers/dashboard/apikeys.js",
@@ -244,6 +245,7 @@
           "src/controllers/dashboard/plugins/installed/index.js",
           "src/controllers/dashboard/plugins/available/index.js",
           "src/controllers/dashboard/plugins/repositories/index.js",
+          "src/controllers/dashboard/quickConnect.js",
           "src/controllers/dashboard/scheduledtasks/scheduledtask.js",
           "src/controllers/dashboard/scheduledtasks/scheduledtasks.js",
           "src/controllers/dashboard/serveractivity.js",
@@ -292,6 +294,7 @@
           "src/controllers/user/menu/index.js",
           "src/controllers/user/playback/index.js",
           "src/controllers/user/profile/index.js",
+          "src/controllers/user/quickConnect/index.js",
           "src/controllers/user/subtitles/index.js",
           "src/controllers/wizard/finish/index.js",
           "src/controllers/wizard/remote/index.js",
@@ -329,6 +332,7 @@
           "src/plugins/youtubePlayer/plugin.js",
           "src/scripts/alphanumericshortcuts.js",
           "src/scripts/autoBackdrops.js",
+          "src/scripts/autocast.js",
           "src/scripts/browser.js",
           "src/scripts/clientUtils.js",
           "src/scripts/datetime.js",

src/assets/css/videoosd.css

@@ -6,29 +6,42 @@
     -ms-user-select: none;
 }
 
-.osdPoster img,
 .videoOsdBottom {
     bottom: 0;
     left: 0;
     right: 0;
+    position: fixed;
+    background: linear-gradient(0deg, rgba(16, 16, 16, 0.75) 0%, rgba(16, 16, 16, 0) 100%);
+    padding-top: 7.5em;
+    padding-bottom: 1.75em;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    will-change: opacity;
+    transition: opacity 0.3s ease-out;
+    color: #fff;
+    user-select: none;
+    -webkit-touch-callout: none;
 }
 
-.osdHeader {
+.skinHeader-withBackground.osdHeader {
-    -webkit-transition: opacity 0.3s ease-out;
-    -o-transition: opacity 0.3s ease-out;
     transition: opacity 0.3s ease-out;
     position: relative;
     z-index: 1;
-    background: rgba(0, 0, 0, 0.7) !important;
+    background: linear-gradient(180deg, rgba(16, 16, 16, 0.75) 0%, rgba(16, 16, 16, 0) 100%);
-    -webkit-backdrop-filter: none !important;
+    backdrop-filter: none;
-    backdrop-filter: none !important;
+    color: #eee;
-    color: #eee !important;
+    height: 7.5em;
 }
 
 .osdHeader-hidden {
     opacity: 0;
 }
 
+.osdHeader .headerTop {
+    max-height: 3.5em;
+}
+
 .osdHeader .headerButton:not(.headerBackButton):not(.headerCastButton):not(.headerSyncButton) {
     display: none;
 }
@@ -86,34 +99,17 @@
     opacity: 0.6;
 }
 
-.videoOsdBottom {
-    position: fixed;
-    background-color: rgba(0, 0, 0, 0.7);
-    padding: 1%;
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: flex;
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: normal;
-    -webkit-flex-direction: row;
-    flex-direction: row;
-    will-change: opacity;
-    -webkit-transition: opacity 0.3s ease-out;
-    -o-transition: opacity 0.3s ease-out;
-    transition: opacity 0.3s ease-out;
-    color: #fff;
-    user-select: none;
-    -webkit-touch-callout: none;
-}
-
 .videoOsdBottom-hidden {
     opacity: 0;
 }
 
 .osdControls {
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
     flex-grow: 1;
+    padding: 0 0.8em;
+}
+
+.layout-desktop .osdControls {
+    max-width: calc(100vh * 1.77 - 2vh);
 }
 
 .videoOsdBottom .buttons {
@@ -145,7 +141,7 @@
 }
 
 .volumeButtons {
-    margin: 0 0.5em 0 auto;
+    margin: 0 1em 0 0.29em;
     display: flex;
     -webkit-align-items: center;
     align-items: center;
@@ -153,33 +149,13 @@
 
 .osdTimeText {
     margin-left: 1em;
+    margin-right: auto;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }
 
-.osdPoster {
-    width: 10%;
-    position: relative;
-    margin-right: 0.5em;
-}
-
-.osdPoster img {
-    position: absolute;
-    height: auto;
-    width: 100%;
-    -webkit-box-shadow: 0 0 1.9vh #000;
-    box-shadow: 0 0 1.9vh #000;
-    border: 0.08em solid #222;
-    user-drag: none;
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-drag: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
-}
-
 .osdTitle,
 .osdTitleSmall {
     margin: 0 1em 0 0;

src/bundle.js

@@ -177,7 +177,7 @@ _define('appStorage', function () {
 });
 
 // libarchive.js
-var libarchive = require('libarchive.js');
+const libarchive = require('libarchive.js');
 _define('libarchive', function () {
     return libarchive;
 });

src/components/appFooter/appFooter.js

@@ -27,7 +27,7 @@ class appFooter {
         };
     }
     destroy() {
-        var self = this;
+        const self = this;
 
         self.element = null;
     }

src/components/apphost.js

@@ -78,7 +78,7 @@ function getDeviceId() {
 }
 
 function getDeviceName() {
-    var deviceName;
+    let deviceName;
     if (browser.tizen) {
         deviceName = 'Samsung Smart TV';
     } else if (browser.web0s) {

src/components/displaySettings/displaySettings.js

@@ -23,7 +23,7 @@ import 'emby-button';
             }).join('');
 
             // get default theme
-            var defaultTheme = themes.find(theme => {
+            const defaultTheme = themes.find(theme => {
                 return theme.default;
             });
 

src/components/filtermenu/filtermenu.js

@@ -19,7 +19,7 @@ function onSubmit(e) {
     return false;
 }
 function renderOptions(context, selector, cssClass, items, isCheckedFn) {
-    var elem = context.querySelector(selector);
+    const elem = context.querySelector(selector);
 
     if (items.length) {
         elem.classList.remove('hide');
@@ -27,12 +27,12 @@ function renderOptions(context, selector, cssClass, items, isCheckedFn) {
         elem.classList.add('hide');
     }
 
-    var html = '';
+    let html = '';
 
     html += items.map(function (filter) {
-        var itemHtml = '';
+        let itemHtml = '';
 
-        var checkedHtml = isCheckedFn(filter) ? ' checked' : '';
+        const checkedHtml = isCheckedFn(filter) ? ' checked' : '';
         itemHtml += '<label>';
         itemHtml += '<input is="emby-checkbox" type="checkbox"' + checkedHtml + ' data-filter="' + filter.Id + '" class="' + cssClass + '"/>';
         itemHtml += '<span>' + filter.Name + '</span>';
@@ -47,21 +47,21 @@ function renderOptions(context, selector, cssClass, items, isCheckedFn) {
 function renderDynamicFilters(context, result, options) {
     renderOptions(context, '.genreFilters', 'chkGenreFilter', result.Genres, function (i) {
         // Switching from | to ,
-        var delimeter = (options.settings.GenreIds || '').indexOf('|') === -1 ? ',' : '|';
+        const delimeter = (options.settings.GenreIds || '').indexOf('|') === -1 ? ',' : '|';
         return (delimeter + (options.settings.GenreIds || '') + delimeter).indexOf(delimeter + i.Id + delimeter) !== -1;
     });
 }
 
 function setBasicFilter(context, key, elem) {
-    var value = elem.checked;
+    let value = elem.checked;
     value = value ? value : null;
     userSettings.setFilter(key, value);
 }
 function moveCheckboxFocus(elem, offset) {
-    var parent = dom.parentWithClass(elem, 'checkboxList-verticalwrap');
+    const parent = dom.parentWithClass(elem, 'checkboxList-verticalwrap');
-    var elems = focusManager.getFocusableElements(parent);
+    const elems = focusManager.getFocusableElements(parent);
 
-    var index = -1;
+    let index = -1;
     for (let i = 0, length = elems.length; i < length; i++) {
         if (elems[i] === elem) {
             index = i;
@@ -74,14 +74,14 @@ function moveCheckboxFocus(elem, offset) {
     index = Math.min(elems.length - 1, index);
     index = Math.max(0, index);
 
-    var newElem = elems[index];
+    const newElem = elems[index];
     if (newElem) {
         focusManager.focus(newElem);
     }
 }
 function centerFocus(elem, horiz, on) {
     import('scrollHelper').then(({ default: scrollHelper }) => {
-        var fn = on ? 'on' : 'off';
+        const fn = on ? 'on' : 'off';
         scrollHelper.centerFocus[fn](elem, horiz);
     });
 }
@@ -100,7 +100,7 @@ function onInputCommand(e) {
     }
 }
 function saveValues(context, settings, settingsKey) {
-    var elems = context.querySelectorAll('.simpleFilter');
+    let elems = context.querySelectorAll('.simpleFilter');
     for (let i = 0, length = elems.length; i < length; i++) {
         if (elems[i].tagName === 'INPUT') {
             setBasicFilter(context, settingsKey + '-filter-' + elems[i].getAttribute('data-settingname'), elems[i]);
@@ -110,7 +110,7 @@ function saveValues(context, settings, settingsKey) {
     }
 
     // Video type
-    var videoTypes = [];
+    const videoTypes = [];
     elems = context.querySelectorAll('.chkVideoTypeFilter');
 
     for (let i = 0, length = elems.length; i < length; i++) {
@@ -121,7 +121,7 @@ function saveValues(context, settings, settingsKey) {
     userSettings.setFilter(settingsKey + '-filter-VideoTypes', videoTypes.join(','));
 
     // Series status
-    var seriesStatuses = [];
+    const seriesStatuses = [];
     elems = context.querySelectorAll('.chkSeriesStatus');
 
     for (let i = 0, length = elems.length; i < length; i++) {
@@ -131,7 +131,7 @@ function saveValues(context, settings, settingsKey) {
     }
 
     // Genres
-    var genres = [];
+    const genres = [];
     elems = context.querySelectorAll('.chkGenreFilter');
 
     for (let i = 0, length = elems.length; i < length; i++) {
@@ -142,7 +142,7 @@ function saveValues(context, settings, settingsKey) {
     userSettings.setFilter(settingsKey + '-filter-GenreIds', genres.join(','));
 }
 function bindCheckboxInput(context, on) {
-    var elems = context.querySelectorAll('.checkboxList-verticalwrap');
+    const elems = context.querySelectorAll('.checkboxList-verticalwrap');
     for (let i = 0, length = elems.length; i < length; i++) {
         if (on) {
             inputManager.on(elems[i], onInputCommand);
@@ -154,9 +154,9 @@ function bindCheckboxInput(context, on) {
 function initEditor(context, settings) {
     context.querySelector('form').addEventListener('submit', onSubmit);
 
-    var elems = context.querySelectorAll('.simpleFilter');
+    let elems = context.querySelectorAll('.simpleFilter');
-    var i;
+    let i;
-    var length;
+    let length;
 
     for (i = 0, length = elems.length; i < length; i++) {
         if (elems[i].tagName === 'INPUT') {
@@ -166,14 +166,14 @@ function initEditor(context, settings) {
         }
     }
 
-    var videoTypes = settings.VideoTypes ? settings.VideoTypes.split(',') : [];
+    const videoTypes = settings.VideoTypes ? settings.VideoTypes.split(',') : [];
     elems = context.querySelectorAll('.chkVideoTypeFilter');
 
     for (i = 0, length = elems.length; i < length; i++) {
         elems[i].checked = videoTypes.indexOf(elems[i].getAttribute('data-filter')) !== -1;
     }
 
-    var seriesStatuses = settings.SeriesStatus ? settings.SeriesStatus.split(',') : [];
+    const seriesStatuses = settings.SeriesStatus ? settings.SeriesStatus.split(',') : [];
     elems = context.querySelectorAll('.chkSeriesStatus');
 
     for (i = 0, length = elems.length; i < length; i++) {
@@ -193,9 +193,9 @@ function initEditor(context, settings) {
     }
 }
 function loadDynamicFilters(context, options) {
-    var apiClient = window.connectionManager.getApiClient(options.serverId);
+    const apiClient = window.connectionManager.getApiClient(options.serverId);
 
-    var filterMenuOptions = Object.assign(options.filterMenuOptions, {
+    const filterMenuOptions = Object.assign(options.filterMenuOptions, {
 
         UserId: apiClient.getCurrentUserId(),
         ParentId: options.parentId,
@@ -210,7 +210,7 @@ class FilterMenu {
     show(options) {
         return new Promise( (resolve, reject) => {
             import('text!./filtermenu.template.html').then(({ default: template }) => {
-                var dialogOptions = {
+                const dialogOptions = {
                     removeOnClose: true,
                     scrollY: false
                 };
@@ -220,11 +220,11 @@ class FilterMenu {
                     dialogOptions.size = 'small';
                 }
 
-                var dlg = dialogHelper.createDialog(dialogOptions);
+                const dlg = dialogHelper.createDialog(dialogOptions);
 
                 dlg.classList.add('formDialog');
 
-                var html = '';
+                let html = '';
 
                 html += '<div class="formDialogHeader">';
                 html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
@@ -236,7 +236,7 @@ class FilterMenu {
 
                 dlg.innerHTML = globalize.translateHtml(html, 'core');
 
-                var settingElements = dlg.querySelectorAll('.viewSetting');
+                const settingElements = dlg.querySelectorAll('.viewSetting');
                 for (let i = 0, length = settingElements.length; i < length; i++) {
                     if (options.visibleSettings.indexOf(settingElements[i].getAttribute('data-settingname')) === -1) {
                         settingElements[i].classList.add('hide');
@@ -257,7 +257,7 @@ class FilterMenu {
                     centerFocus(dlg.querySelector('.formDialogContent'), false, true);
                 }
 
-                var submitted;
+                let submitted;
 
                 dlg.querySelector('form').addEventListener('change', function () {
                     submitted = true;

src/components/focusManager.js

@@ -3,7 +3,7 @@
 import dom from 'dom';
 import scrollManager from 'scrollManager';
 
-    var scopes = [];
+    const scopes = [];
     function pushScope(elem) {
         scopes.push(elem);
     }
@@ -15,7 +15,7 @@ import scrollManager from 'scrollManager';
     }
 
     function autoFocus(view, defaultToFirst, findAutoFocusElement) {
-        var element;
+        let element;
         if (findAutoFocusElement !== false) {
             element = view.querySelector('*[autofocus]');
             if (element) {
@@ -46,9 +46,9 @@ import scrollManager from 'scrollManager';
         }
     }
 
-    var focusableTagNames = ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON', 'A'];
+    const focusableTagNames = ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON', 'A'];
-    var focusableContainerTagNames = ['BODY', 'DIALOG'];
+    const focusableContainerTagNames = ['BODY', 'DIALOG'];
-    var focusableQuery = focusableTagNames.map(function (t) {
+    const focusableQuery = focusableTagNames.map(function (t) {
         if (t === 'INPUT') {
             t += ':not([type="range"]):not([type="file"])';
         }
@@ -69,7 +69,7 @@ import scrollManager from 'scrollManager';
 
     function normalizeFocusable(elem, originalElement) {
         if (elem) {
-            var tagName = elem.tagName;
+            const tagName = elem.tagName;
             if (!tagName || tagName === 'HTML' || tagName === 'BODY') {
                 elem = originalElement;
             }
@@ -79,10 +79,10 @@ import scrollManager from 'scrollManager';
     }
 
     function focusableParent(elem) {
-        var originalElement = elem;
+        const originalElement = elem;
 
         while (!isFocusable(elem)) {
-            var parent = elem.parentNode;
+            const parent = elem.parentNode;
 
             if (!parent) {
                 return normalizeFocusable(elem, originalElement);
@@ -115,7 +115,7 @@ import scrollManager from 'scrollManager';
         }
 
         if (elem.tagName === 'INPUT') {
-            var type = elem.type;
+            const type = elem.type;
             if (type === 'range') {
                 return false;
             }
@@ -132,11 +132,11 @@ import scrollManager from 'scrollManager';
     }
 
     function getFocusableElements(parent, limit, excludeClass) {
-        var elems = (parent || getDefaultScope()).querySelectorAll(focusableQuery);
+        const elems = (parent || getDefaultScope()).querySelectorAll(focusableQuery);
-        var focusableElements = [];
+        const focusableElements = [];
 
-        for (var i = 0, length = elems.length; i < length; i++) {
+        for (let i = 0, length = elems.length; i < length; i++) {
-            var elem = elems[i];
+            const elem = elems[i];
 
             if (excludeClass && elem.classList.contains(excludeClass)) {
                 continue;
@@ -159,7 +159,7 @@ import scrollManager from 'scrollManager';
             return true;
         }
 
-        var classList = elem.classList;
+        const classList = elem.classList;
 
         if (classList.contains('focuscontainer')) {
             return true;
@@ -208,7 +208,7 @@ import scrollManager from 'scrollManager';
     }
 
     function getOffset(elem) {
-        var box;
+        let box;
 
         // Support: BlackBerry 5, iOS 3 (original iPhone)
         // If we don't have gBCR, just use 0,0 rather than error
@@ -225,7 +225,7 @@ import scrollManager from 'scrollManager';
 
         if (box.right === null) {
             // Create a new object because some browsers will throw an error when trying to set data onto the Rect object
-            var newBox = {
+            const newBox = {
                 top: box.top,
                 left: box.left,
                 width: box.width,
@@ -255,27 +255,27 @@ import scrollManager from 'scrollManager';
             return;
         }
 
-        var focusableContainer = dom.parentWithClass(activeElement, 'focusable');
+        const focusableContainer = dom.parentWithClass(activeElement, 'focusable');
 
-        var rect = getOffset(activeElement);
+        const rect = getOffset(activeElement);
 
         // Get elements and work out x/y points
-        var point1x = parseFloat(rect.left) || 0;
+        const point1x = parseFloat(rect.left) || 0;
-        var point1y = parseFloat(rect.top) || 0;
+        const point1y = parseFloat(rect.top) || 0;
-        var point2x = parseFloat(point1x + rect.width - 1) || point1x;
+        const point2x = parseFloat(point1x + rect.width - 1) || point1x;
-        var point2y = parseFloat(point1y + rect.height - 1) || point1y;
+        const point2y = parseFloat(point1y + rect.height - 1) || point1y;
 
-        var sourceMidX = rect.left + (rect.width / 2);
+        const sourceMidX = rect.left + (rect.width / 2);
-        var sourceMidY = rect.top + (rect.height / 2);
+        const sourceMidY = rect.top + (rect.height / 2);
 
-        var focusable = focusableElements || container.querySelectorAll(focusableQuery);
+        const focusable = focusableElements || container.querySelectorAll(focusableQuery);
 
-        var maxDistance = Infinity;
+        const maxDistance = Infinity;
-        var minDistance = maxDistance;
+        let minDistance = maxDistance;
-        var nearestElement;
+        let nearestElement;
 
-        for (var i = 0, length = focusable.length; i < length; i++) {
+        for (let i = 0, length = focusable.length; i < length; i++) {
-            var curr = focusable[i];
+            const curr = focusable[i];
 
             if (curr === activeElement) {
                 continue;
@@ -285,7 +285,7 @@ import scrollManager from 'scrollManager';
                 continue;
             }
 
-            var elementRect = getOffset(curr);
+            const elementRect = getOffset(curr);
 
             // not currently visible
             if (!elementRect.width && !elementRect.height) {
@@ -333,19 +333,19 @@ import scrollManager from 'scrollManager';
                     break;
             }
 
-            var x = elementRect.left;
+            const x = elementRect.left;
-            var y = elementRect.top;
+            const y = elementRect.top;
-            var x2 = x + elementRect.width - 1;
+            const x2 = x + elementRect.width - 1;
-            var y2 = y + elementRect.height - 1;
+            const y2 = y + elementRect.height - 1;
 
-            var intersectX = intersects(point1x, point2x, x, x2);
+            const intersectX = intersects(point1x, point2x, x, x2);
-            var intersectY = intersects(point1y, point2y, y, y2);
+            const intersectY = intersects(point1y, point2y, y, y2);
 
-            var midX = elementRect.left + (elementRect.width / 2);
+            const midX = elementRect.left + (elementRect.width / 2);
-            var midY = elementRect.top + (elementRect.height / 2);
+            const midY = elementRect.top + (elementRect.height / 2);
 
-            var distX;
+            let distX;
-            var distY;
+            let distY;
 
             switch (direction) {
                 case 0:
@@ -372,7 +372,7 @@ import scrollManager from 'scrollManager';
                     break;
             }
 
-            var dist = Math.sqrt(distX * distX + distY * distY);
+            const dist = Math.sqrt(distX * distX + distY * distY);
 
             if (dist < minDistance) {
                 nearestElement = curr;
@@ -383,7 +383,7 @@ import scrollManager from 'scrollManager';
         if (nearestElement) {
             // See if there's a focusable container, and if so, send the focus command to that
             if (activeElement) {
-                var nearestElementFocusableParent = dom.parentWithClass(nearestElement, 'focusable');
+                const nearestElementFocusableParent = dom.parentWithClass(nearestElement, 'focusable');
                 if (nearestElementFocusableParent && nearestElementFocusableParent !== nearestElement) {
                     if (focusableContainer !== nearestElementFocusableParent) {
                         nearestElement = nearestElementFocusableParent;
@@ -403,16 +403,16 @@ import scrollManager from 'scrollManager';
     }
 
     function sendText(text) {
-        var elem = document.activeElement;
+        const elem = document.activeElement;
 
         elem.value = text;
     }
 
     function focusFirst(container, focusableSelector) {
-        var elems = container.querySelectorAll(focusableSelector);
+        const elems = container.querySelectorAll(focusableSelector);
 
-        for (var i = 0, length = elems.length; i < length; i++) {
+        for (let i = 0, length = elems.length; i < length; i++) {
-            var elem = elems[i];
+            const elem = elems[i];
 
             if (isCurrentlyFocusableInternal(elem)) {
                 focus(elem);
@@ -422,10 +422,10 @@ import scrollManager from 'scrollManager';
     }
 
     function focusLast(container, focusableSelector) {
-        var elems = [].slice.call(container.querySelectorAll(focusableSelector), 0).reverse();
+        const elems = [].slice.call(container.querySelectorAll(focusableSelector), 0).reverse();
 
-        for (var i = 0, length = elems.length; i < length; i++) {
+        for (let i = 0, length = elems.length; i < length; i++) {
-            var elem = elems[i];
+            const elem = elems[i];
 
             if (isCurrentlyFocusableInternal(elem)) {
                 focus(elem);
@@ -435,11 +435,11 @@ import scrollManager from 'scrollManager';
     }
 
     function moveFocus(sourceElement, container, focusableSelector, offset) {
-        var elems = container.querySelectorAll(focusableSelector);
+        const elems = container.querySelectorAll(focusableSelector);
-        var list = [];
+        const list = [];
-        var i;
+        let i;
-        var length;
+        let length;
-        var elem;
+        let elem;
 
         for (i = 0, length = elems.length; i < length; i++) {
             elem = elems[i];
@@ -449,7 +449,7 @@ import scrollManager from 'scrollManager';
             }
         }
 
-        var currentIndex = -1;
+        let currentIndex = -1;
 
         for (i = 0, length = list.length; i < length; i++) {
             elem = list[i];
@@ -464,11 +464,11 @@ import scrollManager from 'scrollManager';
             return;
         }
 
-        var newIndex = currentIndex + offset;
+        let newIndex = currentIndex + offset;
         newIndex = Math.max(0, newIndex);
         newIndex = Math.min(newIndex, list.length - 1);
 
-        var newElem = list[newIndex];
+        const newElem = list[newIndex];
         if (newElem) {
             focus(newElem);
         }
@@ -482,23 +482,23 @@ export default {
     focusableParent: focusableParent,
     getFocusableElements: getFocusableElements,
     moveLeft: function (sourceElement, options) {
-        var container = options ? options.container : null;
+        const container = options ? options.container : null;
-        var focusableElements = options ? options.focusableElements : null;
+        const focusableElements = options ? options.focusableElements : null;
         nav(sourceElement, 0, container, focusableElements);
     },
     moveRight: function (sourceElement, options) {
-        var container = options ? options.container : null;
+        const container = options ? options.container : null;
-        var focusableElements = options ? options.focusableElements : null;
+        const focusableElements = options ? options.focusableElements : null;
         nav(sourceElement, 1, container, focusableElements);
     },
     moveUp: function (sourceElement, options) {
-        var container = options ? options.container : null;
+        const container = options ? options.container : null;
-        var focusableElements = options ? options.focusableElements : null;
+        const focusableElements = options ? options.focusableElements : null;
         nav(sourceElement, 2, container, focusableElements);
     },
     moveDown: function (sourceElement, options) {
-        var container = options ? options.container : null;
+        const container = options ? options.container : null;
-        var focusableElements = options ? options.focusableElements : null;
+        const focusableElements = options ? options.focusableElements : null;
         nav(sourceElement, 3, container, focusableElements);
     },
     sendText: sendText,

src/components/groupedcards.js

@@ -4,19 +4,19 @@ import dom from 'dom';
 import appRouter from 'appRouter';
 
     function onGroupedCardClick(e, card) {
-        var itemId = card.getAttribute('data-id');
+        const itemId = card.getAttribute('data-id');
-        var serverId = card.getAttribute('data-serverid');
+        const serverId = card.getAttribute('data-serverid');
-        var apiClient = window.connectionManager.getApiClient(serverId);
+        const apiClient = window.connectionManager.getApiClient(serverId);
-        var userId = apiClient.getCurrentUserId();
+        const userId = apiClient.getCurrentUserId();
-        var playedIndicator = card.querySelector('.playedIndicator');
+        const playedIndicator = card.querySelector('.playedIndicator');
-        var playedIndicatorHtml = playedIndicator ? playedIndicator.innerHTML : null;
+        const playedIndicatorHtml = playedIndicator ? playedIndicator.innerHTML : null;
-        var options = {
+        const options = {
             Limit: parseInt(playedIndicatorHtml || '10'),
             Fields: 'PrimaryImageAspectRatio,DateCreated',
             ParentId: itemId,
             GroupItems: false
         };
-        var actionableParent = dom.parentWithTag(e.target, ['A', 'BUTTON', 'INPUT']);
+        const actionableParent = dom.parentWithTag(e.target, ['A', 'BUTTON', 'INPUT']);
 
         if (!actionableParent || actionableParent.classList.contains('cardContent')) {
             apiClient.getJSON(apiClient.getUrl('Users/' + userId + '/Items/Latest', options)).then(function (items) {
@@ -24,7 +24,7 @@ import appRouter from 'appRouter';
                     return void appRouter.showItem(items[0]);
                 }
 
-                var url = 'details?id=' + itemId + '&serverId=' + serverId;
+                const url = 'details?id=' + itemId + '&serverId=' + serverId;
                 Dashboard.navigate(url);
             });
             e.stopPropagation();
@@ -34,7 +34,7 @@ import appRouter from 'appRouter';
     }
 
     export default function onItemsContainerClick(e) {
-        var groupedCard = dom.parentWithClass(e.target, 'groupedCard');
+        const groupedCard = dom.parentWithClass(e.target, 'groupedCard');
 
         if (groupedCard) {
             onGroupedCardClick(e, groupedCard);

src/components/homeScreenSettings/homeScreenSettings.js

@@ -75,26 +75,30 @@ import 'emby-checkbox';
                 value: 'suggestions'
             });
             list.push({
-                name: globalize.translate('Latest'),
+                name: globalize.translate('Upcoming'),
-                value: 'latest'
+                value: 'upcoming'
             });
             list.push({
                 name: globalize.translate('Genres'),
                 value: 'genres'
             });
             list.push({
-                name: globalize.translate('Favorites'),
+                name: globalize.translate('Networks'),
-                value: 'favorites'
+                value: 'networks'
+            });
+            list.push({
+                name: globalize.translate('Episodes'),
+                value: 'episodes'
             });
         } else if (type === 'music') {
             list.push({
-                name: globalize.translate('Suggestions'),
+                name: globalize.translate('Albums'),
-                value: 'suggestions',
+                value: 'albums',
                 isDefault: true
             });
             list.push({
-                name: globalize.translate('Albums'),
+                name: globalize.translate('Suggestions'),
-                value: 'albums'
+                value: 'suggestions'
             });
             list.push({
                 name: globalize.translate('HeaderAlbumArtists'),

src/components/htmlMediaHelper.js

@@ -23,7 +23,7 @@ import events from 'events';
     }
 
     function canPlayNativeHls() {
-        var media = document.createElement('video');
+        const media = document.createElement('video');
 
         if (media.canPlayType('application/x-mpegURL').replace(/no/, '') ||
             media.canPlayType('application/vnd.apple.mpegURL').replace(/no/, '')) {
@@ -71,16 +71,16 @@ import events from 'events';
         return true;
     }
 
-    var recoverDecodingErrorDate;
+    let recoverDecodingErrorDate;
-    var recoverSwapAudioCodecDate;
+    let recoverSwapAudioCodecDate;
     export function handleHlsJsMediaError(instance, reject) {
-        var hlsPlayer = instance._hlsPlayer;
+        const hlsPlayer = instance._hlsPlayer;
 
         if (!hlsPlayer) {
             return;
         }
 
-        var now = Date.now();
+        let now = Date.now();
 
         if (window.performance && window.performance.now) {
             now = performance.now(); // eslint-disable-line compat/compat
@@ -136,7 +136,7 @@ import events from 'events';
     }
 
     export function seekOnPlaybackStart(instance, element, ticks, onMediaReady) {
-        var seconds = (ticks || 0) / 10000000;
+        const seconds = (ticks || 0) / 10000000;
 
         if (seconds) {
             // Appending #t=xxx to the query string doesn't seem to work with HLS
@@ -148,8 +148,8 @@ import events from 'events';
                 if (onMediaReady) onMediaReady();
             } else {
                 // update video player position when media is ready to be sought
-                var events = ['durationchange', 'loadeddata', 'play', 'loadedmetadata'];
+                const events = ['durationchange', 'loadeddata', 'play', 'loadedmetadata'];
-                var onMediaChange = function(e) {
+                const onMediaChange = function(e) {
                     if (element.currentTime === 0 && element.duration >= seconds) {
                         // seek only when video position is exactly zero,
                         // as this is true only if video hasn't started yet or
@@ -173,10 +173,10 @@ import events from 'events';
     export function applySrc(elem, src, options) {
         if (window.Windows && options.mediaSource && options.mediaSource.IsLocal) {
             return Windows.Storage.StorageFile.getFileFromPathAsync(options.url).then(function (file) {
-                var playlist = new Windows.Media.Playback.MediaPlaybackList();
+                const playlist = new Windows.Media.Playback.MediaPlaybackList();
 
-                var source1 = Windows.Media.Core.MediaSource.createFromStorageFile(file);
+                const source1 = Windows.Media.Core.MediaSource.createFromStorageFile(file);
-                var startTime = (options.playerStartPositionTicks || 0) / 10000;
+                const startTime = (options.playerStartPositionTicks || 0) / 10000;
                 playlist.items.append(new Windows.Media.Playback.MediaPlaybackItem(source1, startTime));
                 elem.src = URL.createObjectURL(playlist, { oneTimeOnly: true });
                 return Promise.resolve();
@@ -194,11 +194,11 @@ import events from 'events';
 
     export function playWithPromise(elem, onErrorFn) {
         try {
-            var promise = elem.play();
+            const promise = elem.play();
             if (promise && promise.then) {
                 // Chrome now returns a promise
                 return promise.catch(function (e) {
-                    var errorName = (e.name || '').toLowerCase();
+                    const errorName = (e.name || '').toLowerCase();
                     // safari uses aborterror
                     if (errorName === 'notallowederror' ||
                         errorName === 'aborterror') {
@@ -219,7 +219,7 @@ import events from 'events';
     }
 
     export function destroyCastPlayer(instance) {
-        var player = instance._castPlayer;
+        const player = instance._castPlayer;
         if (player) {
             try {
                 player.unload();
@@ -232,7 +232,7 @@ import events from 'events';
     }
 
     export function destroyHlsPlayer(instance) {
-        var player = instance._hlsPlayer;
+        const player = instance._hlsPlayer;
         if (player) {
             try {
                 player.destroy();
@@ -245,7 +245,7 @@ import events from 'events';
     }
 
     export function destroyFlvPlayer(instance) {
-        var player = instance._flvPlayer;
+        const player = instance._flvPlayer;
         if (player) {
             try {
                 player.unload();
@@ -322,9 +322,8 @@ import events from 'events';
                         break;
                     case Hls.ErrorTypes.MEDIA_ERROR:
                         console.debug('fatal media error encountered, try to recover');
-                        var currentReject = reject;
+                        handleHlsJsMediaError(instance, reject);
                         reject = null;
-                        handleHlsJsMediaError(instance, currentReject);
                         break;
                     default:
 
@@ -356,7 +355,7 @@ import events from 'events';
         destroyFlvPlayer(instance);
         destroyCastPlayer(instance);
 
-        var stopInfo = {
+        const stopInfo = {
             src: instance._currentSrc
         };
 
@@ -368,20 +367,20 @@ import events from 'events';
     }
 
     export function getBufferedRanges(instance, elem) {
-        var ranges = [];
+        const ranges = [];
-        var seekable = elem.buffered || [];
+        const seekable = elem.buffered || [];
 
-        var offset;
+        let offset;
-        var currentPlayOptions = instance._currentPlayOptions;
+        const currentPlayOptions = instance._currentPlayOptions;
         if (currentPlayOptions) {
             offset = currentPlayOptions.transcodingOffsetTicks;
         }
 
         offset = offset || 0;
 
-        for (var i = 0, length = seekable.length; i < length; i++) {
+        for (let i = 0, length = seekable.length; i < length; i++) {
-            var start = seekable.start(i);
+            let start = seekable.start(i);
-            var end = seekable.end(i);
+            let end = seekable.end(i);
 
             if (!isValidDuration(start)) {
                 start = 0;

src/components/imageOptionsEditor/imageOptionsEditor.js

@@ -93,7 +93,7 @@ import 'emby-input';
         const response = await fetch('components/imageOptionsEditor/imageOptionsEditor.template.html');
         const template = await response.text();
 
-        var dlg = dialogHelper.createDialog({
+        const dlg = dialogHelper.createDialog({
             size: 'small',
             removeOnClose: true,
             scrollY: false

src/components/imageeditor/imageeditor.js

@@ -58,8 +58,8 @@ import 'css!./imageeditor';
         currentItem = item;
 
         apiClient.getRemoteImageProviders(getBaseRemoteOptions()).then(function (providers) {
-            var btnBrowseAllImages = page.querySelectorAll('.btnBrowseAllImages');
+            const btnBrowseAllImages = page.querySelectorAll('.btnBrowseAllImages');
-            for (var i = 0, length = btnBrowseAllImages.length; i < length; i++) {
+            for (let i = 0, length = btnBrowseAllImages.length; i < length; i++) {
                 if (providers.length) {
                     btnBrowseAllImages[i].classList.remove('hide');
                 } else {

src/components/images/imageLoader.js

@@ -56,7 +56,7 @@ import 'css!./style';
             throw new Error('entry cannot be null');
         }
         const target = entry.target;
-        var source = undefined;
+        let source = undefined;
 
         if (target) {
             source = target.getAttribute('data-src');
@@ -106,7 +106,7 @@ import 'css!./style';
     }
 
     function emptyImageElement(elem) {
-        var url;
+        let url;
 
         if (elem.tagName !== 'IMG') {
             url = elem.style.backgroundImage.slice(4, -1).replace(/"/g, '');
@@ -137,10 +137,10 @@ import 'css!./style';
     }
 
     export function getPrimaryImageAspectRatio(items) {
-        var values = [];
+        const values = [];
 
-        for (var i = 0, length = items.length; i < length; i++) {
+        for (let i = 0, length = items.length; i < length; i++) {
-            var ratio = items[i].PrimaryImageAspectRatio || 0;
+            const ratio = items[i].PrimaryImageAspectRatio || 0;
 
             if (!ratio) {
                 continue;
@@ -158,9 +158,9 @@ import 'css!./style';
             return a - b;
         });
 
-        var half = Math.floor(values.length / 2);
+        const half = Math.floor(values.length / 2);
 
-        var result;
+        let result;
 
         if (values.length % 2) {
             result = values[half];
@@ -169,13 +169,13 @@ import 'css!./style';
         }
 
         // If really close to 2:3 (poster image), just return 2:3
-        var aspect2x3 = 2 / 3;
+        const aspect2x3 = 2 / 3;
         if (Math.abs(aspect2x3 - result) <= 0.15) {
             return aspect2x3;
         }
 
         // If really close to 16:9 (episode image), just return 16:9
-        var aspect16x9 = 16 / 9;
+        const aspect16x9 = 16 / 9;
         if (Math.abs(aspect16x9 - result) <= 0.2) {
             return aspect16x9;
         }
@@ -186,7 +186,7 @@ import 'css!./style';
         }
 
         // If really close to 4:3 (poster image), just return 2:3
-        var aspect4x3 = 4 / 3;
+        const aspect4x3 = 4 / 3;
         if (Math.abs(aspect4x3 - result) <= 0.15) {
             return aspect4x3;
         }
@@ -195,8 +195,8 @@ import 'css!./style';
     }
 
     export function fillImages(elems) {
-        for (var i = 0, length = elems.length; i < length; i++) {
+        for (let i = 0, length = elems.length; i < length; i++) {
-            var elem = elems[0];
+            const elem = elems[0];
             fillImage(elem);
         }
     }

src/components/itemMediaInfo/itemMediaInfo.js

@@ -120,6 +120,18 @@ import 'flexStyles';
             if (stream.BitDepth) {
                 attributes.push(createAttribute(globalize.translate('MediaInfoBitDepth'), `${stream.BitDepth} bit`));
             }
+            if (stream.VideoRange) {
+                attributes.push(createAttribute(globalize.translate('MediaInfoVideoRange'), stream.VideoRange));
+            }
+            if (stream.ColorSpace) {
+                attributes.push(createAttribute(globalize.translate('MediaInfoColorSpace'), stream.ColorSpace));
+            }
+            if (stream.ColorTransfer) {
+                attributes.push(createAttribute(globalize.translate('MediaInfoColorTransfer'), stream.ColorTransfer));
+            }
+            if (stream.ColorPrimaries) {
+                attributes.push(createAttribute(globalize.translate('MediaInfoColorPrimaries'), stream.ColorPrimaries));
+            }
             if (stream.PixelFormat) {
                 attributes.push(createAttribute(globalize.translate('MediaInfoPixelFormat'), stream.PixelFormat));
             }

src/components/libraryoptionseditor/libraryoptionseditor.js

@@ -399,12 +399,10 @@ import 'emby-input';
         }
 
         if (contentType === 'tvshows') {
-            parent.querySelector('.chkImportMissingEpisodesContainer').classList.remove('hide');
             parent.querySelector('.chkAutomaticallyGroupSeriesContainer').classList.remove('hide');
             parent.querySelector('.fldSeasonZeroDisplayName').classList.remove('hide');
             parent.querySelector('#txtSeasonZeroName').setAttribute('required', 'required');
         } else {
-            parent.querySelector('.chkImportMissingEpisodesContainer').classList.add('hide');
             parent.querySelector('.chkAutomaticallyGroupSeriesContainer').classList.add('hide');
             parent.querySelector('.fldSeasonZeroDisplayName').classList.add('hide');
             parent.querySelector('#txtSeasonZeroName').removeAttribute('required');
@@ -511,7 +509,6 @@ import 'emby-input';
             EnableChapterImageExtraction: parent.querySelector('.chkExtractChapterImages').checked,
             DownloadImagesInAdvance: parent.querySelector('#chkDownloadImagesInAdvance').checked,
             EnableInternetProviders: true,
-            ImportMissingEpisodes: parent.querySelector('#chkImportMissingEpisodes').checked,
             SaveLocalMetadata: parent.querySelector('#chkSaveLocal').checked,
             EnableAutomaticSeriesGrouping: parent.querySelector('.chkAutomaticallyGroupSeries').checked,
             PreferredMetadataLanguage: parent.querySelector('#selectLanguage').value,
@@ -569,7 +566,6 @@ import 'emby-input';
         parent.querySelector('.chkExtractChapterImages').checked = options.EnableChapterImageExtraction;
         parent.querySelector('#chkDownloadImagesInAdvance').checked = options.DownloadImagesInAdvance;
         parent.querySelector('#chkSaveLocal').checked = options.SaveLocalMetadata;
-        parent.querySelector('#chkImportMissingEpisodes').checked = options.ImportMissingEpisodes;
         parent.querySelector('.chkAutomaticallyGroupSeries').checked = options.EnableAutomaticSeriesGrouping;
         parent.querySelector('#chkEnableEmbeddedTitles').checked = options.EnableEmbeddedTitles;
         parent.querySelector('#chkEnableEmbeddedEpisodeInfos').checked = options.EnableEmbeddedEpisodeInfos;

src/components/libraryoptionseditor/libraryoptionseditor.template.html

@@ -85,14 +85,6 @@
     <div class="fieldDescription checkboxFieldDescription">${OptionAutomaticallyGroupSeriesHelp}</div>
 </div>
 
-<div class="checkboxContainer checkboxContainer-withDescription hide chkImportMissingEpisodesContainer advanced">
-    <label>
-        <input is="emby-checkbox" type="checkbox" id="chkImportMissingEpisodes" />
-        <span>${DisplayMissingEpisodesWithinSeasons}</span>
-    </label>
-    <div class="fieldDescription checkboxFieldDescription">${ImportMissingEpisodesHelp}</div>
-</div>
-
 <div class="chapterSettingsSection hide">
     <h2>${HeaderChapterImages}</h2>
     <div class="checkboxContainer checkboxContainer-withDescription fldExtractChapterImages">

src/components/listview/listview.js

@@ -256,8 +256,8 @@ import 'emby-playstatebutton';
             }
 
             if (options.image !== false) {
-                var imgUrl = options.imageSource === 'channel' ? getChannelImageUrl(item, downloadWidth) : getImageUrl(item, downloadWidth);
+                const imgUrl = options.imageSource === 'channel' ? getChannelImageUrl(item, downloadWidth) : getImageUrl(item, downloadWidth);
-                var imageClass = isLargeStyle ? 'listItemImage listItemImage-large' : 'listItemImage';
+                let imageClass = isLargeStyle ? 'listItemImage listItemImage-large' : 'listItemImage';
 
                 if (isLargeStyle && layoutManager.tv) {
                     imageClass += ' listItemImage-large-tv';

src/components/mediainfo/mediainfo.js

@@ -100,11 +100,10 @@ import 'emby-button';
         return html;
     }
 
-    export function getMediaInfoHtml(item, options) {
+    export function getMediaInfoHtml(item, options = {}) {
         let html = '';
 
         const miscInfo = [];
-        options = options || {};
         let text;
         let date;
         let minutes;
@@ -289,7 +288,9 @@ import 'emby-button';
             return getMediaInfoItem(m);
         }).join('');
 
+        if (options.starRating !== false) {
             html += getStarIconsHtml(item);
+        }
 
         if (item.HasSubtitles && options.subtitles !== false) {
             html += '<div class="mediaInfoItem mediaInfoText closedCaptionMediaInfoText">CC</div>';
@@ -418,9 +419,8 @@ import 'emby-button';
         return false;
     }
 
-    export function getPrimaryMediaInfoHtml(item, options) {
+    export function getPrimaryMediaInfoHtml(item, options = {}) {
-        options = options || {};
+        if (options.interactive === undefined) {
-        if (options.interactive == null) {
             options.interactive = false;
         }
 

src/components/metadataEditor/metadataEditor.js

@@ -239,7 +239,7 @@ import 'flexStyles';
     }
 
     function afterDeleted(context, item) {
-        var parentId = item.ParentId || item.SeasonId || item.SeriesId;
+        const parentId = item.ParentId || item.SeasonId || item.SeriesId;
 
         if (parentId) {
             reload(context, parentId, item.ServerId);
@@ -252,7 +252,7 @@ import 'flexStyles';
 
     function showMoreMenu(context, button, user) {
         import('itemContextMenu').then(({default: itemContextMenu}) => {
-            var item = currentItem;
+            const item = currentItem;
 
             itemContextMenu.show({
                 item: item,

src/components/metadataEditor/metadataEditor.template.html

@@ -251,7 +251,7 @@
             </div>
             <br />
             <div class="formDialogFooter">
-                <button is="emby-button" class="raised button-cancel block btnCancel formDialogFooterItem">
+                <button is="emby-button" type="button" class="raised button-cancel block btnCancel formDialogFooterItem">
                     <span>${Cancel}</span>
                 </button>
                 <button is="emby-button" type="submit" class="raised button-submit block btnSave formDialogFooterItem">

src/components/notifications/notifications.js

@@ -31,7 +31,7 @@ function closeAfter(notification, timeoutMs) {
 
 function resetRegistration() {
     /* eslint-disable-next-line compat/compat */
-    let serviceWorker = navigator.serviceWorker;
+    const serviceWorker = navigator.serviceWorker;
     if (serviceWorker) {
         serviceWorker.ready.then(function (registration) {
             serviceWorkerRegistration = registration;
@@ -47,7 +47,7 @@ function showPersistentNotification(title, options, timeoutMs) {
 
 function showNonPersistentNotification(title, options, timeoutMs) {
     try {
-        let notif = new Notification(title, options); /* eslint-disable-line compat/compat */
+        const notif = new Notification(title, options); /* eslint-disable-line compat/compat */
 
         if (notif.show) {
             notif.show();
@@ -67,7 +67,7 @@ function showNonPersistentNotification(title, options, timeoutMs) {
 }
 
 function showNotification(options, timeoutMs, apiClient) {
-    let title = options.title;
+    const title = options.title;
 
     options.data = options.data || {};
     options.data.serverId = apiClient.serverInfo().Id;
@@ -95,7 +95,7 @@ function showNewItemNotification(item, apiClient) {
         body = item.SeriesName + ' - ' + body;
     }
 
-    let notification = {
+    const notification = {
         title: 'New ' + item.Type,
         body: body,
         vibrate: true,
@@ -103,7 +103,7 @@ function showNewItemNotification(item, apiClient) {
         data: {}
     };
 
-    let imageTags = item.ImageTags || {};
+    const imageTags = item.ImageTags || {};
 
     if (imageTags.Primary) {
         notification.icon = apiClient.getScaledImageUrl(item.Id, {
@@ -117,7 +117,7 @@ function showNewItemNotification(item, apiClient) {
 }
 
 function onLibraryChanged(data, apiClient) {
-    let newItems = data.ItemsAdded;
+    const newItems = data.ItemsAdded;
 
     if (!newItems.length) {
         return;
@@ -140,7 +140,7 @@ function onLibraryChanged(data, apiClient) {
         EnableTotalRecordCount: false
 
     }).then(function (result) {
-        let items = result.Items;
+        const items = result.Items;
 
         for (const item of items) {
             showNewItemNotification(item, apiClient);
@@ -159,7 +159,7 @@ function showPackageInstallNotification(apiClient, installation, status) {
             return;
         }
 
-        let notification = {
+        const notification = {
             tag: 'install' + installation.Id,
             data: {}
         };
@@ -188,12 +188,12 @@ function showPackageInstallNotification(apiClient, installation, status) {
         }
 
         if (status === 'progress') {
-            let percentComplete = Math.round(installation.PercentComplete || 0);
+            const percentComplete = Math.round(installation.PercentComplete || 0);
 
             notification.body = percentComplete + '% complete.';
         }
 
-        let timeout = status === 'cancelled' ? 5000 : 0;
+        const timeout = status === 'cancelled' ? 5000 : 0;
 
         showNotification(notification, timeout, apiClient);
     });
@@ -220,8 +220,8 @@ events.on(serverNotifications, 'PackageInstalling', function (e, apiClient, data
 });
 
 events.on(serverNotifications, 'ServerShuttingDown', function (e, apiClient, data) {
-    let serverId = apiClient.serverInfo().Id;
+    const serverId = apiClient.serverInfo().Id;
-    let notification = {
+    const notification = {
         tag: 'restart' + serverId,
         title: globalize.translate('ServerNameIsShuttingDown', apiClient.serverInfo().Name)
     };
@@ -229,8 +229,8 @@ events.on(serverNotifications, 'ServerShuttingDown', function (e, apiClient, dat
 });
 
 events.on(serverNotifications, 'ServerRestarting', function (e, apiClient, data) {
-    let serverId = apiClient.serverInfo().Id;
+    const serverId = apiClient.serverInfo().Id;
-    let notification = {
+    const notification = {
         tag: 'restart' + serverId,
         title: globalize.translate('ServerNameIsRestarting', apiClient.serverInfo().Name)
     };
@@ -238,8 +238,8 @@ events.on(serverNotifications, 'ServerRestarting', function (e, apiClient, data)
 });
 
 events.on(serverNotifications, 'RestartRequired', function (e, apiClient) {
-    let serverId = apiClient.serverInfo().Id;
+    const serverId = apiClient.serverInfo().Id;
-    let notification = {
+    const notification = {
         tag: 'restart' + serverId,
         title: globalize.translate('PleaseRestartServerName', apiClient.serverInfo().Name)
     };

src/components/nowPlayingBar/nowPlayingBar.js

@@ -582,7 +582,7 @@ import 'emby-ratingbutton';
 
     function onPlaybackStart(e, state) {
         console.debug('nowplaying event: ' + e.type);
-        var player = this;
+        const player = this;
         onStateChanged.call(player, e, state);
     }
 

src/components/packageManager.js

@@ -8,7 +8,7 @@ import pluginManager from 'pluginManager';
 
         init() {
             console.groupCollapsed('loading packages');
-            var manifestUrls = JSON.parse(appSettings.get(this.#settingsKey) || '[]');
+            const manifestUrls = JSON.parse(appSettings.get(this.#settingsKey) || '[]');
 
             return Promise.all(manifestUrls.map((url) => {
                 return this.loadPackage(url);
@@ -30,7 +30,7 @@ import pluginManager from 'pluginManager';
 
         install(url) {
             return this.loadPackage(url, true).then((pkg) => {
-                var manifestUrls = JSON.parse(appSettings.get(this.#settingsKey) || '[]');
+                const manifestUrls = JSON.parse(appSettings.get(this.#settingsKey) || '[]');
 
                 if (!manifestUrls.includes(url)) {
                     manifestUrls.push(url);
@@ -42,7 +42,7 @@ import pluginManager from 'pluginManager';
         }
 
         uninstall(name) {
-            var pkg = this.#packagesList.filter((p) => {
+            const pkg = this.#packagesList.filter((p) => {
                 return p.name === name;
             })[0];
 
@@ -58,12 +58,12 @@ import pluginManager from 'pluginManager';
         }
 
         mapPath(pkg, pluginUrl) {
-            var urlLower = pluginUrl.toLowerCase();
+            const urlLower = pluginUrl.toLowerCase();
             if (urlLower.startsWith('http:') || urlLower.startsWith('https:') || urlLower.startsWith('file:')) {
                 return pluginUrl;
             }
 
-            var packageUrl = pkg.url;
+            let packageUrl = pkg.url;
             packageUrl = packageUrl.substring(0, packageUrl.lastIndexOf('/'));
 
             packageUrl += '/';
@@ -81,7 +81,7 @@ import pluginManager from 'pluginManager';
         }
 
         removeUrl(url) {
-            var manifestUrls = JSON.parse(appSettings.get(this.#settingsKey) || '[]');
+            let manifestUrls = JSON.parse(appSettings.get(this.#settingsKey) || '[]');
 
             manifestUrls = manifestUrls.filter((i) => {
                 return i !== url;
@@ -92,14 +92,14 @@ import pluginManager from 'pluginManager';
 
         loadPackage(url, throwError = false) {
             return new Promise((resolve, reject) => {
-                var xhr = new XMLHttpRequest();
+                const xhr = new XMLHttpRequest();
-                var originalUrl = url;
+                const originalUrl = url;
                 url += url.indexOf('?') === -1 ? '?' : '&';
                 url += 't=' + new Date().getTime();
 
                 xhr.open('GET', url, true);
 
-                var onError = () => {
+                const onError = () => {
                     if (throwError === true) {
                         reject();
                     } else {
@@ -110,16 +110,16 @@ import pluginManager from 'pluginManager';
 
                 xhr.onload = () => {
                     if (this.status < 400) {
-                        var pkg = JSON.parse(this.response);
+                        const pkg = JSON.parse(this.response);
                         pkg.url = originalUrl;
 
                         this.addPackage(pkg);
 
-                        var plugins = pkg.plugins || [];
+                        const plugins = pkg.plugins || [];
                         if (pkg.plugin) {
                             plugins.push(pkg.plugin);
                         }
-                        var promises = plugins.map((pluginUrl) => {
+                        const promises = plugins.map((pluginUrl) => {
                             return pluginManager.loadPlugin(this.mapPath(pkg, pluginUrl));
                         });
                         Promise.all(promises).then(resolve, resolve);

src/components/playback/brightnessosd.js

@@ -5,15 +5,15 @@ import browser from 'browser';
 import 'css!./iconosd';
 import 'material-icons';
 
-var currentPlayer;
+let currentPlayer;
-var osdElement;
+let osdElement;
-var iconElement;
+let iconElement;
-var progressElement;
+let progressElement;
 
-var enableAnimation;
+let enableAnimation;
 
 function getOsdElementHtml() {
-    var html = '';
+    let html = '';
 
     html += '<span class="material-icons iconOsdIcon brightness_high"></span>';
 
@@ -23,7 +23,7 @@ function getOsdElementHtml() {
 }
 
 function ensureOsdElement() {
-    var elem = osdElement;
+    let elem = osdElement;
     if (!elem) {
         enableAnimation = browser.supportsCssAnimation();
 
@@ -46,11 +46,11 @@ function onHideComplete() {
     this.classList.add('hide');
 }
 
-var hideTimeout;
+let hideTimeout;
 function showOsd() {
     clearHideTimeout();
 
-    var elem = osdElement;
+    const elem = osdElement;
 
     dom.removeEventListener(elem, dom.whichTransitionEvent(), onHideComplete, {
         once: true
@@ -78,7 +78,7 @@ function clearHideTimeout() {
 function hideOsd() {
     clearHideTimeout();
 
-    var elem = osdElement;
+    const elem = osdElement;
     if (elem) {
         if (enableAnimation) {
             // trigger reflow
@@ -118,7 +118,7 @@ function updateElementsFromPlayer(brightness) {
 }
 
 function releaseCurrentPlayer() {
-    var player = currentPlayer;
+    const player = currentPlayer;
 
     if (player) {
         events.off(player, 'brightnesschange', onBrightnessChanged);
@@ -128,7 +128,7 @@ function releaseCurrentPlayer() {
 }
 
 function onBrightnessChanged(e) {
-    var player = this;
+    const player = this;
 
     ensureOsdElement();
 

src/components/playback/mediasession.js

@@ -1,5 +1,6 @@
 import playbackManager from 'playbackManager';
 import nowPlayingHelper from 'nowPlayingHelper';
+import shell from 'shell';
 import events from 'events';
 /* eslint-disable indent */
 
@@ -127,8 +128,7 @@ import events from 'events';
             });
         } else {
             const itemImageUrl = seriesImageUrl(item, { maxHeight: 3000 }) || imageUrl(item, { maxHeight: 3000 });
-
+            shell.updateMediaSession({
-            window.NativeShell.updateMediaSession({
                 action: eventName,
                 isLocalPlayer: isLocalPlayer,
                 itemId: itemId,
@@ -182,7 +182,7 @@ import events from 'events';
              /* eslint-disable-next-line compat/compat */
             navigator.mediaSession.metadata = null;
         } else {
-            window.NativeShell.hideMediaSession();
+            shell.hideMediaSession();
         }
     }
 

src/components/playback/nowplayinghelper.js

@@ -1,7 +1,7 @@
 export function getNowPlayingNames(nowPlayingItem, includeNonNameInfo) {
-    var topItem = nowPlayingItem;
+    let topItem = nowPlayingItem;
-    var bottomItem = null;
+    let bottomItem = null;
-    var topText = nowPlayingItem.Name;
+    let topText = nowPlayingItem.Name;
 
     if (nowPlayingItem.AlbumId && nowPlayingItem.MediaType === 'Audio') {
         topItem = {
@@ -21,7 +21,7 @@ export function getNowPlayingNames(nowPlayingItem, includeNonNameInfo) {
         }
     }
 
-    var bottomText = '';
+    let bottomText = '';
 
     if (nowPlayingItem.ArtistItems && nowPlayingItem.ArtistItems.length) {
         bottomItem = {
@@ -56,7 +56,7 @@ export function getNowPlayingNames(nowPlayingItem, includeNonNameInfo) {
         bottomText = nowPlayingItem.ProductionYear;
     }
 
-    var list = [];
+    const list = [];
 
     list.push({
         text: topText,

src/components/playback/playbackmanager.js

@@ -1110,8 +1110,8 @@ class PlaybackManager {
         self.increasePlaybackRate = function (player) {
             player = player || self._currentPlayer;
             if (player) {
-                let current = self.getPlaybackRate(player);
+                const current = self.getPlaybackRate(player);
-                let supported = self.getSupportedPlaybackRates(player);
+                const supported = self.getSupportedPlaybackRates(player);
 
                 let index = -1;
                 for (let i = 0, length = supported.length; i < length; i++) {
@@ -1129,8 +1129,8 @@ class PlaybackManager {
         self.decreasePlaybackRate = function (player) {
             player = player || self._currentPlayer;
             if (player) {
-                let current = self.getPlaybackRate(player);
+                const current = self.getPlaybackRate(player);
-                let supported = self.getSupportedPlaybackRates(player);
+                const supported = self.getSupportedPlaybackRates(player);
 
                 let index = -1;
                 for (let i = 0, length = supported.length; i < length; i++) {

src/components/playback/playbackorientation.js

@@ -2,7 +2,7 @@ import playbackManager from 'playbackManager';
 import layoutManager from 'layoutManager';
 import events from 'events';
 
-var orientationLocked;
+let orientationLocked;
 
 function onOrientationChangeSuccess() {
     orientationLocked = true;
@@ -14,15 +14,15 @@ function onOrientationChangeError(err) {
 }
 
 events.on(playbackManager, 'playbackstart', function (e, player, state) {
-    var isLocalVideo = player.isLocalPlayer && !player.isExternalPlayer && playbackManager.isPlayingVideo(player);
+    const isLocalVideo = player.isLocalPlayer && !player.isExternalPlayer && playbackManager.isPlayingVideo(player);
 
     if (isLocalVideo && layoutManager.mobile) {
         /* eslint-disable-next-line compat/compat */
-        var lockOrientation = window.screen.lockOrientation || window.screen.mozLockOrientation || window.screen.msLockOrientation || (window.screen.orientation && window.screen.orientation.lock);
+        const lockOrientation = window.screen.lockOrientation || window.screen.mozLockOrientation || window.screen.msLockOrientation || (window.screen.orientation && window.screen.orientation.lock);
 
         if (lockOrientation) {
             try {
-                var promise = lockOrientation('landscape');
+                const promise = lockOrientation('landscape');
                 if (promise.then) {
                     promise.then(onOrientationChangeSuccess, onOrientationChangeError);
                 } else {
@@ -39,7 +39,7 @@ events.on(playbackManager, 'playbackstart', function (e, player, state) {
 events.on(playbackManager, 'playbackstop', function (e, playbackStopInfo) {
     if (orientationLocked && !playbackStopInfo.nextMediaType) {
         /* eslint-disable-next-line compat/compat */
-        var unlockOrientation = window.screen.unlockOrientation || window.screen.mozUnlockOrientation || window.screen.msUnlockOrientation || (window.screen.orientation && window.screen.orientation.unlock);
+        const unlockOrientation = window.screen.unlockOrientation || window.screen.mozUnlockOrientation || window.screen.msUnlockOrientation || (window.screen.orientation && window.screen.orientation.unlock);
 
         if (unlockOrientation) {
             try {

src/components/playback/playerSelectionMenu.js

@@ -6,9 +6,10 @@ import playbackManager from 'playbackManager';
 import appRouter from 'appRouter';
 import globalize from 'globalize';
 import appHost from 'apphost';
+import * as autocast from 'autocast';
 
 function mirrorItem(info, player) {
-    var item = info.item;
+    const item = info.item;
 
     playbackManager.displayContent({
 
@@ -21,7 +22,7 @@ function mirrorItem(info, player) {
 
 function mirrorIfEnabled(info) {
     if (info && playbackManager.enableDisplayMirroring()) {
-        var getPlayerInfo = playbackManager.getPlayerInfo();
+        const getPlayerInfo = playbackManager.getPlayerInfo();
 
         if (getPlayerInfo) {
             if (!getPlayerInfo.isLocalPlayer && getPlayerInfo.supportedCommands.indexOf('DisplayContent') !== -1) {
@@ -44,7 +45,7 @@ function getTargetSecondaryText(target) {
 }
 
 function getIcon(target) {
-    var deviceType = target.deviceType;
+    let deviceType = target.deviceType;
 
     if (!deviceType && target.isLocalPlayer) {
         if (browser.tv) {
@@ -77,7 +78,7 @@ function getIcon(target) {
 }
 
 export function show(button) {
-    var currentPlayerInfo = playbackManager.getPlayerInfo();
+    const currentPlayerInfo = playbackManager.getPlayerInfo();
 
     if (currentPlayerInfo) {
         if (!currentPlayerInfo.isLocalPlayer) {
@@ -86,13 +87,13 @@ export function show(button) {
         }
     }
 
-    var currentPlayerId = currentPlayerInfo ? currentPlayerInfo.id : null;
+    const currentPlayerId = currentPlayerInfo ? currentPlayerInfo.id : null;
 
     loading.show();
 
     playbackManager.getTargets().then(function (targets) {
-        var menuItems = targets.map(function (t) {
+        const menuItems = targets.map(function (t) {
-            var name = t.name;
+            let name = t.name;
 
             if (t.appName && t.appName !== t.name) {
                 name += ' - ' + t.appName;
@@ -110,7 +111,7 @@ export function show(button) {
         import('actionsheet').then(({default: actionsheet}) => {
             loading.hide();
 
-            var menuOptions = {
+            const menuOptions = {
                 title: globalize.translate('HeaderPlayOn'),
                 items: menuItems,
                 positionTo: button,
@@ -126,7 +127,7 @@ export function show(button) {
             }
 
             actionsheet.show(menuOptions).then(function (id) {
-                var target = targets.filter(function (t) {
+                const target = targets.filter(function (t) {
                     return t.id === id;
                 })[0];
 
@@ -152,7 +153,7 @@ function showActivePlayerMenu(playerInfo) {
 function disconnectFromPlayer(currentDeviceName) {
     if (playbackManager.getSupportedCommands().indexOf('EndSession') !== -1) {
         import('dialog').then(({default: dialog}) => {
-            var menuItems = [];
+            const menuItems = [];
 
             menuItems.push({
                 name: globalize.translate('Yes'),
@@ -187,9 +188,9 @@ function disconnectFromPlayer(currentDeviceName) {
 }
 
 function showActivePlayerMenuInternal(dialogHelper, playerInfo) {
-    var html = '';
+    let html = '';
 
-    var dialogOptions = {
+    const dialogOptions = {
         removeOnClose: true
     };
 
@@ -198,11 +199,11 @@ function showActivePlayerMenuInternal(dialogHelper, playerInfo) {
     dialogOptions.exitAnimationDuration = 160;
     dialogOptions.autoFocus = false;
 
-    var dlg = dialogHelper.createDialog(dialogOptions);
+    const dlg = dialogHelper.createDialog(dialogOptions);
 
     dlg.classList.add('promptDialog');
 
-    var currentDeviceName = (playerInfo.deviceName || playerInfo.name);
+    const currentDeviceName = (playerInfo.deviceName || playerInfo.name);
 
     html += '<div class="promptDialogContent" style="padding:1.5em;">';
     html += '<h2 style="margin-top:.5em;">';
@@ -213,7 +214,7 @@ function showActivePlayerMenuInternal(dialogHelper, playerInfo) {
 
     if (playerInfo.supportedCommands.indexOf('DisplayContent') !== -1) {
         html += '<label class="checkboxContainer">';
-        var checkedHtml = playbackManager.enableDisplayMirroring() ? ' checked' : '';
+        const checkedHtml = playbackManager.enableDisplayMirroring() ? ' checked' : '';
         html += '<input type="checkbox" is="emby-checkbox" class="chkMirror"' + checkedHtml + '/>';
         html += '<span>' + globalize.translate('EnableDisplayMirroring') + '</span>';
         html += '</label>';
@@ -221,6 +222,14 @@ function showActivePlayerMenuInternal(dialogHelper, playerInfo) {
 
     html += '</div>';
 
+    if (autocast.supported()) {
+        html += '<div><label class="checkboxContainer">';
+        const checkedHtmlAC = autocast.isEnabled() ? ' checked' : '';
+        html += '<input type="checkbox" is="emby-checkbox" class="chkAutoCast"' + checkedHtmlAC + '/>';
+        html += '<span>' + globalize.translate('EnableAutoCast') + '</span>';
+        html += '</label></div>';
+    }
+
     html += '<div style="margin-top:1em;display:flex;justify-content: flex-end;">';
 
     html += '<button is="emby-button" type="button" class="button-flat btnRemoteControl promptDialogButton">' + globalize.translate('HeaderRemoteControl') + '</button>';
@@ -231,15 +240,21 @@ function showActivePlayerMenuInternal(dialogHelper, playerInfo) {
     html += '</div>';
     dlg.innerHTML = html;
 
-    var chkMirror = dlg.querySelector('.chkMirror');
+    const chkMirror = dlg.querySelector('.chkMirror');
 
     if (chkMirror) {
         chkMirror.addEventListener('change', onMirrorChange);
     }
 
-    var destination = '';
+    const chkAutoCast = dlg.querySelector('.chkAutoCast');
 
-    var btnRemoteControl = dlg.querySelector('.btnRemoteControl');
+    if (chkAutoCast) {
+        chkAutoCast.addEventListener('change', onAutoCastChange);
+    }
+
+    let destination = '';
+
+    const btnRemoteControl = dlg.querySelector('.btnRemoteControl');
     if (btnRemoteControl) {
         btnRemoteControl.addEventListener('click', function () {
             destination = 'nowplaying';
@@ -269,9 +284,13 @@ function onMirrorChange() {
     playbackManager.enableDisplayMirroring(this.checked);
 }
 
+function onAutoCastChange() {
+    autocast.enable(this.checked);
+}
+
 document.addEventListener('viewshow', function (e) {
-    var state = e.detail.state || {};
+    const state = e.detail.state || {};
-    var item = state.item;
+    const item = state.item;
 
     if (item && item.ServerId) {
         mirrorIfEnabled({

src/components/playback/playersettingsmenu.js

@@ -4,13 +4,13 @@ import globalize from 'globalize';
 import qualityoptions from 'qualityoptions';
 
 function showQualityMenu(player, btn) {
-    var videoStream = playbackManager.currentMediaSource(player).MediaStreams.filter(function (stream) {
+    const videoStream = playbackManager.currentMediaSource(player).MediaStreams.filter(function (stream) {
         return stream.Type === 'Video';
     })[0];
-    var videoWidth = videoStream ? videoStream.Width : null;
+    const videoWidth = videoStream ? videoStream.Width : null;
-    var videoHeight = videoStream ? videoStream.Height : null;
+    const videoHeight = videoStream ? videoStream.Height : null;
 
-    var options = qualityoptions.getVideoQualityOptions({
+    const options = qualityoptions.getVideoQualityOptions({
         currentMaxBitrate: playbackManager.getMaxStreamingBitrate(player),
         isAutomaticBitrateEnabled: playbackManager.enableAutomaticBitrateDetection(player),
         videoWidth: videoWidth,
@@ -18,8 +18,8 @@ function showQualityMenu(player, btn) {
         enableAuto: true
     });
 
-    var menuItems = options.map(function (o) {
+    const menuItems = options.map(function (o) {
-        var opt = {
+        const opt = {
             name: o.name,
             id: o.bitrate,
             asideText: o.secondaryText
@@ -32,7 +32,7 @@ function showQualityMenu(player, btn) {
         return opt;
     });
 
-    var selectedId = options.filter(function (o) {
+    let selectedId = options.filter(function (o) {
         return o.selected;
     });
 
@@ -42,7 +42,7 @@ function showQualityMenu(player, btn) {
         items: menuItems,
         positionTo: btn
     }).then(function (id) {
-        var bitrate = parseInt(id);
+        const bitrate = parseInt(id);
         if (bitrate !== selectedId) {
             playbackManager.setMaxStreamingBitrate({
                 enableAutomaticBitrateDetection: bitrate ? false : true,
@@ -53,8 +53,8 @@ function showQualityMenu(player, btn) {
 }
 
 function showRepeatModeMenu(player, btn) {
-    var menuItems = [];
+    const menuItems = [];
-    var currentValue = playbackManager.getRepeatMode(player);
+    const currentValue = playbackManager.getRepeatMode(player);
 
     menuItems.push({
         name: globalize.translate('RepeatAll'),
@@ -85,16 +85,16 @@ function showRepeatModeMenu(player, btn) {
 }
 
 function getQualitySecondaryText(player) {
-    var state = playbackManager.getPlayerState(player);
+    const state = playbackManager.getPlayerState(player);
 
-    var videoStream = playbackManager.currentMediaSource(player).MediaStreams.filter(function (stream) {
+    const videoStream = playbackManager.currentMediaSource(player).MediaStreams.filter(function (stream) {
         return stream.Type === 'Video';
     })[0];
 
-    var videoWidth = videoStream ? videoStream.Width : null;
+    const videoWidth = videoStream ? videoStream.Width : null;
-    var videoHeight = videoStream ? videoStream.Height : null;
+    const videoHeight = videoStream ? videoStream.Height : null;
 
-    var options = qualityoptions.getVideoQualityOptions({
+    const options = qualityoptions.getVideoQualityOptions({
         currentMaxBitrate: playbackManager.getMaxStreamingBitrate(player),
         isAutomaticBitrateEnabled: playbackManager.enableAutomaticBitrateDetection(player),
         videoWidth: videoWidth,
@@ -102,7 +102,7 @@ function getQualitySecondaryText(player) {
         enableAuto: true
     });
 
-    var selectedOption = options.filter(function (o) {
+    let selectedOption = options.filter(function (o) {
         return o.selected;
     });
 
@@ -111,7 +111,7 @@ function getQualitySecondaryText(player) {
     }
 
     selectedOption = selectedOption[0];
-    var text = selectedOption.name;
+    let text = selectedOption.name;
 
     if (selectedOption.autoText) {
         if (state.PlayState && state.PlayState.PlayMethod !== 'Transcode') {
@@ -126,8 +126,8 @@ function getQualitySecondaryText(player) {
 
 function showAspectRatioMenu(player, btn) {
     // each has a name and id
-    var currentId = playbackManager.getAspectRatio(player);
+    const currentId = playbackManager.getAspectRatio(player);
-    var menuItems = playbackManager.getSupportedAspectRatios(player).map(function (i) {
+    const menuItems = playbackManager.getSupportedAspectRatios(player).map(function (i) {
         return {
             id: i.id,
             name: i.name,
@@ -171,12 +171,12 @@ function showPlaybackRateMenu(player, btn) {
 }
 
 function showWithUser(options, player, user) {
-    var supportedCommands = playbackManager.getSupportedCommands(player);
+    const supportedCommands = playbackManager.getSupportedCommands(player);
 
-    var menuItems = [];
+    const menuItems = [];
     if (supportedCommands.indexOf('SetAspectRatio') !== -1) {
-        var currentAspectRatioId = playbackManager.getAspectRatio(player);
+        const currentAspectRatioId = playbackManager.getAspectRatio(player);
-        var currentAspectRatio = playbackManager.getSupportedAspectRatios(player).filter(function (i) {
+        const currentAspectRatio = playbackManager.getSupportedAspectRatios(player).filter(function (i) {
             return i.id === currentAspectRatioId;
         })[0];
 
@@ -199,7 +199,7 @@ function showWithUser(options, player, user) {
     }
 
     if (user && user.Policy.EnableVideoPlaybackTranscoding) {
-        var secondaryQualityText = getQualitySecondaryText(player);
+        const secondaryQualityText = getQualitySecondaryText(player);
 
         menuItems.push({
             name: globalize.translate('Quality'),
@@ -208,7 +208,7 @@ function showWithUser(options, player, user) {
         });
     }
 
-    var repeatMode = playbackManager.getRepeatMode(player);
+    const repeatMode = playbackManager.getRepeatMode(player);
 
     if (supportedCommands.indexOf('SetRepeatMode') !== -1 && playbackManager.currentMediaSource(player).RunTimeTicks) {
         menuItems.push({
@@ -243,14 +243,14 @@ function showWithUser(options, player, user) {
 }
 
 export function show(options) {
-    var player = options.player;
+    const player = options.player;
-    var currentItem = playbackManager.currentItem(player);
+    const currentItem = playbackManager.currentItem(player);
 
     if (!currentItem || !currentItem.ServerId) {
         return showWithUser(options, player, null);
     }
 
-    var apiClient = window.connectionManager.getApiClient(currentItem.ServerId);
+    const apiClient = window.connectionManager.getApiClient(currentItem.ServerId);
     return apiClient.getCurrentUser().then(function (user) {
         return showWithUser(options, player, user);
     });

src/components/playback/volumeosd.js

@@ -5,15 +5,15 @@ import browser from 'browser';
 import 'css!./iconosd';
 import 'material-icons';
 
-var currentPlayer;
+let currentPlayer;
-var osdElement;
+let osdElement;
-var iconElement;
+let iconElement;
-var progressElement;
+let progressElement;
 
-var enableAnimation;
+let enableAnimation;
 
 function getOsdElementHtml() {
-    var html = '';
+    let html = '';
 
     html += '<span class="material-icons iconOsdIcon volume_up"></span>';
 
@@ -23,7 +23,7 @@ function getOsdElementHtml() {
 }
 
 function ensureOsdElement() {
-    var elem = osdElement;
+    let elem = osdElement;
     if (!elem) {
         enableAnimation = browser.supportsCssAnimation();
 
@@ -46,11 +46,11 @@ function onHideComplete() {
     this.classList.add('hide');
 }
 
-var hideTimeout;
+let hideTimeout;
 function showOsd() {
     clearHideTimeout();
 
-    var elem = osdElement;
+    const elem = osdElement;
 
     dom.removeEventListener(elem, dom.whichTransitionEvent(), onHideComplete, {
         once: true
@@ -78,7 +78,7 @@ function clearHideTimeout() {
 function hideOsd() {
     clearHideTimeout();
 
-    var elem = osdElement;
+    const elem = osdElement;
     if (elem) {
         if (enableAnimation) {
             // trigger reflow
@@ -108,7 +108,7 @@ function updatePlayerVolumeState(isMuted, volume) {
 }
 
 function releaseCurrentPlayer() {
-    var player = currentPlayer;
+    const player = currentPlayer;
 
     if (player) {
         events.off(player, 'volumechange', onVolumeChanged);
@@ -118,7 +118,7 @@ function releaseCurrentPlayer() {
 }
 
 function onVolumeChanged(e) {
-    var player = this;
+    const player = this;
 
     ensureOsdElement();
 

src/components/playerstats/playerstats.js

@@ -263,6 +263,34 @@ import 'css!./playerstats';
             });
         }
 
+        if (videoStream.VideoRange) {
+            sessionStats.push({
+                label: globalize.translate('LabelVideoRange'),
+                value: videoStream.VideoRange
+            });
+        }
+
+        if (videoStream.ColorSpace) {
+            sessionStats.push({
+                label: globalize.translate('LabelColorSpace'),
+                value: videoStream.ColorSpace
+            });
+        }
+
+        if (videoStream.ColorTransfer) {
+            sessionStats.push({
+                label: globalize.translate('LabelColorTransfer'),
+                value: videoStream.ColorTransfer
+            });
+        }
+
+        if (videoStream.ColorPrimaries) {
+            sessionStats.push({
+                label: globalize.translate('LabelColorPrimaries'),
+                value: videoStream.ColorPrimaries
+            });
+        }
+
         const audioInfos = [];
 
         if (audioCodec) {
@@ -385,7 +413,7 @@ import 'css!./playerstats';
                 name: 'Original Media Info'
             });
 
-            var apiClient = window.connectionManager.getApiClient(playbackManager.currentItem(player).ServerId);
+            const apiClient = window.connectionManager.getApiClient(playbackManager.currentItem(player).ServerId);
             if (syncPlayManager.isSyncPlayEnabled() && apiClient.isMinServerVersion('10.6.0')) {
                 categories.push({
                     stats: getSyncPlayStats(),

src/components/playmenu.js

@@ -4,11 +4,11 @@ import playbackManager from 'playbackManager';
 import globalize from 'globalize';
 
 export function show(options) {
-    var item = options.item;
+    const item = options.item;
 
-    var resumePositionTicks = item.UserData ? item.UserData.PlaybackPositionTicks : null;
+    const resumePositionTicks = item.UserData ? item.UserData.PlaybackPositionTicks : null;
 
-    var playableItemId = item.Type === 'Program' ? item.ChannelId : item.Id;
+    const playableItemId = item.Type === 'Program' ? item.ChannelId : item.Id;
 
     if (!resumePositionTicks || item.IsFolder) {
         playbackManager.play({
@@ -18,7 +18,7 @@ export function show(options) {
         return;
     }
 
-    var menuItems = [];
+    const menuItems = [];
 
     menuItems.push({
         name: globalize.translate('ResumeAt', datetime.getDisplayRunningTime(resumePositionTicks)),

src/components/pluginManager.js

@@ -3,7 +3,7 @@ import globalize from 'globalize';
 /* eslint-disable indent */
 
     // TODO: replace with each plugin version
-    var cacheParam = new Date().getTime();
+    const cacheParam = new Date().getTime();
 
     class PluginManager {
         pluginsList = [];
@@ -13,7 +13,7 @@ import globalize from 'globalize';
         }
 
         #loadStrings(plugin) {
-            var strings = plugin.getTranslations ? plugin.getTranslations() : [];
+            const strings = plugin.getTranslations ? plugin.getTranslations() : [];
             return globalize.loadStrings({
                 name: plugin.id || plugin.packageName,
                 strings: strings
@@ -56,10 +56,10 @@ import globalize from 'globalize';
 
                 return new Promise((resolve, reject) => {
                     require([pluginSpec], (pluginFactory) => {
-                        var plugin = pluginFactory.default ? new pluginFactory.default() : new pluginFactory();
+                        const plugin = pluginFactory.default ? new pluginFactory.default() : new pluginFactory();
 
                         // See if it's already installed
-                        var existing = this.pluginsList.filter(function (p) {
+                        const existing = this.pluginsList.filter(function (p) {
                             return p.id === plugin.id;
                         })[0];
 
@@ -69,10 +69,10 @@ import globalize from 'globalize';
 
                         plugin.installUrl = pluginSpec;
 
-                        var separatorIndex = Math.max(pluginSpec.lastIndexOf('/'), pluginSpec.lastIndexOf('\\'));
+                        const separatorIndex = Math.max(pluginSpec.lastIndexOf('/'), pluginSpec.lastIndexOf('\\'));
                         plugin.baseUrl = pluginSpec.substring(0, separatorIndex);
 
-                        var paths = {};
+                        const paths = {};
                         paths[plugin.id] = plugin.baseUrl;
 
                         requirejs.config({
@@ -135,7 +135,7 @@ import globalize from 'globalize';
                 })[0];
             }
 
-            var url = plugin.baseUrl + '/' + path;
+            let url = plugin.baseUrl + '/' + path;
 
             if (addCacheParam) {
                 url += url.includes('?') ? '&' : '?';

src/components/qualityOptions.js

@@ -1,9 +1,9 @@
 import globalize from 'globalize';
 
 export function getVideoQualityOptions(options) {
-    var maxStreamingBitrate = options.currentMaxBitrate;
+    const maxStreamingBitrate = options.currentMaxBitrate;
-    var videoWidth = options.videoWidth;
+    let videoWidth = options.videoWidth;
-    var videoHeight = options.videoHeight;
+    const videoHeight = options.videoHeight;
 
     // If the aspect ratio is less than 16/9 (1.77), set the width as if it were pillarboxed.
     // 4:3 1440x1080 -> 1920x1080
@@ -11,9 +11,9 @@ export function getVideoQualityOptions(options) {
         videoWidth = videoHeight * (16 / 9);
     }
 
-    var maxAllowedWidth = videoWidth || 4096;
+    const maxAllowedWidth = videoWidth || 4096;
 
-    var qualityOptions = [];
+    const qualityOptions = [];
 
     if (maxAllowedWidth >= 3800) {
         qualityOptions.push({ name: '4K - 120 Mbps', maxHeight: 2160, bitrate: 120000000 });
@@ -65,7 +65,7 @@ export function getVideoQualityOptions(options) {
     qualityOptions.push({ name: '240p', maxHeight: 240, bitrate: 320000 });
     qualityOptions.push({ name: '144p', maxHeight: 144, bitrate: 192000 });
 
-    var autoQualityOption = {
+    const autoQualityOption = {
         name: globalize.translate('Auto'),
         bitrate: 0,
         selected: options.isAutomaticBitrateEnabled
@@ -76,9 +76,9 @@ export function getVideoQualityOptions(options) {
     }
 
     if (maxStreamingBitrate) {
-        var selectedIndex = -1;
+        let selectedIndex = -1;
-        for (var i = 0, length = qualityOptions.length; i < length; i++) {
+        for (let i = 0, length = qualityOptions.length; i < length; i++) {
-            var option = qualityOptions[i];
+            const option = qualityOptions[i];
 
             if (selectedIndex === -1 && option.bitrate <= maxStreamingBitrate) {
                 selectedIndex = i;
@@ -89,7 +89,7 @@ export function getVideoQualityOptions(options) {
             selectedIndex = qualityOptions.length - 1;
         }
 
-        var currentQualityOption = qualityOptions[selectedIndex];
+        const currentQualityOption = qualityOptions[selectedIndex];
 
         if (!options.isAutomaticBitrateEnabled) {
             currentQualityOption.selected = true;
@@ -102,9 +102,9 @@ export function getVideoQualityOptions(options) {
 }
 
 export function getAudioQualityOptions(options) {
-    var maxStreamingBitrate = options.currentMaxBitrate;
+    const maxStreamingBitrate = options.currentMaxBitrate;
 
-    var qualityOptions = [];
+    const qualityOptions = [];
 
     qualityOptions.push({ name: '2 Mbps', bitrate: 2000000 });
     qualityOptions.push({ name: '1.5 Mbps', bitrate: 1500000 });
@@ -116,7 +116,7 @@ export function getAudioQualityOptions(options) {
     qualityOptions.push({ name: '96 kbps', bitrate: 96000 });
     qualityOptions.push({ name: '64 kbps', bitrate: 64000 });
 
-    var autoQualityOption = {
+    const autoQualityOption = {
         name: globalize.translate('Auto'),
         bitrate: 0,
         selected: options.isAutomaticBitrateEnabled
@@ -127,9 +127,9 @@ export function getAudioQualityOptions(options) {
     }
 
     if (maxStreamingBitrate) {
-        var selectedIndex = -1;
+        let selectedIndex = -1;
-        for (var i = 0, length = qualityOptions.length; i < length; i++) {
+        for (let i = 0, length = qualityOptions.length; i < length; i++) {
-            var option = qualityOptions[i];
+            const option = qualityOptions[i];
 
             if (selectedIndex === -1 && option.bitrate <= maxStreamingBitrate) {
                 selectedIndex = i;
@@ -140,7 +140,7 @@ export function getAudioQualityOptions(options) {
             selectedIndex = qualityOptions.length - 1;
         }
 
-        var currentQualityOption = qualityOptions[selectedIndex];
+        const currentQualityOption = qualityOptions[selectedIndex];
 
         if (!options.isAutomaticBitrateEnabled) {
             currentQualityOption.selected = true;

src/components/quickConnectSettings/quickConnectSettings.js

@@ -0,0 +1,41 @@
+import globalize from 'globalize';
+import toast from 'toast';
+
+export class QuickConnectSettings {
+    constructor() { }
+
+    authorize(code) {
+        const url = ApiClient.getUrl('/QuickConnect/Authorize?Code=' + code);
+        ApiClient.ajax({
+            type: 'POST',
+            url: url
+        }, true).then(() => {
+            toast(globalize.translate('QuickConnectAuthorizeSuccess'));
+        }).catch(() => {
+            toast(globalize.translate('QuickConnectAuthorizeFail'));
+        });
+
+        // prevent bubbling
+        return false;
+    }
+
+    activate() {
+        const url = ApiClient.getUrl('/QuickConnect/Activate');
+        return ApiClient.ajax({
+            type: 'POST',
+            url: url
+        }).then(() => {
+            toast(globalize.translate('QuickConnectActivationSuccessful'));
+            return true;
+        }).catch((e) => {
+            console.error('Error activating quick connect. Error:', e);
+            Dashboard.alert({
+                title: globalize.translate('HeaderError'),
+                message: globalize.translate('DefaultErrorMessage')
+            });
+            throw e;
+        });
+    }
+}
+
+export default QuickConnectSettings;

src/components/require/requirecss.js

@@ -1,7 +1,7 @@
 define(function () {
     'use strict';
 
-    var requireCss = {};
+    const requireCss = {};
 
     requireCss.normalize = function (name, normalize) {
         if (name.substr(name.length - 4, 4) === '.css') {
@@ -11,7 +11,7 @@ define(function () {
         return normalize(name);
     };
 
-    var importedCss = [];
+    let importedCss = [];
 
     function isLoaded(url) {
         return importedCss.indexOf(url) !== -1;
@@ -27,14 +27,14 @@ define(function () {
 
     requireCss.load = function (cssId, req, load, config) {
         // Somehow if the url starts with /css, require will get all screwed up since this extension is also called css
-        var srch = 'components/require/requirecss';
+        const srch = 'components/require/requirecss';
-        var index = cssId.indexOf(srch);
+        const index = cssId.indexOf(srch);
 
         if (index !== -1) {
             cssId = 'css' + cssId.substring(index + srch.length);
         }
 
-        var url = cssId + '.css';
+        let url = cssId + '.css';
 
         if (url.indexOf('://') === -1) {
             url = config.baseUrl + url;
@@ -43,13 +43,13 @@ define(function () {
         if (!isLoaded(url)) {
             importedCss.push(url);
 
-            var link = document.createElement('link');
+            const link = document.createElement('link');
 
             link.setAttribute('rel', 'stylesheet');
             link.setAttribute('type', 'text/css');
             link.onload = load;
 
-            var linkUrl = url;
+            let linkUrl = url;
 
             if (config.urlArgs) {
                 linkUrl += config.urlArgs(cssId, url);

src/components/require/requiretext.js

@@ -2,7 +2,7 @@ define(function () {
     'use strict';
 
     // hack to work around the server's auto-redirection feature
-    var addRedirectPrevention = window.dashboardVersion != null && window.Dashboard;
+    const addRedirectPrevention = window.dashboardVersion != null && window.Dashboard;
 
     return {
 
@@ -25,7 +25,7 @@ define(function () {
                 url += 'r=0';
             }
 
-            var xhr = new XMLHttpRequest();
+            const xhr = new XMLHttpRequest();
             xhr.open('GET', url, true);
 
             xhr.onload = function (e) {

src/components/serviceworker/notifications.js

@@ -2,7 +2,7 @@
 (function () {
     'use strict';
 
-    var connectionManager;
+    let connectionManager;
 
     function getApiClient(serverId) {
         if (connectionManager) {
@@ -15,8 +15,7 @@
         return getApiClient(serverId).then(function (apiClient) {
             switch (action) {
                 case 'cancel-install':
-                    var id = data.id;
+                    return apiClient.cancelPackageInstallation(data.id);
-                    return apiClient.cancelPackageInstallation(id);
                 case 'restart':
                     return apiClient.restartServer();
                 default:
@@ -28,12 +27,12 @@
 
     /* eslint-disable-next-line no-restricted-globals -- self is valid in a serviceworker environment */
     self.addEventListener('notificationclick', function (event) {
-        var notification = event.notification;
+        const notification = event.notification;
         notification.close();
 
-        var data = notification.data;
+        const data = notification.data;
-        var serverId = data.serverId;
+        const serverId = data.serverId;
-        var action = event.action;
+        const action = event.action;
 
         if (!action) {
             clients.openWindow('/');

src/components/subtitleeditor/subtitleeditor.js

@@ -18,9 +18,9 @@ let currentItem;
 let hasChanges;
 
 function downloadRemoteSubtitles(context, id) {
-    let url = 'Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + id;
+    const url = 'Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + id;
 
-    let apiClient = window.connectionManager.getApiClient(currentItem.ServerId);
+    const apiClient = window.connectionManager.getApiClient(currentItem.ServerId);
     apiClient.ajax({
 
         type: 'POST',
@@ -38,7 +38,7 @@ function downloadRemoteSubtitles(context, id) {
 }
 
 function deleteLocalSubtitle(context, index) {
-    let msg = globalize.translate('MessageAreYouSureDeleteSubtitles');
+    const msg = globalize.translate('MessageAreYouSureDeleteSubtitles');
 
     import('confirm').then(({default: confirm}) => {
         confirm({
@@ -51,10 +51,10 @@ function deleteLocalSubtitle(context, index) {
         }).then(function () {
             loading.show();
 
-            let itemId = currentItem.Id;
+            const itemId = currentItem.Id;
-            let url = 'Videos/' + itemId + '/Subtitles/' + index;
+            const url = 'Videos/' + itemId + '/Subtitles/' + index;
 
-            let apiClient = window.connectionManager.getApiClient(currentItem.ServerId);
+            const apiClient = window.connectionManager.getApiClient(currentItem.ServerId);
 
             apiClient.ajax({
 
@@ -70,9 +70,9 @@ function deleteLocalSubtitle(context, index) {
 }
 
 function fillSubtitleList(context, item) {
-    let streams = item.MediaStreams || [];
+    const streams = item.MediaStreams || [];
 
-    let subs = streams.filter(function (s) {
+    const subs = streams.filter(function (s) {
         return s.Type === 'Subtitle';
     });
 
@@ -86,7 +86,7 @@ function fillSubtitleList(context, item) {
         html += subs.map(function (s) {
             let itemHtml = '';
 
-            let tagName = layoutManager.tv ? 'button' : 'div';
+            const tagName = layoutManager.tv ? 'button' : 'div';
             let className = layoutManager.tv && s.Path ? 'listItem listItem-border btnDelete' : 'listItem listItem-border';
 
             if (layoutManager.tv) {
@@ -126,7 +126,7 @@ function fillSubtitleList(context, item) {
         html += '</div>';
     }
 
-    let elem = context.querySelector('.subtitleList');
+    const elem = context.querySelector('.subtitleList');
 
     if (subs.length) {
         elem.classList.remove('hide');
@@ -137,18 +137,18 @@ function fillSubtitleList(context, item) {
 }
 
 function fillLanguages(context, apiClient, languages) {
-    let selectLanguage = context.querySelector('#selectLanguage');
+    const selectLanguage = context.querySelector('#selectLanguage');
 
     selectLanguage.innerHTML = languages.map(function (l) {
         return '<option value="' + l.ThreeLetterISOLanguageName + '">' + l.DisplayName + '</option>';
     });
 
-    let lastLanguage = userSettings.get('subtitleeditor-language');
+    const lastLanguage = userSettings.get('subtitleeditor-language');
     if (lastLanguage) {
         selectLanguage.value = lastLanguage;
     } else {
         apiClient.getCurrentUser().then(function (user) {
-            let lang = user.Configuration.SubtitleLanguagePreference;
+            const lang = user.Configuration.SubtitleLanguagePreference;
 
             if (lang) {
                 selectLanguage.value = lang;
@@ -171,9 +171,9 @@ function renderSearchResults(context, results) {
     context.querySelector('.noSearchResults').classList.add('hide');
 
     for (let i = 0, length = results.length; i < length; i++) {
-        let result = results[i];
+        const result = results[i];
 
-        let provider = result.ProviderName;
+        const provider = result.ProviderName;
 
         if (provider !== lastProvider) {
             if (i > 0) {
@@ -184,7 +184,7 @@ function renderSearchResults(context, results) {
             lastProvider = provider;
         }
 
-        let tagName = layoutManager.tv ? 'button' : 'div';
+        const tagName = layoutManager.tv ? 'button' : 'div';
         let className = layoutManager.tv ? 'listItem listItem-border btnOptions' : 'listItem listItem-border';
         if (layoutManager.tv) {
             className += ' listItem-focusscale listItem-button';
@@ -194,7 +194,7 @@ function renderSearchResults(context, results) {
 
         html += '<span class="listItemIcon material-icons closed_caption"></span>';
 
-        let bodyClass = result.Comment || result.IsHashMatch ? 'three-line' : 'two-line';
+        const bodyClass = result.Comment || result.IsHashMatch ? 'three-line' : 'two-line';
 
         html += '<div class="listItemBody ' + bodyClass + '">';
 
@@ -231,7 +231,7 @@ function renderSearchResults(context, results) {
         html += '</div>';
     }
 
-    let elem = context.querySelector('.subtitleResults');
+    const elem = context.querySelector('.subtitleResults');
     elem.innerHTML = html;
 
     loading.hide();
@@ -242,8 +242,8 @@ function searchForSubtitles(context, language) {
 
     loading.show();
 
-    let apiClient = window.connectionManager.getApiClient(currentItem.ServerId);
+    const apiClient = window.connectionManager.getApiClient(currentItem.ServerId);
-    let url = apiClient.getUrl('Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + language);
+    const url = apiClient.getUrl('Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + language);
 
     apiClient.getJSON(url).then(function (results) {
         renderSearchResults(context, results);
@@ -258,7 +258,7 @@ function reload(context, apiClient, itemId) {
 
         fillSubtitleList(context, item);
         let file = item.Path || '';
-        let index = Math.max(file.lastIndexOf('/'), file.lastIndexOf('\\'));
+        const index = Math.max(file.lastIndexOf('/'), file.lastIndexOf('\\'));
         if (index > -1) {
             file = file.substring(index + 1);
         }
@@ -282,9 +282,9 @@ function reload(context, apiClient, itemId) {
 }
 
 function onSearchSubmit(e) {
-    let form = this;
+    const form = this;
 
-    let lang = form.querySelector('#selectLanguage', form).value;
+    const lang = form.querySelector('#selectLanguage', form).value;
 
     searchForSubtitles(dom.parentWithClass(form, 'formDialogContent'), lang);
 
@@ -293,10 +293,10 @@ function onSearchSubmit(e) {
 }
 
 function onSubtitleListClick(e) {
-    let btnDelete = dom.parentWithClass(e.target, 'btnDelete');
+    const btnDelete = dom.parentWithClass(e.target, 'btnDelete');
     if (btnDelete) {
-        let index = btnDelete.getAttribute('data-index');
+        const index = btnDelete.getAttribute('data-index');
-        let context = dom.parentWithClass(btnDelete, 'subtitleEditorDialog');
+        const context = dom.parentWithClass(btnDelete, 'subtitleEditorDialog');
         deleteLocalSubtitle(context, index);
     }
 }
@@ -305,14 +305,14 @@ function onSubtitleResultsClick(e) {
     let subtitleId;
     let context;
 
-    let btnOptions = dom.parentWithClass(e.target, 'btnOptions');
+    const btnOptions = dom.parentWithClass(e.target, 'btnOptions');
     if (btnOptions) {
         subtitleId = btnOptions.getAttribute('data-subid');
         context = dom.parentWithClass(btnOptions, 'subtitleEditorDialog');
         showDownloadOptions(btnOptions, context, subtitleId);
     }
 
-    let btnDownload = dom.parentWithClass(e.target, 'btnDownload');
+    const btnDownload = dom.parentWithClass(e.target, 'btnDownload');
     if (btnDownload) {
         subtitleId = btnDownload.getAttribute('data-subid');
         context = dom.parentWithClass(btnDownload, 'subtitleEditorDialog');
@@ -321,7 +321,7 @@ function onSubtitleResultsClick(e) {
 }
 
 function showDownloadOptions(button, context, subtitleId) {
-    let items = [];
+    const items = [];
 
     items.push({
         name: globalize.translate('Download'),
@@ -347,7 +347,7 @@ function showDownloadOptions(button, context, subtitleId) {
 
 function centerFocus(elem, horiz, on) {
     import('scrollHelper').then(({default: scrollHelper}) => {
-        let fn = on ? 'on' : 'off';
+        const fn = on ? 'on' : 'off';
         scrollHelper.centerFocus[fn](elem, horiz);
     });
 }
@@ -355,9 +355,9 @@ function centerFocus(elem, horiz, on) {
 function showEditorInternal(itemId, serverId, template) {
     hasChanges = false;
 
-    let apiClient = window.connectionManager.getApiClient(serverId);
+    const apiClient = window.connectionManager.getApiClient(serverId);
     return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
-        let dialogOptions = {
+        const dialogOptions = {
             removeOnClose: true,
             scrollY: false
         };
@@ -368,7 +368,7 @@ function showEditorInternal(itemId, serverId, template) {
             dialogOptions.size = 'small';
         }
 
-        let dlg = dialogHelper.createDialog(dialogOptions);
+        const dlg = dialogHelper.createDialog(dialogOptions);
 
         dlg.classList.add('formDialog');
         dlg.classList.add('subtitleEditorDialog');
@@ -379,7 +379,7 @@ function showEditorInternal(itemId, serverId, template) {
 
         dlg.querySelector('.subtitleSearchForm').addEventListener('submit', onSearchSubmit);
 
-        let btnSubmit = dlg.querySelector('.btnSubmit');
+        const btnSubmit = dlg.querySelector('.btnSubmit');
 
         if (layoutManager.tv) {
             centerFocus(dlg.querySelector('.formDialogContent'), false, true);
@@ -388,7 +388,7 @@ function showEditorInternal(itemId, serverId, template) {
             btnSubmit.classList.add('hide');
         }
 
-        let editorContent = dlg.querySelector('.formDialogContent');
+        const editorContent = dlg.querySelector('.formDialogContent');
 
         dlg.querySelector('.subtitleList').addEventListener('click', onSubtitleListClick);
         dlg.querySelector('.subtitleResults').addEventListener('click', onSubtitleResultsClick);

src/components/syncPlay/groupSelectionMenu.js

@@ -12,7 +12,7 @@ import playbackPermissionManager from 'playbackPermissionManager';
  * @returns {string} The player's id.
  */
 function getActivePlayerId () {
-    var info = playbackManager.getPlayerInfo();
+    const info = playbackManager.getPlayerInfo();
     return info ? info.id : null;
 }
 
@@ -38,7 +38,7 @@ function showNewJoinGroupSelection (button, user, apiClient) {
 
     apiClient.getSyncPlayGroups().then(function (response) {
         response.json().then(function (groups) {
-            var menuItems = groups.map(function (group) {
+            const menuItems = groups.map(function (group) {
                 return {
                     name: group.PlayingItemName,
                     icon: 'group',
@@ -72,7 +72,7 @@ function showNewJoinGroupSelection (button, user, apiClient) {
                 return;
             }
 
-            var menuOptions = {
+            const menuOptions = {
                 title: globalize.translate('HeaderSyncPlaySelectGroup'),
                 items: menuItems,
                 positionTo: button,
@@ -129,7 +129,7 @@ function showLeaveGroupSelection (button, user, apiClient) {
         secondaryText: globalize.translate('LabelSyncPlayLeaveGroupDescription')
     }];
 
-    var menuOptions = {
+    const menuOptions = {
         title: globalize.translate('HeaderSyncPlayEnabled'),
         items: menuItems,
         positionTo: button,

src/components/syncPlay/syncPlayManager.js

@@ -40,7 +40,7 @@ function waitForEventOnce(emitter, eventType, timeout) {
  * @returns {string} The player's id.
  */
 function getActivePlayerId() {
-    var info = playbackManager.getPlayerInfo();
+    const info = playbackManager.getPlayerInfo();
     return info ? info.id : null;
 }
 
@@ -276,7 +276,7 @@ class SyncPlayManager {
      * Removes the bindings to the current player's events.
      */
     releaseCurrentPlayer () {
-        var player = this.currentPlayer;
+        const player = this.currentPlayer;
         if (player) {
             events.off(player, 'unpause', this._onPlayerUnpause);
             events.off(player, 'pause', this._onPlayerPause);
@@ -426,7 +426,7 @@ class SyncPlayManager {
             serverId: serverId
         }).then(() => {
             waitForEventOnce(this, 'playbackstart', WaitForEventDefaultTimeout).then(() => {
-                var sessionId = getActivePlayerId();
+                const sessionId = getActivePlayerId();
                 if (!sessionId) {
                     console.error('Missing sessionId!');
                     toast({
@@ -659,7 +659,7 @@ class SyncPlayManager {
      * Overrides PlaybackManager's unpause method.
      */
     playRequest (player) {
-        var apiClient = window.connectionManager.currentApiClient();
+        const apiClient = window.connectionManager.currentApiClient();
         apiClient.requestSyncPlayStart();
     }
 
@@ -667,7 +667,7 @@ class SyncPlayManager {
      * Overrides PlaybackManager's pause method.
      */
     pauseRequest (player) {
-        var apiClient = window.connectionManager.currentApiClient();
+        const apiClient = window.connectionManager.currentApiClient();
         apiClient.requestSyncPlayPause();
         // Pause locally as well, to give the user some little control
         playbackManager._localUnpause(player);
@@ -677,7 +677,7 @@ class SyncPlayManager {
      * Overrides PlaybackManager's seek method.
      */
     seekRequest (PositionTicks, player) {
-        var apiClient = window.connectionManager.currentApiClient();
+        const apiClient = window.connectionManager.currentApiClient();
         apiClient.requestSyncPlaySeek({
             PositionTicks: PositionTicks
         });

src/components/tabbedview/tabbedview.js

@@ -4,7 +4,7 @@ import layoutManager from 'layoutManager';
 import 'emby-tabs';
 
 function onViewDestroy(e) {
-    var tabControllers = this.tabControllers;
+    const tabControllers = this.tabControllers;
 
     if (tabControllers) {
         tabControllers.forEach(function (t) {
@@ -32,9 +32,9 @@ class TabbedView {
         this.view = view;
         this.params = params;
 
-        var self = this;
+        const self = this;
 
-        var currentTabIndex = parseInt(params.tab || this.getDefaultTabIndex(params.parentId));
+        let currentTabIndex = parseInt(params.tab || this.getDefaultTabIndex(params.parentId));
         this.initialTabIndex = currentTabIndex;
 
         function validateTabLoad(index) {
@@ -44,7 +44,7 @@ class TabbedView {
         function loadTab(index, previousIndex) {
             validateTabLoad(index).then(function () {
                 self.getTabController(index).then(function (controller) {
-                    var refresh = !controller.refreshed;
+                    const refresh = !controller.refreshed;
 
                     controller.onResume({
                         autoFocus: previousIndex == null && layoutManager.tv,
@@ -64,10 +64,10 @@ class TabbedView {
         }
 
         function onTabChange(e) {
-            var newIndex = parseInt(e.detail.selectedTabIndex);
+            const newIndex = parseInt(e.detail.selectedTabIndex);
-            var previousIndex = e.detail.previousIndex;
+            const previousIndex = e.detail.previousIndex;
 
-            var previousTabController = previousIndex == null ? null : self.tabControllers[previousIndex];
+            const previousTabController = previousIndex == null ? null : self.tabControllers[previousIndex];
             if (previousTabController && previousTabController.onPause) {
                 previousTabController.onPause();
             }
@@ -92,7 +92,7 @@ class TabbedView {
         this.setTitle();
         backdrop.clearBackdrop();
 
-        var currentTabController = this.currentTabController;
+        const currentTabController = this.currentTabController;
 
         if (!currentTabController) {
             mainTabsManager.selectedTabIndex(this.initialTabIndex);
@@ -102,7 +102,7 @@ class TabbedView {
     }
 
     onPause() {
-        var currentTabController = this.currentTabController;
+        const currentTabController = this.currentTabController;
 
         if (currentTabController && currentTabController.onPause) {
             currentTabController.onPause();

src/components/upnextdialog/upnextdialog.css

@@ -1,9 +1,10 @@
-.upNextDialog {
+.upNextContainer {
     position: fixed;
-    left: 0;
-    bottom: 0;
     right: 0;
-    padding: 1%;
+    bottom: 0;
+    width: 30em;
+    padding: 1em;
+    margin: 0 2em 2em 0;
     display: flex;
     flex-direction: column;
     will-change: transform, opacity;
@@ -22,13 +23,18 @@
     font-weight: 500;
 }
 
-.upNextDialog-poster {
+.upNextDialog-nextVideoText,
-    max-width: 40%;
+.upNextDialog-title {
-    max-height: 15%;
+    width: 25.5em;
-    position: relative;
+    white-space: nowrap;
-    margin-right: 1em;
+    overflow: hidden;
-    flex-shrink: 0;
+    text-overflow: ellipsis;
-    margin-bottom: 0.5em;
+}
+
+.upNextDialog-buttons {
+    width: 29.75em;
+    justify-content: end;
+    align-content: flex-end;
 }
 
 .upNextDialog-button {
@@ -40,34 +46,4 @@
     .upNextDialog {
         flex-direction: row;
     }
-
-    .upNextDialog-poster {
-        max-width: initial;
-        max-height: initial;
-        width: 10%;
-        margin-bottom: 0;
-    }
-}
-
-@media all and (max-width: 50em) {
-    .upNextDialog-overview {
-        display: none !important;
-    }
-}
-
-.upNextDialog-poster-img {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: auto;
-    width: 100%;
-    box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
-    user-drag: none;
-    border: 0;
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-drag: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
 }

src/components/upnextdialog/upnextdialog.js

@@ -14,84 +14,9 @@ import 'flexStyles';
 
     const transitionEndEventName = dom.whichTransitionEvent();
 
-    function seriesImageUrl(item, options) {
-        if (item.Type !== 'Episode') {
-            return null;
-        }
-
-        options = options || {};
-        options.type = options.type || 'Primary';
-
-        if (options.type === 'Primary') {
-            if (item.SeriesPrimaryImageTag) {
-                options.tag = item.SeriesPrimaryImageTag;
-
-                return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
-            }
-        }
-
-        if (options.type === 'Thumb') {
-            if (item.SeriesThumbImageTag) {
-                options.tag = item.SeriesThumbImageTag;
-
-                return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
-            }
-            if (item.ParentThumbImageTag) {
-                options.tag = item.ParentThumbImageTag;
-
-                return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options);
-            }
-        }
-
-        return null;
-    }
-
-    function imageUrl(item, options) {
-        options = options || {};
-        options.type = options.type || 'Primary';
-
-        if (item.ImageTags && item.ImageTags[options.type]) {
-            options.tag = item.ImageTags[options.type];
-            return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options);
-        }
-
-        if (options.type === 'Primary') {
-            if (item.AlbumId && item.AlbumPrimaryImageTag) {
-                options.tag = item.AlbumPrimaryImageTag;
-                return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options);
-            }
-        }
-
-        return null;
-    }
-
-    function setPoster(osdPoster, item, secondaryItem) {
-        if (item) {
-            let imgUrl = seriesImageUrl(item, { type: 'Primary' }) ||
-                seriesImageUrl(item, { type: 'Thumb' }) ||
-                imageUrl(item, { type: 'Primary' });
-
-            if (!imgUrl && secondaryItem) {
-                imgUrl = seriesImageUrl(secondaryItem, { type: 'Primary' }) ||
-                    seriesImageUrl(secondaryItem, { type: 'Thumb' }) ||
-                    imageUrl(secondaryItem, { type: 'Primary' });
-            }
-
-            if (imgUrl) {
-                osdPoster.innerHTML = '<img class="upNextDialog-poster-img" src="' + imgUrl + '" />';
-                return;
-            }
-        }
-
-        osdPoster.innerHTML = '';
-    }
-
     function getHtml() {
         let html = '';
 
-        html += '<div class="upNextDialog-poster">';
-        html += '</div>';
-
         html += '<div class="flex flex-direction-column flex-grow">';
 
         html += '<h2 class="upNextDialog-nextVideoText" style="margin:.25em 0;">&nbsp;</h2>';
@@ -101,8 +26,6 @@ import 'flexStyles';
         html += '<div class="flex flex-direction-row upNextDialog-mediainfo">';
         html += '</div>';
 
-        html += '<div class="upNextDialog-overview" style="margin-top:1em;"></div>';
-
         html += '<div class="flex flex-direction-row upNextDialog-buttons" style="margin-top:1em;">';
 
         html += '<button type="button" is="emby-button" class="raised raised-mini btnStartNow upNextDialog-button">';
@@ -145,11 +68,11 @@ import 'flexStyles';
 
         const elem = instance.options.parent;
 
-        setPoster(elem.querySelector('.upNextDialog-poster'), item);
-
-        elem.querySelector('.upNextDialog-overview').innerHTML = item.Overview || '';
-
         elem.querySelector('.upNextDialog-mediainfo').innerHTML = mediaInfo.getPrimaryMediaInfoHtml(item, {
+            criticRating: false,
+            originalAirDate: false,
+            starRating: false,
+            subtitles: false
         });
 
         let title = itemHelper.getDisplayName(item);

src/components/viewContainer.js

@@ -14,7 +14,7 @@ import 'css!components/viewManager/viewContainer';
             }
 
             controllerUrl = Dashboard.getPluginUrl(controllerUrl);
-            let apiUrl = ApiClient.getUrl('/web/' + controllerUrl);
+            const apiUrl = ApiClient.getUrl('/web/' + controllerUrl);
             return import(apiUrl).then((ControllerFactory) => {
                 options.controllerFactory = ControllerFactory;
             });
@@ -37,7 +37,6 @@ import 'css!components/viewManager/viewContainer';
             const newViewInfo = normalizeNewView(options, isPluginpage);
             const newView = newViewInfo.elem;
 
-            return new Promise((resolve) => {
             const currentPage = allPages[pageIndex];
 
             if (currentPage) {
@@ -83,7 +82,11 @@ import 'css!components/viewManager/viewContainer';
             }
 
             allPages[pageIndex] = view;
-                setControllerClass(view, options).then(() => {
+
+            return setControllerClass(view, options)
+                // Timeout for polyfilled CustomElements (webOS 1.2)
+                .then(() => new Promise((resolve) => setTimeout(resolve, 0)))
+                .then(() => {
                     if (onBeforeChange) {
                         onBeforeChange(view, false, options);
                     }
@@ -101,8 +104,7 @@ import 'css!components/viewManager/viewContainer';
                         $.mobile.activePage = view;
                     }
 
-                    resolve(view);
+                    return view;
-                });
                 });
         }
     }

src/config.json

@@ -1 +0,0 @@
-config.template.json

src/config.json

@@ -0,0 +1,40 @@
+{
+  "multiserver": false,
+  "themes": [
+    {
+      "name": "Apple TV",
+      "id": "appletv"
+    }, {
+      "name": "Blue Radiance",
+      "id": "blueradiance"
+    }, {
+      "name": "Dark",
+      "id": "dark",
+      "default": true
+    }, {
+      "name": "Light",
+      "id": "light"
+    }, {
+      "name": "Purple Haze",
+      "id": "purplehaze"
+    }, {
+      "name": "WMC",
+      "id": "wmc"
+    }
+  ],
+  "servers": [],
+  "plugins": [
+    "plugins/playAccessValidation/plugin",
+    "plugins/experimentalWarnings/plugin",
+    "plugins/htmlAudioPlayer/plugin",
+    "plugins/htmlVideoPlayer/plugin",
+    "plugins/photoPlayer/plugin",
+    "plugins/comicsPlayer/plugin",
+    "plugins/bookPlayer/plugin",
+    "plugins/youtubePlayer/plugin",
+    "plugins/backdropScreensaver/plugin",
+    "plugins/logoScreensaver/plugin",
+    "plugins/sessionPlayer/plugin",
+    "plugins/chromecastPlayer/plugin"
+  ]
+}

src/config.template.json

@@ -1,40 +0,0 @@
-{
-    "multiserver": false,
-    "servers": [],
-    "themes": [
-        {
-            "name": "Apple TV",
-            "id": "appletv"
-        }, {
-            "name": "Blue Radiance",
-            "id": "blueradiance"
-        }, {
-            "name": "Dark",
-            "id": "dark",
-            "default": true
-        }, {
-            "name": "Light",
-            "id": "light"
-        }, {
-            "name": "Purple Haze",
-            "id": "purplehaze"
-        }, {
-            "name": "WMC",
-            "id": "wmc"
-        }
-    ],
-    "plugins": [
-        "plugins/playAccessValidation/plugin",
-        "plugins/experimentalWarnings/plugin",
-        "plugins/htmlAudioPlayer/plugin",
-        "plugins/htmlVideoPlayer/plugin",
-        "plugins/photoPlayer/plugin",
-        "plugins/comicsPlayer/plugin",
-        "plugins/bookPlayer/plugin",
-        "plugins/youtubePlayer/plugin",
-        "plugins/backdropScreensaver/plugin",
-        "plugins/logoScreensaver/plugin",
-        "plugins/sessionPlayer/plugin",
-        "plugins/chromecastPlayer/plugin"
-    ]
-}

src/controllers/dashboard/dashboard.html

@@ -16,6 +16,9 @@
                     </div>
 
                     <div style="margin-top:1em;">
+                        <button is="emby-button" type="button" class="raised btnRefresh">
+                            <span>${ButtonScanAllLibraries}</span>
+                        </button>
                         <button is="emby-button" type="button" id="btnRestartServer" class="raised" onclick="DashboardPage.restart(this);" style="margin-left:0;">
                             <span>${Restart}</span>
                         </button>

src/controllers/dashboard/dashboard.js

@@ -3,6 +3,7 @@ import events from 'events';
 import itemHelper from 'itemHelper';
 import serverNotifications from 'serverNotifications';
 import dom from 'dom';
+import taskButton from 'scripts/taskbutton';
 import globalize from 'globalize';
 import * as datefns from 'date-fns';
 import dfnshelper from 'dfnshelper';
@@ -550,13 +551,13 @@ import 'emby-itemscontainer';
                 row.classList.remove('playingSession');
             }
 
-            if (session.ServerId && session.SupportedCommands.indexOf('DisplayMessage') !== -1 && session.DeviceId !== window.connectionManager.deviceId()) {
+            if (session.ServerId && session.SupportedCommands.indexOf('DisplayMessage') !== -1) {
                 row.querySelector('.btnSessionSendMessage').classList.remove('hide');
             } else {
                 row.querySelector('.btnSessionSendMessage').classList.add('hide');
             }
 
-            if (session.TranscodingInfo && session.TranscodingInfo.TranscodeReasons && session.TranscodingInfo && session.TranscodingInfo.TranscodeReasons.length) {
+            if (session.TranscodingInfo && session.TranscodingInfo.TranscodeReasons && session.TranscodingInfo) {
                 row.querySelector('.btnSessionInfo').classList.remove('hide');
             } else {
                 row.querySelector('.btnSessionInfo').classList.add('hide');
@@ -564,7 +565,7 @@ import 'emby-itemscontainer';
 
             const btnSessionPlayPause = row.querySelector('.btnSessionPlayPause');
 
-            if (session.ServerId && nowPlayingItem && session.SupportsRemoteControl && session.DeviceId !== window.connectionManager.deviceId()) {
+            if (session.ServerId && nowPlayingItem && session.SupportsRemoteControl) {
                 btnSessionPlayPause.classList.remove('hide');
                 row.querySelector('.btnSessionStop').classList.remove('hide');
             } else {
@@ -827,9 +828,17 @@ import 'emby-itemscontainer';
                 refreshActiveRecordings(view, apiClient);
                 loading.hide();
             }
+
+            taskButton({
+                mode: 'on',
+                taskKey: 'RefreshLibrary',
+                button: page.querySelector('.btnRefresh')
+            });
         });
         view.addEventListener('viewbeforehide', function () {
             const apiClient = ApiClient;
+            const page = this;
+
             events.off(serverNotifications, 'RestartRequired', onRestartRequired);
             events.off(serverNotifications, 'ServerShuttingDown', onServerShuttingDown);
             events.off(serverNotifications, 'ServerRestarting', onServerRestarting);
@@ -841,6 +850,12 @@ import 'emby-itemscontainer';
             if (apiClient) {
                 DashboardPage.stopInterval(apiClient);
             }
+
+            taskButton({
+                mode: 'off',
+                taskKey: 'RefreshLibrary',
+                button: page.querySelector('.btnRefresh')
+            });
         });
         view.addEventListener('viewdestroy', function () {
             const page = this;

src/controllers/dashboard/encodingsettings.html

@@ -31,6 +31,11 @@
                     <div class="fieldDescription">${LabelVaapiDeviceHelp}</div>
                 </div>
 
+                <div class="inputContainer hide fldOpenclDevice">
+                    <input is="emby-input" type="text" id="txtOpenclDevice" label="${LabelOpenclDevice}" />
+                    <div class="fieldDescription">${LabelOpenclDeviceHelp}</div>
+                </div>
+
                 <div class="hardwareAccelerationOptions hide">
                     <div class="checkboxListContainer decodingCodecsList">
                         <h3 class="checkboxListLabel">${LabelEnableHardwareDecodingFor}</h3>
@@ -89,6 +94,54 @@
                     </div>
                 </div>
 
+                <div class="tonemappingOptions hide">
+                    <div class="checkboxListContainer checkboxContainer-withDescription">
+                        <label>
+                            <input type="checkbox" is="emby-checkbox" id="chkTonemapping" />
+                            <span>${EnableTonemapping}</span>
+                        </label>
+                        <div class="fieldDescription checkboxFieldDescription">${AllowTonemappingHelp}</div>
+                    </div>
+                    <div class="selectContainer">
+                        <select is="emby-select" id="selectTonemappingAlgorithm" label="${LabelTonemappingAlgorithm}">
+                            <option value="none">None</option>
+                            <option value="clip">Clip</option>
+                            <option value="linear">Linear</option>
+                            <option value="gamma">Gamma</option>
+                            <option value="reinhard">Reinhard</option>
+                            <option value="hable">Hable</option>
+                            <option value="mobius">Mobius</option>
+                        </select>
+                        <div class="fieldDescription">
+                            <a is="emby-linkbutton" rel="noopener noreferrer" class="button-link" href="http://ffmpeg.org/ffmpeg-all.html#tonemap_005fopencl" target="_blank">${TonemappingAlgorithmHelp}</a>
+                        </div>
+                    </div>
+                    <div class="selectContainer">
+                        <select is="emby-select" id="selectTonemappingRange" label="${LabelTonemappingRange}">
+                            <option value="auto">${Auto}</option>
+                            <option value="tv">TV</option>
+                            <option value="pc">PC</option>
+                        </select>
+                        <div class="fieldDescription">${TonemappingRangeHelp}</div>
+                    </div>
+                    <div class="inputContainer">
+                        <input is="emby-input" type="number" id="txtTonemappingDesat" pattern="[0-9]*" min="0" max="1.79769e+308" step=".00001" label="${LabelTonemappingDesat}" />
+                        <div class="fieldDescription">${LabelTonemappingDesatHelp}</div>
+                    </div>
+                    <div class="inputContainer">
+                        <input is="emby-input" type="number" id="txtTonemappingThreshold" pattern="[0-9]*" min="0" max="1.79769e+308" step=".00001" label="${LabelTonemappingThreshold}" />
+                        <div class="fieldDescription">${LabelTonemappingThresholdHelp}</div>
+                    </div>
+                    <div class="inputContainer">
+                        <input is="emby-input" type="number" id="txtTonemappingPeak" pattern="[0-9]*" min="0" max="1.79769e+308" step=".00001" label="${LabelTonemappingPeak}" />
+                        <div class="fieldDescription">${LabelTonemappingPeakHelp}</div>
+                    </div>
+                    <div class="inputContainer">
+                        <input is="emby-input" type="number" id="txtTonemappingParam" pattern="[0-9]*" min="2.22507e-308" max="1.79769e+308" step=".00001" label="${LabelTonemappingParam}" />
+                        <div class="fieldDescription">${LabelTonemappingParamHelp}</div>
+                    </div>
+                </div>
+
                 <div class="selectContainer">
                     <select is="emby-select" id="selectThreadCount" label="${LabelTranscodingThreadCount}">
                         <option value="-1">${Auto}</option>
@@ -129,6 +182,10 @@
                     <input is="emby-input" type="number" id="txtDownMixAudioBoost" pattern="[0-9]*" required="required" min=".5" max="3" step=".1" label="${LabelDownMixAudioScale}" />
                     <div class="fieldDescription">${LabelDownMixAudioScaleHelp}</div>
                 </div>
+                <div class="inputContainer">
+                    <input is="emby-input" type="number" id="txtMaxMuxingQueueSize" pattern="[0-9]*" required="required" min="128" max="2147483647" step="1" label="${LabelMaxMuxingQueueSize}" />
+                    <div class="fieldDescription">${LabelMaxMuxingQueueSizeHelp}</div>
+                </div>
 
                 <div class="selectContainer">
                     <select is="emby-select" id="selectEncoderPreset" label="${LabelEncoderPreset}">

src/controllers/dashboard/encodingsettings.js

@@ -16,9 +16,18 @@ import libraryMenu from 'libraryMenu';
         $('#selectVideoDecoder', page).val(config.HardwareAccelerationType);
         $('#selectThreadCount', page).val(config.EncodingThreadCount);
         $('#txtDownMixAudioBoost', page).val(config.DownMixAudioBoost);
+        page.querySelector('#txtMaxMuxingQueueSize').value = config.MaxMuxingQueueSize || '';
         page.querySelector('.txtEncoderPath').value = config.EncoderAppPathDisplay || '';
         $('#txtTranscodingTempPath', page).val(systemInfo.TranscodingTempPath || '');
         $('#txtVaapiDevice', page).val(config.VaapiDevice || '');
+        page.querySelector('#chkTonemapping').checked = config.EnableTonemapping;
+        page.querySelector('#txtOpenclDevice').value = config.OpenclDevice || '';
+        page.querySelector('#selectTonemappingAlgorithm').value = config.TonemappingAlgorithm;
+        page.querySelector('#selectTonemappingRange').value = config.TonemappingRange;
+        page.querySelector('#txtTonemappingDesat').value = config.TonemappingDesat;
+        page.querySelector('#txtTonemappingThreshold').value = config.TonemappingThreshold;
+        page.querySelector('#txtTonemappingPeak').value = config.TonemappingPeak;
+        page.querySelector('#txtTonemappingParam').value = config.TonemappingParam || '';
         page.querySelector('#selectEncoderPreset').value = config.EncoderPreset || '';
         page.querySelector('#txtH264Crf').value = config.H264Crf || '';
         page.querySelector('#selectDeinterlaceMethod').value = config.DeinterlaceMethod || '';
@@ -62,10 +71,19 @@ import libraryMenu from 'libraryMenu';
             loading.show();
             ApiClient.getNamedConfiguration('encoding').then(function (config) {
                 config.DownMixAudioBoost = $('#txtDownMixAudioBoost', form).val();
+                config.MaxMuxingQueueSize = form.querySelector('#txtMaxMuxingQueueSize').value;
                 config.TranscodingTempPath = $('#txtTranscodingTempPath', form).val();
                 config.EncodingThreadCount = $('#selectThreadCount', form).val();
                 config.HardwareAccelerationType = $('#selectVideoDecoder', form).val();
                 config.VaapiDevice = $('#txtVaapiDevice', form).val();
+                config.OpenclDevice = form.querySelector('#txtOpenclDevice').value;
+                config.EnableTonemapping = form.querySelector('#chkTonemapping').checked;
+                config.TonemappingAlgorithm = form.querySelector('#selectTonemappingAlgorithm').value;
+                config.TonemappingRange = form.querySelector('#selectTonemappingRange').value;
+                config.TonemappingDesat = form.querySelector('#txtTonemappingDesat').value;
+                config.TonemappingThreshold = form.querySelector('#txtTonemappingThreshold').value;
+                config.TonemappingPeak = form.querySelector('#txtTonemappingPeak').value;
+                config.TonemappingParam = form.querySelector('#txtTonemappingParam').value || '0';
                 config.EncoderPreset = form.querySelector('#selectEncoderPreset').value;
                 config.H264Crf = parseInt(form.querySelector('#txtH264Crf').value || '0');
                 config.DeinterlaceMethod = form.querySelector('#selectDeinterlaceMethod').value;
@@ -149,6 +167,16 @@ import libraryMenu from 'libraryMenu';
                 page.querySelector('#txtVaapiDevice').removeAttribute('required');
             }
 
+            if (this.value == 'nvenc' || this.value == 'amf') {
+                page.querySelector('.fldOpenclDevice').classList.remove('hide');
+                page.querySelector('#txtOpenclDevice').setAttribute('required', 'required');
+                page.querySelector('.tonemappingOptions').classList.remove('hide');
+            } else {
+                page.querySelector('.fldOpenclDevice').classList.add('hide');
+                page.querySelector('#txtOpenclDevice').removeAttribute('required');
+                page.querySelector('.tonemappingOptions').classList.add('hide');
+            }
+
             if (this.value) {
                 page.querySelector('.hardwareAccelerationOptions').classList.remove('hide');
             } else {

src/controllers/dashboard/logs.js

@@ -9,21 +9,21 @@ import 'flexStyles';
     export default function(view, params) {
         view.addEventListener('viewbeforeshow', function() {
             loading.show();
-            var apiClient = ApiClient;
+            const apiClient = ApiClient;
             apiClient.getJSON(apiClient.getUrl('System/Logs')).then(function(logs) {
-                var html = '';
+                let html = '';
                 html += '<div class="paperList">';
                 html += logs.map(function(log) {
-                    var logUrl = apiClient.getUrl('System/Logs/Log', {
+                    let logUrl = apiClient.getUrl('System/Logs/Log', {
                         name: log.Name
                     });
                     logUrl += '&api_key=' + apiClient.accessToken();
-                    var logHtml = '';
+                    let logHtml = '';
                     logHtml += '<a is="emby-linkbutton" href="' + logUrl + '" target="_blank" class="listItem listItem-border" style="color:inherit;">';
                     logHtml += '<div class="listItemBody two-line">';
                     logHtml += "<h3 class='listItemBodyText'>" + log.Name + '</h3>';
-                    var date = datetime.parseISO8601Date(log.DateModified, true);
+                    const date = datetime.parseISO8601Date(log.DateModified, true);
-                    var text = datetime.toLocaleDateString(date);
+                    let text = datetime.toLocaleDateString(date);
                     text += ' ' + datetime.getDisplayTime(date);
                     logHtml += '<div class="listItemBodyText secondary">' + text + '</div>';
                     logHtml += '</div>';

src/controllers/dashboard/networking.html

@@ -43,6 +43,11 @@
                             <input is="emby-input" type="text" id="txtLanNetworks" label="${LabelLanNetworks}" />
                             <div class="fieldDescription">${LanNetworksHelp}</div>
                         </div>
+
+                        <div class="inputContainer">
+                            <input is="emby-input" type="text" id="txtKnownProxies" label="${LabelKnownProxies}" />
+                            <div class="fieldDescription">${KnownProxiesHelp}</div>
+                        </div>
                     </fieldset>
 
                     <fieldset class='verticalSection verticalSection-extrabottompadding'>

src/controllers/dashboard/networking.js

@@ -30,6 +30,11 @@ import 'emby-select';
                     }).filter(function (s) {
                         return s.length > 0;
                     });
+                    config.KnownProxies = form.querySelector('#txtKnownProxies').value.split(',').map(function (s) {
+                        return s.trim();
+                    }).filter(function (s) {
+                        return s.length > 0;
+                    });
                     config.IsRemoteIPFilterBlacklist = form.querySelector('#selectExternalAddressFilterMode').value === 'blacklist';
                     config.PublicPort = form.querySelector('#txtPublicPort').value;
                     config.PublicHttpsPort = form.querySelector('#txtPublicHttpsPort').value;
@@ -108,6 +113,7 @@ import 'emby-select';
             page.querySelector('#txtPublicHttpsPort').value = config.PublicHttpsPort;
             page.querySelector('#txtLocalAddress').value = config.LocalNetworkAddresses[0] || '';
             page.querySelector('#txtLanNetworks').value = (config.LocalNetworkSubnets || []).join(', ');
+            page.querySelector('#txtKnownProxies').value = (config.KnownProxies || []).join(', ');
             page.querySelector('#txtExternalAddressFilter').value = (config.RemoteIPFilter || []).join(', ');
             page.querySelector('#selectExternalAddressFilterMode').value = config.IsRemoteIPFilterBlacklist ? 'blacklist' : 'whitelist';
             page.querySelector('#chkRemoteAccess').checked = config.EnableRemoteAccess == null || config.EnableRemoteAccess;

src/controllers/dashboard/plugins/repositories/index.js

@@ -42,10 +42,10 @@ function saveList(page) {
 }
 
 function populateList(options) {
-    var html = '';
+    let html = '';
 
     html += '<div class="paperList">';
-    for (var i = 0; i < options.repositories.length; i++) {
+    for (let i = 0; i < options.repositories.length; i++) {
         html += getRepositoryHtml(options.repositories[i]);
     }
 
@@ -59,7 +59,7 @@ function populateList(options) {
 }
 
 function getRepositoryHtml(repository) {
-    var html = '';
+    let html = '';
 
     html += '<div class="listItem listItem-border">';
     html += `<a is="emby-linkbutton" style="margin:0;padding:0" class="clearLink listItemIconContainer" href="${repository.Url}">`;
@@ -93,9 +93,9 @@ export default function(view, params) {
         libraryMenu.setTabs('plugins', 2, getTabs);
         reloadList(this);
 
-        var save = this;
+        const save = this;
         $('#repositories', view).on('click', '.btnDelete', function() {
-            var button = this;
+            const button = this;
             repositories = repositories.filter(function (r) {
                 return r.Url !== button.id;
             });

src/controllers/dashboard/quickConnect.html

@@ -0,0 +1,24 @@
+<div id="quickConnectPage" data-role="page" class="page type-interior advancedConfigurationPage">
+    <div class="content-primary">
+        <form class="quickConnectSettings">
+            <div class="verticalSection">
+                <div class="sectionTitleContainer flex align-items-center">
+                    <h2 class="sectionTitle">${QuickConnect}</h2>
+                </div>
+            </div>
+
+            <div>${LabelCurrentStatus}<span id="quickConnectStatus" style="padding:0 0.4em;"></span></div>
+
+            <div class="checkboxList paperList" style="padding:.5em 1em;">
+                <label>
+                    <input type="checkbox" is="emby-checkbox" id="chkQuickConnectAvailable" />
+                    <span>${EnableQuickConnect}</span>
+                </label>
+            </div>
+
+            <button is="emby-button" id="btnQuickConnectSubmit" type="submit" class="raised button-submit block">
+                <span>${Save}</span>
+            </button>
+        </form>
+    </div>
+</div>

src/controllers/dashboard/quickConnect.js

@@ -0,0 +1,58 @@
+import loading from 'loading';
+import toast from 'toast';
+import globalize from 'globalize';
+
+const unavailable = 'Unavailable';
+const available = 'Available';
+const active = 'Active';
+let page;
+
+export default function(view) {
+    view.addEventListener('viewshow', function () {
+        page = this;
+        loading.show();
+        page.querySelector('#btnQuickConnectSubmit').onclick = onSubmit;
+        updatePage();
+    });
+}
+
+function loadPage(status) {
+    const check = status === available || status === active;
+
+    page.querySelector('#quickConnectStatus').textContent = status.toLocaleLowerCase();
+    page.querySelector('#chkQuickConnectAvailable').checked = check;
+
+    loading.hide();
+}
+
+function onSubmit() {
+    loading.show();
+
+    const newStatus = page.querySelector('#chkQuickConnectAvailable').checked ? available : unavailable;
+
+    const url = ApiClient.getUrl('/QuickConnect/Available?Status=' + newStatus);
+
+    ApiClient.ajax({
+        type: 'POST',
+        url: url
+    }, true).then(() => {
+        toast(globalize.translate('SettingsSaved'));
+        setTimeout(updatePage, 500);
+
+        return true;
+    }).catch((e) => {
+        console.error('Unable to set quick connect status. error:', e);
+    });
+
+    loading.hide();
+    return false;
+}
+
+function updatePage() {
+    ApiClient.getQuickConnect('Status').then((response) => {
+        loadPage(response);
+        return true;
+    }).catch((e) => {
+        console.error('Unable to get quick connect status. error:', e);
+    });
+}

src/controllers/dashboard/users/useredit.html

@@ -140,32 +140,13 @@
                     </div>
                     <div class="fieldDescription">${OptionAllowRemoteSharedDevicesHelp}</div>
                 </div>
-                <div class="verticalSection">
+                <h2 class="checkboxListLabel">${Other}</h2>
-                    <h2 class="checkboxListLabel">${HeaderDownloadSync}</h2>
+                <div class="checkboxContainer checkboxContainer-withDescription">
-                    <div class="checkboxList paperList" style="padding:.5em 1em;">
                     <label>
                         <input type="checkbox" is="emby-checkbox" id="chkEnableDownloading" />
-                            <span>${OptionAllowContentDownloading}</span>
+                        <span>${OptionAllowContentDownload}</span>
                     </label>
-                        <label>
+                    <div class="fieldDescription checkboxFieldDescription">${OptionAllowContentDownloadHelp}</div>
-                            <input type="checkbox" is="emby-checkbox" id="chkEnableSyncTranscoding" />
-                            <span>${OptionAllowSyncTranscoding}</span>
-                        </label>
-                    </div>
-                </div>
-                <div class="checkboxContainer checkboxContainer-withDescription">
-                    <label>
-                        <input type="checkbox" is="emby-checkbox" id="chkEnableConversion" />
-                        <span>${AllowMediaConversion}</span>
-                    </label>
-                    <div class="fieldDescription checkboxFieldDescription">${AllowMediaConversionHelp}</div>
-                </div>
-                <div class="checkboxContainer checkboxContainer-withDescription">
-                    <label>
-                        <input type="checkbox" is="emby-checkbox" id="chkEnableSharing" />
-                        <span>${OptionAllowLinkSharing}</span>
-                    </label>
-                    <div class="fieldDescription checkboxFieldDescription sharingHelp"></div>
                 </div>
                 <div class="checkboxContainer checkboxContainer-withDescription" id="fldIsEnabled">
                     <label>
@@ -190,6 +171,14 @@
                     </div>
                 </div>
                 <br />
+                <div class=verticalSection>
+                    <div class="inputContainer" id="fldMaxActiveSessions">
+                        <input is="emby-input" type="number" id="txtMaxActiveSessions" min="0" step="1" label="${LabelUserMaxActiveSessions}"/>
+                        <div class="fieldDescription">${OptionMaxActiveSessions}</div>
+                        <div class="fieldDescription">${OptionMaxActiveSessionsHelp}</div>
+                    </div>
+                </div>
+                <br />
                 <div>
                     <button is="emby-button" type="submit" class="raised button-submit block">
                         <span>${Save}</span>

src/controllers/dashboard/users/useredit.js

@@ -97,11 +97,9 @@ import globalize from 'globalize';
         $('#chkEnableVideoPlaybackRemuxing', page).prop('checked', user.Policy.EnablePlaybackRemuxing);
         $('#chkForceRemoteSourceTranscoding', page).prop('checked', user.Policy.ForceRemoteSourceTranscoding);
         $('#chkRemoteAccess', page).prop('checked', user.Policy.EnableRemoteAccess == null || user.Policy.EnableRemoteAccess);
-        $('#chkEnableSyncTranscoding', page).prop('checked', user.Policy.EnableSyncTranscoding);
-        $('#chkEnableConversion', page).prop('checked', user.Policy.EnableMediaConversion || false);
-        $('#chkEnableSharing', page).prop('checked', user.Policy.EnablePublicSharing);
         $('#txtRemoteClientBitrateLimit', page).val(user.Policy.RemoteClientBitrateLimit / 1e6 || '');
         $('#txtLoginAttemptsBeforeLockout', page).val(user.Policy.LoginAttemptsBeforeLockout || '0');
+        $('#txtMaxActiveSessions', page).val(user.Policy.MaxActiveSessions || '0');
         if (ApiClient.isMinServerVersion('10.6.0')) {
             $('#selectSyncPlayAccess').val(user.Policy.SyncPlayAccess);
         }
@@ -132,12 +130,10 @@ import globalize from 'globalize';
         user.Policy.EnablePlaybackRemuxing = $('#chkEnableVideoPlaybackRemuxing', page).is(':checked');
         user.Policy.ForceRemoteSourceTranscoding = $('#chkForceRemoteSourceTranscoding', page).is(':checked');
         user.Policy.EnableContentDownloading = $('#chkEnableDownloading', page).is(':checked');
-        user.Policy.EnableSyncTranscoding = $('#chkEnableSyncTranscoding', page).is(':checked');
-        user.Policy.EnableMediaConversion = $('#chkEnableConversion', page).is(':checked');
-        user.Policy.EnablePublicSharing = $('#chkEnableSharing', page).is(':checked');
         user.Policy.EnableRemoteAccess = $('#chkRemoteAccess', page).is(':checked');
         user.Policy.RemoteClientBitrateLimit = parseInt(1e6 * parseFloat($('#txtRemoteClientBitrateLimit', page).val() || '0'));
         user.Policy.LoginAttemptsBeforeLockout = parseInt($('#txtLoginAttemptsBeforeLockout', page).val() || '0');
+        user.Policy.MaxActiveSessions = parseInt($('#txtMaxActiveSessions', page).val() || '0');
         user.Policy.AuthenticationProviderId = page.querySelector('.selectLoginProvider').value;
         user.Policy.PasswordResetProviderId = page.querySelector('.selectPasswordResetProvider').value;
         user.Policy.EnableContentDeletion = $('#chkEnableDeleteAllFolders', page).is(':checked');

src/controllers/dashboard/users/userlibraryaccess.js

@@ -51,7 +51,9 @@ import globalize from 'globalize';
             $('.channelAccessContainer', page).hide();
         }
 
-        $('#chkEnableAllChannels', page).prop('checked', user.Policy.EnableAllChannels);
+        const chkEnableAllChannels = page.querySelector('#chkEnableAllChannels');
+        chkEnableAllChannels.checked = user.Policy.EnableAllChannels;
+        triggerChange(chkEnableAllChannels);
     }
 
     function loadDevices(page, user, devices) {
@@ -67,7 +69,9 @@ import globalize from 'globalize';
 
         html += '</div>';
         $('.deviceAccess', page).show().html(html);
-        $('#chkEnableAllDevices', page).prop('checked', user.Policy.EnableAllDevices);
+        const chkEnableAllDevices = page.querySelector('#chkEnableAllDevices');
+        chkEnableAllDevices.checked = user.Policy.EnableAllDevices;
+        triggerChange(chkEnableAllDevices);
 
         if (user.Policy.IsAdministrator) {
             page.querySelector('.deviceAccessContainer').classList.add('hide');

src/controllers/edititemmetadata.js

@@ -20,7 +20,7 @@ export default function (view, params) {
     });
     MetadataEditor.setCurrentItemId(null);
     view.querySelector('.libraryTree').addEventListener('itemclicked', function (event) {
-        var data = event.detail;
+        const data = event.detail;
 
         if (data.id != MetadataEditor.getCurrentItemId()) {
             MetadataEditor.setCurrentItemId(data.id);

src/controllers/list.js

@@ -163,7 +163,7 @@ import 'emby-scroller';
         instance.setFilterStatus(hasFilters);
 
         if (instance.alphaPicker) {
-            query.NameStartsWithOrGreater = instance.alphaPicker.value();
+            query.NameStartsWith = instance.alphaPicker.value();
         }
 
         return query;

src/controllers/movies/movies.html

@@ -1,6 +1,6 @@
 <div id="moviesPage" data-role="page" data-dom-cache="true" class="page libraryPage backdropPage collectionEditorPage pageWithAbsoluteTabs withTabs" data-backdroptype="movie">
 
-    <div class="pageTabContent" data-index="0">
+    <div class="pageTabContent" id="moviesTab" data-index="0">
         <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
             <div class="paging"></div>
             <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy"></span></button>
@@ -17,7 +17,7 @@
             <div class="paging"></div>
         </div>
     </div>
-    <div class="pageTabContent" data-index="1">
+    <div class="pageTabContent" id="suggestionsTab" data-index="1">
         <div id="resumableSection" class="verticalSection hide">
             <div class="sectionTitleContainer sectionTitleContainer-cards">
                 <h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderContinueWatching}</h2>
@@ -43,7 +43,7 @@
             <p>${MessageNoMovieSuggestionsAvailable}</p>
         </div>
     </div>
-    <div class="pageTabContent" data-index="2">
+    <div class="pageTabContent" id="trailersTab" data-index="2">
         <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
             <div class="paging"></div>
             <button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha"></span></button>
@@ -59,7 +59,7 @@
             <div class="paging"></div>
         </div>
     </div>
-    <div class="pageTabContent" data-index="3">
+    <div class="pageTabContent" id="favoritesTab" data-index="3">
         <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
             <div class="paging"></div>
             <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy"></span></button>
@@ -71,7 +71,7 @@
             <div class="paging"></div>
         </div>
     </div>
-    <div class="pageTabContent" data-index="4">
+    <div class="pageTabContent" id="collectionsTab" data-index="4">
         <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
             <div class="paging"></div>
             <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy"></span></button>
@@ -85,9 +85,7 @@
             <div class="paging"></div>
         </div>
     </div>
-    <div class="pageTabContent" data-index="5">
+    <div class="pageTabContent" id="genresTab" data-index="5">
         <div id="items"></div>
     </div>
-    <div class="pageTabContent" data-index="6">
-    </div>
 </div>

src/controllers/movies/movies.js

@@ -25,7 +25,12 @@ import 'emby-itemscontainer';
 
         const updateFilterControls = () => {
             if (this.alphaPicker) {
-                this.alphaPicker.value(query.NameStartsWithOrGreater);
+                this.alphaPicker.value(query.NameStartsWith);
+                if (query.SortBy.indexOf('SortName') === 0) {
+                    this.alphaPicker.visible(true);
+                } else {
+                    this.alphaPicker.visible(false);
+                }
             }
         };
 
@@ -163,12 +168,12 @@ import 'emby-itemscontainer';
             itemsContainer.fetchData = fetchData;
             itemsContainer.getItemsHtml = getItemsHtml;
             itemsContainer.afterRefresh = afterRefresh;
-            let alphaPickerElement = tabContent.querySelector('.alphaPicker');
+            const alphaPickerElement = tabContent.querySelector('.alphaPicker');
 
             if (alphaPickerElement) {
                 alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
-                    let newValue = e.detail.value;
+                    const newValue = e.detail.value;
-                    query.NameStartsWithOrGreater = newValue;
+                    query.NameStartsWith = newValue;
                     query.StartIndex = 0;
                     itemsContainer.refreshItems();
                 });
@@ -237,7 +242,7 @@ import 'emby-itemscontainer';
                 libraryBrowser.showLayoutMenu(e.target, this.getCurrentViewStyle, 'Banner,List,Poster,PosterCard,Thumb,ThumbCard'.split(','));
             });
             btnSelectView.addEventListener('layoutchange', function (e) {
-                let viewStyle = e.detail.viewStyle;
+                const viewStyle = e.detail.viewStyle;
                 userSettings.set(savedViewKey, viewStyle);
                 query.StartIndex = 0;
                 onViewStyleChange();
@@ -274,7 +279,7 @@ import 'emby-itemscontainer';
 
         this.showFilterMenu = function () {
             import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => {
-                let filterDialog = new filterDialogFactory({
+                const filterDialog = new filterDialogFactory({
                     query: query,
                     mode: 'movies',
                     serverId: ApiClient.serverId()

src/controllers/movies/moviesrecommended.js

@@ -58,7 +58,7 @@ import 'emby-button';
     }
 
     function loadResume(page, userId, parentId) {
-        let screenWidth = dom.getWindowSize().innerWidth;
+        const screenWidth = dom.getWindowSize().innerWidth;
         const options = {
             SortBy: 'DatePlayed',
             SortOrder: 'Descending',
@@ -154,8 +154,8 @@ import 'emby-button';
     }
 
     function loadSuggestions(page, userId, parentId) {
-        let screenWidth = dom.getWindowSize().innerWidth;
+        const screenWidth = dom.getWindowSize().innerWidth;
-        let url = ApiClient.getUrl('Movies/Recommendations', {
+        const url = ApiClient.getUrl('Movies/Recommendations', {
             userId: userId,
             categoryLimit: 6,
             ItemLimit: screenWidth >= 1920 ? 8 : screenWidth >= 1600 ? 8 : screenWidth >= 1200 ? 6 : 5,
@@ -172,7 +172,7 @@ import 'emby-button';
 
             const html = recommendations.map(getRecommendationHtml).join('');
             page.querySelector('.noItemsMessage').classList.add('hide');
-            let recs = page.querySelector('.recommendations');
+            const recs = page.querySelector('.recommendations');
             recs.innerHTML = html;
             imageLoader.lazyChildren(recs);
 
@@ -320,11 +320,6 @@ import 'emby-button';
 
                     if (index === suggestionsTabIndex) {
                         controller = this;
-                    } else if (index === 6) {
-                        controller = new controllerFactory(view, tabContent, {
-                            collectionType: 'movies',
-                            parentId: params.topParentId
-                        });
                     } else if (index == 0 || index == 3) {
                         controller = new controllerFactory(view, params, tabContent, {
                             mode: index ? 'favorites' : 'movies'
@@ -381,21 +376,21 @@ import 'emby-button';
         const suggestionsTabIndex = 1;
 
         this.initTab = function () {
-            let tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
+            const tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
             initSuggestedTab(view, tabContent);
         };
 
         this.renderTab = function () {
-            let tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
+            const tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
             loadSuggestionsTab(view, params, tabContent);
         };
 
-        let tabControllers = [];
+        const tabControllers = [];
         let renderedTabs = [];
         view.addEventListener('viewshow', function (e) {
             initTabs();
             if (!view.getAttribute('data-title')) {
-                var parentId = params.topParentId;
+                const parentId = params.topParentId;
 
                 if (parentId) {
                     ApiClient.getItem(ApiClient.getCurrentUserId(), parentId).then(function (item) {

src/controllers/movies/movietrailers.js

@@ -185,7 +185,7 @@ import 'emby-itemscontainer';
 
         const updateFilterControls = (tabContent) => {
             const query = getQuery(tabContent);
-            this.alphaPicker.value(query.NameStartsWithOrGreater);
+            this.alphaPicker.value(query.NameStartsWith);
         };
 
         const data = {};
@@ -216,7 +216,7 @@ import 'emby-itemscontainer';
             alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
                 const newValue = e.detail.value;
                 const query = getQuery(tabContent);
-                query.NameStartsWithOrGreater = newValue;
+                query.NameStartsWith = newValue;
                 query.StartIndex = 0;
                 reloadItems();
             });

src/controllers/music/music.html

@@ -8,7 +8,26 @@
             }
         }
     </style>
-    <div class="pageTabContent pageTabContent" id="suggestionsTab" data-index="0">
+    <div class="pageTabContent pageTabContent" id="albumsTab" data-index="0">
+        <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
+            <div class="paging"></div>
+            <button is="paper-icon-button-light" class="btnPlayAll musicglobalButton" title="${HeaderPlayAll}"><span class="material-icons play_arrow"></span></button>
+            <button is="paper-icon-button-light" class="btnShuffle musicglobalButton" title="${Shuffle}"><span class="material-icons shuffle"></span></button>
+            <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy"></span></button>
+            <button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha"></span></button>
+            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list"></span></button>
+        </div>
+
+        <div class="alphaPicker alphaPicker-fixed alphaPicker-vertical">
+        </div>
+
+        <div is="emby-itemscontainer" class="itemsContainer padded-left padded-right">
+        </div>
+        <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
+            <div class="paging"></div>
+        </div>
+    </div>
+    <div class="pageTabContent pageTabContent" id="suggestionsTab" data-index="1">
 
         <div class="verticalSection">
 
@@ -34,25 +53,6 @@
 
         <div class="favoriteSections verticalSection"></div>
     </div>
-    <div class="pageTabContent pageTabContent" id="albumsTab" data-index="1">
-        <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
-            <div class="paging"></div>
-            <button is="paper-icon-button-light" class="btnPlayAll musicglobalButton" title="${HeaderPlayAll}"><span class="material-icons play_arrow"></span></button>
-            <button is="paper-icon-button-light" class="btnShuffle musicglobalButton" title="${Shuffle}"><span class="material-icons shuffle"></span></button>
-            <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy"></span></button>
-            <button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha"></span></button>
-            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list"></span></button>
-        </div>
-
-        <div class="alphaPicker alphaPicker-fixed alphaPicker-vertical">
-        </div>
-
-        <div is="emby-itemscontainer" class="itemsContainer padded-left padded-right">
-        </div>
-        <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
-            <div class="paging"></div>
-        </div>
-    </div>
     <div class="pageTabContent" id="albumArtistsTab" data-index="2">
         <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
             <div class="paging"></div>
@@ -85,7 +85,7 @@
             <div class="paging"></div>
         </div>
     </div>
-    <div class="pageTabContent" data-index="4">
+    <div class="pageTabContent" id="playlistsTab" data-index="4">
 
         <div is="emby-itemscontainer" id="items" class="itemsContainer padded-left padded-right padded-top vertical-wrap centered"></div>
     </div>
@@ -105,6 +105,4 @@
     <div class="pageTabContent" id="genresTab" data-index="6">
         <div is="emby-itemscontainer" id="items" class="itemsContainer padded-left padded-right padded-top vertical-wrap"></div>
     </div>
-    <div class="pageTabContent" data-index="7">
-    </div>
 </div>

src/controllers/music/musicalbums.js

@@ -155,20 +155,21 @@ import 'emby-itemscontainer';
                         overlayPlayButton: true
                     });
                 }
+
                 let elems = tabContent.querySelectorAll('.paging');
 
-                for (let 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 (let 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 (let i = 0, length = elems.length; i < length; i++) {
+                for (const elem of elems) {
-                    elems[i].addEventListener('click', onPreviousPageClick);
+                    elem.addEventListener('click', onPreviousPageClick);
                 }
 
                 const itemsContainer = tabContent.querySelector('.itemsContainer');
@@ -186,7 +187,16 @@ import 'emby-itemscontainer';
 
         const updateFilterControls = (tabContent) => {
             const query = getQuery();
-            this.alphaPicker.value(query.NameStartsWithOrGreater);
+
+            if (this.alphaPicker) {
+                this.alphaPicker.value(query.NameStartsWith);
+
+                if (query.SortBy.indexOf('SortName') === 0) {
+                    this.alphaPicker.visible(true);
+                } else {
+                    this.alphaPicker.visible(false);
+                }
+            }
         };
 
         let savedQueryKey;
@@ -200,10 +210,12 @@ import 'emby-itemscontainer';
                     mode: 'albums',
                     serverId: ApiClient.serverId()
                 });
+
                 events.on(filterDialog, 'filterchange', function () {
                     getQuery().StartIndex = 0;
                     reloadItems(tabContent);
                 });
+
                 filterDialog.show();
             });
         };
@@ -219,10 +231,11 @@ import 'emby-itemscontainer';
             alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
                 const newValue = e.detail.value;
                 const query = getQuery();
-                query.NameStartsWithOrGreater = newValue;
+                query.NameStartsWith = newValue;
                 query.StartIndex = 0;
                 reloadItems(tabContent);
             });
+
             this.alphaPicker = new AlphaPicker({
                 element: alphaPickerElement,
                 valueChangeEvent: 'click'
@@ -235,6 +248,7 @@ import 'emby-itemscontainer';
             tabContent.querySelector('.btnFilter').addEventListener('click', () => {
                 this.showFilterMenu();
             });
+
             tabContent.querySelector('.btnSort').addEventListener('click', (e) => {
                 libraryBrowser.showSortMenu({
                     items: [{
@@ -267,10 +281,12 @@ import 'emby-itemscontainer';
                     button: e.target
                 });
             });
+
             const btnSelectView = tabContent.querySelector('.btnSelectView');
             btnSelectView.addEventListener('click', (e) => {
                 libraryBrowser.showLayoutMenu(e.target, this.getCurrentViewStyle(), 'List,Poster,PosterCard'.split(','));
             });
+
             btnSelectView.addEventListener('layoutchange', function (e) {
                 const viewStyle = e.detail.viewStyle;
                 getPageData().view = viewStyle;
@@ -279,6 +295,7 @@ import 'emby-itemscontainer';
                 onViewStyleChange();
                 reloadItems(tabContent);
             });
+
             tabContent.querySelector('.btnPlayAll').addEventListener('click', playAll);
             tabContent.querySelector('.btnShuffle').addEventListener('click', shuffle);
         };

src/controllers/music/musicartists.js

@@ -169,7 +169,7 @@ import 'emby-itemscontainer';
 
         const updateFilterControls = (tabContent) => {
             const query = getQuery(tabContent);
-            this.alphaPicker.value(query.NameStartsWithOrGreater);
+            this.alphaPicker.value(query.NameStartsWith);
         };
 
         const data = {};
@@ -201,7 +201,7 @@ import 'emby-itemscontainer';
             alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
                 const newValue = e.detail.value;
                 const query = getQuery(tabContent);
-                query.NameStartsWithOrGreater = newValue;
+                query.NameStartsWith = newValue;
                 query.StartIndex = 0;
                 reloadItems(tabContent);
             });

src/controllers/music/musicrecommended.js

@@ -56,7 +56,7 @@ import 'flexStyles';
             EnableTotalRecordCount: false
         };
         ApiClient.getJSON(ApiClient.getUrl('Users/' + userId + '/Items/Latest', options)).then(function (items) {
-            var elem = page.querySelector('#recentlyAddedSongs');
+            const elem = page.querySelector('#recentlyAddedSongs');
             elem.innerHTML = cardBuilder.getCardsHtml({
                 items: items,
                 showUnplayedIndicator: false,
@@ -103,7 +103,7 @@ import 'flexStyles';
                 elem.classList.add('hide');
             }
 
-            var itemsContainer = elem.querySelector('.itemsContainer');
+            const itemsContainer = elem.querySelector('.itemsContainer');
             itemsContainer.innerHTML = cardBuilder.getCardsHtml({
                 items: result.Items,
                 showUnplayedIndicator: false,
@@ -145,7 +145,7 @@ import 'flexStyles';
                 elem.classList.add('hide');
             }
 
-            var itemsContainer = elem.querySelector('.itemsContainer');
+            const itemsContainer = elem.querySelector('.itemsContainer');
             itemsContainer.innerHTML = cardBuilder.getCardsHtml({
                 items: result.Items,
                 showUnplayedIndicator: false,
@@ -177,9 +177,9 @@ import 'flexStyles';
 
     function getTabs() {
         return [{
-            name: globalize.translate('Suggestions')
-        }, {
             name: globalize.translate('Albums')
+        }, {
+            name: globalize.translate('Suggestions')
         }, {
             name: globalize.translate('HeaderAlbumArtists')
         }, {
@@ -195,7 +195,7 @@ import 'flexStyles';
 
     function getDefaultTabIndex(folderId) {
         switch (userSettings.get('landing-' + folderId)) {
-            case 'albums':
+            case 'suggestions':
                 return 1;
 
             case 'albumartists':
@@ -221,7 +221,7 @@ import 'flexStyles';
     export default function (view, params) {
         function reload() {
             loading.show();
-            const tabContent = view.querySelector(".pageTabContent[data-index='0']");
+            const tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
             loadSuggestionsTab(view, tabContent, params.topParentId);
         }
 
@@ -268,11 +268,11 @@ import 'flexStyles';
 
             switch (index) {
                 case 0:
-                    depends = 'controllers/music/musicrecommended';
+                    depends = 'controllers/music/musicalbums';
                     break;
 
                 case 1:
-                    depends = 'controllers/music/musicalbums';
+                    depends = 'controllers/music/musicrecommended';
                     break;
 
                 case 2:
@@ -296,7 +296,7 @@ import 'flexStyles';
             import(depends).then(({default: controllerFactory}) => {
                 let tabContent;
 
-                if (index == 0) {
+                if (index == 1) {
                     tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']");
                     this.tabContent = tabContent;
                 }
@@ -306,13 +306,8 @@ import 'flexStyles';
                 if (!controller) {
                     tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']");
 
-                    if (index === 0) {
+                    if (index === 1) {
                         controller = this;
-                    } else if (index === 7) {
-                        controller = new controllerFactory(view, tabContent, {
-                            collectionType: 'music',
-                            parentId: params.topParentId
-                        });
                     } else {
                         controller = new controllerFactory(view, params, tabContent);
                     }
@@ -360,9 +355,10 @@ import 'flexStyles';
         }
 
         let currentTabIndex = parseInt(params.tab || getDefaultTabIndex(params.topParentId));
+        const suggestionsTabIndex = 1;
 
         this.initTab = function () {
-            const tabContent = view.querySelector(".pageTabContent[data-index='0']");
+            const tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
             const containers = tabContent.querySelectorAll('.itemsContainer');
 
             for (let i = 0, length = containers.length; i < length; i++) {

src/controllers/playback/video/index.html

@@ -1,11 +1,9 @@
 <div id="videoOsdPage" data-role="page" class="page libraryPage" data-backbutton="true">
     <div class="upNextContainer hide"></div>
     <div class="videoOsdBottom videoOsdBottom-maincontrols">
-        <div class="osdPoster"></div>
         <div class="osdControls">
             <div class="osdTextContainer osdMainTextContainer">
                 <h3 class="osdTitle"></h3>
-                <div class="osdMediaInfo"></div>
                 <div class="osdMediaStatus hide">
                     <span class="material-icons animate autorenew"></span>
                     <span>${FetchingData}</span>
@@ -16,7 +14,7 @@
 
             <div class="flex flex-direction-row align-items-center">
                 <div class="osdTextContainer startTimeText" style="margin: 0 .25em 0 0;"></div>
-                <div class="sliderContainer flex-grow" style="margin: .5em .5em .25em;">
+                <div class="sliderContainer flex-grow" style="margin: .5em 0 .25em;">
                     <input type="range" step=".01" min="0" max="100" value="0" is="emby-slider" class="osdPositionSlider" data-slider-keep-progress="true" />
                 </div>
                 <div class="osdTextContainer endTimeText" style="margin: 0 0 0 .25em;"></div>
@@ -47,32 +45,18 @@
                     <span class="xlargePaperIconButton material-icons skip_next"></span>
                 </button>
 
-                <button is="paper-icon-button-light" class="btnAudio hide autoSize" title="${Audio}">
-                    <span class="xlargePaperIconButton material-icons audiotrack"></span>
-                </button>
-                <button is="paper-icon-button-light" class="btnSubtitles hide autoSize" title="${Subtitles}">
-                    <span class="xlargePaperIconButton material-icons closed_caption"></span>
-                </button>
-
-                <button is="paper-icon-button-light" class="btnVideoOsdSettings hide autoSize" title="${Settings}">
-                    <span class="largePaperIconButton material-icons settings"></span>
-                </button>
-                <button is="paper-icon-button-light" class="btnFullscreen hide autoSize" title="${Fullscreen} (f)">
-                    <span class="xlargePaperIconButton material-icons fullscreen"></span>
-                </button>
-                <button is="paper-icon-button-light" class="btnPip hide autoSize" title="${PictureInPicture}">
-                    <span class="xlargePaperIconButton material-icons picture_in_picture_alt"></span>
-                </button>
-                <button is="paper-icon-button-light" class="btnAirPlay hide autoSize" title="${AirPlay}">
-                    <span class="xlargePaperIconButton material-icons airplay"></span>
-                </button>
-
                 <div class="osdTimeText">
                     <span class="osdPositionText"></span>
                     <span class="osdDurationText"></span>
                     <span class="endsAtText"></span>
                 </div>
 
+                <button is="paper-icon-button-light" class="btnSubtitles hide autoSize" title="${Subtitles}">
+                    <span class="xlargePaperIconButton material-icons closed_caption"></span>
+                </button>
+                <button is="paper-icon-button-light" class="btnAudio hide autoSize" title="${Audio}">
+                    <span class="xlargePaperIconButton material-icons audiotrack"></span>
+                </button>
                 <div class="volumeButtons hide-mouse-idle-tv">
                     <button is="paper-icon-button-light" class="buttonMute autoSize" title="${Mute} (m)">
                         <span class="xlargePaperIconButton material-icons volume_up"></span>
@@ -81,6 +65,18 @@
                         <input is="emby-slider" type="range" step="1" min="0" max="100" value="0" class="osdVolumeSlider" />
                     </div>
                 </div>
+                <button is="paper-icon-button-light" class="btnVideoOsdSettings hide autoSize" title="${Settings}">
+                    <span class="largePaperIconButton material-icons settings"></span>
+                </button>
+                <button is="paper-icon-button-light" class="btnAirPlay hide autoSize" title="${AirPlay}">
+                    <span class="xlargePaperIconButton material-icons airplay"></span>
+                </button>
+                <button is="paper-icon-button-light" class="btnPip hide autoSize" title="${PictureInPicture}">
+                    <span class="xlargePaperIconButton material-icons picture_in_picture_alt"></span>
+                </button>
+                <button is="paper-icon-button-light" class="btnFullscreen hide autoSize" title="${Fullscreen} (f)">
+                    <span class="xlargePaperIconButton material-icons fullscreen"></span>
+                </button>
             </div>
         </div>
     </div>