first pass at custom audio player

dashboard-ui/css/site.css

@@ -697,10 +697,15 @@ progress {
 
 /* Now playing bar */
 #nowPlayingBar {
-    padding: 8px 20px;
+    padding: 6px .5em;
     border-top: 2px solid #D7742B;
 }
 
+
+    #nowPlayingBar > *:not(#mediaElement) {
+        margin: 0 1em;
+    }
+
 .nowPlayingBarImage {
     border: 1px solid #a7a7a7;
     padding: 1px;
@@ -708,12 +713,12 @@ progress {
 }
 
 .mediaButton {
-    margin: 0 20px 0 0;
     display: inline-block;
+    position: relative;
+    top: -4px;
 }
 
 #mediaElement {
-    margin-right: 20px;
     display: inline-block;
     position: relative;
 }
@@ -722,23 +727,27 @@ progress {
         width: 270px;
     }
 
-#nowPlayingBar #mediaInfo, #nowPlayingBar #mediaInfo div {
+.nowPlayingMediaInfo div {
-    margin-left: 10px;
     display: inline-block;
 }
 
-#nowPlayingBar #mediaInfo {
+.nowPlayingMediaInfo a {
+    margin-right: .25em;
+}
+
+
+.nowPlayingMediaInfo {
     display: none;
 }
 
 @media all and (min-width: 650px) {
-    #nowPlayingBar #mediaInfo {
+    .nowPlayingMediaInfo {
         display: inline-block;
     }
 }
 
 .mediaButton img {
-    height: 28px;
+    height: 24px;
 }
 
 .itemVideo, .itemVideo.video-js {
@@ -749,6 +758,45 @@ progress {
     bottom: -5px;
 }
 
+.currentTime {
+    display: inline-block;
+    position: relative;
+    top: -10px;
+}
+
+.mediaSlider {
+    -webkit-appearance: none;
+    -moz-apperance: none;
+    background: #777;
+    border-radius: 5px;
+    vertical-align: bottom;
+    position: relative;
+    top: -17px;
+    height: 3px;
+    width: 50px;
+}
+
+    .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;
+}
+
+.volumeButton {
+    margin-right: .5em!important;
+}
+
 @media all and (min-width: 650px) {
 
     .itemVideo {

dashboard-ui/scripts/mediaplayer.js

@@ -1,4 +1,4 @@
-(function (document, clearTimeout, screen, localStorage, _V_, $, setInterval, window) {
+(function (document, setTimeout, clearTimeout, screen, localStorage, _V_, $, setInterval, window) {
 
     function mediaPlayer() {
         var self = this;
@@ -7,14 +7,149 @@
         var testableVideoElement = document.createElement('video');
         var currentMediaElement;
         var currentProgressInterval;
+        var positionSlider;
+        var isPositionSliderActive;
+        var currentTimeElement;
+        var currentItem;
+        var volumeSlider;
+        var muteButton;
+        var unmuteButton;
+        var startTimeTicksOffset;
+        var curentDurationTicks;
+        var isStaticStream;
 
-	    if (typeof(self.playing) == 'undefined') {
         self.playing = '';
+        self.queue = [];
+
+        function replaceQueryString(url, param, value) {
+            var re = new RegExp("([?|&])" + param + "=.*?(&|$)", "i");
+            if (url.match(re))
+                return url.replace(re, '$1' + param + "=" + value + '$2');
+            else
+                return url + '&' + param + "=" + value;
         }
 
-	    if (typeof(self.queue) == 'undefined') {
+        function updateVolumeButtons(vol) {
-		    self.queue = [];
+
+            if (vol) {
+                muteButton.show();
+                unmuteButton.hide();
+            } else {
+                muteButton.hide();
+                unmuteButton.show();
             }
+        }
+
+        function onPlaybackStopped() {
+
+            currentTimeElement.hide();
+
+            var endTime = this.currentTime;
+
+            this.currentTime = 0;
+
+            clearProgressInterval();
+
+            var position = Math.floor(10000000 * endTime) + startTimeTicksOffset;
+
+            ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), currentItem.Id, position);
+
+            MediaPlayer.queuePlayNext();
+        }
+
+        function startProgressInterval(itemId) {
+
+            clearProgressInterval();
+
+            var intervalTime = ApiClient.isWebSocketOpen() ? 10000 : 30000;
+
+            currentProgressInterval = setInterval(function () {
+
+                var position = Math.floor(10000000 * currentMediaElement.currentTime) + startTimeTicksOffset;
+
+                ApiClient.reportPlaybackProgress(Dashboard.getCurrentUserId(), itemId, position);
+
+            }, intervalTime);
+        }
+
+        function clearProgressInterval() {
+
+            if (currentProgressInterval) {
+                clearTimeout(currentProgressInterval);
+                currentProgressInterval = null;
+            }
+        }
+
+        $(function () {
+
+            muteButton = $('#muteButton');
+            unmuteButton = $('#unmuteButton');
+
+            currentTimeElement = $('.currentTime');
+
+            volumeSlider = $('.volumeSlider').on('change', function () {
+
+                var vol = this.value;
+                updateVolumeButtons(vol);
+                currentMediaElement.volume = vol;
+            });
+
+            positionSlider = $(".positionSlider").on('change', function () {
+
+                isPositionSliderActive = true;
+
+                setCurrentTimePercent(parseInt(this.value), currentItem);
+
+            }).on('changed', function () {
+
+                isPositionSliderActive = false;
+
+                var element = currentMediaElement;
+
+                var newPercent = parseInt(this.value);
+
+                var newPositionTicks = (newPercent / 100) * currentItem.RunTimeTicks;
+
+                if (isStaticStream) {
+
+                    element.currentTime = newPositionTicks / (1000 * 10000);
+
+                } else {
+
+                    var currentSrc = element.currentSrc;
+
+                    if (currentSrc.toLowerCase().indexOf('starttimeticks') == -1) {
+
+                        currentSrc += "&starttimeticks=" + newPositionTicks;
+
+                    } else {
+                        currentSrc = replaceQueryString(currentSrc, 'starttimeticks', newPositionTicks);
+                    }
+
+                    clearProgressInterval();
+
+                    $(element).off('ended.playbackstopped').on("play.onceafterseek", function () {
+
+                        $(this).off('play.onceafterseek').on('ended.playbackstopped', onPlaybackStopped);
+                        startProgressInterval(currentItem.Id);
+
+                    });
+                    startTimeTicksOffset = newPositionTicks;
+
+                    element.src = currentSrc;
+                }
+            });
+
+            (function (el, timeout) {
+                var timer, trig = function () { el.trigger("changed"); };
+                el.bind("change", function () {
+                    if (timer) {
+                        clearTimeout(timer);
+                    }
+                    timer = setTimeout(trig, timeout);
+                });
+            })(positionSlider, 500);
+        });
 
         function endsWith(text, pattern) {
 
@@ -25,9 +160,35 @@
             return d >= 0 && text.lastIndexOf(pattern) === d;
         }
 
-        function playAudio(item, params) {
+        function setCurrentTimePercent(percent, item) {
 
-            var volume = localStorage.getItem("volume") || 0.5;
+            var position = (percent / 100) * curentDurationTicks;
+            setCurrentTime(position, item, false);
+        }
+
+        function setCurrentTime(ticks, item, updateSlider) {
+
+            // Convert to ticks
+            ticks = Math.floor(ticks);
+
+            var timeText = DashboardPage.getDisplayText(ticks);
+
+            if (curentDurationTicks) {
+
+                timeText += " / " + DashboardPage.getDisplayText(curentDurationTicks);
+
+                if (updateSlider) {
+                    var percent = ticks / curentDurationTicks;
+                    percent *= 100;
+
+                    positionSlider.val(percent);
+                }
+            }
+
+            currentTimeElement.html(timeText);
+        }
+
+        function playAudio(item, params) {
 
             var baseParams = {
                 audioChannels: 2,
@@ -68,58 +229,82 @@
 
             }
 
-            /* ffmpeg always says the ogg stream is corrupt after conversion
-             var oggUrl = ApiClient.getUrl('Audio/' + item.Id + '/stream.oga', $.extend({}, baseParams, {
-             audioCodec: 'Vorbis'
-             }));
-             */
-
             var html = '';
-            html += '<audio class="itemAudio" preload="none" controls autoplay>';
+
+            var attributes = "autoplay";
+
+            if ($.browser.ipad || $.browser.iphone || $.browser.android) {
+                attributes += " controls";
+            }
+            html += '<audio preload="auto" ' + attributes + '>';
             html += '<source type="audio/mpeg" src="' + mp3Url + '" />';
             html += '<source type="audio/aac" src="' + aacUrl + '" />';
             html += '<source type="audio/webm" src="' + webmUrl + '" />';
-            //html += '<source type="audio/ogg" src="' + oggUrl + '" />';
             html += '</audio';
 
             var nowPlayingBar = $('#nowPlayingBar').show();
             //show stop button
             $('#stopButton', nowPlayingBar).show();
+            $('#playButton', nowPlayingBar).hide();
+            $('#pauseButton', nowPlayingBar).show();
 
             $('#mediaElement', nowPlayingBar).html(html);
 
-            $(".itemAudio").each(function () {
+            var audioElement = $("audio", nowPlayingBar);
-                this.volume = volume;
+
+            audioElement.each(function () {
+                this.volume = localStorage.getItem("volume") || 0.5;
             });
 
-            $(".itemAudio").on("ended", function () {
+            audioElement.on("volumechange", function () {
-                MediaPlayer.stopAudio(item.Id);
 
-	            MediaPlayer.queuePlayNext();
+                var vol = this.volume;
-            });
 
-            $(".itemAudio").on("volumechange", function () {
+                localStorage.setItem("volume", vol);
-                localStorage.setItem("volume", this.volume);
-            });
 
-            $(".itemAudio").on("play", updateAudioProgress(item.Id));
+                updateVolumeButtons(vol);
+
+            }).on("play.once", function () {
+
+                var duration = this.duration;
+                isStaticStream = duration && !isNaN(duration) && duration != Number.POSITIVE_INFINITY && duration != Number.NEGATIVE_INFINITY;
+
+                currentTimeElement.show();
+                audioElement.removeAttr('controls').hide().off("play.once");
+
+                updateVolumeButtons(this.volume);
+
+                ApiClient.reportPlaybackStart(Dashboard.getCurrentUserId(), item.Id);
+
+                startProgressInterval(item.Id);
+
+            }).on("pause", function () {
+
+                $('#playButton', nowPlayingBar).show();
+                $('#pauseButton', nowPlayingBar).hide();
+
+            }).on("playing", function () {
+
+                $('#playButton', nowPlayingBar).hide();
+                $('#pauseButton', nowPlayingBar).show();
+
+            }).on("timeupdate", function () {
+
+                if (!isPositionSliderActive) {
+
+                    var ticks = startTimeTicksOffset + this.currentTime * 1000 * 10000;
+                    
+                    setCurrentTime(ticks, item, true);
+                }
+
+            }).on("ended.playbackstopped", onPlaybackStopped);
 
             MediaPlayer.nowPlaying(item);
 
-            return $('audio', nowPlayingBar)[0];
+            currentItem = item;
-        }
+            curentDurationTicks = item.RunTimeTicks;
 
-        function updateAudioProgress(itemId) {
+            return audioElement[0];
-            ApiClient.reportPlaybackStart(Dashboard.getCurrentUserId(), itemId);
-
-            currentProgressInterval = setInterval(function () {
-                var position;
-                $(".itemAudio").each(function () {
-                    position = Math.floor(10000000 * this.currentTime);
-                });
-
-                ApiClient.reportPlaybackProgress(Dashboard.getCurrentUserId(), itemId, position);
-            }, 30000);
         }
 
         function playVideo(item, startPosition) {
@@ -326,6 +511,8 @@
                 mediaElement = playAudio(item);
             }
 
+            startTimeTicksOffset = startPosition || 0;
+
             if (!mediaElement) {
                 return;
             }
@@ -392,7 +579,7 @@
             else
                 html += '<div>' + seriesName + '<br/>' + name + '</div>';
 
-            $('#mediaInfo', nowPlayingBar).html(html);
+            $('.nowPlayingMediaInfo', nowPlayingBar).html(html);
         };
 
         self.playById = function (id, startPositionTicks) {
@@ -405,8 +592,6 @@
 
         };
 
-
-
         self.nowPlaying = function (item) {
             self.playing = item;
         };
@@ -445,13 +630,13 @@
         self.queueAddNext = function (item) {
             if (typeof self.queue[0] != "undefined") {
                 self.queue.unshift(item);
-		    }else {
+            } else {
                 self.queueAdd(item);
             }
         };
 
         self.inQueue = function (item) {
-		    $.each(MediaPlayer.queue, function(i, queueItem){
+            $.each(MediaPlayer.queue, function (i, queueItem) {
                 if (item.Id == queueItem.Id) {
                     return true;
                 }
@@ -471,6 +656,22 @@
             });
         };
 
+        self.pause = function () {
+            currentMediaElement.pause();
+        };
+
+        self.unpause = function () {
+            currentMediaElement.play();
+        };
+
+        self.mute = function () {
+            currentMediaElement.volume = 0;
+        };
+
+        self.unmute = function () {
+            currentMediaElement.volume = volumeSlider.val();
+        };
+
         self.stop = function () {
 
             var elem = currentMediaElement;
@@ -496,8 +697,6 @@
                 //player.tech.destroy();
                 player.destroy();
             } else {
-                self.stopAudio();
-
                 elem.pause();
                 elem.src = "";
             }
@@ -527,22 +726,6 @@
             }
         };
 
-        self.stopAudio = function () {
-            var itemString = $(".itemAudio source").attr('src').match(new RegExp("Audio/[0-9a-z\-]+", "g"));
-            var itemId = itemString[0].replace("Audio/", "");
-
-            var position;
-            $(".itemAudio").each(function () {
-                position = Math.floor(10000000 * this.currentTime);
-            });
-
-            ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), itemId, position);
-
-            if (currentProgressInterval) {
-                clearTimeout(currentProgressInterval);
-            }
-        };
-
         self.isPlaying = function () {
             return currentMediaElement;
         };
@@ -550,4 +733,4 @@
 
     window.MediaPlayer = new mediaPlayer();
 
-})(document, clearTimeout, screen, localStorage, _V_, $, setInterval, window);
+})(document, setTimeout, clearTimeout, screen, localStorage, _V_, $, setInterval, window);

dashboard-ui/scripts/site.js

@@ -1106,11 +1106,21 @@ $(function () {
     footerHtml += '<div id="nowPlayingBar" style="display:none;">';
     footerHtml += '<a class="imageButton mediaButton" href="playlist.html"><img src="css/images/media/playlist.png" /></a>';
     footerHtml += '<button id="previousTrackButton" class="imageButton mediaButton" title="Previous Track" type="button"><img src="css/images/media/previoustrack.png" /></button>';
+    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="pauseButton" class="imageButton mediaButton" title="Pause" type="button" onclick="MediaPlayer.pause();"><img src="css/images/media/pause.png" /></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="nextTrackButton" class="imageButton mediaButton" title="Next Track" type="button"><img src="css/images/media/nexttrack.png" /></button>';
+    footerHtml += '<input type="range" class="mediaSlider positionSlider" step=".001" min="0" max="100" value="0" />';
+    footerHtml += '<div class="currentTime"></div>';
     footerHtml += '<div id="mediaElement"></div>';
-    footerHtml += '<div id="mediaInfo"></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="unmuteButton" onclick="MediaPlayer.unmute();" class="imageButton mediaButton volumeButton" title="Volume" type="button"><img src="css/images/media/mute.png" /></button>';
+    footerHtml += '<input type="range" class="mediaSlider volumeSlider" step=".05" min="0" max="1" value="0" />';
+
     footerHtml += '</div>';
+
     footerHtml += '<div id="footerNotifications"></div>';
     footerHtml += '</div>';