Full-Screen Album Art Now Playing Screen Style

[Taichigfx]

Feature description:

This style features a visually captivating full-screen album art that takes up the entire screen, creating an immersive and visually appealing experience for users. The album art is prominently displayed with high-resolution graphics and vibrant colors, allowing users to appreciate the album artwork in its full glory.

Problem solved:

The Full-Screen Album Art style solves the problem of users not being able to fully appreciate the album artwork of the currently playing song in a music player app. With this feature, users can enjoy an immersive and visually appealing experience where the album art takes up the entire screen, allowing them to fully appreciate the artwork in high-resolution graphics and vibrant colors. This solves the issue of album art being displayed in small or low-resolution formats, which may not do justice to the artistic value of the album cover. The Full-Screen Album Art style provides a visually captivating and engaging experience that enhances users’ enjoyment of the music and allows them to appreciate the album artwork in its full glory.

Brought benefits:

The Full-Screen Album Art style offers several benefits for users of a music player app:

Enhanced Visual Experience: By displaying the album art in a full-screen format with high-resolution graphics and vibrant colors, users can enjoy an enhanced visual experience that allows them to fully appreciate the artistic value of the album cover. This creates a visually captivating and engaging experience that enhances their overall enjoyment of the music.

Immersive Atmosphere: The full-screen album art creates an immersive atmosphere where the album cover takes center stage, allowing users to be fully immersed in the visual representation of the music they are listening to. This can create a more enjoyable and memorable listening experience, as users can connect with the music on a deeper level through the visual representation of the album art.

Artistic Appreciation: Many music fans consider album artwork to be an important part of the music listening experience. With the Full-Screen Album Art style, users can fully appreciate the artistic details and creativity of the album cover, which may not be fully visible in smaller or low-resolution album art displays. This allows users to better connect with the artistic vision of the album and enhances their overall appreciation of the music.

Aesthetically Pleasing: The Full-Screen Album Art style provides a visually appealing display of the album art, with high-resolution graphics and vibrant colors that create an aesthetically pleasing experience. This can enhance the overall user experience of the music player app and make it more visually attractive and enjoyable to use.

User Customization: The Full-Screen Album Art style can be customizable, allowing users to choose their preferred album art display options, such as different album art layouts, color schemes, or visual effects. This provides users with the flexibility to personalize their music player app according to their own preferences and aesthetics, enhancing their overall satisfaction with the app.

Other application solutions:

I understand that Symfonium has built in gestures for both navigation and visually appealing controls, I think the optimal solutions would be similar to Blackplayer EX, and Retro Music Player. I will attach screenshots.

Additional description and context:

Overall, the Full-Screen Album Art style brings benefits such as an enhanced visual experience, immersive atmosphere, artistic appreciation, aesthetic appeal, and user customization, making it a valuable feature for a music player app.

Screenshots / Mockup:

[Tolriq]

Should I already ban chatGPT?

[Taichigfx]

Saves a ton of time, and produces my sentiments exactly

[Tolriq]

Well full of bullshit for sure Tons of useless word that have no context here … Just time lost for both of us

Specially seeing how the settings are currently made, I would have expected a request matching Symfonium.

[Taichigfx]

For this one I imagined using the centered album art with a 90% opacity gradient using a black/white gradient in the foreground with just black/white text, icons, status bar depending on the album art (similar to blur theme).

This one is the same except dynamic colored text/buttons.

This one is an alternate implementation of the blur theme with the same background placement with a 30% gaussian blur on the background and the 90% opacity gradient in the foreground.

Same but with dynamically colored buttons/text.

Edit:

I think for most of these, a new ‘Screen Style’ would be unnecessary, just an addition to ‘Expanded Background Color’ should work.

[Tolriq]

I could imagine an hidden option for the image and other background styles to cover both.

Would make the swipe left / right more complicated, but the main issue is about the lyrics / cast buttons that are not visible on your screen not sure how to handle them.

[Taichigfx]

The cast button can stay in the same position with the lyrics button placed on the opposite side just below the status bar.

Also when the music is playing they can just disappear/ reduce in opacity like they currently do.

[Taichigfx]

In terms of swiping left/right, I thought of a card implementation that might be helpful. Reduced background gradient, increased foreground gradient.

[Tolriq]

Not that simple there’s also the favorite button and the 3 dots buttons that move there in the other styles.

Moving the full screen vs what is currently done is too much of a difference to not be a distinct style.

Basically a style can have all the components as it want where it want (mostly). But background / image settings can’t change those. Else it’s exponential work for each styles and each combinations of options and impossible to maintain.

So that would leave a new background style with way less blur. (Easy).

And a new complete proper single style to build. I think that if the goal is to show the image it should be based on a simpler style like minimalist or a mix but something less heavy.

[Taichigfx]

Understood.

Well in terms of a new style, it would have to be compatible with all the other background options, which is a separate ask (not exactly what I was leaning toward).

Edit: I’ve just been using the default style in the mockups I provided. I observed how the styles change the positions of the components and the placement of the cast/lyrics buttons can stay the same as they are in all current the styles. From user perspective it doesn’t bother me.

[Tolriq]

No, for that specific case I can have style that embed background and disable the background setting when selected.
There’s already some option mutually exclusive.

But the style needs to be fully comprehensive (so all possible buttons)

[Taichigfx]

These are all the current screen styles

[Tolriq]

Not sure about the floating buttons but I can test.

Can you better describe the non blur case image and protection?
It does not seem the same in each of the screens including when using dynamic colors.

[Taichigfx]

For the all non-blurred mockups, I imagined that the current cover art would be transparent (which would allow for it to still be clickable and swipe enabled) , and i would be able to change the ‘expanded background color’ to a new option like (cover art) which would show the cover art in the background with the gradient on top.

The last mockups are all showing the different screen styles, basic, clean, minimalist on this possibly new (cover art) ‘expanded background style’.

Edit: Might have to create a separate ‘expanded background style’ to enable dynamic color with a dynamically colored gradient on top of the background cover art.

[Tolriq]

What I meant was exact technical description of the protection / gradient over the image to protect the button / text to be visible.

This is not the same at all and it changes on a lot of your screenshots.

[Taichigfx]

Ah, I see. I changed them based on the screen styles as the basic screen style had more buttons/controls at the bottom of the screen. Just to ensure it’s seen more clearly.

This one is a 90% opacity black to fully transparent linear gradient (0 degree).
These are the rgba values:
rgba(0, 0, 0, 0.9) to rgba(0, 0, 0, 0)

This one is a 100% opacity black to fully transparent linear gradient (0 degree).
These are the rgba values:
rgba(0, 0, 0, 1) to rgba(0, 0, 0, 0)

[Tolriq]

There’s infinite variations with the styles + the activated rows or not like there’s also the volume one.

And of course there’s millions of screen ratio on Android.

We need to figure out something that works for most cases, can’t handle all the cases by hand.

[Tolriq]

@Taichigfx would it make sense to have a white protection gradient for the light themes ?

[Taichigfx]

It could work, status bar icons might need protection against dark cover art backgrounds though.

These would be for a white album art (ignore the meta data as it’s is just a placeholder).

On a side note, I think dynamically colored theming using similar values to the (solid dynamic color) would be awesome for gradient color if you’re thinking of implementing that too.

Edit: Gradients are funny, so I’m not sure what’s the optimal solution especially with screen ratios in landscape orientation. I would just ensure gradient goes up to the progress bar on all screens.

[Taichigfx]

Any progress on an implementation?