Merge branch 'master' into patch-10

.ci/azure-pipelines.yml

@@ -2,8 +2,7 @@ trigger:
   batch: true
   branches:
     include:
-    - master
+    - '*'
-    - release-*
   tags:
     include:
     - '*'
@@ -13,90 +12,94 @@ pr:
     - '*'
 
 jobs:
-  - job: build
+- job: Build
-    displayName: 'Build'
+  displayName: 'Build'
 
-    pool:
+  strategy:
-      vmImage: 'ubuntu-latest'
+    matrix:
+      Development:
+        BuildConfiguration: development
+      Production:
+        BuildConfiguration: production
+      Standalone:
+        BuildConfiguration: standalone
 
-    strategy:
+  pool:
-      matrix:
+    vmImage: 'ubuntu-latest'
-        Development:
-          BuildConfiguration: development
-        Production:
-          BuildConfiguration: production
-        Standalone:
-          BuildConfiguration: standalone
-      maxParallel: 3
 
-    steps:
+  steps:
-    - task: NodeTool@0
+  - task: NodeTool@0
-      displayName: 'Install Node'
+    displayName: 'Install Node'
-      inputs:
+    inputs:
-        versionSpec: '12.x'
+      versionSpec: '12.x'
 
-    - task: Cache@2
+  - task: Cache@2
-      displayName: 'Check Cache'
+    displayName: 'Check Cache'
-      inputs:
+    inputs:
-        key: 'yarn | yarn.lock'
+      key: 'yarn | yarn.lock'
-        path: 'node_modules'
+      path: 'node_modules'
-        cacheHitVar: CACHE_RESTORED
+      cacheHitVar: CACHE_RESTORED
 
-    - script: 'yarn install --frozen-lockfile'
+  - script: 'yarn install --frozen-lockfile'
-      displayName: 'Install Dependencies'
+    displayName: 'Install Dependencies'
-      condition: ne(variables.CACHE_RESTORED, 'true')
+    condition: ne(variables.CACHE_RESTORED, 'true')
 
-    - script: 'yarn build:development'
+  - script: 'yarn build:development'
-      displayName: 'Build Development'
+    displayName: 'Build Development'
-      condition: eq(variables['BuildConfiguration'], 'development')
+    condition: eq(variables['BuildConfiguration'], 'development')
 
-    - script: 'yarn build:production'
+  - script: 'yarn build:production'
-      displayName: 'Build Bundle'
+    displayName: 'Build Bundle'
-      condition: eq(variables['BuildConfiguration'], 'production')
+    condition: eq(variables['BuildConfiguration'], 'production')
 
-    - script: 'yarn build:standalone'
+  - script: 'yarn build:standalone'
-      displayName: 'Build Standalone'
+    displayName: 'Build Standalone'
-      condition: eq(variables['BuildConfiguration'], 'standalone')
+    condition: eq(variables['BuildConfiguration'], 'standalone')
 
-    - script: 'test -d dist'
+  - script: 'test -d dist'
-      displayName: 'Check Build'
+    displayName: 'Check Build'
 
-    - script: 'mv dist jellyfin-web'
+  - script: 'mv dist jellyfin-web'
-      displayName: 'Rename Directory'
+    displayName: 'Rename Directory'
-      condition: succeeded()
 
-    - task: PublishPipelineArtifact@1
+  - task: ArchiveFiles@2
-      displayName: 'Publish Release'
+    displayName: 'Archive Directory'
-      condition: succeeded()
+    inputs:
-      inputs:
+      rootFolderOrFile: 'jellyfin-web'
-        targetPath: '$(Build.SourcesDirectory)/jellyfin-web'
+      includeRootFolder: true
-        artifactName: 'jellyfin-web-$(BuildConfiguration)'
+      archiveFile: 'jellyfin-web-$(BuildConfiguration)'
 
-  - job: lint
+  - task: PublishPipelineArtifact@1
-    displayName: 'Lint'
+    displayName: 'Publish Release'
+    inputs:
+      targetPath: '$(Build.SourcesDirectory)/jellyfin-web-$(BuildConfiguration).zip'
+      artifactName: 'jellyfin-web-$(BuildConfiguration)'
 
-    pool:
+- job: Lint
-      vmImage: 'ubuntu-latest'
+  displayName: 'Lint'
 
-    steps:
+  pool:
-    - task: NodeTool@0
+    vmImage: 'ubuntu-latest'
-      displayName: 'Install Node'
-      inputs:
-        versionSpec: '12.x'
 
-    - task: Cache@2
+  steps:
-      displayName: 'Check Cache'
+  - task: NodeTool@0
-      inputs:
+    displayName: 'Install Node'
-        key: 'yarn | yarn.lock'
+    inputs:
-        path: 'node_modules'
+      versionSpec: '12.x'
-        cacheHitVar: CACHE_RESTORED
 
-    - script: 'yarn install --frozen-lockfile'
+  - task: Cache@2
-      displayName: 'Install Dependencies'
+    displayName: 'Check Cache'
-      condition: ne(variables.CACHE_RESTORED, 'true')
+    inputs:
+      key: 'yarn | yarn.lock'
+      path: 'node_modules'
+      cacheHitVar: CACHE_RESTORED
 
-    - script: 'yarn run lint --quiet'
+  - script: 'yarn install --frozen-lockfile'
-      displayName: 'Run ESLint'
+    displayName: 'Install Dependencies'
+    condition: ne(variables.CACHE_RESTORED, 'true')
 
-    - script: 'yarn run stylelint'
+  - script: 'yarn run lint --quiet'
-      displayName: 'Run Stylelint'
+    displayName: 'Run ESLint'
+
+  - script: 'yarn run stylelint'
+    displayName: 'Run Stylelint'

.eslintrc.yml

@@ -22,6 +22,7 @@ extends:
   - plugin:import/errors
   - plugin:import/warnings
   - plugin:eslint-comments/recommended
+  - plugin:compat/recommended
 
 globals:
   # Browser globals
@@ -74,7 +75,7 @@ rules:
   no-multiple-empty-lines: ["error", { "max": 1 }]
   no-trailing-spaces: ["error"]
   one-var: ["error", "never"]
-  semi: ["warn"]
+  semi: ["error"]
   space-before-blocks: ["error"]
   # TODO: Fix warnings and remove these rules
   no-redeclare: ["warn"]
@@ -85,3 +86,86 @@ rules:
   promise/no-return-wrap: ["warn"]
   # TODO: Remove after ES6 migration is complete
   import/no-unresolved: ["warn"]
+
+settings:
+  polyfills:
+    # Native Promises Only
+    - Promise
+    # whatwg-fetch
+    - fetch
+    # document-register-element
+    - document.registerElement
+    # resize-observer-polyfill
+    - ResizeObserver
+    # fast-text-encoding
+    - TextEncoder
+    # intersection-observer
+    - IntersectionObserver
+    # Core-js
+    - Object.assign
+    - Object.is
+    - Object.setPrototypeOf
+    - Object.toString
+    - Object.freeze
+    - Object.seal
+    - Object.preventExtensions
+    - Object.isFrozen
+    - Object.isSealed
+    - Object.isExtensible
+    - Object.getOwnPropertyDescriptor
+    - Object.getPrototypeOf
+    - Object.keys
+    - Object.getOwnPropertyNames
+    - Function.name
+    - Function.hasInstance
+    - Array.from
+    - Array.arrayOf
+    - Array.copyWithin
+    - Array.fill
+    - Array.find
+    - Array.findIndex
+    - Array.iterator
+    - String.fromCodePoint
+    - String.raw
+    - String.iterator
+    - String.codePointAt
+    - String.endsWith
+    - String.includes
+    - String.repeat
+    - String.startsWith
+    - String.trim
+    - String.anchor
+    - String.big
+    - String.blink
+    - String.bold
+    - String.fixed
+    - String.fontcolor
+    - String.fontsize
+    - String.italics
+    - String.link
+    - String.small
+    - String.strike
+    - String.sub
+    - String.sup
+    - RegExp
+    - Number
+    - Math
+    - Date
+    - async
+    - Symbol
+    - Map
+    - Set
+    - WeakMap
+    - WeakSet
+    - ArrayBuffer
+    - DataView
+    - Int8Array
+    - Uint8Array
+    - Uint8ClampedArray
+    - Int16Array
+    - Uint16Array
+    - Int32Array
+    - Uint32Array
+    - Float32Array
+    - Float64Array
+    - Reflect

babel.config.json

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env"]
+}

gulpfile.js

@@ -62,7 +62,7 @@ function serve() {
         port: 8080
     });
 
-    let events = ['add', 'change'];
+    const events = ['add', 'change'];
 
     watch(options.javascript.query).on('all', function (event, path) {
         if (events.includes(event)) {
@@ -105,7 +105,7 @@ function clean() {
     return del(['dist/']);
 }
 
-let pipelineJavascript = lazypipe()
+const pipelineJavascript = lazypipe()
     .pipe(function () {
         return mode.development(sourcemaps.init({ loadMaps: true }));
     })
@@ -140,7 +140,7 @@ function apploader(standalone) {
             .pipe(pipelineJavascript())
             .pipe(dest('dist/'))
             .pipe(browserSync.stream());
-    };
+    }
 
     task.displayName = 'apploader';
 

package.json

@@ -18,6 +18,7 @@
     "cssnano": "^4.1.10",
     "del": "^5.1.0",
     "eslint": "^6.8.0",
+    "eslint-plugin-compat": "^3.5.1",
     "eslint-plugin-eslint-comments": "^3.1.2",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-promise": "^4.2.1",
@@ -54,21 +55,25 @@
   },
   "dependencies": {
     "alameda": "^1.4.0",
+    "classlist.js": "https://github.com/eligrey/classList.js/archive/1.2.20180112.tar.gz",
     "core-js": "^3.6.4",
     "date-fns": "^2.11.1",
     "document-register-element": "^1.14.3",
+    "fast-text-encoding": "^1.0.1",
     "flv.js": "^1.5.0",
     "hls.js": "^0.13.1",
     "howler": "^2.1.3",
+    "intersection-observer": "^0.7.0",
     "jellyfin-noto": "https://github.com/jellyfin/jellyfin-noto",
     "jquery": "^3.4.1",
     "jstree": "^3.3.7",
-    "libass-wasm": "https://github.com/jellyfin/JavascriptSubtitlesOctopus#4.0.0-jf",
+    "libass-wasm": "https://github.com/jellyfin/JavascriptSubtitlesOctopus#4.0.0-jf-cordova",
     "material-design-icons-iconfont": "^5.0.1",
     "native-promise-only": "^0.8.0-a",
     "page": "^1.11.5",
     "query-string": "^6.11.1",
     "resize-observer-polyfill": "^1.5.1",
+    "screenfull": "^5.0.2",
     "shaka-player": "^2.5.10",
     "sortablejs": "^1.10.2",
     "swiper": "^5.3.1",
@@ -89,9 +94,13 @@
           "src/components/filesystem.js",
           "src/components/input/keyboardnavigation.js",
           "src/components/sanatizefilename.js",
-          "src/scripts/settings/webSettings.js",
           "src/components/scrollManager.js",
-          "src/scripts/dfnshelper.js"
+          "src/scripts/settings/appSettings.js",
+          "src/scripts/settings/userSettings.js",
+          "src/scripts/settings/webSettings.js",
+          "src/scripts/dfnshelper.js",
+          "src/scripts/imagehelper.js",
+          "src/scripts/inputManager.js"
         ],
         "plugins": [
           "@babel/plugin-transform-modules-amd"
@@ -115,7 +124,7 @@
     "Firefox ESR"
   ],
   "scripts": {
-    "serve": "gulp serve",
+    "serve": "gulp serve --development",
     "prepare": "gulp --production",
     "build:development": "gulp --development",
     "build:production": "gulp --production",

src/assets/css/librarybrowser.css

@@ -21,7 +21,11 @@
 }
 
 .libraryPage {
-    padding-top: 7em;
+    padding-top: 7em !important;
+}
+
+.layout-mobile .libraryPage {
+    padding-top: 4em !important;
 }
 
 .itemDetailPage {
@@ -128,10 +132,6 @@
     margin-top: 0;
 }
 
-.layout-mobile .pageTitleWithDefaultLogo {
-    background-image: url(../img/icon-transparent.png);
-}
-
 .headerLeft,
 .skinHeader {
     display: -webkit-box;
@@ -246,6 +246,7 @@
 }
 
 @media all and (min-width: 40em) {
+    .dashboardDocument .adminDrawerLogo,
     .dashboardDocument .mainDrawerButton {
         display: none !important;
     }
@@ -313,7 +314,7 @@
     }
 
     .dashboardDocument .mainDrawer-scrollContainer {
-        margin-top: 4.6em !important;
+        margin-top: 4.65em !important;
     }
 }
 
@@ -606,12 +607,11 @@
 }
 
 .detailLogo {
-    width: 67.25vw;
+    width: 30vw;
-    height: 14.5vh;
+    height: 25vh;
     position: absolute;
-    top: 15vh;
+    top: 10vh;
-    right: 0;
+    right: 20vw;
-    -webkit-background-size: contain;
     background-size: contain;
 }
 
@@ -619,26 +619,8 @@
     display: none;
 }
 
-@media all and (max-width: 87.5em) {
-    .detailLogo {
-        right: 5%;
-    }
-}
-
-@media all and (max-width: 75em) {
-    .detailLogo {
-        right: 2%;
-    }
-}
-
 @media all and (max-width: 68.75em) {
     .detailLogo {
-        width: 14.91em;
-        height: 3.5em;
-        right: 5%;
-        bottom: 5%;
-        top: auto;
-        background-position: center right;
         display: none;
     }
 }
@@ -1119,50 +1101,3 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
 .itemsViewSettingsContainer > .button-flat {
     margin: 0;
 }
-
-.layout-mobile #myPreferencesMenuPage {
-    padding-top: 3.75em;
-}
-
-.itemDetailsGroup {
-    margin-bottom: 1.5em;
-}
-
-.trackSelections {
-    max-width: 44em;
-}
-
-.detailsGroupItem,
-.trackSelections .selectContainer {
-    display: flex;
-    max-width: 44em;
-    margin: 0 0 0.5em !important;
-}
-
-.trackSelections .selectContainer {
-    margin: 0 0 0.3em !important;
-}
-
-.detailsGroupItem .label,
-.trackSelections .selectContainer .selectLabel {
-    cursor: default;
-    flex-grow: 0;
-    flex-shrink: 0;
-    flex-basis: 6.25em;
-    margin: 0 0.6em 0 0;
-}
-
-.trackSelections .selectContainer .selectLabel {
-    margin: 0 0.2em 0 0;
-}
-
-.trackSelections .selectContainer .detailTrackSelect {
-    font-size: inherit;
-    padding: 0;
-    overflow: hidden;
-}
-
-.trackSelections .selectContainer .selectArrowContainer .selectArrow {
-    margin-top: 0;
-    font-size: 1.4em;
-}

src/bundle.js

@@ -13,7 +13,7 @@ _define("document-register-element", function() {
 // fetch
 var fetch = require("whatwg-fetch");
 _define("fetch", function() {
-    return fetch
+    return fetch;
 });
 
 // query-string
@@ -85,15 +85,15 @@ _define("webcomponents", function() {
 });
 
 // libass-wasm
-var libass_wasm = require("libass-wasm");
+var libassWasm = require("libass-wasm");
 _define("JavascriptSubtitlesOctopus", function() {
-    return libass_wasm;
+    return libassWasm;
 });
 
 // material-icons
-var material_icons = require("material-design-icons-iconfont/dist/material-design-icons.css");
+var materialIcons = require("material-design-icons-iconfont/dist/material-design-icons.css");
 _define("material-icons", function() {
-    return material_icons;
+    return materialIcons;
 });
 
 // noto font
@@ -113,13 +113,36 @@ _define("polyfill", function () {
     return polyfill;
 });
 
-// Date-FNS
+// domtokenlist-shim
-var date_fns = require("date-fns");
+var classlist = require("classlist.js");
-_define("date-fns", function () {
+_define("classlist-polyfill", function () {
-    return date_fns;
+    return classlist;
 });
 
-var date_fns_locale = require("date-fns/locale");
+// Date-FNS
-_define("date-fns/locale", function () {
+var dateFns = require("date-fns");
-    return date_fns_locale;
+_define("date-fns", function () {
+    return dateFns;
+});
+
+var dateFnsLocale = require("date-fns/locale");
+_define("date-fns/locale", function () {
+    return dateFnsLocale;
+});
+
+var fast_text_encoding = require("fast-text-encoding");
+_define("fast-text-encoding", function () {
+    return fast_text_encoding;
+});
+
+// intersection-observer
+var intersection_observer = require("intersection-observer");
+_define("intersection-observer", function () {
+    return intersection_observer;
+});
+
+// screenfull
+var screenfull = require("screenfull");
+_define("screenfull", function () {
+    return screenfull;
 });

src/components/activitylog.js

@@ -16,7 +16,7 @@ define(["events", "globalize", "dom", "date-fns", "dfnshelper", "userSettings",
             html += '<i class="listItemIcon material-icons" style="width:2em!important;height:2em!important;padding:0;color:transparent;background-color:' + color + ";background-image:url('" + apiClient.getUserImageUrl(entry.UserId, {
                 type: "Primary",
                 tag: entry.UserPrimaryImageTag
-            }) + "');background-repeat:no-repeat;background-position:center center;background-size: cover;\">dvr</i>"
+            }) + "');background-repeat:no-repeat;background-position:center center;background-size: cover;\">dvr</i>";
         } else {
             html += '<i class="listItemIcon material-icons" style="background-color:' + color + '">' + icon + '</i>';
         }

src/components/appRouter.js

@@ -268,6 +268,7 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM
     }
 
     function getMaxBandwidth() {
+        /* eslint-disable compat/compat */
         if (navigator.connection) {
             var max = navigator.connection.downlinkMax;
             if (max && max > 0 && max < Number.POSITIVE_INFINITY) {
@@ -279,6 +280,7 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM
                 return max;
             }
         }
+        /* eslint-enable compat/compat */
 
         return null;
     }
@@ -577,8 +579,9 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM
 
     function showDirect(path) {
         return new Promise(function(resolve, reject) {
-            resolveOnNextShow = resolve, page.show(baseUrl()+path)
+            resolveOnNextShow = resolve;
-        })
+            page.show(baseUrl() + path);
+        });
     }
 
     function show(path, options) {

src/components/apphost.js

@@ -279,8 +279,8 @@ define(["appSettings", "browser", "events", "htmlMediaHelper", "webSettings"], f
         features.push("screensaver");
 
         webSettings.enableMultiServer().then(enabled => {
-            if (enabled) features.push("multiserver")
+            if (enabled) features.push("multiserver");
-        })
+        });
 
         if (!browser.orsay && !browser.msie && (browser.firefox || browser.ps4 || browser.edge || supportsCue())) {
             features.push("subtitleappearancesettings");
@@ -351,8 +351,6 @@ define(["appSettings", "browser", "events", "htmlMediaHelper", "webSettings"], f
     var deviceName;
     var appName = "Jellyfin Web";
     var appVersion = "10.5.0";
-    var visibilityChange;
-    var visibilityState;
 
     var appHost = {
         getWindowState: function () {
@@ -383,7 +381,7 @@ define(["appSettings", "browser", "events", "htmlMediaHelper", "webSettings"], f
                 return window.NativeShell.AppHost.getDefaultLayout();
             }
 
-            return getDefaultLayout()
+            return getDefaultLayout();
         },
         getDeviceProfile: getDeviceProfile,
         init: function () {
@@ -426,40 +424,26 @@ define(["appSettings", "browser", "events", "htmlMediaHelper", "webSettings"], f
         }
     };
 
-    var doc = self.document;
     var isHidden = false;
+    var hidden;
+    var visibilityChange;
 
-    if (doc) {
+    if (typeof document.hidden !== "undefined") { /* eslint-disable-line compat/compat */
-        if (void 0 !== doc.visibilityState) {
+        hidden = "hidden";
-            visibilityChange = "visibilitychange";
+        visibilityChange = "visibilitychange";
-            visibilityState = "hidden";
+    } else if (typeof document.webkitHidden !== "undefined") {
+        hidden = "webkitHidden";
+        visibilityChange = "webkitvisibilitychange";
+    }
+
+    document.addEventListener(visibilityChange, function () {
+        /* eslint-disable-next-line compat/compat */
+        if (document[hidden]) {
+            onAppHidden();
         } else {
-            if (void 0 !== doc.mozHidden) {
+            onAppVisible();
-                visibilityChange = "mozvisibilitychange";
-                visibilityState = "mozVisibilityState";
-            } else {
-                if (void 0 !== doc.msHidden) {
-                    visibilityChange = "msvisibilitychange";
-                    visibilityState = "msVisibilityState";
-                } else {
-                    if (void 0 !== doc.webkitHidden) {
-                        visibilityChange = "webkitvisibilitychange";
-                        visibilityState = "webkitVisibilityState";
-                    }
-                }
-            }
         }
-    }
+    }, false);
-
-    if (doc) {
-        doc.addEventListener(visibilityChange, function () {
-            if (document[visibilityState]) {
-                onAppHidden();
-            } else {
-                onAppVisible();
-            }
-        });
-    }
 
     if (self.addEventListener) {
         self.addEventListener("focus", onAppVisible);

src/components/backdropscreensaver/plugin.js

@@ -52,5 +52,5 @@ define(["connectionManager"], function (connectionManager) {
                 currentSlideshow = null;
             }
         };
-    }
+    };
 });

src/components/chromecast/chromecasthelpers.js

@@ -188,9 +188,9 @@ define(['events'], function (events) {
         return apiClient.getEndpointInfo().then(function (endpoint) {
             if (endpoint.IsInNetwork) {
                 return apiClient.getPublicSystemInfo().then(function (info) {
-                    var localAddress = info.LocalAddress
+                    var localAddress = info.LocalAddress;
                     if (!localAddress) {
-                        console.debug("No valid local address returned, defaulting to external one")
+                        console.debug("No valid local address returned, defaulting to external one");
                         localAddress = serverAddress;
                     }
                     addToCache(serverAddress, localAddress);

src/components/directorybrowser/directorybrowser.js

@@ -7,11 +7,11 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
                 systemInfo = info;
                 return info;
             }
-        )
+        );
     }
 
     function onDialogClosed() {
-        loading.hide()
+        loading.hide();
     }
 
     function refreshDirectoryBrowser(page, path, fileOptions, updatePathOnError) {
@@ -24,7 +24,7 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
         var promises = [];
 
         if ("Network" === path) {
-            promises.push(ApiClient.getNetworkDevices())
+            promises.push(ApiClient.getNetworkDevices());
         } else {
             if (path) {
                 promises.push(ApiClient.getDirectoryContents(path, fileOptions));
@@ -101,7 +101,7 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
                 html += Globalize.translate("MessageDirectoryPickerLinuxInstruction");
                 html += "<br/>";
             }
-            html += "</div>"
+            html += "</div>";
         }
         html += '<form style="margin:auto;">';
         html += '<div class="inputContainer" style="display: flex; align-items: center;">';
@@ -144,13 +144,13 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
     function alertText(text) {
         alertTextWithOptions({
             text: text
-        })
+        });
     }
 
     function alertTextWithOptions(options) {
         require(["alert"], function(alert) {
-            alert(options)
+            alert(options);
-        })
+        });
     }
 
     function validatePath(path, validateWriteable, apiClient) {
@@ -171,12 +171,12 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
                     if (validateWriteable) {
                         alertText(Globalize.translate("WriteAccessRequired"));
                     } else {
-                        alertText(Globalize.translate("PathNotFound"))
+                        alertText(Globalize.translate("PathNotFound"));
                     }
-                    return Promise.reject()
+                    return Promise.reject();
                 }
             }
-            return Promise.resolve()
+            return Promise.resolve();
         });
     }
 
@@ -188,7 +188,7 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
                 if (lnkPath.classList.contains("lnkFile")) {
                     content.querySelector("#txtDirectoryPickerPath").value = path;
                 } else {
-                    refreshDirectoryBrowser(content, path, fileOptions, true)
+                    refreshDirectoryBrowser(content, path, fileOptions, true);
                 }
             }
         });
@@ -275,7 +275,7 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
                     dlg.addEventListener("close", onDialogClosed);
                     dialogHelper.open(dlg);
                     dlg.querySelector(".btnCloseDialog").addEventListener("click", function() {
-                        dialogHelper.close(dlg)
+                        dialogHelper.close(dlg);
                     });
                     currentDialog = dlg;
                     dlg.querySelector("#txtDirectoryPickerPath").value = initialPath;
@@ -293,9 +293,9 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
             if (currentDialog) {
                 dialogHelper.close(currentDialog);
             }
-        }
+        };
     }
 
     var systemInfo;
-    return directoryBrowser
+    return directoryBrowser;
 });

src/components/displaysettings/displaysettings.js

@@ -186,6 +186,8 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
         context.querySelector('#selectLanguage').value = userSettings.language() || '';
         context.querySelector('.selectDateTimeLocale').value = userSettings.dateTimeLocale() || '';
 
+        context.querySelector('#txtLibraryPageSize').value = userSettings.libraryPageSize();
+
         selectDashboardTheme.value = userSettings.dashboardTheme() || '';
         selectTheme.value = userSettings.theme() || '';
 
@@ -215,6 +217,8 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
         userSettingsInstance.soundEffects(context.querySelector('.selectSoundEffects').value);
         userSettingsInstance.screensaver(context.querySelector('.selectScreensaver').value);
 
+        userSettingsInstance.libraryPageSize(context.querySelector('#txtLibraryPageSize').value);
+
         userSettingsInstance.skin(context.querySelector('.selectSkin').value);
 
         userSettingsInstance.enableFastFadein(context.querySelector('#chkFadein').checked);

src/components/displaysettings/displaysettings.template.html

@@ -143,6 +143,11 @@
         <select is="emby-select" class="selectSoundEffects" label="${LabelSoundEffects}"></select>
     </div>
 
+    <div class="inputContainer inputContainer-withDescription fldFadein">
+        <input is="emby-input" type="number" id="txtLibraryPageSize" pattern="[0-9]*" required="required" min="0" max="1000" step="1" label="${LabelLibraryPageSize}" />
+        <div class="fieldDescription">${LabelLibraryPageSizeHelp}</div>
+    </div>
+
     <div class="checkboxContainer checkboxContainer-withDescription fldFadein">
         <label>
             <input type="checkbox" is="emby-checkbox" id="chkFadein" />

src/components/filedownloader.js

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

src/components/fullscreenManager.js

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

src/components/guide/guide.js

@@ -1,4 +1,4 @@
-define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager', 'scrollHelper', 'serverNotifications', 'loading', 'datetime', 'focusManager', 'playbackManager', 'userSettings', 'imageLoader', 'events', 'layoutManager', 'itemShortcuts', 'dom', 'css!./guide.css', 'programStyles', 'material-icons', 'scrollStyles', 'emby-button', 'paper-icon-button-light', 'emby-tabs', 'emby-scroller', 'flexStyles', 'registerElement'], function (require, inputManager, browser, globalize, connectionManager, scrollHelper, serverNotifications, loading, datetime, focusManager, playbackManager, userSettings, imageLoader, events, layoutManager, itemShortcuts, dom) {
+define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager', 'scrollHelper', 'serverNotifications', 'loading', 'datetime', 'focusManager', 'playbackManager', 'userSettings', 'imageLoader', 'events', 'layoutManager', 'itemShortcuts', 'dom', 'css!./guide.css', 'programStyles', 'material-icons', 'scrollStyles', 'emby-programcell', 'emby-button', 'paper-icon-button-light', 'emby-tabs', 'emby-scroller', 'flexStyles', 'registerElement'], function (require, inputManager, browser, globalize, connectionManager, scrollHelper, serverNotifications, loading, datetime, focusManager, playbackManager, userSettings, imageLoader, events, layoutManager, itemShortcuts, dom) {
     'use strict';
 
     function showViewSettings(instance) {
@@ -1252,18 +1252,5 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
         });
     }
 
-    var ProgramCellPrototype = Object.create(HTMLButtonElement.prototype);
-
-    ProgramCellPrototype.detachedCallback = function () {
-        this.posLeft = null;
-        this.posWidth = null;
-        this.guideProgramName = null;
-    };
-
-    document.registerElement('emby-programcell', {
-        prototype: ProgramCellPrototype,
-        extends: 'button'
-    });
-
     return Guide;
 });

src/components/homescreensettings/homescreensettings.template.html

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

src/components/homesections/homesections.js

@@ -64,18 +64,18 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
             } else {
                 var noLibDescription;
                 if (user['Policy'] && user['Policy']['IsAdministrator']) {
-                    noLibDescription = Globalize.translate("NoCreatedLibraries", '<a id="button-createLibrary" class="button-link">', '</a>')
+                    noLibDescription = Globalize.translate("NoCreatedLibraries", '<a id="button-createLibrary" class="button-link">', '</a>');
                 } else {
                     noLibDescription = Globalize.translate("AskAdminToCreateLibrary");
                 }
 
                 html += '<div class="centerMessage padded-left padded-right">';
                 html += '<h2>' + Globalize.translate("MessageNothingHere") + '</h2>';
-                html += '<p>' + noLibDescription + '</p>'
+                html += '<p>' + noLibDescription + '</p>';
                 html += '</div>';
                 elem.innerHTML = html;
 
-                var createNowLink = elem.querySelector("#button-createLibrary")
+                var createNowLink = elem.querySelector("#button-createLibrary");
                 if (createNowLink) {
                     createNowLink.addEventListener("click", function () {
                         Dashboard.navigate("library.html");
@@ -131,7 +131,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         } else if (section === 'librarytiles' || section === 'smalllibrarytiles' || section === 'smalllibrarytiles-automobile' || section === 'librarytiles-automobile') {
             loadLibraryTiles(elem, apiClient, user, userSettings, 'smallBackdrop', userViews, allSections);
         } else if (section === 'librarybuttons') {
-            loadlibraryButtons(elem, apiClient, user, userSettings, userViews, allSections);
+            loadlibraryButtons(elem, apiClient, user, userSettings, userViews);
         } else if (section === 'resume') {
             loadResumeVideo(elem, apiClient, userId);
         } else if (section === 'resumeaudio') {
@@ -640,7 +640,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
                 if (enableScrollX()) {
                     html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">';
-                    html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x">'
+                    html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x">';
                 } else {
                     html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x">';
                 }
@@ -714,7 +714,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
         if (enableScrollX()) {
             html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">';
-            html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x" data-monitor="videoplayback,markplayed">'
+            html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x" data-monitor="videoplayback,markplayed">';
         } else {
             html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x" data-monitor="videoplayback,markplayed">';
         }
@@ -786,7 +786,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
         if (enableScrollX()) {
             html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">';
-            html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x">'
+            html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x">';
         } else {
             html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x">';
         }

src/components/htmlMediaHelper.js

@@ -31,7 +31,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
     }
 
     function enableHlsShakaPlayer(item, mediaSource, mediaType) {
-
+        /* eslint-disable-next-line compat/compat */
         if (!!window.MediaSource && !!MediaSource.isTypeSupported) {
 
             if (canPlayNativeHls()) {
@@ -162,7 +162,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
         }
     }
 
-    function seekOnPlaybackStart(instance, element, ticks) {
+    function seekOnPlaybackStart(instance, element, ticks, onMediaReady) {
 
         var seconds = (ticks || 0) / 10000000;
 
@@ -171,13 +171,31 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
 
             // Appending #t=xxx to the query string doesn't seem to work with HLS
             // For plain video files, not all browsers support it either
-            var delay = browser.safari ? 2500 : 0;
+
-            if (delay) {
+            if (element.duration >= seconds) {
-                setTimeout(function () {
+                // media is ready, seek immediately
-                    setCurrentTimeIfNeeded(element, seconds);
-                }, delay);
-            } else {
                 setCurrentTimeIfNeeded(element, seconds);
+                if (onMediaReady) onMediaReady();
+            } else {
+                // update video player position when media is ready to be sought
+                var events = ["durationchange", "loadeddata", "play", "loadedmetadata"];
+                var 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
+                        // user rewound to the very beginning
+                        // (but rewinding cannot happen as the first event with media of non-empty duration)
+                        console.debug(`seeking to ${seconds} on ${e.type} event`);
+                        setCurrentTimeIfNeeded(element, seconds);
+                        events.map(function(name) {
+                            element.removeEventListener(name, onMediaChange);
+                        });
+                        if (onMediaReady) onMediaReady();
+                    }
+                };
+                events.map(function (name) {
+                    element.addEventListener(name, onMediaChange);
+                });
             }
         }
     }

src/components/htmlaudioplayer/plugin.js

@@ -101,7 +101,7 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
             self._timeUpdated = false;
             self._currentTime = null;
 
-            var elem = createMediaElement(options);
+            var elem = createMediaElement();
             return setCurrentSrc(elem, options);
         };
 

src/components/htmlvideoplayer/plugin.js

@@ -1,4 +1,4 @@
-define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackManager', 'appRouter', 'appSettings', 'connectionManager', 'htmlMediaHelper', 'itemHelper', 'fullscreenManager', 'globalize'], function (browser, require, events, appHost, loading, dom, playbackManager, appRouter, appSettings, connectionManager, htmlMediaHelper, itemHelper, fullscreenManager, globalize) {
+define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackManager', 'appRouter', 'appSettings', 'connectionManager', 'htmlMediaHelper', 'itemHelper', 'screenfull', 'globalize'], function (browser, require, events, appHost, loading, dom, playbackManager, appRouter, appSettings, connectionManager, htmlMediaHelper, itemHelper, screenfull, globalize) {
     "use strict";
     /* globals cast */
 
@@ -116,8 +116,9 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
         });
     }
 
-    function normalizeTrackEventText(text) {
+    function normalizeTrackEventText(text, useHtml) {
-        return text.replace(/\\N/gi, '\n');
+        var result = text.replace(/\\N/gi, '\n').replace(/\r/gi, '');
+        return useHtml ? result.replace(/\n/gi, '<br>') : result;
     }
 
     function setTracks(elem, tracks, item, mediaSource) {
@@ -567,19 +568,19 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
         self.resetSubtitleOffset = function() {
             currentTrackOffset = 0;
             showTrackOffset = false;
-        }
+        };
 
         self.enableShowingSubtitleOffset = function() {
             showTrackOffset = true;
-        }
+        };
 
         self.disableShowingSubtitleOffset = function() {
             showTrackOffset = false;
-        }
+        };
 
         self.isShowingSubtitleOffsetEnabled = function() {
             return showTrackOffset;
-        }
+        };
 
         function getTextTrack() {
             var videoElement = self._mediaElement;
@@ -599,8 +600,9 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
             var offsetValue = parseFloat(offset);
 
             // if .ass currently rendering
-            if (currentAssRenderer) {
+            if (currentSubtitlesOctopus) {
                 updateCurrentTrackOffset(offsetValue);
+                currentSubtitlesOctopus.timeOffset = offsetValue;
             } else {
                 var trackElement = getTextTrack();
                 // if .vtt currently rendering
@@ -651,7 +653,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
 
         self.getSubtitleOffset = function() {
             return currentTrackOffset;
-        }
+        };
 
         function isAudioStreamSupported(stream, deviceProfile) {
 
@@ -793,7 +795,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
                 dlg.parentNode.removeChild(dlg);
             }
 
-            fullscreenManager.exitFullscreen();
+            screenfull.exit();
         };
 
         function onEnded() {
@@ -855,7 +857,9 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
 
                 loading.hide();
 
-                htmlMediaHelper.seekOnPlaybackStart(self, e.target, self._currentPlayOptions.playerStartPositionTicks);
+                htmlMediaHelper.seekOnPlaybackStart(self, e.target, self._currentPlayOptions.playerStartPositionTicks, function () {
+                    if (currentSubtitlesOctopus) currentSubtitlesOctopus.resize();
+                });
 
                 if (self._currentPlayOptions.fullscreen) {
 
@@ -1019,7 +1023,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
                 xhr.onerror = function (e) {
                     reject(e);
                     decrementFetchQueue();
-                }
+                };
 
                 xhr.send();
             });
@@ -1048,11 +1052,12 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
 
         function renderSsaAss(videoElement, track, item) {
             var attachments = self._currentPlayOptions.mediaSource.MediaAttachments || [];
+            var apiClient = connectionManager.getApiClient(item);
             var options = {
                 video: videoElement,
                 subUrl: getTextTrackUrl(track, item),
                 fonts: attachments.map(function (i) {
-                    return i.DeliveryUrl;
+                    return apiClient.getUrl(i.DeliveryUrl);
                 }),
                 workerUrl: appRouter.baseUrl() + "/libraries/subtitles-octopus-worker.js",
                 legacyWorkerUrl: appRouter.baseUrl() + "/libraries/subtitles-octopus-worker-legacy.js",
@@ -1208,7 +1213,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
                 data.TrackEvents.forEach(function (trackEvent) {
 
                     var trackCueObject = window.VTTCue || window.TextTrackCue;
-                    var cue = new trackCueObject(trackEvent.StartPositionTicks / 10000000, trackEvent.EndPositionTicks / 10000000, normalizeTrackEventText(trackEvent.Text));
+                    var cue = new trackCueObject(trackEvent.StartPositionTicks / 10000000, trackEvent.EndPositionTicks / 10000000, normalizeTrackEventText(trackEvent.Text, false));
 
                     trackElement.addCue(cue);
                 });
@@ -1218,11 +1223,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
 
         function updateSubtitleText(timeMs) {
 
-            // handle offset for ass tracks
-            if (currentTrackOffset) {
-                timeMs += (currentTrackOffset * 1000);
-            }
-
             var clock = currentClock;
             if (clock) {
                 try {
@@ -1249,8 +1249,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
                 }
 
                 if (selectedTrackEvent && selectedTrackEvent.Text) {
-
+                    subtitleTextElement.innerHTML = normalizeTrackEventText(selectedTrackEvent.Text, true);
-                    subtitleTextElement.innerHTML = normalizeTrackEventText(selectedTrackEvent.Text);
                     subtitleTextElement.classList.remove('hide');
 
                 } else {
@@ -1427,11 +1426,11 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
         }
 
         if (browser.safari || browser.iOS || browser.iPad) {
-            list.push('AirPlay')
+            list.push('AirPlay');
         }
 
         list.push('SetBrightness');
-        list.push("SetAspectRatio")
+        list.push("SetAspectRatio");
 
         return list;
     }
@@ -1554,11 +1553,11 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
             if (video) {
                 if (isEnabled) {
                     video.requestAirPlay().catch(function(err) {
-                        console.error("Error requesting AirPlay", err)
+                        console.error("Error requesting AirPlay", err);
                     });
                 } else {
                     document.exitAirPLay().catch(function(err) {
-                        console.error("Error exiting AirPlay", err)
+                        console.error("Error exiting AirPlay", err);
                     });
                 }
             }
@@ -1691,12 +1690,12 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
         var mediaElement = this._mediaElement;
         if (mediaElement) {
             if ("auto" === val) {
-                mediaElement.style.removeProperty("object-fit")
+                mediaElement.style.removeProperty("object-fit");
             } else {
-                mediaElement.style["object-fit"] = val
+                mediaElement.style["object-fit"] = val;
             }
         }
-        this._currentAspectRatio = val
+        this._currentAspectRatio = val;
     };
 
     HtmlVideoPlayer.prototype.getAspectRatio = function () {
@@ -1713,7 +1712,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
         }, {
             name: "Fill",
             id: "fill"
-        }]
+        }];
     };
 
     HtmlVideoPlayer.prototype.togglePictureInPicture = function () {

src/components/images/imageLoader.js

@@ -1,10 +1,6 @@
 define(['lazyLoader', 'imageFetcher', 'layoutManager', 'browser', 'appSettings', 'userSettings', 'require', 'css!./style'], function (lazyLoader, imageFetcher, layoutManager, browser, appSettings, userSettings, require) {
     'use strict';
 
-    var requestIdleCallback = window.requestIdleCallback || function (fn) {
-        fn();
-    };
-
     var self = {};
 
     function fillImage(elem, source, enableEffects) {

src/components/indicators/indicators.js

@@ -1,4 +1,4 @@
-define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], function (datetime, itemHelper) {
+define(['datetime', 'itemHelper', 'emby-progressbar', 'css!./indicators.css', 'material-icons'], function (datetime, itemHelper) {
     'use strict';
 
     function enableProgressIndicator(item) {
@@ -183,45 +183,6 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
         return '';
     }
 
-    var ProgressBarPrototype = Object.create(HTMLDivElement.prototype);
-
-    function onAutoTimeProgress() {
-        var start = parseInt(this.getAttribute('data-starttime'));
-        var end = parseInt(this.getAttribute('data-endtime'));
-
-        var now = new Date().getTime();
-        var total = end - start;
-        var pct = 100 * ((now - start) / total);
-
-        pct = Math.min(100, pct);
-        pct = Math.max(0, pct);
-
-        var itemProgressBarForeground = this.querySelector('.itemProgressBarForeground');
-        itemProgressBarForeground.style.width = pct + '%';
-    }
-
-    ProgressBarPrototype.attachedCallback = function () {
-        if (this.timeInterval) {
-            clearInterval(this.timeInterval);
-        }
-
-        if (this.getAttribute('data-automode') === 'time') {
-            this.timeInterval = setInterval(onAutoTimeProgress.bind(this), 60000);
-        }
-    };
-
-    ProgressBarPrototype.detachedCallback = function () {
-        if (this.timeInterval) {
-            clearInterval(this.timeInterval);
-            this.timeInterval = null;
-        }
-    };
-
-    document.registerElement('emby-progressbar', {
-        prototype: ProgressBarPrototype,
-        extends: 'div'
-    });
-
     return {
         getProgressHtml: getProgressHtml,
         getProgressBarHtml: getProgressBarHtml,

src/components/input/gamepadtokey.js

@@ -184,7 +184,7 @@ require(['apphost'], function (appHost) {
     function allowInput() {
 
         // This would be nice but always seems to return true with electron
-        if (!isElectron && document.hidden) {
+        if (!isElectron && document.hidden) { /* eslint-disable-line compat/compat */
             return false;
         }
 
@@ -254,7 +254,7 @@ require(['apphost'], function (appHost) {
     var inputLoopTimer;
     function runInputLoop() {
         // Get the latest gamepad state.
-        var gamepads = navigator.getGamepads();
+        var gamepads = navigator.getGamepads(); /* eslint-disable-line compat/compat */
         for (var i = 0, len = gamepads.length; i < len; i++) {
             var gamepad = gamepads[i];
             if (!gamepad) {
@@ -362,7 +362,7 @@ require(['apphost'], function (appHost) {
     }
 
     function isGamepadConnected() {
-        var gamepads = navigator.getGamepads();
+        var gamepads = navigator.getGamepads(); /* eslint-disable-line compat/compat */
         for (var i = 0, len = gamepads.length; i < len; i++) {
             var gamepad = gamepads[i];
             if (gamepad && gamepad.connected) {
@@ -373,6 +373,7 @@ require(['apphost'], function (appHost) {
     }
 
     function onFocusOrGamepadAttach(e) {
+        /* eslint-disable-next-line compat/compat */
         if (isGamepadConnected() && document.hasFocus()) {
             console.log("Gamepad connected! Starting input loop");
             startInputLoop();
@@ -380,6 +381,7 @@ require(['apphost'], function (appHost) {
     }
 
     function onFocusOrGamepadDetach(e) {
+        /* eslint-disable-next-line compat/compat */
         if (!isGamepadConnected() || !document.hasFocus()) {
             console.log("Gamepad disconnected! No other gamepads are connected, stopping input loop");
             stopInputLoop();

src/components/input/keyboardnavigation.js

@@ -159,7 +159,9 @@ function attachGamepadScript(e) {
 }
 
 // No need to check for gamepads manually at load time, the eventhandler will be fired for that
-window.addEventListener("gamepadconnected", attachGamepadScript);
+if (navigator.getGamepads) { /* eslint-disable-line compat/compat */
+    window.addEventListener("gamepadconnected", attachGamepadScript);
+}
 
 export default {
     enable: enable,

src/components/itemMediaInfo/itemMediaInfo.js

@@ -116,7 +116,7 @@ define(["dialogHelper", "require", "layoutManager", "globalize", "userSettings",
     }
 
     function createAttribute(label, value) {
-        return '<span class="mediaInfoLabel">' + label + '</span><span class="mediaInfoAttribute">' + value + "</span>"
+        return '<span class="mediaInfoLabel">' + label + '</span><span class="mediaInfoAttribute">' + value + "</span>";
     }
 
     function showMediaInfoMore(itemId, serverId, template) {

src/components/itemcontextmenu.js

@@ -339,7 +339,9 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
                         fileDownloader.download([{
                             url: downloadHref,
                             itemId: itemId,
-                            serverId: serverId
+                            serverId: serverId,
+                            title: item.Name,
+                            filename: item.Path.replace(/^.*[\\\/]/, '')
                         }]);
                         getResolveFunction(getResolveFunction(resolve, id), id)();
                     });
@@ -352,6 +354,7 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
                         document.body.appendChild(textArea);
                         textArea.focus();
                         textArea.select();
+
                         if (document.execCommand("copy")) {
                             require(["toast"], function (toast) {
                                 toast(globalize.translate("CopyStreamURLSuccess"));
@@ -361,14 +364,19 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
                         }
                         document.body.removeChild(textArea);
                     };
+
+                    /* eslint-disable-next-line compat/compat */
                     if (navigator.clipboard === undefined) {
                         textAreaCopy();
                     } else {
+                        /* eslint-disable-next-line compat/compat */
                         navigator.clipboard.writeText(downloadHref).then(function () {
                             require(["toast"], function (toast) {
                                 toast(globalize.translate("CopyStreamURLSuccess"));
                             });
-                        }, textAreaCopy);
+                        }).catch(function () {
+                            textAreaCopy();
+                        });
                     }
                     getResolveFunction(resolve, id)();
                     break;

src/components/lazyloader/lazyloader-scroll.js

@@ -4,10 +4,6 @@ define(['visibleinviewport', 'dom', 'browser'], function (visibleinviewport, dom
     var thresholdX;
     var thresholdY;
 
-    var requestIdleCallback = window.requestIdleCallback || function (fn) {
-        fn();
-    };
-
     function resetThresholds() {
 
         var threshold = 0.3;

src/components/libraryoptionseditor/libraryoptionseditor.js

@@ -36,7 +36,7 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
                 html += "<option value='" + culture.TwoLetterISORegionName + "'>" + culture.DisplayName + "</option>";
             }
             select.innerHTML = html;
-        })
+        });
     }
 
     function populateRefreshInterval(select) {
@@ -120,7 +120,7 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
             html += plugin.Name;
             html += "</h3>";
             html += "</div>";
-            i > 0 ? html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="material-icons keyboard_arrow_up"></i></button>' : plugins.length > 1 && (html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="material-icons keyboard_arrow_down"></i></button>'), html += "</div>"
+            i > 0 ? html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="material-icons keyboard_arrow_up"></i></button>' : plugins.length > 1 && (html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="material-icons keyboard_arrow_down"></i></button>'), html += "</div>";
         }
         html += "</div>";
         html += '<div class="fieldDescription">' + globalize.translate("LabelMetadataDownloadersHelp") + "</div>";
@@ -265,10 +265,10 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
             renderMetadataFetchers(parent, availableOptions, {});
             renderSubtitleFetchers(parent, availableOptions, {});
             renderImageFetchers(parent, availableOptions, {});
-            availableOptions.SubtitleFetchers.length ? parent.querySelector(".subtitleDownloadSettings").classList.remove("hide") : parent.querySelector(".subtitleDownloadSettings").classList.add("hide")
+            availableOptions.SubtitleFetchers.length ? parent.querySelector(".subtitleDownloadSettings").classList.remove("hide") : parent.querySelector(".subtitleDownloadSettings").classList.add("hide");
         }).catch(function() {
             return Promise.resolve();
-        })
+        });
     }
 
     function adjustSortableListElement(elem) {
@@ -296,8 +296,8 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
                 Type: type
             }, currentLibraryOptions.TypeOptions.push(typeOptions));
             var availableOptions = getTypeOptions(currentAvailableOptions || {}, type);
-            (new ImageOptionsEditor).show(type, typeOptions, availableOptions)
+            (new ImageOptionsEditor).show(type, typeOptions, availableOptions);
-        })
+        });
     }
 
     function onImageFetchersContainerClick(e) {
@@ -315,12 +315,12 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
             var list = dom.parentWithClass(li, "paperList");
             if (btnSortable.classList.contains("btnSortableMoveDown")) {
                 var next = li.nextSibling;
-                next && (li.parentNode.removeChild(li), next.parentNode.insertBefore(li, next.nextSibling))
+                next && (li.parentNode.removeChild(li), next.parentNode.insertBefore(li, next.nextSibling));
             } else {
                 var prev = li.previousSibling;
-                prev && (li.parentNode.removeChild(li), prev.parentNode.insertBefore(li, prev))
+                prev && (li.parentNode.removeChild(li), prev.parentNode.insertBefore(li, prev));
             }
-            Array.prototype.forEach.call(list.querySelectorAll(".sortableOption"), adjustSortableListElement)
+            Array.prototype.forEach.call(list.querySelectorAll(".sortableOption"), adjustSortableListElement);
         }
     }
 
@@ -407,13 +407,13 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
 
     function setSubtitleFetchersIntoOptions(parent, options) {
         options.DisabledSubtitleFetchers = Array.prototype.map.call(Array.prototype.filter.call(parent.querySelectorAll(".chkSubtitleFetcher"), function(elem) {
-            return !elem.checked
+            return !elem.checked;
         }), function(elem) {
-            return elem.getAttribute("data-pluginname")
+            return elem.getAttribute("data-pluginname");
         });
 
         options.SubtitleFetcherOrder = Array.prototype.map.call(parent.querySelectorAll(".subtitleFetcherItem"), function(elem) {
-            return elem.getAttribute("data-pluginname")
+            return elem.getAttribute("data-pluginname");
         });
     }
 
@@ -455,13 +455,13 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
             }
 
             typeOptions.ImageFetchers = Array.prototype.map.call(Array.prototype.filter.call(section.querySelectorAll(".chkImageFetcher"), function(elem) {
-                return elem.checked
+                return elem.checked;
             }), function(elem) {
-                return elem.getAttribute("data-pluginname")
+                return elem.getAttribute("data-pluginname");
             });
 
             typeOptions.ImageFetcherOrder = Array.prototype.map.call(section.querySelectorAll(".imageFetcherItem"), function(elem) {
-                return elem.getAttribute("data-pluginname")
+                return elem.getAttribute("data-pluginname");
             });
         }
     }
@@ -505,20 +505,20 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
             SaveSubtitlesWithMedia: parent.querySelector("#chkSaveSubtitlesLocally").checked,
             RequirePerfectSubtitleMatch: parent.querySelector("#chkRequirePerfectMatch").checked,
             MetadataSavers: Array.prototype.map.call(Array.prototype.filter.call(parent.querySelectorAll(".chkMetadataSaver"), function(elem) {
-                return elem.checked
+                return elem.checked;
             }), function(elem) {
-                return elem.getAttribute("data-pluginname")
+                return elem.getAttribute("data-pluginname");
             }),
             TypeOptions: []
         };
 
         options.LocalMetadataReaderOrder = Array.prototype.map.call(parent.querySelectorAll(".localReaderOption"), function(elem) {
-            return elem.getAttribute("data-pluginname")
+            return elem.getAttribute("data-pluginname");
         });
         options.SubtitleDownloadLanguages = Array.prototype.map.call(Array.prototype.filter.call(parent.querySelectorAll(".chkSubtitleLanguage"), function(elem) {
-            return elem.checked
+            return elem.checked;
         }), function(elem) {
-            return elem.getAttribute("data-lang")
+            return elem.getAttribute("data-lang");
         });
         setSubtitleFetchersIntoOptions(parent, options);
         setMetadataFetchersIntoOptions(parent, options);
@@ -531,7 +531,7 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
     function getOrderedPlugins(plugins, configuredOrder) {
         plugins = plugins.slice(0);
         plugins.sort(function(a, b) {
-            return a = configuredOrder.indexOf(a.Name), b = configuredOrder.indexOf(b.Name), a < b ? -1 : a > b ? 1 : 0
+            return a = configuredOrder.indexOf(a.Name), b = configuredOrder.indexOf(b.Name), a < b ? -1 : a > b ? 1 : 0;
         });
         return plugins;
     }
@@ -558,10 +558,10 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
         parent.querySelector("#chkSkipIfAudioTrackPresent").checked = options.SkipSubtitlesIfAudioTrackMatches;
         parent.querySelector("#chkRequirePerfectMatch").checked = options.RequirePerfectSubtitleMatch;
         Array.prototype.forEach.call(parent.querySelectorAll(".chkMetadataSaver"), function(elem) {
-            elem.checked = options.MetadataSavers ? -1 !== options.MetadataSavers.indexOf(elem.getAttribute("data-pluginname")) : "true" === elem.getAttribute("data-defaultenabled")
+            elem.checked = options.MetadataSavers ? -1 !== options.MetadataSavers.indexOf(elem.getAttribute("data-pluginname")) : "true" === elem.getAttribute("data-defaultenabled");
         });
         Array.prototype.forEach.call(parent.querySelectorAll(".chkSubtitleLanguage"), function(elem) {
-            elem.checked = !!options.SubtitleDownloadLanguages && -1 !== options.SubtitleDownloadLanguages.indexOf(elem.getAttribute("data-lang"))
+            elem.checked = !!options.SubtitleDownloadLanguages && -1 !== options.SubtitleDownloadLanguages.indexOf(elem.getAttribute("data-lang"));
         });
         renderMetadataReaders(parent, getOrderedPlugins(parent.availableOptions.MetadataReaders, options.LocalMetadataReaderOrder || []));
         renderMetadataFetchers(parent, parent.availableOptions, options);
@@ -578,5 +578,5 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
         getLibraryOptions: getLibraryOptions,
         setLibraryOptions: setLibraryOptions,
         setAdvancedVisible: setAdvancedVisible
-    }
+    };
 });

src/components/logoscreensaver/plugin.js

@@ -188,5 +188,5 @@ define(["pluginManager"], function (pluginManager) {
                 }
             }
         };
-    }
+    };
 });

src/components/notifications/notifications.js

@@ -6,6 +6,7 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
         document.removeEventListener('keydown', onOneDocumentClick);
 
         if (window.Notification) {
+            /* eslint-disable-next-line compat/compat */
             Notification.requestPermission();
         }
     }
@@ -26,6 +27,7 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
     }
 
     function resetRegistration() {
+        /* eslint-disable-next-line compat/compat */
         var serviceWorker = navigator.serviceWorker;
         if (serviceWorker) {
             serviceWorker.ready.then(function (registration) {

src/components/nowplayingbar/nowplayingbar.js

@@ -187,29 +187,15 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
             volumeSliderContainer.classList.remove('hide');
         }
 
-        var volumeSliderTimer;
-
         function setVolume() {
-            clearTimeout(volumeSliderTimer);
-            volumeSliderTimer = null;
-
             if (currentPlayer) {
                 currentPlayer.setVolume(this.value);
             }
         }
 
-        function setVolumeDelayed() {
-            if (!volumeSliderTimer) {
-                var that = this;
-                volumeSliderTimer = setTimeout(function () {
-                    setVolume.call(that);
-                }, 700);
-            }
-        }
-
         volumeSlider.addEventListener('change', setVolume);
-        volumeSlider.addEventListener('mousemove', setVolumeDelayed);
+        volumeSlider.addEventListener('mousemove', setVolume);
-        volumeSlider.addEventListener('touchmove', setVolumeDelayed);
+        volumeSlider.addEventListener('touchmove', setVolume);
 
         positionSlider = elem.querySelector('.nowPlayingBarPositionSlider');
         positionSlider.addEventListener('change', function () {
@@ -241,7 +227,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
         elem.addEventListener('click', function (e) {
 
             if (!dom.parentWithTag(e.target, ['BUTTON', 'INPUT', 'A'])) {
-                showRemoteControl(0);
+                showRemoteControl();
             }
         });
     }

src/components/playback/playbackmanager.js

@@ -1,4 +1,4 @@
-define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'playQueueManager', 'userSettings', 'globalize', 'connectionManager', 'loading', 'apphost', 'fullscreenManager'], function (events, datetime, appSettings, itemHelper, pluginManager, PlayQueueManager, userSettings, globalize, connectionManager, loading, apphost, fullscreenManager) {
+define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'playQueueManager', 'userSettings', 'globalize', 'connectionManager', 'loading', 'apphost', 'screenfull'], function (events, datetime, appSettings, itemHelper, pluginManager, PlayQueueManager, userSettings, globalize, connectionManager, loading, apphost, screenfull) {
     'use strict';
 
     function enableLocalPlaylistManagement(player) {
@@ -17,7 +17,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
     }
 
     function bindToFullscreenChange(player) {
-        events.on(fullscreenManager, 'fullscreenchange', function () {
+        screenfull.on('change', function () {
             events.trigger(player, 'fullscreenchange');
         });
     }
@@ -1518,7 +1518,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                 return player.isFullscreen();
             }
 
-            return fullscreenManager.isFullScreen();
+            return screenfull.isFullscreen;
         };
 
         self.toggleFullscreen = function (player) {
@@ -1528,10 +1528,8 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                 return player.toggleFulscreen();
             }
 
-            if (fullscreenManager.isFullScreen()) {
+            if (screenfull.isEnabled) {
-                fullscreenManager.exitFullscreen();
+                screenfull.toggle();
-            } else {
-                fullscreenManager.requestFullscreen();
             }
         };
 
@@ -1633,29 +1631,29 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
         self.supportSubtitleOffset = function(player) {
             player = player || self._currentPlayer;
             return player && 'setSubtitleOffset' in player;
-        }
+        };
 
         self.enableShowingSubtitleOffset = function(player) {
             player = player || self._currentPlayer;
             player.enableShowingSubtitleOffset();
-        }
+        };
 
         self.disableShowingSubtitleOffset = function(player) {
             player = player || self._currentPlayer;
             if (player.disableShowingSubtitleOffset) {
                 player.disableShowingSubtitleOffset();
             }
-        }
+        };
 
         self.isShowingSubtitleOffsetEnabled = function(player) {
             player = player || self._currentPlayer;
             return player.isShowingSubtitleOffsetEnabled();
-        }
+        };
 
         self.isSubtitleStreamExternal = function(index, player) {
             var stream = getSubtitleStream(player, index);
             return stream ? getDeliveryMethod(stream) === 'External' : false;
-        }
+        };
 
         self.setSubtitleOffset = function (value, player) {
             player = player || self._currentPlayer;
@@ -1669,12 +1667,12 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
             if (player.getSubtitleOffset) {
                 return player.getSubtitleOffset();
             }
-        }
+        };
 
         self.canHandleOffsetOnCurrentSubtitle = function(player) {
             var index = self.getSubtitleStreamIndex(player);
             return index !== -1 && self.isSubtitleStreamExternal(index, player);
-        }
+        };
 
         self.seek = function (ticks, player) {
 
@@ -3140,7 +3138,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                         AllowVideoStreamCopy: false,
                         AllowAudioStreamCopy: currentlyPreventsAudioStreamCopy || currentlyPreventsVideoStreamCopy ? false : null
 
-                    }, true);
+                    });
 
                     return;
                 }
@@ -3282,7 +3280,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
 
         function onPlaybackVolumeChange(e) {
             var player = this;
-            sendProgressUpdate(player, 'volumechange');
+            sendProgressUpdateDelayed(player, 'volumechange');
         }
 
         function onRepeatModeChange(e) {
@@ -3377,7 +3375,15 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
 
         pluginManager.ofType('mediaplayer').map(initMediaPlayer);
 
+        /** Delay timer for sendProgressUpdate */
+        var sendProgressUpdateTimer;
+
+        /** Delay time in ms for sendProgressUpdate */
+        var sendProgressUpdateDelay = 700;
+
         function sendProgressUpdate(player, progressEventName, reportPlaylist) {
+            clearTimeout(sendProgressUpdateTimer);
+            sendProgressUpdateTimer = null;
 
             if (!player) {
                 throw new Error('player cannot be null');
@@ -3403,6 +3409,14 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
             }
         }
 
+        function sendProgressUpdateDelayed(player, progressEventName, reportPlaylist) {
+            if (!sendProgressUpdateTimer) {
+                sendProgressUpdateTimer = setTimeout(function () {
+                    sendProgressUpdate(player, progressEventName, reportPlaylist);
+                }, sendProgressUpdateDelay);
+            }
+        }
+
         function getLiveStreamMediaInfo(player, streamInfo, mediaSource, liveStreamId, serverId) {
 
             console.debug('getLiveStreamMediaInfo');

src/components/playback/playbackorientation.js

@@ -17,6 +17,7 @@ define(['playbackManager', 'layoutManager', 'events'], function (playbackManager
         var isLocalVideo = player.isLocalPlayer && !player.isExternalPlayer && playbackManager.isPlayingVideo(player);
 
         if (isLocalVideo && layoutManager.mobile) {
+            /* eslint-disable-next-line compat/compat */
             var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation || (screen.orientation && screen.orientation.lock);
 
             if (lockOrientation) {
@@ -40,6 +41,7 @@ define(['playbackManager', 'layoutManager', 'events'], function (playbackManager
 
         if (orientationLocked && !playbackStopInfo.nextMediaType) {
 
+            /* eslint-disable-next-line compat/compat */
             var unlockOrientation = screen.unlockOrientation || screen.mozUnlockOrientation || screen.msUnlockOrientation || (screen.orientation && screen.orientation.unlock);
 
             if (unlockOrientation) {

src/components/remotecontrol/remotecontrol.js

@@ -614,27 +614,13 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
                 return datetime.getDisplayRunningTime(ticks);
             };
 
-            var volumeSliderTimer;
-
             function setVolume() {
-                clearTimeout(volumeSliderTimer);
-                volumeSliderTimer = null;
-
                 playbackManager.setVolume(this.value, currentPlayer);
             }
 
-            function setVolumeDelayed() {
-                if (!volumeSliderTimer) {
-                    var that = this;
-                    volumeSliderTimer = setTimeout(function () {
-                        setVolume.call(that);
-                    }, 700);
-                }
-            }
-
             context.querySelector(".nowPlayingVolumeSlider").addEventListener("change", setVolume);
-            context.querySelector(".nowPlayingVolumeSlider").addEventListener("mousemove", setVolumeDelayed);
+            context.querySelector(".nowPlayingVolumeSlider").addEventListener("mousemove", setVolume);
-            context.querySelector(".nowPlayingVolumeSlider").addEventListener("touchmove", setVolumeDelayed);
+            context.querySelector(".nowPlayingVolumeSlider").addEventListener("touchmove", setVolume);
             context.querySelector(".buttonMute").addEventListener("click", function () {
                 playbackManager.toggleMute(currentPlayer);
             });

src/components/slideshow/slideshow.js

@@ -1,8 +1,18 @@
-define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'focusManager', 'browser', 'apphost', 'loading', 'css!./style', 'material-icons', 'paper-icon-button-light'], function (dialogHelper, inputManager, connectionManager, layoutManager, focusManager, browser, appHost, loading) {
+/**
+ * Image viewer component
+ * @module components/slideshow/slideshow
+ */
+define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'focusManager', 'browser', 'apphost', 'css!./style', 'material-icons', 'paper-icon-button-light'], function (dialogHelper, inputManager, connectionManager, layoutManager, focusManager, browser, appHost) {
     'use strict';
 
+    /**
+     * Retrieves an item's image URL from the API.
+     * @param {object|string} item - Item used to generate the image URL.
+     * @param {object} options - Options of the image.
+     * @param {object} apiClient - API client instance used to retrieve the image.
+     * @returns {null|string} URL of the item's image.
+     */
     function getImageUrl(item, options, apiClient) {
-
         options = options || {};
         options.type = options.type || "Primary";
 
@@ -11,7 +21,6 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
         }
 
         if (item.ImageTags && item.ImageTags[options.type]) {
-
             options.tag = item.ImageTags[options.type];
             return apiClient.getScaledImageUrl(item.Id, options);
         }
@@ -27,8 +36,14 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
         return null;
     }
 
+    /**
+     * Retrieves a backdrop's image URL from the API.
+     * @param {object} item - Item used to generate the image URL.
+     * @param {object} options - Options of the image.
+     * @param {object} apiClient - API client instance used to retrieve the image.
+     * @returns {null|string} URL of the item's backdrop.
+     */
     function getBackdropImageUrl(item, options, apiClient) {
-
         options = options || {};
         options.type = options.type || "Backdrop";
 
@@ -46,19 +61,19 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
         return null;
     }
 
-    function getImgUrl(item, original) {
+    /**
-
+     * Dispatches a request for an item's image to its respective handler.
+     * @param {object} item - Item used to generate the image URL.
+     * @returns {string} URL of the item's image.
+     */
+    function getImgUrl(item) {
         var apiClient = connectionManager.getApiClient(item.ServerId);
         var imageOptions = {};
 
-        if (!original) {
-            imageOptions.maxWidth = screen.availWidth;
-        }
         if (item.BackdropImageTags && item.BackdropImageTags.length) {
             return getBackdropImageUrl(item, imageOptions, apiClient);
         } else {
-
+            if (item.MediaType === 'Photo') {
-            if (item.MediaType === 'Photo' && original) {
                 return apiClient.getItemDownloadUrl(item.Id);
             }
             imageOptions.type = "Primary";
@@ -66,15 +81,25 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
         }
     }
 
+    /**
+     * Generates a button using the specified icon, classes and properties.
+     * @param {string} icon - Name of the material icon on the button
+     * @param {string} cssClass - CSS classes to assign to the button
+     * @param {boolean} canFocus - Flag to set the tabindex attribute on the button to -1.
+     * @param {boolean} autoFocus - Flag to set the autofocus attribute on the button.
+     * @returns {string} The HTML markup of the button.
+     */
     function getIcon(icon, cssClass, canFocus, autoFocus) {
-
         var tabIndex = canFocus ? '' : ' tabindex="-1"';
         autoFocus = autoFocus ? ' autofocus' : '';
         return '<button is="paper-icon-button-light" class="autoSize ' + cssClass + '"' + tabIndex + autoFocus + '><i class="material-icons slideshowButtonIcon ' + icon + '"></i></button>';
     }
 
+    /**
+     * Sets the viewport meta tag to enable or disable scaling by the user.
+     * @param {boolean} scalable - Flag to set the scalability of the viewport.
+     */
     function setUserScalable(scalable) {
-
         try {
             appHost.setUserScalable(scalable);
         } catch (err) {
@@ -83,23 +108,31 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
     }
 
     return function (options) {
-
         var self = this;
+        /** Initialized instance of Swiper. */
         var swiperInstance;
-        var dlg;
+        /** Initialized instance of the dialog containing the Swiper instance. */
-        var currentTimeout;
+        var dialog;
-        var currentIntervalMs;
+        /** Options of the slideshow components */
         var currentOptions;
-        var currentIndex;
+        /** ID of the timeout used to hide the OSD. */
+        var hideTimeout;
+        /** Last coordinates of the mouse pointer. */
+        var lastMouseMoveData;
+        /** Visibility status of the OSD. */
+        var _osdOpen = false;
 
-        // small hack since this is not possible anyway
+        // Use autoplay on Chromecast since it is non-interactive.
-        if (browser.chromecast) {
+        options.interactive = !browser.chromecast;
-            options.interactive = false;
-        }
 
+        /**
+         * Creates the HTML markup for the dialog and the OSD.
+         * @param {Object} options - Options used to create the dialog and slideshow.
+         */
         function createElements(options) {
+            currentOptions = options;
 
-            dlg = dialogHelper.createDialog({
+            dialog = dialogHelper.createDialog({
                 exitAnimationDuration: options.interactive ? 400 : 800,
                 size: 'fullscreen',
                 autoFocus: false,
@@ -108,17 +141,15 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
                 removeOnClose: true
             });
 
-            dlg.classList.add('slideshowDialog');
+            dialog.classList.add('slideshowDialog');
 
             var html = '';
 
-            if (options.interactive) {
+            html += '<div class="slideshowSwiperContainer"><div class="swiper-wrapper"></div></div>';
 
+            if (options.interactive && !layoutManager.tv) {
                 var actionButtonsOnTop = layoutManager.mobile;
 
-                html += '<div>';
-                html += '<div class="slideshowSwiperContainer"><div class="swiper-wrapper"></div></div>';
-
                 html += getIcon('keyboard_arrow_left', 'btnSlideshowPrevious slideshowButton hide-mouse-idle-tv', false);
                 html += getIcon('keyboard_arrow_right', 'btnSlideshowNext slideshowButton hide-mouse-idle-tv', false);
 
@@ -137,7 +168,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
                 if (!actionButtonsOnTop) {
                     html += '<div class="slideshowBottomBar hide">';
 
-                    html += getIcon('pause', 'btnSlideshowPause slideshowButton', true, true);
+                    html += getIcon('play_arrow', 'btnSlideshowPause slideshowButton', true, true);
                     if (appHost.supports('filedownload')) {
                         html += getIcon('file_download', 'btnDownload slideshowButton', true);
                     }
@@ -148,33 +179,28 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
                     html += '</div>';
                 }
 
-                html += '</div>';
-
             } else {
                 html += '<div class="slideshowImage"></div><h1 class="slideshowImageText"></h1>';
             }
 
-            dlg.innerHTML = html;
+            dialog.innerHTML = html;
 
-            if (options.interactive) {
+            if (options.interactive && !layoutManager.tv) {
-                dlg.querySelector('.btnSlideshowExit').addEventListener('click', function (e) {
+                dialog.querySelector('.btnSlideshowExit').addEventListener('click', function (e) {
-
+                    dialogHelper.close(dialog);
-                    dialogHelper.close(dlg);
                 });
-                dlg.querySelector('.btnSlideshowNext').addEventListener('click', nextImage);
-                dlg.querySelector('.btnSlideshowPrevious').addEventListener('click', previousImage);
 
-                var btnPause = dlg.querySelector('.btnSlideshowPause');
+                var btnPause = dialog.querySelector('.btnSlideshowPause');
                 if (btnPause) {
                     btnPause.addEventListener('click', playPause);
                 }
 
-                var btnDownload = dlg.querySelector('.btnDownload');
+                var btnDownload = dialog.querySelector('.btnDownload');
                 if (btnDownload) {
                     btnDownload.addEventListener('click', download);
                 }
 
-                var btnShare = dlg.querySelector('.btnShare');
+                var btnShare = dialog.querySelector('.btnShare');
                 if (btnShare) {
                     btnShare.addEventListener('click', share);
                 }
@@ -182,81 +208,106 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
 
             setUserScalable(true);
 
-            dialogHelper.open(dlg).then(function () {
+            dialogHelper.open(dialog).then(function () {
-
                 setUserScalable(false);
-                stopInterval();
             });
 
             inputManager.on(window, onInputCommand);
             document.addEventListener((window.PointerEvent ? 'pointermove' : 'mousemove'), onPointerMove);
 
-            dlg.addEventListener('close', onDialogClosed);
+            dialog.addEventListener('close', onDialogClosed);
 
-            if (options.interactive) {
+            loadSwiper(dialog, options);
-                loadSwiper(dlg);
-            }
         }
 
+        /**
+         * Handles OSD changes when the autoplay is started.
+         */
         function onAutoplayStart() {
-            var btnSlideshowPause = dlg.querySelector('.btnSlideshowPause i');
+            var btnSlideshowPause = dialog.querySelector('.btnSlideshowPause i');
             if (btnSlideshowPause) {
-                btnSlideshowPause.classList.remove("play_arrow");
+                btnSlideshowPause.classList.replace("play_arrow", "pause");
-                btnSlideshowPause.classList.add("pause");
             }
         }
 
+        /**
+         * Handles OSD changes when the autoplay is stopped.
+         */
         function onAutoplayStop() {
-            var btnSlideshowPause = dlg.querySelector('.btnSlideshowPause i');
+            var btnSlideshowPause = dialog.querySelector('.btnSlideshowPause i');
             if (btnSlideshowPause) {
-                btnSlideshowPause.classList.remove("pause");
+                btnSlideshowPause.classList.replace("pause", "play_arrow");
-                btnSlideshowPause.classList.add("play_arrow");
             }
         }
 
-        function loadSwiper(dlg) {
+        /**
-
+         * Initializes the Swiper instance and binds the relevant events.
+         * @param {HTMLElement} dialog - Element containing the dialog.
+         * @param {Object} options - Options used to initialize the Swiper instance.
+         */
+        function loadSwiper(dialog, options) {
+            var slides;
             if (currentOptions.slides) {
-                dlg.querySelector('.swiper-wrapper').innerHTML = currentOptions.slides.map(getSwiperSlideHtmlFromSlide).join('');
+                slides = currentOptions.slides;
             } else {
-                dlg.querySelector('.swiper-wrapper').innerHTML = currentOptions.items.map(getSwiperSlideHtmlFromItem).join('');
+                slides = currentOptions.items;
             }
 
             require(['swiper'], function (Swiper) {
-
+                swiperInstance = new Swiper(dialog.querySelector('.slideshowSwiperContainer'), {
-                swiperInstance = new Swiper(dlg.querySelector('.slideshowSwiperContainer'), {
-                    // Optional parameters
                     direction: 'horizontal',
-                    loop: options.loop !== false,
+                    // Loop is disabled due to the virtual slides option not supporting it.
-                    autoplay: {
+                    loop: false,
-                        delay: options.interval || 8000
+                    autoplay: !options.interactive,
+                    keyboard: {
+                        enabled: true
                     },
-                    // Disable preloading of all images
+                    preloadImages: true,
-                    preloadImages: false,
+                    slidesPerView: 1,
-                    // Enable lazy loading
+                    slidesPerColumn: 1,
-                    lazy: true,
-                    loadPrevNext: true,
-                    disableOnInteraction: false,
                     initialSlide: options.startIndex || 0,
-                    speed: 240
+                    speed: 240,
+                    navigation: {
+                        nextEl: '.btnSlideshowNext',
+                        prevEl: '.btnSlideshowPrevious'
+                    },
+                    // Virtual slides reduce memory consumption for large libraries while allowing preloading of images;
+                    virtual: {
+                        slides: slides,
+                        cache: true,
+                        renderSlide: getSwiperSlideHtml,
+                        addSlidesBefore: 1,
+                        addSlidesAfter: 1
+                    }
                 });
 
                 swiperInstance.on('autoplayStart', onAutoplayStart);
                 swiperInstance.on('autoplayStop', onAutoplayStop);
-
-                if (layoutManager.mobile) {
-                    pause();
-                } else {
-                    play();
-                }
             });
         }
 
-        function getSwiperSlideHtmlFromItem(item) {
+        /**
+         * Renders the HTML markup of a slide for an item or a slide.
+         * @param {Object} item - The item used to render the slide.
+         * @param {number} index - The index of the item in the Swiper instance.
+         * @returns {string} The HTML markup of the slide.
+         */
+        function getSwiperSlideHtml(item, index) {
+            if (currentOptions.slides) {
+                return getSwiperSlideHtmlFromSlide(item);
+            } else {
+                return getSwiperSlideHtmlFromItem(item);
+            }
+        }
 
+        /**
+         * Renders the HTML markup of a slide for an item.
+         * @param {Object} item - Item used to generate the slide.
+         * @returns {string} The HTML markup of the slide.
+         */
+        function getSwiperSlideHtmlFromItem(item) {
             return getSwiperSlideHtmlFromSlide({
-                imageUrl: getImgUrl(item),
+                originalImage: getImgUrl(item),
-                originalImage: getImgUrl(item, true),
                 //title: item.Name,
                 //description: item.Overview
                 Id: item.Id,
@@ -264,11 +315,17 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
             });
         }
 
+        /**
+         * Renders the HTML markup of a slide for a slide object.
+         * @param {Object} item - Slide object used to generate the slide.
+         * @returns {string} The HTML markup of the slide.
+         */
         function getSwiperSlideHtmlFromSlide(item) {
-
             var html = '';
-            html += '<div class="swiper-slide" data-imageurl="' + item.imageUrl + '" data-original="' + item.originalImage + '" data-itemid="' + item.Id + '" data-serverid="' + item.ServerId + '">';
+            html += '<div class="swiper-slide" data-original="' + item.originalImage + '" data-itemid="' + item.Id + '" data-serverid="' + item.ServerId + '">';
-            html += '<img data-src="' + item.imageUrl + '" class="swiper-lazy swiper-slide-img">';
+            html += '<div class="slider-zoom-container">';
+            html += '<img src="' + item.originalImage + '" class="swiper-slide-img">';
+            html += '</div>';
             if (item.title || item.subtitle) {
                 html += '<div class="slideText">';
                 html += '<div class="slideTextInner">';
@@ -290,42 +347,18 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
             return html;
         }
 
-        function previousImage() {
+        /**
-            if (swiperInstance) {
+         * Fetches the information of the currently displayed slide.
-                swiperInstance.slidePrev();
+         * @returns {null|{itemId: string, shareUrl: string, serverId: string, url: string}} Object containing the information of the currently displayed slide.
-            } else {
+         */
-                stopInterval();
-                showNextImage(currentIndex - 1);
-            }
-        }
-
-        function nextImage() {
-            if (swiperInstance) {
-
-                if (options.loop === false) {
-
-                    if (swiperInstance.activeIndex >= swiperInstance.slides.length - 1) {
-                        dialogHelper.close(dlg);
-                        return;
-                    }
-                }
-
-                swiperInstance.slideNext();
-            } else {
-                stopInterval();
-                showNextImage(currentIndex + 1);
-            }
-        }
-
         function getCurrentImageInfo() {
-
             if (swiperInstance) {
                 var slide = document.querySelector('.swiper-slide-active');
 
                 if (slide) {
                     return {
                         url: slide.getAttribute('data-original'),
-                        shareUrl: slide.getAttribute('data-imageurl'),
+                        shareUrl: slide.getAttribute('data-original'),
                         itemId: slide.getAttribute('data-itemid'),
                         serverId: slide.getAttribute('data-serverid')
                     };
@@ -336,8 +369,10 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
             }
         }
 
+        /**
+         * Starts a download for the currently displayed slide.
+         */
         function download() {
-
             var imageInfo = getCurrentImageInfo();
 
             require(['fileDownloader'], function (fileDownloader) {
@@ -345,8 +380,10 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
             });
         }
 
+        /**
+         * Shares the currently displayed slide using the browser's built-in sharing feature.
+         */
         function share() {
-
             var imageInfo = getCurrentImageInfo();
 
             navigator.share({
@@ -354,20 +391,29 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
             });
         }
 
+        /**
+         * Starts the autoplay feature of the Swiper instance.
+         */
         function play() {
             if (swiperInstance.autoplay) {
                 swiperInstance.autoplay.start();
             }
         }
 
+        /**
+         * Pauses the autoplay feature of the Swiper instance;
+         */
         function pause() {
             if (swiperInstance.autoplay) {
                 swiperInstance.autoplay.stop();
             }
         }
 
+        /**
+         * Toggles the autoplay feature of the Swiper instance.
+         */
         function playPause() {
-            var paused = !dlg.querySelector('.btnSlideshowPause i').classList.contains("pause");
+            var paused = !dialog.querySelector('.btnSlideshowPause i').classList.contains("pause");
             if (paused) {
                 play();
             } else {
@@ -375,8 +421,10 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
             }
         }
 
+        /**
+         * Closes the dialog and destroys the Swiper instance.
+         */
         function onDialogClosed() {
-
             var swiper = swiperInstance;
             if (swiper) {
                 swiper.destroy(true, true);
@@ -387,53 +435,38 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
             document.removeEventListener((window.PointerEvent ? 'pointermove' : 'mousemove'), onPointerMove);
         }
 
-        function startInterval(options) {
+        /**
-
+         * Shows the OSD.
-            currentOptions = options;
+         */
-
-            stopInterval();
-            createElements(options);
-
-            if (!options.interactive) {
-                currentIntervalMs = options.interval || 11000;
-                showNextImage(options.startIndex || 0, true);
-            }
-        }
-
-        var _osdOpen = false;
-
-        function isOsdOpen() {
-            return _osdOpen;
-        }
-
-        function getOsdBottom() {
-            return dlg.querySelector('.slideshowBottomBar');
-        }
-
         function showOsd() {
-
+            var bottom = dialog.querySelector('.slideshowBottomBar');
-            var bottom = getOsdBottom();
             if (bottom) {
                 slideUpToShow(bottom);
                 startHideTimer();
             }
         }
 
+        /**
+         * Hides the OSD.
+         */
         function hideOsd() {
-
+            var bottom = dialog.querySelector('.slideshowBottomBar');
-            var bottom = getOsdBottom();
             if (bottom) {
                 slideDownToHide(bottom);
             }
         }
 
-        var hideTimeout;
+        /**
-
+         * Starts the timer used to automatically hide the OSD.
+         */
         function startHideTimer() {
             stopHideTimer();
-            hideTimeout = setTimeout(hideOsd, 4000);
+            hideTimeout = setTimeout(hideOsd, 3000);
         }
 
+        /**
+         * Stops the timer used to automatically hide the OSD.
+         */
         function stopHideTimer() {
             if (hideTimeout) {
                 clearTimeout(hideTimeout);
@@ -441,71 +474,76 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
             }
         }
 
-        function slideUpToShow(elem) {
+        /**
-
+         * Shows the OSD by sliding it into view.
-            if (!elem.classList.contains('hide')) {
+         * @param {HTMLElement} element - Element containing the OSD.
+         */
+        function slideUpToShow(element) {
+            if (!element.classList.contains('hide')) {
                 return;
             }
 
             _osdOpen = true;
-            elem.classList.remove('hide');
+            element.classList.remove('hide');
 
             var onFinish = function () {
-                focusManager.focus(elem.querySelector('.btnSlideshowPause'));
+                focusManager.focus(element.querySelector('.btnSlideshowPause'));
             };
 
-            if (!elem.animate) {
+            if (!element.animate) {
                 onFinish();
                 return;
             }
 
             requestAnimationFrame(function () {
-
                 var keyframes = [
-                    { transform: 'translate3d(0,' + elem.offsetHeight + 'px,0)', opacity: '.3', offset: 0 },
+                    { transform: 'translate3d(0,' + element.offsetHeight + 'px,0)', opacity: '.3', offset: 0 },
                     { transform: 'translate3d(0,0,0)', opacity: '1', offset: 1 }
                 ];
                 var timing = { duration: 300, iterations: 1, easing: 'ease-out' };
-                elem.animate(keyframes, timing).onfinish = onFinish;
+                element.animate(keyframes, timing).onfinish = onFinish;
             });
         }
 
-        function slideDownToHide(elem) {
+        /**
-
+         * Hides the OSD by sliding it out of view.
-            if (elem.classList.contains('hide')) {
+         * @param {HTMLElement} element - Element containing the OSD.
+         */
+        function slideDownToHide(element) {
+            if (element.classList.contains('hide')) {
                 return;
             }
 
             var onFinish = function () {
-                elem.classList.add('hide');
+                element.classList.add('hide');
                 _osdOpen = false;
             };
 
-            if (!elem.animate) {
+            if (!element.animate) {
                 onFinish();
                 return;
             }
 
             requestAnimationFrame(function () {
-
                 var keyframes = [
                     { transform: 'translate3d(0,0,0)', opacity: '1', offset: 0 },
-                    { transform: 'translate3d(0,' + elem.offsetHeight + 'px,0)', opacity: '.3', offset: 1 }
+                    { transform: 'translate3d(0,' + element.offsetHeight + 'px,0)', opacity: '.3', offset: 1 }
                 ];
                 var timing = { duration: 300, iterations: 1, easing: 'ease-out' };
-                elem.animate(keyframes, timing).onfinish = onFinish;
+                element.animate(keyframes, timing).onfinish = onFinish;
             });
         }
 
-        var lastMouseMoveData;
+        /**
-
+         * Shows the OSD when moving the mouse pointer or touching the screen.
-        function onPointerMove(e) {
+         * @param {Event} event - Pointer movement event.
-
+         */
-            var pointerType = e.pointerType || (layoutManager.mobile ? 'touch' : 'mouse');
+        function onPointerMove(event) {
+            var pointerType = event.pointerType || (layoutManager.mobile ? 'touch' : 'mouse');
 
             if (pointerType === 'mouse') {
-                var eventX = e.screenX || 0;
+                var eventX = event.screenX || 0;
-                var eventY = e.screenY || 0;
+                var eventY = event.screenY || 0;
 
                 var obj = lastMouseMoveData;
                 if (!obj) {
@@ -528,125 +566,46 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
             }
         }
 
-        function onInputCommand(e) {
+        /**
-
+         * Dispatches keyboard inputs to their proper handlers.
-            switch (e.detail.command) {
+         * @param {Event} event - Keyboard input event.
-
+         */
-                case 'left':
+        function onInputCommand(event) {
-                    if (!isOsdOpen()) {
+            switch (event.detail.command) {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        previousImage();
-                    }
-                    break;
-                case 'right':
-                    if (!isOsdOpen()) {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        nextImage();
-                    }
-                    break;
                 case 'up':
                 case 'down':
                 case 'select':
                 case 'menu':
                 case 'info':
-                case 'play':
-                case 'playpause':
-                case 'pause':
                     showOsd();
                     break;
+                case 'play':
+                    play();
+                    break;
+                case 'pause':
+                    pause();
+                    break;
+                case 'playpause':
+                    playPause();
+                    break;
                 default:
                     break;
             }
         }
 
-        function showNextImage(index, skipPreload) {
+        /**
-
+         * Shows the slideshow component.
-            index = Math.max(0, index);
+         */
-            if (index >= currentOptions.items.length) {
-                index = 0;
-            }
-            currentIndex = index;
-
-            var options = currentOptions;
-            var items = options.items;
-            var item = items[index];
-            var imgUrl = getImgUrl(item);
-
-            var onSrcLoaded = function () {
-                var cardImageContainer = dlg.querySelector('.slideshowImage');
-
-                var newCardImageContainer = document.createElement('div');
-                newCardImageContainer.className = cardImageContainer.className;
-
-                if (options.cover) {
-                    newCardImageContainer.classList.add('slideshowImage-cover');
-                }
-
-                newCardImageContainer.style.backgroundImage = "url('" + imgUrl + "')";
-                newCardImageContainer.classList.add('hide');
-                cardImageContainer.parentNode.appendChild(newCardImageContainer);
-
-                if (options.showTitle) {
-                    dlg.querySelector('.slideshowImageText').innerHTML = item.Name;
-                } else {
-                    dlg.querySelector('.slideshowImageText').innerHTML = '';
-                }
-
-                newCardImageContainer.classList.remove('hide');
-                var onAnimationFinished = function () {
-
-                    var parentNode = cardImageContainer.parentNode;
-                    if (parentNode) {
-                        parentNode.removeChild(cardImageContainer);
-                    }
-                };
-
-                if (newCardImageContainer.animate) {
-
-                    var keyframes = [
-                        { opacity: '0', offset: 0 },
-                        { opacity: '1', offset: 1 }
-                    ];
-                    var timing = { duration: 1200, iterations: 1 };
-                    newCardImageContainer.animate(keyframes, timing).onfinish = onAnimationFinished;
-                } else {
-                    onAnimationFinished();
-                }
-
-                stopInterval();
-                currentTimeout = setTimeout(function () {
-                    showNextImage(index + 1, true);
-
-                }, currentIntervalMs);
-            };
-
-            if (!skipPreload) {
-                var img = new Image();
-                img.onload = onSrcLoaded;
-                img.src = imgUrl;
-            } else {
-                onSrcLoaded();
-            }
-        }
-
-        function stopInterval() {
-            if (currentTimeout) {
-                clearTimeout(currentTimeout);
-                currentTimeout = null;
-            }
-        }
-
         self.show = function () {
-            startInterval(options);
+            createElements(options);
         };
 
+        /**
+         * Hides the slideshow element.
+         */
         self.hide = function () {
-
+            var dialog = dialog;
-            var dialog = dlg;
             if (dialog) {
-
                 dialogHelper.close(dialog);
             }
         };

src/components/subtitlesync/subtitlesync.js

@@ -30,7 +30,7 @@ define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html',
 
         subtitleSyncTextField.updateOffset = function(offset) {
             this.textContent = offset + "s";
-        }
+        };
 
         subtitleSyncTextField.addEventListener("keypress", function(event) {
 
@@ -66,7 +66,7 @@ define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html',
         subtitleSyncSlider.updateOffset = function(percent) {
             // default value is 0s = 50%
             this.value = percent === undefined ? 50 : percent;
-        }
+        };
 
         subtitleSyncSlider.addEventListener("change", function () {
             // set new offset
@@ -132,7 +132,7 @@ define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html',
             elem.parentNode.removeChild(elem);
             this.element = null;
         }
-    }
+    };
 
     SubtitleSync.prototype.toggle = function(action) {
 
@@ -166,7 +166,7 @@ define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html',
             }
             /* eslint-enable no-fallthrough */
         }
-    }
+    };
 
     return SubtitleSync;
 });

src/controllers/auth/selectserver.js

@@ -95,7 +95,7 @@ define(["loading", "appRouter", "layoutManager", "appSettings", "apphost", "focu
     }
 
     function showServerConnectionFailure() {
-        alertText(globalize.translate("MessageUnableToConnectToServer"), globalize.translate("HeaderConnectionFailure"));
+        alertText(globalize.translate("MessageUnableToConnectToServer"));
     }
 
     return function (view, params) {

src/controllers/dashboard/logs.js

@@ -29,5 +29,5 @@ define(["datetime", "loading", "apphost", "listViewStyle", "emby-button", "flexS
                 loading.hide();
             });
         });
-    }
+    };
 });

src/controllers/dashboard/notifications/notifications.js

@@ -49,12 +49,12 @@ define(["loading", "libraryMenu", "globalize", "listViewStyle", "emby-button"],
             }
             page.querySelector(".notificationList").innerHTML = html;
             loading.hide();
-        })
+        });
     }
 
     return function(view, params) {
         view.addEventListener("viewshow", function() {
             reload(view);
         });
-    }
+    };
 });

src/controllers/dashboard/scheduledtasks/scheduledtasks.js

@@ -7,7 +7,7 @@ define(["jQuery", "loading", "events", "globalize", "serverNotifications", "date
         }).then(function(tasks) {
             populateList(page, tasks);
             loading.hide();
-        })
+        });
     }
 
     function populateList(page, tasks) {
@@ -69,7 +69,7 @@ define(["jQuery", "loading", "events", "globalize", "serverNotifications", "date
                 var endtime = Date.parse(task.LastExecutionResult.EndTimeUtc);
                 var starttime = Date.parse(task.LastExecutionResult.StartTimeUtc);
                 html += globalize.translate("LabelScheduledTaskLastRan", datefns.formatDistanceToNow(endtime, dfnshelper.localeWithSuffix),
-                    datefns.formatDistance(starttime, endtime, dfnshelper.localeWithSuffix));
+                    datefns.formatDistance(starttime, endtime, { locale: dfnshelper.getLocale() }));
                 if (task.LastExecutionResult.Status === "Failed") {
                     html += " <span style='color:#FF0000;'>(" + globalize.translate("LabelFailed") + ")</span>";
                 } else if (task.LastExecutionResult.Status === "Cancelled") {
@@ -155,7 +155,7 @@ define(["jQuery", "loading", "events", "globalize", "serverNotifications", "date
             ApiClient.startScheduledTask(id).then(function() {
                 updateTaskButton(button, "Running");
                 reloadList(view);
-            })
+            });
         });
 
         $(".divScheduledTasks", view).on("click", ".btnStopTask", function() {
@@ -164,7 +164,7 @@ define(["jQuery", "loading", "events", "globalize", "serverNotifications", "date
             ApiClient.stopScheduledTask(id).then(function() {
                 updateTaskButton(button, "");
                 reloadList(view);
-            })
+            });
         });
 
         view.addEventListener("viewbeforehide", function() {
@@ -178,5 +178,5 @@ define(["jQuery", "loading", "events", "globalize", "serverNotifications", "date
             reloadList(view);
             events.on(serverNotifications, "ScheduledTasksInfo", onScheduledTasksUpdate);
         });
-    }
+    };
 });

src/controllers/encodingsettings.js

@@ -14,6 +14,7 @@ define(["jQuery", "loading", "globalize", "dom", "libraryMenu"], function ($, lo
         $("#txtVaapiDevice", page).val(config.VaapiDevice || "");
         page.querySelector("#selectEncoderPreset").value = config.EncoderPreset || "";
         page.querySelector("#txtH264Crf").value = config.H264Crf || "";
+        page.querySelector("#selectDeinterlaceMethod").value = config.DeinterlaceMethod || "";
         page.querySelector("#chkEnableSubtitleExtraction").checked = config.EnableSubtitleExtraction || false;
         page.querySelector("#chkEnableThrottling").checked = config.EnableThrottling || false;
         page.querySelector("#selectVideoDecoder").dispatchEvent(new CustomEvent("change", {
@@ -58,6 +59,7 @@ define(["jQuery", "loading", "globalize", "dom", "libraryMenu"], function ($, lo
                 config.VaapiDevice = $("#txtVaapiDevice", form).val();
                 config.EncoderPreset = form.querySelector("#selectEncoderPreset").value;
                 config.H264Crf = parseInt(form.querySelector("#txtH264Crf").value || "0");
+                config.DeinterlaceMethod = form.querySelector("#selectDeinterlaceMethod").value;
                 config.EnableSubtitleExtraction = form.querySelector("#chkEnableSubtitleExtraction").checked;
                 config.EnableThrottling = form.querySelector("#chkEnableThrottling").checked;
                 config.HardwareDecodingCodecs = Array.prototype.map.call(Array.prototype.filter.call(form.querySelectorAll(".chkDecodeCodec"), function (c) {

src/controllers/librarydisplay.js

@@ -14,7 +14,7 @@ define(["globalize", "loading", "libraryMenu", "emby-checkbox", "emby-button", "
         }, {
             href: "metadatanfo.html",
             name: Globalize.translate("TabNfoSettings")
-        }]
+        }];
     }
 
     return function(view, params) {
@@ -27,14 +27,10 @@ define(["globalize", "loading", "libraryMenu", "emby-checkbox", "emby-button", "
                 view.querySelector("#chkSaveMetadataHidden").checked = config.SaveMetadataHidden;
             });
             ApiClient.getNamedConfiguration("metadata").then(function(metadata) {
-                loadMetadataConfig(this, metadata)
+                view.querySelector("#selectDateAdded").selectedIndex = metadata.UseFileCreationTimeForDateAdded ? 1 : 0;
             });
         }
 
-        function loadMetadataConfig(page, config) {
-            $("#selectDateAdded", page).val(config.UseFileCreationTimeForDateAdded ? "1" : "0");
-        }
-
         view.querySelector("form").addEventListener("submit", function(e) {
             loading.show();
             var form = this;
@@ -67,5 +63,5 @@ define(["globalize", "loading", "libraryMenu", "emby-checkbox", "emby-button", "
                 }
             });
         });
-    }
+    };
 });

src/controllers/livetv/livetvchannels.js

@@ -1,4 +1,4 @@
-define(["cardBuilder", "imageLoader", "libraryBrowser", "loading", "events", "emby-itemscontainer"], function (cardBuilder, imageLoader, libraryBrowser, loading, events) {
+define(["cardBuilder", "imageLoader", "libraryBrowser", "loading", "events", "userSettings", "emby-itemscontainer"], function (cardBuilder, imageLoader, libraryBrowser, loading, events, userSettings) {
     "use strict";
 
     return function (view, params, tabContent) {
@@ -7,12 +7,15 @@ define(["cardBuilder", "imageLoader", "libraryBrowser", "loading", "events", "em
                 pageData = {
                     query: {
                         StartIndex: 0,
-                        Limit: 100,
                         Fields: "PrimaryImageAspectRatio"
                     }
                 };
             }
 
+            if (userSettings.libraryPageSize() > 0) {
+                pageData.query['Limit'] = userSettings.libraryPageSize();
+            }
+
             return pageData;
         }
 
@@ -39,7 +42,9 @@ define(["cardBuilder", "imageLoader", "libraryBrowser", "loading", "events", "em
                     return;
                 }
 
-                query.StartIndex += query.Limit;
+                if (userSettings.libraryPageSize() > 0) {
+                    query.StartIndex += query.Limit;
+                }
                 reloadItems(context);
             }
 
@@ -48,7 +53,9 @@ define(["cardBuilder", "imageLoader", "libraryBrowser", "loading", "events", "em
                     return;
                 }
 
-                query.StartIndex -= query.Limit;
+                if (userSettings.libraryPageSize() > 0) {
+                    query.StartIndex = Math.max(0, query.StartIndex - query.Limit);
+                }
                 reloadItems(context);
             }
 

src/controllers/livetv/livetvschedule.js

@@ -48,7 +48,7 @@ define(["layoutManager", "cardBuilder", "apphost", "imageLoader", "loading", "sc
     }
 
     function getBackdropShape() {
-        return enableScrollX() ? "overflowBackdrop" : "backdrop"
+        return enableScrollX() ? "overflowBackdrop" : "backdrop";
     }
 
     function renderActiveRecordings(context, promise) {

src/controllers/metadataimagespage.js

@@ -7,10 +7,10 @@ define(["jQuery", "dom", "loading", "libraryMenu", "listViewStyle"], function($,
             html += "<option value=''></option>";
             for (var i = 0, length = languages.length; i < length; i++) {
                 var culture = languages[i];
-                html += "<option value='" + culture.TwoLetterISOLanguageName + "'>" + culture.DisplayName + "</option>"
+                html += "<option value='" + culture.TwoLetterISOLanguageName + "'>" + culture.DisplayName + "</option>";
             }
-            select.innerHTML = html
+            select.innerHTML = html;
-        })
+        });
     }
 
     function populateCountries(select) {
@@ -19,25 +19,25 @@ define(["jQuery", "dom", "loading", "libraryMenu", "listViewStyle"], function($,
             html += "<option value=''></option>";
             for (var i = 0, length = allCountries.length; i < length; i++) {
                 var culture = allCountries[i];
-                html += "<option value='" + culture.TwoLetterISORegionName + "'>" + culture.DisplayName + "</option>"
+                html += "<option value='" + culture.TwoLetterISORegionName + "'>" + culture.DisplayName + "</option>";
             }
-            select.innerHTML = html
+            select.innerHTML = html;
-        })
+        });
     }
 
     function loadPage(page) {
         var promises = [ApiClient.getServerConfiguration(), populateLanguages(page.querySelector("#selectLanguage")), populateCountries(page.querySelector("#selectCountry"))];
         Promise.all(promises).then(function(responses) {
             var config = responses[0];
-            page.querySelector("#selectLanguage").value = config.PreferredMetadataLanguage || "", page.querySelector("#selectCountry").value = config.MetadataCountryCode || "", loading.hide()
+            page.querySelector("#selectLanguage").value = config.PreferredMetadataLanguage || "", page.querySelector("#selectCountry").value = config.MetadataCountryCode || "", loading.hide();
-        })
+        });
     }
 
     function onSubmit() {
         var form = this;
         return loading.show(), ApiClient.getServerConfiguration().then(function(config) {
-            config.PreferredMetadataLanguage = form.querySelector("#selectLanguage").value, config.MetadataCountryCode = form.querySelector("#selectCountry").value, ApiClient.updateServerConfiguration(config).then(Dashboard.processServerConfigurationUpdateResult)
+            config.PreferredMetadataLanguage = form.querySelector("#selectLanguage").value, config.MetadataCountryCode = form.querySelector("#selectCountry").value, ApiClient.updateServerConfiguration(config).then(Dashboard.processServerConfigurationUpdateResult);
-        }), !1
+        }), !1;
     }
 
     function getTabs() {
@@ -53,12 +53,12 @@ define(["jQuery", "dom", "loading", "libraryMenu", "listViewStyle"], function($,
         }, {
             href: "metadatanfo.html",
             name: Globalize.translate("TabNfoSettings")
-        }]
+        }];
     }
 
     $(document).on("pageinit", "#metadataImagesConfigurationPage", function() {
-        $(".metadataImagesConfigurationForm").off("submit", onSubmit).on("submit", onSubmit)
+        $(".metadataImagesConfigurationForm").off("submit", onSubmit).on("submit", onSubmit);
     }).on("pageshow", "#metadataImagesConfigurationPage", function() {
-        libraryMenu.setTabs("metadata", 2, getTabs), loading.show(), loadPage(this)
+        libraryMenu.setTabs("metadata", 2, getTabs), loading.show(), loadPage(this);
-    })
+    });
 });

src/controllers/movies/moviecollections.js

@@ -1,4 +1,4 @@
-define(["loading", "events", "libraryBrowser", "imageLoader", "listView", "cardBuilder", "apphost", "emby-itemscontainer"], function (loading, events, libraryBrowser, imageLoader, listView, cardBuilder, appHost) {
+define(["loading", "events", "libraryBrowser", "imageLoader", "listView", "cardBuilder", "userSettings", "emby-itemscontainer"], function (loading, events, libraryBrowser, imageLoader, listView, cardBuilder, userSettings) {
     "use strict";
 
     return function (view, params, tabContent) {
@@ -16,11 +16,15 @@ define(["loading", "events", "libraryBrowser", "imageLoader", "listView", "cardB
                         Fields: "PrimaryImageAspectRatio,SortName",
                         ImageTypeLimit: 1,
                         EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
-                        StartIndex: 0,
+                        StartIndex: 0
-                        Limit: pageSize
                     },
                     view: libraryBrowser.getSavedView(key) || "Poster"
                 };
+
+                if (userSettings.libraryPageSize() > 0) {
+                    pageData.query['Limit'] = userSettings.libraryPageSize();
+                }
+
                 pageData.query.ParentId = params.topParentId;
                 libraryBrowser.loadSavedQueryValues(key, pageData.query);
             }
@@ -65,7 +69,9 @@ define(["loading", "events", "libraryBrowser", "imageLoader", "listView", "cardB
                         return;
                     }
 
-                    query.StartIndex += query.Limit;
+                    if (userSettings.libraryPageSize() > 0) {
+                        query.StartIndex += query.Limit;
+                    }
                     reloadItems(tabContent);
                 }
 
@@ -74,7 +80,9 @@ define(["loading", "events", "libraryBrowser", "imageLoader", "listView", "cardB
                         return;
                     }
 
-                    query.StartIndex -= query.Limit;
+                    if (userSettings.libraryPageSize() > 0) {
+                        query.StartIndex = Math.max(0, query.StartIndex - query.Limit);
+                    }
                     reloadItems(tabContent);
                 }
 
@@ -180,7 +188,6 @@ define(["loading", "events", "libraryBrowser", "imageLoader", "listView", "cardB
         }
 
         var self = this;
-        var pageSize = 100;
         var data = {};
         var isLoading = false;
 

src/controllers/movies/moviegenres.js

@@ -184,12 +184,12 @@ define(["layoutManager", "loading", "libraryBrowser", "cardBuilder", "lazyLoader
         };
 
         self.getCurrentViewStyle = function () {
-            return getPageData(tabContent).view;
+            return getPageData().view;
         };
 
         self.setCurrentViewStyle = function (viewStyle) {
-            getPageData(tabContent).view = viewStyle;
+            getPageData().view = viewStyle;
-            libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);
+            libraryBrowser.saveViewSetting(getSavedQueryKey(), viewStyle);
             fullyReload();
         };
 

src/controllers/movies/movies.js

@@ -32,7 +32,9 @@ define(["loading", "layoutManager", "userSettings", "events", "libraryBrowser",
                     return;
                 }
 
-                query.StartIndex += query.Limit;
+                if (userSettings.libraryPageSize() > 0) {
+                    query.StartIndex += query.Limit;
+                }
                 itemsContainer.refreshItems();
             }
 
@@ -41,7 +43,9 @@ define(["loading", "layoutManager", "userSettings", "events", "libraryBrowser",
                     return;
                 }
 
-                query.StartIndex -= query.Limit;
+                if (userSettings.libraryPageSize() > 0) {
+                    query.StartIndex = Math.max(0, query.StartIndex - query.Limit);
+                }
                 itemsContainer.refreshItems();
             }
 
@@ -250,9 +254,13 @@ define(["loading", "layoutManager", "userSettings", "events", "libraryBrowser",
             ImageTypeLimit: 1,
             EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
             StartIndex: 0,
-            Limit: 100,
             ParentId: params.topParentId
         };
+
+        if (userSettings.libraryPageSize() > 0) {
+            query['Limit'] = userSettings.libraryPageSize();
+        }
+
         var isLoading = false;
 
         if (options.mode === "favorites") {

src/controllers/movies/movietrailers.js

@@ -1,4 +1,4 @@
-define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "alphaPicker", "listView", "cardBuilder", "apphost", "emby-itemscontainer"], function (layoutManager, loading, events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder, appHost) {
+define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "alphaPicker", "listView", "cardBuilder", "userSettings", "emby-itemscontainer"], function (layoutManager, loading, events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder, userSettings) {
     "use strict";
 
     return function (view, params, tabContent) {
@@ -16,11 +16,15 @@ define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "
                         Fields: "PrimaryImageAspectRatio,SortName,BasicSyncInfo",
                         ImageTypeLimit: 1,
                         EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
-                        StartIndex: 0,
+                        StartIndex: 0
-                        Limit: pageSize
                     },
                     view: libraryBrowser.getSavedView(key) || "Poster"
                 };
+
+                if (userSettings.libraryPageSize() > 0) {
+                    pageData.query['Limit'] = userSettings.libraryPageSize();
+                }
+
                 libraryBrowser.loadSavedQueryValues(key, pageData.query);
             }
 
@@ -49,7 +53,9 @@ define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "
                         return;
                     }
 
-                    query.StartIndex += query.Limit;
+                    if (userSettings.libraryPageSize() > 0) {
+                        query.StartIndex += query.Limit;
+                    }
                     reloadItems();
                 }
 
@@ -58,7 +64,9 @@ define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "
                         return;
                     }
 
-                    query.StartIndex -= query.Limit;
+                    if (userSettings.libraryPageSize() > 0) {
+                        query.StartIndex = Math.max(0, query.StartIndex - query.Limit);
+                    }
                     reloadItems();
                 }
 
@@ -168,7 +176,6 @@ define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "
         }
 
         var self = this;
-        var pageSize = 100;
         var data = {};
         var isLoading = false;
 

src/controllers/music/musicalbums.js

@@ -1,4 +1,4 @@
-define(["layoutManager", "playbackManager", "loading", "events", "libraryBrowser", "imageLoader", "alphaPicker", "listView", "cardBuilder", "apphost", "emby-itemscontainer"], function (layoutManager, playbackManager, loading, events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder, appHost) {
+define(["layoutManager", "playbackManager", "loading", "events", "libraryBrowser", "imageLoader", "alphaPicker", "listView", "cardBuilder", "userSettings", "emby-itemscontainer"], function (layoutManager, playbackManager, loading, events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder, userSettings) {
     "use strict";
 
     return function (view, params, tabContent) {
@@ -30,11 +30,15 @@ define(["layoutManager", "playbackManager", "loading", "events", "libraryBrowser
                         Fields: "PrimaryImageAspectRatio,SortName,BasicSyncInfo",
                         ImageTypeLimit: 1,
                         EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
-                        StartIndex: 0,
+                        StartIndex: 0
-                        Limit: pageSize
                     },
                     view: libraryBrowser.getSavedView(key) || "Poster"
                 };
+
+                if (userSettings.libraryPageSize() > 0) {
+                    pageData.query['Limit'] = userSettings.libraryPageSize();
+                }
+
                 pageData.query.ParentId = params.topParentId;
                 libraryBrowser.loadSavedQueryValues(key, pageData.query);
             }
@@ -79,7 +83,9 @@ define(["layoutManager", "playbackManager", "loading", "events", "libraryBrowser
                         return;
                     }
 
-                    query.StartIndex += query.Limit;
+                    if (userSettings.libraryPageSize() > 0) {
+                        query.StartIndex += query.Limit;
+                    }
                     reloadItems(tabContent);
                 }
 
@@ -88,7 +94,9 @@ define(["layoutManager", "playbackManager", "loading", "events", "libraryBrowser
                         return;
                     }
 
-                    query.StartIndex -= query.Limit;
+                    if (userSettings.libraryPageSize() > 0) {
+                        query.StartIndex = Math.max(0, query.StartIndex - query.Limit);
+                    }
                     reloadItems(tabContent);
                 }
 
@@ -175,7 +183,6 @@ define(["layoutManager", "playbackManager", "loading", "events", "libraryBrowser
         var savedQueryKey;
         var pageData;
         var self = this;
-        var pageSize = 100;
         var isLoading = false;
 
         self.showFilterMenu = function () {

src/controllers/music/musicartists.js

@@ -1,4 +1,4 @@
-define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "alphaPicker", "listView", "cardBuilder", "apphost", "emby-itemscontainer"], function (layoutManager, loading, events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder, appHost) {
+define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "alphaPicker", "listView", "cardBuilder", "apphost", "userSettings", "emby-itemscontainer"], function (layoutManager, loading, events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder, appHost, userSettings) {
     "use strict";
 
     return function (view, params, tabContent) {
@@ -7,17 +7,22 @@ define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "
             var pageData = data[key];
 
             if (!pageData) {
+                var queryValues = {
+                    SortBy: "SortName",
+                    SortOrder: "Ascending",
+                    Recursive: true,
+                    Fields: "PrimaryImageAspectRatio,SortName,BasicSyncInfo",
+                    StartIndex: 0,
+                    ImageTypeLimit: 1,
+                    EnableImageTypes: "Primary,Backdrop,Banner,Thumb"
+                };
+
+                if (userSettings.libraryPageSize() > 0) {
+                    queryValues['Limit'] = userSettings.libraryPageSize();
+                }
+
                 pageData = data[key] = {
-                    query: {
+                    query: queryValues,
-                        SortBy: "SortName",
-                        SortOrder: "Ascending",
-                        Recursive: true,
-                        Fields: "PrimaryImageAspectRatio,SortName,BasicSyncInfo",
-                        StartIndex: 0,
-                        ImageTypeLimit: 1,
-                        EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
-                        Limit: 100
-                    },
                     view: libraryBrowser.getSavedView(key) || "Poster"
                 };
                 pageData.query.ParentId = params.topParentId;
@@ -67,7 +72,9 @@ define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "
                         return;
                     }
 
-                    query.StartIndex += query.Limit;
+                    if (userSettings.libraryPageSize() > 0) {
+                        query.StartIndex += query.Limit;
+                    }
                     reloadItems(tabContent);
                 }
 
@@ -76,7 +83,9 @@ define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "
                         return;
                     }
 
-                    query.StartIndex -= query.Limit;
+                    if (userSettings.libraryPageSize() > 0) {
+                        query.StartIndex = Math.max(0, query.StartIndex - query.Limit);
+                    }
                     reloadItems(tabContent);
                 }
 

src/controllers/music/musicgenres.js

@@ -107,12 +107,12 @@ define(["libraryBrowser", "cardBuilder", "apphost", "imageLoader", "loading"], f
         };
 
         self.getCurrentViewStyle = function () {
-            return getPageData(tabContent).view;
+            return getPageData().view;
         };
 
         self.setCurrentViewStyle = function (viewStyle) {
-            getPageData(tabContent).view = viewStyle;
+            getPageData().view = viewStyle;
-            libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);
+            libraryBrowser.saveViewSetting(getSavedQueryKey(), viewStyle);
             fullyReload();
         };
 

src/controllers/music/musicplaylists.js

@@ -69,7 +69,7 @@ define(["libraryBrowser", "cardBuilder", "apphost", "imageLoader", "loading"], f
         var data = {};
 
         self.getCurrentViewStyle = function () {
-            return getPageData(tabContent).view;
+            return getPageData().view;
         };
 
         var promise;

src/controllers/music/songs.js

@@ -1,4 +1,4 @@
-define(["events", "libraryBrowser", "imageLoader", "listView", "loading", "emby-itemscontainer"], function (events, libraryBrowser, imageLoader, listView, loading) {
+define(["events", "libraryBrowser", "imageLoader", "listView", "loading", "userSettings", "emby-itemscontainer"], function (events, libraryBrowser, imageLoader, listView, loading, userSettings) {
     "use strict";
 
     return function (view, params, tabContent) {
@@ -14,12 +14,16 @@ define(["events", "libraryBrowser", "imageLoader", "listView", "loading", "emby-
                         IncludeItemTypes: "Audio",
                         Recursive: true,
                         Fields: "AudioInfo,ParentId",
-                        Limit: 100,
                         StartIndex: 0,
                         ImageTypeLimit: 1,
                         EnableImageTypes: "Primary"
                     }
                 };
+
+                if (userSettings.libraryPageSize() > 0) {
+                    pageData.query['Limit'] = userSettings.libraryPageSize();
+                }
+
                 pageData.query.ParentId = params.topParentId;
                 libraryBrowser.loadSavedQueryValues(key, pageData.query);
             }
@@ -49,7 +53,9 @@ define(["events", "libraryBrowser", "imageLoader", "listView", "loading", "emby-
                         return;
                     }
 
-                    query.StartIndex += query.Limit;
+                    if (userSettings.libraryPageSize() > 0) {
+                        query.StartIndex += query.Limit;
+                    }
                     reloadItems(tabContent);
                 }
 
@@ -58,7 +64,9 @@ define(["events", "libraryBrowser", "imageLoader", "listView", "loading", "emby-
                         return;
                     }
 
-                    query.StartIndex -= query.Limit;
+                    if (userSettings.libraryPageSize() > 0) {
+                        query.StartIndex = Math.max(0, query.StartIndex - query.Limit);
+                    }
                     reloadItems(tabContent);
                 }
 

src/controllers/playback/videoosd.js

@@ -1152,7 +1152,7 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
                 case "GamepadDPadLeft":
                 case "GamepadLeftThumbstickLeft":
                     // Ignores gamepad events that are always triggered, even when not focused.
-                    if (document.hasFocus()) {
+                    if (document.hasFocus()) { /* eslint-disable-line compat/compat */
                         playbackManager.rewind(currentPlayer);
                         showOsd();
                     }
@@ -1161,7 +1161,7 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
                 case "GamepadDPadRight":
                 case "GamepadLeftThumbstickRight":
                     // Ignores gamepad events that are always triggered, even when not focused.
-                    if (document.hasFocus()) {
+                    if (document.hasFocus()) { /* eslint-disable-line compat/compat */
                         playbackManager.fastForward(currentPlayer);
                         showOsd();
                     }
@@ -1272,7 +1272,6 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
         var programEndDateMs = 0;
         var playbackStartTimeTicks = 0;
         var subtitleSyncOverlay;
-        var volumeSliderTimer;
         var nowPlayingVolumeSlider = view.querySelector(".osdVolumeSlider");
         var nowPlayingVolumeSliderContainer = view.querySelector(".osdVolumeSliderContainer");
         var nowPlayingPositionSlider = view.querySelector(".osdPositionSlider");
@@ -1423,27 +1422,15 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
         }
 
         function setVolume() {
-            clearTimeout(volumeSliderTimer);
-            volumeSliderTimer = null;
-
             playbackManager.setVolume(this.value, currentPlayer);
         }
 
-        function setVolumeDelayed() {
-            if (!volumeSliderTimer) {
-                var that = this;
-                volumeSliderTimer = setTimeout(function () {
-                    setVolume.call(that);
-                }, 700);
-            }
-        }
-
         view.querySelector(".buttonMute").addEventListener("click", function () {
             playbackManager.toggleMute(currentPlayer);
         });
         nowPlayingVolumeSlider.addEventListener("change", setVolume);
-        nowPlayingVolumeSlider.addEventListener("mousemove", setVolumeDelayed);
+        nowPlayingVolumeSlider.addEventListener("mousemove", setVolume);
-        nowPlayingVolumeSlider.addEventListener("touchmove", setVolumeDelayed);
+        nowPlayingVolumeSlider.addEventListener("touchmove", setVolume);
 
         nowPlayingPositionSlider.addEventListener("change", function () {
             var player = currentPlayer;

src/controllers/playbackconfiguration.js

@@ -36,7 +36,7 @@ define(["jQuery", "loading", "libraryMenu"], function ($, loading, libraryMenu)
     }
 
     $(document).on("pageinit", "#playbackConfigurationPage", function () {
-        $(".playbackConfigurationForm").off("submit", onSubmit).on("submit", onSubmit)
+        $(".playbackConfigurationForm").off("submit", onSubmit).on("submit", onSubmit);
     }).on("pageshow", "#playbackConfigurationPage", function () {
         loading.show();
         libraryMenu.setTabs("playback", 1, getTabs);

src/controllers/shows/episodes.js

@@ -1,4 +1,4 @@
-define(["loading", "events", "libraryBrowser", "imageLoader", "listView", "cardBuilder", "emby-itemscontainer"], function (loading, events, libraryBrowser, imageLoader, listView, cardBuilder) {
+define(["loading", "events", "libraryBrowser", "imageLoader", "listView", "cardBuilder", "userSettings", "emby-itemscontainer"], function (loading, events, libraryBrowser, imageLoader, listView, cardBuilder, userSettings) {
     "use strict";
 
     return function (view, params, tabContent) {
@@ -17,11 +17,15 @@ define(["loading", "events", "libraryBrowser", "imageLoader", "listView", "cardB
                         IsMissing: false,
                         ImageTypeLimit: 1,
                         EnableImageTypes: "Primary,Backdrop,Thumb",
-                        StartIndex: 0,
+                        StartIndex: 0
-                        Limit: pageSize
                     },
                     view: libraryBrowser.getSavedView(key) || "Poster"
                 };
+
+                if (userSettings.libraryPageSize() > 0) {
+                    pageData.query['Limit'] = userSettings.libraryPageSize();
+                }
+
                 pageData.query.ParentId = params.topParentId;
                 libraryBrowser.loadSavedQueryValues(key, pageData.query);
             }
@@ -66,7 +70,9 @@ define(["loading", "events", "libraryBrowser", "imageLoader", "listView", "cardB
                         return;
                     }
 
-                    query.StartIndex += query.Limit;
+                    if (userSettings.libraryPageSize() > 0) {
+                        query.StartIndex += query.Limit;
+                    }
                     reloadItems(tabContent);
                 }
 
@@ -75,7 +81,9 @@ define(["loading", "events", "libraryBrowser", "imageLoader", "listView", "cardB
                         return;
                     }
 
-                    query.StartIndex -= query.Limit;
+                    if (userSettings.libraryPageSize() > 0) {
+                        query.StartIndex = Math.max(0, query.StartIndex - query.Limit);
+                    }
                     reloadItems(tabContent);
                 }
 
@@ -152,7 +160,6 @@ define(["loading", "events", "libraryBrowser", "imageLoader", "listView", "cardB
         }
 
         var self = this;
-        var pageSize = 100;
         var data = {};
         var isLoading = false;
 

src/controllers/shows/tvgenres.js

@@ -177,12 +177,12 @@ define(["layoutManager", "loading", "libraryBrowser", "cardBuilder", "lazyLoader
         };
 
         self.getCurrentViewStyle = function () {
-            return getPageData(tabContent).view;
+            return getPageData().view;
         };
 
         self.setCurrentViewStyle = function (viewStyle) {
-            getPageData(tabContent).view = viewStyle;
+            getPageData().view = viewStyle;
-            libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);
+            libraryBrowser.saveViewSetting(getSavedQueryKey(), viewStyle);
             fullyReload();
         };
 

src/controllers/shows/tvshows.js

@@ -1,4 +1,4 @@
-define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "listView", "cardBuilder", "alphaPicker", "emby-itemscontainer"], function (layoutManager, loading, events, libraryBrowser, imageLoader, listView, cardBuilder, alphaPicker) {
+define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "listView", "cardBuilder", "alphaPicker", "userSettings", "emby-itemscontainer"], function (layoutManager, loading, events, libraryBrowser, imageLoader, listView, cardBuilder, alphaPicker, userSettings) {
     "use strict";
 
     return function (view, params, tabContent) {
@@ -16,11 +16,15 @@ define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "
                         Fields: "PrimaryImageAspectRatio,BasicSyncInfo",
                         ImageTypeLimit: 1,
                         EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
-                        StartIndex: 0,
+                        StartIndex: 0
-                        Limit: pageSize
                     },
                     view: libraryBrowser.getSavedView(key) || "Poster"
                 };
+
+                if (userSettings.libraryPageSize() > 0) {
+                    pageData.query['Limit'] = userSettings.libraryPageSize();
+                }
+
                 pageData.query.ParentId = params.topParentId;
                 libraryBrowser.loadSavedQueryValues(key, pageData.query);
             }
@@ -65,7 +69,9 @@ define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "
                         return;
                     }
 
-                    query.StartIndex += query.Limit;
+                    if (userSettings.libraryPageSize() > 0) {
+                        query.StartIndex += query.Limit;
+                    }
                     reloadItems(tabContent);
                 }
 
@@ -74,7 +80,9 @@ define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "
                         return;
                     }
 
-                    query.StartIndex -= query.Limit;
+                    if (userSettings.libraryPageSize() > 0) {
+                        query.StartIndex = Math.max(0, query.StartIndex - query.Limit);
+                    }
                     reloadItems(tabContent);
                 }
 
@@ -185,7 +193,6 @@ define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "
         }
 
         var self = this;
-        var pageSize = 100;
         var data = {};
         var isLoading = false;
 

src/controllers/user/display.js

@@ -1,4 +1,4 @@
-define(["displaySettings", "userSettingsBuilder", "userSettings", "autoFocuser"], function (DisplaySettings, userSettingsBuilder, currentUserSettings, autoFocuser) {
+define(["displaySettings", "userSettings", "autoFocuser"], function (DisplaySettings, userSettings, autoFocuser) {
     "use strict";
 
     return function (view, params) {
@@ -11,7 +11,7 @@ define(["displaySettings", "userSettingsBuilder", "userSettings", "autoFocuser"]
         var settingsInstance;
         var hasChanges;
         var userId = params.userId || ApiClient.getCurrentUserId();
-        var userSettings = userId === ApiClient.getCurrentUserId() ? currentUserSettings : new userSettingsBuilder();
+        var currentSettings = userId === ApiClient.getCurrentUserId() ? userSettings : new userSettings();
         view.addEventListener("viewshow", function () {
             window.addEventListener("beforeunload", onBeforeUnload);
 
@@ -22,7 +22,7 @@ define(["displaySettings", "userSettingsBuilder", "userSettings", "autoFocuser"]
                     serverId: ApiClient.serverId(),
                     userId: userId,
                     element: view.querySelector(".settingsContainer"),
-                    userSettings: userSettings,
+                    userSettings: currentSettings,
                     enableSaveButton: false,
                     enableSaveConfirmation: false,
                     autoFocus: autoFocuser.isEnabled()

src/controllers/user/home.js

@@ -1,4 +1,4 @@
-define(["homescreenSettings", "userSettingsBuilder", "dom", "globalize", "loading", "userSettings", "autoFocuser", "listViewStyle"], function (HomescreenSettings, userSettingsBuilder, dom, globalize, loading, currentUserSettings, autoFocuser) {
+define(["homescreenSettings", "dom", "globalize", "loading", "userSettings", "autoFocuser", "listViewStyle"], function (HomescreenSettings, dom, globalize, loading, userSettings, autoFocuser) {
     "use strict";
 
     return function (view, params) {
@@ -11,7 +11,7 @@ define(["homescreenSettings", "userSettingsBuilder", "dom", "globalize", "loadin
         var homescreenSettingsInstance;
         var hasChanges;
         var userId = params.userId || ApiClient.getCurrentUserId();
-        var userSettings = userId === ApiClient.getCurrentUserId() ? currentUserSettings : new userSettingsBuilder();
+        var currentSettings = userId === ApiClient.getCurrentUserId() ? userSettings : new userSettings();
         view.addEventListener("viewshow", function () {
             window.addEventListener("beforeunload", onBeforeUnload);
 
@@ -22,7 +22,7 @@ define(["homescreenSettings", "userSettingsBuilder", "dom", "globalize", "loadin
                     serverId: ApiClient.serverId(),
                     userId: userId,
                     element: view.querySelector(".homeScreenSettingsContainer"),
-                    userSettings: userSettings,
+                    userSettings: currentSettings,
                     enableSaveButton: false,
                     enableSaveConfirmation: false,
                     autoFocus: autoFocuser.isEnabled()

src/controllers/user/playback.js

@@ -1,4 +1,4 @@
-define(["playbackSettings", "userSettingsBuilder", "dom", "globalize", "loading", "userSettings", "autoFocuser", "listViewStyle"], function (PlaybackSettings, userSettingsBuilder, dom, globalize, loading, currentUserSettings, autoFocuser) {
+define(["playbackSettings", "dom", "globalize", "loading", "userSettings", "autoFocuser", "listViewStyle"], function (PlaybackSettings, dom, globalize, loading, userSettings, autoFocuser) {
     "use strict";
 
     return function (view, params) {
@@ -11,7 +11,7 @@ define(["playbackSettings", "userSettingsBuilder", "dom", "globalize", "loading"
         var settingsInstance;
         var hasChanges;
         var userId = params.userId || ApiClient.getCurrentUserId();
-        var userSettings = userId === ApiClient.getCurrentUserId() ? currentUserSettings : new userSettingsBuilder();
+        var currentSettings = userId === ApiClient.getCurrentUserId() ? userSettings : new userSettings();
         view.addEventListener("viewshow", function () {
             window.addEventListener("beforeunload", onBeforeUnload);
 
@@ -22,7 +22,7 @@ define(["playbackSettings", "userSettingsBuilder", "dom", "globalize", "loading"
                     serverId: ApiClient.serverId(),
                     userId: userId,
                     element: view.querySelector(".settingsContainer"),
-                    userSettings: userSettings,
+                    userSettings: currentSettings,
                     enableSaveButton: false,
                     enableSaveConfirmation: false,
                     autoFocus: autoFocuser.isEnabled()

src/controllers/user/subtitles.js

@@ -1,4 +1,4 @@
-define(["subtitleSettings", "userSettingsBuilder", "userSettings", "autoFocuser"], function (SubtitleSettings, userSettingsBuilder, currentUserSettings, autoFocuser) {
+define(["subtitleSettings", "userSettings", "autoFocuser"], function (SubtitleSettings, userSettings, autoFocuser) {
     "use strict";
 
     return function (view, params) {
@@ -11,7 +11,7 @@ define(["subtitleSettings", "userSettingsBuilder", "userSettings", "autoFocuser"
         var subtitleSettingsInstance;
         var hasChanges;
         var userId = params.userId || ApiClient.getCurrentUserId();
-        var userSettings = userId === ApiClient.getCurrentUserId() ? currentUserSettings : new userSettingsBuilder();
+        var currentSettings = userId === ApiClient.getCurrentUserId() ? userSettings : new userSettings();
         view.addEventListener("viewshow", function () {
             window.addEventListener("beforeunload", onBeforeUnload);
 
@@ -22,7 +22,7 @@ define(["subtitleSettings", "userSettingsBuilder", "userSettings", "autoFocuser"
                     serverId: ApiClient.serverId(),
                     userId: userId,
                     element: view.querySelector(".settingsContainer"),
-                    userSettings: userSettings,
+                    userSettings: currentSettings,
                     enableSaveButton: false,
                     enableSaveConfirmation: false,
                     autoFocus: autoFocuser.isEnabled()

src/elements/emby-programcell/emby-programcell.js

@@ -0,0 +1,16 @@
+define([], function() {
+    'use strict';
+
+    var ProgramCellPrototype = Object.create(HTMLButtonElement.prototype);
+
+    ProgramCellPrototype.detachedCallback = function () {
+        this.posLeft = null;
+        this.posWidth = null;
+        this.guideProgramName = null;
+    };
+
+    document.registerElement('emby-programcell', {
+        prototype: ProgramCellPrototype,
+        extends: 'button'
+    });
+});

src/elements/emby-progressbar/emby-progressbar.js

@@ -0,0 +1,42 @@
+define([], function() {
+    'use strict';
+
+    var ProgressBarPrototype = Object.create(HTMLDivElement.prototype);
+
+    function onAutoTimeProgress() {
+        var start = parseInt(this.getAttribute('data-starttime'));
+        var end = parseInt(this.getAttribute('data-endtime'));
+
+        var now = new Date().getTime();
+        var total = end - start;
+        var pct = 100 * ((now - start) / total);
+
+        pct = Math.min(100, pct);
+        pct = Math.max(0, pct);
+
+        var itemProgressBarForeground = this.querySelector('.itemProgressBarForeground');
+        itemProgressBarForeground.style.width = pct + '%';
+    }
+
+    ProgressBarPrototype.attachedCallback = function () {
+        if (this.timeInterval) {
+            clearInterval(this.timeInterval);
+        }
+
+        if (this.getAttribute('data-automode') === 'time') {
+            this.timeInterval = setInterval(onAutoTimeProgress.bind(this), 60000);
+        }
+    };
+
+    ProgressBarPrototype.detachedCallback = function () {
+        if (this.timeInterval) {
+            clearInterval(this.timeInterval);
+            this.timeInterval = null;
+        }
+    };
+
+    document.registerElement('emby-progressbar', {
+        prototype: ProgressBarPrototype,
+        extends: 'div'
+    });
+});

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

@@ -402,7 +402,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
             this.addEventListener('keydown', onKeyDown);
             this.keyboardDraggingEnabled = true;
         }
-    }
+    };
 
     /**
      * Set steps for keyboard input.
@@ -413,7 +413,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
     EmbySliderPrototype.setKeyboardSteps = function (stepDown, stepUp) {
         this.keyboardStepDown = stepDown || stepUp || 1;
         this.keyboardStepUp = stepUp || stepDown || 1;
-    }
+    };
 
     function setRange(elem, startPercent, endPercent) {
 

src/encodingsettings.html

@@ -136,6 +136,14 @@
                     <div class="fieldDescription">${H264CrfHelp}</div>
                 </div>
 
+                <div class="selectContainer">
+                    <select is="emby-select" id="selectDeinterlaceMethod" label="${LabelDeinterlaceMethod}">
+                        <option value="yadif">${Yadif}</option>
+                        <option value="yadif_bob">${YadifBob}</option>
+                    </select>
+                    <div class="fieldDescription">${DeinterlaceMethodHelp}</div>
+                </div>
+
                 <div class="checkboxContainer checkboxContainer-withDescription">
                     <label>
                         <input is="emby-checkbox" type="checkbox" id="chkEnableSubtitleExtraction" />

src/index.html

@@ -92,7 +92,7 @@
             left: 0;
             bottom: 0;
             z-index: 1;
-            width: 10px;
+            width: 0.8em;
         }
     </style>
 </head>

src/itemdetails.html

@@ -186,8 +186,8 @@
                 </div>
 
                 <div id="additionalPartsCollapsible" class="verticalSection detailVerticalSection hide">
-                    <h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderAdditionalParts}</h2>
+                    <h2 class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderAdditionalParts}</h2>
-                    <div id="additionalPartsContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap"></div>
+                    <div id="additionalPartsContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right"></div>
                 </div>
 
                 <div class="verticalSection itemVerticalSection moreFromSeasonSection hide">
@@ -213,17 +213,17 @@
 
                 <div id="seriesScheduleSection" class="verticalSection detailVerticalSection hide">
                     <h2 class="sectionTitle padded-left padded-right">${HeaderUpcomingOnTV}</h2>
-                    <div id="seriesScheduleList" is="emby-itemscontainer" class="itemsContainer vertical-list"></div>
+                    <div id="seriesScheduleList" is="emby-itemscontainer" class="itemsContainer vertical-list padded-left padded-right"></div>
                 </div>
 
                 <div id="specialsCollapsible" class="verticalSection detailVerticalSection hide">
-                    <h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderSpecialFeatures}</h2>
+                    <h2 class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderSpecialFeatures}</h2>
-                    <div id="specialsContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap"></div>
+                    <div id="specialsContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right"></div>
                 </div>
 
                 <div id="musicVideosCollapsible" class="verticalSection detailVerticalSection hide">
-                    <h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderMusicVideos}</h2>
+                    <h2 class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderMusicVideos}</h2>
-                    <div id="musicVideosContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap"></div>
+                    <div id="musicVideosContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right"></div>
                 </div>
 
                 <div id="scenesCollapsible" class="verticalSection itemVerticalSection verticalSection-extrabottompadding hide">

src/legacy/dashboard.js

@@ -2,19 +2,23 @@ Dashboard.confirm = function(message, title, callback) {
     "use strict";
     require(["confirm"], function(confirm) {
         confirm(message, title).then(function() {
-            callback(!0)
+            callback(!0);
-        }, function() {
+        }).catch(function() {
-            callback(!1)
+            callback(!1);
-        })
+        });
-    })
+    });
-}, Dashboard.showLoadingMsg = function() {
+};
-    "use strict";
+
-    require(["loading"], function(loading) {
+Dashboard.showLoadingMsg = function() {
-        loading.show()
+    "use strict";
-    })
+    require(["loading"], function(loading) {
-}, Dashboard.hideLoadingMsg = function() {
+        loading.show();
-    "use strict";
+    });
-    require(["loading"], function(loading) {
+};
-        loading.hide()
+
-    })
+Dashboard.hideLoadingMsg = function() {
+    "use strict";
+    require(["loading"], function(loading) {
+        loading.hide();
+    });
 };

src/legacy/fnchecked.js

@@ -2,9 +2,11 @@ define(["jQuery"], function($) {
     "use strict";
     $.fn.checked = function(value) {
         return !0 === value || !1 === value ? $(this).each(function() {
-            this.checked = value
+            this.checked = value;
-        }) : this.length && this[0].checked
+        }) : this.length && this[0].checked;
-    }, $.fn.checkboxradio = function() {
+    };
-        return this
+
-    }
+    $.fn.checkboxradio = function() {
+        return this;
+    };
 });

src/legacy/selectmenu.js

@@ -1,6 +1,6 @@
 define(["jQuery"], function($) {
     "use strict";
     $.fn.selectmenu = function() {
-        return this
+        return this;
-    }
+    };
 });

src/login.html

@@ -8,7 +8,7 @@
             </div>
 
             <div class="inputContainer">
-                <input is="emby-input" type="text" id="txtManualName" required="required" label="${LabelUser}" autocomplete="username" />
+                <input is="emby-input" type="text" id="txtManualName" required="required" label="${LabelUser}" autocomplete="username" autocapitalize="off" />
             </div>
 
             <div class="inputContainer">

src/scripts/apploader.js

@@ -8,7 +8,7 @@
 
         var script = document.createElement("script");
         if (self.dashboardVersion) {
-            src += "?v=" + self.dashboardVersion;
+            src += `?v=${self.dashboardVersion}`;
         }
         script.src = src;
 

src/scripts/autobackdrops.js

@@ -1,16 +1,18 @@
 define(["backdrop", "userSettings", "libraryMenu"], function (backdrop, userSettings, libraryMenu) {
     "use strict";
 
+    var cache = {};
+
     function enabled() {
         return userSettings.enableBackdrops();
     }
 
     function getBackdropItemIds(apiClient, userId, types, parentId) {
-        var key = "backdrops2_" + userId + (types || "") + (parentId || "");
+        var key = `backdrops2_${userId + (types || "") + (parentId || "")}`;
         var data = cache[key];
 
         if (data) {
-            console.debug("Found backdrop id list in cache. Key: " + key);
+            console.debug(`Found backdrop id list in cache. Key: ${key}`);
             data = JSON.parse(data);
             return Promise.resolve(data);
         }
@@ -54,7 +56,6 @@ define(["backdrop", "userSettings", "libraryMenu"], function (backdrop, userSett
         }
     }
 
-    var cache = {};
     pageClassOn("pageshow", "page", function () {
         var page = this;
 

src/scripts/browser.js

@@ -292,6 +292,7 @@ define([], function () {
     }
 
     if (typeof document !== 'undefined') {
+        /* eslint-disable-next-line compat/compat */
         if (('ontouchstart' in window) || (navigator.maxTouchPoints > 0)) {
             browser.touch = true;
         }

src/scripts/dfnshelper.js

@@ -1,99 +1,57 @@
-import { ar, be, bg, ca, cs, da, de, el, enGB, enUS, es, faIR, fi, fr, frCA, he, hi, hr, hu, id, it, kk, ko, lt, ms, nb, nl, pl, ptBR, pt, ro, ru, sk, sl, sv, tr, uk, vi, zhCN, zhTW } from 'date-fns/locale';
+import { ar, be, bg, ca, cs, da, de, el, enGB, enUS, es, faIR, fi, fr, frCA, he, hi, hr, hu, id, it, ja, kk, ko, lt, ms, nb,
+    nl, pl, ptBR, pt, ro, ru, sk, sl, sv, tr, uk, vi, zhCN, zhTW } from 'date-fns/locale';
 import globalize from 'globalize';
 
+const dateLocales = (locale) => ({
+    'ar': ar,
+    'be-by': be,
+    'bg-bg': bg,
+    'ca': ca,
+    'cs': cs,
+    'da': da,
+    'de': de,
+    'el': el,
+    'en-gb': enGB,
+    'en-us': enUS,
+    'es': es,
+    'es-ar': es,
+    'es-mx': es,
+    'fa': faIR,
+    'fi': fi,
+    'fr': fr,
+    'fr-ca': frCA,
+    'gsw': de,
+    'he': he,
+    'hi-in': hi,
+    'hr': hr,
+    'hu': hu,
+    'id': id,
+    'it': it,
+    'ja': ja,
+    'kk': kk,
+    'ko': ko,
+    'lt-lt': lt,
+    'ms': ms,
+    'nb': nb,
+    'nl': nl,
+    'pl': pl,
+    'pt-br': ptBR,
+    'pt-pt': pt,
+    'ro': ro,
+    'ru': ru,
+    'sk': sk,
+    'sl-si': sl,
+    'sv': sv,
+    'tr': tr,
+    'uk': uk,
+    'vi': vi,
+    'zh-cn': zhCN,
+    'zh-hk': zhCN,
+    'zh-tw': zhTW
+})[locale];
+
 export function getLocale() {
-    switch (globalize.getCurrentLocale()) {
+    return dateLocales(globalize.getCurrentLocale()) || enUS;
-        case 'ar':
-            return ar;
-        case 'be-by':
-            return be;
-        case 'bg-bg':
-            return bg;
-        case 'ca':
-            return ca;
-        case 'cs':
-            return cs;
-        case 'da':
-            return da;
-        case 'de':
-            return de;
-        case 'el':
-            return el;
-        case 'en-gb':
-            return enGB;
-        case 'en-us':
-            return enUS;
-        case 'es':
-            return es;
-        case 'es-ar':
-            return es;
-        case 'es-mx':
-            return es;
-        case 'fa':
-            return faIR;
-        case 'fi':
-            return fi;
-        case 'fr':
-            return fr;
-        case 'fr-ca':
-            return frCA;
-        case 'gsw':
-            return de;
-        case 'he':
-            return he;
-        case 'hi-in':
-            return hi;
-        case 'hr':
-            return hr;
-        case 'hu':
-            return hu;
-        case 'id':
-            return id;
-        case 'it':
-            return it;
-        case 'kk':
-            return kk;
-        case 'ko':
-            return ko;
-        case 'lt-lt':
-            return lt;
-        case 'ms':
-            return ms;
-        case 'nb':
-            return nb;
-        case 'nl':
-            return nl;
-        case 'pl':
-            return pl;
-        case 'pt-br':
-            return ptBR;
-        case 'pt-pt':
-            return pt;
-        case 'ro':
-            return ro;
-        case 'ru':
-            return ru;
-        case 'sk':
-            return sk;
-        case 'sl-si':
-            return sl;
-        case 'sv':
-            return sv;
-        case 'tr':
-            return tr;
-        case 'uk':
-            return uk;
-        case 'vi':
-            return vi;
-        case 'zh-cn':
-            return zhCN;
-        case 'zh-hk':
-            return zhCN;
-        case 'zh-tw':
-            return zhTW;
-        default:
-            return enUS;
-    }
 }
 
 export const localeWithSuffix = { addSuffix: true, locale: getLocale() };
@@ -101,4 +59,4 @@ export const localeWithSuffix = { addSuffix: true, locale: getLocale() };
 export default {
     getLocale: getLocale,
     localeWithSuffix: localeWithSuffix
-}
+};

src/scripts/globalize.js

@@ -1,4 +1,4 @@
-define(['connectionManager', 'userSettings', 'events'], function (connectionManager, userSettings, events) {
+define(['userSettings', 'events'], function (userSettings, events) {
     'use strict';
     var fallbackCulture = 'en-us';
 
@@ -253,7 +253,6 @@ define(['connectionManager', 'userSettings', 'events'], function (connectionMana
 
     updateCurrentCulture();
 
-    events.on(connectionManager, 'localusersignedin', updateCurrentCulture);
     events.on(userSettings, 'change', function (e, name) {
         if (name === 'language' || name === 'datetimelocale') {
             updateCurrentCulture();
@@ -269,6 +268,7 @@ define(['connectionManager', 'userSettings', 'events'], function (connectionMana
         defaultModule: defaultModule,
         getCurrentLocale: getCurrentLocale,
         getCurrentDateTimeLocale: getCurrentDateTimeLocale,
-        register: register
+        register: register,
+        updateCurrentCulture: updateCurrentCulture
     };
 });

src/scripts/imagehelper.js

@@ -1,7 +1,8 @@
-define(["browser"], function (browser) {
+/* eslint-disable indent */
-    "use strict";
 
-    function getDeviceIcon(device) {
+import browser from 'browser';
+
+    export function getDeviceIcon(device) {
         var baseUrl = "assets/img/devices/";
         switch (device.AppName || device.Client) {
             case "Samsung Smart TV":
@@ -42,7 +43,7 @@ define(["browser"], function (browser) {
         }
     }
 
-    function getLibraryIcon(library) {
+    export function getLibraryIcon(library) {
         switch (library) {
             case "movies":
                 return "video_library";
@@ -71,8 +72,9 @@ define(["browser"], function (browser) {
         }
     }
 
-    return {
+/* eslint-enable indent */
-        getDeviceIcon: getDeviceIcon,
+
-        getLibraryIcon: getLibraryIcon
+export default {
-    };
+    getDeviceIcon: getDeviceIcon,
-});
+    getLibraryIcon: getLibraryIcon
+};

src/scripts/inputManager.js

@@ -1,44 +1,49 @@
-define(['playbackManager', 'focusManager', 'appRouter', 'dom', 'apphost'], function (playbackManager, focusManager, appRouter, dom, appHost) {
+import playbackManager from 'playbackManager';
-    'use strict';
+import focusManager from 'focusManager';
+import appRouter from 'appRouter';
+import dom from 'dom';
+import appHost from 'apphost';
 
-    var lastInputTime = new Date().getTime();
+/* eslint-disable indent */
 
-    function notify() {
+    let lastInputTime = new Date().getTime();
+
+    export function notify() {
         lastInputTime = new Date().getTime();
         handleCommand('unknown');
     }
 
-    function notifyMouseMove() {
+    export function notifyMouseMove() {
         lastInputTime = new Date().getTime();
     }
 
-    function idleTime() {
+    export function idleTime() {
         return new Date().getTime() - lastInputTime;
     }
 
-    function select(sourceElement) {
+    export function select(sourceElement) {
         sourceElement.click();
     }
 
-    var eventListenerCount = 0;
+    let eventListenerCount = 0;
-    function on(scope, fn) {
+    export function on(scope, fn) {
         eventListenerCount++;
         dom.addEventListener(scope, 'command', fn, {});
     }
 
-    function off(scope, fn) {
+    export function off(scope, fn) {
         if (eventListenerCount) {
             eventListenerCount--;
         }
         dom.removeEventListener(scope, 'command', fn, {});
     }
 
-    var commandTimes = {};
+    let commandTimes = {};
 
     function checkCommandTime(command) {
 
-        var last = commandTimes[command] || 0;
+        const last = commandTimes[command] || 0;
-        var now = new Date().getTime();
+        const now = new Date().getTime();
 
         if ((now - last) < 1000) {
             return false;
@@ -48,11 +53,11 @@ define(['playbackManager', 'focusManager', 'appRouter', 'dom', 'apphost'], funct
         return true;
     }
 
-    function handleCommand(name, options) {
+    export function handleCommand(commandName, options) {
 
         lastInputTime = new Date().getTime();
 
-        var sourceElement = (options ? options.sourceElement : null);
+        let sourceElement = (options ? options.sourceElement : null);
 
         if (sourceElement) {
             sourceElement = focusManager.focusableParent(sourceElement);
@@ -61,7 +66,7 @@ define(['playbackManager', 'focusManager', 'appRouter', 'dom', 'apphost'], funct
         if (!sourceElement) {
             sourceElement = document.activeElement || window;
 
-            var dlg = document.querySelector('.dialogContainer .dialog.opened');
+            const dlg = document.querySelector('.dialogContainer .dialog.opened');
 
             if (dlg && (!sourceElement || !dlg.contains(sourceElement))) {
                 sourceElement = dlg;
@@ -69,169 +74,164 @@ define(['playbackManager', 'focusManager', 'appRouter', 'dom', 'apphost'], funct
         }
 
         if (eventListenerCount) {
-            var customEvent = new CustomEvent("command", {
+            const customEvent = new CustomEvent("command", {
                 detail: {
-                    command: name
+                    command: commandName
                 },
                 bubbles: true,
                 cancelable: true
             });
 
-            var eventResult = sourceElement.dispatchEvent(customEvent);
+            const eventResult = sourceElement.dispatchEvent(customEvent);
             if (!eventResult) {
                 // event cancelled
                 return;
             }
         }
 
-        switch (name) {
+        const keyActions = (command) => ({
-            case 'up':
+            'up': () => {
                 focusManager.moveUp(sourceElement);
-                break;
+            },
-            case 'down':
+            'down': () => {
                 focusManager.moveDown(sourceElement);
-                break;
+            },
-            case 'left':
+            'left': () => {
                 focusManager.moveLeft(sourceElement);
-                break;
+            },
-            case 'right':
+            'right': () => {
                 focusManager.moveRight(sourceElement);
-                break;
+            },
-            case 'home':
+            'home': () => {
                 appRouter.goHome();
-                break;
+            },
-            case 'settings':
+            'settings': () => {
                 appRouter.showSettings();
-                break;
+            },
-            case 'back':
+            'back': () => {
                 if (appRouter.canGoBack()) {
                     appRouter.back();
                 } else if (appHost.supports('exit')) {
                     appHost.exit();
                 }
-                break;
+            },
-            case 'forward':
+            'select': () => {
-                break;
-            case 'select':
                 select(sourceElement);
-                break;
+            },
-            case 'pageup':
+            'nextchapter': () => {
-                break;
-            case 'pagedown':
-                break;
-            case 'end':
-                break;
-            case 'menu':
-                break;
-            case 'info':
-                break;
-            case 'nextchapter':
                 playbackManager.nextChapter();
-                break;
+            },
-            case 'next':
+            'next': () => {
-            case 'nexttrack':
                 playbackManager.nextTrack();
-                break;
+            },
-            case 'previous':
+            'nexttrack': () => {
-            case 'previoustrack':
+                playbackManager.nextTrack();
+            },
+            'previous': () => {
                 playbackManager.previousTrack();
-                break;
+            },
-            case 'previouschapter':
+            'previoustrack': () => {
+                playbackManager.previousTrack();
+            },
+            'previouschapter': () => {
                 playbackManager.previousChapter();
-                break;
+            },
-            case 'guide':
+            'guide': () => {
                 appRouter.showGuide();
-                break;
+            },
-            case 'recordedtv':
+            'recordedtv': () => {
                 appRouter.showRecordedTV();
-                break;
+            },
-            case 'record':
+            'livetv': () => {
-                break;
-            case 'livetv':
                 appRouter.showLiveTV();
-                break;
+            },
-            case 'mute':
+            'mute': () => {
                 playbackManager.setMute(true);
-                break;
+            },
-            case 'unmute':
+            'unmute': () => {
                 playbackManager.setMute(false);
-                break;
+            },
-            case 'togglemute':
+            'togglemute': () => {
                 playbackManager.toggleMute();
-                break;
+            },
-            case 'channelup':
+            'channelup': () => {
                 playbackManager.channelUp();
-                break;
+            },
-            case 'channeldown':
+            'channeldown': () => {
                 playbackManager.channelDown();
-                break;
+            },
-            case 'volumedown':
+            'volumedown': () => {
                 playbackManager.volumeDown();
-                break;
+            },
-            case 'volumeup':
+            'volumeup': () => {
                 playbackManager.volumeUp();
-                break;
+            },
-            case 'play':
+            'play': () => {
                 playbackManager.unpause();
-                break;
+            },
-            case 'pause':
+            'pause': () => {
                 playbackManager.pause();
-                break;
+            },
-            case 'playpause':
+            'playpause': () => {
                 playbackManager.playPause();
-                break;
+            },
-            case 'stop':
+            'stop': () => {
                 if (checkCommandTime('stop')) {
                     playbackManager.stop();
                 }
-                break;
+            },
-            case 'changezoom':
+            'changezoom': () => {
                 playbackManager.toggleAspectRatio();
-                break;
+            },
-            case 'changeaudiotrack':
+            'changeaudiotrack': () => {
                 playbackManager.changeAudioStream();
-                break;
+            },
-            case 'changesubtitletrack':
+            'changesubtitletrack': () => {
                 playbackManager.changeSubtitleStream();
-                break;
+            },
-            case 'search':
+            'search': () => {
                 appRouter.showSearch();
-                break;
+            },
-            case 'favorites':
+            'favorites': () => {
                 appRouter.showFavorites();
-                break;
+            },
-            case 'fastforward':
+            'fastforward': () => {
                 playbackManager.fastForward();
-                break;
+            },
-            case 'rewind':
+            'rewind': () => {
                 playbackManager.rewind();
-                break;
+            },
-            case 'togglefullscreen':
+            'togglefullscreen': () => {
                 playbackManager.toggleFullscreen();
-                break;
+            },
-            case 'disabledisplaymirror':
+            'disabledisplaymirror': () => {
                 playbackManager.enableDisplayMirroring(false);
-                break;
+            },
-            case 'enabledisplaymirror':
+            'enabledisplaymirror': () => {
                 playbackManager.enableDisplayMirroring(true);
-                break;
+            },
-            case 'toggledisplaymirror':
+            'toggledisplaymirror': () => {
                 playbackManager.toggleDisplayMirroring();
-                break;
+            },
-            case 'nowplaying':
+            'nowplaying': () => {
                 appRouter.showNowPlaying();
-                break;
+            },
-            case 'repeatnone':
+            'repeatnone': () => {
                 playbackManager.setRepeatMode('RepeatNone');
-                break;
+            },
-            case 'repeatall':
+            'repeatall': () => {
                 playbackManager.setRepeatMode('RepeatAll');
-                break;
+            },
-            case 'repeatone':
+            'repeatone': () => {
                 playbackManager.setRepeatMode('RepeatOne');
-                break;
+            }
-            default:
+        })[command];
-                break;
+
+        const action = keyActions(commandName);
+        if (action !== undefined) {
+            action.call();
+        } else {
+            console.debug(`inputManager: tried to process command with no action assigned: ${commandName}`);
         }
     }
 
@@ -239,13 +239,14 @@ define(['playbackManager', 'focusManager', 'appRouter', 'dom', 'apphost'], funct
         passive: true
     });
 
-    return {
+/* eslint-enable indent */
-        trigger: handleCommand,
+
-        handle: handleCommand,
+export default {
-        notify: notify,
+    trigger: handleCommand,
-        notifyMouseMove: notifyMouseMove,
+    handle: handleCommand,
-        idleTime: idleTime,
+    notify: notify,
-        on: on,
+    notifyMouseMove: notifyMouseMove,
-        off: off
+    idleTime: idleTime,
-    };
+    on: on,
-});
+    off: off
+};

src/scripts/librarymenu.js

@@ -63,7 +63,9 @@ define(["dom", "layoutManager", "inputManager", "connectionManager", "events", "
                 hasImage = true;
             }
 
-            headerUserButton.classList.remove("hide");
+            if (!layoutManager.mobile) {
+                headerUserButton.classList.remove("hide");
+            }
         } else {
             headerUserButton.classList.add("hide");
         }
@@ -73,7 +75,7 @@ define(["dom", "layoutManager", "inputManager", "connectionManager", "events", "
         }
 
         if (user && user.localUser) {
-            if (headerHomeButton && !layoutManager.mobile) {
+            if (headerHomeButton) {
                 headerHomeButton.classList.remove("hide");
             }
 

src/scripts/playlistedit.js

@@ -8,7 +8,7 @@ define(["listView"], function (listView) {
                 EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
                 UserId: ApiClient.getCurrentUserId()
             };
-            return ApiClient.getJSON(ApiClient.getUrl("Playlists/" + itemId + "/Items", query));
+            return ApiClient.getJSON(ApiClient.getUrl(`Playlists/${itemId}/Items`, query));
         };
     }
 

src/scripts/playlists.js

@@ -1,4 +1,4 @@
-define(["loading", "listView", "cardBuilder", "libraryMenu", "libraryBrowser", "apphost", "imageLoader", "emby-itemscontainer"], function (loading, listView, cardBuilder, libraryMenu, libraryBrowser, appHost, imageLoader) {
+define(["loading", "listView", "cardBuilder", "libraryMenu", "libraryBrowser", "apphost", "imageLoader", "userSettings", "emby-itemscontainer"], function (loading, listView, cardBuilder, libraryMenu, libraryBrowser, appHost, imageLoader, userSettings) {
     "use strict";
 
     return function (view, params) {
@@ -14,11 +14,15 @@ define(["loading", "listView", "cardBuilder", "libraryMenu", "libraryBrowser", "
                         IncludeItemTypes: "Playlist",
                         Recursive: true,
                         Fields: "PrimaryImageAspectRatio,SortName,CumulativeRunTimeTicks,CanDelete",
-                        StartIndex: 0,
+                        StartIndex: 0
-                        Limit: 100
                     },
                     view: libraryBrowser.getSavedView(key) || "Poster"
                 };
+
+                if (userSettings.libraryPageSize() > 0) {
+                    pageData.query['Limit'] = userSettings.libraryPageSize();
+                }
+
                 pageData.query.ParentId = libraryMenu.getTopParentId();
                 libraryBrowser.loadSavedQueryValues(key, pageData.query);
             }
@@ -137,7 +141,9 @@ define(["loading", "listView", "cardBuilder", "libraryMenu", "libraryBrowser", "
 
                 if (btnNextPage) {
                     btnNextPage.addEventListener("click", function () {
-                        query.StartIndex += query.Limit;
+                        if (userSettings.libraryPageSize() > 0) {
+                            query.StartIndex += query.Limit;
+                        }
                         reloadItems();
                     });
                 }
@@ -146,7 +152,9 @@ define(["loading", "listView", "cardBuilder", "libraryMenu", "libraryBrowser", "
 
                 if (btnPreviousPage) {
                     btnPreviousPage.addEventListener("click", function () {
-                        query.StartIndex -= query.Limit;
+                        if (userSettings.libraryPageSize() > 0) {
+                            query.StartIndex = Math.max(0, query.StartIndex - query.Limit);
+                        }
                         reloadItems();
                     });
                 }

src/scripts/settings/appSettings.js

@@ -1,5 +1,7 @@
-define(['appStorage', 'events'], function (appStorage, events) {
+/* eslint-disable indent */
-    'use strict';
+
+import appStorage from 'appStorage';
+import events from 'events';
 
     function getKey(name, userId) {
         if (userId) {
@@ -9,26 +11,23 @@ define(['appStorage', 'events'], function (appStorage, events) {
         return name;
     }
 
-    function AppSettings() {
+    export function enableAutoLogin(val) {
-    }
-
-    AppSettings.prototype.enableAutoLogin = function (val) {
         if (val != null) {
             this.set('enableAutoLogin', val.toString());
         }
 
         return this.get('enableAutoLogin') !== 'false';
-    };
+    }
 
-    AppSettings.prototype.enableSystemExternalPlayers = function (val) {
+    export function enableSystemExternalPlayers(val) {
         if (val !== null) {
             this.set('enableSystemExternalPlayers', val.toString());
         }
 
         return this.get('enableSystemExternalPlayers') === 'true';
-    };
+    }
 
-    AppSettings.prototype.enableAutomaticBitrateDetection = function (isInNetwork, mediaType, val) {
+    export function enableAutomaticBitrateDetection(isInNetwork, mediaType, val) {
         var key = 'enableautobitratebitrate-' + mediaType + '-' + isInNetwork;
         if (val != null) {
             if (isInNetwork && mediaType === 'Audio') {
@@ -43,9 +42,9 @@ define(['appStorage', 'events'], function (appStorage, events) {
         } else {
             return this.get(key) !== 'false';
         }
-    };
+    }
 
-    AppSettings.prototype.maxStreamingBitrate = function (isInNetwork, mediaType, val) {
+    export function maxStreamingBitrate(isInNetwork, mediaType, val) {
         var key = 'maxbitrate-' + mediaType + '-' + isInNetwork;
         if (val != null) {
             if (isInNetwork && mediaType === 'Audio') {
@@ -61,43 +60,43 @@ define(['appStorage', 'events'], function (appStorage, events) {
         } else {
             return parseInt(this.get(key) || '0') || 1500000;
         }
-    };
+    }
 
-    AppSettings.prototype.maxStaticMusicBitrate = function (val) {
+    export function maxStaticMusicBitrate(val) {
         if (val !== undefined) {
             this.set('maxStaticMusicBitrate', val);
         }
 
         var defaultValue = 320000;
         return parseInt(this.get('maxStaticMusicBitrate') || defaultValue.toString()) || defaultValue;
-    };
+    }
 
-    AppSettings.prototype.maxChromecastBitrate = function (val) {
+    export function maxChromecastBitrate(val) {
         if (val != null) {
             this.set('chromecastBitrate1', val);
         }
 
         val = this.get('chromecastBitrate1');
         return val ? parseInt(val) : null;
-    };
+    }
 
-    AppSettings.prototype.syncOnlyOnWifi = function (val) {
+    export function syncOnlyOnWifi(val) {
         if (val != null) {
             this.set('syncOnlyOnWifi', val.toString());
         }
 
         return this.get('syncOnlyOnWifi') !== 'false';
-    };
+    }
 
-    AppSettings.prototype.syncPath = function (val) {
+    export function syncPath(val) {
         if (val != null) {
             this.set('syncPath', val);
         }
 
         return this.get('syncPath');
-    };
+    }
 
-    AppSettings.prototype.cameraUploadServers = function (val) {
+    export function cameraUploadServers(val) {
         if (val != null) {
             this.set('cameraUploadServers', val.join(','));
         }
@@ -108,28 +107,42 @@ define(['appStorage', 'events'], function (appStorage, events) {
         }
 
         return [];
-    };
+    }
 
-    AppSettings.prototype.runAtStartup = function (val) {
+    export function runAtStartup(val) {
         if (val != null) {
             this.set('runatstartup', val.toString());
         }
 
         return this.get('runatstartup') === 'true';
-    };
+    }
 
-    AppSettings.prototype.set = function (name, value, userId) {
+    export function set(name, value, userId) {
         var currentValue = this.get(name, userId);
         appStorage.setItem(getKey(name, userId), value);
 
         if (currentValue !== value) {
             events.trigger(this, 'change', [name]);
         }
-    };
+    }
 
-    AppSettings.prototype.get = function (name, userId) {
+    export function get(name, userId) {
         return appStorage.getItem(getKey(name, userId));
-    };
+    }
 
-    return new AppSettings();
+/* eslint-enable indent */
-});
+
+export default {
+    enableAutoLogin: enableAutoLogin,
+    enableSystemExternalPlayers: enableSystemExternalPlayers,
+    enableAutomaticBitrateDetection: enableAutomaticBitrateDetection,
+    maxStreamingBitrate: maxStreamingBitrate,
+    maxStaticMusicBitrate: maxStaticMusicBitrate,
+    maxChromecastBitrate: maxChromecastBitrate,
+    syncOnlyOnWifi: syncOnlyOnWifi,
+    syncPath: syncPath,
+    cameraUploadServers: cameraUploadServers,
+    runAtStartup: runAtStartup,
+    set: set,
+    get: get
+};

src/scripts/settings/userSettings.js

@@ -1,5 +1,7 @@
-define(['appSettings', 'events'], function (appSettings, events) {
+/* eslint-disable indent */
-    'use strict';
+
+import appSettings from 'appSettings';
+import events from 'events';
 
     function onSaveTimeout() {
         var self = this;
@@ -15,10 +17,7 @@ define(['appSettings', 'events'], function (appSettings, events) {
         instance.saveTimeout = setTimeout(onSaveTimeout.bind(instance), 50);
     }
 
-    function UserSettings() {
+    export function setUserInfo(userId, apiClient) {
-    }
-
-    UserSettings.prototype.setUserInfo = function (userId, apiClient) {
         if (this.saveTimeout) {
             clearTimeout(this.saveTimeout);
         }
@@ -37,17 +36,17 @@ define(['appSettings', 'events'], function (appSettings, events) {
             result.CustomPrefs = result.CustomPrefs || {};
             self.displayPrefs = result;
         });
-    };
+    }
 
-    UserSettings.prototype.getData = function () {
+    export function getData() {
         return this.displayPrefs;
-    };
+    }
 
-    UserSettings.prototype.importFrom = function (instance) {
+    export function importFrom(instance) {
         this.displayPrefs = instance.getData();
-    };
+    }
 
-    UserSettings.prototype.set = function (name, value, enableOnServer) {
+    export function set(name, value, enableOnServer) {
         var userId = this.currentUserId;
         var currentValue = this.get(name, enableOnServer);
         var result = appSettings.set(name, value, userId);
@@ -62,18 +61,18 @@ define(['appSettings', 'events'], function (appSettings, events) {
         }
 
         return result;
-    };
+    }
 
-    UserSettings.prototype.get = function (name, enableOnServer) {
+    export function get(name, enableOnServer) {
         var userId = this.currentUserId;
         if (enableOnServer !== false && this.displayPrefs) {
             return this.displayPrefs.CustomPrefs[name];
         }
 
         return appSettings.get(name, userId);
-    };
+    }
 
-    UserSettings.prototype.serverConfig = function (config) {
+    export function serverConfig(config) {
         var apiClient = this.currentApiClient;
         if (config) {
             return apiClient.updateUserConfiguration(this.currentUserId, config);
@@ -82,135 +81,149 @@ define(['appSettings', 'events'], function (appSettings, events) {
         return apiClient.getUser(this.currentUserId).then(function (user) {
             return user.Configuration;
         });
-    };
+    }
 
-    UserSettings.prototype.enableCinemaMode = function (val) {
+    export function enableCinemaMode(val) {
         if (val != null) {
             return this.set('enableCinemaMode', val.toString(), false);
         }
 
         val = this.get('enableCinemaMode', false);
         return val !== 'false';
-    };
+    }
 
-    UserSettings.prototype.enableNextVideoInfoOverlay = function (val) {
+    export function enableNextVideoInfoOverlay(val) {
         if (val != null) {
             return this.set('enableNextVideoInfoOverlay', val.toString());
         }
 
         val = this.get('enableNextVideoInfoOverlay', false);
         return val !== 'false';
-    };
+    }
 
-    UserSettings.prototype.enableThemeSongs = function (val) {
+    export function enableThemeSongs(val) {
         if (val != null) {
             return this.set('enableThemeSongs', val.toString(), false);
         }
 
         val = this.get('enableThemeSongs', false);
         return val !== 'false';
-    };
+    }
 
-    UserSettings.prototype.enableThemeVideos = function (val) {
+    export function enableThemeVideos(val) {
         if (val != null) {
             return this.set('enableThemeVideos', val.toString(), false);
         }
 
         val = this.get('enableThemeVideos', false);
         return val !== 'false';
-    };
+    }
 
-    UserSettings.prototype.enableFastFadein = function (val) {
+    export function enableFastFadein(val) {
         if (val != null) {
             return this.set('fastFadein', val.toString(), false);
         }
 
         val = this.get('fastFadein', false);
         return val !== 'false';
-    };
+    }
 
-    UserSettings.prototype.enableBackdrops = function (val) {
+    export function enableBackdrops(val) {
         if (val != null) {
             return this.set('enableBackdrops', val.toString(), false);
         }
 
         val = this.get('enableBackdrops', false);
         return val !== 'false';
-    };
+    }
 
-    UserSettings.prototype.language = function (val) {
+    export function language(val) {
         if (val != null) {
             return this.set('language', val.toString(), false);
         }
 
         return this.get('language', false);
-    };
+    }
 
-    UserSettings.prototype.dateTimeLocale = function (val) {
+    export function dateTimeLocale(val) {
         if (val != null) {
             return this.set('datetimelocale', val.toString(), false);
         }
 
         return this.get('datetimelocale', false);
-    };
+    }
 
-    UserSettings.prototype.skipBackLength = function (val) {
+    export function skipBackLength(val) {
         if (val != null) {
             return this.set('skipBackLength', val.toString());
         }
 
         return parseInt(this.get('skipBackLength') || '10000');
-    };
+    }
 
-    UserSettings.prototype.skipForwardLength = function (val) {
+    export function skipForwardLength(val) {
         if (val != null) {
             return this.set('skipForwardLength', val.toString());
         }
 
         return parseInt(this.get('skipForwardLength') || '30000');
-    };
+    }
 
-    UserSettings.prototype.dashboardTheme = function (val) {
+    export function dashboardTheme(val) {
         if (val != null) {
             return this.set('dashboardTheme', val);
         }
 
         return this.get('dashboardTheme');
-    };
+    }
 
-    UserSettings.prototype.skin = function (val) {
+    export function skin(val) {
         if (val != null) {
             return this.set('skin', val, false);
         }
 
         return this.get('skin', false);
-    };
+    }
 
-    UserSettings.prototype.theme = function (val) {
+    export function theme(val) {
         if (val != null) {
             return this.set('appTheme', val, false);
         }
 
         return this.get('appTheme', false);
-    };
+    }
 
-    UserSettings.prototype.screensaver = function (val) {
+    export function screensaver(val) {
         if (val != null) {
             return this.set('screensaver', val, false);
         }
 
         return this.get('screensaver', false);
-    };
+    }
 
-    UserSettings.prototype.soundEffects = function (val) {
+    export function libraryPageSize(val) {
+        if (val != null) {
+            return this.set('libraryPageSize', parseInt(val, 10), false);
+        }
+
+        var libraryPageSize = parseInt(this.get('libraryPageSize', false), 10);
+        if (libraryPageSize === 0) {
+            // Explicitly return 0 to avoid returning 100 because 0 is falsy.
+            return 0;
+        } else {
+            return libraryPageSize || 100;
+        }
+    }
+
+    export function soundEffects(val) {
         if (val != null) {
             return this.set('soundeffects', val, false);
         }
 
         return this.get('soundeffects', false);
-    };
+    }
 
-    UserSettings.prototype.loadQuerySettings = function (key, query) {
+    export function loadQuerySettings(key, query) {
         var values = this.get(key);
         if (values) {
             values = JSON.parse(values);
@@ -218,9 +231,9 @@ define(['appSettings', 'events'], function (appSettings, events) {
         }
 
         return query;
-    };
+    }
 
-    UserSettings.prototype.saveQuerySettings = function (key, query) {
+    export function saveQuerySettings(key, query) {
         var values = {};
         if (query.SortBy) {
             values.SortBy = query.SortBy;
@@ -231,25 +244,24 @@ define(['appSettings', 'events'], function (appSettings, events) {
         }
 
         return this.set(key, JSON.stringify(values));
-    };
+    }
 
-    UserSettings.prototype.getSubtitleAppearanceSettings = function (key) {
+    export function getSubtitleAppearanceSettings(key) {
         key = key || 'localplayersubtitleappearance3';
         return JSON.parse(this.get(key, false) || '{}');
-    };
+    }
 
-    UserSettings.prototype.setSubtitleAppearanceSettings = function (value, key) {
+    export function setSubtitleAppearanceSettings(value, key) {
         key = key || 'localplayersubtitleappearance3';
         return this.set(key, JSON.stringify(value), false);
-    };
+    }
 
-    UserSettings.prototype.setFilter = function (key, value) {
+    export function setFilter(key, value) {
         return this.set(key, value, true);
-    };
+    }
 
-    UserSettings.prototype.getFilter = function (key) {
+    export function getFilter(key) {
         return this.get(key, true);
-    };
+    }
 
-    return UserSettings;
+/* eslint-enable indent */
-});

src/scripts/site.js

@@ -323,11 +323,11 @@ var AppInfo = {};
     }
 
     function getElementsPath() {
-        return "elements"
+        return "elements";
     }
 
     function getScriptsPath() {
-        return "scripts"
+        return "scripts";
     }
 
     function getPlaybackManager(playbackManager) {
@@ -452,6 +452,9 @@ var AppInfo = {};
                 require(["autoFocuser"], function(autoFocuser) {
                     autoFocuser.enable();
                 });
+                require(['globalize', 'connectionManager', 'events'], function (globalize, connectionManager, events) {
+                    events.on(connectionManager, 'localusersignedin', globalize.updateCurrentCulture);
+                });
             });
         });
     }
@@ -585,7 +588,7 @@ var AppInfo = {};
                     }
                 }
 
-                require(["playerSelectionMenu", "fullscreenManager"]);
+                require(["playerSelectionMenu"]);
 
                 var apiClient = window.ConnectionManager && window.ConnectionManager.currentApiClient();
                 if (apiClient) {
@@ -612,13 +615,17 @@ var AppInfo = {};
     }
 
     function registerServiceWorker() {
-        if (navigator.serviceWorker && "cordova" !== self.appMode && "android" !== self.appMode) {
+        /* eslint-disable compat/compat */
+        if (navigator.serviceWorker && self.appMode !== "cordova" && self.appMode !== "android") {
             try {
                 navigator.serviceWorker.register("serviceworker.js");
             } catch (err) {
                 console.error("error registering serviceWorker: " + err);
             }
+        } else {
+            console.warn("serviceWorker unsupported");
         }
+        /* eslint-enable compat/compat */
     }
 
     function onWebComponentsReady(browser) {
@@ -696,7 +703,11 @@ var AppInfo = {};
                     "jellyfin-noto",
                     "date-fns",
                     "page",
-                    "polyfill"
+                    "polyfill",
+                    "fast-text-encoding",
+                    "intersection-observer",
+                    "classlist-polyfill",
+                    "screenfull"
                 ]
             },
             urlArgs: urlArgs,
@@ -705,6 +716,9 @@ var AppInfo = {};
         });
 
         require(["polyfill"]);
+        require(["fast-text-encoding"]);
+        require(["intersection-observer"]);
+        require(["classlist-polyfill"]);
 
         // Expose jQuery globally
         require(["jQuery"], function(jQuery) {
@@ -767,13 +781,19 @@ var AppInfo = {};
         define("emby-slider", [elementsPath + "/emby-slider/emby-slider"], returnFirstDependency);
         define("emby-textarea", [elementsPath + "/emby-textarea/emby-textarea"], returnFirstDependency);
         define("emby-toggle", [elementsPath + "/emby-toggle/emby-toggle"], returnFirstDependency);
+        define("emby-scroller", [elementsPath + "/emby-scroller/emby-scroller"], returnFirstDependency);
+        define("emby-tabs", [elementsPath + "/emby-tabs/emby-tabs"], returnFirstDependency);
+        define("emby-scrollbuttons", [elementsPath + "/emby-scrollbuttons/emby-scrollbuttons"], returnFirstDependency);
+        define("emby-itemrefreshindicator", [elementsPath + "/emby-itemrefreshindicator/emby-itemrefreshindicator"], returnFirstDependency);
+        define("emby-itemscontainer", [elementsPath + "/emby-itemscontainer/emby-itemscontainer"], returnFirstDependency);
+        define("emby-playstatebutton", [elementsPath + "/emby-playstatebutton/emby-playstatebutton"], returnFirstDependency);
+        define("emby-ratingbutton", [elementsPath + "/emby-ratingbutton/emby-ratingbutton"], returnFirstDependency);
+        define("emby-progressbar", [elementsPath + "/emby-progressbar/emby-progressbar"], returnFirstDependency);
+        define("emby-programcell", [elementsPath + "/emby-programcell/emby-programcell"], returnFirstDependency);
 
         define("webSettings", [scriptsPath + "/settings/webSettings"], returnFirstDependency);
         define("appSettings", [scriptsPath + "/settings/appSettings"], returnFirstDependency);
-        define("userSettingsBuilder", [scriptsPath + "/settings/userSettingsBuilder"], returnFirstDependency);
+        define("userSettings", [scriptsPath + "/settings/userSettings"], returnFirstDependency);
-        define("userSettings", ["userSettingsBuilder"], function(userSettingsBuilder) {
-            return new userSettingsBuilder();
-        });
 
         define("chromecastHelper", [componentsPath + "/chromecast/chromecasthelpers"], returnFirstDependency);
         define("mediaSession", [componentsPath + "/playback/mediasession"], returnFirstDependency);
@@ -788,12 +808,7 @@ var AppInfo = {};
         define("playerSettingsMenu", [componentsPath + "/playback/playersettingsmenu"], returnFirstDependency);
         define("playMethodHelper", [componentsPath + "/playback/playmethodhelper"], returnFirstDependency);
         define("brightnessOsd", [componentsPath + "/playback/brightnessosd"], returnFirstDependency);
-        define("emby-itemscontainer", [componentsPath + "/emby-itemscontainer/emby-itemscontainer"], returnFirstDependency);
         define("alphaNumericShortcuts", [componentsPath + "/alphanumericshortcuts/alphanumericshortcuts"], returnFirstDependency);
-        define("emby-scroller", [componentsPath + "/emby-scroller/emby-scroller"], returnFirstDependency);
-        define("emby-tabs", [componentsPath + "/emby-tabs/emby-tabs"], returnFirstDependency);
-        define("emby-scrollbuttons", [componentsPath + "/emby-scrollbuttons/emby-scrollbuttons"], returnFirstDependency);
-        define("emby-itemrefreshindicator", [componentsPath + "/emby-itemrefreshindicator/emby-itemrefreshindicator"], returnFirstDependency);
         define("multiSelect", [componentsPath + "/multiselect/multiselect"], returnFirstDependency);
         define("alphaPicker", [componentsPath + "/alphapicker/alphapicker"], returnFirstDependency);
         define("tabbedView", [componentsPath + "/tabbedview/tabbedview"], returnFirstDependency);
@@ -820,8 +835,6 @@ var AppInfo = {};
         define("searchFields", [componentsPath + "/search/searchfields"], returnFirstDependency);
         define("searchResults", [componentsPath + "/search/searchresults"], returnFirstDependency);
         define("upNextDialog", [componentsPath + "/upnextdialog/upnextdialog"], returnFirstDependency);
-        define("fullscreen-doubleclick", [componentsPath + "/fullscreen/fullscreen-dc"], returnFirstDependency);
-        define("fullscreenManager", [componentsPath + "/fullscreenManager", "events"], returnFirstDependency);
         define("subtitleAppearanceHelper", [componentsPath + "/subtitlesettings/subtitleappearancehelper"], returnFirstDependency);
         define("subtitleSettings", [componentsPath + "/subtitlesettings/subtitlesettings"], returnFirstDependency);
         define("displaySettings", [componentsPath + "/displaysettings/displaysettings"], returnFirstDependency);
@@ -850,8 +863,6 @@ var AppInfo = {};
         define("objectassign", [componentsPath + "/polyfills/objectassign"], returnFirstDependency);
         define("focusPreventScroll", [componentsPath + "/polyfills/focusPreventScroll"], returnFirstDependency);
         define("userdataButtons", [componentsPath + "/userdatabuttons/userdatabuttons"], returnFirstDependency);
-        define("emby-playstatebutton", [componentsPath + "/userdatabuttons/emby-playstatebutton"], returnFirstDependency);
-        define("emby-ratingbutton", [componentsPath + "/userdatabuttons/emby-ratingbutton"], returnFirstDependency);
         define("listView", [componentsPath + "/listview/listview"], returnFirstDependency);
         define("indicators", [componentsPath + "/indicators/indicators"], returnFirstDependency);
         define("viewSettings", [componentsPath + "/viewsettings/viewsettings"], returnFirstDependency);

src/scripts/wizardagreement.js

@@ -1,27 +0,0 @@
-define(["dom", "emby-button"], function (dom) {
-    "use strict";
-
-    function onSubmit(e) {
-        if (dom.parentWithClass(this, "page").querySelector(".chkAccept").checked) {
-            Dashboard.navigate("wizardfinish.html");
-        } else {
-            Dashboard.alert({
-                message: Globalize.translate("MessagePleaseAcceptTermsOfServiceBeforeContinuing"),
-                title: ""
-            });
-        }
-
-        e.preventDefault();
-        return false;
-    }
-
-    return function (view, params) {
-        view.querySelector(".wizardAgreementForm").addEventListener("submit", onSubmit);
-        view.addEventListener("viewshow", function () {
-            document.querySelector(".skinHeader").classList.add("noHomeButtonHeader");
-        });
-        view.addEventListener("viewhide", function () {
-            document.querySelector(".skinHeader").classList.remove("noHomeButtonHeader");
-        });
-    };
-});