update sliders

2025-03-30 19:56:21 +00:00 · 2016-06-13 15:02:48 -04:00 · 2016-06-13 15:02:48 -04:00 · acefeed732
commit acefeed732
parent 7f6b2415fb
26 changed files with 524 additions and 91 deletions
--- a/dashboard-ui/bower_components/emby-webcomponents/.bower.json
+++ b/dashboard-ui/bower_components/emby-webcomponents/.bower.json
@ -15,12 +15,12 @@
  },
  "devDependencies": {},
  "ignore": [],
-  "version": "1.4.45",
-  "_release": "1.4.45",
+  "version": "1.4.46",
+  "_release": "1.4.46",
  "_resolution": {
    "type": "version",
-    "tag": "1.4.45",
-    "commit": "4cefbfaedea068552e25c904340e675e66de4964"
+    "tag": "1.4.46",
+    "commit": "3dcd07a1386cef6bbb6267851b90f950ca18f5ad"
  },
  "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
  "_target": "^1.2.0",
--- a/dashboard-ui/bower_components/emby-webcomponents/emby-input/emby-input.js
+++ b/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
--- a/dashboard-ui/bower_components/emby-webcomponents/emby-slider/emby-slider.css
+++ b/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);
+}
--- a/dashboard-ui/bower_components/emby-webcomponents/emby-slider/emby-slider.js
+++ b/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'
+    });
+});
--- a/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingcreator.template.html
+++ b/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingcreator.template.html
@ -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">
--- a/dashboard-ui/bower_components/fingerprintjs2/.bower.json
+++ b/dashboard-ui/bower_components/fingerprintjs2/.bower.json
@ -23,12 +23,12 @@
    "spec"
  ],
  "homepage": "https://github.com/Valve/fingerprintjs2",
-  "version": "1.3.0",
-  "_release": "1.3.0",
+  "version": "1.4.0",
+  "_release": "1.4.0",
  "_resolution": {
    "type": "version",
-    "tag": "1.3.0",
-    "commit": "727e536d5ffce50b47fd233ea32f022a7bbcdb0f"
+    "tag": "1.4.0",
+    "commit": "75cbd474158f8ecce43e00f198c76e486b896937"
  },
  "_source": "https://github.com/Valve/fingerprintjs2.git",
  "_target": "^1.1.3",
--- a/dashboard-ui/bower_components/fingerprintjs2/dist/fingerprint2.min.js
+++ b/dashboard-ui/bower_components/fingerprintjs2/dist/fingerprint2.min.js
--- a/dashboard-ui/bower_components/fingerprintjs2/fingerprint2.js
+++ b/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 = "&nbsp;";
      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;
 });
--- a/dashboard-ui/bower_components/fingerprintjs2/package.json
+++ b/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": {
--- a/dashboard-ui/bower_components/fingerprintjs2/specs/specs.js
+++ b/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");
--- a/dashboard-ui/components/directorybrowser/directorybrowser.js
+++ b/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>';

--- a/dashboard-ui/css/mediaplayer-video.css
+++ b/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;
    }
 }
--- a/dashboard-ui/css/nowplaying.css
+++ b/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;
 }


--- a/dashboard-ui/css/nowplayingbar.css
+++ b/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 {
-    margin-left: -1em;
+.nowPlayingBarVolumeSliderContainer {
    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;
    }
--- a/dashboard-ui/librarydisplay.html
+++ b/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 />
--- a/dashboard-ui/mypreferenceshome.html
+++ b/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">
--- a/dashboard-ui/nowplaying.html
+++ b/dashboard-ui/nowplaying.html
@ -21,14 +21,12 @@
                </div>
                <div class="nowPlayingInfoMetadata">
                    <div class="nowPlayingPageImage" style="margin: 1em auto;"></div>
-                    <div class="nowPlayingPageTimeContainer">
-                        <div>
-                            <paper-slider pin step="1" min="0" max="100" value="0" class="nowPlayingPositionSlider" style="width: 100%;"></paper-slider>
-                        </div>
-                        <div style="text-align:left;">
-                            <div class="positionTime" style="float:left;"></div>
-                            <div class="runtime" style="float: right;"></div>
+                    <div class="nowPlayingPageTimeContainer" style="display:flex; align-items: center;">
+                        <div class="positionTime"></div>
+                        <div class="sliderContainer nowPlayingPositionSliderContainer" style="flex-grow:1;margin: 0 1em;">
+                            <input type="range" is="emby-slider" pin step="1" min="0" max="100" value="0" class="nowPlayingPositionSlider" />
                        </div>
+                        <div class="runtime"></div>
                    </div>
                </div>
                <div class="nowPlayingInfoButtons">
--- a/dashboard-ui/scripts/externalplayer.js
+++ b/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>';

--- a/dashboard-ui/scripts/librarybrowser.js
+++ b/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>';
--- a/dashboard-ui/scripts/librarydisplay.js
+++ b/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;
            });
        }

--- a/dashboard-ui/scripts/mediaplayer-video.js
+++ b/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();

--- a/dashboard-ui/scripts/mypreferenceshome.js
+++ b/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;
--- a/dashboard-ui/scripts/mysyncsettings.js
+++ b/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);
+                    }
                });
            });
        });
--- a/dashboard-ui/scripts/nowplayingbar.js
+++ b/dashboard-ui/scripts/nowplayingbar.js
@ -23,8 +23,8 @@

        html += '<div class="nowPlayingBar hide">';

-        html += '<div class="nowPlayingBarPositionContainer">';
-        html += '<paper-slider pin step=".1" min="0" max="100" value="0" class="nowPlayingBarPositionSlider"></paper-slider>';
+        html += '<div class="nowPlayingBarPositionContainer sliderContainer">';
+        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');

--- a/dashboard-ui/scripts/site.js
+++ b/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'
--- a/dashboard-ui/strings/en-US.json
+++ b/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",