From 7ab25fd11c2e0df3b912323fb05e3579a433c4f2 Mon Sep 17 00:00:00 2001
From: "T. Adams" <t.adams88@gmail.com>
Date: Fri, 13 Mar 2015 23:24:42 -0700
Subject: [PATCH] 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 += '<div class="videoTopControlsLogo"></div>';
     videoPlayerHtml += '<div class="videoAdvancedControls">';
 
-    videoPlayerHtml += '<button class="imageButton mediaButton videoTrackControl videoPreviousButton" title="Previous video" type="button" data-icon="previous-track" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonPreviousVideo') + '</button>';
-    videoPlayerHtml += '<div class="videoTrackControl currentPlaylistState"><span class="currentPlaylistIndex"></span>&nbsp;/&nbsp;<span class="currentPlaylistLength"></span></div>'
-    videoPlayerHtml += '<button class="imageButton mediaButton videoTrackControl videoNextButton" title="Next video" type="button" data-icon="next-track" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonNextVideo') + '</button>';
+    videoPlayerHtml += '<button class="mediaButton videoTrackControl previousTrackButton" title="Previous video" type="button" onclick="MediaPlayer.previousTrack();" data-icon="previous-track" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonPreviousTrack') + '</button>';
+    videoPlayerHtml += '<button class="mediaButton videoTrackControl nextTrackButton" title="Next video" type="button" onclick="MediaPlayer.nextTrack();" data-icon="next-track" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonNextTrack') + '</button>';
 
-    videoPlayerHtml += '<button class="imageButton mediaButton videoAudioButton" title="Audio tracks" type="button" data-icon="audiocd" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonAudioTracks') + '</button>';
+    videoPlayerHtml += '<button class="mediaButton videoAudioButton" title="Audio tracks" type="button" data-icon="audiocd" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonAudioTracks') + '</button>';
     videoPlayerHtml += '<div data-role="popup" class="videoAudioPopup videoPlayerPopup" data-history="false" data-theme="b"></div>';
 
-    videoPlayerHtml += '<button class="imageButton mediaButton videoSubtitleButton" title="Subtitles" type="button" data-icon="subtitles" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonFullscreen') + '</button>';
+    videoPlayerHtml += '<button class="mediaButton videoSubtitleButton" title="Subtitles" type="button" data-icon="subtitles" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonFullscreen') + '</button>';
     videoPlayerHtml += '<div data-role="popup" class="videoSubtitlePopup videoPlayerPopup" data-history="false" data-theme="b"></div>';
 
     videoPlayerHtml += '<button class="mediaButton videoChaptersButton" title="Scenes" type="button" data-icon="video" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonScenes') + '</button>';
@@ -1423,10 +1422,10 @@ $(function () {
     // Create controls
     videoPlayerHtml += '<div class="videoControls hiddenOnIdle">';
 
-    videoPlayerHtml += '<button id="video-previousTrackButton" class="mediaButton previousTrackButton" title="Previous Track" type="button" onclick="MediaPlayer.previousTrack();" data-icon="previous-track" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonPreviousTrack') + '</button>';
+    videoPlayerHtml += '<button id="video-previousTrackButton" class="mediaButton previousTrackButton videoTrackControl" title="Previous Track" type="button" onclick="MediaPlayer.previousTrack();" data-icon="previous-track" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonPreviousTrack') + '</button>';
     videoPlayerHtml += '<button id="video-playButton" class="mediaButton" title="Play" type="button" onclick="MediaPlayer.unpause();" data-icon="play" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonPlay') + '</button>';
     videoPlayerHtml += '<button id="video-pauseButton" class="mediaButton" title="Pause" type="button" onclick="MediaPlayer.pause();" data-icon="pause" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonPause') + '</button>';
-    videoPlayerHtml += '<button id="video-nextTrackButton" class="mediaButton nextTrackButton" title="Next Track" type="button" onclick="MediaPlayer.nextTrack();" data-icon="next-track" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonNextTrack') + '</button>';
+    videoPlayerHtml += '<button id="video-nextTrackButton" class="mediaButton nextTrackButton videoTrackControl" title="Next Track" type="button" onclick="MediaPlayer.nextTrack();" data-icon="next-track" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonNextTrack') + '</button>';
 
     videoPlayerHtml += '<div class="positionSliderContainer sliderContainer">';
     videoPlayerHtml += '<input type="range" class="mediaSlider positionSlider slider" step=".001" min="0" max="100" value="0" style="display:none;" data-mini="true" data-theme="a" data-highlight="true" />';