AmpliPi
AmpliPi copied to clipboard
micro-nova
Make play status visible from home view
There is no playing/paused/stopped status on the "Home" view, so it's impossible to see which streams are actually playing without 3 clicks per enabled stream.
I'd like some conversation on how to achieve this goal. I've initially tried to make the mute button animate when sound is playing, making it pulse slightly; that looked like shit. The only other idea I have is to add a play/pause symbol somewhere on the playercard that corresponds to what the stream is set to, but that would also look like shit and would be confusing unless we want to make those buttons too, which we've actively avoided as to not clutter the home screen too much
I would try out adding the play/pause button.
On Thu, Jun 13, 2024, 15:37 SteveMicroNova @.***> wrote:
I'd like some conversation on how to achieve this goal. I've initially tried to make the mute button animate when sound is playing, making it pulse slightly; that looked like shit. The only other idea I have is to add a play/pause symbol somewhere on the playercard that corresponds to what the stream is set to, but that would also look like shit and would be confusing unless we want to make those buttons too, which we've actively avoided as to not clutter the home screen too much
— Reply to this email directly, view it on GitHub https://github.com/micro-nova/AmpliPi/issues/605#issuecomment-2166630282, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAEZPO34R2Y32PJIO6BK2HDZHHYIBAVCNFSM6AAAAABJJA7XB6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNRWGYZTAMRYGI . You are receiving this because you authored the thread.Message ID: @.***>
We discussed this at our weekly standup this morning and decided this requires some more extensive redesign than we want to target for 0.4.x; we'll punt this to 0.5.x and go through a more formal design process on this.
As Ryan said, this is an issue for another day
I've assigned myself just now to announce my intention to be the developer once we have a better consensus on what we actually want done
My own thought was to create something like this, but using the preexisting unmuted icon instead of a shitty gif:
https://tenor.com/bYClR.gif
This is outside of my abilities however, and therefor may not be useful input
I can do vector graphic animation, should I try making an animation of the speaker icon at some point?
I can do vector graphic animation, should I try making an animation of the speaker icon at some point?
If that's something you can do with relatively few manhours, I'd love to see it; though definitely pass that by someone else first, preferably someone who has a say in how you spend your time. Here is a place to download the SVGs of the icons we presently use, make sure the "filled" option is checked on the left side to access the exact icons
An alternative idea I had was to use this to make a sine wave and wrap it around the volume bar, stopping the animation if the music was paused or muted, and changing the frequency of the animation based on the volume. That proved to be too much work to be something I could reasonably whip up to make a demo with without prior approval due to time sink
Through the power of making ChatGPT make all the edits for me, I made a basic prototype Imagine this, but maybe with a thicker line, placed perfectly on top of the volume bar, and width limited by where the pip on the volume bar is
https://github.com/user-attachments/assets/8d475f1c-20d9-4d98-af1a-ed0149d1b9dd
That initial design almost looks like it interferes with the volume slicer. Maybe it could look better it if was just on the current volume portion of the slider?
The coolest way that I've seen to integrate play status is in this player demo: https://codepen.io/singhimalaya/pen/QZKqOX. In that demo it looks like the first song is no longer available. So you will need to skip to the next song to see the full effect.
On Thu, Jul 18, 2024 at 3:38 PM SteveMicroNova @.***> wrote:
Through the power of making ChatGPT make all the edits for me, I made a basic prototype Imagine this, but maybe with a thicker line, placed perfectly on top of the volume bar, and width limited by where the pip on the volume bar is
https://github.com/user-attachments/assets/8d475f1c-20d9-4d98-af1a-ed0149d1b9dd
— Reply to this email directly, view it on GitHub https://github.com/micro-nova/AmpliPi/issues/605#issuecomment-2237388088, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAEZPO75PLGRHXIX5NYTG5DZNAKT3AVCNFSM6AAAAABJJA7XB6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMZXGM4DQMBYHA . You are receiving this because you authored the thread.Message ID: @.***>
I don't think we're able to make spinning album art look good within our current card structure unfortunately, but I do have a newer video of a very rough draft of the sinewave idea from #825:
https://github-production-user-asset-6210df.s3.amazonaws.com/114415937/350132268-bd7ffd1a-4cd4-4a8a-96eb-2228f661f127.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAVCODYLSA53PQK4ZA%2F20240719%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240719T154241Z&X-Amz-Expires=300&X-Amz-Signature=bdffa6264256cb10f73fd235c520e3b07b0c2799755ed1cb72b237f26a6b64b5&X-Amz-SignedHeaders=host&actor_id=114415937&key_id=0&repo_id=288789342
For reference @SteveMicroNova's goal is something that looks like this: https://www.androidpolice.com/android-13-squiggly-media-playback-bar/
Moving to triage so I remember to mention it in the next amplipi meeting
Klayton has said he likes the original plan of having the mute button wiggle when music is playing as seen in #759, just don't make it pause as part of the animation like I do with the "Add Zones" animation I kinda like the sinewave (or where it'll end up, thanks for sharing Lincoln) but that seems like a lot of work for something that may not make visual sense when it doesn't immediately relate to the song that's playing
New idea:
Add an animated version of either of these images to the right side of the volume bar to show play status
The video of #759 to have all the potential ideas in one place https://github.com/user-attachments/assets/7bb52513-394c-4557-8109-53bc3e9319e1