jellyfin-web/dashboard-ui/scripts/librarylist.js

1226 lines
38 KiB
JavaScript
Raw Normal View History

2014-03-17 07:48:16 -07:00
(function ($, document, window) {
var showOverlayTimeout;
function onHoverOut() {
if (showOverlayTimeout) {
clearTimeout(showOverlayTimeout);
showOverlayTimeout = null;
}
2014-08-01 19:34:45 -07:00
$('.cardOverlayTarget:visible', this).each(function () {
2014-03-17 07:48:16 -07:00
var elem = this;
$(this).animate({ "height": "0" }, "fast", function () {
$(elem).hide();
});
});
2014-08-01 19:34:45 -07:00
$('.cardOverlayTarget:visible', this).stop().animate({ "height": "0" }, function () {
2014-03-17 07:48:16 -07:00
$(this).hide();
});
}
2014-08-01 19:34:45 -07:00
function getOverlayHtml(item, currentUser, card, commands) {
2014-03-17 07:48:16 -07:00
var html = '';
2014-08-01 19:34:45 -07:00
html += '<div class="cardOverlayInner">';
2014-03-17 07:48:16 -07:00
2014-08-01 19:34:45 -07:00
var className = card.className.toLowerCase();
var isMiniItem = className.indexOf('mini') != -1;
var isSmallItem = isMiniItem || className.indexOf('small') != -1;
var isPortrait = className.indexOf('portrait') != -1;
var isSquare = className.indexOf('square') != -1;
2014-03-17 07:48:16 -07:00
2014-06-23 09:05:19 -07:00
var parentName = isSmallItem || isMiniItem || isPortrait ? null : item.SeriesName;
2014-03-17 07:48:16 -07:00
var name = LibraryBrowser.getPosterViewDisplayName(item, true);
2014-08-01 19:34:45 -07:00
html += '<div style="margin-bottom:1em;">';
2014-06-23 09:05:19 -07:00
var logoHeight = isSmallItem || isMiniItem ? 20 : 26;
2014-03-17 07:48:16 -07:00
var maxLogoWidth = isPortrait ? 100 : 200;
var imgUrl;
if (parentName && item.ParentLogoItemId) {
imgUrl = ApiClient.getScaledImageUrl(item.ParentLogoItemId, {
height: logoHeight,
2014-03-17 07:48:16 -07:00
type: 'logo',
tag: item.ParentLogoImageTag
});
2014-11-18 19:45:12 -07:00
html += '<img src="' + imgUrl + '" style="max-height:' + logoHeight + 'px;max-width:100%;" />';
2014-03-17 07:48:16 -07:00
}
else if (item.ImageTags.Logo) {
imgUrl = ApiClient.getScaledImageUrl(item.Id, {
height: logoHeight,
type: 'logo',
tag: item.ImageTags.Logo
2014-03-17 07:48:16 -07:00
});
2014-11-18 19:45:12 -07:00
html += '<img src="' + imgUrl + '" style="max-height:' + logoHeight + 'px;max-width:100%;" />';
2014-03-17 07:48:16 -07:00
}
else {
html += parentName || name;
}
html += '</div>';
if (parentName) {
html += '<p>';
html += name;
html += '</p>';
2014-06-23 09:05:19 -07:00
} else if (!isSmallItem && !isMiniItem) {
2014-03-17 07:48:16 -07:00
html += '<p class="itemMiscInfo" style="white-space:nowrap;">';
html += LibraryBrowser.getMiscInfoHtml(item);
html += '</p>';
}
2014-06-23 09:05:19 -07:00
if (!isMiniItem) {
2015-01-03 12:38:22 -07:00
html += '<div style="margin:1em 0 .75em;">';
2014-06-23 09:05:19 -07:00
if (isPortrait) {
2015-01-01 22:36:27 -07:00
html += '<div class="itemCommunityRating">';
html += LibraryBrowser.getRatingHtml(item, false);
html += '</div>';
2015-01-03 12:38:22 -07:00
html += '<div class="userDataIcons" style="margin:.5em 0 0em;">';
2014-06-23 09:05:19 -07:00
html += LibraryBrowser.getUserDataIconsHtml(item);
2015-01-01 22:36:27 -07:00
html += '</div>';
2014-06-23 09:05:19 -07:00
} else {
2015-01-01 22:36:27 -07:00
2015-01-03 12:38:22 -07:00
html += '<span class="itemCommunityRating" style="vertical-align:middle;">';
2015-01-01 22:36:27 -07:00
html += LibraryBrowser.getRatingHtml(item, false);
html += '</span>';
2015-01-03 12:38:22 -07:00
html += '<span class="userDataIcons" style="vertical-align:middle;">';
2014-06-23 09:05:19 -07:00
html += LibraryBrowser.getUserDataIconsHtml(item);
html += '</span>';
}
html += '</div>';
2014-03-17 07:48:16 -07:00
}
html += '<div>';
var buttonMargin = isPortrait || isSquare ? "margin:0 4px 0 0;" : "margin:0 10px 0 0;";
var buttonCount = 0;
2014-03-29 08:40:32 -07:00
if (MediaController.canPlay(item)) {
2014-03-17 07:48:16 -07:00
var resumePosition = (item.UserData || {}).PlaybackPositionTicks || 0;
html += '<button type="button" class="btnPlayItem" data-itemid="' + item.Id + '" data-itemtype="' + item.Type + '" data-isfolder="' + item.IsFolder + '" data-mediatype="' + item.MediaType + '" data-resumeposition="' + resumePosition + '" data-mini="true" data-inline="true" data-icon="play" data-iconpos="notext" title="' + Globalize.translate('ButtonPlay') + '" style="' + buttonMargin + '">' + Globalize.translate('ButtonPlay') + '</button>';
2014-03-17 07:48:16 -07:00
buttonCount++;
}
if (commands.indexOf('trailer') != -1) {
2014-05-30 12:23:56 -07:00
html += '<button type="button" data-mini="true" data-inline="true" data-icon="video" data-iconpos="notext" class="btnPlayTrailer" data-itemid="' + item.Id + '" title="' + Globalize.translate('ButtonPlayTrailer') + '" style="' + buttonMargin + '">' + Globalize.translate('ButtonPlayTrailer') + '</button>';
2014-03-17 07:48:16 -07:00
buttonCount++;
}
2014-08-15 09:35:41 -07:00
html += '<button data-role="button" class="btnMoreCommands" data-mini="true" data-inline="true" data-icon="ellipsis-v" data-iconpos="notext" title="' + Globalize.translate('ButtonMore') + '" style="' + buttonMargin + '">' + Globalize.translate('ButtonMore') + '</button>';
buttonCount++;
2014-03-17 07:48:16 -07:00
html += '</div>';
html += '</div>';
return html;
}
2014-08-21 08:55:35 -07:00
function closeContextMenu() {
// Used by the tab menu, not the slide up
$('.tapHoldMenu').popup('close');
}
2014-03-17 07:48:16 -07:00
function onTrailerButtonClick() {
var id = this.getAttribute('data-itemid');
ApiClient.getLocalTrailers(Dashboard.getCurrentUserId(), id).done(function (trailers) {
2014-03-29 08:40:32 -07:00
MediaController.play({ items: trailers });
2014-03-17 07:48:16 -07:00
});
2014-08-21 08:55:35 -07:00
closeContextMenu();
2014-03-17 07:48:16 -07:00
return false;
}
function onPlayItemButtonClick() {
var id = this.getAttribute('data-itemid');
var type = this.getAttribute('data-itemtype');
var isFolder = this.getAttribute('data-isfolder') == 'true';
var mediaType = this.getAttribute('data-mediatype');
var resumePosition = parseInt(this.getAttribute('data-resumeposition'));
closeContextMenu();
LibraryBrowser.showPlayMenu(this, id, type, isFolder, mediaType, resumePosition);
return false;
}
2014-08-07 21:36:51 -07:00
function onMoreButtonClick() {
2014-08-15 09:35:41 -07:00
var card = $(this).parents('.card')[0];
2014-08-07 21:36:51 -07:00
2014-08-21 08:55:35 -07:00
closeContextMenu();
2014-08-07 21:36:51 -07:00
2014-08-15 09:35:41 -07:00
showContextMenu(card, {
showPlayOptions: false
});
2014-08-07 21:36:51 -07:00
return false;
}
2015-01-23 21:50:45 -07:00
function onAddToCollectionButtonClick() {
var id = this.getAttribute('data-itemid');
closeContextMenu();
BoxSetEditor.showPanel([id]);
return false;
}
function onAddToPlaylistButtonClick() {
2014-08-07 21:36:51 -07:00
var id = this.getAttribute('data-itemid');
2014-08-21 08:55:35 -07:00
closeContextMenu();
2014-08-10 15:13:17 -07:00
PlaylistManager.showPanel([id]);
return false;
}
function onShuffleButtonClick() {
2014-03-17 07:48:16 -07:00
var id = this.getAttribute('data-itemid');
2014-03-18 18:35:40 -07:00
MediaController.shuffle(id);
2014-08-21 08:55:35 -07:00
closeContextMenu();
return false;
}
function onInstantMixButtonClick() {
var id = this.getAttribute('data-itemid');
MediaController.instantMix(id);
2014-08-21 08:55:35 -07:00
closeContextMenu();
return false;
}
function onQueueButtonClick() {
var id = this.getAttribute('data-itemid');
MediaController.queue(id);
2014-08-21 08:55:35 -07:00
closeContextMenu();
return false;
}
function onPlayButtonClick() {
var id = this.getAttribute('data-itemid');
MediaController.play(id);
2014-08-21 08:55:35 -07:00
closeContextMenu();
return false;
}
2014-11-18 19:45:12 -07:00
function onDeleteButtonClick() {
var id = this.getAttribute('data-itemid');
closeContextMenu();
LibraryBrowser.deleteItem(id);
return false;
}
2014-12-10 23:20:28 -07:00
function onSyncButtonClick() {
var id = this.getAttribute('data-itemid');
closeContextMenu();
2014-12-12 20:56:30 -07:00
SyncManager.showMenu({
2014-12-16 22:30:31 -07:00
items: [
{
Id: id
}]
2014-12-10 23:20:28 -07:00
});
return false;
}
2014-09-15 20:33:30 -07:00
function onExternalPlayerButtonClick() {
closeContextMenu();
var id = this.getAttribute('data-itemid');
ExternalPlayer.showMenu(id);
return false;
}
2014-08-21 08:55:35 -07:00
function onPlayAllFromHereButtonClick() {
var index = this.getAttribute('data-index');
var page = $(this).parents('.page');
var itemsContainer = $('.hasContextMenu', page).parents('.itemsContainer');
closeContextMenu();
itemsContainer.trigger('playallfromhere', [index]);
return false;
}
function onQueueAllFromHereButtonClick() {
var index = this.getAttribute('data-index');
var page = $(this).parents('.page');
var itemsContainer = $('.hasContextMenu', page).parents('.itemsContainer');
closeContextMenu();
itemsContainer.trigger('queueallfromhere', [index]);
return false;
}
function onRemoveFromPlaylistButtonClick() {
var playlistItemId = this.getAttribute('data-playlistitemid');
var page = $(this).parents('.page');
var itemsContainer = $('.hasContextMenu', page).parents('.itemsContainer');
itemsContainer.trigger('removefromplaylist', [playlistItemId]);
closeContextMenu();
return false;
}
function onResumeButtonClick() {
var id = this.getAttribute('data-itemid');
MediaController.play({
ids: [id],
startPositionTicks: parseInt(this.getAttribute('data-ticks'))
});
2014-08-21 08:55:35 -07:00
closeContextMenu();
return false;
2014-03-18 18:35:40 -07:00
}
2014-08-01 19:34:45 -07:00
function onCardTapHold(e) {
2014-08-15 09:35:41 -07:00
showContextMenu(this, {});
e.preventDefault();
return false;
}
2014-08-15 09:35:41 -07:00
function showContextMenu(card, options) {
2014-08-21 08:55:35 -07:00
closeContextMenu();
2014-08-01 19:34:45 -07:00
var displayContextItem = card;
2014-07-19 21:46:29 -07:00
2014-08-01 19:34:45 -07:00
if ($(card).hasClass('listviewMenuButton')) {
2014-11-10 20:41:19 -07:00
card = $(card).parents('.listItem,.card')[0];
2014-07-19 21:46:29 -07:00
}
2014-08-01 19:34:45 -07:00
var itemId = card.getAttribute('data-itemid');
2014-08-11 16:41:11 -07:00
var playlistItemId = card.getAttribute('data-playlistitemid');
2014-08-01 19:34:45 -07:00
var commands = card.getAttribute('data-commands').split(',');
var itemType = card.getAttribute('data-itemtype');
var mediaType = card.getAttribute('data-mediatype');
var playbackPositionTicks = parseInt(card.getAttribute('data-positionticks') || '0');
var playAccess = card.getAttribute('data-playaccess');
var locationType = card.getAttribute('data-locationtype');
2014-08-21 08:55:35 -07:00
var index = card.getAttribute('data-index');
2014-03-18 18:35:40 -07:00
2014-08-01 19:34:45 -07:00
$(card).addClass('hasContextMenu');
2014-07-19 21:46:29 -07:00
Dashboard.getCurrentUser().done(function (user) {
2014-03-18 18:35:40 -07:00
var html = '<div data-role="popup" class="tapHoldMenu" data-theme="a">';
2014-03-18 18:35:40 -07:00
html += '<ul data-role="listview" style="min-width: 240px;">';
html += '<li data-role="list-divider">' + Globalize.translate('HeaderMenu') + '</li>';
2014-03-18 21:59:45 -07:00
2014-11-10 20:41:19 -07:00
var href = card.getAttribute('data-href') || card.href || $('a', card).attr('href');
2014-07-15 12:16:16 -07:00
2015-01-23 21:50:45 -07:00
if (commands.indexOf('addtocollection') != -1) {
html += '<li data-icon="plus"><a href="#" class="btnAddToCollection" data-itemid="' + itemId + '">' + Globalize.translate('ButtonAddToCollection') + '</a></li>';
}
2014-08-21 19:24:38 -07:00
if (commands.indexOf('playlist') != -1) {
html += '<li data-icon="plus"><a href="#" class="btnAddToPlaylist" data-itemid="' + itemId + '">' + Globalize.translate('ButtonAddToPlaylist') + '</a></li>';
}
2015-02-05 22:39:07 -07:00
if (commands.indexOf('delete') != -1) {
html += '<li data-icon="delete"><a href="#" class="btnDelete" data-itemId="' + itemId + '">' + Globalize.translate('ButtonDelete') + '</a></li>';
}
2014-12-19 23:06:27 -07:00
if (user.Policy.IsAdministrator && commands.indexOf('edit') != -1) {
2014-06-30 21:26:50 -07:00
html += '<li data-icon="edit"><a href="edititemmetadata.html?id=' + itemId + '">' + Globalize.translate('ButtonEdit') + '</a></li>';
}
2014-08-21 19:24:38 -07:00
if (commands.indexOf('instantmix') != -1) {
html += '<li data-icon="recycle"><a href="#" class="btnInstantMix" data-itemid="' + itemId + '">' + Globalize.translate('ButtonInstantMix') + '</a></li>';
}
html += '<li><a href="' + href + '">' + Globalize.translate('ButtonOpen') + '</a></li>';
2015-02-05 14:14:08 -07:00
//html += '<li><a href="' + href + '" target="_blank">' + Globalize.translate('ButtonOpenInNewTab') + '</a></li>';
2014-08-21 19:24:38 -07:00
2014-08-15 09:35:41 -07:00
if (options.showPlayOptions !== false) {
2014-08-21 08:55:35 -07:00
2015-03-25 11:29:21 -07:00
if (MediaController.canPlayByAttributes(itemType, mediaType, playAccess, locationType)) {
2014-08-15 09:35:41 -07:00
html += '<li data-icon="play"><a href="#" class="btnPlay" data-itemid="' + itemId + '">' + Globalize.translate('ButtonPlay') + '</a></li>';
2014-08-21 08:55:35 -07:00
if (commands.indexOf('playfromhere') != -1) {
html += '<li data-icon="play"><a href="#" class="btnPlayAllFromHere" data-index="' + index + '">' + Globalize.translate('ButtonPlayAllFromHere') + '</a></li>';
}
2014-08-15 09:35:41 -07:00
}
2014-09-15 20:33:30 -07:00
if (mediaType == 'Video' && ExternalPlayer.getExternalPlayers().length) {
html += '<li data-icon="play"><a href="#" class="btnExternalPlayer" data-itemid="' + itemId + '">' + Globalize.translate('ButtonPlayExternalPlayer') + '</a></li>';
}
2014-08-15 09:35:41 -07:00
if (playbackPositionTicks && mediaType != "Audio") {
html += '<li data-icon="play"><a href="#" class="btnResume" data-ticks="' + playbackPositionTicks + '" data-itemid="' + itemId + '">' + Globalize.translate('ButtonResume') + '</a></li>';
}
2014-08-15 09:35:41 -07:00
if (commands.indexOf('trailer') != -1) {
html += '<li data-icon="video"><a href="#" class="btnPlayTrailer" data-itemid="' + itemId + '">' + Globalize.translate('ButtonPlayTrailer') + '</a></li>';
}
2014-06-30 21:26:50 -07:00
}
2014-07-19 21:46:29 -07:00
if (MediaController.canQueueMediaType(mediaType, itemType)) {
html += '<li data-icon="plus"><a href="#" class="btnQueue" data-itemid="' + itemId + '">' + Globalize.translate('ButtonQueue') + '</a></li>';
2014-08-21 08:55:35 -07:00
if (commands.indexOf('queuefromhere') != -1) {
html += '<li data-icon="plus"><a href="#" class="btnQueueAllFromHere" data-index="' + index + '">' + Globalize.translate('ButtonQueueAllFromHere') + '</a></li>';
}
}
2014-07-19 21:46:29 -07:00
if (commands.indexOf('shuffle') != -1) {
html += '<li data-icon="recycle"><a href="#" class="btnShuffle" data-itemid="' + itemId + '">' + Globalize.translate('ButtonShuffle') + '</a></li>';
2014-03-18 21:59:45 -07:00
}
2014-08-05 21:18:13 -07:00
if (commands.indexOf('removefromplaylist') != -1) {
2014-08-11 16:41:11 -07:00
html += '<li data-icon="delete"><a href="#" class="btnRemoveFromPlaylist" data-playlistitemid="' + playlistItemId + '">' + Globalize.translate('ButtonRemoveFromPlaylist') + '</a></li>';
2014-08-05 21:18:13 -07:00
}
2014-12-10 23:20:28 -07:00
if (commands.indexOf('sync') != -1) {
2014-12-18 21:20:07 -07:00
html += '<li data-icon="cloud"><a href="#" class="btnSync" data-itemId="' + itemId + '">' + Globalize.translate('ButtonSync') + '</a></li>';
2014-12-10 23:20:28 -07:00
}
html += '</ul>';
html += '</div>';
$($.mobile.activePage).append(html);
2014-07-19 21:46:29 -07:00
var elem = $('.tapHoldMenu').popup({ positionTo: displayContextItem }).trigger('create').popup("open").on("popupafterclose", function () {
$(this).off("popupafterclose").remove();
2014-08-01 19:34:45 -07:00
$(card).removeClass('hasContextMenu');
});
$('.btnPlay', elem).on('click', onPlayButtonClick);
$('.btnResume', elem).on('click', onResumeButtonClick);
$('.btnQueue', elem).on('click', onQueueButtonClick);
$('.btnInstantMix', elem).on('click', onInstantMixButtonClick);
$('.btnShuffle', elem).on('click', onShuffleButtonClick);
2014-06-30 21:06:28 -07:00
$('.btnPlayTrailer', elem).on('click', onTrailerButtonClick);
$('.btnAddToPlaylist', elem).on('click', onAddToPlaylistButtonClick);
2014-08-05 21:18:13 -07:00
$('.btnRemoveFromPlaylist', elem).on('click', onRemoveFromPlaylistButtonClick);
2014-08-21 08:55:35 -07:00
$('.btnPlayAllFromHere', elem).on('click', onPlayAllFromHereButtonClick);
$('.btnQueueAllFromHere', elem).on('click', onQueueAllFromHereButtonClick);
2014-09-15 20:33:30 -07:00
$('.btnExternalPlayer', elem).on('click', onExternalPlayerButtonClick);
2014-11-18 19:45:12 -07:00
$('.btnDelete', elem).on('click', onDeleteButtonClick);
2014-12-10 23:20:28 -07:00
$('.btnSync', elem).on('click', onSyncButtonClick);
2015-01-23 21:50:45 -07:00
$('.btnAddToCollection', elem).on('click', onAddToCollectionButtonClick);
2014-03-18 18:35:40 -07:00
});
}
function onListViewMenuButtonClick(e) {
2014-08-15 09:35:41 -07:00
showContextMenu(this, {});
2014-03-18 21:59:45 -07:00
e.preventDefault();
return false;
2014-03-17 07:48:16 -07:00
}
2014-08-01 19:34:45 -07:00
function onGroupedCardClick(e) {
2014-08-01 19:34:45 -07:00
var card = this;
var itemId = card.getAttribute('data-itemid');
var context = card.getAttribute('data-context');
2014-07-15 12:16:16 -07:00
2014-08-01 19:34:45 -07:00
$(card).addClass('hasContextMenu');
var userId = Dashboard.getCurrentUserId();
var options = {
2014-08-01 19:34:45 -07:00
Limit: parseInt($('.playedIndicator', card).html() || '10'),
2014-07-05 08:01:29 -07:00
Fields: "PrimaryImageAspectRatio,DateCreated",
ParentId: itemId,
GroupItems: false
};
2015-05-14 19:16:57 -07:00
ApiClient.getJSON(ApiClient.getUrl('Users/' + userId + '/Items/Latest', options)).done(function (items) {
var ids = items.map(function (i) {
return i.Id;
});
showItemsOverlay({
ids: ids,
context: context
});
});
e.preventDefault();
return false;
}
function getItemsOverlay(ids, context) {
2015-05-15 11:07:36 -07:00
$('.detailsMenu').remove();
2015-05-14 19:16:57 -07:00
var html = '<div data-role="popup" class="detailsMenu" data-transition="slidedown" style="border:0;padding:0;" data-ids="' + ids.join(',') + '" data-context="' + (context || '') + '">';
html += '<div style="padding:1em 1em;background:rgba(20,20,20,1);margin:0;text-align:center;" class="detailsMenuHeader">';
html += '<button type="button" class="imageButton detailsMenuLeftButton" data-role="none"><i class="fa fa-arrow-left"></i></button>';
2015-05-18 09:40:20 -07:00
html += '<h3 style="font-weight:400;margin:.5em 0;"></h3>';
2015-05-14 19:16:57 -07:00
html += '<button type="button" class="imageButton detailsMenuRightButton" data-role="none"><i class="fa fa-arrow-right"></i></button>';
html += '</div>';
html += '<div class="detailsMenuContent" style="background-position:center center;background-repeat:no-repeat;background-size:cover;">';
2015-05-15 08:46:20 -07:00
html += '<div style="padding:.5em 1em 1em;background:rgba(10,10,10,.80);" class="detailsMenuContentInner">';
2015-05-14 19:16:57 -07:00
html += '</div>';
html += '</div>';
html += '</div>';
$($.mobile.activePage).append(html);
var elem = $('.detailsMenu').popup().trigger('create').popup("open").on("popupafterclose", function () {
$(this).off("popupafterclose").remove();
});
$('.detailsMenuLeftButton', elem).on('click', function () {
var overlay = $(this).parents('.detailsMenu');
setItemIntoOverlay(overlay, parseInt(overlay.attr('data-index')) - 1, context);
});
$('.detailsMenuRightButton', elem).on('click', function () {
var overlay = $(this).parents('.detailsMenu');
setItemIntoOverlay(overlay, parseInt(overlay.attr('data-index')) + 1, context);
});
return elem;
}
function setItemIntoOverlay(elem, index) {
var ids = elem.attr('data-ids').split(',');
var itemId = ids[index];
var userId = Dashboard.getCurrentUserId();
var context = elem.attr('data-context');
elem.attr('data-index', index);
if (index > 0) {
$('.detailsMenuLeftButton', elem).show();
} else {
$('.detailsMenuLeftButton', elem).hide();
}
if (index < ids.length - 1) {
$('.detailsMenuRightButton', elem).show();
} else {
$('.detailsMenuRightButton', elem).hide();
}
var promise1 = ApiClient.getItem(userId, itemId);
var promise2 = Dashboard.getCurrentUser();
$.when(promise1, promise2).done(function (response1, response2) {
var item = response1[0];
2015-05-14 19:16:57 -07:00
var user = response2[0];
var background = 'none';
2015-05-15 08:46:20 -07:00
if (AppInfo.enableDetailsMenuImages) {
2015-05-14 19:16:57 -07:00
var backdropUrl;
var screenWidth = $(window).width();
var backdropWidth = Math.min(screenWidth, 800);
if (item.BackdropImageTags && item.BackdropImageTags.length) {
backdropUrl = ApiClient.getScaledImageUrl(item.Id, {
type: "Backdrop",
index: 0,
maxWidth: backdropWidth,
tag: item.BackdropImageTags[0]
});
}
else if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
backdropUrl = ApiClient.getScaledImageUrl(item.ParentBackdropItemId, {
type: 'Backdrop',
index: 0,
tag: item.ParentBackdropImageTags[0],
maxWidth: backdropWidth
});
}
2014-07-15 12:57:27 -07:00
2015-05-14 19:16:57 -07:00
if (backdropUrl) {
background = 'url(' + backdropUrl + ')';
2014-07-15 12:57:27 -07:00
}
}
2015-05-14 19:16:57 -07:00
$('.detailsMenuContent', elem).css('backgroundImage', background);
2015-05-14 19:16:57 -07:00
var headerHtml = LibraryBrowser.getPosterViewDisplayName(item);
$('.detailsMenuHeader', elem).removeClass('detailsMenuHeaderWithLogo');
2015-05-15 08:46:20 -07:00
if (AppInfo.enableDetailsMenuImages) {
2015-05-14 19:16:57 -07:00
var logoUrl;
2015-05-14 19:16:57 -07:00
var logoHeight = 30;
if (item.ImageTags && item.ImageTags.Logo) {
logoUrl = ApiClient.getScaledImageUrl(item.Id, {
type: "Logo",
index: 0,
height: logoHeight,
tag: item.ImageTags.Logo
});
}
if (logoUrl) {
headerHtml = '<img src="' + logoUrl + '" style="height:' + logoHeight + 'px;" />';
$('.detailsMenuHeader', elem).addClass('detailsMenuHeaderWithLogo');
}
}
$('h3', elem).html(headerHtml);
var contentHtml = '';
var miscInfo = LibraryBrowser.getMiscInfoHtml(item);
if (miscInfo) {
contentHtml += '<p>' + miscInfo + '</p>';
}
var userData = LibraryBrowser.getUserDataIconsHtml(item);
if (userData) {
contentHtml += '<p>' + userData + '</p>';
}
var ratingHtml = LibraryBrowser.getRatingHtml(item);
if (ratingHtml) {
contentHtml += '<p>' + ratingHtml + '</p>';
}
if (item.Overview) {
contentHtml += '<p class="detailsMenuOverview">' + item.Overview + '</p>';
}
contentHtml += '<div class="detailsMenuButtons">';
if (MediaController.canPlay(item)) {
if (item.MediaType == 'Video' && !item.IsFolder && item.UserData && item.UserData.PlaybackPositionTicks) {
contentHtml += '<div class="detailsMenuButtonContainer">';
contentHtml += '<a href="#" class="btn btnAltAction btnResume">';
contentHtml += '<i class="fa fa-play"></i>';
contentHtml += '<span>' + Globalize.translate('ButtonResume') + '</span>';
contentHtml += '</a>';
contentHtml += '</div>';
}
contentHtml += '<div class="detailsMenuButtonContainer">';
contentHtml += '<a href="#" class="btn btnActionAccent btnPlay">';
contentHtml += '<i class="fa fa-play"></i>';
contentHtml += '<span>' + Globalize.translate('ButtonPlay') + '</span>';
contentHtml += '</a>';
contentHtml += '</div>';
}
contentHtml += '<div class="detailsMenuButtonContainer">';
contentHtml += '<a href="' + LibraryBrowser.getHref(item, context) + '" class="btn" style="background-color: #673AB7;">';
contentHtml += '<i class="fa fa-folder-open"></i>';
contentHtml += '<span>' + Globalize.translate('ButtonOpen') + '</span>';
contentHtml += '</a>';
contentHtml += '</div>';
if (SyncManager.isAvailable(item, user)) {
contentHtml += '<div class="detailsMenuButtonContainer">';
contentHtml += '<a href="#" class="btn btnSync">';
contentHtml += '<i class="fa fa-cloud"></i>';
contentHtml += '<span>' + Globalize.translate('ButtonSync') + '</span>';
contentHtml += '</a>';
contentHtml += '</div>';
}
contentHtml += '</div>';
$('.detailsMenuContentInner', elem).html(contentHtml).trigger('create');
$('.btnSync', elem).on('click', function () {
elem.popup('close');
SyncManager.showMenu({
items: [item]
});
2015-05-10 06:06:12 -07:00
});
2015-05-14 19:16:57 -07:00
$('.btnPlay', elem).on('click', function () {
2015-05-14 19:16:57 -07:00
elem.popup('close');
2015-05-14 19:16:57 -07:00
MediaController.play({
items: [item]
});
});
2015-05-14 19:16:57 -07:00
$('.btnResume', elem).on('click', function () {
2015-05-14 19:16:57 -07:00
elem.popup('close');
2015-05-14 19:16:57 -07:00
MediaController.play({
items: [item],
startPositionTicks: item.UserData.PlaybackPositionTicks
});
});
});
2015-05-14 19:16:57 -07:00
}
2015-05-14 19:16:57 -07:00
function showItemsOverlay(options) {
var context = options.context;
var elem = getItemsOverlay(options.ids, context);
setItemIntoOverlay(elem, 0);
}
2015-05-14 19:16:57 -07:00
function onCardClick() {
var info = LibraryBrowser.getListItemInfo(this);
var itemId = info.id;
var context = info.context;
var card = $(this);
if (card.hasClass('itemWithAction')) {
return;
}
if (!card.hasClass('card')) {
card = $(card).parents('.card');
}
if (card.hasClass('groupedCard')) {
return;
}
if (card.attr('data-detailsmenu') != 'true') {
return;
}
2015-05-14 19:16:57 -07:00
showItemsOverlay({
ids: [itemId],
context: context
});
return false;
}
$.fn.createCardMenus = function (options) {
2014-03-17 07:48:16 -07:00
2014-05-21 09:49:19 -07:00
var preventHover = false;
2014-03-17 07:48:16 -07:00
function onShowTimerExpired(elem) {
2014-11-11 21:51:40 -07:00
elem = $('a', elem)[0];
2014-03-17 07:48:16 -07:00
if ($(elem).hasClass('hasContextMenu')) {
return;
}
2014-03-18 21:59:45 -07:00
if ($('.itemSelectionPanel:visible', elem).length) {
2014-03-17 18:45:41 -07:00
return;
}
2014-08-01 19:34:45 -07:00
var innerElem = $('.cardOverlayTarget', elem);
2014-11-11 21:51:40 -07:00
var dataElement = elem;
while (!dataElement.getAttribute('data-itemid')) {
dataElement = dataElement.parentNode;
}
var id = dataElement.getAttribute('data-itemid');
var commands = dataElement.getAttribute('data-commands').split(',');
2014-03-17 07:48:16 -07:00
var promise1 = ApiClient.getItem(Dashboard.getCurrentUserId(), id);
var promise2 = Dashboard.getCurrentUser();
$.when(promise1, promise2).done(function (response1, response2) {
var item = response1[0];
var user = response2[0];
2015-01-01 22:36:27 -07:00
var card = $(elem);
if (!card.hasClass('card')) {
card = card.parents('.card');
}
innerElem.html(getOverlayHtml(item, user, card[0], commands)).trigger('create');
2014-03-17 07:48:16 -07:00
$('.btnPlayItem', innerElem).on('click', onPlayItemButtonClick);
2014-03-17 07:48:16 -07:00
$('.btnPlayTrailer', innerElem).on('click', onTrailerButtonClick);
2014-08-07 21:36:51 -07:00
$('.btnMoreCommands', innerElem).on('click', onMoreButtonClick);
2014-03-17 07:48:16 -07:00
});
innerElem.show().each(function () {
this.style.height = 0;
}).animate({ "height": "100%" }, "fast");
}
function onHoverIn() {
2014-05-21 09:49:19 -07:00
if (preventHover === true) {
preventHover = false;
return;
}
2014-03-17 07:48:16 -07:00
if (showOverlayTimeout) {
clearTimeout(showOverlayTimeout);
showOverlayTimeout = null;
}
var elem = this;
showOverlayTimeout = setTimeout(function () {
onShowTimerExpired(elem);
}, 1000);
}
2014-05-21 09:49:19 -07:00
function preventTouchHover() {
preventHover = true;
2014-03-17 07:48:16 -07:00
}
2015-05-14 19:16:57 -07:00
this.off('.cardMenu')
2015-01-22 23:15:15 -07:00
.on('contextmenu.cardMenu', '.card', onCardTapHold)
.off('.latestgroupings')
.on('click.latestgroupings', '.groupedCard', onGroupedCardClick)
.off('.dotmenu')
.on('click.dotmenu', '.listviewMenuButton', onListViewMenuButtonClick)
.off('.cardHoverMenu')
.on('mouseenter.cardHoverMenu', '.card:not(.bannerCard)', onHoverIn)
.on('mouseleave.cardHoverMenu', '.card:not(.bannerCard)', onHoverOut)
.on("touchstart.cardHoverMenu", '.card:not(.bannerCard)', preventTouchHover);
2015-05-14 19:16:57 -07:00
this.off('.mediaDetails').on('click.mediaDetails', '.mediaItem', onCardClick);
return this;
2014-03-17 07:48:16 -07:00
};
2014-03-17 18:45:41 -07:00
function toggleSelections(page) {
Dashboard.showLoadingMsg();
var selectionCommands = $('.selectionCommands', page);
if (selectionCommands.is(':visible')) {
selectionCommands.hide();
$('.itemSelectionPanel', page).hide();
} else {
selectionCommands.show();
var panels = $('.itemSelectionPanel', page).show();
if (!panels.length) {
var index = 0;
$('.cardContent', page).each(function () {
var chkItemSelectId = 'chkItemSelect' + index;
$(this).append('<div class="itemSelectionPanel" onclick="return false;"><div class="ui-checkbox"><label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off" for="' + chkItemSelectId + '">Select</label><input id="' + chkItemSelectId + '" type="checkbox" class="chkItemSelect" data-enhanced="true" /></div></div>');
index++;
});
$('.itemsContainer', page).trigger('create');
}
2014-03-18 18:35:40 -07:00
$('.chkItemSelect:checked', page).checked(false).checkboxradio('refresh');
2014-03-17 18:45:41 -07:00
}
Dashboard.hideLoadingMsg();
}
function hideSelections(page) {
$('.selectionCommands', page).hide();
$('.itemSelectionPanel', page).hide();
}
2014-03-18 18:35:40 -07:00
2014-03-17 18:45:41 -07:00
function getSelectedItems(page) {
2014-03-18 18:35:40 -07:00
2014-03-17 18:45:41 -07:00
var selection = $('.chkItemSelect:checked', page);
2014-08-01 19:34:45 -07:00
return selection.parents('.card')
2014-03-18 18:35:40 -07:00
.map(function () {
2014-03-17 18:45:41 -07:00
return this.getAttribute('data-itemid');
}).get();
}
2014-03-18 18:35:40 -07:00
2014-12-10 23:20:28 -07:00
function sync(page) {
var selection = getSelectedItems(page);
if (selection.length < 1) {
Dashboard.alert({
message: Globalize.translate('MessagePleaseSelectOneItem'),
title: Globalize.translate('HeaderError')
});
return;
}
2014-12-12 20:56:30 -07:00
SyncManager.showMenu({
items: selection
});
2014-12-10 23:20:28 -07:00
2014-12-12 20:56:30 -07:00
$(SyncManager).off('jobsubmit.librarylist').on('jobsubmit.librarylist', function () {
2014-12-10 23:20:28 -07:00
2014-12-12 20:56:30 -07:00
hideSelections(page);
2014-12-10 23:20:28 -07:00
});
}
2014-03-17 18:45:41 -07:00
function combineVersions(page) {
var selection = getSelectedItems(page);
2014-03-18 18:35:40 -07:00
2014-03-17 18:45:41 -07:00
if (selection.length < 2) {
2014-03-18 18:35:40 -07:00
2014-03-17 18:45:41 -07:00
Dashboard.alert({
2014-06-03 20:34:36 -07:00
message: Globalize.translate('MessagePleaseSelectTwoItems'),
2014-05-30 12:23:56 -07:00
title: Globalize.translate('HeaderError')
2014-03-17 18:45:41 -07:00
});
return;
}
2014-08-01 19:34:45 -07:00
var names = $('.chkItemSelect:checked', page).parents('.card').get().reverse().map(function (e) {
2014-03-18 18:35:40 -07:00
2014-08-01 19:34:45 -07:00
return $('.cardText', e).html();
2014-03-18 18:35:40 -07:00
}).join('<br/>');
2014-05-30 12:23:56 -07:00
var msg = Globalize.translate('MessageTheFollowingItemsWillBeGrouped') + "<br/><br/>" + names;
2014-03-18 18:35:40 -07:00
2014-05-30 12:23:56 -07:00
msg += "<br/><br/>" + Globalize.translate('MessageConfirmItemGrouping');
2014-03-18 18:35:40 -07:00
Dashboard.confirm(msg, "Group Versions", function (confirmResult) {
if (confirmResult) {
Dashboard.showLoadingMsg();
2014-07-01 22:16:59 -07:00
ApiClient.ajax({
2014-03-18 18:35:40 -07:00
type: "POST",
url: ApiClient.getUrl("Videos/MergeVersions", { Ids: selection.join(',') })
}).done(function () {
Dashboard.hideLoadingMsg();
2014-06-03 20:34:36 -07:00
hideSelections(page);
2014-03-18 18:35:40 -07:00
$('.itemsContainer', page).trigger('needsrefresh');
});
}
});
2014-03-17 18:45:41 -07:00
}
2014-06-03 20:34:36 -07:00
function addToCollection(page) {
2014-06-03 20:34:36 -07:00
var selection = getSelectedItems(page);
if (selection.length < 1) {
Dashboard.alert({
message: Globalize.translate('MessagePleaseSelectOneItem'),
title: Globalize.translate('HeaderError')
});
return;
}
2015-01-23 21:50:45 -07:00
BoxSetEditor.showPanel(selection);
2014-06-03 20:34:36 -07:00
}
2014-03-17 18:45:41 -07:00
function addToPlaylist(page) {
2014-08-07 21:36:51 -07:00
var selection = getSelectedItems(page);
if (selection.length < 1) {
Dashboard.alert({
message: Globalize.translate('MessagePleaseSelectOneItem'),
title: Globalize.translate('HeaderError')
});
return;
}
PlaylistManager.showPanel(selection);
}
2014-11-11 21:51:40 -07:00
function onItemWithActionClick(e) {
2014-08-30 07:26:29 -07:00
var elem = this;
2014-11-11 21:51:40 -07:00
2014-08-30 07:26:29 -07:00
var action = elem.getAttribute('data-action');
2014-11-11 21:51:40 -07:00
var elemWithAttributes = elem;
if (action) {
while (!elemWithAttributes.getAttribute('data-itemid')) {
elemWithAttributes = elemWithAttributes.parentNode;
}
}
2014-10-20 13:23:40 -07:00
var index;
var itemsContainer;
var itemId = elemWithAttributes.getAttribute('data-itemid');
2014-08-30 07:26:29 -07:00
if (action == 'play') {
MediaController.play(itemId);
}
else if (action == 'playallfromhere') {
2014-10-20 13:23:40 -07:00
index = elemWithAttributes.getAttribute('data-index');
itemsContainer = $(elem).parents('.itemsContainer');
2014-08-30 07:26:29 -07:00
closeContextMenu();
itemsContainer.trigger('playallfromhere', [index]);
}
return false;
}
2015-05-06 20:11:51 -07:00
function resetImages(page) {
2015-05-07 07:04:10 -07:00
$('cardImage', page).remove();
2015-05-06 20:11:51 -07:00
}
2015-05-19 12:15:40 -07:00
$(document).on('pageinitdepends', ".libraryPage", function () {
2014-03-17 18:45:41 -07:00
var page = this;
$('.btnAddToPlaylist', page).on('click', function () {
addToPlaylist(page);
});
2014-03-17 18:45:41 -07:00
$('.btnMergeVersions', page).on('click', function () {
combineVersions(page);
});
2014-12-10 23:20:28 -07:00
$('.btnSyncItems', page).on('click', function () {
sync(page);
});
2014-06-03 20:34:36 -07:00
$('.btnAddToCollection', page).on('click', function () {
addToCollection(page);
});
2014-07-19 21:46:29 -07:00
$('.viewTabButton', page).on('click', function () {
$('.viewTabButton', page).removeClass('ui-btn-active');
$(this).addClass('ui-btn-active');
$('.viewTab', page).hide();
$('.' + this.getAttribute('data-tab'), page).show();
});
var viewPanel = $('.viewPanel', page);
2014-07-19 21:46:29 -07:00
$('#selectPageSize', viewPanel).html(LibraryBrowser.getDefaultPageSizeSelections().map(function (i) {
return '<option value="' + i + '">' + i + '</option>';
}).join('')).selectmenu('refresh');
2015-01-22 23:15:15 -07:00
$(page).on('click', '.btnToggleSelections', function () {
2014-07-19 21:46:29 -07:00
2015-01-22 23:15:15 -07:00
toggleSelections(page);
2014-07-19 21:46:29 -07:00
2015-01-22 23:15:15 -07:00
}).on('click', '.itemWithAction', onItemWithActionClick);
$('.itemsContainer', page).createCardMenus();
2014-07-19 21:46:29 -07:00
2015-05-19 12:15:40 -07:00
}).on('pagebeforeshowready', ".libraryPage", function () {
2014-06-03 20:34:36 -07:00
var page = this;
hideSelections(page);
2014-07-19 21:46:29 -07:00
$('.viewTabButton:first', page).trigger('click');
2015-05-06 20:11:51 -07:00
}).on('pagebeforehide', ".libraryPage", function () {
var page = this;
resetImages(page);
2014-03-17 18:45:41 -07:00
});
2014-08-01 19:34:45 -07:00
function renderUserDataChanges(card, userData) {
if (userData.Played) {
2014-08-01 19:34:45 -07:00
if (!$('.playedIndicator', card).length) {
2014-08-01 19:34:45 -07:00
$('<div class="playedIndicator"></div>').insertAfter($('.cardOverlayTarget', card));
}
2014-08-01 19:34:45 -07:00
$('.playedIndicator', card).html('<div class="ui-icon-check ui-btn-icon-notext"></div>');
$('.cardProgress', card).remove();
}
else if (userData.UnplayedItemCount) {
2014-08-01 19:34:45 -07:00
if (!$('.playedIndicator', card).length) {
2014-08-01 19:34:45 -07:00
$('<div class="playedIndicator"></div>').insertAfter($('.cardOverlayTarget', card));
}
2014-08-01 19:34:45 -07:00
$('.playedIndicator', card).html(userData.UnplayedItemCount);
}
else {
2014-08-01 19:34:45 -07:00
$('.playedIndicator', card).remove();
var progressHtml = LibraryBrowser.getItemProgressBarHtml(userData);
2014-08-01 19:34:45 -07:00
$('.cardProgress', card).html(progressHtml);
}
}
function onUserDataChanged(userData) {
2014-07-26 10:30:15 -07:00
var cssClass = LibraryBrowser.getUserDataCssClass(userData.Key);
2014-10-25 11:32:58 -07:00
2014-10-20 13:23:40 -07:00
if (!cssClass) {
return;
}
2014-07-26 10:30:15 -07:00
$('.' + cssClass).each(function () {
2014-07-19 21:46:29 -07:00
2015-01-03 12:38:22 -07:00
var mediaType = this.getAttribute('data-mediatype');
2014-07-19 21:46:29 -07:00
2015-01-03 12:38:22 -07:00
if (mediaType == 'Video') {
this.setAttribute('data-positionticks', (userData.PlaybackPositionTicks || 0));
if ($(this).hasClass('card')) {
renderUserDataChanges(this, userData);
}
2014-07-19 21:46:29 -07:00
}
});
}
function onWebSocketMessage(e, data) {
var msg = data;
if (msg.MessageType === "UserDataChanged") {
if (msg.Data.UserId == Dashboard.getCurrentUserId()) {
for (var i = 0, length = msg.Data.UserDataList.length; i < length; i++) {
onUserDataChanged(msg.Data.UserDataList[i]);
}
}
}
}
2014-10-25 11:32:58 -07:00
function initializeApiClient(apiClient) {
$(apiClient).off('websocketmessage.librarylist', onWebSocketMessage).on('websocketmessage.librarylist', onWebSocketMessage);
}
2015-05-19 12:15:40 -07:00
Dashboard.ready(function () {
2014-10-25 11:32:58 -07:00
2015-05-19 12:15:40 -07:00
if (window.ApiClient) {
initializeApiClient(window.ApiClient);
}
$(ConnectionManager).on('apiclientcreated', function (e, apiClient) {
initializeApiClient(apiClient);
});
2014-10-25 11:32:58 -07:00
});
2014-03-17 07:48:16 -07:00
})(jQuery, document, window);