1779122 - Video duration: render and update

Status: RESOLVED FIXED

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

Description

[Ania]

User story
As a user, I want to be able to know how long the video is and what is my position in it, so I can make quick decisions about my viewing experience.

Acceptance Criteria

1. Video duration and my current position in it are visible alongside other controls as I hover over the PiP window.

2. Current position in the video timeline is dynamically updated as I rewind the video and with the passage of time.

3. Duration is removed on screen sizes under [widthxheight] - our initial acceptance criteria was 580x320, but we can see if it makes sense empirically.

4. Video duration format is based on the combination of the current time and video duration:

a. [m:ss / m:ss] videos from 1:00 to 9:59 min long

b. [mm:ss /mm:ss] videos from 10:00 min to 59:59 min long AFTER they hit the double digits in current time
[m:ss / mm:ss] format is followed until 10 min mark is reached

c. [h:mm:ss / h:mm:ss] - videos from 1:00:00 to 9:59:59 long AFTER they hit 1-hour mark
[mm:ss / h:mm:ss] format is followed until the 1-hour mark is reached

d. [hh:mm:ss /hh:mm:ss] - videos over 10 hours AFTER they hit 10-hour mark
[h:mm:ss / hh:mm:ss] format is followed until the 10-hour mark is reached

UI specs
font for macOS: SF Pro
font for Win: Segoe UI
padding left: 24 px
font size: 14 px
color: #FFFFFF

Folder with designs

Comment 1

[Ania]

Attachment: PIP3.png

Comment 2

[Ania]

Attachment: under an hour.png

Comment 3

[Ania]

Attachment: over an hour.png

Comment 4

[Ania]

Attachment: FIREFOX-Fonts-140722-1908-68.pdf

Also attaching our font usage guide here

Comment 5

[Cieara Meador [:cmkm] (she/her)]

Added 1779119 as a blocker, as the work Niklas is doing in that patch will lay the foundation for this one.

Comment 6

[Cieara Meador [:cmkm] (she/her)]

Attachment: Bug 1779122 - Add PiP video timestamp r?niklas!,#pip-reviewers

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f31bb7fda86f
Add PiP video timestamp r=niklas,pip-reviewers

Comment 8

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/f31bb7fda86f