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 3dec7de76..6dd6ea494 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 574fd0a5d..74017ff11 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 4b2b59ef9..15677d1f1 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 7dbbd9b79..66ba7a2c2 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 6dd6ea494..b523c4199 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 74017ff11..f99496189 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 66ba7a2c2..be0df1123 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 += '';