Page MenuHomePhabricator

Indicate progress during playback
Open, Needs TriagePublicFeature

Description

Problem/User story:
A Phonos button turns blue while it plays audio, but it's not clear when it will end or what clicking it again will do (does it pause, stop, or rewind it?). If the user doesn't have audio on (muted, headphones off, etc.), it might not even be clear to them what is going on at all.

Feature summary:
While audio is playing, one color fills up the background of a Phonos button from left to right (in LTR), indicating the progress of the runtime.

Benefits:
If you can see some sort of progress bar while the audio is playing, not only is it clear when it will end, but it also better communicates that it's playing audio in the first place. In addition, if the progress bar resets when the button is clicked mid-playback, it better communicates that the playback has stopped, rather than paused, so clicking it again will start the audio from the beginning instead of resuming.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

I have a patch to demonstrate this, but it sort of depends on T319295 being resolved first.

There is also T317385: Improve loading state animation which I think would address some of these concerns. I was advocating it as low-priority; after all, most of the usage of Phonos (we assume) will be very brief audio.

@NRodriguez We are just triaging this, what do you think about this from the product perspective?

Change 880558 had a related patch set uploaded (by Nardog; author: Nardog):

[mediawiki/extensions/Phonos@master] Animate button background to indicate playback progress

https://gerrit.wikimedia.org/r/880558

Test wiki on Patch demo by Nardog using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/09d6a3aea2/w/

Test wiki on Patch demo by Nardog using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/39b81459b9/w/

Sorry for the spam. Obviously I don't expect my patch to be outright merged, but I hope the demo shows how the UX can be significantly improved.

(I think part of the problem is that hover and progressive share the same background. Only the text and icon color changes when the playback starts or stops unless you move the cursor away, so it's difficult to see what's happening.)