Add toggleable blurred coverart player background

[rom4nik]

A bit of eye candy, disabled by default. 2nd row has dark mode, 3rd row has light mode.

Bright cover	Dark cover	Colorful cover

Some issues:

• occasional low contrast, especially with the gray buffer status slider
• enabling this feature isn't saved to disk, tried to follow https://github.com/hivedb/docs/blob/master/custom-objects/generate_adapter.md but got the white screen about broken config
• bottom bar would probably look better transparent, which additionally would fix contrasting with light theme throughout app

[jmshrv]

This looks really nice, much more interesting than the boring black/white background!

The settings likely aren't working because there Hive wants a default value for showCoverAsPlayerBackground. I have it layed out so that there are a load of constants above the FinampSettings so that we can easily use the same value in the constructor and for Hive's defaultValue field. https://github.com/rom4nik/finamp/blob/038ab93c1b336791ff285cd5e14a96d03d45fabe/lib/models/finamp_models.dart#L36

I also noticed some weird behaviour when closing the player screen on iOS, I'll check to see if the same thing happens on Android.

The low contrast probably isn't too much of an issue - we could change some text colours if it makes sense. I did try messing about with blurred images really early on in Finamp's development (The widget still exists at lib/components/blurred_image but I'm pretty sure the method it uses is inefficient) and I think I stopped because of contrast issues. I was putting them on the flexible space bar on the album screen though, not the player screen.

[rom4nik]

Thanks for pointing out what was missing, there were so many places to adjust just to get a toggle in settings lol. I've decided to make this feature turned on by default, improves discoverability of it a bit, and it's easy to permanently turn off now. I haven't observed any weird behaviors on Android.

[jmshrv]

Yeah, FinampSettings is a bit cluttered lol. As far as I know there aren't any prebuilt solutions for settings, so I just threw something together.

I've reimplemented the blurred background with a BlurHash, which should be faster and doesn't have the weird behaviour on iOS. It looks like flutter_blurhash has gotten better since I last looked (it now calculates the blur on another thread, before it caused really bad frame drops), so maybe I'll make AlbumImage use BlurHashes while the image is being fetched.

One tiny improvement that would be nice would be fading between backgrounds when a track changes. AlbumImage gets away by fading in new images, but in its current state the background changes abruptly.

[rom4nik]

Thanks for working on this PR lol. I forgot that other clients use blurhashes already, and initially thought it would be a great idea to reuse them, but right away I noticed that the blurhash background can sometimes look awful:

I suppose lower "source resolution" of blurhashes is to blame here. Using full res images for blur avoided the white color spill, as seen in original screenshot in this PR.

[rom4nik]

Another quick comparison (hot reload in Flutter rulz), take notice especially of the horrible black/green spill present in blurhash:

Full res	Blurhash

[jmshrv]

Yeah, blurring the images in Flutter does look better but the iOS issue makes it unfeasible. I'll record a video in a minute of the issue happening.

[jmshrv]

Here's what's happening on iOS. Looks like it's stretching because the image isn't the right aspect ratio or something

Simulator.Screen.Recording.-.iPhone.13.-.2022-07-27.at.20.23.11.mp4

[jmshrv]

Looks like it may be related to this: flutter/flutter#31706 (comment). It would also explain why the filter applies under the AppBar without extendBodyBehindAppBar being true in the Scaffold.

[jmshrv]

If we do add back an ImageFilter based solution later, it may be a good idea to extract AlbumImage into an image provider so that we don't have to grab the same image twice from Jellyfin. It would also be pretty satisfying watching both images fade in at exactly the same time 🙃

[rom4nik]

Unless it's video compression causing the effect, it seems like the blurred image in background keeps moving as you're swiping the player screen away. That made me guess it's just square album image being scaled up to fit height and not having left and right sides cropped. It doesn't manifest itself on Android (no horizontal gesture), but on iOS it's just being dragged away along with the other items on player screen until entire screen is removed.

Maybe just cropping it to screen aspect ratio would help?

[jmshrv]

I tested with a Container that was set to the screen size and it still happened

[rom4nik]

Won't container expand to fit child inside anyway? Maybe try setting blur value to 0 and check if it's indeed whole image being dragged, or if it's something else. (I'll look into getting a Hackintosh to test iOS issues like those at some point)

[jmshrv]

Here's a recording of a Container wrapped in a 100x100 sized box (with the ImageFiltered highlighted with devtools) and what it looks like with a blur of 0.

Simulator.Screen.Recording.-.iPhone.13.-.2022-07-27.at.21.07.04.mp4

Simulator.Screen.Recording.-.iPhone.13.-.2022-07-27.at.21.11.03.mp4

Also Hackintoshes are fun, highly recommended if you're bored and have compatible hardware :)

[jmshrv]

I've always wanted to make NowPlayingBar properly slide in with the player screen as an animation, which would in theory get past the iOS transition issue. Sweyer has the look I want, and I did try to implement it (even asked how they did it lol), but I never managed to do it since it's quite hard to implement. I could have a look into it again though.

[rom4nik]

Another way to get some colors from cover art on background is taking average color from blurhash. That won't cause any artifacts like on Gravity album cover. Ignore artifacts caused by mpv-webm encoding on videos below.

screen-20220821-012337-.00.00.000-00.20.589.mp4

screen-20220821-012705-.00.00.000-00.14.209.mp4

To make it a bit fancier we could do some gradient using avg colors from blurhash corners or edges (a bit like Plexamp?), but I haven't figured that out yet.

[Chaphasilor]

@rom4nik I'm currently investigating how to extract colors from the album covers and blurhashes. The problem with using the average color is that it can end up looking pretty dull, at least when using it as an accent color and not a background. But maybe the average color can be used as a background for thr blurhash in order to make it stand out less. I'll play around with it :)

[jmshrv]

Turns out you just need to add a ClipRect to stop the blur from overflowing... We'll go back to generating the blur dynamically because it looks much nicer.

[jmshrv]

Note that it would probably be a good idea for us to abstract out AlbumImage a bit since aspect ratio and clipping is being applied to that blur for no reason

[jmshrv]

This should be ready now - I've reworked AlbumImage to make it easier to grab a raw AlbumImage without the padding and stuff, and I've made AlbumImageProvider, which has a function to get an image provider for a Jellyfin item (either a NetworkImage or a FileImage depending on if its downloaded or not. The only real difference I've seen is that we have to provide a key to AlbumImage items that change, such as the one on the player screen. Not sure if that's a bug on my part or Flutter doing what it's meant to do.

[jmshrv]

Key issue has been fixed, had to make sure to update the future in BareAlbumImage when we pass a different value