1579645 - Feature Request: Add playhead scrubber to Picture in Picture player window

Status: RESOLVED DUPLICATE of bug 1779119

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

Description

[Luna Jernberg]

Attachment: PiP_Feature.png

Would be nice if the PiP function for Youtube videos and videos, have a function to fast forward and rewind for longer videos

Comment 1

[Mike Kaply [:mkaply]]

We shouldn't need needinfo's here. It will just be triaged as a regular bug.

Comment 2

[Alastor Wu [:alwu]]

Not sure how important it is on our schedule, I will mark it as P2 for now, please feel free to change the priority.

Comment 3

[Alastor Wu [:alwu]]

Sorry, wrong NI.

Comment 4

[nivtwig]

I am a confused about exactly what is the bug ?
The terminology used above is : "have a function to fast forward and rewind for longer videos"
Did you mean seeking to a desired time in the video (using the mouse, like in most videos) ?
Or did you mean : to fast forward or rewind which are continuous playback of the video at 2x, 3x speed forward or backward?

I want to file a bug or enhancement request to support seeking to a desired time, and I need to know if this bug covers it (or there is another existing bug about it), or I should file a new one ?

Comment 5

[Luna Jernberg]

(In reply to nivtwig from comment #4)

I am a confused about exactly what is the bug ?
The terminology used above is : "have a function to fast forward and rewind for longer videos"
Did you mean seeking to a desired time in the video (using the mouse, like in most videos) ?
Or did you mean : to fast forward or rewind which are continuous playback of the video at 2x, 3x speed forward or backward?

I want to file a bug or enhancement request to support seeking to a desired time, and I need to know if this bug covers it (or there is another existing bug about it), or I should file a new one ?

I did mean the first thing seeking for a desired time or seek 30 seconds to 1 minute forward or backwards in a video using controls in the PiP mode
also sorry for slow response, forgot about this and was busy with other stuff in real life

Comment 6

[nivtwig]

Is it possible to at least add a "current time" display to the PIP window when using the keyboard to seek forward or backward.
It seems to me that it can be implemented in a short time and rather easily, before implementing the full playhead scrubber, since I understand that adding the full playhead scrubber to PIP is complicated, due to some websites with conflicting code when seeking backwards or forward.
It is needed because sometimes when clicking the keyboard to go backward several times, it is not clear by how much time did it go back.
When you have the "current time" display of the video, it is much easier to adjust your backward "clicks" to stop at the desired time.

Comment 8

[Adam Stevenson [:adamopenweb]]

Additional feedback about the control UI is in this bug #1604599. Includes suggestions about the exit buttons, color scheme, volume and time sliders.

Comment 11

[Shane Hughes [:aminomancer]]

I was thinking about this too. comparing the PictureInPicture player to YouTube's miniplayer, the absence of controls in the pip player is pretty jarring. so I searched and found this bug. I see how the name of the class kinda paints you into a corner, but it seems like it could afford to have a few more controls that youtube managed to fit in an even smaller space.

for one, firefox pip's buttons are bigger than firefox's regular video control buttons so they hog more space. but at the default pip size there's still plenty of room in the window. comparing to youtube's miniplayer, which is smaller than the default size of firefox's pip window, firefox's pip control buttons are actually much smaller than youtube's.

but youtube still finds room for not just a scrubber track, but also labels for the current time and duration, and even trick play preview thumbnails and chapter names. I know chapters aren't part of the video spec but it's worth noting how much they were able to fit. and it doesn't feel cramped, though I do wish you could resize youtube's miniplayer.

in any case there's a lot of room on the window at the default size. and even if the user resizes it to a scale that doesn't accommodate all those features, that shouldn't rule out adding them, because firefox already dynamically shows/hides player controls based on the size of the player. a lot of this could be added without much work, because it's already implemented in VideoControlsImplWidget. the special pip version just omits the controls that the regular version has.

there's no trick play, but if that were ever implemented in the basic video player, you could fit it in the pip player too, as youtube's miniplayer proves. I for one think trick play previews are really valuable. once you get used to them, it becomes really noticeable and irritating when they're missing. for me, they really speed up the process of scanning through a video and make it much more enjoyable. and they are nearly ubiquitous on major streaming/video hosting websites now. so I think by now they could be considered a basic component of a web video player.

of course, adding them to the basic video player would have a lot of repercussions for web designers who use the built-in video controls overlay. it seems like most video elements replace the controls altogether but I suspect some simply restyle the browser's built-in controls. so if there happen to be any websites out there that added their own trick play systems but still use the built-in controls for some reason, adding trick play would result in duplicate thumbnails.

but that doesn't stop firefox from implementing trick play in the pip window, which will not have any of those custom additions. so actually I think the fact that the normal video player lacks trick play should be an argument in favor of putting it in the pip player, not against it.

Comment 12

[Shane Hughes [:aminomancer]]

one of the nice ways youtube makes this work is by shrinking the track to the absolute minimum, and only expanding it on mouseover. they also move the main control buttons to the center of the player, so they're not getting in the way of the scrubber. it seems like firefox could do the same. make the scrubber square, sitting right on the bottom edge of the window. seems like you can also fit small trick play thumbnails as a result, but hide them along with the scrubber when window size is smaller than, say, 600px in height.

Comment 13

[Luc]

Attachment: WIP: Bug 1579645 - add video progress bar to pictureinpicture

Comment 14

[Luc]

Attachment: WIP: Bug 1579645 - dd

Comment 15

[Luc]

Attachment: Bug 1579645 - enhancement video progress bar pictureinpicture

Comment 16

[Luc]

Yes. Thanks I saw it and the design looks prettier than mine. What changes can I do to my code to push?

Comment 17

[Ania]

Hi Luc!

Thank you for working on this, it's awesome!

The team can review the patch as is, and suggest the functional changes to align it with the ongoing redesign effort.

Since your patch covers both the seek bar and rendering and updating the video duration, a few functional changes would be super helpful:

1. Displaying video duration as [hh:mm:ss / hh:mm:ss] for videos longer than one hour.
   If the video is under an hour, the format is: [mm:ss/mm:ss] (this ticket has screenshots)

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

If you're willing to work on the further UI changes, there's a handful of visual acceptance criteria here and we'll need to make sure that seek bar doesn't overlap with the subtitles - here's a related ticket.
Or we can take it from there as soon as someone on the team has time to take care of the UI side of things.

In any case - thank you for making this effort, it's very cool when people join us in making PiP more awesome!

Comment 18

[Luc]

Is it not just:

1. displaying video time duration as [h:mm:ss] for videos longer than one hour
   [hh:mm:ss] for video longer than ten hours

2. video current time as [m:ss] when it is shorter than 1 minute
   [mm:ss] when it is longer than 10 minutes
   [h:mm:ss] when it is longer than an hour
   [hh:mm:ss] when it's longer than ten hours.

Like youtube does.

Comment 19

[Ania]

Thank you for correction, Luc. I updated the comment here to reflect the duration format according to the screenshots.

Comment 20

[Ania]

Hi Luc! We can begin the review once you clear the WIP flag from the patch.

Comment 21

[Molly Howell (she/her) (mostly inactive)]

Specifically, please remove the "WIP" from the commit message, and remove the "Changes Planned" state from Phabricator. Thanks!

Comment 22

[Luc]

Attachment: Bug 1579645 - enhancement video progress bar pictureinpicture

Comment 23

[Luc]

This is done here is the link: https://bugzilla.mozilla.org/attachment.cgi?id=9291901.

Comment 24

[Luc]

Attachment: progress bar to review

Here is my progress bar

Comment 25

[Ania]

Let's track further work on the video slider in this ticket - https://bugzilla.mozilla.org/show_bug.cgi?id=1779119

Comment 27

[Ania]

Should we close this ticket now that Niklas landed the other playhead scrubber patch?

Comment 28

[Molly Howell (she/her) (mostly inactive)]

Ah, good call; thanks.