diff --git a/dashboard-ui/css/site.css b/dashboard-ui/css/site.css index b26ca739ea..982428aff4 100644 --- a/dashboard-ui/css/site.css +++ b/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; - height: 3px; + top: -10px; 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; - 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) ); + background: #777; + border-radius: 5px; + vertical-align: bottom; + height: 3px; + top: -17px; } +} + + +.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 { diff --git a/dashboard-ui/scripts/mediaplayer.js b/dashboard-ui/scripts/mediaplayer.js index 414cd8c4ed..e596f1a5c2 100644 --- a/dashboard-ui/scripts/mediaplayer.js +++ b/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; - - ApiClient.reportPlaybackProgress(Dashboard.getCurrentUserId(), itemId, position); + if (currentMediaElement) { + sendProgressUpdate(itemId); + } }, 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 = ""; }