mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

combine playlist with remote control

Browse source
This commit is contained in:
Luke Pulverenti 2015-03-18 12:56:14 -04:00
parent b73c66bd7f
commit d8f6787364
5 changed files with 90 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

10
dashboard-ui/nowplaying.html
View file

@ -10,6 +10,7 @@
<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="tabAdvanced">${TabAdvanced}</a>
<a href="#" class="tabButton tabButtonPlaylist" data-tab="tabPlaylist">${TabPlaylist}</a>
</div>
<div data-role="content" style="padding: 1em 0;">
@ -125,6 +126,15 @@
</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>

17
dashboard-ui/playlist.html
View file

@ -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>

2
dashboard-ui/scripts/nowplayingbar.js
View file

@ -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 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="playButton" class="mediaButton unpauseButton" title="' + Globalize.translate('ButtonPlay') + '" type="button" data-icon="play" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonPlay') + '</button>';

79
dashboard-ui/scripts/nowplayingpage.js
View file

@ -371,6 +371,21 @@
document.title = new Date().getTime();
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) {
@ -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 () {
var page = this;
@ -620,7 +692,12 @@
var page = this;
var tab = getParameterByName('tab');
if (tab) {
$('.tabButton' + tab, page).trigger('click');
} else {
$('.tabButton:first', page).trigger('click');
}
$(function () {
@ -633,8 +710,8 @@
});
showIntro();
loadPlaylist(page);
}).on('pagehide', "#nowPlayingPage", function () {

87
dashboard-ui/scripts/playlist.js
View file

@ -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);