mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update components
This commit is contained in:
Luke Pulverenti
parent
c7b23209cf
commit
6f73ce4cc3
16 changed files with 332 additions and 247 deletions
|
|
@ -1,5 +1,6 @@
|
|||
define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo', 'focusManager', 'indicators', 'globalize', 'layoutManager', 'apphost', 'dom', 'emby-button', 'css!./card', 'paper-icon-button-light', 'clearButtonStyle'],
|
||||
function (datetime, imageLoader, connectionManager, itemHelper, mediaInfo, focusManager, indicators, globalize, layoutManager, appHost, dom) {
|
||||
'use strict';
|
||||
|
||||
// Regular Expressions for parsing tags and attributes
|
||||
var SURROGATE_PAIR_REGEXP = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g,
|
||||
|
|
@ -32,7 +33,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
|
||||
var apiClient = connectionManager.currentApiClient();
|
||||
|
||||
if (arguments.length == 1) {
|
||||
if (arguments.length === 1) {
|
||||
|
||||
options = arguments[0];
|
||||
items = options.items;
|
||||
|
|
@ -48,54 +49,122 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
switch (shape) {
|
||||
|
||||
case 'portrait':
|
||||
if (screenWidth >= 2200) return 10;
|
||||
if (screenWidth >= 2100) return 9;
|
||||
if (screenWidth >= 1600) return 8;
|
||||
if (screenWidth >= 1400) return 7;
|
||||
if (screenWidth >= 1200) return 6;
|
||||
if (screenWidth >= 800) return 5;
|
||||
if (screenWidth >= 640) return 4;
|
||||
if (screenWidth >= 2200) {
|
||||
return 10;
|
||||
}
|
||||
if (screenWidth >= 2100) {
|
||||
return 9;
|
||||
}
|
||||
if (screenWidth >= 1600) {
|
||||
return 8;
|
||||
}
|
||||
if (screenWidth >= 1400) {
|
||||
return 7;
|
||||
}
|
||||
if (screenWidth >= 1200) {
|
||||
return 6;
|
||||
}
|
||||
if (screenWidth >= 800) {
|
||||
return 5;
|
||||
}
|
||||
if (screenWidth >= 640) {
|
||||
return 4;
|
||||
}
|
||||
return 3;
|
||||
case 'square':
|
||||
if (screenWidth >= 2100) return 9;
|
||||
if (screenWidth >= 1800) return 8;
|
||||
if (screenWidth >= 1400) return 7;
|
||||
if (screenWidth >= 1200) return 6;
|
||||
if (screenWidth >= 900) return 5;
|
||||
if (screenWidth >= 700) return 4;
|
||||
if (screenWidth >= 500) return 3;
|
||||
if (screenWidth >= 2100) {
|
||||
return 9;
|
||||
}
|
||||
if (screenWidth >= 1800) {
|
||||
return 8;
|
||||
}
|
||||
if (screenWidth >= 1400) {
|
||||
return 7;
|
||||
}
|
||||
if (screenWidth >= 1200) {
|
||||
return 6;
|
||||
}
|
||||
if (screenWidth >= 900) {
|
||||
return 5;
|
||||
}
|
||||
if (screenWidth >= 700) {
|
||||
return 4;
|
||||
}
|
||||
if (screenWidth >= 500) {
|
||||
return 3;
|
||||
}
|
||||
return 2;
|
||||
case 'banner':
|
||||
if (screenWidth >= 2200) return 4;
|
||||
if (screenWidth >= 1200) return 3;
|
||||
if (screenWidth >= 800) return 2;
|
||||
if (screenWidth >= 2200) {
|
||||
return 4;
|
||||
}
|
||||
if (screenWidth >= 1200) {
|
||||
return 3;
|
||||
}
|
||||
if (screenWidth >= 800) {
|
||||
return 2;
|
||||
}
|
||||
return 1;
|
||||
case 'backdrop':
|
||||
if (screenWidth >= 2500) return 6;
|
||||
if (screenWidth >= 2100) return 5;
|
||||
if (screenWidth >= 1200) return 4;
|
||||
if (screenWidth >= 770) return 3;
|
||||
if (screenWidth >= 420) return 2;
|
||||
if (screenWidth >= 2500) {
|
||||
return 6;
|
||||
}
|
||||
if (screenWidth >= 2100) {
|
||||
return 5;
|
||||
}
|
||||
if (screenWidth >= 1200) {
|
||||
return 4;
|
||||
}
|
||||
if (screenWidth >= 770) {
|
||||
return 3;
|
||||
}
|
||||
if (screenWidth >= 420) {
|
||||
return 2;
|
||||
}
|
||||
return 1;
|
||||
case 'smallBackdrop':
|
||||
if (screenWidth >= 1440) return 8;
|
||||
if (screenWidth >= 1100) return 6;
|
||||
if (screenWidth >= 800) return 5;
|
||||
if (screenWidth >= 600) return 4;
|
||||
if (screenWidth >= 540) return 3;
|
||||
if (screenWidth >= 420) return 2;
|
||||
if (screenWidth >= 1440) {
|
||||
return 8;
|
||||
}
|
||||
if (screenWidth >= 1100) {
|
||||
return 6;
|
||||
}
|
||||
if (screenWidth >= 800) {
|
||||
return 5;
|
||||
}
|
||||
if (screenWidth >= 600) {
|
||||
return 4;
|
||||
}
|
||||
if (screenWidth >= 540) {
|
||||
return 3;
|
||||
}
|
||||
if (screenWidth >= 420) {
|
||||
return 2;
|
||||
}
|
||||
return 1;
|
||||
case 'overflowPortrait':
|
||||
if (screenWidth >= 1000) return 100 / 23;
|
||||
if (screenWidth >= 640) return 100 / 36;
|
||||
if (screenWidth >= 1000) {
|
||||
return 100 / 23;
|
||||
}
|
||||
if (screenWidth >= 640) {
|
||||
return 100 / 36;
|
||||
}
|
||||
return 2.5;
|
||||
case 'overflowSquare':
|
||||
if (screenWidth >= 1000) return 100 / 22;
|
||||
if (screenWidth >= 640) return 100 / 30;
|
||||
if (screenWidth >= 1000) {
|
||||
return 100 / 22;
|
||||
}
|
||||
if (screenWidth >= 640) {
|
||||
return 100 / 30;
|
||||
}
|
||||
return 100 / 42;
|
||||
case 'overflowBackdrop':
|
||||
if (screenWidth >= 1000) return 100 / 40;
|
||||
if (screenWidth >= 640) return 100 / 60;
|
||||
if (screenWidth >= 1000) {
|
||||
return 100 / 40;
|
||||
}
|
||||
if (screenWidth >= 640) {
|
||||
return 100 / 60;
|
||||
}
|
||||
return 100 / 84;
|
||||
default:
|
||||
return 4;
|
||||
|
|
@ -142,29 +211,29 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
|
||||
var primaryImageAspectRatio = imageLoader.getPrimaryImageAspectRatio(items);
|
||||
|
||||
var isThumbAspectRatio = primaryImageAspectRatio && Math.abs(primaryImageAspectRatio - 1.777777778) < .3;
|
||||
var isSquareAspectRatio = primaryImageAspectRatio && Math.abs(primaryImageAspectRatio - 1) < .33 ||
|
||||
primaryImageAspectRatio && Math.abs(primaryImageAspectRatio - 1.3333334) < .01;
|
||||
var isThumbAspectRatio = primaryImageAspectRatio && Math.abs(primaryImageAspectRatio - 1.777777778) < 0.3;
|
||||
var isSquareAspectRatio = primaryImageAspectRatio && Math.abs(primaryImageAspectRatio - 1) < 0.33 ||
|
||||
primaryImageAspectRatio && Math.abs(primaryImageAspectRatio - 1.3333334) < 0.01;
|
||||
|
||||
if (options.shape == 'auto' || options.shape == 'autohome' || options.shape == 'autooverflow' || options.shape == 'autoVertical') {
|
||||
if (options.shape === 'auto' || options.shape === 'autohome' || options.shape === 'autooverflow' || options.shape === 'autoVertical') {
|
||||
|
||||
if (options.preferThumb === true || isThumbAspectRatio) {
|
||||
options.shape = options.shape == 'autooverflow' ? 'overflowBackdrop' : 'backdrop';
|
||||
options.shape = options.shape === 'autooverflow' ? 'overflowBackdrop' : 'backdrop';
|
||||
} else if (isSquareAspectRatio) {
|
||||
options.coverImage = true;
|
||||
options.shape = options.shape == 'autooverflow' ? 'overflowSquare' : 'square';
|
||||
options.shape = options.shape === 'autooverflow' ? 'overflowSquare' : 'square';
|
||||
} else if (primaryImageAspectRatio && primaryImageAspectRatio > 1.9) {
|
||||
options.shape = 'banner';
|
||||
options.coverImage = true;
|
||||
} else if (primaryImageAspectRatio && Math.abs(primaryImageAspectRatio - 0.6666667) < .2) {
|
||||
options.shape = options.shape == 'autooverflow' ? 'overflowPortrait' : 'portrait';
|
||||
} else if (primaryImageAspectRatio && Math.abs(primaryImageAspectRatio - 0.6666667) < 0.2) {
|
||||
options.shape = options.shape === 'autooverflow' ? 'overflowPortrait' : 'portrait';
|
||||
} else {
|
||||
options.shape = options.defaultShape || (options.shape == 'autooverflow' ? 'overflowSquare' : 'square');
|
||||
options.shape = options.defaultShape || (options.shape === 'autooverflow' ? 'overflowSquare' : 'square');
|
||||
}
|
||||
}
|
||||
|
||||
if (options.preferThumb == 'auto') {
|
||||
options.preferThumb = options.shape == 'backdrop' || options.shape == 'overflowBackdrop';
|
||||
if (options.preferThumb === 'auto') {
|
||||
options.preferThumb = options.shape === 'backdrop' || options.shape === 'overflowBackdrop';
|
||||
}
|
||||
|
||||
options.uiAspect = getDesiredAspect(options.shape);
|
||||
|
|
@ -179,13 +248,13 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
}
|
||||
|
||||
if (layoutManager.tv) {
|
||||
if (options.shape == 'backdrop') {
|
||||
if (options.shape === 'backdrop') {
|
||||
options.width = options.width || 500;
|
||||
}
|
||||
else if (options.shape == 'portrait') {
|
||||
else if (options.shape === 'portrait') {
|
||||
options.width = options.width || 243;
|
||||
}
|
||||
else if (options.shape == 'square') {
|
||||
else if (options.shape === 'square') {
|
||||
options.width = options.width || 243;
|
||||
}
|
||||
}
|
||||
|
|
@ -197,13 +266,13 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
|
||||
var isVertical;
|
||||
|
||||
if (options.shape == 'autoVertical') {
|
||||
if (options.shape === 'autoVertical') {
|
||||
isVertical = true;
|
||||
}
|
||||
|
||||
setCardData(items, options);
|
||||
|
||||
if (options.indexBy == 'Genres') {
|
||||
if (options.indexBy === 'Genres') {
|
||||
return buildCardsByGenreHtmlInternal(items, apiClient, options);
|
||||
}
|
||||
|
||||
|
|
@ -229,7 +298,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
if (options.indexBy) {
|
||||
var newIndexValue = '';
|
||||
|
||||
if (options.indexBy == 'PremiereDate') {
|
||||
if (options.indexBy === 'PremiereDate') {
|
||||
if (item.PremiereDate) {
|
||||
try {
|
||||
|
||||
|
|
@ -240,19 +309,19 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
}
|
||||
}
|
||||
|
||||
else if (options.indexBy == 'Genres') {
|
||||
else if (options.indexBy === 'Genres') {
|
||||
newIndexValue = item.Name;
|
||||
}
|
||||
|
||||
else if (options.indexBy == 'ProductionYear') {
|
||||
else if (options.indexBy === 'ProductionYear') {
|
||||
newIndexValue = item.ProductionYear;
|
||||
}
|
||||
|
||||
else if (options.indexBy == 'CommunityRating') {
|
||||
newIndexValue = item.CommunityRating ? (Math.floor(item.CommunityRating) + (item.CommunityRating % 1 >= .5 ? .5 : 0)) + '+' : null;
|
||||
else if (options.indexBy === 'CommunityRating') {
|
||||
newIndexValue = item.CommunityRating ? (Math.floor(item.CommunityRating) + (item.CommunityRating % 1 >= 0.5 ? 0.5 : 0)) + '+' : null;
|
||||
}
|
||||
|
||||
if (newIndexValue != currentIndexValue) {
|
||||
if (newIndexValue !== currentIndexValue) {
|
||||
|
||||
if (hasOpenRow) {
|
||||
html += '</div>';
|
||||
|
|
@ -284,7 +353,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
}
|
||||
}
|
||||
|
||||
if (options.rows && itemsInRow == 0) {
|
||||
if (options.rows && itemsInRow === 0) {
|
||||
|
||||
if (hasOpenRow) {
|
||||
html += '</div>';
|
||||
|
|
@ -322,6 +391,19 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
return html;
|
||||
}
|
||||
|
||||
function filterItemsByGenre(items, genre) {
|
||||
|
||||
var genreLower = genre.toLowerCase();
|
||||
return items.filter(function (currentItem) {
|
||||
|
||||
return currentItem.Genres.filter(function (g) {
|
||||
|
||||
return g.toLowerCase() === genreLower;
|
||||
|
||||
}).length > 0;
|
||||
});
|
||||
}
|
||||
|
||||
function buildCardsByGenreHtmlInternal(items, apiClient, options) {
|
||||
|
||||
var className = 'card';
|
||||
|
|
@ -334,19 +416,43 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
|
||||
var loopItems = options.genres;
|
||||
|
||||
var itemsInRow;
|
||||
var hasOpenRow;
|
||||
|
||||
var onGenre = function (renderItem) {
|
||||
|
||||
var currentItemHtml = '';
|
||||
|
||||
if (options.rows && itemsInRow === 0) {
|
||||
|
||||
if (hasOpenRow) {
|
||||
currentItemHtml += '</div>';
|
||||
hasOpenRow = false;
|
||||
}
|
||||
|
||||
currentItemHtml += '<div class="cardColumn">';
|
||||
hasOpenRow = true;
|
||||
}
|
||||
|
||||
var cardClass = className;
|
||||
currentItemHtml += buildCard(i, renderItem, apiClient, options, cardClass);
|
||||
|
||||
itemsInRow++;
|
||||
|
||||
if (options.rows && itemsInRow >= options.rows) {
|
||||
currentItemHtml += '</div>';
|
||||
hasOpenRow = false;
|
||||
itemsInRow = 0;
|
||||
}
|
||||
|
||||
return currentItemHtml;
|
||||
};
|
||||
|
||||
for (var i = 0, length = loopItems.length; i < length; i++) {
|
||||
|
||||
var item = loopItems[i];
|
||||
|
||||
var genreLower = item.Name.toLowerCase();
|
||||
var renderItems = items.filter(function (currentItem) {
|
||||
|
||||
return currentItem.Genres.filter(function (g) {
|
||||
|
||||
return g.toLowerCase() == genreLower;
|
||||
|
||||
}).length > 0;
|
||||
});
|
||||
var renderItems = filterItemsByGenre(items, item.Name);
|
||||
|
||||
if (!renderItems.length) {
|
||||
continue;
|
||||
|
|
@ -361,39 +467,10 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
showMoreButton = true;
|
||||
}
|
||||
|
||||
var itemsInRow = 0;
|
||||
var hasOpenRow = false;
|
||||
|
||||
html += renderItems.map(function (renderItem) {
|
||||
|
||||
var currentItemHtml = '';
|
||||
|
||||
if (options.rows && itemsInRow == 0) {
|
||||
|
||||
if (hasOpenRow) {
|
||||
currentItemHtml += '</div>';
|
||||
hasOpenRow = false;
|
||||
}
|
||||
|
||||
currentItemHtml += '<div class="cardColumn">';
|
||||
hasOpenRow = true;
|
||||
}
|
||||
|
||||
var cardClass = className;
|
||||
currentItemHtml += buildCard(i, renderItem, apiClient, options, cardClass);
|
||||
|
||||
itemsInRow++;
|
||||
|
||||
if (options.rows && itemsInRow >= options.rows) {
|
||||
currentItemHtml += '</div>';
|
||||
hasOpenRow = false;
|
||||
itemsInRow = 0;
|
||||
}
|
||||
|
||||
return currentItemHtml;
|
||||
|
||||
}).join('');
|
||||
itemsInRow = 0;
|
||||
hasOpenRow = false;
|
||||
|
||||
html += renderItems.map(onGenre).join('');
|
||||
|
||||
if (showMoreButton) {
|
||||
html += '<div class="listItemsMoreButtonContainer">';
|
||||
|
|
@ -412,13 +489,13 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
|
||||
if (shape) {
|
||||
shape = shape.toLowerCase();
|
||||
if (shape.indexOf('portrait') != -1) {
|
||||
if (shape.indexOf('portrait') !== -1) {
|
||||
return (2 / 3);
|
||||
}
|
||||
if (shape.indexOf('backdrop') != -1) {
|
||||
if (shape.indexOf('backdrop') !== -1) {
|
||||
return (16 / 9);
|
||||
}
|
||||
if (shape.indexOf('square') != -1) {
|
||||
if (shape.indexOf('square') !== -1) {
|
||||
return 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -436,6 +513,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
var forceName = false;
|
||||
var imgUrl = null;
|
||||
var coverImage = false;
|
||||
var uiAspect = null;
|
||||
|
||||
if (options.preferThumb && item.ImageTags && item.ImageTags.Thumb) {
|
||||
|
||||
|
|
@ -495,9 +573,9 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
}
|
||||
|
||||
if (primaryImageAspectRatio) {
|
||||
var uiAspect = getDesiredAspect(options.shape);
|
||||
uiAspect = getDesiredAspect(options.shape);
|
||||
if (uiAspect) {
|
||||
coverImage = Math.abs(primaryImageAspectRatio - uiAspect) <= .2;
|
||||
coverImage = Math.abs(primaryImageAspectRatio - uiAspect) <= 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -517,9 +595,9 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
}
|
||||
|
||||
if (primaryImageAspectRatio) {
|
||||
var uiAspect = getDesiredAspect(options.shape);
|
||||
uiAspect = getDesiredAspect(options.shape);
|
||||
if (uiAspect) {
|
||||
coverImage = Math.abs(primaryImageAspectRatio - uiAspect) <= .2;
|
||||
coverImage = Math.abs(primaryImageAspectRatio - uiAspect) <= 0.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -543,13 +621,13 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
});
|
||||
|
||||
if (primaryImageAspectRatio) {
|
||||
var uiAspect = getDesiredAspect(options.shape);
|
||||
uiAspect = getDesiredAspect(options.shape);
|
||||
if (uiAspect) {
|
||||
coverImage = Math.abs(primaryImageAspectRatio - uiAspect) <= .2;
|
||||
coverImage = Math.abs(primaryImageAspectRatio - uiAspect) <= 0.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (item.Type == 'Season' && item.ImageTags && item.ImageTags.Thumb) {
|
||||
else if (item.Type === 'Season' && item.ImageTags && item.ImageTags.Thumb) {
|
||||
|
||||
imgUrl = apiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Thumb",
|
||||
|
|
@ -636,7 +714,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
|
||||
var text = lines[i];
|
||||
|
||||
if (i == 1 && isOuterFooter) {
|
||||
if (i === 1 && isOuterFooter) {
|
||||
cssClass += ' cardText-secondary';
|
||||
}
|
||||
|
||||
|
|
@ -670,11 +748,11 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
|
||||
if (isOuterFooter && options.cardLayout && !layoutManager.tv) {
|
||||
|
||||
if (options.cardFooterAside == 'logo') {
|
||||
if (options.cardFooterAside === 'logo') {
|
||||
|
||||
}
|
||||
else if (options.cardFooterAside != 'none') {
|
||||
var moreIcon = appHost.moreIcon == 'dots-horiz' ? '' : '';
|
||||
else if (options.cardFooterAside !== 'none') {
|
||||
var moreIcon = appHost.moreIcon === 'dots-horiz' ? '' : '';
|
||||
html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions autoSize" data-action="menu"><i class="md-icon">' + moreIcon + '</i></button>';
|
||||
}
|
||||
}
|
||||
|
|
@ -682,12 +760,12 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
var cssClass = options.centerText && !options.cardLayout ? "cardText cardTextCentered" : "cardText";
|
||||
|
||||
var lines = [];
|
||||
var parentTitleUnderneath = item.Type == 'MusicAlbum' || item.Type == 'Audio' || item.Type == 'MusicVideo';
|
||||
var parentTitleUnderneath = item.Type === 'MusicAlbum' || item.Type === 'Audio' || item.Type === 'MusicVideo';
|
||||
|
||||
if (showOtherText) {
|
||||
if ((options.showParentTitle || options.showParentTitleOrTitle) && !parentTitleUnderneath) {
|
||||
|
||||
if (isOuterFooter && item.Type == 'Episode' && item.SeriesName && item.SeriesId) {
|
||||
if (isOuterFooter && item.Type === 'Episode' && item.SeriesName && item.SeriesId) {
|
||||
|
||||
lines.push(getTextActionButton({
|
||||
Id: item.SeriesId,
|
||||
|
|
@ -698,7 +776,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
}
|
||||
else {
|
||||
|
||||
var parentTitle = item.Type == 'Program' ? item.Name : (item.SeriesName || item.Album || item.AlbumArtist || item.GameSystem || "");
|
||||
var parentTitle = item.Type === 'Program' ? item.Name : (item.SeriesName || item.Album || item.AlbumArtist || item.GameSystem || "");
|
||||
|
||||
if (parentTitle || options.showParentTitle) {
|
||||
lines.push(parentTitle);
|
||||
|
|
@ -709,7 +787,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
|
||||
if (showTitle || forceName || (options.showParentTitleOrTitle && !lines.length)) {
|
||||
|
||||
var name = options.showTitle == 'auto' && !item.IsFolder && item.MediaType == 'Photo' ? '' : itemHelper.getDisplayName(item);
|
||||
var name = options.showTitle === 'auto' && !item.IsFolder && item.MediaType === 'Photo' ? '' : itemHelper.getDisplayName(item);
|
||||
|
||||
lines.push(htmlEncode(name));
|
||||
}
|
||||
|
|
@ -722,7 +800,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
item.AlbumArtists[0].IsFolder = true;
|
||||
lines.push(getTextActionButton(item.AlbumArtists[0]));
|
||||
} else {
|
||||
lines.push(item.Type == 'Program' ? item.Name : (item.SeriesName || item.Album || item.AlbumArtist || item.GameSystem || ""));
|
||||
lines.push(item.Type === 'Program' ? item.Name : (item.SeriesName || item.Album || item.AlbumArtist || item.GameSystem || ""));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -745,7 +823,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
var songLine = '';
|
||||
|
||||
if (item.SongCount) {
|
||||
songLine = item.SongCount == 1 ?
|
||||
songLine = item.SongCount === 1 ?
|
||||
globalize.translate('sharedcomponents#ValueOneSong') :
|
||||
globalize.translate('sharedcomponents#ValueSongCount', item.SongCount);
|
||||
}
|
||||
|
|
@ -842,7 +920,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
}
|
||||
}
|
||||
|
||||
if (options.showCurrentProgram && item.Type == 'TvChannel') {
|
||||
if (options.showCurrentProgram && item.Type === 'TvChannel') {
|
||||
|
||||
if (item.CurrentProgram) {
|
||||
lines.push(item.CurrentProgram.Name);
|
||||
|
|
@ -853,7 +931,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
|
||||
if (options.showSeriesYear) {
|
||||
|
||||
if (item.Status == "Continuing") {
|
||||
if (item.Status === "Continuing") {
|
||||
|
||||
lines.push(globalize.translate('sharedcomponents#SeriesYearToPresent', item.ProductionYear || ''));
|
||||
|
||||
|
|
@ -862,9 +940,27 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
if (options.showSeriesTimerTime) {
|
||||
if (item.RecordAnyTime) {
|
||||
|
||||
lines.push(globalize.translate('sharedcomponents#Anytime'));
|
||||
} else {
|
||||
lines.push(datetime.getDisplayTime(item.StartDate));
|
||||
}
|
||||
}
|
||||
|
||||
if (options.showSeriesTimerChannel) {
|
||||
if (item.RecordAnyChannel) {
|
||||
lines.push(globalize.translate('sharedcomponents#AllChannels'));
|
||||
}
|
||||
else if (item.ChannelId) {
|
||||
lines.push(item.ChannelName || '');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if ((showTitle || !imgUrl) && forceName && overlayText && lines.length == 1) {
|
||||
if ((showTitle || !imgUrl) && forceName && overlayText && lines.length === 1) {
|
||||
lines = [];
|
||||
}
|
||||
|
||||
|
|
@ -903,7 +999,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
|
||||
var childText;
|
||||
|
||||
if (item.Type == 'Playlist') {
|
||||
if (item.Type === 'Playlist') {
|
||||
|
||||
childText = '';
|
||||
|
||||
|
|
@ -922,11 +1018,11 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
counts.push(childText);
|
||||
|
||||
}
|
||||
else if (item.Type == 'Genre' || item.Type == 'Studio') {
|
||||
else if (item.Type === 'Genre' || item.Type === 'Studio') {
|
||||
|
||||
if (item.MovieCount) {
|
||||
|
||||
childText = item.MovieCount == 1 ?
|
||||
childText = item.MovieCount === 1 ?
|
||||
globalize.translate('sharedcomponents#ValueOneMovie') :
|
||||
globalize.translate('sharedcomponents#ValueMovieCount', item.MovieCount);
|
||||
|
||||
|
|
@ -935,7 +1031,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
|
||||
if (item.SeriesCount) {
|
||||
|
||||
childText = item.SeriesCount == 1 ?
|
||||
childText = item.SeriesCount === 1 ?
|
||||
globalize.translate('sharedcomponents#ValueOneSeries') :
|
||||
globalize.translate('sharedcomponents#ValueSeriesCount', item.SeriesCount);
|
||||
|
||||
|
|
@ -943,7 +1039,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
}
|
||||
if (item.EpisodeCount) {
|
||||
|
||||
childText = item.EpisodeCount == 1 ?
|
||||
childText = item.EpisodeCount === 1 ?
|
||||
globalize.translate('sharedcomponents#ValueOneEpisode') :
|
||||
globalize.translate('sharedcomponents#ValueEpisodeCount', item.EpisodeCount);
|
||||
|
||||
|
|
@ -951,28 +1047,28 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
}
|
||||
if (item.GameCount) {
|
||||
|
||||
childText = item.GameCount == 1 ?
|
||||
childText = item.GameCount === 1 ?
|
||||
globalize.translate('sharedcomponents#ValueOneGame') :
|
||||
globalize.translate('sharedcomponents#ValueGameCount', item.GameCount);
|
||||
|
||||
counts.push(childText);
|
||||
}
|
||||
|
||||
} else if (item.Type == 'GameGenre') {
|
||||
} else if (item.Type === 'GameGenre') {
|
||||
|
||||
if (item.GameCount) {
|
||||
|
||||
childText = item.GameCount == 1 ?
|
||||
childText = item.GameCount === 1 ?
|
||||
globalize.translate('sharedcomponents#ValueOneGame') :
|
||||
globalize.translate('sharedcomponents#ValueGameCount', item.GameCount);
|
||||
|
||||
counts.push(childText);
|
||||
}
|
||||
} else if (item.Type == 'MusicGenre' || options.context == "MusicArtist") {
|
||||
} else if (item.Type === 'MusicGenre' || options.context === "MusicArtist") {
|
||||
|
||||
if (item.AlbumCount) {
|
||||
|
||||
childText = item.AlbumCount == 1 ?
|
||||
childText = item.AlbumCount === 1 ?
|
||||
globalize.translate('sharedcomponents#ValueOneAlbum') :
|
||||
globalize.translate('sharedcomponents#ValueAlbumCount', item.AlbumCount);
|
||||
|
||||
|
|
@ -980,7 +1076,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
}
|
||||
if (item.SongCount) {
|
||||
|
||||
childText = item.SongCount == 1 ?
|
||||
childText = item.SongCount === 1 ?
|
||||
globalize.translate('sharedcomponents#ValueOneSong') :
|
||||
globalize.translate('sharedcomponents#ValueSongCount', item.SongCount);
|
||||
|
||||
|
|
@ -988,16 +1084,16 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
}
|
||||
if (item.MusicVideoCount) {
|
||||
|
||||
childText = item.MusicVideoCount == 1 ?
|
||||
childText = item.MusicVideoCount === 1 ?
|
||||
globalize.translate('sharedcomponents#ValueOneMusicVideo') :
|
||||
globalize.translate('sharedcomponents#ValueMusicVideoCount', item.MusicVideoCount);
|
||||
|
||||
counts.push(childText);
|
||||
}
|
||||
|
||||
} else if (item.Type == 'Series') {
|
||||
} else if (item.Type === 'Series') {
|
||||
|
||||
childText = item.RecursiveItemCount == 1 ?
|
||||
childText = item.RecursiveItemCount === 1 ?
|
||||
globalize.translate('sharedcomponents#ValueOneEpisode') :
|
||||
globalize.translate('sharedcomponents#ValueEpisodeCount', item.RecursiveItemCount);
|
||||
|
||||
|
|
@ -1021,7 +1117,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
|
||||
var forceName = imgInfo.forceName || !imgUrl;
|
||||
|
||||
var showTitle = options.showTitle == 'auto' ? true : (options.showTitle || item.Type == 'PhotoAlbum' || item.Type == 'Folder');
|
||||
var showTitle = options.showTitle === 'auto' ? true : (options.showTitle || item.Type === 'PhotoAlbum' || item.Type === 'Folder');
|
||||
var overlayText = options.overlayText;
|
||||
|
||||
if (forceName && !options.cardLayout) {
|
||||
|
|
@ -1035,7 +1131,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
if (options.coverImage || imgInfo.coverImage) {
|
||||
cardImageContainerClass += ' coveredImage';
|
||||
|
||||
if (item.MediaType == 'Photo' || item.Type == 'PhotoAlbum' || item.Type == 'Folder' || item.ProgramInfo || item.Type == 'Program') {
|
||||
if (item.MediaType === 'Photo' || item.Type === 'PhotoAlbum' || item.Type === 'Folder' || item.ProgramInfo || item.Type === 'Program') {
|
||||
cardImageContainerClass += ' coveredImage-noScale';
|
||||
}
|
||||
}
|
||||
|
|
@ -1099,15 +1195,15 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
var overlayPlayButton = options.overlayPlayButton;
|
||||
|
||||
if (overlayPlayButton == null && !options.overlayMoreButton && !options.cardLayout) {
|
||||
overlayPlayButton = item.MediaType == 'Video';
|
||||
overlayPlayButton = item.MediaType === 'Video';
|
||||
}
|
||||
|
||||
if (overlayPlayButton && !item.IsPlaceHolder && (item.LocationType != 'Virtual' || !item.MediaType || item.Type == 'Program') && item.Type != 'Person' && item.PlayAccess == 'Full') {
|
||||
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' ? '' : '';
|
||||
var moreIcon = appHost.moreIcon === 'dots-horiz' ? '' : '';
|
||||
|
||||
overlayButtons += '<button is="paper-icon-button-light" class="cardOverlayButton itemAction autoSize" data-action="menu" onclick="return false;"><i class="md-icon">' + moreIcon + '</i></button>';
|
||||
}
|
||||
|
|
@ -1175,7 +1271,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
}
|
||||
|
||||
if (!imgUrl) {
|
||||
var defaultName = item.Type == 'Program' ? item.Name : itemHelper.getDisplayName(item);
|
||||
var defaultName = item.Type === 'Program' ? item.Name : itemHelper.getDisplayName(item);
|
||||
cardImageContainerOpen += '<div class="cardText cardCenteredText">' + defaultName + '</div>';
|
||||
}
|
||||
|
||||
|
|
@ -1197,14 +1293,14 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
|
||||
var actionAttribute;
|
||||
|
||||
if (tagName == 'button') {
|
||||
if (tagName === 'button') {
|
||||
className += " itemAction";
|
||||
actionAttribute = ' data-action="' + action + '"';
|
||||
} else {
|
||||
actionAttribute = '';
|
||||
}
|
||||
|
||||
if (item.Type != 'MusicAlbum' && item.Type != 'MusicArtist' && item.Type != 'Audio') {
|
||||
if (item.Type !== 'MusicAlbum' && item.Type !== 'MusicArtist' && item.Type !== 'Audio') {
|
||||
className += ' card-withuserdata';
|
||||
}
|
||||
|
||||
|
|
@ -1216,10 +1312,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
var channelIdData = item.ChannelId ? (' data-channelid="' + item.ChannelId + '"') : '';
|
||||
var contextData = options.context ? (' data-context="' + options.context + '"') : '';
|
||||
|
||||
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 + contextData + ' data-prefix="' + prefix + '" class="' + className + '"> \
|
||||
' + cardImageContainerOpen + innerCardFooter + cardImageContainerClose + cardContentClose + overlayButtons + cardScalableClose + outerCardFooter + cardBoxClose + '\
|
||||
</' + tagName + '>';
|
||||
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 + contextData + ' data-prefix="' + prefix + '" class="' + className + '">' + cardImageContainerOpen + innerCardFooter + cardImageContainerClose + cardContentClose + overlayButtons + cardScalableClose + outerCardFooter + cardBoxClose + '</' + tagName + '>';
|
||||
}
|
||||
|
||||
function buildCards(items, options) {
|
||||
|
|
@ -1244,7 +1337,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
|
||||
if (html) {
|
||||
|
||||
if (options.itemsContainer.cardBuilderHtml != html) {
|
||||
if (options.itemsContainer.cardBuilderHtml !== html) {
|
||||
options.itemsContainer.innerHTML = html;
|
||||
|
||||
if (items.length < 50) {
|
||||
|
|
@ -1265,7 +1358,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
focusManager.autoFocus(options.itemsContainer, true);
|
||||
}
|
||||
|
||||
if (options.indexBy == 'Genres') {
|
||||
if (options.indexBy === 'Genres') {
|
||||
options.itemsContainer.addEventListener('click', onItemsContainerClick);
|
||||
}
|
||||
}
|
||||
|
|
@ -1321,12 +1414,15 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
function updateUserData(card, userData) {
|
||||
|
||||
var type = card.getAttribute('data-type');
|
||||
var enableCountIndicator = type == 'Series' || type == 'BoxSet' || type == 'Season';
|
||||
var indicatorsElem;
|
||||
var enableCountIndicator = type === 'Series' || type === 'BoxSet' || type === 'Season';
|
||||
var indicatorsElem = null;
|
||||
var playedIndicator = null;
|
||||
var countIndicator = null;
|
||||
var itemProgressBar = null;
|
||||
|
||||
if (userData.Played) {
|
||||
|
||||
var playedIndicator = card.querySelector('.playedIndicator');
|
||||
playedIndicator = card.querySelector('.playedIndicator');
|
||||
|
||||
if (!playedIndicator) {
|
||||
|
||||
|
|
@ -1338,14 +1434,14 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
playedIndicator.innerHTML = '<i class="md-icon">check</i>';
|
||||
} else {
|
||||
|
||||
var playedIndicator = card.querySelector('.playedIndicator');
|
||||
playedIndicator = card.querySelector('.playedIndicator');
|
||||
if (playedIndicator) {
|
||||
|
||||
playedIndicator.parentNode.removeChild(playedIndicator);
|
||||
}
|
||||
}
|
||||
if (userData.UnplayedItemCount) {
|
||||
var countIndicator = card.querySelector('.countIndicator');
|
||||
countIndicator = card.querySelector('.countIndicator');
|
||||
|
||||
if (!countIndicator) {
|
||||
|
||||
|
|
@ -1357,7 +1453,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
countIndicator.innerHTML = userData.UnplayedItemCount;
|
||||
} else if (enableCountIndicator) {
|
||||
|
||||
var countIndicator = card.querySelector('.countIndicator');
|
||||
countIndicator = card.querySelector('.countIndicator');
|
||||
if (countIndicator) {
|
||||
|
||||
countIndicator.parentNode.removeChild(countIndicator);
|
||||
|
|
@ -1372,7 +1468,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
|
||||
if (progressHtml) {
|
||||
|
||||
var itemProgressBar = card.querySelector('.itemProgressBar');
|
||||
itemProgressBar = card.querySelector('.itemProgressBar');
|
||||
|
||||
if (!itemProgressBar) {
|
||||
itemProgressBar = document.createElement('div');
|
||||
|
|
@ -1392,7 +1488,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
}
|
||||
else {
|
||||
|
||||
var itemProgressBar = card.querySelector('.itemProgressBar');
|
||||
itemProgressBar = card.querySelector('.itemProgressBar');
|
||||
if (itemProgressBar) {
|
||||
itemProgressBar.parentNode.removeChild(itemProgressBar);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue