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
c59b4c5a08
commit
1978b2c480
4 changed files with 464 additions and 121 deletions
|
|
@ -14,12 +14,12 @@
|
|||
},
|
||||
"devDependencies": {},
|
||||
"ignore": [],
|
||||
"version": "1.4.128",
|
||||
"_release": "1.4.128",
|
||||
"version": "1.4.129",
|
||||
"_release": "1.4.129",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "1.4.128",
|
||||
"commit": "75f2667ad68265aa1f8c28127bbbeacfc22a21a6"
|
||||
"tag": "1.4.129",
|
||||
"commit": "9b0a80ee4591676e9cf52e2a493c5752ef1f9dee"
|
||||
},
|
||||
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
|
||||
"_target": "^1.2.0",
|
||||
|
|
|
|||
|
|
@ -10,6 +10,17 @@
|
|||
outline: none !important;
|
||||
cursor: pointer;
|
||||
contain: style;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.itemsContainer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.verticalItemsContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.verticalItemsContainer .card {
|
||||
|
|
@ -34,15 +45,11 @@ button.card {
|
|||
padding-bottom: 56.25%;
|
||||
}
|
||||
|
||||
.squareCard .cardPadder {
|
||||
.squareCard .cardPadder, .overflowSquareCard .cardPadder {
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
|
||||
.letterBoxCard .cardPadder {
|
||||
padding-bottom: 75%;
|
||||
}
|
||||
|
||||
.portraitCard .cardPadder {
|
||||
.portraitCard .cardPadder, .overflowPortraitCard .cardPadder {
|
||||
padding-bottom: 150%;
|
||||
}
|
||||
|
||||
|
|
@ -61,6 +68,10 @@ button.card {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
button.cardContent {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.round .cardBox {
|
||||
border: .7em solid transparent;
|
||||
}
|
||||
|
|
@ -146,7 +157,21 @@ button.card {
|
|||
}
|
||||
|
||||
.cardFooter {
|
||||
padding: .25em .25em;
|
||||
padding: .5em .3em;
|
||||
}
|
||||
|
||||
.cardFooter .cardText + .cardText {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.card:not(.round) .cardFooter {
|
||||
-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
-ms-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
background-color: #222326;
|
||||
}
|
||||
|
||||
.innerCardFooter {
|
||||
|
|
@ -165,16 +190,12 @@ button.card {
|
|||
}
|
||||
|
||||
.cardText {
|
||||
padding: .25em .35em;
|
||||
padding: .35em .35em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.cardText + .cardText {
|
||||
padding-top: .1em;
|
||||
}
|
||||
|
||||
.cardText {
|
||||
color: inherit;
|
||||
}
|
||||
|
|
@ -215,6 +236,250 @@ button.card {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.cardOverlayButton {
|
||||
color: #fff !important;
|
||||
background-color: rgba(0,0,0,.7) !important;
|
||||
border-radius: 500px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: 0 .25em .25em 0;
|
||||
}
|
||||
|
||||
.cardOverlayButton:hover {
|
||||
background-color: rgba(0,0,0,.9) !important;
|
||||
transition: background-color .5s ease-out;
|
||||
}
|
||||
|
||||
.emptyCardImageContainer {
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.scalableCard.personCard {
|
||||
width: 14.285714285714285714285714285714%;
|
||||
}
|
||||
|
||||
.scalableCard.backdropCard {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scalableCard.squareCard {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.scalableCard.portraitCard {
|
||||
width: 33.333333333333333333333333333333%;
|
||||
}
|
||||
|
||||
.scalableCard.overflowPortraitCard {
|
||||
width: 40%;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.scalableCard.overflowBackdropCard {
|
||||
width: 84%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.scalableCard.overflowSquareCard {
|
||||
width: 42%;
|
||||
}
|
||||
|
||||
@media all and (max-width: 420px) {
|
||||
|
||||
.scalableCard.backdropCard {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 500px) {
|
||||
|
||||
.scalableCard.smallBackdropCard {
|
||||
width: 33.333333333333333333333333333333%;
|
||||
}
|
||||
|
||||
.scalableCard.squareCard {
|
||||
width: 33.333333333333333333333333333333%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 640px) {
|
||||
|
||||
.scalableCard.portraitCard {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.scalableCard.overflowPortraitCard {
|
||||
width: 36%;
|
||||
}
|
||||
|
||||
.scalableCard.overflowBackdropCard {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.scalableCard.overflowSquareCard {
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 700px) {
|
||||
.scalableCard.squareCard {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 770px) {
|
||||
.scalableCard.backdropCard {
|
||||
width: 33.333333333333333333333333333333%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 800px) {
|
||||
|
||||
.scalableCard.bannerCard {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.scalableCard.portraitCard {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.scalableCard.smallBackdropCard {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media all and (min-width: 900px) {
|
||||
|
||||
.scalableCard.squareCard {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1000px) {
|
||||
|
||||
|
||||
.scalableCard.smallBackdropCard {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.scalableCard.overflowPortraitCard {
|
||||
width: 23%;
|
||||
}
|
||||
|
||||
.scalableCard.overflowBackdropCard {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.scalableCard.overflowSquareCard {
|
||||
width: 22%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1200px) {
|
||||
|
||||
.scalableCard.backdropCard {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.scalableCard.squareCard {
|
||||
width: 16.666666666666666666666666666667%;
|
||||
}
|
||||
|
||||
.scalableCard.bannerCard {
|
||||
width: 33.333333333333333333333333333333%;
|
||||
}
|
||||
|
||||
.scalableCard.portraitCard {
|
||||
width: 16.666666666666666666666666666667%;
|
||||
}
|
||||
|
||||
.scalableCard.smallBackdropCard {
|
||||
width: 16.666666666666666666666666666667%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media all and (min-width: 1400px) {
|
||||
|
||||
.scalableCard.squareCard {
|
||||
width: 14.285714285714285714285714285714%;
|
||||
}
|
||||
|
||||
.scalableCard.portraitCard {
|
||||
width: 14.285714285714285714285714285714%;
|
||||
}
|
||||
|
||||
.scalableCard.smallBackdropCard {
|
||||
width: 14.285714285714285714285714285714%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media all and (min-width: 1600px) {
|
||||
|
||||
.scalableCard.scalableCard.portraitCard {
|
||||
width: 12.5%;
|
||||
}
|
||||
|
||||
.scalableCard.scalableCard.smallBackdropCard {
|
||||
width: 12.5%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1800px) {
|
||||
|
||||
.scalableCard.squareCard {
|
||||
width: 12.5%;
|
||||
}
|
||||
|
||||
.scalableCard.smallBackdropCard {
|
||||
width: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 2100px) {
|
||||
|
||||
.scalableCard.squareCard {
|
||||
width: 11.111111111111111111111111111111%;
|
||||
}
|
||||
|
||||
.scalableCard.backdropCard {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.scalableCard.portraitCard {
|
||||
width: 11.111111111111111111111111111111%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 2200px) {
|
||||
|
||||
.scalableCard.bannerCard {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.scalableCard.portraitCard {
|
||||
width: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 2500px) {
|
||||
|
||||
.scalableCard.backdropCard {
|
||||
width: 16.666666666666666666666666666667%;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-tv .scalableCard.backdropCard {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.layout-tv .scalableCard.squareCard {
|
||||
width: 16.66666666666666667%;
|
||||
}
|
||||
|
||||
.layout-tv .scalableCard.portraitCard {
|
||||
width: 16.66666666666666667%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,82 +1,7 @@
|
|||
define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo', 'focusManager', 'indicators', 'globalize', 'emby-button', 'css!./card'],
|
||||
function (datetime, imageLoader, connectionManager, itemHelper, mediaInfo, focusManager, indicators, globalize) {
|
||||
define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo', 'focusManager', 'indicators', 'globalize', 'browser', 'layoutManager', 'emby-button', 'css!./card', 'paper-icon-button-light', 'clearButtonStyle'],
|
||||
function (datetime, imageLoader, connectionManager, itemHelper, mediaInfo, focusManager, indicators, globalize, browser, layoutManager) {
|
||||
|
||||
function setShapeHorizontal(items, options) {
|
||||
|
||||
var primaryImageAspectRatio = imageLoader.getPrimaryImageAspectRatio(items) || 0;
|
||||
|
||||
if (primaryImageAspectRatio && primaryImageAspectRatio < .85) {
|
||||
options.shape = 'portraitCard';
|
||||
|
||||
if (options.rows !== 0) {
|
||||
options.rows = 2;
|
||||
}
|
||||
}
|
||||
else if (primaryImageAspectRatio && primaryImageAspectRatio > 1.34) {
|
||||
options.shape = 'backdropCard';
|
||||
|
||||
if (options.rows !== 0) {
|
||||
options.rows = 3;
|
||||
}
|
||||
}
|
||||
else {
|
||||
options.shape = 'squareCard';
|
||||
|
||||
if (options.rows !== 0) {
|
||||
options.rows = 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setShapeVertical(items, options) {
|
||||
|
||||
var primaryImageAspectRatio = imageLoader.getPrimaryImageAspectRatio(items) || 0;
|
||||
|
||||
if (options.preferThumb) {
|
||||
options.shape = 'backdropCard';
|
||||
}
|
||||
else if (primaryImageAspectRatio && primaryImageAspectRatio < .85) {
|
||||
options.shape = 'portraitCard';
|
||||
}
|
||||
else if (primaryImageAspectRatio && primaryImageAspectRatio > 1.34) {
|
||||
options.shape = 'backdropCard';
|
||||
}
|
||||
else {
|
||||
options.shape = 'squareCard';
|
||||
}
|
||||
}
|
||||
|
||||
function setWidth(isVertical, options) {
|
||||
|
||||
if (options.width) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isVertical) {
|
||||
if (options.shape == 'backdropCard') {
|
||||
options.width = options.thumbWidth;
|
||||
}
|
||||
else if (options.shape == 'portraitCard') {
|
||||
options.width = options.portraitWidth;
|
||||
}
|
||||
else if (options.shape == 'squareCard') {
|
||||
options.width = options.squareWidth;
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (options.shape == 'backdropCard') {
|
||||
options.width = 500;
|
||||
}
|
||||
else if (options.shape == 'portraitCard') {
|
||||
options.width = 243;
|
||||
}
|
||||
else if (options.shape == 'squareCard') {
|
||||
options.width = 242;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function buildCardsHtml(items, options) {
|
||||
function getCardsHtml(items, options) {
|
||||
|
||||
var apiClient = connectionManager.currentApiClient();
|
||||
|
||||
|
|
@ -85,19 +10,136 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
return html;
|
||||
}
|
||||
|
||||
function getPostersPerRow(shape, screenWidth) {
|
||||
|
||||
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;
|
||||
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;
|
||||
return 2;
|
||||
case 'banner':
|
||||
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;
|
||||
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;
|
||||
return 1;
|
||||
case 'overflowPortrait':
|
||||
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;
|
||||
return 100 / 42;
|
||||
case 'overflowBackdrop':
|
||||
if (screenWidth >= 1000) return 100 / 40;
|
||||
if (screenWidth >= 640) return 100 / 60;
|
||||
return 100 / 84;
|
||||
default:
|
||||
return 4;
|
||||
}
|
||||
}
|
||||
|
||||
var shapes = ['square', 'portrait', 'banner', 'smallBackdrop', 'backdrop', 'overflowBackdrop', 'overflowPortrait', 'overflowSquare'];
|
||||
function getImageWidth(shape) {
|
||||
|
||||
var screenWidth = window.innerWidth;
|
||||
var imagesPerRow = getPostersPerRow(shape, screenWidth);
|
||||
|
||||
var shapeWidth = screenWidth / imagesPerRow;
|
||||
|
||||
return Math.round(shapeWidth);
|
||||
}
|
||||
|
||||
function setCardData(items, options) {
|
||||
|
||||
options.shape = options.shape || "auto";
|
||||
|
||||
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;
|
||||
|
||||
if (options.shape == 'auto' || options.shape == 'autohome' || options.shape == 'autooverflow' || options.shape == 'autoVertical') {
|
||||
|
||||
if (options.preferThumb || isThumbAspectRatio) {
|
||||
options.shape = options.shape == 'autooverflow' ? 'overflowBackdrop' : 'backdrop';
|
||||
} else if (isSquareAspectRatio) {
|
||||
options.coverImage = true;
|
||||
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 {
|
||||
options.shape = options.defaultShape || (options.shape == 'autooverflow' ? 'overflowSquare' : 'square');
|
||||
}
|
||||
}
|
||||
|
||||
options.uiAspect = getDesiredAspect(options.shape);
|
||||
options.primaryImageAspectRatio = primaryImageAspectRatio;
|
||||
|
||||
if (!options.width && options.widths) {
|
||||
options.width = options.widths[options.shape];
|
||||
}
|
||||
|
||||
if (options.rows && typeof (options.rows) !== 'number') {
|
||||
options.rows = options.rows[options.shape];
|
||||
}
|
||||
|
||||
if (options.shape == 'backdrop') {
|
||||
options.width = options.width || 500;
|
||||
}
|
||||
else if (options.shape == 'portrait') {
|
||||
options.width = options.width || 243;
|
||||
}
|
||||
else if (options.shape == 'square') {
|
||||
options.width = options.width || 243;
|
||||
}
|
||||
|
||||
options.width = options.width || getImageWidth(options.shape);
|
||||
}
|
||||
|
||||
function buildCardsHtmlInternal(items, apiClient, options) {
|
||||
|
||||
var isVertical;
|
||||
|
||||
if (options.shape == 'autoVertical') {
|
||||
isVertical = true;
|
||||
setShapeVertical(items, options);
|
||||
}
|
||||
else if (options.shape == 'auto') {
|
||||
setShapeHorizontal(items, options);
|
||||
}
|
||||
|
||||
setWidth(isVertical, options);
|
||||
setCardData(items, options);
|
||||
|
||||
if (options.indexBy == 'Genres') {
|
||||
return buildCardsByGenreHtmlInternal(items, apiClient, options);
|
||||
|
|
@ -106,7 +148,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
var className = 'card';
|
||||
|
||||
if (options.shape) {
|
||||
className += ' ' + options.shape;
|
||||
className += ' ' + options.shape + 'Card';
|
||||
}
|
||||
|
||||
var html = '';
|
||||
|
|
@ -116,6 +158,8 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
var hasOpenRow;
|
||||
var hasOpenSection;
|
||||
|
||||
var sectionTitleTagName = options.sectionTitleTagName || 'div';
|
||||
|
||||
for (var i = 0, length = items.length; i < length; i++) {
|
||||
|
||||
var item = items[i];
|
||||
|
|
@ -169,11 +213,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
} else {
|
||||
html += '<div class="horizontalSection">';
|
||||
}
|
||||
if (isVertical) {
|
||||
html += '<h2>' + newIndexValue + '</h2>';
|
||||
} else {
|
||||
html += '<div class="sectionTitle">' + newIndexValue + '</div>';
|
||||
}
|
||||
html += '<' + sectionTitleTagName + ' class="sectionTitle">' + newIndexValue + '</' + sectionTitleTagName + '>';
|
||||
if (isVertical) {
|
||||
html += '<div class="itemsContainer verticalItemsContainer">';
|
||||
}
|
||||
|
|
@ -225,7 +265,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
var className = 'card';
|
||||
|
||||
if (options.shape) {
|
||||
className += ' ' + options.shape;
|
||||
className += ' ' + options.shape + 'Card';
|
||||
}
|
||||
|
||||
var html = '';
|
||||
|
|
@ -522,7 +562,11 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
|
||||
function buildCard(index, item, apiClient, options, className) {
|
||||
|
||||
var action = options.action || 'link';
|
||||
|
||||
if (layoutManager.tv) {
|
||||
className += " itemAction";
|
||||
}
|
||||
|
||||
if (options.scalable) {
|
||||
className += " scalableCard";
|
||||
|
|
@ -552,11 +596,25 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
|
||||
// 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 cardImageContainerClose = '</div>';
|
||||
var cardImageContainerClose = '';
|
||||
var cardBoxClose = '</div>';
|
||||
var cardContentClose = '';
|
||||
var cardScalableClose = '';
|
||||
|
||||
if (separateCardBox) {
|
||||
cardImageContainerOpen = '<div class="cardBox"><div class="cardScalable"><div class="cardPadder"></div><div class="cardContent">' + cardImageContainerOpen;
|
||||
cardImageContainerClose += '</div></div></div>';
|
||||
var cardContentOpen;
|
||||
|
||||
if (layoutManager.tv) {
|
||||
cardContentOpen = '<div class="cardContent">';
|
||||
cardContentClose = '</div>';
|
||||
} else {
|
||||
cardContentOpen = '<button type="button" class="clearButton cardContent itemAction" data-action="' + action + '">';
|
||||
cardContentClose = '</button>';
|
||||
}
|
||||
cardImageContainerOpen = '<div class="cardBox"><div class="cardScalable"><div class="cardPadder"></div>' + cardContentOpen + cardImageContainerOpen;
|
||||
cardBoxClose = '</div>';
|
||||
cardScalableClose = '</div>';
|
||||
cardImageContainerClose = '</div>';
|
||||
}
|
||||
|
||||
var indicatorsHtml = '';
|
||||
|
|
@ -585,6 +643,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
cardImageContainerOpen += '<div class="cardText cardCenteredText">' + defaultName + '</div>';
|
||||
}
|
||||
|
||||
var enableOuterFooter = options.overlayText === false;
|
||||
var nameHtml = '';
|
||||
|
||||
if (showParentTitle) {
|
||||
|
|
@ -600,23 +659,39 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
var progressHtml = indicators.getProgressBarHtml(item);
|
||||
|
||||
if (progressHtml) {
|
||||
nameHtml += progressHtml;
|
||||
innerCardFooterClass += " fullInnerCardFooter";
|
||||
}
|
||||
|
||||
var innerCardFooter = '';
|
||||
|
||||
if (nameHtml && imgUrl) {
|
||||
if (imgUrl && (progressHtml || (nameHtml && !enableOuterFooter))) {
|
||||
innerCardFooter += '<div class="' + innerCardFooterClass + '">';
|
||||
|
||||
if (!enableOuterFooter) {
|
||||
innerCardFooter += nameHtml;
|
||||
}
|
||||
innerCardFooter += progressHtml;
|
||||
innerCardFooter += '</div>';
|
||||
}
|
||||
|
||||
var data = '';
|
||||
var outerCardFooter = '';
|
||||
if (nameHtml && enableOuterFooter) {
|
||||
outerCardFooter += '<div class="cardFooter">';
|
||||
outerCardFooter += nameHtml;
|
||||
outerCardFooter += '</div>';
|
||||
}
|
||||
|
||||
var action = options.action || 'link';
|
||||
var overlayButtons = '';
|
||||
if (!layoutManager.tv) {
|
||||
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) {
|
||||
overlayButtons += '<button is="paper-icon-button-light" class="cardOverlayButton itemAction autoSize" data-action="menu" onclick="return false;"><i class="md-icon">more_vert</i></button>';
|
||||
}
|
||||
}
|
||||
|
||||
var tagName = 'button';
|
||||
var tagName = layoutManager.tv ? 'button' : 'div';
|
||||
|
||||
var prefix = (item.SortName || item.Name || '')[0];
|
||||
|
||||
|
|
@ -636,9 +711,11 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
var collectionIdData = options.collectionId ? (' data-collectionid="' + options.collectionId + '"') : '';
|
||||
var playlistIdData = options.playlistId ? (' data-playlistid="' + options.playlistId + '"') : '';
|
||||
|
||||
var actionAttribute = layoutManager.tv ? (' data-action="' + action + '"') : '';
|
||||
|
||||
return '\
|
||||
<' + tagName + ' data-index="' + index + '"' + timerAttributes + ' data-action="' + action + '" data-isfolder="' + (item.IsFolder || false) + '" data-serverid="' + (item.ServerId) + '" data-id="' + (item.Id || item.ItemId) + '" data-type="' + item.Type + '" data-mediatype="' + item.MediaType + '"' + positionTicksData + collectionIdData + playlistIdData + ' data-prefix="' + prefix + '" class="' + className + '"> \
|
||||
' + cardImageContainerOpen + innerCardFooter + data + cardImageContainerClose + '\
|
||||
<' + 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 + '" data-mediatype="' + item.MediaType + '"' + positionTicksData + collectionIdData + playlistIdData + ' data-prefix="' + prefix + '" class="' + className + '"> \
|
||||
' + cardImageContainerOpen + cardImageContainerClose + innerCardFooter + cardContentClose + overlayButtons + cardScalableClose + outerCardFooter + cardBoxClose + '\
|
||||
</' + tagName + '>';
|
||||
}
|
||||
|
||||
|
|
@ -829,7 +906,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
}
|
||||
|
||||
return {
|
||||
buildCardsHtml: buildCardsHtml,
|
||||
getCardsHtml: getCardsHtml,
|
||||
buildCards: buildCards,
|
||||
onUserDataChanged: onUserDataChanged
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.itemProgressBar {
|
||||
background: rgba(0,0,0,.5);
|
||||
position: relative;
|
||||
height: .7vh;
|
||||
}
|
||||
|
||||
.itemProgressBarForeground {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue