update display of active recordings

dashboard-ui/bower_components/emby-webcomponents/.bower.json

@@ -14,12 +14,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.4.294",
+  "version": "1.4.295",
-  "_release": "1.4.294",
+  "_release": "1.4.295",
   "_resolution": {
     "type": "version",
-    "tag": "1.4.294",
+    "tag": "1.4.295",
-    "commit": "261889a750a63f93e456622c6882d18bb9248626"
+    "commit": "1cfe41bab16e66d13ef8a613b251ee3edccde3a8"
   },
   "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
   "_target": "^1.2.1",

dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css

@@ -348,15 +348,21 @@ button {
 
 .cardOverlayButton {
     color: #fff !important;
-    background-color: rgba(0,0,0,.7) !important;
+    background-color: rgba(0,0,0,.8) !important;
     border-radius: 500px;
     position: absolute;
     bottom: 0;
     right: 0;
     margin: 0 .35em .5em 0;
     z-index: 1;
+    /*opacity: 0;
+    transition: opacity 0.5s ease-in; /* vendorless fallback */ */;
 }
 
+    /*.card:hover .cardOverlayButton {
+    opacity: 1;
+}*/
+
     .cardOverlayButton:hover {
         background-color: rgba(0,0,0,.9) !important;
         transition: background-color .5s ease-out;
@@ -625,10 +631,6 @@ button {
     width: 16.66666666666666667%;
 }
 
-.layout-tv .personCard-scalable {
-    width: 14.285714285714285714285714285714%;
-}
-
 
 @media all and (min-width: 1600px) {
 

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

@@ -286,6 +286,10 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
                 className += ' ' + options.shape + 'Card';
             }
 
+            if (options.cardCssClass) {
+                className += ' ' + options.cardCssClass;
+            }
+
             var html = '';
             var itemsInRow = 0;
 
@@ -543,7 +547,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
                     tag: item.SeriesThumbImageTag
                 });
 
-            } else if (options.preferThumb && item.ParentThumbItemId && options.inheritThumb !== false) {
+            } else if (options.preferThumb && item.ParentThumbItemId && options.inheritThumb !== false && item.MediaType !== 'Photo') {
 
                 imgUrl = apiClient.getScaledImageUrl(item.ParentThumbItemId, {
                     type: "Thumb",
@@ -707,7 +711,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
             return 'defaultCardColor' + getDefaultColorIndex(str);
         }
 
-        function getCardTextLines(lines, cssClass, forceLines, isOuterFooter, cardLayout) {
+        function getCardTextLines(lines, cssClass, forceLines, isOuterFooter, cardLayout, addRightMargin) {
 
             var html = '';
 
@@ -723,7 +727,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
                     currentCssClass += ' cardText-secondary';
                 }
 
-                if (isOuterFooter && cardLayout) {
+                if (addRightMargin) {
                     currentCssClass += ' cardText-rightmargin';
                 }
 
@@ -754,16 +758,13 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
 
             if (isOuterFooter && options.cardLayout && !layoutManager.tv) {
 
-                if (options.cardFooterAside === 'logo') {
+                if (options.cardFooterAside !== 'none') {
-
-                }
-                else if (options.cardFooterAside !== 'none') {
                     var moreIcon = appHost.moreIcon === 'dots-horiz' ? '' : '';
                     html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions autoSize" data-action="menu"><i class="md-icon">' + moreIcon + '</i></button>';
                 }
             }
 
-            var cssClass = options.centerText && !options.cardLayout ? "cardText cardTextCentered" : "cardText";
+            var cssClass = options.centerText ? "cardText cardTextCentered" : "cardText";
 
             var lines = [];
             var parentTitleUnderneath = item.Type === 'MusicAlbum' || item.Type === 'Audio' || item.Type === 'MusicVideo';
@@ -980,13 +981,24 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
                         lines.push(item.ChannelName || '');
                     }
                 }
+
+                if (options.showPersonRoleOrType) {
+                    if (item.Role) {
+                        lines.push('as ' + item.Role);
+                    }
+                    else if (item.Type) {
+                        lines.push(globalize.translate('core#' + item.Type));
+                    } else {
+                        lines.push('');
+                    }
+                }
             }
 
             if ((showTitle || !imgUrl) && forceName && overlayText && lines.length === 1) {
                 lines = [];
             }
 
-            html += getCardTextLines(lines, cssClass, !options.overlayText, isOuterFooter, options.cardLayout);
+            html += getCardTextLines(lines, cssClass, !options.overlayText, isOuterFooter, options.cardLayout, isOuterFooter && options.cardLayout && !options.centerText);
 
             if (progressHtml) {
                 html += progressHtml;
@@ -1166,7 +1178,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
             if (coveredImage) {
                 cardImageContainerClass += ' coveredImage';
 
-                if (item.MediaType === 'Photo' || item.Type === 'PhotoAlbum' || item.Type === 'Folder' || item.ProgramInfo || item.Type === 'Program') {
+                if (item.MediaType === 'Photo' || item.Type === 'PhotoAlbum' || item.Type === 'Folder' || item.ProgramInfo || item.Type === 'Program' || item.Type === 'Recording') {
                     cardImageContainerClass += ' coveredImage-noScale';
                 }
             }
@@ -1364,7 +1376,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
             var channelIdData = item.ChannelId ? (' data-channelid="' + item.ChannelId + '"') : '';
             var contextData = options.context ? (' data-context="' + options.context + '"') : '';
 
-            return '<' + tagName + ' data-index="' + index + '"' + timerAttributes + actionAttribute + ' data-isfolder="' + (item.IsFolder || false) + '" data-serverid="' + (item.ServerId) + '" data-id="' + (item.Id || item.ItemId) + '" data-type="' + item.Type + '"' + mediaTypeData + collectionTypeData + channelIdData + positionTicksData + collectionIdData + playlistIdData + contextData + ' data-prefix="' + prefix + '" class="' + className + '">' + cardImageContainerOpen + innerCardFooter + cardImageContainerClose + cardContentClose + overlayButtons + cardScalableClose + outerCardFooter + cardBoxClose + '</' + tagName + '>';
+            return '<' + tagName + ' data-index="' + index + '"' + timerAttributes + actionAttribute + ' data-isfolder="' + (item.IsFolder || false) + '" data-serverid="' + (item.ServerId || options.serverId) + '" data-id="' + (item.Id || item.ItemId) + '" data-type="' + item.Type + '"' + mediaTypeData + collectionTypeData + channelIdData + positionTicksData + collectionIdData + playlistIdData + contextData + ' data-prefix="' + prefix + '" class="' + className + '">' + cardImageContainerOpen + innerCardFooter + cardImageContainerClose + cardContentClose + overlayButtons + cardScalableClose + outerCardFooter + cardBoxClose + '</' + tagName + '>';
         }
 
         function buildCards(items, options) {

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

@@ -1,119 +1,17 @@
-define(['imageLoader', 'itemShortcuts', 'connectionManager', 'layoutManager'], function (imageLoader, itemShortcuts, connectionManager, layoutManager) {
+define(['cardBuilder'], function (cardBuilder) {
     'use strict';
 
-    function buildPeopleCardsHtml(people, options) {
-
-        var className = 'card ' + (options.shape || 'portrait') + 'Card personCard';
-
-        if (options.block || options.rows) {
-            className += ' block';
-        }
-
-        var html = '';
-        var itemsInRow = 0;
-
-        var serverId = options.serverId;
-        var apiClient = connectionManager.getApiClient(serverId);
-
-        for (var i = 0, length = people.length; i < length; i++) {
-
-            if (options.rows && itemsInRow === 0) {
-                html += '<div class="cardColumn">';
-            }
-
-            var person = people[i];
-
-            html += buildPersonCard(person, apiClient, serverId, options, className);
-            itemsInRow++;
-
-            if (options.rows && itemsInRow >= options.rows) {
-                itemsInRow = 0;
-                html += '</div>';
-            }
-        }
-
-        return html;
-    }
-
-    function getImgUrl(person, maxWidth, apiClient) {
-
-        if (person.PrimaryImageTag) {
-
-            return apiClient.getScaledImageUrl(person.Id, {
-
-                maxWidth: maxWidth,
-                tag: person.PrimaryImageTag,
-                type: "Primary"
-            });
-        }
-
-        return null;
-    }
-
-    function buildPersonCard(person, apiClient, serverId, options, className) {
-
-        className += " itemAction scalableCard personCard-scalable";
-        className += " " + (options.shape || 'portrait') + 'Card-scalable';
-
-        var imgUrl = getImgUrl(person, options.width, apiClient);
-
-        var cardImageContainerClass = 'cardImageContainer';
-        if (options.coverImage) {
-            cardImageContainerClass += ' coveredImage';
-        }
-        var cardImageContainer = imgUrl ? ('<div class="' + cardImageContainerClass + ' lazy" data-src="' + imgUrl + '">') : ('<div class="' + cardImageContainerClass + '">');
-
-        if (!imgUrl) {
-            cardImageContainer += '<i class="md-icon cardImageIcon">person</i>';
-        }
-
-        var nameHtml = '';
-        nameHtml += '<div class="cardText cardTextCentered">' + person.Name + '</div>';
-
-        if (person.Role) {
-            nameHtml += '<div class="cardText cardText-secondary cardTextCentered">as ' + person.Role + '</div>';
-        }
-        else if (person.Type) {
-            nameHtml += '<div class="cardText cardText-secondary cardTextCentered">' + Globalize.translate('core#' + person.Type) + '</div>';
-        } else {
-            nameHtml += '<div class="cardText cardText-secondary cardTextCentered">&nbsp;</div>';
-        }
-
-        var cardBoxCssClass = 'visualCardBox cardBox';
-
-        if (layoutManager.tv) {
-            cardBoxCssClass += ' cardBox-focustransform';
-        }
-
-        var html = '<button type="button" data-isfolder="' + person.IsFolder + '" data-type="' + person.Type + '" data-action="link" data-id="' + person.Id + '" data-serverid="' + serverId + '" raised class="' + className + '"><div class="' + cardBoxCssClass + '"><div class="cardScalable visualCardBox-cardScalable"><div class="cardPadder-portrait"></div><div class="cardContent">' + cardImageContainer + '</div></div></div><div class="cardFooter visualCardBox-cardFooter">' + nameHtml + '</div></div></button>';
-
-        return html;
-    }
-
     function buildPeopleCards(items, options) {
 
-        if (options.parentContainer) {
+        options = Object.assign(options || {}, {
-            // Abort if the container has been disposed
+            cardLayout: true,
-            if (!document.body.contains(options.parentContainer)) {
+            centerText: true,
-                return;
+            showTitle: true,
-            }
+            cardFooterAside: 'none',
-
+            showPersonRoleOrType: true,
-            if (items.length) {
+            cardCssClass: 'personCard'
-                options.parentContainer.classList.remove('hide');
+        });
-            } else {
+        cardBuilder.buildCards(items, options);
-                options.parentContainer.classList.add('hide');
-                return;
-            }
-        }
-
-        var html = buildPeopleCardsHtml(items, options);
-
-        options.itemsContainer.innerHTML = html;
-
-        imageLoader.lazyChildren(options.itemsContainer);
-
-        itemShortcuts.off(options.itemsContainer);
-        itemShortcuts.on(options.itemsContainer);
     }
 
     return {

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

@@ -353,9 +353,9 @@
             if (item.Type == 'SeriesTimer') {
                 return '<i class="md-icon programIcon seriesTimerIcon">&#xE062;</i>';
             }
-            else if (item.TimerId) {
+            else if (item.TimerId || item.SeriesTimerId) {
 
-                status = item.Status;
+                status = item.Status || 'Cancelled';
             }
             else if (item.Type == 'Timer') {
 

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

@@ -103,9 +103,9 @@ define(['css!./indicators.css', 'material-icons'], function () {
         if (item.Type == 'SeriesTimer') {
             return '<i class="md-icon timerIndicator indicatorIcon">&#xE062;</i>';
         }
-        else if (item.TimerId) {
+        else if (item.TimerId || item.SeriesTimerId) {
 
-            status = item.Status;
+            status = item.Status || 'Cancelled';
         }
         else if (item.Type == 'Timer') {
 

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

@@ -7,9 +7,9 @@ define(['datetime', 'globalize', 'embyRouter', 'itemHelper', 'material-icons', '
         if (item.Type == 'SeriesTimer') {
             return '<i class="md-icon mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">&#xE062;</i>';
         }
-        else if (item.TimerId) {
+        else if (item.TimerId || item.SeriesTimerId) {
 
-            status = item.Status;
+            status = item.Status || 'Cancelled';
         }
         else if (item.Type == 'Timer') {
 

dashboard-ui/bower_components/hlsjs/.bower.json

@@ -1,6 +1,6 @@
 {
   "name": "hls.js",
-  "version": "0.5.49",
+  "version": "0.5.50",
   "license": "Apache-2.0",
   "description": "Media Source Extension - HLS library, by/for Dailymotion",
   "homepage": "https://github.com/dailymotion/hls.js",
@@ -16,11 +16,11 @@
     "test",
     "tests"
   ],
-  "_release": "0.5.49",
+  "_release": "0.5.50",
   "_resolution": {
     "type": "version",
-    "tag": "v0.5.49",
+    "tag": "v0.5.50",
-    "commit": "faf1c90b096abf152cce4ba107fbd5511d44a998"
+    "commit": "854f98fa81601076a44e4849a45cbd65dcc0c3ee"
   },
   "_source": "git://github.com/dailymotion/hls.js.git",
   "_target": "~0.5.7",

dashboard-ui/bower_components/hlsjs/bower.json

@@ -1,6 +1,6 @@
 {
   "name": "hls.js",
-  "version": "0.5.49",
+  "version": "0.5.50",
   "license": "Apache-2.0",
   "description": "Media Source Extension - HLS library, by/for Dailymotion",
   "homepage": "https://github.com/dailymotion/hls.js",

dashboard-ui/bower_components/hlsjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hls.js",
-  "version": "0.5.49",
+  "version": "0.5.50",
   "license": "Apache-2.0",
   "description": "Media Source Extension - HLS library, by/for Dailymotion",
   "homepage": "https://github.com/dailymotion/hls.js",

dashboard-ui/css/librarybrowser.css

@@ -124,14 +124,14 @@
     }
 }
 
-@media all and (min-width: 1200px) {
+@media all and (min-width: 600px) {
 
     .ehsContent:not(.fullWidth), .ehsContent .pageTabContent {
-        width: 96%;
+        width: 98%;
     }
 }
 
-@media all and (min-width: 2560px) {
+@media all and (min-width: 1200px) {
 
     .ehsContent:not(.fullWidth), .ehsContent .pageTabContent {
         width: 96%;

dashboard-ui/itemdetails.html

@@ -104,7 +104,7 @@
                 <h1 id="peopleHeader">
                     ${HeaderCastCrew}
                 </h1>
-                <div id="castContent" class="itemsContainer"></div>
+                <div id="castContent" is="emby-itemscontainer" class="itemsContainer"></div>
                 <button is="emby-button" type="button" class="raised more morePeople hide">${ButtonMore}</button>
             </div>
 

dashboard-ui/livetv.html

@@ -30,6 +30,11 @@
     </div>
 
     <div class="is-active pageTabContent ehsContent" id="suggestionsTab" data-index="0">
+        <div id="activeRecordings" class="homePageSection hide">
+            <h1 class="listHeader">${HeaderActiveRecordings}</h1>
+            <div is="emby-itemscontainer" class="recordingItems itemsContainer"></div>
+            <br />
+        </div>
         <div id="activePrograms" class="homePageSection">
             <div>
                 <h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderWhatsOnTV}</h1>

dashboard-ui/scripts/homenextup.js

@@ -36,7 +36,7 @@
                 lazy: true,
                 preferThumb: true,
                 showDetailsMenu: true,
-                centerText: true,
+                centerText: !supportsImageAnalysis,
                 overlayPlayButton: AppInfo.enableAppLayouts && !supportsImageAnalysis,
                 context: 'home-nextup',
                 cardLayout: supportsImageAnalysis,

dashboard-ui/scripts/homeupcoming.js

@@ -118,7 +118,7 @@
                 preferThumb: true,
                 lazy: true,
                 showDetailsMenu: true,
-                centerText: true,
+                centerText: !supportsImageAnalysis,
                 context: 'home-upcoming',
                 overlayMoreButton: !supportsImageAnalysis,
                 showParentTitle: true,

dashboard-ui/scripts/livetvschedule.js

@@ -1,4 +1,47 @@
-define(['scripts/livetvcomponents', 'emby-button', 'emby-itemscontainer'], function () {
+define(['cardBuilder', 'scripts/livetvcomponents', 'emby-button', 'emby-itemscontainer'], function (cardBuilder) {
+
+    function enableScrollX() {
+        return browserInfo.mobile && AppInfo.enableAppLayouts;
+    }
+
+    function renderRecordings(elem, recordings, cardOptions) {
+
+        if (recordings.length) {
+            elem.classList.remove('hide');
+        } else {
+            elem.classList.add('hide');
+        }
+
+        var recordingItems = elem.querySelector('.recordingItems');
+
+        if (enableScrollX()) {
+            recordingItems.classList.add('hiddenScrollX');
+            recordingItems.classList.remove('vertical-wrap');
+        } else {
+            recordingItems.classList.remove('hiddenScrollX');
+            recordingItems.classList.add('vertical-wrap');
+        }
+
+        recordingItems.innerHTML = cardBuilder.getCardsHtml(Object.assign({
+            items: recordings,
+            shape: (enableScrollX() ? 'autooverflow' : 'auto'),
+            showTitle: true,
+            showParentTitle: true,
+            coverImage: true,
+            lazy: true,
+            cardLayout: true,
+            vibrant: true,
+            allowBottomPadding: !enableScrollX(),
+            preferThumb: 'auto'
+
+        }, cardOptions || {}));
+
+        ImageLoader.lazyChildren(recordingItems);
+    }
+
+    function getBackdropShape() {
+        return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
+    }
 
     function renderActiveRecordings(context, promise) {
 
@@ -9,8 +52,18 @@
                 result.Items = [];
             }
 
-            renderTimers(context.querySelector('#activeRecordings'), result.Items, {
+            renderRecordings(context.querySelector('#activeRecordings'), result.Items, {
-                indexByDate: false
+                shape: getBackdropShape(),
+                showParentTitle: false,
+                showTitle: true,
+                showAirTime: true,
+                showAirEndTime: true,
+                showChannelName: true,
+                cardLayout: true,
+                vibrant: true,
+                preferThumb: true,
+                coverImage: true,
+                overlayText: false
             });
         });
     }
@@ -54,8 +107,13 @@
         });
 
         self.preRender = function () {
-            activeRecordingsPromise = ApiClient.getLiveTvTimers({
+            activeRecordingsPromise = ApiClient.getLiveTvRecordings({
-                IsActive: true
+
+                UserId: Dashboard.getCurrentUserId(),
+                IsInProgress: true,
+                Fields: 'CanDelete,PrimaryImageAspectRatio,BasicSyncInfo',
+                EnableTotalRecordCount: false,
+                EnableImageTypes: "Primary,Thumb,Backdrop"
             });
 
             upcomingRecordingsPromise = ApiClient.getLiveTvTimers({

dashboard-ui/scripts/livetvsuggested.js

@@ -4,6 +4,70 @@
         return browserInfo.mobile && AppInfo.enableAppLayouts;
     }
 
+    function renderRecordings(elem, recordings, cardOptions) {
+
+        if (recordings.length) {
+            elem.classList.remove('hide');
+        } else {
+            elem.classList.add('hide');
+        }
+
+        var recordingItems = elem.querySelector('.recordingItems');
+
+        if (enableScrollX()) {
+            recordingItems.classList.add('hiddenScrollX');
+            recordingItems.classList.remove('vertical-wrap');
+        } else {
+            recordingItems.classList.remove('hiddenScrollX');
+            recordingItems.classList.add('vertical-wrap');
+        }
+
+        recordingItems.innerHTML = cardBuilder.getCardsHtml(Object.assign({
+            items: recordings,
+            shape: (enableScrollX() ? 'autooverflow' : 'auto'),
+            showTitle: true,
+            showParentTitle: true,
+            coverImage: true,
+            lazy: true,
+            cardLayout: true,
+            vibrant: true,
+            allowBottomPadding: !enableScrollX(),
+            preferThumb: 'auto'
+
+        }, cardOptions || {}));
+
+        ImageLoader.lazyChildren(recordingItems);
+    }
+
+    function getBackdropShape() {
+        return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
+    }
+
+    function renderActiveRecordings(context, promise) {
+
+        promise.then(function (result) {
+
+            // The IsActive param is new, so handle older servers that don't support it
+            if (result.Items.length && result.Items[0].Status != 'InProgress') {
+                result.Items = [];
+            }
+
+            renderRecordings(context.querySelector('#activeRecordings'), result.Items, {
+                shape: getBackdropShape(),
+                showParentTitle: false,
+                showTitle: true,
+                showAirTime: true,
+                showAirEndTime: true,
+                showChannelName: true,
+                cardLayout: true,
+                vibrant: true,
+                preferThumb: true,
+                coverImage: true,
+                overlayText: false
+            });
+        });
+    }
+
     function getPortraitShape() {
         return enableScrollX() ? 'overflowPortrait' : 'portrait';
     }
@@ -43,6 +107,14 @@
 
         loadRecommendedPrograms(page);
 
+        renderActiveRecordings(page, ApiClient.getLiveTvRecordings({
+            UserId: Dashboard.getCurrentUserId(),
+            IsInProgress: true,
+            Fields: 'CanDelete,PrimaryImageAspectRatio,BasicSyncInfo',
+            EnableTotalRecordCount: false,
+            EnableImageTypes: "Primary,Thumb,Backdrop"
+        }));
+
         ApiClient.getLiveTvRecommendedPrograms({
 
             userId: Dashboard.getCurrentUserId(),
@@ -122,7 +194,7 @@
             shape: shape || (enableScrollX() ? 'overflowBackdrop' : 'backdrop'),
             showParentTitleOrTitle: true,
             showTitle: false,
-            centerText: true,
+            centerText: !supportsImageAnalysis,
             coverImage: true,
             overlayText: false,
             lazy: true,
@@ -134,7 +206,6 @@
             showChannelName: true,
             vibrant: true,
             cardLayout: supportsImageAnalysis
-            //cardFooterAside: 'logo'
         });
 
         var elem = page.querySelector('.' + sectionClass);
@@ -172,9 +243,6 @@
         var tabControllers = [];
         var renderedTabs = [];
 
-        var tabControllers = [];
-        var renderedTabs = [];
-
         function getTabController(page, index, callback) {
 
             var depends = [];
@@ -247,7 +315,7 @@
 
                 if (renderedTabs.indexOf(index) == -1) {
 
-                    if (index < 2) {
+                    if (index === 1) {
                         renderedTabs.push(index);
                     }
                     controller.renderTab();

dashboard-ui/scripts/moviegenres.js

@@ -78,7 +78,7 @@
                         showTitle: true,
                         scalable: true,
                         showItemCounts: true,
-                        centerText: true,
+                        centerText: false,
                         cardLayout: true
                     });
                 }
@@ -89,7 +89,7 @@
                         showTitle: true,
                         scalable: true,
                         showItemCounts: true,
-                        centerText: true,
+                        centerText: false,
                         cardLayout: true
                     });
                 }

dashboard-ui/scripts/musicrecommended.js

@@ -45,7 +45,7 @@
                 showTitle: true,
                 showParentTitle: true,
                 lazy: true,
-                centerText: true,
+                centerText: !supportsImageAnalysis,
                 overlayPlayButton: !supportsImageAnalysis,
                 allowBottomPadding: !enableScrollX(),
                 cardLayout: supportsImageAnalysis,
@@ -97,7 +97,7 @@
                 showParentTitle: true,
                 action: 'instantmix',
                 lazy: true,
-                centerText: true,
+                centerText: !supportsImageAnalysis,
                 overlayMoreButton: !supportsImageAnalysis,
                 allowBottomPadding: !enableScrollX(),
                 cardLayout: supportsImageAnalysis,
@@ -149,7 +149,7 @@
                 showParentTitle: true,
                 action: 'instantmix',
                 lazy: true,
-                centerText: true,
+                centerText: !supportsImageAnalysis,
                 overlayMoreButton: !supportsImageAnalysis,
                 allowBottomPadding: !enableScrollX(),
                 cardLayout: supportsImageAnalysis,
@@ -197,7 +197,7 @@
                 lazy: true,
                 coverImage: true,
                 showItemCounts: true,
-                centerText: true,
+                centerText: !supportsImageAnalysis,
                 overlayPlayButton: !supportsImageAnalysis,
                 allowBottomPadding: !enableScrollX(),
                 cardLayout: supportsImageAnalysis,

dashboard-ui/scripts/sections.js

@@ -572,8 +572,7 @@
                     centerText: true,
                     allowBottomPadding: !enableScrollX(),
                     cardLayout: supportsImageAnalysis,
-                    vibrant: supportsImageAnalysis,
+                    vibrant: supportsImageAnalysis
-                    cardFooterAside: 'none'
                 });
                 html += '</div>';
             }
@@ -662,7 +661,7 @@
         });
     }
 
-    function loadLatestLiveTvRecordings(elem, userId, index) {
+    function loadLatestLiveTvRecordings(elem, userId) {
 
         return ApiClient.getLiveTvRecordings({
 
@@ -678,10 +677,8 @@
 
             if (result.Items.length) {
 
-                var cssClass = index !== 0 ? 'listHeader' : 'listHeader';
-
                 html += '<div>';
-                html += '<h1 style="display:inline-block; vertical-align:middle;" class="' + cssClass + '">' + Globalize.translate('HeaderLatestTvRecordings') + '</h1>';
+                html += '<h1 style="display:inline-block; vertical-align:middle;" class="listHeader">' + Globalize.translate('HeaderLatestTvRecordings') + '</h1>';
                 html += '<a href="livetv.html?tab=3" onclick="LibraryBrowser.showTab(\'livetv.html\',3);" 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>';
             }
@@ -708,8 +705,7 @@
                 allowBottomPadding: !enableScrollX(),
                 preferThumb: true,
                 cardLayout: supportsImageAnalysis,
-                vibrant: supportsImageAnalysis,
+                vibrant: supportsImageAnalysis
-                cardFooterAside: 'none'
 
             });
             html += '</div>';

dashboard-ui/scripts/tvgenres.js

@@ -78,7 +78,7 @@
                         showTitle: true,
                         scalable: true,
                         showItemCounts: true,
-                        centerText: true,
+                        centerText: false,
                         cardLayout: true
                     });
                 }
@@ -89,7 +89,7 @@
                         showTitle: true,
                         scalable: true,
                         showItemCounts: true,
-                        centerText: true,
+                        centerText: false,
                         cardLayout: true
                     });
                 }

dashboard-ui/scripts/tvrecommended.js

@@ -45,11 +45,10 @@
                     showTitle: true,
                     showParentTitle: true,
                     overlayText: false,
-                    centerText: true,
+                    centerText: !supportsImageAnalysis,
                     overlayPlayButton: true,
                     cardLayout: supportsImageAnalysis,
-                    vibrant: supportsImageAnalysis,
+                    vibrant: supportsImageAnalysis
-                    cardFooterAside: 'none'
                 });
 
                 Dashboard.hideLoadingMsg();
@@ -107,9 +106,10 @@
                     showTitle: true,
                     showParentTitle: true,
                     overlayText: false,
-                    centerText: true,
+                    centerText: false,
                     overlayPlayButton: true,
-                    allowBottomPadding: allowBottomPadding
+                    allowBottomPadding: allowBottomPadding,
+                    cardLayout: true
                 });
             });
         }

dashboard-ui/scripts/tvupcoming.js

@@ -120,7 +120,7 @@
                 preferThumb: true,
                 lazy: true,
                 showDetailsMenu: true,
-                centerText: true,
+                centerText: !supportsImageAnalysis,
                 showParentTitle: true,
                 allowBottomPadding: allowBottomPadding,
                 cardLayout: supportsImageAnalysis,