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

Migrate var in CardBuilder to let and const

Browse source
This commit is contained in:
MrTimscampi 2020-03-19 22:33:41 +01:00
parent bbbef042bf
commit 55d1657b50
1 changed files with 155 additions and 163 deletions
Download patch file Download diff file Expand all files Collapse all files

318
src/components/cardbuilder/cardBuilder.js
View file

@ -1,3 +1,4 @@
/* eslint-disable indent */
/** /**
* Card builder module. * Card builder module.
* @module cardBuilder * @module cardBuilder
@ -19,7 +20,7 @@ import 'css!./card';
import 'paper-icon-button-light'; import 'paper-icon-button-light';
import 'programStyles'; import 'programStyles';
var enableFocusTransform = !browser.slow && !browser.edge; const enableFocusTransform = !browser.slow && !browser.edge;
/** /**
* Generate the HTML markup for cards of a set of items. * Generate the HTML markup for cards of a set of items.
@ -253,9 +254,9 @@ import 'programStyles';
* @returns {boolean} - Result of the check. * @returns {boolean} - Result of the check.
*/ */
function isResizable(windowWidth) { function isResizable(windowWidth) {
var screen = window.screen; const screen = window.screen;
if (screen) { if (screen) {
var screenWidth = screen.availWidth; const screenWidth = screen.availWidth;
if ((screenWidth - windowWidth) > 20) { if ((screenWidth - windowWidth) > 20) {
return true; return true;
@ -273,7 +274,7 @@ import 'programStyles';
* @returns {number} Width of the image for a card. * @returns {number} Width of the image for a card.
*/ */
function getImageWidth(shape, screenWidth, isOrientationLandscape) { function getImageWidth(shape, screenWidth, isOrientationLandscape) {
var imagesPerRow = getPostersPerRow(shape, screenWidth, isOrientationLandscape); const imagesPerRow = getPostersPerRow(shape, screenWidth, isOrientationLandscape);
return Math.round(screenWidth / imagesPerRow) * 2; return Math.round(screenWidth / imagesPerRow) * 2;
} }
@ -285,11 +286,11 @@ import 'programStyles';
function setCardData(items, options) { function setCardData(items, options) {
options.shape = options.shape || "auto"; options.shape = options.shape || "auto";
var primaryImageAspectRatio = imageLoader.getPrimaryImageAspectRatio(items); const primaryImageAspectRatio = imageLoader.getPrimaryImageAspectRatio(items);
if (options.shape === 'auto' || options.shape === 'autohome' || options.shape === 'autooverflow' || options.shape === 'autoVertical') { if (['auto', 'autohome', 'autooverflow', 'autoVertical'].includes(options.shape)) {
var requestedShape = options.shape; const requestedShape = options.shape;
options.shape = null; options.shape = null;
if (primaryImageAspectRatio) { if (primaryImageAspectRatio) {
@ -327,11 +328,11 @@ import 'programStyles';
} }
if (!options.width) { if (!options.width) {
var screenWidth = dom.getWindowSize().innerWidth; let screenWidth = dom.getWindowSize().innerWidth;
var screenHeight = dom.getWindowSize().innerHeight; const screenHeight = dom.getWindowSize().innerHeight;
if (isResizable(screenWidth)) { if (isResizable(screenWidth)) {
var roundScreenTo = 100; const roundScreenTo = 100;
screenWidth = Math.floor(screenWidth / roundScreenTo) * roundScreenTo; screenWidth = Math.floor(screenWidth / roundScreenTo) * roundScreenTo;
} }
@ -346,7 +347,7 @@ import 'programStyles';
* @returns {string} The internal HTML markup of the cards. * @returns {string} The internal HTML markup of the cards.
*/ */
function buildCardsHtmlInternal(items, options) { function buildCardsHtmlInternal(items, options) {
var isVertical; let isVertical = false;
if (options.shape === 'autoVertical') { if (options.shape === 'autoVertical') {
isVertical = true; isVertical = true;
@ -354,24 +355,21 @@ import 'programStyles';
setCardData(items, options); setCardData(items, options);
var html = ''; let html = '';
var itemsInRow = 0; let itemsInRow = 0;
var currentIndexValue; let currentIndexValue;
var hasOpenRow; let hasOpenRow;
var hasOpenSection; let hasOpenSection;
var sectionTitleTagName = options.sectionTitleTagName || 'div'; let sectionTitleTagName = options.sectionTitleTagName || 'div';
var apiClient; let apiClient;
var lastServerId; let lastServerId;
var i; for (let i = 0; i < items.length; i++) {
var length;
for (i = 0, length = items.length; i < length; i++) { let item = items[i];
let serverId = item.ServerId || options.serverId;
var item = items[i];
var serverId = item.ServerId || options.serverId;
if (serverId !== lastServerId) { if (serverId !== lastServerId) {
lastServerId = serverId; lastServerId = serverId;
@ -379,14 +377,14 @@ import 'programStyles';
} }
if (options.indexBy) { if (options.indexBy) {
var newIndexValue = ''; let newIndexValue = '';
if (options.indexBy === 'PremiereDate') { if (options.indexBy === 'PremiereDate') {
if (item.PremiereDate) { if (item.PremiereDate) {
try { try {
newIndexValue = datetime.toLocaleDateString(datetime.parseISO8601Date(item.PremiereDate), { weekday: 'long', month: 'long', day: 'numeric' }); newIndexValue = datetime.toLocaleDateString(datetime.parseISO8601Date(item.PremiereDate), { weekday: 'long', month: 'long', day: 'numeric' });
} catch (err) { } catch (error) {
console.error('error parsing timestamp for premiere date'); console.error('error parsing timestamp for premiere date', error);
} }
} }
} else if (options.indexBy === 'ProductionYear') { } else if (options.indexBy === 'ProductionYear') {
@ -461,15 +459,15 @@ import 'programStyles';
} }
} }
var cardFooterHtml = ''; /*let cardFooterHtml = '';
for (i = 0, length = (options.lines || 0); i < length; i++) { for (let i = 0; i < (options.lines || 0); i++) {
if (i === 0) { if (i === 0) {
cardFooterHtml += '<div class="cardText cardTextCentered cardText-first">&nbsp;</div>'; cardFooterHtml += '<div class="cardText cardTextCentered cardText-first">&nbsp;</div>';
} else { } else {
cardFooterHtml += '<div class="cardText cardTextCentered cardText-secondary">&nbsp;</div>'; cardFooterHtml += '<div class="cardText cardTextCentered cardText-secondary">&nbsp;</div>';
} }
} }*/
return html; return html;
} }
@ -513,16 +511,15 @@ import 'programStyles';
* @returns {CardImageUrl} Object representing the URL of the card's image. * @returns {CardImageUrl} Object representing the URL of the card's image.
*/ */
function getCardImageUrl(item, apiClient, options, shape) { function getCardImageUrl(item, apiClient, options, shape) {
var imageItem = item.ProgramInfo || item; item = item.ProgramInfo || item;
item = imageItem;
var width = options.width; const width = options.width;
var height = null; let height = null;
var primaryImageAspectRatio = item.PrimaryImageAspectRatio; const primaryImageAspectRatio = item.PrimaryImageAspectRatio;
var forceName = false; let forceName = false;
var imgUrl = null; let imgUrl = null;
var coverImage = false; let coverImage = false;
var uiAspect = null; let uiAspect = null;
if (options.preferThumb && item.ImageTags && item.ImageTags.Thumb) { if (options.preferThumb && item.ImageTags && item.ImageTags.Thumb) {
@ -745,16 +742,16 @@ import 'programStyles';
* @returns {number} Index of the color. * @returns {number} Index of the color.
*/ */
function getDefaultColorIndex(str) { function getDefaultColorIndex(str) {
var numRandomColors = 5; const numRandomColors = 5;
if (str) { if (str) {
var charIndex = Math.floor(str.length / 2); const charIndex = Math.floor(str.length / 2);
var character = String(str.substr(charIndex, 1).charCodeAt()); const character = String(str.substr(charIndex, 1).charCodeAt());
var sum = 0; let sum = 0;
for (var i = 0; i < character.length; i++) { for (let i = 0; i < character.length; i++) {
sum += parseInt(character.charAt(i)); sum += parseInt(character.charAt(i));
} }
var index = String(sum).substr(-1); let index = String(sum).substr(-1);
return (index % numRandomColors) + 1; return (index % numRandomColors) + 1;
} else { } else {
@ -774,16 +771,14 @@ import 'programStyles';
* @returns {string} HTML markup fo the card's text. * @returns {string} HTML markup fo the card's text.
*/ */
function getCardTextLines(lines, cssClass, forceLines, isOuterFooter, cardLayout, addRightMargin, maxLines) { function getCardTextLines(lines, cssClass, forceLines, isOuterFooter, cardLayout, addRightMargin, maxLines) {
var html = ''; let html = '';
var valid = 0; let valid = 0;
var i;
var length;
for (i = 0, length = lines.length; i < length; i++) { for (let i = 0; i < lines.length; i++) {
var currentCssClass = cssClass; let currentCssClass = cssClass;
var text = lines[i]; let text = lines[i];
if (valid > 0 && isOuterFooter) { if (valid > 0 && isOuterFooter) {
currentCssClass += ' cardText-secondary'; currentCssClass += ' cardText-secondary';
@ -809,9 +804,9 @@ import 'programStyles';
if (forceLines) { if (forceLines) {
length = maxLines || Math.min(lines.length, maxLines || lines.length); let linesLength = maxLines || Math.min(lines.length, maxLines || lines.length);
while (valid < length) { while (valid < linesLength) {
html += "<div class='" + cssClass + "'>&nbsp;</div>"; html += "<div class='" + cssClass + "'>&nbsp;</div>";
valid++; valid++;
} }
@ -837,11 +832,12 @@ import 'programStyles';
* @returns {string} The air time text for the item base on the given dates. * @returns {string} The air time text for the item base on the given dates.
*/ */
function getAirTimeText(item, showAirDateTime, showAirEndTime) { function getAirTimeText(item, showAirDateTime, showAirEndTime) {
var airTimeText = ''; let airTimeText = '';
if (item.StartDate) { if (item.StartDate) {
try { try {
var date = datetime.parseISO8601Date(item.StartDate); let date = datetime.parseISO8601Date(item.StartDate);
if (showAirDateTime) { if (showAirDateTime) {
airTimeText += datetime.toLocaleDateString(date, { weekday: 'short', month: 'short', day: 'numeric' }) + ' '; airTimeText += datetime.toLocaleDateString(date, { weekday: 'short', month: 'short', day: 'numeric' }) + ' ';
@ -877,13 +873,13 @@ import 'programStyles';
* @returns {string} HTML markup of the card's footer text. * @returns {string} HTML markup of the card's footer text.
*/ */
function getCardFooterText(item, apiClient, options, showTitle, forceName, overlayText, imgUrl, footerClass, progressHtml, logoUrl, isOuterFooter) { function getCardFooterText(item, apiClient, options, showTitle, forceName, overlayText, imgUrl, footerClass, progressHtml, logoUrl, isOuterFooter) {
var html = ''; let html = '';
if (logoUrl) { if (logoUrl) {
html += '<div class="lazy cardFooterLogo" data-src="' + logoUrl + '"></div>'; html += '<div class="lazy cardFooterLogo" data-src="' + logoUrl + '"></div>';
} }
var showOtherText = isOuterFooter ? !overlayText : overlayText; const showOtherText = isOuterFooter ? !overlayText : overlayText;
if (isOuterFooter && options.cardLayout && layoutManager.mobile) { if (isOuterFooter && options.cardLayout && layoutManager.mobile) {
@ -892,12 +888,12 @@ import 'programStyles';
} }
} }
var cssClass = options.centerText ? "cardText cardTextCentered" : "cardText"; const cssClass = options.centerText ? "cardText cardTextCentered" : "cardText";
var serverId = item.ServerId || options.serverId; const serverId = item.ServerId || options.serverId;
var lines = []; let lines = [];
var parentTitleUnderneath = item.Type === 'MusicAlbum' || item.Type === 'Audio' || item.Type === 'MusicVideo'; const parentTitleUnderneath = item.Type === 'MusicAlbum' || item.Type === 'Audio' || item.Type === 'MusicVideo';
var titleAdded; let titleAdded;
if (showOtherText) { if (showOtherText) {
if ((options.showParentTitle || options.showParentTitleOrTitle) && !parentTitleUnderneath) { if ((options.showParentTitle || options.showParentTitleOrTitle) && !parentTitleUnderneath) {
@ -926,7 +922,7 @@ import 'programStyles';
} }
} else { } else {
var parentTitle = item.SeriesName || item.Series || item.Album || item.AlbumArtist || ""; const parentTitle = item.SeriesName || item.Series || item.Album || item.AlbumArtist || "";
if (parentTitle || showTitle) { if (parentTitle || showTitle) {
lines.push(parentTitle); lines.push(parentTitle);
@ -936,14 +932,14 @@ import 'programStyles';
} }
} }
var showMediaTitle = (showTitle && !titleAdded) || (options.showParentTitleOrTitle && !lines.length); let showMediaTitle = (showTitle && !titleAdded) || (options.showParentTitleOrTitle && !lines.length);
if (!showMediaTitle && !titleAdded && (showTitle || forceName)) { if (!showMediaTitle && !titleAdded && (showTitle || forceName)) {
showMediaTitle = true; showMediaTitle = true;
} }
if (showMediaTitle) { if (showMediaTitle) {
var name = options.showTitle === 'auto' && !item.IsFolder && item.MediaType === 'Photo' ? '' : itemHelper.getDisplayName(item, { const name = options.showTitle === 'auto' && !item.IsFolder && item.MediaType === 'Photo' ? '' : itemHelper.getDisplayName(item, {
includeParentInfo: options.includeParentInfoInTitle includeParentInfo: options.includeParentInfoInTitle
}); });
@ -970,22 +966,18 @@ import 'programStyles';
} }
if (options.showItemCounts) { if (options.showItemCounts) {
lines.push(getItemCountsHtml(options, item));
var itemCountHtml = getItemCountsHtml(options, item);
lines.push(itemCountHtml);
} }
if (options.textLines) { if (options.textLines) {
var additionalLines = options.textLines(item); const additionalLines = options.textLines(item);
for (var i = 0, length = additionalLines.length; i < length; i++) { for (let i = 0; i < additionalLines.length; i++) {
lines.push(additionalLines[i]); lines.push(additionalLines[i]);
} }
} }
if (options.showSongCount) { if (options.showSongCount) {
let songLine = '';
var songLine = '';
if (item.SongCount) { if (item.SongCount) {
songLine = item.SongCount === 1 ? songLine = item.SongCount === 1 ?
@ -1023,7 +1015,7 @@ import 'programStyles';
} else { } else {
if (item.EndDate && item.ProductionYear) { if (item.EndDate && item.ProductionYear) {
var endYear = datetime.parseISO8601Date(item.EndDate).getFullYear(); const endYear = datetime.parseISO8601Date(item.EndDate).getFullYear();
lines.push(item.ProductionYear + ((endYear === item.ProductionYear) ? '' : (' - ' + endYear))); lines.push(item.ProductionYear + ((endYear === item.ProductionYear) ? '' : (' - ' + endYear)));
} else { } else {
lines.push(item.ProductionYear || ''); lines.push(item.ProductionYear || '');
@ -1118,7 +1110,7 @@ import 'programStyles';
lines = []; lines = [];
} }
var addRightTextMargin = isOuterFooter && options.cardLayout && !options.centerText && options.cardFooterAside !== 'none' && layoutManager.mobile; const addRightTextMargin = isOuterFooter && options.cardLayout && !options.centerText && options.cardFooterAside !== 'none' && layoutManager.mobile;
html += getCardTextLines(lines, cssClass, !options.overlayText, isOuterFooter, options.cardLayout, addRightTextMargin, options.lines); html += getCardTextLines(lines, cssClass, !options.overlayText, isOuterFooter, options.cardLayout, addRightTextMargin, options.lines);
@ -1155,7 +1147,7 @@ import 'programStyles';
return text; return text;
} }
var html = '<button ' + itemShortcuts.getShortcutAttributesHtml(item, serverId) + ' type="button" class="itemAction textActionButton" title="' + text + '" data-action="link">'; let html = '<button ' + itemShortcuts.getShortcutAttributesHtml(item, serverId) + ' type="button" class="itemAction textActionButton" title="' + text + '" data-action="link">';
html += text; html += text;
html += '</button>'; html += '</button>';
@ -1169,8 +1161,8 @@ import 'programStyles';
* @returns {string} HTML markup for the item count indicator. * @returns {string} HTML markup for the item count indicator.
*/ */
function getItemCountsHtml(options, item) { function getItemCountsHtml(options, item) {
var counts = []; let counts = [];
var childText; let childText;
if (item.Type === 'Playlist') { if (item.Type === 'Playlist') {
@ -1178,7 +1170,7 @@ import 'programStyles';
if (item.RunTimeTicks) { if (item.RunTimeTicks) {
var minutes = item.RunTimeTicks / 600000000; let minutes = item.RunTimeTicks / 600000000;
minutes = minutes || 1; minutes = minutes || 1;
@ -1257,7 +1249,7 @@ import 'programStyles';
return counts.join(', '); return counts.join(', ');
} }
var refreshIndicatorLoaded; let refreshIndicatorLoaded;
/** /**
* Imports the refresh indicator element. * Imports the refresh indicator element.
@ -1287,7 +1279,7 @@ import 'programStyles';
* @returns {string} HTML markup for the generated card. * @returns {string} HTML markup for the generated card.
*/ */
function buildCard(index, item, apiClient, options) { function buildCard(index, item, apiClient, options) {
var action = options.action || 'link'; let action = options.action || 'link';
if (action === 'play' && item.IsFolder) { if (action === 'play' && item.IsFolder) {
// If this hard-coding is ever removed make sure to test nested photo albums // If this hard-coding is ever removed make sure to test nested photo albums
@ -1296,13 +1288,13 @@ import 'programStyles';
action = 'play'; action = 'play';
} }
var shape = options.shape; let shape = options.shape;
if (shape === 'mixed') { if (shape === 'mixed') {
shape = null; shape = null;
var primaryImageAspectRatio = item.PrimaryImageAspectRatio; const primaryImageAspectRatio = item.PrimaryImageAspectRatio;
if (primaryImageAspectRatio) { if (primaryImageAspectRatio) {
@ -1320,7 +1312,7 @@ import 'programStyles';
// TODO move card creation code to Card component // TODO move card creation code to Card component
var className = 'card'; let className = 'card';
if (shape) { if (shape) {
className += ' ' + shape + 'Card'; className += ' ' + shape + 'Card';
@ -1346,16 +1338,16 @@ import 'programStyles';
} }
} }
var imgInfo = getCardImageUrl(item, apiClient, options, shape); const imgInfo = getCardImageUrl(item, apiClient, options, shape);
var imgUrl = imgInfo.imgUrl; const imgUrl = imgInfo.imgUrl;
var forceName = imgInfo.forceName; const forceName = imgInfo.forceName;
var showTitle = options.showTitle === 'auto' ? true : (options.showTitle || item.Type === 'PhotoAlbum' || item.Type === 'Folder'); const showTitle = options.showTitle === 'auto' ? true : (options.showTitle || item.Type === 'PhotoAlbum' || item.Type === 'Folder');
var overlayText = options.overlayText; const overlayText = options.overlayText;
var cardImageContainerClass = 'cardImageContainer'; let cardImageContainerClass = 'cardImageContainer';
var coveredImage = options.coverImage || imgInfo.coverImage; const coveredImage = options.coverImage || imgInfo.coverImage;
if (coveredImage) { if (coveredImage) {
cardImageContainerClass += ' coveredImage'; cardImageContainerClass += ' coveredImage';
@ -1369,17 +1361,17 @@ import 'programStyles';
cardImageContainerClass += ' ' + getDefaultBackgroundClass(item.Name); cardImageContainerClass += ' ' + getDefaultBackgroundClass(item.Name);
} }
var cardBoxClass = options.cardLayout ? 'cardBox visualCardBox' : 'cardBox'; let cardBoxClass = options.cardLayout ? 'cardBox visualCardBox' : 'cardBox';
var footerCssClass; let footerCssClass;
var progressHtml = indicators.getProgressBarHtml(item); let progressHtml = indicators.getProgressBarHtml(item);
var innerCardFooter = ''; let innerCardFooter = '';
var footerOverlayed = false; let footerOverlayed = false;
var logoUrl; let logoUrl;
var logoHeight = 40; const logoHeight = 40;
if (options.showChannelLogo && item.ChannelPrimaryImageTag) { if (options.showChannelLogo && item.ChannelPrimaryImageTag) {
logoUrl = apiClient.getScaledImageUrl(item.ChannelId, { logoUrl = apiClient.getScaledImageUrl(item.ChannelId, {
@ -1410,12 +1402,12 @@ import 'programStyles';
progressHtml = ''; progressHtml = '';
} }
var mediaSourceCount = item.MediaSourceCount || 1; const mediaSourceCount = item.MediaSourceCount || 1;
if (mediaSourceCount > 1) { if (mediaSourceCount > 1) {
innerCardFooter += '<div class="mediaSourceIndicator">' + mediaSourceCount + '</div>'; innerCardFooter += '<div class="mediaSourceIndicator">' + mediaSourceCount + '</div>';
} }
var outerCardFooter = ''; let outerCardFooter = '';
if (!overlayText && !footerOverlayed) { if (!overlayText && !footerOverlayed) {
footerCssClass = options.cardLayout ? 'cardFooter' : 'cardFooter cardFooter-transparent'; footerCssClass = options.cardLayout ? 'cardFooter' : 'cardFooter cardFooter-transparent';
@ -1434,15 +1426,15 @@ import 'programStyles';
cardBoxClass += ' cardBox-bottompadded'; cardBoxClass += ' cardBox-bottompadded';
} }
var overlayButtons = ''; let overlayButtons = '';
if (layoutManager.mobile) { if (layoutManager.mobile) {
var overlayPlayButton = options.overlayPlayButton; let overlayPlayButton = options.overlayPlayButton;
if (overlayPlayButton == null && !options.overlayMoreButton && !options.overlayInfoButton && !options.cardLayout) { if (overlayPlayButton == null && !options.overlayMoreButton && !options.overlayInfoButton && !options.cardLayout) {
overlayPlayButton = item.MediaType === 'Video'; overlayPlayButton = item.MediaType === 'Video';
} }
var btnCssClass = 'cardOverlayButton cardOverlayButton-br itemAction'; const btnCssClass = 'cardOverlayButton cardOverlayButton-br itemAction';
if (options.centerPlayButton) { if (options.centerPlayButton) {
overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayButton-centered" data-action="play"><i class="material-icons cardOverlayButtonIcon play_arrow"></i></button>'; overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayButton-centered" data-action="play"><i class="material-icons cardOverlayButtonIcon play_arrow"></i></button>';
@ -1462,12 +1454,12 @@ import 'programStyles';
} }
// cardBox can be it's own separate element if an outer footer is ever needed // cardBox can be it's own separate element if an outer footer is ever needed
var cardImageContainerOpen; let cardImageContainerOpen;
var cardImageContainerClose = ''; let cardImageContainerClose = '';
var cardBoxClose = ''; let cardBoxClose = '';
var cardScalableClose = ''; let cardScalableClose = '';
var cardContentClass = 'cardContent'; let cardContentClass = 'cardContent';
if (!options.cardLayout) { if (!options.cardLayout) {
cardContentClass += ' cardContent-shadow'; cardContentClass += ' cardContent-shadow';
} }
@ -1485,13 +1477,13 @@ import 'programStyles';
cardImageContainerClose = '</button>'; cardImageContainerClose = '</button>';
} }
var cardScalableClass = 'cardScalable'; let cardScalableClass = 'cardScalable';
cardImageContainerOpen = '<div class="' + cardBoxClass + '"><div class="' + cardScalableClass + '"><div class="cardPadder-' + shape + '"></div>' + cardImageContainerOpen; cardImageContainerOpen = '<div class="' + cardBoxClass + '"><div class="' + cardScalableClass + '"><div class="cardPadder-' + shape + '"></div>' + cardImageContainerOpen;
cardBoxClose = '</div>'; cardBoxClose = '</div>';
cardScalableClose = '</div>'; cardScalableClose = '</div>';
var indicatorsHtml = ''; let indicatorsHtml = '';
if (options.missingIndicator !== false) { if (options.missingIndicator !== false) {
indicatorsHtml += indicators.getMissingIndicator(item); indicatorsHtml += indicators.getMissingIndicator(item);
@ -1512,7 +1504,7 @@ import 'programStyles';
} }
if (item.Type === 'CollectionFolder' || item.CollectionType) { if (item.Type === 'CollectionFolder' || item.CollectionType) {
var refreshClass = item.RefreshProgress ? '' : ' class="hide"'; const refreshClass = item.RefreshProgress ? '' : ' class="hide"';
indicatorsHtml += '<div is="emby-itemrefreshindicator"' + refreshClass + ' data-progress="' + (item.RefreshProgress || 0) + '" data-status="' + item.RefreshStatus + '"></div>'; indicatorsHtml += '<div is="emby-itemrefreshindicator"' + refreshClass + ' data-progress="' + (item.RefreshProgress || 0) + '" data-status="' + item.RefreshStatus + '"></div>';
requireRefreshIndicator(); requireRefreshIndicator();
} }
@ -1525,16 +1517,16 @@ import 'programStyles';
cardImageContainerOpen += getDefaultText(item, options); cardImageContainerOpen += getDefaultText(item, options);
} }
var tagName = (layoutManager.tv) && !overlayButtons ? 'button' : 'div'; const tagName = (layoutManager.tv) && !overlayButtons ? 'button' : 'div';
var nameWithPrefix = (item.SortName || item.Name || ''); const nameWithPrefix = (item.SortName || item.Name || '');
var prefix = nameWithPrefix.substring(0, Math.min(3, nameWithPrefix.length)); let prefix = nameWithPrefix.substring(0, Math.min(3, nameWithPrefix.length));
if (prefix) { if (prefix) {
prefix = prefix.toUpperCase(); prefix = prefix.toUpperCase();
} }
var timerAttributes = ''; let timerAttributes = '';
if (item.TimerId) { if (item.TimerId) {
timerAttributes += ' data-timerid="' + item.TimerId + '"'; timerAttributes += ' data-timerid="' + item.TimerId + '"';
} }
@ -1542,7 +1534,7 @@ import 'programStyles';
timerAttributes += ' data-seriestimerid="' + item.SeriesTimerId + '"'; timerAttributes += ' data-seriestimerid="' + item.SeriesTimerId + '"';
} }
var actionAttribute; let actionAttribute;
if (tagName === 'button') { if (tagName === 'button') {
className += " itemAction"; className += " itemAction";
@ -1555,16 +1547,16 @@ import 'programStyles';
className += ' card-withuserdata'; className += ' card-withuserdata';
} }
var positionTicksData = item.UserData && item.UserData.PlaybackPositionTicks ? (' data-positionticks="' + item.UserData.PlaybackPositionTicks + '"') : ''; const positionTicksData = item.UserData && item.UserData.PlaybackPositionTicks ? (' data-positionticks="' + item.UserData.PlaybackPositionTicks + '"') : '';
var collectionIdData = options.collectionId ? (' data-collectionid="' + options.collectionId + '"') : ''; const collectionIdData = options.collectionId ? (' data-collectionid="' + options.collectionId + '"') : '';
var playlistIdData = options.playlistId ? (' data-playlistid="' + options.playlistId + '"') : ''; const playlistIdData = options.playlistId ? (' data-playlistid="' + options.playlistId + '"') : '';
var mediaTypeData = item.MediaType ? (' data-mediatype="' + item.MediaType + '"') : ''; const mediaTypeData = item.MediaType ? (' data-mediatype="' + item.MediaType + '"') : '';
var collectionTypeData = item.CollectionType ? (' data-collectiontype="' + item.CollectionType + '"') : ''; const collectionTypeData = item.CollectionType ? (' data-collectiontype="' + item.CollectionType + '"') : '';
var channelIdData = item.ChannelId ? (' data-channelid="' + item.ChannelId + '"') : ''; const channelIdData = item.ChannelId ? (' data-channelid="' + item.ChannelId + '"') : '';
var contextData = options.context ? (' data-context="' + options.context + '"') : ''; const contextData = options.context ? (' data-context="' + options.context + '"') : '';
var parentIdData = options.parentId ? (' data-parentid="' + options.parentId + '"') : ''; const parentIdData = options.parentId ? (' data-parentid="' + options.parentId + '"') : '';
var additionalCardContent = ''; let additionalCardContent = '';
if (layoutManager.desktop) { if (layoutManager.desktop) {
additionalCardContent += getHoverMenuHtml(item, action); additionalCardContent += getHoverMenuHtml(item, action);
@ -1580,11 +1572,11 @@ import 'programStyles';
* @returns {string} HTML markup of the card overlay. * @returns {string} HTML markup of the card overlay.
*/ */
function getHoverMenuHtml(item, action) { function getHoverMenuHtml(item, action) {
var html = ''; let html = '';
html += '<div class="cardOverlayContainer itemAction" data-action="' + action + '">'; html += '<div class="cardOverlayContainer itemAction" data-action="' + action + '">';
var btnCssClass = 'cardOverlayButton cardOverlayButton-hover itemAction paper-icon-button-light'; const btnCssClass = 'cardOverlayButton cardOverlayButton-hover itemAction paper-icon-button-light';
if (playbackManager.canPlay(item)) { if (playbackManager.canPlay(item)) {
html += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayFab-primary" data-action="resume"><i class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover play_arrow"></i></button>'; html += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayFab-primary" data-action="resume"><i class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover play_arrow"></i></button>';
@ -1592,7 +1584,7 @@ import 'programStyles';
html += '<div class="cardOverlayButton-br flex">'; html += '<div class="cardOverlayButton-br flex">';
var userData = item.UserData || {}; const userData = item.UserData || {};
if (itemHelper.canMarkPlayed(item)) { if (itemHelper.canMarkPlayed(item)) {
require(['emby-playstatebutton']); require(['emby-playstatebutton']);
@ -1601,7 +1593,7 @@ import 'programStyles';
if (itemHelper.canRate(item)) { if (itemHelper.canRate(item)) {
var likes = userData.Likes == null ? '' : userData.Likes; const likes = userData.Likes == null ? '' : userData.Likes;
require(['emby-ratingbutton']); 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="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover">favorite</i></button>'; 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="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover">favorite</i></button>';
@ -1623,7 +1615,7 @@ import 'programStyles';
*/ */
export function getDefaultText(item, options) { export function getDefaultText(item, options) {
if (item.CollectionType) { if (item.CollectionType) {
return '<i class="cardImageIcon material-icons ' + imageHelper.getLibraryIcon(item.CollectionType) + '"></i>' return '<i class="cardImageIcon material-icons ' + imageHelper.getLibraryIcon(item.CollectionType) + '"></i>';
} }
switch (item.Type) { switch (item.Type) {
@ -1646,7 +1638,7 @@ import 'programStyles';
return '<i class="cardImageIcon material-icons">' + options.defaultCardImageIcon + '</i>'; return '<i class="cardImageIcon material-icons">' + options.defaultCardImageIcon + '</i>';
} }
var defaultName = isUsingLiveTvNaming(item) ? item.Name : itemHelper.getDisplayName(item); const defaultName = isUsingLiveTvNaming(item) ? item.Name : itemHelper.getDisplayName(item);
return '<div class="cardText cardDefaultText">' + defaultName + '</div>'; return '<div class="cardText cardDefaultText">' + defaultName + '</div>';
} }
@ -1670,7 +1662,7 @@ import 'programStyles';
} }
} }
var html = buildCardsHtmlInternal(items, options); const html = buildCardsHtmlInternal(items, options);
if (html) { if (html) {
@ -1698,9 +1690,9 @@ import 'programStyles';
/** /**
* Ensures the indicators for a card exist and creates them if they don't. * Ensures the indicators for a card exist and creates them if they don't.
* @param {string} card - HTML Markup of the card. * @param {HTMLDivElement} card - HTML Markup of the card.
* @param {string} indicatorsElem - HTML markup of the indicators. * @param {HTMLDivElement} indicatorsElem - HTML markup of the indicators.
* @returns {string} - HTML markup of the indicators. * @returns {HTMLDivElement} - HTML markup of the indicators.
*/ */
function ensureIndicators(card, indicatorsElem) { function ensureIndicators(card, indicatorsElem) {
if (indicatorsElem) { if (indicatorsElem) {
@ -1711,7 +1703,7 @@ import 'programStyles';
if (!indicatorsElem) { if (!indicatorsElem) {
var cardImageContainer = card.querySelector('.cardImageContainer'); const cardImageContainer = card.querySelector('.cardImageContainer');
indicatorsElem = document.createElement('div'); indicatorsElem = document.createElement('div');
indicatorsElem.classList.add('cardIndicators'); indicatorsElem.classList.add('cardIndicators');
cardImageContainer.appendChild(indicatorsElem); cardImageContainer.appendChild(indicatorsElem);
@ -1722,16 +1714,16 @@ import 'programStyles';
/** /**
* Adds user data to the card such as progress indicators, played status, etc. * Adds user data to the card such as progress indicators, played status, etc.
* @param {string} card - HTML markup of the card. * @param {HTMLDivElement} card - HTML markup of the card.
* @param {Object} userData - User data to apply to the card. * @param {Object} userData - User data to apply to the card.
*/ */
function updateUserData(card, userData) { function updateUserData(card, userData) {
var type = card.getAttribute('data-type'); const type = card.getAttribute('data-type');
var enableCountIndicator = type === 'Series' || type === 'BoxSet' || type === 'Season'; const enableCountIndicator = type === 'Series' || type === 'BoxSet' || type === 'Season';
var indicatorsElem = null; let indicatorsElem = null;
var playedIndicator = null; let playedIndicator = null;
var countIndicator = null; let countIndicator = null;
var itemProgressBar = null; let itemProgressBar = null;
if (userData.Played) { if (userData.Played) {
@ -1774,7 +1766,7 @@ import 'programStyles';
} }
} }
var progressHtml = indicators.getProgressBarHtml({ const progressHtml = indicators.getProgressBarHtml({
Type: type, Type: type,
UserData: userData, UserData: userData,
MediaType: 'Video' MediaType: 'Video'
@ -1788,11 +1780,11 @@ import 'programStyles';
itemProgressBar = document.createElement('div'); itemProgressBar = document.createElement('div');
itemProgressBar.classList.add('itemProgressBar'); itemProgressBar.classList.add('itemProgressBar');
var innerCardFooter = card.querySelector('.innerCardFooter'); let innerCardFooter = card.querySelector('.innerCardFooter');
if (!innerCardFooter) { if (!innerCardFooter) {
innerCardFooter = document.createElement('div'); innerCardFooter = document.createElement('div');
innerCardFooter.classList.add('innerCardFooter'); innerCardFooter.classList.add('innerCardFooter');
var cardImageContainer = card.querySelector('.cardImageContainer'); const cardImageContainer = card.querySelector('.cardImageContainer');
cardImageContainer.appendChild(innerCardFooter); cardImageContainer.appendChild(innerCardFooter);
} }
innerCardFooter.appendChild(itemProgressBar); innerCardFooter.appendChild(itemProgressBar);
@ -1814,9 +1806,9 @@ import 'programStyles';
* @param {HTMLElement} scope - DOM Element to use as a scope when selecting cards. * @param {HTMLElement} scope - DOM Element to use as a scope when selecting cards.
*/ */
export function onUserDataChanged(userData, scope) { export function onUserDataChanged(userData, scope) {
var cards = (scope || document.body).querySelectorAll('.card-withuserdata[data-id="' + userData.ItemId + '"]'); const cards = (scope || document.body).querySelectorAll('.card-withuserdata[data-id="' + userData.ItemId + '"]');
for (var i = 0, length = cards.length; i < length; i++) { for (let i = 0, length = cards.length; i < length; i++) {
updateUserData(cards[i], userData); updateUserData(cards[i], userData);
} }
} }
@ -1828,13 +1820,13 @@ import 'programStyles';
* @param {HTMLElement} itemsContainer - DOM Element of the items container. * @param {HTMLElement} itemsContainer - DOM Element of the items container.
*/ */
export function onTimerCreated(programId, newTimerId, itemsContainer) { export function onTimerCreated(programId, newTimerId, itemsContainer) {
var cells = itemsContainer.querySelectorAll('.card[data-id="' + programId + '"]'); const cells = itemsContainer.querySelectorAll('.card[data-id="' + programId + '"]');
for (var i = 0, length = cells.length; i < length; i++) { for (let i = 0, length = cells.length; i < length; i++) {
var cell = cells[i]; let cell = cells[i];
var icon = cell.querySelector('.timerIndicator'); const icon = cell.querySelector('.timerIndicator');
if (!icon) { if (!icon) {
var indicatorsElem = ensureIndicators(cell); const indicatorsElem = ensureIndicators(cell);
indicatorsElem.insertAdjacentHTML('beforeend', '<i class="material-icons timerIndicator indicatorIcon fiber_manual_record"></i>'); indicatorsElem.insertAdjacentHTML('beforeend', '<i class="material-icons timerIndicator indicatorIcon fiber_manual_record"></i>');
} }
cell.setAttribute('data-timerid', newTimerId); cell.setAttribute('data-timerid', newTimerId);
@ -1847,11 +1839,11 @@ import 'programStyles';
* @param {HTMLElement} itemsContainer - DOM Element of the items container. * @param {HTMLElement} itemsContainer - DOM Element of the items container.
*/ */
export function onTimerCancelled(timerId, itemsContainer) { export function onTimerCancelled(timerId, itemsContainer) {
var cells = itemsContainer.querySelectorAll('.card[data-timerid="' + timerId + '"]'); const cells = itemsContainer.querySelectorAll('.card[data-timerid="' + timerId + '"]');
for (var i = 0, length = cells.length; i < length; i++) { for (let i = 0; i < cells.length; i++) {
var cell = cells[i]; let cell = cells[i];
var icon = cell.querySelector('.timerIndicator'); let icon = cell.querySelector('.timerIndicator');
if (icon) { if (icon) {
icon.parentNode.removeChild(icon); icon.parentNode.removeChild(icon);
} }
@ -1865,11 +1857,11 @@ import 'programStyles';
* @param {HTMLElement} itemsContainer - DOM Element of the items container. * @param {HTMLElement} itemsContainer - DOM Element of the items container.
*/ */
export function onSeriesTimerCancelled(canceledTimerId, itemsContainer) { export function onSeriesTimerCancelled(canceledTimerId, itemsContainer) {
var cells = itemsContainer.querySelectorAll('.card[data-seriestimerid="' + canceledTimerId + '"]'); const cells = itemsContainer.querySelectorAll('.card[data-seriestimerid="' + canceledTimerId + '"]');
for (var i = 0, length = cells.length; i < length; i++) { for (let i = 0; i < cells.length; i++) {
var cell = cells[i]; let cell = cells[i];
var icon = cell.querySelector('.timerIndicator'); let icon = cell.querySelector('.timerIndicator');
if (icon) { if (icon) {
icon.parentNode.removeChild(icon); icon.parentNode.removeChild(icon);
} }