merge branch master into itemdetailpage-layout

src/components/actionsheet/actionsheet.css

@@ -37,11 +37,12 @@
     box-shadow: none;
     flex-shrink: 0;
     border-radius: 0;
+    margin: 0;
 }
 
-    .actionSheetMenuItem:focus {
-        transform: none !important;
-    }
+.actionSheetMenuItem:focus {
+    transform: none !important;
+}
 
 .actionsheetListItemBody {
     padding: .4em 1em .4em .6em !important;
@@ -104,7 +105,7 @@
 }
 
 .actionsheet-xlargeFont {
-    font-size: 112%!important;
+    font-size: 112% !important;
 }
 
 .btnCloseActionSheet {

src/components/actionsheet/package.json

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

src/components/apphost.js

@@ -278,6 +278,7 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
         features.push("targetblank");
         // allows users to connect to more than one server
         //features.push("multiserver");
+        features.push("screensaver");
 
         if (!browser.orsay && !browser.tizen && !browser.msie && (browser.firefox || browser.ps4 || browser.edge || cueSupported())) {
             features.push("subtitleappearancesettings");

src/components/backdrop/backdrop.js

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

src/components/backdrop/package.json

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

src/components/backdropscreensaver/plugin.js

@@ -0,0 +1,56 @@
+define(["connectionManager"], function (connectionManager) {
+
+    return function () {
+
+        var self = this;
+
+        self.name = "Backdrop ScreenSaver";
+        self.type = "screensaver";
+        self.id = "backdropscreensaver";
+        self.supportsAnonymous = false;
+
+        var currentSlideshow;
+
+        self.show = function () {
+
+            var query = {
+                ImageTypes: "Backdrop",
+                EnableImageTypes: "Backdrop",
+                IncludeItemTypes: "Movie,Series,MusicArtist",
+                SortBy: "Random",
+                Recursive: true,
+                Fields: "Taglines",
+                ImageTypeLimit: 1,
+                StartIndex: 0,
+                Limit: 200
+            };
+
+            var apiClient = connectionManager.currentApiClient();
+            apiClient.getItems(apiClient.getCurrentUserId(), query).then(function (result) {
+
+                if (result.Items.length) {
+
+                    require(["slideshow"], function (slideshow) {
+
+                        var newSlideShow = new slideshow({
+                            showTitle: true,
+                            cover: true,
+                            items: result.Items
+                        });
+
+                        newSlideShow.show();
+                        currentSlideshow = newSlideShow;
+                    });
+                }
+            });
+        };
+
+        self.hide = function () {
+
+            if (currentSlideshow) {
+                currentSlideshow.hide();
+                currentSlideshow = null;
+            }
+        };
+    }
+});

src/components/cardbuilder/card.css

@@ -18,7 +18,6 @@ button {
     padding: 0;
     display: block;
     color: inherit !important;
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
     outline: none !important;
     cursor: pointer;
     contain: layout style;
@@ -80,10 +79,9 @@ 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);
     outline: none !important;
-    contain: layout style;
+    contain: layout;
+    contain: style;
 }
 
 .card.show-focus:not(.show-animation) .cardBox {
@@ -148,7 +146,6 @@ button {
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
-    display: -webkit-flex;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -182,7 +179,6 @@ button {
     margin: 0 !important;
     /* Needed in safari */
     height: 100%;
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
     outline: none !important;
     contain: strict;
 }
@@ -247,7 +243,7 @@ button {
 }
 
 .coveredImage {
-    background-size: 100% 100%;
+    background-size: cover;
     background-position: center center;
 }
 
@@ -346,7 +342,6 @@ button {
     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;
@@ -627,7 +622,7 @@ button {
 
 @media (min-width: 43.75em) {
     .overflowSquareCard, .overflowPortraitCard {
-        width: 23.3vw;
+        width: 23.1vw;
     }
 }
 
@@ -643,13 +638,13 @@ button {
     }
 
     .overflowSquareCard, .overflowPortraitCard {
-        width: 23.3vw;
+        width: 23.1vw;
     }
 }
 
 @media (orientation: landscape) and (min-width: 48.125em) {
     .overflowBackdropCard, .overflowSmallBackdropCard {
-        width: 23.3vw;
+        width: 23.1vw;
     }
 }
 
@@ -661,13 +656,13 @@ button {
 
 @media (min-width: 50em) {
     .overflowSquareCard, .overflowPortraitCard {
-        width: 18.4vw;
+        width: 18.5vw;
     }
 }
 
 @media (min-width: 75em) {
     .overflowBackdropCard, .overflowSmallBackdropCard {
-        width: 23.3vw;
+        width: 23.1vw;
     }
 
     .overflowSquareCard, .overflowPortraitCard {
@@ -780,4 +775,4 @@ button {
 .cardOverlayFab-primary:hover {
     transform: scale(1.4, 1.4);
     transition: 0.2s;
-}
+}

src/components/cardbuilder/cardBuilder.js

@@ -892,7 +892,8 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                         } else {
 
                             if (item.EndDate && item.ProductionYear) {
-                                lines.push(item.ProductionYear + ' - ' + datetime.parseISO8601Date(item.EndDate).getFullYear());
+                                var endYear = datetime.parseISO8601Date(item.EndDate).getFullYear();
+                                lines.push(item.ProductionYear + ((endYear === item.ProductionYear) ? '' : (' - ' + endYear)));
                             } else {
                                 lines.push(item.ProductionYear || '');
                             }

src/components/clearbutton.css

@@ -1,12 +0,0 @@
-.clearButton {
-    background: transparent;
-    border: 0 !important;
-    padding: 0 !important;
-    cursor: pointer;
-    outline: none !important;
-    color: inherit;
-    width: 100%;
-    vertical-align: middle;
-    font-family: inherit;
-    font-size: inherit;
-}

src/components/dialog/package.json

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

src/components/dialogHelper/dialoghelper.css

@@ -16,7 +16,6 @@
 .dialog {
     margin: 0;
     border-radius: .2em;
-    -webkit-font-smoothing: antialiased;
     border: 0;
     padding: 0;
     will-change: transform, opacity;

src/components/dialogHelper/package.json

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

src/components/directorybrowser/directorybrowser.js

@@ -223,9 +223,9 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
 
     function getDefaultPath(options) {
         if (options.path) {
-            Promise.resolve(options.path);
+            return Promise.resolve(options.path);
         } else {
-            ApiClient.getJSON(ApiClient.getUrl("Environment/DefaultDirectoryBrowser")).then(
+            return ApiClient.getJSON(ApiClient.getUrl("Environment/DefaultDirectoryBrowser")).then(
                 function(result) {
                     return result.Path || "";
                 }, function() {

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

@@ -1,186 +0,0 @@
-.emby-button {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    box-sizing: border-box;
-    margin: 0 0.3em;
-    text-align: center;
-    font-size: inherit;
-    font-family: inherit;
-    color: inherit;
-    outline-width: 0;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    -webkit-user-select: none;
-    user-select: none;
-    cursor: pointer;
-    z-index: 0;
-    padding: 0.9em 1em;
-    vertical-align: middle;
-    border: 0;
-    vertical-align: middle;
-    border-radius: 0.2em;
-    /* These are getting an outline in opera tv browsers, which run chrome 30 */
-    outline: none !important;
-    position: relative;
-    font-weight: 600;
-    /* Disable webkit tap highlighting */
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
-    text-decoration: none;
-    /* Not crazy about this but it normalizes heights between anchors and buttons */
-    line-height: 1.35;
-    transform-origin: center;
-    transition: 0.2s;
-}
-
-.emby-button.show-focus:focus {
-    transform: scale(1.2);
-    z-index: 1;
-}
-
-.emby-button::-moz-focus-inner {
-    border: 0;
-}
-
-.button-flat {
-    background: transparent;
-}
-
-.button-flat:hover {
-    opacity: .5;
-}
-
-.button-link {
-    background: transparent;
-    margin: 0;
-    padding: 0;
-    vertical-align: initial;
-}
-
-.button-link:hover {
-    text-decoration: underline;
-}
-
-.emby-button > i {
-    /* For non-fab buttons that have icons */
-    font-size: 1.36em;
-}
-
-.button-link > i {
-    font-size: 1em;
-}
-
-.fab {
-    display: inline-flex;
-    border-radius: 50%;
-    padding: 0.6em;
-    box-sizing: border-box;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-}
-
-.emby-button.block {
-    display: block;
-    align-items: center;
-    justify-content: center;
-    margin: .25em 0;
-    width: 100%;
-}
-
-.paper-icon-button-light {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    box-sizing: border-box;
-    margin: 0 .29em;
-    background: transparent;
-    text-align: center;
-    font-size: inherit;
-    font-family: inherit;
-    color: inherit;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    -webkit-user-select: none;
-    user-select: none;
-    cursor: pointer;
-    z-index: 0;
-    min-width: initial;
-    min-height: initial;
-    width: auto;
-    height: auto;
-    padding: .556em;
-    vertical-align: middle;
-    border: 0;
-    vertical-align: middle;
-    /* These are getting an outline in opera tv browsers, which run chrome 30 */
-    outline: none !important;
-    position: relative;
-    overflow: hidden;
-    border-radius: 50%;
-    /* Disable webkit tap highlighting */
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
-    justify-content: center;
-    transform-origin: center;
-    transition: 0.2s;
-}
-
-.paper-icon-button-light.show-focus:focus {
-    transform: scale(1.3);
-    z-index: 1;
-}
-
-    .paper-icon-button-light::-moz-focus-inner {
-        border: 0;
-    }
-
-    .paper-icon-button-light:disabled {
-        opacity: 0.3;
-        cursor: default;
-    }
-
-    .paper-icon-button-light > i {
-        font-size: 1.66956521739130434em;
-        /* Make sure its on top of the ripple */
-        position: relative;
-        z-index: 1;
-        vertical-align: middle;
-    }
-
-    .paper-icon-button-light > div {
-        max-height: 100%;
-        transform: scale(1.8);
-        position: relative;
-        z-index: 1;
-        vertical-align: middle;
-        display: inline;
-        margin: 0 auto;
-    }
-
-.emby-button-foreground {
-    position: relative;
-    z-index: 1;
-}
-
-.btnFilterWithBubble {
-    position: relative;
-}
-
-.filterButtonBubble {
-    color: #fff;
-    position: absolute;
-    background: #444;
-    top: 0;
-    right: 0;
-    width: 1.6em;
-    height: 1.6em;
-    z-index: 100000000;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 82%;
-    border-radius: 100em;
-    box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
-    background: #03A9F4;
-    font-weight: bold;
-}

src/components/emby-button/emby-button.js

@@ -1,70 +0,0 @@
-define(['browser', 'dom', 'layoutManager', 'shell', 'appRouter', 'apphost', 'css!./emby-button', 'registerElement'], function (browser, dom, layoutManager, shell, appRouter, appHost) {
-    'use strict';
-
-    var EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype);
-    var EmbyLinkButtonPrototype = Object.create(HTMLAnchorElement.prototype);
-
-    function onAnchorClick(e) {
-        var href = this.getAttribute('href') || '';
-        if (href !== '#') {
-            if (this.getAttribute('target')) {
-                if (!appHost.supports('targetblank')) {
-                    e.preventDefault();
-                    shell.openUrl(href);
-                }
-            } else {
-                appRouter.handleAnchorClick(e);
-            }
-        } else {
-            e.preventDefault();
-        }
-    }
-
-    EmbyButtonPrototype.createdCallback = function () {
-        if (this.classList.contains('emby-button')) {
-            return;
-        }
-
-        this.classList.add('emby-button');
-        // TODO replace all instances of element-showfocus with this method
-        if (layoutManager.tv) {
-            // handles all special css for tv layout
-            // this method utilizes class chaining
-            this.classList.add('show-focus');
-        }
-    };
-
-    EmbyButtonPrototype.attachedCallback = function () {
-        if (this.tagName === 'A') {
-            dom.removeEventListener(this, 'click', onAnchorClick, {});
-            dom.addEventListener(this, 'click', onAnchorClick, {});
-
-            if (this.getAttribute('data-autohide') === 'true') {
-                if (appHost.supports('externallinks')) {
-                    this.classList.remove('hide');
-                } else {
-                    this.classList.add('hide');
-                }
-            }
-        }
-    };
-
-    EmbyButtonPrototype.detachedCallback = function () {
-        dom.removeEventListener(this, 'click', onAnchorClick, {});
-    };
-
-    EmbyLinkButtonPrototype.createdCallback = EmbyButtonPrototype.createdCallback;
-    EmbyLinkButtonPrototype.attachedCallback = EmbyButtonPrototype.attachedCallback;
-
-    document.registerElement('emby-button', {
-        prototype: EmbyButtonPrototype,
-        extends: 'button'
-    });
-
-    document.registerElement('emby-linkbutton', {
-        prototype: EmbyLinkButtonPrototype,
-        extends: 'a'
-    });
-
-    return EmbyButtonPrototype;
-});

src/components/emby-button/paper-icon-button-light.js

@@ -1,18 +0,0 @@
-define(['layoutManager', 'css!./emby-button', 'registerElement'], function (layoutManager) {
-    'use strict';
-
-    var EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype);
-
-    EmbyButtonPrototype.createdCallback = function () {
-        this.classList.add('paper-icon-button-light');
-
-        if (layoutManager.tv) {
-            this.classList.add('show-focus');
-        }
-    };
-
-    document.registerElement('paper-icon-button-light', {
-        prototype: EmbyButtonPrototype,
-        extends: 'button'
-    });
-});

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

@@ -1,126 +0,0 @@
-.emby-checkbox-label {
-    position: relative;
-    z-index: 1;
-    vertical-align: middle;
-    display: inline-flex;
-    box-sizing: border-box;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    padding-left: 2.4em;
-    align-items: center;
-    height: 2.35em;
-    cursor: pointer;
-}
-
-.checkboxFieldDescription {
-    padding-left: 2.4em;
-}
-
-.checkboxContainer {
-    margin-bottom: 1.8em;
-    display: flex;
-}
-
-.checkboxListContainer {
-    margin-bottom: 1.8em;
-}
-
-.checkboxContainer-withDescription {
-    flex-direction: column;
-}
-
-.emby-checkbox {
-    position: absolute;
-    /* This is for focusing purposes, so the focusManager doesn't skip over it */
-    width: 1px;
-    height: 1px;
-    margin: 0;
-    padding: 0;
-    opacity: 0;
-    -ms-appearance: none;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    appearance: none;
-    border: none;
-}
-
-.checkboxOutline {
-    position: absolute;
-    top: 3px;
-    left: 0;
-    display: inline-block;
-    box-sizing: border-box;
-    width: 1.83em;
-    height: 1.83em;
-    margin: 0;
-    overflow: hidden;
-    border: 2px solid currentcolor;
-    border-radius: .14em;
-    z-index: 2;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.checkboxIcon {
-    font-size: 1.6em;
-    color: #fff;
-}
-
-.checkboxIcon-checked {
-    display: none;
-}
-
-.emby-checkbox:checked + span + .checkboxOutline > .checkboxIcon-checked {
-    /* background color set by theme */
-    display: flex !important;
-}
-
-.emby-checkbox:checked + span + .checkboxOutline > .checkboxIcon-unchecked {
-    /* background color set by theme */
-    display: none !important;
-}
-
-.emby-checkbox:checked[disabled] + span + .checkboxOutline > .checkboxIcon {
-    background-color: rgba(0, 0, 0, 0.26);
-}
-
-.checkboxLabel {
-    position: relative;
-    margin: 0;
-}
-
-.checkboxList > .emby-checkbox-label {
-    display: flex;
-    margin: 0.5em 0;
-}
-
-.checkboxList-verticalwrap {
-    display: flex;
-    flex-wrap: wrap;
-}
-
-    .checkboxList-verticalwrap > .emby-checkbox-label {
-        display: inline-flex;
-        margin: .3em 0 .3em 0;
-        width: 12em;
-    }
-
-.checkboxList-paperList {
-    padding: 1em !important;
-}
-
-.checkboxListLabel {
-    margin-bottom: .25em;
-}
-
-@-webkit-keyframes repaintChrome {
-    from {
-        padding: 0;
-    }
-
-    to {
-        padding: 0;
-    }
-}

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

@@ -1,105 +0,0 @@
-define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (browser, dom) {
-    'use strict';
-
-    var EmbyCheckboxPrototype = Object.create(HTMLInputElement.prototype);
-
-    function onKeyDown(e) {
-        // Don't submit form on enter
-        if (e.keyCode === 13) {
-            e.preventDefault();
-
-            this.checked = !this.checked;
-
-            this.dispatchEvent(new CustomEvent('change', {
-                bubbles: true
-            }));
-
-            return false;
-        }
-    }
-
-    var enableRefreshHack = browser.tizen || browser.orsay || browser.operaTv || browser.web0s ? true : false;
-
-    function forceRefresh(loading) {
-        var elem = this.parentNode;
-
-        elem.style.webkitAnimationName = 'repaintChrome';
-        elem.style.webkitAnimationDelay = (loading === true ? '500ms' : '');
-        elem.style.webkitAnimationDuration = '10ms';
-        elem.style.webkitAnimationIterationCount = '1';
-
-        setTimeout(function () {
-            elem.style.webkitAnimationName = '';
-        }, (loading === true ? 520 : 20));
-    }
-
-    EmbyCheckboxPrototype.attachedCallback = function () {
-        if (this.getAttribute('data-embycheckbox') === 'true') {
-            return;
-        }
-
-        this.setAttribute('data-embycheckbox', 'true');
-
-        this.classList.add('emby-checkbox');
-
-        var labelElement = this.parentNode;
-        labelElement.classList.add('emby-checkbox-label');
-
-        var labelTextElement = labelElement.querySelector('span');
-
-        var outlineClass = 'checkboxOutline';
-
-        var customClass = this.getAttribute('data-outlineclass');
-        if (customClass) {
-            outlineClass += ' ' + customClass;
-        }
-
-        var checkedIcon = this.getAttribute('data-checkedicon') || 'check';
-        var uncheckedIcon = this.getAttribute('data-uncheckedicon') || '';
-        var checkHtml = '<i class="md-icon checkboxIcon checkboxIcon-checked">' + checkedIcon + '</i>';
-        var uncheckedHtml = '<i class="md-icon checkboxIcon checkboxIcon-unchecked">' + uncheckedIcon + '</i>';
-        labelElement.insertAdjacentHTML('beforeend', '<span class="' + outlineClass + '">' + checkHtml + uncheckedHtml + '</span>');
-
-        labelTextElement.classList.add('checkboxLabel');
-
-        this.addEventListener('keydown', onKeyDown);
-
-        if (enableRefreshHack) {
-            forceRefresh.call(this, true);
-            dom.addEventListener(this, 'click', forceRefresh, {
-                passive: true
-            });
-            dom.addEventListener(this, 'blur', forceRefresh, {
-                passive: true
-            });
-            dom.addEventListener(this, 'focus', forceRefresh, {
-                passive: true
-            });
-            dom.addEventListener(this, 'change', forceRefresh, {
-                passive: true
-            });
-        }
-    };
-
-    EmbyCheckboxPrototype.detachedCallback = function () {
-        this.removeEventListener('keydown', onKeyDown);
-
-        dom.removeEventListener(this, 'click', forceRefresh, {
-            passive: true
-        });
-        dom.removeEventListener(this, 'blur', forceRefresh, {
-            passive: true
-        });
-        dom.removeEventListener(this, 'focus', forceRefresh, {
-            passive: true
-        });
-        dom.removeEventListener(this, 'change', forceRefresh, {
-            passive: true
-        });
-    };
-
-    document.registerElement('emby-checkbox', {
-        prototype: EmbyCheckboxPrototype,
-        extends: 'input'
-    });
-});

src/components/emby-collapse/emby-collapse.css

@@ -1,44 +0,0 @@
-.emby-collapse {
-    margin: .5em 0;
-}
-
-.collapseContent {
-    border-width: 0;
-    padding: 1.25em 1.25em;
-    height: 0;
-    transition-property: height;
-    transition-duration: 300ms;
-    overflow: hidden;
-}
-
-.emby-collapsible-button {
-    margin: 0;
-    display: flex;
-    align-items: center;
-    text-transform: none;
-    width: 100%;
-    text-align: left;
-    text-transform: none;
-    border-width: 0 0 .1em 0;
-    border-style: solid;
-    padding-left: .1em;
-    background: transparent;
-    box-shadow: none;
-}
-
-.emby-collapse-expandIcon {
-    transform-origin: 50% 50%;
-    transition: transform 180ms ease-out;
-    position: absolute;
-    right: .5em;
-    font-size: 1.5em;
-}
-
-.emby-collapse-expandIconExpanded {
-    transform: rotate(180deg);
-}
-
-.emby-collapsible-title {
-    margin: 0;
-    padding: 0;
-}

src/components/emby-collapse/emby-collapse.js

@@ -1,100 +0,0 @@
-define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], function (browser) {
-    'use strict';
-
-    var EmbyButtonPrototype = Object.create(HTMLDivElement.prototype);
-
-    function slideDownToShow(button, elem) {
-
-        elem.classList.remove('hide');
-        elem.classList.add('expanded');
-        elem.style.height = 'auto';
-        var height = elem.offsetHeight + 'px';
-        elem.style.height = '0';
-
-        // trigger reflow
-        var newHeight = elem.offsetHeight;
-        elem.style.height = height;
-
-        setTimeout(function () {
-            if (elem.classList.contains('expanded')) {
-                elem.classList.remove('hide');
-            } else {
-                elem.classList.add('hide');
-            }
-            elem.style.height = 'auto';
-        }, 300);
-
-        var icon = button.querySelector('i');
-        //icon.innerHTML = 'expand_less';
-        icon.classList.add('emby-collapse-expandIconExpanded');
-    }
-
-    function slideUpToHide(button, elem) {
-
-        elem.style.height = elem.offsetHeight + 'px';
-        // trigger reflow
-        var newHeight = elem.offsetHeight;
-
-        elem.classList.remove('expanded');
-        elem.style.height = '0';
-
-        setTimeout(function () {
-            if (elem.classList.contains('expanded')) {
-                elem.classList.remove('hide');
-            } else {
-                elem.classList.add('hide');
-            }
-        }, 300);
-
-        var icon = button.querySelector('i');
-        //icon.innerHTML = 'expand_more';
-        icon.classList.remove('emby-collapse-expandIconExpanded');
-    }
-
-    function onButtonClick(e) {
-
-        var button = this;
-        var collapseContent = button.parentNode.querySelector('.collapseContent');
-
-        if (collapseContent.expanded) {
-            collapseContent.expanded = false;
-            slideUpToHide(button, collapseContent);
-        } else {
-            collapseContent.expanded = true;
-            slideDownToShow(button, collapseContent);
-        }
-    }
-
-    EmbyButtonPrototype.attachedCallback = function () {
-
-        if (this.classList.contains('emby-collapse')) {
-            return;
-        }
-
-        this.classList.add('emby-collapse');
-
-        var collapseContent = this.querySelector('.collapseContent');
-        if (collapseContent) {
-            collapseContent.classList.add('hide');
-        }
-
-        var title = this.getAttribute('title');
-
-        var html = '<button is="emby-button" type="button" on-click="toggleExpand" id="expandButton" class="emby-collapsible-button iconRight"><h3 class="emby-collapsible-title" title="' + title + '">' + title + '</h3><i class="md-icon emby-collapse-expandIcon">expand_more</i></button>';
-
-        this.insertAdjacentHTML('afterbegin', html);
-
-        var button = this.querySelector('.emby-collapsible-button');
-
-        button.addEventListener('click', onButtonClick);
-
-        if (this.getAttribute('data-expanded') === 'true') {
-            onButtonClick.call(button);
-        }
-    };
-
-    document.registerElement('emby-collapse', {
-        prototype: EmbyButtonPrototype,
-        extends: 'div'
-    });
-});

src/components/emby-input/emby-input.css

@@ -1,40 +0,0 @@
-.emby-input {
-    display: block;
-    margin: 0;
-    margin-bottom: 0 !important;
-    /* Remove select styling */
-    /* Font size must the 16px or larger to prevent iOS page zoom on focus */
-    font-size: 110%;
-    /* General select styles: change as needed */
-    font-family: inherit;
-    font-weight: inherit;
-    padding: .4em .25em;
-    /* Prevent padding from causing width overflow */
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    outline: none !important;
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
-    width: 100%;
-}
-
-    .emby-input::-moz-focus-inner {
-        border: 0;
-    }
-
-.inputContainer {
-    margin-bottom: 1.8em;
-}
-
-.inputLabel {
-    display: inline-block;
-    margin-bottom: .25em;
-}
-
-.emby-input + .fieldDescription {
-    margin-top: .25em;
-}
-
-.emby-input-iconbutton {
-    -webkit-align-self: flex-end;
-    align-self: flex-end;
-}

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

@@ -1,126 +0,0 @@
-define(['layoutManager', 'browser', 'dom', 'css!./emby-input', 'registerElement'], function (layoutManager, browser, dom) {
-    'use strict';
-
-    var EmbyInputPrototype = Object.create(HTMLInputElement.prototype);
-
-    var inputId = 0;
-    var supportsFloatingLabel = false;
-
-    if (Object.getOwnPropertyDescriptor && Object.defineProperty) {
-
-        var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
-
-        // descriptor returning null in webos
-        if (descriptor && descriptor.configurable) {
-            var baseSetMethod = descriptor.set;
-            descriptor.set = function (value) {
-                baseSetMethod.call(this, value);
-
-                this.dispatchEvent(new CustomEvent('valueset', {
-                    bubbles: false,
-                    cancelable: false
-                }));
-            };
-
-            Object.defineProperty(HTMLInputElement.prototype, 'value', descriptor);
-            supportsFloatingLabel = true;
-        }
-    }
-
-    EmbyInputPrototype.createdCallback = function () {
-        if (!this.id) {
-            this.id = 'embyinput' + inputId;
-            inputId++;
-        }
-
-        if (this.classList.contains('emby-input')) {
-            return;
-        }
-
-        this.classList.add('emby-input');
-
-        var parentNode = this.parentNode;
-        var document = this.ownerDocument;
-        var label = document.createElement('label');
-        label.innerHTML = this.getAttribute('label') || '';
-        label.classList.add('inputLabel');
-        label.classList.add('inputLabelUnfocused');
-
-        label.htmlFor = this.id;
-        parentNode.insertBefore(label, this);
-        this.labelElement = label;
-
-        dom.addEventListener(this, 'focus', function () {
-            onChange.call(this);
-
-            // For Samsung orsay devices
-            if (document.attachIME) {
-                document.attachIME(this);
-            }
-
-            label.classList.add('inputLabelFocused');
-            label.classList.remove('inputLabelUnfocused');
-        }, {
-            passive: true
-        });
-
-        dom.addEventListener(this, 'blur', function () {
-            onChange.call(this);
-            label.classList.remove('inputLabelFocused');
-            label.classList.add('inputLabelUnfocused');
-        }, {
-            passive: true
-        });
-
-        dom.addEventListener(this, 'change', onChange, {
-            passive: true
-        });
-        dom.addEventListener(this, 'input', onChange, {
-            passive: true
-        });
-        dom.addEventListener(this, 'valueset', onChange, {
-            passive: true
-        });
-
-        if (browser.orsay) {
-            if (this === document.activeElement) {
-                //Make sure the IME pops up if this is the first/default element on the page
-                if (document.attachIME) {
-                    document.attachIME(this);
-                }
-            }
-        }
-
-    };
-
-    function onChange() {
-
-        var label = this.labelElement;
-        if (this.value) {
-            label.classList.remove('inputLabel-float');
-        } else {
-
-            var instanceSupportsFloat = supportsFloatingLabel && this.type !== 'date' && this.type !== 'time';
-
-            if (instanceSupportsFloat) {
-                label.classList.add('inputLabel-float');
-            }
-        }
-    }
-
-    EmbyInputPrototype.attachedCallback = function () {
-
-        this.labelElement.htmlFor = this.id;
-
-        onChange.call(this);
-    };
-
-    EmbyInputPrototype.label = function (text) {
-        this.labelElement.innerHTML = text;
-    };
-
-    document.registerElement('emby-input', {
-        prototype: EmbyInputPrototype,
-        extends: 'input'
-    });
-});

src/components/emby-input/package.json

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

src/components/emby-progressring/emby-progressring.css

@@ -1,105 +0,0 @@
-.progressring {
-    position: relative;
-    width: 2.6em;
-    height: 2.6em;
-    float: left;
-    user-select: none;
-    box-sizing: border-box;
-}
-
-.progressring-bg {
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    border: .25em solid rgba(0, 0, 0, 1);
-    box-sizing: border-box;
-    background: rgba(0, 0, 0, .9);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.progressring-text {
-    text-align: center;
-    color: #ddd;
-    font-size: 90%;
-}
-
-.spiner-holder-one {
-    position: absolute;
-    top: 0;
-    left: 0;
-    overflow: hidden;
-    width: 51%;
-    height: 51%;
-    background: transparent;
-    box-sizing: border-box;
-}
-
-.spiner-holder-two {
-    position: absolute;
-    top: 0;
-    left: 0;
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
-    background: transparent;
-    box-sizing: border-box;
-}
-
-.progressring-spiner {
-    width: 200%;
-    height: 200%;
-    border-radius: 50%;
-    border-width: .25em;
-    border-style: solid;
-    box-sizing: border-box;
-}
-
-.animate-0-25-a {
-    transform: rotate(90deg);
-    transform-origin: 100% 100%;
-    transition: transform 180ms ease-out;
-}
-
-.animate-0-25-b {
-    transform: rotate(-90deg);
-    transform-origin: 100% 100%;
-    transition: transform 180ms ease-out;
-}
-
-.animate-25-50-a {
-    transform: rotate(180deg);
-    transform-origin: 100% 100%;
-    transition: transform 180ms ease-out;
-}
-
-.animate-25-50-b {
-    transform: rotate(-90deg);
-    transform-origin: 100% 100%;
-    transition: transform 180ms ease-out;
-}
-
-.animate-50-75-a {
-    transform: rotate(270deg);
-    transform-origin: 100% 100%;
-    transition: transform 180ms ease-out;
-}
-
-.animate-50-75-b {
-    transform: rotate(-90deg);
-    transform-origin: 100% 100%;
-    transition: transform 180ms ease-out;
-}
-
-.animate-75-100-a {
-    transform: rotate(0deg);
-    transform-origin: 100% 100%;
-    transition: transform 180ms ease-out;
-}
-
-.animate-75-100-b {
-    transform: rotate(-90deg);
-    transform-origin: 100% 100%;
-    transition: transform 180ms ease-out;
-}

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

@@ -1,101 +0,0 @@
-define(['require', 'css!./emby-progressring', 'registerElement'], function (require) {
-    'use strict';
-
-    var EmbyProgressRing = Object.create(HTMLDivElement.prototype);
-
-    EmbyProgressRing.createdCallback = function () {
-
-        this.classList.add('progressring');
-        var instance = this;
-
-        require(['text!./emby-progressring.template.html'], function (template) {
-            instance.innerHTML = template;
-
-            //if (window.MutationObserver) {
-            //    // create an observer instance
-            //    var observer = new MutationObserver(function (mutations) {
-            //        mutations.forEach(function (mutation) {
-
-            //            instance.setProgress(parseFloat(instance.getAttribute('data-progress') || '0'));
-            //        });
-            //    });
-
-            //    // configuration of the observer:
-            //    var config = { attributes: true, childList: false, characterData: false };
-
-            //    // pass in the target node, as well as the observer options
-            //    observer.observe(instance, config);
-
-            //    instance.observer = observer;
-            //}
-
-            instance.setProgress(parseFloat(instance.getAttribute('data-progress') || '0'));
-        });
-    };
-
-    EmbyProgressRing.setProgress = function (progress) {
-
-        progress = Math.floor(progress);
-
-        var angle;
-
-        if (progress < 25) {
-            angle = -90 + (progress / 100) * 360;
-
-            this.querySelector('.animate-0-25-b').style.transform = 'rotate(' + angle + 'deg)';
-
-            this.querySelector('.animate-25-50-b').style.transform = 'rotate(-90deg)';
-            this.querySelector('.animate-50-75-b').style.transform = 'rotate(-90deg)';
-            this.querySelector('.animate-75-100-b').style.transform = 'rotate(-90deg)';
-        } else if (progress >= 25 && progress < 50) {
-
-            angle = -90 + ((progress - 25) / 100) * 360;
-
-            this.querySelector('.animate-0-25-b').style.transform = 'none';
-            this.querySelector('.animate-25-50-b').style.transform = 'rotate(' + angle + 'deg)';
-
-            this.querySelector('.animate-50-75-b').style.transform = 'rotate(-90deg)';
-            this.querySelector('.animate-75-100-b').style.transform = 'rotate(-90deg)';
-        } else if (progress >= 50 && progress < 75) {
-            angle = -90 + ((progress - 50) / 100) * 360;
-
-            this.querySelector('.animate-0-25-b').style.transform = 'none';
-            this.querySelector('.animate-25-50-b').style.transform = 'none';
-            this.querySelector('.animate-50-75-b').style.transform = 'rotate(' + angle + 'deg)';
-
-            this.querySelector('.animate-75-100-b').style.transform = 'rotate(-90deg)';
-        } else if (progress >= 75 && progress <= 100) {
-            angle = -90 + ((progress - 75) / 100) * 360;
-
-            this.querySelector('.animate-0-25-b').style.transform = 'none';
-            this.querySelector('.animate-25-50-b').style.transform = 'none';
-            this.querySelector('.animate-50-75-b').style.transform = 'none';
-            this.querySelector('.animate-75-100-b').style.transform = 'rotate(' + angle + 'deg)';
-        }
-
-        this.querySelector('.progressring-text').innerHTML = progress + '%';
-    };
-
-    EmbyProgressRing.attachedCallback = function () {
-
-    };
-
-    EmbyProgressRing.detachedCallback = function () {
-
-        var observer = this.observer;
-
-        if (observer) {
-            // later, you can stop observing
-            observer.disconnect();
-
-            this.observer = null;
-        }
-    };
-
-    document.registerElement('emby-progressring', {
-        prototype: EmbyProgressRing,
-        extends: 'div'
-    });
-
-    return EmbyProgressRing;
-});

src/components/emby-progressring/emby-progressring.template.html

@@ -1,23 +0,0 @@
-<div class="progressring-bg">
-    <div class="progressring-text"></div>
-</div>
-<div class="spiner-holder-one animate-0-25-a">
-    <div class="spiner-holder-two animate-0-25-b">
-        <div class="progressring-spiner"></div>
-    </div>
-</div>
-<div class="spiner-holder-one animate-25-50-a">
-    <div class="spiner-holder-two animate-25-50-b">
-        <div class="progressring-spiner"></div>
-    </div>
-</div>
-<div class="spiner-holder-one animate-50-75-a">
-    <div class="spiner-holder-two animate-50-75-b">
-        <div class="progressring-spiner"></div>
-    </div>
-</div>
-<div class="spiner-holder-one animate-75-100-a">
-    <div class="spiner-holder-two animate-75-100-b">
-        <div class="progressring-spiner"></div>
-    </div>
-</div>

src/components/emby-radio/emby-radio.css

@@ -1,107 +0,0 @@
-.mdl-radio {
-    position: relative;
-    line-height: 24px;
-    display: inline-block;
-    box-sizing: border-box;
-    margin: 0;
-    padding-left: 0;
-}
-
-.radio-label-block {
-    display: flex;
-    align-items: center;
-    margin-top: .5em;
-    margin-bottom: .5em;
-}
-
-.mdl-radio {
-    padding-left: 24px;
-}
-
-.mdl-radio__button {
-    line-height: 24px;
-    position: absolute;
-    /* 1px is for focusing purposes, so the focusManager doesn't skip over it */
-    width: 1px;
-    height: 1px;
-    margin: 0;
-    padding: 0;
-    opacity: 0;
-    -ms-appearance: none;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    appearance: none;
-    border: none;
-}
-
-.mdl-radio__outer-circle {
-    position: absolute;
-    top: 4px;
-    left: 0;
-    display: inline-block;
-    box-sizing: border-box;
-    width: 16px;
-    height: 16px;
-    margin: 0;
-    cursor: pointer;
-    border: 2px solid currentcolor;
-    border-radius: 50%;
-    z-index: 2;
-}
-
-.mdl-radio__button:checked + .mdl-radio__label + .mdl-radio__outer-circle {
-    border: 2px solid #00a4dc;
-}
-
-.mdl-radio__button:disabled + .mdl-radio__label + .mdl-radio__outer-circle {
-    border: 2px solid rgba(0,0,0, 0.26);
-    cursor: auto;
-}
-
-.mdl-radio__inner-circle {
-    position: absolute;
-    z-index: 1;
-    margin: 0;
-    top: 8px;
-    left: 4px;
-    box-sizing: border-box;
-    width: 8px;
-    height: 8px;
-    cursor: pointer;
-    transition-duration: 0.28s;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-property: -webkit-transform;
-    transition-property: transform;
-    transition-property: transform, -webkit-transform;
-    -webkit-transform: scale3d(0, 0, 0);
-    transform: scale3d(0, 0, 0);
-    border-radius: 50%;
-    background: #00a4dc;
-}
-
-.mdl-radio__button:checked + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
-    -webkit-transform: scale3d(1, 1, 1);
-    transform: scale3d(1, 1, 1);
-}
-
-.mdl-radio__button:disabled + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
-    background: rgba(0,0,0, 0.26);
-    cursor: auto;
-}
-
-.mdl-radio__button:focus + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
-    box-shadow: 0 0 0px 10px rgba(255, 255, 255, 0.76);
-}
-
-.mdl-radio__button:checked:focus + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
-    box-shadow: 0 0 0 10px rgba(0, 164, 220, 0.26)
-}
-
-.mdl-radio__label {
-    cursor: pointer;
-}
-
-.mdl-radio__button:disabled + .mdl-radio__label {
-    color: rgba(0,0,0, 0.26);
-    cursor: auto;
-}

src/components/emby-radio/emby-radio.js

@@ -1,48 +0,0 @@
-define(['css!./emby-radio', 'registerElement'], function () {
-    'use strict';
-
-    var EmbyRadioPrototype = Object.create(HTMLInputElement.prototype);
-
-    function onKeyDown(e) {
-
-        // Don't submit form on enter
-        if (e.keyCode === 13) {
-            e.preventDefault();
-
-            this.checked = true;
-
-            return false;
-        }
-    }
-
-    EmbyRadioPrototype.attachedCallback = function () {
-
-        if (this.getAttribute('data-radio') === 'true') {
-            return;
-        }
-
-        this.setAttribute('data-radio', 'true');
-
-        this.classList.add('mdl-radio__button');
-
-        var labelElement = this.parentNode;
-        //labelElement.classList.add('"mdl-radio mdl-js-radio mdl-js-ripple-effect');
-        labelElement.classList.add('mdl-radio');
-        labelElement.classList.add('mdl-js-radio');
-        labelElement.classList.add('mdl-js-ripple-effect');
-
-        var labelTextElement = labelElement.querySelector('span');
-
-        labelTextElement.classList.add('radioButtonLabel');
-        labelTextElement.classList.add('mdl-radio__label');
-
-        labelElement.insertAdjacentHTML('beforeend', '<span class="mdl-radio__outer-circle"></span><span class="mdl-radio__inner-circle"></span>');
-
-        this.addEventListener('keydown', onKeyDown);
-    };
-
-    document.registerElement('emby-radio', {
-        prototype: EmbyRadioPrototype,
-        extends: 'input'
-    });
-});

src/components/emby-radio/package.json

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

src/components/emby-scrollbuttons/emby-scrollbuttons.css

@@ -6,6 +6,7 @@
     justify-content: center;
     min-width:104px;
     min-height:24px;
+    padding-top: 1.25em;
     z-index: 1;
     color: #ffffff;
     display: flex;
@@ -15,4 +16,4 @@
     min-width: 24px;
     min-height: 24px;
     display: block;
-}
+}

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

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

src/components/emby-select/emby-select.css

@@ -1,110 +0,0 @@
-.emby-select {
-    display: block;
-    margin: 0;
-    margin-bottom: 0 !important;
-    /* Remove select styling */
-    /* Font size must the 16px or larger to prevent iOS page zoom on focus */
-    font-size: 110%;
-    /* General select styles: change as needed */
-    font-family: inherit;
-    font-weight: inherit;
-    padding: .5em 1.9em .5em .5em;
-    /* Prevent padding from causing width overflow */
-    box-sizing: border-box;
-    outline: none !important;
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
-    width: 100%;
-}
-
-    .emby-select[disabled] {
-        background: none !important;
-        border-color: transparent !important;
-        color: inherit !important;
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        appearance: none;
-    }
-
-.selectContainer-inline > .emby-select {
-    padding: .3em 1.9em .3em .5em;
-    font-size: inherit;
-}
-
-    .selectContainer-inline > .emby-select[disabled] {
-        padding-left: 0;
-        padding-right: 0;
-    }
-
-.emby-select::-moz-focus-inner {
-    border: 0;
-}
-
-.emby-select-focusscale {
-    transition: transform 180ms ease-out !important;
-    -webkit-transform-origin: center center;
-    transform-origin: center center;
-}
-
-    .emby-select-focusscale:focus {
-        transform: scale(1.04);
-        z-index: 1;
-    }
-
-.emby-select + .fieldDescription {
-    margin-top: .25em;
-}
-
-.selectContainer {
-    margin-bottom: 1.8em;
-    position: relative;
-}
-
-.selectContainer-inline {
-    display: inline-flex;
-    margin-bottom: 0;
-    align-items: center;
-}
-
-.selectLabel {
-    display: block;
-    margin-bottom: .25em;
-}
-
-.selectContainer-inline > .selectLabel {
-    margin-bottom: 0;
-    margin-right: .5em;
-    flex-shrink: 0;
-}
-
-.emby-select-withcolor {
-    -webkit-appearance: none;
-    appearance: none;
-    border-radius: .2em;
-}
-
-.selectArrowContainer {
-    position: absolute;
-    right: .3em;
-    top: .2em;
-    color: inherit;
-    pointer-events: none;
-}
-
-.selectContainer-inline > .selectArrowContainer {
-    top: initial;
-    bottom: .24em;
-    font-size: 90%;
-}
-
-.emby-select[disabled] + .selectArrowContainer {
-    display: none;
-}
-
-.selectArrow {
-    margin-top: .35em;
-    font-size: 1.7em;
-}
-
-.emby-select-iconbutton {
-    align-self: flex-end;
-}

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

@@ -1,162 +0,0 @@
-define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'registerElement'], function (layoutManager, browser, actionsheet) {
-    'use strict';
-
-    var EmbySelectPrototype = Object.create(HTMLSelectElement.prototype);
-
-    function enableNativeMenu() {
-
-        if (browser.edgeUwp || browser.xboxOne) {
-            return true;
-        }
-
-        // Doesn't seem to work at all
-        if (browser.tizen || browser.orsay || browser.web0s) {
-            return false;
-        }
-
-        // Take advantage of the native input methods
-        if (browser.tv) {
-            return true;
-        }
-
-        if (layoutManager.tv) {
-            return false;
-        }
-
-        return true;
-    }
-
-    function triggerChange(select) {
-        var evt = document.createEvent("HTMLEvents");
-        evt.initEvent("change", false, true);
-        select.dispatchEvent(evt);
-    }
-
-    function setValue(select, value) {
-
-        select.value = value;
-    }
-
-    function showActionSheet(select) {
-
-        var labelElem = getLabel(select);
-        var title = labelElem ? (labelElem.textContent || labelElem.innerText) : null;
-
-        actionsheet.show({
-            items: select.options,
-            positionTo: select,
-            title: title
-
-        }).then(function (value) {
-            setValue(select, value);
-            triggerChange(select);
-        });
-    }
-
-    function getLabel(select) {
-        var elem = select.previousSibling;
-        while (elem && elem.tagName !== 'LABEL') {
-            elem = elem.previousSibling;
-        }
-        return elem;
-    }
-
-    function onFocus(e) {
-        var label = getLabel(this);
-        if (label) {
-            label.classList.add('selectLabelFocused');
-        }
-    }
-
-    function onBlur(e) {
-        var label = getLabel(this);
-        if (label) {
-            label.classList.remove('selectLabelFocused');
-        }
-    }
-
-    function onMouseDown(e) {
-
-        // e.button=0 for primary (left) mouse button click
-        if (!e.button && !enableNativeMenu()) {
-            e.preventDefault();
-            showActionSheet(this);
-        }
-    }
-
-    function onKeyDown(e) {
-
-        switch (e.keyCode) {
-
-            case 13:
-                if (!enableNativeMenu()) {
-                    e.preventDefault();
-                    showActionSheet(this);
-                }
-                return;
-            case 37:
-            case 38:
-            case 39:
-            case 40:
-                if (layoutManager.tv) {
-                    e.preventDefault();
-                }
-                return;
-            default:
-                break;
-        }
-    }
-
-    var inputId = 0;
-
-    EmbySelectPrototype.createdCallback = function () {
-
-        if (!this.id) {
-            this.id = 'embyselect' + inputId;
-            inputId++;
-        }
-
-        this.classList.add('emby-select-withcolor');
-
-        if (layoutManager.tv) {
-            this.classList.add('emby-select-focusscale');
-        }
-
-        this.addEventListener('mousedown', onMouseDown);
-        this.addEventListener('keydown', onKeyDown);
-
-        this.addEventListener('focus', onFocus);
-        this.addEventListener('blur', onBlur);
-    };
-
-    EmbySelectPrototype.attachedCallback = function () {
-
-        if (this.classList.contains('emby-select')) {
-            return;
-        }
-
-        this.classList.add('emby-select');
-
-        var label = this.ownerDocument.createElement('label');
-        label.innerHTML = this.getAttribute('label') || '';
-        label.classList.add('selectLabel');
-        label.htmlFor = this.id;
-        this.parentNode.insertBefore(label, this);
-
-        if (this.classList.contains('emby-select-withcolor')) {
-            this.parentNode.insertAdjacentHTML('beforeend', '<div class="selectArrowContainer"><div style="visibility:hidden;">0</div><i class="selectArrow md-icon">keyboard_arrow_down</i></div>');
-        }
-    };
-
-    EmbySelectPrototype.setLabel = function (text) {
-
-        var label = this.parentNode.querySelector('label');
-
-        label.innerHTML = text;
-    };
-
-    document.registerElement('emby-select', {
-        prototype: EmbySelectPrototype,
-        extends: 'select'
-    });
-});

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

@@ -1,232 +0,0 @@
-_:-ms-input-placeholder {
-    -ms-appearance: none;
-    height: 2.223em;
-    margin: 0;
-}
-
-.mdl-slider {
-    width: 100%;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    -ms-appearance: none;
-    appearance: none;
-    height: 150%;/*150% is needed, else ie and edge won't display the thumb properly*/
-    background: transparent;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    outline: 0;
-    color: #00a4dc;
-    -webkit-align-self: center;
-    -ms-flex-item-align: center;
-    align-self: center;
-    z-index: 1;
-    cursor: pointer;
-    margin: 0;
-    /* Disable webkit tap highlighting */
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
-    display: block;
-}
-
-    .mdl-slider::-moz-focus-outer {
-        border: 0;
-    }
-
-    .mdl-slider::-ms-tooltip {
-        display: none;
-    }
-
-    .mdl-slider::-webkit-slider-runnable-track {
-        background: transparent;
-    }
-
-    .mdl-slider::-moz-range-track {
-        background: #444;
-        border: none;
-        width: calc(100% - 20px);
-    }
-
-    .mdl-slider::-moz-range-progress {
-        background: #00a4dc;
-        width: calc(100% - 20px);
-    }
-
-    .mdl-slider::-ms-track {
-        background: none;
-        color: transparent;
-        height: .2em;
-        width: 100%;
-        border: none;
-    }
-
-    .mdl-slider::-ms-fill-lower {
-        display: none;
-    }
-
-    .mdl-slider::-ms-fill-upper {
-        display: none;
-    }
-
-    .mdl-slider::-webkit-slider-thumb {
-        -webkit-appearance: none;
-        width: 1.2em;
-        height: 1.2em;
-        box-sizing: border-box;
-        border-radius: 50%;
-        background: #00a4dc;
-        border: none;
-        transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-    }
-
-.mdl-slider-hoverthumb::-webkit-slider-thumb {
-    transform: none;
-}
-
-.mdl-slider:hover::-webkit-slider-thumb {
-    transform: scale(1.3);
-}
-
-.mdl-slider.show-focus:focus::-webkit-slider-thumb {
-    transform: scale(1.3);
-}
-
-.slider-no-webkit-thumb::-webkit-slider-thumb {
-    opacity: 0 !important;
-}
-
-.mdl-slider::-moz-range-thumb {
-    -moz-appearance: none;
-    width: 0.9em;
-    height: 0.9em;
-    box-sizing: border-box;
-    border-radius: 50%;
-    background-image: none;
-    background: #00a4dc;
-    border: none;
-    transform: Scale(1.4, 1.4);
-}
-
-.mdl-slider::-ms-thumb {
-    -webkit-appearance: none;
-    width: 1.8em;
-    height: 1.8em;
-    box-sizing: border-box;
-    border-radius: 50%;
-    background: #00a4dc;
-    border: none;
-    transform: scale(.9, .9);
-    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.mdl-slider-hoverthumb::-ms-thumb {
-    margin-left: -.4em;
-    transform: scale(.5, .5);
-}
-
-.mdl-slider:hover::-ms-thumb {
-    transform: none;
-}
-
-.mdl-slider[disabled]::-webkit-slider-thumb {
-    display: none;
-}
-
-.mdl-slider[disabled]::-moz-range-thumb {
-    display: none;
-}
-
-.mdl-slider[disabled]::-ms-thumb {
-    display: none;
-}
-
-.mdl-slider-ie-container {
-    height: 1.25em;
-    overflow: visible;
-    border: none;
-    margin: 0;
-    padding: 0;
-}
-
-.mdl-slider-container {
-    height: 1.25em;
-    position: relative;
-    background: none;
-    display: flex;
-    flex-direction: row;
-}
-
-.mdl-slider-background-flex-container {
-    width: 100%;
-    box-sizing: border-box;
-    margin-top: -.05em;
-    top: 50%;
-    position: absolute;
-}
-
-.mdl-slider-background-flex {
-    background: #333;
-    height: .2em;
-    margin-top: -.08em;
-    width: 100%;
-    top: 50%;
-    left: 0;
-    display: flex;
-    overflow: hidden;
-    border: 0;
-    padding: 0;
-}
-
-.mdl-slider-background-flex-inner {
-    position: relative;
-    width: 100%;
-}
-
-.mdl-slider-background-lower {
-    /*transition: width 0.18s cubic-bezier(0.4, 0, 0.2, 1);*/
-    position: absolute;
-    left: 0;
-    width: 0;
-    top: 0;
-    bottom: 0;
-    background-color: #00a4dc;
-}
-
-.mdl-slider-background-lower-clear {
-    background-color: transparent;
-}
-
-.mdl-slider-background-lower-withtransform {
-    width: 100%;
-    /*transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);*/
-    transform-origin: left center;
-    transform: scaleX(0);
-}
-
-.mdl-slider-background-upper {
-    /*transition: left 0.18s cubic-bezier(0.4, 0, 0.2, 1), width 0.18s cubic-bezier(0.4, 0, 0.2, 1);*/
-    background: #666;
-    background: rgba(255, 255, 255, .4);
-    position: absolute;
-    left: 0;
-    width: 0;
-    top: 0;
-    bottom: 0;
-}
-
-.sliderBubble {
-    position: absolute;
-    top: 0;
-    left: 0;
-    transform: translate3d(-48%, -120%, 0);
-    background: #282828;
-    color: #fff;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.sliderBubbleText {
-    margin: 0;
-    padding: .5em .75em;
-}

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

@@ -1,379 +0,0 @@
-define(['browser', 'dom', 'layoutManager', 'css!./emby-slider', 'registerElement', 'emby-input'], function (browser, dom, layoutManager) {
-    'use strict';
-
-    var EmbySliderPrototype = Object.create(HTMLInputElement.prototype);
-
-    var supportsNativeProgressStyle = browser.firefox;
-    var supportsValueSetOverride = false;
-
-    var enableWidthWithTransform;
-
-    if (Object.getOwnPropertyDescriptor && Object.defineProperty) {
-
-        var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
-        // descriptor returning null in webos
-        if (descriptor && descriptor.configurable) {
-            supportsValueSetOverride = true;
-        }
-    }
-
-    function updateValues() {
-
-        // Do not update values when dragging with keyboard to keep current progress for reference
-        if (!!this.keyboardDragging) {
-            return;
-        }
-
-        var range = this;
-        var value = range.value;
-
-        // put this on a callback. Doing it within the event sometimes causes the slider to get hung up and not respond
-        requestAnimationFrame(function () {
-
-            var backgroundLower = range.backgroundLower;
-
-            if (backgroundLower) {
-                var fraction = (value - range.min) / (range.max - range.min);
-
-                if (enableWidthWithTransform) {
-                    backgroundLower.style.transform = 'scaleX(' + (fraction) + ')';
-                } else {
-                    fraction *= 100;
-                    backgroundLower.style.width = fraction + '%';
-                }
-            }
-        });
-    }
-
-    function updateBubble(range, value, bubble, bubbleText) {
-
-        requestAnimationFrame(function () {
-
-            bubble.style.left = value + '%';
-
-            if (range.getBubbleHtml) {
-                value = range.getBubbleHtml(value);
-            } else {
-                if (range.getBubbleText) {
-                    value = range.getBubbleText(value);
-                } else {
-                    value = Math.round(value);
-                }
-                value = '<h1 class="sliderBubbleText">' + value + '</h1>';
-            }
-
-            bubble.innerHTML = value;
-        });
-    }
-
-    EmbySliderPrototype.attachedCallback = function () {
-
-        if (this.getAttribute('data-embyslider') === 'true') {
-            return;
-        }
-
-        if (enableWidthWithTransform == null) {
-            //enableWidthWithTransform = browser.supportsCssAnimation();
-        }
-
-        this.setAttribute('data-embyslider', 'true');
-
-        this.classList.add('mdl-slider');
-        this.classList.add('mdl-js-slider');
-
-        if (browser.noFlex) {
-            this.classList.add('slider-no-webkit-thumb');
-        }
-        if (!layoutManager.mobile) {
-            this.classList.add('mdl-slider-hoverthumb');
-        }
-        if (layoutManager.tv) {
-            this.classList.add('show-focus');
-        }
-
-        var containerElement = this.parentNode;
-        containerElement.classList.add('mdl-slider-container');
-
-        var htmlToInsert = '';
-
-        if (!supportsNativeProgressStyle) {
-            htmlToInsert += '<div class="mdl-slider-background-flex-container">';
-            htmlToInsert += '<div class="mdl-slider-background-flex">';
-            htmlToInsert += '<div class="mdl-slider-background-flex-inner">';
-
-            // the more of these, the more ranges we can display
-            htmlToInsert += '<div class="mdl-slider-background-upper"></div>';
-
-            if (enableWidthWithTransform) {
-                htmlToInsert += '<div class="mdl-slider-background-lower mdl-slider-background-lower-withtransform"></div>';
-            } else {
-                htmlToInsert += '<div class="mdl-slider-background-lower"></div>';
-            }
-
-            htmlToInsert += '</div>';
-            htmlToInsert += '</div>';
-            htmlToInsert += '</div>';
-        }
-
-        htmlToInsert += '<div class="sliderBubble hide"></div>';
-
-        containerElement.insertAdjacentHTML('beforeend', htmlToInsert);
-
-        this.backgroundLower = containerElement.querySelector('.mdl-slider-background-lower');
-        this.backgroundUpper = containerElement.querySelector('.mdl-slider-background-upper');
-        var sliderBubble = containerElement.querySelector('.sliderBubble');
-
-        var hasHideClass = sliderBubble.classList.contains('hide');
-
-        dom.addEventListener(this, 'input', function (e) {
-            this.dragging = true;
-
-            updateBubble(this, this.value, sliderBubble);
-
-            if (hasHideClass) {
-                sliderBubble.classList.remove('hide');
-                hasHideClass = false;
-            }
-        }, {
-            passive: true
-        });
-
-        dom.addEventListener(this, 'change', function () {
-            this.dragging = false;
-            updateValues.call(this);
-
-            sliderBubble.classList.add('hide');
-            hasHideClass = true;
-
-        }, {
-            passive: true
-        });
-
-        dom.addEventListener(this, (window.PointerEvent ? 'pointermove' : 'mousemove'), function (e) {
-
-            if (!this.dragging) {
-                var rect = this.getBoundingClientRect();
-                var clientX = e.clientX;
-                var bubbleValue = (clientX - rect.left) / rect.width;
-                bubbleValue *= 100;
-                updateBubble(this, bubbleValue, sliderBubble);
-
-                if (hasHideClass) {
-                    sliderBubble.classList.remove('hide');
-                    hasHideClass = false;
-                }
-            }
-
-        }, {
-            passive: true
-        });
-
-        dom.addEventListener(this, (window.PointerEvent ? 'pointerleave' : 'mouseleave'), function () {
-            sliderBubble.classList.add('hide');
-            hasHideClass = true;
-        }, {
-            passive: true
-        });
-
-        if (!supportsNativeProgressStyle) {
-
-            if (supportsValueSetOverride) {
-                this.addEventListener('valueset', updateValues);
-            } else {
-                startInterval(this);
-            }
-        }
-    };
-
-    /**
-     * Keyboard dragging timeout.
-     * After this delay "change" event will be fired.
-     */
-    var KeyboardDraggingTimeout = 1000;
-
-    /**
-     * Keyboard dragging timer.
-     */
-    var keyboardDraggingTimer;
-
-    /**
-     * Start keyboard dragging.
-     *
-     * @param {Object} elem slider itself
-     */
-    function startKeyboardDragging(elem) {
-        elem.keyboardDragging = true;
-
-        clearTimeout(keyboardDraggingTimer);
-        keyboardDraggingTimer = setTimeout(function () {
-            finishKeyboardDragging(elem);
-        }, KeyboardDraggingTimeout);
-    }
-
-    /**
-     * Finish keyboard dragging.
-     *
-     * @param {Object} elem slider itself
-     */
-    function finishKeyboardDragging(elem) {
-        clearTimeout(keyboardDraggingTimer);
-        keyboardDraggingTimer = undefined;
-
-        elem.keyboardDragging = false;
-
-        var event = new Event('change', {
-            bubbles: true,
-            cancelable: false
-        });
-        elem.dispatchEvent(event);
-    }
-
-    /**
-     * Do step by delta.
-     *
-     * @param {Object} elem slider itself
-     * @param {number} delta step amount
-     */
-    function stepKeyboard(elem, delta) {
-        startKeyboardDragging(elem);
-
-        elem.value = Math.max(elem.min, Math.min(elem.max, parseFloat(elem.value) + delta));
-
-        var event = new Event('input', {
-            bubbles: true,
-            cancelable: false
-        });
-        elem.dispatchEvent(event);
-    }
-
-    /**
-     * Handle KeyDown event
-     */
-    function onKeyDown(e) {
-        switch (e.key) {
-            case 'ArrowLeft':
-            case 'Left':
-                stepKeyboard(this, -this.keyboardStepDown || -1);
-                e.preventDefault();
-                e.stopPropagation();
-                break;
-            case 'ArrowRight':
-            case 'Right':
-                stepKeyboard(this, this.keyboardStepUp || 1);
-                e.preventDefault();
-                e.stopPropagation();
-                break;
-        }
-    }
-
-    /**
-     * Enable keyboard dragging.
-     */
-    EmbySliderPrototype.enableKeyboardDragging = function () {
-        if (!this.keyboardDraggingEnabled) {
-            this.addEventListener('keydown', onKeyDown);
-            this.keyboardDraggingEnabled = true;
-        }
-    }
-
-    /**
-     * Set steps for keyboard input.
-     *
-     * @param {number} stepDown step to reduce
-     * @param {number} stepUp step to increase
-     */
-    EmbySliderPrototype.setKeyboardSteps = function (stepDown, stepUp) {
-        this.keyboardStepDown = stepDown || stepUp || 1;
-        this.keyboardStepUp = stepUp || stepDown || 1;
-    }
-
-    function setRange(elem, startPercent, endPercent) {
-
-        var style = elem.style;
-        style.left = Math.max(startPercent, 0) + '%';
-
-        var widthPercent = endPercent - startPercent;
-        style.width = Math.max(Math.min(widthPercent, 100), 0) + '%';
-    }
-
-    function mapRangesFromRuntimeToPercent(ranges, runtime) {
-
-        if (!runtime) {
-            return [];
-        }
-
-        return ranges.map(function (r) {
-
-            return {
-                start: (r.start / runtime) * 100,
-                end: (r.end / runtime) * 100
-            };
-        });
-    }
-
-    EmbySliderPrototype.setBufferedRanges = function (ranges, runtime, position) {
-
-        var elem = this.backgroundUpper;
-        if (!elem) {
-            return;
-        }
-
-        if (runtime != null) {
-            ranges = mapRangesFromRuntimeToPercent(ranges, runtime);
-
-            position = (position / runtime) * 100;
-        }
-
-        for (var i = 0, length = ranges.length; i < length; i++) {
-
-            var range = ranges[i];
-
-            if (position != null) {
-                if (position >= range.end) {
-                    continue;
-                }
-            }
-
-            setRange(elem, range.start, range.end);
-            return;
-        }
-
-        setRange(elem, 0, 0);
-    };
-
-    EmbySliderPrototype.setIsClear = function (isClear) {
-
-        var backgroundLower = this.backgroundLower;
-        if (backgroundLower) {
-            if (isClear) {
-                backgroundLower.classList.add('mdl-slider-background-lower-clear');
-            } else {
-                backgroundLower.classList.remove('mdl-slider-background-lower-clear');
-            }
-        }
-    };
-
-    function startInterval(range) {
-        var interval = range.interval;
-        if (interval) {
-            clearInterval(interval);
-        }
-        range.interval = setInterval(updateValues.bind(range), 100);
-    }
-
-    EmbySliderPrototype.detachedCallback = function () {
-
-        var interval = this.interval;
-        if (interval) {
-            clearInterval(interval);
-        }
-        this.interval = null;
-        this.backgroundUpper = null;
-        this.backgroundLower = null;
-    };
-
-    document.registerElement('emby-slider', {
-        prototype: EmbySliderPrototype,
-        extends: 'input'
-    });
-});

src/components/emby-tabs/package.json

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

src/components/emby-textarea/emby-textarea.css

@@ -1,32 +0,0 @@
-.emby-textarea {
-    display: block;
-    margin: 0;
-    margin-bottom: 0 !important;
-    /* Remove select styling */
-    /* Font size must the 16px or larger to prevent iOS page zoom on focus */
-    font-size: inherit;
-    /* General select styles: change as needed */
-    font-family: inherit;
-    font-weight: inherit;
-    color: inherit;
-    padding: .35em .25em;
-    /* Prevent padding from causing width overflow */
-    box-sizing: border-box;
-    outline: none !important;
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
-    width: 100%;
-}
-
-    .emby-textarea::-moz-focus-inner {
-        border: 0;
-    }
-
-.textareaLabel {
-    display: inline-block;
-    transition: all .2s ease-out;
-    margin-bottom: .25em;
-}
-
-.emby-textarea + .fieldDescription {
-    margin-top: .25em;
-}

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

@@ -1,138 +0,0 @@
-define(['layoutManager', 'browser', 'css!./emby-textarea', 'registerElement', 'emby-input'], function (layoutManager, browser) {
-    'use strict';
-
-    function autoGrow(textarea, maxLines) {
-        var self = this;
-
-        if (maxLines === undefined) {
-            maxLines = 999;
-        }
-
-        /**
-         * Calculates the vertical padding of the element
-         * @param textarea
-         * @returns {number}
-         */
-        self.getOffset = function (textarea) {
-            var style = window.getComputedStyle(textarea, null);
-            var props = ['paddingTop', 'paddingBottom'];
-            var offset = 0;
-
-            for (var i = 0; i < props.length; i++) {
-                offset += parseInt(style[props[i]]);
-            }
-            return offset;
-        };
-
-        var offset;
-        function reset() {
-            textarea.rows = 1;
-            offset = self.getOffset(textarea);
-            self.rows = textarea.rows || 1;
-            self.lineHeight = (textarea.scrollHeight / self.rows) - (offset / self.rows);
-            self.maxAllowedHeight = (self.lineHeight * maxLines) - offset;
-        }
-
-        function autogrowFn() {
-            if (!self.lineHeight || self.lineHeight <= 0) {
-                reset();
-            }
-            if (self.lineHeight <= 0) {
-                textarea.style.overflowY = 'scroll';
-                textarea.style.height = 'auto';
-                textarea.rows = 3;
-                return;
-            }
-            var newHeight = 0;
-            var hasGrown = false;
-
-            if ((textarea.scrollHeight - offset) > self.maxAllowedHeight) {
-                textarea.style.overflowY = 'scroll';
-                newHeight = self.maxAllowedHeight;
-            } else {
-                textarea.style.overflowY = 'hidden';
-                textarea.style.height = 'auto';
-                newHeight = textarea.scrollHeight/* - offset*/;
-                hasGrown = true;
-            }
-            textarea.style.height = newHeight + 'px';
-        }
-
-        // Call autogrowFn() when textarea's value is changed
-        textarea.addEventListener('input', autogrowFn);
-        textarea.addEventListener('focus', autogrowFn);
-        textarea.addEventListener('valueset', autogrowFn);
-
-        autogrowFn();
-    }
-
-    var EmbyTextAreaPrototype = Object.create(HTMLTextAreaElement.prototype);
-
-    var elementId = 0;
-
-    if (Object.getOwnPropertyDescriptor && Object.defineProperty) {
-
-        var descriptor = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value');
-
-        // descriptor returning null in webos
-        if (descriptor && descriptor.configurable) {
-            var baseSetMethod = descriptor.set;
-            descriptor.set = function (value) {
-                baseSetMethod.call(this, value);
-
-                this.dispatchEvent(new CustomEvent('valueset', {
-                    bubbles: false,
-                    cancelable: false
-                }));
-            };
-
-            Object.defineProperty(HTMLTextAreaElement.prototype, 'value', descriptor);
-        }
-    }
-
-    EmbyTextAreaPrototype.createdCallback = function () {
-
-        if (!this.id) {
-            this.id = 'embytextarea' + elementId;
-            elementId++;
-        }
-    };
-
-    EmbyTextAreaPrototype.attachedCallback = function () {
-
-        if (this.classList.contains('emby-textarea')) {
-            return;
-        }
-
-        this.rows = 1;
-        this.classList.add('emby-textarea');
-
-        var parentNode = this.parentNode;
-        var label = this.ownerDocument.createElement('label');
-        label.innerHTML = this.getAttribute('label') || '';
-        label.classList.add('textareaLabel');
-
-        label.htmlFor = this.id;
-        parentNode.insertBefore(label, this);
-
-        this.addEventListener('focus', function () {
-            label.classList.add('textareaLabelFocused');
-            label.classList.remove('textareaLabelUnfocused');
-        });
-        this.addEventListener('blur', function () {
-            label.classList.remove('textareaLabelFocused');
-            label.classList.add('textareaLabelUnfocused');
-        });
-
-        this.label = function (text) {
-            label.innerHTML = text;
-        };
-
-        new autoGrow(this);
-    };
-
-    document.registerElement('emby-textarea', {
-        prototype: EmbyTextAreaPrototype,
-        extends: 'textarea'
-    });
-});

src/components/emby-toggle/emby-toggle.css

@@ -1,122 +0,0 @@
-.mdl-switch {
-    position: relative;
-    z-index: 1;
-    vertical-align: middle;
-    display: inline-flex;
-    align-items: center;
-    box-sizing: border-box;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    overflow: visible;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    flex-direction: row-reverse;
-    justify-content: flex-end;
-}
-
-.toggleContainer {
-    margin-bottom: 1.8em;
-}
-
-.mdl-switch__input {
-    width: 0;
-    height: 0;
-    margin: 0;
-    padding: 0;
-    opacity: 0;
-    -ms-appearance: none;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    appearance: none;
-    border: none;
-}
-
-.mdl-switch__trackContainer {
-    position: relative;
-    width: 2.9em;
-}
-
-.mdl-switch__track {
-    background: rgba(128,128,128, 0.5);
-    height: 1em;
-    border-radius: 1em;
-    cursor: pointer;
-}
-
-.mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track {
-    background: rgba(0, 164, 220, 0.5);
-}
-
-.mdl-switch__input[disabled] + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track {
-    background: rgba(0,0,0, 0.12);
-    cursor: auto;
-}
-
-.mdl-switch__thumb {
-    background: #999;
-    position: absolute;
-    left: 0;
-    top: -.25em;
-    height: 1.44em;
-    width: 1.44em;
-    border-radius: 50%;
-    cursor: pointer;
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-    transition-duration: 0.28s;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-property: left;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb {
-    background: #00a4dc;
-    left: 1.466em;
-    box-shadow: 0 3px 0.28em 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px .56em 0 rgba(0, 0, 0, 0.12);
-}
-
-.mdl-switch__input[disabled] + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb {
-    background: rgb(189,189,189);
-    cursor: auto;
-}
-
-.mdl-switch__focus-helper {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    -webkit-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-    display: inline-block;
-    box-sizing: border-box;
-    width: .6em;
-    height: .6em;
-    border-radius: 50%;
-    background-color: transparent;
-}
-
-.mdl-switch__input:focus + .mdl-switch__label + .mdl-switch__trackContainer .mdl-switch__focus-helper {
-    box-shadow: 0 0 0 1.39em rgba(0, 0, 0, .05);
-}
-
-.mdl-switch__input:checked:focus + .mdl-switch__label + .mdl-switch__trackContainer .mdl-switch__focus-helper {
-    box-shadow: 0 0 0 1.39em rgba(0, 164, 220, 0.26);
-    background-color: rgba(0, 164, 220, 0.26);
-}
-
-.mdl-switch__label {
-    cursor: pointer;
-    margin: 0;
-    display: inline-flex;
-    align-items: center;
-    margin-left: .7em;
-}
-
-.mdl-switch__input[disabled] .mdl-switch__label {
-    color: rgb(189,189,189);
-    cursor: auto;
-}

src/components/emby-toggle/emby-toggle.js

@@ -1,50 +0,0 @@
-define(['css!./emby-toggle', 'registerElement'], function () {
-    'use strict';
-
-    var EmbyTogglePrototype = Object.create(HTMLInputElement.prototype);
-
-    function onKeyDown(e) {
-
-        // Don't submit form on enter
-        if (e.keyCode === 13) {
-            e.preventDefault();
-
-            this.checked = !this.checked;
-
-            this.dispatchEvent(new CustomEvent('change', {
-                bubbles: true
-            }));
-
-            return false;
-        }
-    }
-
-    EmbyTogglePrototype.attachedCallback = function () {
-
-        if (this.getAttribute('data-embytoggle') === 'true') {
-            return;
-        }
-
-        this.setAttribute('data-embytoggle', 'true');
-
-        this.classList.add('mdl-switch__input');
-
-        var labelElement = this.parentNode;
-        labelElement.classList.add('mdl-switch');
-        labelElement.classList.add('mdl-js-switch');
-
-        var labelTextElement = labelElement.querySelector('span');
-
-        labelElement.insertAdjacentHTML('beforeend', '<div class="mdl-switch__trackContainer"><div class="mdl-switch__track"></div><div class="mdl-switch__thumb"><span class="mdl-switch__focus-helper"></span></div></div>');
-
-        labelTextElement.classList.add('toggleButtonLabel');
-        labelTextElement.classList.add('mdl-switch__label');
-
-        this.addEventListener('keydown', onKeyDown);
-    };
-
-    document.registerElement('emby-toggle', {
-        prototype: EmbyTogglePrototype,
-        extends: 'input'
-    });
-});

src/components/filterdialog/style.css

@@ -5,7 +5,6 @@
     margin-top: 0 !important;
     margin-bottom: 0 !important;
     margin-right: 0 !important;
-    -webkit-border-radius: 0 !important;
     border-radius: 0 !important;
     max-height: none !important;
     max-width: none !important

src/components/flexstyles.css

@@ -1,47 +0,0 @@
-.flex {
-    display: flex;
-}
-
-.inline-flex {
-    display: inline-flex;
-}
-
-.flex-direction-column {
-    flex-direction: column;
-}
-
-.flex-direction-row {
-    flex-direction: row;
-}
-
-.flex-grow {
-    flex-grow: 1;
-}
-
-.flex-shrink-zero {
-    flex-shrink: 0;
-}
-
-.align-items-center {
-    align-items: center;
-}
-
-.align-items-flex-start {
-    align-items: flex-start;
-}
-
-.justify-content-center {
-    justify-content: center;
-}
-
-.justify-content-flex-end {
-    justify-content: flex-end;
-}
-
-.flex-wrap-wrap {
-    flex-wrap: wrap;
-}
-
-.align-self-flex-end {
-    align-self: flex-end;
-}

src/components/headroom/package.json

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

src/components/homescreensettings/homescreensettings.template.html

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

src/components/homesections/homesections.css

@@ -13,13 +13,11 @@
 .homeLibraryIcon {
     margin-left: .5em;
     margin-right: .5em;
-    -webkit-flex-shrink: 0;
     flex-shrink: 0
 }
 
 .homeLibraryText {
     white-space: nowrap;
-    -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
     overflow: hidden
 }

src/components/htmlaudioplayer/plugin.js

@@ -2,11 +2,8 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
     "use strict";
 
     function getDefaultProfile() {
-
         return new Promise(function (resolve, reject) {
-
             require(['browserdeviceprofile'], function (profileBuilder) {
-
                 resolve(profileBuilder({}));
             });
         });
@@ -14,28 +11,22 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
 
     var fadeTimeout;
     function fade(instance, elem, startingVolume) {
-
         instance._isFadingOut = true;
 
         // Need to record the starting volume on each pass rather than querying elem.volume
         // This is due to iOS safari not allowing volume changes and always returning the system volume value
-
         var newVolume = Math.max(0, startingVolume - 0.15);
         console.log('fading volume to ' + newVolume);
         elem.volume = newVolume;
 
         if (newVolume <= 0) {
-
             instance._isFadingOut = false;
             return Promise.resolve();
         }
 
         return new Promise(function (resolve, reject) {
-
             cancelFadeTimeout();
-
             fadeTimeout = setTimeout(function () {
-
                 fade(instance, elem, newVolume).then(resolve, reject);
             }, 100);
         });
@@ -50,7 +41,6 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
     }
 
     function supportsFade() {
-
         if (browser.tv) {
             // Not working on tizen.
             // We could possibly enable on other tv's, but all smart tv browsers tend to be pretty primitive
@@ -68,9 +58,7 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
     }
 
     function enableHlsPlayer(url, item, mediaSource, mediaType) {
-
         if (!htmlMediaHelper.enableHlsJsPlayer(mediaSource.RunTimeTicks, mediaType)) {
-
             return Promise.reject();
         }
 
@@ -86,21 +74,18 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
                     url: url,
                     type: 'HEAD'
                 }).then(function (response) {
-
                     var contentType = (response.headers.get('Content-Type') || '').toLowerCase();
                     if (contentType === 'application/x-mpegurl') {
                         resolve();
                     } else {
                         reject();
                     }
-
                 }, reject);
             });
         });
     }
 
     function HtmlAudioPlayer() {
-
         var self = this;
 
         self.name = 'Html Audio Player';
@@ -114,11 +99,9 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
 
             self._started = false;
             self._timeUpdated = false;
-
             self._currentTime = null;
 
             var elem = createMediaElement(options);
-
             return setCurrentSrc(elem, options);
         };
 
@@ -511,4 +494,4 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
     };
 
     return HtmlAudioPlayer;
-});
+});

src/components/htmlvideoplayer/plugin.js

@@ -27,6 +27,14 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
         return _supportsTextTracks;
     }
 
+    function supportsCanvas() {
+        return !!document.createElement('canvas').getContext;
+    }
+
+    function supportsWebWorkers() {
+        return !!window.Worker;
+    }
+
     function enableNativeTrackSupport(currentSrc, track) {
 
         if (track) {
@@ -185,10 +193,11 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
 
         var lastCustomTrackMs = 0;
         var currentClock;
+        var currentSubtitlesOctopus;
         var currentAssRenderer;
         var customTrackIndex = -1;
 
-        var showTrackOffset = false;
+        var showTrackOffset;
         var currentTrackOffset;
 
         var videoSubtitlesElem;
@@ -280,6 +289,8 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
 
             self._currentTime = null;
 
+            self.resetSubtitleOffset();
+
             return createMediaElement(options).then(function (elem) {
 
                 return updateVideoUrl(options, options.mediaSource).then(function () {
@@ -556,6 +567,11 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
             setCurrentTrackElement(index);
         };
 
+        self.resetSubtitleOffset = function() {
+            currentTrackOffset = 0;
+            showTrackOffset = false;
+        }
+
         self.enableShowingSubtitleOffset = function() {
             showTrackOffset = true;
         }
@@ -955,6 +971,12 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
             currentClock = null;
             self._currentAspectRatio = null;
 
+            var octopus = currentSubtitlesOctopus;
+            if (octopus) {
+                octopus.dispose();
+            }
+            currentSubtitlesOctopus = null;
+
             var renderer = currentAssRenderer;
             if (renderer) {
                 renderer.setEnabled(false);
@@ -1019,6 +1041,22 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
             lastCustomTrackMs = 0;
         }
 
+        function renderWithSubtitlesOctopus(videoElement, track, item) {
+            var attachments = self._currentPlayOptions.mediaSource.MediaAttachments || [];
+            var options = {
+                video: videoElement,
+                subUrl: getTextTrackUrl(track, item),
+                fonts: attachments.map(i => i.DeliveryUrl),
+                workerUrl: appRouter.baseUrl() + "/libraries/subtitles-octopus-worker.js",
+                onError: function() {
+                    htmlMediaHelper.onErrorInternal(self, 'mediadecodeerror')
+                }
+            };
+            require(['JavascriptSubtitlesOctopus'], function(SubtitlesOctopus) {
+                currentSubtitlesOctopus = new SubtitlesOctopus(options);
+            });
+        }
+
         function renderWithLibjass(videoElement, track, item) {
 
             var rendererSettings = {};
@@ -1065,6 +1103,15 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
             });
         }
 
+        function renderSsaAss(videoElement, track, item) {
+            if (supportsCanvas() && supportsWebWorkers()) {
+                renderWithSubtitlesOctopus(videoElement, track, item);
+            } else {
+                console.log('rendering subtitles with libjass');
+                renderWithLibjass(videoElement, track, item);
+            }
+        }
+
         function onVideoResize() {
             if (browser.iOS) {
                 // the new sizes will be delayed for about 500ms with wkwebview
@@ -1175,7 +1222,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
                 var format = (track.Codec || '').toLowerCase();
                 if (format === 'ssa' || format === 'ass') {
                     // libjass is needed here
-                    renderWithLibjass(videoElement, track, item);
+                    renderSsaAss(videoElement, track, item);
                     return;
                 }
 

src/components/htmlvideoplayer/style.css

@@ -24,6 +24,10 @@
     z-index: 1000;
 }
 
+.videoPlayerContainer .libassjs-canvas-parent {
+    order: -1;
+}
+
 video::-webkit-media-controls {
     display: none !important;
 }
@@ -38,7 +42,6 @@ video::-webkit-media-controls {
 .htmlvideoplayer::cue {
     background-color: transparent;
     text-shadow: 0.14em 0.14em 0.14em rgba(0, 0, 0, 1);
-    -webkit-font-smoothing: antialiased;
     font-family: inherit;
 }
 

src/components/images/style.css

@@ -18,21 +18,9 @@
 
 .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);
 }
 

src/components/indicators/indicators.css

@@ -14,7 +14,6 @@
 
 .indicator {
     border-radius: 100em;
-    display: -webkit-flex;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -43,7 +42,6 @@
 
 .countIndicator {
     border-radius: 100em;
-    display: -webkit-flex;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -55,7 +53,6 @@
 
 .playedIndicator {
     border-radius: 100em;
-    display: -webkit-flex;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -67,7 +64,6 @@
 .videoIndicator {
     background: #444;
     border-radius: 100em;
-    display: -webkit-flex;
     display: flex;
     align-items: center;
     justify-content: center;

src/components/indicators/indicators.js

@@ -115,7 +115,6 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
     }
 
     function getTimerIndicator(item) {
-
         var status;
 
         if (item.Type === 'SeriesTimer') {

src/components/itemMediaInfo/itemMediaInfo.template.html

@@ -1,8 +1,8 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
-    <h3 class="formDialogHeaderTitle">
-        ${HeaderMediaInfo}
-    </h3>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
+        <i class="md-icon">arrow_back</i>
+    </button>
+    <h3 class="formDialogHeaderTitle">${HeaderMediaInfo}</h3>
 </div>
 
 <div class="formDialogContent smoothScrollY">

src/components/itemcontextmenu.js

@@ -3,10 +3,11 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
 
     function getCommands(options) {
         var item = options.item;
+        var user = options.user;
+
         var canPlay = playbackManager.canPlay(item);
         var restrictOptions = (browser.operaTv || browser.web0s) && !user.Policy.IsAdministrator;
 
-        var user = options.user;
         var commands = [];
 
         if (canPlay && item.MediaType !== "Photo") {

src/components/itemidentifier/itemidentifier.template.html

@@ -2,9 +2,7 @@
     <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
         <i class="md-icon">arrow_back</i>
     </button>
-    <h3 class="formDialogHeaderTitle">
-        ${Identify}
-    </h3>
+    <h3 class="formDialogHeaderTitle">${Identify}</h3>
 </div>
 
 <div class="formDialogContent smoothScrollY">
@@ -17,16 +15,13 @@
                 <div class="txtPath fieldDescription"></div>
             </div>
             <div class="inputContainer">
-                <input is="emby-input" type="text" id="txtLookupName" class="identifyField" data-lookup="Name"
-                    label="${LabelName}" />
+                <input is="emby-input" type="text" id="txtLookupName" class="identifyField" data-lookup="Name" label="${LabelName}" />
             </div>
             <div class="fldLookupYear inputContainer">
-                <input is="emby-input" type="number" id="txtLookupYear" class="identifyField" data-lookup="Year"
-                    pattern="[0-9]*" min="1800" label="${LabelYear}" />
+                <input is="emby-input" type="number" id="txtLookupYear" class="identifyField" data-lookup="Year" pattern="[0-9]*" min="1800" label="${LabelYear}" />
             </div>
 
-            <div class="identifyProviderIds">
-            </div>
+            <div class="identifyProviderIds"></div>
 
             <div class="formDialogFooter">
                 <button is="emby-button" type="submit" class="raised button-submit block formDialogFooterItem">
@@ -34,14 +29,13 @@
                 </button>
             </div>
         </form>
-        <div class="identificationSearchResults hide">
 
+        <div class="identificationSearchResults hide">
             <h1>${SearchResults}</h1>
             <div class="identificationSearchResultList itemsContainer vertical-wrap"></div>
         </div>
 
         <form class="identifyOptionsForm hide" style="margin:auto;">
-
             <br />
             <div class="selectedSearchResult"></div>
             <br />
@@ -51,8 +45,7 @@
             </label>
 
             <div class="formDialogFooter">
-                <button is="emby-button" type="submit"
-                    class="raised button-submit block btnSubmit formDialogFooterItem">
+                <button is="emby-button" type="submit" class="raised button-submit block btnSubmit formDialogFooterItem">
                     <span>${ButtonOk}</span>
                 </button>
             </div>

src/components/loading/loading.css

@@ -7,20 +7,11 @@
 
 .mdlSpinnerActive {
     display: inline-block;
-    -webkit-animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite;
     animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite;
 }
 
-@-webkit-keyframes mdl-spinner__container-rotate {
-    to {
-        -webkit-transform: rotate(360deg);
-        transform: rotate(360deg);
-    }
-}
-
 @keyframes mdl-spinner__container-rotate {
     to {
-        -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
     }
 }
@@ -37,7 +28,6 @@
 }
 
 .mdl-spinner__layer-1-active {
-    -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
     animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }
 
@@ -46,7 +36,6 @@
 }
 
 .mdl-spinner__layer-2-active {
-    -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
     animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }
 
@@ -55,7 +44,6 @@
 }
 
 .mdl-spinner__layer-3-active {
-    -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
     animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }
 
@@ -64,90 +52,39 @@
 }
 
 .mdl-spinner__layer-4-active {
-    -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
     animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }
 
-@-webkit-keyframes mdl-spinner__fill-unfill-rotate {
-    12.5% {
-        -webkit-transform: rotate(135deg);
-        transform: rotate(135deg);
-    }
-
-    25% {
-        -webkit-transform: rotate(270deg);
-        transform: rotate(270deg);
-    }
-
-    37.5% {
-        -webkit-transform: rotate(405deg);
-        transform: rotate(405deg);
-    }
-
-    50% {
-        -webkit-transform: rotate(540deg);
-        transform: rotate(540deg);
-    }
-
-    62.5% {
-        -webkit-transform: rotate(675deg);
-        transform: rotate(675deg);
-    }
-
-    75% {
-        -webkit-transform: rotate(810deg);
-        transform: rotate(810deg);
-    }
-
-    87.5% {
-        -webkit-transform: rotate(945deg);
-        transform: rotate(945deg);
-    }
-
-    to {
-        -webkit-transform: rotate(1080deg);
-        transform: rotate(1080deg);
-    }
-}
-
 @keyframes mdl-spinner__fill-unfill-rotate {
     12.5% {
-        -webkit-transform: rotate(135deg);
         transform: rotate(135deg);
     }
 
     25% {
-        -webkit-transform: rotate(270deg);
         transform: rotate(270deg);
     }
 
     37.5% {
-        -webkit-transform: rotate(405deg);
         transform: rotate(405deg);
     }
 
     50% {
-        -webkit-transform: rotate(540deg);
         transform: rotate(540deg);
     }
 
     62.5% {
-        -webkit-transform: rotate(675deg);
         transform: rotate(675deg);
     }
 
     75% {
-        -webkit-transform: rotate(810deg);
         transform: rotate(810deg);
     }
 
     87.5% {
-        -webkit-transform: rotate(945deg);
         transform: rotate(945deg);
     }
 
     to {
-        -webkit-transform: rotate(1080deg);
         transform: rotate(1080deg);
     }
 }
@@ -161,32 +98,6 @@
 * - https://github.com/Polymer/paper-spinner/issues/9
 * - https://code.google.com/p/chromium/issues/detail?id=436255
 */
-@-webkit-keyframes mdl-spinner__layer-1-fade-in-out {
-    from {
-        opacity: 0.99;
-    }
-
-    25% {
-        opacity: 0.99;
-    }
-
-    26% {
-        opacity: 0;
-    }
-
-    89% {
-        opacity: 0;
-    }
-
-    90% {
-        opacity: 0.99;
-    }
-
-    100% {
-        opacity: 0.99;
-    }
-}
-
 @keyframes mdl-spinner__layer-1-fade-in-out {
     from {
         opacity: 0.99;
@@ -213,28 +124,6 @@
     }
 }
 
-@-webkit-keyframes mdl-spinner__layer-2-fade-in-out {
-    from {
-        opacity: 0;
-    }
-
-    15% {
-        opacity: 0;
-    }
-
-    25% {
-        opacity: 0.99;
-    }
-
-    50% {
-        opacity: 0.99;
-    }
-
-    51% {
-        opacity: 0;
-    }
-}
-
 @keyframes mdl-spinner__layer-2-fade-in-out {
     from {
         opacity: 0;
@@ -257,28 +146,6 @@
     }
 }
 
-@-webkit-keyframes mdl-spinner__layer-3-fade-in-out {
-    from {
-        opacity: 0;
-    }
-
-    40% {
-        opacity: 0;
-    }
-
-    50% {
-        opacity: 0.99;
-    }
-
-    75% {
-        opacity: 0.99;
-    }
-
-    76% {
-        opacity: 0;
-    }
-}
-
 @keyframes mdl-spinner__layer-3-fade-in-out {
     from {
         opacity: 0;
@@ -301,28 +168,6 @@
     }
 }
 
-@-webkit-keyframes mdl-spinner__layer-4-fade-in-out {
-    from {
-        opacity: 0;
-    }
-
-    65% {
-        opacity: 0;
-    }
-
-    75% {
-        opacity: 0.99;
-    }
-
-    90% {
-        opacity: 0.99;
-    }
-
-    100% {
-        opacity: 0;
-    }
-}
-
 @keyframes mdl-spinner__layer-4-fade-in-out {
     from {
         opacity: 0;
@@ -366,7 +211,6 @@
     border-color: inherit;
     border-bottom-color: transparent !important;
     border-radius: 50%;
-    -webkit-animation: none;
     animation: none;
     position: absolute;
     top: 0;
@@ -377,91 +221,47 @@
 
 .mdl-spinner__circleLeft {
     border-right-color: transparent !important;
-    -webkit-transform: rotate(129deg);
     transform: rotate(129deg);
 }
 
 .mdl-spinner__circleLeft-active {
-    -webkit-animation: mdl-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
     animation: mdl-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }
 
 .mdl-spinner__circleRight {
     left: -100%;
     border-left-color: transparent !important;
-    -webkit-transform: rotate(-129deg);
     transform: rotate(-129deg);
 }
 
 .mdl-spinner__circleRight-active {
-    -webkit-animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
     animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }
 
-@-webkit-keyframes mdl-spinner__left-spin {
-    from {
-        -webkit-transform: rotate(130deg);
-        transform: rotate(130deg);
-    }
-
-    50% {
-        -webkit-transform: rotate(-5deg);
-        transform: rotate(-5deg);
-    }
-
-    to {
-        -webkit-transform: rotate(130deg);
-        transform: rotate(130deg);
-    }
-}
-
 @keyframes mdl-spinner__left-spin {
     from {
-        -webkit-transform: rotate(130deg);
         transform: rotate(130deg);
     }
 
     50% {
-        -webkit-transform: rotate(-5deg);
         transform: rotate(-5deg);
     }
 
     to {
-        -webkit-transform: rotate(130deg);
         transform: rotate(130deg);
     }
 }
 
-@-webkit-keyframes mdl-spinner__right-spin {
-    from {
-        -webkit-transform: rotate(-130deg);
-        transform: rotate(-130deg);
-    }
-
-    50% {
-        -webkit-transform: rotate(5deg);
-        transform: rotate(5deg);
-    }
-
-    to {
-        -webkit-transform: rotate(-130deg);
-        transform: rotate(-130deg);
-    }
-}
-
 @keyframes mdl-spinner__right-spin {
     from {
-        -webkit-transform: rotate(-130deg);
         transform: rotate(-130deg);
     }
 
     50% {
-        -webkit-transform: rotate(5deg);
         transform: rotate(5deg);
     }
 
     to {
-        -webkit-transform: rotate(-130deg);
         transform: rotate(-130deg);
     }
 }

src/components/loading/loadingLegacy.js

@@ -6,14 +6,11 @@ define(['require', 'css!./loadingLegacy'], function (require) {
     return {
         show: function () {
             var elem = loadingElem;
-
             if (!elem) {
-
                 elem = document.createElement("img");
-                elem.src = require.toUrl('.').split('?')[0] + '/loader2.gif';
+                elem.src = require.toUrl('.').split('?')[0] + '/loader.gif';
 
                 loadingElem = elem;
-
                 elem.classList.add('loading-spinner');
 
                 document.body.appendChild(elem);
@@ -23,11 +20,9 @@ define(['require', 'css!./loadingLegacy'], function (require) {
         },
         hide: function () {
             var elem = loadingElem;
-
             if (elem) {
-
                 elem.classList.add('hide');
             }
         }
     };
-});
+});

src/components/loading/package.json

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

src/components/loadingdialog/loadingdialog.js

@@ -2,14 +2,12 @@ define(['loading', 'events', 'dialogHelper', 'dom', 'layoutManager', 'scrollHelp
     'use strict';
 
     function showDialog(instance, options, template) {
-
         var dialogOptions = {
             removeOnClose: true,
             scrollY: false
         };
 
         var enableTvLayout = layoutManager.tv;
-
         if (enableTvLayout) {
             dialogOptions.size = 'fullscreen';
         }
@@ -48,7 +46,6 @@ define(['loading', 'events', 'dialogHelper', 'dom', 'layoutManager', 'scrollHelp
         instance.dlg = dlg;
 
         return dialogHelper.open(dlg).then(function () {
-
             if (enableTvLayout) {
                 scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false);
             }
@@ -58,12 +55,10 @@ define(['loading', 'events', 'dialogHelper', 'dom', 'layoutManager', 'scrollHelp
     }
 
     function LoadingDialog(options) {
-
         this.options = options;
     }
 
     LoadingDialog.prototype.show = function () {
-
         var instance = this;
         loading.show();
 
@@ -76,15 +71,12 @@ define(['loading', 'events', 'dialogHelper', 'dom', 'layoutManager', 'scrollHelp
     };
 
     LoadingDialog.prototype.setTitle = function (title) {
-
     };
 
     LoadingDialog.prototype.setText = function (text) {
-
     };
 
     LoadingDialog.prototype.hide = function () {
-
         if (this.dlg) {
             dialogHelper.close(this.dlg);
             this.dlg = null;
@@ -92,10 +84,9 @@ define(['loading', 'events', 'dialogHelper', 'dom', 'layoutManager', 'scrollHelp
     };
 
     LoadingDialog.prototype.destroy = function () {
-
         this.dlg = null;
         this.options = null;
     };
 
     return LoadingDialog;
-});
+});

src/components/logoscreensaver/plugin.js

@@ -0,0 +1,192 @@
+define(["pluginManager"], function (pluginManager) {
+
+    return function () {
+
+        var self = this;
+
+        self.name = "Logo ScreenSaver";
+        self.type = "screensaver";
+        self.id = "logoscreensaver";
+        self.supportsAnonymous = true;
+
+        var interval;
+
+        function animate() {
+
+            var animations = [
+
+                bounceInLeft,
+                bounceInRight,
+                swing,
+                tada,
+                wobble,
+                rotateIn,
+                rotateOut
+            ];
+
+            var elem = document.querySelector(".logoScreenSaverImage");
+
+            if (elem && elem.animate) {
+                var random = getRandomInt(0, animations.length - 1);
+
+                animations[random](elem, 1);
+            }
+        }
+
+        function getRandomInt(min, max) {
+            return Math.floor(Math.random() * (max - min + 1)) + min;
+        }
+
+        function bounceInLeft(elem, iterations) {
+            var keyframes = [
+                { transform: "translate3d(-3000px, 0, 0)", opacity: "0", offset: 0 },
+                { transform: "translate3d(25px, 0, 0)", opacity: "1", offset: 0.6 },
+                { transform: "translate3d(-100px, 0, 0)", offset: 0.75 },
+                { transform: "translate3d(5px, 0, 0)", offset: 0.9 },
+                { transform: "none", opacity: "1", offset: 1 }];
+            var timing = { duration: 900, iterations: iterations, easing: "cubic-bezier(0.215, 0.610, 0.355, 1.000)" };
+            return elem.animate(keyframes, timing);
+        }
+
+        function bounceInRight(elem, iterations) {
+            var keyframes = [
+                { transform: "translate3d(3000px, 0, 0)", opacity: "0", offset: 0 },
+                { transform: "translate3d(-25px, 0, 0)", opacity: "1", offset: 0.6 },
+                { transform: "translate3d(100px, 0, 0)", offset: 0.75 },
+                { transform: "translate3d(-5px, 0, 0)", offset: 0.9 },
+                { transform: "none", opacity: "1", offset: 1 }];
+            var timing = { duration: 900, iterations: iterations, easing: "cubic-bezier(0.215, 0.610, 0.355, 1.000)" };
+            return elem.animate(keyframes, timing);
+        }
+
+        function shake(elem, iterations) {
+            var keyframes = [
+                { transform: "translate3d(0, 0, 0)", offset: 0 },
+                { transform: "translate3d(-10px, 0, 0)", offset: 0.1 },
+                { transform: "translate3d(10px, 0, 0)", offset: 0.2 },
+                { transform: "translate3d(-10px, 0, 0)", offset: 0.3 },
+                { transform: "translate3d(10px, 0, 0)", offset: 0.4 },
+                { transform: "translate3d(-10px, 0, 0)", offset: 0.5 },
+                { transform: "translate3d(10px, 0, 0)", offset: 0.6 },
+                { transform: "translate3d(-10px, 0, 0)", offset: 0.7 },
+                { transform: "translate3d(10px, 0, 0)", offset: 0.8 },
+                { transform: "translate3d(-10px, 0, 0)", offset: 0.9 },
+                { transform: "translate3d(0, 0, 0)", offset: 1 }];
+            var timing = { duration: 900, iterations: iterations };
+            return elem.animate(keyframes, timing);
+        }
+
+        function swing(elem, iterations) {
+            var keyframes = [
+                { transform: "translate(0%)", offset: 0 },
+                { transform: "rotate3d(0, 0, 1, 15deg)", offset: 0.2 },
+                { transform: "rotate3d(0, 0, 1, -10deg)", offset: 0.4 },
+                { transform: "rotate3d(0, 0, 1, 5deg)", offset: 0.6 },
+                { transform: "rotate3d(0, 0, 1, -5deg)", offset: 0.8 },
+                { transform: "rotate3d(0, 0, 1, 0deg)", offset: 1 }];
+            var timing = { duration: 900, iterations: iterations };
+            return elem.animate(keyframes, timing);
+        }
+
+        function tada(elem, iterations) {
+            var keyframes = [
+                { transform: "scale3d(1, 1, 1)", offset: 0 },
+                { transform: "scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)", offset: 0.1 },
+                { transform: "scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)", offset: 0.2 },
+                { transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)", offset: 0.3 },
+                { transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)", offset: 0.4 },
+                { transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)", offset: 0.5 },
+                { transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)", offset: 0.6 },
+                { transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)", offset: 0.7 },
+                { transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)", offset: 0.8 },
+                { transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)", offset: 0.9 },
+                { transform: "scale3d(1, 1, 1)", offset: 1 }];
+            var timing = { duration: 900, iterations: iterations };
+            return elem.animate(keyframes, timing);
+        }
+
+        function wobble(elem, iterations) {
+            var keyframes = [
+                { transform: "translate(0%)", offset: 0 },
+                { transform: "translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)", offset: 0.15 },
+                { transform: "translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)", offset: 0.45 },
+                { transform: "translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)", offset: 0.6 },
+                { transform: "translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)", offset: 0.75 },
+                { transform: "translateX(0%)", offset: 1 }];
+            var timing = { duration: 900, iterations: iterations };
+            return elem.animate(keyframes, timing);
+        }
+
+        function rotateIn(elem, iterations) {
+            var transformOrigin = elem.style["transform-origin"];
+            var keyframes = [{ transform: "rotate3d(0, 0, 1, -200deg)", opacity: "0", transformOrigin: "center", offset: 0 },
+                { transform: "none", opacity: "1", transformOrigin: "center", offset: 1 }];
+            var timing = { duration: 900, iterations: iterations };
+            return elem.animate(keyframes, timing);
+        }
+
+        function rotateOut(elem, iterations) {
+            var transformOrigin = elem.style["transform-origin"];
+            var keyframes = [{ transform: "none", opacity: "1", transformOrigin: "center", offset: 0 },
+                { transform: "rotate3d(0, 0, 1, 200deg)", opacity: "0", transformOrigin: "center", offset: 1 }];
+            var timing = { duration: 900, iterations: iterations };
+            return elem.animate(keyframes, timing);
+
+        }
+
+        function fadeOut(elem, iterations) {
+            var keyframes = [
+                { opacity: "1", offset: 0 },
+                { opacity: "0", offset: 1 }];
+            var timing = { duration: 400, iterations: iterations };
+            return elem.animate(keyframes, timing);
+        }
+
+        function stopInterval() {
+            if (interval) {
+                clearInterval(interval);
+                interval = null;
+            }
+        }
+
+        self.show = function () {
+
+            require(["css!" + pluginManager.mapPath(self, "style.css")], function () {
+
+                var elem = document.querySelector(".logoScreenSaver");
+
+                if (!elem) {
+                    elem = document.createElement("div");
+                    elem.classList.add("logoScreenSaver");
+                    document.body.appendChild(elem);
+
+                    elem.innerHTML = '<img class="logoScreenSaverImage" src="' + pluginManager.mapPath(self, "logowhite.png") + '" />';
+                }
+
+                stopInterval();
+                interval = setInterval(animate, 3000);
+            });
+        };
+
+        self.hide = function () {
+
+            stopInterval();
+
+            var elem = document.querySelector(".logoScreenSaver");
+
+            if (elem) {
+
+                var onAnimationFinish = function () {
+                    elem.parentNode.removeChild(elem);
+                };
+
+                if (elem.animate) {
+                    var animation = fadeOut(elem, 1);
+                    animation.onfinish = onAnimationFinish;
+                } else {
+                    onAnimationFinish();
+                }
+            }
+        };
+    }
+});

src/components/logoscreensaver/style.css

@@ -0,0 +1,18 @@
+.logoScreenSaver {
+    background: #101010;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1000;
+    text-align: center;
+}
+
+.logoScreenSaverImage {
+    height: 120px;
+    position: absolute;
+    top: 50%;
+    margin-top: -60px;
+    margin-left: -197px;
+}

src/components/mediainfo/mediainfo.css

@@ -69,10 +69,7 @@
 }
 
 .closedCaptionMediaInfoText {
-    /*padding: .24em .4em;*/
     font-weight: bold;
-    /*font-size: inherit;*/
-    /*background: rgba(81, 81, 81, .7);*/
 }
 
 .mediaInfoOfficialRating {

src/components/navdrawer/navdrawer.css

@@ -9,29 +9,20 @@
 .touch-menu-la {
     background-color: #FFF;
     will-change: transform;
-    display: -webkit-box;
-    display: -webkit-flex;
     display: flex;
-    -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
 }
 
 .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
 }
 
 .drawer-open {
-    -webkit-box-shadow: 2px 0 12px rgba(0, 0, 0, .4);
     box-shadow: 2px 0 12px rgba(0, 0, 0, .4)
 }
 
 .scrollContainer {
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
     flex-grow: 1
 }
 
@@ -41,8 +32,6 @@
     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;
     will-change: opacity;
     background-color: rgba(0, 0, 0, .3)

src/components/navdrawer/package.json

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

src/components/notifications/notifications.js

@@ -2,7 +2,6 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
     'use strict';
 
     function onOneDocumentClick() {
-
         document.removeEventListener('click', onOneDocumentClick);
         document.removeEventListener('keydown', onOneDocumentClick);
 
@@ -10,15 +9,14 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
             Notification.requestPermission();
         }
     }
+
     document.addEventListener('click', onOneDocumentClick);
     document.addEventListener('keydown', onOneDocumentClick);
 
     var serviceWorkerRegistration;
 
     function closeAfter(notification, timeoutMs) {
-
         setTimeout(function () {
-
             if (notification.close) {
                 notification.close();
             } else if (notification.cancel) {
@@ -28,9 +26,7 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
     }
 
     function resetRegistration() {
-
         var serviceWorker = navigator.serviceWorker;
-
         if (serviceWorker) {
             serviceWorker.ready.then(function (registration) {
                 serviceWorkerRegistration = registration;
@@ -269,4 +265,4 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
 
         showNotification(notification, 0, apiClient);
     });
-});
+});

src/components/remotecontrol/remotecontrol.css

@@ -1,13 +1,12 @@
 .nowPlayingInfoContainer {
-    display: -webkit-box;
-    display: -webkit-flex;
     display: flex;
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: normal;
-    -webkit-flex-direction: row;
     flex-direction: row
 }
 
+.navigationSection {
+    text-align: center
+}
+
 .nowPlayingPageTitle {
     margin: 0 0 .5em .5em
 }
@@ -17,27 +16,20 @@
 }
 
 .nowPlayingInfoButtons {
-    display: -webkit-box;
-    display: -webkit-flex;
     display: flex;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
     align-items: center;
-    -webkit-flex-wrap: wrap;
     flex-wrap: wrap
 }
 
 .nowPlayingInfoControls,
 .nowPlayingTime {
-    display: -webkit-box;
-    display: -webkit-flex
+    display: flex;
 }
 
 .nowPlayingPageImageContainer {
     width: 20%;
     margin-right: .25em;
     position: relative;
-    -webkit-flex-shrink: 0;
     flex-shrink: 0
 }
 
@@ -48,16 +40,9 @@
 }
 
 .nowPlayingInfoControls {
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
     flex-grow: 1;
     display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -webkit-flex-direction: column;
     flex-direction: column;
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
     justify-content: center
 }
 
@@ -66,25 +51,15 @@
     left: 0;
     right: 0;
     width: 100%;
-    -webkit-box-shadow: 0 0 1.9vh #000;
     box-shadow: 0 0 1.9vh #000;
     border: .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
 }
 
 @media all and (orientation:portrait) and (max-width:50em) {
     .nowPlayingInfoContainer {
-        -webkit-box-orient: vertical !important;
-        -webkit-box-direction: normal !important;
-        -webkit-flex-direction: column !important;
         flex-direction: column !important;
-        -webkit-box-align: center;
-        -webkit-align-items: center;
         align-items: center
     }
 
@@ -98,8 +73,6 @@
     }
 
     .nowPlayingInfoButtons {
-        -webkit-box-pack: center;
-        -webkit-justify-content: center;
         justify-content: center
     }
 
@@ -127,33 +100,20 @@
 
 .nowPlayingTime {
     display: flex;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
     align-items: center;
     margin: 0 1em
 }
 
 .nowPlayingSecondaryButtons {
-    display: -webkit-box;
-    display: -webkit-flex;
     display: flex;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
     align-items: center;
-    -webkit-flex-wrap: wrap;
     flex-wrap: wrap;
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
     justify-content: center
 }
 
 @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
     }
 }
@@ -170,15 +130,13 @@
 
 .smallBackdropPosterItem .cardOverlayInner>div {
     white-space: nowrap;
-    -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
     overflow: hidden
 }
 
 .playlistIndexIndicatorImage {
-    -webkit-background-size: initial initial !important;
     background-size: initial !important;
-    background-image: url(../../img/equalizer.gif) !important;
+    background-image: url(assets/img/equalizer.gif) !important;
 }
 
 .hideVideoButtons .videoButton {

src/components/remotecontrol/remotecontrol.js

@@ -203,18 +203,35 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
             updateAudioTracksDisplay(player, context);
             updateSubtitleTracksDisplay(player, context);
 
-            if (-1 != supportedCommands.indexOf("DisplayMessage")) {
+            if (-1 != supportedCommands.indexOf("DisplayMessage") && !currentPlayer.isLocalPlayer) {
                 context.querySelector(".sendMessageSection").classList.remove("hide");
             } else {
                 context.querySelector(".sendMessageSection").classList.add("hide");
             }
 
-            if (-1 != supportedCommands.indexOf("SendString")) {
+            if (-1 != supportedCommands.indexOf("SendString") && !currentPlayer.isLocalPlayer) {
                 context.querySelector(".sendTextSection").classList.remove("hide");
             } else {
                 context.querySelector(".sendTextSection").classList.add("hide");
             }
 
+            if (!currentPlayer.isLocalPlayer) {
+                context.querySelector(".navigationSection").classList.remove("hide");
+            } else {
+                context.querySelector(".navigationSection").classList.add("hide");
+            }
+
+            buttonVisible(context.querySelector(".btnArrowUp"), -1 != supportedCommands.indexOf("MoveUp"));
+            buttonVisible(context.querySelector(".btnArrowLeft"), -1 != supportedCommands.indexOf("MoveDown"));
+            buttonVisible(context.querySelector(".btnArrowRight"), -1 != supportedCommands.indexOf("MoveRight"));
+            buttonVisible(context.querySelector(".btnArrowDown"), -1 != supportedCommands.indexOf("MoveLeft"));
+            buttonVisible(context.querySelector(".btnOk"), -1 != supportedCommands.indexOf("Select"));
+            buttonVisible(context.querySelector(".btnBack"), -1 != supportedCommands.indexOf("Back"));
+            buttonVisible(context.querySelector(".btnContextMenu"), -1 != supportedCommands.indexOf("ToggleContextMenu"));
+            buttonVisible(context.querySelector(".btnShowSearch"), -1 != supportedCommands.indexOf("GoToSearch"));
+            buttonVisible(context.querySelector(".bthShowSettings"), -1 != supportedCommands.indexOf("GoToSettings"));
+            buttonVisible(context.querySelector(".btnGoHome"), -1 != supportedCommands.indexOf("GoHome"));
+
             buttonVisible(context.querySelector(".btnStop"), null != item);
             buttonVisible(context.querySelector(".btnNextTrack"), null != item);
             buttonVisible(context.querySelector(".btnPreviousTrack"), null != item);

src/components/screensavermanager.js

@@ -0,0 +1,132 @@
+define(["events", "playbackManager", "pluginManager", "inputManager", "connectionManager", "userSettings"], function (events, playbackManager, pluginManager, inputManager, connectionManager, userSettings) {
+    "use strict";
+
+    function getMinIdleTime() {
+        // Returns the minimum amount of idle time required before the screen saver can be displayed
+        //time units used Millisecond
+        return 180000;
+    }
+
+    var lastFunctionalEvent = 0;
+
+    function getFunctionalEventIdleTime() {
+        return new Date().getTime() - lastFunctionalEvent;
+    }
+
+    events.on(playbackManager, "playbackstop", function (e, stopInfo) {
+        var state = stopInfo.state;
+        if (state.NowPlayingItem && state.NowPlayingItem.MediaType == "Video") {
+            lastFunctionalEvent = new Date().getTime();
+        }
+    });
+
+    function getScreensaverPlugin(isLoggedIn) {
+
+        var option;
+        try {
+            option = userSettings.get("screensaver", false);
+        } catch (err) {
+            option = isLoggedIn ? "backdropscreensaver" : "logoscreensaver";
+        }
+
+        var plugins = pluginManager.ofType("screensaver");
+
+        for (var i = 0, length = plugins.length; i < length; i++) {
+            var plugin = plugins[i];
+
+            if (plugin.id === option) {
+                return plugin;
+            }
+        }
+
+        return null;
+    }
+
+    function ScreenSaverManager() {
+
+        var self = this;
+        var activeScreenSaver;
+
+        function showScreenSaver(screensaver) {
+
+            if (activeScreenSaver) {
+                throw new Error("An existing screensaver is already active.");
+            }
+
+            console.log("Showing screensaver " + screensaver.name);
+
+            screensaver.show();
+            activeScreenSaver = screensaver;
+
+            if (screensaver.hideOnClick !== false) {
+                window.addEventListener("click", hide, true);
+            }
+            if (screensaver.hideOnMouse !== false) {
+                window.addEventListener("mousemove", hide, true);
+            }
+            if (screensaver.hideOnKey !== false) {
+                window.addEventListener("keydown", hide, true);
+            }
+        }
+
+        function hide() {
+            if (activeScreenSaver) {
+                console.log("Hiding screensaver");
+                activeScreenSaver.hide();
+                activeScreenSaver = null;
+            }
+
+            window.removeEventListener("click", hide, true);
+            window.removeEventListener("mousemove", hide, true);
+            window.removeEventListener("keydown", hide, true);
+        }
+
+        self.isShowing = function () {
+            return activeScreenSaver != null;
+        };
+
+        self.show = function () {
+            var isLoggedIn;
+            var apiClient = connectionManager.currentApiClient();
+
+            if (apiClient && apiClient.isLoggedIn()) {
+                isLoggedIn = true;
+            }
+
+            var screensaver = getScreensaverPlugin(isLoggedIn);
+
+            if (screensaver) {
+                showScreenSaver(screensaver);
+            }
+        };
+
+        self.hide = function () {
+            hide();
+        };
+
+        function onInterval() {
+
+            if (self.isShowing()) {
+                return;
+            }
+
+            if (inputManager.idleTime() < getMinIdleTime()) {
+                return;
+            }
+
+            if (getFunctionalEventIdleTime < getMinIdleTime()) {
+                return;
+            }
+
+            if (playbackManager.isPlayingVideo()) {
+                return;
+            }
+
+            self.show();
+        }
+
+        setInterval(onInterval, 10000);
+    }
+
+    return new ScreenSaverManager();
+});

src/components/search/searchresults.js

@@ -581,8 +581,6 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
             allowBottomPadding: !enableScrollX()
 
         }, cardOptions || {}));
-
-        section.querySelector('.emby-scroller').scrollToBeginning(true);
     }
 
     function enableScrollX() {
@@ -636,4 +634,4 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
     };
 
     return SearchResults;
-});
+});

src/components/serverNotifications/package.json

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

src/components/serverNotifications/serverNotifications.js

@@ -4,20 +4,15 @@ define(['connectionManager', 'playbackManager', 'events', 'inputManager', 'focus
     var serverNotifications = {};
 
     function notifyApp() {
-
         inputManager.notify();
     }
 
     function displayMessage(cmd) {
-
         var args = cmd.Arguments;
-
         if (args.TimeoutMs) {
-
             require(['toast'], function (toast) {
                 toast({ title: args.Header, text: args.Text });
             });
-
         } else {
             require(['alert'], function (alert) {
                 alert({ title: args.Header, text: args.Text });
@@ -146,14 +141,10 @@ define(['connectionManager', 'playbackManager', 'events', 'inputManager', 'focus
     }
 
     function onMessageReceived(e, msg) {
-
         var apiClient = this;
-
         if (msg.MessageType === "Play") {
-
             notifyApp();
             var serverId = apiClient.serverInfo().Id;
-
             if (msg.Data.PlayCommand === "PlayNext") {
                 playbackManager.queueNext({ ids: msg.Data.ItemIds, serverId: serverId });
             } else if (msg.Data.PlayCommand === "PlayLast") {
@@ -169,9 +160,7 @@ define(['connectionManager', 'playbackManager', 'events', 'inputManager', 'focus
                     serverId: serverId
                 });
             }
-
         } else if (msg.MessageType === "Playstate") {
-
             if (msg.Data.Command === 'Stop') {
                 inputManager.trigger('stop');
             } else if (msg.Data.Command === 'Pause') {
@@ -193,22 +182,17 @@ define(['connectionManager', 'playbackManager', 'events', 'inputManager', 'focus
             var cmd = msg.Data;
             processGeneralCommand(cmd, apiClient);
         } else if (msg.MessageType === "UserDataChanged") {
-
             if (msg.Data.UserId === apiClient.getCurrentUserId()) {
-
                 for (var i = 0, length = msg.Data.UserDataList.length; i < length; i++) {
                     events.trigger(serverNotifications, 'UserDataChanged', [apiClient, msg.Data.UserDataList[i]]);
                 }
             }
         } else {
-
             events.trigger(serverNotifications, msg.MessageType, [apiClient, msg.Data]);
         }
-
     }
 
     function bindEvents(apiClient) {
-
         events.off(apiClient, "message", onMessageReceived);
         events.on(apiClient, "message", onMessageReceived);
     }
@@ -229,7 +213,6 @@ define(['connectionManager', 'playbackManager', 'events', 'inputManager', 'focus
     connectionManager.getApiClients().forEach(bindEvents);
 
     events.on(connectionManager, 'apiclientcreated', function (e, newApiClient) {
-
         bindEvents(newApiClient);
     });
 

src/components/skinManager.js

@@ -72,7 +72,7 @@ define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdr
 
         selectedTheme = selectedTheme || defaultTheme;
         return {
-            stylesheetPath: require.toUrl('components/themes/' + selectedTheme.id + '/theme.css'),
+            stylesheetPath: require.toUrl('themes/' + selectedTheme.id + '/theme.css'),
             themeId: selectedTheme.id
         };
     }

src/components/slideshow/style.css

@@ -41,9 +41,6 @@
     height: auto;
     max-width: 100%;
     max-height: 100%;
-    -ms-transform: translate(-50%, -50%);
-    -webkit-transform: translate(-50%, -50%);
-    -moz-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     position: absolute;
     left: 50%;

src/components/subtitlesync/subtitlesync.css

@@ -40,8 +40,6 @@
     margin-right: 1%;
     top: 2.5em;
     height: 1.4em;
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
     flex-grow: 1;
     border-radius: .3em;
     z-index: 1; 

src/components/themes/appletv/theme.css

@@ -1,458 +0,0 @@
-.skinHeader,
-html {
-    color: #222;
-    color: rgba(0, 0, 0, .87)
-}
-
-.wizardStartForm,
-.ui-corner-all,
-.ui-shadow {
-  background-color: #303030
-}
-
-.emby-collapsible-button {
-    border-color: #ccc;
-    border-color: rgba(0, 0, 0, .158)
-}
-
-.collapseContent {
-    background-color: #eaeaea
-}
-
-.formDialogHeader:not(.formDialogHeader-clear),
-.skinHeader-withBackground {
-    color: rgba(0, 0, 0, .7);
-    background: #303030;
-    background: -webkit-gradient(linear, left top, right top, from(#BCBCBC), color-stop(#A7B4B7), color-stop(#BEB5A5), color-stop(#ADBEC2), to(#B9C7CB));
-    background: -webkit-linear-gradient(left, #BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB);
-    background: -o-linear-gradient(left, #BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB);
-    background: linear-gradient(to right, #BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB)
-}
-
-@supports (backdrop-filter:blur(1.5em)) or (-webkit-backdrop-filter:blur(1.5em)) {
-    .skinHeader-blurred {
-        background: -webkit-gradient(linear, left top, right top, from(rgba(188, 188, 188, .7)), color-stop(rgba(167, 180, 183, .7)), color-stop(rgba(190, 181, 165, .7)), color-stop(rgba(173, 190, 194, .7)), to(rgba(185, 199, 203, .7)));
-        background: -webkit-linear-gradient(left, rgba(188, 188, 188, .7), rgba(167, 180, 183, .7), rgba(190, 181, 165, .7), rgba(173, 190, 194, .7), rgba(185, 199, 203, .7));
-        background: -o-linear-gradient(left, rgba(188, 188, 188, .7), rgba(167, 180, 183, .7), rgba(190, 181, 165, .7), rgba(173, 190, 194, .7), rgba(185, 199, 203, .7));
-        background: linear-gradient(to right, rgba(188, 188, 188, .7), rgba(167, 180, 183, .7), rgba(190, 181, 165, .7), rgba(173, 190, 194, .7), rgba(185, 199, 203, .7));
-        -webkit-backdrop-filter: blur(1.5em);
-        backdrop-filter: blur(1.5em)
-    }
-}
-
-.skinHeader.semiTransparent {
-    -webkit-backdrop-filter: none !important;
-    backdrop-filter: none !important
-}
-
-.pageTitleWithDefaultLogo {
-    background-image: url(../logodark.png)
-}
-
-html {
-    background: #D5E9F2
-}
-
-.backgroundContainer,
-.dialog {
-    background: #D5E9F2;
-    -webkit-background-size: 100% 100%;
-    background-size: 100% 100%
-}
-
-.backgroundContainer.withBackdrop {
-    background: -webkit-gradient(linear, left top, left bottom, from(rgba(192, 212, 222, .94)), color-stop(rgba(235, 250, 254, .94)), color-stop(rgba(227, 220, 212, .94)), color-stop(rgba(206, 214, 216, .94)), to(rgba(192, 211, 218, .94)));
-    background: -webkit-linear-gradient(top, rgba(192, 212, 222, .94), rgba(235, 250, 254, .94), rgba(227, 220, 212, .94), rgba(206, 214, 216, .94), rgba(192, 211, 218, .94));
-    background: -o-linear-gradient(top, rgba(192, 212, 222, .94), rgba(235, 250, 254, .94), rgba(227, 220, 212, .94), rgba(206, 214, 216, .94), rgba(192, 211, 218, .94));
-    background: linear-gradient(to bottom, rgba(192, 212, 222, .94), rgba(235, 250, 254, .94), rgba(227, 220, 212, .94), rgba(206, 214, 216, .94), rgba(192, 211, 218, .94))
-}
-
-.actionSheet {
-    background: #f0f0f0
-}
-
-.paper-icon-button-light:hover:not(:disabled) {
-    color: #00a4dc;
-    background-color: rgba(0,164,220, .2);
-}
-
-.paper-icon-button-light.show-focus:focus {
-    color: #00a4dc;
-}
-
-.fab,
-.raised {
-    background: #fff;
-    background: rgba(0, 0, 0, .14);
-    color: inherit
-}
-
-.fab:focus,
-.raised:focus {
-    background: rgba(0, 0, 0, .24)
-}
-
-.button-submit {
-    background: #00a4dc;
-    color: #fff
-}
-
-.button-submit:focus {
-    background: #0cb0e8
-}
-
-.button-delete {
-    background: rgb(247, 0, 0);
-    color: rgba(255, 255, 255, .87)
-}
-
-.checkboxLabel {
-    color: inherit
-}
-
-.checkboxListLabel,
-.inputLabel,
-.inputLabelUnfocused,
-.paperListLabel,
-.textareaLabelUnfocused {
-    color: #555;
-    color: rgba(0, 0, 0, .7)
-}
-
-.button-link,
-.inputLabelFocused,
-.selectLabelFocused,
-.textareaLabelFocused {
-    color: green
-}
-
-.checkboxOutline {
-    border-color: currentColor
-}
-
-.paperList,
-.visualCardBox {
-    background-color: #fff;
-    background-color: rgba(0, 0, 0, .1)
-}
-
-.defaultCardBackground1 {
-    background-color: #009688
-}
-
-.defaultCardBackground2 {
-    background-color: #D32F2F
-}
-
-.defaultCardBackground3 {
-    background-color: #0288D1
-}
-
-.defaultCardBackground4 {
-    background-color: #388E3C
-}
-
-.defaultCardBackground5 {
-    background-color: #F57F17
-}
-
-.formDialogFooter:not(.formDialogFooter-clear) {
-    border-top: 1px solid #ddd;
-    border-top: 1px solid rgba(0, 0, 0, .08)
-}
-
-.cardText-secondary,
-.fieldDescription,
-.guide-programNameCaret,
-.listItem .secondary,
-.nowPlayingBarSecondaryText,
-.programSecondaryTitle,
-.secondaryText {
-    color: #888;
-    color: rgba(0, 0, 0, .5)
-}
-
-.actionsheetDivider {
-    background: #ddd;
-    background: rgba(0, 0, 0, .14)
-}
-
-.cardFooter-vibrant .cardText-secondary {
-    color: inherit;
-    opacity: .5
-}
-
-.formDialogHeader a,
-.toast {
-    color: #fff
-}
-
-.actionSheetMenuItem:hover {
-    background-color: #ddd
-}
-
-.toast {
-    background: #303030;
-    color: rgba(255, 255, 255, .87)
-}
-
-.appfooter,
-.formDialogFooter:not(.formDialogFooter-clear) {
-    color: rgba(0, 0, 0, .7);
-    background: #303030;
-    background: -webkit-gradient(linear, left top, right top, from(#BCBCBC), color-stop(#A7B4B7), color-stop(#BEB5A5), color-stop(#ADBEC2), to(#B9C7CB));
-    background: -webkit-linear-gradient(left, #BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB);
-    background: -o-linear-gradient(left, #BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB);
-    background: linear-gradient(to right, #BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB)
-}
-
-@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
-    .appfooter-blurred {
-        background: rgba(24, 24, 24, .7);
-        -webkit-backdrop-filter: blur(20px);
-        backdrop-filter: blur(20px)
-    }
-}
-
-.nowPlayingBarSecondaryText {
-    color: #999
-}
-
-.itemSelectionPanel {
-    border: 1px solid #00a4dc
-}
-
-.selectionCommandsPanel {
-    background: #00a4dc;
-    color: #fff
-}
-
-.upNextDialog-countdownText {
-    color: #00a4dc
-}
-
-.alphaPickerButton {
-    color: #555;
-    color: rgba(0, 0, 0, .7);
-    background-color: transparent
-}
-
-.alphaPickerButton-selected,
-.alphaPickerButton-tv:focus {
-    background-color: #00a4dc;
-    color: #fff !important
-}
-
-.detailTableBodyRow-shaded:nth-child(even) {
-    background: #f8f8f8;
-    background: rgba(0, 0, 0, .1)
-}
-
-.listItem-border {
-    border-color: rgba(0, 0, 0, .1) !important
-}
-
-.listItem:focus {
-    background: rgba(0, 0, 0, .2)
-}
-
-.progressring-spiner {
-    border-color: #00a4dc
-}
-
-.mediaInfoText {
-    color: #333;
-    background: #fff
-}
-
-.mediaInfoTimerIcon,
-.starIcon {
-    color: #CB272A
-}
-
-.emby-input,
-.emby-textarea {
-    color: inherit;
-    background: rgba(255, 255, 255, .9);
-    border: .07em solid rgba(0, 0, 0, .158);
-    -webkit-border-radius: .15em;
-    border-radius: .15em
-}
-
-.emby-input:focus,
-.emby-textarea:focus {
-    border-color: #00a4dc
-}
-
-.emby-select-withcolor {
-    color: inherit;
-    background: rgba(255, 255, 255, .9);
-    border: .07em solid rgba(0, 0, 0, .158)
-}
-
-.emby-checkbox:checked+span+.checkboxOutline,
-.emby-select-withcolor:focus {
-    border-color: #00a4dc
-}
-
-.emby-checkbox:focus+span+.checkboxOutline {
-    border-color: #fff;
-}
-
-.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
-    border-color: #00a4dc;
-}
-
-.emby-select-withcolor>option {
-    color: #000;
-    background: #fff
-}
-
-.emby-select-tv-withcolor:focus {
-    background-color: #00a4dc;
-    color: #fff
-}
-
-.emby-checkbox:checked+span+.checkboxOutline,
-.itemProgressBarForeground {
-    background-color: #00a4dc
-}
-
-.itemProgressBarForeground-recording {
-    background-color: #CB272A
-}
-
-.countIndicator,
-.fullSyncIndicator,
-.playedIndicator {
-    background: #00a4dc
-}
-
-.fullSyncIndicator {
-    color: #fff
-}
-
-.mainDrawer {
-    background: #fff
-}
-
-.navMenuOption:hover {
-    background: #f2f2f2
-}
-
-.navMenuOption-selected {
-    background: #00a4dc !important;
-    color: #fff
-}
-
-.emby-button.show-focus:focus {
-    background: #00a4dc;
-    color: #fff
-}
-
-.emby-tab-button {
-    color: #999;
-}
-
-.emby-tab-button-active {
-    color: #fff;
-}
-
-.emby-tab-button.show-focus:focus {
-    color: #fff;
-}
-
-.emby-tab-button:hover {
-    color: #fff;
-}
-
-.channelPrograms,
-.guide-channelHeaderCell,
-.programCell {
-    border-color: #555;
-    border-color: rgba(0, 0, 0, .1)
-}
-
-.programCell-sports {
-    background: #3949AB !important
-}
-
-.programCell-movie {
-    background: #5E35B1 !important
-}
-
-.programCell-kids {
-    background: #039BE5 !important
-}
-
-.programCell-news {
-    background: #43A047 !important
-}
-
-.programCell-active {
-    background: rgba(0, 0, 0, .1) !important
-}
-
-.guide-channelHeaderCell:focus,
-.programCell:focus {
-    background-color: #00a4dc !important;
-    color: #fff !important
-}
-
-.guide-programTextIcon {
-    color: #1e1e1e;
-    background: #555
-}
-
-.guide-headerTimeslots {
-    color: inherit
-}
-
-.guide-date-tab-button {
-    color: #555;
-    color: rgba(0, 0, 0, .54)
-}
-
-.guide-date-tab-button.emby-tab-button-active,
-.guide-date-tab-button:focus {
-    color: #00a4dc
-}
-
-.guide-date-tab-button.show-focus:focus {
-    background-color: #00a4dc;
-    color: #fff
-}
-
-.infoBanner {
-    color: #000;
-    background: #fff3a5;
-    padding: 1em;
-    -webkit-border-radius: .25em;
-    border-radius: .25em
-}
-
-.ratingbutton-icon-withrating {
-    color: #c33
-}
-
-.downloadbutton-icon-complete,
-.downloadbutton-icon-on {
-    color: #4285F4
-}
-
-.playstatebutton-icon-played {
-    color: #c33
-}
-
-.repeatButton-active {
-    color: #4285F4
-}
-
-.card:focus .cardBox.visualCardBox,
-.card:focus .cardBox:not(.visualCardBox) .cardScalable {
-    border-color: #00a4dc !important
-}
-
-.metadataSidebarIcon {
-    color: #00a4dc
-}

src/components/themes/blueradiance/theme.css

@@ -1,466 +0,0 @@
-.skinHeader,
-html {
-    color: #ddd;
-    color: rgba(255, 255, 255, .8)
-}
-
-.wizardStartForm,
-.ui-corner-all,
-.ui-shadow {
-  background-color: #303030
-}
-
-.emby-collapsible-button {
-    border-color: #383838;
-    border-color: rgba(255, 255, 255, .135)
-}
-
-.skinHeader-withBackground {
-    background: #303030;
-    background: -webkit-gradient(linear, left top, right top, from(#291A31), color-stop(#033664), color-stop(#011432), color-stop(#141A3A), to(#291A31));
-    background: -webkit-linear-gradient(left, #291A31, #033664, #011432, #141A3A, #291A31);
-    background: -o-linear-gradient(left, #291A31, #033664, #011432, #141A3A, #291A31);
-    background: linear-gradient(to right, #291A31, #033664, #011432, #141A3A, #291A31)
-}
-
-.skinHeader.semiTransparent {
-    -webkit-backdrop-filter: none !important;
-    backdrop-filter: none !important;
-    background-color: rgba(0, 0, 0, .3);
-    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
-    background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
-    background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
-    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0))
-}
-
-.pageTitleWithDefaultLogo {
-    background-image: url(../logowhite.png)
-}
-
-.dialog,
-html {
-    background-color: #033361
-}
-
-.backgroundContainer {
-    background: url(bg.jpg) center top no-repeat #033361;
-    -webkit-background-size: cover;
-    background-size: cover
-}
-
-.backgroundContainer.withBackdrop {
-    opacity: .86
-}
-
-@media (orientation:portrait) {
-    .backgroundContainer {
-        background-position: 30% top
-    }
-}
-
-.paper-icon-button-light:hover:not(:disabled) {
-    color: #00a4dc;
-    background-color: rgba(0,164,220, .2);
-}
-
-.paper-icon-button-light.show-focus:focus {
-    color: #00a4dc;
-}
-
-.fab,
-.raised {
-    background: rgba(0, 0, 0, .5);
-    color: rgba(255, 255, 255, .87)
-}
-
-.fab:focus,
-.raised:focus {
-    background: rgba(0, 0, 0, .7)
-}
-
-.button-submit {
-    background: #00a4dc;
-    color: #fff
-}
-
-.button-submit:focus {
-    background: #0cb0e8;
-    color: #fff
-}
-
-.button-delete {
-    background: rgb(247, 0, 0);
-    color: rgba(255, 255, 255, .87)
-}
-
-.checkboxLabel {
-    color: inherit
-}
-
-.checkboxListLabel,
-.inputLabel,
-.inputLabelUnfocused,
-.paperListLabel,
-.textareaLabelUnfocused {
-    color: #bbb;
-    color: rgba(255, 255, 255, .7)
-}
-
-.inputLabelFocused,
-.selectLabelFocused,
-.textareaLabelFocused {
-    color: #00a4dc
-}
-
-.checkboxOutline {
-    border-color: currentColor
-}
-
-.collapseContent,
-.formDialogFooter:not(.formDialogFooter-clear),
-.formDialogHeader:not(.formDialogHeader-clear),
-.paperList,
-.visualCardBox {
-    background-color: rgba(0, 0, 0, .5)
-}
-
-.defaultCardBackground1 {
-    background-color: #d2b019
-}
-
-.defaultCardBackground2 {
-    background-color: #338abb
-}
-
-.defaultCardBackground3 {
-    background-color: #6b689d
-}
-
-.defaultCardBackground4 {
-    background-color: #dd452b
-}
-
-.defaultCardBackground5 {
-    background-color: #5ccea9
-}
-
-.cardText-secondary,
-.fieldDescription,
-.guide-programNameCaret,
-.listItem .secondary,
-.nowPlayingBarSecondaryText,
-.programSecondaryTitle,
-.secondaryText {
-    color: #999;
-    color: rgba(255, 255, 255, .5)
-}
-
-.actionsheetDivider {
-    background: #444;
-    background: rgba(255, 255, 255, .14)
-}
-
-.cardFooter-vibrant .cardText-secondary {
-    color: inherit;
-    opacity: .5
-}
-
-.actionSheetMenuItem:hover {
-    background-color: rgba(0, 0, 0, .5)
-}
-
-.toast {
-    background: #303030;
-    color: #fff;
-    color: rgba(255, 255, 255, .87)
-}
-
-.appfooter {
-    background: #033664;
-    color: #ccc;
-    color: rgba(255, 255, 255, .78)
-}
-
-@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
-    .appfooter-blurred {
-        background: rgba(24, 24, 24, .7);
-        -webkit-backdrop-filter: blur(20px);
-        backdrop-filter: blur(20px)
-    }
-}
-
-.itemSelectionPanel {
-    border: 1px solid #00a4dc
-}
-
-.selectionCommandsPanel {
-    background: #00a4dc;
-    color: #fff
-}
-
-.upNextDialog-countdownText {
-    color: #00a4dc
-}
-
-.alphaPickerButton {
-    color: #999;
-    color: rgba(255, 255, 255, .5);
-    background-color: transparent
-}
-
-.alphaPickerButton-selected {
-    color: #fff
-}
-
-.alphaPickerButton-tv:focus {
-    background-color: #00a4dc;
-    color: #fff !important
-}
-
-.detailTableBodyRow-shaded:nth-child(even) {
-    background: #1c1c1c;
-    background: rgba(30, 30, 30, .9)
-}
-
-.listItem-border {
-    border-color: rgba(255, 255, 255, .1) !important
-}
-
-.listItem:focus {
-    background: rgba(0, 0, 0, .3)
-}
-
-.progressring-spiner {
-    border-color: #00a4dc
-}
-
-.button-flat-accent,
-.button-link {
-    color: #00a4dc
-}
-
-.mediaInfoText {
-    color: #ddd;
-    background: rgba(170, 170, 190, .2)
-}
-
-.mediaInfoTimerIcon,
-.starIcon {
-    color: #CB272A
-}
-
-.emby-input,
-.emby-textarea {
-    color: inherit;
-    background: rgba(0, 0, 0, .5);
-    border: .07em solid transparent;
-    -webkit-border-radius: .15em;
-    border-radius: .15em
-}
-
-.emby-input:focus,
-.emby-textarea:focus {
-    border-color: #00a4dc
-}
-
-.emby-select-withcolor {
-    color: inherit;
-    background: rgba(0, 0, 0, .5);
-    border: .07em solid transparent
-}
-
-.emby-select-withcolor>option {
-    color: inherit;
-    background: #222
-}
-
-.emby-select-withcolor:focus {
-    border-color: #00a4dc !important
-}
-
-.emby-select-tv-withcolor:focus {
-    background-color: #00a4dc !important;
-    color: #fff !important
-}
-
-.emby-checkbox:checked+span+.checkboxOutline {
-    border-color: #00a4dc
-}
-
-.emby-checkbox:focus+span+.checkboxOutline {
-    border-color: #fff;
-}
-
-.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
-    border-color: #00a4dc;
-}
-
-.emby-checkbox:checked+span+.checkboxOutline,
-.itemProgressBarForeground {
-    background-color: #00a4dc
-}
-
-.itemProgressBarForeground-recording {
-    background-color: #CB272A
-}
-
-.countIndicator,
-.fullSyncIndicator,
-.playedIndicator {
-    background: #00a4dc
-}
-
-.fullSyncIndicator {
-    color: #fff
-}
-
-.mainDrawer {
-    background-color: rgba(0, 0, 0, .5)
-}
-
-.drawer-open {
-    background-color: #011432
-}
-
-.navMenuOption:hover {
-    background: rgba(221, 221, 221, 0.068)
-}
-
-.navMenuOption-selected {
-    background: #00a4dc !important;
-    color: #fff
-}
-
-.emby-button.show-focus:focus {
-    background: #00a4dc;
-    color: #fff
-}
-
-.emby-tab-button {
-    color: #999;
-}
-
-.emby-tab-button-active {
-    color: #00a4dc
-}
-
-.emby-tab-button.show-focus:focus {
-    color: #00a4dc;
-}
-
-.emby-tab-button:hover {
-    color: #00a4dc;
-}
-
-.channelPrograms,
-.guide-channelHeaderCell,
-.programCell {
-    border-color: rgba(255, 255, 255, .05)
-}
-
-.programCell-sports {
-    background: #3949AB !important
-}
-
-.programCell-movie {
-    background: #5E35B1 !important
-}
-
-.programCell-kids {
-    background: #039BE5 !important
-}
-
-.programCell-news {
-    background: #43A047 !important
-}
-
-.programCell-active {
-    background: rgba(0, 0, 0, .4) !important
-}
-
-.guide-channelHeaderCell:focus,
-.programCell:focus {
-    background-color: #00a4dc !important;
-    color: #fff !important
-}
-
-.guide-programTextIcon {
-    color: #1e1e1e;
-    background: #555
-}
-
-.guide-headerTimeslots {
-    color: inherit
-}
-
-.guide-date-tab-button {
-    color: #555;
-    color: rgba(255, 255, 255, .3)
-}
-
-.guide-date-tab-button.emby-tab-button-active,
-.guide-date-tab-button:focus {
-    color: #00a4dc
-}
-
-.guide-date-tab-button.show-focus:focus {
-    background-color: #00a4dc;
-    color: #fff
-}
-
-.infoBanner {
-    color: #ddd;
-    background: #111;
-    padding: 1em;
-    -webkit-border-radius: .25em;
-    border-radius: .25em
-}
-
-.ratingbutton-icon-withrating {
-    color: #c33
-}
-
-.downloadbutton-icon-complete,
-.downloadbutton-icon-on {
-    color: #4285F4
-}
-
-.playstatebutton-icon-played {
-    color: #c33
-}
-
-.repeatButton-active {
-    color: #4285F4
-}
-
-.card:focus .cardBox.visualCardBox,
-.card:focus .cardBox:not(.visualCardBox) .cardScalable {
-    border-color: #00a4dc !important
-}
-
-.layout-desktop ::-webkit-scrollbar {
-    width: 1em;
-    height: 1em
-}
-
-::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
-}
-
-::-webkit-scrollbar-track-piece {
-    background-color: #3b3b3b
-}
-
-::-webkit-scrollbar-thumb:horizontal,
-::-webkit-scrollbar-thumb:vertical {
-    -webkit-border-radius: 2px;
-    background: center no-repeat #888
-}
-
-.timeslotHeaders-desktop::-webkit-scrollbar {
-    height: .7em
-}
-
-.metadataSidebarIcon {
-    color: #00a4dc
-}

src/components/themes/dark/theme.css

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

src/components/themes/emby/theme.css

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

src/components/themes/light/theme.css

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

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

@@ -1,598 +0,0 @@
-.skinHeader,
-html {
-    color: #f8f8fe;
-    color: rgba(248, 248, 254, 0.973)
-}
-
-.wizardStartForm,
-.ui-corner-all,
-.ui-shadow {
-    background-color: #303030
-}
-
-.emby-collapsible-button {
-    border-color: #383838;
-    border-color: rgba(255, 255, 255, .135)
-}
-
-.skinHeader-withBackground {
-    background: #000420;
-    background: -moz-linear-gradient(left, #000420 0%, #06256f 18%, #2b052b 38%, #2b052b 68%, #06256f 81%, #000420 100%);
-    background: -webkit-linear-gradient(left, #000420 0%,#06256f 18%,#2b052b 38%,#2b052b 68%,#06256f 81%,#000420 100%);
-    background: linear-gradient(to right, #000420 0%,#06256f 18%,#2b052b 38%,#2b052b 68%,#06256f 81%,#000420 100%);
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000420', endColorstr='#000420',GradientType=1 );
-}
-
-.skinHeader.semiTransparent {
-    -webkit-backdrop-filter: none !important;
-    backdrop-filter: none !important;
-    background-color: rgba(0, 0, 0, .3);
-    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
-    background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
-    background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
-    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0))
-}
-
-.pageTitleWithDefaultLogo {
-    background-image: url(../logowhite.png)
-}
-
-.dialog,
-html {
-    background-color: #230c33
-}
-
-.backgroundContainer {
-    background: url(bg.jpg) center top no-repeat #030322;
-    -webkit-background-size: cover;
-    background-size: cover
-}
-
-.backgroundContainer.withBackdrop {
-    opacity: .86
-}
-
-@media (orientation:portrait) {
-    .backgroundContainer {
-        background-position: 30% top
-    }
-}
-
-.paper-icon-button-light:hover:not(:disabled) {
-    color: rgb(12, 232, 214);
-    background-color: rgba(0,164,220, .2);
-}
-
-.paper-icon-button-light.show-focus:focus {
-    color: #ff77f1;
-}
-
-progress {
-    border-radius: .4em;
-}
-
-progress::-webkit-progress-bar {
-    border-radius: .4em;
-}
-
-progress::-moz-progress-bar {
-    border-radius: .4em;
-}
-
-progress::-webkit-progress-value {
-    border-radius: .4em;
-}
-
-.fab,
-.raised {
-    background: rgba(0, 0, 0, .5);
-    color: rgba(255, 255, 255, .87);
-}
-
-.fab:focus,
-.raised:focus {
-    background: #ff77f1
-}
-
-div[data-role=controlgroup] a.ui-btn-active {
-    background: #55828b !important;
-    color: #e1e5f2 !important
-}
-
-a[data-role=button] {
-    background: rgba(2, 43, 58, 0.521) !important;
-}
-
-#btnDeleteImage,
-.submit,
-.btnBrowse,
-.mini,
-.btnRefresh,
-.btnManual,
-.button-submit,
-.viewTabButton,
-.button-alt,
-.btnOption {
-    background: rgb(72, 195, 200);
-    color: rgb(225, 229, 242)
-}
-
-#btnResetPassword:hover,
-#btnRestart:hover,
-#btnDeleteImage:hover,
-#btnShutdown:hover,
-.button-cancel:hover,
-.fab:hover,
-.raised:hover,
-.alphaPickerButton:hover,
-.submit:hover,
-.btnBrowse:hover,
-.mini:hover,
-.btnRefresh:hover,
-.button-submit:hover,
-.viewTabButton:hover,
-.button-alt:hover,
-.btnOption:hover,
-.btnManual:hover,
-.block:hover {
-    background: rgb(12, 232, 214);
-    color: rgba(255, 255, 255, .87)
-}
-
-.button-submit:focus {
-    background: #ff77f1
-}
-
-.button-delete {
-    background: rgb(247, 0, 0);
-    color: rgba(255, 255, 255, .87)
-}
-
-#btnResetPassword,
-.btnForgotPassword,
-.btnCancel,
-.button-cancel {
-    background: rgba(0, 0, 0, .5);
-    color: rgba(255, 255, 255, .87);
-}
-
-.itemName {
-    color: #f1f7ee
-}
-
-.textareaLabel,
-.sectionTitle,
-.fieldDescription,
-.checkboxLabel {
-    color: #f1f7ee
-}
-
-.checkboxLabel {
-    color: inherit
-}
-
-.selectLabel,
-.checkboxLabel,
-.checkboxListLabel,
-.inputLabel,
-.inputLabelUnfocused,
-.paperListLabel,
-.textareaLabelUnfocused {
-    color: rgb(191, 219, 247);
-}
-
-.inputLabelFocused,
-.selectLabelFocused,
-.textareaLabelFocused {
-    color: #ff77f1
-}
-
-.checkboxOutline {
-    border-color: currentColor
-}
-
-.cardContent {
-    border-radius: 1.000em
-}
-
-.collapseContent,
-.formDialogFooter:not(.formDialogFooter-clear),
-.formDialogHeader:not(.formDialogHeader-clear),
-.paperList,
-.visualCardBox {
-    background-color: rgba(0, 0, 0, .5);
-    border-radius: 1.000em
-}
-
-.cardOverlayContainer {
-    border-radius: 0.8em;
-}
-.visualCardBox .cardOverlayContainer {
-    border-bottom-right-radius: 0em;
-    border-bottom-left-radius: 0em;
-}
-
-.defaultCardBackground1 {
-    background-color: #d2b019
-}
-
-.defaultCardBackground2 {
-    background-color: #338abb
-}
-
-.defaultCardBackground3 {
-    background-color: #6b689d
-}
-
-.defaultCardBackground4 {
-    background-color: #dd452b
-}
-
-.defaultCardBackground5 {
-    background-color: #5ccea9
-}
-
-.cardText-secondary,
-.fieldDescription,
-.guide-programNameCaret,
-.listItem .secondary,
-.nowPlayingBarSecondaryText,
-.programSecondaryTitle,
-.secondaryText {
-    color: #999;
-    color: rgba(255, 255, 255, .5)
-}
-
-.actionsheetDivider {
-    background: #444;
-    background: rgba(255, 255, 255, .14)
-}
-
-.cardFooter-vibrant .cardText-secondary {
-    color: inherit;
-    opacity: .5
-}
-
-.actionSheetMenuItem:hover {
-    background-color: rgba(0, 0, 0, .5)
-}
-
-.toast {
-    background: #303030;
-    color: #f8f8fe;
-    color: rgba(255, 255, 255, .87)
-}
-
-.appfooter {
-    background: #06256f;
-    color: #ccc;
-    color: rgba(255, 255, 255, .78)
-}
-
-@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
-    .appfooter-blurred {
-        background: rgba(24, 24, 24, .7);
-        -webkit-backdrop-filter: blur(20px);
-        backdrop-filter: blur(20px)
-    }
-}
-
-.itemSelectionPanel {
-    border: 1px solid #48C3C8
-}
-
-.selectionCommandsPanel {
-    background: #48C3C8;
-    color: #f8f8fe
-}
-
-.upNextDialog-countdownText {
-    color: #48C3C8
-}
-
-.alphaPickerButton {
-    color: #999;
-    color: rgba(255, 255, 255, .5);
-    background-color: transparent
-}
-
-.alphaPickerButton-selected {
-    color: #0ce8d6
-}
-
-.alphaPickerButton-tv:focus {
-    background: #ff77f1;
-    color: #f8f8fe !important
-}
-
-.detailTableBodyRow-shaded:nth-child(even) {
-    background: #1c1c1c;
-    background: rgba(30, 30, 30, .9)
-}
-
-.listItem-border {
-    border-color: rgba(255, 255, 255, .1) !important
-}
-
-.listItem:focus {
-    background: rgba(0, 0, 0, .3)
-}
-
-.progressring-spiner {
-    border-color: #48C3C8
-}
-
-.button-flat-accent,
-.button-link {
-    color: #48C3C8
-}
-
-.mediaInfoText {
-    color: #f8f8fe;
-    background: rgba(170, 170, 190, .2)
-}
-
-.mediaInfoTimerIcon,
-.starIcon {
-    color: #f2b01e
-}
-
-.emby-input,
-.emby-textarea {
-    color: inherit;
-    background: rgba(0, 0, 0, .5);
-    border: .07em solid transparent;
-    -webkit-border-radius: .15em;
-    border-radius: .15em
-}
-
-.emby-input:focus,
-.emby-textarea:focus {
-    border-color: #ff77f1
-}
-
-.emby-select-withcolor {
-    color: inherit;
-    background: rgba(0, 0, 0, .5);
-    border: .07em solid transparent
-}
-
-.emby-select-withcolor>option {
-    color: inherit;
-    background: #030322d7
-}
-
-.emby-select-withcolor:focus {
-    border-color: #ff77f1 !important
-}
-
-.emby-select-tv-withcolor:focus {
-    background-color: #ff77f1 !important;
-    color: #fff !important
-}
-
-.emby-checkbox:checked+span+.checkboxOutline {
-    background-color: #030322;
-    border:2px solid rgb(72, 195, 200);
-}
-
-.emby-checkbox:checked + span + .checkboxOutline > .checkboxIcon-checked {
-    color: rgb(12, 232, 214);
-}
-
-.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
-    border:2px solid #ff77f1;
-}
-
-.emby-checkbox:focus+span+.checkboxOutline {
-    border-color: #ff77f1;
-}
-
-.itemProgressBarForeground {
-    background-color: rgb(12, 232, 214);
-}
-
-.itemProgressBarForeground-recording {
-    background-color: #CB272A
-}
-
-.countIndicator,
-.fullSyncIndicator,
-.playedIndicator {
-    background: rgb(12, 232, 214);
-}
-
-.fullSyncIndicator {
-    color: #fff
-}
-
-.mainDrawer {
-    color: #f8f8fe;
-    background: rgba(0, 0, 0, .5)
-}
-
-.drawer-open {
-    background-color: #030322
-}
-
-.navMenuOption:hover {
-    background: rgba(221, 221, 221, 0.068)
-}
-
-.navMenuOption-selected {
-    background: #6f0765 !important;
-    color: #f8f8fe
-}
-
-.emby-button.show-focus:focus {
-    background: #8ae9c1;
-    color: #f8f8fe
-}
-
-.emby-tab-button {
-    color: #999;
-}
-
-.emby-tab-button-active {
-    color: #f8f8fe;
-}
-
-.emby-tab-button.show-focus:focus {
-    color: #ff77f1;
-}
-
-.emby-tab-button:hover {
-    color: #ff77f1;
-}
-
-.channelPrograms,
-.guide-channelHeaderCell,
-.programCell {
-    border-color: rgba(255, 255, 255, .05)
-}
-
-.programCell-sports {
-    background: #3949AB !important
-}
-
-.programCell-movie {
-    background: #5E35B1 !important
-}
-
-.programCell-kids {
-    background: #039BE5 !important
-}
-
-.programCell-news {
-    background: #43A047 !important
-}
-
-.programCell-active {
-    background: rgba(0, 0, 0, .4) !important
-}
-
-.guide-channelHeaderCell:focus,
-.programCell:focus {
-    background-color: #48C3C8 !important;
-    color: #fff !important
-}
-
-.guide-programTextIcon {
-    color: #1e1e1e;
-    background: #555
-}
-
-.guide-headerTimeslots {
-    color: inherit
-}
-
-.guide-date-tab-button {
-    color: #555;
-    color: rgba(255, 255, 255, .3)
-}
-
-.guide-date-tab-button.emby-tab-button-active,
-.guide-date-tab-button:focus {
-    color: #ff77f1
-}
-
-.guide-date-tab-button.show-focus:focus {
-    background-color: #48C3C8;
-    color: #fff
-}
-
-.infoBanner {
-    color: #0e0f2d;
-    background: #dbe6ff;
-    padding: 1em;
-    -webkit-border-radius: .25em;
-    border-radius: .25em
-}
-
-.ratingbutton-icon-withrating {
-    color: #c33
-}
-
-.downloadbutton-icon-complete,
-.downloadbutton-icon-on {
-    color: #4285F4
-}
-
-.playstatebutton-icon-played {
-    color: #c33
-}
-
-.repeatButton-active {
-    color: #4285F4
-}
-
-.card:focus .cardBox.visualCardBox,
-.card:focus .cardBox:not(.visualCardBox) .cardScalable {
-    border-color: #ff77f1 !important
-}
-
-.layout-desktop,
-.scrollY {
-    scrollbar-width: thin;
-    scrollbar-color: #888 rgba(59, 59, 59, 0.5)
-}
-
-.layout-desktop ::-webkit-scrollbar {
-    width: .4em;
-    height: 1em
-}
-
-::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
-}
-
-::-webkit-scrollbar-track-piece {
-    background-color: rgba(59, 59, 59, 0.5)
-}
-
-::-webkit-scrollbar-thumb:horizontal,
-::-webkit-scrollbar-thumb:vertical {
-    -webkit-border-radius: 2px;
-    background: center no-repeat #888
-}
-
-.timeslotHeaders-desktop::-webkit-scrollbar {
-    height: .7em
-}
-
-.mediaInfoOfficialRating {
-    border: .09em solid #583fa0;
-    background-color: #dbe6ff;
-    color: #0e0f2d;
-}
-
-.metadataSidebarIcon {
-    color: #dbe6ff
-}
-
-.personCard .overflowPortraitCard {
-    width: 40vw;
-}
-
-.personCard .cardScalable {
-    border-radius: 50%;
-    border: 1px solid rgb(255, 255, 255);
-}
-
-.personCard .cardPadder-overflowPortrait,
-.personCard .cardPadder-portrait {
-    padding-bottom: 100%;
-    contain: strict;
-}
-
-.personCard .coveredImage  {
-    clip-path: circle(50% at 50% 50%);
-}
-
-.personCard .cardOverlayContainer  {
-    clip-path: circle(50% at 50% 50%);
-}
-
-.personCard .cardOverlayButton-br {
-    right: 20%;
-}

src/components/themes/wmc/theme.css

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

src/components/toast/package.json

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

src/components/upnextdialog/upnextdialog.css

@@ -11,7 +11,6 @@
     background-color: rgba(0, 0, 0, 0.7);
     color: #fff;
     user-select: none;
-    -webkit-touch-callout: none;
 }
 
 .upNextDialog-hidden {
@@ -67,8 +66,4 @@
     border: 0;
     user-drag: none;
     user-select: none;
-    -moz-user-select: none;
-    -webkit-user-drag: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
 }

src/components/usersettings/usersettingsbuilder.js

@@ -1,8 +1,7 @@
-define(['appSettings', 'events'], function (appsettings, events) {
+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');
@@ -12,6 +11,7 @@ define(['appSettings', 'events'], function (appsettings, events) {
         if (instance.saveTimeout) {
             clearTimeout(instance.saveTimeout);
         }
+
         instance.saveTimeout = setTimeout(onSaveTimeout.bind(instance), 50);
     }
 
@@ -19,7 +19,6 @@ define(['appSettings', 'events'], function (appsettings, events) {
     }
 
     UserSettings.prototype.setUserInfo = function (userId, apiClient) {
-
         if (this.saveTimeout) {
             clearTimeout(this.saveTimeout);
         }
@@ -49,14 +48,9 @@ define(['appSettings', 'events'], function (appsettings, events) {
     };
 
     UserSettings.prototype.set = function (name, value, enableOnServer) {
-
         var userId = this.currentUserId;
-        if (!userId) {
-            throw new Error('userId cannot be null');
-        }
-
         var currentValue = this.get(name, enableOnServer);
-        var result = appsettings.set(name, value, userId);
+        var result = appSettings.set(name, value, userId);
 
         if (enableOnServer !== false && this.displayPrefs) {
             this.displayPrefs.CustomPrefs[name] = value == null ? value : value.toString();
@@ -72,108 +66,70 @@ define(['appSettings', 'events'], function (appsettings, events) {
 
     UserSettings.prototype.get = function (name, enableOnServer) {
         var userId = this.currentUserId;
-        if (!userId) {
-            // TODO: I'd like to continue to throw this exception but it causes issues with offline use
-            // Revisit in the future and restore it
-            return null;
-            //throw new Error('userId cannot be null');
+        if (enableOnServer !== false && this.displayPrefs) {
+            return this.displayPrefs.CustomPrefs[name];
         }
 
-        if (enableOnServer !== false) {
-            if (this.displayPrefs) {
-                return this.displayPrefs.CustomPrefs[name];
-            }
-        }
-
-        return appsettings.get(name, userId);
+        return appSettings.get(name, userId);
     };
 
     UserSettings.prototype.serverConfig = function (config) {
-
         var apiClient = this.currentApiClient;
-
         if (config) {
-
             return apiClient.updateUserConfiguration(this.currentUserId, config);
-
-        } else {
-
-            return apiClient.getUser(this.currentUserId).then(function (user) {
-
-                return user.Configuration;
-            });
         }
+
+        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);
-
-        if (val) {
-            return val !== 'false';
-        }
-
-        return true;
+        return val !== 'false';
     };
 
     UserSettings.prototype.enableNextVideoInfoOverlay = function (val) {
-
         if (val != null) {
             return this.set('enableNextVideoInfoOverlay', val.toString());
         }
 
-        val = this.get('enableNextVideoInfoOverlay');
-
+        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);
-
-        if (val) {
-            return val !== 'false';
-        }
-
-        return UserSettings.defaults.enableThemeVideos;
+        return val !== 'false';
     };
 
     UserSettings.prototype.enableBackdrops = function (val) {
-
         if (val != null) {
             return this.set('enableBackdrops', val.toString(), false);
         }
 
         val = this.get('enableBackdrops', false);
-
-        if (val) {
-            return val !== 'false';
-        }
-
-        return UserSettings.defaults.enableBackdrops;
+        return val !== 'false';
     };
 
     UserSettings.prototype.language = function (val) {
-
         if (val != null) {
             return this.set('language', val.toString(), false);
         }
@@ -182,7 +138,6 @@ define(['appSettings', 'events'], function (appsettings, events) {
     };
 
     UserSettings.prototype.dateTimeLocale = function (val) {
-
         if (val != null) {
             return this.set('datetimelocale', val.toString(), false);
         }
@@ -191,7 +146,6 @@ define(['appSettings', 'events'], function (appsettings, events) {
     };
 
     UserSettings.prototype.skipBackLength = function (val) {
-
         if (val != null) {
             return this.set('skipBackLength', val.toString());
         }
@@ -200,7 +154,6 @@ define(['appSettings', 'events'], function (appsettings, events) {
     };
 
     UserSettings.prototype.skipForwardLength = function (val) {
-
         if (val != null) {
             return this.set('skipForwardLength', val.toString());
         }
@@ -209,7 +162,6 @@ define(['appSettings', 'events'], function (appsettings, events) {
     };
 
     UserSettings.prototype.dashboardTheme = function (val) {
-
         if (val != null) {
             return this.set('dashboardTheme', val);
         }
@@ -218,55 +170,41 @@ define(['appSettings', 'events'], function (appsettings, events) {
     };
 
     UserSettings.prototype.skin = function (val) {
-
         if (val != null) {
             return this.set('skin', val, false);
         }
 
-        return this.get('skin', false) || UserSettings.defaults.skin;
+        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.defaults.theme;
+        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.defaults.screensaver;
+        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.defaults.soundEffects;
-    };
-
-    // apps should set these values
-    UserSettings.defaults = {
-        theme: null,
-        enableThemeVideos: true
+        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);
         }
 
@@ -274,12 +212,11 @@ define(['appSettings', 'events'], function (appsettings, events) {
     };
 
     UserSettings.prototype.saveQuerySettings = function (key, query) {
-
         var values = {};
-
         if (query.SortBy) {
             values.SortBy = query.SortBy;
         }
+
         if (query.SortOrder) {
             values.SortOrder = query.SortOrder;
         }
@@ -288,26 +225,20 @@ define(['appSettings', 'events'], function (appsettings, events) {
     };
 
     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);
     };
 

src/components/viewContainer.js

@@ -41,84 +41,87 @@ define(["browser", "dom", "layoutManager", "css!components/viewManager/viewConta
             var isPluginpage = -1 !== options.url.toLowerCase().indexOf("/configurationpage");
             var newViewInfo = normalizeNewView(options, isPluginpage);
             var newView = newViewInfo.elem;
+            var modulesToLoad = [];
 
             if (isPluginpage) {
-                require(["legacyDashboard"]);
+                modulesToLoad.push("legacyDashboard");
             }
 
             if (newViewInfo.hasjQuerySelect) {
-                require(["legacySelectMenu"]);
+                modulesToLoad.push("legacySelectMenu");
             }
 
             if (newViewInfo.hasjQueryChecked) {
-                require(["fnchecked"]);
+                modulesToLoad.push("fnchecked");
             }
 
             return new Promise(function (resolve) {
-                var currentPage = allPages[pageIndex];
+                require(modulesToLoad, function () {
+                    var currentPage = allPages[pageIndex];
 
-                if (currentPage) {
-                    triggerDestroy(currentPage);
-                }
+                    if (currentPage) {
+                        triggerDestroy(currentPage);
+                    }
 
-                var view = newView;
+                    var view = newView;
 
-                if ("string" == typeof view) {
-                    view = document.createElement("div");
-                    view.innerHTML = newView;
-                }
+                    if ("string" == typeof view) {
+                        view = document.createElement("div");
+                        view.innerHTML = newView;
+                    }
 
-                view.classList.add("mainAnimatedPage");
+                    view.classList.add("mainAnimatedPage");
 
-                if (currentPage) {
-                    if (newViewInfo.hasScript && window.$) {
-                        view = $(view).appendTo(mainAnimatedPages)[0];
-                        mainAnimatedPages.removeChild(currentPage);
+                    if (currentPage) {
+                        if (newViewInfo.hasScript && window.$) {
+                            view = $(view).appendTo(mainAnimatedPages)[0];
+                            mainAnimatedPages.removeChild(currentPage);
+                        } else {
+                            mainAnimatedPages.replaceChild(view, currentPage);
+                        }
                     } else {
-                        mainAnimatedPages.replaceChild(view, currentPage);
-                    }
-                } else {
-                    if (newViewInfo.hasScript && window.$) {
-                        view = $(view).appendTo(mainAnimatedPages)[0];
-                    } else {
-                        mainAnimatedPages.appendChild(view);
-                    }
-                }
-
-                if (options.type) {
-                    view.setAttribute("data-type", options.type);
-                }
-
-                var properties = [];
-
-                if (options.fullscreen) {
-                    properties.push("fullscreen");
-                }
-
-                if (properties.length) {
-                    view.setAttribute("data-properties", properties.join(","));
-                }
-
-                allPages[pageIndex] = view;
-                setControllerClass(view, options).then(function () {
-                    if (onBeforeChange) {
-                        onBeforeChange(view, false, options);
+                        if (newViewInfo.hasScript && window.$) {
+                            view = $(view).appendTo(mainAnimatedPages)[0];
+                        } else {
+                            mainAnimatedPages.appendChild(view);
+                        }
                     }
 
-                    beforeAnimate(allPages, pageIndex, selected);
-                    selectedPageIndex = pageIndex;
-                    currentUrls[pageIndex] = options.url;
-
-                    if (!options.cancel && previousAnimatable) {
-                        afterAnimate(allPages, pageIndex);
+                    if (options.type) {
+                        view.setAttribute("data-type", options.type);
                     }
 
-                    if (window.$) {
-                        $.mobile = $.mobile || {};
-                        $.mobile.activePage = view;
+                    var properties = [];
+
+                    if (options.fullscreen) {
+                        properties.push("fullscreen");
                     }
 
-                    resolve(view);
+                    if (properties.length) {
+                        view.setAttribute("data-properties", properties.join(","));
+                    }
+
+                    allPages[pageIndex] = view;
+                    setControllerClass(view, options).then(function () {
+                        if (onBeforeChange) {
+                            onBeforeChange(view, false, options);
+                        }
+
+                        beforeAnimate(allPages, pageIndex, selected);
+                        selectedPageIndex = pageIndex;
+                        currentUrls[pageIndex] = options.url;
+
+                        if (!options.cancel && previousAnimatable) {
+                            afterAnimate(allPages, pageIndex);
+                        }
+
+                        if (window.$) {
+                            $.mobile = $.mobile || {};
+                            $.mobile.activePage = view;
+                        }
+
+                        resolve(view);
+                    });
                 });
             });
         }

src/components/viewManager/package.json

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