mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
combine playlist with remote control
This commit is contained in:
Luke Pulverenti
parent
b73c66bd7f
commit
d8f6787364
5 changed files with 90 additions and 107 deletions
|
|
@ -10,6 +10,7 @@
|
||||||
<a href="#" class="ui-btn-active tabButton" data-tab="tabNowPlaying">${TabNowPlaying}</a>
|
<a href="#" class="ui-btn-active tabButton" data-tab="tabNowPlaying">${TabNowPlaying}</a>
|
||||||
<a href="#" class="tabButton" data-tab="tabNavigation">${TabControls}</a>
|
<a href="#" class="tabButton" data-tab="tabNavigation">${TabControls}</a>
|
||||||
<a href="#" class="tabButton" data-tab="tabAdvanced">${TabAdvanced}</a>
|
<a href="#" class="tabButton" data-tab="tabAdvanced">${TabAdvanced}</a>
|
||||||
|
<a href="#" class="tabButton tabButtonPlaylist" data-tab="tabPlaylist">${TabPlaylist}</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div data-role="content" style="padding: 1em 0;">
|
<div data-role="content" style="padding: 1em 0;">
|
||||||
|
|
@ -125,6 +126,15 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="tabPlaylist tabContent" style="display: none;">
|
||||||
|
|
||||||
|
<div class="readOnlyContent" style="margin: 0 auto; padding: 0 1em;">
|
||||||
|
|
||||||
|
<div class="playlist detailTableContainer">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>${TitleMediaBrowser}</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="playlistPage" data-role="page" class="page libraryPage">
|
|
||||||
|
|
||||||
<div class="parentName" style="text-align: center;">${HeaderNowPlaying}</div>
|
|
||||||
<div data-role="content">
|
|
||||||
|
|
||||||
<div id="playlist" class="detailTableContainer">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -25,7 +25,7 @@
|
||||||
|
|
||||||
html += '<a class="mediaButton remoteControlButton" title="' + Globalize.translate('ButtonRemoteControl') + '" href="nowplaying.html" data-transition="slideup" data-role="button" data-icon="remote" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonRemoteControl') + '</a>';
|
html += '<a class="mediaButton remoteControlButton" title="' + Globalize.translate('ButtonRemoteControl') + '" href="nowplaying.html" data-transition="slideup" data-role="button" data-icon="remote" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonRemoteControl') + '</a>';
|
||||||
|
|
||||||
html += '<a id="playlistButton" class="mediaButton playlistButton" href="playlist.html" data-role="button" data-icon="bullets" data-iconpos="notext" data-inline="true" title="' + Globalize.translate('ButtonPlaylist') + '">' + Globalize.translate('ButtonPlaylist') + '</a>';
|
html += '<a id="playlistButton" class="mediaButton playlistButton" href="nowplaying.html?tab=Playlist" data-transition="slideup" data-role="button" data-icon="bullets" data-iconpos="notext" data-inline="true" title="' + Globalize.translate('ButtonPlaylist') + '">' + Globalize.translate('ButtonPlaylist') + '</a>';
|
||||||
html += '<button id="previousTrackButton" class="mediaButton previousTrackButton" title="' + Globalize.translate('ButtonPreviousTrack') + '" type="button" data-icon="previous-track" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonPreviousTrack') + '</button>';
|
html += '<button id="previousTrackButton" class="mediaButton previousTrackButton" title="' + Globalize.translate('ButtonPreviousTrack') + '" type="button" data-icon="previous-track" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonPreviousTrack') + '</button>';
|
||||||
|
|
||||||
html += '<button id="playButton" class="mediaButton unpauseButton" title="' + Globalize.translate('ButtonPlay') + '" type="button" data-icon="play" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonPlay') + '</button>';
|
html += '<button id="playButton" class="mediaButton unpauseButton" title="' + Globalize.translate('ButtonPlay') + '" type="button" data-icon="play" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonPlay') + '</button>';
|
||||||
|
|
|
||||||
|
|
@ -371,6 +371,21 @@
|
||||||
document.title = new Date().getTime();
|
document.title = new Date().getTime();
|
||||||
history.back();
|
history.back();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$(page).on('click', '.lnkPlayFromIndex', function () {
|
||||||
|
|
||||||
|
var index = parseInt(this.getAttribute('data-index'));
|
||||||
|
|
||||||
|
MediaController.currentPlaylistIndex(index);
|
||||||
|
loadPlaylist(page);
|
||||||
|
|
||||||
|
}).on('click', '.lnkRemoveFromPlaylist', function () {
|
||||||
|
|
||||||
|
var index = parseInt(this.getAttribute('data-index'));
|
||||||
|
|
||||||
|
MediaController.removeFromPlaylist(index);
|
||||||
|
loadPlaylist(page);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function onPlaybackStart(e, state) {
|
function onPlaybackStart(e, state) {
|
||||||
|
|
@ -610,6 +625,63 @@
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function loadPlaylist(page) {
|
||||||
|
|
||||||
|
var html = '';
|
||||||
|
|
||||||
|
html += '<table class="detailTable">';
|
||||||
|
|
||||||
|
html += '<thead><tr>';
|
||||||
|
html += '<th></th>';
|
||||||
|
html += '<th>' + Globalize.translate('HeaderName') + '</th>';
|
||||||
|
html += '<th>' + Globalize.translate('HeaderAlbum') + '</th>';
|
||||||
|
html += '<th>' + Globalize.translate('HeaderArtist') + '</th>';
|
||||||
|
html += '<th>' + Globalize.translate('HeaderAlbumArtist') + '</th>';
|
||||||
|
html += '<th>' + Globalize.translate('HeaderTime') + '</th>';
|
||||||
|
html += '</tr></thead>';
|
||||||
|
|
||||||
|
html += '<tbody>';
|
||||||
|
|
||||||
|
$.each(MediaController.playlist(), function (i, item) {
|
||||||
|
|
||||||
|
var name = LibraryBrowser.getPosterViewDisplayName(item);
|
||||||
|
|
||||||
|
var parentName = item.SeriesName || item.Album;
|
||||||
|
|
||||||
|
html += '<tr>';
|
||||||
|
html += '<td><button type="button" data-index="' + i + '" class="lnkPlayFromIndex" data-icon="play" data-iconpos="notext">' + Globalize.translate('ButtonPlay') + '</button></td>';
|
||||||
|
html += '<td>';
|
||||||
|
html += '<a href="itemdetails.html?id=' + item.Id + '">' + name + '</a>';
|
||||||
|
html += '</td>';
|
||||||
|
|
||||||
|
html += '<td>';
|
||||||
|
if (parentName) {
|
||||||
|
var parentId = item.AlbumId || item.SeriesId || item.ParentId;
|
||||||
|
html += '<a href="itemdetails.html?id=' + parentId + '">' + parentName + '</a>';
|
||||||
|
}
|
||||||
|
html += '</td>';
|
||||||
|
|
||||||
|
html += '<td>';
|
||||||
|
html += LibraryBrowser.getArtistLinksHtml(item.ArtistItems || []);
|
||||||
|
html += '</td>';
|
||||||
|
|
||||||
|
html += '<td>';
|
||||||
|
if (item.AlbumArtist) {
|
||||||
|
html += LibraryBrowser.getArtistLinksHtml(item.AlbumArtists || []);
|
||||||
|
}
|
||||||
|
html += '</td>';
|
||||||
|
|
||||||
|
html += '<td>' + Dashboard.getDisplayTime(item.RunTimeTicks) + '</td>';
|
||||||
|
html += '<td><button type="button" data-index="' + i + '" class="lnkRemoveFromIndex" data-icon="delete" data-iconpos="notext">' + Globalize.translate('ButtonRemove') + '</button></td>';
|
||||||
|
html += '</tr>';
|
||||||
|
});
|
||||||
|
|
||||||
|
html += '</tbody>';
|
||||||
|
html += '</table>';
|
||||||
|
|
||||||
|
$(".playlist", page).html(html).trigger('create');
|
||||||
|
}
|
||||||
|
|
||||||
$(document).on('pageinit', "#nowPlayingPage", function () {
|
$(document).on('pageinit', "#nowPlayingPage", function () {
|
||||||
|
|
||||||
var page = this;
|
var page = this;
|
||||||
|
|
@ -620,7 +692,12 @@
|
||||||
|
|
||||||
var page = this;
|
var page = this;
|
||||||
|
|
||||||
$('.tabButton:first', page).trigger('click');
|
var tab = getParameterByName('tab');
|
||||||
|
if (tab) {
|
||||||
|
$('.tabButton' + tab, page).trigger('click');
|
||||||
|
} else {
|
||||||
|
$('.tabButton:first', page).trigger('click');
|
||||||
|
}
|
||||||
|
|
||||||
$(function () {
|
$(function () {
|
||||||
|
|
||||||
|
|
@ -633,8 +710,8 @@
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
showIntro();
|
showIntro();
|
||||||
|
loadPlaylist(page);
|
||||||
|
|
||||||
}).on('pagehide', "#nowPlayingPage", function () {
|
}).on('pagehide', "#nowPlayingPage", function () {
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,87 +0,0 @@
|
||||||
(function ($, document) {
|
|
||||||
|
|
||||||
function reloadPlaylist(page) {
|
|
||||||
|
|
||||||
var html = '';
|
|
||||||
|
|
||||||
html += '<table class="detailTable">';
|
|
||||||
|
|
||||||
html += '<thead><tr>';
|
|
||||||
html += '<th></th>';
|
|
||||||
html += '<th>' + Globalize.translate('HeaderName') + '</th>';
|
|
||||||
html += '<th>' + Globalize.translate('HeaderAlbum') + '</th>';
|
|
||||||
html += '<th>' + Globalize.translate('HeaderArtist') + '</th>';
|
|
||||||
html += '<th>' + Globalize.translate('HeaderAlbumArtist') + '</th>';
|
|
||||||
html += '<th>' + Globalize.translate('HeaderTime') + '</th>';
|
|
||||||
html += '</tr></thead>';
|
|
||||||
|
|
||||||
html += '<tbody>';
|
|
||||||
|
|
||||||
$.each(MediaController.playlist(), function (i, item) {
|
|
||||||
|
|
||||||
var name = LibraryBrowser.getPosterViewDisplayName(item);
|
|
||||||
|
|
||||||
var parentName = item.SeriesName || item.Album;
|
|
||||||
|
|
||||||
html += '<tr>';
|
|
||||||
html += '<td><button type="button" data-index="' + i + '" class="lnkPlay" data-icon="play" data-iconpos="notext">' + Globalize.translate('ButtonPlay') + '</button></td>';
|
|
||||||
html += '<td>';
|
|
||||||
html += '<a href="itemdetails.html?id=' + item.Id + '">' + name + '</a>';
|
|
||||||
html += '</td>';
|
|
||||||
|
|
||||||
html += '<td>';
|
|
||||||
if (parentName) {
|
|
||||||
var parentId = item.AlbumId || item.SeriesId || item.ParentId;
|
|
||||||
html += '<a href="itemdetails.html?id=' + parentId + '">' + parentName + '</a>';
|
|
||||||
}
|
|
||||||
html += '</td>';
|
|
||||||
|
|
||||||
html += '<td>';
|
|
||||||
html += LibraryBrowser.getArtistLinksHtml(item.ArtistItems || []);
|
|
||||||
html += '</td>';
|
|
||||||
|
|
||||||
html += '<td>';
|
|
||||||
if (item.AlbumArtist) {
|
|
||||||
html += LibraryBrowser.getArtistLinksHtml(item.AlbumArtists || []);
|
|
||||||
}
|
|
||||||
html += '</td>';
|
|
||||||
|
|
||||||
html += '<td>' + Dashboard.getDisplayTime(item.RunTimeTicks) + '</td>';
|
|
||||||
html += '<td><button type="button" data-index="' + i + '" class="lnkRemove" data-icon="delete" data-iconpos="notext">' + Globalize.translate('ButtonRemove') + '</button></td>';
|
|
||||||
html += '</tr>';
|
|
||||||
});
|
|
||||||
|
|
||||||
html += '</tbody>';
|
|
||||||
html += '</table>';
|
|
||||||
|
|
||||||
$("#playlist", page).html(html).trigger('create');
|
|
||||||
}
|
|
||||||
|
|
||||||
$(document).on('pageinit', "#playlistPage", function () {
|
|
||||||
|
|
||||||
var page = this;
|
|
||||||
|
|
||||||
$(page).on('click', '.lnkPlay', function () {
|
|
||||||
|
|
||||||
var index = parseInt(this.getAttribute('data-index'));
|
|
||||||
|
|
||||||
MediaController.currentPlaylistIndex(index);
|
|
||||||
reloadPlaylist(page);
|
|
||||||
|
|
||||||
}).on('click', '.lnkRemove', function () {
|
|
||||||
|
|
||||||
var index = parseInt(this.getAttribute('data-index'));
|
|
||||||
|
|
||||||
MediaController.removeFromPlaylist(index);
|
|
||||||
reloadPlaylist(page);
|
|
||||||
});
|
|
||||||
|
|
||||||
}).on('pagebeforeshow', "#playlistPage", function () {
|
|
||||||
|
|
||||||
var page = this;
|
|
||||||
|
|
||||||
reloadPlaylist(page);
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
})(jQuery, document);
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue