begin unifying card layouts

dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js

@@ -429,15 +429,13 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
 
             if (options.autoThumb && item.ImageTags && item.ImageTags.Primary && item.PrimaryImageAspectRatio && item.PrimaryImageAspectRatio >= 1.34) {
 
-                width = posterWidth;
+                height = primaryImageAspectRatio ? Math.round(width / primaryImageAspectRatio) : null;
-                height = primaryImageAspectRatio ? Math.round(posterWidth / primaryImageAspectRatio) : null;
 
                 imgUrl = ApiClient.getScaledImageUrl(item.Id, {
                     type: "Primary",
                     maxHeight: height,
                     maxWidth: width,
-                    tag: item.ImageTags.Primary,
+                    tag: item.ImageTags.Primary
-                    enableImageEnhancers: enableImageEnhancers
                 });
 
                 if (primaryImageAspectRatio) {
@@ -452,9 +450,8 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
 
                 imgUrl = ApiClient.getScaledImageUrl(item.Id, {
                     type: "Thumb",
-                    maxWidth: thumbWidth,
+                    maxWidth: width,
-                    tag: item.ImageTags.Thumb,
+                    tag: item.ImageTags.Thumb
-                    enableImageEnhancers: enableImageEnhancers
                 });
 
             } else if (options.preferThumb && item.ImageTags && item.ImageTags.Thumb) {

dashboard-ui/channelitems.html

@@ -6,6 +6,6 @@
             <div class="listTopPaging">
             </div>
         </div>
-        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
+        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer verticalItemsContainer" style="text-align:center;"></div>
     </div>
 </div>

dashboard-ui/channels.html

@@ -10,7 +10,7 @@
     <div class="pageTabContent ehsContent" id="channelsTab" data-index="1">
         <div class="viewSettings">
         </div>
-        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
+        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer verticalItemsContainer" style="text-align:center;"></div>
     </div>
 
     <div data-role="content">

dashboard-ui/components/favoriteitems.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;
@@ -85,23 +85,20 @@
                 if (enableScrollX()) {
                     html += '<div is="emby-itemscontainer" class="itemsContainer hiddenScrollX">';
                 } else {
-                    html += '<div is="emby-itemscontainer" class="itemsContainer">';
+                    html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
                 }
 
-                html += libraryBrowser.getPosterViewHtml({
+                html += cardBuilder.getCardsHtml(result.Items, {
-                    items: result.Items,
                     preferThumb: section.preferThumb,
                     shape: section.shape,
+                    centerText: section.centerText,
                     overlayText: section.overlayText !== false,
                     showTitle: section.showTitle,
                     showParentTitle: section.showParentTitle,
-                    lazy: true,
+                    scalable: true,
-                    showDetailsMenu: true,
-                    centerText: section.centerText,
                     overlayPlayButton: section.overlayPlayButton,
                     overlayMoreButton: section.overlayMoreButton,
-                    context: 'home-favorites',
+                    action: section.defaultAction
-                    defaultAction: section.defaultAction
                 });
 
                 html += '</div>';

dashboard-ui/css/card.css

@@ -1,571 +0,0 @@
-.card {
-    display: inline-block;
-    text-align: left;
-    position: relative;
-    contain: style;
-}
-    .card, .card a {
-        text-decoration: none;
-        font-weight: 400 !important;
-    }
-
-.buttonCard:hover .cardBox {
-    opacity: .6;
-}
-
-.cardBox {
-    margin: 6px;
-}
-
-@media all and (max-width: 500px) {
-
-    .cardBox {
-        margin: 3px;
-    }
-}
-
-.cardOverlayButtonContainer {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    padding: 1em .25em .5em 1em;
-}
-
-.cardOverlayMoreButton, .cardOverlayPlayButton {
-    color: #fff !important;
-    background-color: rgba(0,0,0,.7) !important;
-    border-radius: 500px;
-}
-
-    .cardOverlayMoreButton:hover, .cardOverlayPlayButton:hover {
-        background-color: rgba(0,0,0,.9) !important;
-        transition: background-color .5s ease-out;
-    }
-
-.grayscale {
-    -webkit-filter: grayscale(100%);
-    -moz-filter: grayscale(100%);
-    filter: grayscale(100%);
-}
-
-.bottomPaddedCard .cardBox:not(.visualCardBox) {
-    margin-bottom: 24px;
-}
-
-.hiddenScrollX .bottomPaddedCard .cardBox {
-    margin-bottom: 0;
-}
-
-.visualCardBox {
-    -moz-border-radius: 2px;
-    -webkit-border-radius: 2px;
-    border-radius: 2px;
-    -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    -ms-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    background: #fff;
-}
-
-.ui-body-b .visualCardBox {
-    border-radius: 3px;
-}
-
-.defaultBackground .cardImage, .ui-body-b .visualCardBox {
-    background-color: #222326;
-}
-
-.cardScalable {
-    position: relative;
-}
-
-.backdropCard .cardPadder, .smallBackdropCard .cardPadder, .overflowBackdropCard .cardPadder {
-    padding-bottom: 56.25%;
-}
-
-.squareCard .cardPadder, .overflowSquareCard .cardPadder {
-    padding-bottom: 100%;
-}
-
-.letterBoxCard .cardPadder {
-    padding-bottom: 75%;
-}
-
-.portraitCard .cardPadder, .overflowPortraitCard .cardPadder {
-    padding-bottom: 150%;
-}
-
-.bannerCard .cardPadder {
-    padding-bottom: 18.5%;
-}
-
-.cardContent {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    /* Needed to keep the cardOverlayTarget from showing outside the bounds while it animates */
-    overflow: hidden;
-}
-
-    .cardContent:not(.noHoverEffect):hover .cardImage {
-        opacity: .5;
-    }
-
-    .cardContent .cardFooter {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        color: #eee;
-        padding: 6px 0 2px 0;
-        max-width: 100%;
-        background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%) !important; /* FF3.6+ */
-        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.7))) !important; /* Chrome,Safari4+ */
-        background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%) !important; /* Chrome10+,Safari5.1+ */
-        background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%) !important; /* Opera 11.10+ */
-        background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%) !important; /* IE10+ */
-        background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%) !important; /* W3C */
-    }
-
-        .cardContent .cardFooter:not(.fullCardFooter) {
-            background: rgba(0, 0, 0, .6) !important;
-        }
-
-.lightCardFooter {
-    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%) !important; /* FF3.6+ */
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.7))) !important; /* Chrome,Safari4+ */
-    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%) !important; /* Chrome10+,Safari5.1+ */
-    background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%) !important; /* Opera 11.10+ */
-    background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%) !important; /* IE10+ */
-    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%) !important; /* W3C */
-}
-
-.fullCardFooter {
-    right: 0;
-}
-
-.visualCardBox .outerCardFooter {
-    padding: .5em .3em;
-    position: relative;
-}
-
-.btnCardOptions {
-    padding: 10px !important;
-    margin: 0 !important;
-    color: inherit;
-}
-
-.cardText {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    text-wrap: none;
-    white-space: nowrap;
-    padding: 5px 5px 2px;
-    font-weight: 400;
-    line-height: 1.4;
-}
-
-.cardButtonContainer {
-    text-align: right;
-    float: right;
-    padding: 5px 0 2px;
-}
-
-.cardContent .cardFooter .cardText {
-    font-size: 115%;
-}
-
-.cardTextCentered {
-    text-align: center;
-}
-
-.cardDefaultText {
-    position: absolute;
-    top: 30%;
-    left: 0;
-    right: 0;
-    text-align: center;
-    line-height: initial;
-}
-
-.cardContent .cardText {
-    padding: 0 6px 4px 5px;
-}
-
-.outerCardFooter .cardText + .cardText {
-    opacity: .6;
-}
-
-.outerCardFooter .cardText:first-child {
-    padding-top: 7px;
-}
-
-.cardImage {
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center bottom;
-    width: 100%;
-    height: 100%;
-    border-radius: 2px;
-}
-
-    .cardImage canvas {
-        width: 100%;
-        height: 100%;
-    }
-
-.coveredCardImage {
-    background-size: 100% 100%;
-    background-position: center center;
-}
-
-    .coveredCardImage.noScale {
-        background-size: cover;
-    }
-
-.centeredCardImage {
-    background-position: center center;
-}
-
-.ui-body-b .iconCardImage {
-    color: #fff;
-}
-
-.iconCardImage {
-    display: flex;
-    align-items: center;
-    text-align: center;
-    justify-content: center;
-}
-
-    .iconCardImage iron-icon {
-        width: 30%;
-        height: 30%;
-    }
-
-.bannerCard {
-    width: 100%;
-}
-
-.squareCard {
-    width: 50%;
-}
-
-.backdropCard {
-    width: 50%;
-}
-
-.smallBackdropCard {
-    width: 50%;
-}
-
-.portraitCard {
-    width: 33.333%;
-}
-
-.overflowPortraitCard {
-    width: 40%;
-    max-width: 200px;
-}
-
-.overflowBackdropCard {
-    width: 84%;
-    max-width: 400px;
-}
-
-.cardProgress {
-    line-height: 7px;
-}
-
-    .cardProgress .itemProgressBar {
-        height: 7px;
-        width: 100%;
-        opacity: .8;
-    }
-
-.overflowSquareCard {
-    width: 42%;
-}
-
-@media all and (max-width: 420px) {
-
-    .backdropCard {
-        width: 100% !important;
-    }
-}
-
-@media all and (min-width: 500px) {
-
-    .smallBackdropCard {
-        width: 33.333%;
-    }
-
-    .squareCard {
-        width: 33.333%;
-    }
-}
-
-@media all and (min-width: 640px) {
-
-    .portraitCard {
-        width: 25%;
-    }
-
-    .overflowPortraitCard {
-        width: 36%;
-    }
-
-    .overflowBackdropCard {
-        width: 60%;
-    }
-
-    .overflowSquareCard {
-        width: 30%;
-    }
-}
-
-@media all and (min-width: 700px) {
-    .squareCard {
-        width: 25%;
-    }
-}
-
-@media all and (min-width: 770px) {
-    .backdropCard {
-        width: 33.333%;
-    }
-}
-
-@media all and (min-width: 800px) {
-
-    .bannerCard {
-        width: 50%;
-    }
-
-    .portraitCard {
-        width: 20%;
-    }
-
-    .smallBackdropCard {
-        width: 25%;
-    }
-}
-
-
-@media all and (min-width: 900px) {
-
-    .squareCard {
-        width: 20%;
-    }
-}
-
-@media all and (min-width: 1000px) {
-
-
-    .smallBackdropCard {
-        width: 20%;
-    }
-
-    .overflowPortraitCard {
-        width: 23%;
-    }
-
-    .overflowBackdropCard {
-        width: 40%;
-    }
-
-    .overflowSquareCard {
-        width: 22%;
-    }
-}
-
-
-@media all and (min-width: 1200px) {
-
-    .backdropCard {
-        width: 25%;
-    }
-
-    .squareCard {
-        width: 16.666666666666666666666666666667%;
-    }
-
-    .bannerCard {
-        width: 33.333%;
-    }
-
-    .portraitCard {
-        width: 16.666666666666666666666666666667%;
-    }
-
-    .smallBackdropCard {
-        width: 16.666666666666666666666666666667%;
-    }
-}
-
-
-@media all and (min-width: 1400px) {
-
-    .squareCard {
-        width: 14.285714285714285714285714285714%;
-    }
-
-    .portraitCard {
-        width: 14.285714285714285714285714285714%;
-    }
-
-    .smallBackdropCard {
-        width: 14.285714285714285714285714285714%;
-    }
-}
-
-
-@media all and (min-width: 1600px) {
-
-    .portraitCard {
-        width: 12.5%;
-    }
-
-    .smallBackdropCard {
-        width: 12.5%;
-    }
-}
-
-
-@media all and (min-width: 1800px) {
-
-    .squareCard {
-        width: 12.5%;
-    }
-
-    .smallBackdropCard {
-        width: 10%;
-    }
-}
-
-@media all and (min-width: 2100px) {
-
-    .squareCard {
-        width: 11.111111111111111111111111111111%;
-    }
-
-    .backdropCard {
-        width: 20%;
-    }
-
-    .portraitCard {
-        width: 11.111111111111111111111111111111%;
-    }
-}
-
-@media all and (min-width: 2200px) {
-
-    .bannerCard {
-        width: 25%;
-    }
-
-    .portraitCard {
-        width: 10%;
-    }
-}
-
-@media all and (min-width: 2500px) {
-
-    .backdropCard {
-        width: 16.666666666666666666666666666667%;
-    }
-}
-
-
-/** detailPage169 */
-.detailPage169Card .cardPadder {
-    padding-bottom: 56.25%;
-}
-
-
-.detailPage169Card {
-    width: 50%;
-}
-
-@media all and (min-width: 800px) {
-
-    .detailPage169Card {
-        width: 33.333%;
-    }
-}
-
-@media all and (max-width: 420px) {
-
-    .detailPage169Card {
-        width: 100% !important;
-    }
-}
-
-
-/** detailPagePortrait */
-.detailPagePortraitCard .cardPadder {
-    padding-bottom: 150%;
-}
-
-
-.detailPagePortraitCard {
-    width: 33.333%;
-}
-
-@media all and (min-width: 540px) {
-
-    .detailPagePortraitCard {
-        width: 25%;
-    }
-}
-
-
-/** detailPageSquare */
-.detailPageSquareCard .cardPadder {
-    padding-bottom: 100%;
-}
-
-
-.detailPageSquareCard {
-    width: 33.333%;
-}
-
-@media all and (min-width: 540px) {
-
-    .detailPageSquareCard {
-        width: 25%;
-    }
-}
-
-/** horizontalBackdropCard */
-.horizontalBackdropCard .cardPadder {
-    padding-bottom: 56.25%;
-}
-
-
-.horizontalBackdropCard {
-    width: 75%;
-}
-
-@media all and (min-width: 500px) {
-
-    .horizontalBackdropCard {
-        width: 50%;
-    }
-}
-
-@media all and (min-width: 800px) {
-
-    .horizontalBackdropCard {
-        width: 31%;
-    }
-}
-
-.horizontalBackdropCard .cardImage {
-    border-radius: 4px;
-}
-
-.horizontalBackdropCard .cardBox {
-    margin: 2px !important;
-}

dashboard-ui/css/librarybrowser.css

@@ -907,80 +907,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     line-height: 1.2;
 }
 
-.itemProgress {
-    vertical-align: top;
-    font-size: 19px;
-    margin-right: 15px;
-    font-weight: bold;
-}
-
-/* All HTML5 progress enabled browsers */
-.itemProgressBar {
-    /* Turns off styling - not usually needed, but good to know. */
-    appearance: none;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    /* gets rid of default border in Firefox and Opera. */
-    border: 0;
-    margin: 0;
-    height: 14px;
-    border: 0 solid #222;
-    border-radius: 0;
-    width: 50px;
-    margin-right: 5px;
-}
-
-/* Undo these to original */
-.listItem .itemProgressBar {
-    width: auto;
-    margin: 0;
-    height: .56vh;
-}
-
-/* Polyfill */
-.itemProgressBar[role]:after {
-    background-image: none; /* removes default background from polyfill */
-}
-
-/*
- * Background of the progress bar background
- */
-
-/* Firefox and Polyfill */
-.itemProgressBar {
-    background: #000 !important; /* !important only needed in polyfill */
-}
-
-    /* Chrome */
-    .itemProgressBar::-webkit-progress-bar {
-        background: #000;
-    }
-
-.pare
-/*
- * Background of the progress bar value
- */
-/* Firefox */
-.itemProgressBar::-moz-progress-bar {
-    border-radius: 0;
-    background-image: none;
-    background-color: #52B54B;
-}
-
-/* Chrome */
-.itemProgressBar::-webkit-progress-value {
-    border-radius: 0;
-    background-image: none;
-    background-color: #52B54B;
-}
-
-/* Polyfill */
-.itemProgressBar[aria-valuenow]:before {
-    border-radius: 0;
-    background-image: none;
-    background-color: #52B54B;
-}
-
 .recordingProgressBar::-moz-progress-bar {
     background-color: #cc3333;
 }
@@ -993,12 +919,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     background-color: #cc3333;
 }
 
-.tileItem .itemProgressBar {
-    top: 2px;
-    width: 40px;
-    margin-right: 1em;
-}
-
 .timelineHeader {
     margin-bottom: .25em;
     line-height: 1.25em;
@@ -1007,7 +927,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
 
 .itemsContainer {
     margin: 0 auto;
-    line-height: 0;
 }
 
 .alphabetPicker {

dashboard-ui/home.html

@@ -25,7 +25,7 @@
                     <span>${ButtonSync}</span>
                 </button>
             </div>
-            <div is="emby-itemscontainer" id="nextUpItems" class="itemsContainer">
+            <div is="emby-itemscontainer" id="nextUpItems" class="itemsContainer verticalItemsContainer">
             </div>
         </div>
         <p class="noNextUpItems hide">${NoNextUpItemsMessage}</p>

dashboard-ui/livetv.html

@@ -52,7 +52,7 @@
             <div class="paging"></div>
             <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button>
         </div>
-        <div is="emby-itemscontainer" id="items" class="itemsContainer"></div>
+        <div is="emby-itemscontainer" id="items" class="itemsContainer verticalItemsContainer"></div>
     </div>
     <div class="pageTabContent ehsContent" id="recordingsTab" data-index="3">
         <div id="activeRecordings" class="homePageSection hide">

dashboard-ui/livetvitems.html

@@ -4,7 +4,7 @@
         <div class="viewSettings">
             <div class="listTopPaging"></div>
         </div>
-        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer"></div>
+        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer verticalItemsContainer"></div>
     </div>
 
 </div>

dashboard-ui/movies.html

@@ -98,14 +98,14 @@
         <div style="text-align: center; display: flex; align-items: center; justify-content: center;">
             <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><i class="md-icon">view_comfy</i></button>
         </div>
-        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer"></div>
+        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer verticalItemsContainer"></div>
     </div>
     <div class="pageTabContent ehsContent" id="studiosTab" data-index="5">
         <div class="viewSettings">
             <div class="listTopPaging">
             </div>
         </div>
-        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer" style="text-align: center;"></div>
+        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer verticalItemsContainer" style="text-align: center;"></div>
     </div>
 
     <div data-role="content">

dashboard-ui/music.html

@@ -115,7 +115,7 @@
             <div class="paging"></div>
         </div>
 
-        <div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker">
+        <div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker verticalItemsContainer">
         </div>
         <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
             <div class="paging"></div>

dashboard-ui/scripts/channelitems.js

@@ -1,4 +1,4 @@
-define(['jQuery', 'emby-itemscontainer'], function ($) {
+define(['jQuery', 'cardBuilder', 'emby-itemscontainer'], function ($, cardBuilder) {
 
     var data = {};
 
@@ -129,7 +129,7 @@
 
             updateFilterControls(page);
 
-            html = LibraryBrowser.getPosterViewHtml({
+            html = cardBuilder.getCardsHtml({
                 items: result.Items,
                 shape: "auto",
                 defaultShape: 'square',

dashboard-ui/scripts/channels.js

@@ -1,4 +1,4 @@
-define(['libraryBrowser', 'emby-itemscontainer'], function (libraryBrowser) {
+define(['libraryBrowser', 'cardBuilder', 'emby-itemscontainer'], function (libraryBrowser, cardBuilder) {
 
     // The base query options
     var query = {
@@ -23,7 +23,7 @@
 
             if (view == "Thumb") {
 
-                html = libraryBrowser.getPosterViewHtml({
+                html = cardBuilder.getCardsHtml({
                     items: result.Items,
                     shape: "backdrop",
                     context: 'channels',
@@ -36,7 +36,7 @@
             }
             else if (view == "ThumbCard") {
 
-                html = libraryBrowser.getPosterViewHtml({
+                html = cardBuilder.getCardsHtml({
                     items: result.Items,
                     shape: "backdrop",
                     preferThumb: true,

dashboard-ui/scripts/episodes.js

@@ -1,4 +1,4 @@
-define(['events', 'libraryBrowser', 'imageLoader', 'listView', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, listView) {
+define(['events', 'libraryBrowser', 'imageLoader', 'listView', 'cardBuilder', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, listView, cardBuilder) {
 
     return function (view, params, tabContent) {
 
@@ -83,27 +83,25 @@
                     });
                 }
                 else if (viewStyle == "PosterCard") {
-                    html = libraryBrowser.getPosterViewHtml({
+                    html = cardBuilder.getCardsHtml({
                         items: result.Items,
                         shape: "backdrop",
                         showTitle: true,
                         showParentTitle: true,
-                        lazy: true,
+                        scalable: true,
-                        cardLayout: true,
+                        cardLayout: true
-                        showDetailsMenu: true
                     });
                 }
                 else {
 
                     // poster
-                    html = libraryBrowser.getPosterViewHtml({
+                    html = cardBuilder.getCardsHtml({
                         items: result.Items,
                         shape: "backdrop",
                         showTitle: true,
                         showParentTitle: true,
                         overlayText: true,
-                        lazy: true,
+                        scalable: true,
-                        showDetailsMenu: true,
                         overlayPlayButton: true
                     });
                 }

dashboard-ui/scripts/homenextup.js

@@ -1,4 +1,4 @@
-define(['components/categorysyncbuttons', 'emby-itemscontainer'], function (categorysyncbuttons) {
+define(['components/categorysyncbuttons', 'cardBuilder', 'emby-itemscontainer'], function (categorysyncbuttons, cardBuilder) {
 
     function getNextUpPromise() {
 
@@ -25,7 +25,7 @@
 
             var html = '';
 
-            html += LibraryBrowser.getPosterViewHtml({
+            html += cardBuilder.getCardsHtml({
                 items: result.Items,
                 shape: "backdrop",
                 showTitle: true,

dashboard-ui/scripts/homeupcoming.js

@@ -1,4 +1,4 @@
-define(['datetime', 'emby-itemscontainer', 'scrollStyles'], function (datetime) {
+define(['datetime', 'cardBuilder', 'emby-itemscontainer', 'scrollStyles'], function (datetime, cardBuilder) {
 
     function getUpcomingPromise() {
 
@@ -102,10 +102,10 @@
             if (enableScrollX()) {
                 html += '<div is="emby-itemscontainer" class="itemsContainer hiddenScrollX">';
             } else {
-                html += '<div is="emby-itemscontainer" class="itemsContainer">';
+                html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
             }
 
-            html += LibraryBrowser.getPosterViewHtml({
+            html += cardBuilder.getCardsHtml({
                 items: group.items,
                 showLocationTypeIndicator: false,
                 shape: getThumbShape(),

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,

dashboard-ui/scripts/livetvitems.js

@@ -1,6 +1,4 @@
-define(['emby-itemscontainer'], function () {
+define(['cardBuilder', 'emby-itemscontainer'], function (cardBuilder) {
-
-    var view = LibraryBrowser.getDefaultItemsView('Poster', 'Poster');
 
     var currentDate = new Date();
     currentDate.setHours(0, 0, 0, 0);
@@ -37,33 +35,18 @@
 
             page.querySelector('.listTopPaging').innerHTML = pagingHtml;
 
-            if (view == "Poster") {
+            html = cardBuilder.getCardsHtml({
-                html = LibraryBrowser.getPosterViewHtml({
+                items: result.Items,
-                    items: result.Items,
+                shape: query.IsMovie ? 'portrait' : "auto",
-                    shape: query.IsMovie ? 'portrait' : "auto",
+                context: 'livetv',
-                    context: 'livetv',
+                showTitle: false,
-                    showTitle: false,
+                centerText: true,
-                    centerText: true,
+                lazy: true,
-                    lazy: true,
+                showStartDateIndex: true,
-                    showStartDateIndex: true,
+                overlayText: false,
-                    overlayText: false,
+                showProgramAirInfo: true,
-                    showProgramAirInfo: true,
+                overlayMoreButton: 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
-                });
-            }
 
             var elem = page.querySelector('.itemsContainer');
             elem.innerHTML = html + pagingHtml;

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');
                 }
             }
         };

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({
+                    cardBuilder.buildCards(result.Items, {
-                        items: 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({
+                    cardBuilder.buildCards(result.Items, {
-                        items: result.Items,
+                        itemsContainer: elem,
                         shape: "backdrop",
                         preferThumb: true,
-                        context: 'movies',
+                        showTitle: false,
+                        scalable: true,
                         showItemCounts: true,
-                        cardLayout: true,
+                        centerText: true,
-                        showTitle: true,
+                        cardLayout: true
-                        lazy: true
                     });
                 }
                 else if (viewStyle == "PosterCard") {
-                    html = libraryBrowser.getPosterViewHtml({
+                    cardBuilder.buildCards(result.Items, {
-                        items: result.Items,
+                        itemsContainer: elem,
-                        shape: "portrait",
+                        shape: "auto",
-                        context: 'movies',
+                        showTitle: false,
+                        scalable: true,
                         showItemCounts: true,
-                        lazy: true,
+                        centerText: true,
-                        cardLayout: true,
+                        cardLayout: true
-                        showTitle: true
                     });
                 }
                 else if (viewStyle == "Poster") {
-                    html = libraryBrowser.getPosterViewHtml({
+                    cardBuilder.buildCards(result.Items, {
-                        items: result.Items,
+                        itemsContainer: elem,
-                        shape: "portrait",
+                        shape: "auto",
-                        context: 'movies',
+                        showTitle: false,
-                        centerText: true,
+                        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();

dashboard-ui/scripts/moviesrecommended.js

@@ -1,14 +1,4 @@
-define(['libraryBrowser', 'components/categorysyncbuttons', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser, categorysyncbuttons) {
+define(['libraryBrowser', 'components/categorysyncbuttons', 'cardBuilder', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser, categorysyncbuttons, cardBuilder) {
-
-    function getView() {
-
-        return 'Poster';
-    }
-
-    function getResumeView() {
-
-        return 'Thumb';
-    }
 
     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 container = page.querySelector('#recentlyAddedItems');
-            var html = '';
+            cardBuilder.buildCards(items, {
-
+                itemsContainer: container,
-            if (view == 'PosterCard') {
+                shape: getPortraitShape(),
-
+                scalable: true,
-                html += libraryBrowser.getPosterViewHtml({
+                overlayPlayButton: true
-                    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);
         });
     }
 
@@ -101,40 +65,14 @@
                 page.querySelector('#resumableSection').classList.add('hide');
             }
 
-            var view = getResumeView();
+            var container = page.querySelector('#resumableItems');
-            var html = '';
+            cardBuilder.buildCards(result.Items, {
-
+                itemsContainer: container,
-            if (view == 'ThumbCard') {
+                preferThumb: true,
-
+                shape: getThumbShape(),
-                html += libraryBrowser.getPosterViewHtml({
+                scalable: true,
-                    items: result.Items,
+                overlayPlayButton: true
-                    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);
 
         });
     }
@@ -167,38 +105,17 @@
         html += '<h1 class="listHeader">' + title + '</h1>';
 
         if (enableScrollX()) {
-            html += '<div is="emby-itemscontainer" class="hiddenScrollX">';
+            html += '<div is="emby-itemscontainer" class="itemsContainer hiddenScrollX">';
         } else {
-            html += '<div is="emby-itemscontainer">';
+            html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
         }
 
-        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 += '</div>';
         html += '</div>';
 
@@ -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');
             }
         }
     }

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 = '';
+            var elem = context.querySelector('#items');
-
+            cardBuilder.buildCards(result.Items, {
-            html += libraryBrowser.getPosterViewHtml({
+                itemsContainer: elem,
-                items: result.Items,
                 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();
         });
     }

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',

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');

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 += '</div>';
 
-                html += '<div is="emby-itemscontainer" class="itemsContainer">';
+                html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
 
-                html += LibraryBrowser.getPosterViewHtml({
+                html += cardBuilder.getCardsHtml({
                     items: items,
                     preferThumb: true,
                     shape: 'backdrop',
@@ -348,9 +348,9 @@
                 if (scrollX) {
                     html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
                 } else {
-                    html += '<div is="emby-itemscontainer" class="itemsContainer">';
+                    html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
                 }
-                html += LibraryBrowser.getPosterViewHtml({
+                html += cardBuilder.getCardsHtml({
                     items: items,
                     shape: getPortraitShape(),
                     showUnplayedIndicator: false,
@@ -390,10 +390,10 @@
                 if (scrollX) {
                     html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
                 } else {
-                    html += '<div is="emby-itemscontainer" class="itemsContainer">';
+                    html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
                 }
 
-                html += LibraryBrowser.getPosterViewHtml({
+                html += cardBuilder.getCardsHtml({
                     items: items,
                     preferThumb: true,
                     shape: getThumbShape(),
@@ -429,8 +429,9 @@
 
             if (result.Items.length) {
                 html += '<h1 class="listHeader">' + Globalize.translate('HeaderLatestChannelMedia') + '</h1>';
-                html += '<div is="emby-itemscontainer" class="itemsContainer">';
+                html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
-                html += LibraryBrowser.getPosterViewHtml({
+
+                html += cardBuilder.getCardsHtml({
                     items: result.Items,
                     shape: 'auto',
                     showTitle: true,
@@ -473,9 +474,9 @@
                 if (scrollX) {
                     html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer homeTopViews">';
                 } else {
-                    html += '<div is="emby-itemscontainer" class="itemsContainer homeTopViews">';
+                    html += '<div is="emby-itemscontainer" class="itemsContainer homeTopViews verticalItemsContainer">';
                 }
-                html += LibraryBrowser.getPosterViewHtml({
+                html += cardBuilder.getCardsHtml({
                     items: items,
                     shape: scrollX ? 'overflowBackdrop' : shape,
                     showTitle: showTitles,
@@ -532,9 +533,9 @@
                 if (enableScrollX()) {
                     html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
                 } else {
-                    html += '<div is="emby-itemscontainer" class="itemsContainer">';
+                    html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
                 }
-                html += LibraryBrowser.getPosterViewHtml({
+                html += cardBuilder.getCardsHtml({
                     items: result.Items,
                     preferThumb: true,
                     shape: getThumbShape(),
@@ -576,9 +577,9 @@
                 if (enableScrollX()) {
                     html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
                 } else {
-                    html += '<div is="emby-itemscontainer" class="itemsContainer">';
+                    html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
                 }
-                html += LibraryBrowser.getPosterViewHtml({
+                html += cardBuilder.getCardsHtml({
                     items: result.Items,
                     preferThumb: true,
                     shape: getThumbShape(),
@@ -656,8 +657,8 @@
                 html += '<a href="channelitems.html?id=' + channel.Id + '" class="clearLink" style="margin-left:2em;"><button is="emby-button" type="button" class="raised more mini"><span>' + Globalize.translate('ButtonMore') + '</span></button></a>';
                 html += '</div>';
 
-                html += '<div is="emby-itemscontainer" is="emby-itemscontainer" class="itemsContainer">';
+                html += '<div is="emby-itemscontainer" is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
-                html += LibraryBrowser.getPosterViewHtml({
+                html += cardBuilder.getCardsHtml({
                     items: result.Items,
                     shape: 'autohome',
                     defaultShape: 'square',
@@ -704,9 +705,9 @@
             if (enableScrollX()) {
                 html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
             } else {
-                html += '<div is="emby-itemscontainer" class="itemsContainer">';
+                html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
             }
-            html += LibraryBrowser.getPosterViewHtml({
+            html += cardBuilder.getCardsHtml({
                 items: result.Items,
                 shape: enableScrollX() ? 'autooverflow' : 'auto',
                 showTitle: true,

dashboard-ui/scripts/site.js

@@ -2789,8 +2789,6 @@ var AppInfo = {};
 
         deps.push('scripts/librarymenu');
 
-        deps.push('css!css/card.css');
-
         console.log('onAppReady - loading dependencies');
 
         require(deps, function (imageLoader, pageObjects) {

dashboard-ui/scripts/tvgenres.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: "Series",
                         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({
+                    cardBuilder.buildCards(result.Items, {
-                        items: result.Items,
+                        itemsContainer: elem,
                         shape: "backdrop",
                         preferThumb: true,
-                        context: 'tv',
+                        showTitle: false,
+                        scalable: true,
                         showItemCounts: true,
                         centerText: true,
-                        lazy: true,
                         overlayMoreButton: true
                     });
                 }
                 else if (viewStyle == "ThumbCard") {
 
-                    html = libraryBrowser.getPosterViewHtml({
+                    cardBuilder.buildCards(result.Items, {
-                        items: result.Items,
+                        itemsContainer: elem,
                         shape: "backdrop",
                         preferThumb: true,
-                        context: 'tv',
+                        showTitle: false,
+                        scalable: true,
                         showItemCounts: true,
-                        cardLayout: true,
+                        centerText: true,
-                        showTitle: true,
+                        cardLayout: true
-                        lazy: true
                     });
                 }
                 else if (viewStyle == "PosterCard") {
-                    html = libraryBrowser.getPosterViewHtml({
+                    cardBuilder.buildCards(result.Items, {
-                        items: result.Items,
+                        itemsContainer: elem,
-                        shape: "portrait",
+                        shape: "auto",
-                        context: 'tv',
+                        showTitle: false,
+                        scalable: true,
                         showItemCounts: true,
-                        lazy: true,
+                        centerText: true,
-                        cardLayout: true,
+                        cardLayout: true
-                        showTitle: true
                     });
                 }
                 else if (viewStyle == "Poster") {
-                    html = libraryBrowser.getPosterViewHtml({
+                    cardBuilder.buildCards(result.Items, {
-                        items: result.Items,
+                        itemsContainer: elem,
-                        shape: "portrait",
+                        shape: "auto",
-                        context: 'tv',
+                        showTitle: false,
-                        centerText: true,
+                        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();
@@ -121,7 +118,7 @@
             return getPageData(tabContent).view;
         };
 
-        self.setCurrentViewStyle = function(viewStyle) {
+        self.setCurrentViewStyle = function (viewStyle) {
             getPageData(tabContent).view = viewStyle;
             libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);
             fullyReload();

dashboard-ui/scripts/tvlatest.js

@@ -1,4 +1,4 @@
-define(['components/categorysyncbuttons', 'components/groupedcards'], function (categorysyncbuttons, groupedcards) {
+define(['components/categorysyncbuttons', 'components/groupedcards', 'cardBuilder'], function (categorysyncbuttons, groupedcards, cardBuilder) {
 
     function getView() {
 
@@ -35,7 +35,7 @@
 
             if (view == 'ThumbCard') {
 
-                html += LibraryBrowser.getPosterViewHtml({
+                html += cardBuilder.getCardsHtml({
                     items: items,
                     shape: "backdrop",
                     preferThumb: true,
@@ -51,7 +51,7 @@
 
             } else if (view == 'Thumb') {
 
-                html += LibraryBrowser.getPosterViewHtml({
+                html += cardBuilder.getCardsHtml({
                     items: items,
                     shape: "backdrop",
                     preferThumb: true,

dashboard-ui/scripts/tvrecommended.js

@@ -1,19 +1,9 @@
-define(['libraryBrowser', 'components/categorysyncbuttons', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser, categorysyncbuttons) {
+define(['libraryBrowser', 'components/categorysyncbuttons', 'cardBuilder', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser, categorysyncbuttons, cardBuilder) {
 
     return function (view, params) {
 
         var self = this;
 
-        function getView() {
-
-            return 'Thumb';
-        }
-
-        function getResumeView() {
-
-            return 'Poster';
-        }
-
         function reload() {
 
             Dashboard.showLoadingMsg();
@@ -43,41 +33,19 @@
                     view.querySelector('.noNextUpItems').classList.remove('hide');
                 }
 
-                var viewStyle = getView();
+                var container = view.querySelector('#nextUpItems');
-                var html = '';
+                cardBuilder.buildCards(result.Items, {
+                    itemsContainer: container,
+                    preferThumb: true,
+                    shape: "backdrop",
+                    scalable: true,
+                    showTitle: true,
+                    showParentTitle: true,
+                    overlayText: false,
+                    centerText: true,
+                    overlayPlayButton: AppInfo.enableAppLayouts
+                });
 
-                if (viewStyle == 'ThumbCard') {
-
-                    html += libraryBrowser.getPosterViewHtml({
-                        items: result.Items,
-                        shape: "backdrop",
-                        showTitle: true,
-                        preferThumb: true,
-                        showParentTitle: true,
-                        lazy: true,
-                        cardLayout: true,
-                        showDetailsMenu: true
-                    });
-
-                } else if (viewStyle == 'Thumb') {
-
-                    html += libraryBrowser.getPosterViewHtml({
-                        items: result.Items,
-                        shape: "backdrop",
-                        showTitle: true,
-                        showParentTitle: true,
-                        overlayText: false,
-                        lazy: true,
-                        preferThumb: true,
-                        showDetailsMenu: true,
-                        centerText: true,
-                        overlayPlayButton: AppInfo.enableAppLayouts
-                    });
-                }
-
-                var elem = view.querySelector('#nextUpItems');
-                elem.innerHTML = html;
-                ImageLoader.lazyChildren(elem);
                 Dashboard.hideLoadingMsg();
             });
         }
@@ -120,50 +88,33 @@
                     view.querySelector('#resumableSection').classList.add('hide');
                 }
 
-                var viewStyle = getResumeView();
+                var container = view.querySelector('#resumableItems');
-                var html = '';
+                cardBuilder.buildCards(result.Items, {
-
+                    itemsContainer: container,
-                if (viewStyle == 'PosterCard') {
+                    preferThumb: true,
-
+                    shape: getThumbShape(),
-                    html += libraryBrowser.getPosterViewHtml({
+                    scalable: true,
-                        items: result.Items,
+                    showTitle: true,
-                        shape: getThumbShape(),
+                    showParentTitle: true,
-                        showTitle: true,
+                    overlayText: false,
-                        showParentTitle: true,
+                    centerText: true,
-                        lazy: true,
+                    overlayPlayButton: true
-                        cardLayout: true,
+                });
-                        showDetailsMenu: true,
-                        preferThumb: true
-                    });
-
-                } else if (viewStyle == 'Poster') {
-
-                    html += libraryBrowser.getPosterViewHtml({
-                        items: result.Items,
-                        shape: getThumbShape(),
-                        showTitle: true,
-                        showParentTitle: true,
-                        lazy: true,
-                        showDetailsMenu: true,
-                        overlayPlayButton: true,
-                        preferThumb: true,
-                        centerText: true
-                    });
-                }
-
-                var elem = view.querySelector('#resumableItems');
-                elem.innerHTML = html;
-                ImageLoader.lazyChildren(elem);
             });
         }
 
         self.initTab = function () {
 
             var tabContent = self.tabContent;
+
+            var resumableItemsContainer = tabContent.querySelector('#resumableItems');
+
             if (enableScrollX()) {
-                tabContent.querySelector('#resumableItems').classList.add('hiddenScrollX');
+                resumableItemsContainer.classList.add('hiddenScrollX');
+                resumableItemsContainer.classList.remove('verticalItemsContainer');
             } else {
-                tabContent.querySelector('#resumableItems').classList.remove('hiddenScrollX');
+                resumableItemsContainer.classList.remove('hiddenScrollX');
+                resumableItemsContainer.classList.add('verticalItemsContainer');
             }
 
             categorysyncbuttons.init(tabContent);

dashboard-ui/scripts/tvstudios.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: "Series",
                     Recursive: true,
-                    Fields: "DateCreated,ItemCounts",
+                    Fields: "DateCreated,ItemCounts,PrimaryImageAspectRatio",
                     StartIndex: 0
                 }
             };
@@ -42,24 +42,18 @@
 
         promise.then(function (result) {
 
-            var html = '';
+            var elem = context.querySelector('#items');
-
+            cardBuilder.buildCards(result.Items, {
-            html += libraryBrowser.getPosterViewHtml({
+                itemsContainer: elem,
-                items: result.Items,
                 shape: "backdrop",
-                showTitle: false,
-                context: 'tv',
                 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();
         });
     }

dashboard-ui/scripts/tvupcoming.js

@@ -1,4 +1,4 @@
-define(['datetime', 'libraryBrowser', 'scrollStyles', 'emby-itemscontainer'], function (datetime, libraryBrowser) {
+define(['datetime', 'libraryBrowser', 'cardBuilder', 'scrollStyles', 'emby-itemscontainer'], function (datetime, libraryBrowser, cardBuilder) {
 
     function getUpcomingPromise(context, params) {
 
@@ -104,10 +104,10 @@
             if (enableScrollX()) {
                 html += '<div is="emby-itemscontainer" class="itemsContainer hiddenScrollX">';
             } else {
-                html += '<div is="emby-itemscontainer" class="itemsContainer">';
+                html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
             }
 
-            html += libraryBrowser.getPosterViewHtml({
+            html += cardBuilder.getCardsHtml({
                 items: group.items,
                 showLocationTypeIndicator: false,
                 shape: getThumbShape(),

dashboard-ui/secondaryitems.html

@@ -5,7 +5,7 @@
             <div class="listTopPaging">
             </div>
         </div>
-        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
+        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer verticalItemsContainer" style="text-align:center;"></div>
     </div>
 
 </div>

dashboard-ui/tv.html

@@ -34,7 +34,7 @@
                     <span>${ButtonSync}</span>
                 </button>
             </div>
-            <div is="emby-itemscontainer" id="nextUpItems" class="itemsContainer">
+            <div is="emby-itemscontainer" id="nextUpItems" class="itemsContainer verticalItemsContainer">
             </div>
         </div>
         <p class="noNextUpItems" style="display: none;">${NoNextUpItemsMessage}</p>
@@ -48,7 +48,7 @@
                     <span>${ButtonSync}</span>
                 </button>
             </div>
-            <div is="emby-itemscontainer" id="latestEpisodes" class="itemsContainer">
+            <div is="emby-itemscontainer" id="latestEpisodes" class="itemsContainer verticalItemsContainer">
             </div>
         </div>
     </div>
@@ -86,7 +86,7 @@
             <button is="paper-icon-button-light" class="btnSort autoSize" title="${ButtonSort}"><i class="md-icon">sort_by_alpha</i></button>
             <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button>
         </div>
-        <div is="emby-itemscontainer" class="itemsContainer">
+        <div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">
         </div>
         <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
             <div class="paging"></div>
@@ -96,14 +96,14 @@
         <div style="text-align: center; display: flex; align-items: center; justify-content: center;">
             <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><i class="md-icon">view_comfy</i></button>
         </div>
-        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer"></div>
+        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer verticalItemsContainer"></div>
     </div>
     <div class="pageTabContent ehsContent" id="studiosTab" data-index="6">
         <div class="viewSettings">
             <div class="listTopPaging">
             </div>
         </div>
-        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer" style="text-align: center;"></div>
+        <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer verticalItemsContainer" style="text-align: center;"></div>
     </div>
 
     <div data-role="content">