1764120 - Implement subtitles settings in PiP window

Status: RESOLVED FIXED

(Toolkit :: Picture-in-Picture, enhancement, P2)

Description

[Ania]

Figma File

User Story 1

As a user who wants to experience fewer interruptions when using PiP, I would like to be able to control the display of subtitles after I turned them on in the in-page video.

Acceptance Criteria

1. The entry point to turn subtitles on and off is displayed ONLY if the subs are turned on in the in-page video (this is due to a technical limitation - launching subtitles from the PiP window presents various difficulties - what track should we choose if multiple are available, etc).

2. I am able to turn subtitles off from the PiP window.

3. I am able to turn subtitles back on from the PiP window (unless I turned them off in the in-page video)

User Story 2
As a user who wants to customize their font size in PiP, I want to be able to choose between "small", "medium", and "large" font size options.

Acceptance Criteria

1. I am able to choose PiP subtitles font size between "small", "medium", and "large" options.

2. My choice in one PiP window affects all opened PiP windows.

3. My preference defaults to medium font size.

4. Both size and enable/disable preference is saved and applied to all the PiP windows opened after I’ve made a change.

Comment 1

[Ania]

posted in error

Comment 2

[Ania]

Description
Please see the user stories and their acceptance criteria above.

How do we test this?
You can access the prototype via the link below and launch the proposed UI by clicking on the CC (captions) button in it.

When will this ship? Targeting 102
Design documents (e.g. Product Requirements Document, UI spec):
Prototype
Engineering lead: Molly Howell
Product manager: Ania Mininkova

Comment 3

[Ania]

After a discussion with Brent and some research on the subtitles/captions terms for international audiences, we settled on using "Subtitles" as a title for the on/off menu.

We also need to replace the cc button with a language-agnostic one, as the CC abbreviation is not used outside of the English-speaking world. I'm not sure why Youtube is using such an EN-centric icon, but Netflix, Prime Video, and most other large video hosters I checked use a message-like icon.

Comment 4

[Ania]

Attachment: language-agnostic pip icon

Comment 5

[Ania]

Some notes/moments to take care of on the a11y front after the review with Asa:

Keyboard navigability
Let's annotate our final UX file to make sure we capture these requirements:

• tab navigates between the video controls,
• space activates the control, e.g., opens the subtitles settings pop-up, changes the state of the switch in the pop-up, and selects the font size.
• up/down arrows navigate up and down the menu items in the pop-up.

Pop-up behavior on window resizing
Expected behavior:

1. Remove the subtitles button if PiP window dimensions < popover dimensions (if we can't fit the font size popover into the window without creating a scroll).

• If this is impossible, then remove the subtitles button at the same time when we remove the subtitles after they reach the min size.
• Allow for the scroll in the subtitles settings pop-up.

Font size labels

1. Window resizing might cause the "small" label to go below our smallest acceptable font size. UPD: this won't happen since we remove subs after they get smaller than 14 px.
2. Let's consider making the "small-medium-large" labels the same size because of the above. This will also help us avoid a "longer" scroll inside the pop-up on smaller PiP window sizes.

Comment 6

[Ania]

Niklas, Jihwan, and I are trying to decide whether we should go for labels of the representative size (and ignore situations when medium = large on certain PiP windows etc), and I wondered if you might be able to post a few screenshots from your prototype where font size in the dialog was representative of the size of the subtitles in the window?

The same-sized labels look meh in our opinion and are not as helpful to users (screen attached).

Comment 7

[Ania]

Attachment: same-sized labels

Comment 8

[Ania]

Asa, just wanted to double-check if we're not missing any a11y color contrast requirements, and are good to go on this front too.

Comment 9

[Asa Dotzler [:asa]]

(In reply to amininkova from comment #8)

Asa, just wanted to double-check if we're not missing any a11y color contrast requirements, and are good to go on this front too.

I think we're good to go. Text contrast is great.

Comment 10

[Niklas Baumgardner [:niklas]]

Attachment: small, medium, large all different

small, medium, large font sizes are all different

Comment 11

[Niklas Baumgardner [:niklas]]

Attachment: small and medium are the same

small and medium font sizes are the same

Comment 12

[Niklas Baumgardner [:niklas]]

Attachment: medium and large are the same

medium and large font sizes are the same

Comment 13

[Ania]

Attachment: Screen Shot 2022-04-20 at 6.50.11 PM.png

Please disregard the screenshot above, we eventually settled on the same-sized font for all three options, small, medium, large.

Comment 14

[Ania]

Updated the prototype with 18-24-32 font sizes

Comment 15

[Jihwan Kim]

(In reply to amininkova from comment #13)

Created attachment 9273165 [details]
Screen Shot 2022-04-20 at 6.50.11 PM.png

Niklas, thank you so much.

Both Jihwan and I felt the "threshold" cases looked fairly confusing to the users.
Do you have any concerns about using static font size for small (14), medium (24), large (32) labels that don't change with PiP window resizing?

From the UX perspective, it feels like it's enough to give users visually different options without them being representative of the actual font size they will see.

If the static font size works, small will be 18pt fyi :)

Comment 16

[Niklas Baumgardner [:niklas]]

Attachment: Bug 1764120 - Subtitle font size settings in PiP window. r=#pip-reviewers!

Comment 17

[Ania]

Attachment: Final icon

Comment 18

[Ania]

Comment on attachment 9274359 [details]
Final icon

Attaching final icon for subtitles/captions.

Comment 19

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/c5ce4a2b9ddb
Subtitle font size settings in PiP window. r=pip-reviewers,desktop-theme-reviewers,mhowell,sfoster,fluent-reviewers

Comment 20

[Cristina Cozmuta (:CrissCozmuta)]

Backed out for causing for causing mochitest failures on browser_fontSize_change.js. CLOSED TREE

Backout link
Push with failures
Link to failure log
Failure line :
TEST-UNEXPECTED-FAIL | toolkit/components/pictureinpicture/tests/browser_fontSize_change.js | The large font size is .09 of the PiP window height - 7.5 <= 1 - JS frame :: chrome://mochitests/content/browser/toolkit/components/pictureinpicture/tests/browser_fontSize_change.js :: checkFontSize :: line 16

Comment 21

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/476aa6b6dadc
Subtitle font size settings in PiP window. r=pip-reviewers,desktop-theme-reviewers,mhowell,sfoster,fluent-reviewers

Comment 22

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/476aa6b6dadc

Comment 23

[Daniel Bodea [:danibodea]]

Is flow 4 of the Prototype in comment 2 is the one approved as final UI version?

Comment 24

[fabrixx2]

Hi work with this: https://html5multimedia.com/code/ch8/video-webvtt-subtitles-playr.html
I tried some example files on YouTube but the button to activate the player doesn't even appear: https://www.youtube.com/watch?v=1jUJAtEiJ9E
Also this: https://www.youtube.com/watch?v=alymCBqAUxY

Comment 25

[Ania]

Yes, that's correct.

Comment 26

[kpatenio]

(In reply to fabrixx2 from comment #24)

Hi work with this: https://html5multimedia.com/code/ch8/video-webvtt-subtitles-playr.html
I tried some example files on YouTube but the button to activate the player doesn't even appear: https://www.youtube.com/watch?v=1jUJAtEiJ9E
Also this: https://www.youtube.com/watch?v=alymCBqAUxY

For the YouTube videos that you linked, the PiP toggle does not appear because the video is less than 45 seconds (this is a default value set to show/hide the toggle). You can enable the player by right clicking on the video (for YouTube, press it twice) and selecting the Picture-in-Picture option on the context menu. I also suggest that you file a new bug in the future so that we can easily track any issues. And if it turns out to not be an issue at all, we can always close it.