merge branch master into suboctopus

.eslintignore

@@ -0,0 +1 @@
+libraries/

.eslintrc.yml

@@ -2,3 +2,26 @@ env:
   es6: true
   browser: true
   amd: true
+
+rules:
+  block-spacing: ["error"]
+  brace-style: ["error"]
+  comma-dangle: ["error", "never"]
+  comma-spacing: ["error"]
+  eol-last: ["off"]
+  indent: ["error", 4, { "SwitchCase": 1 }]
+  keyword-spacing: ["error"]
+  line-comment-position: ["off"]
+  max-statements-per-line: ["error"]
+  no-empty: ["error"]
+  no-extra-semi: ["error"]
+  no-floating-decimal: ["error"]
+  no-multi-spaces: ["error"]
+  no-multiple-empty-lines: ["error", { "max": 1 }]
+  no-trailing-spaces: ["error"]
+  no-void: ["off"]
+  one-var: ["error", "never"]
+  padding-line-between-statements: ["off"]
+  semi: ["off"]
+  space-before-blocks: ["error"]
+  yoda: ["off"]

CONTRIBUTORS.md

@@ -31,6 +31,7 @@
  - [ferferga](https://github.com/ferferga)
  - [bilde2910](https://github.com/bilde2910)
  - [Daniel Hartung](https://github.com/dhartung)
+ - [Ryan Hartzell](https://github.com/ryan-hartzell)
 
 # Emby Contributors
 

README.md

@@ -1,16 +1,64 @@
 <h1 align="center">Jellyfin Web</h1>
-<h3 align="center">The Free Software Media System</h3>
+<h3 align="center">Part of the <a href="https://jellyfin.org">Jellyfin Project</a></h3>
 
 ---
 
 <p align="center">
 <img alt="Logo Banner" src="https://raw.githubusercontent.com/jellyfin/jellyfin-ux/master/branding/SVG/banner-logo-solid.svg?sanitize=true"/>
-<br/><br/>
+<br/>
-<a href="https://github.com/jellyfin/jellyfin-web"><img alt="GPL 2.0 License" src="https://img.shields.io/github/license/jellyfin/jellyfin-web.svg"/></a>
+<br/>
-<a href="https://github.com/jellyfin/jellyfin-web/releases"><img alt="Current Release" src="https://img.shields.io/github/release/jellyfin/jellyfin-web.svg"/></a>
+<a href="https://github.com/jellyfin/jellyfin-web">
-<a href="https://translate.jellyfin.org/projects/jellyfin/jellyfin-web/?utm_source=widget"><img src="https://translate.jellyfin.org/widgets/jellyfin/-/jellyfin-web/svg-badge.svg" alt="Translation status" /></a>
+<img alt="GPL 2.0 License" src="https://img.shields.io/github/license/jellyfin/jellyfin-web.svg"/>
+</a>
+<a href="https://github.com/jellyfin/jellyfin-web/releases">
+<img alt="Current Release" src="https://img.shields.io/github/release/jellyfin/jellyfin-web.svg"/>
+</a>
+<a href="https://translate.jellyfin.org/projects/jellyfin/jellyfin-web/?utm_source=widget">
+<img src="https://translate.jellyfin.org/widgets/jellyfin/-/jellyfin-web/svg-badge.svg" alt="Translation Status"/>
+</a>
+</br>
+<a href="https://opencollective.com/jellyfin">
+<img alt="Donate" src="https://img.shields.io/opencollective/all/jellyfin.svg?label=backers"/>
+</a>
+<a href="https://features.jellyfin.org">
+<img alt="Feature Requests" src="https://img.shields.io/badge/fider-vote%20on%20features-success.svg"/>
+</a>
+<a href="https://forum.jellyfin.org">
+<img alt="Discuss on our Forum" src="https://img.shields.io/discourse/https/forum.jellyfin.org/users.svg"/>
+</a>
+<a href="https://matrix.to/#/+jellyfin:matrix.org">
+<img alt="Chat on Matrix" src="https://img.shields.io/matrix/jellyfin:matrix.org.svg?logo=matrix"/>
+</a>
+<a href="https://www.reddit.com/r/jellyfin">
+<img alt="Join our Subreddit" src="https://img.shields.io/badge/reddit-r%2Fjellyfin-%23FF5700.svg"/>
+</a>
 </p>
 
----
+Jellyfin Web is the frontend used for most of the clients available for end users, such as desktop browsers, Android, and iOS. We welcome all contributions and pull requests! If you have a larger feature in mind please open an issue so we can discuss the implementation before you start. Translations can be improved very easily from our <a href="https://translate.jellyfin.org/projects/jellyfin/jellyfin-web">Weblate</a> instance. Look through the following graphic to see if your native language could use some work!
 
-Jellyfin is a free software media system that puts you in control of managing and streaming your media.
+<a href="https://translate.jellyfin.org/engage/jellyfin/?utm_source=widget">
+<img src="https://translate.jellyfin.org/widgets/jellyfin/-/jellyfin-web/multi-auto.svg" alt="Detailed Translation Status"/>
+</a>
+
+## Build Process
+
+### Dependencies
+
+- Yarn
+
+### Getting Started
+
+1. Clone or download this repository.
+   ```sh
+   git clone https://github.com/jellyfin/jellyfin-web.git
+   cd jellyfin-web
+   ```
+2. Install build dependencies in the project directory via npm.
+   ```sh
+   yarn install
+   ```
+
+3. Run the web client with webpack for local development.
+   ```sh
+   yarn serve
+   ```

package.json

@@ -10,25 +10,32 @@
     "css-loader": "^2.1.0",
     "eslint": "^5.16.0",
     "file-loader": "^3.0.1",
+    "html-webpack-plugin": "^3.2.0",
     "style-loader": "^0.23.1",
     "webpack": "^4.41.0",
     "webpack-cli": "^3.3.9",
+    "webpack-concat-plugin": "^3.0.0",
     "webpack-dev-server": "^3.8.1",
     "webpack-merge": "^4.2.2"
   },
   "dependencies": {
     "alameda": "^1.3.0",
+    "document-register-element": "^0.5.4",
     "flv.js": "^1.5.0",
     "hls.js": "^0.12.4",
     "howler": "^2.1.2",
     "jquery": "^3.4.1",
     "jstree": "^3.3.7",
     "libjass": "^0.11.0",
+    "native-promise-only": "^0.8.0-a",
     "requirejs": "^2.3.5",
+    "resize-observer-polyfill": "^1.5.1",
     "shaka-player": "^2.5.5",
     "sortablejs": "^1.9.0",
     "swiper": "^3.4.2",
-    "libass-wasm": "^2.1.1"
+    "libass-wasm": "^2.1.1",
+    "webcomponents.js": "^0.7.24",
+    "whatwg-fetch": "^1.1.1"
   },
   "scripts": {
     "serve": "webpack-dev-server --config webpack.dev.js --open",

src/bower_components/document-register-element/basic.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>testing my-element</title>
-  <script src="build/document-register-element.js"></script>
-  <script src="test/my-element.js"></script>
-</head>
-<body>
-  <my-element>
-    some content
-  </my-element>
-</body>

src/bower_components/document-register-element/build/document-register-element.js

@@ -1,246 +0,0 @@
-/*! (C) WebReflection Mit Style License */
-(function(e, t, n, r) {
-    "use strict";
-
-    function rt(e, t) {
-        for (var n = 0, r = e.length; n < r; n++) vt(e[n], t)
-    }
-
-    function it(e) {
-        for (var t = 0, n = e.length, r; t < n; t++) r = e[t], nt(r, b[ot(r)])
-    }
-
-    function st(e) {
-        return function(t) {
-            j(t) && (vt(t, e), rt(t.querySelectorAll(w), e))
-        }
-    }
-
-    function ot(e) {
-        var t = e.getAttribute("is"),
-            n = e.nodeName.toUpperCase(),
-            r = S.call(y, t ? v + t.toUpperCase() : d + n);
-        return t && -1 < r && !ut(n, t) ? -1 : r
-    }
-
-    function ut(e, t) {
-        return -1 < w.indexOf(e + '[is="' + t + '"]')
-    }
-
-    function at(e) {
-        var t = e.currentTarget,
-            n = e.attrChange,
-            r = e.attrName,
-            i = e.target;
-        Q && (!i || i === t) && t.attributeChangedCallback && r !== "style" && e.prevValue !== e.newValue && t.attributeChangedCallback(r, n === e[a] ? null : e.prevValue, n === e[l] ? null : e.newValue)
-    }
-
-    function ft(e) {
-        var t = st(e);
-        return function(e) {
-            X.push(t, e.target)
-        }
-    }
-
-    function lt(e) {
-        K && (K = !1, e.currentTarget.removeEventListener(h, lt)), rt((e.target || t).querySelectorAll(w), e.detail === o ? o : s), B && pt()
-    }
-
-    function ct(e, t) {
-        var n = this;
-        q.call(n, e, t), G.call(n, {
-            target: n
-        })
-    }
-
-    function ht(e, t) {
-        D(e, t), et ? et.observe(e, z) : (J && (e.setAttribute = ct, e[i] = Z(e), e.addEventListener(p, G)), e.addEventListener(c, at)), e.createdCallback && Q && (e.created = !0, e.createdCallback(), e.created = !1)
-    }
-
-    function pt() {
-        for (var e, t = 0, n = F.length; t < n; t++) e = F[t], E.contains(e) || (n--, F.splice(t--, 1), vt(e, o))
-    }
-
-    function dt(e) {
-        throw new Error("A " + e + " type is already registered")
-    }
-
-    function vt(e, t) {
-        var n, r = ot(e); - 1 < r && (tt(e, b[r]), r = 0, t === s && !e[s] ? (e[o] = !1, e[s] = !0, r = 1, B && S.call(F, e) < 0 && F.push(e)) : t === o && !e[o] && (e[s] = !1, e[o] = !0, r = 1), r && (n = e[t + "Callback"]) && n.call(e))
-    }
-    if (r in t) return;
-    var i = "__" + r + (Math.random() * 1e5 >> 0),
-        s = "attached",
-        o = "detached",
-        u = "extends",
-        a = "ADDITION",
-        f = "MODIFICATION",
-        l = "REMOVAL",
-        c = "DOMAttrModified",
-        h = "DOMContentLoaded",
-        p = "DOMSubtreeModified",
-        d = "<",
-        v = "=",
-        m = /^[A-Z][A-Z0-9]*(?:-[A-Z0-9]+)+$/,
-        g = ["ANNOTATION-XML", "COLOR-PROFILE", "FONT-FACE", "FONT-FACE-SRC", "FONT-FACE-URI", "FONT-FACE-FORMAT", "FONT-FACE-NAME", "MISSING-GLYPH"],
-        y = [],
-        b = [],
-        w = "",
-        E = t.documentElement,
-        S = y.indexOf || function(e) {
-            for (var t = this.length; t-- && this[t] !== e;);
-            return t
-        },
-        x = n.prototype,
-        T = x.hasOwnProperty,
-        N = x.isPrototypeOf,
-        C = n.defineProperty,
-        k = n.getOwnPropertyDescriptor,
-        L = n.getOwnPropertyNames,
-        A = n.getPrototypeOf,
-        O = n.setPrototypeOf,
-        M = !!n.__proto__,
-        _ = n.create || function mt(e) {
-            return e ? (mt.prototype = e, new mt) : this
-        },
-        D = O || (M ? function(e, t) {
-            return e.__proto__ = t, e
-        } : L && k ? function() {
-            function e(e, t) {
-                for (var n, r = L(t), i = 0, s = r.length; i < s; i++) n = r[i], T.call(e, n) || C(e, n, k(t, n))
-            }
-            return function(t, n) {
-                do e(t, n); while ((n = A(n)) && !N.call(n, t));
-                return t
-            }
-        }() : function(e, t) {
-            for (var n in t) e[n] = t[n];
-            return e
-        }),
-        P = e.MutationObserver || e.WebKitMutationObserver,
-        H = (e.HTMLElement || e.Element || e.Node).prototype,
-        B = !N.call(H, E),
-        j = B ? function(e) {
-            return e.nodeType === 1
-        } : function(e) {
-            return N.call(H, e)
-        },
-        F = B && [],
-        I = H.cloneNode,
-        q = H.setAttribute,
-        R = H.removeAttribute,
-        U = t.createElement,
-        z = P && {
-            attributes: !0,
-            characterData: !0,
-            attributeOldValue: !0
-        },
-        W = P || function(e) {
-            J = !1, E.removeEventListener(c, W)
-        },
-        X, V = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.msRequestAnimationFrame || function(e) {
-            setTimeout(e, 10)
-        },
-        $ = !1,
-        J = !0,
-        K = !0,
-        Q = !0,
-        G, Y, Z, et, tt, nt;
-    O || M ? (tt = function(e, t) {
-        N.call(t, e) || ht(e, t)
-    }, nt = ht) : (tt = function(e, t) {
-        e[i] || (e[i] = n(!0), ht(e, t))
-    }, nt = tt), B ? (J = !1, function() {
-        var e = k(H, "addEventListener"),
-            t = e.value,
-            n = function(e) {
-                var t = new CustomEvent(c, {
-                    bubbles: !0
-                });
-                t.attrName = e, t.prevValue = this.getAttribute(e), t.newValue = null, t[l] = t.attrChange = 2, R.call(this, e), this.dispatchEvent(t)
-            },
-            r = function(e, t) {
-                var n = this.hasAttribute(e),
-                    r = n && this.getAttribute(e),
-                    i = new CustomEvent(c, {
-                        bubbles: !0
-                    });
-                q.call(this, e, t), i.attrName = e, i.prevValue = n ? r : null, i.newValue = t, n ? i[f] = i.attrChange = 1 : i[a] = i.attrChange = 0, this.dispatchEvent(i)
-            },
-            s = function(e) {
-                var t = e.currentTarget,
-                    n = t[i],
-                    r = e.propertyName,
-                    s;
-                n.hasOwnProperty(r) && (n = n[r], s = new CustomEvent(c, {
-                    bubbles: !0
-                }), s.attrName = n.name, s.prevValue = n.value || null, s.newValue = n.value = t[r] || null, s.prevValue == null ? s[a] = s.attrChange = 0 : s[f] = s.attrChange = 1, t.dispatchEvent(s))
-            };
-        e.value = function(e, o, u) {
-            e === c && this.attributeChangedCallback && this.setAttribute !== r && (this[i] = {
-                className: {
-                    name: "class",
-                    value: this.className
-                }
-            }, this.setAttribute = r, this.removeAttribute = n, t.call(this, "propertychange", s)), t.call(this, e, o, u)
-        }, C(H, "addEventListener", e)
-    }()) : P || (E.addEventListener(c, W), E.setAttribute(i, 1), E.removeAttribute(i), J && (G = function(e) {
-        var t = this,
-            n, r, s;
-        if (t === e.target) {
-            n = t[i], t[i] = r = Z(t);
-            for (s in r) {
-                if (!(s in n)) return Y(0, t, s, n[s], r[s], a);
-                if (r[s] !== n[s]) return Y(1, t, s, n[s], r[s], f)
-            }
-            for (s in n)
-                if (!(s in r)) return Y(2, t, s, n[s], r[s], l)
-        }
-    }, Y = function(e, t, n, r, i, s) {
-        var o = {
-            attrChange: e,
-            currentTarget: t,
-            attrName: n,
-            prevValue: r,
-            newValue: i
-        };
-        o[s] = e, at(o)
-    }, Z = function(e) {
-        for (var t, n, r = {}, i = e.attributes, s = 0, o = i.length; s < o; s++) t = i[s], n = t.name, n !== "setAttribute" && (r[n] = t.value);
-        return r
-    })), t[r] = function(n, r) {
-        c = n.toUpperCase(), $ || ($ = !0, P ? (et = function(e, t) {
-            function n(e, t) {
-                for (var n = 0, r = e.length; n < r; t(e[n++]));
-            }
-            return new P(function(r) {
-                for (var i, s, o, u = 0, a = r.length; u < a; u++) i = r[u], i.type === "childList" ? (n(i.addedNodes, e), n(i.removedNodes, t)) : (s = i.target, Q && s.attributeChangedCallback && i.attributeName !== "style" && (o = s.getAttribute(i.attributeName), o !== i.oldValue && s.attributeChangedCallback(i.attributeName, i.oldValue, o)))
-            })
-        }(st(s), st(o)), et.observe(t, {
-            childList: !0,
-            subtree: !0
-        })) : (X = [], V(function E() {
-            while (X.length) X.shift().call(null, X.shift());
-            V(E)
-        }), t.addEventListener("DOMNodeInserted", ft(s)), t.addEventListener("DOMNodeRemoved", ft(o))), t.addEventListener(h, lt), t.addEventListener("readystatechange", lt), t.createElement = function(e, n) {
-            var r = U.apply(t, arguments),
-                i = "" + e,
-                s = S.call(y, (n ? v : d) + (n || i).toUpperCase()),
-                o = -1 < s;
-            return n && (r.setAttribute("is", n = n.toLowerCase()), o && (o = ut(i.toUpperCase(), n))), Q = !t.createElement.innerHTMLHelper, o && nt(r, b[s]), r
-        }, H.cloneNode = function(e) {
-            var t = I.call(this, !!e),
-                n = ot(t);
-            return -1 < n && nt(t, b[n]), e && it(t.querySelectorAll(w)), t
-        }), -2 < S.call(y, v + c) + S.call(y, d + c) && dt(n);
-        if (!m.test(c) || -1 < S.call(g, c)) throw new Error("The type " + n + " is invalid");
-        var i = function() {
-                return f ? t.createElement(l, c) : t.createElement(l)
-            },
-            a = r || x,
-            f = T.call(a, u),
-            l = f ? r[u].toUpperCase() : c,
-            c, p;
-        return f && -1 < S.call(y, d + l) && dt(l), p = y.push((f ? v : d) + c) - 1, w = w.concat(w.length ? "," : "", f ? l + '[is="' + n.toLowerCase() + '"]' : l), i.prototype = b[p] = T.call(a, "prototype") ? a.prototype : _(H), rt(t.querySelectorAll(w), s), i
-    }
-})(window, document, Object, "registerElement");

src/bower_components/fetch/fetch.js

@@ -1,263 +0,0 @@
-! 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/bower_components/native-promise-only/lib/npo.src.js

@@ -1,373 +0,0 @@
-/*! Native Promise Only
-    v0.8.0-a (c) Kyle Simpson
-    MIT License: http://getify.mit-license.org
-*/
-
-(function UMD(name,context,definition){
-	// special form of UMD for polyfilling across evironments
-	context[name] = definition();
-	if (typeof module != "undefined" && module.exports) { module.exports = context[name]; }
-	else if (typeof define == "function" && define.amd) { define(function $AMD$(){ return context[name]; }); }
-})("Promise",typeof global != "undefined" ? global : this,function DEF(){
-	/*jshint validthis:true */
-	"use strict";
-
-	var builtInProp, cycle, scheduling_queue,
-		ToString = Object.prototype.toString,
-		timer = (typeof setImmediate != "undefined") ?
-			function timer(fn) { return setImmediate(fn); } :
-			setTimeout
-	;
-
-	// dammit, IE8.
-	try {
-		Object.defineProperty({},"x",{});
-		builtInProp = function builtInProp(obj,name,val,config) {
-			return Object.defineProperty(obj,name,{
-				value: val,
-				writable: true,
-				configurable: config !== false
-			});
-		};
-	}
-	catch (err) {
-		builtInProp = function builtInProp(obj,name,val) {
-			obj[name] = val;
-			return obj;
-		};
-	}
-
-	// Note: using a queue instead of array for efficiency
-	scheduling_queue = (function Queue() {
-		var first, last, item;
-
-		function Item(fn,self) {
-			this.fn = fn;
-			this.self = self;
-			this.next = void 0;
-		}
-
-		return {
-			add: function add(fn,self) {
-				item = new Item(fn,self);
-				if (last) {
-					last.next = item;
-				}
-				else {
-					first = item;
-				}
-				last = item;
-				item = void 0;
-			},
-			drain: function drain() {
-				var f = first;
-				first = last = cycle = void 0;
-
-				while (f) {
-					f.fn.call(f.self);
-					f = f.next;
-				}
-			}
-		};
-	})();
-
-	function schedule(fn,self) {
-		scheduling_queue.add(fn,self);
-		if (!cycle) {
-			cycle = timer(scheduling_queue.drain);
-		}
-	}
-
-	// promise duck typing
-	function isThenable(o) {
-		var _then, o_type = typeof o;
-
-		if (o != null &&
-			(
-				o_type == "object" || o_type == "function"
-			)
-		) {
-			_then = o.then;
-		}
-		return typeof _then == "function" ? _then : false;
-	}
-
-	function notify() {
-		for (var i=0; i<this.chain.length; i++) {
-			notifyIsolated(
-				this,
-				(this.state === 1) ? this.chain[i].success : this.chain[i].failure,
-				this.chain[i]
-			);
-		}
-		this.chain.length = 0;
-	}
-
-	// NOTE: This is a separate function to isolate
-	// the `try..catch` so that other code can be
-	// optimized better
-	function notifyIsolated(self,cb,chain) {
-		var ret, _then;
-		try {
-			if (cb === false) {
-				chain.reject(self.msg);
-			}
-			else {
-				if (cb === true) {
-					ret = self.msg;
-				}
-				else {
-					ret = cb.call(void 0,self.msg);
-				}
-
-				if (ret === chain.promise) {
-					chain.reject(TypeError("Promise-chain cycle"));
-				}
-				else if (_then = isThenable(ret)) {
-					_then.call(ret,chain.resolve,chain.reject);
-				}
-				else {
-					chain.resolve(ret);
-				}
-			}
-		}
-		catch (err) {
-			chain.reject(err);
-		}
-	}
-
-	function resolve(msg) {
-		var _then, self = this;
-
-		// already triggered?
-		if (self.triggered) { return; }
-
-		self.triggered = true;
-
-		// unwrap
-		if (self.def) {
-			self = self.def;
-		}
-
-		try {
-			if (_then = isThenable(msg)) {
-				schedule(function(){
-					var def_wrapper = new MakeDefWrapper(self);
-					try {
-						_then.call(msg,
-							function $resolve$(){ resolve.apply(def_wrapper,arguments); },
-							function $reject$(){ reject.apply(def_wrapper,arguments); }
-						);
-					}
-					catch (err) {
-						reject.call(def_wrapper,err);
-					}
-				})
-			}
-			else {
-				self.msg = msg;
-				self.state = 1;
-				if (self.chain.length > 0) {
-					schedule(notify,self);
-				}
-			}
-		}
-		catch (err) {
-			reject.call(new MakeDefWrapper(self),err);
-		}
-	}
-
-	function reject(msg) {
-		var self = this;
-
-		// already triggered?
-		if (self.triggered) { return; }
-
-		self.triggered = true;
-
-		// unwrap
-		if (self.def) {
-			self = self.def;
-		}
-
-		self.msg = msg;
-		self.state = 2;
-		if (self.chain.length > 0) {
-			schedule(notify,self);
-		}
-	}
-
-	function iteratePromises(Constructor,arr,resolver,rejecter) {
-		for (var idx=0; idx<arr.length; idx++) {
-			(function IIFE(idx){
-				Constructor.resolve(arr[idx])
-				.then(
-					function $resolver$(msg){
-						resolver(idx,msg);
-					},
-					rejecter
-				);
-			})(idx);
-		}
-	}
-
-	function MakeDefWrapper(self) {
-		this.def = self;
-		this.triggered = false;
-	}
-
-	function MakeDef(self) {
-		this.promise = self;
-		this.state = 0;
-		this.triggered = false;
-		this.chain = [];
-		this.msg = void 0;
-	}
-
-	function Promise(executor) {
-		if (typeof executor != "function") {
-			throw TypeError("Not a function");
-		}
-
-		if (this.__NPO__ !== 0) {
-			throw TypeError("Not a promise");
-		}
-
-		// instance shadowing the inherited "brand"
-		// to signal an already "initialized" promise
-		this.__NPO__ = 1;
-
-		var def = new MakeDef(this);
-
-		this["then"] = function then(success,failure) {
-			var o = {
-				success: typeof success == "function" ? success : true,
-				failure: typeof failure == "function" ? failure : false
-			};
-			// Note: `then(..)` itself can be borrowed to be used against
-			// a different promise constructor for making the chained promise,
-			// by substituting a different `this` binding.
-			o.promise = new this.constructor(function extractChain(resolve,reject) {
-				if (typeof resolve != "function" || typeof reject != "function") {
-					throw TypeError("Not a function");
-				}
-
-				o.resolve = resolve;
-				o.reject = reject;
-			});
-			def.chain.push(o);
-
-			if (def.state !== 0) {
-				schedule(notify,def);
-			}
-
-			return o.promise;
-		};
-		this["catch"] = function $catch$(failure) {
-			return this.then(void 0,failure);
-		};
-
-		try {
-			executor.call(
-				void 0,
-				function publicResolve(msg){
-					resolve.call(def,msg);
-				},
-				function publicReject(msg) {
-					reject.call(def,msg);
-				}
-			);
-		}
-		catch (err) {
-			reject.call(def,err);
-		}
-	}
-
-	var PromisePrototype = builtInProp({},"constructor",Promise,
-		/*configurable=*/false
-	);
-
-	// Note: Android 4 cannot use `Object.defineProperty(..)` here
-	Promise.prototype = PromisePrototype;
-
-	// built-in "brand" to signal an "uninitialized" promise
-	builtInProp(PromisePrototype,"__NPO__",0,
-		/*configurable=*/false
-	);
-
-	builtInProp(Promise,"resolve",function Promise$resolve(msg) {
-		var Constructor = this;
-
-		// spec mandated checks
-		// note: best "isPromise" check that's practical for now
-		if (msg && typeof msg == "object" && msg.__NPO__ === 1) {
-			return msg;
-		}
-
-		return new Constructor(function executor(resolve,reject){
-			if (typeof resolve != "function" || typeof reject != "function") {
-				throw TypeError("Not a function");
-			}
-
-			resolve(msg);
-		});
-	});
-
-	builtInProp(Promise,"reject",function Promise$reject(msg) {
-		return new this(function executor(resolve,reject){
-			if (typeof resolve != "function" || typeof reject != "function") {
-				throw TypeError("Not a function");
-			}
-
-			reject(msg);
-		});
-	});
-
-	builtInProp(Promise,"all",function Promise$all(arr) {
-		var Constructor = this;
-
-		// spec mandated checks
-		if (ToString.call(arr) != "[object Array]") {
-			return Constructor.reject(TypeError("Not an array"));
-		}
-		if (arr.length === 0) {
-			return Constructor.resolve([]);
-		}
-
-		return new Constructor(function executor(resolve,reject){
-			if (typeof resolve != "function" || typeof reject != "function") {
-				throw TypeError("Not a function");
-			}
-
-			var len = arr.length, msgs = Array(len), count = 0;
-
-			iteratePromises(Constructor,arr,function resolver(idx,msg) {
-				msgs[idx] = msg;
-				if (++count === len) {
-					resolve(msgs);
-				}
-			},reject);
-		});
-	});
-
-	builtInProp(Promise,"race",function Promise$race(arr) {
-		var Constructor = this;
-
-		// spec mandated checks
-		if (ToString.call(arr) != "[object Array]") {
-			return Constructor.reject(TypeError("Not an array"));
-		}
-
-		return new Constructor(function executor(resolve,reject){
-			if (typeof resolve != "function" || typeof reject != "function") {
-				throw TypeError("Not a function");
-			}
-
-			iteratePromises(Constructor,arr,function resolver(idx,msg){
-				resolve(msg);
-			},reject);
-		});
-	});
-
-	return Promise;
-});

src/bower_components/native-promise-only/test_adapter.js

@@ -1,21 +0,0 @@
-// Adapter for "promises-aplus-tests" test runner
-
-var path = require("path");
-var Promise = require(path.join(__dirname,"lib","npo.src.js"));
-
-module.exports.deferred = function __deferred__() {
-	var o = {};
-	o.promise = new Promise(function __Promise__(resolve,reject){
-		o.resolve = resolve;
-		o.reject = reject;
-	});
-	return o;
-};
-
-module.exports.resolved = function __resolved__(val) {
-	return Promise.resolve(val);
-};
-
-module.exports.rejected = function __rejected__(reason) {
-	return Promise.reject(reason);
-};

src/bower_components/resize-observer-polyfill/ResizeObserver.js

@@ -1,939 +0,0 @@
-(function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-	typeof define === 'function' && define.amd ? define(factory) :
-	(global.ResizeObserver = factory());
-}(this, (function () { 'use strict';
-
-/**
- * A collection of shims that provide minimal functionality of the ES6 collections.
- *
- * These implementations are not meant to be used outside of the ResizeObserver
- * modules as they cover only a limited range of use cases.
- */
-/* eslint-disable require-jsdoc, valid-jsdoc */
-var MapShim = (function () {
-    if (typeof Map !== 'undefined') {
-        return Map;
-    }
-
-    /**
-     * Returns index in provided array that matches the specified key.
-     *
-     * @param {Array<Array>} arr
-     * @param {*} key
-     * @returns {number}
-     */
-    function getIndex(arr, key) {
-        var result = -1;
-
-        arr.some(function (entry, index) {
-            if (entry[0] === key) {
-                result = index;
-
-                return true;
-            }
-
-            return false;
-        });
-
-        return result;
-    }
-
-    return (function () {
-        function anonymous() {
-            this.__entries__ = [];
-        }
-
-        var prototypeAccessors = { size: { configurable: true } };
-
-        /**
-         * @returns {boolean}
-         */
-        prototypeAccessors.size.get = function () {
-            return this.__entries__.length;
-        };
-
-        /**
-         * @param {*} key
-         * @returns {*}
-         */
-        anonymous.prototype.get = function (key) {
-            var index = getIndex(this.__entries__, key);
-            var entry = this.__entries__[index];
-
-            return entry && entry[1];
-        };
-
-        /**
-         * @param {*} key
-         * @param {*} value
-         * @returns {void}
-         */
-        anonymous.prototype.set = function (key, value) {
-            var index = getIndex(this.__entries__, key);
-
-            if (~index) {
-                this.__entries__[index][1] = value;
-            } else {
-                this.__entries__.push([key, value]);
-            }
-        };
-
-        /**
-         * @param {*} key
-         * @returns {void}
-         */
-        anonymous.prototype.delete = function (key) {
-            var entries = this.__entries__;
-            var index = getIndex(entries, key);
-
-            if (~index) {
-                entries.splice(index, 1);
-            }
-        };
-
-        /**
-         * @param {*} key
-         * @returns {void}
-         */
-        anonymous.prototype.has = function (key) {
-            return !!~getIndex(this.__entries__, key);
-        };
-
-        /**
-         * @returns {void}
-         */
-        anonymous.prototype.clear = function () {
-            this.__entries__.splice(0);
-        };
-
-        /**
-         * @param {Function} callback
-         * @param {*} [ctx=null]
-         * @returns {void}
-         */
-        anonymous.prototype.forEach = function (callback, ctx) {
-            var this$1 = this;
-            if ( ctx === void 0 ) ctx = null;
-
-            for (var i = 0, list = this$1.__entries__; i < list.length; i += 1) {
-                var entry = list[i];
-
-                callback.call(ctx, entry[1], entry[0]);
-            }
-        };
-
-        Object.defineProperties( anonymous.prototype, prototypeAccessors );
-
-        return anonymous;
-    }());
-})();
-
-/**
- * Detects whether window and document objects are available in current environment.
- */
-var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && window.document === document;
-
-// Returns global object of a current environment.
-var global$1 = (function () {
-    if (typeof global !== 'undefined' && global.Math === Math) {
-        return global;
-    }
-
-    if (typeof self !== 'undefined' && self.Math === Math) {
-        return self;
-    }
-
-    if (typeof window !== 'undefined' && window.Math === Math) {
-        return window;
-    }
-
-    // eslint-disable-next-line no-new-func
-    return Function('return this')();
-})();
-
-/**
- * A shim for the requestAnimationFrame which falls back to the setTimeout if
- * first one is not supported.
- *
- * @returns {number} Requests' identifier.
- */
-var requestAnimationFrame$1 = (function () {
-    if (typeof requestAnimationFrame === 'function') {
-        // It's required to use a bounded function because IE sometimes throws
-        // an "Invalid calling object" error if rAF is invoked without the global
-        // object on the left hand side.
-        return requestAnimationFrame.bind(global$1);
-    }
-
-    return function (callback) { return setTimeout(function () { return callback(Date.now()); }, 1000 / 60); };
-})();
-
-// Defines minimum timeout before adding a trailing call.
-var trailingTimeout = 2;
-
-/**
- * Creates a wrapper function which ensures that provided callback will be
- * invoked only once during the specified delay period.
- *
- * @param {Function} callback - Function to be invoked after the delay period.
- * @param {number} delay - Delay after which to invoke callback.
- * @returns {Function}
- */
-var throttle = function (callback, delay) {
-    var leadingCall = false,
-        trailingCall = false,
-        lastCallTime = 0;
-
-    /**
-     * Invokes the original callback function and schedules new invocation if
-     * the "proxy" was called during current request.
-     *
-     * @returns {void}
-     */
-    function resolvePending() {
-        if (leadingCall) {
-            leadingCall = false;
-
-            callback();
-        }
-
-        if (trailingCall) {
-            proxy();
-        }
-    }
-
-    /**
-     * Callback invoked after the specified delay. It will further postpone
-     * invocation of the original function delegating it to the
-     * requestAnimationFrame.
-     *
-     * @returns {void}
-     */
-    function timeoutCallback() {
-        requestAnimationFrame$1(resolvePending);
-    }
-
-    /**
-     * Schedules invocation of the original function.
-     *
-     * @returns {void}
-     */
-    function proxy() {
-        var timeStamp = Date.now();
-
-        if (leadingCall) {
-            // Reject immediately following calls.
-            if (timeStamp - lastCallTime < trailingTimeout) {
-                return;
-            }
-
-            // Schedule new call to be in invoked when the pending one is resolved.
-            // This is important for "transitions" which never actually start
-            // immediately so there is a chance that we might miss one if change
-            // happens amids the pending invocation.
-            trailingCall = true;
-        } else {
-            leadingCall = true;
-            trailingCall = false;
-
-            setTimeout(timeoutCallback, delay);
-        }
-
-        lastCallTime = timeStamp;
-    }
-
-    return proxy;
-};
-
-// Minimum delay before invoking the update of observers.
-var REFRESH_DELAY = 20;
-
-// A list of substrings of CSS properties used to find transition events that
-// might affect dimensions of observed elements.
-var transitionKeys = ['top', 'right', 'bottom', 'left', 'width', 'height', 'size', 'weight'];
-
-// Check if MutationObserver is available.
-var mutationObserverSupported = typeof MutationObserver !== 'undefined';
-
-/**
- * Singleton controller class which handles updates of ResizeObserver instances.
- */
-var ResizeObserverController = function() {
-    this.connected_ = false;
-    this.mutationEventsAdded_ = false;
-    this.mutationsObserver_ = null;
-    this.observers_ = [];
-
-    this.onTransitionEnd_ = this.onTransitionEnd_.bind(this);
-    this.refresh = throttle(this.refresh.bind(this), REFRESH_DELAY);
-};
-
-/**
- * Adds observer to observers list.
- *
- * @param {ResizeObserverSPI} observer - Observer to be added.
- * @returns {void}
- */
-
-
-/**
- * Holds reference to the controller's instance.
- *
- * @private {ResizeObserverController}
- */
-
-
-/**
- * Keeps reference to the instance of MutationObserver.
- *
- * @private {MutationObserver}
- */
-
-/**
- * Indicates whether DOM listeners have been added.
- *
- * @private {boolean}
- */
-ResizeObserverController.prototype.addObserver = function (observer) {
-    if (!~this.observers_.indexOf(observer)) {
-        this.observers_.push(observer);
-    }
-
-    // Add listeners if they haven't been added yet.
-    if (!this.connected_) {
-        this.connect_();
-    }
-};
-
-/**
- * Removes observer from observers list.
- *
- * @param {ResizeObserverSPI} observer - Observer to be removed.
- * @returns {void}
- */
-ResizeObserverController.prototype.removeObserver = function (observer) {
-    var observers = this.observers_;
-    var index = observers.indexOf(observer);
-
-    // Remove observer if it's present in registry.
-    if (~index) {
-        observers.splice(index, 1);
-    }
-
-    // Remove listeners if controller has no connected observers.
-    if (!observers.length && this.connected_) {
-        this.disconnect_();
-    }
-};
-
-/**
- * Invokes the update of observers. It will continue running updates insofar
- * it detects changes.
- *
- * @returns {void}
- */
-ResizeObserverController.prototype.refresh = function () {
-    var changesDetected = this.updateObservers_();
-
-    // Continue running updates if changes have been detected as there might
-    // be future ones caused by CSS transitions.
-    if (changesDetected) {
-        this.refresh();
-    }
-};
-
-/**
- * Updates every observer from observers list and notifies them of queued
- * entries.
- *
- * @private
- * @returns {boolean} Returns "true" if any observer has detected changes in
- *  dimensions of it's elements.
- */
-ResizeObserverController.prototype.updateObservers_ = function () {
-    // Collect observers that have active observations.
-    var activeObservers = this.observers_.filter(function (observer) {
-        return observer.gatherActive(), observer.hasActive();
-    });
-
-    // Deliver notifications in a separate cycle in order to avoid any
-    // collisions between observers, e.g. when multiple instances of
-    // ResizeObserver are tracking the same element and the callback of one
-    // of them changes content dimensions of the observed target. Sometimes
-    // this may result in notifications being blocked for the rest of observers.
-    activeObservers.forEach(function (observer) { return observer.broadcastActive(); });
-
-    return activeObservers.length > 0;
-};
-
-/**
- * Initializes DOM listeners.
- *
- * @private
- * @returns {void}
- */
-ResizeObserverController.prototype.connect_ = function () {
-    // Do nothing if running in a non-browser environment or if listeners
-    // have been already added.
-    if (!isBrowser || this.connected_) {
-        return;
-    }
-
-    // Subscription to the "Transitionend" event is used as a workaround for
-    // delayed transitions. This way it's possible to capture at least the
-    // final state of an element.
-    document.addEventListener('transitionend', this.onTransitionEnd_);
-
-    window.addEventListener('resize', this.refresh);
-    window.addEventListener('orientationchange', this.refresh);
-
-    if (mutationObserverSupported) {
-        this.mutationsObserver_ = new MutationObserver(this.refresh);
-
-        this.mutationsObserver_.observe(document, {
-            attributes: true,
-            childList: true,
-            characterData: true,
-            subtree: true
-        });
-    } else {
-        document.addEventListener('DOMSubtreeModified', this.refresh);
-
-        this.mutationEventsAdded_ = true;
-    }
-
-    this.connected_ = true;
-};
-
-/**
- * Removes DOM listeners.
- *
- * @private
- * @returns {void}
- */
-ResizeObserverController.prototype.disconnect_ = function () {
-    // Do nothing if running in a non-browser environment or if listeners
-    // have been already removed.
-    if (!isBrowser || !this.connected_) {
-        return;
-    }
-
-    document.removeEventListener('transitionend', this.onTransitionEnd_);
-    window.removeEventListener('resize', this.refresh);
-    window.removeEventListener('orientationchange', this.refresh);
-
-    if (this.mutationsObserver_) {
-        this.mutationsObserver_.disconnect();
-    }
-
-    if (this.mutationEventsAdded_) {
-        document.removeEventListener('DOMSubtreeModified', this.refresh);
-    }
-
-    this.mutationsObserver_ = null;
-    this.mutationEventsAdded_ = false;
-    this.connected_ = false;
-};
-
-/**
- * "Transitionend" event handler.
- *
- * @private
- * @param {TransitionEvent} event
- * @returns {void}
- */
-ResizeObserverController.prototype.onTransitionEnd_ = function (ref) {
-        var propertyName = ref.propertyName; if ( propertyName === void 0 ) propertyName = '';
-
-    // Detect whether transition may affect dimensions of an element.
-    var isReflowProperty = transitionKeys.some(function (key) {
-        return !!~propertyName.indexOf(key);
-    });
-
-    if (isReflowProperty) {
-        this.refresh();
-    }
-};
-
-/**
- * Returns instance of the ResizeObserverController.
- *
- * @returns {ResizeObserverController}
- */
-ResizeObserverController.getInstance = function () {
-    if (!this.instance_) {
-        this.instance_ = new ResizeObserverController();
-    }
-
-    return this.instance_;
-};
-
-ResizeObserverController.instance_ = null;
-
-/**
- * Defines non-writable/enumerable properties of the provided target object.
- *
- * @param {Object} target - Object for which to define properties.
- * @param {Object} props - Properties to be defined.
- * @returns {Object} Target object.
- */
-var defineConfigurable = (function (target, props) {
-    for (var i = 0, list = Object.keys(props); i < list.length; i += 1) {
-        var key = list[i];
-
-        Object.defineProperty(target, key, {
-            value: props[key],
-            enumerable: false,
-            writable: false,
-            configurable: true
-        });
-    }
-
-    return target;
-});
-
-/**
- * Returns the global object associated with provided element.
- *
- * @param {Object} target
- * @returns {Object}
- */
-var getWindowOf = (function (target) {
-    // Assume that the element is an instance of Node, which means that it
-    // has the "ownerDocument" property from which we can retrieve a
-    // corresponding global object.
-    var ownerGlobal = target && target.ownerDocument && target.ownerDocument.defaultView;
-
-    // Return the local global object if it's not possible extract one from
-    // provided element.
-    return ownerGlobal || global$1;
-});
-
-// Placeholder of an empty content rectangle.
-var emptyRect = createRectInit(0, 0, 0, 0);
-
-/**
- * Converts provided string to a number.
- *
- * @param {number|string} value
- * @returns {number}
- */
-function toFloat(value) {
-    return parseFloat(value) || 0;
-}
-
-/**
- * Extracts borders size from provided styles.
- *
- * @param {CSSStyleDeclaration} styles
- * @param {...string} positions - Borders positions (top, right, ...)
- * @returns {number}
- */
-function getBordersSize(styles) {
-    var positions = [], len = arguments.length - 1;
-    while ( len-- > 0 ) positions[ len ] = arguments[ len + 1 ];
-
-    return positions.reduce(function (size, position) {
-        var value = styles['border-' + position + '-width'];
-
-        return size + toFloat(value);
-    }, 0);
-}
-
-/**
- * Extracts paddings sizes from provided styles.
- *
- * @param {CSSStyleDeclaration} styles
- * @returns {Object} Paddings box.
- */
-function getPaddings(styles) {
-    var positions = ['top', 'right', 'bottom', 'left'];
-    var paddings = {};
-
-    for (var i = 0, list = positions; i < list.length; i += 1) {
-        var position = list[i];
-
-        var value = styles['padding-' + position];
-
-        paddings[position] = toFloat(value);
-    }
-
-    return paddings;
-}
-
-/**
- * Calculates content rectangle of provided SVG element.
- *
- * @param {SVGGraphicsElement} target - Element content rectangle of which needs
- *      to be calculated.
- * @returns {DOMRectInit}
- */
-function getSVGContentRect(target) {
-    var bbox = target.getBBox();
-
-    return createRectInit(0, 0, bbox.width, bbox.height);
-}
-
-/**
- * Calculates content rectangle of provided HTMLElement.
- *
- * @param {HTMLElement} target - Element for which to calculate the content rectangle.
- * @returns {DOMRectInit}
- */
-function getHTMLElementContentRect(target) {
-
-    var rect = target.getBoundingClientRect();
-    return createRectInit(rect.left, rect.top, rect.width, rect.height);
-}
-
-/**
- * Checks whether provided element is a document element (<html>).
- *
- * @param {Element} target - Element to be checked.
- * @returns {boolean}
- */
-function isDocumentElement(target) {
-    return target === getWindowOf(target).document.documentElement;
-}
-
-/**
- * Calculates an appropriate content rectangle for provided html or svg element.
- *
- * @param {Element} target - Element content rectangle of which needs to be calculated.
- * @returns {DOMRectInit}
- */
-function getContentRect(target) {
-    if (!isBrowser) {
-        return emptyRect;
-    }
-
-    return getHTMLElementContentRect(target);
-}
-
-/**
- * Creates rectangle with an interface of the DOMRectReadOnly.
- * Spec: https://drafts.fxtf.org/geometry/#domrectreadonly
- *
- * @param {DOMRectInit} rectInit - Object with rectangle's x/y coordinates and dimensions.
- * @returns {DOMRectReadOnly}
- */
-function createReadOnlyRect(ref) {
-    var x = ref.x;
-    var y = ref.y;
-    var width = ref.width;
-    var height = ref.height;
-
-    // If DOMRectReadOnly is available use it as a prototype for the rectangle.
-    var Constr = typeof DOMRectReadOnly !== 'undefined' ? DOMRectReadOnly : Object;
-    var rect = Object.create(Constr.prototype);
-
-    // Rectangle's properties are not writable and non-enumerable.
-    defineConfigurable(rect, {
-        x: x, y: y, width: width, height: height,
-        top: y,
-        right: x + width,
-        bottom: height + y,
-        left: x
-    });
-
-    return rect;
-}
-
-/**
- * Creates DOMRectInit object based on the provided dimensions and the x/y coordinates.
- * Spec: https://drafts.fxtf.org/geometry/#dictdef-domrectinit
- *
- * @param {number} x - X coordinate.
- * @param {number} y - Y coordinate.
- * @param {number} width - Rectangle's width.
- * @param {number} height - Rectangle's height.
- * @returns {DOMRectInit}
- */
-function createRectInit(x, y, width, height) {
-    return { x: x, y: y, width: width, height: height };
-}
-
-/**
- * Class that is responsible for computations of the content rectangle of
- * provided DOM element and for keeping track of it's changes.
- */
-var ResizeObservation = function(target) {
-    this.broadcastWidth = 0;
-    this.broadcastHeight = 0;
-    this.contentRect_ = createRectInit(0, 0, 0, 0);
-
-    this.target = target;
-};
-
-/**
- * Updates content rectangle and tells whether it's width or height properties
- * have changed since the last broadcast.
- *
- * @returns {boolean}
- */
-
-
-/**
- * Reference to the last observed content rectangle.
- *
- * @private {DOMRectInit}
- */
-
-
-/**
- * Broadcasted width of content rectangle.
- *
- * @type {number}
- */
-ResizeObservation.prototype.isActive = function () {
-    var rect = getContentRect(this.target);
-
-    this.contentRect_ = rect;
-    return rect.width !== this.broadcastWidth || rect.height !== this.broadcastHeight;
-};
-
-/**
- * Updates 'broadcastWidth' and 'broadcastHeight' properties with a data
- * from the corresponding properties of the last observed content rectangle.
- *
- * @returns {DOMRectInit} Last observed content rectangle.
- */
-ResizeObservation.prototype.broadcastRect = function () {
-    var rect = this.contentRect_;
-
-    this.broadcastWidth = rect.width;
-    this.broadcastHeight = rect.height;
-
-    return rect;
-};
-
-var ResizeObserverEntry = function(target, rectInit) {
-    var contentRect = createReadOnlyRect(rectInit);
-
-    // According to the specification following properties are not writable
-    // and are also not enumerable in the native implementation.
-    //
-    // Property accessors are not being used as they'd require to define a
-    // private WeakMap storage which may cause memory leaks in browsers that
-    // don't support this type of collections.
-    defineConfigurable(this, { target: target, contentRect: contentRect });
-};
-
-var ResizeObserverSPI = function(callback, controller, callbackCtx) {
-    this.activeObservations_ = [];
-    this.observations_ = new MapShim();
-
-    if (typeof callback !== 'function') {
-        throw new TypeError('The callback provided as parameter 1 is not a function.');
-    }
-
-    this.callback_ = callback;
-    this.controller_ = controller;
-    this.callbackCtx_ = callbackCtx;
-};
-
-/**
- * Starts observing provided element.
- *
- * @param {Element} target - Element to be observed.
- * @returns {void}
- */
-
-
-/**
- * Registry of the ResizeObservation instances.
- *
- * @private {Map<Element, ResizeObservation>}
- */
-
-
-/**
- * Public ResizeObserver instance which will be passed to the callback
- * function and used as a value of it's "this" binding.
- *
- * @private {ResizeObserver}
- */
-
-/**
- * Collection of resize observations that have detected changes in dimensions
- * of elements.
- *
- * @private {Array<ResizeObservation>}
- */
-ResizeObserverSPI.prototype.observe = function (target) {
-    if (!arguments.length) {
-        throw new TypeError('1 argument required, but only 0 present.');
-    }
-
-    // Do nothing if current environment doesn't have the Element interface.
-    if (typeof Element === 'undefined' || !(Element instanceof Object)) {
-        return;
-    }
-
-    if (!(target instanceof getWindowOf(target).Element)) {
-        throw new TypeError('parameter 1 is not of type "Element".');
-    }
-
-    var observations = this.observations_;
-
-    // Do nothing if element is already being observed.
-    if (observations.has(target)) {
-        return;
-    }
-
-    observations.set(target, new ResizeObservation(target));
-
-    this.controller_.addObserver(this);
-
-    // Force the update of observations.
-    this.controller_.refresh();
-};
-
-/**
- * Stops observing provided element.
- *
- * @param {Element} target - Element to stop observing.
- * @returns {void}
- */
-ResizeObserverSPI.prototype.unobserve = function (target) {
-    if (!arguments.length) {
-        throw new TypeError('1 argument required, but only 0 present.');
-    }
-
-    // Do nothing if current environment doesn't have the Element interface.
-    if (typeof Element === 'undefined' || !(Element instanceof Object)) {
-        return;
-    }
-
-    if (!(target instanceof getWindowOf(target).Element)) {
-        throw new TypeError('parameter 1 is not of type "Element".');
-    }
-
-    var observations = this.observations_;
-
-    // Do nothing if element is not being observed.
-    if (!observations.has(target)) {
-        return;
-    }
-
-    observations.delete(target);
-
-    if (!observations.size) {
-        this.controller_.removeObserver(this);
-    }
-};
-
-/**
- * Stops observing all elements.
- *
- * @returns {void}
- */
-ResizeObserverSPI.prototype.disconnect = function () {
-    this.clearActive();
-    this.observations_.clear();
-    this.controller_.removeObserver(this);
-};
-
-/**
- * Collects observation instances the associated element of which has changed
- * it's content rectangle.
- *
- * @returns {void}
- */
-ResizeObserverSPI.prototype.gatherActive = function () {
-        var this$1 = this;
-
-    this.clearActive();
-
-    this.observations_.forEach(function (observation) {
-        if (observation.isActive()) {
-            this$1.activeObservations_.push(observation);
-        }
-    });
-};
-
-/**
- * Invokes initial callback function with a list of ResizeObserverEntry
- * instances collected from active resize observations.
- *
- * @returns {void}
- */
-ResizeObserverSPI.prototype.broadcastActive = function () {
-    // Do nothing if observer doesn't have active observations.
-    if (!this.hasActive()) {
-        return;
-    }
-
-    var ctx = this.callbackCtx_;
-
-    // Create ResizeObserverEntry instance for every active observation.
-    var entries = this.activeObservations_.map(function (observation) {
-        return new ResizeObserverEntry(observation.target, observation.broadcastRect());
-    });
-
-    this.callback_.call(ctx, entries, ctx);
-    this.clearActive();
-};
-
-/**
- * Clears the collection of active observations.
- *
- * @returns {void}
- */
-ResizeObserverSPI.prototype.clearActive = function () {
-    this.activeObservations_.splice(0);
-};
-
-/**
- * Tells whether observer has active observations.
- *
- * @returns {boolean}
- */
-ResizeObserverSPI.prototype.hasActive = function () {
-    return this.activeObservations_.length > 0;
-};
-
-// Registry of internal observers. If WeakMap is not available use current shim
-// for the Map collection as it has all required methods and because WeakMap
-// can't be fully polyfilled anyway.
-var observers = typeof WeakMap !== 'undefined' ? new WeakMap() : new MapShim();
-
-/**
- * ResizeObserver API. Encapsulates the ResizeObserver SPI implementation
- * exposing only those methods and properties that are defined in the spec.
- */
-var ResizeObserver = function(callback) {
-    if (!(this instanceof ResizeObserver)) {
-        throw new TypeError('Cannot call a class as a function.');
-    }
-    if (!arguments.length) {
-        throw new TypeError('1 argument required, but only 0 present.');
-    }
-
-    var controller = ResizeObserverController.getInstance();
-    var observer = new ResizeObserverSPI(callback, controller, this);
-
-    observers.set(this, observer);
-};
-
-// Expose public methods of ResizeObserver.
-['observe', 'unobserve', 'disconnect'].forEach(function (method) {
-    ResizeObserver.prototype[method] = function () {
-        return (ref = observers.get(this))[method].apply(ref, arguments);
-        var ref;
-    };
-});
-
-var index = (function () {
-    // Export existing implementation if available.
-    if (typeof global$1.ResizeObserver !== 'undefined') {
-        return global$1.ResizeObserver;
-    }
-
-    return ResizeObserver;
-})();
-
-return index;
-
-})));

src/bundle.js

@@ -4,45 +4,95 @@
 // Use define from require.js not webpack's define
 var _define = window.define;
 
+// document-register-element
+var docRegister = require("document-register-element");
+_define("document-register-element", function() {
+    return docRegister;
+});
+
+// fetch
+var fetch = require("whatwg-fetch");
+_define("fetch", function() {
+    return fetch
+});
+
 // flvjs
 var flvjs = require("flv.js");
-_define("flvjs", function() { return flvjs; });
+_define("flvjs", function() {
+    return flvjs;
+});
 
 // jstree
 var jstree = require("jstree");
 require("jstree/dist/themes/default/style.css");
-_define("jstree", function() { return jstree; });
+_define("jstree", function() {
+    return jstree;
+});
 
 // jquery
 var jquery = require("jquery");
-_define("jQuery", function() { return jquery; });
+_define("jQuery", function() {
+    return jquery;
+});
 
 // hlsjs
 var hlsjs = require("hls.js");
-_define("hlsjs", function() { return hlsjs; });
+_define("hlsjs", function() {
+    return hlsjs;
+});
 
 // howler
 var howler = require("howler");
-_define("howler", function() { return howler; });
+_define("howler", function() {
+    return howler;
+});
+
+// native-promise-only
+var nativePromise = require("native-promise-only");
+_define("native-promise-only", function() {
+    return nativePromise;
+});
+
+// resize-observer-polyfill
+var resize = require("resize-observer-polyfill");
+_define("resize-observer-polyfill", function() {
+    return resize;
+});
 
 // shaka
 var shaka = require("shaka-player");
-_define("shaka", function() { return shaka; });
+_define("shaka", function() {
+    return shaka;
+});
 
 // swiper
 var swiper = require("swiper");
 require("swiper/dist/css/swiper.min.css");
-_define("swiper", function() { return swiper; });
+_define("swiper", function() {
+    return swiper;
+});
 
 // sortable
 var sortable = require("sortablejs");
-_define("sortable", function() { return sortable; });
+_define("sortable", function() {
+    return sortable;
+});
+
+// webcomponents
+var webcomponents = require("webcomponents.js/webcomponents-lite");
+_define("webcomponents", function() {
+    return webcomponents
+});
 
 // libjass
 var libjass = require("libjass");
 require("libjass/libjass.css");
-_define("libjass", function() { return libjass; });
+_define("libjass", function() {
+    return libjass;
+});
 
 // libass-wasm
 var libass_wasm = require("libass-wasm");
-_define("JavascriptSubtitlesOctopus", function() { return libass_wasm; });
+_define("JavascriptSubtitlesOctopus", function() {
+    return libass_wasm;
+});

src/components/accessschedule/accessschedule.template.html

@@ -1,5 +1,7 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
+        <i class="md-icon">arrow_back</i>
+    </button>
     <h3 class="formDialogHeaderTitle">
         ${HeaderAccessSchedule}
     </h3>

src/components/actionsheet/actionsheet.js

@@ -139,7 +139,9 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'browser', 'dom', 'emby-bu
             style += "min-width:" + minWidth + "px;";
         }
 
-        var i, length, option;
+        var i;
+        var length;
+        var option;
         var renderIcon = false;
         var icons = [];
         var itemIcon;
@@ -156,7 +158,7 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'browser', 'dom', 'emby-bu
         }
 
         if (layoutManager.tv) {
-            html += '<button is="paper-icon-button-light" class="btnCloseActionSheet hide-mouse-idle-tv" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>';
+            html += '<button is="paper-icon-button-light" class="btnCloseActionSheet hide-mouse-idle-tv" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
         }
 
         // If any items have an icon, give them all an icon just to make sure they're all lined up evenly
@@ -225,8 +227,7 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'browser', 'dom', 'emby-bu
             if (itemIcon) {
 
                 html += '<i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent md-icon">' + itemIcon + '</i>';
-            }
+            } else if (renderIcon && !center) {
-            else if (renderIcon && !center) {
                 html += '<i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent md-icon" style="visibility:hidden;">check</i>';
             }
 

src/components/actionsheet/package.json

@@ -1,3 +0,0 @@
-{
-    "main": "actionsheet.js"
-}

src/components/alphapicker/alphapicker.js

@@ -50,9 +50,7 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
 
         var vertical = element.classList.contains('alphaPicker-vertical');
 
-        if (vertical) {
+        if (!vertical) {
-
-        } else {
             element.classList.add('focuscontainer-x');
         }
 
@@ -69,8 +67,7 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
 
         html += '<div class="' + rowClassName + '">';
         if (options.mode === 'keyboard') {
-            // space_bar icon
+            html += '<button data-value=" " is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><i class="md-icon alphaPickerButtonIcon">space_bar</i></button>';
-            html += '<button data-value=" " is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><i class="md-icon alphaPickerButtonIcon">&#xE256;</i></button>';
         } else {
             letters = ['#'];
             html += mapLetters(letters, vertical).join('');
@@ -80,8 +77,7 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
         html += mapLetters(letters, vertical).join('');
 
         if (options.mode === 'keyboard') {
-            // backspace icon
+            html += '<button data-value="backspace" is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><i class="md-icon alphaPickerButtonIcon">backspace</i></button>';
-            html += '<button data-value="backspace" is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><i class="md-icon alphaPickerButtonIcon">&#xE14A;</i></button>';
             html += '</div>';
 
             letters = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
@@ -230,7 +226,8 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
     AlphaPicker.prototype.value = function (value, applyValue) {
 
         var element = this.options.element;
-        var btn, selected;
+        var btn;
+        var selected;
 
         if (value !== undefined) {
             if (value != null) {

src/components/apphost.js

@@ -313,7 +313,7 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
     var deviceId;
     var deviceName;
     var appName = "Jellyfin Web";
-    var appVersion = "10.4.0";
+    var appVersion = "10.5.0";
     var visibilityChange;
     var visibilityState;
 

src/components/autoFocuser.js

@@ -0,0 +1,101 @@
+define(["focusManager", "layoutManager"], function (focusManager, layoutManager) {
+    "use strict";
+
+    /**
+     * Previously selected element.
+     */
+    var activeElement;
+
+    /**
+     * Returns true if AutoFocuser is enabled.
+     */
+    function isEnabled() {
+        return layoutManager.tv;
+    }
+
+    /**
+     * Start AutoFocuser
+     */
+    function enable() {
+        if (!isEnabled()) {
+            return;
+        }
+
+        window.addEventListener("focusin", function (e) {
+            activeElement = e.target;
+        });
+
+        console.log("AutoFocuser enabled");
+    }
+
+    /**
+     * Create an array from some source.
+     */
+    var arrayFrom = Array.prototype.from || function (src) {
+        return Array.prototype.slice.call(src);
+    }
+
+    /**
+     * Set focus on a suitable element, taking into account the previously selected.
+     */
+    function autoFocus(container) {
+        if (!isEnabled()) {
+            return;
+        }
+
+        container = container || document.body;
+
+        var candidates = [];
+
+        if (activeElement) {
+            // These elements are recreated
+            if (activeElement.classList.contains("btnPreviousPage")) {
+                candidates.push(container.querySelector(".btnPreviousPage"));
+                candidates.push(container.querySelector(".btnNextPage"));
+            } else if (activeElement.classList.contains("btnNextPage")) {
+                candidates.push(container.querySelector(".btnNextPage"));
+                candidates.push(container.querySelector(".btnPreviousPage"));
+            } else if (activeElement.classList.contains("btnSelectView")) {
+                candidates.push(container.querySelector(".btnSelectView"));
+            }
+
+            candidates.push(activeElement);
+        }
+
+        candidates = candidates.concat(arrayFrom(container.querySelectorAll(".btnResume")));
+        candidates = candidates.concat(arrayFrom(container.querySelectorAll(".btnPlay")));
+
+        var focusedElement;
+
+        candidates.every(function (element) {
+            if (focusManager.isCurrentlyFocusable(element)) {
+                focusManager.focus(element);
+                focusedElement = element;
+                return false;
+            }
+
+            return true;
+        });
+
+        if (!focusedElement) {
+            // FIXME: Multiple itemsContainers
+            var itemsContainer = container.querySelector(".itemsContainer");
+
+            if (itemsContainer) {
+                focusedElement = focusManager.autoFocus(itemsContainer);
+            }
+        }
+
+        if (!focusedElement) {
+            focusedElement = focusManager.autoFocus(container);
+        }
+
+        return focusedElement;
+    }
+
+    return {
+        isEnabled: isEnabled,
+        enable: enable,
+        autoFocus: autoFocus
+    };
+});

src/components/backdrop/backdrop.js

@@ -1,4 +1,4 @@
-define(['browser', 'connectionManager', 'playbackManager', 'dom', 'css!./style'], function (browser, connectionManager, playbackManager, dom) {
+define(['browser', 'connectionManager', 'playbackManager', 'dom', 'css!./backdrop'], function (browser, connectionManager, playbackManager, dom) {
     'use strict';
 
     function enableAnimation(elem) {

src/components/backdrop/package.json

@@ -1,3 +0,0 @@
-{
-    "main": "backdrop.js"
-}

src/components/cardbuilder/card.css

@@ -26,24 +26,12 @@ button {
     font-weight: inherit !important;
 }
 
-.card-nofocustransform {
+.card:not(.show-animation) {
     contain: layout style paint;
 }
 
 .itemsContainer {
     display: flex;
-    margin-left: -0.6em;
-    margin-right: -0.6em;
-}
-
-/* TODO replace this with a proper fix */
-/* doesnt work on mobile devices */
-/* negative margin fixes annoying misalignment with cards and title */
-@media all and (max-width:50em) {
-    .itemsContainer {
-        margin-left: 0;
-        margin-right: 0;
-    }
 }
 
 .vertical-list {
@@ -98,20 +86,21 @@ button {
     contain: layout style;
 }
 
-.cardBox-withfocuscontent-large {
+.card.show-focus:not(.show-animation) .cardBox {
     margin: .4em;
 }
 
-.card-focuscontent-large {
+.card.show-focus:not(.show-animation) .cardBox.visualCardBox,
+.card.show-focus:not(.show-animation) .cardBox:not(.visualCardBox) .cardScalable {
     border: .5em solid transparent;
 }
 
-.cardBox-focustransform {
+.card.show-animation .cardBox {
     will-change: transform;
     transition: transform 200ms ease-out;
 }
 
-.card:focus > .cardBox-focustransform {
+.card.show-animation:focus > .cardBox {
     transform: scale(1.18, 1.18);
 }
 
@@ -156,7 +145,7 @@ button {
 }
 
 .cardImageContainer {
-    background-size: contain;
+    background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
     display: -webkit-flex;
@@ -363,9 +352,6 @@ button {
     vertical-align: middle;
     font-family: inherit;
     font-size: inherit;
-    /*display: flex;
-    align-items: center;
-    justify-content: center;*/
 }
 
 .textActionButton:hover {

src/components/cardbuilder/cardBuilder.js

@@ -3,7 +3,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
         'use strict';
 
         var devicePixelRatio = window.devicePixelRatio || 1;
-        var enableFocusTransfrom = !browser.slow && !browser.edge;
+        var enableFocusTransform = !browser.slow && !browser.edge;
 
         function getCardsHtml(items, options) {
             if (arguments.length === 1) {
@@ -321,7 +321,8 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
             var apiClient;
             var lastServerId;
 
-            var i, length;
+            var i;
+            var length;
 
             for (i = 0, length = items.length; i < length; i++) {
 
@@ -339,19 +340,14 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                     if (options.indexBy === 'PremiereDate') {
                         if (item.PremiereDate) {
                             try {
-
                                 newIndexValue = datetime.toLocaleDateString(datetime.parseISO8601Date(item.PremiereDate), { weekday: 'long', month: 'long', day: 'numeric' });
-
                             } catch (err) {
+                                console.log('error parsing timestamp for premiere date');
                             }
                         }
-                    }
+                    } else if (options.indexBy === 'ProductionYear') {
-
-                    else if (options.indexBy === 'ProductionYear') {
                         newIndexValue = item.ProductionYear;
-                    }
+                    } else if (options.indexBy === 'CommunityRating') {
-
-                    else if (options.indexBy === 'CommunityRating') {
                         newIndexValue = item.CommunityRating ? (Math.floor(item.CommunityRating) + (item.CommunityRating % 1 >= 0.5 ? 0.5 : 0)) + '+' : null;
                     }
 
@@ -571,22 +567,19 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                         coverImage = (Math.abs(primaryImageAspectRatio - uiAspect) / uiAspect) <= 0.2;
                     }
                 }
-            }
+            } else if (item.ParentPrimaryImageTag) {
-            else if (item.ParentPrimaryImageTag) {
 
                 imgUrl = apiClient.getScaledImageUrl(item.ParentPrimaryImageItemId, {
                     type: "Primary",
                     tag: item.ParentPrimaryImageTag
                 });
-            }
+            } else if (item.SeriesPrimaryImageTag) {
-            else if (item.SeriesPrimaryImageTag) {
 
                 imgUrl = apiClient.getScaledImageUrl(item.SeriesId, {
                     type: "Primary",
                     tag: item.SeriesPrimaryImageTag
                 });
-            }
+            } else if (item.AlbumId && item.AlbumPrimaryImageTag) {
-            else if (item.AlbumId && item.AlbumPrimaryImageTag) {
 
                 width = primaryImageAspectRatio ? Math.round(height * primaryImageAspectRatio) : null;
 
@@ -601,16 +594,14 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                         coverImage = (Math.abs(primaryImageAspectRatio - uiAspect) / uiAspect) <= 0.2;
                     }
                 }
-            }
+            } else if (item.Type === 'Season' && item.ImageTags && item.ImageTags.Thumb) {
-            else if (item.Type === 'Season' && item.ImageTags && item.ImageTags.Thumb) {
 
                 imgUrl = apiClient.getScaledImageUrl(item.Id, {
                     type: "Thumb",
                     tag: item.ImageTags.Thumb
                 });
 
-            }
+            } else if (item.BackdropImageTags && item.BackdropImageTags.length) {
-            else if (item.BackdropImageTags && item.BackdropImageTags.length) {
 
                 imgUrl = apiClient.getScaledImageUrl(item.Id, {
                     type: "Backdrop",
@@ -681,7 +672,8 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
             var html = '';
 
             var valid = 0;
-            var i, length;
+            var i;
+            var length;
 
             for (i = 0, length = lines.length; i < length; i++) {
 
@@ -745,8 +737,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                         date = datetime.parseISO8601Date(item.EndDate);
                         airTimeText += ' - ' + datetime.getDisplayTime(date);
                     }
-                }
+                } catch (e) {
-                catch (e) {
                     console.log("Error parsing date: " + item.StartDate);
                 }
             }
@@ -767,7 +758,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
             if (isOuterFooter && options.cardLayout && layoutManager.mobile) {
 
                 if (options.cardFooterAside !== 'none') {
-                    html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions cardText-secondary" data-action="menu"><i class="md-icon">&#xE5D3;</i></button>';
+                    html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions cardText-secondary" data-action="menu"><i class="md-icon">more_horiz</i></button>';
                 }
             }
 
@@ -794,8 +785,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                         } else {
                             lines.push(item.SeriesName);
                         }
-                    }
+                    } else {
-                    else {
 
                         if (isUsingLiveTvNaming(item)) {
 
@@ -976,8 +966,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 if (options.showSeriesTimerChannel) {
                     if (item.RecordAnyChannel) {
                         lines.push(globalize.translate('AllChannels'));
-                    }
+                    } else {
-                    else {
                         lines.push(item.ChannelName || globalize.translate('OneChannel'));
                     }
                 }
@@ -985,8 +974,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 if (options.showPersonRoleOrType) {
                     if (item.Role) {
                         lines.push('as ' + item.Role);
-                    }
+                    } else if (item.Type) {
-                    else if (item.Type) {
                         lines.push(globalize.translate('' + item.Type));
                     } else {
                         lines.push('');
@@ -1060,8 +1048,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 counts.push(childText);
 
-            }
+            } else if (item.Type === 'Genre' || item.Type === 'Studio') {
-            else if (item.Type === 'Genre' || item.Type === 'Studio') {
 
                 if (item.MovieCount) {
 
@@ -1140,8 +1127,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
             if (item.IsPremiere) {
                 html += '<div class="premiereTvProgram programAttributeIndicator">' + globalize.translate('Premiere') + '</div>';
-            }
+            } else if (item.IsSeries && !item.IsRepeat) {
-            else if (item.IsSeries && !item.IsRepeat) {
                 html += '<div class="newTvProgram programAttributeIndicator">' + globalize.translate('AttributeNew') + '</div>';
             }
             //else if (item.IsRepeat) {
@@ -1176,8 +1162,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
             if (action === 'play' && item.IsFolder) {
                 // If this hard-coding is ever removed make sure to test nested photo albums
                 action = 'link';
-            }
+            } else if (item.MediaType === 'Photo') {
-            else if (item.MediaType === 'Photo') {
                 action = 'play';
             }
 
@@ -1203,6 +1188,8 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 shape = shape || 'mixedSquare';
             }
 
+            // TODO move card creation code to Card component
+
             var className = 'card';
 
             if (shape) {
@@ -1221,8 +1208,12 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 className += ' card-hoverable';
             }
 
-            if (!enableFocusTransfrom || !layoutManager.tv) {
+            if (layoutManager.tv) {
-                className += ' card-nofocustransform';
+                className += ' show-focus';
+
+                if (enableFocusTransform) {
+                    className += ' show-animation';
+                }
             }
 
             var imgInfo = getCardImageUrl(item, apiClient, options, shape);
@@ -1250,23 +1241,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
             var cardBoxClass = options.cardLayout ? 'cardBox visualCardBox' : 'cardBox';
 
-            if (layoutManager.tv) {
-
-                if (enableFocusTransfrom) {
-                    cardBoxClass += ' cardBox-focustransform cardBox-withfocuscontent';
-                } else {
-                    cardBoxClass += ' cardBox-withfocuscontent-large';
-                }
-
-                if (options.cardLayout) {
-                    cardBoxClass += ' card-focuscontent';
-
-                    if (!enableFocusTransfrom) {
-                        cardBoxClass += ' card-focuscontent-large';
-                    }
-                }
-            }
-
             var footerCssClass;
             var progressHtml = indicators.getProgressBarHtml(item);
 
@@ -1283,8 +1257,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                     height: logoHeight,
                     tag: item.ChannelPrimaryImageTag
                 });
-            }
+            } else if (options.showLogo && item.ParentLogoImageTag) {
-            else if (options.showLogo && item.ParentLogoImageTag) {
                 logoUrl = apiClient.getScaledImageUrl(item.ParentLogoItemId, {
                     type: "Logo",
                     height: logoHeight,
@@ -1299,8 +1272,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 footerCssClass = progressHtml ? 'innerCardFooter fullInnerCardFooter' : 'innerCardFooter';
                 innerCardFooter += getCardFooterText(item, apiClient, options, showTitle, forceName, overlayText, imgUrl, footerCssClass, progressHtml, logoUrl, false);
                 footerOverlayed = true;
-            }
+            } else if (progressHtml) {
-            else if (progressHtml) {
                 innerCardFooter += '<div class="innerCardFooter fullInnerCardFooter innerCardFooterClear">';
                 innerCardFooter += progressHtml;
                 innerCardFooter += '</div>';
@@ -1343,15 +1315,15 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 var btnCssClass = 'cardOverlayButton cardOverlayButton-br itemAction';
 
                 if (options.centerPlayButton) {
-                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayButton-centered" data-action="play"><i class="md-icon cardOverlayButtonIcon">&#xE037;</i></button>';
+                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayButton-centered" data-action="play"><i class="md-icon cardOverlayButtonIcon">play_arrow</i></button>';
                 }
 
                 if (overlayPlayButton && !item.IsPlaceHolder && (item.LocationType !== 'Virtual' || !item.MediaType || item.Type === 'Program') && item.Type !== 'Person') {
-                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="play"><i class="md-icon cardOverlayButtonIcon">&#xE037;</i></button>';
+                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="play"><i class="md-icon cardOverlayButtonIcon">play_arrow</i></button>';
                 }
 
                 if (options.overlayMoreButton) {
-                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="md-icon cardOverlayButtonIcon">&#xE5D3;</i></button>';
+                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="md-icon cardOverlayButtonIcon">more_horiz</i></button>';
                 }
             }
 
@@ -1385,15 +1357,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
             var cardScalableClass = 'cardScalable';
 
-            if (layoutManager.tv && !options.cardLayout) {
-
-                cardScalableClass += ' card-focuscontent';
-
-                if (!enableFocusTransfrom) {
-                    cardScalableClass += ' card-focuscontent-large';
-                }
-            }
-
             cardImageContainerOpen = '<div class="' + cardBoxClass + '"><div class="' + cardScalableClass + '"><div class="cardPadder-' + shape + '"></div>' + cardImageContainerOpen;
             cardBoxClose = '</div>';
             cardScalableClose = '</div>';
@@ -1414,8 +1377,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 indicatorsHtml += indicators.getChildCountIndicatorHtml(item, {
                     minCount: 1
                 });
-            }
+            } else {
-            else {
                 indicatorsHtml += indicators.getPlayedIndicatorHtml(item);
             }
 
@@ -1494,7 +1456,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
             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 cardOverlayButtonIcon-hover">&#xE037;</i></button>';
+                html += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayFab-primary" data-action="resume"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">play_arrow</i></button>';
             }
 
             html += '<div class="cardOverlayButton-br">';
@@ -1503,7 +1465,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
             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>';
+                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">check</i></button>';
             }
 
             if (itemHelper.canRate(item)) {
@@ -1511,10 +1473,10 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 var likes = userData.Likes == null ? '' : userData.Likes;
 
                 require(['emby-ratingbutton']);
-                html += '<button is="emby-ratingbutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">&#xE87D;</i></button>';
+                html += '<button is="emby-ratingbutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">favorite</i></button>';
             }
 
-            html += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">&#xE5D3;</i></button>';
+            html += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">more_horiz</i></button>';
 
             html += '</div>';
             html += '</div>';
@@ -1527,10 +1489,10 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 return '<i class="cardImageIcon md-icon">' + imageHelper.getLibraryIcon(item.CollectionType) + '</i>'
             }
             if (item.Type === 'MusicAlbum') {
-                return '<i class="cardImageIcon md-icon">&#xE019;</i>';
+                return '<i class="cardImageIcon md-icon">album</i>';
             }
             if (item.Type === 'MusicArtist' || item.Type === 'Person') {
-                return '<i class="cardImageIcon md-icon">&#xE7FD;</i>';
+                return '<i class="cardImageIcon md-icon">person</i>';
             }
             if (options.defaultCardImageIcon) {
                 return '<i class="cardImageIcon md-icon">' + options.defaultCardImageIcon + '</i>';
@@ -1622,7 +1584,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                     indicatorsElem = ensureIndicators(card, indicatorsElem);
                     indicatorsElem.appendChild(playedIndicator);
                 }
-                playedIndicator.innerHTML = '<i class="md-icon indicatorIcon">&#xE5CA;</i>';
+                playedIndicator.innerHTML = '<i class="md-icon indicatorIcon">check</i>';
             } else {
 
                 playedIndicator = card.querySelector('.playedIndicator');
@@ -1676,8 +1638,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 }
 
                 itemProgressBar.innerHTML = progressHtml;
-            }
+            } else {
-            else {
 
                 itemProgressBar = card.querySelector('.itemProgressBar');
                 if (itemProgressBar) {
@@ -1704,7 +1665,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 var icon = cell.querySelector('.timerIndicator');
                 if (!icon) {
                     var indicatorsElem = ensureIndicators(cell);
-                    indicatorsElem.insertAdjacentHTML('beforeend', '<i class="md-icon timerIndicator indicatorIcon">&#xE061;</i>');
+                    indicatorsElem.insertAdjacentHTML('beforeend', '<i class="md-icon timerIndicator indicatorIcon">fiber_manual_record</i>');
                 }
                 cell.setAttribute('data-timerid', newTimerId);
             }

src/components/cardbuilder/chaptercardbuilder.js

@@ -1,12 +1,20 @@
 define(['datetime', 'imageLoader', 'connectionManager', 'layoutManager', 'browser'], function (datetime, imageLoader, connectionManager, layoutManager, browser) {
     'use strict';
 
+    var enableFocusTransform = !browser.slow && !browser.edge;
+
     function buildChapterCardsHtml(item, chapters, options) {
 
+        // TODO move card creation code to Card component
+
         var className = 'card itemAction chapterCard';
 
-        if (layoutManager.tv && (browser.animate || browser.edge)) {
+        if (layoutManager.tv) {
-            className += ' card-focusscale';
+            className += ' show-focus';
+
+            if (enableFocusTransform) {
+                className += ' show-animation';
+            }
         }
 
         var mediaStreams = ((item.MediaSources || [])[0] || {}).MediaStreams || [];
@@ -92,19 +100,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'layoutManager', 'browse
         var cardBoxCssClass = 'cardBox';
         var cardScalableClass = 'cardScalable';
 
-        if (layoutManager.tv) {
-            var enableFocusTransfrom = !browser.slow && !browser.edge;
-
-            cardScalableClass += ' card-focuscontent';
-
-            if (enableFocusTransfrom) {
-                cardBoxCssClass += ' cardBox-focustransform cardBox-withfocuscontent';
-            } else {
-                cardBoxCssClass += ' cardBox-withfocuscontent-large';
-                cardScalableClass += ' card-focuscontent-large';
-            }
-        }
-
         var html = '<button type="button" class="' + className + '"' + dataAttributes + '><div class="' + cardBoxCssClass + '"><div class="' + cardScalableClass + '"><div class="cardPadder-' + shape + '"></div>' + cardImageContainer + '</div><div class="innerCardFooter">' + nameHtml + '</div></div></div></button>';
 
         return html;

src/components/cardbuilder/peoplecardbuilder.js

@@ -10,7 +10,7 @@ define(['cardBuilder'], function (cardBuilder) {
             cardFooterAside: 'none',
             showPersonRoleOrType: true,
             cardCssClass: 'personCard',
-            defaultCardImageIcon: ''
+            defaultCardImageIcon: 'person'
         });
         cardBuilder.buildCards(items, options);
     }

src/components/channelmapper/channelmapper.js

@@ -127,7 +127,7 @@ define(["dialogHelper", "loading", "connectionManager", "globalize", "actionshee
             var html = "";
             var title = globalize.translate("MapChannels");
             html += '<div class="formDialogHeader">';
-            html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>';
+            html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
             html += '<h3 class="formDialogHeaderTitle">';
             html += title;
             html += "</h3>";

src/components/chromecast/chromecastplayer.js

@@ -479,8 +479,7 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
                     TotalRecordCount: 1
                 };
             });
-        }
+        } else {
-        else {
 
             query.Limit = query.Limit || 100;
             query.ExcludeLocationTypes = "Virtual";
@@ -752,8 +751,7 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
 
     ChromecastPlayer.prototype.volumeDown = function () {
         var vol = this._castPlayer.session.receiver.volume.level;
-        if (vol == null)
+        if (vol == null) {
-        {
             vol = 0.5;
         }
         vol -= 0.05;
@@ -776,8 +774,7 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
 
     ChromecastPlayer.prototype.volumeUp = function () {
         var vol = this._castPlayer.session.receiver.volume.level;
-        if (vol == null)
+        if (vol == null) {
-        {
             vol = 0.5;
         }
         vol += 0.05;

src/components/collectioneditor/collectioneditor.js

@@ -243,13 +243,13 @@ define(['dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectionManage
         var title = items.length ? globalize.translate('HeaderAddToCollection') : globalize.translate('NewCollection');
 
         html += '<div class="formDialogHeader">';
-        html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>';
+        html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
         html += '<h3 class="formDialogHeaderTitle">';
         html += title;
         html += '</h3>';
 
         if (appHost.supports('externallinks')) {
-            html += '<a is="emby-linkbutton" class="button-link btnHelp flex align-items-center" href="https://web.archive.org/web/20181216120305/https://github.com/MediaBrowser/Wiki/wiki/Collections" target="_blank" style="margin-left:auto;margin-right:.5em;padding:.25em;" title="' + globalize.translate('Help') + '"><i class="md-icon">&#xE88E;</i><span style="margin-left:.25em;">' + globalize.translate('Help') + '</span></a>';
+            html += '<a is="emby-linkbutton" class="button-link btnHelp flex align-items-center" href="https://web.archive.org/web/20181216120305/https://github.com/MediaBrowser/Wiki/wiki/Collections" target="_blank" style="margin-left:auto;margin-right:.5em;padding:.25em;" title="' + globalize.translate('Help') + '"><i class="md-icon">info</i><span style="margin-left:.25em;">' + globalize.translate('Help') + '</span></a>';
         }
 
         html += '</div>';

src/components/dialog/dialog.js

@@ -51,7 +51,8 @@ define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 're
             dlg.querySelector('.dialogContentInner').classList.add('hide');
         }
 
-        var i, length;
+        var i;
+        var length;
         var html = '';
         var hasDescriptions = false;
 

src/components/dialog/package.json

@@ -1,3 +0,0 @@
-{
-    "main": "dialog.js"
-}

src/components/dialogHelper/dialogHelper.js

@@ -18,8 +18,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
         if (layoutManager.tv) {
             if (dlg.classList.contains('scrollX')) {
                 centerFocus(dlg, true, false);
-            }
+            } else if (dlg.classList.contains('smoothScrollY')) {
-            else if (dlg.classList.contains('smoothScrollY')) {
                 centerFocus(dlg, false, false);
             }
         }
@@ -433,8 +432,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
             if (layoutManager.tv) {
                 centerFocus(dlg, true, true);
             }
-        }
+        } else if (options.scrollY !== false) {
-        else if (options.scrollY !== false) {
             dlg.classList.add('smoothScrollY');
 
             if (layoutManager.tv) {

src/components/dialogHelper/package.json

@@ -1,3 +0,0 @@
-{
-    "main": "dialogHelper.js"
-}

src/components/directorybrowser/directorybrowser.js

@@ -190,7 +190,7 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
                     content.querySelector("#txtDirectoryPickerPath").value = path;
                 } else {
                     refreshDirectoryBrowser(content, path, fileOptions, true)
-                 };
+                }
             }
         });
 
@@ -223,9 +223,9 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
 
     function getDefaultPath(options) {
         if (options.path) {
-            Promise.resolve(options.path);
+            return Promise.resolve(options.path);
         } else {
-            ApiClient.getJSON(ApiClient.getUrl("Environment/DefaultDirectoryBrowser")).then(
+            return ApiClient.getJSON(ApiClient.getUrl("Environment/DefaultDirectoryBrowser")).then(
                 function(result) {
                     return result.Path || "";
                 }, function() {
@@ -265,7 +265,7 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
 
                     var html = "";
                     html += '<div class="formDialogHeader">';
-                    html += '<button is="paper-icon-button-light" class="btnCloseDialog autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>';
+                    html += '<button is="paper-icon-button-light" class="btnCloseDialog autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
                     html += '<h3 class="formDialogHeaderTitle">';
                     html += options.header || Globalize.translate("HeaderSelectPath");
                     html += "</h3>";

src/components/dom.js

@@ -68,7 +68,9 @@ define([], function () {
             }
         });
         window.addEventListener("test", null, opts);
-    } catch (e) { }
+    } catch (e) {
+        console.log('error checking capture support');
+    }
 
     function addEventListenerWithOptions(target, type, handler, options) {
         var optionsOrCapture = options;
@@ -116,8 +118,8 @@ define([], function () {
             return _animationEvent;
         }
 
-        var t,
+        var t;
-            el = document.createElement("div");
+        var el = document.createElement("div");
         var animations = {
             "animation": "animationend",
             "OAnimation": "oAnimationEnd",
@@ -146,8 +148,8 @@ define([], function () {
             return _transitionEvent;
         }
 
-        var t,
+        var t;
-            el = document.createElement("div");
+        var el = document.createElement("div");
         var transitions = {
             "transition": "transitionend",
             "OTransition": "oTransitionEnd",

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

@@ -54,7 +54,7 @@ define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (b
             outlineClass += ' ' + customClass;
         }
 
-        var checkedIcon = this.getAttribute('data-checkedicon') || '';
+        var checkedIcon = this.getAttribute('data-checkedicon') || 'check';
         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>';

src/components/emby-input/emby-input.js

@@ -28,11 +28,12 @@ define(['layoutManager', 'browser', 'dom', 'css!./emby-input', 'registerElement'
     }
 
     EmbyInputPrototype.createdCallback = function () {
-
         if (!this.id) {
             this.id = 'embyinput' + inputId;
             inputId++;
-        } if (this.classList.contains('emby-input')) {
+        }
+
+        if (this.classList.contains('emby-input')) {
             return;
         }
 

src/components/emby-input/package.json

@@ -1,3 +0,0 @@
-{
-    "main": "emby-input.js"
-}

src/components/emby-progressring/emby-progressring.js

@@ -47,8 +47,7 @@ define(['require', 'css!./emby-progressring', 'registerElement'], function (requ
             this.querySelector('.animate-25-50-b').style.transform = 'rotate(-90deg)';
             this.querySelector('.animate-50-75-b').style.transform = 'rotate(-90deg)';
             this.querySelector('.animate-75-100-b').style.transform = 'rotate(-90deg)';
-        }
+        } else if (progress >= 25 && progress < 50) {
-        else if (progress >= 25 && progress < 50) {
 
             angle = -90 + ((progress - 25) / 100) * 360;
 
@@ -57,8 +56,7 @@ define(['require', 'css!./emby-progressring', 'registerElement'], function (requ
 
             this.querySelector('.animate-50-75-b').style.transform = 'rotate(-90deg)';
             this.querySelector('.animate-75-100-b').style.transform = 'rotate(-90deg)';
-        }
+        } else if (progress >= 50 && progress < 75) {
-        else if (progress >= 50 && progress < 75) {
             angle = -90 + ((progress - 50) / 100) * 360;
 
             this.querySelector('.animate-0-25-b').style.transform = 'none';
@@ -66,8 +64,7 @@ define(['require', 'css!./emby-progressring', 'registerElement'], function (requ
             this.querySelector('.animate-50-75-b').style.transform = 'rotate(' + angle + 'deg)';
 
             this.querySelector('.animate-75-100-b').style.transform = 'rotate(-90deg)';
-        }
+        } else if (progress >= 75 && progress <= 100) {
-        else if (progress >= 75 && progress <= 100) {
             angle = -90 + ((progress - 75) / 100) * 360;
 
             this.querySelector('.animate-0-25-b').style.transform = 'none';
@@ -85,7 +82,6 @@ define(['require', 'css!./emby-progressring', 'registerElement'], function (requ
 
     EmbyProgressRing.detachedCallback = function () {
 
-
         var observer = this.observer;
 
         if (observer) {

src/components/emby-radio/package.json

@@ -1,3 +0,0 @@
-{
-    "main": "emby-radio.js"
-}

src/components/emby-scrollbuttons/emby-scrollbuttons.js

@@ -7,7 +7,7 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
 
     function getScrollButtonHtml(direction) {
         var html = '';
-        var icon = direction === 'left' ? '' : '';
+        var icon = direction === 'left' ? 'chevron_left' : 'chevron_right';
 
         html += '<button type="button" is="paper-icon-button-light" data-ripple="false" data-direction="' + direction + '" class="emby-scrollbuttons-button">';
         html += '<i class="md-icon">' + icon + '</i>';

src/components/emby-scroller/emby-scroller.css

@@ -7,6 +7,17 @@
     margin-right: 3.3%;
 }
 
+/* align first card in scroller to heading */
+.emby-scroller .card:first-of-type > .cardBox {
+    margin-left: 0;
+}
+
+/* align heading for normal item containers */
+/* still not ideal solution but better than the last method */
+.verticalSection > .itemsContainer .cardBox {
+    margin-left: 0;
+}
+
 @media all and (max-width:50em) {
     .emby-scroller {
         padding-left: 3.3%;

src/components/emby-select/emby-select.js

@@ -144,7 +144,7 @@ define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'registe
         this.parentNode.insertBefore(label, this);
 
         if (this.classList.contains('emby-select-withcolor')) {
-            this.parentNode.insertAdjacentHTML('beforeend', '<div class="selectArrowContainer"><div style="visibility:hidden;">0</div><i class="selectArrow md-icon">&#xE313;</i></div>');
+            this.parentNode.insertAdjacentHTML('beforeend', '<div class="selectArrowContainer"><div style="visibility:hidden;">0</div><i class="selectArrow md-icon">keyboard_arrow_down</i></div>');
         }
     };
 

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

@@ -87,6 +87,10 @@ _:-ms-input-placeholder {
     transform: scale(1.6);
 }
 
+.mdl-slider.show-focus:focus::-webkit-slider-thumb {
+    transform: scale(1.6);
+}
+
 .slider-no-webkit-thumb::-webkit-slider-thumb {
     opacity: 0 !important;
 }

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

@@ -19,6 +19,11 @@ define(['browser', 'dom', 'layoutManager', 'css!./emby-slider', 'registerElement
 
     function updateValues() {
 
+        // Do not update values when dragging with keyboard to keep current progress for reference
+        if (!!this.keyboardDragging) {
+            return;
+        }
+
         var range = this;
         var value = range.value;
 
@@ -82,6 +87,9 @@ define(['browser', 'dom', 'layoutManager', 'css!./emby-slider', 'registerElement
         if (!layoutManager.mobile) {
             this.classList.add('mdl-slider-hoverthumb');
         }
+        if (layoutManager.tv) {
+            this.classList.add('show-focus');
+        }
 
         var containerElement = this.parentNode;
         containerElement.classList.add('mdl-slider-container');
@@ -177,6 +185,108 @@ define(['browser', 'dom', 'layoutManager', 'css!./emby-slider', 'registerElement
         }
     };
 
+    /**
+     * Keyboard dragging timeout.
+     * After this delay "change" event will be fired.
+     */
+    var KeyboardDraggingTimeout = 1000;
+
+    /**
+     * Keyboard dragging timer.
+     */
+    var keyboardDraggingTimer;
+
+    /**
+     * Start keyboard dragging.
+     *
+     * @param {Object} elem slider itself
+     */
+    function startKeyboardDragging(elem) {
+        elem.keyboardDragging = true;
+
+        clearTimeout(keyboardDraggingTimer);
+        keyboardDraggingTimer = setTimeout(function () {
+            finishKeyboardDragging(elem);
+        }, KeyboardDraggingTimeout);
+    }
+
+    /**
+     * Finish keyboard dragging.
+     *
+     * @param {Object} elem slider itself
+     */
+    function finishKeyboardDragging(elem) {
+        clearTimeout(keyboardDraggingTimer);
+        keyboardDraggingTimer = undefined;
+
+        elem.keyboardDragging = false;
+
+        var event = new Event('change', {
+            bubbles: true,
+            cancelable: false
+        });
+        elem.dispatchEvent(event);
+    }
+
+    /**
+     * Do step by delta.
+     *
+     * @param {Object} elem slider itself
+     * @param {number} delta step amount
+     */
+    function stepKeyboard(elem, delta) {
+        startKeyboardDragging(elem);
+
+        elem.value = Math.max(elem.min, Math.min(elem.max, parseFloat(elem.value) + delta));
+
+        var event = new Event('input', {
+            bubbles: true,
+            cancelable: false
+        });
+        elem.dispatchEvent(event);
+    }
+
+    /**
+     * Handle KeyDown event
+     */
+    function onKeyDown(e) {
+        switch (e.key) {
+            case 'ArrowLeft':
+            case 'Left':
+                stepKeyboard(this, -this.keyboardStepDown || -1);
+                e.preventDefault();
+                e.stopPropagation();
+                break;
+            case 'ArrowRight':
+            case 'Right':
+                stepKeyboard(this, this.keyboardStepUp || 1);
+                e.preventDefault();
+                e.stopPropagation();
+                break;
+        }
+    }
+
+    /**
+     * Enable keyboard dragging.
+     */
+    EmbySliderPrototype.enableKeyboardDragging = function () {
+        if (!this.keyboardDraggingEnabled) {
+            this.addEventListener('keydown', onKeyDown);
+            this.keyboardDraggingEnabled = true;
+        }
+    }
+
+    /**
+     * Set steps for keyboard input.
+     *
+     * @param {number} stepDown step to reduce
+     * @param {number} stepUp step to increase
+     */
+    EmbySliderPrototype.setKeyboardSteps = function (stepDown, stepUp) {
+        this.keyboardStepDown = stepDown || stepUp || 1;
+        this.keyboardStepUp = stepUp || stepDown || 1;
+    }
+
     function setRange(elem, startPercent, endPercent) {
 
         var style = elem.style;

src/components/emby-tabs/package.json

@@ -1,3 +0,0 @@
-{
-    "main": "emby-tabs.js"
-}

src/components/emby-textarea/emby-textarea.js

@@ -14,9 +14,9 @@ define(['layoutManager', 'browser', 'css!./emby-textarea', 'registerElement', 'e
          * @returns {number}
          */
         self.getOffset = function (textarea) {
-            var style = window.getComputedStyle(textarea, null),
+            var style = window.getComputedStyle(textarea, null);
-                props = ['paddingTop', 'paddingBottom'],
+            var props = ['paddingTop', 'paddingBottom'];
-                offset = 0;
+            var offset = 0;
 
             for (var i = 0; i < props.length; i++) {
                 offset += parseInt(style[props[i]]);
@@ -43,13 +43,13 @@ define(['layoutManager', 'browser', 'css!./emby-textarea', 'registerElement', 'e
                 textarea.rows = 3;
                 return;
             }
-            var newHeight = 0, hasGrown = false;
+            var newHeight = 0;
+            var hasGrown = false;
 
             if ((textarea.scrollHeight - offset) > self.maxAllowedHeight) {
                 textarea.style.overflowY = 'scroll';
                 newHeight = self.maxAllowedHeight;
-            }
+            } else {
-            else {
                 textarea.style.overflowY = 'hidden';
                 textarea.style.height = 'auto';
                 newHeight = textarea.scrollHeight/* - offset*/;

src/components/favoriteitems.js

@@ -136,7 +136,7 @@ define(["loading", "libraryBrowser", "cardBuilder", "dom", "apphost", "imageLoad
                     html += '<h2 class="sectionTitle sectionTitle-cards">';
                     html += globalize.translate(section.name);
                     html += "</h2>";
-                    html += '<i class="md-icon">&#xE5CC;</i>';
+                    html += '<i class="md-icon">chevron_right</i>';
                     html += "</a>";
                 } else {
                     html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate(section.name) + "</h2>";

src/components/filtermenu/filtermenu.js

@@ -94,7 +94,8 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
         context.querySelector('form').addEventListener('submit', onSubmit);
 
         var elems = context.querySelectorAll('.simpleFilter');
-        var i, length;
+        var i;
+        var length;
 
         for (i = 0, length = elems.length; i < length; i++) {
 
@@ -137,7 +138,8 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
     function saveValues(context, settings, settingsKey) {
 
         var elems = context.querySelectorAll('.simpleFilter');
-        var i, length;
+        var i;
+        var length;
         for (i = 0, length = elems.length; i < length; i++) {
 
             if (elems[i].tagName === 'INPUT') {
@@ -277,7 +279,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
                 var html = '';
 
                 html += '<div class="formDialogHeader">';
-                html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>';
+                html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
                 html += '<h3 class="formDialogHeaderTitle">${Filters}</h3>';
 
                 html += '</div>';

src/components/focusManager.js

@@ -1,4 +1,4 @@
-define(['dom'], function (dom) {
+define(['dom', 'scrollManager'], function (dom, scrollManager) {
     'use strict';
 
     var scopes = [];
@@ -40,7 +40,7 @@ define(['dom'], function (dom) {
 
         try {
             element.focus({
-                preventScroll: false
+                preventScroll: scrollManager.isEnabled()
             });
         } catch (err) {
             console.log('Error in focusManager.autoFocus: ' + err);
@@ -181,21 +181,18 @@ define(['dom'], function (dom) {
             if (classList.contains('focuscontainer-left')) {
                 return true;
             }
-        }
+        } else if (direction === 1) {
-        else if (direction === 1) {
             if (classList.contains('focuscontainer-x')) {
                 return true;
             }
             if (classList.contains('focuscontainer-right')) {
                 return true;
             }
-        }
+        } else if (direction === 2) {
-        else if (direction === 2) {
             if (classList.contains('focuscontainer-y')) {
                 return true;
             }
-        }
+        } else if (direction === 3) {
-        else if (direction === 3) {
             if (classList.contains('focuscontainer-y')) {
                 return true;
             }
@@ -275,14 +272,14 @@ define(['dom'], function (dom) {
         var rect = getOffset(activeElement);
 
         // Get elements and work out x/y points
-        var cache = [],
+        var cache = [];
-            point1x = parseFloat(rect.left) || 0,
+        var point1x = parseFloat(rect.left) || 0;
-            point1y = parseFloat(rect.top) || 0,
+        var point1y = parseFloat(rect.top) || 0;
-            point2x = parseFloat(point1x + rect.width - 1) || point1x,
+        var point2x = parseFloat(point1x + rect.width - 1) || point1x;
-            point2y = parseFloat(point1y + rect.height - 1) || point1y,
+        var point2y = parseFloat(point1y + rect.height - 1) || point1y;
         // Shortcuts to help with compression
-            min = Math.min,
+        var min = Math.min;
-            max = Math.max;
+        var max = Math.max;
 
         var sourceMidX = rect.left + (rect.width / 2);
         var sourceMidY = rect.top + (rect.height / 2);
@@ -357,10 +354,10 @@ define(['dom'], function (dom) {
                     break;
             }
 
-            var x = elementRect.left,
+            var x = elementRect.left;
-                y = elementRect.top,
+            var y = elementRect.top;
-                x2 = x + elementRect.width - 1,
+            var x2 = x + elementRect.width - 1;
-                y2 = y + elementRect.height - 1;
+            var y2 = y + elementRect.height - 1;
 
             var intersectX = intersects(point1x, point2x, x, x2);
             var intersectY = intersects(point1y, point2y, y, y2);
@@ -470,7 +467,9 @@ define(['dom'], function (dom) {
 
         var elems = container.querySelectorAll(focusableSelector);
         var list = [];
-        var i, length, elem;
+        var i;
+        var length;
+        var elem;
 
         for (i = 0, length = elems.length; i < length; i++) {
 
@@ -513,32 +512,24 @@ define(['dom'], function (dom) {
         focusableParent: focusableParent,
         getFocusableElements: getFocusableElements,
         moveLeft: function (sourceElement, options) {
-
             var container = options ? options.container : null;
             var focusableElements = options ? options.focusableElements : null;
             nav(sourceElement, 0, container, focusableElements);
-
         },
         moveRight: function (sourceElement, options) {
-
             var container = options ? options.container : null;
             var focusableElements = options ? options.focusableElements : null;
             nav(sourceElement, 1, container, focusableElements);
-
         },
         moveUp: function (sourceElement, options) {
-
             var container = options ? options.container : null;
             var focusableElements = options ? options.focusableElements : null;
             nav(sourceElement, 2, container, focusableElements);
-
         },
         moveDown: function (sourceElement, options) {
-
             var container = options ? options.container : null;
             var focusableElements = options ? options.focusableElements : null;
             nav(sourceElement, 3, container, focusableElements);
-
         },
         sendText: sendText,
         isCurrentlyFocusable: isCurrentlyFocusable,

src/components/guide/guide-settings.js

@@ -39,7 +39,8 @@ define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectio
 
     function save(context) {
 
-        var i, length;
+        var i;
+        var length;
 
         var chkIndicators = context.querySelectorAll('.chkIndicator');
         for (i = 0, length = chkIndicators.length; i < length; i++) {
@@ -62,7 +63,8 @@ define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectio
 
     function load(context) {
 
-        var i, length;
+        var i;
+        var length;
 
         var chkIndicators = context.querySelectorAll('.chkIndicator');
         for (i = 0, length = chkIndicators.length; i < length; i++) {

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

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle">
         ${Settings}
     </h3>

src/components/guide/guide.js

@@ -392,27 +392,20 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
         }
 
         function parseDates(program) {
-
             if (!program.StartDateLocal) {
                 try {
-
                     program.StartDateLocal = datetime.parseISO8601Date(program.StartDate, { toLocal: true });
-
                 } catch (err) {
-
+                    console.log('error parsing timestamp for start date');
                 }
-
             }
 
             if (!program.EndDateLocal) {
                 try {
-
                     program.EndDateLocal = datetime.parseISO8601Date(program.EndDate, { toLocal: true });
-
                 } catch (err) {
-
+                    console.log('error parsing timestamp for end date');
                 }
-
             }
 
             return null;
@@ -423,30 +416,27 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
             var status;
 
             if (item.Type === 'SeriesTimer') {
-                return '<i class="md-icon programIcon seriesTimerIcon">&#xE062;</i>';
+                return '<i class="md-icon programIcon seriesTimerIcon">fiber_smart_record</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 programIcon seriesTimerIcon">&#xE062;</i>';
+                    return '<i class="md-icon programIcon seriesTimerIcon">fiber_smart_record</i>';
                 }
 
-                return '<i class="md-icon programIcon seriesTimerIcon seriesTimerIcon-inactive">&#xE062;</i>';
+                return '<i class="md-icon programIcon seriesTimerIcon seriesTimerIcon-inactive">fiber_smart_record</i>';
             }
 
-            return '<i class="md-icon programIcon timerIcon">&#xE061;</i>';
+            return '<i class="md-icon programIcon timerIcon">fiber_manual_record</i>';
         }
 
         function getChannelProgramsHtml(context, date, channel, programs, options, listInfo) {
@@ -529,11 +519,9 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
                 } else if (program.IsMovie) {
                     displayInnerContent = displayMovieContent;
                     accentCssClass = 'movie';
-                }
+                } else if (program.IsSeries) {
-                else if (program.IsSeries) {
                     displayInnerContent = displaySeriesContent;
-                }
+                } else {
-                else {
                     displayInnerContent = displayMovieContent && displayNewsContent && displaySportsContent && displayKidsContent && displaySeriesContent;
                 }
 
@@ -562,21 +550,18 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
 
                     html += '<div class="' + guideProgramNameClass + '">';
 
-                    html += '<div class="guide-programNameCaret hide"><i class="guideProgramNameCaretIcon md-icon">&#xE314;</i></div>';
+                    html += '<div class="guide-programNameCaret hide"><i class="guideProgramNameCaretIcon md-icon">keyboard_arrow_left</i></div>';
 
                     html += '<div class="guideProgramNameText">' + program.Name;
 
                     var indicatorHtml = null;
                     if (program.IsLive && options.showLiveIndicator) {
                         indicatorHtml = '<span class="liveTvProgram guideProgramIndicator">' + globalize.translate('Live') + '</span>';
-                    }
+                    } else if (program.IsPremiere && options.showPremiereIndicator) {
-                    else if (program.IsPremiere && options.showPremiereIndicator) {
                         indicatorHtml = '<span class="premiereTvProgram guideProgramIndicator">' + globalize.translate('Premiere') + '</span>';
-                    }
+                    } else if (program.IsSeries && !program.IsRepeat && options.showNewIndicator) {
-                    else if (program.IsSeries && !program.IsRepeat && options.showNewIndicator) {
                         indicatorHtml = '<span class="newTvProgram guideProgramIndicator">' + globalize.translate('AttributeNew') + '</span>';
-                    }
+                    } else if (program.IsSeries && program.IsRepeat && options.showRepeatIndicator) {
-                    else if (program.IsSeries && program.IsRepeat && options.showRepeatIndicator) {
                         indicatorHtml = '<span class="repeatTvProgram guideProgramIndicator">' + globalize.translate('Repeat') + '</span>';
                     }
                     html += indicatorHtml || '';
@@ -614,7 +599,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
             return html;
         }
 
-
         function renderChannelHeaders(context, channels, apiClient) {
 
             var html = '';
@@ -1079,17 +1063,13 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
 
                     scrollHelper.toStart(programGrid, programCell, true, true);
                 }
-            }
+            } else if (lastFocusDirection === 'right') {
-
-            else if (lastFocusDirection === 'right') {
 
                 if (programCell) {
 
                     scrollHelper.toCenter(programGrid, programCell, true, true);
                 }
-            }
+            } else if (lastFocusDirection === 'up' || lastFocusDirection === 'down') {
-
-            else if (lastFocusDirection === 'up' || lastFocusDirection === 'down') {
 
                 var verticalScroller = dom.parentWithClass(target, 'guideVerticalScroller');
                 if (verticalScroller) {
@@ -1126,7 +1106,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
 
                 var icon = cell.querySelector('.timerIcon');
                 if (!icon) {
-                    cell.querySelector('.guideProgramName').insertAdjacentHTML('beforeend', '<i class="timerIcon md-icon programIcon">&#xE061;</i>');
+                    cell.querySelector('.guideProgramName').insertAdjacentHTML('beforeend', '<i class="timerIcon md-icon programIcon">fiber_manual_record</i>');
                 }
 
                 if (newTimerId) {

src/components/guide/tvguide.template.html

@@ -10,7 +10,7 @@
     <div class="guide-headerTimeslots">
         <div class="guide-channelTimeslotHeader">
             <button is="paper-icon-button-light" type="button" class="btnGuideViewSettings">
-                <i class="md-icon btnGuideViewSettingsIcon">&#xE5D3;</i>
+                <i class="md-icon btnGuideViewSettingsIcon">more_horiz</i>
             </button>
         </div>
         <div class="timeslotHeaders scrollX guideScroller"></div>
@@ -30,9 +30,9 @@
 
 <div class="guideOptions hide">
     <button is="paper-icon-button-light" type="button" class="btnPreviousPage">
-        <i class="md-icon">&#xE5C4;</i>
+        <i class="md-icon">arrow_back</i>
     </button>
     <button is="paper-icon-button-light" type="button" class="btnNextPage">
-        <i class="md-icon">&#xE5C8;</i>
+        <i class="md-icon">arrow_forward</i>
     </button>
 </div>

src/components/headroom/headroom.js

@@ -255,8 +255,8 @@ define(['dom', 'layoutManager', 'browser', 'css!./headroom'], function (dom, lay
          * @return {bool} true if should unpin, false otherwise
          */
         this.shouldUnpin = function (currentScrollY) {
-            var scrollingDown = currentScrollY > this.lastKnownScrollY,
+            var scrollingDown = currentScrollY > this.lastKnownScrollY;
-                pastOffset = currentScrollY >= this.offset;
+            var pastOffset = currentScrollY >= this.offset;
 
             return scrollingDown && pastOffset;
         };
@@ -267,8 +267,8 @@ define(['dom', 'layoutManager', 'browser', 'css!./headroom'], function (dom, lay
          * @return {bool} true if should pin, false otherwise
          */
         this.shouldPin = function (currentScrollY) {
-            var scrollingUp = currentScrollY < this.lastKnownScrollY,
+            var scrollingUp = currentScrollY < this.lastKnownScrollY;
-                pastOffset = currentScrollY <= this.offset;
+            var pastOffset = currentScrollY <= this.offset;
 
             return scrollingUp || pastOffset;
         };
@@ -290,11 +290,9 @@ define(['dom', 'layoutManager', 'browser', 'css!./headroom'], function (dom, lay
 
             if (currentScrollY <= (isTv ? 120 : 10)) {
                 this.clear();
-            }
+            } else if (this.shouldUnpin(currentScrollY)) {
-            else if (this.shouldUnpin(currentScrollY)) {
                 this.unpin();
-            }
+            } else if (this.shouldPin(currentScrollY)) {
-            else if (this.shouldPin(currentScrollY)) {
 
                 var toleranceExceeded = Math.abs(currentScrollY - lastKnownScrollY) >= 14;
 
@@ -310,7 +308,6 @@ define(['dom', 'layoutManager', 'browser', 'css!./headroom'], function (dom, lay
             this.lastKnownScrollY = currentScrollY;
         };
 
-      
         if (browser.supportsCssAnimation()) {
             for (var i = 0, length = this.elems.length; i < length; i++) {
                 this.elems[i].classList.add(this.initialClass);

src/components/headroom/package.json

@@ -1,3 +0,0 @@
-{
-    "main": "headroom.js"
-}

src/components/homescreensettings/homescreensettings.js

@@ -57,8 +57,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
                 name: globalize.translate('Collections'),
                 value: 'collections'
             });
-        }
+        } else if (type === 'tvshows') {
-        else if (type === 'tvshows') {
 
             list.push({
                 name: globalize.translate('Shows'),
@@ -78,8 +77,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
                 name: globalize.translate('Favorites'),
                 value: 'favorites'
             });
-        }
+        } else if (type === 'music') {
-        else if (type === 'music') {
 
             list.push({
                 name: globalize.translate('Suggestions'),
@@ -111,8 +109,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
                 name: globalize.translate('Genres'),
                 value: 'genres'
             });
-        }
+        } else if (type === 'livetv') {
-        else if (type === 'livetv') {
 
             list.push({
                 name: globalize.translate('Suggestions'),
@@ -152,7 +149,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
 
             currentHtml += '<div class="listItem viewItem" data-viewid="' + view.Id + '">';
 
-            currentHtml += '<i class="md-icon listItemIcon">&#xE2C8;</i>';
+            currentHtml += '<i class="md-icon listItemIcon">folder_open</i>';
 
             currentHtml += '<div class="listItemBody">';
 
@@ -162,8 +159,8 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
 
             currentHtml += '</div>';
 
-            currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemUp btnViewItemMove autoSize" title="' + globalize.translate('Up') + '"><i class="md-icon">&#xE316;</i></button>';
+            currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemUp btnViewItemMove autoSize" title="' + globalize.translate('Up') + '"><i class="md-icon">keyboard_arrow_up</i></button>';
-            currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemDown btnViewItemMove autoSize" title="' + globalize.translate('Down') + '"><i class="md-icon">&#xE313;</i></button>';
+            currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemDown btnViewItemMove autoSize" title="' + globalize.translate('Down') + '"><i class="md-icon">keyboard_arrow_down</i></button>';
 
             currentHtml += '</div>';
 
@@ -256,7 +253,6 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
             html += '</div>';
         }
 
-
         return html;
     }
 
@@ -384,7 +380,8 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
 
         var viewItems = context.querySelectorAll('.viewItem');
         var orderedViews = [];
-        var i, length;
+        var i;
+        var length;
         for (i = 0, length = viewItems.length; i < length; i++) {
             orderedViews.push(viewItems[i].getAttribute('data-viewid'));
         }

src/components/homescreensettings/homescreensettings.template.html

@@ -104,32 +104,21 @@
     </div>
 
     <div class="verticalSection verticalSection-extrabottompadding">
-
+        <h2 class="sectionTitle">${HeaderLibraryOrder}</h2>
-        <h2 class="sectionTitle">
+        <div class="paperList viewOrderList"></div>
-            ${HeaderLibraryOrder}
-        </h2>
-        <div class="paperList viewOrderList">
-
     </div>
 
-    </div>
+    <div class="perLibrarySettings"></div>
-
-    <div class="perLibrarySettings">
-
-    </div>
 
     <div class="verticalSection verticalSection-extrabottompadding">
         <label class="checkboxContainer">
             <input class="chkHidePlayedFromLatest" type="checkbox" is="emby-checkbox" />
             <span>${HideWatchedContentFromLatestMedia}</span>
         </label>
-
     </div>
 
     <div class="verticalSection verticalSection-extrabottompadding">
-        <h2 class="sectionTitle">
+        <h2 class="sectionTitle">${HeaderLibraryFolders}</h2>
-            ${HeaderLibraryFolders}
-        </h2>
         <div>
             <p>${LabelSelectFolderGroups}</p>
             <div class="folderGroupList"></div>

src/components/homesections/homesections.js

@@ -1,4 +1,4 @@
-define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'layoutManager', 'imageLoader', 'globalize', 'itemShortcuts', 'itemHelper', 'appRouter', 'scripts/imagehelper','paper-icon-button-light', 'emby-itemscontainer', 'emby-scroller', 'emby-button', 'css!./homesections'], function (connectionManager, cardBuilder, appSettings, dom, appHost, layoutManager, imageLoader, globalize, itemShortcuts, itemHelper, appRouter, imageHelper) {
+define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'layoutManager', 'imageLoader', 'globalize', 'itemShortcuts', 'itemHelper', 'appRouter', 'scripts/imagehelper', 'paper-icon-button-light', 'emby-itemscontainer', 'emby-scroller', 'emby-button', 'css!./homesections'], function (connectionManager, cardBuilder, appSettings, dom, appHost, layoutManager, imageLoader, globalize, itemShortcuts, itemHelper, appRouter, imageHelper) {
     'use strict';
 
     function getDefaultSection(index) {
@@ -83,7 +83,8 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
     function resume(elem, options) {
         var elems = elem.querySelectorAll('.itemsContainer');
-        var i, length;
+        var i;
+        var length;
         var promises = [];
 
         for (i = 0, length = elems.length; i < length; i++) {
@@ -259,7 +260,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
             html += '<h2 class="sectionTitle sectionTitle-cards">';
             html += globalize.translate('LatestFromLibrary', parent.Name);
             html += '</h2>';
-            html += '<i class="md-icon">&#xE5CC;</i>';
+            html += '<i class="md-icon">chevron_right</i>';
             html += '</a>';
         } else {
             html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('LatestFromLibrary', parent.Name) + '</h2>';
@@ -607,7 +608,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
                     html += '<h2 class="sectionTitle sectionTitle-cards">';
                     html += globalize.translate('HeaderOnNow');
                     html += '</h2>';
-                    html += '<i class="md-icon">&#xE5CC;</i>';
+                    html += '<i class="md-icon">chevron_right</i>';
                     html += '</a>';
 
                 } else {
@@ -682,7 +683,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
             html += '<h2 class="sectionTitle sectionTitle-cards">';
             html += globalize.translate('HeaderNextUp');
             html += '</h2>';
-            html += '<i class="md-icon">&#xE5CC;</i>';
+            html += '<i class="md-icon">chevron_right</i>';
             html += '</a>';
         } else {
             html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('HeaderNextUp') + '</h2>';

src/components/htmlMediaHelper.js

@@ -12,7 +12,6 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
     }
 
     function getCrossOriginValue(mediaSource) {
-
         if (mediaSource.IsRemote) {
             return null;
         }
@@ -97,7 +96,8 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
         return true;
     }
 
-    var recoverDecodingErrorDate, recoverSwapAudioCodecDate;
+    var recoverDecodingErrorDate;
+    var recoverSwapAudioCodecDate;
     function handleHlsJsMediaError(instance, reject) {
 
         var hlsPlayer = instance._hlsPlayer;
@@ -144,7 +144,8 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
         events.trigger(instance, 'error', [
             {
                 type: type
-            }]);
+            }
+        ]);
     }
 
     function isValidDuration(duration) {
@@ -156,7 +157,6 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
     }
 
     function setCurrentTimeIfNeeded(element, seconds) {
-
         if (Math.abs(element.currentTime || 0, seconds) <= 1) {
             element.currentTime = seconds;
         }
@@ -354,9 +354,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
                             } else {
                                 onErrorInternal(instance, 'network');
                             }
-                        }
+                        } else {
-
-                        else {
                             console.log("fatal network error encountered, try to recover");
                             hls.startLoad();
                         }

src/components/htmlaudioplayer/plugin.js

@@ -168,7 +168,6 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
                     });
                 });
 
-
             }, function () {
 
                 elem.autoplay = true;

src/components/htmlvideoplayer/plugin.js

@@ -197,7 +197,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
         var currentAssRenderer;
         var customTrackIndex = -1;
 
-        var showTrackOffset = false;
+        var showTrackOffset;
         var currentTrackOffset;
 
         var videoSubtitlesElem;
@@ -289,6 +289,8 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
 
             self._currentTime = null;
 
+            self.resetSubtitleOffset();
+
             return createMediaElement(options).then(function (elem) {
 
                 return updateVideoUrl(options, options.mediaSource).then(function () {
@@ -541,12 +543,8 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
             } else*/ if (browser.chromecast && val.indexOf('.m3u8') !== -1 && options.mediaSource.RunTimeTicks) {
 
                 return setCurrentSrcChromecast(self, elem, options, val);
-            }
+            } else if (htmlMediaHelper.enableHlsJsPlayer(options.mediaSource.RunTimeTicks, 'Video') && val.indexOf('.m3u8') !== -1) {
-
-            else if (htmlMediaHelper.enableHlsJsPlayer(options.mediaSource.RunTimeTicks, 'Video') && val.indexOf('.m3u8') !== -1) {
-                
                 return setSrcWithHlsJs(self, elem, options, val);
-
             } else if (options.playMethod !== 'Transcode' && options.mediaSource.Container === 'flv') {
 
                 return setSrcWithFlvJs(self, elem, options, val);
@@ -569,6 +567,11 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
             setCurrentTrackElement(index);
         };
 
+        self.resetSubtitleOffset = function() {
+            currentTrackOffset = 0;
+            showTrackOffset = false;
+        }
+
         self.enableShowingSubtitleOffset = function() {
             showTrackOffset = true;
         }
@@ -586,7 +589,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
             var offsetValue = parseFloat(offset);
 
             // if .ass currently rendering
-            if (currentAssRenderer){
+            if (currentAssRenderer) {
                 updateCurrentTrackOffset(offsetValue);
             } else {
                 var videoElement = self._mediaElement;
@@ -618,7 +621,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
 
             var relativeOffset = offsetValue;
             var newTrackOffset = offsetValue;
-            if(currentTrackOffset){
+            if (currentTrackOffset) {
                 relativeOffset -= currentTrackOffset;
             }
             currentTrackOffset = newTrackOffset;
@@ -628,7 +631,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
 
         function setVttSubtitleOffset(currentTrack, offsetValue) {
 
-            if(currentTrack.cues) {
+            if (currentTrack.cues) {
                 Array.from(currentTrack.cues)
                     .forEach(function(cue) {
                         cue.startTime -= offsetValue;
@@ -659,7 +662,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
 
             return profiles.filter(function (p) {
 
-
                 if (p.Type === 'Video') {
 
                     if (!p.AudioCodec) {
@@ -692,7 +694,9 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
             }
 
             var audioIndex = -1;
-            var i, length, stream;
+            var i;
+            var length;
+            var stream;
 
             for (i = 0, length = streams.length; i < length; i++) {
                 stream = streams[i];
@@ -1060,8 +1064,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
             if (browser.ps4) {
                 // Text outlines are not rendering very well
                 rendererSettings.enableSvg = false;
-            }
+            } else if (browser.edge || browser.msie) {
-            else if (browser.edge || browser.msie) {
                 // svg not rendering at all
                 rendererSettings.enableSvg = false;
             }
@@ -1272,7 +1275,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
         function updateSubtitleText(timeMs) {
 
             // handle offset for ass tracks
-            if(currentTrackOffset) {
+            if (currentTrackOffset) {
                 timeMs += (currentTrackOffset * 1000);
             }
 
@@ -1521,6 +1524,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
         }
 
         list.push('SetBrightness');
+        list.push("SetAspectRatio")
 
         return list;
     }
@@ -1601,8 +1605,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
             this.isPip = isEnabled;
             if (isEnabled) {
                 Windows.UI.ViewManagement.ApplicationView.getForCurrentView().tryEnterViewModeAsync(Windows.UI.ViewManagement.ApplicationViewMode.compactOverlay);
-            }
+            } else {
-            else {
                 Windows.UI.ViewManagement.ApplicationView.getForCurrentView().tryEnterViewModeAsync(Windows.UI.ViewManagement.ApplicationViewMode.default);
             }
         } else {
@@ -1749,7 +1752,15 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
     };
 
     HtmlVideoPlayer.prototype.setAspectRatio = function (val) {
-
+        var mediaElement = this._mediaElement;
+        if (mediaElement) {
+            if ("auto" === val) {
+                mediaElement.style.removeProperty("object-fit")
+            } else {
+                mediaElement.style["object-fit"] = val
+            }
+        }
+        this._currentAspectRatio = val
     };
 
     HtmlVideoPlayer.prototype.getAspectRatio = function () {
@@ -1757,7 +1768,16 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
     };
 
     HtmlVideoPlayer.prototype.getSupportedAspectRatios = function () {
-        return [];
+        return [{
+            name: "Auto",
+            id: "auto"
+        }, {
+            name: "Cover",
+            id: "cover"
+        }, {
+            name: "Fill",
+            id: "fill"
+        }]
     };
 
     HtmlVideoPlayer.prototype.togglePictureInPicture = function () {

src/components/imagedownloader/imagedownloader.js

@@ -1,6 +1,8 @@
 define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader', 'browser', 'layoutManager', 'scrollHelper', 'globalize', 'require', 'emby-checkbox', 'paper-icon-button-light', 'emby-button', 'formDialogStyle', 'cardStyle'], function (loading, appHost, dialogHelper, connectionManager, imageLoader, browser, layoutManager, scrollHelper, globalize, require) {
     'use strict';
 
+    var enableFocusTransform = !browser.slow && !browser.edge;
+
     var currentItemId;
     var currentItemType;
     var currentResolve;
@@ -114,7 +116,7 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader'
         if (showControls) {
             html += '<div data-role="controlgroup" data-type="horizontal" style="display:inline-block;">';
 
-            html += '<button is="paper-icon-button-light" title="' + globalize.translate('Previous') + '" class="btnPreviousPage autoSize" ' + (startIndex ? '' : 'disabled') + '><i class="md-icon">&#xE5C4;</i></button>';
+            html += '<button is="paper-icon-button-light" title="' + globalize.translate('Previous') + '" class="btnPreviousPage autoSize" ' + (startIndex ? '' : 'disabled') + '><i class="md-icon">arrow_back</i></button>';
             html += '<button is="paper-icon-button-light" title="' + globalize.translate('Next') + '" class="btnNextPage autoSize" ' + (startIndex + limit >= totalRecordCount ? 'disabled' : '') + '><i class="md-icon">arrow_forward</i></button>';
             html += '</div>';
         }
@@ -164,6 +166,8 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader'
         var tagName = layoutManager.tv ? 'button' : 'div';
         var enableFooterButtons = !layoutManager.tv;
 
+        // TODO move card creation code to Card component
+
         var html = '';
 
         var cssClass = "card scalableCard imageEditorCard";
@@ -172,22 +176,17 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader'
         var shape = 'backdrop';
         if (imageType === "Backdrop" || imageType === "Art" || imageType === "Thumb" || imageType === "Logo") {
             shape = 'backdrop';
-        }
+        } else if (imageType === "Banner") {
-        else if (imageType === "Banner") {
             shape = 'banner';
-        }
+        } else if (imageType === "Disc") {
-        else if (imageType === "Disc") {
             shape = 'square';
-        }
+        } else {
-        else {
 
             if (currentItemType === "Episode") {
                 shape = 'backdrop';
-            }
+            } else if (currentItemType === "MusicAlbum" || currentItemType === "MusicArtist") {
-            else if (currentItemType === "MusicAlbum" || currentItemType === "MusicArtist") {
                 shape = 'square';
-            }
+            } else {
-            else {
                 shape = 'portrait';
             }
         }
@@ -196,12 +195,12 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader'
         if (tagName === 'button') {
             cssClass += ' btnImageCard';
 
-            if (layoutManager.tv && !browser.slow) {
-                cardBoxCssClass += ' cardBox-focustransform';
-            }
-
             if (layoutManager.tv) {
-                cardBoxCssClass += ' card-focuscontent cardBox-withfocuscontent';
+                cssClass += ' show-focus';
+
+                if (enableFocusTransform) {
+                    cssClass += ' show-animation';
+                }
             }
 
             html += '<button type="button" class="' + cssClass + '"';
@@ -220,8 +219,7 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader'
 
         if (layoutManager.tv || !appHost.supports('externallinks')) {
             html += '<div class="cardImageContainer lazy" data-src="' + getDisplayUrl(image.Url, apiClient) + '" style="background-position:center bottom;"></div>';
-        }
+        } else {
-        else {
             html += '<a is="emby-linkbutton" target="_blank" href="' + getDisplayUrl(image.Url, apiClient) + '" class="button-link cardImageContainer lazy" data-src="' + getDisplayUrl(image.Url, apiClient) + '" style="background-position:center bottom;"></a>';
         }
 
@@ -279,7 +277,7 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader'
         if (enableFooterButtons) {
             html += '<div class="cardText cardTextCentered">';
 
-            html += '<button is="paper-icon-button-light" class="btnDownloadRemoteImage autoSize" raised" title="' + globalize.translate('Download') + '"><i class="md-icon">&#xE2C0;</i></button>';
+            html += '<button is="paper-icon-button-light" class="btnDownloadRemoteImage autoSize" raised" title="' + globalize.translate('Download') + '"><i class="md-icon">cloud_download</i></button>';
             html += '</div>';
         }
 

src/components/imagedownloader/imagedownloader.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle">
         ${Search}
     </h3>

src/components/imageeditor/imageeditor.js

@@ -1,6 +1,8 @@
 define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager', 'focusManager', 'globalize', 'scrollHelper', 'imageLoader', 'require', 'browser', 'apphost', 'cardStyle', 'formDialogStyle', 'emby-button', 'paper-icon-button-light', 'css!./imageeditor'], function (dialogHelper, connectionManager, loading, dom, layoutManager, focusManager, globalize, scrollHelper, imageLoader, require, browser, appHost) {
     'use strict';
 
+    var enableFocusTransform = !browser.slow && !browser.edge;
+
     var currentItem;
     var hasChanges = false;
 
@@ -22,8 +24,7 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
         if (item) {
             apiClient = connectionManager.getApiClient(item.ServerId);
             reloadItem(page, item, apiClient, focusContext);
-        }
+        } else {
-        else {
 
             apiClient = connectionManager.getApiClient(currentItem.ServerId);
             apiClient.getItem(apiClient.getCurrentUserId(), currentItem.Id).then(function (item) {
@@ -58,7 +59,6 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
                 }
             }
 
-
             apiClient.getItemImageInfos(currentItem.Id).then(function (imageInfos) {
 
                 renderStandardImages(page, apiClient, item, imageInfos, providers);
@@ -95,6 +95,8 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
 
     function getCardHtml(image, index, numImages, apiClient, imageProviders, imageSize, tagName, enableFooterButtons) {
 
+        // TODO move card creation code to Card component
+
         var html = '';
 
         var cssClass = "card scalableCard imageEditorCard";
@@ -105,12 +107,12 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
         if (tagName === 'button') {
             cssClass += ' btnImageCard';
 
-            if (layoutManager.tv && !browser.slow) {
-                cardBoxCssClass += ' cardBox-focustransform';
-            }
-
             if (layoutManager.tv) {
-                cardBoxCssClass += ' card-focuscontent cardBox-withfocuscontent';
+                cssClass += ' show-focus';
+
+                if (enableFocusTransform) {
+                    cssClass += ' show-animation';
+                }
             }
 
             html += '<button type="button" class="' + cssClass + '"';
@@ -163,8 +165,7 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
                 } else {
                     html += '<button type="button" is="paper-icon-button-light" class="autoSize" disabled title="' + globalize.translate('MoveRight') + '"><i class="md-icon">chevron_right</i></button>';
                 }
-            }
+            } else {
-            else {
                 if (imageProviders.length) {
                     html += '<button type="button" is="paper-icon-button-light" data-imagetype="' + image.ImageType + '" class="btnSearchImages autoSize" title="' + globalize.translate('Search') + '"><i class="md-icon">search</i></button>';
                 }

src/components/imageeditor/imageeditor.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle">
         ${HeaderEditImages}
     </h3>
@@ -12,10 +12,10 @@
             <div class="imageEditor-buttons first-imageEditor-buttons">
                 <h2 style="margin:0;">${Images}</h2>
                 <button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;">
-                    <i class="md-icon">&#xE8B6;</i>
+                    <i class="md-icon">search</i>
                 </button>
                 <button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-left: .5em;">
-                    <i class="md-icon">&#xE145;</i>
+                    <i class="md-icon">add</i>
                 </button>
             </div>
             <div id="images" class="itemsContainer vertical-wrap">
@@ -27,10 +27,10 @@
             <div class="imageEditor-buttons">
                 <h2 style="margin:0;">${Backdrops}</h2>
                 <button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;" data-imagetype="Backdrop">
-                    <i class="md-icon">&#xE8B6;</i>
+                    <i class="md-icon">search</i>
                 </button>
                 <button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-left: .5em;" data-imagetype="Backdrop">
-                    <i class="md-icon">&#xE145;</i>
+                    <i class="md-icon">add</i>
                 </button>
             </div>
             <div id="backdrops" class="itemsContainer vertical-wrap">
@@ -42,10 +42,10 @@
             <div class="imageEditor-buttons">
                 <h2 style="margin: 0;">${Screenshots}</h2>
                 <button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;" data-imagetype="Screenshot">
-                    <i class="md-icon">&#xE8B6;</i>
+                    <i class="md-icon">search</i>
                 </button>
                 <button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-left: .5em;" data-imagetype="Screenshot">
-                    <i class="md-icon">&#xE145;</i>
+                    <i class="md-icon">add</i>
                 </button>
             </div>
             <div id="screenshots" class="itemsContainer vertical-wrap">

src/components/imageoptionseditor/imageoptionseditor.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle">
         ${HeaderImageOptions}
     </h3>

src/components/images/imageLoader.js

@@ -70,7 +70,9 @@ define(['lazyLoader', 'imageFetcher', 'layoutManager', 'browser', 'appSettings',
         }
 
         // Use the median
-        values.sort(function (a, b) { return a - b; });
+        values.sort(function (a, b) {
+            return a - b;
+        });
 
         var half = Math.floor(values.length / 2);
 
@@ -78,8 +80,7 @@ define(['lazyLoader', 'imageFetcher', 'layoutManager', 'browser', 'appSettings',
 
         if (values.length % 2) {
             result = values[half];
-        }
+        } else {
-        else {
             result = (values[half - 1] + values[half]) / 2.0;
         }
 

src/components/imageuploader/imageuploader.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle">
         ${HeaderUploadImage}
     </h3>
@@ -14,7 +14,7 @@
                 <h2 style="margin:0;">${HeaderAddUpdateImage}</h2>
 
                 <button is="emby-button" type="button" class="raised raised-mini btnBrowse" style="margin-left:1.5em;">
-                    <i class="md-icon">&#xE2C7;</i>
+                    <i class="md-icon">folder</i>
                     <span>${Browse}</span>
                 </button>
             </div>

src/components/indicators/indicators.js

@@ -90,7 +90,7 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
             }
 
             if (userData.PlayedPercentage && userData.PlayedPercentage >= 100 || (userData.Played)) {
-                return '<div class="playedIndicator indicator"><i class="md-icon indicatorIcon">&#xE5CA;</i></div>';
+                return '<div class="playedIndicator indicator"><i class="md-icon indicatorIcon">check</i></div>';
             }
         }
 
@@ -119,7 +119,7 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
         var status;
 
         if (item.Type === 'SeriesTimer') {
-            return '<i class="md-icon timerIndicator indicatorIcon">&#xE062;</i>';
+            return '<i class="md-icon timerIndicator indicatorIcon">fiber_smart_record</i>';
         } else if (item.TimerId || item.SeriesTimerId) {
             status = item.Status || 'Cancelled';
         } else if (item.Type === 'Timer') {
@@ -130,20 +130,20 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
 
         if (item.SeriesTimerId) {
             if (status !== 'Cancelled') {
-                return '<i class="md-icon timerIndicator indicatorIcon">&#xE062;</i>';
+                return '<i class="md-icon timerIndicator indicatorIcon">fiber_smart_record</i>';
             }
 
-            return '<i class="md-icon timerIndicator timerIndicator-inactive indicatorIcon">&#xE062;</i>';
+            return '<i class="md-icon timerIndicator timerIndicator-inactive indicatorIcon">fiber_smart_record</i>';
         }
 
-        return '<i class="md-icon timerIndicator indicatorIcon">&#xE061;</i>';
+        return '<i class="md-icon timerIndicator indicatorIcon">fiber_manual_record</i>';
     }
 
     function getSyncIndicator(item) {
         if (item.SyncPercent === 100) {
-            return '<div class="syncIndicator indicator fullSyncIndicator"><i class="md-icon indicatorIcon">&#xE2C4;</i></div>';
+            return '<div class="syncIndicator indicator fullSyncIndicator"><i class="md-icon indicatorIcon">file_download</i></div>';
         } else if (item.SyncPercent != null) {
-            return '<div class="syncIndicator indicator emptySyncIndicator"><i class="md-icon indicatorIcon">&#xE2C4;</i></div>';
+            return '<div class="syncIndicator indicator emptySyncIndicator"><i class="md-icon indicatorIcon">file_download</i></div>';
         }
 
         return '';
@@ -151,13 +151,13 @@ 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>';
+            return '<div class="indicator videoIndicator"><i class="md-icon indicatorIcon">videocam</i></div>';
         }
         if (item.Type === 'Folder' || item.Type === 'PhotoAlbum') {
-            return '<div class="indicator videoIndicator"><i class="md-icon indicatorIcon">&#xE2C7;</i></div>';
+            return '<div class="indicator videoIndicator"><i class="md-icon indicatorIcon">folder</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">photo</i></div>';
         }
 
         return '';

src/components/itemMediaInfo/itemMediaInfo.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle">
         ${HeaderMediaInfo}
     </h3>

src/components/itemcontextmenu.js

@@ -3,10 +3,11 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
 
     function getCommands(options) {
         var item = options.item;
+        var user = options.user;
+
         var canPlay = playbackManager.canPlay(item);
         var restrictOptions = (browser.operaTv || browser.web0s) && !user.Policy.IsAdministrator;
 
-        var user = options.user;
         var commands = [];
 
         if (canPlay && item.MediaType !== "Photo") {
@@ -52,8 +53,6 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
             //}
         }
 
-
-
         if (item.IsFolder || item.Type === "MusicArtist" || item.Type === "MusicGenre") {
             if (item.CollectionType !== "livetv") {
                 if (options.shuffle !== false) {

src/components/itemhelper.js

@@ -250,9 +250,7 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
                 if (item.Type !== 'TvChannel') {
                     return true;
                 }
-            }
+            } else if (item.MediaType === 'Audio') {
-
-            else if (item.MediaType === 'Audio') {
                 if (item.Type === 'AudioPodcast') {
                     return true;
                 }
@@ -274,7 +272,13 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
 
         canRate: function (item) {
 
-            if (item.Type === 'Program' || item.Type === 'Timer' || item.Type === 'SeriesTimer' || item.Type === 'CollectionFolder' || item.Type === 'UserView' || item.Type === 'Channel') {
+            if (item.Type === 'Program'
+                || item.Type === 'Timer'
+                || item.Type === 'SeriesTimer'
+                || item.Type === 'CollectionFolder'
+                || item.Type === 'UserView'
+                || item.Type === 'Channel'
+                || !item.UserData) {
                 return false;
             }
 

src/components/itemidentifier/itemidentifier.js

@@ -1,6 +1,8 @@
 define(["dialogHelper", "loading", "connectionManager", "require", "globalize", "scrollHelper", "layoutManager", "focusManager", "browser", "emby-input", "emby-checkbox", "paper-icon-button-light", "css!./../formdialog", "material-icons", "cardStyle"], function (dialogHelper, loading, connectionManager, require, globalize, scrollHelper, layoutManager, focusManager, browser) {
     "use strict";
 
+    var enableFocusTransform = !browser.slow && !browser.edge;
+
     var currentItem;
     var currentItemType;
     var currentServerId;
@@ -19,7 +21,8 @@ define(["dialogHelper", "loading", "connectionManager", "require", "globalize",
             ProviderIds: {}
         };
 
-        var i, length;
+        var i;
+        var length;
         var identifyField = page.querySelectorAll(".identifyField");
         var value;
         for (i = 0, length = identifyField.length; i < length; i++) {
@@ -62,8 +65,7 @@ define(["dialogHelper", "loading", "connectionManager", "require", "globalize",
 
         if (currentItem && currentItem.Id) {
             lookupInfo.ItemId = currentItem.Id;
-        }
+        } else {
-        else {
             lookupInfo.IncludeDisabledProviders = true;
         }
 
@@ -95,7 +97,8 @@ define(["dialogHelper", "loading", "connectionManager", "require", "globalize",
         page.querySelector(".dialogContentInner").classList.remove("dialog-content-centered");
 
         var html = "";
-        var i, length;
+        var i;
+        var length;
         for (i = 0, length = results.length; i < length; i++) {
 
             var result = results[i];
@@ -172,6 +175,8 @@ define(["dialogHelper", "loading", "connectionManager", "require", "globalize",
 
     function getSearchResultHtml(result, index) {
 
+        // TODO move card creation code to Card component
+
         var html = "";
         var cssClass = "card scalableCard";
         var cardBoxCssClass = "cardBox";
@@ -180,26 +185,24 @@ define(["dialogHelper", "loading", "connectionManager", "require", "globalize",
         if (currentItemType === "Episode") {
             cssClass += " backdropCard backdropCard-scalable";
             padderClass = "cardPadder-backdrop";
-        }
+        } else if (currentItemType === "MusicAlbum" || currentItemType === "MusicArtist") {
-        else if (currentItemType === "MusicAlbum" || currentItemType === "MusicArtist") {
             cssClass += " squareCard squareCard-scalable";
             padderClass = "cardPadder-square";
-        }
+        } else {
-        else {
             cssClass += " portraitCard portraitCard-scalable";
             padderClass = "cardPadder-portrait";
         }
 
-        if (layoutManager.tv && !browser.slow) {
+        if (layoutManager.tv) {
-            cardBoxCssClass += " cardBox-focustransform";
+            cssClass += " show-focus";
+
+            if (enableFocusTransform) {
+                cssClass += " show-animation";
+            }
         }
 
         cardBoxCssClass += " cardBox-bottompadded";
 
-        if (layoutManager.tv) {
-            cardBoxCssClass += " card-focuscontent cardBox-withfocuscontent";
-        }
-
         html += '<button type="button" class="' + cssClass + '" data-index="' + index + '">';
         html += '<div class="' + cardBoxCssClass + '">';
         html += '<div class="cardScalable">';
@@ -448,8 +451,6 @@ define(["dialogHelper", "loading", "connectionManager", "require", "globalize",
                 scrollHelper.centerFocus.on(dlg.querySelector(".formDialogContent"), false);
             }
 
-
-
             dialogHelper.open(dlg);
 
             dlg.querySelector(".btnCancel").addEventListener("click", function (e) {

src/components/itemidentifier/itemidentifier.template.html

@@ -1,6 +1,6 @@
 <div class="formDialogHeader">
     <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
-        <i class="md-icon">&#xE5C4;</i>
+        <i class="md-icon">arrow_back</i>
     </button>
     <h3 class="formDialogHeaderTitle">
         ${Identify}

src/components/itemsrefresher.js

@@ -11,8 +11,7 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
         if (eventsToMonitor.indexOf('markfavorite') !== -1) {
 
             instance.notifyRefreshNeeded();
-        }
+        } else if (eventsToMonitor.indexOf('markplayed') !== -1) {
-        else if (eventsToMonitor.indexOf('markplayed') !== -1) {
 
             instance.notifyRefreshNeeded();
         }
@@ -115,9 +114,7 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
                 instance.notifyRefreshNeeded(true);
                 return;
             }
-        }
+        } else if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Audio') {
-
-        else if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Audio') {
 
             if (eventsToMonitor.indexOf('audioplayback') !== -1) {
 

src/components/keyboardnavigation.js

@@ -31,6 +31,6 @@ define(['inputManager', 'focusManager'], function(inputManager, focusManager) {
 
     }
     return {
-        enable: enable,
+        enable: enable
     };
 });

src/components/listview/listview.js

@@ -9,7 +9,8 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
         }
 
         var sortBy = (options.sortBy || '').toLowerCase();
-        var code, name;
+        var code;
+        var name;
 
         if (sortBy.indexOf('sortname') === 0) {
 
@@ -85,15 +86,12 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
 
             options.tag = item.AlbumPrimaryImageTag;
             return apiClient.getScaledImageUrl(item.AlbumId, options);
-        }
+        } else if (item.SeriesId && item.SeriesPrimaryImageTag) {
-
-        else if (item.SeriesId && item.SeriesPrimaryImageTag) {
 
             options.tag = item.SeriesPrimaryImageTag;
             return apiClient.getScaledImageUrl(item.SeriesId, options);
 
-        }
+        } else if (item.ParentPrimaryImageTag) {
-        else if (item.ParentPrimaryImageTag) {
 
             options.tag = item.ParentPrimaryImageTag;
             return apiClient.getScaledImageUrl(item.ParentPrimaryImageItemId, options);
@@ -209,8 +207,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
 
                     if (i === 0) {
                         html += '<h2 class="listGroupHeader listGroupHeader-first">';
-                    }
+                    } else {
-                    else {
                         html += '<h2 class="listGroupHeader">';
                     }
                     html += itemGroupTitle;
@@ -265,9 +262,9 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
             }
 
             if (!clickEntireItem && options.dragHandle) {
-                //html += '<button is="paper-icon-button-light" class="listViewDragHandle listItemButton"><i class="md-icon">&#xE25D;</i></button>';
+                //html += '<button is="paper-icon-button-light" class="listViewDragHandle listItemButton"><i class="md-icon">drag_handle</i></button>';
                 // Firefox and Edge are not allowing the button to be draggable
-                html += '<i class="listViewDragHandle md-icon listItemIcon listItemIcon-transparent">&#xE25D;</i>';
+                html += '<i class="listViewDragHandle md-icon listItemIcon listItemIcon-transparent">drag_handle</i>';
             }
 
             if (options.image !== false) {
@@ -301,7 +298,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                 }
 
                 if (playOnImageClick) {
-                    html += '<button is="paper-icon-button-light" class="listItemImageButton itemAction" data-action="resume"><i class="md-icon listItemImageButton-icon">&#xE037;</i></button>';
+                    html += '<button is="paper-icon-button-light" class="listItemImageButton itemAction" data-action="resume"><i class="md-icon listItemImageButton-icon">play_arrow</i></button>';
                 }
 
                 var progressHtml = indicators.getProgressBarHtml(item, {
@@ -349,9 +346,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
             if (options.showParentTitle) {
                 if (item.Type === 'Episode') {
                     parentTitle = item.SeriesName;
-                }
+                } else if (item.IsSeries || (item.EpisodeTitle && item.Name)) {
-
-                else if (item.IsSeries || (item.EpisodeTitle && item.Name)) {
                     parentTitle = item.Name;
                 }
             }
@@ -375,8 +370,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                 }
 
                 textlines.push(parentTitle || '');
-            }
+            } else if (options.showParentTitle) {
-            else if (options.showParentTitle) {
                 textlines.push(parentTitle || '');
             }
 
@@ -400,8 +394,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
 
                     if (!artistItems || !artistItems.length) {
                         showArtist = true;
-                    }
+                    } else if (artistItems.length > 1 || containerAlbumArtistIds.indexOf(artistItems[0].Id) === -1) {
-                    else if (artistItems.length > 1 || containerAlbumArtistIds.indexOf(artistItems[0].Id) === -1) {
                         showArtist = true;
                     }
                 }
@@ -434,7 +427,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
 
             html += '<div class="' + cssClass + '">';
 
-            var moreIcon = '&#xE5D3;';
+            var moreIcon = 'more_horiz';
 
             html += getTextLinesHtml(textlines, isLargeStyle);
 
@@ -481,7 +474,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
             if (!clickEntireItem) {
 
                 if (options.addToListButton) {
-                    html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="addtoplaylist"><i class="md-icon">&#xE03B;</i></button>';
+                    html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="addtoplaylist"><i class="md-icon">playlist_add</i></button>';
                 }
 
                 if (options.moreButton !== false) {
@@ -489,7 +482,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                 }
 
                 if (options.infoButton) {
-                    html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="link"><i class="md-icon">&#xE88F;</i></button>';
+                    html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="link"><i class="md-icon">info_outline</i></button>';
                 }
 
                 if (options.rightButtons) {
@@ -504,11 +497,11 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                     var likes = userData.Likes == null ? '' : userData.Likes;
 
                     if (itemHelper.canMarkPlayed(item)) {
-                        html += '<button is="emby-playstatebutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><i class="md-icon">&#xE5CA;</i></button>';
+                        html += '<button is="emby-playstatebutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><i class="md-icon">check</i></button>';
                     }
 
                     if (itemHelper.canRate(item)) {
-                        html += '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="md-icon">&#xE87D;</i></button>';
+                        html += '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="md-icon">favorite</i></button>';
                     }
 
                     html += '</span>';

src/components/loading/loading.js

@@ -45,7 +45,8 @@ define(['components/loading/loadingLegacy', 'browser', 'css!./loading'], functio
             layer3.classList.add('mdl-spinner__layer-3-active');
             layer4.classList.add('mdl-spinner__layer-4-active');
 
-            var i, length;
+            var i;
+            var length;
 
             for (i = 0, length = circleLefts.length; i < length; i++) {
                 circleLefts[i].classList.add('mdl-spinner__circleLeft-active');
@@ -67,7 +68,8 @@ define(['components/loading/loadingLegacy', 'browser', 'css!./loading'], functio
                 elem.classList.remove('mdl-spinner__layer-3-active');
                 elem.classList.remove('mdl-spinner__layer-4-active');
 
-                var i, length;
+                var i;
+                var length;
 
                 for (i = 0, length = circleLefts.length; i < length; i++) {
                     circleLefts[i].classList.remove('mdl-spinner__circleLeft-active');

src/components/mediainfo/mediainfo.js

@@ -6,37 +6,35 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
         var status;
 
         if (item.Type === 'SeriesTimer') {
-            return '<i class="md-icon mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">&#xE062;</i>';
+            return '<i class="md-icon mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">fiber_smart_record</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 mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">&#xE062;</i>';
+                return '<i class="md-icon mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">fiber_smart_record</i>';
             }
 
-            return '<i class="md-icon mediaInfoItem mediaInfoIconItem">&#xE062;</i>';
+            return '<i class="md-icon mediaInfoItem mediaInfoIconItem">fiber_smart_record</i>';
         }
 
-        return '<i class="md-icon mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">&#xE061;</i>';
+        return '<i class="md-icon mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">fiber_manual_record</i>';
     }
 
     function getProgramInfoHtml(item, options) {
         var html = '';
 
         var miscInfo = [];
-        var text, date;
+        var text;
+        var date;
 
         if (item.StartDate && options.programTime !== false) {
 
@@ -58,8 +56,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
                 }
 
                 miscInfo.push(text);
-            }
+            } catch (e) {
-            catch (e) {
                 console.log("Error parsing date: " + item.StartDate);
             }
         }
@@ -107,7 +104,9 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
 
         var miscInfo = [];
         options = options || {};
-        var text, date, minutes;
+        var text;
+        var date;
+        var minutes;
         var count;
 
         var showFolderRuntime = item.Type === "MusicAlbum" || item.MediaType === 'MusicArtist' || item.MediaType === 'Playlist' || item.MediaType === 'MusicGenre';
@@ -124,9 +123,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
             if (item.RunTimeTicks) {
                 miscInfo.push(datetime.getDisplayRunningTime(item.RunTimeTicks));
             }
-        }
+        } else if (item.Type === "PhotoAlbum" || item.Type === "BoxSet") {
-
-        else if (item.Type === "PhotoAlbum" || item.Type === "BoxSet") {
 
             count = item.ChildCount;
 
@@ -145,8 +142,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
 
                     text = datetime.toLocaleDateString(date);
                     miscInfo.push(text);
-                }
+                } catch (e) {
-                catch (e) {
                     console.log("Error parsing date: " + item.PremiereDate);
                 }
             }
@@ -162,8 +158,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
 
             if (item.RecordAnyChannel) {
                 miscInfo.push(globalize.translate('AllChannels'));
-            }
+            } else {
-            else {
                 miscInfo.push(item.ChannelName || globalize.translate('OneChannel'));
             }
         }
@@ -180,8 +175,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
                     text = datetime.getDisplayTime(date);
                     miscInfo.push(text);
                 }
-            }
+            } catch (e) {
-            catch (e) {
                 console.log("Error parsing date: " + item.StartDate);
             }
         }
@@ -191,8 +185,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
             if (item.Status === "Continuing") {
                 miscInfo.push(globalize.translate('SeriesYearToPresent', item.ProductionYear));
 
-            }
+            } else if (item.ProductionYear) {
-            else if (item.ProductionYear) {
 
                 text = item.ProductionYear;
 
@@ -206,8 +199,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
                             text += "-" + datetime.parseISO8601Date(item.EndDate).getFullYear();
                         }
 
-                    }
+                    } catch (e) {
-                    catch (e) {
                         console.log("Error parsing date: " + item.EndDate);
                     }
                 }
@@ -223,18 +215,15 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
                     miscInfo.push({
                         html: '<div class="mediaInfoProgramAttribute mediaInfoItem liveTvProgram">' + globalize.translate('Live') + '</div>'
                     });
-                }
+                } else if (item.IsPremiere) {
-                else if (item.IsPremiere) {
                     miscInfo.push({
                         html: '<div class="mediaInfoProgramAttribute mediaInfoItem premiereTvProgram">' + globalize.translate('Premiere') + '</div>'
                     });
-                }
+                } else if (item.IsSeries && !item.IsRepeat) {
-                else if (item.IsSeries && !item.IsRepeat) {
                     miscInfo.push({
                         html: '<div class="mediaInfoProgramAttribute mediaInfoItem newTvProgram">' + globalize.translate('AttributeNew') + '</div>'
                     });
-                }
+                } else if (item.IsSeries && item.IsRepeat) {
-                else if (item.IsSeries && item.IsRepeat) {
                     miscInfo.push({
                         html: '<div class="mediaInfoProgramAttribute mediaInfoItem repeatTvProgram">' + globalize.translate('Repeat') + '</div>'
                     });
@@ -250,20 +239,15 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
                 if (text) {
                     miscInfo.push(text);
                 }
-            }
+            } else if (item.IsMovie && item.ProductionYear && options.originalAirDate !== false) {
-
-            else if (item.IsMovie && item.ProductionYear && options.originalAirDate !== false) {
                 miscInfo.push(item.ProductionYear);
-            }
+            } else if (item.PremiereDate && options.originalAirDate !== false) {
-
-            else if (item.PremiereDate && options.originalAirDate !== false) {
 
                 try {
                     date = datetime.parseISO8601Date(item.PremiereDate);
                     text = globalize.translate('OriginalAirDateValue', datetime.toLocaleDateString(date));
                     miscInfo.push(text);
-                }
+                } catch (e) {
-                catch (e) {
                     console.log("Error parsing date: " + item.PremiereDate);
                 }
             } else if (item.ProductionYear) {
@@ -277,14 +261,12 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
                 if (item.ProductionYear) {
 
                     miscInfo.push(item.ProductionYear);
-                }
+                } else if (item.PremiereDate) {
-                else if (item.PremiereDate) {
 
                     try {
                         text = datetime.parseISO8601Date(item.PremiereDate).getFullYear();
                         miscInfo.push(text);
-                    }
+                    } catch (e) {
-                    catch (e) {
                         console.log("Error parsing date: " + item.PremiereDate);
                     }
                 }
@@ -411,7 +393,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
         if (rating) {
             html += '<div class="starRatingContainer mediaInfoItem">';
 
-            html += '<i class="md-icon starIcon">&#xE838;</i>';
+            html += '<i class="md-icon starIcon">star</i>';
             html += rating;
             html += '</div>';
         }

src/components/medialibrarycreator/medialibrarycreator.js

@@ -151,8 +151,8 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed
                 var xhr = new XMLHttpRequest;
                 xhr.open("GET", "components/medialibrarycreator/medialibrarycreator.template.html", true);
                 xhr.onload = function(e) {
-                    var template = this.response,
+                    var template = this.response;
-                        dlg = dialogHelper.createDialog({
+                    var dlg = dialogHelper.createDialog({
                         size: "medium-tall",
                         modal: false,
                         removeOnClose: true,

src/components/medialibrarycreator/medialibrarycreator.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle">${ButtonAddMediaLibrary}</h3>
 </div>
 

src/components/medialibraryeditor/medialibraryeditor.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle"></h3>
 </div>
 

src/components/metadataeditor/metadataeditor.js

@@ -144,7 +144,9 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
             AirTime: form.querySelector('#txtAirTime').value,
             Genres: getListValues(form.querySelector("#listGenres")),
             Tags: getListValues(form.querySelector("#listTags")),
-            Studios: getListValues(form.querySelector("#listStudios")).map(function (element) { return { Name: element }; }),
+            Studios: getListValues(form.querySelector("#listStudios")).map(function (element) {
+                return { Name: element };
+            }),
 
             PremiereDate: getDateValue(form, '#txtPremiereDate', 'PremiereDate'),
             DateCreated: getDateValue(form, '#txtDateAdded', 'DateCreated'),
@@ -202,7 +204,9 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
     }
 
     function getListValues(list) {
-        return Array.prototype.map.call(list.querySelectorAll('.textValue'), function (el) { return el.textContent; });
+        return Array.prototype.map.call(list.querySelectorAll('.textValue'), function (el) {
+            return el.textContent;
+        });
     }
 
     function addElementToList(source, sortCallback) {
@@ -439,7 +443,6 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
         var html = metadataInfo.ContentTypeOptions.map(function (i) {
 
-
             return '<option value="' + i.Value + '">' + i.Name + '</option>';
 
         }).join('');
@@ -744,7 +747,9 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
         populateListView(context.querySelector('#listGenres'), item.Genres);
         populatePeople(context, item.People || []);
 
-        populateListView(context.querySelector('#listStudios'), (item.Studios || []).map(function (element) { return element.Name || ''; }));
+        populateListView(context.querySelector('#listStudios'), (item.Studios || []).map(function (element) {
+            return element.Name || '';
+        }));
 
         populateListView(context.querySelector('#listTags'), item.Tags);
 
@@ -783,8 +788,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
         if (item.Type === 'Series') {
             context.querySelector('#selectDisplayOrder').value = item.DisplayOrder || '';
-        }
+        } else {
-        else {
             context.querySelector('#selectDisplayOrder').value = item.DisplayOrder || '';
         }
 
@@ -859,7 +863,9 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
         html += "<option value=''></option>";
 
         var ratings = [];
-        var i, length, rating;
+        var i;
+        var length;
+        var rating;
 
         var currentValueFound = false;
 
@@ -901,7 +907,9 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
 
         items = items || [];
         if (typeof (sortCallback) === 'undefined') {
-            items.sort(function (a, b) { return a.toLowerCase().localeCompare(b.toLowerCase()); });
+            items.sort(function (a, b) {
+                return a.toLowerCase().localeCompare(b.toLowerCase());
+            });
         } else {
             items = sortCallback(items);
         }

src/components/metadataeditor/metadataeditor.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle">
         ${Edit}
     </h3>
@@ -184,7 +184,7 @@
                     ${Genres}
                 </h2>
                 <button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-left:1em;" title="${Add}">
-                    <i class="md-icon">&#xE145;</i>
+                    <i class="md-icon">add</i>
                 </button>
                 <div class="paperList" id="listGenres"></div>
             </div>
@@ -193,7 +193,7 @@
                     ${People}
                 </h2>
                 <button is="emby-button" type="button" id="btnAddPerson" class="fab btnAddPerson" style="margin-left:1em;" title="${Add}">
-                    <i class="md-icon">&#xE145;</i>
+                    <i class="md-icon">add</i>
                 </button>
                 <div id="peopleList" class="paperList">
                 </div>
@@ -203,7 +203,7 @@
                     ${Studios}
                 </h2>
                 <button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-left:1em;" title="${Add}">
-                    <i class="md-icon">&#xE145;</i>
+                    <i class="md-icon">add</i>
                 </button>
                 <div class="paperList" id="listStudios"></div>
             </div>
@@ -212,7 +212,7 @@
                     ${Tags}
                 </h2>
                 <button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-left:1em;" title="${Add}">
-                    <i class="md-icon">&#xE145;</i>
+                    <i class="md-icon">add</i>
                 </button>
                 <div class="paperList" id="listTags"></div>
             </div>

src/components/metadataeditor/personeditor.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle">
         ${Edit}
     </h3>

src/components/multiselect/multiselect.js

@@ -1,5 +1,5 @@
-define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'globalize', 'appRouter', 'dom', 'css!./multiselect'], function (browser, appStorage, appHost, loading, connectionManager, globalize, appRouter, dom) {
+define(["browser", "appStorage", "apphost", "loading", "connectionManager", "globalize", "appRouter", "dom", "css!./multiselect"], function (browser, appStorage, appHost, loading, connectionManager, globalize, appRouter, dom) {
-    'use strict';
+    "use strict";
 
     var selectedItems = [];
     var selectedElements = [];
@@ -15,12 +15,12 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
             selectedItems = [];
             selectedElements = [];
-            var elems = document.querySelectorAll('.itemSelectionPanel');
+            var elems = document.querySelectorAll(".itemSelectionPanel");
             for (var i = 0, length = elems.length; i < length; i++) {
 
                 var parent = elems[i].parentNode;
                 parent.removeChild(elems[i]);
-                parent.classList.remove('withMultiSelect');
+                parent.classList.remove("withMultiSelect");
             }
         }
     }
@@ -28,13 +28,13 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
     function onItemSelectionPanelClick(e, itemSelectionPanel) {
 
         // toggle the checkbox, if it wasn't clicked on
-        if (!dom.parentWithClass(e.target, 'chkItemSelect')) {
+        if (!dom.parentWithClass(e.target, "chkItemSelect")) {
-            var chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect');
+            var chkItemSelect = itemSelectionPanel.querySelector(".chkItemSelect");
 
             if (chkItemSelect) {
 
-                if (chkItemSelect.classList.contains('checkedInitial')) {
+                if (chkItemSelect.classList.contains("checkedInitial")) {
-                    chkItemSelect.classList.remove('checkedInitial');
+                    chkItemSelect.classList.remove("checkedInitial");
                 } else {
                     var newValue = !chkItemSelect.checked;
                     chkItemSelect.checked = newValue;
@@ -50,7 +50,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
     function updateItemSelection(chkItemSelect, selected) {
 
-        var id = dom.parentWithAttribute(chkItemSelect, 'data-id').getAttribute('data-id');
+        var id = dom.parentWithAttribute(chkItemSelect, "data-id").getAttribute("data-id");
 
         if (selected) {
 
@@ -73,7 +73,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
         }
 
         if (selectedItems.length) {
-            var itemSelectionCount = document.querySelector('.itemSelectionCount');
+            var itemSelectionCount = document.querySelector(".itemSelectionCount");
             if (itemSelectionCount) {
                 itemSelectionCount.innerHTML = selectedItems.length;
             }
@@ -88,27 +88,27 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
     function showSelection(item, isChecked) {
 
-        var itemSelectionPanel = item.querySelector('.itemSelectionPanel');
+        var itemSelectionPanel = item.querySelector(".itemSelectionPanel");
 
         if (!itemSelectionPanel) {
 
-            itemSelectionPanel = document.createElement('div');
+            itemSelectionPanel = document.createElement("div");
-            itemSelectionPanel.classList.add('itemSelectionPanel');
+            itemSelectionPanel.classList.add("itemSelectionPanel");
 
-            var parent = item.querySelector('.cardBox') || item.querySelector('.cardContent');
+            var parent = item.querySelector(".cardBox") || item.querySelector(".cardContent");
-            parent.classList.add('withMultiSelect');
+            parent.classList.add("withMultiSelect");
             parent.appendChild(itemSelectionPanel);
 
-            var cssClass = 'chkItemSelect';
+            var cssClass = "chkItemSelect";
             if (isChecked && !browser.firefox) {
                 // In firefox, the initial tap hold doesnt' get treated as a click
                 // In other browsers it does, so we need to make sure that initial click is ignored
-                cssClass += ' checkedInitial';
+                cssClass += " checkedInitial";
             }
-            var checkedAttribute = isChecked ? ' checked' : '';
+            var checkedAttribute = isChecked ? " checked" : "";
             itemSelectionPanel.innerHTML = '<label class="checkboxContainer"><input type="checkbox" is="emby-checkbox" data-outlineclass="multiSelectCheckboxOutline" class="' + cssClass + '"' + checkedAttribute + '/><span></span></label>';
-            var chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect');
+            var chkItemSelect = itemSelectionPanel.querySelector(".chkItemSelect");
-            chkItemSelect.addEventListener('change', onSelectionChange);
+            chkItemSelect.addEventListener("change", onSelectionChange);
         }
     }
 
@@ -118,27 +118,27 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
         if (!selectionCommandsPanel) {
 
-            selectionCommandsPanel = document.createElement('div');
+            selectionCommandsPanel = document.createElement("div");
-            selectionCommandsPanel.classList.add('selectionCommandsPanel');
+            selectionCommandsPanel.classList.add("selectionCommandsPanel");
 
             document.body.appendChild(selectionCommandsPanel);
             currentSelectionCommandsPanel = selectionCommandsPanel;
 
-            var html = '';
+            var html = "";
 
             html += '<button is="paper-icon-button-light" class="btnCloseSelectionPanel autoSize"><i class="md-icon">close</i></button>';
             html += '<h1 class="itemSelectionCount"></h1>';
 
-            var moreIcon = '&#xE5D3;';
+            var moreIcon = "more_horiz";
             html += '<button is="paper-icon-button-light" class="btnSelectionPanelOptions autoSize" style="margin-left:auto;"><i class="md-icon">' + moreIcon + '</i></button>';
 
             selectionCommandsPanel.innerHTML = html;
 
-            selectionCommandsPanel.querySelector('.btnCloseSelectionPanel').addEventListener('click', hideSelections);
+            selectionCommandsPanel.querySelector(".btnCloseSelectionPanel").addEventListener("click", hideSelections);
 
-            var btnSelectionPanelOptions = selectionCommandsPanel.querySelector('.btnSelectionPanelOptions');
+            var btnSelectionPanelOptions = selectionCommandsPanel.querySelector(".btnSelectionPanelOptions");
 
-            dom.addEventListener(btnSelectionPanelOptions, 'click', showMenuForSelectedItems, { passive: true });
+            dom.addEventListener(btnSelectionPanelOptions, "click", showMenuForSelectedItems, { passive: true });
         }
     }
 
@@ -146,7 +146,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
         return new Promise(function (resolve, reject) {
 
-            require(['alert'], function (alert) {
+            require(["alert"], function (alert) {
                 alert(options).then(resolve, resolve);
             });
         });
@@ -156,15 +156,15 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
         return new Promise(function (resolve, reject) {
 
-            var msg = globalize.translate('ConfirmDeleteItem');
+            var msg = globalize.translate("ConfirmDeleteItem");
-            var title = globalize.translate('HeaderDeleteItem');
+            var title = globalize.translate("HeaderDeleteItem");
 
             if (itemIds.length > 1) {
-                msg = globalize.translate('ConfirmDeleteItems');
+                msg = globalize.translate("ConfirmDeleteItems");
-                title = globalize.translate('HeaderDeleteItems');
+                title = globalize.translate("HeaderDeleteItems");
             }
 
-            require(['confirm'], function (confirm) {
+            require(["confirm"], function (confirm) {
 
                 confirm(msg, title).then(function () {
                     var promises = itemIds.map(function (itemId) {
@@ -173,7 +173,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
                     Promise.all(promises).then(resolve, function () {
 
-                        alertText(globalize.translate('ErrorDeletingItem')).then(reject, reject);
+                        alertText(globalize.translate("ErrorDeletingItem")).then(reject, reject);
                     });
                 }, reject);
 
@@ -190,59 +190,60 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
             var menuItems = [];
 
             menuItems.push({
-                name: globalize.translate('AddToCollection'),
+                name: globalize.translate("AddToCollection"),
-                id: 'addtocollection',
+                id: "addtocollection",
-                ironIcon: 'add'
+                icon: "add"
             });
 
             menuItems.push({
-                name: globalize.translate('AddToPlaylist'),
+                name: globalize.translate("AddToPlaylist"),
-                id: 'playlist',
+                id: "playlist",
-                ironIcon: 'playlist-add'
+                icon: "playlist_add"
             });
 
             // TODO: Be more dynamic based on what is selected
             if (user.Policy.EnableContentDeletion) {
                 menuItems.push({
-                    name: globalize.translate('Delete'),
+                    name: globalize.translate("Delete"),
-                    id: 'delete',
+                    id: "delete",
-                    ironIcon: 'delete'
+                    icon: "delete"
                 });
             }
 
-            if (user.Policy.EnableContentDownloading && appHost.supports('filedownload')) {
+            if (user.Policy.EnableContentDownloading && appHost.supports("filedownload")) {
                 menuItems.push({
-                    name: Globalize.translate('ButtonDownload'),
+                    name: Globalize.translate("ButtonDownload"),
-                    id: 'download',
+                    id: "download",
-                    ironIcon: 'file-download'
+                    icon: "file_download"
                 });
             }
 
             if (user.Policy.IsAdministrator) {
                 menuItems.push({
-                    name: globalize.translate('GroupVersions'),
+                    name: globalize.translate("GroupVersions"),
-                    id: 'groupvideos',
+                    id: "groupvideos",
-                    ironIcon: 'call-merge'
+                    icon: "call_merge"
                 });
             }
 
             menuItems.push({
-                name: globalize.translate('MarkPlayed'),
+                name: globalize.translate("MarkPlayed"),
-                id: 'markplayed'
+                id: "markplayed",
+                icon: "check_box"
             });
 
             menuItems.push({
-                name: globalize.translate('MarkUnplayed'),
+                name: globalize.translate("MarkUnplayed"),
-                id: 'markunplayed'
+                id: "markunplayed",
+                icon: "check_box_outline_blank"
             });
 
             menuItems.push({
-                name: globalize.translate('RefreshMetadata'),
+                name: globalize.translate("RefreshMetadata"),
-                id: 'refresh'
+                id: "refresh",
+                icon: "refresh"
             });
 
-
-
             require(['actionsheet'], function (actionsheet) {
                 actionsheet.show({
                     items: menuItems,
@@ -252,8 +253,8 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
                         var serverId = apiClient.serverInfo().Id;
 
                         switch (id) {
-                            case 'addtocollection':
+                            case "addtocollection":
-                                require(['collectionEditor'], function (collectionEditor) {
+                                require(["collectionEditor"], function (collectionEditor) {
                                     new collectionEditor().show({
                                         items: items,
                                         serverId: serverId
@@ -262,8 +263,8 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
                                 hideSelections();
                                 dispatchNeedsRefresh();
                                 break;
-                            case 'playlist':
+                            case "playlist":
-                                require(['playlistEditor'], function (playlistEditor) {
+                                require(["playlistEditor"], function (playlistEditor) {
                                     new playlistEditor().show({
                                         items: items,
                                         serverId: serverId
@@ -272,30 +273,30 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
                                 hideSelections();
                                 dispatchNeedsRefresh();
                                 break;
-                            case 'delete':
+                            case "delete":
                                 deleteItems(apiClient, items).then(dispatchNeedsRefresh);
                                 hideSelections();
                                 dispatchNeedsRefresh();
                                 break;
-                            case 'groupvideos':
+                            case "groupvideos":
                                 combineVersions(apiClient, items);
                                 break;
-                            case 'markplayed':
+                            case "markplayed":
                                 items.forEach(function (itemId) {
                                     apiClient.markPlayed(apiClient.getCurrentUserId(), itemId);
                                 });
                                 hideSelections();
                                 dispatchNeedsRefresh();
                                 break;
-                            case 'markunplayed':
+                            case "markunplayed":
                                 items.forEach(function (itemId) {
                                     apiClient.markUnplayed(apiClient.getCurrentUserId(), itemId);
                                 });
                                 hideSelections();
                                 dispatchNeedsRefresh();
                                 break;
-                            case 'refresh':
+                            case "refresh":
-                                require(['refreshDialog'], function (refreshDialog) {
+                                require(["refreshDialog"], function (refreshDialog) {
                                     new refreshDialog({
                                         itemIds: items,
                                         serverId: serverId
@@ -320,7 +321,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
         [].forEach.call(selectedElements, function (i) {
 
-            var container = dom.parentWithAttribute(i, 'is', 'emby-itemscontainer');
+            var container = dom.parentWithAttribute(i, "is", "emby-itemscontainer");
 
             if (container && elems.indexOf(container) === -1) {
                 elems.push(container);
@@ -336,9 +337,9 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
         if (selection.length < 2) {
 
-            require(['alert'], function (alert) {
+            require(["alert"], function (alert) {
                 alert({
-                    text: globalize.translate('PleaseSelectTwoItems')
+                    text: globalize.translate("PleaseSelectTwoItems")
                 });
             });
             return;
@@ -349,7 +350,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
         apiClient.ajax({
 
             type: "POST",
-            url: apiClient.getUrl("Videos/MergeVersions", { Ids: selection.join(',') })
+            url: apiClient.getUrl("Videos/MergeVersions", { Ids: selection.join(",") })
 
         }).then(function () {
 
@@ -361,8 +362,8 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
     function showSelections(initialCard) {
 
-        require(['emby-checkbox'], function () {
+        require(["emby-checkbox"], function () {
-            var cards = document.querySelectorAll('.card');
+            var cards = document.querySelectorAll(".card");
             for (var i = 0, length = cards.length; i < length; i++) {
                 showSelection(cards[i], initialCard === cards[i]);
             }
@@ -378,9 +379,9 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
         if (selectedItems.length) {
 
-            var card = dom.parentWithClass(target, 'card');
+            var card = dom.parentWithClass(target, "card");
             if (card) {
-                var itemSelectionPanel = card.querySelector('.itemSelectionPanel');
+                var itemSelectionPanel = card.querySelector(".itemSelectionPanel");
                 if (itemSelectionPanel) {
                     return onItemSelectionPanelClick(e, itemSelectionPanel);
                 }
@@ -392,7 +393,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
         }
     }
 
-    document.addEventListener('viewbeforehide', hideSelections);
+    document.addEventListener("viewbeforehide", hideSelections);
 
     return function (options) {
 
@@ -402,7 +403,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
         function onTapHold(e) {
 
-            var card = dom.parentWithClass(e.target, 'card');
+            var card = dom.parentWithClass(e.target, "card");
 
             if (card) {
 
@@ -439,7 +440,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
                 var element = touch.target;
 
                 if (element) {
-                    var card = dom.parentWithClass(element, 'card');
+                    var card = dom.parentWithClass(element, "card");
 
                     if (card) {
 
@@ -508,7 +509,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
                 return;
             }
 
-            var card = dom.parentWithClass(touchTarget, 'card');
+            var card = dom.parentWithClass(touchTarget, "card");
             touchTarget = null;
 
             if (card) {
@@ -521,27 +522,27 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
 
             // mobile safari doesn't allow contextmenu override
             if (browser.touch && !browser.safari) {
-                element.addEventListener('contextmenu', onTapHold);
+                element.addEventListener("contextmenu", onTapHold);
             } else {
-                dom.addEventListener(element, 'touchstart', onTouchStart, {
+                dom.addEventListener(element, "touchstart", onTouchStart, {
                     passive: true
                 });
-                dom.addEventListener(element, 'touchmove', onTouchMove, {
+                dom.addEventListener(element, "touchmove", onTouchMove, {
                     passive: true
                 });
-                dom.addEventListener(element, 'touchend', onTouchEnd, {
+                dom.addEventListener(element, "touchend", onTouchEnd, {
                     passive: true
                 });
-                dom.addEventListener(element, 'touchcancel', onTouchEnd, {
+                dom.addEventListener(element, "touchcancel", onTouchEnd, {
                     passive: true
                 });
-                dom.addEventListener(element, 'mousedown', onMouseDown, {
+                dom.addEventListener(element, "mousedown", onMouseDown, {
                     passive: true
                 });
-                dom.addEventListener(element, 'mouseleave', onMouseOut, {
+                dom.addEventListener(element, "mouseleave", onMouseOut, {
                     passive: true
                 });
-                dom.addEventListener(element, 'mouseup', onMouseOut, {
+                dom.addEventListener(element, "mouseup", onMouseOut, {
                     passive: true
                 });
             }
@@ -550,38 +551,38 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
         initTapHold(container);
 
         if (options.bindOnClick !== false) {
-            container.addEventListener('click', onContainerClick);
+            container.addEventListener("click", onContainerClick);
         }
 
         self.onContainerClick = onContainerClick;
 
         self.destroy = function () {
 
-            container.removeEventListener('click', onContainerClick);
+            container.removeEventListener("click", onContainerClick);
-            container.removeEventListener('contextmenu', onTapHold);
+            container.removeEventListener("contextmenu", onTapHold);
 
             var element = container;
 
-            dom.removeEventListener(element, 'touchstart', onTouchStart, {
+            dom.removeEventListener(element, "touchstart", onTouchStart, {
                 passive: true
             });
-            dom.removeEventListener(element, 'touchmove', onTouchMove, {
+            dom.removeEventListener(element, "touchmove", onTouchMove, {
                 passive: true
             });
-            dom.removeEventListener(element, 'touchend', onTouchEnd, {
+            dom.removeEventListener(element, "touchend", onTouchEnd, {
                 passive: true
             });
             // this fires in safari due to magnifying class
-            //dom.removeEventListener(element, 'touchcancel', onTouchEnd, {
+            //dom.removeEventListener(element, "touchcancel", onTouchEnd, {
             //    passive: true
             //});
-            dom.removeEventListener(element, 'mousedown', onMouseDown, {
+            dom.removeEventListener(element, "mousedown", onMouseDown, {
                 passive: true
             });
-            dom.removeEventListener(element, 'mouseleave', onMouseOut, {
+            dom.removeEventListener(element, "mouseleave", onMouseOut, {
                 passive: true
             });
-            dom.removeEventListener(element, 'mouseup', onMouseOut, {
+            dom.removeEventListener(element, "mouseup", onMouseOut, {
                 passive: true
             });
         };

src/components/navdrawer/navdrawer.js

@@ -21,13 +21,13 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
         }
 
         function onMenuTouchMove(e) {
-            var isOpen = self.visible,
+            var isOpen = self.visible;
-                touches = getTouches(e),
+            var touches = getTouches(e);
-                touch = touches[0] || {},
+            var touch = touches[0] || {};
-                endX = touch.clientX || 0,
+            var endX = touch.clientX || 0;
-                endY = touch.clientY || 0,
+            var endY = touch.clientY || 0;
-                deltaX = endX - (menuTouchStartX || 0),
+            var deltaX = endX - (menuTouchStartX || 0);
-                deltaY = endY - (menuTouchStartY || 0);
+            var deltaY = endY - (menuTouchStartY || 0);
             setVelocity(deltaX), isOpen && 1 !== dragMode && deltaX > 0 && (dragMode = 2), 0 === dragMode && (!isOpen || Math.abs(deltaX) >= 10) && Math.abs(deltaY) < 5 ? (dragMode = 1, scrollContainer.addEventListener("scroll", disableEvent), self.showMask()) : 0 === dragMode && Math.abs(deltaY) >= 5 && (dragMode = 2), 1 === dragMode && (newPos = currentPos + deltaX, self.changeMenuPos())
         }
 
@@ -36,12 +36,12 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
             scrollContainer.removeEventListener("scroll", disableEvent);
             dragMode = 0;
 
-            var touches = getTouches(e),
+            var touches = getTouches(e);
-                touch = touches[0] || {},
+            var touch = touches[0] || {};
-                endX = touch.clientX || 0,
+            var endX = touch.clientX || 0;
-                endY = touch.clientY || 0,
+            var endY = touch.clientY || 0;
-                deltaX = endX - (menuTouchStartX || 0),
+            var deltaX = endX - (menuTouchStartX || 0);
-                deltaY = endY - (menuTouchStartY || 0);
+            var deltaY = endY - (menuTouchStartY || 0);
 
             currentPos = deltaX;
             self.checkMenuState(deltaX, deltaY);
@@ -78,15 +78,15 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
         }
 
         function onBackgroundTouchStart(e) {
-            var touches = getTouches(e),
+            var touches = getTouches(e);
-                touch = touches[0] || {};
+            var touch = touches[0] || {};
             backgroundTouchStartX = touch.clientX, backgroundTouchStartTime = (new Date).getTime()
         }
 
         function onBackgroundTouchMove(e) {
-            var touches = getTouches(e),
+            var touches = getTouches(e);
-                touch = touches[0] || {},
+            var touch = touches[0] || {};
-                endX = touch.clientX || 0;
+            var endX = touch.clientX || 0;
             if (endX <= options.width && self.isVisible) {
                 countStart++;
                 var deltaX = endX - (backgroundTouchStartX || 0);
@@ -100,10 +100,10 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
         }
 
         function onBackgroundTouchEnd(e) {
-            var touches = getTouches(e),
+            var touches = getTouches(e);
-                touch = touches[0] || {},
+            var touch = touches[0] || {};
-                endX = touch.clientX || 0,
+            var endX = touch.clientX || 0;
-                deltaX = endX - (backgroundTouchStartX || 0);
+            var deltaX = endX - (backgroundTouchStartX || 0);
             self.checkMenuState(deltaX), countStart = 0
         }
 
@@ -111,21 +111,24 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
             var classList = mask.classList;
             classList.contains("backdrop") || classList.add("hide")
         }
-        var self, defaults, mask, newPos = 0,
+        var self;
-            currentPos = 0,
+        var defaults;
-            startPoint = 0,
+        var mask;
-            countStart = 0,
+        var newPos = 0;
-            velocity = 0;
+        var currentPos = 0;
+        var startPoint = 0;
+        var countStart = 0;
+        var velocity = 0;
         options.target.classList.add("transition");
-        var dragMode = 0,
+        var dragMode = 0;
-            scrollContainer = options.target.querySelector(".mainDrawer-scrollContainer");
+        var scrollContainer = options.target.querySelector(".mainDrawer-scrollContainer");
         scrollContainer.classList.add("scrollY");
         var TouchMenuLA = function() {
             self = this, defaults = {
                 width: 260,
                 handleSize: 10,
                 disableMask: !1,
-                maxMaskOpacity: .5
+                maxMaskOpacity: 0.5
             }, this.isVisible = !1, this.initialize()
         };
         TouchMenuLA.prototype.initElements = function() {
@@ -133,8 +136,11 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
                 passive: !0
             }))
         };
-        var menuTouchStartX, menuTouchStartY, menuTouchStartTime, edgeContainer = document.querySelector(".mainDrawerHandle"),
+        var menuTouchStartX;
-            isPeeking = !1;
+        var menuTouchStartY;
+        var menuTouchStartTime;
+        var edgeContainer = document.querySelector(".mainDrawerHandle");
+        var isPeeking = false;
         TouchMenuLA.prototype.animateToPosition = function(pos) {
             requestAnimationFrame(function() {
                 options.target.style.transform = pos ? "translateX(" + pos + "px)" : "none"
@@ -146,7 +152,7 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
                 self.close()
             })
         }, TouchMenuLA.prototype.checkMenuState = function(deltaX, deltaY) {
-            velocity >= .4 ? deltaX >= 0 || Math.abs(deltaY || 0) >= 70 ? self.open() : self.close() : newPos >= 100 ? self.open() : newPos && self.close()
+            velocity >= 0.4 ? deltaX >= 0 || Math.abs(deltaY || 0) >= 70 ? self.open() : self.close() : newPos >= 100 ? self.open() : newPos && self.close()
         }, TouchMenuLA.prototype.open = function() {
             this.animateToPosition(options.width), currentPos = options.width, this.isVisible = !0, options.target.classList.add("drawer-open"), self.showMask(), self.invoke(options.onChange)
         }, TouchMenuLA.prototype.close = function() {
@@ -154,7 +160,8 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
         }, TouchMenuLA.prototype.toggle = function() {
             self.isVisible ? self.close() : self.open()
         };
-        var backgroundTouchStartX, backgroundTouchStartTime;
+        var backgroundTouchStartX;
+        var backgroundTouchStartTime;
         TouchMenuLA.prototype.showMask = function() {
             mask.classList.remove("hide"), mask.offsetWidth, mask.classList.add("backdrop")
         }, TouchMenuLA.prototype.hideMask = function() {

src/components/navdrawer/package.json

@@ -1,3 +0,0 @@
-{
-    "main": "navdrawer.js"
-}

src/components/notifications/notifications.js

@@ -2,7 +2,6 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
     'use strict';
 
     function onOneDocumentClick() {
-
         document.removeEventListener('click', onOneDocumentClick);
         document.removeEventListener('keydown', onOneDocumentClick);
 
@@ -10,28 +9,24 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
             Notification.requestPermission();
         }
     }
+
     document.addEventListener('click', onOneDocumentClick);
     document.addEventListener('keydown', onOneDocumentClick);
 
     var serviceWorkerRegistration;
 
     function closeAfter(notification, timeoutMs) {
-
         setTimeout(function () {
-
             if (notification.close) {
                 notification.close();
-            }
+            } else if (notification.cancel) {
-            else if (notification.cancel) {
                 notification.cancel();
             }
         }, timeoutMs);
     }
 
     function resetRegistration() {
-
         var serviceWorker = navigator.serviceWorker;
-
         if (serviceWorker) {
             serviceWorker.ready.then(function (registration) {
                 serviceWorkerRegistration = registration;
@@ -180,15 +175,12 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
             if (status === 'completed') {
                 notification.title = globalize.translate('PackageInstallCompleted').replace('{0}', installation.Name + ' ' + installation.Version);
                 notification.vibrate = true;
-            }
+            } else if (status === 'cancelled') {
-            else if (status === 'cancelled') {
                 notification.title = globalize.translate('PackageInstallCancelled').replace('{0}', installation.Name + ' ' + installation.Version);
-            }
+            } else if (status === 'failed') {
-            else if (status === 'failed') {
                 notification.title = globalize.translate('PackageInstallFailed').replace('{0}', installation.Name + ' ' + installation.Version);
                 notification.vibrate = true;
-            }
+            } else if (status === 'progress') {
-            else if (status === 'progress') {
                 notification.title = globalize.translate('InstallingPackage').replace('{0}', installation.Name + ' ' + installation.Version);
 
                 notification.actions =

src/components/nowplayingbar/nowplayingbar.js

@@ -42,31 +42,31 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
         // The onclicks are needed due to the return false above
         html += '<div class="nowPlayingBarCenter">';
 
-        html += '<button is="paper-icon-button-light" class="previousTrackButton mediaButton"><i class="md-icon">&#xE045;</i></button>';
+        html += '<button is="paper-icon-button-light" class="previousTrackButton mediaButton"><i class="md-icon">skip_previous</i></button>';
 
-        html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton"><i class="md-icon">&#xE034;</i></button>';
+        html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton"><i class="md-icon">pause</i></button>';
 
         html += '<button is="paper-icon-button-light" class="stopButton mediaButton"><i class="md-icon">stop</i></button>';
-        html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton"><i class="md-icon">&#xE044;</i></button>';
+        html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton"><i class="md-icon">skip_next</i></button>';
 
         html += '<div class="nowPlayingBarCurrentTime"></div>';
         html += '</div>';
 
         html += '<div class="nowPlayingBarRight">';
 
-        html += '<button is="paper-icon-button-light" class="muteButton mediaButton"><i class="md-icon">&#xE050;</i></button>';
+        html += '<button is="paper-icon-button-light" class="muteButton mediaButton"><i class="md-icon">volume_up</i></button>';
 
         html += '<div class="sliderContainer nowPlayingBarVolumeSliderContainer hide" style="width:9em;vertical-align:middle;display:inline-flex;">';
         html += '<input type="range" is="emby-slider" pin step="1" min="0" max="100" value="0" class="slider-medium-thumb nowPlayingBarVolumeSlider"/>';
         html += '</div>';
 
-        html += '<button is="paper-icon-button-light" class="toggleRepeatButton mediaButton"><i class="md-icon">&#xE040;</i></button>';
+        html += '<button is="paper-icon-button-light" class="toggleRepeatButton mediaButton"><i class="md-icon">repeat</i></button>';
 
         html += '<div class="nowPlayingBarUserDataButtons">';
         html += '</div>';
 
-        html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton"><i class="md-icon">&#xE034;</i></button>';
+        html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton"><i class="md-icon">pause</i></button>';
-        html += '<button is="paper-icon-button-light" class="remoteControlButton mediaButton"><i class="md-icon">&#xE05F;</i></button>';
+        html += '<button is="paper-icon-button-light" class="remoteControlButton mediaButton"><i class="md-icon">playlist_play</i></button>';
 
         html += '</div>';
         html += '</div>';
@@ -134,7 +134,8 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
             }
         });
 
-        var i, length;
+        var i;
+        var length;
         playPauseButtons = elem.querySelectorAll('.playPauseButton');
         for (i = 0, length = playPauseButtons.length; i < length; i++) {
             playPauseButtons[i].addEventListener('click', onPlayPauseClick);
@@ -195,7 +196,6 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
         volumeSlider.addEventListener('mousemove', setVolume);
         volumeSlider.addEventListener('touchmove', setVolume);
 
-
         positionSlider = elem.querySelector('.nowPlayingBarPositionSlider');
         positionSlider.addEventListener('change', function () {
 
@@ -282,8 +282,8 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
     }
 
     function updatePlayPauseState(isPaused) {
-
+        var i;
-        var i, length;
+        var length;
 
         if (playPauseButtons) {
             if (isPaused) {
@@ -345,8 +345,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
         if (repeatMode === 'RepeatAll') {
             toggleRepeatButtonIcon.innerHTML = "repeat";
             toggleRepeatButton.classList.add('repeatButton-active');
-        }
+        } else if (repeatMode === 'RepeatOne') {
-        else if (repeatMode === 'RepeatOne') {
             toggleRepeatButtonIcon.innerHTML = "repeat_one";
             toggleRepeatButton.classList.add('repeatButton-active');
         } else {
@@ -401,9 +400,9 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
         }
 
         if (isMuted) {
-            muteButton.querySelector('i').innerHTML = '&#xE04F;';
+            muteButton.querySelector('i').innerHTML = 'volume_off';
         } else {
-            muteButton.querySelector('i').innerHTML = '&#xE050;';
+            muteButton.querySelector('i').innerHTML = 'volume_up';
         }
 
         if (progressElement) {
@@ -572,7 +571,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 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>';
+                    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">favorite</i></button>';
                 });
 
             }

src/components/playback/autoplaydetect.js

@@ -48,9 +48,7 @@ define([], function () {
                 }
 
                 timeout = setTimeout(testAutoplay, 500);
-            }
+            } catch (e) {
-
-            catch (e) {
                 reject();
                 return;
             }

src/components/playback/brightnessosd.js

@@ -11,7 +11,7 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
     function getOsdElementHtml() {
         var html = '';
 
-        html += '<i class="md-icon iconOsdIcon">&#xE1AC;</i>';
+        html += '<i class="md-icon iconOsdIcon">brightness_high</i>';
 
         html += '<div class="iconOsdProgressOuter"><div class="iconOsdProgressInner brightnessOsdProgressInner"></div></div>';
 
@@ -102,12 +102,11 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
 
         if (iconElement) {
             if (brightness >= 80) {
-                iconElement.innerHTML = '&#xE1AC;';
+                iconElement.innerHTML = 'brightness_high';
-            }
+            } else if (brightness >= 20) {
-            else if (brightness >= 20) {
+                iconElement.innerHTML = 'brightness_medium';
-                iconElement.innerHTML = '&#xE1AE;';
             } else {
-                iconElement.innerHTML = '&#xE1AD;';
+                iconElement.innerHTML = 'brightness_low';
             }
         }
         if (progressElement) {

src/components/playback/mediasession.js

@@ -158,7 +158,7 @@ define(['playbackManager', 'nowPlayingHelper', 'events', 'connectionManager'], f
 
         lastUpdateTime = now;
 
-        if (navigator.mediaSession){
+        if (navigator.mediaSession) {
             navigator.mediaSession.metadata = new MediaMetadata({
                 title: title,
                 artist: artist,
@@ -278,7 +278,6 @@ define(['playbackManager', 'nowPlayingHelper', 'events', 'connectionManager'], f
     }
     if (navigator.mediaSession) {
 
-
         navigator.mediaSession.setActionHandler('previoustrack', function () {
             execute('previousTrack');
         });

src/components/playback/nowplayinghelper.js

@@ -43,8 +43,7 @@ define([], function () {
         } else if (nowPlayingItem.Artists && nowPlayingItem.Artists.length) {
 
             bottomText = nowPlayingItem.Artists.join(', ');
-        }
+        } else if (nowPlayingItem.SeriesName || nowPlayingItem.Album) {
-        else if (nowPlayingItem.SeriesName || nowPlayingItem.Album) {
             bottomText = topText;
             topText = nowPlayingItem.SeriesName || nowPlayingItem.Album;
 
@@ -60,8 +59,7 @@ define([], function () {
             } else {
                 topItem = null;
             }
-        }
+        } else if (nowPlayingItem.ProductionYear && includeNonNameInfo !== false) {
-        else if (nowPlayingItem.ProductionYear && includeNonNameInfo !== false) {
             bottomText = nowPlayingItem.ProductionYear;
         }
 

src/components/playback/playbackmanager.js

@@ -107,8 +107,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                     TotalRecordCount: 1
                 };
             });
-        }
+        } else {
-        else {
 
             query.Limit = query.Limit || 300;
             query.Fields = "Chapters";
@@ -182,8 +181,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
             if (container === 'm4a') {
                 return 'audio/mp4';
             }
-        }
+        } else if (type === 'video') {
-        else if (type === 'video') {
             if (container === 'mkv') {
                 return 'video/x-matroska';
             }
@@ -212,8 +210,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
         var results = regex.exec(url);
         if (results == null) {
             return "";
-        }
+        } else {
-        else {
             return decodeURIComponent(results[1].replace(/\+/g, " "));
         }
     }
@@ -649,13 +646,10 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                 // If this is the only way it can be played, then allow it
                 if (!mediaSource.SupportsDirectStream && !mediaSource.SupportsTranscoding) {
                     return Promise.resolve(true);
-                }
+                } else {
-                else {
                     return isHostReachable(mediaSource, apiClient);
                 }
-            }
+            } else if (mediaSource.Protocol === 'File') {
-
-            else if (mediaSource.Protocol === 'File') {
 
                 return new Promise(function (resolve, reject) {
 
@@ -1272,7 +1266,8 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
 
             var currentMediaSource = self.currentMediaSource(player);
             var mediaStreams = [];
-            var i, length;
+            var i;
+            var length;
             for (i = 0, length = currentMediaSource.MediaStreams.length; i < length; i++) {
                 if (currentMediaSource.MediaStreams[i].Type === 'Audio') {
                     mediaStreams.push(currentMediaSource.MediaStreams[i]);
@@ -1316,7 +1311,8 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
 
             var currentMediaSource = self.currentMediaSource(player);
             var mediaStreams = [];
-            var i, length;
+            var i;
+            var length;
             for (i = 0, length = currentMediaSource.MediaStreams.length; i < length; i++) {
                 if (currentMediaSource.MediaStreams[i].Type === 'Subtitle') {
                     mediaStreams.push(currentMediaSource.MediaStreams[i]);
@@ -1360,7 +1356,8 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
         function isAudioStreamSupported(mediaSource, index, deviceProfile) {
 
             var mediaStream;
-            var i, length;
+            var i;
+            var length;
             var mediaStreams = mediaSource.MediaStreams;
 
             for (i = 0, length = mediaStreams.length; i < length; i++) {
@@ -1423,8 +1420,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                     if (isAudioStreamSupported(self.currentMediaSource(player), index, profile)) {
                         player.setAudioStreamIndex(index);
                         getPlayerData(player).audioStreamIndex = index;
-                    }
+                    } else {
-                    else {
                         changeStream(player, getCurrentTicks(player), { AudioStreamIndex: index });
                         getPlayerData(player).audioStreamIndex = index;
                     }
@@ -1595,8 +1591,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                     // Need to change the transcoded stream to remove subs
                     changeStream(player, getCurrentTicks(player), { SubtitleStreamIndex: -1 });
                 }
-            }
+            } else if (!currentStream && newStream) {
-            else if (!currentStream && newStream) {
 
                 if (getDeliveryMethod(newStream) === 'External') {
                     selectedTrackElementIndex = index;
@@ -1607,8 +1602,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                     // Need to change the transcoded stream to add subs
                     changeStream(player, getCurrentTicks(player), { SubtitleStreamIndex: index });
                 }
-            }
+            } else if (currentStream && newStream) {
-            else if (currentStream && newStream) {
 
                 // Switching tracks
                 // We can handle this clientside if the new track is external or the new track is embedded and we're not transcoding
@@ -1865,17 +1859,15 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
             if (firstItem.Type === "Program") {
 
                 promise = getItemsForPlayback(serverId, {
-                    Ids: firstItem.ChannelId,
+                    Ids: firstItem.ChannelId
                 });
-            }
+            } else if (firstItem.Type === "Playlist") {
-            else if (firstItem.Type === "Playlist") {
 
                 promise = getItemsForPlayback(serverId, {
                     ParentId: firstItem.Id,
                     SortBy: options.shuffle ? 'Random' : null
                 });
-            }
+            } else if (firstItem.Type === "MusicArtist") {
-            else if (firstItem.Type === "MusicArtist") {
 
                 promise = getItemsForPlayback(serverId, {
                     ArtistIds: firstItem.Id,
@@ -1885,8 +1877,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                     MediaTypes: "Audio"
                 });
 
-            }
+            } else if (firstItem.MediaType === "Photo") {
-            else if (firstItem.MediaType === "Photo") {
 
                 promise = getItemsForPlayback(serverId, {
                     ParentId: firstItem.ParentId,
@@ -1915,8 +1906,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                     return Promise.resolve(result);
 
                 });
-            }
+            } else if (firstItem.Type === "PhotoAlbum") {
-            else if (firstItem.Type === "PhotoAlbum") {
 
                 promise = getItemsForPlayback(serverId, {
                     ParentId: firstItem.Id,
@@ -1928,8 +1918,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                     Limit: 1000
 
                 });
-            }
+            } else if (firstItem.Type === "MusicGenre") {
-            else if (firstItem.Type === "MusicGenre") {
 
                 promise = getItemsForPlayback(serverId, {
                     GenreIds: firstItem.Id,
@@ -1938,8 +1927,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                     SortBy: options.shuffle ? 'Random' : 'SortName',
                     MediaTypes: "Audio"
                 });
-            }
+            } else if (firstItem.IsFolder) {
-            else if (firstItem.IsFolder) {
 
                 promise = getItemsForPlayback(serverId, mergePlaybackQueries({
 
@@ -1951,8 +1939,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                     MediaTypes: "Audio,Video"
 
                 }, queryOptions));
-            }
+            } else if (firstItem.Type === "Episode" && items.length === 1 && getPlayer(firstItem, options).supportsProgress !== false) {
-            else if (firstItem.Type === "Episode" && items.length === 1 && getPlayer(firstItem, options).supportsProgress !== false) {
 
                 promise = new Promise(function (resolve, reject) {
                     var apiClient = connectionManager.getApiClient(firstItem.ServerId);
@@ -2537,16 +2524,12 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
 
                     playMethod = 'DirectPlay';
 
-                }
+                } else if (mediaSource.StreamUrl) {
-
-                else if (mediaSource.StreamUrl) {
 
                     // Only used for audio
                     playMethod = 'Transcode';
                     mediaUrl = mediaSource.StreamUrl;
-                }
+                } else if (mediaSource.SupportsDirectStream) {
-
-                else if (mediaSource.SupportsDirectStream) {
 
                     directOptions = {
                         Static: true,
@@ -2706,9 +2689,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                             return p.canPlayItem(item, playOptions);
                         }
                         return true;
-                    }
+                    } else if (item.Url && p.canPlayUrl) {
-
-                    else if (item.Url && p.canPlayUrl) {
                         return p.canPlayUrl(item.Url);
                     }
                 }
@@ -3222,8 +3203,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
 
             if (displayErrorCode && typeof (displayErrorCode) === 'string') {
                 showPlaybackInfoErrorMessage(self, displayErrorCode, nextItem);
-            }
+            } else if (nextItem) {
-            else if (nextItem) {
                 self.nextTrack();
             }
         }

src/components/playback/playbackorientation.js

@@ -29,8 +29,7 @@ define(['playbackManager', 'layoutManager', 'events'], function (playbackManager
                         // returns a boolean
                         orientationLocked = promise;
                     }
-                }
+                } catch (err) {
-                catch (err) {
                     onOrientationChangeError(err);
                 }
             }
@@ -46,8 +45,7 @@ define(['playbackManager', 'layoutManager', 'events'], function (playbackManager
             if (unlockOrientation) {
                 try {
                     unlockOrientation();
-                }
+                } catch (err) {
-                catch (err) {
                     console.log('error unlocking orientation: ' + err);
                 }
                 orientationLocked = false;

src/components/playback/playerSelectionMenu.js

@@ -63,17 +63,17 @@ define(['appSettings', 'events', 'browser', 'loading', 'playbackManager', 'appRo
         switch (deviceType) {
 
             case 'smartphone':
-                return '';
+                return 'smartphone';
             case 'tablet':
-                return '';
+                return 'tablet';
             case 'tv':
-                return '';
+                return 'tv';
             case 'cast':
-                return '';
+                return 'cast';
             case 'desktop':
-                return '';
+                return 'computer';
             default:
-                return '';
+                return 'tv';
         }
     }
 
@@ -153,7 +153,6 @@ define(['appSettings', 'events', 'browser', 'loading', 'playbackManager', 'appRo
         });
     }
 
-
     function disconnectFromPlayer(currentDeviceName) {
 
         if (playbackManager.getSupportedCommands().indexOf('EndSession') !== -1) {
@@ -193,7 +192,6 @@ define(['appSettings', 'events', 'browser', 'loading', 'playbackManager', 'appRo
 
             });
 
-
         } else {
 
             playbackManager.setDefaultPlayerActive();
@@ -275,8 +273,7 @@ define(['appSettings', 'events', 'browser', 'loading', 'playbackManager', 'appRo
         dialogHelper.open(dlg).then(function () {
             if (destination === 'nowplaying') {
                 appRouter.showNowPlaying();
-            }
+            } else if (destination === 'disconnectFromPlayer') {
-            else if (destination === 'disconnectFromPlayer') {
                 disconnectFromPlayer(currentDeviceName);
             }
         }, emptyCallback);

src/components/playback/playmethodhelper.js

@@ -9,14 +9,11 @@ define([], function () {
 
         if (session.TranscodingInfo && session.TranscodingInfo.IsVideoDirect) {
             return 'DirectStream';
-        }
+        } else if (session.PlayState.PlayMethod === 'Transcode') {
-        else if (session.PlayState.PlayMethod === 'Transcode') {
             return 'Transcode';
-        }
+        } else if (session.PlayState.PlayMethod === 'DirectStream') {
-        else if (session.PlayState.PlayMethod === 'DirectStream') {
             return 'DirectPlay';
-        }
+        } else if (session.PlayState.PlayMethod === 'DirectPlay') {
-        else if (session.PlayState.PlayMethod === 'DirectPlay') {
             return 'DirectPlay';
         }
     }

src/components/playback/playqueuemanager.js

@@ -65,8 +65,8 @@ define([], function () {
     }
 
     PlayQueueManager.prototype.queueNext = function (items) {
-
+        var i;
-        var i, length;
+        var length;
 
         for (i = 0, length = items.length; i < length; i++) {