chef 3744 Posted December 2, 2019 Share Posted December 2, 2019 I've looked, but can't find anything under Elements that mentioned ImageFadeIn. Not sure if its worth bothering about. Looks like there is backdropImageFadeIn. Link to comment Share on other sites More sharing options...
Happy2Play 8146 Posted December 2, 2019 Share Posted December 2, 2019 (edited) I've looked, but can't find anything under Elements that mentioned ImageFadeIn. Not sure if its worth bothering about. I guess you can test with this if you like. Do you still see the transition issue going to details page? div.backdropImageFadeIn { -webkit-animation: backdrop-fadein 0s ; animation: backdrop-fadein 0s; } Edited December 2, 2019 by Happy2Play Link to comment Share on other sites More sharing options...
Happy2Play 8146 Posted December 2, 2019 Share Posted December 2, 2019 Did you start playback from the home screen or library without first going to the itemdetails page? Because if the user press the play button from the card, then the effect wouldn't have been removed from backgroundContainer since the itemsDetails page wasn't viewed (which is the only time the effect is lifted). Maybe. I was actually clicking play on the items page. Link to comment Share on other sites More sharing options...
arrbee99 1544 Posted December 2, 2019 Author Share Posted December 2, 2019 I guess you can test with this if you like. Do you still see the transition issue going to details page? div.backdropImageFadeIn { -webkit-animation: backdrop-fadein .0s ; animation: backdrop-fadein 0s; } I tried that code but still does the same thing. Link to comment Share on other sites More sharing options...
chef 3744 Posted December 2, 2019 Share Posted December 2, 2019 I was actually clicking play on the items page. Ah, because backgroundContainer class list adds 'hide' which is the condition the whole function is based on. Makes sense now. Link to comment Share on other sites More sharing options...
Happy2Play 8146 Posted December 2, 2019 Share Posted December 2, 2019 I tried that code but still does the same thing. To me it looks like slow transition from what ever backdrop is display while transitioning to the actual itembackdrop. Link to comment Share on other sites More sharing options...
arrbee99 1544 Posted December 2, 2019 Author Share Posted December 2, 2019 To me it looks like slow transition from what ever backdrop is display while transitioning to the actual itembackdrop. I guess so. Oh well, not a biggie, the earth will continue to spin on its axis........unless, of course, you know different Link to comment Share on other sites More sharing options...
chef 3744 Posted December 2, 2019 Share Posted December 2, 2019 (edited) var observer = new MutationObserver(function(mutations) { try { if (document.querySelector('#itemDetailPage')) { if (document.querySelector('#itemDetailPage').classList.contains('hide')) { if (!document.querySelector('.videoPlayerContainer')) { if (document.querySelector('.backgroundContainer.withBackdrop')) { var backdrop = document.querySelector('.backgroundContainer.withBackdrop'); backdrop.style.backdropFilter = "saturate(1.8) blur(1em)"; backdrop.style.backgroundColor = "transparent"; } } } else { if (document.querySelector('.backgroundContainer.withBackdrop')) { var backdrop = document.querySelector('.backgroundContainer.withBackdrop'); backdrop.style.backdropFilter = "saturate(1) blur(0px)"; } } } else { if (document.querySelector('.backgroundContainer.withBackdrop')) { if (!document.querySelector('.videoPlayerContainer')) { var backdrop = document.querySelector('.backgroundContainer.withBackdrop'); backdrop.style.backdropFilter = "saturate(1.8) blur(1em)"; backdrop.style.backgroundColor = "transparent"; } } } } catch (err) { } }); observer.observe(document, { childList: true, subtree: true, attributes: true, attributeOldValue: true, }); Edit: Never mind! Emby has become quite tricky! The DOM will compound "itemDetailsPages" so one might have the class hide, while another one will be added without. Forget it. LOL! Edited December 2, 2019 by chef Link to comment Share on other sites More sharing options...
arrbee99 1544 Posted December 3, 2019 Author Share Posted December 3, 2019 I guess i'm (surprisingly) doing something wrong with webkit to try to get it to work in Firefox - /*Make Home page and Movie TV page background images blurry and bright*/ .overflowYScroll.withSectionTabs div.backgroundContainer.withBackdrop { background: rgba(0,0,0,.10); backdrop-filter: saturate(1.8) blur(1.5em); -webkit-backdrop-filter: saturate(1.8) blur(1.5em) } .overflowYScroll div.backgroundContainer.withBackdrop { background: rgba(0,0,0,.10); } Tried -moz- which also didn't work - very un-blurry. Link to comment Share on other sites More sharing options...
chef 3744 Posted December 3, 2019 Share Posted December 3, 2019 (edited) I guess i'm (surprisingly) doing something wrong with webkit to try to get it to work in Firefox - /*Make Home page and Movie TV page background images blurry and bright*/ .overflowYScroll.withSectionTabs div.backgroundContainer.withBackdrop { background: rgba(0,0,0,.10); backdrop-filter: saturate(1.8) blur(1.5em); -webkit-backdrop-filter: saturate(1.8) blur(1.5em) } .overflowYScroll div.backgroundContainer.withBackdrop { background: rgba(0,0,0,.10); } Tried -moz- which also didn't work - very un-blurry. Do we know if backdrop-filter is supported by mozzila? I believe that that css variable was kind of new. Edit: it is nevermind. Did you forget a semicolon after the web-kit-backdrop-filter? Edited December 3, 2019 by chef Link to comment Share on other sites More sharing options...
Happy2Play 8146 Posted December 3, 2019 Share Posted December 3, 2019 I guess i'm (surprisingly) doing something wrong with webkit to try to get it to work in Firefox - /*Make Home page and Movie TV page background images blurry and bright*/ .overflowYScroll.withSectionTabs div.backgroundContainer.withBackdrop { background: rgba(0,0,0,.10); backdrop-filter: saturate(1.8) blur(1.5em); -webkit-backdrop-filter: saturate(1.8) blur(1.5em) } .overflowYScroll div.backgroundContainer.withBackdrop { background: rgba(0,0,0,.10); } Tried -moz- which also didn't work - very un-blurry. Do we know if backdrop-filter is supported by mozzila? I believe that that css variable was kind of new. Edit: it is nevermind. Looks like the answer is no. https://caniuse.com/#feat=css-backdrop-filter Link to comment Share on other sites More sharing options...
chef 3744 Posted December 3, 2019 Share Posted December 3, 2019 LOL MDN says it's okay, but caniuse say no. https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter Link to comment Share on other sites More sharing options...
arrbee99 1544 Posted December 3, 2019 Author Share Posted December 3, 2019 Thanks. So looks like I could use it if I ever get round to enabling some preference in Firefox. Wonder how long it'll take to get round to me trying that... Link to comment Share on other sites More sharing options...
arrbee99 1544 Posted December 3, 2019 Author Share Posted December 3, 2019 ...not that long apparently. Tried it, does work in FF now thanks. Also thanks for the missing semicolon hint. Link to comment Share on other sites More sharing options...
Happy2Play 8146 Posted December 3, 2019 Share Posted December 3, 2019 Thanks. So looks like I could use it if I ever get round to enabling some preference in Firefox. Wonder how long it'll take to get round to me trying that... I assume you found the bug report. https://bugzilla.mozilla.org/show_bug.cgi?id=1178765 Link to comment Share on other sites More sharing options...
arrbee99 1544 Posted December 3, 2019 Author Share Posted December 3, 2019 I assume you found the bug report. https://bugzilla.mozilla.org/show_bug.cgi?id=1178765 Well I have now Only skimmed through though. Sounds complicated to just leave turned on all the time. Am sure they'll figure it out though. Link to comment Share on other sites More sharing options...
chef 3744 Posted December 4, 2019 Share Posted December 4, 2019 (edited) Hey guys, I know that the background blur thing is pretty much figured out. But, I wanted to do a proper javascript, as well, because the way that emby is setting up the DOM now is completely different from the way it was doing it before. Emby seems to always add page-elements, whereas before it would search for the element and write new html in the javascript. This probably makes emby's web app super fast, compared to before. This is because it would only need to remove the class "hide" from a previously viewed page-element instead of making calls to fill out the information again. This would seem particularly more beneficial when 'paging' between the dashboard and the home screen. Anyway, every time you open a details page in the web app, that page doesn't get over written. Instead, if you view another one, they both will live in the DOM. So, with this understanding (and hopefully not misunderstand) I came up with this mutationObserver function which works quite well. I'll share it in case it is worth while to someone someday LOL. var observer = new MutationObserver(function(mutations) { try { //A video is playing don't blur anything var backgroundContainer = document.querySelector('.backgroundContainer'); if (document.querySelector('.videoPlayerContainer') || backgroundContainer.classList.contains('backgroundContainer-transparent')) { backgroundContainer.style.backdropFilter = "saturate(1) blur(0px)"; backgroundContainer.style.backgroundColor = "rgba(0,0,0,.84)"; return; } //Remove blur - DOM has #itemDetails which are not hidden - There are more then one instance of #itemDetails if (document.querySelector('#itemDetailPage')) { //All the #itemDetails Pages var detailPages = document.querySelectorAll("#itemDetailPage"); //Only hidden #itemDetails pages var results = document.querySelectorAll('#itemDetailPage.hide'); //hidden pages minus all the pages should be zero - unless we are viewing one the it would be -1 if ((results.length - detailPages.length) >= 0) { backgroundContainer.style.backdropFilter = "saturate(1.8) blur(1em)"; backgroundContainer.style.backgroundColor = "transparent"; return; } else { backgroundContainer.style.backdropFilter = "saturate(1) blur(0px)"; backgroundContainer.style.backgroundColor = "rgba(0,0,0,.84)"; return; } } if (backgroundContainer.classList.contains('withBackdrop')) { //We must be viewing something other then #itemDetails to get this far, and video is not playing //Check if there is a backdrop enabled then apply the style backgroundContainer.style.backdropFilter = "saturate(1.8) blur(1em)"; backgroundContainer.style.backgroundColor = "transparent"; } } catch (err) { } }); observer.observe(document, { childList: true, subtree: true, attributes: true, attributeOldValue: true, }); Edited December 4, 2019 by chef Link to comment Share on other sites More sharing options...
arrbee99 1544 Posted December 4, 2019 Author Share Posted December 4, 2019 Would take me until the end of the universe to come up with that (assuming it has one). Should try hinting to Luke about incorporating it. Dibs, my suggestion so someone else gets to do it, any volunteers... 1 Link to comment Share on other sites More sharing options...
arrbee99 1544 Posted May 25, 2021 Author Share Posted May 25, 2021 Thought Id revive this. When revived it seemed to not work. I've done this - /* Seems to work but is it right */ div.view.flex.flex-direction-column.withTabs.page { background: rgba(0,0,0,.10); backdrop-filter: saturate(1.8) blur(1.5em); -webkit-backdrop-filter: saturate(1.8) blur(1.5em); } which seems to work, but does anyone know if its actually correct / the best way to do it. Latest version example - Link to comment Share on other sites More sharing options...
Happy2Play 8146 Posted May 25, 2021 Share Posted May 25, 2021 13 hours ago, arrbee99 said: Thought Id revive this. When revived it seemed to not work. I've done this - /* Seems to work but is it right */ div.view.flex.flex-direction-column.withTabs.page { background: rgba(0,0,0,.10); backdrop-filter: saturate(1.8) blur(1.5em); -webkit-backdrop-filter: saturate(1.8) blur(1.5em); } which seems to work, but does anyone know if its actually correct / the best way to do it. Latest version example - I would probably do "div.backgroundContainer.withBackdrop". But all code is relevant with your question. As I get original code plus yours at your different level. Link to comment Share on other sites More sharing options...
arrbee99 1544 Posted May 25, 2021 Author Share Posted May 25, 2021 Thank you. You mean replace everything before the curly brackets ? That does seem to work but it also makes the backgrounds for individual movies and TV shows blurry as well. Link to comment Share on other sites More sharing options...
Happy2Play 8146 Posted May 25, 2021 Share Posted May 25, 2021 Just now, arrbee99 said: Thank you. You mean replace everything before the curly brackets ? That does seem to work but it also makes the backgrounds for individual movies and TV shows blurry as well. Yes that would be all backdrops. Your method would appear to target a more specific area but will apply .backgroundContainer.withBackdrop and your code so you could have double effect depending on overall code applied. Link to comment Share on other sites More sharing options...
arrbee99 1544 Posted May 25, 2021 Author Share Posted May 25, 2021 Oh OK. Thats why your explaining things to me instead of the other way round - you know what you're doing and I get lucky sometimes Link to comment Share on other sites More sharing options...
Happy2Play 8146 Posted May 25, 2021 Share Posted May 25, 2021 4 minutes ago, arrbee99 said: Oh OK. Thats why your explaining things to me instead of the other way round - you know what you're doing and I get lucky sometimes Google foo and trial and error as I knew nothing about this before messing with it in Emby. Link to comment Share on other sites More sharing options...
arrbee99 1544 Posted May 25, 2021 Author Share Posted May 25, 2021 I do that too, but I don't think I would have ever spotted that possible double effect thing. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now