Merge pull request #5139 from thornbill/item-details-backdrop-take-57

Refactor item details backdrop handling

src/components/backdrop/backdrop.js

@@ -213,8 +213,8 @@ function enabled() {
 let rotationInterval;
 let currentRotatingImages = [];
 let currentRotationIndex = -1;
-export function setBackdrops(items, imageOptions, enableImageRotation) {
-    if (enabled()) {
+export function setBackdrops(items, imageOptions, enableImageRotation, isEnabled = false) {
+    if (isEnabled || enabled()) {
         const images = getImageUrls(items, imageOptions);
 
         if (images.length) {

src/controllers/itemDetails/index.html

@@ -3,7 +3,7 @@
 
     <div class="detailLogo"></div>
 
-    <div class="detailPageWrapperContainer padded-bottom-page">
+    <div class="detailPageWrapperContainer">
         <div class="detailPagePrimaryContainer padded-left padded-right">
             <div class="infoWrapper">
                 <div class="detailImageContainer padded-left"></div>
@@ -86,7 +86,7 @@
                 </button>
             </div>
         </div>
-        <div class="detailPageSecondaryContainer">
+        <div class="detailPageSecondaryContainer padded-bottom-page">
             <div class="detailPageContent">
                 <div class="detailPagePrimaryContent padded-right">
                     <div class="detailSection">

src/controllers/itemDetails/index.js

@@ -487,15 +487,19 @@ function setTrailerButtonVisibility(page, item) {
     }
 }
 
-function renderBackdrop(item) {
+function renderBackdrop(page, item) {
     if (!layoutManager.mobile && dom.getWindowSize().innerWidth >= 1000) {
-        setBackdrops([item]);
+        const isBannerEnabled = !layoutManager.tv && userSettings.detailsBanner();
+        // If backdrops are disabled, but the header banner is enabled, add a class to the page to disable the transparency
+        page.classList.toggle('noBackdropTransparency', isBannerEnabled && !userSettings.enableBackdrops());
+
+        setBackdrops([item], null, null, isBannerEnabled);
     } else {
         clearBackdrop();
     }
 }
 
-function renderDetailPageBackdrop(page, item, apiClient) {
+function renderHeaderBackdrop(page, item, apiClient) {
     // Details banner is disabled in user settings
     if (!userSettings.detailsBanner()) {
         return false;
@@ -509,7 +513,7 @@ function renderDetailPageBackdrop(page, item, apiClient) {
     let hasbackdrop = false;
     const itemBackdropElement = page.querySelector('#itemBackdrop');
 
-    const imgUrl = getItemBackdropImageUrl(apiClient, item, { maxWitdh: dom.getScreenWidth() }, false);
+    const imgUrl = getItemBackdropImageUrl(apiClient, item, { maxWidth: dom.getScreenWidth() }, false);
 
     if (imgUrl) {
         imageLoader.lazyImage(itemBackdropElement, imgUrl);
@@ -531,10 +535,13 @@ function reloadFromItem(instance, page, params, item, user) {
     // Save some screen real estate in TV mode
     if (!layoutManager.tv) {
         renderLogo(page, item, apiClient);
-        renderDetailPageBackdrop(page, item, apiClient);
+    }
+    // Render the mobile header backdrop
+    if (layoutManager.mobile) {
+        renderHeaderBackdrop(page, item, apiClient);
     }
 
-    renderBackdrop(item);
+    renderBackdrop(page, item);
 
     // Render the main information for the item
     page.querySelector('.detailPagePrimaryContainer').classList.add('detailRibbon');
@@ -2026,7 +2033,7 @@ export default function (view, params) {
                 if (currentItem) {
                     libraryMenu.setTitle('');
                     renderTrackSelections(page, self, currentItem, true);
-                    renderBackdrop(currentItem);
+                    renderBackdrop(page, currentItem);
                 }
             } else {
                 reload(self, page, params);

src/styles/librarybrowser.scss

@@ -579,14 +579,6 @@
             height: 30vh;
         }
     }
-
-    .layout-desktop &::after {
-        content: "";
-        width: 100%;
-        height: 100%;
-        background: rgba(0, 0, 0, 0.65);
-        display: block;
-    }
 }
 
 .layout-tv .itemBackdrop {
@@ -850,11 +842,11 @@
 }
 
 .detailPageSecondaryContainer {
-    margin: 1.25em 0;
+    padding-top: 1.25em;
 }
 
 .layout-mobile .detailPageSecondaryContainer {
-    margin: 1em 0;
+    padding-top: 1em;
 }
 
 .detailImageContainer .card {

src/themes/appletv/theme.css

@@ -252,6 +252,10 @@ a[data-role=button] {
     background: none;
 }
 
+.noBackdropTransparency .detailPageSecondaryContainer {
+    background-color: #d5e9f2;
+}
+
 .detailTableBodyRow-shaded:nth-child(even) {
     background: #f8f8f8;
     background: rgba(0, 0, 0, 0.1);

src/themes/blueradiance/theme.css

@@ -243,6 +243,12 @@ a[data-role=button] {
     background: none;
 }
 
+.noBackdropTransparency .detailPageSecondaryContainer {
+    background: url(bg.jpg) center top no-repeat #033361;
+    background-size: cover;
+    background-attachment: fixed;
+}
+
 .detailTableBodyRow-shaded:nth-child(even) {
     background: #1c1c1c;
     background: rgba(30, 30, 30, 0.9);

src/themes/dark/theme.css

@@ -225,6 +225,10 @@ html {
     background: none;
 }
 
+.noBackdropTransparency .detailPageSecondaryContainer {
+    background-color: #101010;
+}
+
 .listItem-border {
     border-color: rgba(34, 34, 34, 0.9) !important;
 }

src/themes/light/theme.css

@@ -257,6 +257,10 @@ a[data-role=button] {
     color: inherit;
 }
 
+.noBackdropTransparency .detailPageSecondaryContainer {
+    background-color: #f2f2f2;
+}
+
 .detailTableBodyRow-shaded:nth-child(even) {
     background: #f8f8f8;
 }

src/themes/purplehaze/theme.css

@@ -326,6 +326,12 @@ a[data-role=button] {
     background: none;
 }
 
+.noBackdropTransparency .detailPageSecondaryContainer {
+    background: url(bg.jpg) center top no-repeat #030322;
+    background-size: cover;
+    background-attachment: fixed;
+}
+
 .detailTableBodyRow-shaded:nth-child(even) {
     background: #1c1c1c;
     background: rgba(30, 30, 30, 0.9);

src/themes/wmc/theme.css

@@ -228,6 +228,12 @@ a[data-role=button] {
     background: none;
 }
 
+.noBackdropTransparency .detailPageSecondaryContainer {
+    background: linear-gradient(to bottom, #0f3562, #1162a4, #03215f);
+    background-color: #0f3562;
+    background-attachment: fixed;
+}
+
 .detailTableBodyRow-shaded:nth-child(even) {
     background: #1c1c1c;
     background: rgba(0, 0, 0, 0.3);