Web UI suggestions: Volume slider, spinner and reconnection

[ejurgensen]

@chme some suggestions that I think could make the web UI even better:

• Could the main volume control be brought to the front page? This is the control I use the most, so at least for me it would be great if it was quicker to access.
• It would be great if there was immediate feedback when an action is selected. Sometimes I am not sure if the interface detected that I pressed something. Maybe a spinner until a listener event is received?
• Change the "Lost connection" (or is it called "Reconnecting"?) warning from red box to yellow (or a spinner?). I have the web UI as a shortcut on my phone (iPhone), and often when I open it, I am greeted by this red warning box. Then after a few secs it reconnects and everything is fine, so the red box is a bit stark.

[chme]

- Could the main volume control be brought to the front page? This is the control I use the most, so at least for me it would be great if it was quicker to access.

The place is very limited and I don't have any idea how to fit a volume slider into it ... If you could describe your idea or post screenshots of an app, that solves it, that would be helpful.

- It would be great if there was immediate feedback when an action is selected. Sometimes I am not sure if the interface detected that I pressed something. Maybe a spinner until a listener event is received?

Could you give some examples? (I guess there will no be one solution for this, but instead the actions have to be looked at one after the other).

- Change the "Lost connection" (or is it called "Reconnecting"?) warning from red box to yellow (or a spinner?). I have the web UI as a shortcut on my phone (iPhone), and often when I open it, I am greeted by this red warning box. Then after a few secs it reconnects and everything is fine, so the red box is a bit stark.

You should not see this notification with latest master at all. It was removed entirely by #1422

[ejurgensen]

I don't really have an idea on how to have a volume control, it was just my wishlist 😃

The touch feedback is mostly something I would wish for when starting playback by selecting a title.

Sounds great that the red box is fixed. I hadn't tested this recently. I have a new router that gives me mdns problems, so the shortcut has been broken lately.

[ejurgensen]

One more iPhone observation, as you can see below the bottom controls are quite small, and partially overlap with the "bar thingy". Perhaps just increasing their size would alleviate the volume control thing. Clicking to open volume control is less of an issue if it is an easy click.

[ejurgensen]

Just noticed that the screenshot makes the volume popup button appear bigger than it is. The screenshot renders a square, but the iPhone has round corners, so part of it is actually cut of.

[X-Ryl669]

I want to start this task. Here's my idea about how to implement such feature:
Currently, we have this on the bottom bar, bottom right:

I'd like to add a "Speaker" icon (the same as in the volume and output selection panel) just before the chevron, with a number (from 00% to 99%)
The user will then drag the speaker icon to the top to increase or decrease the volume (so it's accessible with a single action, click or touch then drag)

On a computer with a mouse, hovering the "volume indicator", would display a vertical slider that's filled to the current volume percentage. On a computer without a mouse, the vertical slider would only be displayed while the icon is being dragged.

This means that this solution doesn't clutter the available space with a large (horizontal) slider and doesn't require clicking the volume icon to show a panel and then clicking the new position on the slider, since it's already what we have with the output selection panel.

What do you think?
mentioning @hacketiwack for advice here too.

[Porco-Rosso]

Here are some ideas
_{^{Sorry for distracting with some humor 😄}}

But yes, I agree a more accessible audio slider would be nice. On a more serious note, one more out-there idea, would be to have the background of the page act as the indicator/slider. Think of the iOS control center brightness/ volume slider but for the whole background. I guess there are a myriad of reasons why this would not be a good option however.

[ejurgensen]

Hehe, those are some great options @Porco-Rosso.

@X-Ryl669 I'm not sure I completely understand your idea, is there a way you could illustrate it?

[hacketiwack]

Yep, indeed, the player interface needs to be reworked to provide a better user experience.
Would someone be kind enough to make a proposal in the form of a mockup (e.g. with Figma or some other tool).
That would help for our discussions here.

[X-Ryl669]

Mockup idea in penpot:

Current view, without interaction (sorry, I did non use the current font set for the icons):

When the user is interacting:
She has started dragging the volume icon up and a vertical slider popup (the elliptic pill on the picture) (using the background of the pill as the value of the current volume slider percentage, in grey in the picture below)

The operation only need a single movement (drag and drop), and not 3 clicks like currently.

Link to penpot prototype here

[ejurgensen]

Guess I still don't quite understand. How does the slider appear when there isn't a mouse?

[X-Ryl669]

You put your finger on the "volume" icon and start dragging to the top of the screen. As soon as the browser detect it's a drag and not a touch, the slider appears and the green thumb is underneath your finger. The current value of the slider in shown in both the background of the slider (like in the grey background of this slider) and as a numerical value close to the speaker icon.