RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-20 18:05:07 +00:00
Code Issues Activity Actions

LibWeb: Implement scrubbing of the media element timeline and volume

Browse source 
This implements the ability to drag the timeline and volume buttons on
UA-rendered media controls. The two behave a bit differently:

Volume is updated as the user drags the volume button. This isn't a very
expensive operation, so updating in real-time and hearing the volume
change feels nice.

The current time, on the other hand, is not committed until the user
releases the mouse button. Performing a seek every time we get a mouse-
move event is pretty laggy, especially for video. However, we still want
to render updates on the timeline itself (so the position of the button
and the timestamp update as you drag). To do so, we internally pause the
media and override the timestamp provided to the layout node.

In the future, we may be able to seek video periodically to provide some
visual feedback. For example, we can seek after every N seconds of
scrubbing, or when the user pauses scrubbing for a while.
This commit is contained in:
Timothy Flynn 2023-06-21 17:08:50 -04:00 • committed by Andreas Kling
parent bcd222cfae
commit 9df2d6ee0f
4 changed files with 146 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

22
Userland/Libraries/LibWeb/HTML/HTMLMediaElement.cpp
View file

@ -1836,4 +1836,26 @@ void HTMLMediaElement::reject_pending_play_promises(ReadonlySpan<JS::NonnullGCPt
environment_settings.clean_up_after_running_script();
}
void HTMLMediaElement::set_layout_display_time(Badge<Painting::MediaPaintable>, Optional<double> display_time)
{
if (display_time.has_value() && !m_display_time.has_value()) {
if (potentially_playing()) {
m_tracking_mouse_position_while_playing = true;
on_paused();
}
} else if (!display_time.has_value() && m_display_time.has_value()) {
if (m_tracking_mouse_position_while_playing) {
m_tracking_mouse_position_while_playing = false;
on_playing();
}
}
m_display_time = move(display_time);
}
double HTMLMediaElement::layout_display_time(Badge<Painting::MediaPaintable>) const
{
return m_display_time.value_or(current_time());
}
}