mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

First separation commit.

Browse source 
Added LICENSE, README.md, CONTRIBUTORS.md
This commit is contained in:
Erwin de Haan 2019-01-09 12:36:54 +01:00
parent 09513af31b
commit 4678528d00
657 changed files with 422 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

885
src/bower_components/emby-webcomponents/cardbuilder/card.css vendored Normal file
View file

@ -0,0 +1,885 @@
.card,
.card:focus {
font-weight: inherit !important
}
.card,
.cardBox,
.cardContent,
.textActionButton {
-webkit-tap-highlight-color: transparent;
outline: 0 !important
}
button::-moz-focus-inner {
padding: 0;
border: 0
}
button {
-webkit-border-fit: border !important
}
.card {
border: 0;
font-size: inherit !important;
font-family: inherit !important;
text-transform: none;
background: 0 0 !important;
margin: 0;
padding: 0;
display: block;
color: inherit !important;
cursor: pointer;
contain: layout style;
-webkit-flex-shrink: 0;
flex-shrink: 0
}
.cardContent-button,
.textActionButton {
cursor: pointer;
vertical-align: middle;
font-family: inherit
}
.card-nofocustransform {
contain: layout style paint
}
.itemsContainer {
display: -webkit-box;
display: -webkit-flex;
display: flex
}
.vertical-list,
.vertical-wrap {
display: -webkit-box;
display: -webkit-flex;
-webkit-box-direction: normal
}
.vertical-list {
display: flex;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap
}
.vertical-wrap {
display: flex;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap
}
.cardImageContainer,
.mediaSourceIndicator {
display: -webkit-box;
-webkit-box-align: center
}
.vertical-wrap.centered {
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center
}
.cardScalable {
position: relative;
contain: layout style
}
.cardPadder-backdrop,
.cardPadder-mixedBackdrop,
.cardPadder-overflowBackdrop,
.cardPadder-overflowSmallBackdrop,
.cardPadder-smallBackdrop {
padding-bottom: 56.25%;
contain: strict
}
.cardPadder-mixedSquare,
.cardPadder-overflowSquare,
.cardPadder-square,
.overflowSquareCard-textCardPadder {
padding-bottom: 100%;
contain: strict
}
.cardPadder-mixedPortrait,
.cardPadder-overflowPortrait,
.cardPadder-portrait,
.overflowPortraitCard-textCardPadder {
padding-bottom: 150%;
contain: strict
}
.cardPadder-banner {
padding-bottom: 18.5%;
contain: strict
}
.cardBox {
padding: 0 !important;
margin: .42em;
-webkit-transition: none;
-o-transition: none;
transition: none;
border: 0 solid transparent;
contain: layout style
}
@media (min-width:50em) {
.cardBox {
margin: .9em
}
}
.cardBox-withfocuscontent-large {
margin: .4em
}
.card-focuscontent-large {
border: .5em solid transparent
}
.cardBox-focustransform {
will-change: transform;
-webkit-transition: -webkit-transform .2s ease-out;
-o-transition: transform .2s ease-out;
transition: transform .2s ease-out
}
.card:focus>.cardBox-focustransform {
-webkit-transform: scale(1.18, 1.18);
transform: scale(1.18, 1.18)
}
.cardBox-bottompadded {
margin-bottom: 1.8em !important
}
@media (max-width:50em) {
.cardBox-bottompadded {
margin-bottom: 1.2em !important
}
}
.card:focus {
position: relative !important;
z-index: 10 !important
}
.btnCardOptions {
position: absolute;
bottom: .25em;
right: 0;
margin: 0 !important;
z-index: 1
}
.mediaSourceIndicator {
display: -webkit-flex;
display: flex;
position: absolute;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
top: .3em;
left: .3em;
text-align: center;
vertical-align: middle;
width: 1.6em;
height: 1.6em;
-webkit-border-radius: 50%;
border-radius: 50%;
color: #fff;
background: #38c
}
.cardText,
.innerCardFooter {
overflow: hidden;
text-align: left
}
.cardImageContainer {
-webkit-background-size: contain;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
position: relative;
-webkit-background-clip: content-box !important;
background-clip: content-box !important;
color: inherit;
height: 100%;
contain: strict
}
.cardContent,
.cardImage {
position: absolute;
right: 0;
top: 0;
left: 0;
bottom: 0
}
.chapterCardImageContainer {
background-color: #000;
-webkit-border-radius: 0;
border-radius: 0
}
.textCardImageContainer {
background-color: #333
}
.cardContent {
overflow: hidden;
display: block;
margin: 0 !important;
height: 100%;
contain: strict
}
.cardContent-button {
border: 0 !important;
padding: 0 !important;
color: inherit;
width: 100%;
font-size: inherit
}
.cardContent-button:not(.defaultCardBackground) {
background-color: transparent
}
.visualCardBox .cardContent {
-webkit-border-bottom-left-radius: 0;
border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
border-bottom-right-radius: 0
}
.cardContent-shadow {
-webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37)
}
.cardImageContainer {
display: -webkit-box;
display: -webkit-flex;
display: flex
}
.cardImage {
-webkit-background-size: contain;
background-size: contain;
background-repeat: no-repeat;
background-position: center bottom
}
.cardImage-img {
max-height: 100%;
max-width: 100%;
min-height: 70%;
min-width: 70%;
margin: auto
}
.coveredImage-img {
width: 100%;
height: 100%
}
.coveredImage-noscale-img {
max-height: none;
max-width: none
}
.coveredImage {
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
background-position: center center
}
.coveredImage-noScale {
-webkit-background-size: cover;
background-size: cover
}
.cardFooter {
padding: .3em .3em .5em;
position: relative
}
.visualCardBox {
-webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
-webkit-border-radius: .145em;
border-radius: .145em
}
.innerCardFooter {
background: rgba(0, 0, 0, .7);
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
max-width: 100%;
color: #fff
}
.innerCardFooterClear {
background-color: transparent
}
.fullInnerCardFooter {
right: 0
}
.cardText {
padding: .06em .5em;
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis
}
.cardDefaultText,
.cardTextCentered {
text-align: center
}
.cardText-secondary {
font-size: 86%
}
.cardText-first {
padding-top: .24em
}
.innerCardFooter>.cardText {
padding: .3em .5em
}
.cardFooter-withlogo {
padding-left: 4em;
position: relative
}
.cardFooterLogo {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 4.5em;
-webkit-background-size: 70% auto;
background-size: 70% auto;
background-repeat: no-repeat;
background-position: center center
}
.cardText-rightmargin {
margin-right: 2em
}
.cardDefaultText {
white-space: normal
}
.textActionButton {
background: 0 0;
border: 0 !important;
padding: 0 !important;
color: inherit;
font-size: inherit
}
.textActionButton:hover {
text-decoration: underline
}
.cardImageIcon {
font-size: 5em;
color: inherit
}
.cardImageIcon-small {
font-size: 3em;
margin-bottom: .1em
}
.cardIndicators {
right: .225em;
top: .225em;
position: absolute;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
contain: layout style
}
.cardProgramAttributeIndicators {
top: 0;
left: 0;
position: absolute;
display: -webkit-box;
display: -webkit-flex;
display: flex;
text-transform: uppercase;
font-size: 92%
}
.programAttributeIndicator {
padding: .18em .5em;
color: #fff;
font-weight: 500
}
.cardOverlayButton {
color: rgba(255, 255, 255, .76) !important;
margin: 0;
z-index: 1;
padding: .75em;
font-size: 88%
}
.cardOverlayButton-br {
position: absolute;
bottom: 0;
right: 0
}
.cardOverlayButtonIcon {
background-color: rgba(0, 0, 0, .7) !important;
-webkit-border-radius: 100em;
border-radius: 100em;
width: 1.5em !important;
height: 1.5em !important;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: flex;
font-size: 1.66956521739130434em !important
}
.cardOverlayButton-centered {
bottom: initial;
right: initial;
position: static;
position: absolute;
display: -webkit-box;
display: -webkit-flex;
display: flex;
font-size: 112%;
margin: -1.3em 0 0 -1.3em;
width: 2.6em;
height: 2.6em;
top: 50%;
left: 50%;
background-color: rgba(0, 0, 0, .5) !important;
border: .06em solid rgba(255, 255, 255, .6);
padding: .38em !important;
color: rgba(255, 255, 255, .76);
-webkit-transition: -webkit-transform .2s ease-out;
-o-transition: transform .2s ease-out;
transition: transform .2s ease-out
}
.cardOverlayButton-centered:hover {
-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2)
}
.backdropCard,
.bannerCard {
width: 100%
}
.smallBackdropCard,
.squareCard {
width: 50%
}
.portraitCard {
width: 33.333333333333333333333333333333%
}
.mixedPortraitCard {
width: 12em
}
.mixedSquareCard {
width: 18em
}
.mixedBackdropCard {
width: 32em
}
@media (min-width:25em) {
.backdropCard {
width: 50%
}
}
@media (min-width:31.25em) {
.portraitCard,
.smallBackdropCard,
.squareCard {
width: 33.333333333333333333333333333333%
}
}
@media (min-width:43.75em) {
.portraitCard,
.squareCard {
width: 25%
}
}
@media (min-width:48.125em) {
.backdropCard {
width: 33.333333333333333333333333333333%
}
}
@media (min-width:50em) {
.bannerCard {
width: 50%
}
.portraitCard,
.squareCard {
width: 20%
}
.smallBackdropCard {
width: 25%
}
}
@media (min-width:62.5em) {
.smallBackdropCard {
width: 20%
}
}
@media (min-width:75em) {
.backdropCard {
width: 25%
}
.portraitCard,
.squareCard {
width: 16.666666666666666666666666666667%
}
.bannerCard {
width: 33.333333333333333333333333333333%
}
.smallBackdropCard {
width: 16.666666666666666666666666666667%
}
}
@media (min-width:87.5em) {
.portraitCard,
.smallBackdropCard,
.squareCard {
width: 14.285714285714285714285714285714%
}
}
@media (min-width:100em) {
.smallBackdropCard {
width: 12.5%
}
.backdropCard {
width: 20%
}
.portraitCard,
.squareCard {
width: 12.5%
}
}
@media (min-width:120em) {
.portraitCard,
.squareCard {
width: 11.111111111111111111111111111111%
}
}
@media (min-width:131.25em) {
.bannerCard {
width: 25%
}
.portraitCard,
.squareCard {
width: 10%
}
}
@media (min-width:156.25em) {
.backdropCard {
width: 16.666666666666666666666666666667%
}
}
.itemsContainer-tv>.backdropCard {
width: 25%
}
.itemsContainer-tv>.portraitCard,
.itemsContainer-tv>.squareCard {
width: 16.666666666666666666666666666667%
}
.overflowBackdropCard,
.overflowSmallBackdropCard {
width: 72vw
}
.overflowPortraitCard,
.overflowSquareCard {
width: 40vw
}
@media (min-width:25em) {
.overflowPortraitCard {
width: 31.2vw
}
}
@media (min-width:35em) {
.overflowSquareCard {
width: 31.2vw
}
.overflowBackdropCard {
width: 45.5vw
}
.overflowSmallBackdropCard {
width: 30vw
}
}
@media (min-width:43.75em) {
.overflowPortraitCard,
.overflowSquareCard {
width: 23.3vw
}
}
@media (min-width:48.125em) {
.overflowBackdropCard,
.overflowSmallBackdropCard {
width: 30vw
}
}
@media (orientation:landscape) {
.overflowBackdropCard,
.overflowSmallBackdropCard {
width: 30vw
}
.overflowPortraitCard,
.overflowSquareCard {
width: 23.3vw
}
}
@media (orientation:landscape) and (min-width:48.125em) {
.overflowBackdropCard,
.overflowSmallBackdropCard {
width: 23.3vw
}
}
@media (orientation:landscape) and (min-width:50em) {
.overflowSmallBackdropCard {
width: 15.5vw
}
}
@media (min-width:50em) {
.overflowPortraitCard,
.overflowSquareCard {
width: 18.4vw
}
}
@media (min-width:75em) {
.overflowBackdropCard,
.overflowSmallBackdropCard {
width: 23.3vw
}
.overflowPortraitCard,
.overflowSquareCard {
width: 15.5vw
}
}
@media (min-width:87.5em) {
.overflowPortraitCard,
.overflowSquareCard {
width: 13.3vw
}
}
@media (min-width:100em) {
.overflowBackdropCard,
.overflowSmallBackdropCard {
width: 18.7vw
}
.overflowPortraitCard,
.overflowSquareCard {
width: 11.6vw
}
}
@media (min-width:120em) {
.overflowPortraitCard,
.overflowSquareCard {
width: 10.3vw
}
}
@media (min-width:131.25em) {
.overflowPortraitCard,
.overflowSquareCard {
width: 9.3vw
}
}
@media (min-width:156.25em) {
.overflowBackdropCard,
.overflowSmallBackdropCard {
width: 15.6vw
}
}
.itemsContainer-tv>.overflowBackdropCard {
width: 23.5vw
}
.overflowBackdropCard-textCard {
width: 15.5vw !important
}
.overflowBackdropCard-textCardPadder {
padding-bottom: 87.75%
}
.itemsContainer-tv>.overflowPortraitCard,
.itemsContainer-tv>.overflowSquareCard {
width: 15.6vw
}
.itemsContainer-tv>.overflowSmallBackdropCard {
width: 18.8vw
}
.cardOverlayContainer {
background: -webkit-radial-gradient(50% 50%, farthest-corner, rgba(30, 30, 30, .5) 50%, #2c2c2c 100%);
background: -o-radial-gradient(50% 50%, farthest-corner, rgba(30, 30, 30, .5) 50%, #2c2c2c 100%);
background: radial-gradient(farthest-corner at 50% 50%, rgba(30, 30, 30, .5) 50%, #2c2c2c 100%);
opacity: 0;
-webkit-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.card-hoverable :hover .cardOverlayContainer {
opacity: 1
}
.cardOverlayButton-hover {
opacity: 0;
-webkit-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
background: 0 0;
color: #fff !important;
padding: .5em
}
.cardOverlayButtonIcon-hover {
background: 0 0 !important
}
.card-hoverable:hover .cardOverlayButton-hover {
opacity: 1
}
.cardOverlayFab-primary {
font-size: 130%;
padding: 0;
width: 3em;
height: 3em;
margin-top: -1.5em;
margin-left: -1.5em;
position: absolute;
top: 50%;
left: 50%
}
.cardOverlayFab-primary i {
border: .07em solid rgba(255, 255, 255, .9);
color: #fff
}

515
src/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js vendored Normal file
View file

@ -0,0 +1,515 @@
define(["datetime", "imageLoader", "connectionManager", "itemHelper", "focusManager", "indicators", "globalize", "layoutManager", "apphost", "dom", "browser", "playbackManager", "itemShortcuts", "css!./card", "paper-icon-button-light", "programStyles"], function(datetime, imageLoader, connectionManager, itemHelper, focusManager, indicators, globalize, layoutManager, appHost, dom, browser, playbackManager, itemShortcuts) {
"use strict";
function getCardsHtml(items, options) {
return 1 === arguments.length && (options = arguments[0], items = options.items), buildCardsHtmlInternal(items, options)
}
function getPostersPerRow(shape, screenWidth, isOrientationLandscape) {
switch (shape) {
case "portrait":
return layoutManager.tv ? 5.9999999988 : screenWidth >= 2200 ? 10 : screenWidth >= 1920 ? 9.000000000009 : screenWidth >= 1600 ? 8 : screenWidth >= 1400 ? 7.0000000000021 : screenWidth >= 1200 ? 5.9999999988 : screenWidth >= 800 ? 5 : screenWidth >= 700 ? 4 : 3.0000000003;
case "square":
return layoutManager.tv ? 5.9999999988 : screenWidth >= 2200 ? 10 : screenWidth >= 1920 ? 9.000000000009 : screenWidth >= 1600 ? 8 : screenWidth >= 1400 ? 7.0000000000021 : screenWidth >= 1200 ? 5.9999999988 : screenWidth >= 800 ? 5 : screenWidth >= 700 ? 4 : screenWidth >= 500 ? 3.0000000003 : 2;
case "banner":
return screenWidth >= 2200 ? 4 : screenWidth >= 1200 ? 3.0000000003 : screenWidth >= 800 ? 2 : 1;
case "backdrop":
return layoutManager.tv ? 4 : screenWidth >= 2500 ? 6 : screenWidth >= 1600 ? 5 : screenWidth >= 1200 ? 4 : screenWidth >= 770 ? 3 : screenWidth >= 420 ? 2 : 1;
case "smallBackdrop":
return screenWidth >= 1600 ? 8 : screenWidth >= 1400 ? 7.000000000007001 : screenWidth >= 1200 ? 6 : screenWidth >= 1e3 ? 5 : screenWidth >= 800 ? 4 : screenWidth >= 500 ? 3.0000000003 : 2;
case "overflowSmallBackdrop":
return layoutManager.tv ? 100 / 18.9 : isOrientationLandscape ? screenWidth >= 800 ? 100 / 15.5 : 100 / 23.3 : screenWidth >= 540 ? 100 / 30 : 100 / 72;
case "overflowPortrait":
return layoutManager.tv ? 100 / 15.5 : isOrientationLandscape ? screenWidth >= 1700 ? 100 / 11.6 : 100 / 15.5 : screenWidth >= 1400 ? 100 / 15 : screenWidth >= 1200 ? 100 / 18 : screenWidth >= 760 ? 100 / 23 : screenWidth >= 400 ? 100 / 31.5 : 100 / 42;
case "overflowSquare":
return layoutManager.tv ? 100 / 15.5 : isOrientationLandscape ? screenWidth >= 1700 ? 100 / 11.6 : 100 / 15.5 : screenWidth >= 1400 ? 100 / 15 : screenWidth >= 1200 ? 100 / 18 : screenWidth >= 760 ? 100 / 23 : screenWidth >= 540 ? 100 / 31.5 : 100 / 42;
case "overflowBackdrop":
return layoutManager.tv ? 100 / 23.3 : isOrientationLandscape ? screenWidth >= 1700 ? 100 / 18.5 : 100 / 23.3 : screenWidth >= 1800 ? 100 / 23.5 : screenWidth >= 1400 ? 100 / 30 : screenWidth >= 760 ? 2.5 : screenWidth >= 640 ? 100 / 56 : 100 / 72;
default:
return 4
}
}
function isResizable(windowWidth) {
var screen = window.screen;
if (screen) {
if (screen.availWidth - windowWidth > 20) return !0
}
return !1
}
function getImageWidth(shape, screenWidth, isOrientationLandscape) {
var imagesPerRow = getPostersPerRow(shape, screenWidth, isOrientationLandscape),
shapeWidth = screenWidth / imagesPerRow;
return Math.round(shapeWidth)
}
function setCardData(items, options) {
options.shape = options.shape || "auto";
var primaryImageAspectRatio = imageLoader.getPrimaryImageAspectRatio(items);
if ("auto" === options.shape || "autohome" === options.shape || "autooverflow" === options.shape || "autoVertical" === options.shape) {
var requestedShape = options.shape;
options.shape = null, primaryImageAspectRatio && (primaryImageAspectRatio >= 3 ? (options.shape = "banner", options.coverImage = !0) : options.shape = primaryImageAspectRatio >= 1.33 ? "autooverflow" === requestedShape ? "overflowBackdrop" : "backdrop" : primaryImageAspectRatio > .71 ? "autooverflow" === requestedShape ? "overflowSquare" : "square" : "autooverflow" === requestedShape ? "overflowPortrait" : "portrait"), options.shape || (options.shape = options.defaultShape || ("autooverflow" === requestedShape ? "overflowSquare" : "square"))
}
if ("auto" === options.preferThumb && (options.preferThumb = "backdrop" === options.shape || "overflowBackdrop" === options.shape), options.uiAspect = getDesiredAspect(options.shape), options.primaryImageAspectRatio = primaryImageAspectRatio, !options.width && options.widths && (options.width = options.widths[options.shape]), options.rows && "number" != typeof options.rows && (options.rows = options.rows[options.shape]), !options.width) {
var screenWidth = dom.getWindowSize().innerWidth,
screenHeight = dom.getWindowSize().innerHeight;
if (isResizable(screenWidth)) {
screenWidth = 100 * Math.floor(screenWidth / 100)
}
options.width = getImageWidth(options.shape, screenWidth, screenWidth > 1.3 * screenHeight)
}
}
function buildCardsHtmlInternal(items, options) {
var isVertical;
"autoVertical" === options.shape && (isVertical = !0), setCardData(items, options);
var currentIndexValue, hasOpenRow, hasOpenSection, apiClient, lastServerId, i, length, html = "",
itemsInRow = 0,
sectionTitleTagName = options.sectionTitleTagName || "div";
for (i = 0, length = items.length; i < length; i++) {
var item = items[i],
serverId = item.ServerId || options.serverId;
if (serverId !== lastServerId && (lastServerId = serverId, apiClient = connectionManager.getApiClient(lastServerId)), options.indexBy) {
var newIndexValue = "";
if ("PremiereDate" === options.indexBy) {
if (item.PremiereDate) try {
newIndexValue = datetime.toLocaleDateString(datetime.parseISO8601Date(item.PremiereDate), {
weekday: "long",
month: "long",
day: "numeric"
})
} catch (err) {}
} else "ProductionYear" === options.indexBy ? newIndexValue = item.ProductionYear : "CommunityRating" === options.indexBy && (newIndexValue = item.CommunityRating ? Math.floor(item.CommunityRating) + (item.CommunityRating % 1 >= .5 ? .5 : 0) + "+" : null);
newIndexValue !== currentIndexValue && (hasOpenRow && (html += "</div>", hasOpenRow = !1, itemsInRow = 0), hasOpenSection && (html += "</div>", isVertical && (html += "</div>"), hasOpenSection = !1), html += isVertical ? '<div class="verticalSection">' : '<div class="horizontalSection">', html += "<" + sectionTitleTagName + ' class="sectionTitle">' + newIndexValue + "</" + sectionTitleTagName + ">", isVertical && (html += '<div class="itemsContainer vertical-wrap">'), currentIndexValue = newIndexValue, hasOpenSection = !0)
}
options.rows && 0 === itemsInRow && (hasOpenRow && (html += "</div>", hasOpenRow = !1), html += '<div class="cardColumn">', hasOpenRow = !0), html += buildCard(i, item, apiClient, options), itemsInRow++, options.rows && itemsInRow >= options.rows && (html += "</div>", hasOpenRow = !1, itemsInRow = 0)
}
hasOpenRow && (html += "</div>"), hasOpenSection && (html += "</div>", isVertical && (html += "</div>"));
var cardFooterHtml = "";
for (i = 0, length = options.lines || 0; i < length; i++) cardFooterHtml += 0 === i ? '<div class="cardText cardTextCentered cardText-first">&nbsp;</div>' : '<div class="cardText cardTextCentered cardText-secondary">&nbsp;</div>';
return html
}
function getDesiredAspect(shape) {
if (shape) {
if (shape = shape.toLowerCase(), -1 !== shape.indexOf("portrait")) return 2 / 3;
if (-1 !== shape.indexOf("backdrop")) return 16 / 9;
if (-1 !== shape.indexOf("square")) return 1;
if (-1 !== shape.indexOf("banner")) return 1e3 / 185
}
return null
}
function getCardImageUrl(item, apiClient, options, shape) {
item = item.ProgramInfo || item;
var width = options.width,
height = null,
primaryImageAspectRatio = item.PrimaryImageAspectRatio,
forceName = !1,
imgUrl = null,
coverImage = !1,
uiAspect = null;
return options.preferThumb && item.ImageTags && item.ImageTags.Thumb ? imgUrl = apiClient.getScaledImageUrl(item.Id, {
type: "Thumb",
maxWidth: width,
tag: item.ImageTags.Thumb
}) : (options.preferBanner || "banner" === shape) && item.ImageTags && item.ImageTags.Banner ? imgUrl = apiClient.getScaledImageUrl(item.Id, {
type: "Banner",
maxWidth: width,
tag: item.ImageTags.Banner
}) : options.preferDisc && item.ImageTags && item.ImageTags.Disc ? imgUrl = apiClient.getScaledImageUrl(item.Id, {
type: "Disc",
maxWidth: width,
tag: item.ImageTags.Disc
}) : options.preferLogo && item.ImageTags && item.ImageTags.Logo ? imgUrl = apiClient.getScaledImageUrl(item.Id, {
type: "Logo",
maxWidth: width,
tag: item.ImageTags.Logo
}) : options.preferLogo && item.ParentLogoImageTag && item.ParentLogoItemId ? imgUrl = apiClient.getScaledImageUrl(item.ParentLogoItemId, {
type: "Logo",
maxWidth: width,
tag: item.ParentLogoImageTag
}) : options.preferThumb && item.SeriesThumbImageTag && !1 !== options.inheritThumb ? imgUrl = apiClient.getScaledImageUrl(item.SeriesId, {
type: "Thumb",
maxWidth: width,
tag: item.SeriesThumbImageTag
}) : options.preferThumb && item.ParentThumbItemId && !1 !== options.inheritThumb && "Photo" !== item.MediaType ? imgUrl = apiClient.getScaledImageUrl(item.ParentThumbItemId, {
type: "Thumb",
maxWidth: width,
tag: item.ParentThumbImageTag
}) : options.preferThumb && item.BackdropImageTags && item.BackdropImageTags.length ? (imgUrl = apiClient.getScaledImageUrl(item.Id, {
type: "Backdrop",
maxWidth: width,
tag: item.BackdropImageTags[0]
}), forceName = !0) : options.preferThumb && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length && !1 !== options.inheritThumb && "Episode" === item.Type ? imgUrl = apiClient.getScaledImageUrl(item.ParentBackdropItemId, {
type: "Backdrop",
maxWidth: width,
tag: item.ParentBackdropImageTags[0]
}) : item.ImageTags && item.ImageTags.Primary ? (height = width && primaryImageAspectRatio ? Math.round(width / primaryImageAspectRatio) : null, imgUrl = apiClient.getScaledImageUrl(item.Id, {
type: "Primary",
maxHeight: height,
maxWidth: width,
tag: item.ImageTags.Primary
}), options.preferThumb && !1 !== options.showTitle && (forceName = !0), primaryImageAspectRatio && (uiAspect = getDesiredAspect(shape)) && (coverImage = Math.abs(primaryImageAspectRatio - uiAspect) / uiAspect <= .2)) : item.PrimaryImageTag ? (height = width && primaryImageAspectRatio ? Math.round(width / primaryImageAspectRatio) : null, imgUrl = apiClient.getScaledImageUrl(item.PrimaryImageItemId || item.Id || item.ItemId, {
type: "Primary",
maxHeight: height,
maxWidth: width,
tag: item.PrimaryImageTag
}), options.preferThumb && !1 !== options.showTitle && (forceName = !0), primaryImageAspectRatio && (uiAspect = getDesiredAspect(shape)) && (coverImage = Math.abs(primaryImageAspectRatio - uiAspect) / uiAspect <= .2)) : item.ParentPrimaryImageTag ? imgUrl = apiClient.getScaledImageUrl(item.ParentPrimaryImageItemId, {
type: "Primary",
maxWidth: width,
tag: item.ParentPrimaryImageTag
}) : item.SeriesPrimaryImageTag ? imgUrl = apiClient.getScaledImageUrl(item.SeriesId, {
type: "Primary",
maxWidth: width,
tag: item.SeriesPrimaryImageTag
}) : item.AlbumId && item.AlbumPrimaryImageTag ? (width = primaryImageAspectRatio ? Math.round(height * primaryImageAspectRatio) : null, imgUrl = apiClient.getScaledImageUrl(item.AlbumId, {
type: "Primary",
maxHeight: height,
maxWidth: width,
tag: item.AlbumPrimaryImageTag
}), primaryImageAspectRatio && (uiAspect = getDesiredAspect(shape)) && (coverImage = Math.abs(primaryImageAspectRatio - uiAspect) / uiAspect <= .2)) : "Season" === item.Type && item.ImageTags && item.ImageTags.Thumb ? imgUrl = apiClient.getScaledImageUrl(item.Id, {
type: "Thumb",
maxWidth: width,
tag: item.ImageTags.Thumb
}) : item.BackdropImageTags && item.BackdropImageTags.length ? imgUrl = apiClient.getScaledImageUrl(item.Id, {
type: "Backdrop",
maxWidth: width,
tag: item.BackdropImageTags[0]
}) : item.ImageTags && item.ImageTags.Thumb ? imgUrl = apiClient.getScaledImageUrl(item.Id, {
type: "Thumb",
maxWidth: width,
tag: item.ImageTags.Thumb
}) : item.SeriesThumbImageTag && !1 !== options.inheritThumb ? imgUrl = apiClient.getScaledImageUrl(item.SeriesId, {
type: "Thumb",
maxWidth: width,
tag: item.SeriesThumbImageTag
}) : item.ParentThumbItemId && !1 !== options.inheritThumb ? imgUrl = apiClient.getScaledImageUrl(item.ParentThumbItemId, {
type: "Thumb",
maxWidth: width,
tag: item.ParentThumbImageTag
}) : item.ParentBackdropImageTags && item.ParentBackdropImageTags.length && !1 !== options.inheritThumb && (imgUrl = apiClient.getScaledImageUrl(item.ParentBackdropItemId, {
type: "Backdrop",
maxWidth: width,
tag: item.ParentBackdropImageTags[0]
})), {
imgUrl: imgUrl,
forceName: forceName,
coverImage: coverImage
}
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min
}
function getDefaultColorIndex(str) {
if (str) {
for (var charIndex = Math.floor(str.length / 2), character = String(str.substr(charIndex, 1).charCodeAt()), sum = 0, i = 0; i < character.length; i++) sum += parseInt(character.charAt(i));
return String(sum).substr(-1) % numRandomColors + 1
}
return getRandomInt(1, numRandomColors)
}
function getCardTextLines(lines, cssClass, forceLines, isOuterFooter, cardLayout, addRightMargin, maxLines) {
var i, length, html = "",
valid = 0;
for (i = 0, length = lines.length; i < length; i++) {
var currentCssClass = cssClass,
text = lines[i];
if (valid > 0 && isOuterFooter ? currentCssClass += " cardText-secondary" : 0 === valid && isOuterFooter && (currentCssClass += " cardText-first"), addRightMargin && (currentCssClass += " cardText-rightmargin"), text && (html += "<div class='" + currentCssClass + "'>", html += text, html += "</div>", valid++, maxLines && valid >= maxLines)) break
}
if (forceLines)
for (length = maxLines || Math.min(lines.length, maxLines || lines.length); valid < length;) html += "<div class='" + cssClass + "'>&nbsp;</div>", valid++;
return html
}
function isUsingLiveTvNaming(item) {
return "Program" === item.Type || "Timer" === item.Type || "Recording" === item.Type
}
function getAirTimeText(item, showAirDateTime, showAirEndTime) {
var airTimeText = "";
if (item.StartDate) try {
var date = datetime.parseISO8601Date(item.StartDate);
showAirDateTime && (airTimeText += datetime.toLocaleDateString(date, {
weekday: "short",
month: "short",
day: "numeric"
}) + " "), airTimeText += datetime.getDisplayTime(date), item.EndDate && showAirEndTime && (date = datetime.parseISO8601Date(item.EndDate), airTimeText += " - " + datetime.getDisplayTime(date))
} catch (e) {
console.log("Error parsing date: " + item.StartDate)
}
return airTimeText
}
function getCardFooterText(item, apiClient, options, showTitle, forceName, overlayText, imgUrl, footerClass, progressHtml, logoUrl, isOuterFooter) {
var html = "";
logoUrl && (html += '<div class="lazy cardFooterLogo" data-src="' + logoUrl + '"></div>');
var showOtherText = isOuterFooter ? !overlayText : overlayText;
isOuterFooter && options.cardLayout && layoutManager.mobile && "none" !== options.cardFooterAside && (html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions cardText-secondary" data-action="menu"><i class="md-icon">&#xE5D3;</i></button>');
var titleAdded, cssClass = options.centerText ? "cardText cardTextCentered" : "cardText",
lines = [],
parentTitleUnderneath = "MusicAlbum" === item.Type || "Audio" === item.Type || "MusicVideo" === item.Type;
if (showOtherText && (options.showParentTitle || options.showParentTitleOrTitle) && !parentTitleUnderneath)
if (isOuterFooter && "Episode" === item.Type && item.SeriesName) item.SeriesId ? lines.push(getTextActionButton({
Id: item.SeriesId,
ServerId: item.ServerId,
Name: item.SeriesName,
Type: "Series",
IsFolder: !0
})) : lines.push(item.SeriesName);
else if (isUsingLiveTvNaming(item)) lines.push(item.Name), item.EpisodeTitle || (titleAdded = !0);
else {
var parentTitle = item.SeriesName || item.Series || item.Album || item.AlbumArtist || item.GameSystem || "";
(parentTitle || showTitle) && lines.push(parentTitle)
}
var showMediaTitle = showTitle && !titleAdded || options.showParentTitleOrTitle && !lines.length;
if (showMediaTitle || titleAdded || !showTitle && !forceName || (showMediaTitle = !0), showMediaTitle) {
var name = "auto" !== options.showTitle || item.IsFolder || "Photo" !== item.MediaType ? itemHelper.getDisplayName(item, {
includeParentInfo: options.includeParentInfoInTitle
}) : "";
lines.push(name)
}
if (showOtherText) {
if (options.showParentTitle && parentTitleUnderneath && (isOuterFooter && item.AlbumArtists && item.AlbumArtists.length ? (item.AlbumArtists[0].Type = "MusicArtist", item.AlbumArtists[0].IsFolder = !0, lines.push(getTextActionButton(item.AlbumArtists[0], null, item.ServerId))) : lines.push(isUsingLiveTvNaming(item) ? item.Name : item.SeriesName || item.Series || item.Album || item.AlbumArtist || item.GameSystem || "")), options.showItemCounts) {
var itemCountHtml = getItemCountsHtml(options, item);
lines.push(itemCountHtml)
}
if (options.textLines)
for (var additionalLines = options.textLines(item), i = 0, length = additionalLines.length; i < length; i++) lines.push(additionalLines[i]);
if (options.showSongCount) {
var songLine = "";
item.SongCount && (songLine = 1 === item.SongCount ? globalize.translate("sharedcomponents#ValueOneSong") : globalize.translate("sharedcomponents#ValueSongCount", item.SongCount)), lines.push(songLine)
}
if (options.showPremiereDate)
if (item.PremiereDate) try {
lines.push(getPremiereDateText(item))
} catch (err) {
lines.push("")
} else lines.push("");
(options.showYear || options.showSeriesYear) && ("Series" === item.Type ? "Continuing" === item.Status ? lines.push(globalize.translate("sharedcomponents#SeriesYearToPresent", item.ProductionYear || "")) : item.EndDate && item.ProductionYear ? lines.push(item.ProductionYear + " - " + datetime.parseISO8601Date(item.EndDate).getFullYear()) : lines.push(item.ProductionYear || "") : lines.push(item.ProductionYear || "")), options.showRuntime && (item.RunTimeTicks ? lines.push(datetime.getDisplayRunningTime(item.RunTimeTicks)) : lines.push("")), options.showAirTime && lines.push(getAirTimeText(item, options.showAirDateTime, options.showAirEndTime) || ""), options.showChannelName && (item.ChannelId ? lines.push(getTextActionButton({
Id: item.ChannelId,
ServerId: item.ServerId,
Name: item.ChannelName,
Type: "TvChannel",
MediaType: item.MediaType,
IsFolder: !1
}, item.ChannelName)) : lines.push(item.ChannelName || "&nbsp;")), options.showCurrentProgram && "TvChannel" === item.Type && (item.CurrentProgram ? lines.push(item.CurrentProgram.Name) : lines.push("")), options.showCurrentProgramTime && "TvChannel" === item.Type && (item.CurrentProgram ? lines.push(getAirTimeText(item.CurrentProgram, !1, !0) || "") : lines.push("")), options.showSeriesTimerTime && (item.RecordAnyTime ? lines.push(globalize.translate("sharedcomponents#Anytime")) : lines.push(datetime.getDisplayTime(item.StartDate))), options.showSeriesTimerChannel && (item.RecordAnyChannel ? lines.push(globalize.translate("sharedcomponents#AllChannels")) : lines.push(item.ChannelName || globalize.translate("sharedcomponents#OneChannel"))), options.showPersonRoleOrType && (item.Role ? lines.push("as " + item.Role) : item.Type ? lines.push(globalize.translate("sharedcomponents#" + item.Type)) : lines.push(""))
}(showTitle || !imgUrl) && forceName && overlayText && 1 === lines.length && (lines = []);
var addRightTextMargin = isOuterFooter && options.cardLayout && !options.centerText && "none" !== options.cardFooterAside && layoutManager.mobile;
return html += getCardTextLines(lines, cssClass, !options.overlayText, isOuterFooter, options.cardLayout, addRightTextMargin, options.lines), progressHtml && (html += progressHtml), html && (!isOuterFooter || logoUrl || options.cardLayout) && (html = '<div class="' + footerClass + '">' + html, html += "</div>"), html
}
function getTextActionButton(item, text, serverId) {
if (text || (text = itemHelper.getDisplayName(item)), layoutManager.tv) return text;
var html = "<button " + itemShortcuts.getShortcutAttributesHtml(item, serverId) + ' type="button" class="itemAction textActionButton" data-action="link">';
return html += text, html += "</button>"
}
function getItemCountsHtml(options, item) {
var childText, counts = [];
if ("Playlist" === item.Type) {
if (childText = "", item.RunTimeTicks) {
var minutes = item.RunTimeTicks / 6e8;
minutes = minutes || 1, childText += globalize.translate("sharedcomponents#ValueMinutes", Math.round(minutes))
} else childText += globalize.translate("sharedcomponents#ValueMinutes", 0);
counts.push(childText)
} else "Genre" === item.Type || "Studio" === item.Type ? (item.MovieCount && (childText = 1 === item.MovieCount ? globalize.translate("sharedcomponents#ValueOneMovie") : globalize.translate("sharedcomponents#ValueMovieCount", item.MovieCount), counts.push(childText)), item.SeriesCount && (childText = 1 === item.SeriesCount ? globalize.translate("sharedcomponents#ValueOneSeries") : globalize.translate("sharedcomponents#ValueSeriesCount", item.SeriesCount), counts.push(childText)), item.EpisodeCount && (childText = 1 === item.EpisodeCount ? globalize.translate("sharedcomponents#ValueOneEpisode") : globalize.translate("sharedcomponents#ValueEpisodeCount", item.EpisodeCount), counts.push(childText)), item.GameCount && (childText = 1 === item.GameCount ? globalize.translate("sharedcomponents#ValueOneGame") : globalize.translate("sharedcomponents#ValueGameCount", item.GameCount), counts.push(childText))) : "GameGenre" === item.Type ? item.GameCount && (childText = 1 === item.GameCount ? globalize.translate("sharedcomponents#ValueOneGame") : globalize.translate("sharedcomponents#ValueGameCount", item.GameCount), counts.push(childText)) : "MusicGenre" === item.Type || "MusicArtist" === options.context ? (item.AlbumCount && (childText = 1 === item.AlbumCount ? globalize.translate("sharedcomponents#ValueOneAlbum") : globalize.translate("sharedcomponents#ValueAlbumCount", item.AlbumCount), counts.push(childText)), item.SongCount && (childText = 1 === item.SongCount ? globalize.translate("sharedcomponents#ValueOneSong") : globalize.translate("sharedcomponents#ValueSongCount", item.SongCount), counts.push(childText)), item.MusicVideoCount && (childText = 1 === item.MusicVideoCount ? globalize.translate("sharedcomponents#ValueOneMusicVideo") : globalize.translate("sharedcomponents#ValueMusicVideoCount", item.MusicVideoCount), counts.push(childText))) : "Series" === item.Type && (childText = 1 === item.RecursiveItemCount ? globalize.translate("sharedcomponents#ValueOneEpisode") : globalize.translate("sharedcomponents#ValueEpisodeCount", item.RecursiveItemCount), counts.push(childText));
return counts.join(", ")
}
function requireRefreshIndicator() {
refreshIndicatorLoaded || (refreshIndicatorLoaded = !0, require(["emby-itemrefreshindicator"]))
}
function getDefaultBackgroundClass(str) {
return "defaultCardBackground defaultCardBackground" + getDefaultColorIndex(str)
}
function buildCard(index, item, apiClient, options) {
var action = options.action || "link";
"play" === action && item.IsFolder ? action = "link" : "Photo" === item.MediaType && (action = "play");
var shape = options.shape;
if ("mixed" === shape) {
shape = null;
var primaryImageAspectRatio = item.PrimaryImageAspectRatio;
primaryImageAspectRatio && (shape = primaryImageAspectRatio >= 1.33 ? "mixedBackdrop" : primaryImageAspectRatio > .71 ? "mixedSquare" : "mixedPortrait"), shape = shape || "mixedSquare"
}
var className = "card";
shape && (className += " " + shape + "Card"), options.cardCssClass && (className += " " + options.cardCssClass), options.cardClass && (className += " " + options.cardClass), layoutManager.desktop && (className += " card-hoverable"), enableFocusTransfrom && layoutManager.tv || (className += " card-nofocustransform");
var imgInfo = getCardImageUrl(item, apiClient, options, shape),
imgUrl = imgInfo.imgUrl,
forceName = imgInfo.forceName,
showTitle = "auto" === options.showTitle || (options.showTitle || "PhotoAlbum" === item.Type || "Folder" === item.Type),
overlayText = options.overlayText;
forceName && !options.cardLayout && null == overlayText && (overlayText = !0);
var cardImageContainerClass = "cardImageContainer";
(options.coverImage || imgInfo.coverImage) && (cardImageContainerClass += " coveredImage", ("Photo" === item.MediaType || "PhotoAlbum" === item.Type || "Folder" === item.Type || item.ProgramInfo || "Program" === item.Type || "Recording" === item.Type) && (cardImageContainerClass += " coveredImage-noScale")), imgUrl || (cardImageContainerClass += " " + getDefaultBackgroundClass(item.Name));
var cardBoxClass = options.cardLayout ? "cardBox visualCardBox" : "cardBox";
layoutManager.tv && (cardBoxClass += enableFocusTransfrom ? " cardBox-focustransform cardBox-withfocuscontent" : " cardBox-withfocuscontent-large", options.cardLayout && (cardBoxClass += " card-focuscontent", enableFocusTransfrom || (cardBoxClass += " card-focuscontent-large")));
var footerCssClass, logoUrl, progressHtml = indicators.getProgressBarHtml(item),
innerCardFooter = "",
footerOverlayed = !1;
options.showChannelLogo && item.ChannelPrimaryImageTag ? logoUrl = apiClient.getScaledImageUrl(item.ChannelId, {
type: "Primary",
height: 40,
tag: item.ChannelPrimaryImageTag
}) : options.showLogo && item.ParentLogoImageTag && (logoUrl = apiClient.getScaledImageUrl(item.ParentLogoItemId, {
type: "Logo",
height: 40,
tag: item.ParentLogoImageTag
})), overlayText ? (logoUrl = null, footerCssClass = progressHtml ? "innerCardFooter fullInnerCardFooter" : "innerCardFooter", innerCardFooter += getCardFooterText(item, apiClient, options, showTitle, forceName, overlayText, imgUrl, footerCssClass, progressHtml, logoUrl, !1), footerOverlayed = !0) : progressHtml && (innerCardFooter += '<div class="innerCardFooter fullInnerCardFooter innerCardFooterClear">', innerCardFooter += progressHtml, innerCardFooter += "</div>", progressHtml = "");
var mediaSourceCount = item.MediaSourceCount || 1;
mediaSourceCount > 1 && (innerCardFooter += '<div class="mediaSourceIndicator">' + mediaSourceCount + "</div>");
var outerCardFooter = "";
overlayText || footerOverlayed || (footerCssClass = options.cardLayout ? "cardFooter" : "cardFooter cardFooter-transparent", logoUrl && (footerCssClass += " cardFooter-withlogo"), options.cardLayout || (logoUrl = null), outerCardFooter = getCardFooterText(item, apiClient, options, showTitle, forceName, overlayText, imgUrl, footerCssClass, progressHtml, logoUrl, !0)), outerCardFooter && !options.cardLayout && (cardBoxClass += " cardBox-bottompadded");
var overlayButtons = "";
if (layoutManager.mobile) {
var overlayPlayButton = options.overlayPlayButton;
null != overlayPlayButton || options.overlayMoreButton || options.overlayInfoButton || options.cardLayout || (overlayPlayButton = "Video" === item.MediaType);
var btnCssClass = "cardOverlayButton cardOverlayButton-br itemAction";
options.centerPlayButton && (overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayButton-centered" data-action="play"><i class="md-icon cardOverlayButtonIcon">&#xE037;</i></button>'), !overlayPlayButton || item.IsPlaceHolder || "Virtual" === item.LocationType && item.MediaType && "Program" !== item.Type || "Person" === item.Type || (overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="play"><i class="md-icon cardOverlayButtonIcon">&#xE037;</i></button>'), options.overlayMoreButton && (overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="md-icon cardOverlayButtonIcon">&#xE5D3;</i></button>')
}
options.showChildCountIndicator && item.ChildCount && (className += " groupedCard");
var cardImageContainerOpen, cardImageContainerClose = "",
cardBoxClose = "",
cardScalableClose = "",
cardContentClass = "cardContent";
options.cardLayout || (cardContentClass += " cardContent-shadow"), layoutManager.tv ? (cardImageContainerOpen = imgUrl ? '<div class="' + cardImageContainerClass + " " + cardContentClass + ' lazy" data-src="' + imgUrl + '">' : '<div class="' + cardImageContainerClass + " " + cardContentClass + '">', cardImageContainerClose = "</div>") : (cardImageContainerOpen = imgUrl ? '<button data-action="' + action + '" class="cardContent-button ' + cardImageContainerClass + " " + cardContentClass + ' itemAction lazy" data-src="' + imgUrl + '">' : '<button data-action="' + action + '" class="cardContent-button ' + cardImageContainerClass + " " + cardContentClass + ' itemAction">', cardImageContainerClose = "</button>");
var cardScalableClass = "cardScalable";
layoutManager.tv && !options.cardLayout && (cardScalableClass += " card-focuscontent", enableFocusTransfrom || (cardScalableClass += " card-focuscontent-large")), cardImageContainerOpen = '<div class="' + cardBoxClass + '"><div class="' + cardScalableClass + '"><div class="cardPadder-' + shape + '"></div>' + cardImageContainerOpen, cardBoxClose = "</div>", cardScalableClose = "</div>";
var indicatorsHtml = "";
if (!1 !== options.missingIndicator && (indicatorsHtml += indicators.getMissingIndicator(item)), indicatorsHtml += indicators.getSyncIndicator(item), indicatorsHtml += indicators.getTimerIndicator(item), indicatorsHtml += indicators.getTypeIndicator(item), options.showGroupCount ? indicatorsHtml += indicators.getChildCountIndicatorHtml(item, {
minCount: 1
}) : indicatorsHtml += indicators.getPlayedIndicatorHtml(item), "CollectionFolder" === item.Type || item.CollectionType) {
indicatorsHtml += '<div is="emby-itemrefreshindicator"' + (item.RefreshProgress || item.RefreshStatus && "Idle" !== virtualFolder.item ? "" : ' class="hide"') + ' data-progress="' + (item.RefreshProgress || 0) + '" data-status="' + item.RefreshStatus + '"></div>', requireRefreshIndicator()
}
indicatorsHtml && (cardImageContainerOpen += '<div class="cardIndicators">' + indicatorsHtml + "</div>"), imgUrl || (cardImageContainerOpen += getCardDefaultText(item, options));
var tagName = layoutManager.tv && !overlayButtons ? "button" : "div",
nameWithPrefix = item.SortName || item.Name || "",
prefix = nameWithPrefix.substring(0, Math.min(3, nameWithPrefix.length));
prefix && (prefix = prefix.toUpperCase());
var timerAttributes = "";
item.TimerId && (timerAttributes += ' data-timerid="' + item.TimerId + '"'), item.SeriesTimerId && (timerAttributes += ' data-seriestimerid="' + item.SeriesTimerId + '"');
var actionAttribute;
"button" === tagName ? (className += " itemAction", actionAttribute = ' data-action="' + action + '"') : actionAttribute = "", "MusicAlbum" !== item.Type && "MusicArtist" !== item.Type && "Audio" !== item.Type && (className += " card-withuserdata");
var positionTicksData = item.UserData && item.UserData.PlaybackPositionTicks ? ' data-positionticks="' + item.UserData.PlaybackPositionTicks + '"' : "",
collectionIdData = options.collectionId ? ' data-collectionid="' + options.collectionId + '"' : "",
playlistIdData = options.playlistId ? ' data-playlistid="' + options.playlistId + '"' : "",
mediaTypeData = item.MediaType ? ' data-mediatype="' + item.MediaType + '"' : "",
collectionTypeData = item.CollectionType ? ' data-collectiontype="' + item.CollectionType + '"' : "",
channelIdData = item.ChannelId ? ' data-channelid="' + item.ChannelId + '"' : "",
contextData = options.context ? ' data-context="' + options.context + '"' : "",
parentIdData = options.parentId ? ' data-parentid="' + options.parentId + '"' : "",
additionalCardContent = "";
return layoutManager.desktop && (additionalCardContent += getHoverMenuHtml(item, action)), "<" + tagName + ' data-index="' + index + '"' + timerAttributes + actionAttribute + ' data-isfolder="' + (item.IsFolder || !1) + '" data-serverid="' + (item.ServerId || options.serverId) + '" data-id="' + (item.Id || item.ItemId) + '" data-type="' + item.Type + '"' + mediaTypeData + collectionTypeData + channelIdData + positionTicksData + collectionIdData + playlistIdData + contextData + parentIdData + ' data-prefix="' + prefix + '" class="' + className + '">' + cardImageContainerOpen + innerCardFooter + cardImageContainerClose + overlayButtons + additionalCardContent + cardScalableClose + outerCardFooter + cardBoxClose + "</" + tagName + ">"
}
function getHoverMenuHtml(item, action) {
var html = "";
html += '<div class="cardOverlayContainer itemAction" data-action="' + action + '">';
var btnCssClass = "cardOverlayButton cardOverlayButton-hover itemAction";
playbackManager.canPlay(item) && (html += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayFab-primary" data-action="resume"><i class="md-icon cardOverlayButtonIcon">&#xE037;</i></button>'), html += '<div class="cardOverlayButton-br">';
var userData = item.UserData || {};
if (itemHelper.canMarkPlayed(item) && (require(["emby-playstatebutton"]), html += '<button is="emby-playstatebutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + userData.Played + '"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">&#xE5CA;</i></button>'), itemHelper.canRate(item)) {
var likes = null == userData.Likes ? "" : userData.Likes;
require(["emby-ratingbutton"]), html += '<button is="emby-ratingbutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + userData.IsFavorite + '"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">&#xE87D;</i></button>'
}
return html += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">&#xE5D3;</i></button>', html += "</div>", html += "</div>"
}
function getCardDefaultText(item, options) {
var collectionType = item.CollectionType;
return "livetv" === collectionType ? '<i class="cardImageIcon md-icon">&#xE1B2;</i>' : "homevideos" === collectionType || "photos" === collectionType ? '<i class="cardImageIcon md-icon">&#xE412;</i>' : "music" === collectionType ? '<i class="cardImageIcon md-icon">&#xE310;</i>' : "MusicAlbum" === item.Type ? '<i class="cardImageIcon md-icon">&#xE019;</i>' : "MusicArtist" === item.Type || "Person" === item.Type ? '<i class="cardImageIcon md-icon">&#xE7FD;</i>' : options.defaultCardImageIcon ? '<i class="cardImageIcon md-icon">' + options.defaultCardImageIcon + "</i>" : '<div class="cardText cardDefaultText">' + (isUsingLiveTvNaming(item) ? item.Name : itemHelper.getDisplayName(item)) + "</div>"
}
function buildCards(items, options) {
if (document.body.contains(options.itemsContainer)) {
if (options.parentContainer) {
if (!items.length) return void options.parentContainer.classList.add("hide");
options.parentContainer.classList.remove("hide")
}
var html = buildCardsHtmlInternal(items, options);
html ? (options.itemsContainer.cardBuilderHtml !== html && (options.itemsContainer.innerHTML = html, items.length < 50 ? options.itemsContainer.cardBuilderHtml = html : options.itemsContainer.cardBuilderHtml = null), imageLoader.lazyChildren(options.itemsContainer)) : (options.itemsContainer.innerHTML = html, options.itemsContainer.cardBuilderHtml = null), options.autoFocus && focusManager.autoFocus(options.itemsContainer, !0)
}
}
function ensureIndicators(card, indicatorsElem) {
if (indicatorsElem) return indicatorsElem;
if (!(indicatorsElem = card.querySelector(".cardIndicators"))) {
var cardImageContainer = card.querySelector(".cardImageContainer");
indicatorsElem = document.createElement("div"),
indicatorsElem.classList.add("cardIndicators"), cardImageContainer.appendChild(indicatorsElem)
}
return indicatorsElem
}
function updateUserData(card, userData) {
var type = card.getAttribute("data-type"),
enableCountIndicator = "Series" === type || "BoxSet" === type || "Season" === type,
indicatorsElem = null,
playedIndicator = null,
countIndicator = null,
itemProgressBar = null;
userData.Played ? (playedIndicator = card.querySelector(".playedIndicator"), playedIndicator || (playedIndicator = document.createElement("div"), playedIndicator.classList.add("playedIndicator"), playedIndicator.classList.add("indicator"), indicatorsElem = ensureIndicators(card, indicatorsElem), indicatorsElem.appendChild(playedIndicator)), playedIndicator.innerHTML = '<i class="md-icon indicatorIcon">&#xE5CA;</i>') : (playedIndicator = card.querySelector(".playedIndicator")) && playedIndicator.parentNode.removeChild(playedIndicator), userData.UnplayedItemCount ? (countIndicator = card.querySelector(".countIndicator"), countIndicator || (countIndicator = document.createElement("div"), countIndicator.classList.add("countIndicator"), indicatorsElem = ensureIndicators(card, indicatorsElem), indicatorsElem.appendChild(countIndicator)), countIndicator.innerHTML = userData.UnplayedItemCount) : enableCountIndicator && (countIndicator = card.querySelector(".countIndicator")) && countIndicator.parentNode.removeChild(countIndicator);
var progressHtml = indicators.getProgressBarHtml({
Type: type,
UserData: userData,
MediaType: "Video"
});
if (progressHtml) {
if (!(itemProgressBar = card.querySelector(".itemProgressBar"))) {
itemProgressBar = document.createElement("div"), itemProgressBar.classList.add("itemProgressBar");
var innerCardFooter = card.querySelector(".innerCardFooter");
if (!innerCardFooter) {
innerCardFooter = document.createElement("div"), innerCardFooter.classList.add("innerCardFooter");
card.querySelector(".cardImageContainer").appendChild(innerCardFooter)
}
innerCardFooter.appendChild(itemProgressBar)
}
itemProgressBar.innerHTML = progressHtml
} else(itemProgressBar = card.querySelector(".itemProgressBar")) && itemProgressBar.parentNode.removeChild(itemProgressBar)
}
function onUserDataChanged(userData, scope) {
for (var cards = (scope || document.body).querySelectorAll('.card-withuserdata[data-id="' + userData.ItemId + '"]'), i = 0, length = cards.length; i < length; i++) updateUserData(cards[i], userData)
}
function onTimerCreated(programId, newTimerId, itemsContainer) {
for (var cells = itemsContainer.querySelectorAll('.card[data-id="' + programId + '"]'), i = 0, length = cells.length; i < length; i++) {
var cell = cells[i];
if (!cell.querySelector(".timerIndicator")) {
ensureIndicators(cell).insertAdjacentHTML("beforeend", '<i class="md-icon timerIndicator indicatorIcon">&#xE061;</i>')
}
cell.setAttribute("data-timerid", newTimerId)
}
}
function onTimerCancelled(id, itemsContainer) {
for (var cells = itemsContainer.querySelectorAll('.card[data-timerid="' + id + '"]'), i = 0, length = cells.length; i < length; i++) {
var cell = cells[i],
icon = cell.querySelector(".timerIndicator");
icon && icon.parentNode.removeChild(icon), cell.removeAttribute("data-timerid")
}
}
function onSeriesTimerCancelled(id, itemsContainer) {
for (var cells = itemsContainer.querySelectorAll('.card[data-seriestimerid="' + id + '"]'), i = 0, length = cells.length; i < length; i++) {
var cell = cells[i],
icon = cell.querySelector(".timerIndicator");
icon && icon.parentNode.removeChild(icon), cell.removeAttribute("data-seriestimerid")
}
}
var refreshIndicatorLoaded, enableFocusTransfrom = (window.devicePixelRatio, !browser.slow && !browser.edge),
numRandomColors = 5;
return {
getCardsHtml: getCardsHtml,
buildCards: buildCards,
onUserDataChanged: onUserDataChanged,
onTimerCreated: onTimerCreated,
onTimerCancelled: onTimerCancelled,
onSeriesTimerCancelled: onSeriesTimerCancelled
}
});

59
src/bower_components/emby-webcomponents/cardbuilder/chaptercardbuilder.js vendored Normal file
View file

@ -0,0 +1,59 @@
define(["datetime", "imageLoader", "connectionManager", "layoutManager", "browser"], function(datetime, imageLoader, connectionManager, layoutManager, browser) {
"use strict";
function buildChapterCardsHtml(item, chapters, options) {
var className = "card itemAction chapterCard";
layoutManager.tv && (browser.animate || browser.edge) && (className += " card-focusscale");
var mediaStreams = ((item.MediaSources || [])[0] || {}).MediaStreams || [],
videoStream = mediaStreams.filter(function(i) {
return "Video" === i.Type
})[0] || {},
shape = options.backdropShape || "backdrop";
videoStream.Width && videoStream.Height && videoStream.Width / videoStream.Height <= 1.2 && (shape = options.squareShape || "square"), className += " " + shape + "Card", (options.block || options.rows) && (className += " block");
for (var html = "", itemsInRow = 0, apiClient = connectionManager.getApiClient(item.ServerId), i = 0, length = chapters.length; i < length; i++) {
options.rows && 0 === itemsInRow && (html += '<div class="cardColumn">');
html += buildChapterCard(item, apiClient, chapters[i], i, options, className, shape), itemsInRow++, options.rows && itemsInRow >= options.rows && (itemsInRow = 0, html += "</div>")
}
return html
}
function getImgUrl(item, chapter, index, maxWidth, apiClient) {
return chapter.ImageTag ? apiClient.getScaledImageUrl(item.Id, {
maxWidth: maxWidth,
tag: chapter.ImageTag,
type: "Chapter",
index: index
}) : null
}
function buildChapterCard(item, apiClient, chapter, index, options, className, shape) {
var imgUrl = getImgUrl(item, chapter, index, options.width || 400, apiClient),
cardImageContainerClass = "cardContent cardContent-shadow cardImageContainer chapterCardImageContainer";
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 + '"',
cardImageContainer = imgUrl ? '<div class="' + cardImageContainerClass + ' lazy" data-src="' + imgUrl + '">' : '<div class="' + cardImageContainerClass + '">';
imgUrl || (cardImageContainer += '<i class="md-icon cardImageIcon">local_movies</i>');
var nameHtml = "";
nameHtml += '<div class="cardText">' + chapter.Name + "</div>", nameHtml += '<div class="cardText">' + datetime.getDisplayRunningTime(chapter.StartPositionTicks) + "</div>";
var cardBoxCssClass = "cardBox",
cardScalableClass = "cardScalable";
if (layoutManager.tv) {
var enableFocusTransfrom = !browser.slow && !browser.edge;
cardScalableClass += " card-focuscontent", enableFocusTransfrom ? cardBoxCssClass += " cardBox-focustransform cardBox-withfocuscontent" : (cardBoxCssClass += " cardBox-withfocuscontent-large", cardScalableClass += " card-focuscontent-large")
}
return '<button type="button" class="' + className + '"' + dataAttributes + '><div class="' + cardBoxCssClass + '"><div class="' + cardScalableClass + '"><div class="cardPadder-' + shape + '"></div>' + cardImageContainer + '</div><div class="innerCardFooter">' + nameHtml + "</div></div></div></button>"
}
function buildChapterCards(item, chapters, options) {
if (options.parentContainer) {
if (!document.body.contains(options.parentContainer)) return;
if (!chapters.length) return void options.parentContainer.classList.add("hide");
options.parentContainer.classList.remove("hide")
}
var html = buildChapterCardsHtml(item, chapters, options);
options.itemsContainer.innerHTML = html, imageLoader.lazyChildren(options.itemsContainer)
}
return {
buildChapterCards: buildChapterCards
}
});

18
src/bower_components/emby-webcomponents/cardbuilder/peoplecardbuilder.js vendored Normal file
View file

@ -0,0 +1,18 @@
define(["cardBuilder"], function(cardBuilder) {
"use strict";
function buildPeopleCards(items, options) {
options = Object.assign(options || {}, {
cardLayout: !1,
centerText: !0,
showTitle: !0,
cardFooterAside: "none",
showPersonRoleOrType: !0,
cardCssClass: "personCard",
defaultCardImageIcon: "&#xE7FD;"
}), cardBuilder.buildCards(items, options)
}
return {
buildPeopleCards: buildPeopleCards
}
});

10
src/bower_components/emby-webcomponents/cardbuilder/roundcard.css vendored Normal file
View file

@ -0,0 +1,10 @@
.card-round:focus>.cardBox-focustransform {
-webkit-transform: scale(1.26, 1.26);
transform: scale(1.26, 1.26)
}
.cardImage-round,
.cardImageContainer-round {
-webkit-border-radius: 1000px;
border-radius: 1000px
}