From 1b74dbdfbf64934b3987ad7911c689c92c31ab4d Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Sat, 27 Jun 2015 15:53:36 -0400
Subject: [PATCH] replace sliders

---
 .../paper-slider/paper-slider.html            | 783 +++++++++---------
 dashboard-ui/css/mediaplayer-video.css        |  52 +-
 dashboard-ui/css/mediaplayer.css              | 145 +---
 dashboard-ui/css/nowplaying.css               |   5 +-
 dashboard-ui/css/nowplayingbar.css            | 230 +++++
 dashboard-ui/css/site.css                     |   2 +-
 dashboard-ui/scripts/actionsheet.js           |  16 +-
 dashboard-ui/scripts/mediaplayer-video.js     | 616 +++++++-------
 dashboard-ui/scripts/mediaplayer.js           |   7 +-
 dashboard-ui/scripts/nowplayingbar.js         | 112 ++-
 dashboard-ui/scripts/site.js                  |  76 --
 dashboard-ui/thirdparty/emby-icons.html       |   1 +
 dashboard-ui/vulcanize-out.html               | 753 ++++++++---------
 13 files changed, 1359 insertions(+), 1439 deletions(-)
 create mode 100644 dashboard-ui/css/nowplayingbar.css

diff --git a/dashboard-ui/bower_components/paper-slider/paper-slider.html b/dashboard-ui/bower_components/paper-slider/paper-slider.html
index beaed90c5d..9d255627ba 100644
--- a/dashboard-ui/bower_components/paper-slider/paper-slider.html
+++ b/dashboard-ui/bower_components/paper-slider/paper-slider.html
@@ -58,428 +58,433 @@ Custom property | Description | Default
 
 <dom-module id="paper-slider">
 
-  <link rel="import" type="css" href="paper-slider.css">
+    <link rel="import" type="css" href="paper-slider.css">
 
-  <template>
-    <div id="sliderContainer"
-      class$="[[_getClassNames(disabled, pin, snaps, immediateValue, min, expand, dragging, transiting, editable)]]">
+    <template>
+        <div id="sliderContainer"
+             class$="[[_getClassNames(disabled, pin, snaps, immediateValue, min, expand, dragging, transiting, editable)]]">
 
-      <div class="bar-container">
-        <paper-progress
-          id="sliderBar"
-          aria-hidden="true"
-          min="[[min]]"
-          max="[[max]]"
-          step="[[step]]"
-          value="[[immediateValue]]"
-          secondary-progress="[[secondaryProgress]]"
-          on-down="_bardown"
-          on-up="_resetKnob"
-          on-track="_onTrack">
-        </paper-progress>
-      </div>
+            <div class="bar-container">
+                <paper-progress id="sliderBar"
+                                aria-hidden="true"
+                                min="[[min]]"
+                                max="[[max]]"
+                                step="[[step]]"
+                                value="[[immediateValue]]"
+                                secondary-progress="[[secondaryProgress]]"
+                                on-down="_bardown"
+                                on-up="_resetKnob"
+                                on-track="_onTrack">
+                </paper-progress>
+            </div>
 
-      <template is="dom-if" if="[[snaps]]">
-        <div class="slider-markers horizontal layout">
-          <template is="dom-repeat" items="[[markers]]">
-            <div class="slider-marker flex"></div>
-          </template>
+            <template is="dom-if" if="[[snaps]]">
+                <div class="slider-markers horizontal layout">
+                    <template is="dom-repeat" items="[[markers]]">
+                        <div class="slider-marker flex"></div>
+                    </template>
+                </div>
+            </template>
+
+            <div id="sliderKnob"
+                 class="center-justified center horizontal layout"
+                 on-down="_knobdown"
+                 on-up="_resetKnob"
+                 on-track="_onTrack"
+                 on-transitionend="_knobTransitionEnd">
+                <paper-ripple id="ink" class="circle" center hidden$="[[!receivedFocusFromKeyboard]]"></paper-ripple>
+                <div id="sliderKnobInner" value$="[[pinValue]]"></div>
+            </div>
         </div>
-      </template>
 
-      <div id="sliderKnob"
-        class="center-justified center horizontal layout"
-        on-down="_knobdown"
-        on-up="_resetKnob"
-        on-track="_onTrack"
-        on-transitionend="_knobTransitionEnd">
-          <paper-ripple id="ink" class="circle" center hidden$="[[!receivedFocusFromKeyboard]]"></paper-ripple>
-          <div id="sliderKnobInner" value$="[[immediateValue]]"></div>
-      </div>
-    </div>
-
-    <template is="dom-if" if="[[editable]]">
-      <paper-input
-        id="input"
-        class="slider-input"
-        disabled$="[[disabled]]"
-        on-change="_inputChange">
-      </paper-input>
+        <template is="dom-if" if="[[editable]]">
+            <paper-input id="input"
+                         class="slider-input"
+                         disabled$="[[disabled]]"
+                         on-change="_inputChange">
+            </paper-input>
+        </template>
     </template>
-  </template>
 
 </dom-module>
 
 <script>
 
-  Polymer({
-    is: 'paper-slider',
+    Polymer({
+        is: 'paper-slider',
 
-    behaviors: [
-      Polymer.IronA11yKeysBehavior,
-      Polymer.PaperInkyFocusBehavior,
-      Polymer.IronFormElementBehavior,
-      Polymer.IronRangeBehavior
-    ],
+        behaviors: [
+          Polymer.IronA11yKeysBehavior,
+          Polymer.PaperInkyFocusBehavior,
+          Polymer.IronFormElementBehavior,
+          Polymer.IronRangeBehavior
+        ],
 
-    properties: {
+        properties: {
 
-      /**
-       * If true, the slider thumb snaps to tick marks evenly spaced based
-       * on the `step` property value.
-       */
-      snaps: {
-        type: Boolean,
-        value: false,
-        notify: true
-      },
+            /**
+             * If true, the slider thumb snaps to tick marks evenly spaced based
+             * on the `step` property value.
+             */
+            snaps: {
+                type: Boolean,
+                value: false,
+                notify: true
+            },
 
-      /**
-       * If true, a pin with numeric value label is shown when the slider thumb
-       * is pressed. Use for settings for which users need to know the exact
-       * value of the setting.
-       */
-      pin: {
-        type: Boolean,
-        value: false,
-        notify: true
-      },
+            /**
+             * If true, a pin with numeric value label is shown when the slider thumb
+             * is pressed. Use for settings for which users need to know the exact
+             * value of the setting.
+             */
+            pin: {
+                type: Boolean,
+                value: false,
+                notify: true
+            },
 
-      /**
-       * The number that represents the current secondary progress.
-       */
-      secondaryProgress: {
-        type: Number,
-        value: 0,
-        notify: true,
-        observer: '_secondaryProgressChanged'
-      },
+            /**
+             * The number that represents the current secondary progress.
+             */
+            secondaryProgress: {
+                type: Number,
+                value: 0,
+                notify: true,
+                observer: '_secondaryProgressChanged'
+            },
 
-      /**
-       * If true, an input is shown and user can use it to set the slider value.
-       */
-      editable: {
-        type: Boolean,
-        value: false
-      },
+            /**
+             * If true, an input is shown and user can use it to set the slider value.
+             */
+            editable: {
+                type: Boolean,
+                value: false
+            },
 
-      /**
-       * The immediate value of the slider.  This value is updated while the user
-       * is dragging the slider.
-       */
-      immediateValue: {
-        type: Number,
-        value: 0,
-        readOnly: true
-      },
+            /**
+             * The immediate value of the slider.  This value is updated while the user
+             * is dragging the slider.
+             */
+            immediateValue: {
+                type: Number,
+                value: 0,
+                readOnly: true
+            },
 
-      /**
-       * The maximum number of markers
-       */
-      maxMarkers: {
-        type: Number,
-        value: 0,
-        notify: true,
-        observer: '_maxMarkersChanged'
-      },
+            /**
+             * The maximum number of markers
+             */
+            maxMarkers: {
+                type: Number,
+                value: 0,
+                notify: true,
+                observer: '_maxMarkersChanged'
+            },
 
-      /**
-       * If true, the knob is expanded
-       */
-      expand: {
-        type: Boolean,
-        value: false,
-        readOnly: true
-      },
+            /**
+             * If true, the knob is expanded
+             */
+            expand: {
+                type: Boolean,
+                value: false,
+                readOnly: true
+            },
 
-      /**
-       * True when the user is dragging the slider.
-       */
-      dragging: {
-        type: Boolean,
-        value: false,
-        readOnly: true
-      },
+            /**
+             * True when the user is dragging the slider.
+             */
+            dragging: {
+                type: Boolean,
+                value: false,
+                readOnly: true
+            },
 
-      transiting: {
-        type: Boolean,
-        value: false,
-        readOnly: true
-      },
+            transiting: {
+                type: Boolean,
+                value: false,
+                readOnly: true
+            },
 
-      markers: {
-        type: Array,
-        readOnly: true,
-        value: []
-      },
-    },
+            markers: {
+                type: Array,
+                readOnly: true,
+                value: []
+            },
+        },
 
-    observers: [
-      '_updateKnob(value, min, max, snaps, step)',
-      '_minChanged(min)',
-      '_maxChanged(max)',
-      '_valueChanged(value)',
-      '_immediateValueChanged(immediateValue)'
-    ],
+        observers: [
+          '_updateKnob(value, min, max, snaps, step)',
+          '_minChanged(min)',
+          '_maxChanged(max)',
+          '_valueChanged(value)',
+          '_immediateValueChanged(immediateValue)'
+        ],
 
-    hostAttributes: {
-      role: 'slider',
-      tabindex: 0
-    },
+        hostAttributes: {
+            role: 'slider',
+            tabindex: 0
+        },
 
-    keyBindings: {
-      'left down pagedown home': '_decrementKey',
-      'right up pageup end': '_incrementKey'
-    },
+        keyBindings: {
+            'left down pagedown home': '_decrementKey',
+            'right up pageup end': '_incrementKey'
+        },
 
-    ready: function() {
-      // issue polymer/polymer#1305
-      this.async(function() {
-        this._updateKnob(this.value);
-        this._updateInputValue();
-      }, 1);
-    },
+        ready: function () {
+            // issue polymer/polymer#1305
+            this.async(function () {
+                this._updateKnob(this.value);
+                this._updateInputValue();
+            }, 1);
+        },
+
+        /**
+         * Increases value by `step` but not above `max`.
+         * @method increment
+         */
+        increment: function () {
+            this.value = this._clampValue(this.value + this.step);
+        },
+
+        /**
+         * Decreases value by `step` but not below `min`.
+         * @method decrement
+         */
+        decrement: function () {
+            this.value = this._clampValue(this.value - this.step);
+        },
+
+        _updateKnob: function (value) {
+            this._positionKnob(this._calcRatio(value));
+        },
+
+        _minChanged: function () {
+            this.setAttribute('aria-valuemin', this.min);
+        },
+
+        _maxChanged: function () {
+            this.setAttribute('aria-valuemax', this.max);
+        },
+
+        _valueChanged: function () {
+            this.setAttribute('aria-valuenow', this.value);
+            this.fire('value-change');
+        },
+
+        _immediateValueChanged: function () {
+            if (this.dragging) {
+                this.fire('immediate-value-change');
+            } else {
+                this.value = this.immediateValue;
+            }
+            this._updateInputValue();
+        },
+
+        _secondaryProgressChanged: function () {
+            this.secondaryProgress = this._clampValue(this.secondaryProgress);
+        },
+
+        _updateInputValue: function () {
+            if (this.editable) {
+                this.$$('#input').value = this.immediateValue.toString();
+            }
+        },
+
+        _expandKnob: function () {
+            this._setExpand(true);
+        },
+
+        _resetKnob: function () {
+            this.cancelDebouncer('expandKnob');
+            this._setExpand(false);
+        },
+
+        _positionKnob: function (ratio) {
+            this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio)));
+            this._setPinValue(this.immediateValue);
+
+            this._setRatio(this._calcRatio(this.immediateValue));
+
+            this.$.sliderKnob.style.left = (this.ratio * 100) + '%';
+        },
+
+        _inputChange: function () {
+            this.value = this.$$('#input').value;
+            this.fire('change');
+        },
+
+        _calcKnobPosition: function (ratio) {
+            return (this.max - this.min) * ratio + this.min;
+        },
+
+        _onTrack: function (event) {
+            switch (event.detail.state) {
+                case 'start':
+                    this._trackStart(event);
+                    break;
+                case 'track':
+                    this._trackX(event);
+                    break;
+                case 'end':
+                    this._trackEnd();
+                    break;
+            }
+        },
+
+        _trackStart: function (event) {
+            this._w = this.$.sliderBar.offsetWidth;
+            this._x = this.ratio * this._w;
+            this._startx = this._x || 0;
+            this._minx = -this._startx;
+            this._maxx = this._w - this._startx;
+            this.$.sliderKnob.classList.add('dragging');
+
+            this._setDragging(true);
+        },
+
+        _trackX: function (e) {
+            if (!this.dragging) {
+                this._trackStart(e);
+            }
+
+            var dx = Math.min(this._maxx, Math.max(this._minx, e.detail.dx));
+            this._x = this._startx + dx;
+
+            var immediateValue = this._calcStep(this._calcKnobPosition(this._x / this._w));
+            this._setImmediateValue(immediateValue);
+            this._setPinValue(immediateValue);
+
+            // update knob's position
+            var translateX = ((this._calcRatio(immediateValue) * this._w) - this._startx);
+            this.translate3d(translateX + 'px', 0, 0, this.$.sliderKnob);
+        },
+
+        _trackEnd: function () {
+            var s = this.$.sliderKnob.style;
+
+            this.$.sliderKnob.classList.remove('dragging');
+            this._setDragging(false);
+            this._resetKnob();
+            this.value = this.immediateValue;
+
+            s.transform = s.webkitTransform = '';
+
+            this.fire('change');
+        },
+
+        _knobdown: function (event) {
+            this._expandKnob();
+
+            // cancel selection
+            event.detail.sourceEvent.preventDefault();
+
+            // set the focus manually because we will called prevent default
+            this.focus();
+        },
+
+        _bardown: function (event) {
+            this._w = this.$.sliderBar.offsetWidth;
+            var rect = this.$.sliderBar.getBoundingClientRect();
+            var ratio = (event.detail.x - rect.left) / this._w;
+            var prevRatio = this.ratio;
+
+            this._setTransiting(true);
+
+            this._positionKnob(ratio);
+
+            this.debounce('expandKnob', this._expandKnob, 60);
+
+            // if the ratio doesn't change, sliderKnob's animation won't start
+            // and `_knobTransitionEnd` won't be called
+            // Therefore, we need to manually update the `transiting` state
+
+            if (prevRatio === this.ratio) {
+                this._setTransiting(false);
+            }
+
+            this.async(function () {
+                this.fire('change');
+            });
+
+            // cancel selection
+            event.detail.sourceEvent.preventDefault();
+        },
+
+        _knobTransitionEnd: function (event) {
+            if (event.target === this.$.sliderKnob) {
+                this._setTransiting(false);
+            }
+        },
+
+        _maxMarkersChanged: function (maxMarkers) {
+            var l = (this.max - this.min) / this.step;
+            if (!this.snaps && l > maxMarkers) {
+                this._setMarkers([]);
+            } else {
+                this._setMarkers(new Array(l));
+            }
+        },
+
+        _getClassNames: function () {
+            var classes = {};
+
+            classes.disabled = this.disabled;
+            classes.pin = this.pin;
+            classes.snaps = this.snaps;
+            classes.ring = this.immediateValue <= this.min;
+            classes.expand = this.expand;
+            classes.dragging = this.dragging;
+            classes.transiting = this.transiting;
+            classes.editable = this.editable;
+
+            return Object.keys(classes).filter(
+              function (className) {
+                  return classes[className];
+              }).join(' ');
+        },
+
+        _incrementKey: function (event) {
+            if (event.detail.key === 'end') {
+                this.value = this.max;
+            } else {
+                this.increment();
+            }
+            this.fire('change');
+        },
+
+        _decrementKey: function (event) {
+            if (event.detail.key === 'home') {
+                this.value = this.min;
+            } else {
+                this.decrement();
+            }
+            this.fire('change');
+        },
+
+        _setPinValue: function (value) {
+            this.pinValue = value;
+        }
+    });
 
     /**
-     * Increases value by `step` but not above `max`.
-     * @method increment
+     * Fired when the slider's value changes.
+     *
+     * @event value-change
      */
-    increment: function() {
-      this.value = this._clampValue(this.value + this.step);
-    },
 
     /**
-     * Decreases value by `step` but not below `min`.
-     * @method decrement
+     * Fired when the slider's immediateValue changes.
+     *
+     * @event immediate-value-change
      */
-    decrement: function() {
-      this.value = this._clampValue(this.value - this.step);
-    },
 
-    _updateKnob: function(value) {
-      this._positionKnob(this._calcRatio(value));
-    },
-
-    _minChanged: function() {
-      this.setAttribute('aria-valuemin', this.min);
-    },
-
-    _maxChanged: function() {
-      this.setAttribute('aria-valuemax', this.max);
-    },
-
-    _valueChanged: function() {
-      this.setAttribute('aria-valuenow', this.value);
-      this.fire('value-change');
-    },
-
-    _immediateValueChanged: function() {
-      if (this.dragging) {
-        this.fire('immediate-value-change');
-      } else {
-        this.value = this.immediateValue;
-      }
-      this._updateInputValue();
-    },
-
-    _secondaryProgressChanged: function() {
-      this.secondaryProgress = this._clampValue(this.secondaryProgress);
-    },
-
-    _updateInputValue: function() {
-      if (this.editable) {
-        this.$$('#input').value = this.immediateValue.toString();
-      }
-    },
-
-    _expandKnob: function() {
-      this._setExpand(true);
-    },
-
-    _resetKnob: function() {
-      this.cancelDebouncer('expandKnob');
-      this._setExpand(false);
-    },
-
-    _positionKnob: function(ratio) {
-      this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio)));
-      this._setRatio(this._calcRatio(this.immediateValue));
-
-      this.$.sliderKnob.style.left = (this.ratio * 100) + '%';
-    },
-
-    _inputChange: function() {
-      this.value = this.$$('#input').value;
-      this.fire('change');
-    },
-
-    _calcKnobPosition: function(ratio) {
-      return (this.max - this.min) * ratio + this.min;
-    },
-
-    _onTrack: function(event) {
-      switch (event.detail.state) {
-        case 'start':
-          this._trackStart(event);
-          break;
-        case 'track':
-          this._trackX(event);
-          break;
-        case 'end':
-          this._trackEnd();
-          break;
-      }
-    },
-
-    _trackStart: function(event) {
-      this._w = this.$.sliderBar.offsetWidth;
-      this._x = this.ratio * this._w;
-      this._startx = this._x || 0;
-      this._minx = - this._startx;
-      this._maxx = this._w - this._startx;
-      this.$.sliderKnob.classList.add('dragging');
-
-      this._setDragging(true);
-    },
-
-    _trackX: function(e) {
-      if (!this.dragging) {
-        this._trackStart(e);
-      }
-
-      var dx = Math.min(this._maxx, Math.max(this._minx, e.detail.dx));
-      this._x = this._startx + dx;
-
-      var immediateValue = this._calcStep(this._calcKnobPosition(this._x / this._w));
-      this._setImmediateValue(immediateValue);
-
-      // update knob's position
-      var translateX = ((this._calcRatio(immediateValue) * this._w) - this._startx);
-      this.translate3d(translateX + 'px', 0, 0, this.$.sliderKnob);
-    },
-
-    _trackEnd: function() {
-      var s = this.$.sliderKnob.style;
-
-      this.$.sliderKnob.classList.remove('dragging');
-      this._setDragging(false);
-      this._resetKnob();
-      this.value = this.immediateValue;
-
-      s.transform = s.webkitTransform = '';
-
-      this.fire('change');
-    },
-
-    _knobdown: function(event) {
-      this._expandKnob();
-
-      // cancel selection
-      event.detail.sourceEvent.preventDefault();
-
-      // set the focus manually because we will called prevent default
-      this.focus();
-    },
-
-    _bardown: function(event) {
-      this._w = this.$.sliderBar.offsetWidth;
-      var rect = this.$.sliderBar.getBoundingClientRect();
-      var ratio = (event.detail.x - rect.left) / this._w;
-      var prevRatio = this.ratio;
-
-      this._setTransiting(true);
-
-      this._positionKnob(ratio);
-
-      this.debounce('expandKnob', this._expandKnob, 60);
-
-      // if the ratio doesn't change, sliderKnob's animation won't start
-      // and `_knobTransitionEnd` won't be called
-      // Therefore, we need to manually update the `transiting` state
-
-      if (prevRatio === this.ratio) {
-        this._setTransiting(false);
-      }
-
-      this.async(function() {
-        this.fire('change');
-      });
-
-      // cancel selection
-      event.detail.sourceEvent.preventDefault();
-    },
-
-    _knobTransitionEnd: function(event) {
-      if (event.target === this.$.sliderKnob) {
-        this._setTransiting(false);
-      }
-    },
-
-    _maxMarkersChanged: function(maxMarkers) {
-      var l = (this.max - this.min) / this.step;
-      if (!this.snaps && l > maxMarkers) {
-        this._setMarkers([]);
-      } else {
-        this._setMarkers(new Array(l));
-      }
-    },
-
-    _getClassNames: function() {
-      var classes = {};
-
-      classes.disabled = this.disabled;
-      classes.pin = this.pin;
-      classes.snaps = this.snaps;
-      classes.ring = this.immediateValue <= this.min;
-      classes.expand = this.expand;
-      classes.dragging = this.dragging;
-      classes.transiting = this.transiting;
-      classes.editable = this.editable;
-
-      return Object.keys(classes).filter(
-        function(className) {
-          return classes[className];
-        }).join(' ');
-    },
-
-    _incrementKey: function(event) {
-      if (event.detail.key === 'end') {
-        this.value = this.max;
-      } else {
-        this.increment();
-      }
-      this.fire('change');
-    },
-
-    _decrementKey: function(event) {
-      if (event.detail.key === 'home') {
-        this.value = this.min;
-      } else {
-        this.decrement();
-      }
-      this.fire('change');
-    }
-  });
-
-  /**
-   * Fired when the slider's value changes.
-   *
-   * @event value-change
-   */
-
-  /**
-   * Fired when the slider's immediateValue changes.
-   *
-   * @event immediate-value-change
-   */
-
-  /**
-   * Fired when the slider's value changes due to user interaction.
-   *
-   * Changes to the slider's value due to changes in an underlying
-   * bound variable will not trigger this event.
-   *
-   * @event change
-   */
+    /**
+     * Fired when the slider's value changes due to user interaction.
+     *
+     * Changes to the slider's value due to changes in an underlying
+     * bound variable will not trigger this event.
+     *
+     * @event change
+     */
 
 </script>
diff --git a/dashboard-ui/css/mediaplayer-video.css b/dashboard-ui/css/mediaplayer-video.css
index d643225598..acecfcf6f8 100644
--- a/dashboard-ui/css/mediaplayer-video.css
+++ b/dashboard-ui/css/mediaplayer-video.css
@@ -59,19 +59,13 @@
 .videoAdvancedControls {
     text-align: right;
     vertical-align: top;
+    padding-top: .5em;
 }
 
-#slider-tooltip {
-    z-index: 99999;
-    position: absolute;
-    top: -30px;
-    left: 0;
-    background-color: #eee;
-    border: 1px solid #333;
-    color: #333;
-    border-radius: 3px;
-    padding: 5px;
-}
+    .videoAdvancedControls iron-icon {
+        width: 32px;
+        height: 32px;
+    }
 
 .nowPlayingInfo {
     text-align: center;
@@ -158,7 +152,7 @@
 .videoTopControlsLogo {
     float: left;
     /* Matches .mediaButton */
-    padding-top: 16px;
+    padding: 10px 0;
 }
 
     .videoTopControlsLogo img {
@@ -184,29 +178,18 @@
     max-height: 100%;
 }
 
-/* Hack for safari because it doesn't allow clickable content over the video surface. */
-/*.itemVideo { (;top: 9%!important;height: 91% !important;); }
+    /* Hack for safari because it doesn't allow clickable content over the video surface. */
+    /*.itemVideo { (;top: 9%!important;height: 91% !important;); }
 .itemVideo { [;top: 9%!important;height: 91% !important;]; }*/
 
-#mediaPlayer .ui-slider-track, .nowPlayingBar .ui-slider-track, .nowPlayingPage .ui-slider-track {
-    border-color: #2ad !important;
-    height: 2px !important;
-}
-
-#videoPlayer .inactive {
-    display: none !important;
-}
+    #videoPlayer .inactive {
+        display: none !important;
+    }
 
 .idlePlayer video {
     cursor: none;
 }
 
-#mediaPlayer .sliderContainer {
-    position: relative;
-    top: 5px;
-    vertical-align: middle;
-}
-
 /****************************************/
 
 @media all and (max-width: 1200px), all and (max-height: 720px) {
@@ -216,13 +199,6 @@
     }
 }
 
-@media all and (max-width: 800px), all and (max-height: 460px) {
-
-    #mediaPlayer .sliderContainer {
-        margin-top: 8px;
-    }
-}
-
 @media all and (max-width: 1400px), all and (max-height: 800px) {
 
     #mediaPlayer .nowPlayingInfo {
@@ -240,12 +216,6 @@
     }
 }
 
-@media all and (min-width: 800px) {
-    .videoControls .positionSliderContainer {
-        width: 300px;
-    }
-}
-
 @media all and (min-width: 1300px) {
     .nowPlayingInfo {
         padding-bottom: 0;
diff --git a/dashboard-ui/css/mediaplayer.css b/dashboard-ui/css/mediaplayer.css
index bc869ccd56..448b451dea 100644
--- a/dashboard-ui/css/mediaplayer.css
+++ b/dashboard-ui/css/mediaplayer.css
@@ -1,47 +1,4 @@
-/* Now playing bar */
-.nowPlayingBar {
-    padding: 8px 0;
-    border-top: 1px solid #444;
-    text-align: center;
-}
-
-.mediaButton {
-    vertical-align: top;
-}
-
-.mediaButton, .nowPlayingBarUserDataButtons .btnUserItemRating {
-    vertical-align: middle;
-    color: #e8e8e8;
-    margin: 0;
-    text-align: center;
-}
-
-    .mediaButton:not(paper-icon-button) {
-        padding: 16px 12px;
-    }
-
-paper-icon-button.mediaButton {
-    padding: 4px;
-}
-
-.mediaButton iron-icon {
-    height: 48px;
-    width: 48px;
-}
-
-.mediaButton.remoteControlButton iron-icon {
-    height: 30px;
-}
-
-.videoTopControls .mediaButton {
-    font-size: 27px;
-}
-
-.videoControls .mediaButton {
-    padding: 0 10px;
-}
-
-#mediaElement {
+#mediaElement {
     display: inline-block;
     position: relative;
 }
@@ -79,21 +36,6 @@ paper-icon-button.mediaButton {
     }
 }
 
-.nowPlayingDoubleText {
-    top: -3px;
-}
-
-.nowPlayingImage {
-    display: inline-block;
-    vertical-align: middle;
-}
-
-    .nowPlayingImage img {
-        height: 60px;
-        margin-right: .5em;
-        vertical-align: bottom;
-    }
-
 .mediaButton img {
     height: 24px;
 }
@@ -106,83 +48,10 @@ paper-icon-button.mediaButton {
     font-weight: normal;
 }
 
-.mediaSlider {
-    position: relative;
-    top: -10px;
-    width: 50px;
-    cursor: pointer;
-}
-
-.sliderContainer {
-    display: inline-block;
-}
-
-.positionSliderContainer {
-    width: 130px;
-}
-
-.nowPlayingBar .sliderContainer {
-    margin-top: 10px;
-    vertical-align: middle;
-}
-
-.volumeSliderContainer {
-    width: 90px;
-}
-
-.sliderContainer .ui-slider {
-    margin: 0 !important;
-}
-
-.sliderContainer .ui-slider-track {
-    margin: 0 15px !important;
-}
-
-.volumeSliderContainer .ui-slider-track {
-    margin-left: 5px !important;
-}
-
 .volumeButton {
     margin-right: .5em !important;
 }
 
-@media all and (max-width: 800px) {
-
-    .nowPlayingBar .mediaButton {
-        margin-top: 0;
-        margin-bottom: 0;
-    }
-
-        .nowPlayingBar .mediaButton:not(.unpauseButton):not(.pauseButton):not(.remoteControlButton) {
-            display: none;
-        }
-
-    .remoteControlButton, .nowPlayingBar .unpauseButton, .nowPlayingBar .pauseButton {
-        float: right;
-        padding-top: 0;
-    }
-
-    .remoteControlButton {
-        position: relative;
-        top: 4px;
-    }
-
-    .nowPlayingBar .currentTime, .nowPlayingBar .positionSliderContainer, .nowPlayingBar .volumeSliderContainer, #nowPlayingBar .muteButton, #nowPlayingBar .unmuteButton {
-        display: none !important;
-    }
-
-    .nowPlayingBar {
-        padding: 10px 5px 10px 10px;
-        text-align: left;
-    }
-}
-
-@media (min-width: 1440px) {
-    #nowPlayingBar .positionSliderContainer {
-        width: 300px;
-    }
-}
-
 .mediaPlayerAudioContainer {
     position: fixed;
     top: 40%;
@@ -195,15 +64,3 @@ paper-icon-button.mediaButton {
     padding: 1em;
     background: #222;
 }
-
-.nowPlayingBarUserDataButtons {
-    display: inline-block;
-    margin-left: 2em;
-}
-
-@media all and (max-width: 1200px) {
-
-    .nowPlayingBarUserDataButtons {
-        display: none;
-    }
-}
diff --git a/dashboard-ui/css/nowplaying.css b/dashboard-ui/css/nowplaying.css
index 5a451f71f8..6bb0eb78b4 100644
--- a/dashboard-ui/css/nowplaying.css
+++ b/dashboard-ui/css/nowplaying.css
@@ -172,7 +172,4 @@
     .nowPlayingSelectedPlayer {
         display: none;
     }
-}
-
-.nowPlayingPositionSlider .pin > #sliderKnob > #sliderKnobInner::after {
-}
+}
\ No newline at end of file
diff --git a/dashboard-ui/css/nowplayingbar.css b/dashboard-ui/css/nowplayingbar.css
new file mode 100644
index 0000000000..95b5d661fe
--- /dev/null
+++ b/dashboard-ui/css/nowplayingbar.css
@@ -0,0 +1,230 @@
+/* Now playing bar */
+.nowPlayingBar {
+    border-top: 1px solid #444;
+    text-align: center;
+    /*box-shadow: 0 0 8px rgba(255,255,255,.4);*/
+}
+
+.mediaButton, .nowPlayingBarUserDataButtons .btnUserItemRating {
+    vertical-align: middle;
+    color: #e8e8e8;
+    margin: 0;
+    text-align: center;
+}
+
+.nowPlayingBar paper-icon-button.mediaButton {
+    padding: 4px;
+}
+
+.mediaButton iron-icon {
+    height: 40px;
+    width: 40px;
+}
+
+.mediaButton.remoteControlButton iron-icon, .mediaButton.muteButton iron-icon, .mediaButton.unmuteButton iron-icon {
+    height: 26px;
+}
+
+.nowPlayingDoubleText {
+    top: -3px;
+}
+
+.nowPlayingBarInfoContainer {
+    vertical-align: middle;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+}
+
+.nowPlayingImage {
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 1em;
+}
+
+    .nowPlayingImage img {
+        vertical-align: bottom;
+    }
+
+    .nowPlayingBar, .nowPlayingImage img {
+        height: 90px;
+    }
+
+.nowPlayingBarText {
+    display: inline-block;
+    font-weight: normal;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+    text-align: left;
+    font-size: 14px;
+    max-width: 130px;
+}
+
+@media (min-width: 500px) {
+    .nowPlayingBarText {
+        max-width: 180px;
+    }
+}
+
+@media (min-width: 600px) {
+    .nowPlayingBarText {
+        max-width: 200px;
+    }
+}
+
+@media (min-width: 700px) {
+    .nowPlayingBarText {
+        max-width: 240px;
+    }
+}
+
+@media (min-width: 800px) {
+    .nowPlayingBarText {
+        max-width: 300px;
+    }
+}
+
+@media (min-width: 800px) {
+    .nowPlayingBarText {
+        margin-right: 30px;
+    }
+}
+
+.nowPlayingBarCenter {
+    vertical-align: middle;
+    text-align: center;
+    margin-top: 20px;
+}
+
+.nowPlayingBarPositionContainer {
+    position: absolute;
+    left: 90px;
+    top: 0;
+    right: 0;
+    z-index: 1;
+}
+
+.nowPlayingBarPositionSlider paper-progress {
+    height: 4px !important;
+}
+
+.nowPlayingBarPositionSlider #sliderBar {
+    top: 0;
+}
+
+.nowPlayingBarPositionSlider #sliderContainer {
+    width: 100%;
+    margin-left: -15px;
+}
+
+.nowPlayingBarPositionSlider #sliderKnob {
+    top: -14px !important;
+}
+
+.nowPlayingBarPositionSlider #progressContainer {
+    background-color: transparent !important;
+}
+
+.nowPlayingBarPositionSlider #sliderKnobInner {
+    width: 18px;
+    height: 18px;
+}
+
+.nowPlayingBarRight {
+    position: absolute;
+    bottom: 22px;
+    right: 10px;
+    vertical-align: middle;
+}
+
+.mediaButton img {
+    height: 24px;
+}
+
+.nowPlayingBarCurrentTime {
+    vertical-align: middle;
+    font-weight: normal;
+    position: absolute;
+    bottom: 38px;
+    text-align: center;
+    display: inline-block;
+    margin: 0 auto;
+    padding-left: 50px;
+}
+
+.nowPlayingBarVolumeSlider {
+    margin-left: -1em;
+}
+
+.nowPlayingBarUserDataButtons {
+    display: inline-block;
+    margin-left: 2em;
+    margin-right: 2em;
+}
+
+
+@media all and (max-width: 1200px) {
+
+    .nowPlayingBarUserDataButtons {
+        display: none;
+    }
+}
+
+@media all and (max-width: 1000px) {
+
+    .nowPlayingBarVolumeSlider, .nowPlayingBar .muteButton, .nowPlayingBar .unmuteButton {
+        display: none !important;
+    }
+
+    .nowPlayingBar .playlistButton {
+        display: none !important;
+    }
+
+    .nowPlayingBarRight {
+        bottom: 26px;
+    }
+}
+
+@media all and (max-width: 800px) {
+
+    .nowPlayingBarCurrentTime {
+        display: none;
+    }
+
+    .nowPlayingBarCenter > *:not(.nowPlayingBarCurrentTime) {
+        display: none !important;
+    }
+
+    .nowPlayingBarRight {
+        bottom: 12px;
+    }
+
+    .nowPlayingBar, .nowPlayingImage img {
+        height: 70px;
+    }
+
+    .nowPlayingBarPositionContainer {
+        left: 70px;
+    }
+
+    .nowPlayingBarPositionSlider paper-progress {
+        height: 3px !important;
+    }
+
+    .nowPlayingBarPositionSlider #sliderKnob {
+        top: -15px !important;
+    }
+}
+
+@media all and (min-width: 800px) {
+
+    .nowPlayingBarRight .pauseButton {
+        display: none;
+    }
+
+    .nowPlayingBarRight .unpauseButton {
+        display: none;
+    }
+}
diff --git a/dashboard-ui/css/site.css b/dashboard-ui/css/site.css
index e21e89e178..a22662d442 100644
--- a/dashboard-ui/css/site.css
+++ b/dashboard-ui/css/site.css
@@ -915,7 +915,7 @@ h1 .imageLink {
     z-index: 1097;
     color: #fff;
     border: 0 !important;
-    background-color: rgba(26,26,26,.9);
+    background-color: rgba(26,26,26,.93);
 }
 
 .footerOverBottomTabs {
diff --git a/dashboard-ui/scripts/actionsheet.js b/dashboard-ui/scripts/actionsheet.js
index e41855b60f..9d38494e4f 100644
--- a/dashboard-ui/scripts/actionsheet.js
+++ b/dashboard-ui/scripts/actionsheet.js
@@ -1,9 +1,5 @@
 (function () {
 
-    function onClosed() {
-        $(this).remove();
-        $(document.body).removeClass('bodyWithPopupOpen');
-    }
     function show(options) {
 
         require(['paperbuttonstyle'], function () {
@@ -65,6 +61,11 @@
                 html += '<paper-dialog-scrollable>';
             }
 
+            // If any items have an icon, give them all an icon just to make sure they're all lined up evenly
+            var renderIcon = options.items.filter(function (o) {
+                return o.ironIcon;
+            }).length;
+
             for (var i = 0, length = options.items.length; i < length; i++) {
 
                 var option = options.items[i];
@@ -74,6 +75,9 @@
                 if (option.ironIcon) {
                     html += '<iron-icon icon="' + option.ironIcon + '"></iron-icon>';
                 }
+                else if (renderIcon) {
+                    html += '<iron-icon></iron-icon>';
+                }
                 html += '<span>' + option.name + '</span>';
                 html += '</paper-button>';
             }
@@ -98,7 +102,9 @@
                 dlg.open();
 
                 // Has to be assigned a z-index after the call to .open() 
-                $(dlg).on('iron-overlay-closed', onClosed);
+                $(dlg).on('iron-overlay-closed', function () {
+                    $(this).remove();
+                });
 
                 $('.btnOption', dlg).on('click', function () {
 
diff --git a/dashboard-ui/scripts/mediaplayer-video.js b/dashboard-ui/scripts/mediaplayer-video.js
index 5b8d682466..645bea063c 100644
--- a/dashboard-ui/scripts/mediaplayer-video.js
+++ b/dashboard-ui/scripts/mediaplayer-video.js
@@ -9,7 +9,6 @@
         var unmuteButton = null;
         var volumeSlider = null;
         var positionSlider;
-        var isPositionSliderActive;
         var currentTimeElement;
 
         self.currentSubtitleStreamIndex = null;
@@ -59,20 +58,14 @@
             return document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement ? true : false;
         };
 
-        function onFlyoutClose() {
-            $('.itemVideo').css('visibility', 'visible');
-        }
-
-        function onPopupOpen(elem) {
-            elem.popup("open").parents(".ui-popup-container").css("margin-top", 30);
-
-            if ($.browser.safari) {
-                //$('.itemVideo').css('visibility', 'hidden');
-            }
-        }
-
         self.showChaptersFlyout = function () {
 
+            function onFlyoutClose() {
+                $('.itemVideo').css('visibility', 'visible');
+            }
+
+            require(['jqmicons']);
+
             var html = getChaptersFlyoutHtml();
 
             var elem = $('.videoChaptersPopup').html(html)
@@ -81,46 +74,187 @@
                 .off('popupafterclose', onFlyoutClose)
                 .on('popupafterclose', onFlyoutClose);
 
-            onPopupOpen(elem);
+            elem.popup("open").parents(".ui-popup-container").css("margin-top", 30);
         };
 
         self.showSubtitleMenu = function () {
 
-            var html = getSubtitleTracksHtml();
+            var streams = self.currentMediaSource.MediaStreams.filter(function (currentStream) {
+                return currentStream.Type == "Subtitle";
+            });
 
-            var elem = $('.videoSubtitlePopup').html(html)
-                .trigger('create')
-                .popup("option", "positionTo", $('.videoSubtitleButton'))
-                .off('popupafterclose', onFlyoutClose)
-                .on('popupafterclose', onFlyoutClose);
+            var currentIndex = self.currentSubtitleStreamIndex || -1;
 
-            onPopupOpen(elem);
+            streams.unshift({
+                Index: -1,
+                Language: "Off"
+            });
+
+            var menuItems = streams.map(function (stream) {
+
+                var attributes = [];
+
+                attributes.push(stream.Language || Globalize.translate('LabelUnknownLanguage'));
+
+                if (stream.Codec) {
+                    attributes.push(stream.Codec);
+                }
+
+                var name = attributes.join(' - ');
+
+                if (stream.IsDefault) {
+                    name += ' (D)';
+                }
+                if (stream.IsForced) {
+                    name += ' (F)';
+                }
+                if (stream.External) {
+                    name += ' (EXT)';
+                }
+
+                var opt = {
+                    name: name,
+                    id: stream.Index
+                };
+
+                if (stream.Index == currentIndex) {
+                    opt.ironIcon = "check";
+                }
+
+                return opt;
+            });
+
+            require(['actionsheet'], function () {
+
+                ActionSheetElement.show({
+                    items: menuItems,
+                    positionTo: $('.videoSubtitleButton')[0],
+                    callback: function (id) {
+
+                        var index = parseInt(id);
+                        if (index != currentIndex) {
+                            self.onSubtitleOptionSelected(index);
+                        }
+                    }
+                });
+
+            });
         };
 
         self.showQualityFlyout = function () {
 
-            var html = getQualityFlyoutHtml();
+            var currentSrc = self.getCurrentSrc(self.currentMediaRenderer).toLowerCase();
+            var isStatic = currentSrc.indexOf('static=true') != -1;
 
-            var elem = $('.videoQualityPopup').html(html)
-                .trigger('create')
-                .popup("option", "positionTo", $('.videoQualityButton'))
-                .off('popupafterclose', onFlyoutClose)
-                .on('popupafterclose', onFlyoutClose);
+            var videoStream = self.currentMediaSource.MediaStreams.filter(function (stream) {
+                return stream.Type == "Video";
+            })[0];
+            var videoWidth = videoStream ? videoStream.Width : null;
+            var videoHeight = videoStream ? videoStream.Height : null;
 
-            onPopupOpen(elem);
+            var options = self.getVideoQualityOptions(videoWidth, videoHeight);
+
+            if (isStatic) {
+                options[0].name = "Direct";
+            }
+
+            var menuItems = options.map(function (o) {
+
+                var opt = {
+                    name: o.name,
+                    id: o.bitrate
+                };
+
+                if (o.selected) {
+                    opt.ironIcon = "check";
+                }
+
+                return opt;
+            });
+
+            var selectedId = options.filter(function (o) {
+                return o.selected;
+            });
+            selectedId = selectedId.length ? selectedId[0].bitrate : null;
+            require(['actionsheet'], function () {
+
+                ActionSheetElement.show({
+                    items: menuItems,
+                    positionTo: $('.videoQualityButton')[0],
+                    callback: function (id) {
+
+                        var bitrate = parseInt(id);
+                        if (bitrate != selectedId) {
+                            self.onQualityOptionSelected(bitrate);
+                        }
+                    }
+                });
+
+            });
         };
 
         self.showAudioTracksFlyout = function () {
 
-            var html = getAudioTracksHtml();
+            var options = self.currentMediaSource.MediaStreams.filter(function (currentStream) {
+                return currentStream.Type == "Audio";
+            });
 
-            var elem = $('.videoAudioPopup').html(html)
-                .trigger('create')
-                .popup("option", "positionTo", $('.videoAudioButton'))
-                .off('popupafterclose', onFlyoutClose)
-                .on('popupafterclose', onFlyoutClose);
+            var currentIndex = getParameterByName('AudioStreamIndex', self.getCurrentSrc(self.currentMediaRenderer));
 
-            onPopupOpen(elem);
+            var menuItems = options.map(function (stream) {
+
+                var attributes = [];
+
+                attributes.push(stream.Language || Globalize.translate('LabelUnknownLanguage'));
+
+                if (stream.Codec) {
+                    attributes.push(stream.Codec);
+                }
+                if (stream.Profile) {
+                    attributes.push(stream.Profile);
+                }
+
+                if (stream.BitRate) {
+                    attributes.push((Math.floor(stream.BitRate / 1000)) + ' kbps');
+                }
+
+                if (stream.Channels) {
+                    attributes.push(stream.Channels + ' ch');
+                }
+
+                var name = attributes.join(' - ');
+
+                if (stream.IsDefault) {
+                    name += ' (D)';
+                }
+
+                var opt = {
+                    name: name,
+                    id: stream.Index
+                };
+
+                if (stream.Index == currentIndex) {
+                    opt.ironIcon = "check";
+                }
+
+                return opt;
+            });
+
+            require(['actionsheet'], function () {
+
+                ActionSheetElement.show({
+                    items: menuItems,
+                    positionTo: $('.videoAudioButton')[0],
+                    callback: function (id) {
+
+                        var index = parseInt(id);
+                        if (index != currentIndex) {
+                            self.onAudioOptionSelected(index);
+                        }
+                    }
+                });
+
+            });
         };
 
         self.setAudioStreamIndex = function (index) {
@@ -438,8 +572,6 @@
 
         function onPositionSliderChange() {
 
-            isPositionSliderActive = false;
-
             var newPercent = parseInt(this.value);
 
             var newPositionTicks = (newPercent / 100) * self.currentMediaSource.RunTimeTicks;
@@ -457,92 +589,134 @@
             $('.videoChaptersPopup').popup('close');
         };
 
-        self.onAudioOptionSelected = function (elem) {
+        self.onAudioOptionSelected = function (index) {
 
-            if (!$(elem).hasClass('selectedMediaPopupOption')) {
-                var index = parseInt(elem.getAttribute('data-value'));
-
-                self.setAudioStreamIndex(index);
-            }
-            $('.videoAudioPopup').popup('close');
+            self.setAudioStreamIndex(index);
         };
 
-        self.onSubtitleOptionSelected = function (elem) {
+        self.onSubtitleOptionSelected = function (index) {
 
-            if (!$(elem).hasClass('selectedMediaPopupOption')) {
-                var index = parseInt(elem.getAttribute('data-value'));
-
-                self.setSubtitleStreamIndex(index);
-            }
-            $('.videoSubtitlePopup').popup('close');
+            self.setSubtitleStreamIndex(index);
         };
 
-        self.onQualityOptionSelected = function (elem) {
+        self.onQualityOptionSelected = function (bitrate) {
 
-            if (!$(elem).hasClass('selectedMediaPopupOption')) {
-                var bitrate = parseInt(elem.getAttribute('data-value'));
+            AppSettings.maxStreamingBitrate(bitrate);
 
-                AppSettings.maxStreamingBitrate(bitrate);
+            $('.videoQualityPopup').popup('close');
 
-                $('.videoQualityPopup').popup('close');
-
-                self.changeStream(self.getCurrentTicks(), {
-                    Bitrate: bitrate
-                });
-            }
-
-            $('.videoSubtitlePopup').popup('close');
+            self.changeStream(self.getCurrentTicks(), {
+                Bitrate: bitrate
+            });
         };
 
-        $(Dashboard).on('footercreated', function () {
+        function ensureVideoPlayerElements() {
+
+            var html = '<div id="mediaPlayer" data-theme="b" class="ui-bar-b" style="display: none;">';
+
+            html += '<div class="videoBackdrop">';
+            html += '<div id="videoPlayer">';
+
+            html += '<div id="videoElement">';
+            html += '<div id="play" class="status"></div>';
+            html += '<div id="pause" class="status"></div>';
+            html += '</div>';
+
+            html += '<div class="videoTopControls hiddenOnIdle">';
+            html += '<div class="videoTopControlsLogo"></div>';
+            html += '<div class="videoAdvancedControls">';
+
+            html += '<paper-icon-button icon="skip-previous" class="previousTrackButton mediaButton videoTrackControl" onclick="MediaPlayer.previousTrack();"></paper-icon-button>';
+            html += '<paper-icon-button icon="skip-next" class="nextTrackButton mediaButton videoTrackControl" onclick="MediaPlayer.nextTrack();"></paper-icon-button>';
+
+            // Embedding onclicks due to issues not firing in cordova safari
+            html += '<paper-icon-button icon="audiotrack" class="mediaButton videoAudioButton" onclick="MediaPlayer.showAudioTracksFlyout();"></paper-icon-button>';
+            html += '<div data-role="popup" class="videoAudioPopup videoPlayerPopup" data-history="false" data-theme="b"></div>';
+
+            html += '<paper-icon-button icon="subtitles" class="mediaButton videoSubtitleButton" onclick="MediaPlayer.showSubtitleMenu();"></paper-icon-button>';
+            html += '<div data-role="popup" class="videoSubtitlePopup videoPlayerPopup" data-history="false" data-theme="b"></div>';
+
+            html += '<paper-icon-button icon="videocam" class="mediaButton videoChaptersButton" onclick="MediaPlayer.showChaptersFlyout();"></paper-icon-button>';
+            html += '<div data-role="popup" class="videoChaptersPopup videoPlayerPopup" data-history="false" data-theme="b"></div>';
+
+            html += '<paper-icon-button icon="settings" class="mediaButton videoQualityButton" onclick="MediaPlayer.showQualityFlyout();"></paper-icon-button>';
+
+            html += '<paper-icon-button icon="close" class="mediaButton" onclick="MediaPlayer.stop();"></paper-icon-button>';
+
+            html += '</div>'; // videoAdvancedControls
+            html += '</div>'; // videoTopControls
+
+            // Create controls
+            html += '<div class="videoControls hiddenOnIdle">';
+
+            html += '<div class="nowPlayingInfo hiddenOnIdle">';
+            html += '<div class="nowPlayingImage"></div>';
+            html += '<div class="nowPlayingTabs"></div>';
+            html += '</div>'; // nowPlayingInfo
+
+            html += '<paper-icon-button icon="skip-previous" class="previousTrackButton mediaButton videoTrackControl" onclick="MediaPlayer.previousTrack();"></paper-icon-button>';
+
+            html += '<paper-icon-button id="video-playButton" icon="play-arrow" class="mediaButton unpauseButton" onclick="MediaPlayer.unpause();"></paper-icon-button>';
+            html += '<paper-icon-button id="video-pauseButton" icon="pause" class="mediaButton pauseButton" onclick="MediaPlayer.pause();"></paper-icon-button>';
+
+            html += '<paper-icon-button icon="skip-next" class="nextTrackButton mediaButton videoTrackControl" onclick="MediaPlayer.nextTrack();"></paper-icon-button>';
+
+            html += '<paper-slider pin step=".1" min="0" max="100" value="0" class="videoPositionSlider" style="width:300px;vertical-align:middle;margin-left:-1em;"></paper-slider>';
+
+            html += '<div class="currentTime">--:--</div>';
+
+            html += '<paper-icon-button icon="volume-up" class="muteButton mediaButton" onclick="MediaPlayer.mute();"></paper-icon-button>';
+            html += '<paper-icon-button icon="volume-off" class="unmuteButton mediaButton" onclick="MediaPlayer.unMute();"></paper-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;"></paper-slider>';
+
+            html += '<paper-icon-button icon="fullscreen" class="mediaButton fullscreenButton" onclick="MediaPlayer.toggleFullscreen();" id="video-fullscreenButton"></paper-icon-button>';
+
+            html += '</div>'; // videoControls
+
+            html += '</div>'; // videoPlayer
+            html += '</div>'; // videoBackdrop
+            html += '</div>'; // mediaPlayer
+
+            $(document.body).append(html);
+
+            var mediaPlayerElem = $('#mediaPlayer', document.body);
+            mediaPlayerElem.trigger('create');
+        }
+
+        Dashboard.ready(function () {
+
+            ensureVideoPlayerElements();
 
             var parent = $("#mediaPlayer");
 
             muteButton = $('.muteButton', parent);
             unmuteButton = $('.unmuteButton', parent);
             currentTimeElement = $('.currentTime', parent);
-            positionSlider = $(".positionSlider", parent).on('slidestart', function (e) {
 
-                isPositionSliderActive = true;
+            positionSlider = $(".videoPositionSlider", parent).on('change', onPositionSliderChange)[0];
 
-            }).on('slidestop', onPositionSliderChange);
+            positionSlider._setPinValue = function (value) {
 
-            volumeSlider = $('.volumeSlider', parent).on('slidestop', function () {
+                if (!self.currentMediaSource || !self.currentMediaSource.RunTimeTicks) {
+                    this.pinValue = '--:--';
+                    return;
+                }
+
+                var ticks = self.currentMediaSource.RunTimeTicks;
+                ticks /= 100;
+                ticks *= value;
+
+                this.pinValue = Dashboard.getDisplayTime(ticks);
+            };
+
+            volumeSlider = $('.videoVolumeSlider', parent).on('change', function () {
 
                 var vol = this.value;
 
                 updateVolumeButtons(vol);
-                self.setVolume(vol * 100);
-            });
-
-            var trackChange = false;
-
-            var tooltip = $('<div id="slider-tooltip"></div>');
-
-            $(".videoControls .positionSliderContainer .slider").on("change", function (e) {
-                if (!trackChange) return;
-
-                var pct = $(this).val();
-
-                var time = self.currentDurationTicks * (Number(pct) * .01);
-
-                var tooltext = Dashboard.getDisplayTime(time);
-
-                tooltip.text(tooltext);
-
-                Logger.log("slidin", pct, self.currentDurationTicks, time);
-
-            }).on("slidestart", function (e) {
-                trackChange = true;
-
-                var handle = $(".videoControls .positionSliderContainer .ui-slider-handle");
-
-                handle.after(tooltip);
-            }).on("slidestop", function (e) {
-                trackChange = false;
-
-                tooltip.remove();
-            });
+                self.setVolume(vol);
+            })[0];
         });
 
         var idleHandlerTimeout;
@@ -684,240 +858,6 @@
             return html;
         }
 
-        function getAudioTracksHtml() {
-
-            var streams = self.currentMediaSource.MediaStreams.filter(function (currentStream) {
-                return currentStream.Type == "Audio";
-            });
-
-            var currentIndex = getParameterByName('AudioStreamIndex', self.getCurrentSrc(self.currentMediaRenderer));
-
-            var html = '';
-            html += '<div class="videoPlayerPopupContent">';
-            html += '<ul data-role="listview" data-inset="true"><li data-role="list-divider">' + Globalize.translate('HeaderAudioTracks') + '</li>';
-            html += '</ul>';
-
-            html += '<div class="videoPlayerPopupScroller">';
-            html += '<ul data-role="listview" data-inset="true">';
-
-            html += streams.map(function (stream) {
-
-                var cssClass = "mediaPopupOption";
-
-                var selected = stream.Index == currentIndex;
-
-                // Need to embed onclick handler due to delegation not working in iOS cordova
-                var onclick = '';
-
-                if (selected) {
-                    cssClass += ' selectedMediaPopupOption';
-                } else {
-                    onclick = ' onclick="MediaPlayer.onAudioOptionSelected(this);"';
-                }
-
-                var optionHtml = '<li><a' + onclick + ' data-value="' + stream.Index + '" class="' + cssClass + '" href="#">';
-
-                optionHtml += '<p style="margin:0;">';
-
-                if (selected) {
-                    optionHtml += '<img src="css/images/checkmarkgreen.png" style="width:18px;border-radius:3px;margin-right:.5em;vertical-align:middle;" />';
-                }
-
-                var textLines = [];
-                textLines.push(stream.Language || Globalize.translate('LabelUnknownLanguage'));
-
-                var attributes = [];
-
-                if (stream.Codec) {
-                    attributes.push(stream.Codec);
-                }
-                if (stream.Profile) {
-                    attributes.push(stream.Profile);
-                }
-
-                if (stream.BitRate) {
-                    attributes.push((Math.floor(stream.BitRate / 1000)) + ' kbps');
-                }
-
-                if (stream.Channels) {
-                    attributes.push(stream.Channels + ' ch');
-                }
-
-                if (stream.IsDefault) {
-                    attributes.push('(D)');
-                }
-
-                if (attributes.length) {
-                    textLines.push(attributes.join('&nbsp;&#149;&nbsp;'));
-                }
-
-                optionHtml += textLines.join('<br/>');
-
-                optionHtml += '</p>';
-
-                optionHtml += '</a></li>';
-
-                return optionHtml;
-
-            }).join('');
-
-            html += '</ul>';
-            html += '</div>';
-
-            html += '</div>';
-
-            return html;
-        }
-
-        function getSubtitleTracksHtml() {
-
-            var streams = self.currentMediaSource.MediaStreams.filter(function (currentStream) {
-                return currentStream.Type == "Subtitle";
-            });
-
-            var currentIndex = self.currentSubtitleStreamIndex || -1;
-
-            streams.unshift({
-                Index: -1,
-                Language: "Off"
-            });
-
-            var html = '';
-            html += '<div class="videoPlayerPopupContent">';
-            html += '<ul data-role="listview" data-inset="true"><li data-role="list-divider">' + Globalize.translate('HeaderSubtitles') + '</li>';
-            html += '</ul>';
-
-            html += '<div class="videoPlayerPopupScroller">';
-            html += '<ul data-role="listview" data-inset="true">';
-
-            html += streams.map(function (stream) {
-
-                var cssClass = "mediaPopupOption";
-
-                var selected = stream.Index == currentIndex;
-
-                // Need to embed onclick handler due to delegation not working in iOS cordova
-                var onclick = '';
-
-                if (selected) {
-                    cssClass += ' selectedMediaPopupOption';
-                } else {
-                    onclick = ' onclick="MediaPlayer.onSubtitleOptionSelected(this);"';
-                }
-
-                var optionHtml = '<li><a' + onclick + ' data-value="' + stream.Index + '" class="' + cssClass + '" href="#">';
-
-                optionHtml += '<p style="margin:0;">';
-
-                if (selected) {
-                    optionHtml += '<img src="css/images/checkmarkgreen.png" style="width:18px;border-radius:3px;margin-right:.5em;vertical-align:middle;" />';
-                }
-
-                var textLines = [];
-                textLines.push(stream.Language || Globalize.translate('LabelUnknownLanguage'));
-
-                if (stream.Codec) {
-                    textLines.push(stream.Codec);
-                }
-
-                var attributes = [];
-
-                if (stream.IsDefault) {
-                    attributes.push('Default');
-                }
-                if (stream.IsForced) {
-                    attributes.push('Forced');
-                }
-                if (stream.IsExternal) {
-                    attributes.push('External');
-                }
-
-                if (attributes.length) {
-                    textLines.push(attributes.join('&nbsp;&#149;&nbsp;'));
-                }
-
-                optionHtml += textLines.join('<br/>');
-
-                optionHtml += '</p>';
-
-                optionHtml += '</a></li>';
-
-                return optionHtml;
-
-            }).join('');
-
-            html += '</ul>';
-            html += '</div>';
-
-            html += '</div>';
-
-            return html;
-        }
-
-        function getQualityFlyoutHtml() {
-
-            var currentSrc = self.getCurrentSrc(self.currentMediaRenderer).toLowerCase();
-            var isStatic = currentSrc.indexOf('static=true') != -1;
-
-            var videoStream = self.currentMediaSource.MediaStreams.filter(function (stream) {
-                return stream.Type == "Video";
-            })[0];
-            var videoWidth = videoStream ? videoStream.Width : null;
-            var videoHeight = videoStream ? videoStream.Height : null;
-
-            var options = self.getVideoQualityOptions(videoWidth, videoHeight);
-
-            if (isStatic) {
-                options[0].name = "Direct";
-            }
-
-            var html = '';
-
-            html += '<div class="videoPlayerPopupContent">';
-            html += '<ul data-role="listview" data-inset="true"><li data-role="list-divider">' + Globalize.translate('HeaderVideoQuality') + '</li>';
-            html += '</ul>';
-
-            html += '<div class="videoPlayerPopupScroller">';
-            html += '<ul data-role="listview" data-inset="true">';
-
-            html += options.map(function (option) {
-
-                var cssClass = "mediaPopupOption";
-                // Need to embed onclick handler due to delegation not working in iOS cordova
-                var onclick = '';
-
-                if (option.selected) {
-                    cssClass += ' selectedMediaPopupOption';
-                } else {
-                    onclick = ' onclick="MediaPlayer.onQualityOptionSelected(this);"';
-                }
-
-                var optionHtml = '<li><a' + onclick + ' data-value="' + option.bitrate + '" class="' + cssClass + '" href="#">';
-
-                optionHtml += '<p style="margin:0;">';
-
-                if (option.selected) {
-                    optionHtml += '<img src="css/images/checkmarkgreen.png" style="width:18px;border-radius:3px;margin-right:.5em;vertical-align:middle;" />';
-                }
-
-                optionHtml += option.name;
-
-                optionHtml += '</p>';
-
-                optionHtml += '</a></li>';
-
-                return optionHtml;
-
-            }).join('');
-
-            html += '</ul>';
-            html += '</div>';
-
-            html += '</div>';
-
-            return html;
-        }
-
         function bindEventsForPlayback() {
 
             var hideElementsOnIdle = true;
@@ -1117,11 +1057,11 @@
             }
 
             if (AppInfo.hasPhysicalVolumeButtons) {
-                $('.volumeSliderContainer', videoControls).addClass('hide');
+                $(volumeSlider).visible(false);
                 $('.muteButton', videoControls).addClass('hide');
                 $('.unmuteButton', videoControls).addClass('hide');
             } else {
-                $('.volumeSliderContainer', videoControls).removeClass('hide');
+                $(volumeSlider).visible(true);
                 $('.muteButton', videoControls).removeClass('hide');
                 $('.unmuteButton', videoControls).removeClass('hide');
             }
@@ -1138,7 +1078,7 @@
 
             mediaRenderer.volume(initialVolume);
 
-            volumeSlider.val(initialVolume).slider('refresh');
+            volumeSlider.value = initialVolume * 100;
             updateVolumeButtons(initialVolume);
 
             $(mediaRenderer).on("volumechange.mediaplayerevent", function (e) {
@@ -1173,7 +1113,7 @@
 
             }).on("timeupdate.mediaplayerevent", function () {
 
-                if (!isPositionSliderActive) {
+                if (!positionSlider.dragging) {
 
                     self.setCurrentTime(self.getCurrentTicks(this), positionSlider, currentTimeElement);
                 }
@@ -1226,7 +1166,7 @@
 
             self.currentSubtitleStreamIndex = mediaSource.DefaultSubtitleStreamIndex;
 
-            $('body').addClass('bodyWithPopupOpen');
+            $(document.body).addClass('bodyWithPopupOpen');
 
             self.currentMediaRenderer = mediaRenderer;
             self.currentDurationTicks = self.currentMediaSource.RunTimeTicks;
diff --git a/dashboard-ui/scripts/mediaplayer.js b/dashboard-ui/scripts/mediaplayer.js
index 5a1b5b3744..f49dede216 100644
--- a/dashboard-ui/scripts/mediaplayer.js
+++ b/dashboard-ui/scripts/mediaplayer.js
@@ -599,13 +599,14 @@
                     var percent = ticks / self.currentDurationTicks;
                     percent *= 100;
 
-                    positionSlider.val(percent).slider('enable').slider('refresh');
+                    positionSlider.disabled = false;
+                    positionSlider.value = percent;
                 }
             } else {
 
                 if (positionSlider) {
 
-                    positionSlider.slider('disable').slider('refresh');
+                    positionSlider.disabled = true;
                 }
             }
 
@@ -1552,7 +1553,7 @@
 
             Logger.log('playback stopped');
 
-            $('body').removeClass('bodyWithPopupOpen');
+            $(document.body).removeClass('bodyWithPopupOpen');
 
             var mediaRenderer = this;
 
diff --git a/dashboard-ui/scripts/nowplayingbar.js b/dashboard-ui/scripts/nowplayingbar.js
index 063b7012db..894bef842f 100644
--- a/dashboard-ui/scripts/nowplayingbar.js
+++ b/dashboard-ui/scripts/nowplayingbar.js
@@ -9,12 +9,9 @@
     var unmuteButton;
     var muteButton;
     var volumeSlider;
-    var volumeSliderContainer;
-    var isVolumeSliderActive;
     var unpauseButton;
     var pauseButton;
     var positionSlider;
-    var isPositionSliderActive;
 
     var lastPlayerState;
 
@@ -25,12 +22,17 @@
         // add return false because on iOS clicking the bar often ends up clicking the content underneath. 
         html += '<div class="nowPlayingBar" style="display:none;">';
 
+        html += '<div class="nowPlayingBarPositionContainer">';
+        html += '<paper-slider pin step=".1" min="0" max="100" value="0" class="nowPlayingBarPositionSlider"></paper-slider>';
+        html += '</div>';
+
+        html += '<div class="nowPlayingBarInfoContainer">';
         html += '<div class="nowPlayingImage"></div>';
-        html += '<div class="nowPlayingText"></div>';
+        html += '<div class="nowPlayingBarText"></div>';
+        html += '</div>';
 
         // The onclicks are needed due to the return false above
-        html += '<paper-icon-button icon="tablet-android" onclick="Dashboard.navigate(\'nowplaying.html\', false);" class="mediaButton remoteControlButton"></paper-icon-button>';
-        html += '<paper-icon-button icon="view-list" onclick="Dashboard.navigate(\'nowplaying.html?tab=Playlist\', false);" class="mediaButton playlistButton"></paper-icon-button>';
+        html += '<div class="nowPlayingBarCenter">';
 
         html += '<paper-icon-button icon="skip-previous" class="previousTrackButton mediaButton"></paper-icon-button>';
 
@@ -41,23 +43,26 @@
 
         html += '<paper-icon-button icon="skip-next" class="nextTrackButton mediaButton"></paper-icon-button>';
 
-        html += '<div id="mediaElement"></div>';
-
-        html += '<div class="positionSliderContainer sliderContainer">';
-        html += '<input type="range" class="mediaSlider positionSlider slider" step=".001" min="0" max="100" value="0" style="display:none;" data-mini="true" data-theme="a" data-highlight="true" />';
+        html += '<div class="nowPlayingBarCurrentTime"></div>';
         html += '</div>';
 
-        html += '<div class="currentTime"></div>';
+        html += '<div class="nowPlayingBarRight">';
+
         html += '<paper-icon-button icon="volume-up" class="muteButton mediaButton"></paper-icon-button>';
         html += '<paper-icon-button icon="volume-off" class="unmuteButton mediaButton"></paper-icon-button>';
 
-        html += '<div class="volumeSliderContainer sliderContainer">';
-        html += '<input type="range" class="mediaSlider volumeSlider slider" step=".05" min="0" max="100" value="0" style="display:none;" data-mini="true" data-theme="a" data-highlight="true" />';
-        html += '</div>';
+        html += '<paper-slider pin step="1" min="0" max="100" value="0" class="nowPlayingBarVolumeSlider" style="width:100px;vertical-align:middle;"></paper-slider>';
 
         html += '<div class="nowPlayingBarUserDataButtons">';
         html += '</div>';
 
+        html += '<paper-icon-button icon="play-arrow" class="mediaButton unpauseButton"></paper-icon-button>';
+        html += '<paper-icon-button icon="pause" class="mediaButton pauseButton"></paper-icon-button>';
+        html += '<paper-icon-button icon="tablet-android" onclick="Dashboard.navigate(\'nowplaying.html\', false);" class="mediaButton remoteControlButton"></paper-icon-button>';
+        html += '<paper-icon-button icon="queue-music" onclick="Dashboard.navigate(\'nowplaying.html?tab=Playlist\', false);" class="mediaButton playlistButton"></paper-icon-button>';
+
+        html += '</div>';
+
         html += '</div>';
 
         return html;
@@ -65,9 +70,9 @@
 
     function bindEvents(elem) {
 
-        currentTimeElement = $('.currentTime', elem);
+        currentTimeElement = $('.nowPlayingBarCurrentTime', elem);
         nowPlayingImageElement = $('.nowPlayingImage', elem);
-        nowPlayingTextElement = $('.nowPlayingText', elem);
+        nowPlayingTextElement = $('.nowPlayingBarText', elem);
         nowPlayingUserData = $('.nowPlayingBarUserDataButtons', elem);
 
         $(elem).on('swipeup', function () {
@@ -123,28 +128,15 @@
             }
         });
 
-        volumeSlider = $('.volumeSlider', elem).on('slidestart', function () {
-
-            isVolumeSliderActive = true;
-
-        }).on('slidestop', function () {
-
-            isVolumeSliderActive = false;
+        volumeSlider = $('.nowPlayingBarVolumeSlider', elem).on('change', function () {
 
             if (currentPlayer) {
                 currentPlayer.setVolume(this.value);
             }
-        });
 
-        volumeSliderContainer = $('.volumeSliderContainer', elem);
+        })[0];
 
-        positionSlider = $('.positionSlider', elem).on('slidestart', function () {
-
-            isPositionSliderActive = true;
-
-        }).on('slidestop', function () {
-
-            isPositionSliderActive = false;
+        positionSlider = $('.nowPlayingBarPositionSlider', elem).on('change', function () {
 
             if (currentPlayer && lastPlayerState) {
 
@@ -153,7 +145,24 @@
 
                 currentPlayer.seek(Math.floor(newPositionTicks));
             }
-        });
+
+        })[0];
+
+        positionSlider._setPinValue = function (value) {
+
+            var state = lastPlayerState;
+
+            if (!state || !state.NowPlayingItem || !state.NowPlayingItem.RunTimeTicks) {
+                this.pinValue = '--:--';
+                return;
+            }
+
+            var ticks = state.NowPlayingItem.RunTimeTicks;
+            ticks /= 100;
+            ticks *= value;
+
+            this.pinValue = Dashboard.getDisplayTime(ticks);
+        };
     }
 
     function getNowPlayingBar() {
@@ -212,27 +221,21 @@
         updatePlayerVolumeState(state, playerInfo);
 
         var nowPlayingItem = state.NowPlayingItem || {};
-        if (!isPositionSliderActive) {
+        if (!positionSlider.dragging) {
 
             if (nowPlayingItem && nowPlayingItem.RunTimeTicks) {
 
                 var pct = playState.PositionTicks / nowPlayingItem.RunTimeTicks;
                 pct *= 100;
 
-                positionSlider.val(pct);
+                positionSlider.value = pct;
 
             } else {
 
-                positionSlider.val(0);
+                positionSlider.value = 0;
             }
 
-            if (playState.CanSeek) {
-                positionSlider.slider("enable");
-            } else {
-                positionSlider.slider("disable");
-            }
-
-            positionSlider.slider('refresh');
+            positionSlider.disabled = !playState.CanSeek;
         }
 
         var timeText = Dashboard.getDisplayTime(playState.PositionTicks);
@@ -263,12 +266,6 @@
         var showUnmuteButton = true;
         var showVolumeSlider = true;
 
-        //if (supportedCommands.indexOf('SetVolume') == -1) {
-        //    volumeSlider.prop('disabled', 'disabled');
-        //} else {
-        //    volumeSlider.prop('disabled', '');
-        //}
-
         if (supportedCommands.indexOf('Mute') == -1) {
             showMuteButton = false;
         }
@@ -307,17 +304,11 @@
             hideButton(unmuteButton);
         }
 
-        if (showVolumeSlider) {
-            volumeSliderContainer.show();
-        } else {
-            volumeSliderContainer.hide();
-        }
+        $(volumeSlider).visible(showVolumeSlider);
 
-        if (!isVolumeSliderActive) {
-            volumeSlider.val(playState.VolumeLevel || 0);
+        if (!volumeSlider.dragging) {
+            volumeSlider.value = playState.VolumeLevel || 0;
         }
-
-        volumeSlider.slider('refresh');
     }
 
     var currentImgUrl;
@@ -338,7 +329,7 @@
         nowPlayingTextElement.html(nameHtml);
 
         var url;
-        var imgHeight = 60;
+        var imgHeight = 90;
 
         var nowPlayingItem = state.NowPlayingItem;
 
@@ -386,9 +377,6 @@
 
         var imgHtml = '<img src="' + url + '" />';
 
-        if (state.NowPlayingItem.Id) {
-            imgHtml = '<a href="' + LibraryBrowser.getHref(state.NowPlayingItem) + '">' + imgHtml + '</a>';
-        }
         nowPlayingImageElement.html(imgHtml);
 
         if (nowPlayingItem.Id) {
diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js
index 603e1984e9..20fade5b54 100644
--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@@ -1844,80 +1844,6 @@ var AppInfo = {};
             initFastClick();
         }
 
-        var videoPlayerHtml = '<div id="mediaPlayer" data-theme="b" class="ui-bar-b" style="display: none;">';
-
-        videoPlayerHtml += '<div class="videoBackdrop">';
-        videoPlayerHtml += '<div id="videoPlayer">';
-
-        videoPlayerHtml += '<div id="videoElement">';
-        videoPlayerHtml += '<div id="play" class="status"></div>';
-        videoPlayerHtml += '<div id="pause" class="status"></div>';
-        videoPlayerHtml += '</div>';
-
-        videoPlayerHtml += '<div class="videoTopControls hiddenOnIdle">';
-        videoPlayerHtml += '<div class="videoTopControlsLogo"></div>';
-        videoPlayerHtml += '<div class="videoAdvancedControls">';
-
-        videoPlayerHtml += '<button class="mediaButton videoTrackControl previousTrackButton imageButton" title="Previous video" type="button" onclick="MediaPlayer.previousTrack();" data-role="none"><i class="fa fa-step-backward"></i></button>';
-        videoPlayerHtml += '<button class="mediaButton videoTrackControl nextTrackButton imageButton" title="Next video" type="button" onclick="MediaPlayer.nextTrack();" data-role="none"><i class="fa fa-step-forward"></i></button>';
-
-        // Embedding onclicks due to issues not firing in cordova safari
-        videoPlayerHtml += '<button class="mediaButton videoAudioButton imageButton" title="Audio tracks" type="button" data-role="none" onclick="MediaPlayer.showAudioTracksFlyout();"><i class="fa fa-music"></i></button>';
-        videoPlayerHtml += '<div data-role="popup" class="videoAudioPopup videoPlayerPopup" data-history="false" data-theme="b"></div>';
-
-        videoPlayerHtml += '<button class="mediaButton videoSubtitleButton imageButton" title="Subtitles" type="button" data-role="none" onclick="MediaPlayer.showSubtitleMenu();"><i class="fa fa-text-width"></i></button>';
-        videoPlayerHtml += '<div data-role="popup" class="videoSubtitlePopup videoPlayerPopup" data-history="false" data-theme="b"></div>';
-
-        videoPlayerHtml += '<button class="mediaButton videoChaptersButton imageButton" title="Scenes" type="button" data-role="none" onclick="MediaPlayer.showChaptersFlyout();"><i class="fa fa-video-camera"></i></button>';
-        videoPlayerHtml += '<div data-role="popup" class="videoChaptersPopup videoPlayerPopup" data-history="false" data-theme="b"></div>';
-
-        videoPlayerHtml += '<button class="mediaButton videoQualityButton imageButton" title="Quality" type="button" data-role="none" onclick="MediaPlayer.showQualityFlyout();"><i class="fa fa-gear"></i></button>';
-        videoPlayerHtml += '<div data-role="popup" class="videoQualityPopup videoPlayerPopup" data-history="false" data-theme="b"></div>';
-
-        videoPlayerHtml += '<button class="mediaButton imageButton" title="Stop" type="button" onclick="MediaPlayer.stop();" data-role="none"><i class="fa fa-close"></i></button>';
-
-        videoPlayerHtml += '</div>'; // videoAdvancedControls
-        videoPlayerHtml += '</div>'; // videoTopControls
-
-        // Create controls
-        videoPlayerHtml += '<div class="videoControls hiddenOnIdle">';
-
-        videoPlayerHtml += '<div class="nowPlayingInfo hiddenOnIdle">';
-        videoPlayerHtml += '<div class="nowPlayingImage"></div>';
-        videoPlayerHtml += '<div class="nowPlayingTabs"></div>';
-        videoPlayerHtml += '</div>'; // nowPlayingInfo
-
-        videoPlayerHtml += '<button id="video-previousTrackButton" class="mediaButton previousTrackButton videoTrackControl imageButton" title="Previous Track" type="button" onclick="MediaPlayer.previousTrack();" data-role="none"><i class="fa fa-step-backward"></i></button>';
-        videoPlayerHtml += '<button id="video-playButton" class="mediaButton imageButton" title="Play" type="button" onclick="MediaPlayer.unpause();" data-role="none"><i class="fa fa-play"></i></button>';
-        videoPlayerHtml += '<button id="video-pauseButton" class="mediaButton imageButton" title="Pause" type="button" onclick="MediaPlayer.pause();" data-role="none"><i class="fa fa-pause"></i></button>';
-        videoPlayerHtml += '<button id="video-nextTrackButton" class="mediaButton nextTrackButton videoTrackControl imageButton" title="Next Track" type="button" onclick="MediaPlayer.nextTrack();" data-role="none"><i class="fa fa-step-forward"></i></button>';
-
-        videoPlayerHtml += '<div class="positionSliderContainer sliderContainer">';
-        videoPlayerHtml += '<input type="range" class="mediaSlider positionSlider slider" step=".001" min="0" max="100" value="0" style="display:none;" data-mini="true" data-theme="a" data-highlight="true" />';
-        videoPlayerHtml += '</div>';
-
-        videoPlayerHtml += '<div class="currentTime">--:--</div>';
-
-        videoPlayerHtml += '<button id="video-muteButton" class="mediaButton muteButton imageButton" title="Mute" type="button" onclick="MediaPlayer.mute();" data-role="none"><i class="fa fa-volume-up"></i></button>';
-        videoPlayerHtml += '<button id="video-unmuteButton" class="mediaButton unmuteButton imageButton" title="Unmute" type="button" onclick="MediaPlayer.unMute();" data-role="none"><i class="fa fa-volume-off"></i></button>';
-
-        videoPlayerHtml += '<div class="volumeSliderContainer sliderContainer">';
-        videoPlayerHtml += '<input type="range" class="mediaSlider volumeSlider slider" step=".05" min="0" max="1" value="0" style="display:none;" data-mini="true" data-theme="a" data-highlight="true" />';
-        videoPlayerHtml += '</div>';
-
-        videoPlayerHtml += '<button onclick="MediaPlayer.toggleFullscreen();" id="video-fullscreenButton" class="mediaButton fullscreenButton imageButton" title="Fullscreen" type="button" data-role="none"><i class="fa fa-expand"></i></button>';
-
-        videoPlayerHtml += '</div>'; // videoControls
-
-        videoPlayerHtml += '</div>'; // videoPlayer
-        videoPlayerHtml += '</div>'; // videoBackdrop
-        videoPlayerHtml += '</div>'; // mediaPlayer
-
-        $(document.body).append(videoPlayerHtml);
-
-        var mediaPlayerElem = $('#mediaPlayer', document.body);
-        mediaPlayerElem.trigger('create');
-
         var footerHtml = '<div id="footer" class="footer" data-theme="b" class="ui-bar-b">';
 
         footerHtml += '<div id="footerNotifications"></div>';
@@ -1925,8 +1851,6 @@ var AppInfo = {};
 
         $(document.body).append(footerHtml);
 
-        $(Dashboard).trigger('footercreated');
-
         $(window).on("beforeunload", function () {
 
             var apiClient = window.ApiClient;
diff --git a/dashboard-ui/thirdparty/emby-icons.html b/dashboard-ui/thirdparty/emby-icons.html
index 3f6350445a..ce4fe66a63 100644
--- a/dashboard-ui/thirdparty/emby-icons.html
+++ b/dashboard-ui/thirdparty/emby-icons.html
@@ -106,6 +106,7 @@ See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for
             <g id="keyboard-arrow-left"><path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z" /></g>
             <g id="keyboard-arrow-right"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z" /></g>
             <g id="keyboard-arrow-up"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" /></g>
+            <g id="queue-music"><path d="M15 6H3v2h12V6zm0 4H3v2h12v-2zM3 16h8v-2H3v2zM17 6v8.18c-.31-.11-.65-.18-1-.18-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3V8h3V6h-5z" /></g>
         </defs>
     </svg>
 </iron-iconset-svg>
diff --git a/dashboard-ui/vulcanize-out.html b/dashboard-ui/vulcanize-out.html
index 553ff7ec39..b945c4b16e 100644
--- a/dashboard-ui/vulcanize-out.html
+++ b/dashboard-ui/vulcanize-out.html
@@ -16368,7 +16368,7 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
 </script>
 <dom-module id="paper-slider" assetpath="bower_components/paper-slider/">
 
-  <style>
+    <style>
 /**
 @license
 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
@@ -16629,414 +16629,414 @@ paper-ripple {
 
 </style>
 
-  <template>
-    <div id="sliderContainer" class$="[[_getClassNames(disabled, pin, snaps, immediateValue, min, expand, dragging, transiting, editable)]]">
+    <template>
+        <div id="sliderContainer" class$="[[_getClassNames(disabled, pin, snaps, immediateValue, min, expand, dragging, transiting, editable)]]">
 
-      <div class="bar-container">
-        <paper-progress id="sliderBar" aria-hidden="true" min="[[min]]" max="[[max]]" step="[[step]]" value="[[immediateValue]]" secondary-progress="[[secondaryProgress]]" on-down="_bardown" on-up="_resetKnob" on-track="_onTrack">
-        </paper-progress>
-      </div>
+            <div class="bar-container">
+                <paper-progress id="sliderBar" aria-hidden="true" min="[[min]]" max="[[max]]" step="[[step]]" value="[[immediateValue]]" secondary-progress="[[secondaryProgress]]" on-down="_bardown" on-up="_resetKnob" on-track="_onTrack">
+                </paper-progress>
+            </div>
 
-      <template is="dom-if" if="[[snaps]]">
-        <div class="slider-markers horizontal layout">
-          <template is="dom-repeat" items="[[markers]]">
-            <div class="slider-marker flex"></div>
-          </template>
+            <template is="dom-if" if="[[snaps]]">
+                <div class="slider-markers horizontal layout">
+                    <template is="dom-repeat" items="[[markers]]">
+                        <div class="slider-marker flex"></div>
+                    </template>
+                </div>
+            </template>
+
+            <div id="sliderKnob" class="center-justified center horizontal layout" on-down="_knobdown" on-up="_resetKnob" on-track="_onTrack" on-transitionend="_knobTransitionEnd">
+                <paper-ripple id="ink" class="circle" center="" hidden$="[[!receivedFocusFromKeyboard]]"></paper-ripple>
+                <div id="sliderKnobInner" value$="[[pinValue]]"></div>
+            </div>
         </div>
-      </template>
 
-      <div id="sliderKnob" class="center-justified center horizontal layout" on-down="_knobdown" on-up="_resetKnob" on-track="_onTrack" on-transitionend="_knobTransitionEnd">
-          <paper-ripple id="ink" class="circle" center="" hidden$="[[!receivedFocusFromKeyboard]]"></paper-ripple>
-          <div id="sliderKnobInner" value$="[[pinValue]]"></div>
-      </div>
-    </div>
-
-    <template is="dom-if" if="[[editable]]">
-      <paper-input id="input" class="slider-input" disabled$="[[disabled]]" on-change="_inputChange">
-      </paper-input>
+        <template is="dom-if" if="[[editable]]">
+            <paper-input id="input" class="slider-input" disabled$="[[disabled]]" on-change="_inputChange">
+            </paper-input>
+        </template>
     </template>
-  </template>
 
 </dom-module>
 
 <script>
 
-  Polymer({
-    is: 'paper-slider',
+    Polymer({
+        is: 'paper-slider',
 
-    behaviors: [
-      Polymer.IronA11yKeysBehavior,
-      Polymer.PaperInkyFocusBehavior,
-      Polymer.IronFormElementBehavior,
-      Polymer.IronRangeBehavior
-    ],
+        behaviors: [
+          Polymer.IronA11yKeysBehavior,
+          Polymer.PaperInkyFocusBehavior,
+          Polymer.IronFormElementBehavior,
+          Polymer.IronRangeBehavior
+        ],
 
-    properties: {
+        properties: {
 
-      /**
-       * If true, the slider thumb snaps to tick marks evenly spaced based
-       * on the `step` property value.
-       */
-      snaps: {
-        type: Boolean,
-        value: false,
-        notify: true
-      },
+            /**
+             * If true, the slider thumb snaps to tick marks evenly spaced based
+             * on the `step` property value.
+             */
+            snaps: {
+                type: Boolean,
+                value: false,
+                notify: true
+            },
 
-      /**
-       * If true, a pin with numeric value label is shown when the slider thumb
-       * is pressed. Use for settings for which users need to know the exact
-       * value of the setting.
-       */
-      pin: {
-        type: Boolean,
-        value: false,
-        notify: true
-      },
+            /**
+             * If true, a pin with numeric value label is shown when the slider thumb
+             * is pressed. Use for settings for which users need to know the exact
+             * value of the setting.
+             */
+            pin: {
+                type: Boolean,
+                value: false,
+                notify: true
+            },
 
-      /**
-       * The number that represents the current secondary progress.
-       */
-      secondaryProgress: {
-        type: Number,
-        value: 0,
-        notify: true,
-        observer: '_secondaryProgressChanged'
-      },
+            /**
+             * The number that represents the current secondary progress.
+             */
+            secondaryProgress: {
+                type: Number,
+                value: 0,
+                notify: true,
+                observer: '_secondaryProgressChanged'
+            },
 
-      /**
-       * If true, an input is shown and user can use it to set the slider value.
-       */
-      editable: {
-        type: Boolean,
-        value: false
-      },
+            /**
+             * If true, an input is shown and user can use it to set the slider value.
+             */
+            editable: {
+                type: Boolean,
+                value: false
+            },
 
-      /**
-       * The immediate value of the slider.  This value is updated while the user
-       * is dragging the slider.
-       */
-      immediateValue: {
-        type: Number,
-        value: 0,
-        readOnly: true
-      },
+            /**
+             * The immediate value of the slider.  This value is updated while the user
+             * is dragging the slider.
+             */
+            immediateValue: {
+                type: Number,
+                value: 0,
+                readOnly: true
+            },
 
-      /**
-       * The maximum number of markers
-       */
-      maxMarkers: {
-        type: Number,
-        value: 0,
-        notify: true,
-        observer: '_maxMarkersChanged'
-      },
+            /**
+             * The maximum number of markers
+             */
+            maxMarkers: {
+                type: Number,
+                value: 0,
+                notify: true,
+                observer: '_maxMarkersChanged'
+            },
 
-      /**
-       * If true, the knob is expanded
-       */
-      expand: {
-        type: Boolean,
-        value: false,
-        readOnly: true
-      },
+            /**
+             * If true, the knob is expanded
+             */
+            expand: {
+                type: Boolean,
+                value: false,
+                readOnly: true
+            },
 
-      /**
-       * True when the user is dragging the slider.
-       */
-      dragging: {
-        type: Boolean,
-        value: false,
-        readOnly: true
-      },
+            /**
+             * True when the user is dragging the slider.
+             */
+            dragging: {
+                type: Boolean,
+                value: false,
+                readOnly: true
+            },
 
-      transiting: {
-        type: Boolean,
-        value: false,
-        readOnly: true
-      },
+            transiting: {
+                type: Boolean,
+                value: false,
+                readOnly: true
+            },
 
-      markers: {
-        type: Array,
-        readOnly: true,
-        value: []
-      },
-    },
+            markers: {
+                type: Array,
+                readOnly: true,
+                value: []
+            },
+        },
 
-    observers: [
-      '_updateKnob(value, min, max, snaps, step)',
-      '_minChanged(min)',
-      '_maxChanged(max)',
-      '_valueChanged(value)',
-      '_immediateValueChanged(immediateValue)'
-    ],
+        observers: [
+          '_updateKnob(value, min, max, snaps, step)',
+          '_minChanged(min)',
+          '_maxChanged(max)',
+          '_valueChanged(value)',
+          '_immediateValueChanged(immediateValue)'
+        ],
 
-    hostAttributes: {
-      role: 'slider',
-      tabindex: 0
-    },
+        hostAttributes: {
+            role: 'slider',
+            tabindex: 0
+        },
 
-    keyBindings: {
-      'left down pagedown home': '_decrementKey',
-      'right up pageup end': '_incrementKey'
-    },
+        keyBindings: {
+            'left down pagedown home': '_decrementKey',
+            'right up pageup end': '_incrementKey'
+        },
 
-    ready: function() {
-      // issue polymer/polymer#1305
-      this.async(function() {
-        this._updateKnob(this.value);
-        this._updateInputValue();
-      }, 1);
-    },
+        ready: function () {
+            // issue polymer/polymer#1305
+            this.async(function () {
+                this._updateKnob(this.value);
+                this._updateInputValue();
+            }, 1);
+        },
+
+        /**
+         * Increases value by `step` but not above `max`.
+         * @method increment
+         */
+        increment: function () {
+            this.value = this._clampValue(this.value + this.step);
+        },
+
+        /**
+         * Decreases value by `step` but not below `min`.
+         * @method decrement
+         */
+        decrement: function () {
+            this.value = this._clampValue(this.value - this.step);
+        },
+
+        _updateKnob: function (value) {
+            this._positionKnob(this._calcRatio(value));
+        },
+
+        _minChanged: function () {
+            this.setAttribute('aria-valuemin', this.min);
+        },
+
+        _maxChanged: function () {
+            this.setAttribute('aria-valuemax', this.max);
+        },
+
+        _valueChanged: function () {
+            this.setAttribute('aria-valuenow', this.value);
+            this.fire('value-change');
+        },
+
+        _immediateValueChanged: function () {
+            if (this.dragging) {
+                this.fire('immediate-value-change');
+            } else {
+                this.value = this.immediateValue;
+            }
+            this._updateInputValue();
+        },
+
+        _secondaryProgressChanged: function () {
+            this.secondaryProgress = this._clampValue(this.secondaryProgress);
+        },
+
+        _updateInputValue: function () {
+            if (this.editable) {
+                this.$$('#input').value = this.immediateValue.toString();
+            }
+        },
+
+        _expandKnob: function () {
+            this._setExpand(true);
+        },
+
+        _resetKnob: function () {
+            this.cancelDebouncer('expandKnob');
+            this._setExpand(false);
+        },
+
+        _positionKnob: function (ratio) {
+            this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio)));
+            this._setPinValue(this.immediateValue);
+
+            this._setRatio(this._calcRatio(this.immediateValue));
+
+            this.$.sliderKnob.style.left = (this.ratio * 100) + '%';
+        },
+
+        _inputChange: function () {
+            this.value = this.$$('#input').value;
+            this.fire('change');
+        },
+
+        _calcKnobPosition: function (ratio) {
+            return (this.max - this.min) * ratio + this.min;
+        },
+
+        _onTrack: function (event) {
+            switch (event.detail.state) {
+                case 'start':
+                    this._trackStart(event);
+                    break;
+                case 'track':
+                    this._trackX(event);
+                    break;
+                case 'end':
+                    this._trackEnd();
+                    break;
+            }
+        },
+
+        _trackStart: function (event) {
+            this._w = this.$.sliderBar.offsetWidth;
+            this._x = this.ratio * this._w;
+            this._startx = this._x || 0;
+            this._minx = -this._startx;
+            this._maxx = this._w - this._startx;
+            this.$.sliderKnob.classList.add('dragging');
+
+            this._setDragging(true);
+        },
+
+        _trackX: function (e) {
+            if (!this.dragging) {
+                this._trackStart(e);
+            }
+
+            var dx = Math.min(this._maxx, Math.max(this._minx, e.detail.dx));
+            this._x = this._startx + dx;
+
+            var immediateValue = this._calcStep(this._calcKnobPosition(this._x / this._w));
+            this._setImmediateValue(immediateValue);
+            this._setPinValue(immediateValue);
+
+            // update knob's position
+            var translateX = ((this._calcRatio(immediateValue) * this._w) - this._startx);
+            this.translate3d(translateX + 'px', 0, 0, this.$.sliderKnob);
+        },
+
+        _trackEnd: function () {
+            var s = this.$.sliderKnob.style;
+
+            this.$.sliderKnob.classList.remove('dragging');
+            this._setDragging(false);
+            this._resetKnob();
+            this.value = this.immediateValue;
+
+            s.transform = s.webkitTransform = '';
+
+            this.fire('change');
+        },
+
+        _knobdown: function (event) {
+            this._expandKnob();
+
+            // cancel selection
+            event.detail.sourceEvent.preventDefault();
+
+            // set the focus manually because we will called prevent default
+            this.focus();
+        },
+
+        _bardown: function (event) {
+            this._w = this.$.sliderBar.offsetWidth;
+            var rect = this.$.sliderBar.getBoundingClientRect();
+            var ratio = (event.detail.x - rect.left) / this._w;
+            var prevRatio = this.ratio;
+
+            this._setTransiting(true);
+
+            this._positionKnob(ratio);
+
+            this.debounce('expandKnob', this._expandKnob, 60);
+
+            // if the ratio doesn't change, sliderKnob's animation won't start
+            // and `_knobTransitionEnd` won't be called
+            // Therefore, we need to manually update the `transiting` state
+
+            if (prevRatio === this.ratio) {
+                this._setTransiting(false);
+            }
+
+            this.async(function () {
+                this.fire('change');
+            });
+
+            // cancel selection
+            event.detail.sourceEvent.preventDefault();
+        },
+
+        _knobTransitionEnd: function (event) {
+            if (event.target === this.$.sliderKnob) {
+                this._setTransiting(false);
+            }
+        },
+
+        _maxMarkersChanged: function (maxMarkers) {
+            var l = (this.max - this.min) / this.step;
+            if (!this.snaps && l > maxMarkers) {
+                this._setMarkers([]);
+            } else {
+                this._setMarkers(new Array(l));
+            }
+        },
+
+        _getClassNames: function () {
+            var classes = {};
+
+            classes.disabled = this.disabled;
+            classes.pin = this.pin;
+            classes.snaps = this.snaps;
+            classes.ring = this.immediateValue <= this.min;
+            classes.expand = this.expand;
+            classes.dragging = this.dragging;
+            classes.transiting = this.transiting;
+            classes.editable = this.editable;
+
+            return Object.keys(classes).filter(
+              function (className) {
+                  return classes[className];
+              }).join(' ');
+        },
+
+        _incrementKey: function (event) {
+            if (event.detail.key === 'end') {
+                this.value = this.max;
+            } else {
+                this.increment();
+            }
+            this.fire('change');
+        },
+
+        _decrementKey: function (event) {
+            if (event.detail.key === 'home') {
+                this.value = this.min;
+            } else {
+                this.decrement();
+            }
+            this.fire('change');
+        },
+
+        _setPinValue: function (value) {
+            this.pinValue = value;
+        }
+    });
 
     /**
-     * Increases value by `step` but not above `max`.
-     * @method increment
+     * Fired when the slider's value changes.
+     *
+     * @event value-change
      */
-    increment: function() {
-      this.value = this._clampValue(this.value + this.step);
-    },
 
     /**
-     * Decreases value by `step` but not below `min`.
-     * @method decrement
+     * Fired when the slider's immediateValue changes.
+     *
+     * @event immediate-value-change
      */
-    decrement: function() {
-      this.value = this._clampValue(this.value - this.step);
-    },
 
-    _updateKnob: function(value) {
-      this._positionKnob(this._calcRatio(value));
-    },
-
-    _minChanged: function() {
-      this.setAttribute('aria-valuemin', this.min);
-    },
-
-    _maxChanged: function() {
-      this.setAttribute('aria-valuemax', this.max);
-    },
-
-    _valueChanged: function() {
-      this.setAttribute('aria-valuenow', this.value);
-      this.fire('value-change');
-    },
-
-    _immediateValueChanged: function() {
-      if (this.dragging) {
-        this.fire('immediate-value-change');
-      } else {
-        this.value = this.immediateValue;
-      }
-      this._updateInputValue();
-    },
-
-    _secondaryProgressChanged: function() {
-      this.secondaryProgress = this._clampValue(this.secondaryProgress);
-    },
-
-    _updateInputValue: function() {
-      if (this.editable) {
-        this.$$('#input').value = this.immediateValue.toString();
-      }
-    },
-
-    _expandKnob: function() {
-      this._setExpand(true);
-    },
-
-    _resetKnob: function() {
-      this.cancelDebouncer('expandKnob');
-      this._setExpand(false);
-    },
-
-    _positionKnob: function(ratio) {
-      this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio)));
-      this._setPinValue(this.immediateValue);
-
-      this._setRatio(this._calcRatio(this.immediateValue));
-
-      this.$.sliderKnob.style.left = (this.ratio * 100) + '%';
-    },
-
-    _inputChange: function() {
-      this.value = this.$$('#input').value;
-      this.fire('change');
-    },
-
-    _calcKnobPosition: function(ratio) {
-      return (this.max - this.min) * ratio + this.min;
-    },
-
-    _onTrack: function(event) {
-      switch (event.detail.state) {
-        case 'start':
-          this._trackStart(event);
-          break;
-        case 'track':
-          this._trackX(event);
-          break;
-        case 'end':
-          this._trackEnd();
-          break;
-      }
-    },
-
-    _trackStart: function(event) {
-      this._w = this.$.sliderBar.offsetWidth;
-      this._x = this.ratio * this._w;
-      this._startx = this._x || 0;
-      this._minx = - this._startx;
-      this._maxx = this._w - this._startx;
-      this.$.sliderKnob.classList.add('dragging');
-
-      this._setDragging(true);
-    },
-
-    _trackX: function(e) {
-      if (!this.dragging) {
-        this._trackStart(e);
-      }
-
-      var dx = Math.min(this._maxx, Math.max(this._minx, e.detail.dx));
-      this._x = this._startx + dx;
-
-      var immediateValue = this._calcStep(this._calcKnobPosition(this._x / this._w));
-      this._setImmediateValue(immediateValue);
-      this._setPinValue(immediateValue);
-
-      // update knob's position
-      var translateX = ((this._calcRatio(immediateValue) * this._w) - this._startx);
-      this.translate3d(translateX + 'px', 0, 0, this.$.sliderKnob);
-    },
-
-    _trackEnd: function() {
-      var s = this.$.sliderKnob.style;
-
-      this.$.sliderKnob.classList.remove('dragging');
-      this._setDragging(false);
-      this._resetKnob();
-      this.value = this.immediateValue;
-
-      s.transform = s.webkitTransform = '';
-
-      this.fire('change');
-    },
-
-    _knobdown: function(event) {
-      this._expandKnob();
-
-      // cancel selection
-      event.detail.sourceEvent.preventDefault();
-
-      // set the focus manually because we will called prevent default
-      this.focus();
-    },
-
-    _bardown: function(event) {
-      this._w = this.$.sliderBar.offsetWidth;
-      var rect = this.$.sliderBar.getBoundingClientRect();
-      var ratio = (event.detail.x - rect.left) / this._w;
-      var prevRatio = this.ratio;
-
-      this._setTransiting(true);
-
-      this._positionKnob(ratio);
-
-      this.debounce('expandKnob', this._expandKnob, 60);
-
-      // if the ratio doesn't change, sliderKnob's animation won't start
-      // and `_knobTransitionEnd` won't be called
-      // Therefore, we need to manually update the `transiting` state
-
-      if (prevRatio === this.ratio) {
-        this._setTransiting(false);
-      }
-
-      this.async(function() {
-        this.fire('change');
-      });
-
-      // cancel selection
-      event.detail.sourceEvent.preventDefault();
-    },
-
-    _knobTransitionEnd: function(event) {
-      if (event.target === this.$.sliderKnob) {
-        this._setTransiting(false);
-      }
-    },
-
-    _maxMarkersChanged: function(maxMarkers) {
-      var l = (this.max - this.min) / this.step;
-      if (!this.snaps && l > maxMarkers) {
-        this._setMarkers([]);
-      } else {
-        this._setMarkers(new Array(l));
-      }
-    },
-
-    _getClassNames: function() {
-      var classes = {};
-
-      classes.disabled = this.disabled;
-      classes.pin = this.pin;
-      classes.snaps = this.snaps;
-      classes.ring = this.immediateValue <= this.min;
-      classes.expand = this.expand;
-      classes.dragging = this.dragging;
-      classes.transiting = this.transiting;
-      classes.editable = this.editable;
-
-      return Object.keys(classes).filter(
-        function(className) {
-          return classes[className];
-        }).join(' ');
-    },
-
-    _incrementKey: function(event) {
-      if (event.detail.key === 'end') {
-        this.value = this.max;
-      } else {
-        this.increment();
-      }
-      this.fire('change');
-    },
-
-    _decrementKey: function(event) {
-      if (event.detail.key === 'home') {
-        this.value = this.min;
-      } else {
-        this.decrement();
-      }
-      this.fire('change');
-    },
-
-    _setPinValue: function (value) {
-        this.pinValue = value;
-    }
-  });
-
-  /**
-   * Fired when the slider's value changes.
-   *
-   * @event value-change
-   */
-
-  /**
-   * Fired when the slider's immediateValue changes.
-   *
-   * @event immediate-value-change
-   */
-
-  /**
-   * Fired when the slider's value changes due to user interaction.
-   *
-   * Changes to the slider's value due to changes in an underlying
-   * bound variable will not trigger this event.
-   *
-   * @event change
-   */
+    /**
+     * Fired when the slider's value changes due to user interaction.
+     *
+     * Changes to the slider's value due to changes in an underlying
+     * bound variable will not trigger this event.
+     *
+     * @event change
+     */
 
 </script>
 <iron-iconset-svg name="icons" size="24">
@@ -17112,6 +17112,7 @@ paper-ripple {
             <g id="keyboard-arrow-left"><path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"></path></g>
             <g id="keyboard-arrow-right"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></g>
             <g id="keyboard-arrow-up"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></g>
+            <g id="queue-music"><path d="M15 6H3v2h12V6zm0 4H3v2h12v-2zM3 16h8v-2H3v2zM17 6v8.18c-.31-.11-.65-.18-1-.18-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3V8h3V6h-5z"></path></g>
         </defs>
     </svg>
 </iron-iconset-svg>