playlist functionality

dashboard-ui/playlist.html

@@ -10,7 +10,7 @@
 
 	<div data-role="content">
 
-		<table>
+		<table id="playlistTable">
 			<thead>
 				<tr>
 					<th></th>
@@ -18,6 +18,7 @@
 					<th>Series/Album/Year</th>
 					<th>Time</th>
 					<th>Rating</th>
+					<th></th>
 				</tr>
 			</thead>
 			<tfoot>
@@ -31,5 +32,11 @@
 
 	</div>
 </div>
+
+<!-- temp styling -->
+<style>
+	#playlistTable {width:80%;margin:auto;}
+	#playlistTable th, #playlistTable td {padding:4px 10px;}
+</style>
 </body>
 </html>

dashboard-ui/scripts/Itemdetailpage.js

@@ -38,7 +38,7 @@
             if (MediaPlayer.canPlay(item)) {
                 $('#btnPlayMenu', page).show();
                 $('#playButtonShadow', page).show();
-                $('#btnQueueMenu', page).hide();
+                $('#btnQueueMenu', page).show();
             } else {
                 $('#btnPlayMenu', page).hide();
                 $('#playButtonShadow', page).hide();

dashboard-ui/scripts/mediaplayer.js

@@ -50,6 +50,10 @@
 
             $('#mediaElement', nowPlayingBar).html(html);
 
+	        $(".itemAudio").on("ended",function(){
+		        Playlist.playNext();
+	        });
+
             return $('audio', nowPlayingBar)[0];
         }
 
@@ -171,6 +175,12 @@
 
                 (this).addEvent("play", updateProgress);
 
+	            (this).addEvent("ended", function () {
+		            MediaPlayer.stopVideo();
+
+		            Playlist.playNext();
+	            });
+
                 ApiClient.reportPlaybackStart(Dashboard.getCurrentUserId(), item.Id);
             });
 
@@ -314,19 +324,7 @@
             if ($(elem).hasClass("vjs-tech")) {
                 var player = _V_("videoWindow");
 
-                var startTimeTicks = player.tag.src.match(new RegExp("StartTimeTicks=[0-9]+", "g"));
+                self.stopVideo();
-                var startTime = startTimeTicks[0].replace("StartTimeTicks=", "");
-
-                var itemString = player.tag.src.match(new RegExp("Videos/[0-9a-z\-]+", "g"));
-                var itemId = itemString[0].replace("Videos/", "");
-
-                var positionTicks = parseInt(startTime) + Math.floor(10000000 * player.currentTime());
-
-                ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), itemId, positionTicks);
-
-                if (currentProgressInterval) {
-                    clearTimeout(currentProgressInterval);
-                }
 
                 if (player.techName == "html5") {
                     player.tag.src = "";
@@ -354,6 +352,24 @@
             currentMediaElement = null;
         };
 
+	    self.stopVideo = function () {
+		    var player = _V_("videoWindow");
+
+		    var startTimeTicks = player.tag.src.match(new RegExp("StartTimeTicks=[0-9]+", "g"));
+		    var startTime = startTimeTicks[0].replace("StartTimeTicks=", "");
+
+		    var itemString = player.tag.src.match(new RegExp("Videos/[0-9a-z\-]+", "g"));
+		    var itemId = itemString[0].replace("Videos/", "");
+
+		    var positionTicks = parseInt(startTime) + Math.floor(10000000 * player.currentTime());
+
+		    ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), itemId, positionTicks);
+
+		    if (currentProgressInterval) {
+			    clearTimeout(currentProgressInterval);
+		    }
+	    }
+
         self.isPlaying = function () {
             return currentMediaElement;
         };

dashboard-ui/scripts/playlist.js

@@ -13,21 +13,42 @@
 
         };
 
-        self.remove = function (index) {
+        self.remove = function (elem) {
+	        var index = $(elem).attr("data-queue-index");
 
 	        self.queue.splice(index, 1);
+
+	        $(elem).parent().parent().remove();
+	        return false;
         };
 
         self.play = function (elem) {
 			var index = $(elem).attr("data-queue-index");
 
             MediaPlayer.play(new Array(self.queue[index]));
+	        self.queue.splice(index, 1);
+        };
+
+	    self.playNext = function () {
+		    if (typeof self.queue[0] != "undefined") {
+			    MediaPlayer.play(new Array(self.queue[0]));
 			    self.queue.shift();
+		    }
+	    };
+
+	    self.inQueue = function (item) {
+		    $.each(Playlist.queue, function(i, queueItem){
+			    if (item.Id == queueItem.Id) {
+				    return true;
+			    }
+		    });
+		    return false;
 	    };
 
         return self;
     }
 
+
     window.Playlist = new playlist();
 })(window);
 
@@ -39,6 +60,7 @@
 
 		Dashboard.showLoadingMsg();
 
+		$("#queueTable").html('');
 		$.each(Playlist.queue, function(i, item){
 			var html = '';
 			var name = item.Name;
@@ -59,11 +81,12 @@
 			}
 
 			html += '<tr>';
-			html += '<td><img src="css/images/media/playCircle.png" style="height: 28px;" data-queue-index="'+i+'" onclick="Playlist.play(this)" /></td>';
+			html += '<td><img src="css/images/media/playCircle.png" style="height: 28px;cursor:pointer;" data-queue-index="'+i+'" onclick="Playlist.play(this)" /></td>';
 			html += '<td>' + name + '</td>';
 			html += '<td>' + seriesName + '</td>';
 			html += '<td>' + ticks_to_human(item.RunTimeTicks) + '</td>';
 			html += '<td></td>';
+			html += '<td><a href="" data-queue-index="'+i+'" onclick="Playlist.remove(this)">remove</a></td>';
 			html += '</tr>';
 
 			$("#queueTable").append(html);