audio fixes for ie10

dashboard-ui/css/site.css

@@ -765,29 +765,37 @@ progress {
 }
 
 .mediaSlider {
-    -webkit-appearance: none;
-    -moz-apperance: none;
-    background: #777;
-    border-radius: 5px;
-    vertical-align: bottom;
     position: relative;
-    top: -17px;
+    top: -10px;
-    height: 3px;
     width: 50px;
 }
 
-    .mediaSlider::-webkit-slider-thumb {
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+    /* IE10 won't see this (good) '*/
+    .mediaSlider {
         -webkit-appearance: none;
         -moz-apperance: none;
-        width: 15px;
+        background: #777;
-        height: 15px;
+        border-radius: 5px;
-        -webkit-border-radius: 10px;
+        vertical-align: bottom;
-        -moz-border-radius: 10px;
+        height: 3px;
-        -ms-border-radius: 10px;
+        top: -17px;
-        -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) );
     }
+}
+
+
+.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;
@@ -797,6 +805,41 @@ progress {
     margin-right: .5em!important;
 }
 
+::-ms-fill-lower {
+    background: #777;
+}
+
+::-ms-fill-upper {
+    background: #777;
+}
+
+::-ms-thumb {
+    background: #000;
+    border-radius: 5px;
+    border: 1px solid #000;
+}
+
+::-ms-ticks-after {
+    display: none;
+    color: #777!important;
+    background: #777;
+}
+
+::-ms-ticks-before {
+    display: none;
+    color: #777!important;
+    background: #777;
+}
+
+::-ms-track {
+    padding: 0;
+    border: 0;
+}
+
+::-ms-tooltip {
+    display: none; /* display and visibility only */
+}
+
 @media all and (min-width: 650px) {
 
     .itemVideo {

dashboard-ui/scripts/mediaplayer.js

@@ -42,6 +42,7 @@
 
         function onPlaybackStopped() {
 
+            console.log('ended');
             currentTimeElement.hide();
 
             var endTime = this.currentTime;
@@ -65,13 +66,19 @@
 
             currentProgressInterval = setInterval(function () {
 
-                var position = Math.floor(10000000 * currentMediaElement.currentTime) + startTimeTicksOffset;
+                if (currentMediaElement) {
-
+                    sendProgressUpdate(itemId);
-                ApiClient.reportPlaybackProgress(Dashboard.getCurrentUserId(), itemId, position);
+                }
 
             }, intervalTime);
         }
 
+        function sendProgressUpdate(itemId) {
+            var position = Math.floor(10000000 * currentMediaElement.currentTime) + startTimeTicksOffset;
+
+            ApiClient.reportPlaybackProgress(Dashboard.getCurrentUserId(), itemId, position);
+        }
+
         function clearProgressInterval() {
 
             if (currentProgressInterval) {
@@ -94,6 +101,8 @@
                 currentMediaElement.volume = vol;
             });
 
+            $(".jqueryuislider").slider({ orientation: "horizontal" });
+
             positionSlider = $(".positionSlider").on('change', function () {
 
                 isPositionSliderActive = true;
@@ -132,6 +141,7 @@
 
                         $(this).off('play.onceafterseek').on('ended.playbackstopped', onPlaybackStopped);
                         startProgressInterval(currentItem.Id);
+                        sendProgressUpdate(currentItem.Id);
 
                     });
                     startTimeTicksOffset = newPositionTicks;
@@ -252,10 +262,15 @@
 
             var audioElement = $("audio", nowPlayingBar);
 
+            var initialVolume = localStorage.getItem("volume") || 0.5;
+
             audioElement.each(function () {
-                this.volume = localStorage.getItem("volume") || 0.5;
+                this.volume = initialVolume;
             });
 
+            volumeSlider.val(initialVolume);
+            updateVolumeButtons(initialVolume);
+
             audioElement.on("volumechange", function () {
 
                 var vol = this.volume;
@@ -270,9 +285,8 @@
                 isStaticStream = duration && !isNaN(duration) && duration != Number.POSITIVE_INFINITY && duration != Number.NEGATIVE_INFINITY;
 
                 currentTimeElement.show();
-                audioElement.removeAttr('controls').hide().off("play.once");
 
-                updateVolumeButtons(this.volume);
+                audioElement.removeAttr('controls').hide().off("play.once");
 
                 ApiClient.reportPlaybackStart(Dashboard.getCurrentUserId(), item.Id);
 
@@ -293,7 +307,7 @@
                 if (!isPositionSliderActive) {
 
                     var ticks = startTimeTicksOffset + this.currentTime * 1000 * 10000;
-                    
+
                     setCurrentTime(ticks, item, true);
                 }
 
@@ -698,6 +712,8 @@
                 player.destroy();
             } else {
                 elem.pause();
+
+                $(elem).trigger('ended');
                 elem.src = "";
             }