Background blur

[chef 3808]

Hi, thanks for replying.

I understand your information, but I didn't understand where to change it to "1" in the code.

backdrop.style.backdropFilter = "saturate(0) blur(0px)";

 

With saturate 0 will give it a washout look

 

backdrop.style.backdropFilter = "saturate(1) blur(0px)";

 

Will make the backdrop look normal

 

backdrop.style.backdropFilter = "saturate(1.8) blur(0px)";

 

Will bring out the color substantially.

[Guest]

thank you very much

[arrbee99 1712]

Well this should do what you want @@arrbee99 with css

.overflowYScroll.withSectionTabs div.backgroundContainer.withBackdrop {
    background: rgba(0,0,0,.10); backdrop-filter: saturate(1.8) blur(1.5em)
}

.overflowYScroll div.backgroundContainer.withBackdrop {
    background: rgba(0,0,0,.10);
}

Might need to add the "-webkit-backdrop-filter" for other browsers as shown in post 7.

 

 

So I should add this to the css I have, while keeping chefs other code, and they kind of work in conjunction with each other ?

 

I tried doing that and changing say, blur in the above to 0 and nothing seemed to change.

[Happy2Play 9441]

Well chefs code has to be done with every update, this css only only once.  I would not use both as I would assume chefs script would override css (guessing).

[arrbee99 1712]

Well chefs code has to be done with every update, this css only only once.  I would not use both as I would assume chefs script would override css (guessing).

 

Ah ok, its an either/or thing. Thank you. I shall have another quick play.

[arrbee99 1712]

Ah ok, its an either/or thing. Thank you. I shall have another quick play.

 

Tried with just the Happy2play version enabled and adjusting blur does work now. Thanks again.

 

On a general note, if you guys have had a play with the backdrops on the home page enabled, and then you go to a movie detail screen or something, do you find you get a quick view of the previous blurred image being shown (though its actually not blurred at all any more) on the movie details page before the proper movie details page appears ?

[Guest]

Found by four clients, an issue that forced me to remove the code entirely. When playing, the videos and subtitles were blurred. By testing, I confirmed the problem.

Edited December 1, 2019 by CarlosLima

[arrbee99 1712]

Just played 2 things fine in Chrome using the code in post #17, on same pc as server. No idea about subtitles though.

[Happy2Play 9441]

Tried with just the Happy2play version enabled and adjusting blur does work now. Thanks again.

 

On a general note, if you guys have had a play with the backdrops on the home page enabled, and then you go to a movie detail screen or something, do you find you get a quick view of the previous blurred image being shown (though its actually not blurred at all any more) on the movie details page before the proper movie details page appears ?

 

Pretty sure that is the ".backdropImageFadeIn" animation in the backdropcontainer backdropimages.  If you disable them in the console you see a instant change right?

Edited December 1, 2019 by Happy2Play

[Guest]

Just played 2 things fine in Chrome using the code in post #17, on same pc as server. No idea about subtitles though.

[Guest]

Thanks for the info, I will try CSS.

[Happy2Play 9441]

Found by four clients, an issue that forced me to remove the code entirely. When playing, the videos and subtitles were blurred. By testing, I confirmed the problem.

Was just going to say I didn't have any issue playing media with srt subtitles with my code.

[arrbee99 1712]

Pretty sure that is the ".backdropImageFadeIn" animation in the backdropcontainer backdropimages.  If you disable them in the console you see a instant change right?

 

It might well be except I have no idea how to disable anything in Console.

[arrbee99 1712]

Thanks for the info, I will try CSS.

 

Good luck.

[Guest]

Was just going to say I didn't have any issue playing media with srt subtitles with my code.

[Guest]

Hi, the problem occurred with the other html code and not with your CSS.

I will apply your code to test.

Thank you

[Happy2Play 9441]

It might well be except I have no idea how to disable anything in Console.

 

Like this uncheck the code, then navigate to itemdetails.

 

[Happy2Play 9441]

@@chef your script affects the video players also.

 

[chef 3808]

[Happy2Play 9441]

Weird, are you saying that the JavaScript blurred the subtitles?

 

 

I had subs enabled but the media was blurred also.

[chef 3808]

Edited December 1, 2019 by chef

[chef 3808]

I had subs enabled but the media was blurred also.

Looks like maybe the backdrop container is always on top.

 

Using background-filter would do that.

 

Still very interesting.

Edited December 1, 2019 by chef

[Happy2Play 9441]

Looks like maybe the backdrop container is always on top.

 

Using background-filter would do that.

 

Still very interesting.

I don't understand how it is being added to "class="backgroundContainer backgroundContainer-transparent"" though.  But clearly removing your code resolves the issue.

[arrbee99 1712]

Like this uncheck the code, then navigate to itemdetails.

 

 

I've looked, but can't find anything under Elements that mentioned ImageFadeIn. Not sure if its worth bothering about.

[chef 3808]

I don't understand how it is being added to "class="backgroundContainer backgroundContainer-transparent"" though. But clearly removing your code resolves the issue.

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.

Edited December 2, 2019 by chef