update sliders

dashboard-ui/bower_components/emby-webcomponents/.bower.json

@@ -15,12 +15,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.4.45",
+  "version": "1.4.46",
-  "_release": "1.4.45",
+  "_release": "1.4.46",
   "_resolution": {
     "type": "version",
-    "tag": "1.4.45",
+    "tag": "1.4.46",
-    "commit": "4cefbfaedea068552e25c904340e675e66de4964"
+    "commit": "3dcd07a1386cef6bbb6267851b90f950ca18f5ad"
   },
   "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
   "_target": "^1.2.0",

dashboard-ui/bower_components/emby-webcomponents/emby-input/emby-input.js

@@ -9,10 +9,12 @@
 
         var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
 
-        if (descriptor.configurable) {
+        // 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

dashboard-ui/bower_components/emby-webcomponents/emby-slider/emby-slider.css

@@ -0,0 +1,323 @@
+_:-ms-input-placeholder, :root .mdl-slider.mdl-slider {
+    -ms-appearance: none;
+    height: 32px;
+    margin: 0;
+}
+
+.mdl-slider {
+    width: 100%;
+}
+
+.mdl-slider {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    height: 2px;
+    background: transparent;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    outline: 0;
+    padding: 0;
+    color: #52B54B;
+    -webkit-align-self: center;
+    -ms-flex-item-align: center;
+    align-self: center;
+    z-index: 1;
+    cursor: pointer;
+    /**************************** Tracks ****************************/
+    /**************************** Thumbs ****************************/
+    /**************************** 0-value ****************************/
+    /**************************** Disabled ****************************/
+}
+
+.layout-tv .mdl-slider {
+    height: .56vh;
+}
+
+.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: #666;
+    border: none;
+}
+
+.mdl-slider::-moz-range-progress {
+    background: #52B54B;
+}
+
+.mdl-slider::-ms-track {
+    background: none;
+    color: transparent;
+    height: 2px;
+    width: 100%;
+    border: none;
+}
+
+.layout-tv .mdl-slider::-ms-track {
+    height: .56vh;
+}
+
+.mdl-slider::-ms-fill-lower {
+    padding: 0;
+    background: linear-gradient(to right, transparent, transparent 16px, #52B54B 16px, #52B54B 0);
+}
+
+.mdl-slider::-ms-fill-upper {
+    padding: 0;
+    background: linear-gradient(to left, transparent, transparent 16px, #666 16px, #666 0);
+}
+
+.mdl-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 16px;
+    height: 16px;
+    box-sizing: border-box;
+    border-radius: 50%;
+    background: #52B54B;
+    border: none;
+    transition: 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), -webkit-transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: transform 0.18s 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);
+    transition: transform 0.18s 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), -webkit-transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.layout-tv .mdl-slider::-webkit-slider-thumb {
+    width: 2vh;
+    height: 2vh;
+}
+
+.mdl-slider::-moz-range-thumb {
+    -moz-appearance: none;
+    width: 16px;
+    height: 16px;
+    box-sizing: border-box;
+    border-radius: 50%;
+    background-image: none;
+    background: #52B54B;
+    border: none;
+}
+
+.layout-tv .mdl-slider::-moz-range-thumb {
+    width: 2vh;
+    height: 2vh;
+}
+
+.mdl-slider:focus:not(:active)::-webkit-slider-thumb {
+    box-shadow: 0 0 0 10px rgba(82, 181, 75, 0.26);
+}
+
+.mdl-slider:focus:not(:active)::-moz-range-thumb {
+    box-shadow: 0 0 0 10px rgba(82, 181, 75, 0.26);
+}
+
+.mdl-slider:active::-webkit-slider-thumb {
+    background-image: none;
+    background: #52B54B;
+    -webkit-transform: scale(1.5);
+    transform: scale(1.5);
+}
+
+.mdl-slider:active::-moz-range-thumb {
+    background-image: none;
+    background: #52B54B;
+    transform: scale(1.5);
+}
+
+.mdl-slider::-ms-thumb {
+    width: 16px;
+    height: 16px;
+    border: none;
+    border-radius: 50%;
+    background: #52B54B;
+}
+
+.mdl-slider[disabled]::-ms-thumb {
+    background: gray;
+}
+
+.layout-tv .mdl-slider::-ms-thumb {
+    width: 2vh;
+    height: 2vh;
+}
+
+.layout-tv .mdl-slider::-webkit-slider-thumb {
+    display: none;
+}
+
+.layout-tv .mdl-slider:hover::-webkit-slider-thumb {
+    display: block;
+}
+
+.mdl-slider.is-lowest-value::-webkit-slider-thumb {
+    /*border: 2px solid #52B54B;
+        background: transparent;*/
+}
+
+.mdl-slider.is-lowest-value::-moz-range-thumb {
+    /*border: 2px solid #52B54B;
+        background: transparent;*/
+}
+
+.mdl-slider.is-lowest-value + .mdl-slider__background-flex > .mdl-slider__background-upper {
+    left: 6px;
+}
+
+.mdl-slider.is-lowest-value:focus:not(:active)::-webkit-slider-thumb {
+    /*box-shadow: 0 0 0 10px rgba(0,0,0, 0.12);
+        background: rgba(0,0,0, 0.12);*/
+}
+
+.mdl-slider.is-lowest-value:focus:not(:active)::-moz-range-thumb {
+    /*box-shadow: 0 0 0 10px rgba(0,0,0, 0.12);
+        background: rgba(0,0,0, 0.12);*/
+}
+
+.mdl-slider.is-lowest-value:active::-webkit-slider-thumb {
+    border: 1.6px solid #52B54B;
+    -webkit-transform: scale(1.5);
+    transform: scale(1.5);
+}
+
+.mdl-slider.is-lowest-value:active + .mdl-slider__background-flex > .mdl-slider__background-upper {
+    left: 9px;
+}
+
+.mdl-slider.is-lowest-value:active::-moz-range-thumb {
+    border: 1.5px solid #52B54B;
+    transform: scale(1.5);
+}
+
+.mdl-slider.is-lowest-value::-ms-fill-lower {
+    background: transparent;
+}
+
+.mdl-slider.is-lowest-value::-ms-fill-upper {
+    margin-left: 6px;
+}
+
+.mdl-slider.is-lowest-value:active::-ms-fill-upper {
+    margin-left: 9px;
+}
+
+.mdl-slider:disabled:focus::-webkit-slider-thumb, .mdl-slider:disabled:active::-webkit-slider-thumb, .mdl-slider:disabled::-webkit-slider-thumb {
+    -webkit-transform: scale(0.667);
+    transform: scale(0.667);
+    background: rgba(0,0,0, 0.26);
+}
+
+.mdl-slider:disabled:focus::-moz-range-thumb, .mdl-slider:disabled:active::-moz-range-thumb, .mdl-slider:disabled::-moz-range-thumb {
+    transform: scale(0.667);
+    background: rgba(0,0,0, 0.26);
+}
+
+.mdl-slider:disabled + .mdl-slider__background-flex > .mdl-slider__background-lower {
+    background-color: #666;
+    left: -6px;
+}
+
+.mdl-slider:disabled + .mdl-slider__background-flex > .mdl-slider__background-upper {
+    left: 6px;
+}
+
+.mdl-slider.is-lowest-value:disabled:focus::-webkit-slider-thumb, .mdl-slider.is-lowest-value:disabled:active::-webkit-slider-thumb, .mdl-slider.is-lowest-value:disabled::-webkit-slider-thumb {
+    border: 3px solid rgba(0,0,0, 0.26);
+    background: transparent;
+    -webkit-transform: scale(0.667);
+    transform: scale(0.667);
+}
+
+.mdl-slider.is-lowest-value:disabled:focus::-moz-range-thumb, .mdl-slider.is-lowest-value:disabled:active::-moz-range-thumb, .mdl-slider.is-lowest-value:disabled::-moz-range-thumb {
+    border: 3px solid rgba(0,0,0, 0.26);
+    background: transparent;
+    transform: scale(0.667);
+}
+
+.mdl-slider.is-lowest-value:disabled:active + .mdl-slider__background-flex > .mdl-slider__background-upper {
+    left: 6px;
+}
+
+.mdl-slider:disabled::-ms-fill-lower {
+    margin-right: 6px;
+    background: linear-gradient(to right, transparent, transparent 25px, rgba(30,30,30, 0.7) 25px, rgba(30,30,30, 0.7) 0);
+}
+
+.mdl-slider:disabled::-ms-fill-upper {
+    margin-left: 6px;
+}
+
+.mdl-slider.is-lowest-value:disabled:active::-ms-fill-upper {
+    margin-left: 6px;
+}
+
+.mdl-slider__ie-container {
+    height: 18px;
+    overflow: visible;
+    border: none;
+    margin: none;
+    padding: none;
+}
+
+.mdl-slider__container {
+    height: 18px;
+    position: relative;
+    background: none;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+}
+
+.mdl-slider__background-flex {
+    background: transparent;
+    position: absolute;
+    height: 2px;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    overflow: hidden;
+    border: 0;
+    padding: 0;
+    -webkit-transform: translate(0, -1px);
+    transform: translate(0, -1px);
+}
+
+.layout-tv .mdl-slider__background-flex {
+    height: .56vh;
+}
+
+.mdl-slider__background-lower {
+    background: #52B54B;
+    -webkit-flex: 0;
+    -ms-flex: 0;
+    flex: 0;
+    position: relative;
+    border: 0;
+    padding: 0;
+}
+
+.mdl-slider__background-upper {
+    background: #666;
+    -webkit-flex: 0;
+    -ms-flex: 0;
+    flex: 0;
+    position: relative;
+    border: 0;
+    padding: 0;
+    transition: left 0.18s cubic-bezier(0.4, 0, 0.2, 1);
+}

dashboard-ui/bower_components/emby-webcomponents/emby-slider/emby-slider.js

@@ -0,0 +1,99 @@
+define(['browser', 'css!./emby-slider', 'registerElement', 'emby-input'], function (browser) {
+
+    var EmbySliderPrototype = Object.create(HTMLInputElement.prototype);
+
+    var supportsNativeProgressStyle = browser.firefox || browser.edge || browser.msie;
+    var supportsValueSetOverride = false;
+
+    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(range, backgroundLower, backgroundUpper) {
+
+        //if (fraction === 0) {
+        //    range.classList.add('is-lowest-value');
+        //} else {
+        //    range.classList.remove('is-lowest-value');
+        //}
+
+        if (backgroundLower) {
+            var fraction = (range.value - range.min) / (range.max - range.min);
+
+            backgroundLower.style.flex = fraction;
+            backgroundLower.style.webkitFlex = fraction;
+            backgroundUpper.style.flex = 1 - fraction;
+            backgroundUpper.style.webkitFlex = 1 - fraction;
+        }
+    }
+
+    EmbySliderPrototype.attachedCallback = function () {
+
+        if (this.getAttribute('data-embycheckbox') == 'true') {
+            return;
+        }
+
+        this.setAttribute('data-embycheckbox', 'true');
+
+        this.classList.add('mdl-slider');
+        this.classList.add('mdl-js-slider');
+
+        var containerElement = this.parentNode;
+        containerElement.classList.add('mdl-slider__container');
+
+        if (!supportsNativeProgressStyle) {
+            containerElement.insertAdjacentHTML('beforeend', '<div class="mdl-slider__background-flex"><div class="mdl-slider__background-lower"></div><div class="mdl-slider__background-upper"></div></div>');
+        }
+
+        var backgroundLower = containerElement.querySelector('.mdl-slider__background-lower');
+        var backgroundUpper = containerElement.querySelector('.mdl-slider__background-upper');
+
+        this.addEventListener('input', function () {
+            this.dragging = true;
+        });
+        this.addEventListener('change', function () {
+            this.dragging = false;
+            updateValues(this, backgroundLower, backgroundUpper);
+        });
+
+        if (!supportsNativeProgressStyle) {
+
+            if (supportsValueSetOverride) {
+                this.addEventListener('valueset', function () {
+                    updateValues(this, backgroundLower, backgroundUpper);
+                });
+            } else {
+                startInterval(this, backgroundLower, backgroundUpper);
+            }
+        }
+    };
+
+    function startInterval(range, backgroundLower, backgroundUpper) {
+        var interval = range.interval;
+        if (interval) {
+            clearInterval(interval);
+        }
+        range.interval = setInterval(function () {
+            updateValues(range, backgroundLower, backgroundUpper);
+        }, 100);
+    }
+
+    EmbySliderPrototype.detachedCallback = function () {
+
+        var interval = this.interval;
+        if (interval) {
+            clearInterval(interval);
+        }
+        this.interval = null;
+    };
+
+    document.registerElement('emby-slider', {
+        prototype: EmbySliderPrototype,
+        extends: 'input'
+    });
+});

dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingcreator.template.html

@@ -15,7 +15,7 @@
         <div id="eligibleForSeriesFields" class="hide">
             <br />
             <label class="checkboxContainer">
-                <input type="checkbox" is="emby-checkbox" id="chkRecordSeries"/>
+                <input type="checkbox" is="emby-checkbox" id="chkRecordSeries" />
                 <span>${RecordSeries}</span>
             </label>
 
@@ -34,9 +34,9 @@
                         <span>${RecordOnAllChannels}</span>
                     </label>
                 </div>
-            </div>
                 <br />
             </div>
+        </div>
         <div class="convertRecordingsContainer hide checkboxContainer">
             <label>
                 <input type="checkbox" is="emby-checkbox" id="chkConvertRecordings" />
@@ -48,7 +48,6 @@
             </div>
         </div>
         <div class="advanced hide">
-            <br />
             <br />
             <emby-collapsible title="${Advanced}">
                 <div class="seriesDays hide">

dashboard-ui/bower_components/fingerprintjs2/.bower.json

@@ -23,12 +23,12 @@
     "spec"
   ],
   "homepage": "https://github.com/Valve/fingerprintjs2",
-  "version": "1.3.0",
+  "version": "1.4.0",
-  "_release": "1.3.0",
+  "_release": "1.4.0",
   "_resolution": {
     "type": "version",
-    "tag": "1.3.0",
+    "tag": "1.4.0",
-    "commit": "727e536d5ffce50b47fd233ea32f022a7bbcdb0f"
+    "commit": "75cbd474158f8ecce43e00f198c76e486b896937"
   },
   "_source": "https://github.com/Valve/fingerprintjs2.git",
   "_target": "^1.1.3",

dashboard-ui/bower_components/fingerprintjs2/fingerprint2.js

@@ -1,5 +1,5 @@
 /*
-* Fingerprintjs2 1.3.0 - Modern & flexible browser fingerprint library v2
+* Fingerprintjs2 1.4.0 - Modern & flexible browser fingerprint library v2
 * https://github.com/Valve/fingerprintjs2
 * Copyright (c) 2015 Valentin Vasilyev (valentin.vasilyev@outlook.com)
 * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
@@ -84,6 +84,7 @@
       keys = this.userAgentKey(keys);
       keys = this.languageKey(keys);
       keys = this.colorDepthKey(keys);
+      keys = this.pixelRatioKey(keys);
       keys = this.screenResolutionKey(keys);
       keys = this.availableScreenResolutionKey(keys);
       keys = this.timezoneOffsetKey(keys);
@@ -141,6 +142,15 @@
       }
       return keys;
     },
+    pixelRatioKey: function(keys) {
+      if(!this.options.excludePixelRatio) {
+        keys.push({key: "pixel_ratio", value: this.getPixelRatio()});
+      }
+      return keys;
+    },
+    getPixelRatio: function() {
+      return window.devicePixelRatio || "";
+    },
     screenResolutionKey: function(keys) {
       if(!this.options.excludeScreenResolution) {
         return this.getScreenResolution(keys);
@@ -679,7 +689,7 @@
         ctx.font = "11pt no-real-font-123";
       }
       ctx.fillText("Cwm fjordbank glyphs vext quiz, \ud83d\ude03", 2, 15);
-      ctx.fillStyle = "rgba(102, 204, 0, 0.7)";
+      ctx.fillStyle = "rgba(102, 204, 0, 0.2)";
       ctx.font = "18pt Arial";
       ctx.fillText("Cwm fjordbank glyphs vext quiz, \ud83d\ude03", 4, 45);
 
@@ -835,13 +845,16 @@
       var ads = document.createElement("div");
       ads.innerHTML = " ";
       ads.className = "adsbox";
+      var result = false;
       try {
         // body may not exist, that's why we need try/catch
         document.body.appendChild(ads);
-        return document.getElementsByClassName("adsbox")[0].offsetHeight === 0;
+        result = document.getElementsByClassName("adsbox")[0].offsetHeight === 0;
+        document.body.removeChild(ads);
       } catch (e) {
-        return false;
+        result = false;
       }
+      return result;
     },
     getHasLiedLanguages: function(){
       //We check if navigator.language is equal to the first language of navigator.languages
@@ -1270,6 +1283,6 @@
       return ("00000000" + (h1[0] >>> 0).toString(16)).slice(-8) + ("00000000" + (h1[1] >>> 0).toString(16)).slice(-8) + ("00000000" + (h2[0] >>> 0).toString(16)).slice(-8) + ("00000000" + (h2[1] >>> 0).toString(16)).slice(-8);
     }
   };
-  Fingerprint2.VERSION = "1.3.0";
+  Fingerprint2.VERSION = "1.4.0";
   return Fingerprint2;
 });

dashboard-ui/bower_components/fingerprintjs2/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fingerprintjs2",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Modern & flexible browser fingerprinting library",
   "main": "dist/fingerprint2.min.js",
   "devDependencies": {

dashboard-ui/bower_components/fingerprintjs2/specs/specs.js

@@ -71,6 +71,15 @@ describe("Fingerprint2", function () {
         });
       });
 
+      it("does not use pixelRatio when excluded", function (done) {
+        var fp2 = new Fingerprint2({excludePixelRatio: true});
+        spyOn(fp2, "getPixelRatio");
+        fp2.get(function(result) {
+          expect(fp2.getPixelRatio).not.toHaveBeenCalled();
+          done();
+        });
+      });
+
       it("does not use screen resolution when excluded", function (done) {
         var fp2 = new Fingerprint2({excludeScreenResolution: true});
         spyOn(fp2, "getScreenResolution");

dashboard-ui/components/directorybrowser/directorybrowser.js

@@ -1,4 +1,4 @@
-define(['dialogHelper', 'jQuery', 'paper-item', 'paper-input', 'emby-button', 'paper-item-body', 'paper-icon-button-light'], function (dialogHelper, $) {
+define(['dialogHelper', 'jQuery', 'paper-item', 'emby-input', 'emby-button', 'paper-item-body', 'paper-icon-button-light'], function (dialogHelper, $) {
 
     var systemInfo;
     function getSystemInfo() {
@@ -134,9 +134,11 @@
         html += '</p>';
 
         html += '<form style="max-width:100%;">';
-        html += '<div>';
-        html += '<paper-input id="txtDirectoryPickerPath" type="text" required="required" style="width:82%;display:inline-block;" label="' + Globalize.translate('LabelCurrentPath') + '"></paper-input>';
 
+        html += '<div class="inputContainer" style="display: flex; align-items: center;">';
+        html += '<div style="flex-grow:1;">';
+        html += '<input is="emby-input" id="txtDirectoryPickerPath" type="text" required="required" label="' + Globalize.translate('LabelCurrentPath') + '"/>';
+        html += '</div>';
         html += '<button type="button" is="paper-icon-button-light" class="btnRefreshDirectories" title="' + Globalize.translate('ButtonRefresh') + '"><iron-icon icon="refresh"></iron-icon></button>';
         html += '</div>';
 

dashboard-ui/css/mediaplayer-video.css

@@ -108,32 +108,31 @@
     font-size: 14px;
 }
 
-.videoPositionSlider {
+.videoPositionSliderContainer {
     width: 300px;
     vertical-align: middle;
-    margin-left: -1em;
 }
 
 @media all and (max-width: 440px) {
-    .videoPositionSlider {
+    .videoPositionSliderContainer {
         width: 240px;
     }
 }
 
 @media all and (max-width: 400px) {
-    .videoPositionSlider {
+    .videoPositionSliderContainer {
         width: 200px;
     }
 }
 
 @media all and (max-width: 350px) {
-    .videoPositionSlider {
+    .videoPositionSliderContainer {
         width: 180px;
     }
 }
 
 @media all and (max-width: 320px) {
-    .videoPositionSlider {
+    .videoPositionSliderContainer {
         width: 120px;
     }
 }

dashboard-ui/css/nowplaying.css

@@ -21,7 +21,7 @@
 .nowPlayingPageTimeContainer {
     min-width: 200px;
     max-width: 280px;
-    margin: 0 auto 1em;
+    margin: 1.5em auto 1em;
 }
 
 .nowPlayingNavButtonContainer {
@@ -94,7 +94,6 @@
 .nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
     width: 60px;
     height: 60px;
-    background: #222;
 }
 
 

dashboard-ui/css/nowplayingbar.css

@@ -60,7 +60,6 @@
     z-index: 1097;
     color: #fff;
     background-color: rgba(26,26,26,.94);
-    border-top: 1px solid #444;
     text-align: center;
     display: flex;
     flex-direction: row;
@@ -179,9 +178,9 @@
 }
 
 .nowPlayingBarPositionContainer {
-    position: absolute;
+    position: absolute !important;
     left: 80px;
-    top: 0;
+    top: -8px;
     right: 0;
     z-index: 1;
 }
@@ -190,21 +189,6 @@
     display: none;
 }
 
-.nowPlayingBarPositionSlider {
-    position: relative;
-    top: -15px;
-    width: 100%;
-}
-
-    .nowPlayingBarPositionSlider #sliderContainer {
-        width: 100%;
-        margin-left: 0 !important;
-    }
-
-    .nowPlayingBarPositionSlider #progressContainer {
-        background-color: transparent !important;
-    }
-
 .nowPlayingBarRight {
     position: relative;
     margin: 0 1em 0 auto;
@@ -221,8 +205,7 @@
     padding-left: 50px;
 }
 
-.nowPlayingBarVolumeSlider {
+.nowPlayingBarVolumeSliderContainer {
-    margin-left: -1em;
     margin-right: 2em;
 }
 
@@ -242,7 +225,7 @@
 
 @media all and (max-width: 1100px) {
 
-    .nowPlayingBarVolumeSlider, .nowPlayingBar .muteButton, .nowPlayingBar .unmuteButton {
+    .nowPlayingBarVolumeSliderContainer, .nowPlayingBar .muteButton, .nowPlayingBar .unmuteButton {
         display: none !important;
     }
 }
@@ -280,10 +263,6 @@
         left: 70px;
     }
 
-    .nowPlayingBarPositionSlider paper-progress {
-        height: 3px !important;
-    }
-
     .toggleRepeatButton {
         display: none;
     }

dashboard-ui/librarydisplay.html

@@ -8,13 +8,22 @@
                     <div class="fieldDescription paperCheckboxFieldDescription">${OptionDisplayFolderViewHelp}</div>
                 </div>
                 <br />
+                <div>
+                    <paper-checkbox class="chkDisplaySpecialsWithinSeasons">${LabelDisplaySpecialsWithinSeasons}</paper-checkbox>
+                </div>
+                <br /><br />
                 <div>
                     <paper-checkbox class="chkGroupMoviesIntoCollections">${LabelGroupMoviesIntoCollections}</paper-checkbox>
                     <div class="fieldDescription paperCheckboxFieldDescription">${LabelGroupMoviesIntoCollectionsHelp}</div>
                 </div>
                 <br />
+
                 <div>
-                    <paper-checkbox class="chkDisplaySpecialsWithinSeasons">${LabelDisplaySpecialsWithinSeasons}</paper-checkbox>
+                    <paper-checkbox class="chkDisplayCollectionView">${LabelDisplayCollectionsView}</paper-checkbox>
+                    <div class="fieldDescription paperCheckboxFieldDescription">
+                        <div>${LabelDisplayCollectionsViewHelp}</div>
+                        <div><a href="https://github.com/MediaBrowser/Wiki/wiki/Collections" target="_blank">${ButtonLearnMore}</a></div>
+                    </div>
                 </div>
                 <br />
                 <br />

dashboard-ui/mypreferenceshome.html

@@ -83,12 +83,6 @@
                     <paper-checkbox class="chkDisplayChannelsInline">${OptionDisplayChannelsInline}</paper-checkbox>
                     <div class="fieldDescription paperCheckboxFieldDescription">${OptionDisplayChannelsInlineHelp}</div>
                 </div>
-                <br />
-
-                <div>
-                    <paper-checkbox class="chkDisplayCollectionView">${LabelDisplayCollectionsView}</paper-checkbox>
-                    <div class="fieldDescription paperCheckboxFieldDescription">${LabelDisplayCollectionsViewHelp}</div>
-                </div>
             </div>
 
             <div class="detailSection">

dashboard-ui/nowplaying.html

@@ -21,14 +21,12 @@
                 </div>
                 <div class="nowPlayingInfoMetadata">
                     <div class="nowPlayingPageImage" style="margin: 1em auto;"></div>
-                    <div class="nowPlayingPageTimeContainer">
+                    <div class="nowPlayingPageTimeContainer" style="display:flex; align-items: center;">
-                        <div>
+                        <div class="positionTime"></div>
-                            <paper-slider pin step="1" min="0" max="100" value="0" class="nowPlayingPositionSlider" style="width: 100%;"></paper-slider>
+                        <div class="sliderContainer nowPlayingPositionSliderContainer" style="flex-grow:1;margin: 0 1em;">
-                        </div>
+                            <input type="range" is="emby-slider" pin step="1" min="0" max="100" value="0" class="nowPlayingPositionSlider" />
-                        <div style="text-align:left;">
-                            <div class="positionTime" style="float:left;"></div>
-                            <div class="runtime" style="float: right;"></div>
                         </div>
+                        <div class="runtime"></div>
                     </div>
                 </div>
                 <div class="nowPlayingInfoButtons">

dashboard-ui/scripts/externalplayer.js

@@ -1,4 +1,4 @@
-define(['appSettings', 'datetime', 'jQuery', 'paper-slider', 'emby-button'], function (appSettings, datetime, $) {
+define(['appSettings', 'datetime', 'jQuery', 'emby-slider', 'emby-button'], function (appSettings, datetime, $) {
 
     function getDeviceProfile(serverAddress, deviceId, item, startPositionTicks, maxBitrate, mediaSourceId, audioStreamIndex, subtitleStreamIndex) {
 
@@ -260,7 +260,9 @@
                 html += '<div class="fldResumePoint hide">';
                 html += '<p style="margin-top: 0;">' + Globalize.translate('LabelResumePoint') + '</p>';
 
-                html += '<paper-slider pin step=".001" min="0" max="100" value="0" class="playstateSlider" style="display:block;margin-left:-12px;width:98%;"></paper-slider>';
+                html += '<div class="sliderContainer">';
+                html += '<input type="range" is="emby-slider" pin step=".001" min="0" max="100" value="0" class="playstateSlider"/>';
+                html += '</div>';
                 html += '<div class="sliderValue" style="text-align:center;margin:2px 0 4px;">0:00:00</div>';
                 html += '</div>';
 

dashboard-ui/scripts/librarybrowser.js

@@ -187,10 +187,6 @@
 
                 function allowSwipeOn(elem) {
 
-                    if (elem.tagName == 'PAPER-SLIDER') {
-                        return false;
-                    }
-
                     if (elem.classList) {
                         return !elem.classList.contains('hiddenScrollX') && !elem.classList.contains('smoothScrollX') && !elem.classList.contains('libraryViewNav');
                     }
@@ -1253,7 +1249,7 @@
 
             getListViewHtml: function (options) {
 
-                require(['paper-icon-item', 'paper-item-body']);
+                require(['paper-icon-item', 'paper-item-body', 'material-icons']);
 
                 var outerHtml = "";
 
@@ -1445,7 +1441,7 @@
                     html += '</a>';
                     html += '</paper-item-body>';
 
-                    html += '<button is="paper-icon-button-light" class="listviewMenuButton"><iron-icon icon="' + AppInfo.moreIcon + '"></iron-icon></button>';
+                    html += '<button is="paper-icon-button-light" class="listviewMenuButton autoSize"><i class="md-icon">' + AppInfo.moreIcon.replace('-', '_') + '</i></button>';
                     html += '<span class="listViewUserDataButtons">';
                     html += LibraryBrowser.getUserDataIconsHtml(item);
                     html += '</span>';

dashboard-ui/scripts/librarydisplay.js

@@ -35,6 +35,7 @@
                 config.EnableFolderView = form.querySelector('.chkFolderView').checked;
                 config.EnableGroupingIntoCollections = form.querySelector('.chkGroupMoviesIntoCollections').checked;
                 config.DisplaySpecialsWithinSeasons = form.querySelector('.chkDisplaySpecialsWithinSeasons').checked;
+                config.DisplayCollectionsView = form.querySelector('.chkDisplayCollectionView').checked;
 
                 ApiClient.updateServerConfiguration(config).then(Dashboard.processServerConfigurationUpdateResult);
             });
@@ -48,6 +49,7 @@
                 view.querySelector('.chkFolderView').checked = config.EnableFolderView;
                 view.querySelector('.chkGroupMoviesIntoCollections').checked = config.EnableGroupingIntoCollections;
                 view.querySelector('.chkDisplaySpecialsWithinSeasons').checked = config.DisplaySpecialsWithinSeasons;
+                view.querySelector('.chkDisplayCollectionView').checked = config.DisplayCollectionsView;
             });
         }
 

dashboard-ui/scripts/mediaplayer-video.js

@@ -757,14 +757,18 @@
             html += '<button is="paper-icon-button-light" id="video-pauseButton" class="mediaButton pauseButton" onclick="MediaPlayer.pause();"><iron-icon icon="pause"></iron-icon></button>';
             html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton videoTrackControl hide" onclick="MediaPlayer.nextTrack();"><iron-icon icon="skip-next"></iron-icon></button>';
 
-            html += '<paper-slider pin step=".1" min="0" max="100" value="0" class="videoPositionSlider" style="display:inline-block;margin-right:2em;"></paper-slider>';
+            html += '<div class="sliderContainer videoPositionSliderContainer" style="display:inline-flex;margin-right:2em;">';
+            html += '<input type="range" is="emby-slider" pin step=".1" min="0" max="100" value="0" class="videoPositionSlider" />';
+            html += '</div>'; // guide
 
             html += '<div class="currentTime">--:--</div>';
 
             html += '<button is="paper-icon-button-light" class="muteButton mediaButton" onclick="MediaPlayer.mute();"><iron-icon icon="volume-up"></iron-icon></button>';
             html += '<button is="paper-icon-button-light" class="unmuteButton mediaButton" onclick="MediaPlayer.unMute();"><iron-icon icon="volume-off"></iron-icon></button>';
 
-            html += '<paper-slider pin step="1" min="0" max="100" value="0" class="videoVolumeSlider" style="width:100px;vertical-align:middle;margin-left:-1em;margin-right:2em;display:inline-block;"></paper-slider>';
+            html += '<div class="sliderContainer" style="width:100px;vertical-align:middle;;margin-right:2em;display:inline-flex;">';
+            html += '<input type="range" is="emby-slider" pin step="1" min="0" max="100" value="0" class="videoVolumeSlider"/>';
+            html += '</div>'; // guide
 
             html += '<button is="paper-icon-button-light" class="mediaButton castButton" onclick="MediaController.showPlayerSelection(this, false);" style="height:32px;width:32px;"><iron-icon icon="cast"></iron-icon></button>';
             html += '<button is="paper-icon-button-light" class="mediaButton fullscreenButton" onclick="MediaPlayer.toggleFullscreen();" id="video-fullscreenButton"><iron-icon icon="fullscreen"></iron-icon></button>';
@@ -991,7 +995,7 @@
         self.playVideo = function (item, mediaSource, startPosition, callback) {
 
             // TODO: remove dependency on nowplayingbar
-            requirejs(['videorenderer', 'css!css/nowplayingbar.css', 'css!css/mediaplayer-video.css', 'paper-slider'], function () {
+            requirejs(['videorenderer', 'css!css/nowplayingbar.css', 'css!css/mediaplayer-video.css', 'emby-slider'], function () {
 
                 initVideoElements();
 

dashboard-ui/scripts/mypreferenceshome.js

@@ -96,7 +96,6 @@
 
     function loadForm(page, user, displayPreferences) {
 
-        page.querySelector('.chkDisplayCollectionView').checked = user.Configuration.DisplayCollectionsView || false;
         page.querySelector('.chkHidePlayedFromLatest').checked = user.Configuration.HidePlayedInLatest || false;
         page.querySelector('.chkDisplayChannelsInline').checked = !(user.Configuration.EnableChannelView || false);
 
@@ -130,7 +129,6 @@
     }
     function saveUser(page, user, displayPreferences) {
 
-        user.Configuration.DisplayCollectionsView = page.querySelector('.chkDisplayCollectionView').checked;
         user.Configuration.HidePlayedInLatest = page.querySelector('.chkHidePlayedFromLatest').checked;
 
         user.Configuration.EnableChannelView = !page.querySelector('.chkDisplayChannelsInline').checked;

dashboard-ui/scripts/mysyncsettings.js

@@ -73,11 +73,14 @@
 
         $('form', page).off('submit', onSubmit).on('submit', onSubmit);
 
-        $('.btnSelectSyncPath', page).on('click', function () {
+        $('#btnSelectSyncPath', page).on('click', function () {
 
             require(['nativedirectorychooser'], function () {
                 NativeDirectoryChooser.chooseDirectory().then(function (path) {
+
+                    if (path) {
                         $('#txtSyncPath', page).val(path);
+                    }
                 });
             });
         });

dashboard-ui/scripts/nowplayingbar.js

@@ -23,8 +23,8 @@
 
         html += '<div class="nowPlayingBar hide">';
 
-        html += '<div class="nowPlayingBarPositionContainer">';
+        html += '<div class="nowPlayingBarPositionContainer sliderContainer">';
-        html += '<paper-slider pin step=".1" min="0" max="100" value="0" class="nowPlayingBarPositionSlider"></paper-slider>';
+        html += '<input type="range" is="emby-slider" pin step=".1" min="0" max="100" value="0" class="nowPlayingBarPositionSlider"/>';
         html += '</div>';
 
         html += '<div class="nowPlayingBarInfoContainer">';
@@ -51,7 +51,9 @@
         html += '<button is="paper-icon-button-light" class="muteButton mediaButton"><iron-icon icon="volume-up"></iron-icon></button>';
         html += '<button is="paper-icon-button-light" class="unmuteButton mediaButton"><iron-icon icon="volume-off"></iron-icon></button>';
 
-        html += '<paper-slider pin step="1" min="0" max="100" value="0" class="nowPlayingBarVolumeSlider" style="width:100px;vertical-align:middle;display:inline-block;"></paper-slider>';
+        html += '<div class="sliderContainer nowPlayingBarVolumeSliderContainer" style="width:100px;vertical-align:middle;display:inline-flex;">';
+        html += '<input type="range" is="emby-slider" pin step="1" min="0" max="100" value="0" class="nowPlayingBarVolumeSlider"/>';
+        html += '</div>';
 
         html += '<button is="paper-icon-button-light" class="toggleRepeatButton mediaButton"><iron-icon icon="repeat"></iron-icon></button>';
 
@@ -289,7 +291,7 @@
                 return;
             }
 
-            require(['css!css/nowplayingbar.css', 'paper-slider'], function () {
+            require(['css!css/nowplayingbar.css', 'emby-slider'], function () {
 
                 nowPlayingBarElement = document.querySelector('.nowPlayingBar');
 

dashboard-ui/scripts/site.js

@@ -1800,6 +1800,7 @@ var AppInfo = {};
 
         define("emby-input", [embyWebComponentsBowerPath + "/emby-input/emby-input"], returnFirstDependency);
         define("emby-select", [embyWebComponentsBowerPath + "/emby-select/emby-select"], returnFirstDependency);
+        define("emby-slider", [embyWebComponentsBowerPath + "/emby-slider/emby-slider"], returnFirstDependency);
         define("emby-checkbox", [embyWebComponentsBowerPath + "/emby-checkbox/emby-checkbox"], returnFirstDependency);
         define("collectionEditor", [embyWebComponentsBowerPath + "/collectioneditor/collectioneditor"], returnFirstDependency);
         define("playlistEditor", [embyWebComponentsBowerPath + "/playlisteditor/playlisteditor"], returnFirstDependency);
@@ -2852,7 +2853,7 @@ var AppInfo = {};
 
         defineRoute({
             path: '/nowplaying.html',
-            dependencies: ['paper-icon-button-light', 'paper-slider', 'emby-button', 'emby-input'],
+            dependencies: ['paper-icon-button-light', 'emby-slider', 'emby-button', 'emby-input'],
             controller: 'scripts/nowplayingpage',
             autoFocus: false,
             transition: 'fade'

dashboard-ui/strings/en-US.json

@@ -988,7 +988,7 @@
   "OptionDisplayChannelsInline": "Display channels inline within my views",
   "OptionDisplayChannelsInlineHelp": "If enabled, channels will be displayed directly alongside other views. If disabled, they'll be displayed within a separate Channels view.",
   "LabelDisplayCollectionsView": "Display a collections view to show movie collections",
-  "LabelDisplayCollectionsViewHelp": "This will create a separate view to display collections that you've created or have access to. To create a collection, right-click or tap-hold any movie and select 'Add to Collection'. ",
+  "LabelDisplayCollectionsViewHelp": "This will create a separate view to display movie collections. To create a collection, right-click or tap-hold any movie and select 'Add to Collection'. ",
   "LabelKodiMetadataEnableExtraThumbs": "Copy extrafanart into extrathumbs",
   "LabelKodiMetadataEnableExtraThumbsHelp": "When downloading images they can be saved into both extrafanart and extrathumbs for maximum Kodi skin compatibility.",
   "TabServices": "Services",