-
Notifications
You must be signed in to change notification settings - Fork 5
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Style: improve the look of the read aloud / "playback" button #29
Comments
@purplesky2016 has some experience trying to customize the MassLegalHelp version of this input. @CaroRob might have the model website she liked better |
This can be started now--it will be useful. Or it can wait for an interested designer volunteer. |
I made an attempt, see #43. |
This definitely looks better! @purplesky2016 do you think we can add in a text label to the input with CSS as well? |
Could you elaborate it a bit? |
Do you mean something like adding the words "Read the screen" in front of the play button @nonprofittechy? I do think that would be a little better. |
I'm going to give a quick hybrid js/css solution a shot and see what you folks think. It's looking like it's the standard way people out there handle better looking audio UI. |
We're choosing to leave out the option of rewinding/scanning back manually, correct? I'm using this as the basic inspiration: https://www.readspeaker.com/ |
Needs testing in different browsers: https://github.com/SuffolkLITLab/docassemble-AssemblyLine/tree/29_custom_audio_2. [I had a simpler version with fewer buttons - just 'play' and 'pause' - but failed to commit the right files. I can get my code back there if needed.] |
These are all good steps forward and are nicer than the built-in appearance. I'm not sure I'm a fan of any of the improvements yet, but I do think the use of JS will be necessary to fully improve it. Overall, I like this. A few thoughts as I tested it out:
I think this could be made shorter vertically and simplified so the audio icon, the listen text, and the play triangle all start the audio, and the play icon changes to a pause icon (as it already does) to stop playback. There could be a good argument to have a volume slider still present (using the icon on the left might make sense), but the buttons are non-standard. I think we probably don't need a volume adjustment specific to this input. Edit: I realized that one reason for the stop button might be to allow people to start over again at the beginning. I don't know the best solution to that need. What about a scrubber that only appears if the audio is playing, so it doesn't take up the horizontal width of the screen when it's not in use? Edit2: just realized I am describing the input that MLRI uses again. It's basically an accordion--the only visible icon is "play" until you click something, then it expands to show the inputs that control/stop/adjust volume etc.. https://www.masslegalhelp.org/legal-tactics is a page that shows the player in action. The "Listen" and audio icon text are also clickable, just like I described here. The only thing negative about the MLRI version is that it doesn't match the overall flat look of our site. We could consider using color just like they do. Maybe the play icon should match the "primary" bootstrap color theme. |
What you're describing now sounds less like a style tweak and more like building a completely different UI. I believe MLRI's reading bar is from https://www.readspeaker.com/ as I linked above. The one I constructed was a simplified version of that, and the listen button can be combined with the 'play/pause' icon. As MLRI is using 'ReadSpeaker', I suspect they do not have it as a separate module somewhere that we can re-deploy and then tweak with CSS. I can see if I have the time to build out the whole thing, though I have a bit of a backlog, so it again partly depends on what you can tell us about what the priorities are right now. Maybe that would be good to hash out at one of our meetings. If we do build it, I'd love to build it as a separate module so others projects, even non-da ones, can also make use of it. To leave future hints for myself or whoever does take this on - the vertical space between the reader and the heading comes from the heading. I think there was a margin collapse happening before that isn't happening after this element was added. The buttons are this wide now because bootstrap was doubling up on borders at other widths. I didn't look deeply into why and it's probably different in different environments, so we may end up with some weirdness no matter what we do if we stick with bootstrap. If this is created as a separate module, we could style with the least CSS possible to allow developers to more freely tweak the look when they use it. It might be neat to see if it's possible to make it in a way that can be slotted into systems like bootstrap, materialize, etc. When we get to it, I have some thoughts about how to do that. |
Fair enough. I think it is where we want to end up regardless of the steps to get there. A few thoughts:
|
Sounds good. Would love for this to be usable outside of da, as I said, but we can only do what we can do. Quick question - I don't think I understand what you mean by da vs. bootstrap styles. It has seemed to me that the styles da uses are mainly through bootstrap. Are you referring to something else? |
Just to whatever extent you are slowed down by trying to match or use existing elements--either DA specific or just generic Bootstrap--I would focus on a quick MVP vs perfect reuse of those elements. Making this usable outside of Docassemble is something you can do if you have time and interest, but I can't comment on it. It's not something we need for this project, so it would just be guided by your needs and interests. One quick way to iteratively release something that is a step closer would be to remove the volume icons from your current design. Without the accordion, I think we need to keep the "stop" icon for now. In next order of priority for me: (each fix could have its own release in my mind, if they each would take a lot of effort to achieve)
|
The latest commit removed the volume controls, merged the 'listen' with 'play', and reduced the size of the buttons. I double checked and it looks like the whitespace between the element and the I've created #52 in case that covers MVP. |
Here is some background about the 'ReadSpeaker' button on the MLH site: We get the voice service from a company, and the service is delivered via this button. The way to implement the button is to add certain parameters coupled with our 'client ID' in a Drupal module. The button construction/code itself is on the company's website and hidden from us, we can only call the button's css via a url pointing to the company's site . I remember they have instructions for some limited customization options for the button under the umbrella of 'skin', clients can download one of the skins, each containing three files: JS, CSS and image. A few years ago I followed their instructions to customize the button but the results were horrible, so we gave up. |
#29 audio UI improvements (MVP)
Closing this as mostly fixed. I will open a new issue to track adding the accordion-style scrubber. |
There are some examples of more unobtrusive widgets that do this around the web. We should be able to style this better.
MLRI's is one good example:
![image](https://user-images.githubusercontent.com/7645641/108247635-e7654d00-7120-11eb-9999-c976ef3d3e46.png)
What I like about this is that it has a label and icon that more clearly conveys what it does and that the button does not take the full width of the CSS box.
The text was updated successfully, but these errors were encountered: