cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-18 03:18:19 -07:00
Code Issues Packages Projects Releases Wiki Activity

use shared chaptercardbuilder.js

Browse Source
This commit is contained in:
Luke Pulverenti 2016-07-30 22:54:17 -04:00
parent f9089f44cc
commit ce0fd77a63
8 changed files with 135 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css vendored
View File

@ -150,6 +150,22 @@ button.cardContent {
transition: filter, -webkit-filter 600ms ease-out !important;
}
.mediaSourceIndicator {
display: flex;
position: absolute;
align-items: center;
justify-content: center;
top: .3em;
left: .3em;
text-align: center;
vertical-align: middle;
width: 24px;
height: 24px;
border-radius: 50%;
color: #fff;
background: rgb(51, 136, 204);
}
.cardImageContainer {
background-size: contain;
background-repeat: no-repeat;
@ -163,6 +179,20 @@ button.cardContent {
background-clip: content-box !important;
}
button.cardImageContainer {
border: 0;
padding: 0;
background-color: transparent;
box-sizing: content-box;
outline: none !important;
cursor: pointer;
}
/* Used by non-scalable cards */
.forceRelative {
position: relative;
}
.cardContent {
overflow: hidden;
position: absolute;

62
dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js vendored
View File

@ -1007,10 +1007,34 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
cardImageContainerClass += " " + cardBoxClass;
}
var overlayButtons = '';
if (!layoutManager.tv) {
var overlayPlayButton = options.overlayPlayButton;
if (overlayPlayButton == null && !options.overlayMoreButton) {
overlayPlayButton = item.MediaType == 'Video';
}
if (overlayPlayButton && !item.IsPlaceHolder && (item.LocationType != 'Virtual' || !item.MediaType || item.Type == 'Program') && item.Type != 'Person' && item.PlayAccess == 'Full') {
overlayButtons += '<button is="paper-icon-button-light" class="cardOverlayButton itemAction autoSize" data-action="playmenu" onclick="return false;"><i class="md-icon">play_arrow</i></button>';
}
if (options.overlayMoreButton) {
var moreIcon = appHost.moreIcon == 'dots-horiz' ? '&#xE5D3;' : '&#xE5D4;';
overlayButtons += '<button is="paper-icon-button-light" class="cardOverlayButton itemAction autoSize" data-action="menu" onclick="return false;"><i class="md-icon">' + moreIcon + '</i></button>';
}
}
if (options.showChildCountIndicator && item.ChildCount) {
className += ' groupedCard';
}
// cardBox can be it's own separate element if an outer footer is ever needed
var cardImageContainerOpen = imgUrl ? ('<div class="' + cardImageContainerClass + ' lazy" data-src="' + imgUrl + '">') : ('<div class="' + cardImageContainerClass + '">');
var cardImageContainerOpen;
var cardImageContainerClose = '';
var cardBoxClose = '</div>';
var cardBoxClose = '';
var cardContentClose = '';
var cardScalableClose = '';
@ -1024,10 +1048,22 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
cardContentOpen = '<button type="button" class="clearButton cardContent itemAction" data-action="' + action + '">';
cardContentClose = '</button>';
}
cardImageContainerOpen = imgUrl ? ('<div class="' + cardImageContainerClass + ' lazy" data-src="' + imgUrl + '">') : ('<div class="' + cardImageContainerClass + '">');
cardImageContainerOpen = '<div class="' + cardBoxClass + '"><div class="cardScalable"><div class="cardPadder"></div>' + cardContentOpen + cardImageContainerOpen;
cardBoxClose = '</div>';
cardScalableClose = '</div>';
cardImageContainerClose = '</div>';
} else {
if (overlayButtons && !separateCardBox) {
cardImageContainerOpen = imgUrl ? ('<button type="button" data-action="' + action + '" class="itemAction ' + cardImageContainerClass + ' lazy" data-src="' + imgUrl + '">') : ('<button type="button" data-action="' + action + '" class="itemAction ' + cardImageContainerClass + '">');
cardImageContainerClose = '</button>';
className += ' forceRelative';
} else {
cardImageContainerOpen = imgUrl ? ('<div class="' + cardImageContainerClass + ' lazy" data-src="' + imgUrl + '">') : ('<div class="' + cardImageContainerClass + '">');
cardImageContainerClose = '</div>';
}
}
var indicatorsHtml = '';
@ -1082,26 +1118,18 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
progressHtml = '';
}
var mediaSourceCount = item.MediaSourceCount || 1;
if (mediaSourceCount > 1) {
innerCardFooter += '<div class="mediaSourceIndicator">' + mediaSourceCount + '</div>';
}
var outerCardFooter = '';
if (!options.overlayText && !footerOverlayed) {
footerCssClass = options.cardLayout ? 'cardFooter' : 'cardFooter transparent';
outerCardFooter = getCardFooterText(item, options, showTitle, imgUrl, footerCssClass, progressHtml, true);
}
var overlayButtons = '';
if (!layoutManager.tv && scalable) {
if (options.overlayPlayButton && !item.IsPlaceHolder && (item.LocationType != 'Virtual' || !item.MediaType || item.Type == 'Program') && item.Type != 'Person' && item.PlayAccess == 'Full') {
overlayButtons += '<button is="paper-icon-button-light" class="cardOverlayButton itemAction autoSize" data-action="playmenu" onclick="return false;"><i class="md-icon">play_arrow</i></button>';
}
if (options.overlayMoreButton) {
var moreIcon = appHost.moreIcon == 'dots-horiz' ? '&#xE5D3;' : '&#xE5D4;';
overlayButtons += '<button is="paper-icon-button-light" class="cardOverlayButton itemAction autoSize" data-action="menu" onclick="return false;"><i class="md-icon">' + moreIcon + '</i></button>';
}
}
var tagName = layoutManager.tv || !scalable ? 'button' : 'div';
var tagName = (layoutManager.tv || !scalable) && !overlayButtons ? 'button' : 'div';
var prefix = (item.SortName || item.Name || '')[0];
@ -1139,7 +1167,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
return '\
<' + tagName + ' data-index="' + index + '"' + timerAttributes + actionAttribute + ' data-isfolder="' + (item.IsFolder || false) + '" data-serverid="' + (item.ServerId) + '" data-id="' + (item.Id || item.ItemId) + '" data-type="' + item.Type + '"' + mediaTypeData + collectionTypeData + channelIdData + positionTicksData + collectionIdData + playlistIdData + ' data-prefix="' + prefix + '" class="' + className + '"> \
' + cardImageContainerOpen + cardImageContainerClose + innerCardFooter + cardContentClose + overlayButtons + cardScalableClose + outerCardFooter + cardBoxClose + '\
' + cardImageContainerOpen + innerCardFooter + cardImageContainerClose + cardContentClose + overlayButtons + cardScalableClose + outerCardFooter + cardBoxClose + '\
</' + tagName + '>';
}

28
dashboard-ui/bower_components/emby-webcomponents/cardbuilder/chaptercardbuilder.js vendored
View File

@ -1,4 +1,4 @@
define(['datetime', 'imageLoader', 'itemShortcuts'], function (datetime, imageLoader, itemShortcuts) {
define(['datetime', 'imageLoader', 'itemShortcuts', 'connectionManager'], function (datetime, imageLoader, itemShortcuts, connectionManager) {
function buildChapterCardsHtml(item, chapters, options) {
@ -27,6 +27,8 @@ define(['datetime', 'imageLoader', 'itemShortcuts'], function (datetime, imageLo
var html = '';
var itemsInRow = 0;
var apiClient = connectionManager.getApiClient(item.ServerId);
for (var i = 0, length = chapters.length; i < length; i++) {
if (options.rows && itemsInRow == 0) {
@ -35,7 +37,7 @@ define(['datetime', 'imageLoader', 'itemShortcuts'], function (datetime, imageLo
var chapter = chapters[i];
html += buildChapterCard(item, chapter, options, className);
html += buildChapterCard(item, apiClient, chapter, i, options, className);
itemsInRow++;
if (options.rows && itemsInRow >= options.rows) {
@ -47,9 +49,25 @@ define(['datetime', 'imageLoader', 'itemShortcuts'], function (datetime, imageLo
return html;
}
function buildChapterCard(item, chapter, options, className) {
function getImgUrl(item, chapter, index, maxWidth, apiClient) {
var imgUrl = chapter.images ? chapter.images.primary : '';
if (chapter.ImageTag) {
return apiClient.getScaledImageUrl(item.Id, {
maxWidth: maxWidth,
tag: chapter.ImageTag,
type: "Chapter",
index: index
});
}
return null;
}
function buildChapterCard(item, apiClient, chapter, index, options, className) {
var imgUrl = getImgUrl(item, chapter, index, options.width || 400, apiClient);
var cardImageContainerClass = 'cardImageContainer';
if (options.coverImage) {
@ -84,12 +102,12 @@ define(['datetime', 'imageLoader', 'itemShortcuts'], function (datetime, imageLo
function buildChapterCards(item, chapters, options) {
if (options.parentContainer) {
// Abort if the container has been disposed
if (!document.body.contains(options.parentContainer)) {
return;
}
if (options.parentContainer) {
if (chapters.length) {
options.parentContainer.classList.remove('hide');
} else {

4
dashboard-ui/bower_components/emby-webcomponents/multiselect/multiselect.css vendored
View File

@ -34,3 +34,7 @@
top: 0 !important;
border-radius: 0 !important;
}
.withMultiSelect {
position: relative;
}

11
dashboard-ui/bower_components/emby-webcomponents/multiselect/multiselect.js vendored
View File

@ -16,7 +16,10 @@
selectedElements = [];
var elems = document.querySelectorAll('.itemSelectionPanel');
for (var i = 0, length = elems.length; i < length; i++) {
elems[i].parentNode.removeChild(elems[i]);
var parent = elems[i].parentNode;
parent.removeChild(elems[i]);
parent.classList.remove('withMultiSelect');
}
}
}
@ -75,7 +78,7 @@
function updateItemSelection(chkItemSelect, selected) {
var id = dom.parentWithClass(chkItemSelect, 'card').getAttribute('data-id');
var id = dom.parentWithAttribute(chkItemSelect, 'data-id').getAttribute('data-id');
if (selected) {
@ -120,7 +123,9 @@
itemSelectionPanel = document.createElement('div');
itemSelectionPanel.classList.add('itemSelectionPanel');
(item.querySelector('.cardBox') || item.querySelector('.cardContent')).appendChild(itemSelectionPanel);
var parent = item.querySelector('.cardBox') || item.querySelector('.cardContent');
parent.classList.add('withMultiSelect');
parent.appendChild(itemSelectionPanel);
var cssClass = 'chkItemSelect';
if (isChecked && !browser.firefox) {

17
dashboard-ui/css/librarybrowser.css
View File

@ -884,23 +884,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
font-size: 180%;
}
.mediaSourceIndicator {
display: block;
position: absolute;
top: 5px;
left: 5px;
text-align: center;
vertical-align: middle;
width: 22px;
height: 19px;
padding-top: 3px;
border-radius: 50%;
color: #fff;
background: rgb(51, 136, 204);
background: rgba(51, 136, 204, .9);
line-height: 1.2;
}
.recordingProgressBar::-moz-progress-bar {
background-color: #cc3333;
}

3
dashboard-ui/itemdetails.html
View File

@ -153,7 +153,8 @@
<button is="paper-icon-button-light" class="autoSize"><i class="md-icon">settings</i></button>
</a>
</h1>
<div id="scenesContent"></div>
<div id="scenesContent" class="itemsContainer"></div>
<button is="emby-button" type="button" class="raised more moreScenes hide">${ButtonMore}</button>
</div>
<div id="themeSongsCollapsible" class="detailSection hide">
<h1>

78
dashboard-ui/scripts/itemdetailpage.js
View File

@ -1583,82 +1583,38 @@
}
function renderScenes(page, item, user, limit, isStatic) {
var html = '';
var chapters = item.Chapters || [];
var scenesContent = page.querySelector('#scenesContent');
if (enableScrollX()) {
html += '<div class="hiddenScrollX itemsContainer">';
scenesContent.classList.add('smoothScrollX');
limit = null;
} else {
html += '<div class="itemsContainer vertical-wrap">';
scenesContent.classList.add('vertical-wrap');
}
for (var i = 0, length = chapters.length; i < length; i++) {
var limitExceeded = limit && chapters.length > limit;
if (limit && i >= limit) {
break;
if (limitExceeded) {
chapters = chapters.slice(0);
chapters.length = Math.min(limit, chapters.length);
}
var chapter = chapters[i];
var chapterName = chapter.Name || "Chapter " + i;
require(['chaptercardbuilder'], function (chaptercardbuilder) {
var onclick = item.PlayAccess == 'Full' && !isStatic ? ' onclick="ItemDetailPage.play(' + chapter.StartPositionTicks + ');"' : '';
html += '<a class="card ' + getThumbShape() + 'Card scalableCard" href="#"' + onclick + '>';
html += '<div class="cardBox">';
html += '<div class="cardScalable">';
var imgUrl;
if (chapter.ImageTag) {
imgUrl = ApiClient.getScaledImageUrl(item.Id, {
maxWidth: 400,
tag: chapter.ImageTag,
type: "Chapter",
index: i
chaptercardbuilder.buildChapterCards(item, chapters, {
itemsContainer: scenesContent,
coverImage: true,
width: 400
});
});
if (limitExceeded) {
page.querySelector('.moreScenes').classList.remove('hide');
} else {
imgUrl = "css/images/items/list/chapter.png";
page.querySelector('.moreScenes').classList.add('hide');
}
html += '<div class="cardPadder"></div>';
html += '<div class="cardContent">';
html += '<div class="cardImage lazy" data-src="' + imgUrl + '"></div>';
html += '<div class="innerCardFooter">';
html += '<div class="cardText">' + chapterName + '</div>';
html += '<div class="cardText">';
html += datetime.getDisplayRunningTime(chapter.StartPositionTicks);
html += '</div>';
//cardFooter
html += "</div>";
// cardContent
html += '</div>';
// cardScalable
html += '</div>';
// cardBox
html += '</div>';
html += '</a>';
}
html += '</div>';
if (limit && chapters.length > limit) {
html += '<p style="margin: 0;"><button is="emby-button" type="button" class="raised more moreScenes">' + Globalize.translate('ButtonMore') + '</button></p>';
}
var scenesContent = page.querySelector('#scenesContent');
scenesContent.innerHTML = html;
ImageLoader.lazyChildren(scenesContent);
}
function renderMediaSources(page, item) {