Show which tab is playing audio

[pocmo]

User Story

As a user I want to know which tab is playing audio and be able to pause each tab, so I know where audio is coming from specially when I have multiple tabs open.

Acceptance Criteria:

-I can see which tab is playing audio
-I can easily pause audio for each tab

┆Issue is synchronized with this Jira Task

[vesta0]

@topotropic just a note to think about accessibility of the playback controls (e.g. too close to close tab x), dark mode, and landscape mode

[topotropic]

Icon color inactive (play):

• light theme: disabled_light_theme 
#6620123A
• dark theme: disabled_dark_theme 
#66FBFBFE
• private theme: disabled_private_theme 
#66FBFBFE

Icon color active (pause):

• light theme: accent_bright_light_theme 
#592ACB
• dark theme: accent_bright_dark_theme 
#592ACB
• private theme: accent_bright_private_theme 
#592ACB

touch target size for play/pause button is 48dp
1114-home-tile-with-play-button.pdf
icons.zip

[liuche]

Questions:

• is this too busy? Potentially discuss with UX (or not)
• Verify that we have the API to determine which tab is playing.

[pocmo]

AC exposed that state already. I filed the linked issue above to add some more convenient helpers to examine that state.

[LaurentiuApahideanSV]

The play/pause button is not shown when listening from www.soundcloud.com or www.untold.com, issue #4793 might be related.

[pocmo]

Yeah, that's the same reason as #4793 and depends on this GV bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1554297

[sv-ohorvath]

Verified as fixed on 2.0.0-rc2