From 2a188455c6681ca99272e48f5d5a66565e4730a0 Mon Sep 17 00:00:00 2001 From: Luke Pulverenti Date: Fri, 7 Jun 2013 12:06:32 -0400 Subject: [PATCH] added album/artist play buttons --- dashboard-ui/playlist.html | 37 +---- dashboard-ui/scripts/Itemdetailpage.js | 2 +- dashboard-ui/scripts/librarybrowser.js | 23 ++- dashboard-ui/scripts/mediaplayer.js | 196 +++++++++++++++---------- dashboard-ui/scripts/playlist.js | 101 ++++++------- dashboard-ui/scripts/site.js | 6 +- 6 files changed, 179 insertions(+), 186 deletions(-) diff --git a/dashboard-ui/playlist.html b/dashboard-ui/playlist.html index 249f3514ed..17ca547879 100644 --- a/dashboard-ui/playlist.html +++ b/dashboard-ui/playlist.html @@ -7,40 +7,11 @@
- - - - - - - - - - - - - - - - - - -
NameAlbumTimeRating
- - + +
+ +
- - - diff --git a/dashboard-ui/scripts/Itemdetailpage.js b/dashboard-ui/scripts/Itemdetailpage.js index e299682672..33184a93c4 100644 --- a/dashboard-ui/scripts/Itemdetailpage.js +++ b/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 () { diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js index a8f3cece2c..43fd87be1f 100644 --- a/dashboard-ui/scripts/librarybrowser.js +++ b/dashboard-ui/scripts/librarybrowser.js @@ -247,7 +247,7 @@ html += ''; - html += ''; + html += ''; var num = item.IndexNumber; @@ -294,13 +294,11 @@ return html; }, - showPlayMenu: function (positionTo, itemId, mediaType, resumePositionTicks) { - - var canPlay = MediaPlayer.canPlayMediaType(mediaType); + showPlayMenu: function (positionTo, itemId, itemType, mediaType, resumePositionTicks) { var isPlaying = MediaPlayer.isPlaying(); - if (canPlay && !isPlaying && !resumePositionTicks) { + if (!isPlaying && !resumePositionTicks) { MediaPlayer.playById(itemId); return; } @@ -312,17 +310,14 @@ html += ''; diff --git a/dashboard-ui/scripts/mediaplayer.js b/dashboard-ui/scripts/mediaplayer.js index 23e75a223d..eeb03221a4 100644 --- a/dashboard-ui/scripts/mediaplayer.js +++ b/dashboard-ui/scripts/mediaplayer.js @@ -20,8 +20,8 @@ var isStaticStream; var culturesPromise; - self.playing = ''; - self.queue = []; + self.playlist = []; + 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) { - return mediaType == "Audio"; + self.removeFromPlaylist = function (index) { + + self.playlist.remove(index); + }; - self.queueAdd = function (item) { - self.queue.push(item); - }; + // Gets or sets the current playlist index + self.currentPlaylistIndex = function(i) { - self.queueRemove = function (elem) { - var index = $(elem).attr("data-queue-index"); - - 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(); + if (i == null) { + return currentPlaylistIndex; } + + var newItem = self.playlist[i]; + + Dashboard.getCurrentUser().done(function (user) { + + self.playInternal(newItem, 0, user); + self.currentPlaylistIndex = i; + }); }; - self.queueAddNext = function (item) { - if (typeof self.queue[0] != "undefined") { - self.queue.unshift(item); - } else { - self.queueAdd(item); - } + self.queuePlayNext = function () { + + var newIndex = currentPlaylistIndex + 1; + var newItem = self.playlist[newIndex]; + + Dashboard.getCurrentUser().done(function (user) { + + self.playInternal(newItem, 0, user); + self.currentPlaylistIndex = newIndex; + }); }; - self.inQueue = function (item) { - $.each(MediaPlayer.queue, function (i, queueItem) { - if (item.Id == queueItem.Id) { - return true; + self.queueItem = function (item) { + + self.playlist.push(item); + + }; + + 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); }); }; diff --git a/dashboard-ui/scripts/playlist.js b/dashboard-ui/scripts/playlist.js index d15f249237..ec90a329e5 100644 --- a/dashboard-ui/scripts/playlist.js +++ b/dashboard-ui/scripts/playlist.js @@ -1,77 +1,64 @@ -(function (window) { +(function ($, document) { - function playlist() { - var self = this; + function reloadPlaylist(page) { + + var html = ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + $.each(MediaPlayer.playlist, function (i, item) { + var name = LibraryBrowser.getPosterViewDisplayName(item); - return self; + var parentName = item.SeriesName || item.Album || item.ProductionYear || ''; + + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + }); + + html += '
NameAlbumTimeRating
' + name + '' + parentName + '' + ticks_to_human(item.RunTimeTicks) + '' + LibraryBrowser.getUserDataIconsHtml(item) + '
'; + + $("#playlist", page).html(html).trigger('create'); } + + $(document).on('pageinit', "#playlistPage", function () { + var page = this; - window.Playlist = new playlist(); -})(window); + $(page).on('click', '.lnkPlay', function () { -(function ($, document) { + var index = parseInt(this.getAttribute('data-index')); - $(document).on('pagebeforeshow', "#playlistPage", function () { + MediaPlayer.currentPlaylistIndex(index); - var page = this; + }).on('click', '.lnkRemove', function () { - Dashboard.showLoadingMsg(); + var index = parseInt(this.getAttribute('data-index')); - $("#queueTable").html(''); + MediaPlayer.removeFromPlaylist(index); + reloadPlaylist(page); + }); - //currently playing item - if (MediaPlayer.playing) { - var html = ''; - html += ''; - html += ''; - html += '' + MediaPlayer.playing.Name + ''; - html += '' + MediaPlayer.playing.Album + ''; - html += '' + ticks_to_human(MediaPlayer.playing.RunTimeTicks) + ''; - html += '' + LibraryBrowser.getUserDataIconsHtml(MediaPlayer.playing) + ''; - html += ''; - html += ''; - $("#queueTable").append(html); - } + }).on('pagebeforeshow', "#playlistPage", function () { - $.each(MediaPlayer.queue, function(i, item){ - var html = ''; - var name = item.Name; + var page = this; - if (item.IndexNumber != null) { - name = item.IndexNumber + " - " + name; - } - if (item.ParentIndexNumber != null) { - name = item.ParentIndexNumber + "." + name; - } - - //$('#itemImage', page).html(LibraryBrowser.getDetailImageHtml(item)); - - if (item.SeriesName || item.Album) { - var seriesName = item.SeriesName || item.Album; - }else { - var seriesName = item.ProductionYear; - } - - html += ''; - html += ''; - html += '' + name + ''; - html += '' + seriesName + ''; - html += '' + ticks_to_human(item.RunTimeTicks) + ''; - html += '' + LibraryBrowser.getUserDataIconsHtml(item) + ''; - html += 'remove'; - html += ''; - - $("#queueTable").append(html); - }); - - - Dashboard.hideLoadingMsg(); - }); + reloadPlaylist(page); + }); })(jQuery, document); \ No newline at end of file diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js index 846466b975..28750dfb29 100644 --- a/dashboard-ui/scripts/site.js +++ b/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(','), - - Fields: 'MediaStreams,UserData,DisplayMediaType,SeriesInfo,AudioInfo,Chapters,Path' + Ids: msg.Data.ItemIds.join(',') }).done(function (result) { MediaPlayer.play(result.Items, msg.Data.StartPositionTicks);