jellyfin-web/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/chaptercardbuilder.js

137 lines
4.2 KiB
JavaScript
Raw Normal View History

2016-07-30 23:21:49 -07:00
define(['datetime', 'imageLoader', 'connectionManager', 'itemShortcuts'], function (datetime, imageLoader, connectionManager, itemShortcuts) {
2016-07-28 19:42:42 -07:00
function buildChapterCardsHtml(item, chapters, options) {
var className = 'card scalableCard itemAction chapterCard';
var mediaStreams = ((item.MediaSources || [])[0] || {}).MediaStreams || [];
var videoStream = mediaStreams.filter(function (i) {
return i.Type == 'Video';
})[0] || {};
2016-08-11 13:28:49 -07:00
var shape = (options.backdropShape || 'backdrop');
2016-07-28 19:42:42 -07:00
if (videoStream.Width && videoStream.Height) {
if ((videoStream.Width / videoStream.Height) <= 1.34) {
2016-08-11 13:28:49 -07:00
shape = (options.squareShape || 'square');
2016-07-28 19:42:42 -07:00
}
}
2016-08-11 13:28:49 -07:00
className += ' ' + shape + 'Card';
2016-07-28 19:42:42 -07:00
if (options.block || options.rows) {
className += ' block';
}
var html = '';
var itemsInRow = 0;
2016-07-30 19:54:17 -07:00
var apiClient = connectionManager.getApiClient(item.ServerId);
2016-07-28 19:42:42 -07:00
for (var i = 0, length = chapters.length; i < length; i++) {
if (options.rows && itemsInRow == 0) {
html += '<div class="cardColumn">';
}
var chapter = chapters[i];
2016-08-11 13:28:49 -07:00
html += buildChapterCard(item, apiClient, chapter, i, options, className, shape);
2016-07-28 19:42:42 -07:00
itemsInRow++;
if (options.rows && itemsInRow >= options.rows) {
itemsInRow = 0;
html += '</div>';
}
}
return html;
}
2016-07-30 19:54:17 -07:00
function getImgUrl(item, chapter, index, maxWidth, apiClient) {
if (chapter.ImageTag) {
return apiClient.getScaledImageUrl(item.Id, {
maxWidth: maxWidth,
tag: chapter.ImageTag,
type: "Chapter",
index: index
});
}
return null;
}
2016-07-28 19:42:42 -07:00
2016-08-11 13:28:49 -07:00
function buildChapterCard(item, apiClient, chapter, index, options, className, shape) {
2016-07-30 19:54:17 -07:00
var imgUrl = getImgUrl(item, chapter, index, options.width || 400, apiClient);
2016-07-28 19:42:42 -07:00
2016-07-31 22:09:09 -07:00
var cardImageContainerClass = 'cardImageContainer chapterCardImageContainer';
2016-07-28 19:42:42 -07:00
if (options.coverImage) {
cardImageContainerClass += ' coveredImage';
}
var dataAttributes = ' data-action="play" data-isfolder="' + item.IsFolder + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-type="' + item.Type + '" data-mediatype="' + item.MediaType + '" data-positionticks="' + chapter.StartPositionTicks + '"';
var cardImageContainer = imgUrl ? ('<div class="' + cardImageContainerClass + ' lazy" data-src="' + imgUrl + '">') : ('<div class="' + cardImageContainerClass + '">');
2016-07-31 22:09:09 -07:00
if (!imgUrl) {
cardImageContainer += '<i class="md-icon cardImageIcon">local_movies</i>';
}
2016-07-28 19:42:42 -07:00
var nameHtml = '';
nameHtml += '<div class="cardText">' + chapter.Name + '</div>';
nameHtml += '<div class="cardText">' + datetime.getDisplayRunningTime(chapter.StartPositionTicks) + '</div>';
var html = '\
<button type="button" class="' + className + '"' + dataAttributes + '> \
<div class="cardBox">\
<div class="cardScalable">\
2016-08-11 13:28:49 -07:00
<div class="cardPadder-'+ shape + '"></div>\
2016-07-28 19:42:42 -07:00
<div class="cardContent">\
' + cardImageContainer + '\
</div>\
<div class="innerCardFooter">\
' + nameHtml + '\
</div>\
</div>\
</div>\
</div>\
</button>'
;
return html;
}
function buildChapterCards(item, chapters, options) {
if (options.parentContainer) {
2016-07-30 19:54:17 -07:00
// Abort if the container has been disposed
if (!document.body.contains(options.parentContainer)) {
return;
}
2016-07-28 19:42:42 -07:00
if (chapters.length) {
options.parentContainer.classList.remove('hide');
} else {
options.parentContainer.classList.add('hide');
return;
}
}
var html = buildChapterCardsHtml(item, chapters, options);
options.itemsContainer.innerHTML = html;
imageLoader.lazyChildren(options.itemsContainer);
2016-07-30 23:21:49 -07:00
itemShortcuts.off(options.itemsContainer);
itemShortcuts.on(options.itemsContainer);
2016-07-28 19:42:42 -07:00
}
return {
buildChapterCards: buildChapterCards
};
});