change now playing bar to use jqm buttons

dashboard-ui/css/icons.css

@@ -79,3 +79,17 @@
 .ui-nosvg .ui-icon-filter:after {
     background-image: url("images/icons/filter.png");
 }
+.ui-icon-audiocd:after {
+    background-image: url("images/icons/audiocd.png");
+}
+/* Fallback */
+.ui-nosvg .ui-icon-audiocd:after {
+    background-image: url("images/icons/audiocd.png");
+}
+.ui-icon-subtitles:after {
+    background-image: url("images/icons/subtitles.png");
+}
+/* Fallback */
+.ui-nosvg .ui-icon-subtitles:after {
+    background-image: url("images/icons/subtitles.png");
+}

dashboard-ui/css/mediaplayer.css

@@ -1,45 +1,41 @@
 
 
 /* Now playing bar */
-#nowPlayingBar {
+.nowPlayingBar {
-    padding: 6px .5em;
+    padding: 6px 0 12px 0;
     border-top: 2px solid green;
 }
 
-    #nowPlayingBar .highPosition {
+    .nowPlayingBar .highPosition {
         z-index: 99999;
         position: relative;
         opacity: 0.5;
     }
 
-        #nowPlayingBar .highPosition:hover:not(.barBackground ) {
+        .nowPlayingBar .highPosition:hover:not(.barBackground ) {
             opacity: 0.9;
         }
 
-    #nowPlayingBar .barBackground {
+    .nowPlayingBar .barBackground {
         border-top: 2px solid green;
-        background: #3c3c3c;
         position: absolute;
         margin: -8px -0.5em !important;
         width: 100%;
         height: 100%;
     }
 
-    #nowPlayingBar > *:not(#mediaElement):not(.mediaFlyoutContainer):not(.barBackground ) {
+    .nowPlayingBar > *:not(#mediaElement):not(.mediaFlyoutContainer):not(.barBackground ) {
-        margin: 0 1em;
         position: relative;
     }
 
 .nowPlayingBarImage {
-    border: 1px solid #a7a7a7!important;
+    border: 1px solid #444!important;
     padding: 1px;
     vertical-align: bottom;
 }
 
 .mediaButton {
-    display: inline-block;
+    vertical-align: top;
-    position: relative;
-    top: -4px;
 }
 
 #mediaElement {
@@ -64,6 +60,7 @@
     position: relative;
     top: -3px;
     margin-left: 3px;
+    margin-right: 2em;
 }
 
 @media all and (min-width: 650px) {
@@ -103,8 +100,8 @@
     display: inline-block;
     position: relative;
     top: -10px;
-    width: 110px;
+    max-width: 110px;
-    margin-right: .25em;
+    margin-right: 2em;
 }
 
 .mediaSlider {
@@ -114,37 +111,31 @@
     cursor: pointer;
 }
 
-@media screen and (-webkit-min-device-pixel-ratio:0) {
+.sliderContainer {
-    /* IE10 won't see this (good) '*/
+    display: inline-block;
-    .mediaSlider {
-        -webkit-appearance: none;
-        -moz-apperance: none;
-        background: #777;
-        border-radius: 5px;
-        vertical-align: bottom;
-        height: 3px;
-        top: -17px;
-    }
 }
 
-
+.positionSliderContainer {
-.mediaSlider::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    -moz-apperance: none;
-    width: 15px;
-    height: 15px;
-    -webkit-border-radius: 10px;
-    -moz-border-radius: 10px;
-    -ms-border-radius: 10px;
-    -o-border-radius: 10px;
-    border-radius: 10px;
-    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fefefe), color-stop(0.49, #dddddd), color-stop(0.51, #d1d1d1), color-stop(1, #a1a1a1) );
-}
-
-.positionSlider {
     width: 130px;
 }
 
+.volumeSliderContainer  {
+    width: 90px;
+}
+
+.sliderContainer .ui-slider {
+    margin: 0 !important;
+}
+
+.sliderContainer .ui-slider-track {
+    margin-left: 15px !important;
+    z-index: 100000;
+}
+
+.volumeSliderContainer .ui-slider-track {
+    margin-left: 5px !important;
+}
+
 .volumeButton {
     margin-right: .5em!important;
 }
@@ -173,15 +164,11 @@ input[type="range"]::-ms-fill-upper {
 }
 
 @media all and (max-width: 600px) {
-    .volumeButton, .volumeSlider, .nowPlayingText, .chaptersButton, .audioTracksButton {
+    .volumeButton, .volumeSliderContainer, .nowPlayingText, .chaptersButton, .audioTracksButton {
         display: none!important;
     }
 
-    #nowPlayingBar > *:not(#mediaElement):not(.mediaFlyoutContainer):not(.barBackground ) {
+    .positionSliderContainer {
-        margin: 0 .5em;
-    }
-
-    .positionSlider {
         width: 50px;
     }
 
@@ -191,7 +178,7 @@ input[type="range"]::-ms-fill-upper {
 }
 
 @media all and (max-width: 750px) {
-    .positionSlider {
+    .positionSliderContainer {
         width: 50px;
     }
 }
@@ -296,7 +283,7 @@ input[type="range"]::-ms-fill-upper {
         width: 400px;
     }
 
-    .positionSlider {
+    .positionSliderContainer {
         width: 400px;
     }
 
@@ -310,7 +297,7 @@ input[type="range"]::-ms-fill-upper {
         width: 500px;
     }
 
-    .positionSlider {
+    .positionSliderContainer {
         width: 500px;
     }
 
@@ -324,7 +311,7 @@ input[type="range"]::-ms-fill-upper {
         width: 550px;
     }
 
-    .positionSlider {
+    .positionSliderContainer {
         width: 550px;
     }
 

dashboard-ui/css/site.css

@@ -669,7 +669,6 @@ h1 .imageLink {
 
 /* Footer */
 #footer {
-    background: #3c3c3c;
     position: fixed;
     bottom: -2px;
     left: -2px;

dashboard-ui/scripts/mediaplayer.js

@@ -42,11 +42,11 @@
 
         $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function () {
             var nowPlayingBar = ('#nowPlayingBar');
-            $('.itemVideo').unbind('mousemove keydown scroll', idleHandler);
+            $('.itemVideo').off('mousemove keydown scroll', idleHandler);
             if (isFullScreen()) {
                 $('.itemVideo').addClass('fullscreenVideo');
                 idleState = true;
-                $('.itemVideo').bind('mousemove keydown scroll', idleHandler).trigger('mousemove');
+                $('.itemVideo').on('mousemove keydown scroll', idleHandler).trigger('mousemove');
             } else {
                 $(".mediaButton,.currentTime,.nowPlayingMediaInfo,.mediaSlider,.barBackground", nowPlayingBar).removeClass("highPosition");
                 $('.itemVideo').removeClass('fullscreenVideo');
@@ -216,46 +216,20 @@
 
             currentTimeElement = $('.currentTime');
 
-            volumeSlider = $('.volumeSlider').on('change', function () {
+            volumeSlider = $('.volumeSlider').on('slidestop', function () {
 
+                document.title += '1';
                 var vol = this.value;
+
                 updateVolumeButtons(vol);
                 currentMediaElement.volume = vol;
             });
 
-            $(".jqueryuislider").slider({ orientation: "horizontal" });
+            positionSlider = $(".positionSlider").on('slidestart', function () {
-
-            positionSlider = $(".positionSlider").on('mousedown', function () {
 
                 isPositionSliderActive = true;
 
-            });
+            }).on('slidestop', onPositionSliderChange);
-
-            if ($.browser.mozilla) {
-
-                positionSlider.on('change', onPositionSliderChange);
-
-            } else {
-
-                positionSlider.on('change', function () {
-
-                    isPositionSliderActive = true;
-
-                    setCurrentTimePercent(parseInt(this.value), currentItem);
-
-                }).on('changed', onPositionSliderChange);
-            }
-
-
-            (function (el, timeout) {
-                var timer, trig = function () { el.trigger("changed"); };
-                el.bind("change", function () {
-                    if (timer) {
-                        clearTimeout(timer);
-                    }
-                    timer = setTimeout(trig, timeout);
-                });
-            })(positionSlider, 500);
 
             $('#chaptersFlyout').on('click', '.mediaFlyoutOption', function () {
 
@@ -311,12 +285,6 @@
             return d >= 0 && text.lastIndexOf(pattern) === d;
         }
 
-        function setCurrentTimePercent(percent, item) {
-
-            var position = (percent / 100) * curentDurationTicks;
-            setCurrentTime(position, item, false);
-        }
-
         function setCurrentTime(ticks, item, updateSlider) {
 
             // Convert to ticks
@@ -332,12 +300,10 @@
                     var percent = ticks / curentDurationTicks;
                     percent *= 100;
 
-                    positionSlider.val(percent);
+                    positionSlider.val(percent).slider('enable').slider('refresh');
-
-                    positionSlider.removeAttr('disabled');
                 }
             } else {
-                positionSlider.attr('disabled', 'disabled');
+                positionSlider.slider('disable');
             }
 
             currentTimeElement.html(timeText);
@@ -424,7 +390,7 @@
                 this.volume = initialVolume;
             });
 
-            volumeSlider.val(initialVolume);
+            volumeSlider.val(initialVolume).slider('refresh');
             updateVolumeButtons(initialVolume);
 
             audioElement.on("volumechange", function () {
@@ -612,7 +578,7 @@
                 this.volume = initialVolume;
             });
 
-            volumeSlider.val(initialVolume);
+            volumeSlider.val(initialVolume).slider('refresh');
             updateVolumeButtons(initialVolume);
 
             videoElement.on("volumechange", function () {
@@ -1322,7 +1288,7 @@
             if (currentMediaElement) {
                 currentMediaElement.volume = Math.max(currentMediaElement.volume - .02, 0);
 
-                volumeSlider.val(currentMediaElement.volume);
+                volumeSlider.val(currentMediaElement.volume).slider('refresh');
             }
         };
 
@@ -1331,7 +1297,7 @@
             if (currentMediaElement) {
                 currentMediaElement.volume = Math.min(currentMediaElement.volume + .02, 1);
 
-                volumeSlider.val(currentMediaElement.volume);
+                volumeSlider.val(currentMediaElement.volume).slider('refresh');
             }
         };
 

dashboard-ui/scripts/site.js

@@ -1269,37 +1269,45 @@ $(ApiClient).on("websocketmessage", Dashboard.onWebSocketMessageReceived);
 
 $(function () {
 
-    var footerHtml = '<div id="footer" class="ui-bar-a">';
+    var footerHtml = '<div id="footer" data-theme="b" class="ui-bar-b">';
-    footerHtml += '<div id="nowPlayingBar" style="display:none;">';
+    footerHtml += '<div id="nowPlayingBar" class="nowPlayingBar" style="display:none;">';
-    footerHtml += '<div class="barBackground"></div>';
+    footerHtml += '<div class="barBackground ui-bar-b"></div>';
-    footerHtml += '<a id="playlistButton" class="imageButton mediaButton" href="playlist.html"><img src="css/images/media/playlist.png" /></a>';
+    footerHtml += '<div style="display:inline-block;width:12px;"></div>';
-    footerHtml += '<button id="previousTrackButton" class="imageButton mediaButton" title="Previous Track" type="button" onclick="MediaPlayer.previousTrack();"><img src="css/images/media/previoustrack.png" /></button>';
+    footerHtml += '<a id="playlistButton" class="mediaButton" href="playlist.html" data-role="button" data-icon="bullets" data-iconpos="notext" data-inline="true" title="Playlist">Playlist</a>';
-    footerHtml += '<button id="playButton" class="imageButton mediaButton" title="Play" type="button" onclick="MediaPlayer.unpause();"><img src="css/images/media/play.png" /></button>';
+    footerHtml += '<button id="previousTrackButton" class="mediaButton" title="Previous Track" type="button" onclick="MediaPlayer.previousTrack();" data-icon="previous-track" data-iconpos="notext" data-inline="true">Previous Track</button>';
-    footerHtml += '<button id="pauseButton" class="imageButton mediaButton" title="Pause" type="button" onclick="MediaPlayer.pause();"><img src="css/images/media/pause.png" /></button>';
+    footerHtml += '<button id="playButton" class="mediaButton" title="Play" type="button" onclick="MediaPlayer.unpause();" data-icon="play" data-iconpos="notext" data-inline="true">Play</button>';
-    footerHtml += '<button id="stopButton" class="imageButton mediaButton" title="Stop" type="button" onclick="MediaPlayer.stop();"><img src="css/images/media/stop.png" /></button>';
+    footerHtml += '<button id="pauseButton" class="mediaButton" title="Pause" type="button" onclick="MediaPlayer.pause();" data-icon="pause" data-iconpos="notext" data-inline="true">Pause</button>';
-    footerHtml += '<button id="nextTrackButton" class="imageButton mediaButton" title="Next Track" type="button" onclick="MediaPlayer.nextTrack();"><img src="css/images/media/nexttrack.png" /></button>';
+    footerHtml += '<button id="stopButton" class="mediaButton" title="Stop" type="button" onclick="MediaPlayer.stop();" data-icon="stop" data-iconpos="notext" data-inline="true">Stop</button>';
-    footerHtml += '<input type="range" class="mediaSlider positionSlider" step=".001" min="0" max="100" value="0" />';
+    footerHtml += '<button id="nextTrackButton" class="mediaButton" title="Next Track" type="button" onclick="MediaPlayer.nextTrack();" data-icon="next-track" data-iconpos="notext" data-inline="true">Next Track</button>';
+
+    footerHtml += '<div class="positionSliderContainer sliderContainer">';
+    footerHtml += '<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" />';
+    footerHtml += '</div>';
+
     footerHtml += '<div class="currentTime"></div>';
     footerHtml += '<div id="mediaElement"></div>';
     footerHtml += '<div class="nowPlayingMediaInfo"></div>';
 
-    footerHtml += '<button id="muteButton" onclick="MediaPlayer.mute();" class="imageButton mediaButton volumeButton" title="Volume" type="button"><img src="css/images/media/volume.png" /></button>';
+    footerHtml += '<button id="muteButton" class="mediaButton" title="Mute" type="button" onclick="MediaPlayer.mute();" data-icon="audio" data-iconpos="notext" data-inline="true">Mute</button>';
-    footerHtml += '<button id="unmuteButton" onclick="MediaPlayer.unmute();" class="imageButton mediaButton volumeButton" title="Volume" type="button"><img src="css/images/media/mute.png" /></button>';
+    footerHtml += '<button id="unmuteButton" class="mediaButton" title="Unmute" type="button" onclick="MediaPlayer.unmute();" data-icon="volume-off" data-iconpos="notext" data-inline="true">Unmute</button>';
-    footerHtml += '<input type="range" class="mediaSlider volumeSlider" step=".05" min="0" max="1" value="0" />';
 
-    footerHtml += '<button onclick="MediaPlayer.showQualityFlyout();" id="qualityButton" class="imageButton mediaButton qualityButton" title="Quality" type="button"><img src="css/images/media/quality.png" /></button>';
+    footerHtml += '<div class="volumeSliderContainer sliderContainer">';
+    footerHtml += '<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" />';
+    footerHtml += '</div>';
+
+    footerHtml += '<button onclick="MediaPlayer.showQualityFlyout();" id="qualityButton" class="mediaButton qualityButton" title="Quality" type="button" data-icon="gear" data-iconpos="notext" data-inline="true">Quality</button>';
     footerHtml += '<div class="mediaFlyoutContainer"><div id="qualityFlyout" style="display:none;" class="mediaPlayerFlyout"></div></div>';
 
-    footerHtml += '<button onclick="MediaPlayer.showAudioTracksFlyout();" id="audioTracksButton" class="imageButton mediaButton audioTracksButton" title="Audio tracks" type="button"><img src="css/images/media/audiotrack.png" /></button>';
+    footerHtml += '<button onclick="MediaPlayer.showAudioTracksFlyout();" id="audioTracksButton" class="imageButton mediaButton audioTracksButton" title="Audio tracks" type="button" data-icon="audiocd" data-iconpos="notext" data-inline="true">Audio Tracks</button>';
     footerHtml += '<div class="mediaFlyoutContainer"><div id="audioTracksFlyout" style="display:none;" class="mediaPlayerFlyout audioTracksFlyout"></div></div>';
 
-    footerHtml += '<button onclick="MediaPlayer.showSubtitleMenu();" id="subtitleButton" class="imageButton mediaButton subtitleButton" title="Subtitles" type="button"><img src="css/images/media/subtitles.png" /></button>';
+    footerHtml += '<button onclick="MediaPlayer.showSubtitleMenu();" id="subtitleButton" class="imageButton mediaButton subtitleButton" title="Subtitles" type="button" data-icon="subtitles" data-iconpos="notext" data-inline="true">Subtitles</button>';
     footerHtml += '<div class="mediaFlyoutContainer"><div id="subtitleFlyout" style="display:none;" class="mediaPlayerFlyout subtitleFlyout"></div></div>';
 
-    footerHtml += '<button onclick="MediaPlayer.showChaptersFlyout();" id="chaptersButton" class="imageButton mediaButton chaptersButton" title="Scenes" type="button"><img src="css/images/media/chapters.png" /></button>';
+    footerHtml += '<button onclick="MediaPlayer.showChaptersFlyout();" id="chaptersButton" class="mediaButton chaptersButton" title="Scenes" type="button" data-icon="video" data-iconpos="notext" data-inline="true">Scenes</button>';
     footerHtml += '<div class="mediaFlyoutContainer"><div id="chaptersFlyout" style="display:none;" class="mediaPlayerFlyout chaptersFlyout"></div></div>';
 
-    footerHtml += '<button onclick="MediaPlayer.toggleFullscreen();" id="fullscreenButton" class="imageButton mediaButton fullscreenButton" title="Fullscreen" type="button"><img src="css/images/media/fullscreen.png" /></button>';
+    footerHtml += '<button onclick="MediaPlayer.toggleFullscreen();" id="fullscreenButton" class="mediaButton fullscreenButton" title="Fullscreen" type="button" data-icon="action" data-iconpos="notext" data-inline="true">Fullscreen</button>';
 
     footerHtml += '</div>';
 
@@ -1308,6 +1316,9 @@ $(function () {
 
     $(document.body).append(footerHtml);
 
+    var footerElem = $('#footer', document.body);
+    footerElem.trigger('create');
+
     $(window).on("beforeunload", function () {
 
         // Close the connection gracefully when possible