Adjust visual display of speakers when audibly playing

[hburgund]

It will be a useful and aesthetically interesting feature for speakers that are playing at a non-zero volume to be represented visually in a different way than speakers in other states, especially in the new looping playback modes.

I am not sure what visual styles will ultimately feel sensible, but for now, could we bump up the fill opacity by a noticeable amount? Not sure what the default opacity value is, but if playing ones were maybe 0.7, they would appear different?

[shreyas-jadhav]

Maybe we would also need something to determine loaded or not,
for example,
Not loaded: outlined
Loaded: filled
Playing: outlined + filled

[hburgund]

@shreyas-jadhav I see you have implemented the not loaded state as an outline and the loaded state as filled which is awesome. I don't see the playing state implemented yet, so I'm assuming you haven't done that?

Also would be very cool to have a special state for the speaker that was just added by the participant. Ideally, it would be something like set it to a higher opacity (darker) right away when displayed after submission and then have the opacity return to the level of the other playing ones over a period of time, say 20s or perhaps the loop time. LMK what you think.

An alternative approach would be a new state for the speakers that were made by the participant. That would be really cool, but not sure if possible? Do we store all speakers the current participant has created?

And if you could lmk where to look for adjusting the various styles associated with these different states, that would be great. I presume they are consolidated somewhere...I'll have a look to see if I can find them! Would be great for ease of editing their css properties to try different things.