added album/artist play buttons

dashboard-ui/playlist.html

@@ -8,39 +8,10 @@
 
         <div data-role="content">
             
-            <table id="playlistTable" style="margin: auto; width: 90%;">
+            <div id="playlist" class="detailTableContainer">
-                <thead>
-                    <tr>
-                        <th></th>
-                        <th>Name</th>
-                        <th>Album</th>
-                        <th>Time</th>
-                        <th>Rating</th>
-                        <th></th>
-                    </tr>
-                </thead>
-                <tfoot>
-                    <tr>
-                        <td colspan="5"></td>
-                    </tr>
-                </tfoot>
-                <tbody id="queueTable"></tbody>
-            </table>
-
                 
+            </div>
         </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

@@ -851,7 +851,7 @@
 
         $('#btnPlay', page).on('click', function () {
             var userdata = currentItem.UserData || {};
-            LibraryBrowser.showPlayMenu(this, currentItem.Id, currentItem.MediaType, userdata.PlaybackPositionTicks);
+            LibraryBrowser.showPlayMenu(this, currentItem.Id, currentItem.Type, currentItem.MediaType, userdata.PlaybackPositionTicks);
         });
 
         $('#btnEdit', page).on('click', function () {

dashboard-ui/scripts/librarybrowser.js

@@ -247,7 +247,7 @@
 
                 html += '<tr>';
 
-                html += '<td><button class="btnPlay" type="button" data-role="none" onclick="LibraryBrowser.showPlayMenu(this, \'' + item.Id + '\', \'Audio\');"><img src="css/images/media/playCircle.png" style="height: 20px;"></button></td>';
+                html += '<td><button class="btnPlay" type="button" data-role="none" onclick="LibraryBrowser.showPlayMenu(this, \'' + item.Id + '\', \'Audio\', \'Audio\');"><img src="css/images/media/playCircle.png" style="height: 20px;"></button></td>';
 
                 var num = item.IndexNumber;
 
@@ -294,13 +294,11 @@
             return html;
         },
 
-        showPlayMenu: function (positionTo, itemId, mediaType, resumePositionTicks) {
+        showPlayMenu: function (positionTo, itemId, itemType, mediaType, resumePositionTicks) {
-
-            var canPlay = MediaPlayer.canPlayMediaType(mediaType);
 
             var isPlaying = MediaPlayer.isPlaying();
 
-            if (canPlay && !isPlaying && !resumePositionTicks) {
+            if (!isPlaying && !resumePositionTicks) {
                 MediaPlayer.playById(itemId);
                 return;
             }
@@ -312,17 +310,14 @@
             html += '<ul data-role="listview" style="min-width: 150px;" data-theme="c">';
             html += '<li data-role="list-divider" data-theme="a">Play Menu</li>';
 
-            if (canPlay) {
+            html += '<li><a href="#" onclick="MediaPlayer.playById(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Play</a></li>';
-                html += '<li><a href="#" onclick="MediaPlayer.playById(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Play</a></li>';
 
-                if (resumePositionTicks) {
+            if (resumePositionTicks) {
-                    html += '<li><a href="#" onclick="MediaPlayer.playById(\'' + itemId + '\', ' + resumePositionTicks + ');LibraryBrowser.closePlayMenu();">Resume</a></li>';
+                html += '<li><a href="#" onclick="MediaPlayer.playById(\'' + itemId + '\', ' + resumePositionTicks + ');LibraryBrowser.closePlayMenu();">Resume</a></li>';
-                }
+            }
 
-                if (isPlaying && MediaPlayer.canQueue(mediaType)) {
+            if (isPlaying) {
-                    html += '<li><a href="#" onclick="MediaPlayer.playNext(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Play Next</a></li>';
+                html += '<li><a href="#" onclick="MediaPlayer.queue(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Queue</a></li>';
-                    html += '<li><a href="#" onclick="MediaPlayer.playLast(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Play Last</a></li>';
-                }
             }
 
             html += '</ul>';

dashboard-ui/scripts/mediaplayer.js

@@ -20,8 +20,8 @@
         var isStaticStream;
         var culturesPromise;
 
-        self.playing = '';
+        self.playlist = [];
-        self.queue = [];
+        var currentPlaylistIndex = 0;
 
         function requestFullScreen(element) {
             // Supports most browsers and their versions.
@@ -88,7 +88,7 @@
 
             ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), currentItem.Id, position);
 
-            MediaPlayer.queuePlayNext();
+            self.queuePlayNext();
         }
 
         function startProgressInterval(itemId) {
@@ -440,8 +440,6 @@
 
             }).on("ended.playbackstopped", onPlaybackStopped);
 
-            MediaPlayer.nowPlaying(item);
-
             currentItem = item;
             curentDurationTicks = item.RunTimeTicks;
 
@@ -625,8 +623,6 @@
 
             }).on("ended.playbackstopped", onPlaybackStopped);
 
-            MediaPlayer.nowPlaying(item);
-
             currentItem = item;
             curentDurationTicks = item.RunTimeTicks;
 
@@ -696,6 +692,9 @@
 
         self.canPlay = function (item) {
 
+            if (item.Type == "MusicAlbum" || item.Type == "MusicArtist") {
+                return true;
+            }
             return self.canPlayMediaType(item.MediaType);
         };
 
@@ -760,14 +759,19 @@
                     }
                 }
 
-                self.playInternal(items, startPosition, user);
+                self.playInternal(items[0], startPosition, user);
+                self.onPlaybackStarted(items);
             });
         };
 
         self.playWithWarning = function (items, startPosition, user, localStorageKeyName, header) {
 
             if (localStorage.getItem(localStorageKeyName) == "1") {
-                self.playInternal(items, startPosition, user);
+
+                self.playInternal(items[0], startPosition, user);
+
+                self.onPlaybackStarted(items);
+
                 return;
             }
 
@@ -776,21 +780,38 @@
                 if (result) {
 
                     localStorage.setItem(localStorageKeyName, "1");
-                    self.playInternal(items, startPosition, user);
+
+                    self.playInternal(items[0], startPosition, user);
+
+                    self.onPlaybackStarted(items);
                 }
 
             });
 
         };
 
-        self.playInternal = function (items, startPosition, user) {
+        self.onPlaybackStarted = function (items) {
+
+            self.playlist = items;
+            currentPlaylistIndex = 0;
+
+            var nowPlayingBar = $('#nowPlayingBar');
+
+            if (items.length > 1) {
+                $('#previousTrackButton', nowPlayingBar)[0].disabled = false;
+                $('#nextTrackButton', nowPlayingBar)[0].disabled = false;
+            } else {
+                $('#previousTrackButton', nowPlayingBar)[0].disabled = true;
+                $('#nextTrackButton', nowPlayingBar)[0].disabled = true;
+            }
+        };
+
+        self.playInternal = function (item, startPosition, user) {
 
             if (self.isPlaying()) {
                 self.stop();
             }
 
-            var item = items[0];
-
             var mediaElement;
 
             if (item.MediaType === "Video") {
@@ -799,26 +820,16 @@
             } else if (item.MediaType === "Audio") {
 
                 mediaElement = playAudio(item);
+            } else {
+                throw new Error("Unrecognized media type");
             }
 
             startTimeTicksOffset = startPosition || 0;
 
-            if (!mediaElement) {
-                return;
-            }
-
             currentMediaElement = mediaElement;
 
             var nowPlayingBar = $('#nowPlayingBar').show();
 
-            if (items.length > 1) {
-                $('#previousTrackButton', nowPlayingBar)[0].disabled = false;
-                $('#nextTrackButton', nowPlayingBar)[0].disabled = false;
-            } else {
-                $('#previousTrackButton', nowPlayingBar)[0].disabled = true;
-                $('#nextTrackButton', nowPlayingBar)[0].disabled = true;
-            }
-
             //display image and title
             var imageTags = item.ImageTags || {};
             var html = '';
@@ -876,20 +887,42 @@
             $('.nowPlayingMediaInfo', nowPlayingBar).html(html);
         };
 
+        self.getItemsForPlayback = function (query) {
+
+            var userId = Dashboard.getCurrentUserId();
+
+            query.Limit = query.Limit || 100;
+            query.Fields = "MediaStreams,UserData,DisplayMediaType,SeriesInfo,AudioInfo,Chapters,Path";
+
+            return ApiClient.getItems(userId, query);
+        };
+
         self.playById = function (id, startPositionTicks) {
 
             ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) {
 
-                self.play([item], startPositionTicks);
+                if (item.IsFolder) {
+
+                    self.getItemsForPlayback({
+
+                        ParentId: id,
+                        Recursive: true,
+                        SortBy: "SortName"
+
+                    }).done(function (result) {
+
+                        self.play(result.Items, startPositionTicks);
+
+                    });
+
+                } else {
+                    self.play([item], startPositionTicks);
+                }
 
             });
 
         };
 
-        self.nowPlaying = function (item) {
-            self.playing = item;
-        };
-
         self.toggleFullscreen = function () {
 
             if (isFullScreen()) {
@@ -901,63 +934,72 @@
             }
         };
 
-        self.canQueue = function (mediaType) {
+        self.removeFromPlaylist = function (index) {
-            return mediaType == "Audio";
+            
+            self.playlist.remove(index);
+            
         };
 
-        self.queueAdd = function (item) {
+        // Gets or sets the current playlist index
-            self.queue.push(item);
+        self.currentPlaylistIndex = function(i) {
-        };
 
-        self.queueRemove = function (elem) {
+            if (i == null) {
-            var index = $(elem).attr("data-queue-index");
+                return currentPlaylistIndex;
-
-            self.queue.splice(index, 1);
-
-            $(elem).parent().parent().remove();
-            return false;
-        };
-
-        self.queuePlay = function (elem) {
-            var index = $(elem).attr("data-queue-index");
-
-            MediaPlayer.play(new Array(self.queue[index]));
-            self.queue.splice(index, 1);
-        };
-
-        self.queuePlayNext = function (item) {
-            if (typeof self.queue[0] != "undefined") {
-                MediaPlayer.play(new Array(self.queue[0]));
-                self.queue.shift();
             }
+
+            var newItem = self.playlist[i];
+
+            Dashboard.getCurrentUser().done(function (user) {
+
+                self.playInternal(newItem, 0, user);
+                self.currentPlaylistIndex = i;
+            });
         };
 
-        self.queueAddNext = function (item) {
+        self.queuePlayNext = function () {
-            if (typeof self.queue[0] != "undefined") {
+
-                self.queue.unshift(item);
+            var newIndex = currentPlaylistIndex + 1;
-            } else {
+            var newItem = self.playlist[newIndex];
-                self.queueAdd(item);
+
-            }
+            Dashboard.getCurrentUser().done(function (user) {
+
+                self.playInternal(newItem, 0, user);
+                self.currentPlaylistIndex = newIndex;
+            });
         };
 
-        self.inQueue = function (item) {
+        self.queueItem = function (item) {
-            $.each(MediaPlayer.queue, function (i, queueItem) {
+
-                if (item.Id == queueItem.Id) {
+            self.playlist.push(item);
-                    return true;
+
+        };
+
+        self.queue = function (id) {
+
+            ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) {
+
+                if (item.IsFolder) {
+
+                    self.getItemsForPlayback({
+
+                        ParentId: id,
+                        Recursive: true,
+                        SortBy: "SortName"
+
+                    }).done(function (result) {
+
+                        for (var i = 0, length = result.Items.length; i < length; i++) {
+
+                            self.queueItem(result.Items[i]);
+
+                        }
+
+                    });
+
+                } else {
+                    self.queueItem(item);
                 }
-            });
-            return false;
-        };
 
-        self.playLast = function (itemId) {
-            ApiClient.getItem(Dashboard.getCurrentUserId(), itemId).done(function (item) {
-                self.queueAdd(item);
-            });
-        };
-
-        self.playNext = function (itemId) {
-            ApiClient.getItem(Dashboard.getCurrentUserId(), itemId).done(function (item) {
-                self.queueAddNext(item);
             });
         };
 

dashboard-ui/scripts/playlist.js

@@ -1,77 +1,64 @@
-(function (window) {
+(function ($, document) {
 
-    function playlist() {
+    function reloadPlaylist(page) {
-        var self = this;
         
+        var html = '';
 
+        html += '<table class="detailTable">';
 
+        html += '<tr>';
+        html += '<th></th>';
+        html += '<th>Name</th>';
+        html += '<th>Album</th>';
+        html += '<th>Time</th>';
+        html += '<th>Rating</th>';
+        html += '</tr>';
 
+        $.each(MediaPlayer.playlist, function (i, item) {
 
-        return self;
+            var name = LibraryBrowser.getPosterViewDisplayName(item);
+
+            var parentName = item.SeriesName || item.Album || item.ProductionYear || '';
+
+            html += '<tr>';
+            html += '<td><a href="#" data-index="' + i + '" class="lnkPlay"><img src="css/images/media/playCircle.png" style="height: 24px;" /></a></td>';
+            html += '<td>' + name + '</td>';
+            html += '<td>' + parentName + '</td>';
+            html += '<td>' + ticks_to_human(item.RunTimeTicks) + '</td>';
+            html += '<td>' + LibraryBrowser.getUserDataIconsHtml(item) + '</td>';
+            html += '<td><a href="#" data-index="' + i + '" class="lnkRemove"><img src="css/images/media/playCircle.png" style="height: 24px;" /></a></td>';
+            html += '</tr>';
+        });
+
+        html += '</table>';
+
+        $("#playlist", page).html(html).trigger('create');
     }
     
+    $(document).on('pageinit', "#playlistPage", function () {
 
-    window.Playlist = new playlist();
+        var page = this;
-})(window);
 
-(function ($, document) {
+        $(page).on('click', '.lnkPlay', function () {
 
-	$(document).on('pagebeforeshow', "#playlistPage", function () {
+            var index = parseInt(this.getAttribute('data-index'));
 
-		var page = this;
+            MediaPlayer.currentPlaylistIndex(index);
 
-		Dashboard.showLoadingMsg();
+        }).on('click', '.lnkRemove', function () {
 
-		$("#queueTable").html('');
+            var index = parseInt(this.getAttribute('data-index'));
 
-		//currently playing item
+            MediaPlayer.removeFromPlaylist(index);
-		if (MediaPlayer.playing) {
+            reloadPlaylist(page);
-			var html = '';
+        });
-			html += '<tr>';
-			html += '<td></td>';
-			html += '<td>' + MediaPlayer.playing.Name + '</td>';
-			html += '<td>' + MediaPlayer.playing.Album + '</td>';
-			html += '<td>' + ticks_to_human(MediaPlayer.playing.RunTimeTicks) + '</td>';
-			html += '<td>' + LibraryBrowser.getUserDataIconsHtml(MediaPlayer.playing) + '</td>';
-			html += '<td></td>';
-			html += '</tr>';
-			$("#queueTable").append(html);
-		}
 
-		$.each(MediaPlayer.queue, function(i, item){
+    }).on('pagebeforeshow', "#playlistPage", function () {
-			var html = '';
-			var name = item.Name;
 
-			if (item.IndexNumber != null) {
+        var page = this;
-				name = item.IndexNumber + " - " + name;
-			}
-			if (item.ParentIndexNumber != null) {
-				name = item.ParentIndexNumber + "." + name;
-			}
 
-			//$('#itemImage', page).html(LibraryBrowser.getDetailImageHtml(item));
+        reloadPlaylist(page);
-
+    });
-			if (item.SeriesName || item.Album) {
-				var seriesName = item.SeriesName || item.Album;
-			}else {
-				var seriesName = item.ProductionYear;
-			}
-
-			html += '<tr>';
-			html += '<td><img src="css/images/media/playCircle.png" style="height: 28px;cursor:pointer;" data-queue-index="'+i+'" onclick="MediaPlayer.queuePlay(this)" /></td>';
-			html += '<td>' + name + '</td>';
-			html += '<td>' + seriesName + '</td>';
-			html += '<td>' + ticks_to_human(item.RunTimeTicks) + '</td>';
-			html += '<td>' + LibraryBrowser.getUserDataIconsHtml(item) + '</td>';
-			html += '<td><a href="" data-queue-index="'+i+'" onclick="MediaPlayer.queueRemove(this)">remove</a></td>';
-			html += '</tr>';
-
-			$("#queueTable").append(html);
-		});
-
-
-		Dashboard.hideLoadingMsg();
-	});
 
 
 })(jQuery, document);

dashboard-ui/scripts/site.js

@@ -883,11 +883,9 @@ var Dashboard = {
         }
         else if (msg.MessageType === "Play") {
 
-            ApiClient.getItems(Dashboard.getCurrentUserId(), {
+            MediaPlayer.getItemsForPlayback({
 
-                Ids: msg.Data.ItemIds.join(','),
+                Ids: msg.Data.ItemIds.join(',')
-
-                Fields: 'MediaStreams,UserData,DisplayMediaType,SeriesInfo,AudioInfo,Chapters,Path'
 
             }).done(function (result) {
                 MediaPlayer.play(result.Items, msg.Data.StartPositionTicks);