Merge branch 'translations' of https://github.com/jellyfin/jellyfin-web into translations

.eslintrc.yml

@@ -1,3 +1,4 @@
 env:
+  es6: true
   browser: true
   amd: true

CONTRIBUTORS.md

@@ -21,6 +21,8 @@
  - [RazeLighter777](https://github.com/RazeLighter777)
  - [LogicalPhallacy](https://github.com/LogicalPhallacy)
  - [thornbill](https://github.com/thornbill)
+ - [redSpoutnik](https://github.com/redSpoutnik)
+ - [DrPandemic](https://github.com/drpandemic)
 
 # Emby Contributors
 

package.json

@@ -5,7 +5,16 @@
   "repository": "https://github.com/jellyfin/jellyfin-web",
   "license": "GPL-2",
   "devDependencies": {
+    "connect": "^3.6.6",
+    "css-loader": "^2.1.0",
+    "file-loader": "^3.0.1",
+    "serve-static": "^1.13.2",
+    "style-loader": "^0.23.1",
     "webpack": "^4.29.5",
     "webpack-cli": "^3.2.3"
+  },
+  "dependencies": {
+    "howler": "^2.1.1",
+    "jstree": "^3.3.7"
   }
 }

src/addplugin.html

@@ -1,4 +1,4 @@
-<div id="addPluginPage" data-role="page" class="page type-interior pluginConfigurationPage" data-backbutton="true" data-require="emby-select,emby-collapse,emby-button">
+<div id="addPluginPage" data-role="page" class="page type-interior pluginConfigurationPage" data-backbutton="true">
 
     <div>
         <div class="content-primary">
@@ -8,7 +8,7 @@
                 <div class="verticalSection">
                     <div class="sectionTitleContainer flex align-items-center">
                         <h1 class="sectionTitle pluginName"></h1>
-                        <a is="emby-linkbutton" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.readthedocs.io/en/latest/administrator-docs/plugins/">${Help}</a>
+                        <a is="emby-linkbutton" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.readthedocs.io/en/latest/server/plugins/">${Help}</a>
                     </div>
 
                     <p id="tagline" style="font-style: italic;"></p>

src/addserver.html

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

src/bower_components/alameda/alameda.js

@@ -239,6 +239,7 @@ var requirejs, require, define;
         }
 
         function delayedError(e) {
+            console.log(e.stack);
             return setTimeout(function() {
                 e.dynaId && trackedErrors[e.dynaId] || (trackedErrors[e.dynaId] = !0, req.onError(e))
             }), e
@@ -265,7 +266,7 @@ var requirejs, require, define;
             trackedErrors = obj(),
             urlFetched = obj(),
             bundlesMap = obj(),
-            asyncResolve = Promise.resolve();
+            asyncResolve = Promise.resolve(undefined);
         return load = "function" == typeof importScripts ? function(map) {
             var url = map.url;
             urlFetched[url] || (urlFetched[url] = !0, getDefer(map.id), importScripts(url), takeQueue(map.id))
@@ -415,4 +416,4 @@ var requirejs, require, define;
             baseUrl: subPath
         })), topReq([dataMain])))
     }
-}(this, "undefined" != typeof Promise ? Promise : void 0);
+}(this, "undefined" != typeof Promise ? Promise : void 0);

src/bower_components/apiclient/apiclientcore.js

@@ -303,6 +303,7 @@ define(["events", "appStorage"], function(events, appStorage) {
     }, ApiClient.prototype.logout = function() {
         stopBitrateDetection(this), this.closeWebSocket();
         var done = function() {
+            appStorage.removeItem("user-" + this._currentUser.Id + "-" + this._currentUser.ServerId)
             this.setAuthenticationInfo(null, null)
         }.bind(this);
         if (this.accessToken()) {

src/bower_components/fetch/fetch.js

@@ -0,0 +1,263 @@
+! function(self) {
+    "use strict";
+
+    function normalizeName(name) {
+        if ("string" != typeof name && (name = String(name)), /[^a-z0-9\-#$%&'*+.\^_`|~]/i.test(name)) throw new TypeError("Invalid character in header field name");
+        return name.toLowerCase()
+    }
+
+    function normalizeValue(value) {
+        return "string" != typeof value && (value = String(value)), value
+    }
+
+    function iteratorFor(items) {
+        var iterator = {
+            next: function() {
+                var value = items.shift();
+                return {
+                    done: void 0 === value,
+                    value: value
+                }
+            }
+        };
+        return support.iterable && (iterator[Symbol.iterator] = function() {
+            return iterator
+        }), iterator
+    }
+
+    function Headers(headers) {
+        this.map = {}, headers instanceof Headers ? headers.forEach(function(value, name) {
+            this.append(name, value)
+        }, this) : headers && Object.getOwnPropertyNames(headers).forEach(function(name) {
+            this.append(name, headers[name])
+        }, this)
+    }
+
+    function consumed(body) {
+        if (body.bodyUsed) return Promise.reject(new TypeError("Already read"));
+        body.bodyUsed = !0
+    }
+
+    function fileReaderReady(reader) {
+        return new Promise(function(resolve, reject) {
+            reader.onload = function() {
+                resolve(reader.result)
+            }, reader.onerror = function() {
+                reject(reader.error)
+            }
+        })
+    }
+
+    function readBlobAsArrayBuffer(blob) {
+        var reader = new FileReader,
+            promise = fileReaderReady(reader);
+        return reader.readAsArrayBuffer(blob), promise
+    }
+
+    function readBlobAsText(blob) {
+        var reader = new FileReader,
+            promise = fileReaderReady(reader);
+        return reader.readAsText(blob), promise
+    }
+
+    function readArrayBufferAsText(buf) {
+        for (var view = new Uint8Array(buf), chars = new Array(view.length), i = 0; i < view.length; i++) chars[i] = String.fromCharCode(view[i]);
+        return chars.join("")
+    }
+
+    function bufferClone(buf) {
+        if (buf.slice) return buf.slice(0);
+        var view = new Uint8Array(buf.byteLength);
+        return view.set(new Uint8Array(buf)), view.buffer
+    }
+
+    function Body() {
+        return this.bodyUsed = !1, this._initBody = function(body) {
+            if (this._bodyInit = body, body)
+                if ("string" == typeof body) this._bodyText = body;
+                else if (support.blob && Blob.prototype.isPrototypeOf(body)) this._bodyBlob = body;
+            else if (support.formData && FormData.prototype.isPrototypeOf(body)) this._bodyFormData = body;
+            else if (support.searchParams && URLSearchParams.prototype.isPrototypeOf(body)) this._bodyText = body.toString();
+            else if (support.arrayBuffer && support.blob && isDataView(body)) this._bodyArrayBuffer = bufferClone(body.buffer), this._bodyInit = new Blob([this._bodyArrayBuffer]);
+            else {
+                if (!support.arrayBuffer || !ArrayBuffer.prototype.isPrototypeOf(body) && !isArrayBufferView(body)) throw new Error("unsupported BodyInit type");
+                this._bodyArrayBuffer = bufferClone(body)
+            } else this._bodyText = "";
+            this.headers.get("content-type") || ("string" == typeof body ? this.headers.set("content-type", "text/plain;charset=UTF-8") : this._bodyBlob && this._bodyBlob.type ? this.headers.set("content-type", this._bodyBlob.type) : support.searchParams && URLSearchParams.prototype.isPrototypeOf(body) && this.headers.set("content-type", "application/x-www-form-urlencoded;charset=UTF-8"))
+        }, support.blob && (this.blob = function() {
+            var rejected = consumed(this);
+            if (rejected) return rejected;
+            if (this._bodyBlob) return Promise.resolve(this._bodyBlob);
+            if (this._bodyArrayBuffer) return Promise.resolve(new Blob([this._bodyArrayBuffer]));
+            if (this._bodyFormData) throw new Error("could not read FormData body as blob");
+            return Promise.resolve(new Blob([this._bodyText]))
+        }, this.arrayBuffer = function() {
+            return this._bodyArrayBuffer ? consumed(this) || Promise.resolve(this._bodyArrayBuffer) : this.blob().then(readBlobAsArrayBuffer)
+        }), this.text = function() {
+            var rejected = consumed(this);
+            if (rejected) return rejected;
+            if (this._bodyBlob) return readBlobAsText(this._bodyBlob);
+            if (this._bodyArrayBuffer) return Promise.resolve(readArrayBufferAsText(this._bodyArrayBuffer));
+            if (this._bodyFormData) throw new Error("could not read FormData body as text");
+            return Promise.resolve(this._bodyText)
+        }, support.formData && (this.formData = function() {
+            return this.text().then(decode)
+        }), this.json = function() {
+            return this.text().then(JSON.parse)
+        }, this
+    }
+
+    function normalizeMethod(method) {
+        var upcased = method.toUpperCase();
+        return methods.indexOf(upcased) > -1 ? upcased : method
+    }
+
+    function Request(input, options) {
+        options = options || {};
+        var body = options.body;
+        if ("string" == typeof input) this.url = input;
+        else {
+            if (input.bodyUsed) throw new TypeError("Already read");
+            this.url = input.url, this.credentials = input.credentials, options.headers || (this.headers = new Headers(input.headers)), this.method = input.method, this.mode = input.mode, body || null == input._bodyInit || (body = input._bodyInit, input.bodyUsed = !0)
+        }
+        if (this.credentials = options.credentials || this.credentials || "omit", !options.headers && this.headers || (this.headers = new Headers(options.headers)), this.method = normalizeMethod(options.method || this.method || "GET"), this.mode = options.mode || this.mode || null, this.referrer = null, ("GET" === this.method || "HEAD" === this.method) && body) throw new TypeError("Body not allowed for GET or HEAD requests");
+        this._initBody(body)
+    }
+
+    function decode(body) {
+        var form = new FormData;
+        return body.trim().split("&").forEach(function(bytes) {
+            if (bytes) {
+                var split = bytes.split("="),
+                    name = split.shift().replace(/\+/g, " "),
+                    value = split.join("=").replace(/\+/g, " ");
+                form.append(decodeURIComponent(name), decodeURIComponent(value))
+            }
+        }), form
+    }
+
+    function parseHeaders(rawHeaders) {
+        var headers = new Headers;
+        return rawHeaders.split("\r\n").forEach(function(line) {
+            var parts = line.split(":"),
+                key = parts.shift().trim();
+            if (key) {
+                var value = parts.join(":").trim();
+                headers.append(key, value)
+            }
+        }), headers
+    }
+
+    function Response(bodyInit, options) {
+        options || (options = {}), this.type = "default", this.status = "status" in options ? options.status : 200, this.ok = this.status >= 200 && this.status < 300, this.statusText = "statusText" in options ? options.statusText : "OK", this.headers = new Headers(options.headers), this.url = options.url || "", this._initBody(bodyInit)
+    }
+    if (!self.fetch) {
+        var support = {
+            searchParams: "URLSearchParams" in self,
+            iterable: "Symbol" in self && "iterator" in Symbol,
+            blob: "FileReader" in self && "Blob" in self && function() {
+                try {
+                    return new Blob, !0
+                } catch (e) {
+                    return !1
+                }
+            }(),
+            formData: "FormData" in self,
+            arrayBuffer: "ArrayBuffer" in self
+        };
+        if (support.arrayBuffer) var viewClasses = ["[object Int8Array]", "[object Uint8Array]", "[object Uint8ClampedArray]", "[object Int16Array]", "[object Uint16Array]", "[object Int32Array]", "[object Uint32Array]", "[object Float32Array]", "[object Float64Array]"],
+            isDataView = function(obj) {
+                return obj && DataView.prototype.isPrototypeOf(obj)
+            },
+            isArrayBufferView = ArrayBuffer.isView || function(obj) {
+                return obj && viewClasses.indexOf(Object.prototype.toString.call(obj)) > -1
+            };
+        Headers.prototype.append = function(name, value) {
+            name = normalizeName(name), value = normalizeValue(value);
+            var list = this.map[name];
+            list || (list = [], this.map[name] = list), list.push(value)
+        }, Headers.prototype.delete = function(name) {
+            delete this.map[normalizeName(name)]
+        }, Headers.prototype.get = function(name) {
+            var values = this.map[normalizeName(name)];
+            return values ? values[0] : null
+        }, Headers.prototype.getAll = function(name) {
+            return this.map[normalizeName(name)] || []
+        }, Headers.prototype.has = function(name) {
+            return this.map.hasOwnProperty(normalizeName(name))
+        }, Headers.prototype.set = function(name, value) {
+            this.map[normalizeName(name)] = [normalizeValue(value)]
+        }, Headers.prototype.forEach = function(callback, thisArg) {
+            Object.getOwnPropertyNames(this.map).forEach(function(name) {
+                this.map[name].forEach(function(value) {
+                    callback.call(thisArg, value, name, this)
+                }, this)
+            }, this)
+        }, Headers.prototype.keys = function() {
+            var items = [];
+            return this.forEach(function(value, name) {
+                items.push(name)
+            }), iteratorFor(items)
+        }, Headers.prototype.values = function() {
+            var items = [];
+            return this.forEach(function(value) {
+                items.push(value)
+            }), iteratorFor(items)
+        }, Headers.prototype.entries = function() {
+            var items = [];
+            return this.forEach(function(value, name) {
+                items.push([name, value])
+            }), iteratorFor(items)
+        }, support.iterable && (Headers.prototype[Symbol.iterator] = Headers.prototype.entries);
+        var methods = ["DELETE", "GET", "HEAD", "OPTIONS", "POST", "PUT"];
+        Request.prototype.clone = function() {
+            return new Request(this, {
+                body: this._bodyInit
+            })
+        }, Body.call(Request.prototype), Body.call(Response.prototype), Response.prototype.clone = function() {
+            return new Response(this._bodyInit, {
+                status: this.status,
+                statusText: this.statusText,
+                headers: new Headers(this.headers),
+                url: this.url
+            })
+        }, Response.error = function() {
+            var response = new Response(null, {
+                status: 0,
+                statusText: ""
+            });
+            return response.type = "error", response
+        };
+        var redirectStatuses = [301, 302, 303, 307, 308];
+        Response.redirect = function(url, status) {
+            if (-1 === redirectStatuses.indexOf(status)) throw new RangeError("Invalid status code");
+            return new Response(null, {
+                status: status,
+                headers: {
+                    location: url
+                }
+            })
+        }, self.Headers = Headers, self.Request = Request, self.Response = Response, self.fetch = function(input, init) {
+            return new Promise(function(resolve, reject) {
+                var request = new Request(input, init),
+                    xhr = new XMLHttpRequest;
+                xhr.onload = function() {
+                    var options = {
+                        status: xhr.status,
+                        statusText: xhr.statusText,
+                        headers: parseHeaders(xhr.getAllResponseHeaders() || "")
+                    };
+                    options.url = "responseURL" in xhr ? xhr.responseURL : options.headers.get("X-Request-URL");
+                    var body = "response" in xhr ? xhr.response : xhr.responseText;
+                    resolve(new Response(body, options))
+                }, xhr.onerror = function() {
+                    reject(new TypeError("Network request failed"))
+                }, xhr.ontimeout = function() {
+                    reject(new TypeError("Network request failed"))
+                }, xhr.open(request.method, request.url, !0), "include" === request.credentials && (xhr.withCredentials = !0), "responseType" in xhr && support.blob && (xhr.responseType = "blob"), request.headers.forEach(function(value, name) {
+                    xhr.setRequestHeader(name, value)
+                }), xhr.send(void 0 === request._bodyInit ? null : request._bodyInit)
+            })
+        }, self.fetch.polyfill = !0
+    }
+}("undefined" != typeof self ? self : this);

src/components/alert.js

@@ -1,6 +1,11 @@
 define(['browser', 'dialog', 'globalize'], function (browser, dialog, globalize) {
     'use strict';
 
+    function replaceAll(originalString, strReplace, strWith) {
+        var reg = new RegExp(strReplace, 'ig');
+        return originalString.replace(reg, strWith);
+    }
+
     return function (text, title) {
 
         var options;

src/components/appRouter.js

@@ -329,7 +329,6 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM
         events.on(appHost, 'resume', onAppResume);
 
         connectionManager.connect({
-
             enableAutoLogin: appSettings.enableAutoLogin()
 
         }).then(function (result) {
@@ -343,7 +342,7 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM
                 hashbang: options.hashbang !== false,
                 enableHistory: enableHistory()
             });
-        }).finally(function () {
+        }).catch().then(function() {
             loading.hide();
         });
     }

src/components/apphost.js

@@ -107,10 +107,10 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
         deviceName = browser.tizen ? "Samsung Smart TV" : browser.web0s ? "LG Smart TV" : browser.operaTv ? "Opera TV" : browser.xboxOne ? "Xbox One" : browser.ps4 ? "Sony PS4" : browser.chrome ? "Chrome" : browser.edge ? "Edge" : browser.firefox ? "Firefox" : browser.msie ? "Internet Explorer" : browser.opera ? "Opera" : "Web Browser";
 
         if (browser.ipad) {
-            deviceName += " Ipad";
+            deviceName += " iPad";
         } else {
             if (browser.iphone) {
-                deviceName += " Iphone";
+                deviceName += " iPhone";
             } else {
                 if (browser.android) {
                     deviceName += " Android";

src/components/cardbuilder/card.css

@@ -46,9 +46,9 @@ button {
     flex-wrap: wrap;
 }
 
-    .vertical-wrap.centered {
-        justify-content: center;
-    }
+.vertical-wrap.centered {
+    justify-content: center;
+}
 
 .cardScalable {
     position: relative;
@@ -226,10 +226,6 @@ button {
     box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
 }
 
-/*.card:focus .cardContent-shadow {
-    box-shadow: 0 .63em 1.26em rgba(0, 0, 0, 0.37);
-}*/
-
 .cardImageContainer {
     display: flex;
 }
@@ -319,6 +315,12 @@ button {
     padding-top: .24em;
 }
 
+.cardText > .textActionButton {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .innerCardFooter > .cardText {
     padding: .3em .5em;
 }
@@ -408,7 +410,7 @@ button {
 }
 
 .cardOverlayButton {
-    color: rgba(255, 255, 255, .76) !important;
+    color: rgba(255, 255, 255, .76);
     margin: 0;
     z-index: 1;
     padding: .75em;
@@ -451,10 +453,6 @@ button {
     transition: transform 200ms ease-out;
 }
 
-    .cardOverlayButton-centered:hover {
-        transform: scale(1.2, 1.2);
-    }
-
 .bannerCard {
     width: 100%;
 }
@@ -488,14 +486,12 @@ button {
 }
 
 @media (min-width: 25em) {
-
     .backdropCard {
         width: 50%;
     }
 }
 
 @media (min-width: 31.25em) {
-
     .smallBackdropCard {
         width: 33.333333333333333333333333333333%;
     }
@@ -518,7 +514,6 @@ button {
 }
 
 @media (min-width: 50em) {
-
     .bannerCard {
         width: 50%;
     }
@@ -533,15 +528,12 @@ button {
 }
 
 @media (min-width: 62.5em) {
-
-
     .smallBackdropCard {
         width: 20%;
     }
 }
 
 @media (min-width: 75em) {
-
     .backdropCard {
         width: 25%;
     }
@@ -561,7 +553,6 @@ button {
 
 
 @media (min-width: 87.5em) {
-
     .squareCard, .portraitCard {
         width: 14.285714285714285714285714285714%;
     }
@@ -572,7 +563,6 @@ button {
 }
 
 @media (min-width: 100em) {
-
     .smallBackdropCard {
         width: 12.5%;
     }
@@ -587,14 +577,12 @@ button {
 }
 
 @media (min-width: 120em) {
-
     .squareCard, .portraitCard {
         width: 11.111111111111111111111111111111%;
     }
 }
 
 @media (min-width: 131.25em) {
-
     .bannerCard {
         width: 25%;
     }
@@ -605,7 +593,6 @@ button {
 }
 
 @media (min-width: 156.25em) {
-
     .backdropCard {
         width: 16.666666666666666666666666666667%;
     }
@@ -690,14 +677,12 @@ button {
 }
 
 @media (min-width: 50em) {
-
     .overflowSquareCard, .overflowPortraitCard {
         width: 18.4vw;
     }
 }
 
 @media (min-width: 75em) {
-
     .overflowBackdropCard, .overflowSmallBackdropCard {
         width: 23.3vw;
     }
@@ -708,7 +693,6 @@ button {
 }
 
 @media (min-width: 87.5em) {
-
     .overflowSquareCard, .overflowPortraitCard {
         width: 13.3vw;
     }
@@ -767,7 +751,7 @@ button {
 }
 
 .cardOverlayContainer {
-    background: radial-gradient(farthest-corner at 50% 50%,rgba(30,30,30,.5) 50%,#2c2c2c 100%);
+    background: rgba(0,0,0,0.5);
     opacity: 0;
     transition: opacity .2s;
     position: absolute;
@@ -778,16 +762,15 @@ button {
     user-select: none;
 }
 
-.card-hoverable :hover .cardOverlayContainer {
+.card-hoverable:hover .cardOverlayContainer {
     opacity: 1;
 }
 
 .cardOverlayButton-hover {
     opacity: 0;
-    transition: opacity .2s;
+    transition: 0.2s;
     background: transparent;
-    color: #fff !important;
-    padding: .5em;
+    padding: 0.5em;
 }
 
 .cardOverlayButtonIcon-hover {
@@ -799,6 +782,7 @@ button {
 }
 
 .cardOverlayFab-primary {
+    background-color: rgba(0,0,0,0.7);
     font-size: 130%;
     padding: 0;
     width: 3em;
@@ -810,7 +794,7 @@ button {
     left: 50%;
 }
 
-    .cardOverlayFab-primary i {
-        border: .07em solid rgba(255,255,255,.9);
-        color: #fff;
-    }
+.cardOverlayFab-primary:hover {
+    transform: scale(1.4, 1.4);
+    transition: 0.2s;
+}

src/components/cardbuilder/cardBuilder.js

@@ -6,22 +6,16 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
         var enableFocusTransfrom = !browser.slow && !browser.edge;
 
         function getCardsHtml(items, options) {
-
             if (arguments.length === 1) {
-
                 options = arguments[0];
                 items = options.items;
             }
 
-            var html = buildCardsHtmlInternal(items, options);
-
-            return html;
+            return buildCardsHtmlInternal(items, options);
         }
 
         function getPostersPerRow(shape, screenWidth, isOrientationLandscape) {
-
             switch (shape) {
-
                 case 'portrait':
                     if (layoutManager.tv) {
                         return 100 / 16.66666667;
@@ -229,7 +223,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
         }
 
         function isResizable(windowWidth) {
-
             var screen = window.screen;
             if (screen) {
                 var screenWidth = screen.availWidth;
@@ -243,11 +236,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
         }
 
         function getImageWidth(shape, screenWidth, isOrientationLandscape) {
-
-            //console.log(screenWidth);
             var imagesPerRow = getPostersPerRow(shape, screenWidth, isOrientationLandscape);
-            //console.log(shape + '--' + imagesPerRow);
-
             var shapeWidth = screenWidth / imagesPerRow;
 
             return Math.round(shapeWidth);
@@ -1267,13 +1256,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
             var showTitle = options.showTitle === 'auto' ? true : (options.showTitle || item.Type === 'PhotoAlbum' || item.Type === 'Folder');
             var overlayText = options.overlayText;
 
-            if (forceName && !options.cardLayout) {
-
-                if (overlayText == null) {
-                    overlayText = true;
-                }
-            }
-
             var cardImageContainerClass = 'cardImageContainer';
             var coveredImage = options.coverImage || imgInfo.coverImage;
 
@@ -1369,13 +1351,12 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 outerCardFooter = getCardFooterText(item, apiClient, options, showTitle, forceName, overlayText, imgUrl, footerCssClass, progressHtml, logoUrl, true);
             }
 
-            if (outerCardFooter && !options.cardLayout /*&& options.allowBottomPadding !== false*/) {
+            if (outerCardFooter && !options.cardLayout) {
                 cardBoxClass += ' cardBox-bottompadded';
             }
 
             var overlayButtons = '';
             if (layoutManager.mobile) {
-
                 var overlayPlayButton = options.overlayPlayButton;
 
                 if (overlayPlayButton == null && !options.overlayMoreButton && !options.overlayInfoButton && !options.cardLayout) {
@@ -1393,7 +1374,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 }
 
                 if (options.overlayMoreButton) {
-
                     overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="md-icon cardOverlayButtonIcon">&#xE5D3;</i></button>';
                 }
             }
@@ -1534,25 +1514,17 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
             html += '<div class="cardOverlayContainer itemAction" data-action="' + action + '">';
 
-            var btnCssClass = 'cardOverlayButton cardOverlayButton-hover itemAction';
+            var btnCssClass = 'cardOverlayButton cardOverlayButton-hover itemAction paper-icon-button-light';
 
             if (playbackManager.canPlay(item)) {
-
-                html += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayFab-primary" data-action="resume"><i class="md-icon cardOverlayButtonIcon">&#xE037;</i></button>';
+                html += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayFab-primary" data-action="resume"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">&#xE037;</i></button>';
             }
 
             html += '<div class="cardOverlayButton-br">';
 
-            //if (itemHelper.canEdit({ Policy: { IsAdministrator: true } }, item)) {
-
-            //    //require(['emby-playstatebutton']);
-            //    html += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="edit"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">&#xE254;</i></button>';
-            //}
-
             var userData = item.UserData || {};
 
             if (itemHelper.canMarkPlayed(item)) {
-
                 require(['emby-playstatebutton']);
                 html += '<button is="emby-playstatebutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">&#xE5CA;</i></button>';
             }

src/components/cardbuilder/roundcard.css

@@ -1,7 +0,0 @@
-.card-round:focus > .cardBox-focustransform {
-    transform: scale(1.26, 1.26);
-}
-
-.cardImageContainer-round, .cardImage-round {
-    border-radius: 1000px;
-}

src/components/directorybrowser/directorybrowser.js

@@ -90,20 +90,11 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
             html += '<div class="infoBanner" style="margin-bottom:1.5em;">';
             html += instruction;
             html += Globalize.translate("MessageDirectoryPickerInstruction").replace("{0}", "<b>\\\\server</b>").replace("{1}", "<b>\\\\192.168.1.101</b>");
-            if ("synology" === (systemInfo.PackageName || "").toLowerCase()) {
-                html += "<br/>";
-                html += "<br/>";
-                html += '<a is="emby-linkbutton" class="button-link" href="https://web.archive.org/web/20181216120305/https://github.com/MediaBrowser/Wiki/wiki/Synology-:-Setting-Up-Your-Media-Library-Share" target="_blank">';
-                html += Globalize.translate("LearnHowToCreateSynologyShares");
-                html += "</a>";
-            } else if ("bsd" === systemInfo.OperatingSystem.toLowerCase()) {
+            if ("bsd" === systemInfo.OperatingSystem.toLowerCase()) {
                 html += "<br/>";
                 html += "<br/>";
                 html += Globalize.translate("MessageDirectoryPickerBSDInstruction");
                 html += "<br/>";
-                html += '<a is="emby-linkbutton" class="button-link" href="http://doc.freenas.org/9.3/freenas_jails.html#add-storage" target="_blank">';
-                html += Globalize.translate("ButtonMoreInformation");
-                html += "</a>";
             } else if ("linux" === systemInfo.OperatingSystem.toLowerCase()) {
                 html += "<br/>";
                 html += "<br/>";

src/components/displaysettings/displaysettings.js

@@ -2,25 +2,19 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
     "use strict";
 
     function fillThemes(select, isDashboard) {
-
         select.innerHTML = skinManager.getThemes().map(function (t) {
-
             var value = t.id;
-
             if (t.isDefault && !isDashboard) {
                 value = '';
-            }
-            else if (t.isDefaultServerDashboard && isDashboard) {
+            } else if (t.isDefaultServerDashboard && isDashboard) {
                 value = '';
             }
 
             return '<option value="' + value + '">' + t.name + '</option>';
-
         }).join('');
     }
 
     function loadScreensavers(context, userSettings) {
-
         var selectScreensaver = context.querySelector('.selectScreensaver');
         var options = pluginManager.ofType('screensaver').map(function (plugin) {
             return {

src/components/emby-button/emby-button.css

@@ -27,7 +27,6 @@
     /* Disable webkit tap highlighting */
     -webkit-tap-highlight-color: rgba(0,0,0,0);
     text-decoration: none;
-
     /* Not crazy about this but it normalizes heights between anchors and buttons */
     line-height: 1.35;
 }
@@ -40,9 +39,9 @@
     background: transparent;
 }
 
-    .button-flat:hover {
-        opacity: .5;
-    }
+.button-flat:hover {
+    opacity: .5;
+}
 
 .button-link {
     background: transparent;
@@ -65,10 +64,10 @@
     transform-origin: center center;
 }
 
-    .emby-button-focusscale:focus {
-        transform: scale(1.16);
-        z-index: 1;
-    }
+.emby-button-focusscale:focus {
+    transform: scale(1.16);
+    z-index: 1;
+}
 
 .emby-button > i {
     /* For non-fab buttons that have icons */
@@ -170,10 +169,10 @@
     transform-origin: center center;
 }
 
-    .icon-button-focusscale:focus {
-        transform: scale(1.3);
-        z-index: 1;
-    }
+.icon-button-focusscale:focus {
+    transform: scale(1.3);
+    z-index: 1;
+}
 
 .btnFilterWithBubble {
     position: relative;

src/components/emby-checkbox/emby-checkbox.css

@@ -63,29 +63,6 @@
     justify-content: center;
 }
 
-/* Commenting this out - set by theme */
-/*.emby-checkbox:checked + span + span + .checkboxOutline {
-    border-color: #52B54B;
-}*/
-
-.emby-checkbox-focushelper {
-    position: absolute;
-    top: -0.915em;
-    left: -0.915em;
-    width: 3.66em;
-    height: 3.66em;
-    display: inline-block;
-    box-sizing: border-box;
-    margin: 3px 0 0 0;
-    border-radius: 50%;
-    background-color: transparent;
-}
-
-/* Commenting this out - set by theme */
-/*.emby-checkbox:focus + span + .emby-checkbox-focushelper {
-    background-color: rgba(82, 181, 75, 0.26);
-}*/
-
 .checkboxIcon {
     font-size: 1.6em;
     color: #fff;
@@ -95,18 +72,18 @@
     display: none;
 }
 
-.emby-checkbox:checked + span + span + .checkboxOutline > .checkboxIcon-checked {
+.emby-checkbox:checked + span + .checkboxOutline > .checkboxIcon-checked {
     /* background-color set by theme */
     /*background-color: #52B54B;*/
     display: flex !important;
 }
 
-.emby-checkbox:checked + span + span + .checkboxOutline > .checkboxIcon-unchecked {
+.emby-checkbox:checked + span + .checkboxOutline > .checkboxIcon-unchecked {
     /* background-color set by theme */
     display: none !important;
 }
 
-.emby-checkbox:checked[disabled] + span + span + .checkboxOutline > .checkboxIcon {
+.emby-checkbox:checked[disabled] + span + .checkboxOutline > .checkboxIcon {
     background-color: rgba(0, 0, 0, 0.26);
 }
 

src/components/emby-checkbox/emby-checkbox.js

@@ -61,7 +61,7 @@ define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (b
         var uncheckedIcon = this.getAttribute('data-uncheckedicon') || '';
         var checkHtml = '<i class="md-icon checkboxIcon checkboxIcon-checked">' + checkedIcon + '</i>';
         var uncheckedHtml = '<i class="md-icon checkboxIcon checkboxIcon-unchecked">' + uncheckedIcon + '</i>';
-        labelElement.insertAdjacentHTML('beforeend', '<span class="emby-checkbox-focushelper"></span><span class="' + outlineClass + '">' + checkHtml + uncheckedHtml + '</span>');
+        labelElement.insertAdjacentHTML('beforeend', '<span class="' + outlineClass + '">' + checkHtml + uncheckedHtml + '</span>');
 
         labelTextElement.classList.add('checkboxLabel');
 

src/components/emby-slider/emby-slider.css

@@ -17,7 +17,6 @@ _:-ms-input-placeholder {
     -ms-user-select: none;
     user-select: none;
     outline: 0;
-    padding: 1em 0;
     color: #00a4dc;
     -webkit-align-self: center;
     -ms-flex-item-align: center;
@@ -158,8 +157,6 @@ _:-ms-input-placeholder {
 }
 
 .mdl-slider-background-flex-container {
-    padding-left: 10px;
-    padding-right: 10px;
     width: 100%;
     box-sizing: border-box;
     margin-top: -.05em;

src/components/emby-slider/emby-slider.js

@@ -141,34 +141,31 @@ define(['browser', 'dom', 'layoutManager', 'css!./emby-slider', 'registerElement
             passive: true
         });
 
-        // In firefox this feature disrupts the ability to move the slider
-        if (!browser.firefox) {
-            dom.addEventListener(this, (window.PointerEvent ? 'pointermove' : 'mousemove'), function (e) {
+        dom.addEventListener(this, (window.PointerEvent ? 'pointermove' : 'mousemove'), function (e) {
 
-                if (!this.dragging) {
-                    var rect = this.getBoundingClientRect();
-                    var clientX = e.clientX;
-                    var bubbleValue = (clientX - rect.left) / rect.width;
-                    bubbleValue *= 100;
-                    updateBubble(this, bubbleValue, sliderBubble);
+            if (!this.dragging) {
+                var rect = this.getBoundingClientRect();
+                var clientX = e.clientX;
+                var bubbleValue = (clientX - rect.left) / rect.width;
+                bubbleValue *= 100;
+                updateBubble(this, bubbleValue, sliderBubble);
 
-                    if (hasHideClass) {
-                        sliderBubble.classList.remove('hide');
-                        hasHideClass = false;
-                    }
+                if (hasHideClass) {
+                    sliderBubble.classList.remove('hide');
+                    hasHideClass = false;
                 }
+            }
 
-            }, {
-                passive: true
-            });
+        }, {
+            passive: true
+        });
 
-            dom.addEventListener(this, (window.PointerEvent ? 'pointerleave' : 'mouseleave'), function () {
-                sliderBubble.classList.add('hide');
-                hasHideClass = true;
-            }, {
-                passive: true
-            });
-        }
+        dom.addEventListener(this, (window.PointerEvent ? 'pointerleave' : 'mouseleave'), function () {
+            sliderBubble.classList.add('hide');
+            hasHideClass = true;
+        }, {
+            passive: true
+        });
 
         if (!supportsNativeProgressStyle) {
 
@@ -269,4 +266,4 @@ define(['browser', 'dom', 'layoutManager', 'css!./emby-slider', 'registerElement
         prototype: EmbySliderPrototype,
         extends: 'input'
     });
-});
+});

src/components/favoriteitems.js

@@ -111,7 +111,7 @@ define(["loading", "libraryBrowser", "cardBuilder", "dom", "apphost", "imageLoad
             var html = "";
             if (result.Items.length) {
                 if (html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">', !layoutManager.tv && options.Limit && result.Items.length >= options.Limit) {
-                    html += '<a is="emby-linkbutton" href="' + ("list/list.html?serverId=" + ApiClient.serverId() + "&type=" + section.types + "&IsFavorite=true") + '" class="more button-flat button-flat-mini sectionTitleTextButton">', html += '<h2 class="sectionTitle sectionTitle-cards">', html += globalize.translate(section.name), html += "</h2>", html += '<i class="md-icon">&#xE5CC;</i>', html += "</a>"
+                    html += '<a is="emby-linkbutton" href="' + ("list.html?serverId=" + ApiClient.serverId() + "&type=" + section.types + "&IsFavorite=true") + '" class="more button-flat button-flat-mini sectionTitleTextButton">', html += '<h2 class="sectionTitle sectionTitle-cards">', html += globalize.translate(section.name), html += "</h2>", html += '<i class="md-icon">&#xE5CC;</i>', html += "</a>"
                 } else html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate(section.name) + "</h2>";
                 if (html += "</div>", enableScrollX()) {
                     var scrollXClass = "scrollX hiddenScrollX";
@@ -132,8 +132,7 @@ define(["loading", "libraryBrowser", "cardBuilder", "dom", "apphost", "imageLoad
                     overlayMoreButton: section.overlayMoreButton && !cardLayout,
                     action: section.action,
                     allowBottomPadding: !enableScrollX(),
-                    cardLayout: cardLayout,
-                    vibrant: supportsImageAnalysis && cardLayout
+                    cardLayout: cardLayout
                 }), html += "</div>"
             }
             elem.innerHTML = html, imageLoader.lazyChildren(elem)

src/components/fullscreenManager.js

@@ -79,10 +79,10 @@ define(['events', 'dom', 'apphost', 'browser'], function (events, dom, appHost,
         passive: true
     });
 
+    function isTargetValid(target) {
+        return !dom.parentWithTag(target, ['BUTTON', 'INPUT', 'TEXTAREA']);
+    }
     if (appHost.supports("fullscreenchange") && (browser.edgeUwp || -1 !== navigator.userAgent.toLowerCase().indexOf("electron"))) {
-        function isTargetValid(target) {
-            return !dom.parentWithTag(target, ['BUTTON', 'INPUT', 'TEXTAREA']);
-        }
 
         dom.addEventListener(window, 'dblclick', function (e) {
 

src/components/globalize.js

@@ -127,12 +127,17 @@ define(['connectionManager', 'userSettings', 'events'], function (connectionMana
 
     function loadStrings(options) {
         var locale = getCurrentLocale();
+        var promises = [];
+        var optionsName;
         if (typeof options === 'string') {
-            return ensureTranslation(allTranslations[options], locale);
+            optionsName = options;
         } else {
+            optionsName = options.name;
             register(options);
-            return ensureTranslation(allTranslations[options.name], locale);
         }
+        promises.push(ensureTranslation(allTranslations[optionsName], locale));
+        promises.push(ensureTranslation(allTranslations[optionsName], fallbackCulture));
+        return Promise.all(promises);
     }
 
     var cacheParam = new Date().getTime();

src/components/homescreensettings/homescreensettings.template.html

@@ -1,10 +1,6 @@
 <form style="margin:0 auto;">
-
     <div class="verticalSection verticalSection-extrabottompadding">
-
-        <h2 class="sectionTitle">
-            ${HeaderHomeScreen}
-        </h2>
+        <h2 class="sectionTitle">${HeaderHome}</h2>
 
         <div class="selectContainer hide selectTVHomeScreenContainer">
             <select is="emby-select" class="selectTVHomeScreen" label="${LabelTVHomeScreen}">

src/components/homesections/homesections.js

@@ -183,28 +183,19 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function getLibraryButtonsHtml(items) {
-
         var html = "";
 
         html += '<div class="verticalSection verticalSection-extrabottompadding">';
         html += '<div class="sectionTitleContainer sectionTitleContainer-cards">';
         html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderMyMedia') + '</h2>';
-
-        if (!layoutManager.tv) {
-            html += '<button type="button" is="paper-icon-button-light" class="sectionTitleIconButton btnHomeScreenSettings"><i class="md-icon">&#xE5D3;</i></button>';
-        }
-
         html += '</div>';
 
         html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x" data-multiselect="false">';
 
         // "My Library" backgrounds
         for (var i = 0, length = items.length; i < length; i++) {
-
             var item = items[i];
-
             var icon;
-
             switch (item.CollectionType) {
                 case "movies":
                     icon = "local_movies";
@@ -258,7 +249,6 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         var html = getLibraryButtonsHtml(userViews);
 
         elem.innerHTML = html;
-        bindHomeScreenSettingsIcon(elem, apiClient, user.Id, userSettings);
         imageLoader.lazyChildren(elem);
     }
 
@@ -410,42 +400,11 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function getRequirePromise(deps) {
-
         return new Promise(function (resolve, reject) {
-
             require(deps, resolve);
         });
     }
 
-    function showHomeScreenSettings(elem, options) {
-        return getRequirePromise(['homescreenSettingsDialog']).then(function (homescreenSettingsDialog) {
-
-            return homescreenSettingsDialog.show(options).then(function () {
-
-                dom.parentWithClass(elem, 'homeSectionsContainer').dispatchEvent(new CustomEvent('settingschange', {
-                    cancelable: false
-                }));
-            });
-        });
-    }
-
-    function bindHomeScreenSettingsIcon(elem, apiClient, userId, userSettings) {
-
-        var btnHomeScreenSettings = elem.querySelector('.btnHomeScreenSettings');
-        if (!btnHomeScreenSettings) {
-            return;
-        }
-
-        btnHomeScreenSettings.addEventListener('click', function () {
-            showHomeScreenSettings(elem, {
-                serverId: apiClient.serverId(),
-                userId: userId,
-                userSettings: userSettings
-
-            });
-        });
-    }
-
     function loadLibraryTiles(elem, apiClient, user, userSettings, shape, userViews, allSections) {
 
         elem.classList.remove('verticalSection');
@@ -460,11 +419,6 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
             html += '<div class="sectionTitleContainer sectionTitleContainer-cards">';
             html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderMyMedia') + '</h2>';
-
-            if (!layoutManager.tv) {
-                html += '<button type="button" is="paper-icon-button-light" class="sectionTitleIconButton btnHomeScreenSettings"><i class="md-icon">&#xE5D3;</i></button>';
-            }
-
             html += '</div>';
 
             if (scrollX) {
@@ -492,7 +446,6 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         }
 
         elem.innerHTML = html;
-        bindHomeScreenSettingsIcon(elem, apiClient, user.Id, userSettings);
         imageLoader.lazyChildren(elem);
     }
 

src/components/htmlvideoplayer/plugin.js

@@ -188,6 +188,9 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
         var currentAssRenderer;
         var customTrackIndex = -1;
 
+        var showTrackOffset = false;
+        var currentTrackOffset;
+
         var videoSubtitlesElem;
         var currentTrackEvents;
 
@@ -543,6 +546,81 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
             setCurrentTrackElement(index);
         };
 
+        self.enableShowingSubtitleOffset = function() {
+            showTrackOffset = true;
+        }
+
+        self.disableShowingSubtitleOffset = function() {
+            showTrackOffset = false;
+        }
+
+        self.isShowingSubtitleOffsetEnabled = function() {
+            return showTrackOffset;
+        }
+
+        self.setSubtitleOffset = function(offset) {
+
+            var offsetValue = parseFloat(offset);
+            var videoElement = self._mediaElement;
+            var mediaStreamTextTracks = getMediaStreamTextTracks(self._currentPlayOptions.mediaSource);
+
+            Array.from(videoElement.textTracks)
+            .filter(function(trackElement) {
+                if (customTrackIndex === -1 ) {
+                    // get showing .vtt textTacks
+                    return trackElement.mode === 'showing';
+                } else {
+                    // get current .ass textTrack
+                    return ("textTrack" + customTrackIndex) === trackElement.id;
+                }
+            })
+            .forEach(function(trackElement) {
+
+                var track = mediaStreamTextTracks.filter(function(stream) {
+                    return ("textTrack" + stream.Index) === trackElement.id;
+                })[0];
+
+                if(track) {
+                    offsetValue = updateCurrentTrackOffset(offsetValue);
+                    var format = (track.Codec || '').toLowerCase();
+                    if (format !== 'ass' && format !== 'ssa') {
+                        setVttSubtitleOffset(trackElement, offsetValue);
+                    }
+                } else {
+                    console.log("No available track, cannot apply offset : " + offsetValue);
+                }
+
+            });
+        };
+
+        function updateCurrentTrackOffset(offsetValue) {
+
+            var relativeOffset = offsetValue;
+            var newTrackOffset = offsetValue;
+            if(currentTrackOffset){
+                relativeOffset -= currentTrackOffset;
+            }
+            currentTrackOffset = newTrackOffset;
+            // relative to currentTrackOffset
+            return relativeOffset;
+        }
+
+        function setVttSubtitleOffset(currentTrack, offsetValue) {
+
+            if(currentTrack.cues) {
+                Array.from(currentTrack.cues)
+                .forEach(function(cue) {
+                    cue.startTime -= offsetValue;
+                    cue.endTime -= offsetValue;
+                });
+            }
+
+        }
+
+        self.getSubtitleOffset = function() {
+            return currentTrackOffset;
+        }
+
         function isAudioStreamSupported(stream, deviceProfile) {
 
             var codec = (stream.Codec || '').toLowerCase();
@@ -1167,6 +1245,11 @@ 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 {

src/components/images/imageLoader.js

@@ -30,9 +30,7 @@ define(['lazyLoader', 'imageFetcher', 'layoutManager', 'browser', 'appSettings',
     function fillImageElement(elem, source, enableEffects) {
         imageFetcher.loadImage(elem, source).then(function () {
 
-            var fillingVibrant = false;//fillVibrant(elem, source);
-
-            if (enableFade && enableEffects !== false && !fillingVibrant) {
+            if (enableFade && enableEffects !== false) {
                 fadeIn(elem);
             }
 
@@ -40,131 +38,6 @@ define(['lazyLoader', 'imageFetcher', 'layoutManager', 'browser', 'appSettings',
         });
     }
 
-    function fillVibrant(img, url, canvas, canvasContext) {
-
-        var vibrantElement = img.getAttribute('data-vibrant');
-        if (!vibrantElement) {
-            return false;
-        }
-
-        if (window.Vibrant) {
-            fillVibrantOnLoaded(img, url, vibrantElement, canvas, canvasContext);
-            return true;
-        }
-
-        require(['vibrant'], function () {
-            fillVibrantOnLoaded(img, url, vibrantElement, canvas, canvasContext);
-        });
-        return true;
-    }
-
-    function fillVibrantOnLoaded(img, url, vibrantElement) {
-
-        vibrantElement = document.getElementById(vibrantElement);
-        if (!vibrantElement) {
-            return;
-        }
-
-        requestIdleCallback(function () {
-
-            //var now = new Date().getTime();
-            getVibrantInfoFromElement(img, url).then(function (vibrantInfo) {
-
-                var swatch = vibrantInfo.split('|');
-                //console.log('vibrant took ' + (new Date().getTime() - now) + 'ms');
-                if (swatch.length) {
-
-                    var index = 0;
-                    var style = vibrantElement.style;
-                    style.backgroundColor = swatch[index];
-                    style.color = swatch[index + 1];
-
-                    var classList = vibrantElement.classList;
-
-                    if (classList.contains('cardFooter')) {
-                        classList.add('cardFooter-vibrant');
-                    } else {
-                        classList.add('vibrant');
-                    }
-                }
-            });
-        });
-        /*
-         * Results into:
-         * Vibrant #7a4426
-         * Muted #7b9eae
-         * DarkVibrant #348945
-         * DarkMuted #141414
-         * LightVibrant #f3ccb4
-         */
-    }
-
-    function getVibrantInfoFromElement(elem, url) {
-
-        return new Promise(function (resolve, reject) {
-
-            require(['vibrant'], function () {
-
-                if (elem.tagName === 'IMG') {
-                    resolve(getVibrantInfo(elem, url));
-                    return;
-                }
-
-                var img = new Image();
-                img.onload = function () {
-                    resolve(getVibrantInfo(img, url));
-                };
-                img.src = url;
-            });
-        });
-    }
-
-    function getSettingsKey(url) {
-
-        var parts = url.split('://');
-        url = parts[parts.length - 1];
-
-        url = url.substring(url.indexOf('/') + 1);
-
-        url = url.split('?')[0];
-
-        var cacheKey = 'vibrant31';
-        //cacheKey = 'vibrant' + new Date().getTime();
-        return cacheKey + url;
-    }
-
-    function getCachedVibrantInfo(url) {
-
-        return appSettings.get(getSettingsKey(url));
-    }
-
-    function getVibrantInfo(img, url) {
-
-        var value = getCachedVibrantInfo(url);
-        if (value) {
-            return value;
-        }
-
-        var vibrant = new Vibrant(img);
-        var swatches = vibrant.swatches();
-
-        value = '';
-        var swatch = swatches.DarkVibrant;
-        value += getSwatchString(swatch);
-
-        appSettings.set(getSettingsKey(url), value);
-
-        return value;
-    }
-
-    function getSwatchString(swatch) {
-
-        if (swatch) {
-            return swatch.getHex() + '|' + swatch.getBodyTextColor() + '|' + swatch.getTitleTextColor();
-        }
-        return '||';
-    }
-
     function fadeIn(elem) {
 
         var cssClass = 'lazy-image-fadein';
@@ -248,8 +121,6 @@ define(['lazyLoader', 'imageFetcher', 'layoutManager', 'browser', 'appSettings',
     self.lazyImage = fillImage;
     self.lazyChildren = lazyChildren;
     self.getPrimaryImageAspectRatio = getPrimaryImageAspectRatio;
-    self.getCachedVibrantInfo = getCachedVibrantInfo;
-    self.getVibrantInfoFromElement = getVibrantInfoFromElement;
 
     return self;
 });

src/components/indicators/indicators.js

@@ -2,7 +2,6 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
     'use strict';
 
     function enableProgressIndicator(item) {
-
         if (item.MediaType === 'Video') {
             if (item.Type !== 'TvChannel') {
                 return true;
@@ -17,9 +16,7 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
     }
 
     function getProgressHtml(pct, options) {
-
         var containerClass = 'itemProgressBar';
-
         if (options) {
             if (options.containerClass) {
                 containerClass += ' ' + options.containerClass;
@@ -30,9 +27,7 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
     }
 
     function getAutoTimeProgressHtml(pct, options, isRecording, start, end) {
-
         var containerClass = 'itemProgressBar';
-
         if (options) {
             if (options.containerClass) {
                 containerClass += ' ' + options.containerClass;
@@ -40,7 +35,6 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
         }
 
         var foregroundClass = 'itemProgressBarForeground';
-
         if (isRecording) {
             foregroundClass += ' itemProgressBarForeground-recording';
         }
@@ -49,39 +43,26 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
     }
 
     function getProgressBarHtml(item, options) {
-
         var pct;
-
         if (enableProgressIndicator(item) && item.Type !== "Recording") {
-
             var userData = options ? (options.userData || item.UserData) : item.UserData;
             if (userData) {
                 pct = userData.PlayedPercentage;
-
                 if (pct && pct < 100) {
-
                     return getProgressHtml(pct, options);
                 }
             }
         }
 
         if ((item.Type === 'Program' || item.Type === 'Timer' || item.Type === 'Recording') && item.StartDate && item.EndDate) {
-
             var startDate = 0;
             var endDate = 1;
 
             try {
-
                 startDate = datetime.parseISO8601Date(item.StartDate).getTime();
-
-            } catch (err) {
-            }
-
-            try {
-
                 endDate = datetime.parseISO8601Date(item.EndDate).getTime();
-
             } catch (err) {
+                console.log(err);
             }
 
             var now = new Date().getTime();
@@ -89,9 +70,7 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
             pct = 100 * ((now - startDate) / total);
 
             if (pct > 0 && pct < 100) {
-
                 var isRecording = item.Type === 'Timer' || item.Type === 'Recording' || item.TimerId;
-
                 return getAutoTimeProgressHtml(pct, options, isRecording, startDate, endDate);
             }
         }
@@ -100,16 +79,12 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
     }
 
     function enablePlayedIndicator(item) {
-
         return itemHelper.canMarkPlayed(item);
     }
 
     function getPlayedIndicator(item) {
-
         if (enablePlayedIndicator(item)) {
-
             var userData = item.UserData || {};
-
             if (userData.UnplayedItemCount) {
                 return '<div class="countIndicator indicator">' + userData.UnplayedItemCount + '</div>';
             }
@@ -123,14 +98,11 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
     }
 
     function getCountIndicatorHtml(count) {
-
         return '<div class="countIndicator indicator">' + count + '</div>';
     }
 
     function getChildCountIndicatorHtml(item, options) {
-
         var minCount = 0;
-
         if (options) {
             minCount = options.minCount || minCount;
         }
@@ -148,21 +120,15 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
 
         if (item.Type === 'SeriesTimer') {
             return '<i class="md-icon timerIndicator indicatorIcon">&#xE062;</i>';
-        }
-        else if (item.TimerId || item.SeriesTimerId) {
-
+        } else if (item.TimerId || item.SeriesTimerId) {
             status = item.Status || 'Cancelled';
-        }
-        else if (item.Type === 'Timer') {
-
+        } else if (item.Type === 'Timer') {
             status = item.Status;
-        }
-        else {
+        } else {
             return '';
         }
 
         if (item.SeriesTimerId) {
-
             if (status !== 'Cancelled') {
                 return '<i class="md-icon timerIndicator indicatorIcon">&#xE062;</i>';
             }
@@ -174,7 +140,6 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
     }
 
     function getSyncIndicator(item) {
-
         if (item.SyncPercent === 100) {
             return '<div class="syncIndicator indicator fullSyncIndicator"><i class="md-icon indicatorIcon">&#xE2C4;</i></div>';
         } else if (item.SyncPercent != null) {
@@ -185,41 +150,31 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
     }
 
     function getTypeIndicator(item) {
-
         if (item.Type === 'Video') {
-
             return '<div class="indicator videoIndicator"><i class="md-icon indicatorIcon">&#xE04B;</i></div>';
         }
         if (item.Type === 'Folder' || item.Type === 'PhotoAlbum') {
-
             return '<div class="indicator videoIndicator"><i class="md-icon indicatorIcon">&#xE2C7;</i></div>';
         }
         if (item.Type === 'Photo') {
-
             return '<div class="indicator videoIndicator"><i class="md-icon indicatorIcon">&#xE410;</i></div>';
-            //return '<div class="indicator videoIndicator"><i class="md-icon indicatorIcon">&#xE412;</i></div>';
         }
 
         return '';
     }
 
     function getMissingIndicator(item) {
-
         if (item.Type === 'Episode' && item.LocationType === 'Virtual') {
-
             if (item.PremiereDate) {
                 try {
-
                     var premiereDate = datetime.parseISO8601Date(item.PremiereDate).getTime();
-
                     if (premiereDate > new Date().getTime()) {
                         return '<div class="unairedIndicator">Unaired</div>';
                     }
-
                 } catch (err) {
+                    console.log(err);
                 }
             }
-
             return '<div class="missingIndicator">Missing</div>';
         }
 
@@ -229,7 +184,6 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
     var ProgressBarPrototype = Object.create(HTMLDivElement.prototype);
 
     function onAutoTimeProgress() {
-
         var start = parseInt(this.getAttribute('data-starttime'));
         var end = parseInt(this.getAttribute('data-endtime'));
 
@@ -245,7 +199,6 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
     }
 
     ProgressBarPrototype.attachedCallback = function () {
-
         if (this.timeInterval) {
             clearInterval(this.timeInterval);
         }
@@ -256,7 +209,6 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
     };
 
     ProgressBarPrototype.detachedCallback = function () {
-
         if (this.timeInterval) {
             clearInterval(this.timeInterval);
             this.timeInterval = null;

src/components/itemhelper.js

@@ -16,16 +16,13 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
         var name = ((item.Type === 'Program' || item.Type === 'Recording') && (item.IsSeries || item.EpisodeTitle) ? item.EpisodeTitle : item.Name) || '';
 
         if (item.Type === "TvChannel") {
-
             if (item.ChannelNumber) {
                 return item.ChannelNumber + ' ' + name;
             }
             return name;
         }
-        if (/*options.isInlineSpecial &&*/ item.Type === "Episode" && item.ParentIndexNumber === 0) {
-
+        if (item.Type === "Episode" && item.ParentIndexNumber === 0) {
             name = globalize.translate('ValueSpecialEpisodeName', name);
-
         } else if ((item.Type === "Episode" || item.Type === 'Program') && item.IndexNumber != null && item.ParentIndexNumber != null && options.includeIndexNumber !== false) {
 
             var displayIndexNumber = item.IndexNumber;
@@ -104,7 +101,7 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
 
         var itemType = item.Type;
 
-        if (itemType === "UserRootFolder" || /*itemType == "CollectionFolder" ||*/ itemType === "UserView") {
+        if (itemType === "UserRootFolder" || itemType === "UserView") {
             return false;
         }
 

src/components/libraryoptionseditor/libraryoptionseditor.js

@@ -3,146 +3,258 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
 
     function populateLanguages(parent) {
         return ApiClient.getCultures().then(function(languages) {
-            populateLanguagesIntoSelect(parent.querySelector("#selectLanguage"), languages), populateLanguagesIntoList(parent.querySelector(".subtitleDownloadLanguages"), languages)
-        })
+            populateLanguagesIntoSelect(parent.querySelector("#selectLanguage"), languages);
+            populateLanguagesIntoList(parent.querySelector(".subtitleDownloadLanguages"), languages);
+        });
     }
 
     function populateLanguagesIntoSelect(select, languages) {
         var html = "";
         html += "<option value=''></option>";
-        for (var i = 0, length = languages.length; i < length; i++) {
+        for (var i = 0; i < languages.length; i++) {
             var culture = languages[i];
-            html += "<option value='" + culture.TwoLetterISOLanguageName + "'>" + culture.DisplayName + "</option>"
+            html += "<option value='" + culture.TwoLetterISOLanguageName + "'>" + culture.DisplayName + "</option>";
         }
-        select.innerHTML = html
+        select.innerHTML = html;
     }
 
     function populateLanguagesIntoList(element, languages) {
-        for (var html = "", i = 0, length = languages.length; i < length; i++) {
+        var html = "";
+        for (var i = 0; i < languages.length; i++) {
             var culture = languages[i];
-            html += '<label><input type="checkbox" is="emby-checkbox" class="chkSubtitleLanguage" data-lang="' + culture.ThreeLetterISOLanguageName.toLowerCase() + '" /><span>' + culture.DisplayName + "</span></label>"
+            html += '<label><input type="checkbox" is="emby-checkbox" class="chkSubtitleLanguage" data-lang="' + culture.ThreeLetterISOLanguageName.toLowerCase() + '" /><span>' + culture.DisplayName + "</span></label>";
         }
-        element.innerHTML = html
+        element.innerHTML = html;
     }
 
     function populateCountries(select) {
         return ApiClient.getCountries().then(function(allCountries) {
             var html = "";
             html += "<option value=''></option>";
-            for (var i = 0, length = allCountries.length; i < length; i++) {
+            for (var i = 0; i < allCountries.length; i++) {
                 var culture = allCountries[i];
-                html += "<option value='" + culture.TwoLetterISORegionName + "'>" + culture.DisplayName + "</option>"
+                html += "<option value='" + culture.TwoLetterISORegionName + "'>" + culture.DisplayName + "</option>";
             }
-            select.innerHTML = html
+            select.innerHTML = html;
         })
     }
 
     function populateRefreshInterval(select) {
         var html = "";
-        html += "<option value='0'>" + globalize.translate("Never") + "</option>", html += [30, 60, 90].map(function(val) {
-            return "<option value='" + val + "'>" + globalize.translate("EveryNDays", val) + "</option>"
-        }).join(""), select.innerHTML = html
+        html += "<option value='0'>" + globalize.translate("Never") + "</option>";
+        html += [30, 60, 90].map(function(val) {
+            return "<option value='" + val + "'>" + globalize.translate("EveryNDays", val) + "</option>";
+        }).join("");
+        select.innerHTML = html;
     }
 
     function renderMetadataReaders(page, plugins) {
-        var html = "",
-            elem = page.querySelector(".metadataReaders");
+        var html = "";
+        var elem = page.querySelector(".metadataReaders");
+
         if (plugins.length < 1) return elem.innerHTML = "", elem.classList.add("hide"), !1;
-        html += '<h3 class="checkboxListLabel">' + globalize.translate("LabelMetadataReaders") + "</h3>", html += '<div class="checkboxList paperList checkboxList-paperList">';
-        for (var i = 0, length = plugins.length; i < length; i++) {
+        html += '<h3 class="checkboxListLabel">' + globalize.translate("LabelMetadataReaders") + "</h3>";
+        html += '<div class="checkboxList paperList checkboxList-paperList">';
+        for (var i = 0; i < plugins.length; i++) {
             var plugin = plugins[i];
-            html += '<div class="listItem localReaderOption sortableOption" data-pluginname="' + plugin.Name + '">', html += '<i class="listItemIcon md-icon">live_tv</i>', html += '<div class="listItemBody">', html += '<h3 class="listItemBodyText">', html += plugin.Name, html += "</h3>", html += "</div>", i > 0 ? html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="md-icon">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="md-icon">keyboard_arrow_down</i></button>'), html += "</div>"
+            html += '<div class="listItem localReaderOption sortableOption" data-pluginname="' + plugin.Name + '">';
+            html += '<i class="listItemIcon md-icon">live_tv</i>';
+            html += '<div class="listItemBody">';
+            html += '<h3 class="listItemBodyText">';
+            html += plugin.Name;
+            html += "</h3>";
+            html += "</div>";
+            if (i > 0) {
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="md-icon">keyboard_arrow_up</i></button>';
+            } else if (plugins.length > 1) {
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="md-icon">keyboard_arrow_down</i></button>';
+            }
+            html += "</div>";
         }
-        return html += "</div>", html += '<div class="fieldDescription">' + globalize.translate("LabelMetadataReadersHelp") + "</div>", plugins.length < 2 ? elem.classList.add("hide") : elem.classList.remove("hide"), elem.innerHTML = html, !0
+        html += "</div>";
+        html += '<div class="fieldDescription">' + globalize.translate("LabelMetadataReadersHelp") + "</div>";
+        if (plugins.length < 2) {
+            elem.classList.add("hide");
+        } else {
+            elem.classList.remove("hide");
+        }
+        elem.innerHTML = html;
+        return true;
     }
 
     function renderMetadataSavers(page, metadataSavers) {
-        var html = "",
-            elem = page.querySelector(".metadataSavers");
-        if (!metadataSavers.length) return elem.innerHTML = "", elem.classList.add("hide"), !1;
-        html += '<h3 class="checkboxListLabel">' + globalize.translate("LabelMetadataSavers") + "</h3>", html += '<div class="checkboxList paperList checkboxList-paperList">';
-        for (var i = 0, length = metadataSavers.length; i < length; i++) {
+        var html = "";
+        var elem = page.querySelector(".metadataSavers");
+        if (!metadataSavers.length) return elem.innerHTML = "", elem.classList.add("hide"), false;
+        html += '<h3 class="checkboxListLabel">' + globalize.translate("LabelMetadataSavers") + "</h3>";
+        html += '<div class="checkboxList paperList checkboxList-paperList">';
+        for (var i = 0; i < metadataSavers.length; i++) {
             var plugin = metadataSavers[i];
-            html += '<label><input type="checkbox" data-defaultenabled="' + plugin.DefaultEnabled + '" is="emby-checkbox" class="chkMetadataSaver" data-pluginname="' + plugin.Name + '" ' + !1 + "><span>" + plugin.Name + "</span></label>"
+            html += '<label><input type="checkbox" data-defaultenabled="' + plugin.DefaultEnabled + '" is="emby-checkbox" class="chkMetadataSaver" data-pluginname="' + plugin.Name + '" ' + false + "><span>" + plugin.Name + "</span></label>";
         }
-        return html += "</div>", html += '<div class="fieldDescription" style="margin-top:.25em;">' + globalize.translate("LabelMetadataSaversHelp") + "</div>", elem.innerHTML = html, elem.classList.remove("hide"), !0
+        html += "</div>";
+        html += '<div class="fieldDescription" style="margin-top:.25em;">' + globalize.translate("LabelMetadataSaversHelp") + "</div>";
+        elem.innerHTML = html;
+        elem.classList.remove("hide");
+        return true;
     }
 
     function getMetadataFetchersForTypeHtml(availableTypeOptions, libraryOptionsForType) {
-        var html = "",
-            plugins = availableTypeOptions.MetadataFetchers;
-        if (plugins = getOrderedPlugins(plugins, libraryOptionsForType.MetadataFetcherOrder || []), !plugins.length) return html;
-        html += '<div class="metadataFetcher" data-type="' + availableTypeOptions.Type + '">', html += '<h3 class="checkboxListLabel">' + globalize.translate("LabelTypeMetadataDownloaders", availableTypeOptions.Type) + "</h3>", html += '<div class="checkboxList paperList checkboxList-paperList">';
-        for (var i = 0, length = plugins.length; i < length; i++) {
+        var html = "";
+        var plugins = availableTypeOptions.MetadataFetchers;
+
+        plugins = getOrderedPlugins(plugins, libraryOptionsForType.MetadataFetcherOrder || []);
+        if (!plugins.length) return html;
+
+        html += '<div class="metadataFetcher" data-type="' + availableTypeOptions.Type + '">';
+        html += '<h3 class="checkboxListLabel">' + globalize.translate("LabelTypeMetadataDownloaders", availableTypeOptions.Type) + "</h3>";
+        html += '<div class="checkboxList paperList checkboxList-paperList">';
+        for (var i = 0; i < plugins.length; i++) {
             var plugin = plugins[i];
             html += '<div class="listItem metadataFetcherItem sortableOption" data-pluginname="' + plugin.Name + '">';
-            var isChecked = libraryOptionsForType.MetadataFetchers ? -1 !== libraryOptionsForType.MetadataFetchers.indexOf(plugin.Name) : plugin.DefaultEnabled,
-                checkedHtml = isChecked ? ' checked="checked"' : "";
-            html += '<label class="listItemCheckboxContainer"><input type="checkbox" is="emby-checkbox" class="chkMetadataFetcher" data-pluginname="' + plugin.Name + '" ' + checkedHtml + "><span></span></label>", html += '<div class="listItemBody">', html += '<h3 class="listItemBodyText">', html += plugin.Name, html += "</h3>", html += "</div>", i > 0 ? html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="md-icon">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="md-icon">keyboard_arrow_down</i></button>'), html += "</div>"
+            var isChecked = libraryOptionsForType.MetadataFetchers ? -1 !== libraryOptionsForType.MetadataFetchers.indexOf(plugin.Name) : plugin.DefaultEnabled;
+            var checkedHtml = isChecked ? ' checked="checked"' : "";
+            html += '<label class="listItemCheckboxContainer"><input type="checkbox" is="emby-checkbox" class="chkMetadataFetcher" data-pluginname="' + plugin.Name + '" ' + checkedHtml + "><span></span></label>";
+            html += '<div class="listItemBody">';
+            html += '<h3 class="listItemBodyText">';
+            html += plugin.Name;
+            html += "</h3>";
+            html += "</div>";
+            i > 0 ? html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="md-icon">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="md-icon">keyboard_arrow_down</i></button>'), html += "</div>"
         }
-        return html += "</div>", html += '<div class="fieldDescription">' + globalize.translate("LabelMetadataDownloadersHelp") + "</div>", html += "</div>"
+        html += "</div>";
+        html += '<div class="fieldDescription">' + globalize.translate("LabelMetadataDownloadersHelp") + "</div>";
+        html += "</div>";
+        return html;
     }
 
     function getTypeOptions(allOptions, type) {
-        for (var allTypeOptions = allOptions.TypeOptions || [], i = 0, length = allTypeOptions.length; i < length; i++) {
+        var allTypeOptions = allOptions.TypeOptions || [];
+        for (var i = 0; i < allTypeOptions.length; i++) {
             var typeOptions = allTypeOptions[i];
-            if (typeOptions.Type === type) return typeOptions
+            if (typeOptions.Type === type) return typeOptions;
         }
-        return null
+        return null;
     }
 
     function renderMetadataFetchers(page, availableOptions, libraryOptions) {
-        for (var html = "", elem = page.querySelector(".metadataFetchers"), i = 0, length = availableOptions.TypeOptions.length; i < length; i++) {
+        var html = "";
+        var elem = page.querySelector(".metadataFetchers");
+        for (var i = 0; i < availableOptions.TypeOptions.length; i++) {
             var availableTypeOptions = availableOptions.TypeOptions[i];
-            html += getMetadataFetchersForTypeHtml(availableTypeOptions, getTypeOptions(libraryOptions, availableTypeOptions.Type) || {})
+            html += getMetadataFetchersForTypeHtml(availableTypeOptions, getTypeOptions(libraryOptions, availableTypeOptions.Type) || {});
         }
-        return elem.innerHTML = html, html ? (elem.classList.remove("hide"), page.querySelector(".fldAutoRefreshInterval").classList.remove("hide"), page.querySelector(".fldMetadataLanguage").classList.remove("hide"), page.querySelector(".fldMetadataCountry").classList.remove("hide")) : (elem.classList.add("hide"), page.querySelector(".fldAutoRefreshInterval").classList.add("hide"), page.querySelector(".fldMetadataLanguage").classList.add("hide"), page.querySelector(".fldMetadataCountry").classList.add("hide")), !0
+        elem.innerHTML = html;
+        if (html) {
+            elem.classList.remove("hide");
+            page.querySelector(".fldAutoRefreshInterval").classList.remove("hide");
+            page.querySelector(".fldMetadataLanguage").classList.remove("hide");
+            page.querySelector(".fldMetadataCountry").classList.remove("hide");
+        } else {
+            elem.classList.add("hide");
+            page.querySelector(".fldAutoRefreshInterval").classList.add("hide");
+            page.querySelector(".fldMetadataLanguage").classList.add("hide");
+            page.querySelector(".fldMetadataCountry").classList.add("hide");
+        }
+        return true;
     }
 
     function renderSubtitleFetchers(page, availableOptions, libraryOptions) {
-        try {
-            var html = "",
-                elem = page.querySelector(".subtitleFetchers"),
-                html = "",
-                plugins = availableOptions.SubtitleFetchers;
-            if (plugins = getOrderedPlugins(plugins, libraryOptions.SubtitleFetcherOrder || []), !plugins.length) return html;
-            html += '<h3 class="checkboxListLabel">' + globalize.translate("LabelSubtitleDownloaders") + "</h3>", html += '<div class="checkboxList paperList checkboxList-paperList">';
-            for (var i = 0, length = plugins.length; i < length; i++) {
-                var plugin = plugins[i];
-                html += '<div class="listItem subtitleFetcherItem sortableOption" data-pluginname="' + plugin.Name + '">';
-                var isChecked = libraryOptions.DisabledSubtitleFetchers ? -1 === libraryOptions.DisabledSubtitleFetchers.indexOf(plugin.Name) : plugin.DefaultEnabled,
-                    checkedHtml = isChecked ? ' checked="checked"' : "";
-                html += '<label class="listItemCheckboxContainer"><input type="checkbox" is="emby-checkbox" class="chkSubtitleFetcher" data-pluginname="' + plugin.Name + '" ' + checkedHtml + "><span></span></label>", html += '<div class="listItemBody">', html += '<h3 class="listItemBodyText">', html += plugin.Name, html += "</h3>", "Open Subtitles" === plugin.Name && (html += '<div class="listItemBodyText secondary">', html += globalize.translate("OpenSubtitleInstructions"), html += "</div>"), 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="md-icon">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="md-icon">keyboard_arrow_down</i></button>'), html += "</div>"
+        var html = "";
+        var elem = page.querySelector(".subtitleFetchers");
+
+        var plugins = availableOptions.SubtitleFetchers;
+        plugins = getOrderedPlugins(plugins, libraryOptions.SubtitleFetcherOrder || []);
+        if (!plugins.length) return html;
+
+        html += '<h3 class="checkboxListLabel">' + globalize.translate("LabelSubtitleDownloaders") + "</h3>";
+        html += '<div class="checkboxList paperList checkboxList-paperList">';
+        for (var i = 0; i < plugins.length; i++) {
+            var plugin = plugins[i];
+            html += '<div class="listItem subtitleFetcherItem sortableOption" data-pluginname="' + plugin.Name + '">';
+            var isChecked = libraryOptions.DisabledSubtitleFetchers ? -1 === libraryOptions.DisabledSubtitleFetchers.indexOf(plugin.Name) : plugin.DefaultEnabled;
+            var checkedHtml = isChecked ? ' checked="checked"' : "";
+            html += '<label class="listItemCheckboxContainer"><input type="checkbox" is="emby-checkbox" class="chkSubtitleFetcher" data-pluginname="' + plugin.Name + '" ' + checkedHtml + "><span></span></label>";
+            html += '<div class="listItemBody">';
+            html += '<h3 class="listItemBodyText">';
+            html += plugin.Name;
+            html += "</h3>";
+            if (plugin.Name === "Open Subtitles") {
+                html += '<div class="listItemBodyText secondary">';
+                html += globalize.translate("OpenSubtitleInstructions");
+                html += "</div>";
             }
-            html += "</div>", html += '<div class="fieldDescription">' + globalize.translate("SubtitleDownloadersHelp") + "</div>", elem.innerHTML = html
-        } catch (err) {
-            alert(err)
+            html += "</div>";
+            if (i > 0) {
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="md-icon">keyboard_arrow_up</i></button>';
+            } else if (plugins.length > 1) {
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="md-icon">keyboard_arrow_down</i></button>';
+            }
+            html += "</div>";
         }
+        html += "</div>";
+        html += '<div class="fieldDescription">' + globalize.translate("SubtitleDownloadersHelp") + "</div>";
+        elem.innerHTML = html;
     }
 
     function getImageFetchersForTypeHtml(availableTypeOptions, libraryOptionsForType) {
-        var html = "",
-            plugins = availableTypeOptions.ImageFetchers;
-        if (plugins = getOrderedPlugins(plugins, libraryOptionsForType.ImageFetcherOrder || []), !plugins.length) return html;
-        html += '<div class="imageFetcher" data-type="' + availableTypeOptions.Type + '">', html += '<div class="flex align-items-center" style="margin:1.5em 0 .5em;">', html += '<h3 class="checkboxListLabel" style="margin:0;">' + globalize.translate("HeaderTypeImageFetchers", availableTypeOptions.Type) + "</h3>";
+        var html = "";
+        var plugins = availableTypeOptions.ImageFetchers;
+
+        plugins = getOrderedPlugins(plugins, libraryOptionsForType.ImageFetcherOrder || []);
+        if (!plugins.length) return html;
+
+        html += '<div class="imageFetcher" data-type="' + availableTypeOptions.Type + '">';
+        html += '<div class="flex align-items-center" style="margin:1.5em 0 .5em;">';
+        html += '<h3 class="checkboxListLabel" style="margin:0;">' + globalize.translate("HeaderTypeImageFetchers", availableTypeOptions.Type) + "</h3>";
         var supportedImageTypes = availableTypeOptions.SupportedImageTypes || [];
-        (supportedImageTypes.length > 1 || 1 === supportedImageTypes.length && "Primary" !== supportedImageTypes[0]) && (html += '<button is="emby-button" class="raised btnImageOptionsForType" type="button" style="margin-left:1.5em;font-size:90%;"><span>' + globalize.translate("HeaderFetcherSettings") + "</span></button>"), html += "</div>", html += '<div class="checkboxList paperList checkboxList-paperList">';
-        for (var i = 0, length = plugins.length; i < length; i++) {
+        if (supportedImageTypes.length > 1 || 1 === supportedImageTypes.length && "Primary" !== supportedImageTypes[0]) {
+            html += '<button is="emby-button" class="raised btnImageOptionsForType" type="button" style="margin-left:1.5em;font-size:90%;"><span>' + globalize.translate("HeaderFetcherSettings") + "</span></button>";
+        }
+        html += "</div>";
+        html += '<div class="checkboxList paperList checkboxList-paperList">';
+        for (var i = 0; i < plugins.length; i++) {
             var plugin = plugins[i];
             html += '<div class="listItem imageFetcherItem sortableOption" data-pluginname="' + plugin.Name + '">';
-            var isChecked = libraryOptionsForType.ImageFetchers ? -1 !== libraryOptionsForType.ImageFetchers.indexOf(plugin.Name) : plugin.DefaultEnabled,
-                checkedHtml = isChecked ? ' checked="checked"' : "";
-            html += '<label class="listItemCheckboxContainer"><input type="checkbox" is="emby-checkbox" class="chkImageFetcher" data-pluginname="' + plugin.Name + '" ' + checkedHtml + "><span></span></label>", html += '<div class="listItemBody">', html += '<h3 class="listItemBodyText">', html += plugin.Name, html += "</h3>", html += "</div>", i > 0 ? html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="md-icon">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="md-icon">keyboard_arrow_down</i></button>'), html += "</div>"
+            var isChecked = libraryOptionsForType.ImageFetchers ? -1 !== libraryOptionsForType.ImageFetchers.indexOf(plugin.Name) : plugin.DefaultEnabled;
+            var checkedHtml = isChecked ? ' checked="checked"' : "";
+            html += '<label class="listItemCheckboxContainer"><input type="checkbox" is="emby-checkbox" class="chkImageFetcher" data-pluginname="' + plugin.Name + '" ' + checkedHtml + "><span></span></label>";
+            html += '<div class="listItemBody">';
+            html += '<h3 class="listItemBodyText">';
+            html += plugin.Name;
+            html += "</h3>";
+            html += "</div>";
+            if (i > 0) {
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="md-icon">keyboard_arrow_up</i></button>';
+            } else if (plugins.length > 1) {
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="md-icon">keyboard_arrow_down</i></button>';
+            }
+            html += "</div>";
         }
-        return html += "</div>", html += '<div class="fieldDescription">' + globalize.translate("LabelImageFetchersHelp") + "</div>", html += "</div>"
+        html += "</div>";
+        html += '<div class="fieldDescription">' + globalize.translate("LabelImageFetchersHelp") + "</div>";
+        html += "</div>";
+        return html;
     }
 
     function renderImageFetchers(page, availableOptions, libraryOptions) {
-        for (var html = "", elem = page.querySelector(".imageFetchers"), i = 0, length = availableOptions.TypeOptions.length; i < length; i++) {
+        var html = "";
+        var elem = page.querySelector(".imageFetchers");
+        for (var i = 0; i < availableOptions.TypeOptions.length; i++) {
             var availableTypeOptions = availableOptions.TypeOptions[i];
-            html += getImageFetchersForTypeHtml(availableTypeOptions, getTypeOptions(libraryOptions, availableTypeOptions.Type) || {})
+            html += getImageFetchersForTypeHtml(availableTypeOptions, getTypeOptions(libraryOptions, availableTypeOptions.Type) || {});
         }
-        return elem.innerHTML = html, html ? (elem.classList.remove("hide"), page.querySelector(".chkDownloadImagesInAdvanceContainer").classList.remove("hide"), page.querySelector(".chkSaveLocalContainer").classList.remove("hide")) : (elem.classList.add("hide"), page.querySelector(".chkDownloadImagesInAdvanceContainer").classList.add("hide"), page.querySelector(".chkSaveLocalContainer").classList.add("hide")), !0
+        elem.innerHTML = html;
+        if (html) {
+            elem.classList.remove("hide");
+            page.querySelector(".chkDownloadImagesInAdvanceContainer").classList.remove("hide");
+            page.querySelector(".chkSaveLocalContainer").classList.remove("hide");
+        } else {
+            elem.classList.add("hide");
+            page.querySelector(".chkDownloadImagesInAdvanceContainer").classList.add("hide");
+            page.querySelector(".chkSaveLocalContainer").classList.add("hide");
+        }
+        return true;
     }
 
     function populateMetadataSettings(parent, contentType, isNewLibrary) {
@@ -151,15 +263,30 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
             LibraryContentType: contentType,
             IsNewLibrary: isNewLibrary
         })).then(function(availableOptions) {
-            currentAvailableOptions = availableOptions, parent.availableOptions = availableOptions, renderMetadataSavers(parent, availableOptions.MetadataSavers), renderMetadataReaders(parent, availableOptions.MetadataReaders), renderMetadataFetchers(parent, availableOptions, {}), renderSubtitleFetchers(parent, availableOptions, {}), renderImageFetchers(parent, availableOptions, {}), availableOptions.SubtitleFetchers.length ? parent.querySelector(".subtitleDownloadSettings").classList.remove("hide") : parent.querySelector(".subtitleDownloadSettings").classList.add("hide")
+            currentAvailableOptions = availableOptions;
+            parent.availableOptions = availableOptions;
+            renderMetadataSavers(parent, availableOptions.MetadataSavers);
+            renderMetadataReaders(parent, availableOptions.MetadataReaders);
+            renderMetadataFetchers(parent, availableOptions, {});
+            renderSubtitleFetchers(parent, availableOptions, {});
+            renderImageFetchers(parent, availableOptions, {});
+            availableOptions.SubtitleFetchers.length ? parent.querySelector(".subtitleDownloadSettings").classList.remove("hide") : parent.querySelector(".subtitleDownloadSettings").classList.add("hide")
         }).catch(function() {
-            return Promise.resolve()
+            return Promise.resolve();
         })
     }
 
     function adjustSortableListElement(elem) {
         var btnSortable = elem.querySelector(".btnSortable");
-        elem.previousSibling ? (btnSortable.classList.add("btnSortableMoveUp"), btnSortable.classList.remove("btnSortableMoveDown"), btnSortable.querySelector("i").innerHTML = "keyboard_arrow_up") : (btnSortable.classList.remove("btnSortableMoveUp"), btnSortable.classList.add("btnSortableMoveDown"), btnSortable.querySelector("i").innerHTML = "keyboard_arrow_down")
+        if (elem.previousSibling) {
+            btnSortable.classList.add("btnSortableMoveUp");
+            btnSortable.classList.remove("btnSortableMoveDown");
+            btnSortable.querySelector("i").innerHTML = "keyboard_arrow_up";
+        } else {
+            btnSortable.classList.remove("btnSortableMoveUp");
+            btnSortable.classList.add("btnSortableMoveDown");
+            btnSortable.querySelector("i").innerHTML = "keyboard_arrow_down";
+        }
     }
 
     function showImageOptionsForType(type) {
@@ -176,16 +303,16 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
     function onImageFetchersContainerClick(e) {
         var btnImageOptionsForType = dom.parentWithClass(e.target, "btnImageOptionsForType");
         if (btnImageOptionsForType) {
-            return void showImageOptionsForType(dom.parentWithClass(btnImageOptionsForType, "imageFetcher").getAttribute("data-type"))
+            return void showImageOptionsForType(dom.parentWithClass(btnImageOptionsForType, "imageFetcher").getAttribute("data-type"));
         }
-        onSortableContainerClick.call(this, e)
+        onSortableContainerClick.call(this, e);
     }
 
     function onSortableContainerClick(e) {
         var btnSortable = dom.parentWithClass(e.target, "btnSortable");
         if (btnSortable) {
-            var li = dom.parentWithClass(btnSortable, "sortableOption"),
-                list = dom.parentWithClass(li, "paperList");
+            var li = dom.parentWithClass(btnSortable, "sortableOption");
+            var list = dom.parentWithClass(li, "paperList");
             if (btnSortable.classList.contains("btnSortableMoveDown")) {
                 var next = li.nextSibling;
                 next && (li.parentNode.removeChild(li), next.parentNode.insertBefore(li, next.nextSibling))
@@ -198,35 +325,78 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
     }
 
     function bindEvents(parent) {
-        parent.querySelector(".metadataReaders").addEventListener("click", onSortableContainerClick), parent.querySelector(".subtitleFetchers").addEventListener("click", onSortableContainerClick), parent.querySelector(".metadataFetchers").addEventListener("click", onSortableContainerClick), parent.querySelector(".imageFetchers").addEventListener("click", onImageFetchersContainerClick)
+        parent.querySelector(".metadataReaders").addEventListener("click", onSortableContainerClick);
+        parent.querySelector(".subtitleFetchers").addEventListener("click", onSortableContainerClick);
+        parent.querySelector(".metadataFetchers").addEventListener("click", onSortableContainerClick);
+        parent.querySelector(".imageFetchers").addEventListener("click", onImageFetchersContainerClick);
     }
 
     function embed(parent, contentType, libraryOptions) {
         currentLibraryOptions = {
             TypeOptions: []
-        }, currentAvailableOptions = null;
-        var isNewLibrary = null == libraryOptions;
-        return isNewLibrary && parent.classList.add("newlibrary"), new Promise(function(resolve, reject) {
+        };
+        currentAvailableOptions = null;
+        var isNewLibrary = null === libraryOptions;
+        isNewLibrary && parent.classList.add("newlibrary");
+        return new Promise(function(resolve, reject) {
             var xhr = new XMLHttpRequest;
-            xhr.open("GET", "components/libraryoptionseditor/libraryoptionseditor.template.html", !0), xhr.onload = function(e) {
+            xhr.open("GET", "components/libraryoptionseditor/libraryoptionseditor.template.html", true);
+            xhr.onload = function(e) {
                 var template = this.response;
-                parent.innerHTML = globalize.translateDocument(template), populateRefreshInterval(parent.querySelector("#selectAutoRefreshInterval"));
+                parent.innerHTML = globalize.translateDocument(template);
+                populateRefreshInterval(parent.querySelector("#selectAutoRefreshInterval"));
                 var promises = [populateLanguages(parent), populateCountries(parent.querySelector("#selectCountry"))];
                 Promise.all(promises).then(function() {
                     return setContentType(parent, contentType).then(function() {
-                        libraryOptions && setLibraryOptions(parent, libraryOptions), bindEvents(parent), resolve()
-                    })
-                })
-            }, xhr.send()
-        })
+                        libraryOptions && setLibraryOptions(parent, libraryOptions);
+                        bindEvents(parent);
+                        resolve();
+                    });
+                });
+            };
+            xhr.send();
+        });
     }
 
     function setAdvancedVisible(parent, visible) {
-        for (var elems = parent.querySelectorAll(".advanced"), i = 0, length = elems.length; i < length; i++) visible ? elems[i].classList.remove("advancedHide") : elems[i].classList.add("advancedHide")
+        var elems = parent.querySelectorAll(".advanced");
+        for (var i = 0; i < elems.length; i++) {
+            visible ? elems[i].classList.remove("advancedHide") : elems[i].classList.add("advancedHide");
+        }
     }
 
     function setContentType(parent, contentType) {
-        return "homevideos" === contentType || "photos" === contentType ? parent.querySelector(".chkEnablePhotosContainer").classList.remove("hide") : parent.querySelector(".chkEnablePhotosContainer").classList.add("hide"), "tvshows" !== contentType && "movies" !== contentType && "homevideos" !== contentType && "musicvideos" !== contentType && "mixed" !== contentType && contentType ? parent.querySelector(".chapterSettingsSection").classList.add("hide") : parent.querySelector(".chapterSettingsSection").classList.remove("hide"), "tvshows" === contentType ? (parent.querySelector(".chkImportMissingEpisodesContainer").classList.remove("hide"), parent.querySelector(".chkAutomaticallyGroupSeriesContainer").classList.remove("hide"), parent.querySelector(".fldSeasonZeroDisplayName").classList.remove("hide"), parent.querySelector("#txtSeasonZeroName").setAttribute("required", "required")) : (parent.querySelector(".chkImportMissingEpisodesContainer").classList.add("hide"), parent.querySelector(".chkAutomaticallyGroupSeriesContainer").classList.add("hide"), parent.querySelector(".fldSeasonZeroDisplayName").classList.add("hide"), parent.querySelector("#txtSeasonZeroName").removeAttribute("required")), "books" === contentType || "boxsets" === contentType || "playlists" === contentType || "music" === contentType ? parent.querySelector(".chkEnableEmbeddedTitlesContainer").classList.add("hide") : parent.querySelector(".chkEnableEmbeddedTitlesContainer").classList.remove("hide"), populateMetadataSettings(parent, contentType)
+        if (contentType === "homevideos" || contentType === "photos") {
+            parent.querySelector(".chkEnablePhotosContainer").classList.remove("hide");
+        } else {
+            parent.querySelector(".chkEnablePhotosContainer").classList.add("hide");
+        }
+
+        if (contentType !== "tvshows" && contentType !== "movies" && contentType !== "homevideos" && contentType !== "musicvideos" && contentType !== "mixed") {
+            parent.querySelector(".chapterSettingsSection").classList.add("hide");
+        } else {
+            parent.querySelector(".chapterSettingsSection").classList.remove("hide");
+        }
+
+        if (contentType === "tvshows") {
+            parent.querySelector(".chkImportMissingEpisodesContainer").classList.remove("hide");
+            parent.querySelector(".chkAutomaticallyGroupSeriesContainer").classList.remove("hide");
+            parent.querySelector(".fldSeasonZeroDisplayName").classList.remove("hide");
+            parent.querySelector("#txtSeasonZeroName").setAttribute("required", "required");
+        } else {
+            parent.querySelector(".chkImportMissingEpisodesContainer").classList.add("hide");
+            parent.querySelector(".chkAutomaticallyGroupSeriesContainer").classList.add("hide");
+            parent.querySelector(".fldSeasonZeroDisplayName").classList.add("hide");
+            parent.querySelector("#txtSeasonZeroName").removeAttribute("required");
+        }
+
+        if (contentType === "books" || contentType === "boxsets" || contentType === "playlists" || contentType === "music") {
+            parent.querySelector(".chkEnableEmbeddedTitlesContainer").classList.add("hide");
+        } else {
+            parent.querySelector(".chkEnableEmbeddedTitlesContainer").classList.remove("hide");
+        }
+
+        return populateMetadataSettings(parent, contentType);
     }
 
     function setSubtitleFetchersIntoOptions(parent, options) {
@@ -234,64 +404,87 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
             return !elem.checked
         }), function(elem) {
             return elem.getAttribute("data-pluginname")
-        }), options.SubtitleFetcherOrder = Array.prototype.map.call(parent.querySelectorAll(".subtitleFetcherItem"), function(elem) {
+        });
+
+        options.SubtitleFetcherOrder = Array.prototype.map.call(parent.querySelectorAll(".subtitleFetcherItem"), function(elem) {
             return elem.getAttribute("data-pluginname")
-        })
+        });
     }
 
     function setMetadataFetchersIntoOptions(parent, options) {
-        for (var sections = parent.querySelectorAll(".metadataFetcher"), i = 0, length = sections.length; i < length; i++) {
-            var section = sections[i],
-                type = section.getAttribute("data-type"),
-                typeOptions = getTypeOptions(options, type);
-            typeOptions || (typeOptions = {
-                Type: type
-            }, options.TypeOptions.push(typeOptions)), typeOptions.MetadataFetchers = Array.prototype.map.call(Array.prototype.filter.call(section.querySelectorAll(".chkMetadataFetcher"), function(elem) {
-                return elem.checked
+        var sections = parent.querySelectorAll(".metadataFetcher");
+        for (var i = 0; i < sections.length; i++) {
+            var section = sections[i];
+            var type = section.getAttribute("data-type");
+            var typeOptions = getTypeOptions(options, type);
+            if (!typeOptions) {
+                typeOptions = {
+                    Type: type
+                };
+                options.TypeOptions.push(typeOptions);
+            }
+            typeOptions.MetadataFetchers = Array.prototype.map.call(Array.prototype.filter.call(section.querySelectorAll(".chkMetadataFetcher"), function(elem) {
+                return elem.checked;
             }), function(elem) {
-                return elem.getAttribute("data-pluginname")
-            }), typeOptions.MetadataFetcherOrder = Array.prototype.map.call(section.querySelectorAll(".metadataFetcherItem"), function(elem) {
-                return elem.getAttribute("data-pluginname")
-            })
+                return elem.getAttribute("data-pluginname");
+            });
+
+            typeOptions.MetadataFetcherOrder = Array.prototype.map.call(section.querySelectorAll(".metadataFetcherItem"), function(elem) {
+                return elem.getAttribute("data-pluginname");
+            });
         }
     }
 
     function setImageFetchersIntoOptions(parent, options) {
-        for (var sections = parent.querySelectorAll(".imageFetcher"), i = 0, length = sections.length; i < length; i++) {
-            var section = sections[i],
-                type = section.getAttribute("data-type"),
-                typeOptions = getTypeOptions(options, type);
-            typeOptions || (typeOptions = {
-                Type: type
-            }, options.TypeOptions.push(typeOptions)), typeOptions.ImageFetchers = Array.prototype.map.call(Array.prototype.filter.call(section.querySelectorAll(".chkImageFetcher"), function(elem) {
+        var sections = parent.querySelectorAll(".imageFetcher");
+        for (var i = 0; i < sections.length; i++) {
+            var section = sections[i];
+            var type = section.getAttribute("data-type");
+            var typeOptions = getTypeOptions(options, type);
+            if (!typeOptions) {
+                typeOptions = {
+                    Type: type
+                };
+                options.TypeOptions.push(typeOptions);
+            }
+
+            typeOptions.ImageFetchers = Array.prototype.map.call(Array.prototype.filter.call(section.querySelectorAll(".chkImageFetcher"), function(elem) {
                 return elem.checked
             }), function(elem) {
                 return elem.getAttribute("data-pluginname")
-            }), typeOptions.ImageFetcherOrder = Array.prototype.map.call(section.querySelectorAll(".imageFetcherItem"), function(elem) {
+            });
+
+            typeOptions.ImageFetcherOrder = Array.prototype.map.call(section.querySelectorAll(".imageFetcherItem"), function(elem) {
                 return elem.getAttribute("data-pluginname")
-            })
+            });
         }
     }
 
     function setImageOptionsIntoOptions(parent, options) {
-        for (var originalTypeOptions = (currentLibraryOptions || {}).TypeOptions || [], i = 0, length = originalTypeOptions.length; i < length; i++) {
-            var originalTypeOption = originalTypeOptions[i],
-                typeOptions = getTypeOptions(options, originalTypeOption.Type);
-            typeOptions || (typeOptions = {
-                Type: type
-            }, options.TypeOptions.push(typeOptions)), originalTypeOption.ImageOptions && (typeOptions.ImageOptions = originalTypeOption.ImageOptions)
+        var originalTypeOptions = (currentLibraryOptions || {}).TypeOptions || [];
+        for (var i = 0; i < originalTypeOptions.length; i++) {
+            var originalTypeOption = originalTypeOptions[i];
+            var typeOptions = getTypeOptions(options, originalTypeOption.Type);
+
+            if (!typeOptions) {
+                typeOptions = {
+                    Type: type
+                };
+                options.TypeOptions.push(typeOptions);
+            }
+            originalTypeOption.ImageOptions && (typeOptions.ImageOptions = originalTypeOption.ImageOptions);
         }
     }
 
     function getLibraryOptions(parent) {
         var options = {
-            EnableArchiveMediaFiles: !1,
+            EnableArchiveMediaFiles: false,
             EnablePhotos: parent.querySelector(".chkEnablePhotos").checked,
             EnableRealtimeMonitor: parent.querySelector(".chkEnableRealtimeMonitor").checked,
             ExtractChapterImagesDuringLibraryScan: parent.querySelector(".chkExtractChaptersDuringLibraryScan").checked,
             EnableChapterImageExtraction: parent.querySelector(".chkExtractChapterImages").checked,
             DownloadImagesInAdvance: parent.querySelector("#chkDownloadImagesInAdvance").checked,
-            EnableInternetProviders: !0,
+            EnableInternetProviders: true,
             ImportMissingEpisodes: parent.querySelector("#chkImportMissingEpisodes").checked,
             SaveLocalMetadata: parent.querySelector("#chkSaveLocal").checked,
             EnableAutomaticSeriesGrouping: parent.querySelector(".chkAutomaticallyGroupSeries").checked,
@@ -311,29 +504,66 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
             }),
             TypeOptions: []
         };
-        return options.LocalMetadataReaderOrder = Array.prototype.map.call(parent.querySelectorAll(".localReaderOption"), function(elem) {
+
+        options.LocalMetadataReaderOrder = Array.prototype.map.call(parent.querySelectorAll(".localReaderOption"), function(elem) {
             return elem.getAttribute("data-pluginname")
-        }), options.SubtitleDownloadLanguages = Array.prototype.map.call(Array.prototype.filter.call(parent.querySelectorAll(".chkSubtitleLanguage"), function(elem) {
+        });
+        options.SubtitleDownloadLanguages = Array.prototype.map.call(Array.prototype.filter.call(parent.querySelectorAll(".chkSubtitleLanguage"), function(elem) {
             return elem.checked
         }), function(elem) {
             return elem.getAttribute("data-lang")
-        }), setSubtitleFetchersIntoOptions(parent, options), setMetadataFetchersIntoOptions(parent, options), setImageFetchersIntoOptions(parent, options), setImageOptionsIntoOptions(parent, options), options
+        });
+        setSubtitleFetchersIntoOptions(parent, options);
+        setMetadataFetchersIntoOptions(parent, options);
+        setImageFetchersIntoOptions(parent, options);
+        setImageOptionsIntoOptions(parent, options);
+
+        return options;
     }
 
     function getOrderedPlugins(plugins, configuredOrder) {
-        return plugins = plugins.slice(0), plugins.sort(function(a, b) {
+        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
-        }), plugins
+        });
+        return plugins;
     }
 
     function setLibraryOptions(parent, options) {
-        currentLibraryOptions = options, currentAvailableOptions = parent.availableOptions, parent.querySelector("#selectLanguage").value = options.PreferredMetadataLanguage || "", parent.querySelector("#selectCountry").value = options.MetadataCountryCode || "", parent.querySelector("#selectAutoRefreshInterval").value = options.AutomaticRefreshIntervalDays || "0", parent.querySelector("#txtSeasonZeroName").value = options.SeasonZeroDisplayName || "Specials", parent.querySelector(".chkEnablePhotos").checked = options.EnablePhotos, parent.querySelector(".chkEnableRealtimeMonitor").checked = options.EnableRealtimeMonitor, parent.querySelector(".chkExtractChaptersDuringLibraryScan").checked = options.ExtractChapterImagesDuringLibraryScan, parent.querySelector(".chkExtractChapterImages").checked = options.EnableChapterImageExtraction, parent.querySelector("#chkDownloadImagesInAdvance").checked = options.DownloadImagesInAdvance, parent.querySelector("#chkSaveLocal").checked = options.SaveLocalMetadata, parent.querySelector("#chkImportMissingEpisodes").checked = options.ImportMissingEpisodes, parent.querySelector(".chkAutomaticallyGroupSeries").checked = options.EnableAutomaticSeriesGrouping, parent.querySelector("#chkEnableEmbeddedTitles").checked = options.EnableEmbeddedTitles, parent.querySelector("#chkSkipIfGraphicalSubsPresent").checked = options.SkipSubtitlesIfEmbeddedSubtitlesPresent, parent.querySelector("#chkSaveSubtitlesLocally").checked = options.SaveSubtitlesWithMedia, parent.querySelector("#chkSkipIfAudioTrackPresent").checked = options.SkipSubtitlesIfAudioTrackMatches, parent.querySelector("#chkRequirePerfectMatch").checked = options.RequirePerfectSubtitleMatch, Array.prototype.forEach.call(parent.querySelectorAll(".chkMetadataSaver"), function(elem) {
+        currentLibraryOptions = options;
+        currentAvailableOptions = parent.availableOptions;
+        parent.querySelector("#selectLanguage").value = options.PreferredMetadataLanguage || "";
+        parent.querySelector("#selectCountry").value = options.MetadataCountryCode || "";
+        parent.querySelector("#selectAutoRefreshInterval").value = options.AutomaticRefreshIntervalDays || "0";
+        parent.querySelector("#txtSeasonZeroName").value = options.SeasonZeroDisplayName || "Specials";
+        parent.querySelector(".chkEnablePhotos").checked = options.EnablePhotos;
+        parent.querySelector(".chkEnableRealtimeMonitor").checked = options.EnableRealtimeMonitor;
+        parent.querySelector(".chkExtractChaptersDuringLibraryScan").checked = options.ExtractChapterImagesDuringLibraryScan;
+        parent.querySelector(".chkExtractChapterImages").checked = options.EnableChapterImageExtraction;
+        parent.querySelector("#chkDownloadImagesInAdvance").checked = options.DownloadImagesInAdvance;
+        parent.querySelector("#chkSaveLocal").checked = options.SaveLocalMetadata;
+        parent.querySelector("#chkImportMissingEpisodes").checked = options.ImportMissingEpisodes;
+        parent.querySelector(".chkAutomaticallyGroupSeries").checked = options.EnableAutomaticSeriesGrouping;
+        parent.querySelector("#chkEnableEmbeddedTitles").checked = options.EnableEmbeddedTitles;
+        parent.querySelector("#chkSkipIfGraphicalSubsPresent").checked = options.SkipSubtitlesIfEmbeddedSubtitlesPresent;
+        parent.querySelector("#chkSaveSubtitlesLocally").checked = options.SaveSubtitlesWithMedia;
+        parent.querySelector("#chkSkipIfAudioTrackPresent").checked = options.SkipSubtitlesIfAudioTrackMatches;
+        parent.querySelector("#chkRequirePerfectMatch").checked = options.RequirePerfectSubtitleMatch;
+        Array.prototype.forEach.call(parent.querySelectorAll(".chkMetadataSaver"), function(elem) {
             elem.checked = options.MetadataSavers ? -1 !== options.MetadataSavers.indexOf(elem.getAttribute("data-pluginname")) : "true" === elem.getAttribute("data-defaultenabled")
-        }), Array.prototype.forEach.call(parent.querySelectorAll(".chkSubtitleLanguage"), function(elem) {
+        });
+        Array.prototype.forEach.call(parent.querySelectorAll(".chkSubtitleLanguage"), function(elem) {
             elem.checked = !!options.SubtitleDownloadLanguages && -1 !== options.SubtitleDownloadLanguages.indexOf(elem.getAttribute("data-lang"))
-        }), renderMetadataReaders(parent, getOrderedPlugins(parent.availableOptions.MetadataReaders, options.LocalMetadataReaderOrder || [])), renderMetadataFetchers(parent, parent.availableOptions, options), renderImageFetchers(parent, parent.availableOptions, options), renderSubtitleFetchers(parent, parent.availableOptions, options)
+        });
+        renderMetadataReaders(parent, getOrderedPlugins(parent.availableOptions.MetadataReaders, options.LocalMetadataReaderOrder || []));
+        renderMetadataFetchers(parent, parent.availableOptions, options);
+        renderImageFetchers(parent, parent.availableOptions, options);
+        renderSubtitleFetchers(parent, parent.availableOptions, options);
     }
-    var currentLibraryOptions, currentAvailableOptions;
+
+    var currentLibraryOptions;
+    var currentAvailableOptions;
+
     return {
         embed: embed,
         setContentType: setContentType,

src/components/libraryoptionseditor/libraryoptionseditor.template.html

@@ -39,16 +39,21 @@
 
 <div class="metadataReaders hide advanced" style="margin-bottom: 2em;">
 </div>
+
 <div class="metadataFetchers hide" style="margin-bottom: 2em;">
 </div>
+
 <div class="selectContainer fldAutoRefreshInterval hide advanced" style="margin: 2em 0;">
     <select is="emby-select" id="selectAutoRefreshInterval" label="${LabelAutomaticallyRefreshInternetMetadataEvery}"></select>
     <div class="fieldDescription">${MessageEnablingOptionLongerScans}</div>
 </div>
+
 <div class="metadataSavers hide" style="margin-bottom: 2em;">
 </div>
+
 <div class="imageFetchers hide advanced" style="margin-bottom: 2em;">
 </div>
+
 <div class="checkboxContainer checkboxContainer-withDescription chkSaveLocalContainer hide">
     <label>
         <input is="emby-checkbox" type="checkbox" id="chkSaveLocal" />

src/components/medialibrarycreator/medialibrarycreator.js

@@ -1,10 +1,7 @@
 define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionseditor/libraryoptionseditor", "emby-toggle", "emby-input", "emby-select", "paper-icon-button-light", "listViewStyle", "formDialogStyle", "emby-button", "flexStyles"], function(loading, dialogHelper, dom, $, libraryoptionseditor) {
     "use strict";
 
-    function onSubmit(e) {
-        e.preventDefault();
-        e.stopPropagation();
-
+    function onAddLibrary() {
         if (isCreating) return false;
 
         if (pathInfos.length == 0) {
@@ -14,30 +11,30 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed
                     type: "error"
                 })
             });
-        } else {
-            isCreating = true;
-            loading.show();
-
-            var form = this,
-                dlg = $(form).parents(".dialog")[0],
-                name = $("#txtValue", form).val(),
-                type = $("#selectCollectionType", form).val();
-            if (type == "mixed") type = null;
-            var libraryOptions = libraryoptionseditor.getLibraryOptions(dlg.querySelector(".libraryOptions"));
-            libraryOptions.PathInfos = pathInfos;
-            ApiClient.addVirtualFolder(name, type, currentOptions.refresh, libraryOptions).then(function() {
-                hasChanges = true;
-                isCreating = false;
-                loading.hide();
-                dialogHelper.close(dlg);
-            }, function() {
-                require(["toast"], function(toast) {
-                    toast(Globalize.translate("ErrorAddingMediaPathToVirtualFolder"))
-                })
-                isCreating = false;
-                loading.hide();
-            });
+            return false;
         }
+
+        isCreating = true;
+        loading.show();
+
+        var dlg = dom.parentWithClass(this, "dlg-librarycreator");
+        var name = $("#txtValue", dlg).val();
+        var type = $("#selectCollectionType", dlg).val();
+        if (type == "mixed") type = null;
+        var libraryOptions = libraryoptionseditor.getLibraryOptions(dlg.querySelector(".libraryOptions"));
+        libraryOptions.PathInfos = pathInfos;
+        ApiClient.addVirtualFolder(name, type, currentOptions.refresh, libraryOptions).then(function() {
+            hasChanges = true;
+            isCreating = false;
+            loading.hide();
+            dialogHelper.close(dlg);
+        }, function() {
+            require(["toast"], function(toast) {
+                toast(Globalize.translate("ErrorAddingMediaPathToVirtualFolder"));
+            });
+            isCreating = false;
+            loading.hide();
+        });
         return false;
     }
 
@@ -49,13 +46,14 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed
 
     function initEditor(page, collectionTypeOptions) {
         $("#selectCollectionType", page).html(getCollectionTypeOptionsHtml(collectionTypeOptions)).val("").on("change", function() {
-            var value = this.value,
-                dlg = $(this).parents(".dialog")[0];
+            var value = this.value;
+            var dlg = $(this).parents(".dialog")[0];
             libraryoptionseditor.setContentType(dlg.querySelector(".libraryOptions"), value == "mixed" ? "" : value);
-            if (value)
+            if (value) {
                 dlg.querySelector(".libraryOptions").classList.remove("hide");
-            else
+            } else {
                 dlg.querySelector(".libraryOptions").classList.add("hide");
+            }
 
             if (value != "mixed") {
                 var index = this.selectedIndex;
@@ -68,12 +66,17 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed
                     $(".collectionTypeFieldDescription", dlg).html(folderOption.message || "")
                 }
             }
-        }), page.querySelector(".btnAddFolder").addEventListener("click", onAddButtonClick), page.querySelector("form").addEventListener("submit", onSubmit), page.querySelector(".folderList").addEventListener("click", onRemoveClick), page.querySelector(".chkAdvanced").addEventListener("change", onToggleAdvancedChange)
+        });
+
+        page.querySelector(".btnAddFolder").addEventListener("click", onAddButtonClick);
+        page.querySelector(".btnSubmit").addEventListener("click", onAddLibrary);
+        page.querySelector(".folderList").addEventListener("click", onRemoveClick);
+        page.querySelector(".chkAdvanced").addEventListener("change", onToggleAdvancedChange);
     }
 
     function onToggleAdvancedChange() {
         var dlg = dom.parentWithClass(this, "dlg-librarycreator");
-        libraryoptionseditor.setAdvancedVisible(dlg.querySelector(".libraryOptions"), this.checked)
+        libraryoptionseditor.setAdvancedVisible(dlg.querySelector(".libraryOptions"), this.checked);
     }
 
     function onAddButtonClick() {
@@ -83,7 +86,8 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed
             picker.show({
                 enableNetworkSharePath: true,
                 callback: function(path, networkSharePath) {
-                    path && addMediaLocation(page, path, networkSharePath), picker.close()
+                    path && addMediaLocation(page, path, networkSharePath);
+                    picker.close();
                 }
             })
         })
@@ -95,50 +99,55 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed
     }
 
     function renderPaths(page) {
-        var foldersHtml = pathInfos.map(getFolderHtml).join(""),
-            folderList = page.querySelector(".folderList");
-        folderList.innerHTML = foldersHtml, foldersHtml ? folderList.classList.remove("hide") : folderList.classList.add("hide")
+        var foldersHtml = pathInfos.map(getFolderHtml).join("");
+        var folderList = page.querySelector(".folderList");
+        folderList.innerHTML = foldersHtml;
+        foldersHtml ? folderList.classList.remove("hide") : folderList.classList.add("hide");
     }
 
     function addMediaLocation(page, path, networkSharePath) {
         var pathLower = path.toLowerCase();
-        if (0 == pathInfos.filter(function(p) {
-                return p.Path.toLowerCase() == pathLower
-            }).length) {
+        var pathFilter = pathInfos.filter(function(p) {
+            return p.Path.toLowerCase() == pathLower;
+        });
+        if (!pathFilter.length) {
             var pathInfo = {
                 Path: path
             };
-            networkSharePath && (pathInfo.NetworkPath = networkSharePath), pathInfos.push(pathInfo), renderPaths(page)
+            networkSharePath && (pathInfo.NetworkPath = networkSharePath);
+            pathInfos.push(pathInfo);
+            renderPaths(page);
         }
     }
 
     function onRemoveClick(e) {
-        var button = dom.parentWithClass(e.target, "btnRemovePath"),
-            index = parseInt(button.getAttribute("data-index")),
-            location = pathInfos[index].Path,
-            locationLower = location.toLowerCase();
+        var button = dom.parentWithClass(e.target, "btnRemovePath");
+        var index = parseInt(button.getAttribute("data-index"));
+        var location = pathInfos[index].Path;
+        var locationLower = location.toLowerCase();
         pathInfos = pathInfos.filter(function(p) {
-            return p.Path.toLowerCase() != locationLower
-        }), renderPaths(dom.parentWithClass(button, "dlg-librarycreator"))
+            return p.Path.toLowerCase() != locationLower;
+        });
+        renderPaths(dom.parentWithClass(button, "dlg-librarycreator"));
     }
 
     function onDialogClosed() {
-        // I can't see any corresponding call to loading.show,
-        // so I think this is not supposed to be here.
-        loading.hide();
         currentResolve(hasChanges);
     }
 
     function initLibraryOptions(dlg) {
         libraryoptionseditor.embed(dlg.querySelector(".libraryOptions")).then(function() {
-            $("#selectCollectionType", dlg).trigger("change"), onToggleAdvancedChange.call(dlg.querySelector(".chkAdvanced"))
+            $("#selectCollectionType", dlg).trigger("change");
+            onToggleAdvancedChange.call(dlg.querySelector(".chkAdvanced"));
         })
     }
 
     function editor() {
         this.show = function(options) {
             return new Promise(function(resolve, reject) {
-                currentOptions = options, currentResolve = resolve, hasChanges = false;
+                currentOptions = options;
+                currentResolve = resolve;
+                hasChanges = false;
                 var xhr = new XMLHttpRequest;
                 xhr.open("GET", "components/medialibrarycreator/medialibrarycreator.template.html", true);
                 xhr.onload = function(e) {
@@ -165,9 +174,16 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed
                     initLibraryOptions(dlg);
                 };
                 xhr.send();
-            })
+            });
         }
     }
-    var currentResolve, hasChanges, currentOptions, pathInfos = [], isCreating = false;
+
+    var pathInfos = [];
+    var currentResolve;
+    var currentOptions;
+
+    var hasChanges = false;
+    var isCreating = false;
+
     return editor
 });

src/components/medialibrarycreator/medialibrarycreator.template.html

@@ -1,29 +1,28 @@
 <div class="formDialogHeader">
     <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
-    <h3 class="formDialogHeaderTitle">
-        ${ButtonAddMediaLibrary}
-    </h3>
+    <h3 class="formDialogHeaderTitle">${ButtonAddMediaLibrary}</h3>
 </div>
 
 <div class="formDialogContent scrollY" style="padding-top:2em;">
     <div class="dialogContentInner dialog-content-centered">
-        <form style="margin:auto;">
+        <div class="inputContainer" style="text-align:right;">
+            <label style="width:auto;">
+                <input is="emby-toggle" type="checkbox" class="chkAdvanced noautofocus" />
+                <span>${ShowAdvancedSettings}</span>
+            </label>
+        </div>
 
-            <div class="inputContainer" style="text-align:right;">
-                <label style="width:auto;">
-                    <input is="emby-toggle" type="checkbox" class="chkAdvanced noautofocus" />
-                    <span>${ShowAdvancedSettings}</span>
-                </label>
+        <div id="fldCollectionType" class="selectContainer">
+            <select is="emby-select" id="selectCollectionType" data-mini="true" required="required" label="${LabelContentType}"></select>
+            <div class="collectionTypeFieldDescription fieldDescription">
             </div>
+        </div>
 
-            <div id="fldCollectionType" class="selectContainer">
-                <select is="emby-select" id="selectCollectionType" data-mini="true" required="required" label="${LabelContentType}"></select>
-                <div class="collectionTypeFieldDescription fieldDescription">
-                </div>
-            </div>
-            <div class="inputContainer">
-                <input is="emby-input" type="text" id="txtValue" required="required" label="${LabelDisplayName}" />
-            </div>
+        <div class="inputContainer">
+            <input is="emby-input" type="text" id="txtValue" required="required" label="${LabelDisplayName}" />
+        </div>
+
+        <div class="folders">
             <div style="display: flex; align-items: center;">
                 <h1 style="margin: .5em 0;">${HeadersFolders}</h1>
                 <button is="emby-button" type="button" class="fab btnAddFolder submit" style="margin-left:1em;" title="${ButtonAdd}">
@@ -31,15 +30,14 @@
                 </button>
             </div>
             <div class="paperList folderList hide" style="margin-bottom:2em;"></div>
+        </div>
 
-            <div class="libraryOptions"></div>
-            <br />
-
-            <div class="formDialogFooter">
-                <button is="emby-button" type="submit" class="raised button-submit block formDialogFooterItem">
-                    <span>${ButtonOk}</span>
-                </button>
-            </div>
-        </form>
+        <div class="libraryOptions"></div>
     </div>
+</div>
+
+<div class="formDialogFooter">
+    <button is="emby-button" type="button" class="raised btnSubmit button-submit block formDialogFooterItem">
+        <span>${ButtonOk}</span>
+    </button>
 </div>

src/components/medialibraryeditor/medialibraryeditor.js

@@ -1,16 +1,39 @@
 define(["loading", "dialogHelper", "dom", "components/libraryoptionseditor/libraryoptionseditor", "emby-button", "listViewStyle", "paper-icon-button-light", "formDialogStyle", "emby-toggle", "flexStyles"], function(loading, dialogHelper, dom, libraryoptionseditor) {
     "use strict";
 
+    function onEditLibrary() {
+        if (isCreating) return false;
+
+        isCreating = true;
+        loading.show();
+
+        var dlg = dom.parentWithClass(this, "dlg-libraryeditor");
+        var libraryOptions = libraryoptionseditor.getLibraryOptions(dlg.querySelector(".libraryOptions"));
+        libraryOptions = Object.assign(currentOptions.library.LibraryOptions || {}, libraryOptions);
+
+        ApiClient.updateVirtualFolderOptions(currentOptions.library.ItemId, libraryOptions).then(function() {
+            hasChanges = true;
+            isCreating = false;
+            loading.hide();
+            dialogHelper.close(dlg);
+        }, function() {
+            isCreating = false;
+            loading.hide();
+        });
+        return false;
+    }
+
     function addMediaLocation(page, path, networkSharePath) {
-        var virtualFolder = currentOptions.library,
-            refreshAfterChange = currentOptions.refresh;
+        var virtualFolder = currentOptions.library;
+        var refreshAfterChange = currentOptions.refresh;
         ApiClient.addMediaPath(virtualFolder.Name, path, networkSharePath, refreshAfterChange).then(function() {
-            hasChanges = !0, refreshLibraryFromServer(page)
+            hasChanges = true;
+            refreshLibraryFromServer(page);
         }, function() {
             require(["toast"], function(toast) {
-                toast(Globalize.translate("ErrorAddingMediaPathToVirtualFolder"))
-            })
-        })
+                toast(Globalize.translate("ErrorAddingMediaPathToVirtualFolder"));
+            });
+        });
     }
 
     function updateMediaLocation(page, path, networkSharePath) {
@@ -19,17 +42,18 @@ define(["loading", "dialogHelper", "dom", "components/libraryoptionseditor/libra
             Path: path,
             NetworkPath: networkSharePath
         }).then(function() {
-            hasChanges = !0, refreshLibraryFromServer(page)
+            hasChanges = true;
+            refreshLibraryFromServer(page);
         }, function() {
             require(["toast"], function(toast) {
-                toast(Globalize.translate("ErrorAddingMediaPathToVirtualFolder"))
-            })
-        })
+                toast(Globalize.translate("ErrorAddingMediaPathToVirtualFolder"));
+            });
+        });
     }
 
     function onRemoveClick(btnRemovePath, location) {
-        var button = btnRemovePath,
-            virtualFolder = currentOptions.library;
+        var button = btnRemovePath;
+        var virtualFolder = currentOptions.library;
         require(["confirm"], function(confirm) {
             confirm({
                 title: Globalize.translate("HeaderRemoveMediaLocation"),
@@ -39,32 +63,44 @@ define(["loading", "dialogHelper", "dom", "components/libraryoptionseditor/libra
             }).then(function() {
                 var refreshAfterChange = currentOptions.refresh;
                 ApiClient.removeMediaPath(virtualFolder.Name, location, refreshAfterChange).then(function() {
-                    hasChanges = !0, refreshLibraryFromServer(dom.parentWithClass(button, "dlg-libraryeditor"))
+                    hasChanges = true;
+                    refreshLibraryFromServer(dom.parentWithClass(button, "dlg-libraryeditor"));
                 }, function() {
                     require(["toast"], function(toast) {
-                        toast(Globalize.translate("DefaultErrorMessage"))
-                    })
-                })
-            })
-        })
+                        toast(Globalize.translate("DefaultErrorMessage"));
+                    });
+                });
+            });
+        });
     }
 
     function onListItemClick(e) {
         var listItem = dom.parentWithClass(e.target, "listItem");
         if (listItem) {
-            var index = parseInt(listItem.getAttribute("data-index")),
-                pathInfos = (currentOptions.library.LibraryOptions || {}).PathInfos || [],
-                pathInfo = null == index ? {} : pathInfos[index] || {},
-                originalPath = pathInfo.Path || (null == index ? null : currentOptions.library.Locations[index]),
-                btnRemovePath = dom.parentWithClass(e.target, "btnRemovePath");
+            var index = parseInt(listItem.getAttribute("data-index"));
+            var pathInfos = (currentOptions.library.LibraryOptions || {}).PathInfos || [];
+            var pathInfo = null == index ? {} : pathInfos[index] || {};
+            var originalPath = pathInfo.Path || (null == index ? null : currentOptions.library.Locations[index]);
+            var btnRemovePath = dom.parentWithClass(e.target, "btnRemovePath");
             if (btnRemovePath) return void onRemoveClick(btnRemovePath, originalPath);
-            showDirectoryBrowser(dom.parentWithClass(listItem, "dlg-libraryeditor"), originalPath, pathInfo.NetworkPath)
+            showDirectoryBrowser(dom.parentWithClass(listItem, "dlg-libraryeditor"), originalPath, pathInfo.NetworkPath);
         }
     }
 
     function getFolderHtml(pathInfo, index) {
         var html = "";
-        return html += '<div class="listItem listItem-border lnkPath" data-index="' + index + '" style="padding-left:.5em;">', html += '<div class="' + (pathInfo.NetworkPath ? "listItemBody two-line" : "listItemBody") + '">', html += '<h3 class="listItemBodyText">', html += pathInfo.Path, html += "</h3>", pathInfo.NetworkPath && (html += '<div class="listItemBodyText secondary">' + pathInfo.NetworkPath + "</div>"), html += "</div>", html += '<button type="button" is="paper-icon-button-light" class="listItemButton btnRemovePath" data-index="' + index + '"><i class="md-icon">remove_circle</i></button>', html += "</div>"
+        html += '<div class="listItem listItem-border lnkPath" data-index="' + index + '" style="padding-left:.5em;">';
+        html += '<div class="' + (pathInfo.NetworkPath ? "listItemBody two-line" : "listItemBody") + '">';
+        html += '<h3 class="listItemBodyText">';
+        html += pathInfo.Path;
+        html += "</h3>";
+        if (pathInfo.NetworkPath) {
+            html += '<div class="listItemBodyText secondary">' + pathInfo.NetworkPath + "</div>";
+        }
+        html += "</div>";
+        html += '<button type="button" is="paper-icon-button-light" class="listItemButton btnRemovePath" data-index="' + index + '"><i class="md-icon">remove_circle</i></button>';
+        html += "</div>";
+        return html;
     }
 
     function refreshLibraryFromServer(page) {
@@ -72,8 +108,11 @@ define(["loading", "dialogHelper", "dom", "components/libraryoptionseditor/libra
             var library = result.filter(function(f) {
                 return f.Name === currentOptions.library.Name
             })[0];
-            library && (currentOptions.library = library, renderLibrary(page, currentOptions))
-        })
+            if (library) {
+                currentOptions.library = library;
+                renderLibrary(page, currentOptions);
+            }
+        });
     }
 
     function renderLibrary(page, options) {
@@ -82,11 +121,17 @@ define(["loading", "dialogHelper", "dom", "components/libraryoptionseditor/libra
             return {
                 Path: p
             }
-        })), "boxsets" === options.library.CollectionType ? page.querySelector(".folders").classList.add("hide") : page.querySelector(".folders").classList.remove("hide"), page.querySelector(".folderList").innerHTML = pathInfos.map(getFolderHtml).join("")
+        }));
+        if (options.library.CollectionType === 'boxsets') {
+            page.querySelector(".folders").classList.add("hide");
+        } else {
+            page.querySelector(".folders").classList.remove("hide");
+        }
+        page.querySelector(".folderList").innerHTML = pathInfos.map(getFolderHtml).join("");
     }
 
     function onAddButtonClick() {
-        showDirectoryBrowser(dom.parentWithClass(this, "dlg-libraryeditor"))
+        showDirectoryBrowser(dom.parentWithClass(this, "dlg-libraryeditor"));
     }
 
     function showDirectoryBrowser(context, originalPath, networkPath) {
@@ -98,7 +143,8 @@ define(["loading", "dialogHelper", "dom", "components/libraryoptionseditor/libra
                 path: originalPath,
                 networkSharePath: networkPath,
                 callback: function(path, networkSharePath) {
-                    path && (originalPath ? updateMediaLocation(context, originalPath, networkSharePath) : addMediaLocation(context, path, networkSharePath)), picker.close()
+                    path && (originalPath ? updateMediaLocation(context, originalPath, networkSharePath) : addMediaLocation(context, path, networkSharePath));
+                    picker.close();
                 }
             })
         })
@@ -110,40 +156,60 @@ define(["loading", "dialogHelper", "dom", "components/libraryoptionseditor/libra
     }
 
     function initEditor(dlg, options) {
-        renderLibrary(dlg, options), dlg.querySelector(".btnAddFolder").addEventListener("click", onAddButtonClick), dlg.querySelector(".folderList").addEventListener("click", onListItemClick), dlg.querySelector(".chkAdvanced").addEventListener("change", onToggleAdvancedChange), libraryoptionseditor.embed(dlg.querySelector(".libraryOptions"), options.library.CollectionType, options.library.LibraryOptions).then(function() {
-            onToggleAdvancedChange.call(dlg.querySelector(".chkAdvanced"))
-        })
-    }
-
-    function onDialogClosing() {
-        var dlg = this,
-            libraryOptions = libraryoptionseditor.getLibraryOptions(dlg.querySelector(".libraryOptions"));
-        libraryOptions = Object.assign(currentOptions.library.LibraryOptions || {}, libraryOptions), ApiClient.updateVirtualFolderOptions(currentOptions.library.ItemId, libraryOptions)
+        renderLibrary(dlg, options);
+        dlg.querySelector(".btnAddFolder").addEventListener("click", onAddButtonClick);
+        dlg.querySelector(".folderList").addEventListener("click", onListItemClick);
+        dlg.querySelector(".chkAdvanced").addEventListener("change", onToggleAdvancedChange);
+        dlg.querySelector(".btnSubmit").addEventListener("click", onEditLibrary);
+        libraryoptionseditor.embed(dlg.querySelector(".libraryOptions"), options.library.CollectionType, options.library.LibraryOptions).then(function() {
+            onToggleAdvancedChange.call(dlg.querySelector(".chkAdvanced"));
+        });
     }
 
     function onDialogClosed() {
-        loading.hide(), hasChanges = !0, currentDeferred.resolveWith(null, [hasChanges])
+        currentDeferred.resolveWith(null, [hasChanges]);
     }
 
     function editor() {
         this.show = function(options) {
             var deferred = jQuery.Deferred();
-            currentOptions = options, currentDeferred = deferred, hasChanges = !1;
+            currentOptions = options;
+            currentDeferred = deferred;
+            hasChanges = false;
             var xhr = new XMLHttpRequest;
-            return xhr.open("GET", "components/medialibraryeditor/medialibraryeditor.template.html", !0), xhr.onload = function(e) {
-                var template = this.response,
-                    dlg = dialogHelper.createDialog({
-                        size: "medium-tall",
-                        modal: !1,
-                        removeOnClose: !0,
-                        scrollY: !1
-                    });
-                dlg.classList.add("dlg-libraryeditor"), dlg.classList.add("ui-body-a"), dlg.classList.add("background-theme-a"), dlg.classList.add("formDialog"), dlg.innerHTML = Globalize.translateDocument(template), dlg.querySelector(".formDialogHeaderTitle").innerHTML = options.library.Name, initEditor(dlg, options), dlg.addEventListener("closing", onDialogClosing), dlg.addEventListener("close", onDialogClosed), dialogHelper.open(dlg), dlg.querySelector(".btnCancel").addEventListener("click", function() {
-                    dialogHelper.close(dlg)
-                }), refreshLibraryFromServer(dlg)
-            }, xhr.send(), deferred.promise()
+            xhr.open("GET", "components/medialibraryeditor/medialibraryeditor.template.html", true);
+            xhr.onload = function(e) {
+                var template = this.response;
+                var dlg = dialogHelper.createDialog({
+                    size: "medium-tall",
+                    modal: false,
+                    removeOnClose: true,
+                    scrollY: false
+                });
+                dlg.classList.add("dlg-libraryeditor");
+                dlg.classList.add("ui-body-a");
+                dlg.classList.add("background-theme-a");
+                dlg.classList.add("formDialog");
+                dlg.innerHTML = Globalize.translateDocument(template);
+                dlg.querySelector(".formDialogHeaderTitle").innerHTML = options.library.Name;
+                initEditor(dlg, options);
+                dlg.addEventListener("close", onDialogClosed);
+                dialogHelper.open(dlg);
+                dlg.querySelector(".btnCancel").addEventListener("click", function() {
+                    dialogHelper.close(dlg);
+                });
+                refreshLibraryFromServer(dlg);
+            };
+            xhr.send();
+            return deferred.promise();
         }
     }
-    var currentDeferred, hasChanges, currentOptions;
-    return editor
+
+    var currentDeferred;
+    var currentOptions;
+
+    var hasChanges = false;
+    var isCreating = false;
+
+    return editor;
 });

src/components/medialibraryeditor/medialibraryeditor.template.html

@@ -5,7 +5,6 @@
 
 <div class="formDialogContent scrollY" style="padding-top:2em;">
     <div class="dialogContentInner dialog-content-centered">
-
         <div class="infoBanner" style="margin-bottom:1.8em;">
             ${ChangingMetadataImageSettingsNewContent}
         </div>
@@ -26,6 +25,13 @@
             </div>
             <div class="paperList folderList" style="margin-bottom:2em;"></div>
         </div>
+
         <div class="libraryOptions"></div>
     </div>
 </div>
+
+<div class="formDialogFooter">
+    <button is="emby-button" type="button" class="raised btnSubmit button-submit block formDialogFooterItem">
+        <span>${ButtonOk}</span>
+    </button>
+</div>

src/components/nowplayingbar/nowplayingbar.css

@@ -119,7 +119,6 @@
     height: 1.2em !important;
 }
 
-
 @media all and (max-width: 70em) {
 
     .nowPlayingBarRight .nowPlayingBarUserDataButtons {
@@ -133,52 +132,32 @@
     }
 }
 
-
 @media all and (max-width: 62em) {
-
     .nowPlayingBarCenter .nowPlayingBarCurrentTime {
         display: none !important;
     }
-
 }
 
 @media all and (max-width: 56em) {
-
     .nowPlayingBarCenter {
         display: none !important;
     }
-
 }
 
-
 @media all and (min-width: 56em) {
-
     .nowPlayingBarRight .playPauseButton {
         display: none;
     }
-
-}
-
-@media all and (max-width: 40em) {
-
-    .nowPlayingBarInfoContainer .nowPlayingImage {
-        display: none;
-    }
-
 }
 
 @media all and (max-width: 36em) {
-
     .nowPlayingBarRight .nowPlayingBarVolumeSliderContainer {
         display: none !important;
     }
-
 }
 
 @media all and (max-width: 24em) {
-
-  .nowPlayingBar .muteButton, .nowPlayingBar .unmuteButton {
-    display: none;
-  }
-
+    .nowPlayingBar .muteButton, .nowPlayingBar .unmuteButton {
+        display: none;
+    }
 }

src/components/nowplayingbar/nowplayingbar.js

@@ -572,7 +572,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
                     var userData = item.UserData || {};
                     var likes = userData.Likes == null ? '' : userData.Likes;
 
-                    nowPlayingUserData.innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="md-icon">&#xE87D;</i></button>';
+                    nowPlayingUserData.innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton mediaButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="md-icon">&#xE87D;</i></button>';
                 });
 
             }

src/components/playback/mediasession.js

@@ -273,11 +273,11 @@ define(['playbackManager', 'nowPlayingHelper', 'events', 'connectionManager'], f
         events.on(currentPlayer, 'timeupdate', onGeneralEvent);
     }
 
+    function execute(name) {
+        playbackManager[name](currentPlayer);
+    }
     if (navigator.mediaSession) {
 
-        function execute(name) {
-            playbackManager[name](currentPlayer);
-        }
 
         navigator.mediaSession.setActionHandler('previoustrack', function () {
             execute('previousTrack');
@@ -310,4 +310,4 @@ define(['playbackManager', 'nowPlayingHelper', 'events', 'connectionManager'], f
     });
 
     bindToPlayer(playbackManager.getCurrentPlayer());
-});
+});

src/components/playback/playbackmanager.js

@@ -1635,6 +1635,46 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
             getPlayerData(player).subtitleStreamIndex = index;
         };
 
+        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;
+            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;
+            player.setSubtitleOffset(value);
+        };
+
+        self.getPlayerSubtitleOffset = function(player) {
+            player = player || self._currentPlayer;
+            return player.getSubtitleOffset();
+        }
+
+        self.canHandleOffsetOnCurrentSubtitle = function(player) {
+            var index = self.getSubtitleStreamIndex(player);
+            return index !== -1  && self.isSubtitleStreamExternal(index, player);
+        }
+
         self.seek = function (ticks, player) {
 
             ticks = Math.max(0, ticks);
@@ -2536,7 +2576,6 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
 
                     } else {
 
-                        playerStartPositionTicks = null;
                         contentType = getMimeType(type.toLowerCase(), mediaSource.TranscodingContainer);
 
                         if (mediaUrl.toLowerCase().indexOf('copytimestamps=true') === -1) {

src/components/playback/playersettingsmenu.js

@@ -16,7 +16,6 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
         });
 
         var menuItems = options.map(function (o) {
-
             var opt = {
                 name: o.name,
                 id: o.bitrate,
@@ -39,25 +38,19 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
         return actionsheet.show({
             items: menuItems,
             positionTo: btn
-
         }).then(function (id) {
             var bitrate = parseInt(id);
             if (bitrate !== selectedId) {
-
                 playbackManager.setMaxStreamingBitrate({
-
                     enableAutomaticBitrateDetection: bitrate ? false : true,
                     maxBitrate: bitrate
-
                 }, player);
             }
         });
     }
 
     function showRepeatModeMenu(player, btn) {
-
         var menuItems = [];
-
         var currentValue = playbackManager.getRepeatMode(player);
 
         menuItems.push({
@@ -65,6 +58,7 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
             id: 'RepeatAll',
             selected: currentValue === 'RepeatAll'
         });
+
         menuItems.push({
             name: globalize.translate('RepeatOne'),
             id: 'RepeatOne',
@@ -80,9 +74,7 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
         return actionsheet.show({
             items: menuItems,
             positionTo: btn
-
         }).then(function (mode) {
-
             if (mode) {
                 playbackManager.setRepeatMode(mode, player);
             }
@@ -90,15 +82,14 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
     }
 
     function getQualitySecondaryText(player) {
-
         var state = playbackManager.getPlayerState(player);
-
         var isAutoEnabled = playbackManager.enableAutomaticBitrateDetection(player);
         var currentMaxBitrate = playbackManager.getMaxStreamingBitrate(player);
 
         var videoStream = playbackManager.currentMediaSource(player).MediaStreams.filter(function (stream) {
             return stream.Type === "Video";
         })[0];
+
         var videoWidth = videoStream ? videoStream.Width : null;
 
         var options = qualityoptions.getVideoQualityOptions({
@@ -109,7 +100,6 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
         });
 
         var menuItems = options.map(function (o) {
-
             var opt = {
                 name: o.name,
                 id: o.bitrate,
@@ -132,7 +122,6 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
         }
 
         selectedOption = selectedOption[0];
-
         var text = selectedOption.name;
 
         if (selectedOption.autoText) {
@@ -196,11 +185,6 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
             });
         }
 
-        menuItems.push({
-            name: globalize.translate('PlaybackSettings'),
-            id: 'playbacksettings'
-        });
-
         if (user && user.Policy.EnableVideoPlaybackTranscoding) {
             var secondaryQualityText = getQualitySecondaryText(player);
 
@@ -214,7 +198,6 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
         var repeatMode = playbackManager.getRepeatMode(player);
 
         if (supportedCommands.indexOf('SetRepeatMode') !== -1 && playbackManager.currentMediaSource(player).RunTimeTicks) {
-
             menuItems.push({
                 name: globalize.translate('RepeatMode'),
                 id: 'repeatmode',
@@ -223,34 +206,32 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
         }
 
         if (options.stats) {
-
             menuItems.push({
-                name: globalize.translate('StatsForNerds'),
+                name: globalize.translate('PlaybackData'),
                 id: 'stats',
                 asideText: null
             });
         }
 
-        menuItems.push({
-            name: globalize.translate('SubtitleSettings'),
-            id: 'subtitlesettings'
-        });
+        if (options.suboffset) {
+
+            menuItems.push({
+                name: globalize.translate('SubtitleOffset'),
+                id: 'suboffset',
+                asideText: null
+            });
+        }
 
         return actionsheet.show({
-
             items: menuItems,
             positionTo: options.positionTo
-
         }).then(function (id) {
-
             return handleSelectedOption(id, options, player);
         });
     }
 
     function show(options) {
-
         var player = options.player;
-
         var currentItem = playbackManager.currentItem(player);
 
         if (!currentItem || !currentItem.ServerId) {
@@ -258,50 +239,29 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
         }
 
         var apiClient = connectionManager.getApiClient(currentItem.ServerId);
-
         return apiClient.getCurrentUser().then(function (user) {
             return showWithUser(options, player, user);
         });
     }
 
-    function alertText(text) {
-
-        return new Promise(function (resolve, reject) {
-
-            require(['alert'], function (alert) {
-
-                alert(text).then(resolve);
-            });
-        });
-    }
-
-    function showSubtitleSettings(player, btn) {
-        return alertText(globalize.translate('SubtitleSettingsIntro'));
-    }
-
-    function showPlaybackSettings(player, btn) {
-        return alertText(globalize.translate('PlaybackSettingsIntro'));
-    }
-
     function handleSelectedOption(id, options, player) {
-
         switch (id) {
-
             case 'quality':
                 return showQualityMenu(player, options.positionTo);
             case 'aspectratio':
                 return showAspectRatioMenu(player, options.positionTo);
             case 'repeatmode':
                 return showRepeatModeMenu(player, options.positionTo);
-            case 'subtitlesettings':
-                return showSubtitleSettings(player, options.positionTo);
-            case 'playbacksettings':
-                return showPlaybackSettings(player, options.positionTo);
             case 'stats':
                 if (options.onOption) {
                     options.onOption('stats');
                 }
                 return Promise.resolve();
+            case 'suboffset':
+                if (options.onOption) {
+                    options.onOption('suboffset');
+                }
+                return Promise.resolve();
             default:
                 break;
         }

src/components/polyfills/objectassign.js

@@ -0,0 +1,23 @@
+if (typeof Object.assign != 'function') {
+    (function () {
+        Object.assign = function (target) {
+            'use strict';
+            if (target === undefined || target === null) {
+                throw new TypeError('Cannot convert undefined or null to object');
+            }
+
+            var output = Object(target);
+            for (var index = 1; index < arguments.length; index++) {
+                var source = arguments[index];
+                if (source !== undefined && source !== null) {
+                    for (var nextKey in source) {
+                        if (source.hasOwnProperty(nextKey)) {
+                            output[nextKey] = source[nextKey];
+                        }
+                    }
+                }
+            }
+            return output;
+        };
+    })();
+}

src/components/recordingcreator/recordingfields.js

@@ -38,7 +38,7 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
         var options = instance.options;
         var apiClient = connectionManager.getApiClient(options.serverId);
 
-        instance.querySelector('.recordingFields').classList.remove('hide');
+        options.parent.querySelector('.recordingFields').classList.remove('hide');
         return apiClient.getLiveTvProgram(options.programId, apiClient.getCurrentUserId()).then(function (program) {
             instance.TimerId = program.TimerId;
             instance.Status = program.Status;
@@ -254,4 +254,4 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
     };
 
     return RecordingEditor;
-});
+});

src/components/skinManager.js

@@ -7,7 +7,6 @@ define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdr
     function unloadTheme() {
         var elem = themeStyleElement;
         if (elem) {
-
             elem.parentNode.removeChild(elem);
             themeStyleElement = null;
             currentThemeId = null;
@@ -16,7 +15,6 @@ define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdr
 
     function loadUserSkin(options) {
         options = options || {};
-
         if (options.start) {
             Emby.Page.invokeShortcut(options.start);
         } else {
@@ -37,29 +35,14 @@ define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdr
             isDefault: true,
             isDefaultServerDashboard: true
         }, {
-            name: "Dark (green accent)",
-            id: "dark-green"
-        }, {
-            name: "Dark (red accent)",
-            id: "dark-red"
+            name: "Emby",
+            id: "emby",
         }, {
             name: "Light",
             id: "light"
         }, {
-            name: "Light (blue accent)",
-            id: "light-blue"
-        }, {
-            name: "Light (green accent)",
-            id: "light-green"
-        }, {
-            name: "Light (pink accent)",
-            id: "light-pink"
-        }, {
-            name: "Light (purple accent)",
-            id: "light-purple"
-        }, {
-            name: "Light (red accent)",
-            id: "light-red"
+            name: "Purple Haze",
+            id: "purple-haze"
         }, {
             name: "Windows Media Center",
             id: "wmc"
@@ -71,7 +54,7 @@ define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdr
         loadUserSkin: loadUserSkin
     };
 
-    function getThemeStylesheetInfo(id, requiresRegistration, isDefaultProperty) {
+    function getThemeStylesheetInfo(id, isDefaultProperty) {
         var themes = skinManager.getThemes();
         var defaultTheme;
         var selectedTheme;
@@ -122,14 +105,13 @@ define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdr
 
     skinManager.setTheme = function (id, context) {
         return new Promise(function (resolve, reject) {
-            var requiresRegistration = true;
             if (currentThemeId && currentThemeId === id) {
                 resolve();
                 return;
             }
 
             var isDefaultProperty = context === 'serverdashboard' ? 'isDefaultServerDashboard' : 'isDefault';
-            var info = getThemeStylesheetInfo(id, requiresRegistration, isDefaultProperty);
+            var info = getThemeStylesheetInfo(id, isDefaultProperty);
             if (currentThemeId && currentThemeId === info.themeId) {
                 resolve();
                 return;
@@ -181,21 +163,16 @@ define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdr
     document.addEventListener('viewshow', onViewBeforeShow);
 
     function playSound(path, volume) {
-
         lastSound = new Date().getTime();
-
         require(['howler'], function (howler) {
-
             try {
                 var sound = new Howl({
                     src: [path],
                     volume: volume || 0.1
                 });
-
                 sound.play();
                 currentSound = sound;
-            }
-            catch (err) {
+            } catch (err) {
                 console.log('Error playing sound: ' + err);
             }
         });

src/components/staticbackdrops.js

@@ -1,129 +0,0 @@
-define([], function () {
-    'use strict';
-
-    function getStaticBackdrops() {
-        var list = [];
-
-        list.push([
-            {
-                url: 'https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/images/wallpaper/bg1-1920.jpg',
-                width: 1920
-            }
-        ]);
-
-        list.push([
-            {
-                url: 'https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/images/wallpaper/bg2-1920.jpg',
-                width: 1920
-            }
-        ]);
-
-        list.push([
-            {
-                url: 'https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/images/wallpaper/bg3-1920.jpg',
-                width: 1920
-            }
-        ]);
-
-        list.push([
-            {
-                url: 'https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/images/wallpaper/bg4-1920.jpg',
-                width: 1920
-            }
-        ]);
-
-        list.push([
-            {
-                url: 'https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/images/wallpaper/bg5-1920.jpg',
-                width: 1920
-            }
-        ]);
-
-        list.push([
-            {
-                url: 'https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/images/wallpaper/bg6-1920.jpg',
-                width: 1920
-            }
-        ]);
-
-        list.push([
-            {
-                url: 'https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/images/wallpaper/bg7-1920.jpg',
-                width: 1920
-            }
-        ]);
-
-        list.push([
-            {
-                url: 'https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/images/wallpaper/bg8-1920.jpg',
-                width: 1920
-            }
-        ]);
-
-        list.push([
-            {
-                url: 'https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/images/wallpaper/bg9-1920.jpg',
-                width: 1920
-            }
-        ]);
-
-        list.push([
-            {
-                url: 'https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/images/wallpaper/bg10-1920.jpg',
-                width: 1920
-            }
-        ]);
-
-        list.push([
-            {
-                url: 'https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/images/wallpaper/bg11-1920.jpg',
-                width: 1920
-            }
-        ]);
-
-        list.push([
-            {
-                url: 'https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/images/wallpaper/bg12-1920.jpg',
-                width: 1920
-            }
-        ]);
-
-        list.push([
-            {
-                url: 'https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/images/wallpaper/bg13-1920.jpg',
-                width: 1920
-            }
-        ]);
-
-        list.push([
-            {
-                url: 'https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/images/wallpaper/bg14-1920.jpg',
-                width: 1920
-            }
-        ]);
-
-        list.push([
-            {
-                url: 'https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/images/wallpaper/bg15-1920.jpg',
-                width: 1920
-            }
-        ]);
-
-        return list;
-    }
-
-    function getRandomInt(min, max) {
-        return Math.floor(Math.random() * (max - min + 1)) + min;
-    }
-
-    function getRandomImageUrl() {
-        var images = getStaticBackdrops();
-        var index = getRandomInt(0, images.length - 1);
-        return images[index][0].url;
-    }
-
-    return {
-        getStaticBackdrops: getStaticBackdrops,
-        getRandomImageUrl: getRandomImageUrl
-    };
-});

src/components/subtitleeditor/subtitleeditor.template.html

@@ -2,7 +2,7 @@
     <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
     <h3 class="formDialogHeaderTitle">${Subtitles}</h3>
 
-    <a is="emby-linkbutton" data-autohide="true" class="button-link btnHelp flex align-items-center" href="https://web.archive.org/web/20181216115510/https://github.com/MediaBrowser/Wiki/wiki/Subtitles" target="_blank" style="margin-left:auto;margin-right:.5em;padding:.25em;" title="${Help}"><i class="md-icon">&#xE88E;</i><span style="margin-left:.25em;">${Help}</span></a>
+    <a is="emby-linkbutton" data-autohide="true" class="button-link btnHelp flex align-items-center" href="https://jellyfin.readthedocs.io/en/latest/media/subtitles/" target="_blank" style="margin-left:auto;margin-right:.5em;padding:.25em;" title="${Help}"><i class="md-icon">&#xE88E;</i><span style="margin-left:.25em;">${Help}</span></a>
 
 </div>
 <div class="formDialogContent smoothScrollY">

src/components/subtitlesync/subtitlesync.css

@@ -0,0 +1,48 @@
+.subtitleSyncContainer {
+    width: 40%;
+    margin-left: 30%;
+    margin-right: 30%;
+    height: 4.2em;
+    background: rgba(28,28,28,0.8);
+    border-radius: .3em;
+    color: #fff;
+    position: absolute;
+}
+
+.subtitleSync-closeButton {
+    position: absolute;
+    top: 0;
+    right: 0;
+    color: #ccc;
+    z-index: 2; 
+}
+
+.subtitleSyncTextField {
+    position: absolute;
+    left: 0;
+    width: 40%;
+    margin-left: 30%;
+    margin-right: 30%;
+    top: 0.1em;
+    text-align: center;
+    font-size: 20px;
+    color: white;
+    z-index: 2; 
+}
+
+#prompt {
+    flex-shrink: 0;
+}
+
+.subtitleSyncSliderContainer {
+    width: 98%;
+    margin-left: 1%;
+    margin-right: 1%;
+    top: 2.5em;
+    height: 1.4em;
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    flex-grow: 1;
+    border-radius: .3em;
+    z-index: 1; 
+}

src/components/subtitlesync/subtitlesync.js

@@ -0,0 +1,163 @@
+define(['playbackManager', 'text!./subtitlesync.template.html', 'css!./subtitlesync'], function (playbackManager, template, css) {
+    "use strict";
+
+    var player;
+    var subtitleSyncSlider;
+    var subtitleSyncTextField;
+    var subtitleSyncCloseButton;
+    var subtitleSyncContainer;
+
+    function init(instance) {
+
+        var parent = document.createElement('div');
+        parent.innerHTML = template;
+
+        subtitleSyncSlider = parent.querySelector(".subtitleSyncSlider");
+        subtitleSyncTextField = parent.querySelector(".subtitleSyncTextField");
+        subtitleSyncCloseButton = parent.querySelector(".subtitleSync-closeButton");
+        subtitleSyncContainer = parent.querySelector(".subtitleSyncContainer");
+
+        subtitleSyncContainer.classList.add("hide");
+
+        subtitleSyncTextField.updateOffset = function(offset) {
+            this.textContent = offset + "s";
+        }
+
+        subtitleSyncTextField.addEventListener("keypress", function(event) {
+
+            if(event.key === "Enter"){
+                // if input key is enter search for float pattern
+                var inputOffset = /[-+]?\d+\.?\d*/g.exec(this.textContent);
+                if(inputOffset) {
+                    inputOffset = inputOffset[0];
+
+                    // replace current text by considered offset
+                    this.textContent = inputOffset + "s";
+
+                    inputOffset = parseFloat(inputOffset);
+                    // set new offset
+                    playbackManager.setSubtitleOffset(inputOffset, player);
+                    // synchronize with slider value
+                    subtitleSyncSlider.updateOffset(
+                        getPercentageFromOffset(inputOffset));
+                } else {
+                    this.textContent = (playbackManager.getPlayerSubtitleOffset(player) || 0) + "s";
+                }
+                this.hasFocus = false;
+                event.preventDefault();
+            } else {
+                // keep focus to prevent fade with bottom layout
+                this.hasFocus = true;
+                if(event.key.match(/[+-\d.s]/) === null) {
+                    event.preventDefault();
+                }
+            }
+        });
+
+        subtitleSyncSlider.updateOffset = function(percent) {
+            // default value is 0s = 50%
+            this.value = percent === undefined ? 50 : percent;
+        }
+
+        subtitleSyncSlider.addEventListener("change", function () {
+            // set new offset
+            playbackManager.setSubtitleOffset(getOffsetFromPercentage(this.value), player);
+            // synchronize with textField value
+            subtitleSyncTextField.updateOffset(
+                getOffsetFromPercentage(this.value));
+        });
+
+        subtitleSyncSlider.addEventListener("touchmove", function () {
+            // set new offset
+            playbackManager.setSubtitleOffset(getOffsetFromPercentage(this.value), player);
+            // synchronize with textField value
+            subtitleSyncTextField.updateOffset(
+                getOffsetFromPercentage(this.value));
+        });
+
+        subtitleSyncSlider.getBubbleHtml = function (value) {
+            var newOffset = getOffsetFromPercentage(value);
+            return '<h1 class="sliderBubbleText">' +
+            (newOffset > 0 ? "+" : "") + parseFloat(newOffset) + "s" +
+            "</h1>";
+        };
+
+        subtitleSyncCloseButton.addEventListener("click", function() {
+            playbackManager.disableShowingSubtitleOffset(player);
+            SubtitleSync.prototype.toggle("forceToHide");
+        });
+
+        document.body.appendChild(parent);
+
+        instance.element = parent;
+    }
+
+
+    function getOffsetFromPercentage(value) {
+        // convert percent to fraction
+        var offset = (value - 50) / 50;
+        // multiply by offset min/max range value (-x to +x) :
+        offset *= 30;
+        return offset.toFixed(1);
+    };
+
+    function getPercentageFromOffset(value) {
+        // divide by offset min/max range value (-x to +x) :
+        var percentValue = value / 30;
+        // convert fraction to percent
+        percentValue *= 50;
+        percentValue += 50;
+        return Math.min(100, Math.max(0, percentValue.toFixed()));
+    };
+
+    function SubtitleSync(currentPlayer) {
+        player = currentPlayer;
+        init(this);
+    }
+
+    SubtitleSync.prototype.destroy = function(){
+        SubtitleSync.prototype.toggle("forceToHide");
+        if(player){
+            playbackManager.disableShowingSubtitleOffset(player);
+            playbackManager.setSubtitleOffset(0, player);
+        }
+        var elem = this.element;
+        if (elem) {
+            elem.parentNode.removeChild(elem);
+            this.element = null;
+        }
+    }
+
+    SubtitleSync.prototype.toggle = function(action) {
+
+        if(player && playbackManager.supportSubtitleOffset(player)){
+
+            switch(action) {
+                case undefined:
+                    // if showing subtitle sync is enabled
+                    if(playbackManager.isShowingSubtitleOffsetEnabled(player) && 
+                        // if there is an external subtitle stream enabled
+                        playbackManager.canHandleOffsetOnCurrentSubtitle(player)){
+                            // if no subtitle offset is defined
+                            if(!playbackManager.getPlayerSubtitleOffset(player)) {
+                                // set default offset to '0' = 50%
+                                subtitleSyncSlider.value = "50";
+                                subtitleSyncTextField.textContent = "0s";
+                                playbackManager.setSubtitleOffset(0, player);
+                            }
+                            // show subtitle sync
+                            subtitleSyncContainer.classList.remove("hide");
+                            break; // stop here
+                    } // else continue and hide
+                case "hide":
+                    if(subtitleSyncTextField.hasFocus){break;} // else continue and hide
+                case "forceToHide":
+                    subtitleSyncContainer.classList.add("hide");
+                    break;
+            }
+
+        }
+    }
+
+    return SubtitleSync;
+});

src/components/subtitlesync/subtitlesync.template.html

@@ -0,0 +1,7 @@
+<div class="subtitleSyncContainer">
+    <button type="button" is="paper-icon-button-light" class="subtitleSync-closeButton"><i class="md-icon">close</i></button>
+    <div class="subtitleSyncTextField" contenteditable="true" spellcheck="false">0s</div>
+    <div class="sliderContainer subtitleSyncSliderContainer">
+        <input is="emby-slider" type="range" step="1" min="0" max="100" value="50" class="subtitleSyncSlider" />
+    </div>
+</div>

src/components/themes/appletv/theme.css

@@ -55,7 +55,7 @@ html {
 
 .backgroundContainer,
 .dialog {
-    background: url(https://github.com/MediaBrowser/Emby.Resources/raw/master/images/wallpaper/atv1-1080.png) center center no-repeat #D5E9F2;
+    background: #D5E9F2;
     -webkit-background-size: 100% 100%;
     background-size: 100% 100%
 }
@@ -71,9 +71,14 @@ html {
     background: #f0f0f0
 }
 
+.paper-icon-button-light:hover {
+    color: #00a4dc;
+    background-color: rgba(0,164,220, .2);
+    transition: 0.2s;
+}
+
 .paper-icon-button-light:focus {
     color: #00a4dc;
-    background-color: rgba(0,164,220, .2)
 }
 
 .fab,
@@ -281,11 +286,19 @@ html {
     border: .07em solid rgba(0, 0, 0, .158)
 }
 
-.emby-checkbox:checked+span+span+.checkboxOutline,
+.emby-checkbox:checked+span+.checkboxOutline,
 .emby-select-withcolor:focus {
     border-color: #00a4dc
 }
 
+.emby-checkbox:focus+span+.checkboxOutline {
+    border-color: #fff;
+}
+
+.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
+    border-color: #00a4dc;
+}
+
 .emby-select-withcolor>option {
     color: #000;
     background: #fff
@@ -296,11 +309,7 @@ html {
     color: #fff
 }
 
-.emby-checkbox:focus+span+.emby-checkbox-focushelper {
-    background-color: rgba(0,164,220, .26)
-}
-
-.emby-checkbox:checked+span+span+.checkboxOutline,
+.emby-checkbox:checked+span+.checkboxOutline,
 .itemProgressBarForeground {
     background-color: #00a4dc
 }

src/components/themes/blueradiance/theme.css

@@ -58,9 +58,14 @@ html {
     }
 }
 
+.paper-icon-button-light:hover {
+    color: #00a4dc;
+    background-color: rgba(0,164,220, .2);
+    transition: 0.2s;
+}
+
 .paper-icon-button-light:focus {
     color: #00a4dc;
-    background-color: rgba(0,164,220, .2)
 }
 
 .fab,
@@ -274,15 +279,19 @@ html {
     color: #fff !important
 }
 
-.emby-checkbox:checked+span+span+.checkboxOutline {
+.emby-checkbox:checked+span+.checkboxOutline {
     border-color: #00a4dc
 }
 
-.emby-checkbox:focus+span+.emby-checkbox-focushelper {
-    background-color: rgba(0,164,220, .26)
+.emby-checkbox:focus+span+.checkboxOutline {
+    border-color: #fff;
 }
 
-.emby-checkbox:checked+span+span+.checkboxOutline,
+.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
+    border-color: #00a4dc;
+}
+
+.emby-checkbox:checked+span+.checkboxOutline,
 .itemProgressBarForeground {
     background-color: #00a4dc
 }

src/components/themes/dark-red/theme.css

@@ -1,449 +0,0 @@
-.skinHeader,
-html {
-    color: #eee;
-    color: rgba(255, 255, 255, .87)
-}
-
-.wizardStartForm,
-.ui-corner-all,
-.ui-shadow {
-  background-color: #c33
-}
-
-.emby-collapsible-button {
-    border-color: #383838;
-    border-color: rgba(255, 255, 255, .135)
-}
-
-.skinHeader {
-    color: #ccc;
-    color: rgba(255, 255, 255, .78)
-}
-
-.skinHeader-withBackground {
-    background-color: #c33;
-    -webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
-    box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37)
-}
-
-.osdHeader {
-    -webkit-box-shadow: none !important;
-    box-shadow: none !important
-}
-
-.skinHeader.semiTransparent {
-    backdrop-filter: none !important;
-    background-color: rgba(0, 0, 0, .3);
-    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
-    background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
-    background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
-    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
-    -webkit-box-shadow: none;
-    box-shadow: none
-}
-
-.pageTitleWithDefaultLogo {
-    background-image: url(../logowhite.png)
-}
-
-.backgroundContainer,
-.dialog,
-html {
-    background-color: #282828
-}
-
-.backgroundContainer.withBackdrop {
-    background-color: rgba(0, 0, 0, .86)
-}
-
-.paper-icon-button-light:focus {
-    color: #c33;
-    background-color: rgba(204, 51, 51, .2)
-}
-
-.skinHeader-withBackground .paper-icon-button-light:focus {
-    color: #fff;
-    background-color: rgba(255, 255, 255, .2)
-}
-
-.fab,
-.raised {
-    background: #404040;
-    color: #fff
-}
-
-.fab:focus,
-.raised:focus {
-    background: #505050
-}
-
-.button-submit {
-    background: #c33
-}
-
-.button-submit:focus {
-    background: #D83F3F
-}
-
-.checkboxLabel {
-    color: inherit
-}
-
-.checkboxListLabel,
-.inputLabel,
-.inputLabelUnfocused,
-.paperListLabel,
-.textareaLabelUnfocused {
-    color: #bbb;
-    color: rgba(255, 255, 255, .7)
-}
-
-.inputLabelFocused,
-.selectLabelFocused,
-.textareaLabelFocused {
-    color: #c33
-}
-
-.checkboxOutline {
-    border-color: currentColor
-}
-
-.collapseContent,
-.formDialogFooter:not(.formDialogFooter-clear),
-.formDialogHeader:not(.formDialogHeader-clear),
-.paperList,
-.visualCardBox {
-    background-color: #222
-}
-
-.defaultCardBackground1 {
-    background-color: #d2b019
-}
-
-.defaultCardBackground2 {
-    background-color: #338abb
-}
-
-.defaultCardBackground3 {
-    background-color: #6b689d
-}
-
-.defaultCardBackground4 {
-    background-color: #dd452b
-}
-
-.defaultCardBackground5 {
-    background-color: #5ccea9
-}
-
-.cardText-secondary,
-.fieldDescription,
-.guide-programNameCaret,
-.listItem .secondary,
-.nowPlayingBarSecondaryText,
-.programSecondaryTitle,
-.secondaryText {
-    color: #999;
-    color: rgba(255, 255, 255, .5)
-}
-
-.actionsheetDivider {
-    background: #444;
-    background: rgba(255, 255, 255, .14)
-}
-
-.cardFooter-vibrant .cardText-secondary {
-    color: inherit;
-    opacity: .5
-}
-
-.actionSheetMenuItem:hover {
-    background-color: #222
-}
-
-.toast {
-    background: #303030;
-    color: #fff;
-    color: rgba(255, 255, 255, .87)
-}
-
-.appfooter {
-    background: #101010;
-    color: #ccc;
-    color: rgba(255, 255, 255, .78)
-}
-
-@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
-    .appfooter-blurred {
-        background: rgba(24, 24, 24, .7);
-        -webkit-backdrop-filter: blur(20px);
-        backdrop-filter: blur(20px)
-    }
-}
-
-.itemSelectionPanel {
-    border: 1px solid #c33
-}
-
-.selectionCommandsPanel {
-    background: #c33;
-    color: #fff
-}
-
-.upNextDialog-countdownText {
-    color: #c33
-}
-
-.alphaPickerButton {
-    color: #999;
-    color: rgba(255, 255, 255, .5);
-    background-color: transparent
-}
-
-.alphaPickerButton-selected {
-    color: #fff
-}
-
-.alphaPickerButton-tv:focus {
-    background-color: #c33;
-    color: #fff !important
-}
-
-.detailTableBodyRow-shaded:nth-child(even) {
-    background: #1c1c1c;
-    background: rgba(30, 30, 30, .9)
-}
-
-.listItem-border {
-    border-color: rgba(30, 30, 30, .9) !important
-}
-
-.listItem:focus {
-    background: #333
-}
-
-.progressring-spiner {
-    border-color: #c33
-}
-
-.button-flat-accent,
-.button-link {
-    color: #c33
-}
-
-.mediaInfoText {
-    color: #ddd;
-    background: rgba(170, 170, 190, .2)
-}
-
-.mediaInfoTimerIcon,
-.starIcon {
-    color: #CB272A
-}
-
-.emby-input,
-.emby-textarea {
-    color: inherit;
-    background: #1c1c1c;
-    border: .07em solid #1c1c1c;
-    -webkit-border-radius: .15em;
-    border-radius: .15em
-}
-
-.emby-input:focus,
-.emby-textarea:focus {
-    border-color: #c33
-}
-
-.emby-select-withcolor {
-    color: inherit;
-    background: #1c1c1c;
-    border: .07em solid #1c1c1c
-}
-
-.emby-select-withcolor>option {
-    color: inherit;
-    background: #222
-}
-
-.emby-select-withcolor:focus {
-    border-color: #c33 !important
-}
-
-.emby-select-tv-withcolor:focus {
-    background-color: #c33 !important;
-    color: #fff !important
-}
-
-.emby-checkbox:checked+span+span+.checkboxOutline {
-    border-color: #c33
-}
-
-.emby-checkbox:focus+span+.emby-checkbox-focushelper {
-    background-color: rgba(204, 51, 51, .26)
-}
-
-.emby-checkbox:checked+span+span+.checkboxOutline,
-.itemProgressBarForeground {
-    background-color: #c33
-}
-
-.itemProgressBarForeground-recording {
-    background-color: #CB272A
-}
-
-.countIndicator,
-.playedIndicator {
-    background: #c33
-}
-
-.fullSyncIndicator {
-    background: #c33;
-    color: #fff
-}
-
-.mainDrawer {
-    background-color: #1c1c1f;
-    color: #ccc;
-    color: rgba(255, 255, 255, .7)
-}
-
-.navMenuOption:hover {
-    background: #252528
-}
-
-.navMenuOption-selected {
-    background: #c33 !important;
-    color: #fff
-}
-
-.emby-button-focusscale:focus {
-    background: #c33;
-    color: #fff
-}
-
-.emby-tab-button {
-    color: #999;
-    color: rgba(255, 255, 255, .5)
-}
-
-.emby-tab-button-active,
-.emby-tab-button-active.emby-button-tv {
-    color: #fff
-}
-
-.emby-tab-button.emby-button-tv:focus {
-    color: #fff;
-    background: 0 0
-}
-
-.channelPrograms,
-.guide-channelHeaderCell,
-.programCell {
-    border-color: #383838
-}
-
-.programCell-sports {
-    background: #3949AB !important
-}
-
-.programCell-movie {
-    background: #5E35B1 !important
-}
-
-.programCell-kids {
-    background: #039BE5 !important
-}
-
-.programCell-news {
-    background: #43A047 !important
-}
-
-.programCell-active {
-    background: #1e1e1e !important
-}
-
-.guide-channelHeaderCell:focus,
-.programCell:focus {
-    background-color: #c33 !important;
-    color: #fff !important
-}
-
-.guide-programTextIcon {
-    color: #1e1e1e;
-    background: #555
-}
-
-.guide-headerTimeslots {
-    color: inherit
-}
-
-.guide-date-tab-button {
-    color: #555;
-    color: rgba(255, 255, 255, .3)
-}
-
-.guide-date-tab-button.emby-tab-button-active,
-.guide-date-tab-button:focus {
-    color: #c33
-}
-
-.guide-date-tab-button.emby-button-tv:focus {
-    background-color: #c33;
-    color: #fff
-}
-
-.itemBackdropFader {
-    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#191919));
-    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #191919);
-    background: -o-linear-gradient(rgba(0, 0, 0, 0), #191919);
-    background: linear-gradient(rgba(0, 0, 0, 0), #191919)
-}
-
-.infoBanner {
-    color: #ddd;
-    background: #111;
-    padding: 1em;
-    -webkit-border-radius: .25em;
-    border-radius: .25em
-}
-
-.ratingbutton-icon-withrating {
-    color: #c33
-}
-
-.downloadbutton-icon-complete,
-.downloadbutton-icon-on {
-    color: #4285F4
-}
-
-.playstatebutton-icon-played {
-    color: #c33
-}
-
-.repeatButton-active {
-    color: #4285F4
-}
-
-.card:focus .card-focuscontent {
-    border-color: #c33
-}
-
-.layout-desktop ::-webkit-scrollbar {
-    width: 1em;
-    height: 1em
-}
-
-::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
-}
-
-::-webkit-scrollbar-track-piece {
-    background-color: #3b3b3b
-}
-
-::-webkit-scrollbar-thumb:horizontal,
-::-webkit-scrollbar-thumb:vertical {
-    -webkit-border-radius: 2px;
-    background: center no-repeat #888
-}

src/components/themes/dark/theme.css

@@ -43,9 +43,14 @@ html {
     background-color: rgba(0, 0, 0, .86)
 }
 
+.paper-icon-button-light:hover {
+    color: #00a4dc;
+    background-color: rgba(0,164,220, .2);
+    transition: 0.2s;
+}
+
 .paper-icon-button-light:focus {
     color: #00a4dc;
-    background-color: rgba(0,164,220, .2)
 }
 
 .fab,
@@ -259,15 +264,19 @@ html {
     color: #fff !important
 }
 
-.emby-checkbox:checked+span+span+.checkboxOutline {
+.emby-checkbox:checked+span+.checkboxOutline {
     border-color: #00a4dc
 }
 
-.emby-checkbox:focus+span+.emby-checkbox-focushelper {
-    background-color: rgba(0,164,220, .26)
+.emby-checkbox:focus+span+.checkboxOutline {
+    border-color: #fff;
 }
 
-.emby-checkbox:checked+span+span+.checkboxOutline,
+.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
+    border-color: #00a4dc;
+}
+
+.emby-checkbox:checked+span+.checkboxOutline,
 .itemProgressBarForeground {
     background-color: #00a4dc
 }

src/components/themes/emby/theme.css

@@ -43,9 +43,14 @@ html {
     background-color: rgba(0, 0, 0, .86)
 }
 
+.paper-icon-button-light:hover {
+    color: #52b54b;
+    background-color: rgba(82, 181, 75, .2);
+    transition: 0.2s;
+}
+
 .paper-icon-button-light:focus {
     color: #52b54b;
-    background-color: rgba(82, 181, 75, .2)
 }
 
 .fab,
@@ -259,15 +264,19 @@ html {
     color: #fff !important
 }
 
-.emby-checkbox:checked+span+span+.checkboxOutline {
+.emby-checkbox:checked+span+.checkboxOutline {
     border-color: #52b54b
 }
 
-.emby-checkbox:focus+span+.emby-checkbox-focushelper {
-    background-color: rgba(82, 181, 75, .26)
+.emby-checkbox:focus+span+.checkboxOutline {
+    border-color: #fff;
 }
 
-.emby-checkbox:checked+span+span+.checkboxOutline,
+.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
+    border-color: #52b54b;
+}
+
+.emby-checkbox:checked+span+.checkboxOutline,
 .itemProgressBarForeground {
     background-color: #52b54b
 }

src/components/themes/light-blue/theme.css

@@ -1,433 +0,0 @@
-.skinHeader,
-html {
-    color: #222;
-    color: rgba(0, 0, 0, .87)
-}
-
-.wizardStartForm,
-.ui-corner-all,
-.ui-shadow {
-  background-color: #2196F3
-}
-
-.emby-collapsible-button {
-    border-color: #ccc;
-    border-color: rgba(0, 0, 0, .158)
-}
-
-.collapseContent {
-    background-color: #eaeaea
-}
-
-.skinHeader-withBackground {
-    background-color: #2196F3;
-    -webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
-    box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
-    color: #fff
-}
-
-.osdHeader {
-    -webkit-box-shadow: none !important;
-    box-shadow: none !important
-}
-
-.skinHeader.semiTransparent {
-    -webkit-backdrop-filter: none !important;
-    backdrop-filter: none !important;
-    background-color: rgba(0, 0, 0, .3);
-    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
-    background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
-    background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
-    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0))
-}
-
-.pageTitleWithDefaultLogo {
-    background-image: url(../logowhite.png)
-}
-
-.backgroundContainer,
-html {
-    background-color: #f2f2f2
-}
-
-.backgroundContainer.withBackdrop {
-    background-color: rgba(255, 255, 255, .94)
-}
-
-.dialog {
-    background-color: #f0f0f0
-}
-
-.paper-icon-button-light:focus {
-    color: #2196F3;
-    background-color: rgba(33, 150, 243, .2)
-}
-
-.skinHeader-withBackground .paper-icon-button-light:focus {
-    color: #fff;
-    background-color: rgba(255, 255, 255, .2)
-}
-
-.fab,
-.raised {
-    background: #d8d8d8;
-    color: inherit
-}
-
-.fab:focus,
-.raised:focus {
-    background: #ccc;
-    color: inherit
-}
-
-.button-submit {
-    background: #2196F3;
-    color: #fff
-}
-
-.button-submit:focus {
-    background: #2DA2FF;
-    color: #fff
-}
-
-.checkboxLabel {
-    color: inherit
-}
-
-.checkboxListLabel,
-.inputLabel,
-.inputLabelUnfocused,
-.paperListLabel,
-.textareaLabelUnfocused {
-    color: #555
-}
-
-.button-link,
-.inputLabelFocused,
-.selectLabelFocused,
-.textareaLabelFocused {
-    color: #2196F3
-}
-
-.checkboxOutline {
-    border-color: currentColor
-}
-
-.paperList,
-.visualCardBox {
-    background-color: #fff
-}
-
-.defaultCardBackground1 {
-    background-color: #009688
-}
-
-.defaultCardBackground2 {
-    background-color: #D32F2F
-}
-
-.defaultCardBackground3 {
-    background-color: #0288D1
-}
-
-.defaultCardBackground4 {
-    background-color: #388E3C
-}
-
-.defaultCardBackground5 {
-    background-color: #F57F17
-}
-
-.formDialogHeader:not(.formDialogHeader-clear) {
-    background-color: #2196F3;
-    color: #fff
-}
-
-.formDialogFooter:not(.formDialogFooter-clear) {
-    background-color: #f0f0f0;
-    border-top: 1px solid rgba(0, 0, 0, .08);
-    color: inherit
-}
-
-.cardText-secondary,
-.fieldDescription,
-.guide-programNameCaret,
-.listItem .secondary,
-.nowPlayingBarSecondaryText,
-.programSecondaryTitle,
-.secondaryText {
-    color: #888
-}
-
-.cardFooter-vibrant .cardText-secondary {
-    color: inherit;
-    opacity: .5
-}
-
-.formDialogHeader a,
-.toast {
-    color: #fff
-}
-
-.actionSheetMenuItem:hover {
-    background-color: #ddd
-}
-
-.toast {
-    background: #303030;
-    color: rgba(255, 255, 255, .87)
-}
-
-.appfooter {
-    background: #282828;
-    color: #ccc;
-    color: rgba(255, 255, 255, .78)
-}
-
-@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
-    .appfooter-blurred {
-        background: rgba(24, 24, 24, .7);
-        -webkit-backdrop-filter: blur(20px);
-        backdrop-filter: blur(20px)
-    }
-}
-
-.nowPlayingBarSecondaryText {
-    color: #999
-}
-
-.itemSelectionPanel {
-    border: 1px solid #2196F3
-}
-
-.selectionCommandsPanel {
-    background: #2196F3;
-    color: #fff
-}
-
-.upNextDialog-countdownText {
-    color: #2196F3
-}
-
-.alphaPickerButton {
-    color: #555;
-    color: rgba(0, 0, 0, .7);
-    background-color: transparent
-}
-
-.alphaPickerButton-selected,
-.alphaPickerButton-tv:focus {
-    background-color: #2196F3;
-    color: #fff !important
-}
-
-.detailTableBodyRow-shaded:nth-child(even) {
-    background: #f8f8f8
-}
-
-.listItem-border {
-    border-color: #f0f0f0 !important
-}
-
-.listItem:focus {
-    background: #ddd
-}
-
-.progressring-spiner {
-    border-color: #2196F3
-}
-
-.mediaInfoText {
-    color: #333;
-    background: #fff
-}
-
-.mediaInfoTimerIcon,
-.starIcon {
-    color: #CB272A
-}
-
-.emby-input,
-.emby-textarea {
-    color: inherit;
-    background: #fff;
-    border: .07em solid rgba(0, 0, 0, .158);
-    -webkit-border-radius: .15em;
-    border-radius: .15em
-}
-
-.emby-input:focus,
-.emby-textarea:focus {
-    border-color: #2196F3
-}
-
-.emby-select-withcolor {
-    color: inherit;
-    background: #fff;
-    border: .07em solid rgba(0, 0, 0, .158)
-}
-
-.emby-checkbox:checked+span+span+.checkboxOutline,
-.emby-select-withcolor:focus {
-    border-color: #2196F3
-}
-
-.emby-select-withcolor>option {
-    color: #000;
-    background: #fff
-}
-
-.emby-select-tv-withcolor:focus {
-    background-color: #2196F3;
-    color: #fff
-}
-
-.emby-checkbox:focus+span+.emby-checkbox-focushelper {
-    background-color: rgba(33, 150, 243, .26)
-}
-
-.emby-checkbox:checked+span+span+.checkboxOutline,
-.itemProgressBarForeground {
-    background-color: #2196F3
-}
-
-.itemProgressBarForeground-recording {
-    background-color: #CB272A
-}
-
-.countIndicator,
-.fullSyncIndicator,
-.playedIndicator {
-    background: #2196F3
-}
-
-.fullSyncIndicator {
-    color: #fff
-}
-
-.mainDrawer {
-    background: #fff
-}
-
-.navMenuOption:hover {
-    background: #f2f2f2
-}
-
-.navMenuOption-selected {
-    background: #2196F3 !important;
-    color: #fff
-}
-
-.emby-button-focusscale:focus {
-    background: #2196F3;
-    color: #fff
-}
-
-.emby-tab-button {
-    color: #fff;
-    color: rgba(255, 255, 255, .5)
-}
-
-.emby-tab-button-active,
-.emby-tab-button-active.emby-button-tv {
-    color: #fff;
-    color: rgba(255, 255, 255, 1)
-}
-
-.emby-tab-button.emby-button-tv:focus {
-    color: #fff;
-    color: rgba(255, 255, 255, 1);
-    background: 0 0
-}
-
-.channelPrograms,
-.guide-channelHeaderCell,
-.programCell {
-    border-color: rgba(0, 0, 0, .12)
-}
-
-.programCell-sports {
-    background: #3949AB !important
-}
-
-.programCell-movie {
-    background: #5E35B1 !important
-}
-
-.programCell-kids {
-    background: #039BE5 !important
-}
-
-.programCell-news {
-    background: #43A047 !important
-}
-
-.programCell-active {
-    background: rgba(0, 0, 0, .1) !important
-}
-
-.guide-channelHeaderCell:focus,
-.programCell:focus {
-    background-color: #2196F3 !important;
-    color: #fff !important
-}
-
-.guide-programTextIcon {
-    color: #1e1e1e;
-    background: #555
-}
-
-.guide-headerTimeslots {
-    color: inherit
-}
-
-.guide-date-tab-button {
-    color: #555;
-    color: rgba(0, 0, 0, .54)
-}
-
-.guide-date-tab-button.emby-tab-button-active,
-.guide-date-tab-button:focus {
-    color: #2196F3
-}
-
-.guide-date-tab-button.emby-button-tv:focus {
-    background-color: #2196F3;
-    color: #fff
-}
-
-.itemBackdropFader {
-    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#f2f2f2));
-    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #f2f2f2);
-    background: -o-linear-gradient(rgba(0, 0, 0, 0), #f2f2f2);
-    background: linear-gradient(rgba(0, 0, 0, 0), #f2f2f2)
-}
-
-.infoBanner {
-    color: #000;
-    background: #fff3a5;
-    padding: 1em;
-    -webkit-border-radius: .25em;
-    border-radius: .25em
-}
-
-.ratingbutton-icon-withrating {
-    color: #c33
-}
-
-.downloadbutton-icon-complete,
-.downloadbutton-icon-on {
-    color: #4285F4
-}
-
-.playstatebutton-icon-played {
-    color: #c33
-}
-
-.repeatButton-active {
-    color: #4285F4
-}
-
-.card:focus .card-focuscontent {
-    border-color: #2196F3
-}

src/components/themes/light-classic/theme.css

@@ -1,434 +0,0 @@
-.skinHeader,
-html {
-    color: #222;
-    color: rgba(0, 0, 0, .87)
-}
-
-.wizardStartForm,
-.ui-corner-all,
-.ui-shadow {
-  background-color: #303030
-}
-
-.emby-collapsible-button {
-    border-color: #ccc;
-    border-color: rgba(0, 0, 0, .158)
-}
-
-.collapseContent {
-    background-color: #eaeaea
-}
-
-.skinHeader-withBackground {
-    background-color: #303030;
-    color: #ccc;
-    color: rgba(255, 255, 255, .87);
-    -webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
-    box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37)
-}
-
-.osdHeader {
-    -webkit-box-shadow: none !important;
-    box-shadow: none !important
-}
-
-.skinHeader.semiTransparent {
-    -webkit-backdrop-filter: none !important;
-    backdrop-filter: none !important;
-    background-color: rgba(0, 0, 0, .3);
-    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
-    background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
-    background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
-    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0))
-}
-
-.pageTitleWithDefaultLogo {
-    background-image: url(../logowhite.png)
-}
-
-.backgroundContainer,
-html {
-    background-color: #f2f2f2
-}
-
-.backgroundContainer.withBackdrop {
-    background-color: rgba(255, 255, 255, .94)
-}
-
-.dialog {
-    background-color: #f0f0f0
-}
-
-.paper-icon-button-light:focus {
-    color: #52b54b;
-    background-color: rgba(82, 181, 75, .2)
-}
-
-.fab,
-.raised {
-    background: #d8d8d8;
-    color: inherit
-}
-
-.fab:focus,
-.raised:focus {
-    background: #ccc
-}
-
-.button-submit {
-    background: #52b54b;
-    color: #fff
-}
-
-.button-submit:focus {
-    background: #5EC157
-}
-
-.checkboxLabel {
-    color: inherit
-}
-
-.checkboxListLabel,
-.inputLabel,
-.inputLabelUnfocused,
-.paperListLabel,
-.textareaLabelUnfocused {
-    color: #555
-}
-
-.button-link,
-.inputLabelFocused,
-.selectLabelFocused,
-.textareaLabelFocused {
-    color: green
-}
-
-.checkboxOutline {
-    border-color: currentColor
-}
-
-.paperList,
-.visualCardBox {
-    background-color: #fff
-}
-
-.defaultCardBackground1 {
-    background-color: #009688
-}
-
-.defaultCardBackground2 {
-    background-color: #D32F2F
-}
-
-.defaultCardBackground3 {
-    background-color: #0288D1
-}
-
-.defaultCardBackground4 {
-    background-color: #388E3C
-}
-
-.defaultCardBackground5 {
-    background-color: #F57F17
-}
-
-.formDialogHeader:not(.formDialogHeader-clear) {
-    background-color: #52b54b;
-    color: #fff
-}
-
-.formDialogFooter:not(.formDialogFooter-clear) {
-    background-color: #f0f0f0;
-    border-top: 1px solid #ddd;
-    border-top: 1px solid rgba(0, 0, 0, .08);
-    color: inherit
-}
-
-.cardText-secondary,
-.fieldDescription,
-.guide-programNameCaret,
-.listItem .secondary,
-.nowPlayingBarSecondaryText,
-.programSecondaryTitle,
-.secondaryText {
-    color: #888
-}
-
-.actionsheetDivider {
-    background: #ddd;
-    background: rgba(0, 0, 0, .14)
-}
-
-.cardFooter-vibrant .cardText-secondary {
-    color: inherit;
-    opacity: .5
-}
-
-.formDialogHeader a,
-.toast {
-    color: #fff
-}
-
-.actionSheetMenuItem:hover {
-    background-color: #ddd
-}
-
-.toast {
-    background: #303030;
-    color: rgba(255, 255, 255, .87)
-}
-
-.appfooter {
-    background: #282828;
-    color: #ccc;
-    color: rgba(255, 255, 255, .78)
-}
-
-@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
-    .appfooter-blurred {
-        background: rgba(24, 24, 24, .7);
-        -webkit-backdrop-filter: blur(20px);
-        backdrop-filter: blur(20px)
-    }
-}
-
-.nowPlayingBarSecondaryText {
-    color: #999
-}
-
-.itemSelectionPanel {
-    border: 1px solid #52b54b
-}
-
-.selectionCommandsPanel {
-    background: #52b54b;
-    color: #fff
-}
-
-.upNextDialog-countdownText {
-    color: #52b54b
-}
-
-.alphaPickerButton {
-    color: #555;
-    color: rgba(0, 0, 0, .7);
-    background-color: transparent
-}
-
-.alphaPickerButton-selected,
-.alphaPickerButton-tv:focus {
-    background-color: #52b54b;
-    color: #fff !important
-}
-
-.detailTableBodyRow-shaded:nth-child(even) {
-    background: #f8f8f8
-}
-
-.listItem-border {
-    border-color: #f0f0f0 !important
-}
-
-.listItem:focus {
-    background: #ddd
-}
-
-.progressring-spiner {
-    border-color: #52b54b
-}
-
-.mediaInfoText {
-    color: #333;
-    background: #fff
-}
-
-.mediaInfoTimerIcon,
-.starIcon {
-    color: #CB272A
-}
-
-.emby-input,
-.emby-textarea {
-    color: inherit;
-    background: #fff;
-    border: .07em solid rgba(0, 0, 0, .158);
-    -webkit-border-radius: .15em;
-    border-radius: .15em
-}
-
-.emby-input:focus,
-.emby-textarea:focus {
-    border-color: #52b54b
-}
-
-.emby-select-withcolor {
-    color: inherit;
-    background: #fff;
-    border: .07em solid rgba(0, 0, 0, .158)
-}
-
-.emby-checkbox:checked+span+span+.checkboxOutline,
-.emby-select-withcolor:focus {
-    border-color: #52b54b
-}
-
-.emby-select-withcolor>option {
-    color: #000;
-    background: #fff
-}
-
-.emby-select-tv-withcolor:focus {
-    background-color: #52b54b;
-    color: #fff
-}
-
-.emby-checkbox:focus+span+.emby-checkbox-focushelper {
-    background-color: rgba(82, 181, 75, .26)
-}
-
-.emby-checkbox:checked+span+span+.checkboxOutline,
-.itemProgressBarForeground {
-    background-color: #52b54b
-}
-
-.itemProgressBarForeground-recording {
-    background-color: #CB272A
-}
-
-.countIndicator,
-.fullSyncIndicator,
-.playedIndicator {
-    background: #52b54b
-}
-
-.fullSyncIndicator {
-    color: #fff
-}
-
-.mainDrawer {
-    background: #fff
-}
-
-.navMenuOption:hover {
-    background: #f2f2f2
-}
-
-.navMenuOption-selected {
-    background: #52b54b !important;
-    color: #fff
-}
-
-.emby-button-focusscale:focus {
-    background: #52b54b;
-    color: #fff
-}
-
-.emby-tab-button {
-    color: #999;
-    color: rgba(255, 255, 255, .5)
-}
-
-.emby-tab-button-active {
-    color: #52b54b
-}
-
-.emby-tab-button-active.emby-button-tv {
-    color: #fff
-}
-
-.emby-tab-button.emby-button-tv:focus {
-    color: #52b54b;
-    background: 0 0
-}
-
-.channelPrograms,
-.guide-channelHeaderCell,
-.programCell {
-    border-color: rgba(0, 0, 0, .12)
-}
-
-.programCell-sports {
-    background: #3949AB !important
-}
-
-.programCell-movie {
-    background: #5E35B1 !important
-}
-
-.programCell-kids {
-    background: #039BE5 !important
-}
-
-.programCell-news {
-    background: #43A047 !important
-}
-
-.programCell-active {
-    background: rgba(0, 0, 0, .1) !important
-}
-
-.guide-channelHeaderCell:focus,
-.programCell:focus {
-    background-color: #52b54b !important;
-    color: #fff !important
-}
-
-.guide-programTextIcon {
-    color: #1e1e1e;
-    background: #555
-}
-
-.guide-headerTimeslots {
-    color: inherit
-}
-
-.guide-date-tab-button {
-    color: #555;
-    color: rgba(0, 0, 0, .54)
-}
-
-.guide-date-tab-button.emby-tab-button-active,
-.guide-date-tab-button:focus {
-    color: #52b54b
-}
-
-.guide-date-tab-button.emby-button-tv:focus {
-    background-color: #52b54b;
-    color: #fff
-}
-
-.itemBackdropFader {
-    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#f2f2f2));
-    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #f2f2f2);
-    background: -o-linear-gradient(rgba(0, 0, 0, 0), #f2f2f2);
-    background: linear-gradient(rgba(0, 0, 0, 0), #f2f2f2)
-}
-
-.infoBanner {
-    color: #000;
-    background: #fff3a5;
-    padding: 1em;
-    -webkit-border-radius: .25em;
-    border-radius: .25em
-}
-
-.ratingbutton-icon-withrating {
-    color: #c33
-}
-
-.downloadbutton-icon-complete,
-.downloadbutton-icon-on {
-    color: #4285F4
-}
-
-.playstatebutton-icon-played {
-    color: #c33
-}
-
-.repeatButton-active {
-    color: #4285F4
-}
-
-.card:focus .card-focuscontent {
-    border-color: #52b54b
-}

src/components/themes/light-green/theme.css

@@ -1,443 +0,0 @@
-.skinHeader,
-html {
-    color: #222;
-    color: rgba(0, 0, 0, .87)
-}
-
-.wizardStartForm,
-.ui-corner-all,
-.ui-shadow {
-  background-color: #52B54B
-}
-
-.emby-collapsible-button {
-    border-color: #ccc;
-    border-color: rgba(0, 0, 0, .158)
-}
-
-.collapseContent {
-    background-color: #eaeaea
-}
-
-.skinHeader-withBackground {
-    background-color: #52B54B;
-    -webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
-    box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
-    color: #fff
-}
-
-.osdHeader {
-    -webkit-box-shadow: none !important;
-    box-shadow: none !important
-}
-
-.skinHeader.semiTransparent {
-    -webkit-backdrop-filter: none !important;
-    backdrop-filter: none !important;
-    background-color: rgba(0, 0, 0, .3);
-    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
-    background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
-    background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
-    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0))
-}
-
-.pageTitleWithDefaultLogo {
-    background-image: url(../logowhite.png)
-}
-
-.backgroundContainer,
-html {
-    background-color: #f2f2f2
-}
-
-.backgroundContainer.withBackdrop {
-    background-color: rgba(255, 255, 255, .94)
-}
-
-.dialog {
-    background-color: #f0f0f0
-}
-
-.paper-icon-button-light:focus {
-    color: #52B54B;
-    background-color: rgba(82, 181, 75, .2)
-}
-
-.skinHeader-withBackground .paper-icon-button-light:focus {
-    color: #fff;
-    background-color: rgba(255, 255, 255, .2)
-}
-
-.skinHeader-withBackground .button-link {
-    color: #fff
-}
-
-.fab,
-.raised {
-    background: #d8d8d8;
-    color: inherit
-}
-
-.fab:focus,
-.raised:focus {
-    background: #ccc;
-    color: inherit
-}
-
-.button-submit {
-    background: #52B54B;
-    color: #fff
-}
-
-.button-submit:focus {
-    background: #5EC157;
-    color: #fff
-}
-
-.checkboxLabel {
-    color: inherit
-}
-
-.checkboxListLabel,
-.inputLabel,
-.inputLabelUnfocused,
-.paperListLabel,
-.textareaLabelUnfocused {
-    color: #555
-}
-
-.button-link,
-.inputLabelFocused,
-.selectLabelFocused,
-.textareaLabelFocused {
-    color: green
-}
-
-.checkboxOutline {
-    border-color: currentColor
-}
-
-.paperList,
-.visualCardBox {
-    background-color: #fff
-}
-
-.defaultCardBackground1 {
-    background-color: #009688
-}
-
-.defaultCardBackground2 {
-    background-color: #D32F2F
-}
-
-.defaultCardBackground3 {
-    background-color: #0288D1
-}
-
-.defaultCardBackground4 {
-    background-color: #388E3C
-}
-
-.defaultCardBackground5 {
-    background-color: #F57F17
-}
-
-.formDialogHeader:not(.formDialogHeader-clear) {
-    background-color: #52B54B;
-    color: #fff
-}
-
-.formDialogFooter:not(.formDialogFooter-clear) {
-    background-color: #f0f0f0;
-    border-top: 1px solid #ddd;
-    border-top: 1px solid rgba(0, 0, 0, .08);
-    color: inherit
-}
-
-.cardText-secondary,
-.fieldDescription,
-.guide-programNameCaret,
-.listItem .secondary,
-.nowPlayingBarSecondaryText,
-.programSecondaryTitle,
-.secondaryText {
-    color: #888
-}
-
-.actionsheetDivider {
-    background: #ddd;
-    background: rgba(0, 0, 0, .14)
-}
-
-.cardFooter-vibrant .cardText-secondary {
-    color: inherit;
-    opacity: .5
-}
-
-.formDialogHeader a,
-.toast {
-    color: #fff
-}
-
-.actionSheetMenuItem:hover {
-    background-color: #ddd
-}
-
-.toast {
-    background: #303030;
-    color: rgba(255, 255, 255, .87)
-}
-
-.appfooter {
-    background: #282828;
-    color: #ccc;
-    color: rgba(255, 255, 255, .78)
-}
-
-@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
-    .appfooter-blurred {
-        background: rgba(24, 24, 24, .7);
-        -webkit-backdrop-filter: blur(20px);
-        backdrop-filter: blur(20px)
-    }
-}
-
-.nowPlayingBarSecondaryText {
-    color: #999
-}
-
-.itemSelectionPanel {
-    border: 1px solid #52B54B
-}
-
-.selectionCommandsPanel {
-    background: #52B54B;
-    color: #fff
-}
-
-.upNextDialog-countdownText {
-    color: #52B54B
-}
-
-.alphaPickerButton {
-    color: #555;
-    color: rgba(0, 0, 0, .7);
-    background-color: transparent
-}
-
-.alphaPickerButton-selected,
-.alphaPickerButton-tv:focus {
-    background-color: #52B54B;
-    color: #fff !important
-}
-
-.detailTableBodyRow-shaded:nth-child(even) {
-    background: #f8f8f8
-}
-
-.listItem-border {
-    border-color: #f0f0f0 !important
-}
-
-.listItem:focus {
-    background: #ddd
-}
-
-.progressring-spiner {
-    border-color: #52B54B
-}
-
-.mediaInfoText {
-    color: #333;
-    background: #fff
-}
-
-.mediaInfoTimerIcon,
-.starIcon {
-    color: #CB272A
-}
-
-.emby-input,
-.emby-textarea {
-    color: inherit;
-    background: #fff;
-    border: .07em solid rgba(0, 0, 0, .158);
-    -webkit-border-radius: .15em;
-    border-radius: .15em
-}
-
-.emby-input:focus,
-.emby-textarea:focus {
-    border-color: #52B54B
-}
-
-.emby-select-withcolor {
-    color: inherit;
-    background: #fff;
-    border: .07em solid rgba(0, 0, 0, .158)
-}
-
-.emby-checkbox:checked+span+span+.checkboxOutline,
-.emby-select-withcolor:focus {
-    border-color: #52B54B
-}
-
-.emby-select-withcolor>option {
-    color: #000;
-    background: #fff
-}
-
-.emby-select-tv-withcolor:focus {
-    background-color: #52B54B;
-    color: #fff
-}
-
-.emby-checkbox:focus+span+.emby-checkbox-focushelper {
-    background-color: rgba(82, 181, 75, .26)
-}
-
-.emby-checkbox:checked+span+span+.checkboxOutline,
-.itemProgressBarForeground {
-    background-color: #52B54B
-}
-
-.itemProgressBarForeground-recording {
-    background-color: #CB272A
-}
-
-.countIndicator,
-.fullSyncIndicator,
-.playedIndicator {
-    background: #52B54B
-}
-
-.fullSyncIndicator {
-    color: #fff
-}
-
-.mainDrawer {
-    background: #fff
-}
-
-.navMenuOption:hover {
-    background: #f2f2f2
-}
-
-.navMenuOption-selected {
-    background: #52B54B !important;
-    color: #fff
-}
-
-.emby-button-focusscale:focus {
-    background: #52B54B;
-    color: #fff
-}
-
-.emby-tab-button {
-    color: #fff;
-    color: rgba(255, 255, 255, .5)
-}
-
-.emby-tab-button-active,
-.emby-tab-button-active.emby-button-tv {
-    color: #fff;
-    color: rgba(255, 255, 255, 1)
-}
-
-.emby-tab-button.emby-button-tv:focus {
-    color: #fff;
-    color: rgba(255, 255, 255, 1);
-    background: 0 0
-}
-
-.channelPrograms,
-.guide-channelHeaderCell,
-.programCell {
-    border-color: rgba(0, 0, 0, .12)
-}
-
-.programCell-sports {
-    background: #3949AB !important
-}
-
-.programCell-movie {
-    background: #5E35B1 !important
-}
-
-.programCell-kids {
-    background: #039BE5 !important
-}
-
-.programCell-news {
-    background: #43A047 !important
-}
-
-.programCell-active {
-    background: rgba(0, 0, 0, .1) !important
-}
-
-.guide-channelHeaderCell:focus,
-.programCell:focus {
-    background-color: #52B54B !important;
-    color: #fff !important
-}
-
-.guide-programTextIcon {
-    color: #1e1e1e;
-    background: #555
-}
-
-.guide-headerTimeslots {
-    color: inherit
-}
-
-.guide-date-tab-button {
-    color: #555;
-    color: rgba(0, 0, 0, .54)
-}
-
-.guide-date-tab-button.emby-tab-button-active,
-.guide-date-tab-button:focus {
-    color: #52B54B
-}
-
-.guide-date-tab-button.emby-button-tv:focus {
-    background-color: #52B54B;
-    color: #fff
-}
-
-.itemBackdropFader {
-    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#f2f2f2));
-    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #f2f2f2);
-    background: -o-linear-gradient(rgba(0, 0, 0, 0), #f2f2f2);
-    background: linear-gradient(rgba(0, 0, 0, 0), #f2f2f2)
-}
-
-.infoBanner {
-    color: #000;
-    background: #fff3a5;
-    padding: 1em;
-    -webkit-border-radius: .25em;
-    border-radius: .25em
-}
-
-.ratingbutton-icon-withrating {
-    color: #c33
-}
-
-.downloadbutton-icon-complete,
-.downloadbutton-icon-on {
-    color: #4285F4
-}
-
-.playstatebutton-icon-played {
-    color: #c33
-}
-
-.repeatButton-active {
-    color: #4285F4
-}
-
-.card:focus .card-focuscontent {
-    border-color: #52B54B
-}

src/components/themes/light-pink/theme.css

@@ -1,440 +0,0 @@
-.skinHeader,
-html {
-    color: #222;
-    color: rgba(0, 0, 0, .87)
-}
-
-.wizardStartForm,
-.ui-corner-all,
-.ui-shadow {
-  background-color: #E91E63
-}
-
-.emby-collapsible-button {
-    border-color: #ccc;
-    border-color: rgba(0, 0, 0, .158)
-}
-
-.collapseContent {
-    background-color: #eaeaea
-}
-
-.skinHeader-withBackground {
-    background-color: #E91E63;
-    -webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
-    box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
-    color: #fff
-}
-
-.osdHeader {
-    -webkit-box-shadow: none !important;
-    box-shadow: none !important
-}
-
-.skinHeader.semiTransparent {
-    -webkit-backdrop-filter: none !important;
-    backdrop-filter: none !important;
-    background-color: rgba(0, 0, 0, .3);
-    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
-    background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
-    background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
-    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0))
-}
-
-.pageTitleWithDefaultLogo {
-    background-image: url(../logowhite.png)
-}
-
-.backgroundContainer,
-html {
-    background-color: #f2f2f2
-}
-
-.backgroundContainer.withBackdrop {
-    background-color: rgba(255, 255, 255, .94)
-}
-
-.dialog {
-    background-color: #f0f0f0
-}
-
-.paper-icon-button-light:focus {
-    color: #E91E63;
-    background-color: rgba(233, 30, 99, .2)
-}
-
-.skinHeader-withBackground .paper-icon-button-light:focus {
-    color: #fff;
-    background-color: rgba(255, 255, 255, .2)
-}
-
-.fab,
-.raised {
-    background: #d8d8d8;
-    color: inherit
-}
-
-.fab:focus,
-.raised:focus {
-    background: #ccc;
-    color: inherit
-}
-
-.button-submit {
-    background: #E91E63;
-    color: #fff
-}
-
-.button-submit:focus {
-    background: #F52A6F;
-    color: #fff
-}
-
-.checkboxLabel {
-    color: inherit
-}
-
-.checkboxListLabel,
-.inputLabel,
-.inputLabelUnfocused,
-.paperListLabel,
-.textareaLabelUnfocused {
-    color: #555;
-    color: rgba(0, 0, 0, .7)
-}
-
-.button-link,
-.inputLabelFocused,
-.selectLabelFocused,
-.textareaLabelFocused {
-    color: #E91E63
-}
-
-.checkboxOutline {
-    border-color: currentColor
-}
-
-.paperList,
-.visualCardBox {
-    background-color: #F8BBD0
-}
-
-.defaultCardBackground1 {
-    background-color: #009688
-}
-
-.defaultCardBackground2 {
-    background-color: #D32F2F
-}
-
-.defaultCardBackground3 {
-    background-color: #0288D1
-}
-
-.defaultCardBackground4 {
-    background-color: #388E3C
-}
-
-.defaultCardBackground5 {
-    background-color: #F57F17
-}
-
-.formDialogHeader:not(.formDialogHeader-clear) {
-    background-color: #E91E63;
-    color: #fff
-}
-
-.formDialogFooter:not(.formDialogFooter-clear) {
-    background-color: #f0f0f0;
-    border-top: 1px solid rgba(0, 0, 0, .08);
-    color: inherit
-}
-
-.cardText-secondary,
-.fieldDescription,
-.guide-programNameCaret,
-.listItem .secondary,
-.nowPlayingBarSecondaryText,
-.programSecondaryTitle,
-.secondaryText {
-    color: #888;
-    color: rgba(0, 0, 0, .54)
-}
-
-.actionsheetDivider {
-    background: #ddd;
-    background: rgba(0, 0, 0, .14)
-}
-
-.cardFooter-vibrant .cardText-secondary {
-    color: inherit;
-    opacity: .5
-}
-
-.formDialogHeader a,
-.toast {
-    color: #fff
-}
-
-.actionSheetMenuItem:hover {
-    background-color: #ddd
-}
-
-.toast {
-    background: #303030;
-    color: rgba(255, 255, 255, .87)
-}
-
-.appfooter {
-    background: #282828;
-    color: #ccc;
-    color: rgba(255, 255, 255, .78)
-}
-
-@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
-    .appfooter-blurred {
-        background: rgba(24, 24, 24, .7);
-        -webkit-backdrop-filter: blur(20px);
-        backdrop-filter: blur(20px)
-    }
-}
-
-.nowPlayingBarSecondaryText {
-    color: #999
-}
-
-.itemSelectionPanel {
-    border: 1px solid #E91E63
-}
-
-.selectionCommandsPanel {
-    background: #E91E63;
-    color: #fff
-}
-
-.upNextDialog-countdownText {
-    color: #E91E63
-}
-
-.alphaPickerButton {
-    color: #555;
-    color: rgba(0, 0, 0, .7);
-    background-color: transparent
-}
-
-.alphaPickerButton-selected,
-.alphaPickerButton-tv:focus {
-    background-color: #E91E63;
-    color: #fff !important
-}
-
-.detailTableBodyRow-shaded:nth-child(even) {
-    background: #f8f8f8
-}
-
-.listItem-border {
-    border-color: #f0f0f0 !important
-}
-
-.listItem:focus {
-    background: #ddd
-}
-
-.progressring-spiner {
-    border-color: #E91E63
-}
-
-.mediaInfoText {
-    color: #333;
-    background: #fff
-}
-
-.mediaInfoTimerIcon,
-.starIcon {
-    color: #CB272A
-}
-
-.emby-input,
-.emby-textarea {
-    color: inherit;
-    background: #fff;
-    border: .07em solid rgba(0, 0, 0, .158);
-    -webkit-border-radius: .15em;
-    border-radius: .15em
-}
-
-.emby-input:focus,
-.emby-textarea:focus {
-    border-color: #E91E63
-}
-
-.emby-select-withcolor {
-    color: inherit;
-    background: #fff;
-    border: .07em solid rgba(0, 0, 0, .158)
-}
-
-.emby-checkbox:checked+span+span+.checkboxOutline,
-.emby-select-withcolor:focus {
-    border-color: #E91E63
-}
-
-.emby-select-withcolor>option {
-    color: #000;
-    background: #fff
-}
-
-.emby-select-tv-withcolor:focus {
-    background-color: #E91E63;
-    color: #fff
-}
-
-.emby-checkbox:focus+span+.emby-checkbox-focushelper {
-    background-color: rgba(233, 30, 99, .26)
-}
-
-.emby-checkbox:checked+span+span+.checkboxOutline,
-.itemProgressBarForeground {
-    background-color: #E91E63
-}
-
-.itemProgressBarForeground-recording {
-    background-color: #CB272A
-}
-
-.countIndicator,
-.fullSyncIndicator,
-.playedIndicator {
-    background: #E91E63
-}
-
-.fullSyncIndicator {
-    color: #fff
-}
-
-.mainDrawer {
-    background: #fff
-}
-
-.navMenuOption:hover {
-    background: #f2f2f2
-}
-
-.navMenuOption-selected {
-    background: #E91E63 !important;
-    color: #fff
-}
-
-.emby-button-focusscale:focus {
-    background: #E91E63;
-    color: #fff
-}
-
-.emby-tab-button {
-    color: #fff;
-    color: rgba(255, 255, 255, .5)
-}
-
-.emby-tab-button-active,
-.emby-tab-button-active.emby-button-tv {
-    color: #fff;
-    color: rgba(255, 255, 255, 1)
-}
-
-.emby-tab-button.emby-button-tv:focus {
-    color: #fff;
-    color: rgba(255, 255, 255, 1);
-    background: 0 0
-}
-
-.channelPrograms,
-.guide-channelHeaderCell,
-.programCell {
-    border-color: rgba(0, 0, 0, .12)
-}
-
-.programCell-sports {
-    background: #3949AB !important
-}
-
-.programCell-movie {
-    background: #5E35B1 !important
-}
-
-.programCell-kids {
-    background: #039BE5 !important
-}
-
-.programCell-news {
-    background: #43A047 !important
-}
-
-.programCell-active {
-    background: rgba(0, 0, 0, .1) !important
-}
-
-.guide-channelHeaderCell:focus,
-.programCell:focus {
-    background-color: #E91E63 !important;
-    color: #fff !important
-}
-
-.guide-programTextIcon {
-    color: #1e1e1e;
-    background: #555
-}
-
-.guide-headerTimeslots {
-    color: inherit
-}
-
-.guide-date-tab-button {
-    color: #555;
-    color: rgba(0, 0, 0, .54)
-}
-
-.guide-date-tab-button.emby-tab-button-active,
-.guide-date-tab-button:focus {
-    color: #E91E63
-}
-
-.guide-date-tab-button.emby-button-tv:focus {
-    background-color: #E91E63;
-    color: #fff
-}
-
-.itemBackdropFader {
-    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#f2f2f2));
-    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #f2f2f2);
-    background: -o-linear-gradient(rgba(0, 0, 0, 0), #f2f2f2);
-    background: linear-gradient(rgba(0, 0, 0, 0), #f2f2f2)
-}
-
-.infoBanner {
-    color: #000;
-    background: #fff3a5;
-    padding: 1em;
-    -webkit-border-radius: .25em;
-    border-radius: .25em
-}
-
-.ratingbutton-icon-withrating {
-    color: #c33
-}
-
-.downloadbutton-icon-complete,
-.downloadbutton-icon-on {
-    color: #4285F4
-}
-
-.playstatebutton-icon-played {
-    color: #c33
-}
-
-.repeatButton-active {
-    color: #4285F4
-}
-
-.card:focus .card-focuscontent {
-    border-color: #E91E63
-}

src/components/themes/light-purple/theme.css

@@ -1,441 +0,0 @@
-.skinHeader,
-html {
-    color: #222;
-    color: rgba(0, 0, 0, .87)
-}
-
-.wizardStartForm,
-.ui-corner-all,
-.ui-shadow {
-  background-color: #673AB7
-}
-
-.emby-collapsible-button {
-    border-color: #ccc;
-    border-color: rgba(0, 0, 0, .158)
-}
-
-.collapseContent {
-    background-color: #eaeaea
-}
-
-.skinHeader-withBackground {
-    background-color: #673AB7;
-    -webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
-    box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
-    color: #fff
-}
-
-.osdHeader {
-    -webkit-box-shadow: none !important;
-    box-shadow: none !important
-}
-
-.skinHeader.semiTransparent {
-    -webkit-backdrop-filter: none !important;
-    backdrop-filter: none !important;
-    background-color: rgba(0, 0, 0, .3);
-    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
-    background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
-    background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
-    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0))
-}
-
-.pageTitleWithDefaultLogo {
-    background-image: url(../logowhite.png)
-}
-
-.backgroundContainer,
-html {
-    background-color: #EDE7F6
-}
-
-.backgroundContainer.withBackdrop {
-    background-color: rgba(237, 241, 236, .94)
-}
-
-.dialog {
-    background-color: #f0f0f0
-}
-
-.paper-icon-button-light:focus {
-    color: #673AB7;
-    background-color: rgba(103, 58, 183, .2)
-}
-
-.skinHeader-withBackground .paper-icon-button-light:focus {
-    color: #fff;
-    background-color: rgba(255, 255, 255, .2)
-}
-
-.fab,
-.raised {
-    background: #d8d8d8;
-    color: inherit
-}
-
-.fab:focus,
-.raised:focus {
-    background: #ccc;
-    color: inherit
-}
-
-.button-submit {
-    background: #673AB7;
-    color: #fff
-}
-
-.button-submit:focus {
-    background: #7346C3;
-    color: #fff
-}
-
-.checkboxLabel {
-    color: inherit
-}
-
-.checkboxListLabel,
-.inputLabel,
-.inputLabelUnfocused,
-.paperListLabel,
-.textareaLabelUnfocused {
-    color: #555;
-    color: rgba(0, 0, 0, .7)
-}
-
-.button-link,
-.inputLabelFocused,
-.selectLabelFocused,
-.textareaLabelFocused {
-    color: #673AB7
-}
-
-.checkboxOutline {
-    border-color: currentColor
-}
-
-.paperList,
-.visualCardBox {
-    background-color: #D1C4E9
-}
-
-.defaultCardBackground1 {
-    background-color: #009688
-}
-
-.defaultCardBackground2 {
-    background-color: #D32F2F
-}
-
-.defaultCardBackground3 {
-    background-color: #0288D1
-}
-
-.defaultCardBackground4 {
-    background-color: #388E3C
-}
-
-.defaultCardBackground5 {
-    background-color: #F57F17
-}
-
-.formDialogHeader:not(.formDialogHeader-clear) {
-    background-color: #673AB7;
-    color: #fff
-}
-
-.formDialogFooter:not(.formDialogFooter-clear) {
-    background-color: #f0f0f0;
-    border-top: 1px solid #ddd;
-    border-top: 1px solid rgba(0, 0, 0, .08);
-    color: inherit
-}
-
-.cardText-secondary,
-.fieldDescription,
-.guide-programNameCaret,
-.listItem .secondary,
-.nowPlayingBarSecondaryText,
-.programSecondaryTitle,
-.secondaryText {
-    color: #888;
-    color: rgba(0, 0, 0, .54)
-}
-
-.actionsheetDivider {
-    background: #ddd;
-    background: rgba(0, 0, 0, .14)
-}
-
-.listItem:focus {
-    background: #ddd
-}
-
-.cardFooter-vibrant .cardText-secondary {
-    color: inherit;
-    opacity: .5
-}
-
-.formDialogHeader a,
-.toast {
-    color: #fff
-}
-
-.actionSheetMenuItem:hover {
-    background-color: #ddd
-}
-
-.toast {
-    background: #303030;
-    color: rgba(255, 255, 255, .87)
-}
-
-.appfooter {
-    background: #282828;
-    color: #ccc;
-    color: rgba(255, 255, 255, .78)
-}
-
-@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
-    .appfooter-blurred {
-        background: rgba(24, 24, 24, .7);
-        -webkit-backdrop-filter: blur(20px);
-        backdrop-filter: blur(20px)
-    }
-}
-
-.nowPlayingBarSecondaryText {
-    color: #999
-}
-
-.itemSelectionPanel {
-    border: 1px solid #673AB7
-}
-
-.selectionCommandsPanel {
-    background: #673AB7;
-    color: #fff
-}
-
-.upNextDialog-countdownText {
-    color: #673AB7
-}
-
-.alphaPickerButton {
-    color: #555;
-    color: rgba(0, 0, 0, .7);
-    background-color: transparent
-}
-
-.alphaPickerButton-selected,
-.alphaPickerButton-tv:focus {
-    background-color: #673AB7;
-    color: #fff !important
-}
-
-.detailTableBodyRow-shaded:nth-child(even) {
-    background: #f8f8f8
-}
-
-.listItem-border {
-    border-color: #f0f0f0 !important
-}
-
-.progressring-spiner {
-    border-color: #673AB7
-}
-
-.mediaInfoText {
-    color: #333;
-    background: #fff
-}
-
-.mediaInfoTimerIcon,
-.starIcon {
-    color: #CB272A
-}
-
-.emby-input,
-.emby-textarea {
-    color: inherit;
-    background: #fff;
-    border: .07em solid rgba(0, 0, 0, .158);
-    -webkit-border-radius: .15em;
-    border-radius: .15em
-}
-
-.emby-input:focus,
-.emby-textarea:focus {
-    border-color: #673AB7
-}
-
-.emby-select-withcolor {
-    color: inherit;
-    background: #fff;
-    border: .07em solid rgba(0, 0, 0, .158)
-}
-
-.emby-checkbox:checked+span+span+.checkboxOutline,
-.emby-select-withcolor:focus {
-    border-color: #673AB7
-}
-
-.emby-select-withcolor>option {
-    color: #000;
-    background: #fff
-}
-
-.emby-select-tv-withcolor:focus {
-    background-color: #673AB7;
-    color: #fff
-}
-
-.emby-checkbox:focus+span+.emby-checkbox-focushelper {
-    background-color: rgba(103, 58, 183, .26)
-}
-
-.emby-checkbox:checked+span+span+.checkboxOutline,
-.itemProgressBarForeground {
-    background-color: #673AB7
-}
-
-.itemProgressBarForeground-recording {
-    background-color: #CB272A
-}
-
-.countIndicator,
-.fullSyncIndicator,
-.playedIndicator {
-    background: #673AB7
-}
-
-.fullSyncIndicator {
-    color: #fff
-}
-
-.mainDrawer {
-    background: #fff
-}
-
-.navMenuOption:hover {
-    background: #f2f2f2
-}
-
-.navMenuOption-selected {
-    background: #673AB7 !important;
-    color: #fff
-}
-
-.emby-button-focusscale:focus {
-    background: #673AB7;
-    color: #fff
-}
-
-.emby-tab-button {
-    color: #fff;
-    color: rgba(255, 255, 255, .54)
-}
-
-.emby-tab-button-active,
-.emby-tab-button-active.emby-button-tv {
-    color: #fff;
-    color: rgba(255, 255, 255, 1)
-}
-
-.emby-tab-button.emby-button-tv:focus {
-    color: #fff;
-    color: rgba(255, 255, 255, 1);
-    background: 0 0
-}
-
-.channelPrograms,
-.guide-channelHeaderCell,
-.programCell {
-    border-color: rgba(0, 0, 0, .12)
-}
-
-.programCell-sports {
-    background: #3949AB !important
-}
-
-.programCell-movie {
-    background: #5E35B1 !important
-}
-
-.programCell-kids {
-    background: #039BE5 !important
-}
-
-.programCell-news {
-    background: #43A047 !important
-}
-
-.programCell-active {
-    background: rgba(0, 0, 0, .1) !important
-}
-
-.guide-channelHeaderCell:focus,
-.programCell:focus {
-    background-color: #673AB7 !important;
-    color: #fff !important
-}
-
-.guide-programTextIcon {
-    color: #1e1e1e;
-    background: #555
-}
-
-.guide-headerTimeslots {
-    color: inherit
-}
-
-.guide-date-tab-button {
-    color: #555;
-    color: rgba(0, 0, 0, .54)
-}
-
-.guide-date-tab-button.emby-tab-button-active,
-.guide-date-tab-button:focus {
-    color: #673AB7
-}
-
-.guide-date-tab-button.emby-button-tv:focus {
-    background-color: #673AB7;
-    color: #fff
-}
-
-.itemBackdropFader {
-    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#EDE7F6));
-    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #EDE7F6);
-    background: -o-linear-gradient(rgba(0, 0, 0, 0), #EDE7F6);
-    background: linear-gradient(rgba(0, 0, 0, 0), #EDE7F6)
-}
-
-.infoBanner {
-    color: #000;
-    background: #fff3a5;
-    padding: 1em;
-    -webkit-border-radius: .25em;
-    border-radius: .25em
-}
-
-.ratingbutton-icon-withrating {
-    color: #c33
-}
-
-.downloadbutton-icon-complete,
-.downloadbutton-icon-on {
-    color: #4285F4
-}
-
-.playstatebutton-icon-played {
-    color: #c33
-}
-
-.repeatButton-active {
-    color: #4285F4
-}
-
-.card:focus .card-focuscontent {
-    border-color: #673AB7
-}

src/components/themes/light-red/theme.css

@@ -1,439 +0,0 @@
-.skinHeader,
-html {
-    color: #222;
-    color: rgba(0, 0, 0, .87)
-}
-
-.wizardStartForm,
-.ui-corner-all,
-.ui-shadow {
-  background-color: #c33
-}
-
-.emby-collapsible-button {
-    border-color: #ccc;
-    border-color: rgba(0, 0, 0, .158)
-}
-
-.collapseContent {
-    background-color: #eaeaea
-}
-
-.skinHeader-withBackground {
-    background-color: #c33;
-    -webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
-    box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
-    color: #fff
-}
-
-.osdHeader {
-    -webkit-box-shadow: none !important;
-    box-shadow: none !important
-}
-
-.skinHeader.semiTransparent {
-    -webkit-backdrop-filter: none !important;
-    backdrop-filter: none !important;
-    background-color: rgba(0, 0, 0, .3);
-    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
-    background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
-    background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
-    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0))
-}
-
-.pageTitleWithDefaultLogo {
-    background-image: url(../logowhite.png)
-}
-
-.backgroundContainer,
-html {
-    background-color: #f2f2f2
-}
-
-.backgroundContainer.withBackdrop {
-    background-color: rgba(255, 255, 255, .94)
-}
-
-.dialog {
-    background-color: #f0f0f0
-}
-
-.paper-icon-button-light:focus {
-    color: #c33;
-    background-color: rgba(204, 51, 51, .2)
-}
-
-.skinHeader-withBackground .paper-icon-button-light:focus {
-    color: #fff;
-    background-color: rgba(255, 255, 255, .2)
-}
-
-.fab,
-.raised {
-    background: #d8d8d8;
-    color: inherit
-}
-
-.fab:focus,
-.raised:focus {
-    background: #ccc;
-    color: inherit
-}
-
-.button-submit {
-    background: #c33;
-    color: #fff
-}
-
-.button-submit:focus {
-    background: #D83F3F;
-    color: #fff
-}
-
-.checkboxLabel {
-    color: inherit
-}
-
-.checkboxListLabel,
-.inputLabel,
-.inputLabelUnfocused,
-.paperListLabel,
-.textareaLabelUnfocused {
-    color: #555
-}
-
-.button-link,
-.inputLabelFocused,
-.selectLabelFocused,
-.textareaLabelFocused {
-    color: #c33
-}
-
-.checkboxOutline {
-    border-color: currentColor
-}
-
-.paperList,
-.visualCardBox {
-    background-color: #fff
-}
-
-.defaultCardBackground1 {
-    background-color: #009688
-}
-
-.defaultCardBackground2 {
-    background-color: #D32F2F
-}
-
-.defaultCardBackground3 {
-    background-color: #0288D1
-}
-
-.defaultCardBackground4 {
-    background-color: #388E3C
-}
-
-.defaultCardBackground5 {
-    background-color: #F57F17
-}
-
-.formDialogHeader:not(.formDialogHeader-clear) {
-    background-color: #c33;
-    color: #fff
-}
-
-.formDialogFooter:not(.formDialogFooter-clear) {
-    background-color: #f0f0f0;
-    border-top: 1px solid #ddd;
-    border-top: 1px solid rgba(0, 0, 0, .08);
-    color: inherit
-}
-
-.cardText-secondary,
-.fieldDescription,
-.guide-programNameCaret,
-.listItem .secondary,
-.nowPlayingBarSecondaryText,
-.programSecondaryTitle,
-.secondaryText {
-    color: #888
-}
-
-.actionsheetDivider {
-    background: #ddd;
-    background: rgba(0, 0, 0, .14)
-}
-
-.cardFooter-vibrant .cardText-secondary {
-    color: inherit;
-    opacity: .5
-}
-
-.formDialogHeader a,
-.toast {
-    color: #fff
-}
-
-.actionSheetMenuItem:hover {
-    background-color: #ddd
-}
-
-.toast {
-    background: #303030;
-    color: rgba(255, 255, 255, .87)
-}
-
-.appfooter {
-    background: #282828;
-    color: #ccc;
-    color: rgba(255, 255, 255, .78)
-}
-
-@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
-    .appfooter-blurred {
-        background: rgba(24, 24, 24, .7);
-        -webkit-backdrop-filter: blur(20px);
-        backdrop-filter: blur(20px)
-    }
-}
-
-.nowPlayingBarSecondaryText {
-    color: #999
-}
-
-.itemSelectionPanel {
-    border: 1px solid #c33
-}
-
-.selectionCommandsPanel {
-    background: #c33;
-    color: #fff
-}
-
-.upNextDialog-countdownText {
-    color: #c33
-}
-
-.alphaPickerButton {
-    color: #555;
-    color: rgba(0, 0, 0, .7);
-    background-color: transparent
-}
-
-.alphaPickerButton-selected,
-.alphaPickerButton-tv:focus {
-    background-color: #c33;
-    color: #fff !important
-}
-
-.detailTableBodyRow-shaded:nth-child(even) {
-    background: #f8f8f8
-}
-
-.listItem-border {
-    border-color: #f0f0f0 !important
-}
-
-.listItem:focus {
-    background: #ddd
-}
-
-.progressring-spiner {
-    border-color: #c33
-}
-
-.mediaInfoText {
-    color: #333;
-    background: #fff
-}
-
-.mediaInfoTimerIcon,
-.starIcon {
-    color: #CB272A
-}
-
-.emby-input,
-.emby-textarea {
-    color: inherit;
-    background: #fff;
-    border: .07em solid rgba(0, 0, 0, .158);
-    -webkit-border-radius: .15em;
-    border-radius: .15em
-}
-
-.emby-input:focus,
-.emby-textarea:focus {
-    border-color: #c33
-}
-
-.emby-select-withcolor {
-    color: inherit;
-    background: #fff;
-    border: .07em solid rgba(0, 0, 0, .158)
-}
-
-.emby-checkbox:checked+span+span+.checkboxOutline,
-.emby-select-withcolor:focus {
-    border-color: #c33
-}
-
-.emby-select-withcolor>option {
-    color: #000;
-    background: #fff
-}
-
-.emby-select-tv-withcolor:focus {
-    background-color: #c33;
-    color: #fff
-}
-
-.emby-checkbox:focus+span+.emby-checkbox-focushelper {
-    background-color: rgba(204, 51, 51, .26)
-}
-
-.emby-checkbox:checked+span+span+.checkboxOutline,
-.itemProgressBarForeground {
-    background-color: #c33
-}
-
-.itemProgressBarForeground-recording {
-    background-color: #CB272A
-}
-
-.countIndicator,
-.playedIndicator {
-    background: #c33
-}
-
-.fullSyncIndicator {
-    background: #c33;
-    color: #fff
-}
-
-.mainDrawer {
-    background: #fff
-}
-
-.navMenuOption:hover {
-    background: #f2f2f2
-}
-
-.navMenuOption-selected {
-    background: #c33 !important;
-    color: #fff
-}
-
-.emby-button-focusscale:focus {
-    background: #c33;
-    color: #fff
-}
-
-.emby-tab-button {
-    color: #fff;
-    color: rgba(255, 255, 255, .5)
-}
-
-.emby-tab-button-active,
-.emby-tab-button-active.emby-button-tv {
-    color: #fff;
-    color: rgba(255, 255, 255, 1)
-}
-
-.emby-tab-button.emby-button-tv:focus {
-    color: #fff;
-    color: rgba(255, 255, 255, 1);
-    background: 0 0
-}
-
-.channelPrograms,
-.guide-channelHeaderCell,
-.programCell {
-    border-color: rgba(0, 0, 0, .12)
-}
-
-.programCell-sports {
-    background: #3949AB !important
-}
-
-.programCell-movie {
-    background: #5E35B1 !important
-}
-
-.programCell-kids {
-    background: #039BE5 !important
-}
-
-.programCell-news {
-    background: #43A047 !important
-}
-
-.programCell-active {
-    background: rgba(0, 0, 0, .1) !important
-}
-
-.guide-channelHeaderCell:focus,
-.programCell:focus {
-    background-color: #c33 !important;
-    color: #fff !important
-}
-
-.guide-programTextIcon {
-    color: #1e1e1e;
-    background: #555
-}
-
-.guide-headerTimeslots {
-    color: inherit
-}
-
-.guide-date-tab-button {
-    color: #555;
-    color: rgba(0, 0, 0, .54)
-}
-
-.guide-date-tab-button.emby-tab-button-active,
-.guide-date-tab-button:focus {
-    color: #00a4dc
-}
-
-.guide-date-tab-button.emby-button-tv:focus {
-    background-color: #00a4dc;
-    color: #fff
-}
-
-.itemBackdropFader {
-    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#f2f2f2));
-    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #f2f2f2);
-    background: -o-linear-gradient(rgba(0, 0, 0, 0), #f2f2f2);
-    background: linear-gradient(rgba(0, 0, 0, 0), #f2f2f2)
-}
-
-.infoBanner {
-    color: #000;
-    background: #fff3a5;
-    padding: 1em;
-    -webkit-border-radius: .25em;
-    border-radius: .25em
-}
-
-.ratingbutton-icon-withrating {
-    color: #c33
-}
-
-.downloadbutton-icon-complete,
-.downloadbutton-icon-on {
-    color: #4285F4
-}
-
-.playstatebutton-icon-played {
-    color: #c33
-}
-
-.repeatButton-active {
-    color: #4285F4
-}
-
-.card:focus .card-focuscontent {
-    border-color: #c33
-}

src/components/themes/light/theme.css

@@ -59,9 +59,14 @@ html {
     background-color: #f0f0f0
 }
 
+.paper-icon-button-light:hover {
+    color: #00a4dc;
+    background-color: rgba(0,164,220, .2);
+    transition: 0.2s;
+}
+
 .paper-icon-button-light:focus {
     color: #00a4dc;
-    background-color: rgba(0,164,220, .2)
 }
 
 .fab,
@@ -267,11 +272,19 @@ html {
     border: .07em solid rgba(0, 0, 0, .158)
 }
 
-.emby-checkbox:checked+span+span+.checkboxOutline,
+.emby-checkbox:checked+span+.checkboxOutline,
 .emby-select-withcolor:focus {
     border-color: #00a4dc
 }
 
+.emby-checkbox:focus+span+.checkboxOutline {
+    border-color: #000;
+}
+
+.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
+    border-color: #00a4dc;
+}
+
 .emby-select-withcolor>option {
     color: #000;
     background: #fff
@@ -282,11 +295,7 @@ html {
     color: #fff
 }
 
-.emby-checkbox:focus+span+.emby-checkbox-focushelper {
-    background-color: rgba(0,164,220, .26)
-}
-
-.emby-checkbox:checked+span+span+.checkboxOutline,
+.emby-checkbox:checked+span+.checkboxOutline,
 .itemProgressBarForeground {
     background-color: #00a4dc
 }

src/components/themes/purple-haze/theme.css

@@ -1,13 +1,13 @@
 .skinHeader,
 html {
-    color: #eee;
-    color: rgba(255, 255, 255, .87)
+    color: #f8f8fe;
+    color: rgba(248, 248, 254, 0.973)
 }
 
 .wizardStartForm,
 .ui-corner-all,
 .ui-shadow {
-  background-color: #52B54B
+    background-color: #303030
 }
 
 .emby-collapsible-button {
@@ -15,76 +15,94 @@ html {
     border-color: rgba(255, 255, 255, .135)
 }
 
-.skinHeader {
-    color: #ccc;
-    color: rgba(255, 255, 255, .78)
-}
-
 .skinHeader-withBackground {
-    background-color: #52B54B;
-    -webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
-    box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37)
-}
-
-.osdHeader {
-    -webkit-box-shadow: none !important;
-    box-shadow: none !important
+    background: #000420;
+    background: -moz-linear-gradient(left, #000420 0%, #06256f 18%, #2b052b 38%, #2b052b 68%, #06256f 81%, #000420 100%);
+    background: -webkit-linear-gradient(left, #000420 0%,#06256f 18%,#2b052b 38%,#2b052b 68%,#06256f 81%,#000420 100%);
+    background: linear-gradient(to right, #000420 0%,#06256f 18%,#2b052b 38%,#2b052b 68%,#06256f 81%,#000420 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000420', endColorstr='#000420',GradientType=1 );
 }
 
 .skinHeader.semiTransparent {
+    -webkit-backdrop-filter: none !important;
     backdrop-filter: none !important;
     background-color: rgba(0, 0, 0, .3);
     background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
     background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
     background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
-    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
-    -webkit-box-shadow: none;
-    box-shadow: none
+    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0))
 }
 
 .pageTitleWithDefaultLogo {
     background-image: url(../logowhite.png)
 }
 
-.backgroundContainer,
 .dialog,
 html {
-    background-color: #282828
+    background-color: #0e0f2d
+}
+
+.backgroundContainer {
+    background: url(bg.jpg) center top no-repeat #030322;
+    -webkit-background-size: cover;
+    background-size: cover
 }
 
 .backgroundContainer.withBackdrop {
-    background-color: rgba(0, 0, 0, .86)
+    opacity: .93
+}
+
+@media (orientation:portrait) {
+    .backgroundContainer {
+        background-position: 30% top
+    }
+}
+
+.paper-icon-button-light:hover {
+    color: #48C3C8;
+    background-color: rgba(0,164,220, .2);
+    transition: 0.2s;
 }
 
 .paper-icon-button-light:focus {
-    color: #52B54B;
-    background-color: rgba(82, 181, 75, .2)
+    color: #48C3C8;
 }
 
-.skinHeader-withBackground .paper-icon-button-light:focus {
-    color: #fff;
-    background-color: rgba(255, 255, 255, .2)
+progress {
+    border-radius: .4em;
+}
+
+progress::-webkit-progress-bar {
+    border-radius: .4em;
+}
+
+progress::-moz-progress-bar {
+    border-radius: .4em;
+}
+
+progress::-webkit-progress-value {
+    border-radius: .4em;
 }
 
 .fab,
 .raised {
-    background: #404040;
-    color: #fff
+    background: rgba(0, 0, 0, .5);
+    color: rgba(255, 255, 255, .87)
 }
 
 .fab:focus,
 .raised:focus {
-    background: #505050
+    background: rgba(0, 0, 0, .7)
 }
 
 .button-submit {
-    background: #52B54B;
-    color: #fff
+    background: #48C3C8;
+    color: #f8f8fe
 }
 
-.button-submit:focus {
-    background: #5EC157;
-    color: #fff
+.button-submit:hover {
+    background: #0ce8d6;
+    color: #f8f8fe
 }
 
 .checkboxLabel {
@@ -103,19 +121,32 @@ html {
 .inputLabelFocused,
 .selectLabelFocused,
 .textareaLabelFocused {
-    color: #52B54B
+    color: #48C3C8
 }
 
 .checkboxOutline {
     border-color: currentColor
 }
 
+.cardContent {
+    border-radius: 1.000em
+}
+
 .collapseContent,
 .formDialogFooter:not(.formDialogFooter-clear),
 .formDialogHeader:not(.formDialogHeader-clear),
 .paperList,
 .visualCardBox {
-    background-color: #222
+    background-color: rgba(0, 0, 0, .5);
+    border-radius: 1.000em
+}
+
+.cardOverlayContainer {
+    border-radius: 0.8em;
+}
+.visualCardBox .cardOverlayContainer {
+    border-bottom-right-radius: 0em;
+    border-bottom-left-radius: 0em;
 }
 
 .defaultCardBackground1 {
@@ -160,17 +191,17 @@ html {
 }
 
 .actionSheetMenuItem:hover {
-    background-color: #222
+    background-color: rgba(0, 0, 0, .5)
 }
 
 .toast {
     background: #303030;
-    color: #fff;
+    color: #f8f8fe;
     color: rgba(255, 255, 255, .87)
 }
 
 .appfooter {
-    background: #101010;
+    background: #06256f;
     color: #ccc;
     color: rgba(255, 255, 255, .78)
 }
@@ -184,16 +215,16 @@ html {
 }
 
 .itemSelectionPanel {
-    border: 1px solid #52B54B
+    border: 1px solid #48C3C8
 }
 
 .selectionCommandsPanel {
-    background: #52B54B;
-    color: #fff
+    background: #48C3C8;
+    color: #f8f8fe
 }
 
 .upNextDialog-countdownText {
-    color: #52B54B
+    color: #48C3C8
 }
 
 .alphaPickerButton {
@@ -203,12 +234,12 @@ html {
 }
 
 .alphaPickerButton-selected {
-    color: #fff
+    color: #0ce8d6
 }
 
 .alphaPickerButton-tv:focus {
-    background-color: #52B54B;
-    color: #fff !important
+    background: #0ce8d6;
+    color: #f8f8fe !important
 }
 
 .detailTableBodyRow-shaded:nth-child(even) {
@@ -217,77 +248,81 @@ html {
 }
 
 .listItem-border {
-    border-color: rgba(30, 30, 30, .9) !important
+    border-color: rgba(255, 255, 255, .1) !important
 }
 
 .listItem:focus {
-    background: #333
+    background: rgba(0, 0, 0, .3)
 }
 
 .progressring-spiner {
-    border-color: #52B54B
+    border-color: #48C3C8
 }
 
 .button-flat-accent,
 .button-link {
-    color: #52B54B
+    color: #48C3C8
 }
 
 .mediaInfoText {
-    color: #ddd;
+    color: #f8f8fe;
     background: rgba(170, 170, 190, .2)
 }
 
 .mediaInfoTimerIcon,
 .starIcon {
-    color: #CB272A
+    color: #f2b01e
 }
 
 .emby-input,
 .emby-textarea {
     color: inherit;
-    background: #1c1c1c;
-    border: .07em solid #1c1c1c;
+    background: rgba(0, 0, 0, .5);
+    border: .07em solid transparent;
     -webkit-border-radius: .15em;
     border-radius: .15em
 }
 
 .emby-input:focus,
 .emby-textarea:focus {
-    border-color: #52B54B
+    border-color: #48C3C8
 }
 
 .emby-select-withcolor {
     color: inherit;
-    background: #1c1c1c;
-    border: .07em solid #1c1c1c
+    background: rgba(0, 0, 0, .5);
+    border: .07em solid transparent
 }
 
 .emby-select-withcolor>option {
     color: inherit;
-    background: #222
+    background: #030322d7
 }
 
 .emby-select-withcolor:focus {
-    border-color: #52B54B !important
+    border-color: #48C3C8 !important
 }
 
 .emby-select-tv-withcolor:focus {
-    background-color: #52B54B !important;
+    background-color: #48C3C8 !important;
     color: #fff !important
 }
 
-.emby-checkbox:checked+span+span+.checkboxOutline {
-    border-color: #52B54B
+.emby-checkbox:checked+span+.checkboxOutline {
+    border-color: #48C3C8
 }
 
-.emby-checkbox:focus+span+.emby-checkbox-focushelper {
-    background-color: rgba(82, 181, 75, .26)
+.emby-checkbox:focus+span+.checkboxOutline {
+    border-color: #fff;
 }
 
-.emby-checkbox:checked+span+span+.checkboxOutline,
+.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
+    border-color: #48C3C8;
+}
+
+.emby-checkbox:checked+span+.checkboxOutline,
 .itemProgressBarForeground {
-    background-color: #52B54B
+    background-color: #48C3C8
 }
 
 .itemProgressBarForeground-recording {
@@ -297,7 +332,7 @@ html {
 .countIndicator,
 .fullSyncIndicator,
 .playedIndicator {
-    background: #52B54B
+    background: #48C3C8
 }
 
 .fullSyncIndicator {
@@ -305,44 +340,51 @@ html {
 }
 
 .mainDrawer {
-    background-color: #1c1c1f;
-    color: #ccc;
-    color: rgba(255, 255, 255, .7)
+    color: #f8f8fe;
+    background: rgba(0, 0, 0, .5);
+}
+
+.drawer-open {
+    background-color: #030322
+
 }
 
 .navMenuOption:hover {
-    background: #252528
+    background: rgba(221, 221, 221, 0.068)
 }
 
 .navMenuOption-selected {
-    background: #52B54B !important;
-    color: #fff
+    background: #6f0765 !important;
+    color: #f8f8fe
 }
 
 .emby-button-focusscale:focus {
-    background: #52B54B;
-    color: #fff
+    background: #48C3C8;
+    color: #f8f8fe
 }
 
 .emby-tab-button {
     color: #999;
-    color: rgba(255, 255, 255, .5)
+    color: rgba(255, 255, 255, .4)
+}
+
+.emby-tab-button-active {
+    color: #f8f8fe
 }
 
-.emby-tab-button-active,
 .emby-tab-button-active.emby-button-tv {
-    color: #fff
+    color: #f8f8fe
 }
 
 .emby-tab-button.emby-button-tv:focus {
-    color: #fff;
+    color: #48C3C8;
     background: 0 0
 }
 
 .channelPrograms,
 .guide-channelHeaderCell,
 .programCell {
-    border-color: #383838
+    border-color: rgba(255, 255, 255, .05)
 }
 
 .programCell-sports {
@@ -362,12 +404,12 @@ html {
 }
 
 .programCell-active {
-    background: #1e1e1e !important
+    background: rgba(0, 0, 0, .4) !important
 }
 
 .guide-channelHeaderCell:focus,
 .programCell:focus {
-    background-color: #52B54B !important;
+    background-color: #48C3C8 !important;
     color: #fff !important
 }
 
@@ -387,24 +429,24 @@ html {
 
 .guide-date-tab-button.emby-tab-button-active,
 .guide-date-tab-button:focus {
-    color: #52B54B
+    color: #48C3C8
 }
 
 .guide-date-tab-button.emby-button-tv:focus {
-    background-color: #52B54B;
+    background-color: #48C3C8;
     color: #fff
 }
 
 .itemBackdropFader {
-    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#191919));
-    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #191919);
-    background: -o-linear-gradient(rgba(0, 0, 0, 0), #191919);
-    background: linear-gradient(rgba(0, 0, 0, 0), #191919)
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#181818));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #181818);
+    background: -o-linear-gradient(rgba(0, 0, 0, 0), #181818);
+    background: linear-gradient(rgba(0, 0, 0, 0), #181818)
 }
 
 .infoBanner {
-    color: #ddd;
-    background: #111;
+    color: #0e0f2d;
+    background: #dbe6ff;
     padding: 1em;
     -webkit-border-radius: .25em;
     border-radius: .25em
@@ -428,7 +470,7 @@ html {
 }
 
 .card:focus .card-focuscontent {
-    border-color: #52B54B
+    border-color: #48C3C8
 }
 
 .layout-desktop ::-webkit-scrollbar {
@@ -449,3 +491,13 @@ html {
     -webkit-border-radius: 2px;
     background: center no-repeat #888
 }
+
+.timeslotHeaders-desktop::-webkit-scrollbar {
+    height: .7em
+}
+
+.mediaInfoOfficialRating {
+    border: .09em solid #583fa0;
+    background-color: #dbe6ff;
+    color: #0e0f2d;
+}

src/components/themes/wmc/theme.css

@@ -64,9 +64,14 @@ html {
     background: rgba(17, 98, 164, .9)
 }
 
+.paper-icon-button-light:hover {
+    color: #00a4dc;
+    background-color: rgba(0,164,220, .2);
+    transition: 0.2s;
+}
+
 .paper-icon-button-light:focus {
     color: #00a4dc;
-    background-color: rgba(0,164,220, .2)
 }
 
 .fab,
@@ -261,11 +266,19 @@ html {
     border: .07em solid rgba(255, 255, 255, .135)
 }
 
-.emby-checkbox:checked+span+span+.checkboxOutline,
+.emby-checkbox:checked+span+.checkboxOutline,
 .emby-select-withcolor:focus {
     border-color: #00a4dc
 }
 
+.emby-checkbox:focus+span+.checkboxOutline {
+    border-color: #fff;
+}
+
+.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
+    border-color: #00a4dc;
+}
+
 .emby-select-withcolor>option {
     color: #000;
     background: #fff
@@ -276,11 +289,7 @@ html {
     color: #fff
 }
 
-.emby-checkbox:focus+span+.emby-checkbox-focushelper {
-    background-color: rgba(0,164,220, .26)
-}
-
-.emby-checkbox:checked+span+span+.checkboxOutline,
+.emby-checkbox:checked+span+.checkboxOutline,
 .itemProgressBarForeground {
     background-color: #00a4dc
 }

src/components/tvproviders/schedulesdirect.template.html

@@ -1,7 +1,7 @@
 <div class="verticalSection">
     <div class="sectionTitleContainer flex align-items-center">
         <h1 class="sectionTitle">Schedules Direct</h1>
-        <a is="emby-linkbutton" class="raised button-alt headerHelpButton" target="_blank" href="https://web.archive.org/web/20181216120305/https://github.com/MediaBrowser/Wiki/wiki/Live-TV">${Help}</a>
+        <a is="emby-linkbutton" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.readthedocs.io/en/latest/server/live-tv/">${Help}</a>
     </div>
     <p class="createAccountHelp"></p>
 </div>

src/components/tvproviders/xmltv.template.html

@@ -1,7 +1,7 @@
 <div class="verticalSection">
     <div class="sectionTitleContainer flex align-items-center">
         <h1 class="sectionTitle">Xml TV</h1>
-        <a is="emby-linkbutton" class="raised button-alt headerHelpButton" target="_blank" href="https://web.archive.org/web/20181216120305/https://github.com/MediaBrowser/Wiki/wiki/Live-TV">${Help}</a>
+        <a is="emby-linkbutton" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.readthedocs.io/en/latest/server/live-tv/">${Help}</a>
     </div>
 </div>
 

src/components/userdatabuttons/emby-playstatebutton.js

@@ -2,14 +2,12 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
     'use strict';
 
     function addNotificationEvent(instance, name, handler) {
-
         var localHandler = handler.bind(instance);
         events.on(serverNotifications, name, localHandler);
         instance[name] = localHandler;
     }
 
     function removeNotificationEvent(instance, name) {
-
         var handler = instance[name];
         if (handler) {
             events.off(serverNotifications, name, handler);
@@ -25,31 +23,22 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
         var apiClient = connectionManager.getApiClient(serverId);
 
         if (!button.classList.contains('playstatebutton-played')) {
-
             apiClient.markPlayed(apiClient.getCurrentUserId(), id, new Date());
-
             setState(button, true);
-
         } else {
-
             apiClient.markUnplayed(apiClient.getCurrentUserId(), id, new Date());
-
             setState(button, false);
         }
     }
 
     function onUserDataChanged(e, apiClient, userData) {
-
         var button = this;
-
         if (userData.ItemId === button.getAttribute('data-id')) {
-
             setState(button, userData.Played);
         }
     }
 
     function setState(button, played, updateAttribute) {
-
         var icon = button.iconElement;
         if (!icon) {
             button.iconElement = button.querySelector('i');
@@ -57,18 +46,13 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
         }
 
         if (played) {
-
             button.classList.add('playstatebutton-played');
-
             if (icon) {
                 icon.classList.add('playstatebutton-icon-played');
                 icon.classList.remove('playstatebutton-icon-unplayed');
             }
-
         } else {
-
             button.classList.remove('playstatebutton-played');
-
             if (icon) {
                 icon.classList.remove('playstatebutton-icon-played');
                 icon.classList.add('playstatebutton-icon-unplayed');

src/components/viewContainer.js

@@ -1,121 +1,262 @@
-define(["browser", "dom", "layoutManager", "css!components/viewManager/viewContainer"], function(browser, dom, layoutManager) {
+define(["browser", "dom", "layoutManager", "css!components/viewManager/viewContainer"], function (browser, dom, layoutManager) {
     "use strict";
 
     function setControllerClass(view, options) {
-        if (options.controllerFactory) return Promise.resolve();
+        if (options.controllerFactory) {
+            return Promise.resolve();
+        }
+
         var controllerUrl = view.getAttribute("data-controller");
-        return controllerUrl ? (0 === controllerUrl.indexOf("__plugin/") && (controllerUrl = controllerUrl.substring("__plugin/".length)), controllerUrl = Dashboard.getConfigurationResourceUrl(controllerUrl), getRequirePromise([controllerUrl]).then(function(ControllerFactory) {
-            options.controllerFactory = ControllerFactory
-        })) : Promise.resolve()
+
+        if (controllerUrl) {
+            if (0 === controllerUrl.indexOf("__plugin/")) {
+                controllerUrl = controllerUrl.substring("__plugin/".length);
+            }
+
+            controllerUrl = Dashboard.getConfigurationResourceUrl(controllerUrl);
+            return getRequirePromise([controllerUrl]).then(function (ControllerFactory) {
+                options.controllerFactory = ControllerFactory;
+            });
+        }
+
+        return Promise.resolve();
     }
 
     function getRequirePromise(deps) {
-        return new Promise(function(resolve, reject) {
-            require(deps, resolve)
-        })
+        return new Promise(function (resolve, reject) {
+            require(deps, resolve);
+        });
     }
 
     function loadView(options) {
         if (!options.cancel) {
-            var selected = selectedPageIndex,
-                previousAnimatable = -1 === selected ? null : allPages[selected],
-                pageIndex = selected + 1;
-            pageIndex >= pageContainerCount && (pageIndex = 0);
-            var isPluginpage = -1 !== options.url.toLowerCase().indexOf("/configurationpage"),
-                newViewInfo = normalizeNewView(options, isPluginpage),
-                newView = newViewInfo.elem,
-                dependencies = "string" == typeof newView ? null : newView.getAttribute("data-require");
-            return dependencies = dependencies ? dependencies.split(",") : [], isPluginpage && dependencies.push("legacy/dashboard"), newViewInfo.hasjQuerySelect && dependencies.push("legacy/selectmenu"), newViewInfo.hasjQueryChecked && dependencies.push("fnchecked"), newViewInfo.hasjQuery && dependencies.push("jQuery"), (isPluginpage || newView.classList && newView.classList.contains("type-interior")) && dependencies.push("dashboardcss"), new Promise(function(resolve, reject) {
-                dependencies.join(",");
-                require(dependencies, function() {
-                    var currentPage = allPages[pageIndex];
-                    currentPage && triggerDestroy(currentPage);
-                    var view = newView;
-                    "string" == typeof view && (view = document.createElement("div"), view.innerHTML = newView), view.classList.add("mainAnimatedPage"), currentPage ? newViewInfo.hasScript && window.$ ? (view = $(view).appendTo(mainAnimatedPages)[0], mainAnimatedPages.removeChild(currentPage)) : mainAnimatedPages.replaceChild(view, currentPage) : newViewInfo.hasScript && window.$ ? view = $(view).appendTo(mainAnimatedPages)[0] : mainAnimatedPages.appendChild(view), options.type && view.setAttribute("data-type", options.type);
-                    var properties = [];
-                    options.fullscreen && properties.push("fullscreen"), properties.length && view.setAttribute("data-properties", properties.join(","));
-                    allPages[pageIndex] = view, setControllerClass(view, options).then(function() {
-                        onBeforeChange && onBeforeChange(view, !1, options), beforeAnimate(allPages, pageIndex, selected), selectedPageIndex = pageIndex, currentUrls[pageIndex] = options.url, !options.cancel && previousAnimatable && afterAnimate(allPages, pageIndex), window.$ && ($.mobile = $.mobile || {}, $.mobile.activePage = view), resolve(view)
-                    })
-                })
-            })
+            var selected = selectedPageIndex;
+            var previousAnimatable = -1 === selected ? null : allPages[selected];
+            var pageIndex = selected + 1;
+
+            if (pageIndex >= pageContainerCount) {
+                pageIndex = 0;
+            }
+
+            var isPluginpage = -1 !== options.url.toLowerCase().indexOf("/configurationpage");
+            var newViewInfo = normalizeNewView(options, isPluginpage);
+            var newView = newViewInfo.elem;
+
+
+            if (isPluginpage) {
+                require(["legacy/dashboard"]);
+            }
+
+            if (newViewInfo.hasjQuerySelect) {
+                require(["legacy/selectmenu"]);
+            }
+
+            if (newViewInfo.hasjQueryChecked) {
+                require(["fnchecked"]);
+            }
+
+            return new Promise(function (resolve) {
+                var currentPage = allPages[pageIndex];
+
+                if (currentPage) {
+                    triggerDestroy(currentPage);
+                }
+
+                var view = newView;
+
+                if ("string" == typeof view) {
+                    view = document.createElement("div");
+                    view.innerHTML = newView;
+                }
+
+                view.classList.add("mainAnimatedPage");
+
+                if (currentPage) {
+                    if (newViewInfo.hasScript && window.$) {
+                        view = $(view).appendTo(mainAnimatedPages)[0];
+                        mainAnimatedPages.removeChild(currentPage);
+                    } else {
+                        mainAnimatedPages.replaceChild(view, currentPage);
+                    }
+                } else {
+                    if (newViewInfo.hasScript && window.$) {
+                        view = $(view).appendTo(mainAnimatedPages)[0];
+                    } else {
+                        mainAnimatedPages.appendChild(view);
+                    }
+                }
+
+                if (options.type) {
+                    view.setAttribute("data-type", options.type);
+                }
+
+                var properties = [];
+
+                if (options.fullscreen) {
+                    properties.push("fullscreen");
+                }
+
+                if (properties.length) {
+                    view.setAttribute("data-properties", properties.join(","));
+                }
+
+                allPages[pageIndex] = view;
+                setControllerClass(view, options).then(function () {
+                    if (onBeforeChange) {
+                        onBeforeChange(view, false, options);
+                    }
+
+                    beforeAnimate(allPages, pageIndex, selected);
+                    selectedPageIndex = pageIndex;
+                    currentUrls[pageIndex] = options.url;
+
+                    if (!options.cancel && previousAnimatable) {
+                        afterAnimate(allPages, pageIndex);
+                    }
+
+                    if (window.$) {
+                        $.mobile = $.mobile || {};
+                        $.mobile.activePage = view;
+                    }
+
+                    resolve(view);
+                });
+            });
         }
     }
 
     function replaceAll(str, find, replace) {
-        return str.split(find).join(replace)
+        return str.split(find).join(replace);
     }
 
     function parseHtml(html, hasScript) {
-        hasScript && (html = replaceAll(html, "\x3c!--<script", "<script"), html = replaceAll(html, "<\/script>--\x3e", "<\/script>"));
+        if (hasScript) {
+            html = replaceAll(html, "\x3c!--<script", "<script");
+            html = replaceAll(html, "<\/script>--\x3e", "<\/script>");
+        }
+
         var wrapper = document.createElement("div");
-        return wrapper.innerHTML = html, wrapper.querySelector('div[data-role="page"]')
+        wrapper.innerHTML = html;
+        return wrapper.querySelector('div[data-role="page"]');
     }
 
     function normalizeNewView(options, isPluginpage) {
         var viewHtml = options.view;
-        if (-1 === viewHtml.indexOf('data-role="page"')) return viewHtml;
-        var hasScript = -1 !== viewHtml.indexOf("<script"),
-            elem = parseHtml(viewHtml, hasScript);
-        hasScript && (hasScript = null != elem.querySelector("script"));
-        var hasjQuery = !1,
-            hasjQuerySelect = !1,
-            hasjQueryChecked = !1;
-        return isPluginpage && (hasjQuery = -1 != viewHtml.indexOf("jQuery") || -1 != viewHtml.indexOf("$(") || -1 != viewHtml.indexOf("$."), hasjQueryChecked = -1 != viewHtml.indexOf(".checked("), hasjQuerySelect = -1 != viewHtml.indexOf(".selectmenu(")), {
+
+        if (-1 === viewHtml.indexOf('data-role="page"')) {
+            return viewHtml;
+        }
+
+        var hasScript = -1 !== viewHtml.indexOf("<script");
+        var elem = parseHtml(viewHtml, hasScript);
+
+        if (hasScript) {
+            hasScript = null != elem.querySelector("script");
+        }
+
+        var hasjQuery = false;
+        var hasjQuerySelect = false;
+        var hasjQueryChecked = false;
+
+        if (isPluginpage) {
+            hasjQuery = -1 != viewHtml.indexOf("jQuery") || -1 != viewHtml.indexOf("$(") || -1 != viewHtml.indexOf("$.");
+            hasjQueryChecked = -1 != viewHtml.indexOf(".checked(");
+            hasjQuerySelect = -1 != viewHtml.indexOf(".selectmenu(");
+        }
+
+        return {
             elem: elem,
             hasScript: hasScript,
             hasjQuerySelect: hasjQuerySelect,
             hasjQueryChecked: hasjQueryChecked,
             hasjQuery: hasjQuery
-        }
+        };
     }
 
     function beforeAnimate(allPages, newPageIndex, oldPageIndex) {
-        for (var i = 0, length = allPages.length; i < length; i++) newPageIndex === i || oldPageIndex === i || allPages[i].classList.add("hide")
+        for (var index = 0, length = allPages.length; index < length; index++) {
+            if (newPageIndex !== index && oldPageIndex !== index) {
+                allPages[index].classList.add("hide");
+            }
+        }
     }
 
     function afterAnimate(allPages, newPageIndex) {
-        for (var i = 0, length = allPages.length; i < length; i++) newPageIndex === i || allPages[i].classList.add("hide")
+        for (var index = 0, length = allPages.length; index < length; index++) {
+            if (newPageIndex !== index) {
+                allPages[index].classList.add("hide");
+            }
+        }
     }
 
     function setOnBeforeChange(fn) {
-        onBeforeChange = fn
+        onBeforeChange = fn;
     }
 
     function tryRestoreView(options) {
-        var url = options.url,
-            index = currentUrls.indexOf(url);
+        var url = options.url;
+        var index = currentUrls.indexOf(url);
+
         if (-1 !== index) {
-            var animatable = allPages[index],
-                view = animatable;
+            var animatable = allPages[index];
+            var view = animatable;
+
             if (view) {
-                if (options.cancel) return;
-                var selected = selectedPageIndex,
-                    previousAnimatable = -1 === selected ? null : allPages[selected];
-                return setControllerClass(view, options).then(function() {
-                    return onBeforeChange && onBeforeChange(view, !0, options), beforeAnimate(allPages, index, selected), animatable.classList.remove("hide"), selectedPageIndex = index, !options.cancel && previousAnimatable && afterAnimate(allPages, index), window.$ && ($.mobile = $.mobile || {}, $.mobile.activePage = view), view
-                })
+                if (options.cancel) {
+                    return;
+                }
+
+                var selected = selectedPageIndex;
+                var previousAnimatable = -1 === selected ? null : allPages[selected];
+                return setControllerClass(view, options).then(function () {
+                    if (onBeforeChange) {
+                        onBeforeChange(view, true, options);
+                    }
+
+                    beforeAnimate(allPages, index, selected);
+                    animatable.classList.remove("hide");
+                    selectedPageIndex = index;
+
+                    if (!options.cancel && previousAnimatable) {
+                        afterAnimate(allPages, index);
+                    }
+
+                    if (window.$) {
+                        $.mobile = $.mobile || {};
+                        $.mobile.activePage = view;
+                    }
+
+                    return view;
+                });
             }
         }
-        return Promise.reject()
+
+        return Promise.reject();
     }
 
     function triggerDestroy(view) {
-        view.dispatchEvent(new CustomEvent("viewdestroy", {}))
+        view.dispatchEvent(new CustomEvent("viewdestroy", {}));
     }
 
     function reset() {
-        allPages = [], currentUrls = [], mainAnimatedPages.innerHTML = "", selectedPageIndex = -1
-    }
-    var onBeforeChange, mainAnimatedPages = document.querySelector(".mainAnimatedPages"),
-        allPages = [],
-        currentUrls = [],
-        pageContainerCount = 3,
+        allPages = [];
+        currentUrls = [];
+        mainAnimatedPages.innerHTML = "";
         selectedPageIndex = -1;
-    return reset(), mainAnimatedPages.classList.remove("hide"), {
+    }
+
+    var onBeforeChange;
+    var mainAnimatedPages = document.querySelector(".mainAnimatedPages");
+    var allPages = [];
+    var currentUrls = [];
+    var pageContainerCount = 3;
+    var selectedPageIndex = -1;
+    reset();
+    mainAnimatedPages.classList.remove("hide");
+    return {
         loadView: loadView,
         tryRestoreView: tryRestoreView,
         reset: reset,
         setOnBeforeChange: setOnBeforeChange
-    }
-});
+    };
+});

src/components/viewManager/viewManager.js

@@ -1,10 +1,10 @@
-define(['viewcontainer', 'focusManager', 'queryString', 'layoutManager'], function (viewcontainer, focusManager, queryString, layoutManager) {
+define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], function (viewContainer, focusManager, queryString, layoutManager) {
     'use strict';
 
     var currentView;
     var dispatchPageEvents;
 
-    viewcontainer.setOnBeforeChange(function (newView, isRestored, options) {
+    viewContainer.setOnBeforeChange(function (newView, isRestored, options) {
 
         var lastView = currentView;
         if (lastView) {
@@ -21,7 +21,7 @@ define(['viewcontainer', 'focusManager', 'queryString', 'layoutManager'], functi
         if (!newView.initComplete) {
             newView.initComplete = true;
 
-            if (options.controllerFactory) {
+            if (typeof options.controllerFactory === 'function') {
 
                 // Use controller method
                 var controller = new options.controllerFactory(newView, eventDetail.detail.params);
@@ -125,7 +125,7 @@ define(['viewcontainer', 'focusManager', 'queryString', 'layoutManager'], functi
 
     function resetCachedViews() {
         // Reset all cached views whenever the skin changes
-        viewcontainer.reset();
+        viewContainer.reset();
     }
 
     document.addEventListener('skinunload', resetCachedViews);
@@ -146,7 +146,7 @@ define(['viewcontainer', 'focusManager', 'queryString', 'layoutManager'], functi
             return;
         }
 
-        viewcontainer.loadView(options).then(function (view) {
+        viewContainer.loadView(options).then(function (view) {
 
             onViewChange(view, options);
         });
@@ -163,7 +163,7 @@ define(['viewcontainer', 'focusManager', 'queryString', 'layoutManager'], functi
             currentView.activeElement = document.activeElement;
         }
 
-        return viewcontainer.tryRestoreView(options).then(function (view) {
+        return viewContainer.tryRestoreView(options).then(function (view) {
 
             onViewChanging();
             onViewChange(view, options, true);

src/controllers/dashboardpage.js

@@ -180,25 +180,25 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
             view.querySelector("#serverName").innerHTML = globalize.translate("DashboardServerName", systemInfo.ServerName);
 
             var localizedVersion = globalize.translate("DashboardVersionNumber", systemInfo.Version);
-            if (systemInfo.SystemUpdateLevel && "Release" != systemInfo.SystemUpdateLevel) {
-                localizedVersion += " " + globalize.translate("Option" + systemInfo.SystemUpdateLevel).toLowerCase();
+            if (systemInfo.SystemUpdateLevel !== "Release") {
+                localizedVersion += " " + systemInfo.SystemUpdateLevel;
             }
             view.querySelector("#versionNumber").innerHTML = localizedVersion;
 
-            if (systemInfo.SupportsHttps) {
-                view.querySelector("#ports").innerHTML = globalize.translate("LabelRunningOnPorts", systemInfo.HttpServerPortNumber, systemInfo.HttpsPortNumber);
-            } else {
-                view.querySelector("#ports").innerHTML = globalize.translate("LabelRunningOnPort", systemInfo.HttpServerPortNumber);
-            }
-
-            DashboardPage.renderUrls(view, systemInfo);
-            DashboardPage.renderPaths(view, systemInfo);
+            view.querySelector("#operatingSystem").innerHTML = globalize.translate("DashboardOperatingSystem", systemInfo.OperatingSystem);
+            view.querySelector("#architecture").innerHTML = globalize.translate("DashboardArchitecture", systemInfo.SystemArchitecture);
 
             if (systemInfo.CanSelfRestart) {
                 view.querySelector("#btnRestartServer").classList.remove("hide");
             } else {
                 view.querySelector("#btnRestartServer").classList.add("hide");
             }
+
+            view.querySelector("#cachePath").innerHTML = systemInfo.CachePath;
+            view.querySelector("#logPath").innerHTML = systemInfo.LogPath;
+            view.querySelector("#transcodePath").innerHTML = systemInfo.TranscodingTempPath;
+            view.querySelector("#metadataPath").innerHTML = systemInfo.InternalMetadataPath;
+            view.querySelector("#webPath").innerHTML = systemInfo.WebPath;
         });
     }
 
@@ -373,13 +373,6 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
     }
 
     window.DashboardPage = {
-        renderPaths: function (page, systemInfo) {
-            page.querySelector("#cachePath").innerHTML = systemInfo.CachePath;
-            page.querySelector("#logPath").innerHTML = systemInfo.LogPath;
-            page.querySelector("#transcodePath").innerHTML = systemInfo.TranscodingTempPath;
-            page.querySelector("#metadataPath").innerHTML = systemInfo.InternalMetadataPath;
-            page.querySelector("#webPath").innerHTML = systemInfo.WebPath;
-        },
         startInterval: function (apiClient) {
             apiClient.sendMessage("SessionsStart", "0,1500");
             apiClient.sendMessage("ScheduledTasksInfoStart", "0,1000");
@@ -711,28 +704,6 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
             return null;
         },
         systemUpdateTaskKey: "SystemUpdateTask",
-        renderUrls: function (page, systemInfo) {
-            var helpButton = '<a is="emby-linkbutton" class="raised raised-mini button-submit" href="https://web.archive.org/web/20181216120305/https://github.com/MediaBrowser/Wiki/wiki/Connectivity" target="_blank" style="margin-left:.7em;font-size:84%;padding:.2em .8em;">' + globalize.translate("ButtonHelp") + "</a>";
-            var localUrlElem = page.querySelector(".localUrl");
-            var externalUrlElem = page.querySelector(".externalUrl");
-
-            if (systemInfo.LocalAddress) {
-                var localAccessHtml = globalize.translate("LabelLocalAccessUrl", '<a is="emby-linkbutton" class="button-link" href="' + systemInfo.LocalAddress + '" target="_blank">' + systemInfo.LocalAddress + "</a>");
-                localUrlElem.innerHTML = localAccessHtml + helpButton;
-                localUrlElem.classList.remove("hide");
-            } else {
-                localUrlElem.classList.add("hide");
-            }
-
-            if (systemInfo.WanAddress) {
-                var externalUrl = systemInfo.WanAddress;
-                var remoteAccessHtml = globalize.translate("LabelRemoteAccessUrl", '<a is="emby-linkbutton" class="button-link" href="' + externalUrl + '" target="_blank">' + externalUrl + "</a>");
-                externalUrlElem.innerHTML = remoteAccessHtml + helpButton;
-                externalUrlElem.classList.remove("hide");
-            } else {
-                externalUrlElem.classList.add("hide");
-            }
-        },
         stopTask: function (btn, id) {
             var page = dom.parentWithClass(btn, "page");
             ApiClient.stopScheduledTask(id).then(function () {

src/controllers/devices.js

@@ -43,7 +43,7 @@ define(["loading", "dom", "libraryMenu", "globalize", "humanedate", "emby-button
                 callback: function(id) {
                     switch (id) {
                         case "open":
-                            Dashboard.navigate("devices/device.html?id=" + deviceId);
+                            Dashboard.navigate("device.html?id=" + deviceId);
                             break;
                         case "delete":
                             deleteDevice(view, deviceId)
@@ -57,7 +57,7 @@ define(["loading", "dom", "libraryMenu", "globalize", "humanedate", "emby-button
         var html = "";
         html += devices.map(function(device) {
             var deviceHtml = "";
-            deviceHtml += "<div data-id='" + device.Id + "' class='card backdropCard'>", deviceHtml += '<div class="cardBox visualCardBox">', deviceHtml += '<div class="cardScalable">', deviceHtml += '<div class="cardPadder cardPadder-backdrop"></div>', deviceHtml += '<a is="emby-linkbutton" href="' + (canEdit ? "devices/device.html?id=" + device.Id : "#") + '" class="cardContent cardImageContainer">';
+            deviceHtml += "<div data-id='" + device.Id + "' class='card backdropCard'>", deviceHtml += '<div class="cardBox visualCardBox">', deviceHtml += '<div class="cardScalable">', deviceHtml += '<div class="cardPadder cardPadder-backdrop"></div>', deviceHtml += '<a is="emby-linkbutton" href="' + (canEdit ? "device.html?id=" + device.Id : "#") + '" class="cardContent cardImageContainer">';
             var iconUrl = device.IconUrl;
             return iconUrl && -1 === iconUrl.indexOf("://") && (iconUrl = ApiClient.getUrl(iconUrl)), iconUrl ? (deviceHtml += '<div class="cardImage" style="background-image:url(\'' + iconUrl + "');background-size: auto 64%;background-position:center center;\">", deviceHtml += "</div>") : deviceHtml += '<i class="cardImageIcon md-icon">tablet_android</i>', deviceHtml += "</a>", deviceHtml += "</div>", deviceHtml += '<div class="cardFooter">', (canEdit || canDelete(device.Id)) && (deviceHtml += '<div style="text-align:right; float:right;padding-top:5px;">', deviceHtml += '<button type="button" is="paper-icon-button-light" data-id="' + device.Id + '" title="' + globalize.translate("Menu") + '" class="btnDeviceMenu"><i class="md-icon">&#xE5D3;</i></button>', deviceHtml += "</div>"), deviceHtml += "<div class='cardText'>", deviceHtml += device.Name, deviceHtml += "</div>", deviceHtml += "<div class='cardText cardText-secondary'>", deviceHtml += device.AppName + " " + device.AppVersion, deviceHtml += "</div>", deviceHtml += "<div class='cardText cardText-secondary'>", device.LastUserName && (deviceHtml += device.LastUserName, deviceHtml += ", " + humane_date(device.DateLastActivity)), deviceHtml += "&nbsp;", deviceHtml += "</div>", deviceHtml += "</div>", deviceHtml += "</div>", deviceHtml += "</div>"
         }).join(""), page.querySelector(".devicesList").innerHTML = html

src/controllers/dlnaprofile.js

@@ -0,0 +1,829 @@
+define(["jQuery", "loading", "fnchecked", "emby-select", "emby-button", "emby-input", "emby-checkbox", "listViewStyle", "emby-button"], function ($, loading) {
+    "use strict";
+
+    function loadProfile(page) {
+        loading.show();
+        var promise1 = getProfile();
+        var promise2 = ApiClient.getUsers();
+        Promise.all([promise1, promise2]).then(function (responses) {
+            currentProfile = responses[0];
+            renderProfile(page, currentProfile, responses[1]);
+            loading.hide();
+        });
+    }
+
+    function getProfile() {
+        var id = getParameterByName("id");
+        var url = id ? "Dlna/Profiles/" + id : "Dlna/Profiles/Default";
+        return ApiClient.getJSON(ApiClient.getUrl(url));
+    }
+
+    function renderProfile(page, profile, users) {
+        $("#txtName", page).val(profile.Name);
+        $(".chkMediaType", page).each(function () {
+            this.checked = -1 != (profile.SupportedMediaTypes || "").split(",").indexOf(this.getAttribute("data-value"));
+        });
+        $("#chkEnableAlbumArtInDidl", page).checked(profile.EnableAlbumArtInDidl);
+        $("#chkEnableSingleImageLimit", page).checked(profile.EnableSingleAlbumArtLimit);
+        renderXmlDocumentAttributes(page, profile.XmlRootAttributes || []);
+        var idInfo = profile.Identification || {};
+        renderIdentificationHeaders(page, idInfo.Headers || []);
+        renderSubtitleProfiles(page, profile.SubtitleProfiles || []);
+        $("#txtInfoFriendlyName", page).val(profile.FriendlyName || "");
+        $("#txtInfoModelName", page).val(profile.ModelName || "");
+        $("#txtInfoModelNumber", page).val(profile.ModelNumber || "");
+        $("#txtInfoModelDescription", page).val(profile.ModelDescription || "");
+        $("#txtInfoModelUrl", page).val(profile.ModelUrl || "");
+        $("#txtInfoManufacturer", page).val(profile.Manufacturer || "");
+        $("#txtInfoManufacturerUrl", page).val(profile.ManufacturerUrl || "");
+        $("#txtInfoSerialNumber", page).val(profile.SerialNumber || "");
+        $("#txtIdFriendlyName", page).val(idInfo.FriendlyName || "");
+        $("#txtIdModelName", page).val(idInfo.ModelName || "");
+        $("#txtIdModelNumber", page).val(idInfo.ModelNumber || "");
+        $("#txtIdModelDescription", page).val(idInfo.ModelDescription || "");
+        $("#txtIdModelUrl", page).val(idInfo.ModelUrl || "");
+        $("#txtIdManufacturer", page).val(idInfo.Manufacturer || "");
+        $("#txtIdManufacturerUrl", page).val(idInfo.ManufacturerUrl || "");
+        $("#txtIdSerialNumber", page).val(idInfo.SerialNumber || "");
+        $("#txtIdDeviceDescription", page).val(idInfo.DeviceDescription || "");
+        $("#txtAlbumArtPn", page).val(profile.AlbumArtPn || "");
+        $("#txtAlbumArtMaxWidth", page).val(profile.MaxAlbumArtWidth || "");
+        $("#txtAlbumArtMaxHeight", page).val(profile.MaxAlbumArtHeight || "");
+        $("#txtIconMaxWidth", page).val(profile.MaxIconWidth || "");
+        $("#txtIconMaxHeight", page).val(profile.MaxIconHeight || "");
+        $("#chkIgnoreTranscodeByteRangeRequests", page).checked(profile.IgnoreTranscodeByteRangeRequests);
+        $("#txtMaxAllowedBitrate", page).val(profile.MaxStreamingBitrate || "");
+        $("#txtMusicStreamingTranscodingBitrate", page).val(profile.MusicStreamingTranscodingBitrate || "");
+        $("#chkRequiresPlainFolders", page).checked(profile.RequiresPlainFolders);
+        $("#chkRequiresPlainVideoItems", page).checked(profile.RequiresPlainVideoItems);
+        $("#txtProtocolInfo", page).val(profile.ProtocolInfo || "");
+        $("#txtXDlnaCap", page).val(profile.XDlnaCap || "");
+        $("#txtXDlnaDoc", page).val(profile.XDlnaDoc || "");
+        $("#txtSonyAggregationFlags", page).val(profile.SonyAggregationFlags || "");
+        profile.DirectPlayProfiles = profile.DirectPlayProfiles || [];
+        profile.TranscodingProfiles = profile.TranscodingProfiles || [];
+        profile.ContainerProfiles = profile.ContainerProfiles || [];
+        profile.CodecProfiles = profile.CodecProfiles || [];
+        profile.ResponseProfiles = profile.ResponseProfiles || [];
+        var usersHtml = "<option></option>" + users.map(function (u__w) {
+            return '<option value="' + u__w.Id + '">' + u__w.Name + "</option>";
+        }).join("");
+        $("#selectUser", page).html(usersHtml).val(profile.UserId || "");
+        renderSubProfiles(page, profile);
+    }
+
+    function renderIdentificationHeaders(page, headers) {
+        var index = 0;
+        var html = '<div class="paperList">' + headers.map(function (h__e) {
+            var li = '<div class="listItem">';
+            li += '<i class="md-icon listItemIcon">info</i>';
+            li += '<div class="listItemBody">';
+            li += '<h3 class="listItemBodyText">' + h__e.Name + ": " + (h__e.Value || "") + "</h3>";
+            li += '<div class="listItemBodyText secondary">' + (h__e.Match || "") + "</div>";
+            li += "</div>";
+            li += '<button type="button" is="paper-icon-button-light" class="btnDeleteIdentificationHeader listItemButton" data-index="' + index + '"><i class="md-icon">delete</i></button>';
+            li += "</div>";
+            index++;
+            return li;
+        }).join("") + "</div>";
+        var elem = $(".httpHeaderIdentificationList", page).html(html).trigger("create");
+        $(".btnDeleteIdentificationHeader", elem).on("click", function () {
+            var itemIndex = parseInt(this.getAttribute("data-index"));
+            currentProfile.Identification.Headers.splice(itemIndex, 1);
+            renderIdentificationHeaders(page, currentProfile.Identification.Headers);
+        });
+    }
+
+    function openPopup(elem) {
+        elem.classList.remove("hide");
+    }
+
+    function closePopup(elem) {
+        elem.classList.add("hide");
+    }
+
+    function editIdentificationHeader(page, header) {
+        isSubProfileNew = null == header;
+        header = header || {};
+        currentSubProfile = header;
+        var popup = $("#identificationHeaderPopup", page);
+        $("#txtIdentificationHeaderName", popup).val(header.Name || "");
+        $("#txtIdentificationHeaderValue", popup).val(header.Value || "");
+        $("#selectMatchType", popup).val(header.Match || "Equals");
+        openPopup(popup[0]);
+    }
+
+    function saveIdentificationHeader(page) {
+        currentSubProfile.Name = $("#txtIdentificationHeaderName", page).val();
+        currentSubProfile.Value = $("#txtIdentificationHeaderValue", page).val();
+        currentSubProfile.Match = $("#selectMatchType", page).val();
+
+        if (isSubProfileNew) {
+            currentProfile.Identification = currentProfile.Identification || {};
+            currentProfile.Identification.Headers = currentProfile.Identification.Headers || [];
+            currentProfile.Identification.Headers.push(currentSubProfile);
+        }
+
+        renderIdentificationHeaders(page, currentProfile.Identification.Headers);
+        currentSubProfile = null;
+        closePopup($("#identificationHeaderPopup", page)[0]);
+    }
+
+    function renderXmlDocumentAttributes(page, attribute) {
+        var html = '<div class="paperList">' + attribute.map(function (h__r) {
+            var li = '<div class="listItem">';
+            li += '<i class="md-icon listItemIcon">info</i>';
+            li += '<div class="listItemBody">';
+            li += '<h3 class="listItemBodyText">' + h__r.Name + " = " + (h__r.Value || "") + "</h3>";
+            li += "</div>";
+            li += '<button type="button" is="paper-icon-button-light" class="btnDeleteXmlAttribute listItemButton" data-index="0"><i class="md-icon">delete</i></button>';
+            return li += "</div>";
+        }).join("") + "</div>";
+        var elem = $(".xmlDocumentAttributeList", page).html(html).trigger("create");
+        $(".btnDeleteXmlAttribute", elem).on("click", function () {
+            var itemIndex = parseInt(this.getAttribute("data-index"));
+            currentProfile.XmlRootAttributes.splice(itemIndex, 1);
+            renderXmlDocumentAttributes(page, currentProfile.XmlRootAttributes);
+        });
+    }
+
+    function editXmlDocumentAttribute(page, attribute) {
+        isSubProfileNew = null == attribute;
+        attribute = attribute || {};
+        currentSubProfile = attribute;
+        var popup = $("#xmlAttributePopup", page);
+        $("#txtXmlAttributeName", popup).val(attribute.Name || "");
+        $("#txtXmlAttributeValue", popup).val(attribute.Value || "");
+        openPopup(popup[0]);
+    }
+
+    function saveXmlDocumentAttribute(page) {
+        currentSubProfile.Name = $("#txtXmlAttributeName", page).val();
+        currentSubProfile.Value = $("#txtXmlAttributeValue", page).val();
+
+        if (isSubProfileNew) {
+            currentProfile.XmlRootAttributes.push(currentSubProfile);
+        }
+
+        renderXmlDocumentAttributes(page, currentProfile.XmlRootAttributes);
+        currentSubProfile = null;
+        closePopup($("#xmlAttributePopup", page)[0]);
+    }
+
+    function renderSubtitleProfiles(page, profiles) {
+        var index = 0;
+        var html = '<div class="paperList">' + profiles.map(function (h__t) {
+            var li = '<div class="listItem lnkEditSubProfile" data-index="' + index + '">';
+            li += '<i class="md-icon listItemIcon">info</i>';
+            li += '<div class="listItemBody">';
+            li += '<h3 class="listItemBodyText">' + (h__t.Format || "") + "</h3>";
+            li += "</div>";
+            li += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile listItemButton" data-index="' + index + '"><i class="md-icon">delete</i></button>';
+            li += "</div>";
+            index++;
+            return li;
+        }).join("") + "</div>";
+        var elem = $(".subtitleProfileList", page).html(html).trigger("create");
+        $(".btnDeleteProfile", elem).on("click", function () {
+            var itemIndex = parseInt(this.getAttribute("data-index"));
+            currentProfile.SubtitleProfiles.splice(itemIndex, 1);
+            renderSubtitleProfiles(page, currentProfile.SubtitleProfiles);
+        });
+        $(".lnkEditSubProfile", elem).on("click", function () {
+            var itemIndex = parseInt(this.getAttribute("data-index"));
+            editSubtitleProfile(page, currentProfile.SubtitleProfiles[itemIndex]);
+        });
+    }
+
+    function editSubtitleProfile(page, profile) {
+        isSubProfileNew = null == profile;
+        profile = profile || {};
+        currentSubProfile = profile;
+        var popup = $("#subtitleProfilePopup", page);
+        $("#txtSubtitleProfileFormat", popup).val(profile.Format || "");
+        $("#selectSubtitleProfileMethod", popup).val(profile.Method || "");
+        $("#selectSubtitleProfileDidlMode", popup).val(profile.DidlMode || "");
+        openPopup(popup[0]);
+    }
+
+    function saveSubtitleProfile(page) {
+        currentSubProfile.Format = $("#txtSubtitleProfileFormat", page).val();
+        currentSubProfile.Method = $("#selectSubtitleProfileMethod", page).val();
+        currentSubProfile.DidlMode = $("#selectSubtitleProfileDidlMode", page).val();
+
+        if (isSubProfileNew) {
+            currentProfile.SubtitleProfiles.push(currentSubProfile);
+        }
+
+        renderSubtitleProfiles(page, currentProfile.SubtitleProfiles);
+        currentSubProfile = null;
+        closePopup($("#subtitleProfilePopup", page)[0]);
+    }
+
+    function renderSubProfiles(page, profile) {
+        renderDirectPlayProfiles(page, profile.DirectPlayProfiles);
+        renderTranscodingProfiles(page, profile.TranscodingProfiles);
+        renderContainerProfiles(page, profile.ContainerProfiles);
+        renderCodecProfiles(page, profile.CodecProfiles);
+        renderResponseProfiles(page, profile.ResponseProfiles);
+    }
+
+    function saveDirectPlayProfile(page) {
+        currentSubProfile.Type = $("#selectDirectPlayProfileType", page).val();
+        currentSubProfile.Container = $("#txtDirectPlayContainer", page).val();
+        currentSubProfile.AudioCodec = $("#txtDirectPlayAudioCodec", page).val();
+        currentSubProfile.VideoCodec = $("#txtDirectPlayVideoCodec", page).val();
+
+        if (isSubProfileNew) {
+            currentProfile.DirectPlayProfiles.push(currentSubProfile);
+        }
+
+        renderSubProfiles(page, currentProfile);
+        currentSubProfile = null;
+        closePopup($("#popupEditDirectPlayProfile", page)[0]);
+    }
+
+    function renderDirectPlayProfiles(page, profiles) {
+        var html = "";
+        html += '<ul data-role="listview" data-inset="true" data-split-icon="delete">';
+        var currentType;
+
+        for (var i__y = 0, length = profiles.length; i__y < length; i__y++) {
+            var profile = profiles[i__y];
+
+            if (profile.Type !== currentType) {
+                html += '<li data-role="list-divider">' + profile.Type + "</li>";
+                currentType = profile.Type;
+            }
+
+            html += "<li>";
+            html += '<a data-profileindex="' + i__y + '" class="lnkEditSubProfile" is="emby-linkbutton" href="#">';
+            html += "<p>" + Globalize.translate("ValueContainer").replace("{0}", profile.Container || allText) + "</p>";
+
+            if ("Video" == profile.Type) {
+                html += "<p>" + Globalize.translate("ValueVideoCodec").replace("{0}", profile.VideoCodec || allText) + "</p>";
+                html += "<p>" + Globalize.translate("ValueAudioCodec").replace("{0}", profile.AudioCodec || allText) + "</p>";
+            } else {
+                if ("Audio" == profile.Type) {
+                    html += "<p>" + Globalize.translate("ValueCodec").replace("{0}", profile.AudioCodec || allText) + "</p>";
+                }
+            }
+
+            html += "</a>";
+            html += '<a is="emby-linkbutton" href="#" data-icon="delete" class="btnDeleteProfile" data-profileindex="' + i__y + '">Delete</a>';
+            html += "</li>";
+        }
+
+        html += "</ul>";
+        var elem = $(".directPlayProfiles", page).html(html).trigger("create");
+        $(".btnDeleteProfile", elem).on("click", function () {
+            var index = this.getAttribute("data-profileindex");
+            deleteDirectPlayProfile(page, index);
+        });
+        $(".lnkEditSubProfile", elem).on("click", function () {
+            var index = parseInt(this.getAttribute("data-profileindex"));
+            editDirectPlayProfile(page, currentProfile.DirectPlayProfiles[index]);
+        });
+    }
+
+    function deleteDirectPlayProfile(page, index) {
+        currentProfile.DirectPlayProfiles.splice(index, 1);
+        renderDirectPlayProfiles(page, currentProfile.DirectPlayProfiles);
+    }
+
+    function editDirectPlayProfile(page, directPlayProfile) {
+        isSubProfileNew = null == directPlayProfile;
+        directPlayProfile = directPlayProfile || {};
+        currentSubProfile = directPlayProfile;
+        var popup = $("#popupEditDirectPlayProfile", page);
+        $("#selectDirectPlayProfileType", popup).val(directPlayProfile.Type || "Video").trigger("change");
+        $("#txtDirectPlayContainer", popup).val(directPlayProfile.Container || "");
+        $("#txtDirectPlayAudioCodec", popup).val(directPlayProfile.AudioCodec || "");
+        $("#txtDirectPlayVideoCodec", popup).val(directPlayProfile.VideoCodec || "");
+        openPopup(popup[0]);
+    }
+
+    function renderTranscodingProfiles(page, profiles) {
+        var html = "";
+        html += '<ul data-role="listview" data-inset="true" data-split-icon="delete">';
+        var currentType;
+
+        for (var i__u = 0, length = profiles.length; i__u < length; i__u++) {
+            var profile = profiles[i__u];
+
+            if (profile.Type !== currentType) {
+                html += '<li data-role="list-divider">' + profile.Type + "</li>";
+                currentType = profile.Type;
+            }
+
+            html += "<li>";
+            html += '<a data-profileindex="' + i__u + '" class="lnkEditSubProfile" is="emby-linkbutton" href="#">';
+            html += "<p>Protocol: " + (profile.Protocol || "Http") + "</p>";
+            html += "<p>" + Globalize.translate("ValueContainer").replace("{0}", profile.Container || allText) + "</p>";
+
+            if ("Video" == profile.Type) {
+                html += "<p>" + Globalize.translate("ValueVideoCodec").replace("{0}", profile.VideoCodec || allText) + "</p>";
+                html += "<p>" + Globalize.translate("ValueAudioCodec").replace("{0}", profile.AudioCodec || allText) + "</p>";
+            } else {
+                if ("Audio" == profile.Type) {
+                    html += "<p>" + Globalize.translate("ValueCodec").replace("{0}", profile.AudioCodec || allText) + "</p>";
+                }
+            }
+
+            html += "</a>";
+            html += '<a is="emby-linkbutton" href="#" data-icon="delete" class="btnDeleteProfile" data-profileindex="' + i__u + '">Delete</a>';
+            html += "</li>";
+        }
+
+        html += "</ul>";
+        var elem = $(".transcodingProfiles", page).html(html).trigger("create");
+        $(".btnDeleteProfile", elem).on("click", function () {
+            var index = this.getAttribute("data-profileindex");
+            deleteTranscodingProfile(page, index);
+        });
+        $(".lnkEditSubProfile", elem).on("click", function () {
+            var index = parseInt(this.getAttribute("data-profileindex"));
+            editTranscodingProfile(page, currentProfile.TranscodingProfiles[index]);
+        });
+    }
+
+    function editTranscodingProfile(page, transcodingProfile) {
+        isSubProfileNew = null == transcodingProfile;
+        transcodingProfile = transcodingProfile || {};
+        currentSubProfile = transcodingProfile;
+        var popup = $("#transcodingProfilePopup", page);
+        $("#selectTranscodingProfileType", popup).val(transcodingProfile.Type || "Video").trigger("change");
+        $("#txtTranscodingContainer", popup).val(transcodingProfile.Container || "");
+        $("#txtTranscodingAudioCodec", popup).val(transcodingProfile.AudioCodec || "");
+        $("#txtTranscodingVideoCodec", popup).val(transcodingProfile.VideoCodec || "");
+        $("#selectTranscodingProtocol", popup).val(transcodingProfile.Protocol || "Http");
+        $("#chkEnableMpegtsM2TsMode", popup).checked(transcodingProfile.EnableMpegtsM2TsMode || false);
+        $("#chkEstimateContentLength", popup).checked(transcodingProfile.EstimateContentLength || false);
+        $("#chkReportByteRangeRequests", popup).checked("Bytes" == transcodingProfile.TranscodeSeekInfo);
+        $(".radioTabButton:first", popup).trigger("click");
+        openPopup(popup[0]);
+    }
+
+    function deleteTranscodingProfile(page, index) {
+        currentProfile.TranscodingProfiles.splice(index, 1);
+        renderTranscodingProfiles(page, currentProfile.TranscodingProfiles);
+    }
+
+    function saveTranscodingProfile(page) {
+        currentSubProfile.Type = $("#selectTranscodingProfileType", page).val();
+        currentSubProfile.Container = $("#txtTranscodingContainer", page).val();
+        currentSubProfile.AudioCodec = $("#txtTranscodingAudioCodec", page).val();
+        currentSubProfile.VideoCodec = $("#txtTranscodingVideoCodec", page).val();
+        currentSubProfile.Protocol = $("#selectTranscodingProtocol", page).val();
+        currentSubProfile.Context = "Streaming";
+        currentSubProfile.EnableMpegtsM2TsMode = $("#chkEnableMpegtsM2TsMode", page).checked();
+        currentSubProfile.EstimateContentLength = $("#chkEstimateContentLength", page).checked();
+        currentSubProfile.TranscodeSeekInfo = $("#chkReportByteRangeRequests", page).checked() ? "Bytes" : "Auto";
+
+        if (isSubProfileNew) {
+            currentProfile.TranscodingProfiles.push(currentSubProfile);
+        }
+
+        renderSubProfiles(page, currentProfile);
+        currentSubProfile = null;
+        closePopup($("#transcodingProfilePopup", page)[0]);
+    }
+
+    function renderContainerProfiles(page, profiles) {
+        var html = "";
+        html += '<ul data-role="listview" data-inset="true" data-split-icon="delete">';
+        var currentType;
+
+        for (var i__i = 0, length = profiles.length; i__i < length; i__i++) {
+            var profile = profiles[i__i];
+
+            if (profile.Type !== currentType) {
+                html += '<li data-role="list-divider">' + profile.Type + "</li>";
+                currentType = profile.Type;
+            }
+
+            html += "<li>";
+            html += '<a data-profileindex="' + i__i + '" class="lnkEditSubProfile" is="emby-linkbutton" href="#">';
+            html += "<p>" + Globalize.translate("ValueContainer").replace("{0}", profile.Container || allText) + "</p>";
+
+            if (profile.Conditions && profile.Conditions.length) {
+                html += "<p>";
+                html += Globalize.translate("ValueConditions").replace("{0}", profile.Conditions.map(function (c__o) {
+                    return c__o.Property;
+                }).join(", "));
+                html += "</p>";
+            }
+
+            html += "</a>";
+            html += '<a is="emby-linkbutton" href="#" data-icon="delete" class="btnDeleteProfile" data-profileindex="' + i__i + '">Delete</a>';
+            html += "</li>";
+        }
+
+        html += "</ul>";
+        var elem = $(".containerProfiles", page).html(html).trigger("create");
+        $(".btnDeleteProfile", elem).on("click", function () {
+            var index = this.getAttribute("data-profileindex");
+            deleteContainerProfile(page, index);
+        });
+        $(".lnkEditSubProfile", elem).on("click", function () {
+            var index = parseInt(this.getAttribute("data-profileindex"));
+            editContainerProfile(page, currentProfile.ContainerProfiles[index]);
+        });
+    }
+
+    function deleteContainerProfile(page, index) {
+        currentProfile.ContainerProfiles.splice(index, 1);
+        renderContainerProfiles(page, currentProfile.ContainerProfiles);
+    }
+
+    function editContainerProfile(page, containerProfile) {
+        isSubProfileNew = null == containerProfile;
+        containerProfile = containerProfile || {};
+        currentSubProfile = containerProfile;
+        var popup = $("#containerProfilePopup", page);
+        $("#selectContainerProfileType", popup).val(containerProfile.Type || "Video").trigger("change");
+        $("#txtContainerProfileContainer", popup).val(containerProfile.Container || "");
+        $(".radioTabButton:first", popup).trigger("click");
+        openPopup(popup[0]);
+    }
+
+    function saveContainerProfile(page) {
+        currentSubProfile.Type = $("#selectContainerProfileType", page).val();
+        currentSubProfile.Container = $("#txtContainerProfileContainer", page).val();
+
+        if (isSubProfileNew) {
+            currentProfile.ContainerProfiles.push(currentSubProfile);
+        }
+
+        renderSubProfiles(page, currentProfile);
+        currentSubProfile = null;
+        closePopup($("#containerProfilePopup", page)[0]);
+    }
+
+    function renderCodecProfiles(page, profiles) {
+        var html = "";
+        html += '<ul data-role="listview" data-inset="true" data-split-icon="delete">';
+        var currentType;
+
+        for (var i__p = 0, length = profiles.length; i__p < length; i__p++) {
+            var profile = profiles[i__p];
+            var type = profile.Type.replace("VideoAudio", "Video Audio");
+
+            if (type !== currentType) {
+                html += '<li data-role="list-divider">' + type + "</li>";
+                currentType = type;
+            }
+
+            html += "<li>";
+            html += '<a data-profileindex="' + i__p + '" class="lnkEditSubProfile" is="emby-linkbutton" href="#">';
+            html += "<p>" + Globalize.translate("ValueCodec").replace("{0}", profile.Codec || allText) + "</p>";
+
+            if (profile.Conditions && profile.Conditions.length) {
+                html += "<p>";
+                html += Globalize.translate("ValueConditions").replace("{0}", profile.Conditions.map(function (c__a) {
+                    return c__a.Property;
+                }).join(", "));
+                html += "</p>";
+            }
+
+            html += "</a>";
+            html += '<a is="emby-linkbutton" href="#" data-icon="delete" class="btnDeleteProfile" data-profileindex="' + i__p + '">Delete</a>';
+            html += "</li>";
+        }
+
+        html += "</ul>";
+        var elem = $(".codecProfiles", page).html(html).trigger("create");
+        $(".btnDeleteProfile", elem).on("click", function () {
+            var index = this.getAttribute("data-profileindex");
+            deleteCodecProfile(page, index);
+        });
+        $(".lnkEditSubProfile", elem).on("click", function () {
+            var index = parseInt(this.getAttribute("data-profileindex"));
+            editCodecProfile(page, currentProfile.CodecProfiles[index]);
+        });
+    }
+
+    function deleteCodecProfile(page, index) {
+        currentProfile.CodecProfiles.splice(index, 1);
+        renderCodecProfiles(page, currentProfile.CodecProfiles);
+    }
+
+    function editCodecProfile(page, codecProfile) {
+        isSubProfileNew = null == codecProfile;
+        codecProfile = codecProfile || {};
+        currentSubProfile = codecProfile;
+        var popup = $("#codecProfilePopup", page);
+        $("#selectCodecProfileType", popup).val(codecProfile.Type || "Video").trigger("change");
+        $("#txtCodecProfileCodec", popup).val(codecProfile.Codec || "");
+        $(".radioTabButton:first", popup).trigger("click");
+        openPopup(popup[0]);
+    }
+
+    function saveCodecProfile(page) {
+        currentSubProfile.Type = $("#selectCodecProfileType", page).val();
+        currentSubProfile.Codec = $("#txtCodecProfileCodec", page).val();
+
+        if (isSubProfileNew) {
+            currentProfile.CodecProfiles.push(currentSubProfile);
+        }
+
+        renderSubProfiles(page, currentProfile);
+        currentSubProfile = null;
+        closePopup($("#codecProfilePopup", page)[0]);
+    }
+
+    function renderResponseProfiles(page, profiles) {
+        var html = "";
+        html += '<ul data-role="listview" data-inset="true" data-split-icon="delete">';
+        var currentType;
+
+        for (var i__s = 0, length = profiles.length; i__s < length; i__s++) {
+            var profile = profiles[i__s];
+
+            if (profile.Type !== currentType) {
+                html += '<li data-role="list-divider">' + profile.Type + "</li>";
+                currentType = profile.Type;
+            }
+
+            html += "<li>";
+            html += '<a data-profileindex="' + i__s + '" class="lnkEditSubProfile" is="emby-linkbutton" href="#">';
+            html += "<p>" + Globalize.translate("ValueContainer").replace("{0}", profile.Container || allText) + "</p>";
+
+            if ("Video" == profile.Type) {
+                html += "<p>" + Globalize.translate("ValueVideoCodec").replace("{0}", profile.VideoCodec || allText) + "</p>";
+                html += "<p>" + Globalize.translate("ValueAudioCodec").replace("{0}", profile.AudioCodec || allText) + "</p>";
+            } else {
+                if ("Audio" == profile.Type) {
+                    html += "<p>" + Globalize.translate("ValueCodec").replace("{0}", profile.AudioCodec || allText) + "</p>";
+                }
+            }
+
+            if (profile.Conditions && profile.Conditions.length) {
+                html += "<p>";
+                html += Globalize.translate("ValueConditions").replace("{0}", profile.Conditions.map(function (c__d) {
+                    return c__d.Property;
+                }).join(", "));
+                html += "</p>";
+            }
+
+            html += "</a>";
+            html += '<a is="emby-linkbutton" href="#" data-icon="delete" class="btnDeleteProfile" data-profileindex="' + i__s + '">Delete</a>';
+            html += "</li>";
+        }
+
+        html += "</ul>";
+        var elem = $(".mediaProfiles", page).html(html).trigger("create");
+        $(".btnDeleteProfile", elem).on("click", function () {
+            var index = this.getAttribute("data-profileindex");
+            deleteResponseProfile(page, index);
+        });
+        $(".lnkEditSubProfile", elem).on("click", function () {
+            var index = parseInt(this.getAttribute("data-profileindex"));
+            editResponseProfile(page, currentProfile.ResponseProfiles[index]);
+        });
+    }
+
+    function deleteResponseProfile(page, index) {
+        currentProfile.ResponseProfiles.splice(index, 1);
+        renderResponseProfiles(page, currentProfile.ResponseProfiles);
+    }
+
+    function editResponseProfile(page, responseProfile) {
+        isSubProfileNew = null == responseProfile;
+        responseProfile = responseProfile || {};
+        currentSubProfile = responseProfile;
+        var popup = $("#responseProfilePopup", page);
+        $("#selectResponseProfileType", popup).val(responseProfile.Type || "Video").trigger("change");
+        $("#txtResponseProfileContainer", popup).val(responseProfile.Container || "");
+        $("#txtResponseProfileAudioCodec", popup).val(responseProfile.AudioCodec || "");
+        $("#txtResponseProfileVideoCodec", popup).val(responseProfile.VideoCodec || "");
+        $(".radioTabButton:first", popup).trigger("click");
+        openPopup(popup[0]);
+    }
+
+    function saveResponseProfile(page) {
+        currentSubProfile.Type = $("#selectResponseProfileType", page).val();
+        currentSubProfile.Container = $("#txtResponseProfileContainer", page).val();
+        currentSubProfile.AudioCodec = $("#txtResponseProfileAudioCodec", page).val();
+        currentSubProfile.VideoCodec = $("#txtResponseProfileVideoCodec", page).val();
+
+        if (isSubProfileNew) {
+            currentProfile.ResponseProfiles.push(currentSubProfile);
+        }
+
+        renderSubProfiles(page, currentProfile);
+        currentSubProfile = null;
+        closePopup($("#responseProfilePopup", page)[0]);
+    }
+
+    function saveProfile(page, profile) {
+        updateProfile(page, profile);
+        var id = getParameterByName("id");
+
+        if (id) {
+            ApiClient.ajax({
+                type: "POST",
+                url: ApiClient.getUrl("Dlna/Profiles/" + id),
+                data: JSON.stringify(profile),
+                contentType: "application/json"
+            }).then(function () {
+                require(["toast"], function (toast) {
+                    toast("Settings saved.");
+                });
+            }, Dashboard.processErrorResponse);
+        } else {
+            ApiClient.ajax({
+                type: "POST",
+                url: ApiClient.getUrl("Dlna/Profiles"),
+                data: JSON.stringify(profile),
+                contentType: "application/json"
+            }).then(function () {
+                Dashboard.navigate("dlnaprofiles.html");
+            }, Dashboard.processErrorResponse);
+        }
+
+        loading.hide();
+    }
+
+    function updateProfile(page, profile) {
+        profile.Name = $("#txtName", page).val();
+        profile.EnableAlbumArtInDidl = $("#chkEnableAlbumArtInDidl", page).checked();
+        profile.EnableSingleAlbumArtLimit = $("#chkEnableSingleImageLimit", page).checked();
+        profile.SupportedMediaTypes = $(".chkMediaType:checked", page).get().map(function (c__f) {
+            return c__f.getAttribute("data-value");
+        }).join(",");
+        profile.Identification = profile.Identification || {};
+        profile.FriendlyName = $("#txtInfoFriendlyName", page).val();
+        profile.ModelName = $("#txtInfoModelName", page).val();
+        profile.ModelNumber = $("#txtInfoModelNumber", page).val();
+        profile.ModelDescription = $("#txtInfoModelDescription", page).val();
+        profile.ModelUrl = $("#txtInfoModelUrl", page).val();
+        profile.Manufacturer = $("#txtInfoManufacturer", page).val();
+        profile.ManufacturerUrl = $("#txtInfoManufacturerUrl", page).val();
+        profile.SerialNumber = $("#txtInfoSerialNumber", page).val();
+        profile.Identification.FriendlyName = $("#txtIdFriendlyName", page).val();
+        profile.Identification.ModelName = $("#txtIdModelName", page).val();
+        profile.Identification.ModelNumber = $("#txtIdModelNumber", page).val();
+        profile.Identification.ModelDescription = $("#txtIdModelDescription", page).val();
+        profile.Identification.ModelUrl = $("#txtIdModelUrl", page).val();
+        profile.Identification.Manufacturer = $("#txtIdManufacturer", page).val();
+        profile.Identification.ManufacturerUrl = $("#txtIdManufacturerUrl", page).val();
+        profile.Identification.SerialNumber = $("#txtIdSerialNumber", page).val();
+        profile.Identification.DeviceDescription = $("#txtIdDeviceDescription", page).val();
+        profile.AlbumArtPn = $("#txtAlbumArtPn", page).val();
+        profile.MaxAlbumArtWidth = $("#txtAlbumArtMaxWidth", page).val();
+        profile.MaxAlbumArtHeight = $("#txtAlbumArtMaxHeight", page).val();
+        profile.MaxIconWidth = $("#txtIconMaxWidth", page).val();
+        profile.MaxIconHeight = $("#txtIconMaxHeight", page).val();
+        profile.RequiresPlainFolders = $("#chkRequiresPlainFolders", page).checked();
+        profile.RequiresPlainVideoItems = $("#chkRequiresPlainVideoItems", page).checked();
+        profile.IgnoreTranscodeByteRangeRequests = $("#chkIgnoreTranscodeByteRangeRequests", page).checked();
+        profile.MaxStreamingBitrate = $("#txtMaxAllowedBitrate", page).val();
+        profile.MusicStreamingTranscodingBitrate = $("#txtMusicStreamingTranscodingBitrate", page).val();
+        profile.ProtocolInfo = $("#txtProtocolInfo", page).val();
+        profile.XDlnaCap = $("#txtXDlnaCap", page).val();
+        profile.XDlnaDoc = $("#txtXDlnaDoc", page).val();
+        profile.SonyAggregationFlags = $("#txtSonyAggregationFlags", page).val();
+        profile.UserId = $("#selectUser", page).val();
+    }
+
+    var currentProfile;
+    var currentSubProfile;
+    var isSubProfileNew;
+    var allText = Globalize.translate("LabelAll");
+
+    $(document).on("pageinit", "#dlnaProfilePage", function () {
+        var page = this;
+        $(".radioTabButton", page).on("click", function () {
+            $(this).siblings().removeClass("ui-btn-active");
+            $(this).addClass("ui-btn-active");
+            var value = "A" == this.tagName ? this.getAttribute("data-value") : this.value;
+            var elem = $("." + value, page);
+            elem.siblings(".tabContent").hide();
+            elem.show();
+        });
+        $("#selectDirectPlayProfileType", page).on("change", function () {
+            if ("Video" == this.value) {
+                $("#fldDirectPlayVideoCodec", page).show();
+            } else {
+                $("#fldDirectPlayVideoCodec", page).hide();
+            }
+
+            if ("Photo" == this.value) {
+                $("#fldDirectPlayAudioCodec", page).hide();
+            } else {
+                $("#fldDirectPlayAudioCodec", page).show();
+            }
+        });
+        $("#selectTranscodingProfileType", page).on("change", function () {
+            if ("Video" == this.value) {
+                $("#fldTranscodingVideoCodec", page).show();
+                $("#fldTranscodingProtocol", page).show();
+                $("#fldEnableMpegtsM2TsMode", page).show();
+            } else {
+                $("#fldTranscodingVideoCodec", page).hide();
+                $("#fldTranscodingProtocol", page).hide();
+                $("#fldEnableMpegtsM2TsMode", page).hide();
+            }
+
+            if ("Photo" == this.value) {
+                $("#fldTranscodingAudioCodec", page).hide();
+                $("#fldEstimateContentLength", page).hide();
+                $("#fldReportByteRangeRequests", page).hide();
+            } else {
+                $("#fldTranscodingAudioCodec", page).show();
+                $("#fldEstimateContentLength", page).show();
+                $("#fldReportByteRangeRequests", page).show();
+            }
+        });
+        $("#selectResponseProfileType", page).on("change", function () {
+            if ("Video" == this.value) {
+                $("#fldResponseProfileVideoCodec", page).show();
+            } else {
+                $("#fldResponseProfileVideoCodec", page).hide();
+            }
+
+            if ("Photo" == this.value) {
+                $("#fldResponseProfileAudioCodec", page).hide();
+            } else {
+                $("#fldResponseProfileAudioCodec", page).show();
+            }
+        });
+        $(".btnAddDirectPlayProfile", page).on("click", function () {
+            editDirectPlayProfile(page);
+        });
+        $(".btnAddTranscodingProfile", page).on("click", function () {
+            editTranscodingProfile(page);
+        });
+        $(".btnAddContainerProfile", page).on("click", function () {
+            editContainerProfile(page);
+        });
+        $(".btnAddCodecProfile", page).on("click", function () {
+            editCodecProfile(page);
+        });
+        $(".btnAddResponseProfile", page).on("click", function () {
+            editResponseProfile(page);
+        });
+        $(".btnAddIdentificationHttpHeader", page).on("click", function () {
+            editIdentificationHeader(page);
+        });
+        $(".btnAddXmlDocumentAttribute", page).on("click", function () {
+            editXmlDocumentAttribute(page);
+        });
+        $(".btnAddSubtitleProfile", page).on("click", function () {
+            editSubtitleProfile(page);
+        });
+        $(".dlnaProfileForm").off("submit", DlnaProfilePage.onSubmit).on("submit", DlnaProfilePage.onSubmit);
+        $(".editDirectPlayProfileForm").off("submit", DlnaProfilePage.onDirectPlayFormSubmit).on("submit", DlnaProfilePage.onDirectPlayFormSubmit);
+        $(".transcodingProfileForm").off("submit", DlnaProfilePage.onTranscodingProfileFormSubmit).on("submit", DlnaProfilePage.onTranscodingProfileFormSubmit);
+        $(".containerProfileForm").off("submit", DlnaProfilePage.onContainerProfileFormSubmit).on("submit", DlnaProfilePage.onContainerProfileFormSubmit);
+        $(".codecProfileForm").off("submit", DlnaProfilePage.onCodecProfileFormSubmit).on("submit", DlnaProfilePage.onCodecProfileFormSubmit);
+        $(".editResponseProfileForm").off("submit", DlnaProfilePage.onResponseProfileFormSubmit).on("submit", DlnaProfilePage.onResponseProfileFormSubmit);
+        $(".identificationHeaderForm").off("submit", DlnaProfilePage.onIdentificationHeaderFormSubmit).on("submit", DlnaProfilePage.onIdentificationHeaderFormSubmit);
+        $(".xmlAttributeForm").off("submit", DlnaProfilePage.onXmlAttributeFormSubmit).on("submit", DlnaProfilePage.onXmlAttributeFormSubmit);
+        $(".subtitleProfileForm").off("submit", DlnaProfilePage.onSubtitleProfileFormSubmit).on("submit", DlnaProfilePage.onSubtitleProfileFormSubmit);
+    }).on("pageshow", "#dlnaProfilePage", function () {
+        var page = this;
+        $("#radioInfo", page).trigger("click");
+        loadProfile(page);
+    });
+    window.DlnaProfilePage = {
+        onSubmit: function () {
+            loading.show();
+            saveProfile($(this).parents(".page"), currentProfile);
+            return false;
+        },
+        onDirectPlayFormSubmit: function () {
+            saveDirectPlayProfile($(this).parents(".page"));
+            return false;
+        },
+        onTranscodingProfileFormSubmit: function () {
+            saveTranscodingProfile($(this).parents(".page"));
+            return false;
+        },
+        onContainerProfileFormSubmit: function () {
+            saveContainerProfile($(this).parents(".page"));
+            return false;
+        },
+        onCodecProfileFormSubmit: function () {
+            saveCodecProfile($(this).parents(".page"));
+            return false;
+        },
+        onResponseProfileFormSubmit: function () {
+            saveResponseProfile($(this).parents(".page"));
+            return false;
+        },
+        onIdentificationHeaderFormSubmit: function () {
+            saveIdentificationHeader($(this).parents(".page"));
+            return false;
+        },
+        onXmlAttributeFormSubmit: function () {
+            saveXmlDocumentAttribute($(this).parents(".page"));
+            return false;
+        },
+        onSubtitleProfileFormSubmit: function () {
+            saveSubtitleProfile($(this).parents(".page"));
+            return false;
+        }
+    };
+});

src/controllers/dlnaprofiles.js

@@ -54,6 +54,7 @@ define(["jQuery", "globalize", "loading", "libraryMenu", "listViewStyle", "emby-
             name: globalize.translate("TabProfiles")
         }]
     }
+
     $(document).on("pageshow", "#dlnaProfilesPage", function() {
         libraryMenu.setTabs("dlna", 1, getTabs), loadProfiles(this)
     })

src/controllers/edititemmetadata.js

@@ -1,4 +1,4 @@
-define(["loading"], function(loading) {
+define(["loading", "scripts/editorsidebar"], function(loading) {
     "use strict";
 
     function reload(context, itemId) {

src/controllers/encodingsettings.js

@@ -69,6 +69,7 @@ define(["jQuery", "loading", "globalize", "dom"], function($, loading, globalize
             -1 === c.getAttribute("data-types").split(",").indexOf(value) ? dom.parentWithTag(c, "LABEL").classList.add("hide") : (dom.parentWithTag(c, "LABEL").classList.remove("hide"), any = !0)
         }), any ? context.querySelector(".decodingCodecsList").classList.remove("hide") : context.querySelector(".decodingCodecsList").classList.add("hide")
     }
+
     $(document).on("pageinit", "#encodingSettingsPage", function() {
         var page = this;
         page.querySelector("#selectVideoDecoder").addEventListener("change", function() {

src/controllers/favorites.js

@@ -167,7 +167,6 @@ define(["appRouter", "cardBuilder", "dom", "globalize", "connectionManager", "ap
                 action: section.action,
                 allowBottomPadding: !enableScrollX(),
                 cardLayout: cardLayout,
-                vibrant: supportsImageAnalysis && cardLayout,
                 leadingButtons: leadingButtons,
                 lines: lines
             })

src/controllers/forgotpassword.js

@@ -12,9 +12,12 @@ define([], function() {
         });
         if ("PinCode" == result.Action) {
             var msg = Globalize.translate("MessageForgotPasswordFileCreated");
-            return msg += "<br/>", msg += "<br/>", msg += "<a href=\"forgotpasswordpin.html\">Enter PIN here to finish Password Reset</a>" ,msg += "<br/>",msg += result.PinFile, msg += "<br/>", void Dashboard.alert({
+            return msg += "<br/>", msg += "<br/>", msg += "Enter PIN here to finish Password Reset<br/>" ,msg += "<br/>",msg += result.PinFile, msg += "<br/>", void Dashboard.alert({
                 message: msg,
-                title: Globalize.translate("HeaderForgotPassword")
+                title: Globalize.translate("HeaderForgotPassword"),
+                callback: function() {
+                    Dashboard.navigate("forgotpasswordpin.html")
+                }
             })
         }
     }
@@ -31,4 +34,4 @@ define([], function() {
         }
         view.querySelector("form").addEventListener("submit", onSubmit)
     }
-});
+});

src/controllers/itemdetailpage.js

@@ -967,7 +967,25 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
             var stream = version.MediaStreams[i];
             if ("Data" != stream.Type) {
                 html += '<div class="mediaInfoStream">';
-                html += '<h3 class="mediaInfoStreamType">' + globalize.translate("MediaInfoStreamType" + stream.Type) + "</h3>";
+                html += '<h3 class="mediaInfoStreamType">';
+                switch (stream.Type) {
+                    case 'Audio':
+                        html += globalize.translate("MediaInfoStreamTypeAudio");
+                        break;
+                    case 'Subtitle':
+                        html += globalize.translate("MediaInfoStreamTypeSubtitle");
+                        break;
+                    case 'Video':
+                        html += globalize.translate("MediaInfoStreamTypeVideo");
+                        break;
+                    case 'Data':
+                        html += globalize.translate("MediaInfoStreamTypeData");
+                        break;
+                    case 'EmbeddedImage':
+                        html += globalize.translate("MediaInfoStreamTypeEmbeddedImage");
+                        break;
+                }
+                html += "</h3>";
                 var attributes = [];
                 stream.DisplayTitle && attributes.push(createAttribute("Title", stream.DisplayTitle)), stream.Language && "Video" != stream.Type && attributes.push(createAttribute(globalize.translate("MediaInfoLanguage"), stream.Language)), stream.Codec && attributes.push(createAttribute(globalize.translate("MediaInfoCodec"), stream.Codec.toUpperCase())), stream.CodecTag && attributes.push(createAttribute(globalize.translate("MediaInfoCodecTag"), stream.CodecTag)), null != stream.IsAVC && attributes.push(createAttribute("AVC", stream.IsAVC ? "Yes" : "No")), stream.Profile && attributes.push(createAttribute(globalize.translate("MediaInfoProfile"), stream.Profile)), stream.Level && attributes.push(createAttribute(globalize.translate("MediaInfoLevel"), stream.Level)), (stream.Width || stream.Height) && attributes.push(createAttribute(globalize.translate("MediaInfoResolution"), stream.Width + "x" + stream.Height)), stream.AspectRatio && "mjpeg" != stream.Codec && attributes.push(createAttribute(globalize.translate("MediaInfoAspectRatio"), stream.AspectRatio)), "Video" == stream.Type && (null != stream.IsAnamorphic && attributes.push(createAttribute(globalize.translate("MediaInfoAnamorphic"), stream.IsAnamorphic ? "Yes" : "No")), attributes.push(createAttribute(globalize.translate("MediaInfoInterlaced"), stream.IsInterlaced ? "Yes" : "No"))), (stream.AverageFrameRate || stream.RealFrameRate) && attributes.push(createAttribute(globalize.translate("MediaInfoFramerate"), stream.AverageFrameRate || stream.RealFrameRate)), stream.ChannelLayout && attributes.push(createAttribute(globalize.translate("MediaInfoLayout"), stream.ChannelLayout)), stream.Channels && attributes.push(createAttribute(globalize.translate("MediaInfoChannels"), stream.Channels + " ch")), stream.BitRate && "mjpeg" != stream.Codec && attributes.push(createAttribute(globalize.translate("MediaInfoBitrate"), parseInt(stream.BitRate / 1e3) + " kbps")), stream.SampleRate && attributes.push(createAttribute(globalize.translate("MediaInfoSampleRate"), stream.SampleRate + " Hz")), stream.VideoRange && "SDR" !== stream.VideoRange && attributes.push(createAttribute(globalize.translate("VideoRange"), stream.VideoRange)), stream.ColorPrimaries && attributes.push(createAttribute(globalize.translate("ColorPrimaries"), stream.ColorPrimaries)), stream.ColorSpace && attributes.push(createAttribute(globalize.translate("ColorSpace"), stream.ColorSpace)), stream.ColorTransfer && attributes.push(createAttribute(globalize.translate("ColorTransfer"), stream.ColorTransfer)), stream.BitDepth && attributes.push(createAttribute(globalize.translate("MediaInfoBitDepth"), stream.BitDepth + " bit")), stream.PixelFormat && attributes.push(createAttribute(globalize.translate("MediaInfoPixelFormat"), stream.PixelFormat)), stream.RefFrames && attributes.push(createAttribute(globalize.translate("MediaInfoRefFrames"), stream.RefFrames)), stream.NalLengthSize && attributes.push(createAttribute("NAL", stream.NalLengthSize)), "Video" != stream.Type && attributes.push(createAttribute(globalize.translate("MediaInfoDefault"), stream.IsDefault ? "Yes" : "No")), "Subtitle" == stream.Type && (attributes.push(createAttribute(globalize.translate("MediaInfoForced"), stream.IsForced ? "Yes" : "No")), attributes.push(createAttribute(globalize.translate("MediaInfoExternal"), stream.IsExternal ? "Yes" : "No"))), "Video" == stream.Type && version.Timestamp && attributes.push(createAttribute(globalize.translate("MediaInfoTimestamp"), version.Timestamp)), html += attributes.join("<br/>"), html += "</div>"
             }
@@ -1010,9 +1028,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
         if (!people.length) return void page.querySelector("#castCollapsible").classList.add("hide");
         page.querySelector("#castCollapsible").classList.remove("hide");
         var castContent = page.querySelector("#castContent");
-        enableScrollX() ? (castContent.classList.add("scrollX"), limit = 32) : castContent.classList.add("vertical-wrap");
-        var limitExceeded = limit && people.length > limit;
-        limitExceeded && (people = people.slice(0), people.length = Math.min(limit, people.length)), require(["peoplecardbuilder"], function(peoplecardbuilder) {
+        require(["peoplecardbuilder"], function(peoplecardbuilder) {
             peoplecardbuilder.buildPeopleCards(people, {
                 itemsContainer: castContent,
                 coverImage: !0,
@@ -1020,9 +1036,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
                 width: 160,
                 shape: getPortraitShape()
             })
-        });
-        var morePeopleButton = page.querySelector(".morePeople");
-        morePeopleButton && (limitExceeded && !enableScrollX() ? morePeopleButton.classList.remove("hide") : morePeopleButton.classList.add("hide"))
+        })
     }
 
     function itemDetailPage() {

src/controllers/livetvsuggested.js

@@ -284,12 +284,6 @@ define(["layoutManager", "userSettings", "inputManager", "loading", "globalize",
             getTabController(page, index, function (controller) {
                 initialTabIndex = null;
 
-                if (1 === index) {
-                    document.body.classList.add("autoScrollY");
-                } else {
-                    document.body.classList.remove("autoScrollY");
-                }
-
                 if (-1 == renderedTabs.indexOf(index)) {
                     if (1 === index) {
                         renderedTabs.push(index);
@@ -362,7 +356,6 @@ define(["layoutManager", "userSettings", "inputManager", "loading", "globalize",
             if (currentTabController && currentTabController.onHide) {
                 currentTabController.onHide();
             }
-            document.body.classList.remove("autoScrollY");
             inputManager.off(window, onInputCommand);
         });
         view.addEventListener("viewdestroy", function (evt) {

src/controllers/loginpage.js

@@ -146,18 +146,13 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "cardSt
             var apiClient = getApiClient();
             apiClient.getPublicUsers().then(function(users) {
                 if (users.length) {
-                    if (users[0].EnableAutoLogin) {
-                        authenticateUserByName(view, apiClient, users[0].Name, "");
-                    } else {
-                        showVisualForm();
-                        loadUserList(view, apiClient, users);
-                    }
+                    showVisualForm();
+                    loadUserList(view, apiClient, users);
                 } else {
                     view.querySelector("#txtManualName").value = "";
                     showManualForm(view, false, false);
                 }
-
-            }).finally(function () {
+            }).catch().then(function() {
                 loading.hide();
             });
 
@@ -166,4 +161,4 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "cardSt
             });
         });
     }
-});
+});

src/controllers/logpage.js

@@ -1,29 +1,33 @@
 define(["datetime", "loading", "apphost", "listViewStyle", "emby-button", "flexStyles"], function(datetime, loading, appHost) {
     "use strict";
     return function(view, params) {
-        view.querySelector("#chkDebugLog").addEventListener("change", function() {
-            ApiClient.getServerConfiguration().then(function(config) {
-                config.EnableDebugLevelLogging = view.querySelector("#chkDebugLog").checked, ApiClient.updateServerConfiguration(config)
-            })
-        }), view.addEventListener("viewbeforeshow", function() {
+        view.addEventListener("viewbeforeshow", function() {
             loading.show();
             var apiClient = ApiClient;
             apiClient.getJSON(apiClient.getUrl("System/Logs")).then(function(logs) {
                 var html = "";
-                html += '<div class="paperList">', html += logs.map(function(log) {
+                html += '<div class="paperList">';
+                html += logs.map(function(log) {
                     var logUrl = apiClient.getUrl("System/Logs/Log", {
                         name: log.Name
                     });
                     logUrl += "&api_key=" + apiClient.accessToken();
                     var logHtml = "";
-                    logHtml += '<a is="emby-linkbutton" href="' + logUrl + '" target="_blank" class="listItem listItem-border" style="color:inherit;">', logHtml += '<div class="listItemBody two-line">', logHtml += "<h3 class='listItemBodyText'>" + log.Name + "</h3>";
-                    var date = datetime.parseISO8601Date(log.DateModified, !0),
-                        text = datetime.toLocaleDateString(date);
-                    return text += " " + datetime.getDisplayTime(date), logHtml += '<div class="listItemBodyText secondary">' + text + "</div>", logHtml += "</div>", logHtml += "</a>"
-                }).join(""), html += "</div>", view.querySelector(".serverLogs").innerHTML = html, loading.hide()
-            }), apiClient.getServerConfiguration().then(function(config) {
-                view.querySelector("#chkDebugLog").checked = config.EnableDebugLevelLogging
-            })
-        })
+                    logHtml += '<a is="emby-linkbutton" href="' + logUrl + '" target="_blank" class="listItem listItem-border" style="color:inherit;">';
+                    logHtml += '<div class="listItemBody two-line">';
+                    logHtml += "<h3 class='listItemBodyText'>" + log.Name + "</h3>";
+                    var date = datetime.parseISO8601Date(log.DateModified, true);
+                    var text = datetime.toLocaleDateString(date);
+                    text += " " + datetime.getDisplayTime(date);
+                    logHtml += '<div class="listItemBodyText secondary">' + text + "</div>";
+                    logHtml += "</div>";
+                    logHtml += "</a>";
+                    return logHtml;
+                }).join("");
+                html += "</div>";
+                view.querySelector(".serverLogs").innerHTML = html;
+                loading.hide();
+            });
+        });
     }
 });

src/controllers/medialibrarypage.js

@@ -1,24 +1,15 @@
 define(["jQuery", "apphost", "scripts/taskbutton", "loading", "libraryMenu", "globalize", "dom", "indicators", "cardStyle", "emby-itemrefreshindicator"], function($, appHost, taskButton, loading, libraryMenu, globalize, dom, indicators) {
     "use strict";
 
-    function changeCollectionType(page, virtualFolder) {
-        require(["alert"], function(alert) {
-            alert({
-                title: globalize.translate("HeaderChangeFolderType"),
-                text: globalize.translate("HeaderChangeFolderTypeHelp")
-            })
-        })
-    }
-
     function addVirtualFolder(page) {
         require(["medialibrarycreator"], function(medialibrarycreator) {
             (new medialibrarycreator).show({
                 collectionTypeOptions: getCollectionTypeOptions().filter(function(f) {
-                    return !f.hidden
+                    return !f.hidden;
                 }),
                 refresh: shouldRefreshLibraryAfterChanges(page)
             }).then(function(hasChanges) {
-                hasChanges && reloadLibrary(page)
+                hasChanges && reloadLibrary(page);
             })
         })
     }
@@ -29,18 +20,22 @@ define(["jQuery", "apphost", "scripts/taskbutton", "loading", "libraryMenu", "gl
                 refresh: shouldRefreshLibraryAfterChanges(page),
                 library: virtualFolder
             }).then(function(hasChanges) {
-                hasChanges && reloadLibrary(page)
+                hasChanges && reloadLibrary(page);
             })
         })
     }
 
     function deleteVirtualFolder(page, virtualFolder) {
         var msg = globalize.translate("MessageAreYouSureYouWishToRemoveMediaFolder");
-        virtualFolder.Locations.length && (msg += "<br/><br/>" + globalize.translate("MessageTheFollowingLocationWillBeRemovedFromLibrary") + "<br/><br/>", msg += virtualFolder.Locations.join("<br/>")), require(["confirm"], function(confirm) {
+        if (virtualFolder.Locations.length) {
+            msg += "<br/><br/>" + globalize.translate("MessageTheFollowingLocationWillBeRemovedFromLibrary") + "<br/><br/>";
+            msg += virtualFolder.Locations.join("<br/>");
+        }
+        require(["confirm"], function(confirm) {
             confirm(msg, globalize.translate("HeaderRemoveMediaFolder")).then(function() {
                 var refreshAfterChange = shouldRefreshLibraryAfterChanges(page);
                 ApiClient.removeVirtualFolder(virtualFolder.Name, refreshAfterChange).then(function() {
-                    reloadLibrary(page)
+                    reloadLibrary(page);
                 })
             })
         })
@@ -52,8 +47,8 @@ define(["jQuery", "apphost", "scripts/taskbutton", "loading", "libraryMenu", "gl
                 itemIds: [virtualFolder.ItemId],
                 serverId: ApiClient.serverId(),
                 mode: "scan"
-            }).show()
-        })
+            }).show();
+        });
     }
 
     function renameVirtualFolder(page, virtualFolder) {
@@ -65,51 +60,49 @@ define(["jQuery", "apphost", "scripts/taskbutton", "loading", "libraryMenu", "gl
                 if (newName && newName != virtualFolder.Name) {
                     var refreshAfterChange = shouldRefreshLibraryAfterChanges(page);
                     ApiClient.renameVirtualFolder(virtualFolder.Name, newName, refreshAfterChange).then(function() {
-                        reloadLibrary(page)
-                    })
+                        reloadLibrary(page);
+                    });
                 }
-            })
-        })
+            });
+        });
     }
 
     function showCardMenu(page, elem, virtualFolders) {
-        var card = dom.parentWithClass(elem, "card"),
-            index = parseInt(card.getAttribute("data-index")),
-            virtualFolder = virtualFolders[index],
-            menuItems = [];
+        var card = dom.parentWithClass(elem, "card");
+        var index = parseInt(card.getAttribute("data-index"));
+        var virtualFolder = virtualFolders[index];
+        var menuItems = [];
         menuItems.push({
-            name: globalize.translate("ButtonChangeContentType"),
-            id: "changetype",
-            ironIcon: "videocam"
-        }), menuItems.push({
             name: globalize.translate("ButtonEditImages"),
             id: "editimages",
             ironIcon: "photo"
-        }), menuItems.push({
+        });
+        menuItems.push({
             name: globalize.translate("ManageLibrary"),
             id: "edit",
             ironIcon: "folder_open"
-        }), menuItems.push({
+        });
+        menuItems.push({
             name: globalize.translate("ButtonRemove"),
             id: "delete",
             ironIcon: "remove"
-        }), menuItems.push({
+        });
+        menuItems.push({
             name: globalize.translate("ButtonRename"),
             id: "rename",
             ironIcon: "mode_edit"
-        }), menuItems.push({
+        });
+        menuItems.push({
             name: globalize.translate("ScanLibrary"),
             id: "refresh",
             ironIcon: "refresh"
-        }), require(["actionsheet"], function(actionsheet) {
+        });
+        require(["actionsheet"], function(actionsheet) {
             actionsheet.show({
                 items: menuItems,
                 positionTo: elem,
                 callback: function(resultId) {
                     switch (resultId) {
-                        case "changetype":
-                            changeCollectionType(page, virtualFolder);
-                            break;
                         case "edit":
                             editVirtualFolder(page, virtualFolder);
                             break;
@@ -123,21 +116,22 @@ define(["jQuery", "apphost", "scripts/taskbutton", "loading", "libraryMenu", "gl
                             deleteVirtualFolder(page, virtualFolder);
                             break;
                         case "refresh":
-                            refreshVirtualFolder(page, virtualFolder)
+                            refreshVirtualFolder(page, virtualFolder);
                     }
                 }
-            })
-        })
+            });
+        });
     }
 
     function reloadLibrary(page) {
-        loading.show(), ApiClient.getVirtualFolders().then(function(result) {
-            reloadVirtualFolders(page, result)
-        })
+        loading.show();
+        ApiClient.getVirtualFolders().then(function(result) {
+            reloadVirtualFolders(page, result);
+        });
     }
 
     function shouldRefreshLibraryAfterChanges(page) {
-        return "mediaLibraryPage" === page.id
+        return "mediaLibraryPage" === page.id;
     }
 
     function reloadVirtualFolders(page, virtualFolders) {
@@ -146,26 +140,33 @@ define(["jQuery", "apphost", "scripts/taskbutton", "loading", "libraryMenu", "gl
             Name: globalize.translate("ButtonAddMediaLibrary"),
             icon: "add_circle",
             Locations: [],
-            showType: !1,
-            showLocations: !1,
-            showMenu: !1,
-            showNameWithIcon: !0
+            showType: false,
+            showLocations: false,
+            showMenu: false,
+            showNameWithIcon: true
         });
-        for (var i = 0, length = virtualFolders.length; i < length; i++) {
+
+        for (var i = 0; i < virtualFolders.length; i++) {
             var virtualFolder = virtualFolders[i];
             html += getVirtualFolderHtml(page, virtualFolder, i)
         }
         var divVirtualFolders = page.querySelector("#divVirtualFolders");
-        divVirtualFolders.innerHTML = html, divVirtualFolders.classList.add("itemsContainer"), divVirtualFolders.classList.add("vertical-wrap"), $(".btnCardMenu", divVirtualFolders).on("click", function() {
-            showCardMenu(page, this, virtualFolders)
-        }), divVirtualFolders.querySelector(".addLibrary").addEventListener("click", function() {
-            addVirtualFolder(page)
-        }), $(".editLibrary", divVirtualFolders).on("click", function() {
-            var card = $(this).parents(".card")[0],
-                index = parseInt(card.getAttribute("data-index")),
-                virtualFolder = virtualFolders[index];
-            virtualFolder.ItemId && editVirtualFolder(page, virtualFolder)
-        }), loading.hide()
+        divVirtualFolders.innerHTML = html;
+        divVirtualFolders.classList.add("itemsContainer");
+        divVirtualFolders.classList.add("vertical-wrap");
+        $(".btnCardMenu", divVirtualFolders).on("click", function() {
+            showCardMenu(page, this, virtualFolders);
+        });
+        divVirtualFolders.querySelector(".addLibrary").addEventListener("click", function() {
+            addVirtualFolder(page);
+        });
+        $(".editLibrary", divVirtualFolders).on("click", function() {
+            var card = $(this).parents(".card")[0];
+            var index = parseInt(card.getAttribute("data-index"));
+            var virtualFolder = virtualFolders[index];
+            virtualFolder.ItemId && editVirtualFolder(page, virtualFolder);
+        });
+        loading.hide();
     }
 
     function editImages(page, virtualFolder) {
@@ -174,13 +175,13 @@ define(["jQuery", "apphost", "scripts/taskbutton", "loading", "libraryMenu", "gl
                 itemId: virtualFolder.ItemId,
                 serverId: ApiClient.serverId()
             }).then(function() {
-                reloadLibrary(page)
-            })
+                reloadLibrary(page);
+            });
         })
     }
 
     function getLink(text, url) {
-        return globalize.translate(text, '<a is="emby-linkbutton" class="button-link" href="' + url + '" target="_blank" data-autohide="true">', "</a>")
+        return globalize.translate(text, '<a is="emby-linkbutton" class="button-link" href="' + url + '" target="_blank" data-autohide="true">', "</a>");
     }
 
     function getCollectionTypeOptions() {
@@ -190,14 +191,15 @@ define(["jQuery", "apphost", "scripts/taskbutton", "loading", "libraryMenu", "gl
         }, {
             name: globalize.translate("FolderTypeMovies"),
             value: "movies",
-            message: getLink("MovieLibraryHelp", "https://web.archive.org/web/20181216120305/https://github.com/MediaBrowser/Wiki/wiki/Movie-naming")
+            message: getLink("MovieLibraryHelp", "https://jellyfin.readthedocs.io/en/latest/media/movies/")
         }, {
             name: globalize.translate("FolderTypeMusic"),
-            value: "music"
+            value: "music",
+            message: getLink("MovieLibraryHelp", "https://jellyfin.readthedocs.io/en/latest/media/music/")
         }, {
             name: globalize.translate("FolderTypeTvShows"),
             value: "tvshows",
-            message: getLink("TvLibraryHelp", "https://web.archive.org/web/20181216120305/https://github.com/MediaBrowser/Wiki/wiki/TV-naming")
+            message: getLink("TvLibraryHelp", "https://jellyfin.readthedocs.io/en/latest/media/shows/")
         }, {
             name: globalize.translate("FolderTypeBooks"),
             value: "books",
@@ -235,31 +237,83 @@ define(["jQuery", "apphost", "scripts/taskbutton", "loading", "libraryMenu", "gl
             case "channels":
             case "playlists":
             default:
-                return "folder"
+                return "folder";
         }
     }
 
     function getVirtualFolderHtml(page, virtualFolder, index) {
-        var html = "",
-            style = "";
-        page.classList.contains("wizardPage") && (style += "min-width:33.3%;"), html += '<div class="card backdropCard scalableCard backdropCard-scalable" style="' + style + '" data-index="' + index + '" data-id="' + virtualFolder.ItemId + '">', html += '<div class="cardBox visualCardBox">', html += '<div class="cardScalable visualCardBox-cardScalable">', html += '<div class="cardPadder cardPadder-backdrop"></div>', html += '<div class="cardContent">';
+        var html = "";
+        var style = "";
+        page.classList.contains("wizardPage") && (style += "min-width:33.3%;");
+        html += '<div class="card backdropCard scalableCard backdropCard-scalable" style="' + style + '" data-index="' + index + '" data-id="' + virtualFolder.ItemId + '">';
+        html += '<div class="cardBox visualCardBox">';
+        html += '<div class="cardScalable visualCardBox-cardScalable">';
+        html += '<div class="cardPadder cardPadder-backdrop"></div>';
+        html += '<div class="cardContent">';
         var imgUrl = "";
-        virtualFolder.PrimaryImageItemId && (imgUrl = ApiClient.getScaledImageUrl(virtualFolder.PrimaryImageItemId, {
-            type: "Primary"
-        }));
+        if (virtualFolder.PrimaryImageItemId) {
+            imgUrl = ApiClient.getScaledImageUrl(virtualFolder.PrimaryImageItemId, {
+                type: "Primary"
+            });
+        }
         var hasCardImageContainer;
-        if (imgUrl ? (html += '<div class="cardImageContainer editLibrary" style="cursor:pointer;background-image:url(\'' + imgUrl + "');\">", hasCardImageContainer = !0) : virtualFolder.showNameWithIcon || (html += '<div class="cardImageContainer editLibrary" style="cursor:pointer;">', html += '<i class="cardImageIcon-small md-icon">' + (virtualFolder.icon || getIcon(virtualFolder.CollectionType)) + "</i>", hasCardImageContainer = !0), hasCardImageContainer) {
+        if (imgUrl) {
+            html += '<div class="cardImageContainer editLibrary" style="cursor:pointer;background-image:url(\'' + imgUrl + "');\">";
+            hasCardImageContainer = true;
+        } else if (!virtualFolder.showNameWithIcon) {
+            html += '<div class="cardImageContainer editLibrary" style="cursor:pointer;">';
+            html += '<i class="cardImageIcon-small md-icon">' + (virtualFolder.icon || getIcon(virtualFolder.CollectionType)) + "</i>";
+            hasCardImageContainer = true;
+        }
+        if (hasCardImageContainer) {
             html += '<div class="cardIndicators backdropCardIndicators">';
-            html += '<div is="emby-itemrefreshindicator"' + (virtualFolder.RefreshProgress || virtualFolder.RefreshStatus && "Idle" !== virtualFolder.RefreshStatus ? "" : ' class="hide"') + ' data-progress="' + (virtualFolder.RefreshProgress || 0) + '" data-status="' + virtualFolder.RefreshStatus + '"></div>', html += "</div>", html += "</div>"
+            html += '<div is="emby-itemrefreshindicator"' + (virtualFolder.RefreshProgress || virtualFolder.RefreshStatus && "Idle" !== virtualFolder.RefreshStatus ? "" : ' class="hide"') + ' data-progress="' + (virtualFolder.RefreshProgress || 0) + '" data-status="' + virtualFolder.RefreshStatus + '"></div>';
+            html += "</div>";
+            html += "</div>";
         }
-        if (!imgUrl && virtualFolder.showNameWithIcon && (html += '<h3 class="cardImageContainer addLibrary" style="position:absolute;top:0;left:0;right:0;bottom:0;cursor:pointer;flex-direction:column;">', html += '<i class="cardImageIcon-small md-icon">' + (virtualFolder.icon || getIcon(virtualFolder.CollectionType)) + "</i>", virtualFolder.showNameWithIcon && (html += '<div style="margin:1em 0;position:width:100%;">', html += virtualFolder.Name, html += "</div>"), html += "</h3>"), html += "</div>", html += "</div>", html += '<div class="cardFooter visualCardBox-cardFooter">', !1 !== virtualFolder.showMenu) {
-            html += '<div style="text-align:right; float:right;padding-top:5px;">', html += '<button type="button" is="paper-icon-button-light" class="btnCardMenu autoSize"><i class="md-icon">&#xE5D3;</i></button>', html += "</div>"
+        if (!imgUrl && virtualFolder.showNameWithIcon) {
+            html += '<h3 class="cardImageContainer addLibrary" style="position:absolute;top:0;left:0;right:0;bottom:0;cursor:pointer;flex-direction:column;">';
+            html += '<i class="cardImageIcon-small md-icon">' + (virtualFolder.icon || getIcon(virtualFolder.CollectionType)) + "</i>";
+            virtualFolder.showNameWithIcon && (html += '<div style="margin:1em 0;position:width:100%;">', html += virtualFolder.Name, html += "</div>");
+            html += "</h3>";
         }
-        html += "<div class='cardText'>", virtualFolder.showNameWithIcon ? html += "&nbsp;" : html += virtualFolder.Name, html += "</div>";
+        html += "</div>";
+        html += "</div>";
+        html += '<div class="cardFooter visualCardBox-cardFooter">';
+
+        // always show menu unless explicitly hidden
+        if (virtualFolder.showMenu !== false) {
+            html += '<div style="text-align:right; float:right;padding-top:5px;">';
+            html += '<button type="button" is="paper-icon-button-light" class="btnCardMenu autoSize"><i class="md-icon">&#xE5D3;</i></button>';
+            html += "</div>";
+        }
+        html += "<div class='cardText'>";
+        virtualFolder.showNameWithIcon ? html += "&nbsp;" : html += virtualFolder.Name;
+        html += "</div>";
         var typeName = getCollectionTypeOptions().filter(function(t) {
             return t.value == virtualFolder.CollectionType
         })[0];
-        return typeName = typeName ? typeName.name : globalize.translate("FolderTypeUnset"), html += "<div class='cardText cardText-secondary'>", !1 === virtualFolder.showType ? html += "&nbsp;" : html += typeName, html += "</div>", !1 === virtualFolder.showLocations ? (html += "<div class='cardText cardText-secondary'>", html += "&nbsp;", html += "</div>") : virtualFolder.Locations.length && 1 == virtualFolder.Locations.length ? (html += "<div class='cardText cardText-secondary'>", html += virtualFolder.Locations[0], html += "</div>") : (html += "<div class='cardText cardText-secondary'>", html += globalize.translate("NumLocationsValue", virtualFolder.Locations.length), html += "</div>"), html += "</div>", html += "</div>", html += "</div>"
+        typeName = typeName ? typeName.name : globalize.translate("FolderTypeUnset");
+        html += "<div class='cardText cardText-secondary'>";
+        virtualFolder.showType === false ? html += "&nbsp;" : html += typeName;
+        html += "</div>";
+        if (virtualFolder.showLocations === false) {
+            html += "<div class='cardText cardText-secondary'>";
+            html += "&nbsp;";
+            html += "</div>";
+        } else if (virtualFolder.Locations.length && virtualFolder.Locations.length === 1) {
+             html += "<div class='cardText cardText-secondary'>";
+             html += virtualFolder.Locations[0];
+             html += "</div>";
+        } else {
+            html += "<div class='cardText cardText-secondary'>";
+            html += globalize.translate("NumLocationsValue", virtualFolder.Locations.length);
+            html += "</div>";
+        }
+        html += "</div>";
+        html += "</div>";
+        html += "</div>";
+        return html;
     }
 
     function getTabs() {
@@ -284,9 +338,11 @@ define(["jQuery", "apphost", "scripts/taskbutton", "loading", "libraryMenu", "gl
         next: function() {
             Dashboard.navigate("wizardsettings.html")
         }
-    }, pageClassOn("pageshow", "mediaLibraryPage", function() {
-        reloadLibrary(this)
-    }), pageIdOn("pageshow", "mediaLibraryPage", function() {
+    };
+    pageClassOn("pageshow", "mediaLibraryPage", function() {
+        reloadLibrary(this);
+    });
+    pageIdOn("pageshow", "mediaLibraryPage", function() {
         libraryMenu.setTabs("librarysetup", 0, getTabs);
         var page = this;
         taskButton({
@@ -294,14 +350,15 @@ define(["jQuery", "apphost", "scripts/taskbutton", "loading", "libraryMenu", "gl
             progressElem: page.querySelector(".refreshProgress"),
             taskKey: "RefreshLibrary",
             button: page.querySelector(".btnRefresh")
-        })
-    }), pageIdOn("pagebeforehide", "mediaLibraryPage", function() {
+        });
+    });
+    pageIdOn("pagebeforehide", "mediaLibraryPage", function() {
         var page = this;
         taskButton({
             mode: "off",
             progressElem: page.querySelector(".refreshProgress"),
             taskKey: "RefreshLibrary",
             button: page.querySelector(".btnRefresh")
-        })
-    })
+        });
+    });
 });

src/controllers/musicrecommended.js

@@ -41,7 +41,6 @@ define(["browser", "layoutManager", "userSettings", "inputManager", "loading", "
                 overlayPlayButton: !supportsImageAnalysis,
                 allowBottomPadding: !enableScrollX(),
                 cardLayout: supportsImageAnalysis,
-                vibrant: supportsImageAnalysis,
                 coverImage: !0
             }), imageLoader.lazyChildren(elem), loading.hide()
         })
@@ -78,7 +77,6 @@ define(["browser", "layoutManager", "userSettings", "inputManager", "loading", "
                 overlayMoreButton: !supportsImageAnalysis,
                 allowBottomPadding: !enableScrollX(),
                 cardLayout: supportsImageAnalysis,
-                vibrant: supportsImageAnalysis,
                 coverImage: !0
             }), imageLoader.lazyChildren(itemsContainer)
         })
@@ -115,7 +113,6 @@ define(["browser", "layoutManager", "userSettings", "inputManager", "loading", "
                 overlayMoreButton: !supportsImageAnalysis,
                 allowBottomPadding: !enableScrollX(),
                 cardLayout: supportsImageAnalysis,
-                vibrant: supportsImageAnalysis,
                 coverImage: !0
             }), imageLoader.lazyChildren(itemsContainer)
         })

src/controllers/mypreferencescommon.js

@@ -7,14 +7,15 @@ define(["apphost", "connectionManager", "listViewStyle", "emby-button"], functio
         });
 
         view.addEventListener("viewshow", function() {
-            var page = this;
+            // this page can also be used by admins to change user preferences from the user edit page
             var userId = params.userId || Dashboard.getCurrentUserId();
+            var page = this;
 
-            page.querySelector(".lnkDisplayPreferences").setAttribute("href", "mypreferencesdisplay.html?userId=" + userId);
-            page.querySelector(".lnkLanguagePreferences").setAttribute("href", "mypreferenceslanguages.html?userId=" + userId);
-            page.querySelector(".lnkSubtitleSettings").setAttribute("href", "mypreferencessubtitles.html?userId=" + userId);
-            page.querySelector(".lnkHomeScreenPreferences").setAttribute("href", "mypreferenceshome.html?userId=" + userId);
             page.querySelector(".lnkMyProfile").setAttribute("href", "myprofile.html?userId=" + userId);
+            page.querySelector(".lnkDisplayPreferences").setAttribute("href", "mypreferencesdisplay.html?userId=" + userId);
+            page.querySelector(".lnkHomePreferences").setAttribute("href", "mypreferenceshome.html?userId=" + userId);
+            page.querySelector(".lnkLanguagePreferences").setAttribute("href", "mypreferenceslanguages.html?userId=" + userId);
+            page.querySelector(".lnkSubtitlePreferences").setAttribute("href", "mypreferencessubtitles.html?userId=" + userId);
 
             if (appHost.supports("multiserver")) {
                 page.querySelector(".selectServer").classList.remove("hide")
@@ -22,19 +23,15 @@ define(["apphost", "connectionManager", "listViewStyle", "emby-button"], functio
                 page.querySelector(".selectServer").classList.add("hide");
             }
 
-            connectionManager.user(ApiClient).then(function(user) {
-                if (user.localUser && !user.localUser.EnableAutoLogin) {
-                    view.querySelector(".btnLogout").classList.remove("hide");
-                } else {
-                    view.querySelector(".btnLogout").classList.add("hide");
-                }
-            });
+            // hide the actions if user preferences are being edited for a different user
+            if (params.userId && params.userId !== Dashboard.getCurrentUserId) {
+                page.querySelector(".userSection").classList.add("hide");
+                page.querySelector(".adminSection").classList.add("hide");
+            }
 
-            Dashboard.getCurrentUser().then(function(user) {
-                page.querySelector(".headerUser").innerHTML = user.Name;
-                if (user.Policy.IsAdministrator) {
-                    page.querySelector(".adminSection").classList.remove("hide");
-                } else {
+            ApiClient.getUser(userId).then(function(user) {
+                page.querySelector(".headerUsername").innerHTML = user.Name;
+                if (!user.Policy.IsAdministrator) {
                     page.querySelector(".adminSection").classList.add("hide");
                 }
             });

src/controllers/notificationsettings.js

@@ -22,7 +22,7 @@ define(["loading", "libraryMenu", "globalize", "listViewStyle", "emby-button"],
                     itemHtml += "</h2>";
                     if (showHelp) {
                         showHelp = false;
-                        itemHtml += '<a is="emby-linkbutton" class="raised button-alt headerHelpButton" target="_blank" href="https://web.archive.org/web/20181216120305/https://github.com/MediaBrowser/Wiki/wiki/Notifications">';
+                        itemHtml += '<a is="emby-linkbutton" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.readthedocs.io/en/latest/server/notifications/">';
                         itemHtml += globalize.translate("Help");
                         itemHtml += "</a>";
                     }

src/controllers/scheduledtaskspage.js

@@ -3,21 +3,63 @@ define(["jQuery", "loading", "events", "globalize", "serverNotifications", "huma
 
     function reloadList(page) {
         ApiClient.getScheduledTasks({
-            isHidden: !1
+            isHidden: false
         }).then(function(tasks) {
-            populateList(page, tasks), loading.hide()
+            populateList(page, tasks);
+            loading.hide();
         })
     }
 
     function populateList(page, tasks) {
         tasks = tasks.sort(function(a, b) {
-            return a = a.Category + " " + a.Name, b = b.Category + " " + b.Name, a == b ? 0 : a < b ? -1 : 1
+            a = a.Category + " " + a.Name;
+            b = b.Category + " " + b.Name;
+            return a == b ? 0 : a < b ? -1 : 1;
         });
-        for (var currentCategory, html = "", i = 0, length = tasks.length; i < length; i++) {
+
+        var currentCategory;
+        var html = "";
+        for (var i = 0; i < tasks.length; i++) {
             var task = tasks[i];
-            task.Category != currentCategory && (currentCategory = task.Category, currentCategory && (html += "</div>", html += "</div>"), html += '<div class="verticalSection verticalSection-extrabottompadding">', html += '<div class="sectionTitleContainer" style="margin-bottom:1em;">', html += '<h2 class="sectionTitle">', html += currentCategory, html += "</h2>", 0 === i && (html += '<a is="emby-linkbutton" class="raised button-alt headerHelpButton" target="_blank" href="https://web.archive.org/web/20181216120305/https://github.com/MediaBrowser/Wiki/wiki/Scheduled-tasks">' + globalize.translate("Help") + "</a>"), html += "</div>", html += '<div class="paperList">'), html += '<div class="listItem listItem-border scheduledTaskPaperIconItem" data-status="' + task.State + '">', html += "<a is='emby-linkbutton' style='margin:0;padding:0;' class='clearLink listItemIconContainer' href='scheduledtask.html?id=" + task.Id + "'>", html += '<i class="md-icon listItemIcon">schedule</i>', html += "</a>", html += '<div class="listItemBody two-line">', html += "<a class='clearLink' style='margin:0;padding:0;display:block;text-align:left;' is='emby-linkbutton' href='scheduledtask.html?id=" + task.Id + "'>", html += "<h3 class='listItemBodyText'>" + task.Name + "</h3>", html += "<div class='secondary listItemBodyText' id='taskProgress" + task.Id + "'>" + getTaskProgressHtml(task) + "</div>", html += "</a>", html += "</div>", "Idle" == task.State ? html += '<button type="button" is="paper-icon-button-light" id="btnTask' + task.Id + '" class="btnStartTask" data-taskid="' + task.Id + '" title="' + globalize.translate("ButtonStart") + '"><i class="md-icon">play_arrow</i></button>' : "Running" == task.State ? html += '<button type="button" is="paper-icon-button-light" id="btnTask' + task.Id + '" class="btnStopTask" data-taskid="' + task.Id + '" title="' + globalize.translate("ButtonStop") + '"><i class="md-icon">stop</i></button>' : html += '<button type="button" is="paper-icon-button-light" id="btnTask' + task.Id + '" class="btnStartTask hide" data-taskid="' + task.Id + '" title="' + globalize.translate("ButtonStart") + '"><i class="md-icon">play_arrow</i></button>', html += "</div>"
+            if (task.Category != currentCategory) {
+                currentCategory = task.Category;
+                if (currentCategory) {
+                    html += "</div>";
+                    html += "</div>";
+                }
+                html += '<div class="verticalSection verticalSection-extrabottompadding">';
+                html += '<div class="sectionTitleContainer" style="margin-bottom:1em;">';
+                html += '<h2 class="sectionTitle">';
+                html += currentCategory;
+                html += "</h2>";
+                if (i === 0) {
+                    html += '<a is="emby-linkbutton" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.readthedocs.io/en/latest/server/tasks/">' + globalize.translate("Help") + "</a>";
+                }
+                html += "</div>";
+                html += '<div class="paperList">';
+            }
+            html += '<div class="listItem listItem-border scheduledTaskPaperIconItem" data-status="' + task.State + '">';
+            html += "<a is='emby-linkbutton' style='margin:0;padding:0;' class='clearLink listItemIconContainer' href='scheduledtask.html?id=" + task.Id + "'>";
+            html += '<i class="md-icon listItemIcon">schedule</i>';
+            html += "</a>";
+            html += '<div class="listItemBody two-line">';
+            html += "<a class='clearLink' style='margin:0;padding:0;display:block;text-align:left;' is='emby-linkbutton' href='scheduledtask.html?id=" + task.Id + "'>";
+            html += "<h3 class='listItemBodyText'>" + task.Name + "</h3>";
+            html += "<div class='secondary listItemBodyText' id='taskProgress" + task.Id + "'>" + getTaskProgressHtml(task) + "</div>";
+            html += "</a>";
+            html += "</div>";
+            if (task.State === "Running") {
+                html += '<button type="button" is="paper-icon-button-light" id="btnTask' + task.Id + '" class="btnStopTask" data-taskid="' + task.Id + '" title="' + globalize.translate("ButtonStop") + '"><i class="md-icon">stop</i></button>';
+            } else if (task.State === "Idle") {
+                html += '<button type="button" is="paper-icon-button-light" id="btnTask' + task.Id + '" class="btnStartTask" data-taskid="' + task.Id + '" title="' + globalize.translate("ButtonStart") + '"><i class="md-icon">play_arrow</i></button>';
+            }
+            html += "</div>";
         }
-        tasks.length && (html += "</div>", html += "</div>"), page.querySelector(".divScheduledTasks").innerHTML = html
+        if (tasks.length) {
+            html += "</div>";
+            html += "</div>";
+        }
+        page.querySelector(".divScheduledTasks").innerHTML = html;
     }
 
     function humane_elapsed(firstDateStr, secondDateStr) {
@@ -34,8 +76,18 @@ define(["jQuery", "loading", "events", "globalize", "serverNotifications", "huma
 
     function getTaskProgressHtml(task) {
         var html = "";
-        if ("Idle" == task.State) task.LastExecutionResult && (html += globalize.translate("LabelScheduledTaskLastRan").replace("{0}", humane_date(task.LastExecutionResult.EndTimeUtc)).replace("{1}", humane_elapsed(task.LastExecutionResult.StartTimeUtc, task.LastExecutionResult.EndTimeUtc)), "Failed" == task.LastExecutionResult.Status ? html += " <span style='color:#FF0000;'>(" + globalize.translate("LabelFailed") + ")</span>" : "Cancelled" == task.LastExecutionResult.Status ? html += " <span style='color:#0026FF;'>(" + globalize.translate("LabelCancelled") + ")</span>" : "Aborted" == task.LastExecutionResult.Status && (html += " <span style='color:#FF0000;'>" + globalize.translate("LabelAbortedByServerShutdown") + "</span>"));
-        else if ("Running" == task.State) {
+        if (task.State === "Idle") {
+            if (task.LastExecutionResult) {
+                html += globalize.translate("LabelScheduledTaskLastRan").replace("{0}", humane_date(task.LastExecutionResult.EndTimeUtc)).replace("{1}", humane_elapsed(task.LastExecutionResult.StartTimeUtc, task.LastExecutionResult.EndTimeUtc));
+                if (task.LastExecutionResult.Status === "Failed") {
+                    html += " <span style='color:#FF0000;'>(" + globalize.translate("LabelFailed") + ")</span>";
+                } else if (task.LastExecutionResult.Status === "Cancelled") {
+                    html += " <span style='color:#0026FF;'>(" + globalize.translate("LabelCancelled") + ")</span>";
+                } else if (task.LastExecutionResult.Status === "Aborted") {
+                    html += " <span style='color:#FF0000;'>" + globalize.translate("LabelAbortedByServerShutdown") + "</span>";
+                }
+            }
+        } else if (task.State === "Running") {
             var progress = (task.CurrentProgressPercentage || 0).toFixed(1);
             html += '<div style="display:flex;align-items:center;">';
             html += '<div class="taskProgressOuter" title="' + progress + '%" style="flex-grow:1;">';
@@ -47,53 +99,86 @@ define(["jQuery", "loading", "events", "globalize", "serverNotifications", "huma
         } else {
             html += "<span style='color:#FF0000;'>" + globalize.translate("LabelStopping") + "</span>";
         }
-        return html
+        return html;
     }
 
     function updateTaskButton(elem, state) {
-        "Idle" == state ? (elem.classList.add("btnStartTask"), elem.classList.remove("btnStopTask"), elem.classList.remove("hide"), elem.querySelector("i").innerHTML = "play_arrow", elem.title = globalize.translate("ButtonStart")) : "Running" == state ? (elem.classList.remove("btnStartTask"), elem.classList.add("btnStopTask"), elem.classList.remove("hide"), elem.querySelector("i").innerHTML = "stop", elem.title = globalize.translate("ButtonStop")) : (elem.classList.add("btnStartTask"), elem.classList.remove("btnStopTask"), elem.classList.add("hide"), elem.querySelector("i").innerHTML = "play_arrow", elem.title = globalize.translate("ButtonStart")), $(elem).parents(".listItem")[0].setAttribute("data-status", state)
+        if (state === "Running") {
+            elem.classList.remove("btnStartTask");
+            elem.classList.add("btnStopTask");
+            elem.querySelector("i").innerHTML = "stop";
+            elem.title = globalize.translate("ButtonStop");
+        } else if (state === "Idle") {
+            elem.classList.add("btnStartTask");
+            elem.classList.remove("btnStopTask");
+            elem.querySelector("i").innerHTML = "play_arrow";
+            elem.title = globalize.translate("ButtonStart");
+        }
+        $(elem).parents(".listItem")[0].setAttribute("data-status", state);
     }
+
     return function(view, params) {
         function updateTasks(tasks) {
-            for (var i = 0, length = tasks.length; i < length; i++) {
+            for (var i = 0; i < tasks.length; i++) {
                 var task = tasks[i];
                 view.querySelector("#taskProgress" + task.Id).innerHTML = getTaskProgressHtml(task);
-                updateTaskButton(view.querySelector("#btnTask" + task.Id), task.State)
+                updateTaskButton(view.querySelector("#btnTask" + task.Id), task.State);
             }
         }
 
         function onPollIntervalFired() {
-            ApiClient.isMessageChannelOpen() || reloadList(view)
+            if (!ApiClient.isMessageChannelOpen()) {
+                reloadList(view);
+            }
         }
 
         function onScheduledTasksUpdate(e, apiClient, info) {
-            apiClient.serverId() === serverId && updateTasks(info)
+            if (apiClient.serverId() === serverId) {
+                updateTasks(info);
+            }
         }
 
         function startInterval() {
-            ApiClient.sendMessage("ScheduledTasksInfoStart", "1000,1000"), pollInterval && clearInterval(pollInterval), pollInterval = setInterval(onPollIntervalFired, 1e4)
+            ApiClient.sendMessage("ScheduledTasksInfoStart", "1000,1000");
+            pollInterval && clearInterval(pollInterval);
+            pollInterval = setInterval(onPollIntervalFired, 1e4);
         }
 
         function stopInterval() {
-            ApiClient.sendMessage("ScheduledTasksInfoStop"), pollInterval && clearInterval(pollInterval)
+            ApiClient.sendMessage("ScheduledTasksInfoStop");
+            pollInterval && clearInterval(pollInterval);
         }
+
         var pollInterval, serverId = ApiClient.serverId();
+
         $(".divScheduledTasks", view).on("click", ".btnStartTask", function() {
-            var button = this,
-                id = button.getAttribute("data-taskid");
+            var button = this;
+            var id = button.getAttribute("data-taskid");
             ApiClient.startScheduledTask(id).then(function() {
-                updateTaskButton(button, "Running"), reloadList(view)
+                updateTaskButton(button, "Running");
+                reloadList(view);
             })
-        }).on("click", ".btnStopTask", function() {
-            var button = this,
-                id = button.getAttribute("data-taskid");
+        });
+
+        $(".divScheduledTasks", view).on("click", ".btnStopTask", function() {
+            var button = this;
+            var id = button.getAttribute("data-taskid");
             ApiClient.stopScheduledTask(id).then(function() {
-                updateTaskButton(button, ""), reloadList(view)
+                updateTaskButton(button, "");
+                reloadList(view);
             })
-        }), view.addEventListener("viewbeforehide", function() {
-            events.off(serverNotifications, "ScheduledTasksInfo", onScheduledTasksUpdate), stopInterval()
-        }), view.addEventListener("viewshow", function() {
-            loading.show(), startInterval(), reloadList(view), events.on(serverNotifications, "ScheduledTasksInfo", onScheduledTasksUpdate)
-        })
+        });
+
+        view.addEventListener("viewbeforehide", function() {
+            events.off(serverNotifications, "ScheduledTasksInfo", onScheduledTasksUpdate);
+            stopInterval();
+        });
+
+        view.addEventListener("viewshow", function() {
+            loading.show();
+            startInterval();
+            reloadList(view);
+            events.on(serverNotifications, "ScheduledTasksInfo", onScheduledTasksUpdate);
+        });
     }
 });