cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-17 19:08:18 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add show/hide backdrop

Browse Source
This commit is contained in:
grafixeyehero 2019-12-22 16:32:11 +03:00
parent 05a200915e
commit f7f83f08d4
3 changed files with 62 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/controllers/itemdetailpage.js
View File

@ -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) {

29
src/itemdetails.html
View File

@ -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">
<button is="emby-button" type="button" class="btnPlay detailFloatingButton hide fab autoSize" title="${ButtonPlay}" data-mode="resume">
<i class="md-icon">play_arrow</i>
</button>
<div class="backdropWrapper hide">
<div id="itemBackdrop" class="itemBackdrop noBackdrop">
<button is="emby-button" type="button" class="btnPlay detailFloatingButton hide fab autoSize" title="${ButtonPlay}" data-mode="resume">
<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>

2
src/strings/en-us.json
View File

@ -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",