From c97609181a2081a55a33758e69508edf476893b2 Mon Sep 17 00:00:00 2001 From: "T. Adams" Date: Fri, 13 Mar 2015 01:58:50 -0700 Subject: [PATCH 1/2] Add playlist forward and back controls to video player --- dashboard-ui/css/mediaplayer-video.css | 6 ++++ dashboard-ui/scripts/mediaplayer-video.js | 37 +++++++++++++++++++++++ dashboard-ui/scripts/mediaplayer.js | 25 ++++++++++----- dashboard-ui/scripts/site.js | 4 +++ 4 files changed, 65 insertions(+), 7 deletions(-) diff --git a/dashboard-ui/css/mediaplayer-video.css b/dashboard-ui/css/mediaplayer-video.css index 3dec7de764..6dd6ea494c 100644 --- a/dashboard-ui/css/mediaplayer-video.css +++ b/dashboard-ui/css/mediaplayer-video.css @@ -61,6 +61,12 @@ vertical-align: top; } +.videoAdvancedControls .currentPlaylistState { + display: inline-block; + line-height: 44px; + margin-right: 10px; +} + .videoControls .currentTime { margin-top: 25px; } diff --git a/dashboard-ui/scripts/mediaplayer-video.js b/dashboard-ui/scripts/mediaplayer-video.js index 574fd0a5d6..74017ff11e 100644 --- a/dashboard-ui/scripts/mediaplayer-video.js +++ b/dashboard-ui/scripts/mediaplayer-video.js @@ -472,6 +472,14 @@ tooltip.remove(); }); + $('.videoPreviousButton').on('click', function () { + self.previousTrack(); + }); + + $('.videoNextButton').on('click', function () { + self.nextTrack(); + }); + $('.videoSubtitleButton').on('click', function () { self.showSubtitleMenu(); @@ -1329,6 +1337,35 @@ return video[0]; }; + + self.updatePlaylistUi = function () { + var index = self.currentPlaylistIndex(null), + length = self.playlist.length; + + if (length < 2) { + $('.videoTrackControl').hide(); + return; + } + + console.log('Index: ' + index); + + $('.currentPlaylistIndex').text(index + 1); + $('.currentPlaylistLength').text(length); + + if (index === 0) { + $('.videoPreviousButton').attr('disabled', 'disabled'); + } else { + $('.videoPreviousButton').removeAttr('disabled'); + } + + if ((index + 1) >= length) { + $('.videoNextButton').attr('disabled', 'disabled'); + } else { + $('.videoNextButton').removeAttr('disabled'); + } + + $('.videoTrackControl').show(); + }; } createVideoPlayer(MediaPlayer); diff --git a/dashboard-ui/scripts/mediaplayer.js b/dashboard-ui/scripts/mediaplayer.js index 4b2b59ef96..15677d1f1f 100644 --- a/dashboard-ui/scripts/mediaplayer.js +++ b/dashboard-ui/scripts/mediaplayer.js @@ -507,8 +507,7 @@ if (options.startPositionTicks || firstItem.MediaType !== 'Video' || !self.canAutoPlayVideo()) { self.playInternal(firstItem, options.startPositionTicks, function () { - self.playlist = items; - currentPlaylistIndex = 0; + self.setPlaylistState(0, items); }); return; @@ -518,8 +517,7 @@ items = intros.Items.concat(items); self.playInternal(items[0], options.startPositionTicks, function () { - self.playlist = items; - currentPlaylistIndex = 0; + self.setPlaylistState(0, items); }); }); @@ -721,10 +719,23 @@ var newItem = self.playlist[i]; self.playInternal(newItem, 0, function () { - currentPlaylistIndex = i; + self.setPlaylistState(i); }); }; + // Set currentPlaylistIndex and playlist. Using a method allows for overloading in derived player implementations + self.setPlaylistState = function (i, items) { + if (!isNaN(i)) { + currentPlaylistIndex = i; + } + if (items) { + self.playlist = items; + } + if (self.updatePlaylistUi) { + self.updatePlaylistUi(); + } + }; + self.nextTrack = function () { var newIndex = currentPlaylistIndex + 1; @@ -735,7 +746,7 @@ console.log('playing next track'); self.playInternal(newItem, 0, function () { - currentPlaylistIndex = newIndex; + self.setPlaylistState(newIndex); }); } }; @@ -747,7 +758,7 @@ if (newItem) { self.playInternal(newItem, 0, function () { - currentPlaylistIndex = newIndex; + self.setPlaylistState(newIndex); }); } } diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js index 7dbbd9b792..66ba7a2c2c 100644 --- a/dashboard-ui/scripts/site.js +++ b/dashboard-ui/scripts/site.js @@ -1399,6 +1399,10 @@ $(function () { videoPlayerHtml += ''; videoPlayerHtml += '
'; + videoPlayerHtml += ''; + videoPlayerHtml += '
 / 
' + videoPlayerHtml += ''; + videoPlayerHtml += ''; videoPlayerHtml += '
'; From 7ab25fd11c2e0df3b912323fb05e3579a433c4f2 Mon Sep 17 00:00:00 2001 From: "T. Adams" Date: Fri, 13 Mar 2015 23:24:42 -0700 Subject: [PATCH 2/2] Reuse existing audio track controls on desktop Use new top trakc controls on mobile Modify media queries to account for width of two extra buttons in mediaControls Remove playlist index information to avoid cluttering UI --- dashboard-ui/css/mediaplayer-video.css | 16 ++++++------ dashboard-ui/scripts/mediaplayer-video.js | 30 +++++++---------------- dashboard-ui/scripts/site.js | 13 +++++----- 3 files changed, 22 insertions(+), 37 deletions(-) diff --git a/dashboard-ui/css/mediaplayer-video.css b/dashboard-ui/css/mediaplayer-video.css index 6dd6ea494c..b523c4199b 100644 --- a/dashboard-ui/css/mediaplayer-video.css +++ b/dashboard-ui/css/mediaplayer-video.css @@ -61,12 +61,6 @@ vertical-align: top; } -.videoAdvancedControls .currentPlaylistState { - display: inline-block; - line-height: 44px; - margin-right: 10px; -} - .videoControls .currentTime { margin-top: 25px; } @@ -168,6 +162,10 @@ .videoControls .nowPlayingText { max-width: 160px; } + + #mediaPlayer .nowPlayingImage { + display: none; + } } @media all and (max-width: 960px), all and (max-height: 550px) { @@ -190,8 +188,8 @@ } } -@media all and (max-width: 500px) { - #mediaPlayer .previousTrackButton, #mediaPlayer .nextTrackButton { +@media all and (max-width: 555px) { + #mediaPlayer .videoControls .previousTrackButton, #mediaPlayer .videoControls .nextTrackButton { display: none!important; } .videoTopControlsLogo { @@ -205,7 +203,7 @@ } } -@media all and (min-width: 1200px) { +@media all and (min-width: 1300px) { #videoPlayer .nowPlayingInfo img { height: auto !important; max-width: 150px; diff --git a/dashboard-ui/scripts/mediaplayer-video.js b/dashboard-ui/scripts/mediaplayer-video.js index 74017ff11e..f99496189d 100644 --- a/dashboard-ui/scripts/mediaplayer-video.js +++ b/dashboard-ui/scripts/mediaplayer-video.js @@ -472,14 +472,6 @@ tooltip.remove(); }); - $('.videoPreviousButton').on('click', function () { - self.previousTrack(); - }); - - $('.videoNextButton').on('click', function () { - self.nextTrack(); - }); - $('.videoSubtitleButton').on('click', function () { self.showSubtitleMenu(); @@ -1174,8 +1166,7 @@ //show stop button $('#video-playButton', videoControls).hide(); $('#video-pauseButton', videoControls).show(); - $('#video-previousTrackButton', videoControls).hide(); - $('#video-nextTrackButton', videoControls).hide(); + $('.videoTrackControl').hide(); var videoElement = $('#videoElement', mediaPlayerContainer).prepend(html); @@ -1340,31 +1331,28 @@ self.updatePlaylistUi = function () { var index = self.currentPlaylistIndex(null), - length = self.playlist.length; + length = self.playlist.length, + requiresNativeControls = !self.canAutoPlayVideo(), + controls = $(requiresNativeControls ? '.videoAdvancedControls' : '.videoControls'); if (length < 2) { $('.videoTrackControl').hide(); return; } - console.log('Index: ' + index); - - $('.currentPlaylistIndex').text(index + 1); - $('.currentPlaylistLength').text(length); - if (index === 0) { - $('.videoPreviousButton').attr('disabled', 'disabled'); + $('.previousTrackButton', controls).attr('disabled', 'disabled'); } else { - $('.videoPreviousButton').removeAttr('disabled'); + $('.previousTrackButton', controls).removeAttr('disabled'); } if ((index + 1) >= length) { - $('.videoNextButton').attr('disabled', 'disabled'); + $('.nextTrackButton', controls).attr('disabled', 'disabled'); } else { - $('.videoNextButton').removeAttr('disabled'); + $('.nextTrackButton', controls).removeAttr('disabled'); } - $('.videoTrackControl').show(); + $('.videoTrackControl', controls).show(); }; } diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js index 66ba7a2c2c..be0df11232 100644 --- a/dashboard-ui/scripts/site.js +++ b/dashboard-ui/scripts/site.js @@ -1399,14 +1399,13 @@ $(function () { videoPlayerHtml += ''; videoPlayerHtml += '
'; - videoPlayerHtml += ''; - videoPlayerHtml += '
 / 
' - videoPlayerHtml += ''; + videoPlayerHtml += ''; + videoPlayerHtml += ''; - videoPlayerHtml += ''; + videoPlayerHtml += ''; videoPlayerHtml += '
'; - videoPlayerHtml += ''; + videoPlayerHtml += ''; videoPlayerHtml += '
'; videoPlayerHtml += ''; @@ -1423,10 +1422,10 @@ $(function () { // Create controls videoPlayerHtml += '
'; - videoPlayerHtml += ''; + videoPlayerHtml += ''; videoPlayerHtml += ''; videoPlayerHtml += ''; - videoPlayerHtml += ''; + videoPlayerHtml += ''; videoPlayerHtml += '
'; videoPlayerHtml += '';