mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
added album/artist play buttons
This commit is contained in:
Luke Pulverenti
parent
4f5f0b0d07
commit
2a188455c6
6 changed files with 179 additions and 186 deletions
|
|
@ -8,39 +8,10 @@
|
|||
|
||||
<div data-role="content">
|
||||
|
||||
<table id="playlistTable" style="margin: auto; width: 90%;">
|
||||
<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 id="playlist" class="detailTableContainer">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- temp styling -->
|
||||
<style>
|
||||
#playlistTable {
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#playlistTable th, #playlistTable td {
|
||||
padding: 4px 10px;
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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 () {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
||||
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 += '<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>';
|
||||
|
||||
if (resumePositionTicks) {
|
||||
html += '<li><a href="#" onclick="MediaPlayer.playById(\'' + itemId + '\', ' + resumePositionTicks + ');LibraryBrowser.closePlayMenu();">Resume</a></li>';
|
||||
}
|
||||
|
||||
if (isPlaying && MediaPlayer.canQueue(mediaType)) {
|
||||
html += '<li><a href="#" onclick="MediaPlayer.playNext(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Play Next</a></li>';
|
||||
html += '<li><a href="#" onclick="MediaPlayer.playLast(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Play Last</a></li>';
|
||||
}
|
||||
if (isPlaying) {
|
||||
html += '<li><a href="#" onclick="MediaPlayer.queue(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Queue</a></li>';
|
||||
}
|
||||
|
||||
html += '</ul>';
|
||||
|
|
|
|||
|
|
@ -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,18 +887,40 @@
|
|||
$('.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 () {
|
||||
|
|
@ -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);
|
||||
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.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.queueAdd(item);
|
||||
self.queueItem(item);
|
||||
}
|
||||
};
|
||||
|
||||
self.inQueue = function (item) {
|
||||
$.each(MediaPlayer.queue, function (i, queueItem) {
|
||||
if (item.Id == queueItem.Id) {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
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);
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,76 +1,63 @@
|
|||
(function (window) {
|
||||
(function ($, document) {
|
||||
|
||||
function playlist() {
|
||||
var self = this;
|
||||
function reloadPlaylist(page) {
|
||||
|
||||
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');
|
||||
}
|
||||
|
||||
|
||||
window.Playlist = new playlist();
|
||||
})(window);
|
||||
|
||||
(function ($, document) {
|
||||
|
||||
$(document).on('pagebeforeshow', "#playlistPage", function () {
|
||||
$(document).on('pageinit', "#playlistPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
$(page).on('click', '.lnkPlay', function () {
|
||||
|
||||
$("#queueTable").html('');
|
||||
var index = parseInt(this.getAttribute('data-index'));
|
||||
|
||||
//currently playing item
|
||||
if (MediaPlayer.playing) {
|
||||
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);
|
||||
}
|
||||
MediaPlayer.currentPlaylistIndex(index);
|
||||
|
||||
$.each(MediaPlayer.queue, function(i, item){
|
||||
var html = '';
|
||||
var name = item.Name;
|
||||
}).on('click', '.lnkRemove', function () {
|
||||
|
||||
if (item.IndexNumber != null) {
|
||||
name = item.IndexNumber + " - " + name;
|
||||
}
|
||||
if (item.ParentIndexNumber != null) {
|
||||
name = item.ParentIndexNumber + "." + name;
|
||||
}
|
||||
var index = parseInt(this.getAttribute('data-index'));
|
||||
|
||||
//$('#itemImage', page).html(LibraryBrowser.getDetailImageHtml(item));
|
||||
|
||||
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);
|
||||
MediaPlayer.removeFromPlaylist(index);
|
||||
reloadPlaylist(page);
|
||||
});
|
||||
|
||||
}).on('pagebeforeshow', "#playlistPage", function () {
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
var page = this;
|
||||
|
||||
reloadPlaylist(page);
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue