Merge pull request #1678 from jellyfin/banner

Fix banner height and use primary image as fallback

src/assets/css/librarybrowser.css

@@ -646,7 +646,7 @@
 .layout-desktop .detailRibbon,
 .layout-tv .detailRibbon {
     margin-top: -7.2em;
-    height: 7.18em;
+    height: 7.2em;
 }
 
 .layout-desktop .noBackdrop .detailRibbon,

src/controllers/itemDetails/index.js

@@ -523,6 +523,14 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
             });
             imageLoader.lazyImage(itemBackdropElement, imgUrl);
             hasbackdrop = true;
+        } else if (item.ImageTags && item.ImageTags.Primary) {
+            imgUrl = apiClient.getScaledImageUrl(item.Id, {
+                type: 'Primary',
+                maxWidth: dom.getScreenWidth(),
+                tag: item.ImageTags.Primary
+            });
+            imageLoader.lazyImage(itemBackdropElement, imgUrl);
+            hasbackdrop = true;
         } else {
             itemBackdropElement.style.backgroundImage = '';
         }