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

redo playlist page

Browse source
This commit is contained in:
Luke Pulverenti 2015-08-20 00:06:49 -04:00
parent 214e8f1e1e
commit fb05bbd6b5
6 changed files with 87 additions and 197 deletions
Download patch file Download diff file Expand all files Collapse all files

2
dashboard-ui/css/librarybrowser.css
View file

@ -460,7 +460,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
margin-top: 1em; margin-top: 1em;
} }
@media all and (min-width: 620px) { @media all and (min-width: 540px) {
.detailUserDataIcons { .detailUserDataIcons {
display: inline-block; display: inline-block;

2
dashboard-ui/itemdetails.html
View file

@ -4,7 +4,7 @@
<title></title> <title></title>
</head> </head>
<body> <body>
<div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage lightBackdropPage" data-theme="b" data-require="scripts/itemdetailpage,paperbuttonstyle,tileitemcss,scripts/livetvcomponents"> <div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage lightBackdropPage noSecondaryNavPage" data-theme="b" data-require="scripts/itemdetailpage,paperbuttonstyle,tileitemcss,scripts/livetvcomponents">
<div id="tvShowsTabs" class="itemTabs" style="display: none;"> <div id="tvShowsTabs" class="itemTabs" style="display: none;">
<div class="libraryViewNav scopedLibraryViewNav"> <div class="libraryViewNav scopedLibraryViewNav">

21
dashboard-ui/playlistedit.html
View file

@ -1,21 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Emby</title>
</head>
<body>
<div id="playlistEditorPage" data-role="page" class="page libraryPage noSecondaryNavPage" data-require="scripts/playlistedit" data-backbutton="true" data-menubutton="false">
<div data-role="content">
<div class="viewSettings">
<div class="listTopPaging"></div>
<paper-button raised class="secondary btnPlay hide"><iron-icon icon="play-arrow"></iron-icon><span>${ButtonPlay}</span></paper-button>
</div>
<div id="items" class="itemsContainer" style="max-width:1000px;margin: 0 auto;"></div>
<div class="noItemsMessage" style="display: none; text-align: center;">
<p>${MessageNoPlaylistItemsAvailable}</p>
</div>
</div>
</div>
</body>
</html>

14
dashboard-ui/scripts/itemdetailpage.js
View file

@ -285,6 +285,11 @@
$('#childrenCollapsible', page).removeClass('hide'); $('#childrenCollapsible', page).removeClass('hide');
renderChannelGuide(page, item, user); renderChannelGuide(page, item, user);
} }
else if (item.Type == 'Playlist') {
$('#childrenCollapsible', page).removeClass('hide');
renderPlaylistItems(page, item, user);
}
else if (item.Type == 'Studio' || item.Type == 'Person' || item.Type == 'Genre' || item.Type == 'MusicGenre' || item.Type == 'GameGenre' || item.Type == 'MusicArtist') { else if (item.Type == 'Studio' || item.Type == 'Person' || item.Type == 'Genre' || item.Type == 'MusicGenre' || item.Type == 'GameGenre' || item.Type == 'MusicArtist') {
$('#childrenCollapsible', page).removeClass('hide'); $('#childrenCollapsible', page).removeClass('hide');
@ -881,6 +886,15 @@
}); });
} }
function renderPlaylistItems(page, item, user) {
require('scripts/playlistedit'.split(','), function () {
PlaylistViewer.render(page, item);
});
}
function renderChannelGuide(page, item, user) { function renderChannelGuide(page, item, user) {
require('scripts/livetvcomponents,scripts/livetvchannel,livetvcss'.split(','), function () { require('scripts/livetvcomponents,scripts/livetvchannel,livetvcss'.split(','), function () {

7
dashboard-ui/scripts/librarybrowser.js
View file

@ -794,7 +794,7 @@
return "photos.html?parentId=" + id; return "photos.html?parentId=" + id;
} }
if (item.Type == "Playlist") { if (item.Type == "Playlist") {
return "playlistedit.html?id=" + id; return "itemdetails.html?id=" + id;
} }
if (item.Type == "TvChannel") { if (item.Type == "TvChannel") {
return "itemdetails.html?id=" + id; return "itemdetails.html?id=" + id;
@ -3092,6 +3092,11 @@
} }
} }
if (item.CumulativeRunTimeTicks && item.Type != "Series" && item.Type != "Season") {
miscInfo.push(Dashboard.getDisplayTime(item.CumulativeRunTimeTicks));
}
if (item.OfficialRating && item.Type !== "Season" && item.Type !== "Episode") { if (item.OfficialRating && item.Type !== "Season" && item.Type !== "Episode") {
miscInfo.push(item.OfficialRating); miscInfo.push(item.OfficialRating);
} }

238
dashboard-ui/scripts/playlistedit.js
View file

@ -1,143 +1,113 @@
(function ($, document) { (function ($, document) {
var view = LibraryBrowser.getDefaultItemsView('List', 'List'); var data = {};
var currentItem; function getPageData() {
var key = getSavedQueryKey();
var pageData = data[key];
// The base query options if (!pageData) {
var query = { pageData = data[key] = {
query: {
Fields: "PrimaryImageAspectRatio,SyncInfo",
EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
StartIndex: 0,
Limit: LibraryBrowser.getDefaultPageSize()
},
view: LibraryBrowser.getSavedView(key) || LibraryBrowser.getDefaultItemsView('List', 'List')
};
Fields: "PrimaryImageAspectRatio,SyncInfo", pageData.query.ParentId = LibraryMenu.getTopParentId();
StartIndex: 0, LibraryBrowser.loadSavedQueryValues(key, pageData.query);
ImageTypeLimit: 1, }
EnableImageTypes: "Primary,Backdrop,Banner,Thumb" return pageData;
}; }
function getQuery() {
return getPageData().query;
}
function getSavedQueryKey() { function getSavedQueryKey() {
return 'playlists' + (query.ParentId || ''); return getWindowUrl();
} }
function getItemsFunction(itemsQuery) {
itemsQuery = $.extend({}, itemsQuery); function reloadItems(page, item) {
itemsQuery.SortBy = null;
itemsQuery.SortOrder = null;
return function (index, limit, fields) {
itemsQuery.StartIndex = index;
itemsQuery.Limit = limit;
itemsQuery.Fields = fields;
return ApiClient.getItems(Dashboard.getCurrentUserId(), itemsQuery);
};
}
var _childrenItemsFunction = null;
function reloadItems(page) {
Dashboard.showLoadingMsg(); Dashboard.showLoadingMsg();
query.ParentId = getParameterByName('id'); var query = getQuery();
query.UserId = Dashboard.getCurrentUserId(); query.UserId = Dashboard.getCurrentUserId();
var promise1 = ApiClient.getJSON(ApiClient.getUrl('Playlists/' + query.ParentId + '/Items', query)); ApiClient.getJSON(ApiClient.getUrl('Playlists/' + item.Id + '/Items', query)).done(function (result) {
var promise2 = Dashboard.getCurrentUser();
var promise3 = ApiClient.getItem(Dashboard.getCurrentUserId(), query.ParentId);
$.when(promise1, promise2, promise3).done(function (response1, response2, response3) {
var result = response1[0];
var user = response2[0];
var item = response3[0];
LibraryMenu.setTitle(item.Name);
_childrenItemsFunction = getItemsFunction(query);
currentItem = item;
if (MediaController.canPlay(item)) {
$('.btnPlay', page).removeClass('hide');
}
else {
$('.btnPlay', page).addClass('hide');
}
if (item.LocalTrailerCount && item.PlayAccess == 'Full') {
$('.btnPlayTrailer', page).removeClass('hide');
} else {
$('.btnPlayTrailer', page).addClass('hide');
}
// Scroll back up so they can see the results from the beginning // Scroll back up so they can see the results from the beginning
window.scrollTo(0, 0); window.scrollTo(0, 0);
var html = ''; var html = '';
$('.listTopPaging', page).html(LibraryBrowser.getQueryPagingHtml({ html += LibraryBrowser.getQueryPagingHtml({
startIndex: query.StartIndex, startIndex: query.StartIndex,
limit: query.Limit, limit: query.Limit,
totalRecordCount: result.TotalRecordCount, totalRecordCount: result.TotalRecordCount,
showLimit: false, showLimit: false,
updatePageSizeSetting: false updatePageSizeSetting: false
})).trigger('create'); });
updateFilterControls(page); var view = getPageData().view;
if (result.TotalRecordCount) { if (view == "List") {
if (view == "List") { html = LibraryBrowser.getListViewHtml({
items: result.Items,
sortBy: query.SortBy,
showIndex: false,
showRemoveFromPlaylist: true,
playFromHere: true,
defaultAction: 'playallfromhere',
smallIcon: true
html = LibraryBrowser.getListViewHtml({ });
items: result.Items,
context: 'playlists',
sortBy: query.SortBy,
showIndex: false,
title: item.Name,
showRemoveFromPlaylist: true,
playFromHere: true,
defaultAction: 'playallfromhere',
smallIcon: true
});
}
$('.noItemsMessage', page).hide();
} else {
$('.noItemsMessage', page).show();
} }
var elem = page.querySelector('.itemsContainer'); var elem = page.querySelector('#childrenContent .itemsContainer');
elem.innerHTML = html; elem.innerHTML = html;
$(elem).trigger('create'); $(elem).trigger('create');
ImageLoader.lazyChildren(elem); ImageLoader.lazyChildren(elem);
$('.btnNextPage', page).on('click', function () { $(elem).off('needsrefresh').on('needsrefresh', function () {
reloadItems(page, item);
}).off('removefromplaylist').on('removefromplaylist', function (e, playlistItemId) {
removeFromPlaylist(page, item, [playlistItemId]);
});
$('.btnNextPage', elem).on('click', function () {
query.StartIndex += query.Limit; query.StartIndex += query.Limit;
reloadItems(page); reloadItems(page, item);
}); });
$('.btnPreviousPage', page).on('click', function () { $('.btnPreviousPage', elem).on('click', function () {
query.StartIndex -= query.Limit; query.StartIndex -= query.Limit;
reloadItems(page); reloadItems(page, item);
}); });
LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
Dashboard.hideLoadingMsg(); Dashboard.hideLoadingMsg();
}); });
} }
function removeFromPlaylist(page, ids) { function removeFromPlaylist(page, item, ids) {
ApiClient.ajax({ ApiClient.ajax({
url: ApiClient.getUrl('Playlists/' + currentItem.Id + '/Items', { url: ApiClient.getUrl('Playlists/' + item.Id + '/Items', {
EntryIds: ids.join(',') EntryIds: ids.join(',')
}), }),
@ -145,93 +115,15 @@
}).done(function () { }).done(function () {
reloadItems(page); reloadItems(page, item);
}); });
} }
function updateFilterControls(page) { window.PlaylistViewer = {
render: function (page, item) {
// Reset form values using the last used query reloadItems(page, item);
$('.radioSortBy', page).each(function () {
this.checked = (query.SortBy || '').toLowerCase() == this.getAttribute('data-sortby').toLowerCase();
}).checkboxradio('refresh');
$('.radioSortOrder', page).each(function () {
this.checked = (query.SortOrder || '').toLowerCase() == this.getAttribute('data-sortorder').toLowerCase();
}).checkboxradio('refresh');
$('.chkStandardFilter', page).each(function () {
var filters = "," + (query.Filters || "");
var filterName = this.getAttribute('data-filter');
this.checked = filters.indexOf(',' + filterName) != -1;
}).checkboxradio('refresh');
$('#selectView', page).val(view).selectmenu('refresh');
}
$(document).on('pageinitdepends', "#playlistEditorPage", function () {
var page = this;
$('.btnPlay', page).on('click', function () {
var userdata = currentItem.UserData || {};
var mediaType = currentItem.MediaType;
if (currentItem.Type == "MusicArtist" || currentItem.Type == "MusicAlbum") {
mediaType = "Audio";
}
LibraryBrowser.showPlayMenu(null, currentItem.Id, currentItem.Type, currentItem.IsFolder, mediaType, userdata.PlaybackPositionTicks);
});
$('.itemsContainer', page).on('needsrefresh', function () {
reloadItems(page);
}).on('removefromplaylist', function (e, playlistItemId) {
removeFromPlaylist(page, [playlistItemId]);
}).on('playallfromhere', function (e, index) {
LibraryBrowser.playAllFromHere(_childrenItemsFunction, index);
}).on('queueallfromhere', function (e, index) {
LibraryBrowser.queueAllFromHere(_childrenItemsFunction, index);
});
}).on('pagebeforeshowready', "#playlistEditorPage", function () {
var page = this;
query.ParentId = LibraryMenu.getTopParentId();
var limit = LibraryBrowser.getDefaultPageSize();
// If the default page size has changed, the start index will have to be reset
if (limit != query.Limit) {
query.Limit = limit;
query.StartIndex = 0;
} }
};
var viewkey = getSavedQueryKey();
LibraryBrowser.loadSavedQueryValues(viewkey, query);
reloadItems(page);
updateFilterControls(this);
});
})(jQuery, document); })(jQuery, document);