Merge remote-tracking branch 'upstream/master' into material-icons

2025-03-30 19:56:21 +00:00 · 2020-01-29 08:45:20 +01:00 · 2020-01-29 08:45:20 +01:00 · cdefae3dee
commit cdefae3dee
parent 0b11883451 5df8202d7d
128 changed files with 5226 additions and 2581 deletions
--- a/src/components/actionsheet/actionsheet.css
+++ b/src/components/actionsheet/actionsheet.css
@ -4,7 +4,7 @@
    padding: 0;
    border: none;
    max-height: 84%;
-    border-radius: .1em !important;
+    border-radius: 0.1em !important;
 }

 .actionsheet-not-fullscreen {
@ -24,7 +24,7 @@

 .actionSheetContent {
    margin: 0 !important;
-    padding: .4em 0 !important;
+    padding: 0.4em 0 !important;
    flex-direction: column;
    display: flex;
    justify-content: center;
@ -45,7 +45,7 @@
 }

 .actionsheetListItemBody {
-    padding: .4em 1em .4em .6em !important;
+    padding: 0.4em 1em 0.4em 0.6em !important;
 }

 .actionSheetItemText {
@ -59,13 +59,13 @@
 }

 .actionSheetItemAsideText {
-    opacity: .7;
+    opacity: 0.7;
    font-size: 90%;
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
    margin-left: 5em;
-    margin-right: .5em;
+    margin-right: 0.5em;
 }

 .actionSheetScroller {
@ -83,14 +83,14 @@
 }

 .actionsheetDivider {
-    height: .07em;
-    margin: .25em 0;
+    height: 0.07em;
+    margin: 0.25em 0;
    flex-shrink: 0;
 }

 .actionSheetTitle {
-    margin: .6em 0 .7em !important;
-    padding: 0 .9em;
+    margin: 0.6em 0 0.7em !important;
+    padding: 0 0.9em;
    flex-grow: 0;
 }

@ -100,7 +100,7 @@
 }

 .actionsheetMenuItemIcon {
-    margin: 0 .85em 0 .45em !important;
+    margin: 0 0.85em 0 0.45em !important;
    padding: 0 !important;
 }

@ -110,6 +110,6 @@

 .btnCloseActionSheet {
    position: fixed;
-    top: .75em;
-    left: .5em;
+    top: 0.75em;
+    left: 0.5em;
 }
--- a/src/components/alphapicker/style.css
+++ b/src/components/alphapicker/style.css
@ -35,16 +35,15 @@
    font-size: inherit;
    min-width: initial;
    margin: 0;
-    padding: .1em .4em;
+    padding: 0.1em 0.4em;
    width: auto;
-    border-radius: .1em;
+    border-radius: 0.1em;
    font-weight: normal;
    flex-shrink: 0;
    flex-grow: 1;
 }

@media all and (max-height: 50em) {
-
    .alphaPicker-fixed {
        bottom: 5em;
    }
@ -56,14 +55,12 @@
 }

@media all and (max-height: 49em) {
-
    .alphaPicker-vertical {
        font-size: 94%;
    }
 }

@media all and (max-height: 44em) {
-
    .alphaPicker-vertical {
        font-size: 90%;
    }
@ -75,14 +72,12 @@
 }

@media all and (max-height: 37em) {
-
    .alphaPicker-vertical {
        font-size: 82%;
    }
 }

@media all and (max-height: 32em) {
-
    .alphaPicker-vertical {
        font-size: 74%;
    }
@ -113,15 +108,14 @@
 }

 .alphaPicker-fixed-left {
-    left: .4em;
+    left: 0.4em;
 }

 .alphaPicker-fixed-right {
-    right: .4em;
+    right: 0.4em;
 }

@media all and (min-width: 62.5em) {
-
    .alphaPicker-fixed-left {
        left: 1em;
    }
@ -132,7 +126,6 @@
 }

@media all and (max-height: 31.25em) {
-
    .alphaPicker-fixed {
        display: none !important;
    }
--- a/src/components/appSettings.js
+++ b/src/components/appSettings.js
@ -1,135 +0,0 @@
-define(['appStorage', 'events'], function (appStorage, events) {
-    'use strict';
-
-    function getKey(name, userId) {
-        if (userId) {
-            name = userId + '-' + name;
-        }
-
-        return name;
-    }
-
-    function AppSettings() {
-
-    }
-
-    AppSettings.prototype.enableAutoLogin = function (val) {
-        if (val != null) {
-            this.set('enableAutoLogin', val.toString());
-        }
-        return this.get('enableAutoLogin') !== 'false';
-    };
-
-    AppSettings.prototype.enableAutomaticBitrateDetection = function (isInNetwork, mediaType, val) {
-        var key = 'enableautobitratebitrate-' + mediaType + '-' + isInNetwork;
-        if (val != null) {
-            if (isInNetwork && mediaType === 'Audio') {
-                val = true;
-            }
-
-            this.set(key, val.toString());
-        }
-
-        if (isInNetwork && mediaType === 'Audio') {
-            return true;
-        } else {
-            return this.get(key) !== 'false';
-        }
-    };
-
-    AppSettings.prototype.maxStreamingBitrate = function (isInNetwork, mediaType, val) {
-        var key = 'maxbitrate-' + mediaType + '-' + isInNetwork;
-        if (val != null) {
-            if (isInNetwork && mediaType === 'Audio') {
-                //  nothing to do, this is always a max value
-            } else {
-                this.set(key, val);
-            }
-        }
-
-        if (isInNetwork && mediaType === 'Audio') {
-            // return a huge number so that it always direct plays
-            return 150000000;
-        } else {
-            return parseInt(this.get(key) || '0') || 1500000;
-        }
-    };
-
-    AppSettings.prototype.maxStaticMusicBitrate = function (val) {
-        if (val !== undefined) {
-            this.set('maxStaticMusicBitrate', val);
-        }
-
-        var defaultValue = 320000;
-        return parseInt(this.get('maxStaticMusicBitrate') || defaultValue.toString()) || defaultValue;
-    };
-
-    AppSettings.prototype.maxChromecastBitrate = function (val) {
-        if (val != null) {
-            this.set('chromecastBitrate1', val);
-        }
-
-        val = this.get('chromecastBitrate1');
-        return val ? parseInt(val) : null;
-    };
-
-    AppSettings.prototype.syncOnlyOnWifi = function (val) {
-        if (val != null) {
-            this.set('syncOnlyOnWifi', val.toString());
-        }
-
-        return this.get('syncOnlyOnWifi') !== 'false';
-    };
-
-    AppSettings.prototype.syncPath = function (val) {
-        if (val != null) {
-            this.set('syncPath', val);
-        }
-
-        return this.get('syncPath');
-    };
-
-    AppSettings.prototype.cameraUploadServers = function (val) {
-        if (val != null) {
-            this.set('cameraUploadServers', val.join(','));
-        }
-
-        val = this.get('cameraUploadServers');
-        if (val) {
-            return val.split(',');
-        }
-
-        return [];
-    };
-
-    AppSettings.prototype.runAtStartup = function (val) {
-        if (val != null) {
-            this.set('runatstartup', val.toString());
-        }
-
-        return this.get('runatstartup') === 'true';
-    };
-
-    AppSettings.prototype.set = function (name, value, userId) {
-        var currentValue = this.get(name, userId);
-        appStorage.setItem(getKey(name, userId), value);
-
-        if (currentValue !== value) {
-            events.trigger(this, 'change', [name]);
-        }
-    };
-
-    AppSettings.prototype.get = function (name, userId) {
-        return appStorage.getItem(getKey(name, userId));
-    };
-
-    AppSettings.prototype.enableSystemExternalPlayers = function (val) {
-        if (val != null) {
-            this.set('enableSystemExternalPlayers', val.toString());
-        }
-
-        return this.get('enableSystemExternalPlayers') === 'true';
-    };
-
-    return new AppSettings();
-});
--- a/src/components/appfooter/appfooter.css
+++ b/src/components/appfooter/appfooter.css
@ -8,6 +8,6 @@
    contain: layout style;
 }

-    .appfooter.headroom--unpinned {
-        transform: translateY(100%)!important;
-    }
+.appfooter.headroom--unpinned {
+    transform: translateY(100%) !important;
+}
--- a/src/components/apphost.js
+++ b/src/components/apphost.js
@ -168,23 +168,25 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
            return false;
        }

-        var savedResult = appSettings.get(htmlMediaAutoplayAppStorageKey);
-        return "true" === savedResult || "false" !== savedResult && null;
+        return true;
    }

-    function cueSupported() {
+    function supportsCue() {
        try {
            var video = document.createElement("video");
            var style = document.createElement("style");
+
            style.textContent = "video::cue {background: inherit}";
            document.body.appendChild(style);
            document.body.appendChild(video);
+
            var cue = window.getComputedStyle(video, "::cue").background;
            document.body.removeChild(style);
            document.body.removeChild(video);
+
            return !!cue.length;
        } catch (err) {
-            console.log("Error detecting cue support:" + err);
+            console.log("error detecting cue support: " + err);
            return false;
        }
    }
@ -204,8 +206,6 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
        }
    }

-    var htmlMediaAutoplayAppStorageKey = "supportshtmlmediaautoplay0";
-
    var supportedFeatures = function () {
        var features = [];

@ -280,7 +280,7 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
        //features.push("multiserver");
        features.push("screensaver");

-        if (!browser.orsay && !browser.tizen && !browser.msie && (browser.firefox || browser.ps4 || browser.edge || cueSupported())) {
+        if (!browser.orsay && !browser.tizen && !browser.msie && (browser.firefox || browser.ps4 || browser.edge || supportsCue())) {
            features.push("subtitleappearancesettings");
        }

@ -299,18 +299,6 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
        return features;
    }();

-    if (supportedFeatures.indexOf("htmlvideoautoplay") === -1 && supportsHtmlMediaAutoplay() !== false) {
-        require(["autoPlayDetect"], function (autoPlayDetect) {
-            autoPlayDetect.supportsHtmlMediaAutoplay().then(function () {
-                appSettings.set(htmlMediaAutoplayAppStorageKey, "true");
-                supportedFeatures.push("htmlvideoautoplay");
-                supportedFeatures.push("htmlaudioautoplay");
-            }, function () {
-                appSettings.set(htmlMediaAutoplayAppStorageKey, "false");
-            });
-        });
-    }
-
    var deviceId;
    var deviceName;
    var appName = "Jellyfin Web";
@ -395,7 +383,9 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
            }
        }
    };
+
    var doc = self.document;
+    var isHidden = false;

    if (doc) {
        if (void 0 !== doc.visibilityState) {
@ -419,8 +409,6 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
        }
    }

-    var isHidden = false;
-
    if (doc) {
        doc.addEventListener(visibilityChange, function () {
            if (document[visibilityState]) {
--- a/src/components/cardbuilder/card.css
+++ b/src/components/cardbuilder/card.css
@ -1,24 +1,24 @@
+button {
+    -webkit-border-fit: border !important;
+}
+
 button::-moz-focus-inner {
    padding: 0;
    border: 0;
 }

-button {
-    -webkit-border-fit: border !important;
-}
-
 .card {
    border: 0;
    font-size: inherit !important;
    font-family: inherit !important;
    text-transform: none;
-    background-color: transparent !important;
    background: none !important;
+    background-color: transparent !important;
    margin: 0;
    padding: 0;
    display: block;
    color: inherit !important;
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    outline: none !important;
    cursor: pointer;
    contain: layout style;
@ -55,17 +55,27 @@ button {
    contain: layout style;
 }

-.cardPadder-backdrop, .cardPadder-mixedBackdrop, .cardPadder-smallBackdrop, .cardPadder-overflowBackdrop, .cardPadder-overflowSmallBackdrop {
+.cardPadder-backdrop,
+.cardPadder-mixedBackdrop,
+.cardPadder-smallBackdrop,
+.cardPadder-overflowBackdrop,
+.cardPadder-overflowSmallBackdrop {
    padding-bottom: 56.25%;
    contain: strict;
 }

-.cardPadder-square, .cardPadder-mixedSquare, .cardPadder-overflowSquare, .overflowSquareCard-textCardPadder {
+.cardPadder-square,
+.cardPadder-mixedSquare,
+.cardPadder-overflowSquare,
+.overflowSquareCard-textCardPadder {
    padding-bottom: 100%;
    contain: strict;
 }

-.cardPadder-portrait, .cardPadder-mixedPortrait, .cardPadder-overflowPortrait, .overflowPortraitCard-textCardPadder {
+.cardPadder-portrait,
+.cardPadder-mixedPortrait,
+.cardPadder-overflowPortrait,
+.overflowPortraitCard-textCardPadder {
    padding-bottom: 150%;
    contain: strict;
 }
@ -80,25 +90,26 @@ button {
    margin: 0.6em;
    transition: none;
    border: 0 solid transparent;
+
    /* These both are needed in case cardBox is a button */
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    outline: none !important;
    contain: layout;
    contain: style;
 }

+.card.show-animation .cardBox {
+    will-change: transform;
+    transition: transform 200ms ease-out;
+}
+
 .card.show-focus:not(.show-animation) .cardBox {
-    margin: .4em;
+    margin: 0.4em;
 }

 .card.show-focus:not(.show-animation) .cardBox.visualCardBox,
 .card.show-focus:not(.show-animation) .cardBox:not(.visualCardBox) .cardScalable {
-    border: .5em solid transparent;
-}
-
-.card.show-animation .cardBox {
-    will-change: transform;
-    transition: transform 200ms ease-out;
+    border: 0.5em solid transparent;
 }

 .card.show-animation:focus > .cardBox {
@ -123,7 +134,7 @@ button {

 .btnCardOptions {
    position: absolute;
-    bottom: .25em;
+    bottom: 0.25em;
    right: 0;
    margin: 0 !important;
    z-index: 1;
@ -134,8 +145,8 @@ button {
    position: absolute;
    align-items: center;
    justify-content: center;
-    top: .3em;
-    left: .3em;
+    top: 0.3em;
+    left: 0.3em;
    text-align: center;
    vertical-align: middle;
    width: 1.6em;
@ -156,6 +167,7 @@ button {
    position: relative;
    background-clip: content-box !important;
    color: inherit;
+
    /* This is only needed for scalable cards */
    height: 100%;
    contain: strict;
@ -177,13 +189,16 @@ button {
    left: 0;
    right: 0;
    bottom: 0;
+
    /* Needed in case this is a button */
    display: block;
+
    /* Needed in case this is a button */
    margin: 0 !important;
+
    /* Needed in safari */
    height: 100%;
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    outline: none !important;
    contain: strict;
 }
@ -212,10 +227,6 @@ button {
    box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
 }

-.cardImageContainer {
-    display: flex;
-}
-
 .cardImage {
    position: absolute;
    top: 0;
@ -231,6 +242,7 @@ button {
 .cardImage-img {
    max-height: 100%;
    max-width: 100%;
+
    /* This is simply for lazy image purposes, to ensure the image is visible sooner when scrolling */
    min-height: 70%;
    min-width: 70%;
@ -257,17 +269,17 @@ button {
 }

 .cardFooter {
-    padding: .3em .3em .5em .3em;
+    padding: 0.3em 0.3em 0.5em 0.3em;
    position: relative;
 }

 .visualCardBox {
    box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
-    border-radius: .145em;
+    border-radius: 0.145em;
 }

 .innerCardFooter {
-    background: rgba(0,0,0,.7);
+    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    bottom: 0;
    left: 0;
@ -287,7 +299,7 @@ button {
 }

 .cardText {
-    padding: .06em .5em;
+    padding: 0.06em 0.5em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
@ -299,7 +311,24 @@ button {
 }

 .cardText-first {
-    padding-top: .24em;
+    padding-top: 0.24em;
+}
+
+.textActionButton {
+    border: 0 !important;
+    background: transparent;
+    padding: 0 !important;
+    cursor: pointer;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    outline: none !important;
+    color: inherit;
+    vertical-align: middle;
+    font-family: inherit;
+    font-size: inherit;
+}
+
+.textActionButton:hover {
+    text-decoration: underline;
 }

 .cardText > .textActionButton {
@ -309,7 +338,7 @@ button {
 }

 .innerCardFooter > .cardText {
-    padding: .3em .5em;
+    padding: 0.3em 0.5em;
 }

 .cardFooter-withlogo {
@ -341,24 +370,6 @@ button {
    text-align: center;
 }

-.textActionButton {
-    border: 0 !important;
-    background: transparent;
-    border: 0 !important;
-    padding: 0 !important;
-    cursor: pointer;
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
-    outline: none !important;
-    color: inherit;
-    vertical-align: middle;
-    font-family: inherit;
-    font-size: inherit;
-}
-
-.textActionButton:hover {
-    text-decoration: underline;
-}
-
 .cardImageIcon {
    font-size: 5em;
    color: inherit;
@ -366,12 +377,12 @@ button {

 .cardImageIcon-small {
    font-size: 3em;
-    margin-bottom: .1em;
+    margin-bottom: 0.1em;
 }

 .cardIndicators {
-    right: .225em;
-    top: .225em;
+    right: 0.225em;
+    top: 0.225em;
    position: absolute;
    display: flex;
    align-items: center;
@ -388,16 +399,16 @@ button {
 }

 .programAttributeIndicator {
-    padding: .18em .5em;
+    padding: 0.18em 0.5em;
    color: #fff;
    font-weight: 500;
 }

 .cardOverlayButton {
-    color: rgba(255, 255, 255, .76);
+    color: rgba(255, 255, 255, 0.76);
    margin: 0;
    z-index: 1;
-    padding: .75em;
+    padding: 0.75em;
    font-size: 88%;
 }

@ -408,7 +419,7 @@ button {
 }

 .cardOverlayButtonIcon {
-    background-color: rgba(0,0,0,.7) !important;
+    background-color: rgba(0, 0, 0, 0.7) !important;
    border-radius: 100em;
    width: 1.5em !important;
    height: 1.5em !important;
@ -430,10 +441,10 @@ button {
    height: 2.6em;
    top: 50%;
    left: 50%;
-    background-color: rgba(0,0,0,.5) !important;
-    border: .06em solid rgba(255,255,255,.6);
-    padding: .38em !important;
-    color: rgba(255, 255, 255, .76);
+    background-color: rgba(0, 0, 0, 0.5) !important;
+    border: 0.06em solid rgba(255, 255, 255, 0.6);
+    padding: 0.38em !important;
+    color: rgba(255, 255, 255, 0.76);
    transition: transform 200ms ease-out;
 }

@ -480,13 +491,15 @@ button {
        width: 33.333333333333333333333333333333%;
    }

-    .squareCard, .portraitCard {
+    .squareCard,
+    .portraitCard {
        width: 33.333333333333333333333333333333%;
    }
 }

@media (min-width: 43.75em) {
-    .squareCard, .portraitCard {
+    .squareCard,
+    .portraitCard {
        width: 25%;
    }
 }
@ -502,7 +515,8 @@ button {
        width: 50%;
    }

-    .squareCard, .portraitCard {
+    .squareCard,
+    .portraitCard {
        width: 20%;
    }

@ -522,7 +536,8 @@ button {
        width: 25%;
    }

-    .squareCard, .portraitCard {
+    .squareCard,
+    .portraitCard {
        width: 16.666666666666666666666666666667%;
    }

@ -535,9 +550,9 @@ button {
    }
 }

-
@media (min-width: 87.5em) {
-    .squareCard, .portraitCard {
+    .squareCard,
+    .portraitCard {
        width: 14.285714285714285714285714285714%;
    }

@ -555,13 +570,15 @@ button {
        width: 20%;
    }

-    .squareCard, .portraitCard {
+    .squareCard,
+    .portraitCard {
        width: 12.5%;
    }
 }

@media (min-width: 120em) {
-    .squareCard, .portraitCard {
+    .squareCard,
+    .portraitCard {
        width: 11.111111111111111111111111111111%;
    }
 }
@ -571,7 +588,8 @@ button {
        width: 25%;
    }

-    .squareCard, .portraitCard {
+    .squareCard,
+    .portraitCard {
        width: 10%;
    }
 }
@ -602,7 +620,8 @@ button {
    width: 72vw;
 }

-.overflowSquareCard, .overflowPortraitCard {
+.overflowSquareCard,
+.overflowPortraitCard {
    width: 40vw;
 }

@ -627,29 +646,34 @@ button {
 }

@media (min-width: 43.75em) {
-    .overflowSquareCard, .overflowPortraitCard {
+    .overflowSquareCard,
+    .overflowPortraitCard {
        width: 23.1vw;
    }
 }

@media (min-width: 48.125em) {
-    .overflowBackdropCard, .overflowSmallBackdropCard {
+    .overflowBackdropCard,
+    .overflowSmallBackdropCard {
        width: 30vw;
    }
 }

@media (orientation: landscape) {
-    .overflowBackdropCard, .overflowSmallBackdropCard {
+    .overflowBackdropCard,
+    .overflowSmallBackdropCard {
        width: 30vw;
    }

-    .overflowSquareCard, .overflowPortraitCard {
+    .overflowSquareCard,
+    .overflowPortraitCard {
        width: 23.1vw;
    }
 }

@media (orientation: landscape) and (min-width: 48.125em) {
-    .overflowBackdropCard, .overflowSmallBackdropCard {
+    .overflowBackdropCard,
+    .overflowSmallBackdropCard {
        width: 23.1vw;
    }
 }
@ -661,55 +685,60 @@ button {
 }

@media (min-width: 50em) {
-    .overflowSquareCard, .overflowPortraitCard {
+    .overflowSquareCard,
+    .overflowPortraitCard {
        width: 18.5vw;
    }
 }

@media (min-width: 75em) {
-    .overflowBackdropCard, .overflowSmallBackdropCard {
+    .overflowBackdropCard,
+    .overflowSmallBackdropCard {
        width: 23.1vw;
    }

-    .overflowSquareCard, .overflowPortraitCard {
+    .overflowSquareCard,
+    .overflowPortraitCard {
        width: 15.5vw;
    }
 }

@media (min-width: 87.5em) {
-    .overflowSquareCard, .overflowPortraitCard {
+    .overflowSquareCard,
+    .overflowPortraitCard {
        width: 13.3vw;
    }
 }

@media (min-width: 100em) {
-
-    .overflowBackdropCard, .overflowSmallBackdropCard {
+    .overflowBackdropCard,
+    .overflowSmallBackdropCard {
        width: 18.7vw;
    }

-    .overflowSquareCard, .overflowPortraitCard {
+    .overflowSquareCard,
+    .overflowPortraitCard {
        width: 11.6vw;
    }
 }

@media (min-width: 120em) {
-
-    .overflowSquareCard, .overflowPortraitCard {
+    .overflowSquareCard,
+    .overflowPortraitCard {
        width: 10.3vw;
    }
 }

@media (min-width: 131.25em) {
-
-    .overflowSquareCard, .overflowPortraitCard {
+    .overflowSquareCard,
+    .overflowPortraitCard {
        width: 9.3vw;
    }
 }

@media (min-width: 156.25em) {
-
-    .overflowBackdropCard, .overflowSmallBackdropCard {
+    .overflowBackdropCard,
+    .overflowSmallBackdropCard {
        width: 15.6vw;
    }
 }
@ -726,7 +755,8 @@ button {
    padding-bottom: 87.75%;
 }

-.itemsContainer-tv > .overflowSquareCard, .itemsContainer-tv > .overflowPortraitCard {
+.itemsContainer-tv > .overflowSquareCard,
+.itemsContainer-tv > .overflowPortraitCard {
    width: 15.6vw;
 }

@ -735,9 +765,9 @@ button {
 }

 .cardOverlayContainer {
-    background: rgba(0,0,0,0.5);
+    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
-    transition: opacity .2s;
+    transition: opacity 0.2s;
    position: absolute;
    top: 0;
    left: 0;
@ -766,7 +796,7 @@ button {
 }

 .cardOverlayFab-primary {
-    background-color: rgba(0,0,0,0.7);
+    background-color: rgba(0, 0, 0, 0.7);
    font-size: 130%;
    padding: 0;
    width: 3em;
--- a/src/components/cardbuilder/cardBuilder.js
+++ b/src/components/cardbuilder/cardBuilder.js
@ -1018,7 +1018,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                return text;
            }

-            var html = '<button ' + itemShortcuts.getShortcutAttributesHtml(item, serverId) + ' type="button" class="itemAction textActionButton" data-action="link">';
+            var html = '<button ' + itemShortcuts.getShortcutAttributesHtml(item, serverId) + ' type="button" class="itemAction textActionButton" title="' + text + '" data-action="link">';
            html += text;
            html += '</button>';

--- a/src/components/dialogHelper/dialoghelper.css
+++ b/src/components/dialogHelper/dialoghelper.css
@ -15,11 +15,12 @@

 .dialog {
    margin: 0;
-    border-radius: .2em;
+    border-radius: 0.2em;
    -webkit-font-smoothing: antialiased;
    border: 0;
    padding: 0;
    will-change: transform, opacity;
+
    /* Strict does not work well with actionsheet */
    contain: style paint;
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4);
@ -51,13 +52,13 @@

    to {
        opacity: 0;
-        transform: scale(.5);
+        transform: scale(0.5);
    }
 }

@keyframes scaleup {
    from {
-        transform: scale(.5);
+        transform: scale(0.5);
        opacity: 0;
    }

@ -78,7 +79,6 @@
 }

@keyframes fadeout {
-
    from {
        opacity: 1;
    }
@ -101,7 +101,6 @@
 }

@keyframes slidedown {
-
    from {
        opacity: 1;
        transform: none;
@ -114,8 +113,8 @@
 }

@media all and (max-width: 80em), all and (max-height: 45em) {
-
-    .dialog-fixedSize, .dialog-fullscreen-lowres {
+    .dialog-fixedSize,
+    .dialog-fullscreen-lowres {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
@ -127,7 +126,6 @@
 }

@media all and (min-width: 80em) and (min-height: 45em) {
-
    .dialog-medium {
        width: 80%;
        height: 80%;
@ -169,5 +167,5 @@
 }

 .dialogBackdropOpened {
-    opacity: .5;
+    opacity: 0.5;
 }
--- a/src/components/directorybrowser/directorybrowser.css
+++ b/src/components/directorybrowser/directorybrowser.css
@ -1,8 +1,8 @@
 #ulDirectoryPickerList a {
-    padding-top: .4em;
-    padding-bottom: .4em
+    padding-top: 0.4em;
+    padding-bottom: 0.4em;
 }

 .lblDirectoryPickerPath {
-    white-space: nowrap
-}
+    white-space: nowrap;
+}
--- a/src/components/emby-scrollbuttons/emby-scrollbuttons.css
+++ b/src/components/emby-scrollbuttons/emby-scrollbuttons.css
@ -4,11 +4,11 @@
    right: 0;
    align-items: center;
    justify-content: center;
-    min-width:104px;
-    min-height:24px;
+    min-width: 104px;
+    min-height: 24px;
    padding-top: 1.25em;
    z-index: 1;
-    color: #ffffff;
+    color: #fff;
    display: flex;
 }

--- a/src/components/filterdialog/style.css
+++ b/src/components/filterdialog/style.css
@ -8,29 +8,29 @@
    -webkit-border-radius: 0 !important;
    border-radius: 0 !important;
    max-height: none !important;
-    max-width: none !important
+    max-width: none !important;
 }

-@media all and (min-height:600px) {
+@media all and (min-height: 600px) {
    .dynamicFilterDialog {
        top: 10% !important;
-        bottom: 25% !important
+        bottom: 25% !important;
    }
 }

-@media all and (max-width:400px) {
+@media all and (max-width: 400px) {
    .dynamicFilterDialog {
        width: auto;
        left: 10vw !important;
        right: 10vw !important;
-        margin-left: 0 !important
+        margin-left: 0 !important;
    }
 }

-@media all and (min-width:400px) {
+@media all and (min-width: 400px) {
    .dynamicFilterDialog {
        width: 20.16em;
        margin-left: -10.08em !important;
-        left: 50% !important
+        left: 50% !important;
    }
 }
--- a/src/components/formdialog.css
+++ b/src/components/formdialog.css
@ -5,14 +5,15 @@
 }

 .formDialogHeader {
-    padding: 1em .5em;
+    padding: 1em 0.5em;
    display: flex;
    align-items: center;
    flex-shrink: 0;
 }

 .formDialogHeaderTitle {
-    margin-left: .25em;
+    margin-left: 0.25em;
+
    /* In case of h1, h2, h3 */
    margin-top: 0;
    margin-bottom: 0;
@ -23,7 +24,7 @@
 }

 .dialogContentInner {
-    padding: .5em 1em 20em 1em;
+    padding: 0.5em 1em 20em 1em;
 }

 .dialogContentInner-mini {
@ -46,6 +47,7 @@
    display: flex;
    position: absolute;
    padding: 1.25em 1em;
+
    /* Without this emby-checkbox is able to appear on top */
    z-index: 1;
    align-items: center;
@ -62,11 +64,11 @@
    padding-bottom: 1.5em;
    flex-direction: column;
    width: 80% !important;
-    padding-top: .5em;
+    padding-top: 0.5em;
 }

 .formDialogFooterItem {
-    margin: .5em !important;
+    margin: 0.5em !important;
    flex-grow: 1;
    text-align: center;
    flex-basis: 0;
@ -91,7 +93,6 @@
 }

@media all and (min-width: 50em) {
-
    .formDialogFooterItem {
        max-width: 80%;
    }
@ -103,7 +104,6 @@
 }

@media all and (min-width: 80em) {
-
    .formDialogFooterItem {
        max-width: 70%;
    }
--- a/src/components/guide/guide.css
+++ b/src/components/guide/guide.css
@ -14,12 +14,12 @@
 }

 .layout-desktop .tvGuideHeader {
-    margin-bottom: .5em;
+    margin-bottom: 0.5em;
 }

 .guideHeaderDateSelection {
    font-size: 86%;
-    padding: .4em 0;
+    padding: 0.4em 0;
 }

 .guide-headerTimeslots {
@ -39,10 +39,10 @@

 .guideProgramIndicator {
    text-transform: uppercase;
-    border-radius: .25em;
-    margin-right: .5em;
+    border-radius: 0.25em;
+    margin-right: 0.5em;
    font-size: 82%;
-    padding: .2em .25em;
+    padding: 0.2em 0.25em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
@ -51,6 +51,8 @@
 }

 .guide-channelTimeslotHeader {
+    border: 0 !important;
+    border-right-color: transparent;
    flex-shrink: 0;
    justify-content: center;
 }
@ -69,9 +71,14 @@
 }

 .channelPrograms {
+    height: 4.42em;
+    contain: strict;
+    display: flex;
+    flex-direction: column;
+    border-style: solid;
+    border-width: 1px 0 1px 0;
    white-space: nowrap;
    position: relative;
-    contain: strict;
    box-sizing: border-box;
 }

@ -80,31 +87,32 @@
 }

 .guideSpacer {
-    width: .3em;
+    width: 0.3em;
    flex-shrink: 0;
 }

-.channelPrograms, .timeslotHeadersInner {
+.channelPrograms,
+.timeslotHeadersInner {
    width: 1800vw;
 }

@media all and (min-width: 37.5em) {
-
-    .channelPrograms, .timeslotHeadersInner {
+    .channelPrograms,
+    .timeslotHeadersInner {
        width: 1400vw;
    }
 }

@media all and (min-width: 50em) {
-
-    .channelPrograms, .timeslotHeadersInner {
+    .channelPrograms,
+    .timeslotHeadersInner {
        width: 1200vw;
    }
 }

@media all and (min-width: 80em) {
-
-    .channelPrograms, .timeslotHeadersInner {
+    .channelPrograms,
+    .timeslotHeadersInner {
        width: 810vw;
    }
 }
@ -112,11 +120,17 @@
 .timeslotHeader {
    display: inline-flex;
    align-items: center;
-    text-indent: .25em;
+    text-indent: 0.25em;
    width: 2.0833333333333333333333333333333%;
 }

-.guide-channelHeaderCell, .guide-channelTimeslotHeader {
+.programCell,
+.guide-channelHeaderCell {
+    outline: none !important;
+}
+
+.guide-channelHeaderCell,
+.guide-channelTimeslotHeader {
    padding: 0 !important;
    cursor: pointer;
    outline: none !important;
@ -130,11 +144,12 @@
    display: flex;
    align-items: center;
    text-decoration: none;
+
    /* Needed in firefox */
    text-align: left;
    contain: strict;
    flex-shrink: 0;
-    border-radius: .12em;
+    border-radius: 0.12em;
    color: inherit;
 }

@ -148,37 +163,38 @@
    background: transparent;
 }

-.guide-channelTimeslotHeader {
-    border: 0 !important;
-}
-
 /* Important - have to put the fixed width on channelsContainer, not the individual channelHeaderCell
   This was causing channelsContainer to extend beyond the fixed width on ps4, tizen, lg and opera tv.
 */
-.channelsContainer, .guide-channelTimeslotHeader {
+.channelsContainer,
+.guide-channelTimeslotHeader {
    width: 24vw;
 }

-@media all and (min-width:31.25em) {
-    .channelsContainer, .guide-channelTimeslotHeader {
+@media all and (min-width: 31.25em) {
+    .channelsContainer,
+    .guide-channelTimeslotHeader {
        width: 16vw;
    }
 }

-@media all and (min-width:37.5em) {
-    .channelsContainer, .guide-channelTimeslotHeader {
+@media all and (min-width: 37.5em) {
+    .channelsContainer,
+    .guide-channelTimeslotHeader {
        width: 16vw;
    }
 }

-@media all and (min-width:50em) {
-    .channelsContainer, .guide-channelTimeslotHeader {
+@media all and (min-width: 50em) {
+    .channelsContainer,
+    .guide-channelTimeslotHeader {
        width: 14vw;
    }
 }

-@media all and (min-width:80em) {
-    .channelsContainer, .guide-channelTimeslotHeader {
+@media all and (min-width: 80em) {
+    .channelsContainer,
+    .guide-channelTimeslotHeader {
        width: 12vw;
    }
 }
@ -197,34 +213,26 @@
 }

@media all and (max-width: 50em) {
-
-    .newTvProgram, .liveTvProgram, .premiereTvProgram, .guideHdIcon {
+    .newTvProgram,
+    .liveTvProgram,
+    .premiereTvProgram,
+    .guideHdIcon {
        display: none;
    }
 }

-.channelPrograms {
-    height: 4.42em;
-    contain: strict;
-    display: flex;
-    flex-direction: column;
-    border-style: solid;
-    border-width: 1px 0 1px 0;
+.channelPrograms + .channelPrograms,
+.guide-channelHeaderCell + .guide-channelHeaderCell {
+    margin-top: -1px;
 }

-    .channelPrograms + .channelPrograms, .guide-channelHeaderCell + .guide-channelHeaderCell {
-        margin-top: -1px;
-    }
-
-.channelPrograms-tv, .guide-channelHeaderCell-tv {
+.channelPrograms-tv,
+.guide-channelHeaderCell-tv {
    height: 3em;
 }

-.guide-channelTimeslotHeader {
-    border-right-color: transparent;
-}
-
-.guide-channelTimeslotHeader, .timeslotHeader {
+.guide-channelTimeslotHeader,
+.timeslotHeader {
    background: transparent !important;
    height: 2.8em;
 }
@ -253,6 +261,7 @@
    text-decoration: none;
    overflow: hidden;
    align-items: center;
+
    /* Needed for Firefox */
    text-align: left;
    contain: strict;
@ -261,7 +270,7 @@
 }

 .guideProgramName {
-    padding: 0 .7em 0;
+    padding: 0 0.7em 0;
    overflow: hidden;
    text-overflow: ellipsis;
    align-items: center;
@ -269,7 +278,8 @@
    position: relative;
    flex-grow: 1;
    contain: layout style paint;
-    /*transition: transform 60ms ease-out;*/
+
+    /* transition: transform 60ms ease-out; */
 }

 .guide-programNameCaret {
@ -289,11 +299,11 @@
 .guideProgramSecondaryInfo {
    display: flex;
    align-items: center;
-    margin-top: .1em;
+    margin-top: 0.1em;
 }

 .programIcon {
-    margin-left: .5em;
+    margin-left: 0.5em;
    height: 1em;
    width: 1em;
    font-size: 1.6em;
@ -304,16 +314,16 @@

 .guide-programTextIcon {
    font-weight: bold;
-    font-size: .9em;
-    padding: .16em .3em;
-    border-radius: .25em;
-    margin-right: .35em;
+    font-size: 0.9em;
+    padding: 0.16em 0.3em;
+    border-radius: 0.25em;
+    margin-right: 0.35em;
    width: auto;
    height: auto;
 }

 .guide-programTextIcon-tv {
-    font-size: .74em;
+    font-size: 0.74em;
 }

 .guideChannelNumber {
@ -345,14 +355,12 @@
 }

@media all and (min-width: 62.5em) {
-
    .guideChannelName {
        max-width: 40%;
    }
 }

@media all and (max-width: 62.5em) {
-
    .guideChannelNumber {
        display: none;
    }
@ -368,21 +376,19 @@
    flex-direction: column;
 }

-.channelsContainer, .programGrid {
+.channelsContainer,
+.programGrid {
    contain: layout style paint;
 }

-.programCell, .guide-channelHeaderCell {
-    outline: none !important;
-}
-
-.timerIcon, .seriesTimerIcon {
-    color: #cc3333 !important;
+.timerIcon,
+.seriesTimerIcon {
+    color: #c33 !important;
 }

 .seriesTimerIcon-inactive {
    color: inherit !important;
-    opacity: .7;
+    opacity: 0.7;
 }

 .guideOptions {
@ -392,7 +398,6 @@
 }

@media all and (max-width: 50em), all and (max-height: 37.5em) {
-
    .tvGuideHeader {
        padding-left: 0;
    }
@ -415,16 +420,16 @@
 }

 .guide-date-tab-button {
-    padding: .3em .7em !important;
-    margin: 0 .3em !important;
+    padding: 0.3em 0.7em !important;
+    margin: 0 0.3em !important;
    font-weight: normal;
 }

-    .guide-date-tab-button.emby-tab-button-active {
-        border-color: transparent !important;
-    }
+.guide-date-tab-button.emby-tab-button-active {
+    border-color: transparent !important;
+}

-    .guide-date-tab-button.show-focus:focus {
-        border-radius: .15em !important;
-        transform: none !important;
-    }
+.guide-date-tab-button.show-focus:focus {
+    border-radius: 0.15em !important;
+    transform: none !important;
+}
--- a/src/components/guide/programs.css
+++ b/src/components/guide/programs.css
@ -1,15 +1,15 @@
 .newTvProgram {
-    background: #3388cc;
+    background: #38c;
    color: #fff;
 }

 .liveTvProgram {
-    background: #cc3333;
+    background: #c33;
    color: #fff;
 }

 .premiereTvProgram {
-    background: #EF6C00;
+    background: #ef6c00;
    color: #fff;
 }

--- a/src/components/headroom/headroom.css
+++ b/src/components/headroom/headroom.css
@ -8,4 +8,4 @@

 .headroom--unpinned:not(.headroomDisabled) {
    transform: translateY(-100%);
-}
+}
--- a/src/components/homesections/homesections.css
+++ b/src/components/homesections/homesections.css
@ -1,25 +1,24 @@
 .homeLibraryButton {
    min-width: 18%;
-    margin: .5em !important;
+    margin: 0.5em !important;
 }

@media all and (max-width: 50em) {
-
    .homeLibraryButton {
        width: 46% !important;
    }
 }

 .homeLibraryIcon {
-    margin-left: .5em;
-    margin-right: .5em;
+    margin-left: 0.5em;
+    margin-right: 0.5em;
    -webkit-flex-shrink: 0;
-    flex-shrink: 0
+    flex-shrink: 0;
 }

 .homeLibraryText {
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
-    overflow: hidden
+    overflow: hidden;
 }
--- a/src/components/htmlvideoplayer/plugin.js
+++ b/src/components/htmlvideoplayer/plugin.js
@ -1054,7 +1054,9 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
            var options = {
                video: videoElement,
                subUrl: getTextTrackUrl(track, item),
-                fonts: attachments.map(i => i.DeliveryUrl),
+                fonts: attachments.map(function (i) {
+                    return i.DeliveryUrl;
+                }),
                workerUrl: appRouter.baseUrl() + "/libraries/subtitles-octopus-worker.js",
                onError: function() {
                    htmlMediaHelper.onErrorInternal(self, 'mediadecodeerror')
@ -1401,7 +1403,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
                        dlg.classList.add('videoPlayerContainer');

                        if (options.backdropUrl) {
-
                            dlg.classList.add('videoPlayerContainer-withBackdrop');
                            dlg.style.backgroundImage = "url('" + options.backdropUrl + "')";
                        }
@ -1410,11 +1411,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
                            dlg.classList.add('videoPlayerContainer-onTop');
                        }

-                        // playsinline new for iOS 10
-                        // https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html
-
                        var html = '';
-
                        var cssClass = 'htmlvideoplayer';

                        if (!browser.chromecast) {
@ -1449,7 +1446,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
                        self._mediaElement = videoElement;

                        if (mediaManager) {
-
                            if (!mediaManager.embyInit) {
                                initMediaManager();
                                mediaManager.embyInit = true;
@ -1465,9 +1461,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
                        } else {
                            resolve(videoElement);
                        }
-
                    });
-
                } else {
                    if (options.backdropUrl) {
                        dlg.classList.add('videoPlayerContainer-withBackdrop');
--- a/src/components/htmlvideoplayer/style.css
+++ b/src/components/htmlvideoplayer/style.css
@ -72,7 +72,7 @@ video::-webkit-media-controls {
@keyframes htmlvideoplayer-zoomin {
    from {
        transform: scale3d(0.2, 0.2, 0.2);
-        opacity: .6;
+        opacity: 0.6;
    }

    to {
--- a/src/components/imageeditor/imageeditor.css
+++ b/src/components/imageeditor/imageeditor.css
@ -6,4 +6,4 @@

 .first-imageEditor-buttons {
    margin-top: 2em;
-}
+}
--- a/src/components/images/style.css
+++ b/src/components/images/style.css
@ -1,5 +1,22 @@
 .lazy-image-fadein {
+    opacity: 0;
    animation: lazy-image-fadein 330ms ease-in normal both;
+    -webkit-animation-duration: 0.8s;
+    -moz-animation-duration: 0.8s;
+    -o-animation-duration: 0.8s;
+    animation-duration: 0.8s;
+    -webkit-animation-name: popInAnimation;
+    -moz-animation-name: popInAnimation;
+    -o-animation-name: popInAnimation;
+    animation-name: popInAnimation;
+    -webkit-animation-fill-mode: forwards;
+    -moz-animation-fill-mode: forwards;
+    -o-animation-fill-mode: forwards;
+    animation-fill-mode: forwards;
+    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
+    -moz-animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
+    -o-animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
+    animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
 }

 .lazy-image-fadein-fast {
@ -16,26 +33,6 @@
    }
 }

-.lazy-image-fadein {
-    opacity: 0;
-    -webkit-animation-duration: .8s;
-    -moz-animation-duration: .8s;
-    -o-animation-duration: .8s;
-    animation-duration: .8s;
-    -webkit-animation-name: popInAnimation;
-    -moz-animation-name: popInAnimation;
-    -o-animation-name: popInAnimation;
-    animation-name: popInAnimation;
-    -webkit-animation-fill-mode: forwards;
-    -moz-animation-fill-mode: forwards;
-    -o-animation-fill-mode: forwards;
-    animation-fill-mode: forwards;
-    -webkit-animation-timing-function: cubic-bezier(0,0,.5,1);
-    -moz-animation-timing-function: cubic-bezier(0,0,.5,1);
-    -o-animation-timing-function: cubic-bezier(0,0,.5,1);
-    animation-timing-function: cubic-bezier(0,0,.5,1);
-}
-
@keyframes popInAnimation {
    0% {
        opacity: 0;
@ -44,4 +41,4 @@
    100% {
        opacity: 1;
    }
-}
+}
--- a/src/components/imageuploader/style.css
+++ b/src/components/imageuploader/style.css
@ -1,6 +1,7 @@
 .imageEditor-dropZone {
-    border: .2em dashed currentcolor;
-    border-radius: .25em;
+    border: 0.2em dashed currentcolor;
+    border-radius: 0.25em;
+
    /* padding: 1.6em; */
    text-align: center;
    position: relative;
@ -8,4 +9,4 @@
    display: flex;
    align-items: center;
    justify-content: center;
-}
+}
--- a/src/components/indicators/indicators.css
+++ b/src/components/indicators/indicators.css
@ -1,8 +1,8 @@
 .itemProgressBar {
    background: #333;
-    background: rgba(51,51,51,.8);
+    background: rgba(51, 51, 51, 0.8);
    position: relative;
-    height: .28em;
+    height: 0.28em;
 }

 .itemProgressBarForeground {
@ -24,7 +24,7 @@
 }

 .timerIndicator {
-    color: #CB272A;
+    color: #cb272a;
 }

 .timerIndicator-inactive {
@ -32,7 +32,7 @@
 }

 .indicator + .indicator {
-    margin-left: .25em;
+    margin-left: 0.25em;
 }

 .indicatorIcon {
@ -85,12 +85,13 @@
    color: #333;
 }

-.missingIndicator, .unairedIndicator {
-    background: #cc3333;
-    padding: .25em .5em;
+.missingIndicator,
+.unairedIndicator {
+    background: #c33;
+    padding: 0.25em 0.5em;
    border-radius: 100em;
    color: #fff;
    font-size: 84%;
    font-weight: 500;
-    margin: 0 .25em;
-}
+    margin: 0 0.25em;
+}
--- a/src/components/keyboardnavigation.js
+++ b/src/components/keyboardnavigation.js
@ -1,36 +1,133 @@
-define(['inputManager', 'focusManager'], function(inputManager, focusManager) {
-    'use strict';
+define(["inputManager", "layoutManager"], function (inputManager, layoutManager) {
+    "use strict";

    console.log("keyboardnavigation");

+    /**
+     * Key name mapping.
+     */
+    // Add more to support old browsers
+    var KeyNames = {
+        13: "Enter",
+        19: "Pause",
+        27: "Escape",
+        32: "Space",
+        37: "ArrowLeft",
+        38: "ArrowUp",
+        39: "ArrowRight",
+        40: "ArrowDown",
+        // MediaRewind (Tizen/WebOS)
+        412: "MediaRewind",
+        // MediaStop (Tizen/WebOS)
+        413: "MediaStop",
+        // MediaPlay (Tizen/WebOS)
+        415: "MediaPlay",
+        // MediaFastForward (Tizen/WebOS)
+        417: "MediaFastForward",
+        // Back (WebOS)
+        461: "Back",
+        // Back (Tizen)
+        10009: "Back",
+        // MediaTrackPrevious (Tizen)
+        10232: "MediaTrackPrevious",
+        // MediaTrackNext (Tizen)
+        10233: "MediaTrackNext",
+        // MediaPlayPause (Tizen)
+        10252: "MediaPlayPause"
+    };
+
+    var hasFieldKey = false;
+    try {
+        hasFieldKey = "key" in new KeyboardEvent("keydown");
+    } catch (e) {
+        console.log("error checking 'key' field");
+    }
+
+    if (!hasFieldKey) {
+        // Add [a..z]
+        for (var i = 65; i <= 90; i++) {
+            KeyNames[i] = String.fromCharCode(i).toLowerCase();
+        }
+    }
+
+    /**
+     * Returns key name from event.
+     *
+     * @param {KeyboardEvent} keyboard event
+     * @return {string} key name
+     */
+    function getKeyName(event) {
+        return KeyNames[event.keyCode] || event.key;
+    }
+
    function enable() {
-        document.addEventListener('keydown', function(e) {
+        document.addEventListener("keydown", function (e) {
            var capture = true;

-            switch (e.keyCode) {
-                case 37: // ArrowLeft
-                    inputManager.handle('left');
+            switch (getKeyName(e)) {
+                case "ArrowLeft":
+                    inputManager.handle("left");
                    break;
-                case 38: // ArrowUp
-                    inputManager.handle('up');
+                case "ArrowUp":
+                    inputManager.handle("up");
                    break;
-                case 39: // ArrowRight
-                    inputManager.handle('right');
+                case "ArrowRight":
+                    inputManager.handle("right");
                    break;
-                case 40: // ArrowDown
-                    inputManager.handle('down');
+                case "ArrowDown":
+                    inputManager.handle("down");
                    break;
+
+                case "Back":
+                    inputManager.handle("back");
+                    break;
+
+                case "Escape":
+                    if (layoutManager.tv) {
+                        inputManager.handle("back");
+                    } else {
+                        capture = false;
+                    }
+                    break;
+
+                case "MediaPlay":
+                    inputManager.handle("play");
+                    break;
+                case "Pause":
+                    inputManager.handle("pause");
+                    break;
+                case "MediaPlayPause":
+                    inputManager.handle("playpause");
+                    break;
+                case "MediaRewind":
+                    inputManager.handle("rewind");
+                    break;
+                case "MediaFastForward":
+                    inputManager.handle("fastforward");
+                    break;
+                case "MediaStop":
+                    inputManager.handle("stop");
+                    break;
+                case "MediaTrackPrevious":
+                    inputManager.handle("previoustrack");
+                    break;
+                case "MediaTrackNext":
+                    inputManager.handle("nexttrack");
+                    break;
+
                default:
                    capture = false;
            }
+
            if (capture) {
                console.log("Disabling default event handling");
                e.preventDefault();
            }
        });
-
    }
+
    return {
-        enable: enable
+        enable: enable,
+        getKeyName: getKeyName
    };
 });
--- a/src/components/layoutManager.js
+++ b/src/components/layoutManager.js
@ -2,7 +2,6 @@ define(['browser', 'appSettings', 'events'], function (browser, appSettings, eve
    'use strict';

    function setLayout(instance, layout, selectedLayout) {
-
        if (layout === selectedLayout) {
            instance[layout] = true;
            document.documentElement.classList.add('layout-' + layout);
@ -38,7 +37,6 @@ define(['browser', 'appSettings', 'events'], function (browser, appSettings, eve
    };

    LayoutManager.prototype.getSavedLayout = function (layout) {
-
        return appSettings.get('layout');
    };

@ -64,4 +62,4 @@ define(['browser', 'appSettings', 'events'], function (browser, appSettings, eve
    };

    return new LayoutManager();
-});
+});
--- a/src/components/lazyloader/lazyedgehack.css
+++ b/src/components/lazyloader/lazyedgehack.css
@ -1,5 +1,5 @@
 .lazy {
    /* In edge, intersection observer will not fire on 0px sized elements */
-    min-width: .1em;
-    min-height: .1em;
+    min-width: 0.1em;
+    min-height: 0.1em;
 }
--- a/src/components/listview/listview.css
+++ b/src/components/listview/listview.css
@ -10,7 +10,7 @@
    display: block;
    align-items: center;
    text-align: left;
-    padding: .25em .25em .25em .5em;
+    padding: 0.25em 0.25em 0.25em 0.5em;
    cursor: pointer;
    overflow: hidden;
 }
@ -50,14 +50,18 @@
 }

 .listItem-border.show-focus:focus {
-    transform: scale(1.0) !important;
+    transform: scale(1) !important;
 }

-.listItemImage, .listItemIcon, .listItemAside {
+.listItemImage,
+.listItemIcon,
+.listItemAside {
    flex-shrink: 0;
 }

-.listItemBody, .listItemImage, .listItemIcon {
+.listItemBody,
+.listItemImage,
+.listItemIcon {
    display: inline-block;
    vertical-align: middle;
 }
@ -71,13 +75,13 @@
 }

 .listViewDragHandle {
-    margin-left: -.25em !important;
+    margin-left: -0.25em !important;
    touch-action: none;
 }

 .listItemBody {
    flex-grow: 1;
-    padding: .85em .75em;
+    padding: 0.85em 0.75em;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-direction: column;
@ -85,8 +89,15 @@
    justify-content: center;
 }

+.listItem,
+.listItemBody,
+.listItemMediaInfo {
+    display: flex;
+    contain: layout style;
+}
+
 .layout-tv .listItemBody {
-    padding: .35em .75em;
+    padding: 0.35em 0.75em;
 }

 .listItemBody-noleftpadding {
@ -95,7 +106,7 @@

 .listItemBodyText {
    margin: 0;
-    padding: .1em 0;
+    padding: 0.1em 0;
    overflow: hidden;
    text-overflow: ellipsis;
 }
@ -121,7 +132,7 @@
    width: 19.5vw;
    height: 13vw;
    background-position: center center;
-    margin-right: .75em;
+    margin-right: 0.75em;
 }

 .listItemImageButton {
@ -161,13 +172,13 @@
    }

    .listItemBody {
-        padding-left: .75em;
+        padding-left: 0.75em;
    }
 }

@media all and (max-width: 50em) {
    .listItemBody {
-        padding-right: .5em;
+        padding-right: 0.5em;
    }
 }

@ -180,15 +191,15 @@
    width: 1em !important;
    height: 1em !important;
    font-size: 143%;
-    padding: 0 .25em 0 0;
+    padding: 0 0.25em 0 0;
 }

 .listItemIcon:not(.listItemIcon-transparent) {
    background-color: #00a4dc;
    color: #fff;
-    padding: .5em;
+    padding: 0.5em;
    border-radius: 100em;
-    margin: 0 .2em 0 .4em;
+    margin: 0 0.2em 0 0.4em;
 }

 .listItemProgressBar {
@ -199,7 +210,7 @@
 }

 .listItem:focus {
-    border-radius: .2em;
+    border-radius: 0.2em;
 }

 .listItem:focus .secondary {
@ -207,7 +218,7 @@
 }

 .listItem-focusscale {
-    transition: transform .2s ease-out;
+    transition: transform 0.2s ease-out;
 }

 .listItem-focusscale:focus {
@ -215,7 +226,7 @@
 }

 .paperList {
-    margin: .5em auto;
+    margin: 0.5em auto;
 }

 .paperList-clear {
@ -234,26 +245,23 @@
 }

 .listItemIndicators {
-    right: .324em;
-    top: .324em;
+    right: 0.324em;
+    top: 0.324em;
    position: absolute;
    display: flex;
    align-items: center;
 }

-.listItem, .listItemBody, .listItemMediaInfo {
-    display: flex;
-    contain: layout style;
-}
-
 .listItem-bottomoverview {
    font-size: 88%;
    margin-bottom: 1em;
-    margin-top: .2em;
+    margin-top: 0.2em;
 }

@media all and (max-width: 50em) {
-    .listItem .endsAt, .listItem .criticRating, .listItem-overview {
+    .listItem .endsAt,
+    .listItem .criticRating,
+    .listItem-overview {
        display: none !important;
    }
 }
--- a/src/components/loading/loading.css
+++ b/src/components/loading/loading.css
@ -33,7 +33,7 @@
 }

 .mdl-spinner__layer-1 {
-    border-color: rgb(66,165,245);
+    border-color: rgb(66, 165, 245);
 }

 .mdl-spinner__layer-1-active {
@ -42,7 +42,7 @@
 }

 .mdl-spinner__layer-2 {
-    border-color: rgb(244,67,54);
+    border-color: rgb(244, 67, 54);
 }

 .mdl-spinner__layer-2-active {
@ -51,7 +51,7 @@
 }

 .mdl-spinner__layer-3 {
-    border-color: rgb(253,216,53);
+    border-color: rgb(253, 216, 53);
 }

 .mdl-spinner__layer-3-active {
@ -60,7 +60,7 @@
 }

 .mdl-spinner__layer-4 {
-    border-color: rgb(76,175,80);
+    border-color: rgb(76, 175, 80);
 }

 .mdl-spinner__layer-4-active {
@ -345,23 +345,10 @@
    }
 }

-.mdl-spinner__circle-clipper {
-    display: inline-block;
-    position: relative;
-    width: 50%;
-    height: 100%;
-    overflow: hidden;
-    border-color: inherit;
-}
-
-    .mdl-spinner__circle-clipper .mdl-spinner__circle {
-        width: 200%;
-    }
-
 .mdl-spinner__circle {
    box-sizing: border-box;
    height: 100%;
-    border-width: .21em;
+    border-width: 0.21em;
    border-style: solid;
    border-color: inherit;
    border-bottom-color: transparent !important;
@ -375,6 +362,19 @@
    left: 0;
 }

+.mdl-spinner__circle-clipper {
+    display: inline-block;
+    position: relative;
+    width: 50%;
+    height: 100%;
+    overflow: hidden;
+    border-color: inherit;
+}
+
+.mdl-spinner__circle-clipper .mdl-spinner__circle {
+    width: 200%;
+}
+
 .mdl-spinner__circleLeft {
    border-right-color: transparent !important;
    -webkit-transform: rotate(129deg);
--- a/src/components/mediainfo/mediainfo.css
+++ b/src/components/mediainfo/mediainfo.css
@ -4,13 +4,13 @@
 }

 .mediaInfoText {
-    padding: .22em .5em;
-    border-radius: .25em;
+    padding: 0.22em 0.5em;
+    border-radius: 0.25em;
    font-size: 92%;
    display: flex;
    align-items: center;
    white-space: nowrap;
-    margin: 0 .5em 0 0;
+    margin: 0 0.5em 0 0;
 }

 .mediaInfoText-upper {
@ -21,7 +21,7 @@
    width: auto;
    height: auto;
    font-size: 1.6em;
-    margin-right: .6em;
+    margin-right: 0.6em;
 }

 .mediaInfoItem:last-child {
@ -63,8 +63,8 @@

 .mediaInfoProgramAttribute {
    text-transform: uppercase;
-    padding: .16em .6em;
-    border-radius: .15em;
+    padding: 0.16em 0.6em;
+    border-radius: 0.15em;
    font-size: 80%;
 }

@ -73,13 +73,13 @@
 }

 .mediaInfoOfficialRating {
-    border: .09em solid currentColor;
-    padding: 0 .6em;
+    border: 0.09em solid currentColor;
+    padding: 0 0.6em;
    height: 1.3em;
    line-height: 1.8em;
    display: flex;
    align-items: center;
    justify-content: center;
-    border-radius: .1em;
+    border-radius: 0.1em;
    font-size: 96%;
 }
--- a/src/components/medialibrarycreator/medialibrarycreator.js
+++ b/src/components/medialibrarycreator/medialibrarycreator.js
@ -1,37 +1,44 @@
-define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionseditor/libraryoptionseditor", "emby-toggle", "emby-input", "emby-select", "paper-icon-button-light", "listViewStyle", "formDialogStyle", "emby-button", "flexStyles"], function(loading, dialogHelper, dom, $, libraryoptionseditor) {
+define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionseditor/libraryoptionseditor", "emby-toggle", "emby-input", "emby-select", "paper-icon-button-light", "listViewStyle", "formDialogStyle", "emby-button", "flexStyles"], function (loading, dialogHelper, dom, $, libraryoptionseditor) {
    "use strict";

    function onAddLibrary() {
-        if (isCreating) return false;
+        if (isCreating) {
+            return false;
+        }

        if (pathInfos.length == 0) {
-            require(["alert"], function(alert) {
+            require(["alert"], function (alert) {
                alert({
                    text: Globalize.translate("PleaseAddAtLeastOneFolder"),
                    type: "error"
-                })
+                });
            });
+
            return false;
        }

        isCreating = true;
        loading.show();
-
        var dlg = dom.parentWithClass(this, "dlg-librarycreator");
        var name = $("#txtValue", dlg).val();
        var type = $("#selectCollectionType", dlg).val();
-        if (type == "mixed") type = null;
+
+        if (type == "mixed") {
+            type = null;
+        }
+
        var libraryOptions = libraryoptionseditor.getLibraryOptions(dlg.querySelector(".libraryOptions"));
        libraryOptions.PathInfos = pathInfos;
-        ApiClient.addVirtualFolder(name, type, currentOptions.refresh, libraryOptions).then(function() {
+        ApiClient.addVirtualFolder(name, type, currentOptions.refresh, libraryOptions).then(function () {
            hasChanges = true;
            isCreating = false;
            loading.hide();
            dialogHelper.close(dlg);
-        }, function() {
-            require(["toast"], function(toast) {
+        }, function () {
+            require(["toast"], function (toast) {
                toast(Globalize.translate("ErrorAddingMediaPathToVirtualFolder"));
            });
+
            isCreating = false;
            loading.hide();
        });
@ -39,16 +46,17 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed
    }

    function getCollectionTypeOptionsHtml(collectionTypeOptions) {
-        return collectionTypeOptions.map(function(i) {
+        return collectionTypeOptions.map(function (i) {
            return '<option value="' + i.value + '">' + i.name + "</option>";
        }).join("");
    }

    function initEditor(page, collectionTypeOptions) {
-        $("#selectCollectionType", page).html(getCollectionTypeOptionsHtml(collectionTypeOptions)).val("").on("change", function() {
+        $("#selectCollectionType", page).html(getCollectionTypeOptionsHtml(collectionTypeOptions)).val("").on("change", function () {
            var value = this.value;
            var dlg = $(this).parents(".dialog")[0];
            libraryoptionseditor.setContentType(dlg.querySelector(".libraryOptions"), value == "mixed" ? "" : value);
+
            if (value) {
                dlg.querySelector(".libraryOptions").classList.remove("hide");
            } else {
@ -57,17 +65,17 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed

            if (value != "mixed") {
                var index = this.selectedIndex;
+
                if (index != -1) {
                    var name = this.options[index].innerHTML.replace("*", "").replace("&amp;", "&");
                    $("#txtValue", dlg).val(name);
-                    var folderOption = collectionTypeOptions.filter(function(i) {
-                        return i.value == value
+                    var folderOption = collectionTypeOptions.filter(function (i) {
+                        return i.value == value;
                    })[0];
-                    $(".collectionTypeFieldDescription", dlg).html(folderOption.message || "")
+                    $(".collectionTypeFieldDescription", dlg).html(folderOption.message || "");
                }
            }
        });
-
        page.querySelector(".btnAddFolder").addEventListener("click", onAddButtonClick);
        page.querySelector(".btnSubmit").addEventListener("click", onAddLibrary);
        page.querySelector(".folderList").addEventListener("click", onRemoveClick);
@ -81,40 +89,65 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed

    function onAddButtonClick() {
        var page = dom.parentWithClass(this, "dlg-librarycreator");
-        require(["directorybrowser"], function(directoryBrowser) {
-            var picker = new directoryBrowser;
+
+        require(["directorybrowser"], function (directoryBrowser) {
+            var picker = new directoryBrowser();
            picker.show({
                enableNetworkSharePath: true,
-                callback: function(path, networkSharePath) {
-                    path && addMediaLocation(page, path, networkSharePath);
+                callback: function (path, networkSharePath) {
+                    if (path) {
+                        addMediaLocation(page, path, networkSharePath);
+                    }
+
                    picker.close();
                }
-            })
-        })
+            });
+        });
    }

    function getFolderHtml(pathInfo, index) {
        var html = "";
-        return html += '<div class="listItem listItem-border lnkPath" style="padding-left:.5em;">', html += '<div class="' + (pathInfo.NetworkPath ? "listItemBody two-line" : "listItemBody") + '">', html += '<div class="listItemBodyText">' + pathInfo.Path + "</div>", pathInfo.NetworkPath && (html += '<div class="listItemBodyText secondary">' + pathInfo.NetworkPath + "</div>"), html += "</div>", html += '<button type="button" is="paper-icon-button-light"" class="listItemButton btnRemovePath" data-index="' + index + '"><i class="material-icons">remove_circle</i></button>', html += "</div>"
+        html += '<div class="listItem listItem-border lnkPath" style="padding-left:.5em;">';
+        html += '<div class="' + (pathInfo.NetworkPath ? "listItemBody two-line" : "listItemBody") + '">';
+        html += '<div class="listItemBodyText">' + pathInfo.Path + "</div>";
+
+        if (pathInfo.NetworkPath) {
+            html += '<div class="listItemBodyText secondary">' + pathInfo.NetworkPath + "</div>";
+        }
+
+        html += "</div>";
+        html += '<button type="button" is="paper-icon-button-light"" class="listItemButton btnRemovePath" data-index="' + index + '"><i class="material-icons">remove_circle</i></button>';
+        html += "</div>";
+        return html;
    }

    function renderPaths(page) {
        var foldersHtml = pathInfos.map(getFolderHtml).join("");
        var folderList = page.querySelector(".folderList");
        folderList.innerHTML = foldersHtml;
-        foldersHtml ? folderList.classList.remove("hide") : folderList.classList.add("hide");
+
+        if (foldersHtml) {
+            folderList.classList.remove("hide");
+        } else {
+            folderList.classList.add("hide");
+        }
    }

    function addMediaLocation(page, path, networkSharePath) {
        var pathLower = path.toLowerCase();
-        var pathFilter = pathInfos.filter(function(p) {
+        var pathFilter = pathInfos.filter(function (p) {
            return p.Path.toLowerCase() == pathLower;
        });
+
        if (!pathFilter.length) {
            var pathInfo = {
                Path: path
            };
-            networkSharePath && (pathInfo.NetworkPath = networkSharePath);
+
+            if (networkSharePath) {
+                pathInfo.NetworkPath = networkSharePath;
+            }
+
            pathInfos.push(pathInfo);
            renderPaths(page);
        }
@ -125,7 +158,7 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed
        var index = parseInt(button.getAttribute("data-index"));
        var location = pathInfos[index].Path;
        var locationLower = location.toLowerCase();
-        pathInfos = pathInfos.filter(function(p) {
+        pathInfos = pathInfos.filter(function (p) {
            return p.Path.toLowerCase() != locationLower;
        });
        renderPaths(dom.parentWithClass(button, "dlg-librarycreator"));
@ -136,21 +169,22 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed
    }

    function initLibraryOptions(dlg) {
-        libraryoptionseditor.embed(dlg.querySelector(".libraryOptions")).then(function() {
+        libraryoptionseditor.embed(dlg.querySelector(".libraryOptions")).then(function () {
            $("#selectCollectionType", dlg).trigger("change");
            onToggleAdvancedChange.call(dlg.querySelector(".chkAdvanced"));
-        })
+        });
    }

    function editor() {
-        this.show = function(options) {
-            return new Promise(function(resolve, reject) {
+        this.show = function (options) {
+            return new Promise(function (resolve, reject) {
                currentOptions = options;
                currentResolve = resolve;
                hasChanges = false;
-                var xhr = new XMLHttpRequest;
+                var xhr = new XMLHttpRequest();
                xhr.open("GET", "components/medialibrarycreator/medialibrarycreator.template.html", true);
-                xhr.onload = function(e) {
+
+                xhr.onload = function (e) {
                    var template = this.response;
                    var dlg = dialogHelper.createDialog({
                        size: "medium-tall",
@ -166,24 +200,23 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed
                    initEditor(dlg, options.collectionTypeOptions);
                    dlg.addEventListener("close", onDialogClosed);
                    dialogHelper.open(dlg);
-                    dlg.querySelector(".btnCancel").addEventListener("click", function() {
-                        dialogHelper.close(dlg)
+                    dlg.querySelector(".btnCancel").addEventListener("click", function () {
+                        dialogHelper.close(dlg);
                    });
                    pathInfos = [];
                    renderPaths(dlg);
                    initLibraryOptions(dlg);
                };
+
                xhr.send();
            });
-        }
+        };
    }

    var pathInfos = [];
    var currentResolve;
    var currentOptions;
-
    var hasChanges = false;
    var isCreating = false;
-
-    return editor
+    return editor;
 });
--- a/src/components/medialibraryeditor/medialibraryeditor.js
+++ b/src/components/medialibraryeditor/medialibraryeditor.js
@ -1,22 +1,22 @@
-define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionseditor/libraryoptionseditor", "emby-button", "listViewStyle", "paper-icon-button-light", "formDialogStyle", "emby-toggle", "flexStyles"], function(jQuery, loading, dialogHelper, dom, libraryoptionseditor) {
+define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionseditor/libraryoptionseditor", "emby-button", "listViewStyle", "paper-icon-button-light", "formDialogStyle", "emby-toggle", "flexStyles"], function (jQuery, loading, dialogHelper, dom, libraryoptionseditor) {
    "use strict";

    function onEditLibrary() {
-        if (isCreating) return false;
+        if (isCreating) {
+            return false;
+        }

        isCreating = true;
        loading.show();
-
        var dlg = dom.parentWithClass(this, "dlg-libraryeditor");
        var libraryOptions = libraryoptionseditor.getLibraryOptions(dlg.querySelector(".libraryOptions"));
        libraryOptions = Object.assign(currentOptions.library.LibraryOptions || {}, libraryOptions);
-
-        ApiClient.updateVirtualFolderOptions(currentOptions.library.ItemId, libraryOptions).then(function() {
+        ApiClient.updateVirtualFolderOptions(currentOptions.library.ItemId, libraryOptions).then(function () {
            hasChanges = true;
            isCreating = false;
            loading.hide();
            dialogHelper.close(dlg);
-        }, function() {
+        }, function () {
            isCreating = false;
            loading.hide();
        });
@ -26,11 +26,11 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
    function addMediaLocation(page, path, networkSharePath) {
        var virtualFolder = currentOptions.library;
        var refreshAfterChange = currentOptions.refresh;
-        ApiClient.addMediaPath(virtualFolder.Name, path, networkSharePath, refreshAfterChange).then(function() {
+        ApiClient.addMediaPath(virtualFolder.Name, path, networkSharePath, refreshAfterChange).then(function () {
            hasChanges = true;
            refreshLibraryFromServer(page);
-        }, function() {
-            require(["toast"], function(toast) {
+        }, function () {
+            require(["toast"], function (toast) {
                toast(Globalize.translate("ErrorAddingMediaPathToVirtualFolder"));
            });
        });
@ -41,11 +41,11 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
        ApiClient.updateMediaPath(virtualFolder.Name, {
            Path: path,
            NetworkPath: networkSharePath
-        }).then(function() {
+        }).then(function () {
            hasChanges = true;
            refreshLibraryFromServer(page);
-        }, function() {
-            require(["toast"], function(toast) {
+        }, function () {
+            require(["toast"], function (toast) {
                toast(Globalize.translate("ErrorAddingMediaPathToVirtualFolder"));
            });
        });
@ -54,19 +54,20 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
    function onRemoveClick(btnRemovePath, location) {
        var button = btnRemovePath;
        var virtualFolder = currentOptions.library;
-        require(["confirm"], function(confirm) {
+
+        require(["confirm"], function (confirm) {
            confirm({
                title: Globalize.translate("HeaderRemoveMediaLocation"),
                text: Globalize.translate("MessageConfirmRemoveMediaLocation"),
                confirmText: Globalize.translate("ButtonDelete"),
                primary: "delete"
-            }).then(function() {
+            }).then(function () {
                var refreshAfterChange = currentOptions.refresh;
-                ApiClient.removeMediaPath(virtualFolder.Name, location, refreshAfterChange).then(function() {
+                ApiClient.removeMediaPath(virtualFolder.Name, location, refreshAfterChange).then(function () {
                    hasChanges = true;
                    refreshLibraryFromServer(dom.parentWithClass(button, "dlg-libraryeditor"));
-                }, function() {
-                    require(["toast"], function(toast) {
+                }, function () {
+                    require(["toast"], function (toast) {
                        toast(Globalize.translate("DefaultErrorMessage"));
                    });
                });
@ -76,13 +77,19 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed

    function onListItemClick(e) {
        var listItem = dom.parentWithClass(e.target, "listItem");
+
        if (listItem) {
            var index = parseInt(listItem.getAttribute("data-index"));
            var pathInfos = (currentOptions.library.LibraryOptions || {}).PathInfos || [];
            var pathInfo = null == index ? {} : pathInfos[index] || {};
            var originalPath = pathInfo.Path || (null == index ? null : currentOptions.library.Locations[index]);
            var btnRemovePath = dom.parentWithClass(e.target, "btnRemovePath");
-            if (btnRemovePath) return void onRemoveClick(btnRemovePath, originalPath);
+
+            if (btnRemovePath) {
+                onRemoveClick(btnRemovePath, originalPath);
+                return;
+            }
+
            showDirectoryBrowser(dom.parentWithClass(listItem, "dlg-libraryeditor"), originalPath, pathInfo.NetworkPath);
        }
    }
@ -94,9 +101,11 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
        html += '<h3 class="listItemBodyText">';
        html += pathInfo.Path;
        html += "</h3>";
+
        if (pathInfo.NetworkPath) {
            html += '<div class="listItemBodyText secondary">' + pathInfo.NetworkPath + "</div>";
        }
+
        html += "</div>";
        html += '<button type="button" is="paper-icon-button-light" class="listItemButton btnRemovePath" data-index="' + index + '"><i class="material-icons">remove_circle</i></button>';
        html += "</div>";
@ -104,10 +113,11 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
    }

    function refreshLibraryFromServer(page) {
-        ApiClient.getVirtualFolders().then(function(result) {
-            var library = result.filter(function(f) {
-                return f.Name === currentOptions.library.Name
+        ApiClient.getVirtualFolders().then(function (result) {
+            var library = result.filter(function (f) {
+                return f.Name === currentOptions.library.Name;
            })[0];
+
            if (library) {
                currentOptions.library = library;
                renderLibrary(page, currentOptions);
@ -117,16 +127,21 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed

    function renderLibrary(page, options) {
        var pathInfos = (options.library.LibraryOptions || {}).PathInfos || [];
-        pathInfos.length || (pathInfos = options.library.Locations.map(function(p) {
-            return {
-                Path: p
-            }
-        }));
+
+        if (!pathInfos.length) {
+            pathInfos = options.library.Locations.map(function (p) {
+                return {
+                    Path: p
+                };
+            });
+        }
+
        if (options.library.CollectionType === 'boxsets') {
            page.querySelector(".folders").classList.add("hide");
        } else {
            page.querySelector(".folders").classList.remove("hide");
        }
+
        page.querySelector(".folderList").innerHTML = pathInfos.map(getFolderHtml).join("");
    }

@ -135,24 +150,31 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
    }

    function showDirectoryBrowser(context, originalPath, networkPath) {
-        require(["directorybrowser"], function(directoryBrowser) {
-            var picker = new directoryBrowser;
+        require(["directorybrowser"], function (directoryBrowser) {
+            var picker = new directoryBrowser();
            picker.show({
-                enableNetworkSharePath: !0,
+                enableNetworkSharePath: true,
                pathReadOnly: null != originalPath,
                path: originalPath,
                networkSharePath: networkPath,
-                callback: function(path, networkSharePath) {
-                    path && (originalPath ? updateMediaLocation(context, originalPath, networkSharePath) : addMediaLocation(context, path, networkSharePath));
+                callback: function (path, networkSharePath) {
+                    if (path) {
+                        if (originalPath) {
+                            updateMediaLocation(context, originalPath, networkSharePath);
+                        } else {
+                            addMediaLocation(context, path, networkSharePath);
+                        }
+                    }
+
                    picker.close();
                }
-            })
-        })
+            });
+        });
    }

    function onToggleAdvancedChange() {
        var dlg = dom.parentWithClass(this, "dlg-libraryeditor");
-        libraryoptionseditor.setAdvancedVisible(dlg.querySelector(".libraryOptions"), this.checked)
+        libraryoptionseditor.setAdvancedVisible(dlg.querySelector(".libraryOptions"), this.checked);
    }

    function initEditor(dlg, options) {
@ -161,7 +183,7 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
        dlg.querySelector(".folderList").addEventListener("click", onListItemClick);
        dlg.querySelector(".chkAdvanced").addEventListener("change", onToggleAdvancedChange);
        dlg.querySelector(".btnSubmit").addEventListener("click", onEditLibrary);
-        libraryoptionseditor.embed(dlg.querySelector(".libraryOptions"), options.library.CollectionType, options.library.LibraryOptions).then(function() {
+        libraryoptionseditor.embed(dlg.querySelector(".libraryOptions"), options.library.CollectionType, options.library.LibraryOptions).then(function () {
            onToggleAdvancedChange.call(dlg.querySelector(".chkAdvanced"));
        });
    }
@ -171,14 +193,15 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
    }

    function editor() {
-        this.show = function(options) {
+        this.show = function (options) {
            var deferred = jQuery.Deferred();
            currentOptions = options;
            currentDeferred = deferred;
            hasChanges = false;
-            var xhr = new XMLHttpRequest;
+            var xhr = new XMLHttpRequest();
            xhr.open("GET", "components/medialibraryeditor/medialibraryeditor.template.html", true);
-            xhr.onload = function(e) {
+
+            xhr.onload = function (e) {
                var template = this.response;
                var dlg = dialogHelper.createDialog({
                    size: "medium-tall",
@ -195,21 +218,20 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
                initEditor(dlg, options);
                dlg.addEventListener("close", onDialogClosed);
                dialogHelper.open(dlg);
-                dlg.querySelector(".btnCancel").addEventListener("click", function() {
+                dlg.querySelector(".btnCancel").addEventListener("click", function () {
                    dialogHelper.close(dlg);
                });
                refreshLibraryFromServer(dlg);
            };
+
            xhr.send();
            return deferred.promise();
-        }
+        };
    }

    var currentDeferred;
    var currentOptions;
-
    var hasChanges = false;
    var isCreating = false;
-
    return editor;
 });
--- a/src/components/multiselect/multiselect.css
+++ b/src/components/multiselect/multiselect.css
@ -4,7 +4,7 @@
    left: 0;
    right: 0;
    top: 0;
-    background-color: rgba(0, 0, 0, .3);
+    background-color: rgba(0, 0, 0, 0.3);
    z-index: 99998;
 }

@ -13,7 +13,7 @@
    top: 0;
    left: 0;
    right: 0;
-    padding: 1em .5em;
+    padding: 1em 0.5em;
    display: flex;
    align-items: center;
    z-index: 99999;
--- a/src/components/navdrawer/navdrawer.css
+++ b/src/components/navdrawer/navdrawer.css
@ -3,11 +3,11 @@
    position: fixed;
    top: 0;
    bottom: 0;
-    contain: strict
+    contain: strict;
 }

 .touch-menu-la {
-    background-color: #FFF;
+    background-color: #fff;
    will-change: transform;
    display: -webkit-box;
    display: -webkit-flex;
@ -15,39 +15,38 @@
    -webkit-transition: -webkit-transform ease-out 40ms, left ease-out 260ms;
    -o-transition: transform ease-out 40ms, left ease-out 260ms;
    transition: transform ease-out 40ms, left ease-out 260ms;
-    z-index: 1099
+    z-index: 1099;
 }

 .touch-menu-la.transition {
    -webkit-transition: -webkit-transform ease-out 240ms, left ease-out 260ms;
    -o-transition: transform ease-out 240ms, left ease-out 260ms;
-    transition: transform ease-out 240ms, left ease-out 260ms
+    transition: transform ease-out 240ms, left ease-out 260ms;
 }

 .drawer-open {
-    -webkit-box-shadow: 2px 0 12px rgba(0, 0, 0, .4);
-    box-shadow: 2px 0 12px rgba(0, 0, 0, .4)
+    -webkit-box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4);
+    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4);
 }

 .scrollContainer {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
-    flex-grow: 1
+    flex-grow: 1;
 }

 .tmla-mask {
    left: 0;
    right: 0;
-    background-color: #000;
    opacity: 0;
    z-index: 1098;
-    -webkit-transition: opacity ease-in-out .38s, visibility ease-in-out .38s;
-    -o-transition: opacity ease-in-out .38s, visibility ease-in-out .38s;
-    transition: opacity ease-in-out .38s, visibility ease-in-out .38s;
+    -webkit-transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s;
+    -o-transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s;
+    transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s;
    will-change: opacity;
-    background-color: rgba(0, 0, 0, .3)
+    background-color: rgba(0, 0, 0, 0.3);
 }

 .tmla-mask.backdrop {
-    opacity: 1
-}
+    opacity: 1;
+}
--- a/src/components/navdrawer/navdrawer.js
+++ b/src/components/navdrawer/navdrawer.js
@ -1,6 +1,7 @@
-define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser, dom) {
+define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser, dom) {
    "use strict";
-    return function(options) {
+
+    return function (options) {
        function getTouches(e) {
            return e.changedTouches || e.targetTouches || e.touches;
        }
@ -9,14 +10,13 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
            options.target.classList.remove("transition");
            var touches = getTouches(e);
            var touch = touches[0] || {};
-
            menuTouchStartX = touch.clientX;
            menuTouchStartY = touch.clientY;
-            menuTouchStartTime = (new Date).getTime();
+            menuTouchStartTime = new Date().getTime();
        }

        function setVelocity(deltaX) {
-            var time = (new Date).getTime() - (menuTouchStartTime || 0);
+            var time = new Date().getTime() - (menuTouchStartTime || 0);
            velocity = Math.abs(deltaX) / time;
        }

@ -28,21 +28,36 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
            var endY = touch.clientY || 0;
            var deltaX = endX - (menuTouchStartX || 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())
+            setVelocity(deltaX);
+
+            if (isOpen && 1 !== dragMode && deltaX > 0) {
+                dragMode = 2;
+            }
+
+            if (0 === dragMode && (!isOpen || Math.abs(deltaX) >= 10) && Math.abs(deltaY) < 5) {
+                dragMode = 1;
+                scrollContainer.addEventListener("scroll", disableEvent);
+                self.showMask();
+            } else if (0 === dragMode && Math.abs(deltaY) >= 5) {
+                dragMode = 2;
+            }
+
+            if (1 === dragMode) {
+                newPos = currentPos + deltaX;
+                self.changeMenuPos();
+            }
        }

        function onMenuTouchEnd(e) {
            options.target.classList.add("transition");
            scrollContainer.removeEventListener("scroll", disableEvent);
            dragMode = 0;
-
            var touches = getTouches(e);
            var touch = touches[0] || {};
            var endX = touch.clientX || 0;
            var endY = touch.clientY || 0;
            var deltaX = endX - (menuTouchStartX || 0);
            var deltaY = endY - (menuTouchStartY || 0);
-
            currentPos = deltaX;
            self.checkMenuState(deltaX, deltaY);
        }
@ -53,10 +68,12 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
            } else {
                if (((getTouches(e)[0] || {}).clientX || 0) <= options.handleSize) {
                    isPeeking = true;
+
                    if (e.type === "touchstart") {
                        dom.removeEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {});
                        dom.addEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {});
                    }
+
                    onMenuTouchStart(e);
                }
            }
@ -65,38 +82,52 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
        function onEdgeTouchMove(e) {
            e.preventDefault();
            e.stopPropagation();
-
            onEdgeTouchStart(e);
        }

        function onEdgeTouchEnd(e) {
-            isPeeking && (isPeeking = !1, dom.removeEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {}), onMenuTouchEnd(e))
+            if (isPeeking) {
+                isPeeking = false;
+                dom.removeEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {});
+                onMenuTouchEnd(e);
+            }
        }

        function disableEvent(e) {
-            e.preventDefault(), e.stopPropagation()
+            e.preventDefault();
+            e.stopPropagation();
        }

        function onBackgroundTouchStart(e) {
            var touches = getTouches(e);
            var touch = touches[0] || {};
-            backgroundTouchStartX = touch.clientX, backgroundTouchStartTime = (new Date).getTime()
+            backgroundTouchStartX = touch.clientX;
+            backgroundTouchStartTime = new Date().getTime();
        }

        function onBackgroundTouchMove(e) {
            var touches = getTouches(e);
            var touch = touches[0] || {};
            var endX = touch.clientX || 0;
+
            if (endX <= options.width && self.isVisible) {
                countStart++;
                var deltaX = endX - (backgroundTouchStartX || 0);
-                if (1 === countStart && (startPoint = deltaX), deltaX < 0 && 2 !== dragMode) {
-                    dragMode = 1, newPos = deltaX - startPoint + options.width, self.changeMenuPos();
-                    var time = (new Date).getTime() - (backgroundTouchStartTime || 0);
-                    velocity = Math.abs(deltaX) / time
+
+                if (countStart == 1) {
+                    startPoint = deltaX;
+                }
+                if (deltaX < 0 && dragMode !== 2) {
+                    dragMode = 1;
+                    newPos = deltaX - startPoint + options.width;
+                    self.changeMenuPos();
+                    var time = new Date().getTime() - (backgroundTouchStartTime || 0);
+                    velocity = Math.abs(deltaX) / time;
                }
            }
-            e.preventDefault(), e.stopPropagation()
+
+            e.preventDefault();
+            e.stopPropagation();
        }

        function onBackgroundTouchEnd(e) {
@ -104,13 +135,18 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
            var touch = touches[0] || {};
            var endX = touch.clientX || 0;
            var deltaX = endX - (backgroundTouchStartX || 0);
-            self.checkMenuState(deltaX), countStart = 0
+            self.checkMenuState(deltaX);
+            countStart = 0;
        }

        function onMaskTransitionEnd() {
            var classList = mask.classList;
-            classList.contains("backdrop") || classList.add("hide")
+
+            if (!classList.contains("backdrop")) {
+                classList.add("hide");
+            }
        }
+
        var self;
        var defaults;
        var mask;
@ -123,83 +159,195 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
        var dragMode = 0;
        var scrollContainer = options.target.querySelector(".mainDrawer-scrollContainer");
        scrollContainer.classList.add("scrollY");
-        var TouchMenuLA = function() {
-            self = this, defaults = {
+
+        var TouchMenuLA = function () {
+            self = this;
+            defaults = {
                width: 260,
                handleSize: 10,
-                disableMask: !1,
+                disableMask: false,
                maxMaskOpacity: 0.5
-            }, this.isVisible = !1, this.initialize()
+            };
+            this.isVisible = false;
+            this.initialize();
        };
-        TouchMenuLA.prototype.initElements = function() {
-            options.target.classList.add("touch-menu-la"), options.target.style.width = options.width + "px", options.target.style.left = -options.width + "px", options.disableMask || (mask = document.createElement("div"), mask.className = "tmla-mask hide", document.body.appendChild(mask), dom.addEventListener(mask, dom.whichTransitionEvent(), onMaskTransitionEnd, {
-                passive: !0
-            }))
+
+        TouchMenuLA.prototype.initElements = function () {
+            options.target.classList.add("touch-menu-la");
+            options.target.style.width = options.width + "px";
+            options.target.style.left = -options.width + "px";
+
+            if (!options.disableMask) {
+                mask = document.createElement("div");
+                mask.className = "tmla-mask hide";
+                document.body.appendChild(mask);
+                dom.addEventListener(mask, dom.whichTransitionEvent(), onMaskTransitionEnd, {
+                    passive: true
+                });
+            }
        };
+
        var menuTouchStartX;
        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"
-            })
-        }, TouchMenuLA.prototype.changeMenuPos = function() {
-            newPos <= options.width && this.animateToPosition(newPos)
-        }, TouchMenuLA.prototype.clickMaskClose = function() {
-            mask.addEventListener("click", function() {
-                self.close()
-            })
-        }, TouchMenuLA.prototype.checkMenuState = function(deltaX, deltaY) {
-            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() {
-            this.animateToPosition(0), currentPos = 0, self.isVisible = !1, options.target.classList.remove("drawer-open"), self.hideMask(), self.invoke(options.onChange)
-        }, TouchMenuLA.prototype.toggle = function() {
-            self.isVisible ? self.close() : self.open()
+
+        TouchMenuLA.prototype.animateToPosition = function (pos) {
+            requestAnimationFrame(function () {
+                options.target.style.transform = pos ? "translateX(" + pos + "px)" : "none";
+            });
        };
+
+        TouchMenuLA.prototype.changeMenuPos = function () {
+            if (newPos <= options.width) {
+                this.animateToPosition(newPos);
+            }
+        };
+
+        TouchMenuLA.prototype.clickMaskClose = function () {
+            mask.addEventListener("click", function () {
+                self.close();
+            });
+        };
+
+        TouchMenuLA.prototype.checkMenuState = function (deltaX, deltaY) {
+            if (velocity >= 0.4) {
+                if (deltaX >= 0 || Math.abs(deltaY || 0) >= 70) {
+                    self.open();
+                } else {
+                    self.close();
+                }
+            } else {
+                if (newPos >= 100) {
+                    self.open();
+                } else {
+                    if (newPos) {
+                        self.close();
+                    }
+                }
+            }
+        };
+
+        TouchMenuLA.prototype.open = function () {
+            this.animateToPosition(options.width);
+            currentPos = options.width;
+            this.isVisible = true;
+            options.target.classList.add("drawer-open");
+            self.showMask();
+            self.invoke(options.onChange);
+        };
+
+        TouchMenuLA.prototype.close = function () {
+            this.animateToPosition(0);
+            currentPos = 0;
+            self.isVisible = false;
+            options.target.classList.remove("drawer-open");
+            self.hideMask();
+            self.invoke(options.onChange);
+        };
+
+        TouchMenuLA.prototype.toggle = function () {
+            if (self.isVisible) {
+                self.close();
+            } else {
+                self.open();
+            }
+        };
+
        var backgroundTouchStartX;
        var backgroundTouchStartTime;
-        TouchMenuLA.prototype.showMask = function() {
-            mask.classList.remove("hide"), mask.offsetWidth, mask.classList.add("backdrop")
-        }, TouchMenuLA.prototype.hideMask = function() {
-            mask.classList.remove("backdrop")
-        }, TouchMenuLA.prototype.invoke = function(fn) {
-            fn && fn.apply(self)
+
+        TouchMenuLA.prototype.showMask = function () {
+            mask.classList.remove("hide");
+            mask.offsetWidth;
+            mask.classList.add("backdrop");
        };
+
+        TouchMenuLA.prototype.hideMask = function () {
+            mask.classList.add("hide");
+            mask.classList.remove("backdrop");
+        };
+
+        TouchMenuLA.prototype.invoke = function (fn) {
+            if (fn) {
+                fn.apply(self);
+            }
+        };
+
        var _edgeSwipeEnabled;
-        return TouchMenuLA.prototype.setEdgeSwipeEnabled = function(enabled) {
-            options.disableEdgeSwipe || browser.touch && (enabled ? _edgeSwipeEnabled || (_edgeSwipeEnabled = !0, dom.addEventListener(edgeContainer, "touchstart", onEdgeTouchStart, {
-                passive: !0
-            }), dom.addEventListener(edgeContainer, "touchend", onEdgeTouchEnd, {
-                passive: !0
-            }), dom.addEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, {
-                passive: !0
-            })) : _edgeSwipeEnabled && (_edgeSwipeEnabled = !1, dom.removeEventListener(edgeContainer, "touchstart", onEdgeTouchStart, {
-                passive: !0
-            }), dom.removeEventListener(edgeContainer, "touchend", onEdgeTouchEnd, {
-                passive: !0
-            }), dom.removeEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, {
-                passive: !0
-            })))
-        }, TouchMenuLA.prototype.initialize = function() {
-            options = Object.assign(defaults, options || {}), browser.edge && (options.disableEdgeSwipe = !0), self.initElements(), browser.touch && (dom.addEventListener(options.target, "touchstart", onMenuTouchStart, {
-                passive: !0
-            }), dom.addEventListener(options.target, "touchmove", onMenuTouchMove, {
-                passive: !0
-            }), dom.addEventListener(options.target, "touchend", onMenuTouchEnd, {
-                passive: !0
-            }), dom.addEventListener(options.target, "touchcancel", onMenuTouchEnd, {
-                passive: !0
-            }), dom.addEventListener(mask, "touchstart", onBackgroundTouchStart, {
-                passive: !0
-            }), dom.addEventListener(mask, "touchmove", onBackgroundTouchMove, {}), dom.addEventListener(mask, "touchend", onBackgroundTouchEnd, {
-                passive: !0
-            }), dom.addEventListener(mask, "touchcancel", onBackgroundTouchEnd, {
-                passive: !0
-            })), self.clickMaskClose()
-        }, new TouchMenuLA
-    }
-});
+
+        TouchMenuLA.prototype.setEdgeSwipeEnabled = function (enabled) {
+            if (!options.disableEdgeSwipe) {
+                if (browser.touch) {
+                    if (enabled) {
+                        if (!_edgeSwipeEnabled) {
+                            _edgeSwipeEnabled = true;
+                            dom.addEventListener(edgeContainer, "touchstart", onEdgeTouchStart, {
+                                passive: true
+                            });
+                            dom.addEventListener(edgeContainer, "touchend", onEdgeTouchEnd, {
+                                passive: true
+                            });
+                            dom.addEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, {
+                                passive: true
+                            });
+                        }
+                    } else {
+                        if (_edgeSwipeEnabled) {
+                            _edgeSwipeEnabled = false;
+                            dom.removeEventListener(edgeContainer, "touchstart", onEdgeTouchStart, {
+                                passive: true
+                            });
+                            dom.removeEventListener(edgeContainer, "touchend", onEdgeTouchEnd, {
+                                passive: true
+                            });
+                            dom.removeEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, {
+                                passive: true
+                            });
+                        }
+                    }
+                }
+            }
+        };
+
+        TouchMenuLA.prototype.initialize = function () {
+            options = Object.assign(defaults, options || {});
+
+            if (browser.edge) {
+                options.disableEdgeSwipe = true;
+            }
+
+            self.initElements();
+
+            if (browser.touch) {
+                dom.addEventListener(options.target, "touchstart", onMenuTouchStart, {
+                    passive: true
+                });
+                dom.addEventListener(options.target, "touchmove", onMenuTouchMove, {
+                    passive: true
+                });
+                dom.addEventListener(options.target, "touchend", onMenuTouchEnd, {
+                    passive: true
+                });
+                dom.addEventListener(options.target, "touchcancel", onMenuTouchEnd, {
+                    passive: true
+                });
+                dom.addEventListener(mask, "touchstart", onBackgroundTouchStart, {
+                    passive: true
+                });
+                dom.addEventListener(mask, "touchmove", onBackgroundTouchMove, {});
+                dom.addEventListener(mask, "touchend", onBackgroundTouchEnd, {
+                    passive: true
+                });
+                dom.addEventListener(mask, "touchcancel", onBackgroundTouchEnd, {
+                    passive: true
+                });
+            }
+
+            self.clickMaskClose();
+        };
+
+        return new TouchMenuLA();
+    };
+});
--- a/src/components/nowplayingbar/nowplayingbar.css
+++ b/src/components/nowplayingbar/nowplayingbar.css
@ -16,7 +16,7 @@
 }

 .nowPlayingBar-hidden {
-    transform: translate3d(0,100%,0);
+    transform: translate3d(0, 100%, 0);
 }

 .nowPlayingBarTop {
@ -28,7 +28,8 @@
    justify-content: center;
 }

-.mediaButton, .nowPlayingBarUserDataButtons .btnUserItemRating {
+.mediaButton,
+.nowPlayingBarUserDataButtons .btnUserItemRating {
    vertical-align: middle;
    margin: 0;
    text-align: center;
@ -62,6 +63,7 @@
 .nowPlayingBarCenter {
    vertical-align: middle;
    text-align: center;
+
    /* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */
    z-index: 2;
    flex-grow: 1;
@ -74,7 +76,7 @@
 .nowPlayingBarPositionContainer {
    position: absolute !important;
    left: 0;
-    top: -.56em;
+    top: -0.56em;
    right: 0;
    z-index: 1;
 }
@ -89,7 +91,8 @@

 .nowPlayingBarRight {
    position: relative;
-    margin: 0 .5em 0 auto;
+    margin: 0 0.5em 0 auto;
+
    /* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */
    z-index: 2;
    display: flex;
@ -121,7 +124,6 @@
 }

@media all and (max-width: 70em) {
-
    .nowPlayingBarRight .nowPlayingBarUserDataButtons {
        display: none;
    }
@ -155,13 +157,15 @@
    .nowPlayingBarRight .nowPlayingBarVolumeSliderContainer {
        display: none !important;
    }
+
    .nowPlayingBarInfoContainer {
        width: 70%;
    }
 }

@media all and (max-width: 24em) {
-    .nowPlayingBar .muteButton, .nowPlayingBar .unmuteButton {
+    .nowPlayingBar .muteButton,
+    .nowPlayingBar .unmuteButton {
        display: none;
    }
 }
--- a/src/components/playback/autoplaydetect.js
+++ b/src/components/playback/autoplaydetect.js
@ -1,61 +0,0 @@
-define([], function () {
-    'use strict';
-
-    function supportsHtmlMediaAutoplay() {
-
-        return new Promise(function (resolve, reject) {
-
-            var timeout;
-            var elem = document.createElement('video');
-            var elemStyle = elem.style;
-            //skip the test if video itself, or the autoplay
-            //element on it isn't supported
-            if (!('autoplay' in elem)) {
-                reject();
-                return;
-            }
-            elemStyle.position = 'absolute';
-            elemStyle.height = 0;
-            elemStyle.width = 0;
-
-            elem.setAttribute('autoplay', 'autoplay');
-            elem.style.display = 'none';
-            document.body.appendChild(elem);
-
-            var testAutoplay = function (arg) {
-                clearTimeout(timeout);
-                elem.removeEventListener('playing', testAutoplay);
-                elem.removeEventListener('play', testAutoplay);
-                var supported = (arg && arg.type === 'playing') || (arg && arg.type === 'play') || elem.currentTime !== 0;
-                elem.parentNode.removeChild(elem);
-
-                if (supported) {
-                    resolve();
-                } else {
-                    reject();
-                }
-            };
-
-            // play needed for firefox
-            elem.addEventListener('play', testAutoplay);
-            elem.addEventListener('playing', testAutoplay);
-
-            try {
-                elem.src = 'data:video/mp4;base64,AAAAHGZ0eXBtcDQyAAAAAG1wNDJpc29tYXZjMQAAAz5tb292AAAAbG12aGQAAAAAzaNacc2jWnEAAV+QAAFfkAABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAGGlvZHMAAAAAEICAgAcAT////3//AAACQ3RyYWsAAABcdGtoZAAAAAHNo1pxzaNacQAAAAEAAAAAAAFfkAAAAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAEAAAABAAAAAAAd9tZGlhAAAAIG1kaGQAAAAAzaNacc2jWnEAAV+QAAFfkFXEAAAAAAAhaGRscgAAAAAAAAAAdmlkZQAAAAAAAAAAAAAAAAAAAAGWbWluZgAAABR2bWhkAAAAAQAAAAAAAAAAAAAAJGRpbmYAAAAcZHJlZgAAAAAAAAABAAAADHVybCAAAAABAAABVnN0YmwAAACpc3RzZAAAAAAAAAABAAAAmWF2YzEAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAEAAQAEgAAABIAAAAAAAAAAEOSlZUL0FWQyBDb2RpbmcAAAAAAAAAAAAAAAAAAAAAAAAY//8AAAAxYXZjQwH0AAr/4QAZZ/QACq609NQYBBkAAAMAAQAAAwAKjxImoAEABWjOAa8gAAAAEmNvbHJuY2xjAAYAAQAGAAAAGHN0dHMAAAAAAAAAAQAAAAUAAEZQAAAAKHN0c3oAAAAAAAAAAAAAAAUAAAIqAAAACAAAAAgAAAAIAAAACAAAAChzdHNjAAAAAAAAAAIAAAABAAAABAAAAAEAAAACAAAAAQAAAAEAAAAYc3RjbwAAAAAAAAACAAADYgAABaQAAAAUc3RzcwAAAAAAAAABAAAAAQAAABFzZHRwAAAAAAREREREAAAAb3VkdGEAAABnbWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcgAAAAAAAAAAAAAAAAAAAAA6aWxzdAAAADKpdG9vAAAAKmRhdGEAAAABAAAAAEhhbmRCcmFrZSAwLjkuOCAyMDEyMDcxODAwAAACUm1kYXQAAAHkBgX/4NxF6b3m2Ui3lizYINkj7u94MjY0IC0gY29yZSAxMjAgLSBILjI2NC9NUEVHLTQgQVZDIGNvZGVjIC0gQ29weWxlZnQgMjAwMy0yMDExIC0gaHR0cDovL3d3dy52aWRlb2xhbi5vcmcveDI2NC5odG1sIC0gb3B0aW9uczogY2FiYWM9MCByZWY9MSBkZWJsb2NrPTE6MDowIGFuYWx5c2U9MHgxOjAgbWU9ZXNhIHN1Ym1lPTkgcHN5PTAgbWl4ZWRfcmVmPTAgbWVfcmFuZ2U9NCBjaHJvbWFfbWU9MSB0cmVsbGlzPTAgOHg4ZGN0PTAgY3FtPTAgZGVhZHpvbmU9MjEsMTEgZmFzdF9wc2tpcD0wIGNocm9tYV9xcF9vZmZzZXQ9MCB0aHJlYWRzPTYgc2xpY2VkX3RocmVhZHM9MCBucj0wIGRlY2ltYXRlPTEgaW50ZXJsYWNlZD0wIGJsdXJheV9jb21wYXQ9MCBjb25zdHJhaW5lZF9pbnRyYT0wIGJmcmFtZXM9MCB3ZWlnaHRwPTAga2V5aW50PTUwIGtleWludF9taW49NSBzY2VuZWN1dD00MCBpbnRyYV9yZWZyZXNoPTAgcmM9Y3FwIG1idHJlZT0wIHFwPTAAgAAAAD5liISscR8A+E4ACAACFoAAITAAAgsAAPgYCoKgoC+L4vi+KAvi+L4YfAEAACMzgABF9AAEUGUgABDJiXnf4AAAAARBmiKUAAAABEGaQpQAAAAEQZpilAAAAARBmoKU';
-                var promise = elem.play();
-                if (promise && promise.catch) {
-                    promise.catch(reject);
-                }
-
-                timeout = setTimeout(testAutoplay, 500);
-            } catch (e) {
-                reject();
-                return;
-            }
-        });
-    }
-
-    return {
-        supportsHtmlMediaAutoplay: supportsHtmlMediaAutoplay
-    };
-});
--- a/src/components/playback/iconosd.css
+++ b/src/components/playback/iconosd.css
@ -4,11 +4,11 @@
    right: 3%;
    z-index: 100000;
    background: #222;
-    background: rgba(0, 0, 0, .8);
+    background: rgba(0, 0, 0, 0.8);
    padding: 1em;
    color: #fff;
    backdrop-filter: blur(5px);
-    border-radius: .25em;
+    border-radius: 0.25em;
    transition: opacity 200ms ease-out;
 }

@ -19,22 +19,22 @@
 .iconOsdIcon {
    font-size: 320%;
    display: block;
-    margin: .25em .7em;
+    margin: 0.25em 0.7em;
 }

 .iconOsdProgressOuter {
-    margin: 1.5em .25em 1em;
-    height: .35em;
+    margin: 1.5em 0.25em 1em;
+    height: 0.35em;
    background: #222;
-    border-radius: .25em;
+    border-radius: 0.25em;
 }

 .iconOsdProgressInner {
    background: #00a4dc;
    height: 100%;
-    border-radius: .25em;
+    border-radius: 0.25em;
 }

 .brightnessOsdProgressInner {
-    background: #FF9800;
-}
+    background: #ff9800;
+}
--- a/src/components/playerstats/playerstats.css
+++ b/src/components/playerstats/playerstats.css
@ -1,11 +1,10 @@
 .playerStats {
-    background: rgba(28,28,28,0.8);
-    border-radius: .3em;
+    background: rgba(28, 28, 28, 0.8);
+    border-radius: 0.3em;
    color: #fff;
    left: 1.5em;
    position: absolute;
    top: 5em;
-    color: #fff;
 }

 .playerStats-tv {
@ -23,8 +22,8 @@

 .playerStats-closeButton {
    position: absolute;
-    top: .25em;
-    right: .25em;
+    top: 0.25em;
+    right: 0.25em;
    color: #ccc;
    z-index: 1;
 }
@ -44,7 +43,7 @@

 .playerStats-stat-label {
    font-weight: 500;
-    margin: 0 .5em 0 0;
+    margin: 0 0.5em 0 0;
 }

 .playerStats-stat-header {
--- a/src/components/recordingcreator/recordingcreator.css
+++ b/src/components/recordingcreator/recordingcreator.css
@ -9,7 +9,7 @@
 }

 .recordingDialog-itemName {
-    margin-top: .7em;
+    margin-top: 0.7em;
 }

 .recordingDetailsContainer {
--- a/src/components/recordingcreator/recordingfields.css
+++ b/src/components/recordingcreator/recordingfields.css
@ -4,9 +4,9 @@
 }

 .recordingIcon-active {
-    color: #cc3333;
+    color: #c33;
 }

 .recordSeriesContainer {
-    margin-bottom: .8em;
-}
+    margin-bottom: 0.8em;
+}
--- a/src/components/remotecontrol/remotecontrol.css
+++ b/src/components/remotecontrol/remotecontrol.css
@ -5,39 +5,39 @@
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
-    flex-direction: row
+    flex-direction: row;
 }

 .navigationSection {
-    text-align: center
+    text-align: center;
 }

-.btnArrowUp{
+.btnArrowUp {
    border-radius: 40% 40% 10% 10%;
 }

-.btnArrowLeft{
+.btnArrowLeft {
    border-radius: 40% 10% 10% 40%;
 }

-.btnArrowRight{
+.btnArrowRight {
    border-radius: 10% 40% 40% 10%;
 }

-.btnArrowDown{
+.btnArrowDown {
    border-radius: 10% 10% 40% 40%;
 }

-.btnOk{
+.btnOk {
    border-radius: 10%;
 }

 .nowPlayingPageTitle {
-    margin: 0 0 .5em .5em
+    margin: 0 0 0.5em 0.5em;
 }

 .nowPlayingPositionSliderContainer {
-    margin: .7em 0 .7em 1em
+    margin: 0.7em 0 0.7em 1em;
 }

 .nowPlayingInfoButtons {
@ -48,27 +48,27 @@
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
-    flex-wrap: wrap
+    flex-wrap: wrap;
 }

 .nowPlayingInfoControls,
 .nowPlayingTime {
    display: flex;
    display: -webkit-box;
-    display: -webkit-flex
+    display: -webkit-flex;
 }

 .nowPlayingPageImageContainer {
    width: 20%;
-    margin-right: .25em;
+    margin-right: 0.25em;
    position: relative;
    -webkit-flex-shrink: 0;
-    flex-shrink: 0
+    flex-shrink: 0;
 }

-@media all and (min-width:50em) {
+@media all and (min-width: 50em) {
    .nowPlayingPageImageContainer {
-        width: 16%
+        width: 16%;
    }
 }

@ -83,7 +83,7 @@
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
-    justify-content: center
+    justify-content: center;
 }

 .nowPlayingPageImage {
@ -93,16 +93,16 @@
    width: 100%;
    -webkit-box-shadow: 0 0 1.9vh #000;
    box-shadow: 0 0 1.9vh #000;
-    border: .1em solid #222;
+    border: 0.1em solid #222;
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
-    -ms-user-select: none
+    -ms-user-select: none;
 }

-@media all and (orientation:portrait) and (max-width:50em) {
+@media all and (orientation: portrait) and (max-width: 50em) {
    .nowPlayingInfoContainer {
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
@ -110,43 +110,43 @@
        flex-direction: column !important;
        -webkit-box-align: center;
        -webkit-align-items: center;
-        align-items: center
+        align-items: center;
    }

    .nowPlayingPageTitle {
        text-align: center;
-        margin: .5em 0 .75em
+        margin: 0.5em 0 0.75em;
    }

    .nowPlayingPositionSliderContainer {
-        margin: .7em 1em
+        margin: 0.7em 1em;
    }

    .nowPlayingInfoButtons {
        -webkit-box-pack: center;
        -webkit-justify-content: center;
-        justify-content: center
+        justify-content: center;
    }

    .nowPlayingPageImageContainer {
        width: auto;
-        margin-right: 0
+        margin-right: 0;
    }

    .nowPlayingInfoControls {
        margin-top: 1em;
-        max-width: 100%
+        max-width: 100%;
    }

    .nowPlayingPageImage {
        width: auto;
-        height: 36vh
+        height: 36vh;
    }
 }

-@media all and (orientation:portrait) and (max-width:40em) {
+@media all and (orientation: portrait) and (max-width: 40em) {
    .nowPlayingPageImage {
-        height: 30vh
+        height: 30vh;
    }
 }

@ -155,7 +155,7 @@
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
-    margin: 0 1em
+    margin: 0 1em;
 }

 .nowPlayingSecondaryButtons {
@ -169,35 +169,35 @@
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
-    justify-content: center
+    justify-content: center;
 }

-@media all and (min-width:50em) {
+@media all and (min-width: 50em) {
    .nowPlayingSecondaryButtons {
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        flex-grow: 1;
        -webkit-box-pack: end;
        -webkit-justify-content: flex-end;
-        justify-content: flex-end
+        justify-content: flex-end;
    }
 }

-@media all and (min-width:80em) {
+@media all and (min-width: 80em) {
    .nowPlayingPageImageContainer {
-        margin-right: .75em
+        margin-right: 0.75em;
    }
 }

 .nowPlayingNavButtonContainer {
-    width: 30em
+    width: 30em;
 }

-.smallBackdropPosterItem .cardOverlayInner>div {
+.smallBackdropPosterItem .cardOverlayInner > div {
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
-    overflow: hidden
+    overflow: hidden;
 }

 .playlistIndexIndicatorImage {
@ -207,32 +207,33 @@
 }

 .hideVideoButtons .videoButton {
-    display: none
+    display: none;
 }

 .nowPlayingVolumeSliderContainer {
-    width: 9em
+    width: 9em;
 }

-@media all and (max-width:50em) {
+@media all and (max-width: 50em) {
    .nowPlayingInfoButtons .nowPlayingPageUserDataButtons {
-        display: none !important
+        display: none !important;
    }
-    .navigationSection .collapseContent i{
+
+    .navigationSection .collapseContent i {
        font-size: 4em;
    }
 }

-@media all and (max-width:47em) {
+@media all and (max-width: 47em) {
    .nowPlayingInfoButtons .repeatToggleButton {
-        display: none !important
+        display: none !important;
    }
 }

-@media all and (max-width:34em) {
+@media all and (max-width: 34em) {
    .nowPlayingInfoButtons .btnNowPlayingFastForward,
    .nowPlayingInfoButtons .btnNowPlayingRewind,
    .nowPlayingInfoButtons .playlist .listItemMediaInfo {
-        display: none !important
+        display: none !important;
    }
 }
--- a/src/components/search/searchfields.css
+++ b/src/components/search/searchfields.css
@ -4,8 +4,8 @@
 }

 .searchfields-icon {
-    margin-bottom: .1em;
-    margin-right: .25em;
+    margin-bottom: 0.1em;
+    margin-right: 0.25em;
    font-size: 2em;
    align-self: flex-end;
 }
--- a/src/components/slideshow/style.css
+++ b/src/components/slideshow/style.css
@ -3,11 +3,14 @@
    background: #000;
 }

-.slideshowSwiperContainer, .swiper-wrapper, .swiper-slide {
+.slideshowSwiperContainer,
+.swiper-wrapper,
+.swiper-slide {
    background: #000;
 }

-.slideshowImage, .slideshowSwiperContainer {
+.slideshowImage,
+.slideshowSwiperContainer {
    position: fixed;
    top: 0;
    right: 0;
@ -27,11 +30,12 @@

 .slideshowImageText {
    position: fixed;
-    bottom: .25em;
-    right: .5em;
+    bottom: 0.25em;
+    right: 0.5em;
    color: #fff;
    z-index: 1002;
    font-weight: normal;
+
    /* Add an outline */
    text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
 }
@ -52,26 +56,26 @@

 .slideshowButtonIcon {
    color: #fff;
-    opacity: .7;
+    opacity: 0.7;
 }

 .btnSlideshowPrevious {
-    left: .5vh;
+    left: 0.5vh;
    top: 45vh;
    z-index: 1002;
    position: absolute;
 }

 .btnSlideshowNext {
-    right: .5vh;
+    right: 0.5vh;
    top: 45vh;
    z-index: 1002;
    position: absolute;
 }

 .topActionButtons {
-    right: .5vh;
-    top: .5vh;
+    right: 0.5vh;
+    top: 0.5vh;
    z-index: 1002;
    position: absolute;
 }
@ -81,9 +85,9 @@
    left: 0;
    bottom: 0;
    right: 0;
-    background-color: rgba(0, 0, 0, .7);
+    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
-    padding: .5%;
+    padding: 0.5%;
    display: flex;
    flex-direction: row;
    align-items: center;
@ -95,9 +99,9 @@
    left: 0;
    top: 0;
    right: 0;
-    background-color: rgba(0, 0, 0, .7);
+    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
-    padding: .5%;
+    padding: 0.5%;
    display: flex;
    flex-direction: row;
    align-items: center;
@ -121,14 +125,14 @@
 .slideTextInner {
    margin: 0 auto;
    max-width: 60%;
-    background: rgba(0,0,0,.8);
+    background: rgba(0, 0, 0, 0.8);
    display: inline-block;
-    padding: .5em 1em;
-    border-radius: .25em;
+    padding: 0.5em 1em;
+    border-radius: 0.25em;
 }

 .slideTitle {
-    margin: 0 0 .25em;
+    margin: 0 0 0.25em;
 }

 .slideSubtitle {
--- a/src/components/subtitleeditor/subtitleeditor.css
+++ b/src/components/subtitleeditor/subtitleeditor.css
@ -1,3 +1,3 @@
 .originalSubtitleFileLabel {
    margin-right: 1em;
-}
+}
--- a/src/components/subtitlesync/subtitlesync.css
+++ b/src/components/subtitlesync/subtitlesync.css
@ -3,8 +3,8 @@
    margin-left: 30%;
    margin-right: 30%;
    height: 4.2em;
-    background: rgba(28,28,28,0.8);
-    border-radius: .3em;
+    background: rgba(28, 28, 28, 0.8);
+    border-radius: 0.3em;
    color: #fff;
    position: absolute;
 }
@ -14,7 +14,7 @@
    top: 0;
    right: 0;
    color: #ccc;
-    z-index: 2; 
+    z-index: 2;
 }

 .subtitleSyncTextField {
@ -27,7 +27,7 @@
    text-align: center;
    font-size: 20px;
    color: white;
-    z-index: 2; 
+    z-index: 2;
 }

 #prompt {
@ -43,6 +43,6 @@
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
-    border-radius: .3em;
-    z-index: 1; 
-}
+    border-radius: 0.3em;
+    z-index: 1;
+}
--- a/src/components/toast/toast.css
+++ b/src/components/toast/toast.css
@ -3,9 +3,9 @@
    min-width: 20em;
    box-sizing: border-box;
    box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
-    border-radius: .15em;
+    border-radius: 0.15em;
    cursor: default;
-    transition: transform .3s ease-out;
+    transition: transform 0.3s ease-out;
    min-height: initial;
    padding: 1em 1.5em;
    bottom: 1em;
--- a/src/components/upnextdialog/upnextdialog.css
+++ b/src/components/upnextdialog/upnextdialog.css
@ -28,7 +28,7 @@
    position: relative;
    margin-right: 1em;
    flex-shrink: 0;
-    margin-bottom: .5em;
+    margin-bottom: 0.5em;
 }

 .upNextDialog-button {
@ -37,7 +37,6 @@
 }

@media all and (orientation: landscape) {
-
    .upNextDialog {
        flex-direction: row;
    }
--- a/src/components/userdatabuttons/userdatabuttons.css
+++ b/src/components/userdatabuttons/userdatabuttons.css
@ -1,3 +1,3 @@
 .btnUserDataOn {
-    color: #cc3333 !important;
-}
+    color: #c33 !important;
+}
--- a/src/components/usersettings/usersettings.js
+++ b/src/components/usersettings/usersettings.js
@ -1,5 +0,0 @@
-define(['userSettingsBuilder'], function (userSettingsBuilder) {
-    'use strict';
-
-    return new userSettingsBuilder();
-});
--- a/src/components/usersettings/usersettingsbuilder.js
+++ b/src/components/usersettings/usersettingsbuilder.js
@ -1,246 +0,0 @@
-define(['appSettings', 'events'], function (appSettings, events) {
-    'use strict';
-
-    function onSaveTimeout() {
-        var self = this;
-        self.saveTimeout = null;
-        self.currentApiClient.updateDisplayPreferences('usersettings', self.displayPrefs, self.currentUserId, 'emby');
-    }
-
-    function saveServerPreferences(instance) {
-        if (instance.saveTimeout) {
-            clearTimeout(instance.saveTimeout);
-        }
-
-        instance.saveTimeout = setTimeout(onSaveTimeout.bind(instance), 50);
-    }
-
-    function UserSettings() {
-    }
-
-    UserSettings.prototype.setUserInfo = function (userId, apiClient) {
-        if (this.saveTimeout) {
-            clearTimeout(this.saveTimeout);
-        }
-
-        this.currentUserId = userId;
-        this.currentApiClient = apiClient;
-
-        if (!userId) {
-            this.displayPrefs = null;
-            return Promise.resolve();
-        }
-
-        var self = this;
-
-        return apiClient.getDisplayPreferences('usersettings', userId, 'emby').then(function (result) {
-            result.CustomPrefs = result.CustomPrefs || {};
-            self.displayPrefs = result;
-        });
-    };
-
-    UserSettings.prototype.getData = function () {
-        return this.displayPrefs;
-    };
-
-    UserSettings.prototype.importFrom = function (instance) {
-        this.displayPrefs = instance.getData();
-    };
-
-    UserSettings.prototype.set = function (name, value, enableOnServer) {
-        var userId = this.currentUserId;
-        var currentValue = this.get(name, enableOnServer);
-        var result = appSettings.set(name, value, userId);
-
-        if (enableOnServer !== false && this.displayPrefs) {
-            this.displayPrefs.CustomPrefs[name] = value == null ? value : value.toString();
-            saveServerPreferences(this);
-        }
-
-        if (currentValue !== value) {
-            events.trigger(this, 'change', [name]);
-        }
-
-        return result;
-    };
-
-    UserSettings.prototype.get = function (name, enableOnServer) {
-        var userId = this.currentUserId;
-        if (enableOnServer !== false && this.displayPrefs) {
-            return this.displayPrefs.CustomPrefs[name];
-        }
-
-        return appSettings.get(name, userId);
-    };
-
-    UserSettings.prototype.serverConfig = function (config) {
-        var apiClient = this.currentApiClient;
-        if (config) {
-            return apiClient.updateUserConfiguration(this.currentUserId, config);
-        }
-
-        return apiClient.getUser(this.currentUserId).then(function (user) {
-            return user.Configuration;
-        });
-    };
-
-    UserSettings.prototype.enableCinemaMode = function (val) {
-        if (val != null) {
-            return this.set('enableCinemaMode', val.toString(), false);
-        }
-
-        val = this.get('enableCinemaMode', false);
-        return val !== 'false';
-    };
-
-    UserSettings.prototype.enableNextVideoInfoOverlay = function (val) {
-        if (val != null) {
-            return this.set('enableNextVideoInfoOverlay', val.toString());
-        }
-
-        val = this.get('enableNextVideoInfoOverlay', false);
-        return val !== 'false';
-    };
-
-    UserSettings.prototype.enableThemeSongs = function (val) {
-        if (val != null) {
-            return this.set('enableThemeSongs', val.toString(), false);
-        }
-
-        val = this.get('enableThemeSongs', false);
-        return val !== 'false';
-    };
-
-    UserSettings.prototype.enableThemeVideos = function (val) {
-        if (val != null) {
-            return this.set('enableThemeVideos', val.toString(), false);
-        }
-
-        val = this.get('enableThemeVideos', false);
-        return val !== 'false';
-    };
-
-    UserSettings.prototype.enableBackdrops = function (val) {
-        if (val != null) {
-            return this.set('enableBackdrops', val.toString(), false);
-        }
-
-        val = this.get('enableBackdrops', false);
-        return val !== 'false';
-    };
-
-    UserSettings.prototype.language = function (val) {
-        if (val != null) {
-            return this.set('language', val.toString(), false);
-        }
-
-        return this.get('language', false);
-    };
-
-    UserSettings.prototype.dateTimeLocale = function (val) {
-        if (val != null) {
-            return this.set('datetimelocale', val.toString(), false);
-        }
-
-        return this.get('datetimelocale', false);
-    };
-
-    UserSettings.prototype.skipBackLength = function (val) {
-        if (val != null) {
-            return this.set('skipBackLength', val.toString());
-        }
-
-        return parseInt(this.get('skipBackLength') || '10000');
-    };
-
-    UserSettings.prototype.skipForwardLength = function (val) {
-        if (val != null) {
-            return this.set('skipForwardLength', val.toString());
-        }
-
-        return parseInt(this.get('skipForwardLength') || '30000');
-    };
-
-    UserSettings.prototype.dashboardTheme = function (val) {
-        if (val != null) {
-            return this.set('dashboardTheme', val);
-        }
-
-        return this.get('dashboardTheme');
-    };
-
-    UserSettings.prototype.skin = function (val) {
-        if (val != null) {
-            return this.set('skin', val, false);
-        }
-
-        return this.get('skin', false);
-    };
-
-    UserSettings.prototype.theme = function (val) {
-        if (val != null) {
-            return this.set('appTheme', val, false);
-        }
-
-        return this.get('appTheme', false);
-    };
-
-    UserSettings.prototype.screensaver = function (val) {
-        if (val != null) {
-            return this.set('screensaver', val, false);
-        }
-
-        return this.get('screensaver', false);
-    };
-
-    UserSettings.prototype.soundEffects = function (val) {
-        if (val != null) {
-            return this.set('soundeffects', val, false);
-        }
-
-        return this.get('soundeffects', false);
-    };
-
-    UserSettings.prototype.loadQuerySettings = function (key, query) {
-        var values = this.get(key);
-        if (values) {
-            values = JSON.parse(values);
-            return Object.assign(query, values);
-        }
-
-        return query;
-    };
-
-    UserSettings.prototype.saveQuerySettings = function (key, query) {
-        var values = {};
-        if (query.SortBy) {
-            values.SortBy = query.SortBy;
-        }
-
-        if (query.SortOrder) {
-            values.SortOrder = query.SortOrder;
-        }
-
-        return this.set(key, JSON.stringify(values));
-    };
-
-    UserSettings.prototype.getSubtitleAppearanceSettings = function (key) {
-        key = key || 'localplayersubtitleappearance3';
-        return JSON.parse(this.get(key, false) || '{}');
-    };
-
-    UserSettings.prototype.setSubtitleAppearanceSettings = function (value, key) {
-        key = key || 'localplayersubtitleappearance3';
-        return this.set(key, JSON.stringify(value), false);
-    };
-
-    UserSettings.prototype.setFilter = function (key, value) {
-        return this.set(key, value, true);
-    };
-
-    UserSettings.prototype.getFilter = function (key) {
-        return this.get(key, true);
-    };
-
-    return UserSettings;
-});
--- a/src/components/viewManager/viewContainer.css
+++ b/src/components/viewManager/viewContainer.css
@ -5,8 +5,10 @@
    right: 0;
    bottom: 0;
    contain: layout style size;
-    /* Can't use will-change because it causes the alpha picker to move when the page scrolls*/
-    /*will-change: transform;*/
+
+    /* Can't use will-change because it causes the alpha picker to move when the page scrolls */
+
+    /* will-change: transform; */
 }

@keyframes view-fadeout {
@ -18,6 +20,7 @@
        opacity: 0;
    }
 }
+
@keyframes view-fadein {
    from {
        opacity: 0;
@ -66,4 +69,4 @@
    to {
        transform: translate3d(100%, 0, 0);
    }
-}
+}
--- a/src/components/youtubeplayer/style.css
+++ b/src/components/youtubeplayer/style.css
@ -9,13 +9,13 @@
    align-items: center;
 }

-    .youtubePlayerContainer.onTop {
-        z-index: 1000;
-    }
+.youtubePlayerContainer.onTop {
+    z-index: 1000;
+}

-    .youtubePlayerContainer video {
-        margin: 0 !important;
-        padding: 0 !important;
-        width: 100%;
-        height: 100%;
-    }
+.youtubePlayerContainer video {
+    margin: 0 !important;
+    padding: 0 !important;
+    width: 100%;
+    height: 100%;
+}