';
+ html += '
';
}
- html += LibraryBrowser.getPosterViewHtml({
+ html += cardBuilder.getCardsHtml({
items: group.items,
showLocationTypeIndicator: false,
shape: getThumbShape(),
diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js
index 5150c2f2d5..43e63ba007 100644
--- a/dashboard-ui/scripts/librarybrowser.js
+++ b/dashboard-ui/scripts/librarybrowser.js
@@ -1,4 +1,4 @@
-define(['viewManager', 'appSettings', 'appStorage', 'apphost', 'datetime', 'itemHelper', 'mediaInfo', 'scroller', 'indicators', 'dom', 'scrollStyles'], function (viewManager, appSettings, appStorage, appHost, datetime, itemHelper, mediaInfo, scroller, indicators, dom) {
+define(['viewManager', 'appSettings', 'appStorage', 'apphost', 'datetime', 'itemHelper', 'mediaInfo', 'scroller', 'indicators', 'dom', 'imageLoader', 'scrollStyles'], function (viewManager, appSettings, appStorage, appHost, datetime, itemHelper, mediaInfo, scroller, indicators, dom, imageLoader) {
function fadeInRight(elem) {
@@ -39,52 +39,8 @@
var libraryBrowser = (function (window, document, screen) {
- // Regular Expressions for parsing tags and attributes
- var SURROGATE_PAIR_REGEXP = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g,
- // Match everything outside of normal chars and " (quote character)
- NON_ALPHANUMERIC_REGEXP = /([^\#-~| |!])/g;
-
- /**
- * Escapes all potentially dangerous characters, so that the
- * resulting string can be safely inserted into attribute or
- * element text.
- * @param value
- * @returns {string} escaped text
- */
- function htmlEncode(value) {
- return value.
- replace(/&/g, '&').
- replace(SURROGATE_PAIR_REGEXP, function (value) {
- var hi = value.charCodeAt(0);
- var low = value.charCodeAt(1);
- return '&#' + (((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000) + ';';
- }).
- replace(NON_ALPHANUMERIC_REGEXP, function (value) {
- return '&#' + value.charCodeAt(0) + ';';
- }).
- replace(//g, '>');
- }
-
var pageSizeKey = 'pagesize_v4';
- function getDesiredAspect(shape) {
-
- if (shape) {
- shape = shape.toLowerCase();
- if (shape.indexOf('portrait') != -1) {
- return (2 / 3);
- }
- if (shape.indexOf('backdrop') != -1) {
- return (16 / 9);
- }
- if (shape.indexOf('square') != -1) {
- return 1;
- }
- }
- return null;
- }
-
var libraryBrowser = {
getDefaultPageSize: function (key, defaultValue) {
@@ -435,110 +391,6 @@
});
},
- getItemCountsHtml: function (options, item) {
-
- var counts = [];
-
- var childText;
-
- if (item.Type == 'Playlist') {
-
- childText = '';
-
- if (item.CumulativeRunTimeTicks) {
-
- var minutes = item.CumulativeRunTimeTicks / 600000000;
-
- minutes = minutes || 1;
-
- childText += Globalize.translate('ValueMinutes', Math.round(minutes));
-
- } else {
- childText += Globalize.translate('ValueMinutes', 0);
- }
-
- counts.push(childText);
-
- }
- else if (options.context == "movies") {
-
- if (item.MovieCount) {
-
- childText = item.MovieCount == 1 ?
- Globalize.translate('ValueOneMovie') :
- Globalize.translate('ValueMovieCount', item.MovieCount);
-
- counts.push(childText);
- }
- if (item.TrailerCount) {
-
- childText = item.TrailerCount == 1 ?
- Globalize.translate('ValueOneTrailer') :
- Globalize.translate('ValueTrailerCount', item.TrailerCount);
-
- counts.push(childText);
- }
-
- } else if (options.context == "tv") {
-
- if (item.SeriesCount) {
-
- childText = item.SeriesCount == 1 ?
- Globalize.translate('ValueOneSeries') :
- Globalize.translate('ValueSeriesCount', item.SeriesCount);
-
- counts.push(childText);
- }
- if (item.EpisodeCount) {
-
- childText = item.EpisodeCount == 1 ?
- Globalize.translate('ValueOneEpisode') :
- Globalize.translate('ValueEpisodeCount', item.EpisodeCount);
-
- counts.push(childText);
- }
-
- } else if (options.context == "games") {
-
- if (item.GameCount) {
-
- childText = item.GameCount == 1 ?
- Globalize.translate('ValueOneGame') :
- Globalize.translate('ValueGameCount', item.GameCount);
-
- counts.push(childText);
- }
- } else if (options.context == "music") {
-
- if (item.AlbumCount) {
-
- childText = item.AlbumCount == 1 ?
- Globalize.translate('ValueOneAlbum') :
- Globalize.translate('ValueAlbumCount', item.AlbumCount);
-
- counts.push(childText);
- }
- if (item.SongCount) {
-
- childText = item.SongCount == 1 ?
- Globalize.translate('ValueOneSong') :
- Globalize.translate('ValueSongCount', item.SongCount);
-
- counts.push(childText);
- }
- if (item.MusicVideoCount) {
-
- childText = item.MusicVideoCount == 1 ?
- Globalize.translate('ValueOneMusicVideo') :
- Globalize.translate('ValueMusicVideoCount', item.MusicVideoCount);
-
- counts.push(childText);
- }
- }
-
- return counts.join(' • ');
- },
-
getArtistLinksHtml: function (artists, cssClass) {
var html = [];
@@ -736,737 +588,6 @@
},
- getUserDataCssClass: function (key) {
-
- if (!key) return '';
-
- return 'libraryItemUserData' + key.replace(new RegExp(' ', 'g'), '');
- },
-
- getItemDataAttributesList: function (item, options, index) {
-
- var atts = [];
-
- atts.push({
- name: 'serverid',
- value: item.ServerId || options.serverId
- });
-
- atts.push({
- name: 'id',
- value: item.Id
- });
-
- if (options.context) {
- atts.push({
- name: 'context',
- value: options.context || ''
- });
- }
-
- if (item.IsFolder) {
- atts.push({
- name: 'isfolder',
- value: item.IsFolder
- });
- }
-
- atts.push({
- name: 'type',
- value: item.Type
- });
-
- if (item.MediaType) {
- atts.push({
- name: 'mediatype',
- value: item.MediaType || ''
- });
- }
-
- if (item.UserData && item.UserData.PlaybackPositionTicks) {
- atts.push({
- name: 'positionticks',
- value: (item.UserData.PlaybackPositionTicks || 0)
- });
- }
-
- atts.push({
- name: 'index',
- value: index
- });
-
- if (item.ChannelId) {
- atts.push({
- name: 'channelid',
- value: item.ChannelId
- });
- }
-
- if (options.collectionId) {
- atts.push({
- name: 'collectionid',
- value: options.collectionId
- });
- }
-
- return atts;
- },
-
- getItemDataAttributes: function (item, options, index) {
-
- var atts = LibraryBrowser.getItemDataAttributesList(item, options, index).map(function (i) {
- return 'data-' + i.name + '="' + i.value + '"';
- });
-
- var html = atts.join(' ');
-
- if (html) {
- html = ' ' + html;
- }
-
- return html;
- },
-
- shapes: ['square', 'portrait', 'banner', 'smallBackdrop', 'backdrop', 'overflowBackdrop', 'overflowPortrait', 'overflowSquare'],
-
- getPostersPerRow: function (screenWidth) {
-
- function getValue(shape) {
-
- switch (shape) {
-
- case 'portrait':
- if (screenWidth >= 2200) return 10;
- if (screenWidth >= 2100) return 9;
- if (screenWidth >= 1600) return 8;
- if (screenWidth >= 1400) return 7;
- if (screenWidth >= 1200) return 6;
- if (screenWidth >= 800) return 5;
- if (screenWidth >= 640) return 4;
- return 3;
- case 'square':
- if (screenWidth >= 2100) return 9;
- if (screenWidth >= 1800) return 8;
- if (screenWidth >= 1400) return 7;
- if (screenWidth >= 1200) return 6;
- if (screenWidth >= 900) return 5;
- if (screenWidth >= 700) return 4;
- if (screenWidth >= 500) return 3;
- return 2;
- case 'banner':
- if (screenWidth >= 2200) return 4;
- if (screenWidth >= 1200) return 3;
- if (screenWidth >= 800) return 2;
- return 1;
- case 'backdrop':
- if (screenWidth >= 2500) return 6;
- if (screenWidth >= 2100) return 5;
- if (screenWidth >= 1200) return 4;
- if (screenWidth >= 770) return 3;
- if (screenWidth >= 420) return 2;
- return 1;
- case 'smallBackdrop':
- if (screenWidth >= 1440) return 8;
- if (screenWidth >= 1100) return 6;
- if (screenWidth >= 800) return 5;
- if (screenWidth >= 600) return 4;
- if (screenWidth >= 540) return 3;
- if (screenWidth >= 420) return 2;
- return 1;
- case 'overflowPortrait':
- if (screenWidth >= 1000) return 100 / 23;
- if (screenWidth >= 640) return 100 / 36;
- return 2.5;
- case 'overflowSquare':
- if (screenWidth >= 1000) return 100 / 22;
- if (screenWidth >= 640) return 100 / 30;
- return 100 / 42;
- case 'overflowBackdrop':
- if (screenWidth >= 1000) return 100 / 40;
- if (screenWidth >= 640) return 100 / 60;
- return 100 / 84;
- default:
- return 4;
- }
- }
-
- var info = {};
-
- for (var i = 0, length = LibraryBrowser.shapes.length; i < length; i++) {
- var currentShape = LibraryBrowser.shapes[i];
- info[currentShape] = getValue(currentShape);
- }
- return info;
- },
-
- posterSizes: [],
-
- getPosterViewInfo: function () {
-
- var screenWidth = window.innerWidth;
-
- if (!browserInfo.mobile) {
- var roundScreenTo = 100;
- screenWidth = Math.ceil(screenWidth / roundScreenTo) * roundScreenTo;
- }
-
- var cachedResults = LibraryBrowser.posterSizes;
-
- for (var i = 0, length = cachedResults.length; i < length; i++) {
-
- if (cachedResults[i].screenWidth == screenWidth) {
- return cachedResults[i];
- }
- }
-
- var result = LibraryBrowser.getPosterViewInfoInternal(screenWidth);
- result.screenWidth = screenWidth;
-
- cachedResults.push(result);
-
- return result;
- },
-
- getPosterViewInfoInternal: function (screenWidth) {
-
- var imagesPerRow = LibraryBrowser.getPostersPerRow(screenWidth);
-
- var result = {};
- result.screenWidth = screenWidth;
-
- for (var i = 0, length = LibraryBrowser.shapes.length; i < length; i++) {
- var currentShape = LibraryBrowser.shapes[i];
-
- var shapeWidth = screenWidth / imagesPerRow[currentShape];
-
- result[currentShape + 'Width'] = Math.round(shapeWidth);
- }
-
- return result;
- },
-
- setPosterViewData: function (options) {
-
- var items = options.items;
-
- options.shape = options.shape || "portrait";
-
- var primaryImageAspectRatio = LibraryBrowser.getAveragePrimaryImageAspectRatio(items);
- var isThumbAspectRatio = primaryImageAspectRatio && Math.abs(primaryImageAspectRatio - 1.777777778) < .3;
- var isSquareAspectRatio = primaryImageAspectRatio && Math.abs(primaryImageAspectRatio - 1) < .33 ||
- primaryImageAspectRatio && Math.abs(primaryImageAspectRatio - 1.3333334) < .01;
-
- if (options.shape == 'auto' || options.shape == 'autohome' || options.shape == 'autooverflow') {
-
- if (isThumbAspectRatio) {
- options.shape = options.shape == 'autooverflow' ? 'overflowBackdrop' : 'backdrop';
- } else if (isSquareAspectRatio) {
- options.coverImage = true;
- options.shape = options.shape == 'autooverflow' ? 'overflowSquare' : 'square';
- } else if (primaryImageAspectRatio && primaryImageAspectRatio > 1.9) {
- options.shape = 'banner';
- options.coverImage = true;
- } else if (primaryImageAspectRatio && Math.abs(primaryImageAspectRatio - 0.6666667) < .2) {
- options.shape = options.shape == 'autooverflow' ? 'overflowPortrait' : 'portrait';
- } else {
- options.shape = options.defaultShape || (options.shape == 'autooverflow' ? 'overflowSquare' : 'square');
- }
- }
-
- var posterInfo = LibraryBrowser.getPosterViewInfo();
-
- var thumbWidth = posterInfo.backdropWidth;
- var posterWidth = posterInfo.portraitWidth;
- var squareSize = posterInfo.squareWidth;
- var bannerWidth = posterInfo.bannerWidth;
-
- if (isThumbAspectRatio) {
- posterWidth = thumbWidth;
- }
- else if (isSquareAspectRatio) {
- posterWidth = squareSize;
- }
-
- if (options.shape == 'overflowBackdrop') {
- thumbWidth = posterInfo.overflowBackdropWidth;
- }
- else if (options.shape == 'overflowPortrait') {
- posterWidth = posterInfo.overflowPortraitWidth;
- }
- else if (options.shape == 'overflowSquare') {
- squareSize = posterInfo.overflowSquareWidth;
- }
- else if (options.shape == 'smallBackdrop') {
- thumbWidth = posterInfo.smallBackdropWidth;
- }
- else if (options.shape == 'detailPagePortrait') {
- posterWidth = 200;
- }
- else if (options.shape == 'detailPageSquare') {
- posterWidth = 240;
- squareSize = 240;
- }
- else if (options.shape == 'detailPage169') {
- posterWidth = 320;
- thumbWidth = 320;
- }
-
- options.uiAspect = getDesiredAspect(options.shape);
- options.primaryImageAspectRatio = primaryImageAspectRatio;
- options.posterWidth = posterWidth;
- options.thumbWidth = thumbWidth;
- options.bannerWidth = bannerWidth;
- options.squareSize = squareSize;
- },
-
- getPosterViewHtml: function (options) {
-
- LibraryBrowser.setPosterViewData(options);
-
- var items = options.items;
- var currentIndexValue;
-
- options.shape = options.shape || "portrait";
-
- var html = "";
-
- var primaryImageAspectRatio;
- var thumbWidth = options.thumbWidth;
- var posterWidth = options.posterWidth;
- var squareSize = options.squareSize;
- var bannerWidth = options.bannerWidth;
-
- var dateText;
- var uiAspect = options.uiAspect;
-
- for (var i = 0, length = items.length; i < length; i++) {
-
- var item = items[i];
-
- dateText = null;
-
- primaryImageAspectRatio = LibraryBrowser.getAveragePrimaryImageAspectRatio([item]);
-
- if (options.showStartDateIndex) {
-
- if (item.StartDate) {
- try {
-
- dateText = LibraryBrowser.getFutureDateText(datetime.parseISO8601Date(item.StartDate, true), true);
-
- } catch (err) {
- }
- }
-
- var newIndexValue = dateText || Globalize.translate('HeaderUnknownDate');
-
- if (newIndexValue != currentIndexValue) {
-
- html += '';
- currentIndexValue = newIndexValue;
- }
- } else if (options.timeline) {
- var year = item.ProductionYear || Globalize.translate('HeaderUnknownYear');
-
- if (year != currentIndexValue) {
-
- html += '';
- currentIndexValue = year;
- }
- }
-
- html += LibraryBrowser.getPosterViewItemHtml(item, i, options, primaryImageAspectRatio, thumbWidth, posterWidth, squareSize, bannerWidth, uiAspect);
- }
-
- return html;
- },
-
- getPosterViewItemHtml: function (item, index, options, primaryImageAspectRatio, thumbWidth, posterWidth, squareSize, bannerWidth, uiAspect) {
-
- var html = '';
- var imgUrl = null;
- var icon;
- var width = null;
- var height = null;
-
- var forceName = false;
-
- var enableImageEnhancers = options.enableImageEnhancers !== false;
-
- var cssClass = "card";
-
- if (options.fullWidthOnMobile) {
- cssClass += " fullWidthCardOnMobile";
- }
-
- var showTitle = options.showTitle == 'auto' ? true : options.showTitle;
-
- // Force the title for these
- if (item.Type == 'PhotoAlbum' || item.Type == 'Folder') {
- showTitle = true;
- }
- var coverImage = options.coverImage;
- var imageItem = item.Type == 'Timer' ? (item.ProgramInfo || item) : item;
-
- if (options.autoThumb && imageItem.ImageTags && imageItem.ImageTags.Primary && imageItem.PrimaryImageAspectRatio && imageItem.PrimaryImageAspectRatio >= 1.34) {
-
- width = posterWidth;
- height = primaryImageAspectRatio ? Math.round(posterWidth / primaryImageAspectRatio) : null;
-
- imgUrl = ApiClient.getScaledImageUrl(imageItem.Id, {
- type: "Primary",
- maxHeight: height,
- maxWidth: width,
- tag: imageItem.ImageTags.Primary,
- enableImageEnhancers: enableImageEnhancers
- });
-
- if (primaryImageAspectRatio) {
- if (uiAspect) {
- if (Math.abs(primaryImageAspectRatio - uiAspect) <= .2) {
- coverImage = true;
- }
- }
- }
-
- } else if (options.autoThumb && imageItem.ImageTags && imageItem.ImageTags.Thumb) {
-
- imgUrl = ApiClient.getScaledImageUrl(imageItem.Id, {
- type: "Thumb",
- maxWidth: thumbWidth,
- tag: imageItem.ImageTags.Thumb,
- enableImageEnhancers: enableImageEnhancers
- });
-
- } else if (options.preferBackdrop && imageItem.BackdropImageTags && imageItem.BackdropImageTags.length) {
-
- imgUrl = ApiClient.getScaledImageUrl(imageItem.Id, {
- type: "Backdrop",
- maxWidth: thumbWidth,
- tag: imageItem.BackdropImageTags[0],
- enableImageEnhancers: enableImageEnhancers
- });
-
- } else if (options.preferThumb && imageItem.ImageTags && imageItem.ImageTags.Thumb) {
-
- imgUrl = ApiClient.getScaledImageUrl(imageItem.Id, {
- type: "Thumb",
- maxWidth: thumbWidth,
- tag: imageItem.ImageTags.Thumb,
- enableImageEnhancers: enableImageEnhancers
- });
-
- } else if (options.preferBanner && imageItem.ImageTags && imageItem.ImageTags.Banner) {
-
- imgUrl = ApiClient.getScaledImageUrl(imageItem.Id, {
- type: "Banner",
- maxWidth: bannerWidth,
- tag: imageItem.ImageTags.Banner,
- enableImageEnhancers: enableImageEnhancers
- });
-
- } else if (options.preferThumb && imageItem.SeriesThumbImageTag && options.inheritThumb !== false) {
-
- imgUrl = ApiClient.getScaledImageUrl(imageItem.SeriesId, {
- type: "Thumb",
- maxWidth: thumbWidth,
- tag: imageItem.SeriesThumbImageTag,
- enableImageEnhancers: enableImageEnhancers
- });
-
- } else if (options.preferThumb && imageItem.ParentThumbItemId && options.inheritThumb !== false) {
-
- imgUrl = ApiClient.getScaledImageUrl(imageItem.ParentThumbItemId, {
- type: "Thumb",
- maxWidth: thumbWidth,
- enableImageEnhancers: enableImageEnhancers,
- tag: imageItem.ParentThumbImageTag
- });
-
- } else if (options.preferThumb && imageItem.BackdropImageTags && imageItem.BackdropImageTags.length) {
-
- imgUrl = ApiClient.getScaledImageUrl(imageItem.Id, {
- type: "Backdrop",
- maxWidth: thumbWidth,
- tag: imageItem.BackdropImageTags[0],
- enableImageEnhancers: enableImageEnhancers
- });
-
- forceName = true;
-
- } else if (imageItem.ImageTags && imageItem.ImageTags.Primary) {
-
- width = posterWidth;
- height = primaryImageAspectRatio ? Math.round(posterWidth / primaryImageAspectRatio) : null;
-
- imgUrl = ApiClient.getScaledImageUrl(imageItem.Id, {
- type: "Primary",
- maxHeight: height,
- maxWidth: width,
- tag: imageItem.ImageTags.Primary,
- enableImageEnhancers: enableImageEnhancers
- });
-
- if (primaryImageAspectRatio) {
- if (uiAspect) {
- if (Math.abs(primaryImageAspectRatio - uiAspect) <= .2) {
- coverImage = true;
- }
- }
- }
- }
- else if (imageItem.ParentPrimaryImageTag) {
-
- imgUrl = ApiClient.getScaledImageUrl(imageItem.ParentPrimaryImageItemId, {
- type: "Primary",
- maxWidth: posterWidth,
- tag: item.ParentPrimaryImageTag,
- enableImageEnhancers: enableImageEnhancers
- });
- }
- else if (imageItem.AlbumId && imageItem.AlbumPrimaryImageTag) {
-
- height = squareSize;
- width = primaryImageAspectRatio ? Math.round(height * primaryImageAspectRatio) : null;
-
- imgUrl = ApiClient.getScaledImageUrl(imageItem.AlbumId, {
- type: "Primary",
- maxHeight: height,
- maxWidth: width,
- tag: imageItem.AlbumPrimaryImageTag,
- enableImageEnhancers: enableImageEnhancers
- });
-
- if (primaryImageAspectRatio) {
- if (uiAspect) {
- if (Math.abs(primaryImageAspectRatio - uiAspect) <= .2) {
- coverImage = true;
- }
- }
- }
- }
- else if (imageItem.Type == 'Season' && imageItem.ImageTags && imageItem.ImageTags.Thumb) {
-
- imgUrl = ApiClient.getScaledImageUrl(imageItem.Id, {
- type: "Thumb",
- maxWidth: thumbWidth,
- tag: imageItem.ImageTags.Thumb,
- enableImageEnhancers: enableImageEnhancers
- });
-
- }
- else if (imageItem.BackdropImageTags && imageItem.BackdropImageTags.length) {
-
- imgUrl = ApiClient.getScaledImageUrl(imageItem.Id, {
- type: "Backdrop",
- maxWidth: thumbWidth,
- tag: imageItem.BackdropImageTags[0],
- enableImageEnhancers: enableImageEnhancers
- });
-
- } else if (imageItem.ImageTags && imageItem.ImageTags.Thumb) {
-
- imgUrl = ApiClient.getScaledImageUrl(imageItem.Id, {
- type: "Thumb",
- maxWidth: thumbWidth,
- tag: imageItem.ImageTags.Thumb,
- enableImageEnhancers: enableImageEnhancers
- });
-
- } else if (imageItem.ParentThumbItemId) {
-
- imgUrl = ApiClient.getScaledImageUrl(imageItem.ParentThumbItemId, {
- type: "Thumb",
- maxWidth: thumbWidth,
- enableImageEnhancers: enableImageEnhancers,
- tag: imageItem.ParentThumbImageTag
- });
-
- } else if (item.MediaType == "Audio" || item.Type == "MusicAlbum" || item.Type == "MusicArtist") {
-
- if (item.Name && showTitle) {
- icon = 'library_music';
- }
- cssClass += " defaultBackground";
-
- } else if (item.Type == "Recording" || item.Type == "Program" || item.Type == "TvChannel") {
-
- if (item.Name && showTitle) {
- icon = 'folder_open';
- }
-
- cssClass += " defaultBackground";
- } else if (item.MediaType == "Video" || item.Type == "Season" || item.Type == "Series") {
-
- if (item.Name && showTitle) {
- icon = 'videocam';
- }
- cssClass += " defaultBackground";
- } else if (item.Type == "Person") {
-
- if (item.Name && showTitle) {
- icon = 'person';
- }
- cssClass += " defaultBackground";
- } else {
- if (item.Name && showTitle) {
- icon = 'folder_open';
- }
- cssClass += " defaultBackground";
- }
-
- icon = item.icon || icon;
- cssClass += ' ' + options.shape + 'Card';
-
- var mediaSourceCount = item.MediaSourceCount || 1;
-
- var href = options.linkItem === false ? '#' : LibraryBrowser.getHref(item, options.context);
-
- if (options.showChildCountIndicator && item.ChildCount && options.showLatestItemsPopup !== false) {
- cssClass += ' groupedCard';
- }
-
- if ((showTitle || options.showItemCounts) && !options.overlayText) {
- cssClass += ' bottomPaddedCard';
- }
-
- var dataAttributes = LibraryBrowser.getItemDataAttributes(item, options, index);
-
- var defaultAction = options.defaultAction;
- if (defaultAction == 'play' || defaultAction == 'playallfromhere') {
- if (item.PlayAccess != 'Full') {
- defaultAction = null;
- }
- }
- var defaultActionAttribute = defaultAction ? (' data-action="' + defaultAction + '"') : '';
-
- // card
- html += '
';
-
- var style = "";
-
- if (imgUrl && !options.lazy) {
- style += 'background-image:url(\'' + imgUrl + '\');';
- }
-
- var imageCssClass = 'cardImage';
-
- if (icon) {
- imageCssClass += " iconCardImage";
- }
-
- if (coverImage) {
- imageCssClass += " coveredCardImage";
- if (item.MediaType == 'Photo' || item.Type == 'PhotoAlbum' || item.Type == 'Folder' || item.Type == 'Program' || item.Type == 'Recording') {
- imageCssClass += " noScale";
- }
- }
- if (options.centerImage) {
- imageCssClass += " centeredCardImage";
- }
-
- var dataSrc = "";
-
- if (options.lazy && imgUrl) {
- imageCssClass += " lazy";
- dataSrc = ' data-src="' + imgUrl + '"';
- }
-
- var cardboxCssClass = 'cardBox';
-
- if (options.cardLayout) {
- cardboxCssClass += ' visualCardBox';
- }
- html += '';
- html += '
';
-
- html += '
';
-
- var anchorCssClass = "cardContent";
-
- anchorCssClass += ' mediaItem';
-
- if (options.defaultAction) {
- anchorCssClass += ' itemAction';
- }
-
- var transition = options.transition === false || !AppInfo.enableSectionTransitions ? '' : ' data-transition="slide"';
- var onclick = item.onclick ? ' onclick="' + item.onclick + '"' : '';
- html += '
';
- html += '';
- if (icon) {
- html += '' + icon + ' ';
- }
- html += '
';
-
- if (item.LocationType == "Virtual" || item.LocationType == "Offline") {
- if (options.showLocationTypeIndicator !== false) {
- html += LibraryBrowser.getOfflineIndicatorHtml(item);
- }
- } else if (options.showUnplayedIndicator !== false) {
- html += indicators.getPlayedIndicatorHtml(item);
- } else if (options.showChildCountIndicator) {
- html += LibraryBrowser.getGroupCountIndicator(item);
- }
-
- if (item.SeriesTimerId) {
- html += 'fiber_smart_record ';
- }
-
- html += LibraryBrowser.getSyncIndicator(item);
-
- if (mediaSourceCount > 1) {
- html += '' + mediaSourceCount + '
';
- }
-
- var progressHtml = options.showProgress === false || item.IsFolder ? '' : LibraryBrowser.getItemProgressBarHtml((item.Type == 'Recording' ? item : item.UserData || {}));
-
- var footerOverlayed = false;
-
- if (options.overlayText || (forceName && !showTitle)) {
-
- var footerCssClass = progressHtml ? 'cardFooter fullCardFooter' : 'cardFooter';
-
- html += LibraryBrowser.getCardFooterText(item, options, showTitle, imgUrl, forceName, footerCssClass, progressHtml, false);
- footerOverlayed = true;
- }
- else if (progressHtml) {
- html += '";
-
- progressHtml = '';
- }
-
- // cardContent
- html += '';
-
- if (options.overlayPlayButton && !item.IsPlaceHolder && (item.LocationType != 'Virtual' || !item.MediaType || item.Type == 'Program') && item.Type != 'Person' && item.PlayAccess == 'Full') {
- html += 'play_arrow
';
- }
- if (options.overlayMoreButton) {
- html += '' + AppInfo.moreIcon.replace('-', '_') + '
';
- }
-
- // cardScalable
- html += ' ';
-
- if (!options.overlayText && !footerOverlayed) {
- html += LibraryBrowser.getCardFooterText(item, options, showTitle, imgUrl, forceName, 'cardFooter outerCardFooter', progressHtml, true);
- }
-
- // cardBox
- html += '
";
-
- return html;
- },
-
getTextActionButton: function (item, text) {
if (!text) {
@@ -1480,195 +601,6 @@
return html;
},
- getCardFooterText: function (item, options, showTitle, imgUrl, forceName, footerClass, progressHtml, isOuterFooter) {
-
- var html = '';
-
- if (options.cardLayout) {
- html += '
';
- html += '' + AppInfo.moreIcon.replace('-', '_') + '
";
- }
-
- var name = options.showTitle == 'auto' && !item.IsFolder && item.MediaType == 'Photo' ? '' : itemHelper.getDisplayName(item);
-
- if (!imgUrl && !showTitle) {
- html += "
";
- html += htmlEncode(name);
- html += "
";
- }
-
- var cssClass = options.centerText ? "cardText cardTextCentered" : "cardText";
-
- var lines = [];
-
- var parentTitleUnderneath = item.Type == 'MusicAlbum' || item.Type == 'Audio' || item.Type == 'MusicVideo';
- if (options.showParentTitle && !parentTitleUnderneath) {
-
- if (isOuterFooter && item.Type == 'Episode' && item.SeriesName && item.SeriesId) {
-
- lines.push(LibraryBrowser.getTextActionButton({
- Id: item.SeriesId,
- Name: item.SeriesName,
- Type: 'Series',
- IsFolder: true
- }));
- }
- else {
-
- lines.push(item.EpisodeTitle ? item.Name : (item.SeriesName || item.Album || item.AlbumArtist || item.GameSystem || ""));
- }
- }
-
- if (showTitle || forceName) {
-
- lines.push(htmlEncode(name));
- }
-
- if (options.showParentTitle && parentTitleUnderneath) {
-
- if (isOuterFooter && item.AlbumArtists && item.AlbumArtists.length) {
- item.AlbumArtists[0].Type = 'MusicArtist';
- item.AlbumArtists[0].IsFolder = true;
- lines.push(LibraryBrowser.getTextActionButton(item.AlbumArtists[0]));
- } else {
- lines.push(item.EpisodeTitle ? item.Name : (item.SeriesName || item.Album || item.AlbumArtist || item.GameSystem || ""));
- }
- }
-
- if (options.showItemCounts) {
-
- var itemCountHtml = LibraryBrowser.getItemCountsHtml(options, item);
-
- lines.push(itemCountHtml);
- }
-
- if (options.textLines) {
- var additionalLines = options.textLines(item);
- for (var i = 0, length = additionalLines.length; i < length; i++) {
- lines.push(additionalLines[i]);
- }
- }
-
- if (options.showSongCount) {
-
- var songLine = '';
-
- if (item.SongCount) {
- songLine = item.SongCount == 1 ?
- Globalize.translate('ValueOneSong') :
- Globalize.translate('ValueSongCount', item.SongCount);
- }
-
- lines.push(songLine);
- }
-
- if (options.showPremiereDate) {
-
- if (item.PremiereDate) {
- try {
-
- lines.push(LibraryBrowser.getPremiereDateText(item));
-
- } catch (err) {
- lines.push('');
-
- }
- } else {
- lines.push('');
- }
- }
-
- if (options.showYear) {
-
- lines.push(item.ProductionYear || '');
- }
-
- if (options.showChannelName) {
-
- lines.push(item.ChannelName || '');
- }
-
- if (options.showAirTime) {
-
- var airTimeText;
- if (item.StartDate) {
-
- try {
- var date = datetime.parseISO8601Date(item.StartDate);
-
- airTimeText = date.toLocaleDateString();
-
- airTimeText += ', ' + datetime.getDisplayTime(date);
-
- if (item.EndDate) {
- date = datetime.parseISO8601Date(item.EndDate);
- airTimeText += ' - ' + datetime.getDisplayTime(date);
- }
- }
- catch (e) {
- console.log("Error parsing date: " + item.PremiereDate);
- }
- }
-
- lines.push(airTimeText || '');
- }
-
- if (item.Type == 'TvChannel') {
-
- if (item.CurrentProgram) {
- lines.push(itemHelper.getDisplayName(item.CurrentProgram));
- } else {
- lines.push('');
- }
- }
-
- if (options.showSeriesYear) {
-
- if (item.Status == "Continuing") {
-
- lines.push(Globalize.translate('ValueSeriesYearToPresent', item.ProductionYear || ''));
-
- } else {
- lines.push(item.ProductionYear || '');
- }
-
- }
-
- if (options.showProgramAirInfo) {
-
- var date = datetime.parseISO8601Date(item.StartDate, true);
-
- var text = item.StartDate ?
- date.toLocaleString() :
- '';
-
- lines.push(text || ' ');
-
- lines.push(item.ChannelName || ' ');
- }
-
- html += LibraryBrowser.getCardTextLines(lines, cssClass, !options.overlayText);
-
- if (options.overlayText) {
-
- if (progressHtml) {
- html += "
";
- html += progressHtml;
- html += "
";
- }
- }
-
- if (html) {
- html = '";
- }
-
- return html;
- },
-
getListItemInfo: function (elem) {
var elemWithAttributes = elem;
@@ -1689,35 +621,6 @@
};
},
- getCardTextLines: function (lines, cssClass, forceLines) {
-
- var html = '';
-
- var valid = 0;
- var i, length;
-
- for (i = 0, length = lines.length; i < length; i++) {
-
- var text = lines[i];
-
- if (text) {
- html += "
";
- html += text;
- html += "
";
- valid++;
- }
- }
-
- if (forceLines) {
- while (valid < length) {
- html += "
";
- valid++;
- }
- }
-
- return html;
- },
-
getFutureDateText: function (date) {
var weekday = [];
@@ -1739,43 +642,6 @@
return date;
},
- getPremiereDateText: function (item, date) {
-
- var studio = (item.Studios || [])[0];
-
- if (!date) {
-
- var text = '';
-
- if (item.AirTime) {
- text += item.AirTime;
- }
-
- if (studio) {
-
- if (text) {
- text += " on " + studio;
- } else {
- text += studio;
- }
- }
-
- return text;
- }
-
- var day = LibraryBrowser.getFutureDateText(date);
-
- if (item.AirTime) {
- day += " at " + item.AirTime;
- }
-
- if (studio) {
- day += " on " + studio;
- }
-
- return day;
- },
-
getOfflineIndicatorHtml: function (item) {
if (item.LocationType == "Offline") {
@@ -1829,60 +695,6 @@
return '';
},
- getAveragePrimaryImageAspectRatio: function (items) {
-
- var values = [];
-
- for (var i = 0, length = items.length; i < length; i++) {
-
- var ratio = items[i].PrimaryImageAspectRatio || 0;
-
- if (!ratio) {
- continue;
- }
-
- values[values.length] = ratio;
- }
-
- if (!values.length) {
- return null;
- }
-
- // Use the median
- values.sort(function (a, b) { return a - b; });
-
- var half = Math.floor(values.length / 2);
-
- var result;
-
- if (values.length % 2)
- result = values[half];
- else
- result = (values[half - 1] + values[half]) / 2.0;
-
- // If really close to 2:3 (poster image), just return 2:3
- if (Math.abs(0.66666666667 - result) <= .15) {
- return 0.66666666667;
- }
-
- // If really close to 16:9 (episode image), just return 16:9
- if (Math.abs(1.777777778 - result) <= .2) {
- return 1.777777778;
- }
-
- // If really close to 1 (square image), just return 1
- if (Math.abs(1 - result) <= .15) {
- return 1;
- }
-
- // If really close to 4:3 (poster image), just return 2:3
- if (Math.abs(1.33333333333 - result) <= .15) {
- return 1.33333333333;
- }
-
- return result;
- },
-
metroColors: ["#6FBD45", "#4BB3DD", "#4164A5", "#E12026", "#800080", "#E1B222", "#008040", "#0094FF", "#FF00C7", "#FF870F", "#7F0037"],
getRandomMetroColor: function () {
diff --git a/dashboard-ui/scripts/livetvchannels.js b/dashboard-ui/scripts/livetvchannels.js
index 50785f9275..b1612cf08d 100644
--- a/dashboard-ui/scripts/livetvchannels.js
+++ b/dashboard-ui/scripts/livetvchannels.js
@@ -1,4 +1,4 @@
-define(['emby-itemscontainer'], function () {
+define(['cardBuilder', 'emby-itemscontainer'], function (cardBuilder) {
return function (view, params, tabContent) {
@@ -38,7 +38,7 @@
function getChannelsHtml(channels) {
- return LibraryBrowser.getPosterViewHtml({
+ return cardBuilder.getCardsHtml({
items: channels,
shape: "square",
showTitle: true,
diff --git a/dashboard-ui/scripts/livetvitems.js b/dashboard-ui/scripts/livetvitems.js
index 11be75fa0b..beef07a388 100644
--- a/dashboard-ui/scripts/livetvitems.js
+++ b/dashboard-ui/scripts/livetvitems.js
@@ -1,6 +1,4 @@
-define(['emby-itemscontainer'], function () {
-
- var view = LibraryBrowser.getDefaultItemsView('Poster', 'Poster');
+define(['cardBuilder', 'emby-itemscontainer'], function (cardBuilder) {
var currentDate = new Date();
currentDate.setHours(0, 0, 0, 0);
@@ -37,33 +35,18 @@
page.querySelector('.listTopPaging').innerHTML = pagingHtml;
- if (view == "Poster") {
- html = LibraryBrowser.getPosterViewHtml({
- items: result.Items,
- shape: query.IsMovie ? 'portrait' : "auto",
- context: 'livetv',
- showTitle: false,
- centerText: true,
- lazy: true,
- showStartDateIndex: true,
- overlayText: false,
- showProgramAirInfo: true,
- overlayMoreButton: true
- });
- }
- else if (view == "PosterCard") {
- html = LibraryBrowser.getPosterViewHtml({
- items: result.Items,
- shape: "portrait",
- context: 'livetv',
- showTitle: true,
- showStartDateIndex: true,
- lazy: true,
- cardLayout: true,
- showProgramAirInfo: true,
- overlayMoreButton: true
- });
- }
+ html = cardBuilder.getCardsHtml({
+ items: result.Items,
+ shape: query.IsMovie ? 'portrait' : "auto",
+ context: 'livetv',
+ showTitle: false,
+ centerText: true,
+ lazy: true,
+ showStartDateIndex: true,
+ overlayText: false,
+ showProgramAirInfo: true,
+ overlayMoreButton: true
+ });
var elem = page.querySelector('.itemsContainer');
elem.innerHTML = html + pagingHtml;
diff --git a/dashboard-ui/scripts/livetvsuggested.js b/dashboard-ui/scripts/livetvsuggested.js
index 902d3f536b..1e4660f428 100644
--- a/dashboard-ui/scripts/livetvsuggested.js
+++ b/dashboard-ui/scripts/livetvsuggested.js
@@ -1,4 +1,4 @@
-define(['libraryBrowser', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser) {
+define(['libraryBrowser', 'cardBuilder', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser, cardBuilder) {
function enableScrollX() {
return browserInfo.mobile && AppInfo.enableAppLayouts;
@@ -99,7 +99,7 @@
function renderItems(page, items, sectionClass, overlayButton, shape) {
- var html = libraryBrowser.getPosterViewHtml({
+ var html = cardBuilder.getCardsHtml({
items: items,
shape: shape || (enableScrollX() ? 'autooverflow' : 'auto'),
showTitle: true,
@@ -130,8 +130,10 @@
for (var i = 0, length = containers.length; i < length; i++) {
if (enableScrollX()) {
containers[i].classList.add('hiddenScrollX');
+ containers[i].classList.remove('verticalItemsContainer');
} else {
containers[i].classList.remove('hiddenScrollX');
+ containers[i].classList.add('verticalItemsContainer');
}
}
};
diff --git a/dashboard-ui/scripts/moviegenres.js b/dashboard-ui/scripts/moviegenres.js
index 400f630a51..edd9c19dad 100644
--- a/dashboard-ui/scripts/moviegenres.js
+++ b/dashboard-ui/scripts/moviegenres.js
@@ -1,4 +1,4 @@
-define(['libraryBrowser'], function (libraryBrowser) {
+define(['libraryBrowser', 'cardBuilder'], function (libraryBrowser, cardBuilder) {
return function (view, params, tabContent) {
@@ -16,7 +16,7 @@
SortOrder: "Ascending",
IncludeItemTypes: "Movie",
Recursive: true,
- Fields: "DateCreated,SyncInfo,ItemCounts",
+ Fields: "DateCreated,SyncInfo,ItemCounts,PrimaryImageAspectRatio",
StartIndex: 0
},
view: libraryBrowser.getSavedView(key) || libraryBrowser.getDefaultItemsView('Thumb', 'Thumb')
@@ -55,59 +55,56 @@
var html = '';
var viewStyle = self.getCurrentViewStyle();
+ var elem = context.querySelector('#items');
if (viewStyle == "Thumb") {
- html = libraryBrowser.getPosterViewHtml({
- items: result.Items,
+ cardBuilder.buildCards(result.Items, {
+ itemsContainer: elem,
shape: "backdrop",
preferThumb: true,
- context: 'movies',
+ showTitle: false,
+ scalable: true,
showItemCounts: true,
centerText: true,
- lazy: true,
overlayMoreButton: true
});
}
else if (viewStyle == "ThumbCard") {
- html = libraryBrowser.getPosterViewHtml({
- items: result.Items,
+ cardBuilder.buildCards(result.Items, {
+ itemsContainer: elem,
shape: "backdrop",
preferThumb: true,
- context: 'movies',
+ showTitle: false,
+ scalable: true,
showItemCounts: true,
- cardLayout: true,
- showTitle: true,
- lazy: true
+ centerText: true,
+ cardLayout: true
});
}
else if (viewStyle == "PosterCard") {
- html = libraryBrowser.getPosterViewHtml({
- items: result.Items,
- shape: "portrait",
- context: 'movies',
+ cardBuilder.buildCards(result.Items, {
+ itemsContainer: elem,
+ shape: "auto",
+ showTitle: false,
+ scalable: true,
showItemCounts: true,
- lazy: true,
- cardLayout: true,
- showTitle: true
+ centerText: true,
+ cardLayout: true
});
}
else if (viewStyle == "Poster") {
- html = libraryBrowser.getPosterViewHtml({
- items: result.Items,
- shape: "portrait",
- context: 'movies',
- centerText: true,
+ cardBuilder.buildCards(result.Items, {
+ itemsContainer: elem,
+ shape: "auto",
+ showTitle: false,
+ scalable: true,
showItemCounts: true,
- lazy: true,
+ centerText: true,
overlayMoreButton: true
});
}
- var elem = context.querySelector('#items');
- elem.innerHTML = html;
- ImageLoader.lazyChildren(elem);
-
libraryBrowser.saveQueryValues(getSavedQueryKey(), query);
Dashboard.hideLoadingMsg();
diff --git a/dashboard-ui/scripts/moviesrecommended.js b/dashboard-ui/scripts/moviesrecommended.js
index ba4b944ff2..246d405817 100644
--- a/dashboard-ui/scripts/moviesrecommended.js
+++ b/dashboard-ui/scripts/moviesrecommended.js
@@ -1,14 +1,4 @@
-define(['libraryBrowser', 'components/categorysyncbuttons', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser, categorysyncbuttons) {
-
- function getView() {
-
- return 'Poster';
- }
-
- function getResumeView() {
-
- return 'Thumb';
- }
+define(['libraryBrowser', 'components/categorysyncbuttons', 'cardBuilder', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser, categorysyncbuttons, cardBuilder) {
function enableScrollX() {
return browserInfo.mobile && AppInfo.enableAppLayouts;
@@ -37,39 +27,13 @@
ApiClient.getJSON(ApiClient.getUrl('Users/' + userId + '/Items/Latest', options)).then(function (items) {
- var view = getView();
- var html = '';
-
- if (view == 'PosterCard') {
-
- html += libraryBrowser.getPosterViewHtml({
- items: items,
- lazy: true,
- shape: getPortraitShape(),
- overlayText: false,
- showTitle: true,
- showYear: true,
- cardLayout: true,
- showDetailsMenu: true
-
- });
-
- } else if (view == 'Poster') {
-
- html += libraryBrowser.getPosterViewHtml({
- items: items,
- shape: getPortraitShape(),
- centerText: true,
- lazy: true,
- overlayText: false,
- showDetailsMenu: true,
- overlayPlayButton: true
- });
- }
-
- var recentlyAddedItems = page.querySelector('#recentlyAddedItems');
- recentlyAddedItems.innerHTML = html;
- ImageLoader.lazyChildren(recentlyAddedItems);
+ var container = page.querySelector('#recentlyAddedItems');
+ cardBuilder.buildCards(items, {
+ itemsContainer: container,
+ shape: getPortraitShape(),
+ scalable: true,
+ overlayPlayButton: true
+ });
});
}
@@ -101,40 +65,14 @@
page.querySelector('#resumableSection').classList.add('hide');
}
- var view = getResumeView();
- var html = '';
-
- if (view == 'ThumbCard') {
-
- html += libraryBrowser.getPosterViewHtml({
- items: result.Items,
- preferThumb: true,
- shape: getThumbShape(),
- showTitle: true,
- showYear: true,
- lazy: true,
- cardLayout: true,
- showDetailsMenu: true
-
- });
-
- } else if (view == 'Thumb') {
-
- html += libraryBrowser.getPosterViewHtml({
- items: result.Items,
- preferThumb: true,
- shape: getThumbShape(),
- overlayText: true,
- showTitle: false,
- lazy: true,
- showDetailsMenu: true,
- overlayPlayButton: true
- });
- }
-
- var resumableItems = page.querySelector('#resumableItems');
- resumableItems.innerHTML = html;
- ImageLoader.lazyChildren(resumableItems);
+ var container = page.querySelector('#resumableItems');
+ cardBuilder.buildCards(result.Items, {
+ itemsContainer: container,
+ preferThumb: true,
+ shape: getThumbShape(),
+ scalable: true,
+ overlayPlayButton: true
+ });
});
}
@@ -167,38 +105,17 @@
html += '';
if (enableScrollX()) {
- html += '
';
+ html += '
';
} else {
- html += '
';
+ html += '
';
}
- var view = getView();
+ html += cardBuilder.getCardsHtml(recommendation.Items, {
+ shape: getPortraitShape(),
+ scalable: true,
+ overlayPlayButton: true
+ });
- if (view == 'PosterCard') {
-
- html += libraryBrowser.getPosterViewHtml({
- items: recommendation.Items,
- lazy: true,
- shape: getPortraitShape(),
- overlayText: false,
- showTitle: true,
- showYear: true,
- cardLayout: true,
- showDetailsMenu: true
-
- });
-
- } else if (view == 'Poster') {
-
- html += libraryBrowser.getPosterViewHtml({
- items: recommendation.Items,
- shape: getPortraitShape(),
- centerText: true,
- lazy: true,
- showDetailsMenu: true,
- overlayPlayButton: true
- });
- }
html += '
';
html += '
';
@@ -244,8 +161,10 @@
for (var i = 0, length = containers.length; i < length; i++) {
if (enableScrollX()) {
containers[i].classList.add('hiddenScrollX');
+ containers[i].classList.remove('verticalItemsContainer');
} else {
containers[i].classList.remove('hiddenScrollX');
+ containers[i].classList.add('verticalItemsContainer');
}
}
}
diff --git a/dashboard-ui/scripts/moviestudios.js b/dashboard-ui/scripts/moviestudios.js
index 5cd94eeb98..bf5f0d5dc3 100644
--- a/dashboard-ui/scripts/moviestudios.js
+++ b/dashboard-ui/scripts/moviestudios.js
@@ -1,4 +1,4 @@
-define(['libraryBrowser'], function (libraryBrowser) {
+define(['libraryBrowser', 'cardBuilder'], function (libraryBrowser, cardBuilder) {
// The base query options
var data = {};
@@ -15,7 +15,7 @@
SortOrder: "Ascending",
IncludeItemTypes: "Movie",
Recursive: true,
- Fields: "DateCreated,ItemCounts",
+ Fields: "DateCreated,ItemCounts,PrimaryImageAspectRatio",
StartIndex: 0
}
};
@@ -42,24 +42,18 @@
promise.then(function (result) {
- var html = '';
-
- html += libraryBrowser.getPosterViewHtml({
- items: result.Items,
+ var elem = context.querySelector('#items');
+ cardBuilder.buildCards(result.Items, {
+ itemsContainer: elem,
shape: "backdrop",
- showTitle: false,
- context: 'movies',
preferThumb: true,
+ showTitle: false,
+ scalable: true,
showItemCounts: true,
centerText: true,
- lazy: true
-
+ overlayMoreButton: true
});
- var elem = context.querySelector('#items');
- elem.innerHTML = html;
- ImageLoader.lazyChildren(elem);
-
Dashboard.hideLoadingMsg();
});
}
diff --git a/dashboard-ui/scripts/musicfolders.js b/dashboard-ui/scripts/musicfolders.js
index 16503ae373..21c520c5ec 100644
--- a/dashboard-ui/scripts/musicfolders.js
+++ b/dashboard-ui/scripts/musicfolders.js
@@ -1,4 +1,4 @@
-define(['events', 'libraryBrowser', 'imageLoader'], function (events, libraryBrowser, imageLoader) {
+define(['events', 'libraryBrowser', 'imageLoader', 'cardBuilder'], function (events, libraryBrowser, imageLoader, cardBuilder) {
return function (view, params, tabContent) {
@@ -65,7 +65,7 @@
filterButton: false
});
- var html = LibraryBrowser.getPosterViewHtml({
+ var html = cardBuilder.getCardsHtml({
items: result.Items,
shape: "square",
context: 'folders',
diff --git a/dashboard-ui/scripts/secondaryitems.js b/dashboard-ui/scripts/secondaryitems.js
index 9d07586002..5dc76c0630 100644
--- a/dashboard-ui/scripts/secondaryitems.js
+++ b/dashboard-ui/scripts/secondaryitems.js
@@ -1,4 +1,4 @@
-define(['libraryBrowser', 'listView', 'emby-itemscontainer'], function (libraryBrowser, listView) {
+define(['libraryBrowser', 'listView', 'cardBuilder', 'emby-itemscontainer'], function (libraryBrowser, listView, cardBuilder) {
return function (view, params) {
@@ -160,7 +160,7 @@
}
// Poster
- html = libraryBrowser.getPosterViewHtml(posterOptions);
+ html = cardBuilder.getCardsHtml(posterOptions);
}
var elem = view.querySelector('#items');
diff --git a/dashboard-ui/scripts/sections.js b/dashboard-ui/scripts/sections.js
index 3d38436d7d..1352f15b38 100644
--- a/dashboard-ui/scripts/sections.js
+++ b/dashboard-ui/scripts/sections.js
@@ -1,4 +1,4 @@
-define(['libraryBrowser', 'appSettings', 'components/groupedcards', 'scrollStyles', 'emby-button', 'paper-icon-button-light', 'emby-itemscontainer'], function (LibraryBrowser, appSettings, groupedcards) {
+define(['libraryBrowser', 'cardBuilder', 'appSettings', 'components/groupedcards', 'scrollStyles', 'emby-button', 'paper-icon-button-light', 'emby-itemscontainer'], function (LibraryBrowser, cardBuilder, appSettings, groupedcards) {
function getUserViews(userId) {
@@ -302,9 +302,9 @@
html += '
';
- html += '
';
+ html += '
';
- html += LibraryBrowser.getPosterViewHtml({
+ html += cardBuilder.getCardsHtml({
items: items,
preferThumb: true,
shape: 'backdrop',
@@ -348,9 +348,9 @@
if (scrollX) {
html += '