From c403f8e92c070b7bc00e97c6e99c2bd57ad2572c Mon Sep 17 00:00:00 2001
From: Timothy Flynn <trflynn89@pm.me>
Date: Tue, 11 Apr 2023 19:24:52 -0400
Subject: [PATCH] LibWeb: Update the media playback time for clicks on the
 media timeline

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.
---
 Userland/Libraries/LibWeb/HTML/HTMLVideoElement.h     |  1 +
 Userland/Libraries/LibWeb/Painting/VideoPaintable.cpp | 11 +++++++++++
 2 files changed, 12 insertions(+)

diff --git a/Userland/Libraries/LibWeb/HTML/HTMLVideoElement.h b/Userland/Libraries/LibWeb/HTML/HTMLVideoElement.h
index a581ba2407..95262163db 100644
--- a/Userland/Libraries/LibWeb/HTML/HTMLVideoElement.h
+++ b/Userland/Libraries/LibWeb/HTML/HTMLVideoElement.h
@@ -39,6 +39,7 @@ public:
     struct CachedLayoutBoxes {
         Optional<CSSPixelRect> control_box_rect;
         Optional<CSSPixelRect> playback_button_rect;
+        Optional<CSSPixelRect> timeline_rect;
     };
     CachedLayoutBoxes& cached_layout_boxes(Badge<Painting::VideoPaintable>) const { return m_layout_boxes; }
 
diff --git a/Userland/Libraries/LibWeb/Painting/VideoPaintable.cpp b/Userland/Libraries/LibWeb/Painting/VideoPaintable.cpp
index 6a4762a2de..3bef49d420 100644
--- a/Userland/Libraries/LibWeb/Painting/VideoPaintable.cpp
+++ b/Userland/Libraries/LibWeb/Painting/VideoPaintable.cpp
@@ -170,6 +170,7 @@ DevicePixelRect VideoPaintable::paint_control_bar_timeline(PaintContext& context
 
     auto timeline_rect = control_box_rect;
     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_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;
         }
 
+        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;
     }