Add playlist forward and back controls to video player

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;
 }

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);

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;
+                    self.setPlaylistState(0, items);
-                    currentPlaylistIndex = 0;
                 });
 
                 return;
@@ -518,8 +517,7 @@
 
                 items = intros.Items.concat(items);
                 self.playInternal(items[0], options.startPositionTicks, function () {
-                    self.playlist = items;
+                    self.setPlaylistState(0, items);
-                    currentPlaylistIndex = 0;
                 });
 
             });
@@ -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);
                     });
                 }
             }

dashboard-ui/scripts/site.js

@@ -1399,6 +1399,10 @@ $(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="imageButton 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>';