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

LibWeb: Update the media playback time for clicks on the media timeline

Browse source 
When clicking on the media timeline, compute the percentage along the
timeline's width the user clicked, and set the playback time to the same
percentage of the video's duration.
This commit is contained in:
Timothy Flynn 2023-04-11 19:24:52 -04:00 • committed by Linus Groh
parent ad3c63684c
commit c403f8e92c
2 changed files with 12 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1
Userland/Libraries/LibWeb/HTML/HTMLVideoElement.h
View file

@ -39,6 +39,7 @@ public:
struct CachedLayoutBoxes { struct CachedLayoutBoxes {
Optional<CSSPixelRect> control_box_rect; Optional<CSSPixelRect> control_box_rect;
Optional<CSSPixelRect> playback_button_rect; Optional<CSSPixelRect> playback_button_rect;
Optional<CSSPixelRect> timeline_rect;
}; };
CachedLayoutBoxes& cached_layout_boxes(Badge<Painting::VideoPaintable>) const { return m_layout_boxes; } CachedLayoutBoxes& cached_layout_boxes(Badge<Painting::VideoPaintable>) const { return m_layout_boxes; }

11
Userland/Libraries/LibWeb/Painting/VideoPaintable.cpp
View file

@ -170,6 +170,7 @@ DevicePixelRect VideoPaintable::paint_control_bar_timeline(PaintContext& context
auto timeline_rect = control_box_rect; auto timeline_rect = control_box_rect;
timeline_rect.set_width(min(control_box_rect.width() * 6 / 10, timeline_rect.width())); timeline_rect.set_width(min(control_box_rect.width() * 6 / 10, timeline_rect.width()));
layout_box().dom_node().cached_layout_boxes({}).timeline_rect = context.scale_to_css_rect(timeline_rect);
auto playback_percentage = video_element.current_time() / video_element.duration(); auto playback_percentage = video_element.current_time() / video_element.duration();
auto playback_position = static_cast<double>(static_cast<int>(timeline_rect.width())) * playback_percentage; auto playback_position = static_cast<double>(static_cast<int>(timeline_rect.width())) * playback_percentage;
@ -287,6 +288,16 @@ VideoPaintable::DispatchEventOfSameName VideoPaintable::handle_mouseup(Badge<Eve
return DispatchEventOfSameName::Yes; return DispatchEventOfSameName::Yes;
} }
if (cached_layout_boxes.timeline_rect.has_value() && cached_layout_boxes.timeline_rect->contains(position)) {
auto x_offset = position.x() - cached_layout_boxes.timeline_rect->x();
auto x_percentage = static_cast<float>(x_offset) / static_cast<float>(cached_layout_boxes.timeline_rect->width());
auto position = static_cast<double>(x_percentage) * video_element.duration();
video_element.set_current_time(position);
return DispatchEventOfSameName::Yes;
}
return DispatchEventOfSameName::No; return DispatchEventOfSameName::No;
} }