Jump to content

Background blur


arrbee99
 Share

Recommended Posts

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

Happy2Play

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 by Happy2Play
Link to comment
Share on other sites

Happy2Play

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

arrbee99

 

:) 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

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

Happy2Play

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

arrbee99

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

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 by chef
Link to comment
Share on other sites

arrbee99

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

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 by chef
Link to comment
Share on other sites

Happy2Play

 

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

arrbee99

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

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 by chef
Link to comment
Share on other sites

arrbee99

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...

  • Like 1
Link to comment
Share on other sites

  • 1 year later...
arrbee99

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 -

454495011_EmbyBluronHomescreen.thumb.JPG.7adcd5213b6368cc02e0e5afffb4d73d.JPG

 

Link to comment
Share on other sites

Happy2Play
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 -

454495011_EmbyBluronHomescreen.thumb.JPG.7adcd5213b6368cc02e0e5afffb4d73d.JPG

 

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

arrbee99

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

Happy2Play
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

arrbee99

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

Happy2Play
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

arrbee99

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...