fix tv program cards

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

@@ -72,8 +72,6 @@ button.card {
     margin: 0;
     transition: none !important;
     border: 3px solid transparent;
-    /* Needed to keep the cardOverlayTarget from showing outside the bounds while it animates */
-    overflow: hidden;
 }
 
 .layout-tv .cardBox {
@@ -239,13 +237,6 @@ button.cardImageContainer {
         opacity: .6;
     }
 
-/*.visualCardBox {
-    -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);
-}*/
-
 .visualCardBox .cardScalable, .visualCardBox .cardFooter {
     background-color: #222326;
 }
@@ -253,6 +244,10 @@ button.cardImageContainer {
 .visualCardBox .cardFooter {
     border-bottom-left-radius: 3px;
     border-bottom-right-radius: 3px;
+    -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);
 }
 
 .innerCardFooter {

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

@@ -426,6 +426,9 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
 
         function getCardImageUrl(item, apiClient, options) {
 
+            var imageItem = item.ProgramInfo || item;
+            item = imageItem;
+
             var width = options.width;
             var height = null;
             var primaryImageAspectRatio = imageLoader.getPrimaryImageAspectRatio([item]);

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

@@ -69,16 +69,26 @@
     color: #333;
 }
 
-.fullSyncIndicator {
+.indicatorIcon {
-    background: #cc3333;
-}
-
-.playedIndicatorIcon, .syncIndicator {
     width: 22px;
     height: 22px;
     font-size: 22px;
 }
 
+.fullSyncIndicator {
+    color: #673AB7;
+    padding: 0;
+    border: 4px solid #673AB7;
+    background: #fff;
+}
+
+.fullSyncIndicatorIcon {
+    margin: -3px;
+    font-size: 26px;
+    height: 26px;
+    width: 26px;
+}
+
 .layout-tv .countIndicator, .layout-tv .playedIndicator {
     width: 3.8vh;
     height: 3.8vh;

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

@@ -61,7 +61,7 @@ define(['css!./indicators.css', 'material-icons'], function () {
             }
 
             if (userData.PlayedPercentage && userData.PlayedPercentage >= 100 || (userData.Played)) {
-                return '<div class="playedIndicator indicator"><i class="md-icon playedIndicatorIcon">&#xE5CA;</i></div>';
+                return '<div class="playedIndicator indicator"><i class="md-icon indicatorIcon">&#xE5CA;</i></div>';
             }
         }
 
@@ -103,9 +103,9 @@ define(['css!./indicators.css', 'material-icons'], function () {
     function getSyncIndicator(item) {
 
         if (item.SyncPercent == 100) {
-            return '<i class="md-icon indicator syncIndicator fullSyncIndicator">file_download</i>';
+            return '<div class="syncIndicator indicator fullSyncIndicator"><i class="md-icon indicatorIcon fullSyncIndicatorIcon">offline_pin</i></div>';
         } else if (item.SyncPercent != null) {
-            return '<i class="md-icon indicator syncIndicator emptySyncIndicator">file_download</i>';
+            return '<div class="syncIndicator indicator emptySyncIndicator"><i class="md-icon indicatorIcon">file_download</i></div>';
         }
 
         return '';

dashboard-ui/livetv.html

@@ -57,7 +57,7 @@
     <div class="pageTabContent ehsContent" id="recordingsTab" data-index="3">
         <div id="activeRecordings" class="homePageSection hide">
             <h1 class="listHeader">${HeaderActiveRecordings}</h1>
-            <div is="emby-itemscontainer" class="recordingItems itemsContainer"></div>
+            <div class="recordingItems"></div>
             <br />
         </div>
         <div id="latestRecordings" class="homePageSection hide">