Add show/hide backdrop

src/controllers/itemdetailpage.js

@@ -463,12 +463,18 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana
         var imgUrl;
         var screenWidth = screen.availWidth;
         var hasbackdrop = false;
+        var backdropWrapper = page.querySelector(".backdropWrapper");
         var itemBackdropElement = page.querySelector("#itemBackdrop");
+        var btnBackdropShow = page.querySelector(".btnBackdropShow");
         var usePrimaryImage = item.MediaType === "Video" && item.Type !== "Movie" && item.Type !== "Trailer" ||
             item.MediaType && item.MediaType !== "Video" ||
             item.Type === "MusicAlbum" ||
             item.Type === "MusicArtist";
 
+        if (layoutManager.mobile) {
+            backdropWrapper.classList.remove("hide");
+        }
+
         if ("Program" === item.Type && item.ImageTags && item.ImageTags.Thumb) {
             imgUrl = apiClient.getScaledImageUrl(item.Id, {
                 type: "Thumb",
@@ -476,6 +482,7 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana
                 tag: item.ImageTags.Thumb
             });
             itemBackdropElement.classList.remove("noBackdrop");
+            btnBackdropShow.classList.remove("hide");
             imageLoader.lazyImage(itemBackdropElement, imgUrl, false);
             hasbackdrop = true;
         } else if (usePrimaryImage && item.ImageTags && item.ImageTags.Primary) {
@@ -485,6 +492,7 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana
                 tag: item.ImageTags.Primary
             });
             itemBackdropElement.classList.remove("noBackdrop");
+            btnBackdropShow.classList.remove("hide");
             imageLoader.lazyImage(itemBackdropElement, imgUrl, false);
             hasbackdrop = true;
         } else if (item.BackdropImageTags && item.BackdropImageTags.length) {
@@ -494,6 +502,7 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana
                 tag: item.BackdropImageTags[0]
             });
             itemBackdropElement.classList.remove("noBackdrop");
+            btnBackdropShow.classList.remove("hide");
             imageLoader.lazyImage(itemBackdropElement, imgUrl, false);
             hasbackdrop = true;
         } else if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
@@ -503,6 +512,7 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana
                 tag: item.ParentBackdropImageTags[0]
             });
             itemBackdropElement.classList.remove("noBackdrop");
+            btnBackdropShow.classList.remove("hide");
             imageLoader.lazyImage(itemBackdropElement, imgUrl, false);
             hasbackdrop = true;
         } else if (item.ImageTags && item.ImageTags.Thumb) {
@@ -512,10 +522,12 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana
                 tag: item.ImageTags.Thumb
             });
             itemBackdropElement.classList.remove("noBackdrop");
+            btnBackdropShow.classList.remove("hide");
             imageLoader.lazyImage(itemBackdropElement, imgUrl, false);
             hasbackdrop = true;
         } else {
             itemBackdropElement.classList.add("noBackdrop");
+            btnBackdropShow.classList.add("hide");
             itemBackdropElement.style.backgroundImage = "";
         }
 
@@ -1913,6 +1925,26 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana
             });
         }
 
+        function showBackdrop(instance, page, apiClient, params) {
+            var backdropWrapper = page.querySelector(".backdropWrapper");
+            var btnBackdropHide = page.querySelector(".btnBackdropHide");
+            var btnBackdropShow = page.querySelector(".btnBackdropShow");
+
+            backdropWrapper.classList.remove("hide");
+            btnBackdropHide.classList.remove("hide");
+            btnBackdropShow.classList.add("hide");
+        }
+
+        function hideBackdrop(instance, page, apiClient, params) {
+            var backdropWrapper = page.querySelector(".backdropWrapper");
+            var btnBackdropHide = page.querySelector(".btnBackdropHide");
+            var btnBackdropShow = page.querySelector(".btnBackdropShow");
+
+            backdropWrapper.classList.add("hide");
+            btnBackdropHide.classList.add("hide");
+            btnBackdropShow.classList.remove("hide");
+        }
+
         function getPlayOptions(startPosition) {
             var audioStreamIndex = view.querySelector(".selectAudio").value || null;
             return {
@@ -2076,6 +2108,12 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana
             renderAudioSelections(view, self._currentPlaybackMediaSources);
             renderSubtitleSelections(view, self._currentPlaybackMediaSources);
         });
+        view.querySelector(".btnBackdropShow").addEventListener("click", function () {
+            showBackdrop(self, view, apiClient, params);
+        });
+        view.querySelector(".btnBackdropHide").addEventListener("click", function () {
+            hideBackdrop(self, view, apiClient, params);
+        });
         view.addEventListener("click", function (e) {
             if (dom.parentWithClass(e.target, "moreScenes")) {
                 apiClient.getCurrentUser().then(function (user) {

src/itemdetails.html

@@ -1,13 +1,14 @@
 <div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage noSecondaryNavPage selfBackdropPage" data-backbutton="true">
 
-    <div id="itemBackdrop" class="itemBackdrop noBackdrop">
+    <div class="backdropWrapper hide">
-        <button is="emby-button" type="button" class="btnPlay detailFloatingButton hide fab autoSize" title="${ButtonPlay}" data-mode="resume">
+        <div id="itemBackdrop" class="itemBackdrop noBackdrop">
-            <i class="md-icon">play_arrow</i>
+            <button is="emby-button" type="button" class="btnPlay detailFloatingButton hide fab autoSize" title="${ButtonPlay}" data-mode="resume">
-        </button>
+                <i class="md-icon">play_arrow</i>
+            </button>
+        </div>
+
+        <div class="detailLogo"></div>
     </div>
-
-    <div class="detailLogo"></div>
-
     <div class="detailPageWrapperContainer">
         <div class="detailPagePrimaryContainer padded-left padded-right">
 
@@ -109,6 +110,20 @@
                         <div class="detailButton-mobile-text">${ButtonMore}</div>
                     </div>
                 </button>
+
+                <button is="emby-button" type="button" class="button-flat btnBackdropShow hide detailButton">
+                    <div class="detailButton-mobile-content">
+                        <i class="md-icon detailButton-mobile-icon">photo</i>
+                        <div class="detailButton-mobile-text">${ButtonShow}</div>
+                    </div>
+                </button>
+
+                <button is="emby-button" type="button" class="button-flat  btnBackdropHide hide detailButton">
+                    <div class="detailButton-mobile-content">
+                        <i class="md-icon detailButton-mobile-icon">photo</i>
+                        <div class="detailButton-mobile-text">${ButtonHide}</div>
+                    </div>
+                </button>
             </div>
         </div>
         <div class="detailImageContainer verticalSection-extrabottompadding padded-left"></div>

src/strings/en-us.json

@@ -84,6 +84,7 @@
     "ButtonGotIt": "Got It",
     "ButtonGuide": "Guide",
     "ButtonHelp": "Help",
+    "ButtonHide": "Hide",
     "ButtonHome": "Home",
     "ButtonInfo": "Info",
     "ButtonLearnMore": "Learn more",
@@ -120,6 +121,7 @@
     "ButtonSelectView": "Select view",
     "ButtonSend": "Send",
     "ButtonSettings": "Settings",
+    "ButtonShow": "Show",
     "ButtonShuffle": "Shuffle",
     "ButtonShutdown": "Shutdown",
     "ButtonSignIn": "Sign In",