LibWeb: Extract media element timeline painting to a base class

This moves the painting of the media timeout out of VideoPaintable into
a base MediaPaintable. This is to allow re-using the same timeline logic
and controls for audio elements.

Userland/Libraries/LibWeb/CMakeLists.txt

@@ -454,6 +454,7 @@ set(SOURCES
     Painting/InlinePaintable.cpp
     Painting/LabelablePaintable.cpp
     Painting/MarkerPaintable.cpp
+    Painting/MediaPaintable.cpp
     Painting/NestedBrowsingContextPaintable.cpp
     Painting/PaintContext.cpp
     Painting/Paintable.cpp

Userland/Libraries/LibWeb/Forward.h

@@ -485,6 +485,7 @@ namespace Web::Painting {
 class ButtonPaintable;
 class CheckBoxPaintable;
 class LabelablePaintable;
+class MediaPaintable;
 class Paintable;
 class PaintableBox;
 class PaintableWithLines;

Userland/Libraries/LibWeb/HTML/HTMLMediaElement.h

@@ -8,14 +8,17 @@
 #pragma once
 
 #include <AK/ByteBuffer.h>
+#include <AK/Optional.h>
 #include <AK/Time.h>
 #include <AK/Variant.h>
+#include <LibGfx/Rect.h>
 #include <LibJS/Heap/MarkedVector.h>
 #include <LibJS/SafeFunction.h>
 #include <LibWeb/DOM/DocumentLoadEventDelayer.h>
 #include <LibWeb/HTML/CORSSettingAttribute.h>
 #include <LibWeb/HTML/EventLoop/Task.h>
 #include <LibWeb/HTML/HTMLElement.h>
+#include <LibWeb/PixelUnits.h>
 #include <LibWeb/WebIDL/DOMException.h>
 #include <math.h>
 
@@ -84,6 +87,16 @@ public:
 
     JS::NonnullGCPtr<VideoTrackList> video_tracks() const { return *m_video_tracks; }
 
+    void set_layout_mouse_position(Badge<Painting::MediaPaintable>, Optional<CSSPixelPoint> mouse_position) { m_mouse_position = move(mouse_position); }
+    Optional<CSSPixelPoint> const& layout_mouse_position(Badge<Painting::MediaPaintable>) const { return m_mouse_position; }
+
+    struct CachedLayoutBoxes {
+        Optional<CSSPixelRect> control_box_rect;
+        Optional<CSSPixelRect> playback_button_rect;
+        Optional<CSSPixelRect> timeline_rect;
+    };
+    CachedLayoutBoxes& cached_layout_boxes(Badge<Painting::MediaPaintable>) const { return m_layout_boxes; }
+
 protected:
     HTMLMediaElement(DOM::Document&, DOM::QualifiedName);
 
@@ -220,6 +233,10 @@ private:
     JS::GCPtr<Fetch::Infrastructure::FetchController> m_fetch_controller;
 
     bool m_seek_in_progress = false;
+
+    // Cached state for layout.
+    Optional<CSSPixelPoint> m_mouse_position;
+    mutable CachedLayoutBoxes m_layout_boxes;
 };
 
 }

Userland/Libraries/LibWeb/HTML/HTMLVideoElement.h

@@ -8,11 +8,9 @@
 
 #include <AK/Optional.h>
 #include <LibGfx/Forward.h>
-#include <LibGfx/Rect.h>
 #include <LibWeb/DOM/DocumentLoadEventDelayer.h>
 #include <LibWeb/Forward.h>
 #include <LibWeb/HTML/HTMLMediaElement.h>
-#include <LibWeb/PixelUnits.h>
 #include <LibWeb/WebIDL/ExceptionOr.h>
 
 namespace Web::HTML {
@@ -43,16 +41,6 @@ public:
     VideoFrame const& current_frame() const { return m_current_frame; }
     RefPtr<Gfx::Bitmap> const& poster_frame() const { return m_poster_frame; }
 
-    void set_layout_mouse_position(Badge<Painting::VideoPaintable>, Optional<CSSPixelPoint> mouse_position) { m_mouse_position = move(mouse_position); }
-    Optional<CSSPixelPoint> const& layout_mouse_position(Badge<Painting::VideoPaintable>) const { return m_mouse_position; }
-
-    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; }
-
 private:
     HTMLVideoElement(DOM::Document&, DOM::QualifiedName);
 
@@ -79,10 +67,6 @@ private:
 
     JS::GCPtr<Fetch::Infrastructure::FetchController> m_fetch_controller;
     Optional<DOM::DocumentLoadEventDelayer> m_load_event_delayer;
-
-    // Cached state for layout
-    Optional<CSSPixelPoint> m_mouse_position;
-    mutable CachedLayoutBoxes m_layout_boxes;
 };
 
 }

Userland/Libraries/LibWeb/Painting/MediaPaintable.cpp

@@ -0,0 +1,245 @@
+/*
+ * Copyright (c) 2023, Tim Flynn <trflynn89@serenityos.org>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#include <AK/Array.h>
+#include <AK/NumberFormat.h>
+#include <LibGUI/Event.h>
+#include <LibGfx/AntiAliasingPainter.h>
+#include <LibWeb/DOM/Document.h>
+#include <LibWeb/HTML/HTMLAudioElement.h>
+#include <LibWeb/HTML/HTMLMediaElement.h>
+#include <LibWeb/HTML/HTMLVideoElement.h>
+#include <LibWeb/Layout/ReplacedBox.h>
+#include <LibWeb/Painting/MediaPaintable.h>
+
+namespace Web::Painting {
+
+static constexpr auto control_box_color = Gfx::Color::from_rgb(0x26'26'26);
+static constexpr auto control_highlight_color = Gfx::Color::from_rgb(0x1d'99'f3);
+
+static constexpr Gfx::Color control_button_color(bool is_hovered)
+{
+    if (!is_hovered)
+        return Color::White;
+    return control_highlight_color;
+}
+
+MediaPaintable::MediaPaintable(Layout::ReplacedBox const& layout_box)
+    : PaintableBox(layout_box)
+{
+}
+
+Optional<DevicePixelPoint> MediaPaintable::mouse_position(PaintContext& context, HTML::HTMLMediaElement const& media_element)
+{
+    auto const& layout_mouse_position = media_element.layout_mouse_position({});
+
+    if (layout_mouse_position.has_value() && media_element.document().hovered_node() == &media_element)
+        return context.rounded_device_point(*layout_mouse_position);
+
+    return {};
+}
+
+void MediaPaintable::fill_triangle(Gfx::Painter& painter, Gfx::IntPoint location, Array<Gfx::IntPoint, 3> coordinates, Color color)
+{
+    Gfx::AntiAliasingPainter aa_painter { painter };
+    Gfx::Path path;
+    path.move_to((coordinates[0] + location).to_type<float>());
+    path.line_to((coordinates[1] + location).to_type<float>());
+    path.line_to((coordinates[2] + location).to_type<float>());
+    path.close();
+    aa_painter.fill_path(path, color, Gfx::Painter::WindingRule::EvenOdd);
+}
+
+void MediaPaintable::paint_media_controls(PaintContext& context, HTML::HTMLMediaElement const& media_element, DevicePixelRect media_rect, Optional<DevicePixelPoint> const& mouse_position) const
+{
+    auto maximum_control_box_size = context.rounded_device_pixels(40);
+    auto playback_padding = context.rounded_device_pixels(5);
+
+    auto control_box_rect = media_rect;
+    if (control_box_rect.height() > maximum_control_box_size)
+        control_box_rect.take_from_top(control_box_rect.height() - maximum_control_box_size);
+
+    context.painter().fill_rect(control_box_rect.to_type<int>(), control_box_color.with_alpha(0xd0));
+    media_element.cached_layout_boxes({}).control_box_rect = context.scale_to_css_rect(control_box_rect);
+
+    control_box_rect = paint_control_bar_playback_button(context, media_element, control_box_rect, mouse_position);
+    control_box_rect.take_from_left(playback_padding);
+
+    control_box_rect = paint_control_bar_timeline(context, media_element, control_box_rect, mouse_position);
+    control_box_rect.take_from_left(playback_padding);
+
+    control_box_rect = paint_control_bar_timestamp(context, media_element, control_box_rect);
+    control_box_rect.take_from_left(playback_padding);
+}
+
+DevicePixelRect MediaPaintable::paint_control_bar_playback_button(PaintContext& context, HTML::HTMLMediaElement const& media_element, DevicePixelRect control_box_rect, Optional<DevicePixelPoint> const& mouse_position) const
+{
+    auto maximum_playback_button_size = context.rounded_device_pixels(15);
+    auto maximum_playback_button_offset_x = context.rounded_device_pixels(15);
+
+    auto playback_button_size = min(maximum_playback_button_size, control_box_rect.height() / 2);
+    auto playback_button_offset_x = min(maximum_playback_button_offset_x, control_box_rect.width());
+    auto playback_button_offset_y = (control_box_rect.height() - playback_button_size) / 2;
+
+    auto playback_button_location = control_box_rect.top_left().translated(playback_button_offset_x, playback_button_offset_y);
+
+    auto playback_button_hover_rect = DevicePixelRect {
+        control_box_rect.top_left(),
+        { playback_button_size + playback_button_offset_x * 2, control_box_rect.height() }
+    };
+    media_element.cached_layout_boxes({}).playback_button_rect = context.scale_to_css_rect(playback_button_hover_rect);
+
+    auto playback_button_is_hovered = mouse_position.has_value() && playback_button_hover_rect.contains(*mouse_position);
+    auto playback_button_color = control_button_color(playback_button_is_hovered);
+
+    if (media_element.paused()) {
+        Array<Gfx::IntPoint, 3> play_button_coordinates { {
+            { 0, 0 },
+            { static_cast<int>(playback_button_size), static_cast<int>(playback_button_size) / 2 },
+            { 0, static_cast<int>(playback_button_size) },
+        } };
+
+        fill_triangle(context.painter(), playback_button_location.to_type<int>(), play_button_coordinates, playback_button_color);
+    } else {
+        DevicePixelRect pause_button_left_rect {
+            playback_button_location,
+            { maximum_playback_button_size / 3, playback_button_size }
+        };
+        DevicePixelRect pause_button_right_rect {
+            playback_button_location.translated(maximum_playback_button_size * 2 / 3, 0),
+            { maximum_playback_button_size / 3, playback_button_size }
+        };
+
+        context.painter().fill_rect(pause_button_left_rect.to_type<int>(), playback_button_color);
+        context.painter().fill_rect(pause_button_right_rect.to_type<int>(), playback_button_color);
+    }
+
+    control_box_rect.take_from_left(playback_button_hover_rect.width());
+    return control_box_rect;
+}
+
+DevicePixelRect MediaPaintable::paint_control_bar_timeline(PaintContext& context, HTML::HTMLMediaElement const& media_element, DevicePixelRect control_box_rect, Optional<DevicePixelPoint> const& mouse_position) const
+{
+    auto maximum_timeline_button_size = context.rounded_device_pixels(16);
+
+    auto timeline_rect = control_box_rect;
+    if (is<HTML::HTMLAudioElement>(media_element))
+        timeline_rect.set_width(min(control_box_rect.width() * 6 / 10, timeline_rect.width() * 4 / 10));
+    else
+        timeline_rect.set_width(min(control_box_rect.width() * 6 / 10, timeline_rect.width()));
+    media_element.cached_layout_boxes({}).timeline_rect = context.scale_to_css_rect(timeline_rect);
+
+    auto playback_percentage = media_element.current_time() / media_element.duration();
+    auto playback_position = static_cast<double>(static_cast<int>(timeline_rect.width())) * playback_percentage;
+
+    auto timeline_button_size = min(maximum_timeline_button_size, timeline_rect.height() / 2);
+    auto timeline_button_offset_x = static_cast<DevicePixels>(round(playback_position));
+
+    Gfx::AntiAliasingPainter painter { context.painter() };
+
+    auto playback_timelime_scrub_rect = timeline_rect;
+    playback_timelime_scrub_rect.shrink(0, timeline_rect.height() - timeline_button_size / 2);
+
+    auto timeline_past_rect = playback_timelime_scrub_rect;
+    timeline_past_rect.set_width(timeline_button_offset_x);
+    painter.fill_rect_with_rounded_corners(timeline_past_rect.to_type<int>(), control_highlight_color.lightened(), 4);
+
+    auto timeline_future_rect = playback_timelime_scrub_rect;
+    timeline_future_rect.take_from_left(timeline_button_offset_x);
+    painter.fill_rect_with_rounded_corners(timeline_future_rect.to_type<int>(), Color::Black, 4);
+
+    auto timeline_button_rect = timeline_rect;
+    timeline_button_rect.shrink(timeline_rect.width() - timeline_button_size, timeline_rect.height() - timeline_button_size);
+    timeline_button_rect.set_x(timeline_rect.x() + timeline_button_offset_x - timeline_button_size / 2);
+
+    auto timeline_is_hovered = mouse_position.has_value() && timeline_rect.contains(*mouse_position);
+    auto timeline_color = control_button_color(timeline_is_hovered);
+    painter.fill_ellipse(timeline_button_rect.to_type<int>(), timeline_color);
+
+    control_box_rect.take_from_left(timeline_rect.width() + timeline_button_size / 2);
+    return control_box_rect;
+}
+
+DevicePixelRect MediaPaintable::paint_control_bar_timestamp(PaintContext& context, HTML::HTMLMediaElement const& media_element, DevicePixelRect control_box_rect) const
+{
+    auto current_time = human_readable_digital_time(round(media_element.current_time()));
+    auto duration = human_readable_digital_time(round(media_element.duration()));
+    auto timestamp = String::formatted("{} / {}", current_time, duration).release_value_but_fixme_should_propagate_errors();
+
+    auto timestamp_size = static_cast<DevicePixels::Type>(ceilf(context.painter().font().width(timestamp)));
+    if (timestamp_size > control_box_rect.width())
+        return control_box_rect;
+
+    auto timestamp_rect = control_box_rect;
+    timestamp_rect.set_width(timestamp_size);
+
+    auto const& scaled_font = layout_node().scaled_font(context);
+    context.painter().draw_text(timestamp_rect.to_type<int>(), timestamp, scaled_font, Gfx::TextAlignment::CenterLeft, Color::White);
+
+    control_box_rect.take_from_left(timestamp_rect.width());
+    return control_box_rect;
+}
+
+MediaPaintable::DispatchEventOfSameName MediaPaintable::handle_mouseup(Badge<EventHandler>, CSSPixelPoint position, unsigned button, unsigned)
+{
+    if (button != GUI::MouseButton::Primary)
+        return DispatchEventOfSameName::Yes;
+
+    auto& media_element = *verify_cast<HTML::HTMLMediaElement>(layout_box().dom_node());
+    auto const& cached_layout_boxes = media_element.cached_layout_boxes({});
+
+    // FIXME: This runs from outside the context of any user script, so we do not have a running execution
+    //        context. This pushes one to allow the promise creation hook to run.
+    auto& environment_settings = document().relevant_settings_object();
+    environment_settings.prepare_to_run_script();
+
+    ScopeGuard guard { [&] { environment_settings.clean_up_after_running_script(); } };
+
+    auto toggle_playback = [&]() -> WebIDL::ExceptionOr<void> {
+        if (media_element.paused())
+            TRY(media_element.play());
+        else
+            TRY(media_element.pause());
+        return {};
+    };
+
+    if (cached_layout_boxes.control_box_rect.has_value() && cached_layout_boxes.control_box_rect->contains(position)) {
+        if (cached_layout_boxes.playback_button_rect.has_value() && cached_layout_boxes.playback_button_rect->contains(position)) {
+            toggle_playback().release_value_but_fixme_should_propagate_errors();
+            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<double>(x_offset) / static_cast<double>(cached_layout_boxes.timeline_rect->width());
+
+            auto position = static_cast<double>(x_percentage) * media_element.duration();
+            media_element.set_current_time(position);
+
+            return DispatchEventOfSameName::Yes;
+        }
+
+        return DispatchEventOfSameName::No;
+    }
+
+    toggle_playback().release_value_but_fixme_should_propagate_errors();
+    return DispatchEventOfSameName::Yes;
+}
+
+MediaPaintable::DispatchEventOfSameName MediaPaintable::handle_mousemove(Badge<EventHandler>, CSSPixelPoint position, unsigned, unsigned)
+{
+    auto& media_element = *verify_cast<HTML::HTMLMediaElement>(layout_box().dom_node());
+
+    if (absolute_rect().contains(position)) {
+        media_element.set_layout_mouse_position({}, position);
+        return DispatchEventOfSameName::Yes;
+    }
+
+    media_element.set_layout_mouse_position({}, {});
+    return DispatchEventOfSameName::No;
+}
+
+}

Userland/Libraries/LibWeb/Painting/MediaPaintable.h

@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2023, Tim Flynn <trflynn89@serenityos.org>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#pragma once
+
+#include <LibWeb/Forward.h>
+#include <LibWeb/Painting/PaintableBox.h>
+
+namespace Web::Painting {
+
+class MediaPaintable : public PaintableBox {
+    JS_CELL(MediaPaintable, PaintableBox);
+
+protected:
+    explicit MediaPaintable(Layout::ReplacedBox const&);
+
+    static Optional<DevicePixelPoint> mouse_position(PaintContext&, HTML::HTMLMediaElement const&);
+    static void fill_triangle(Gfx::Painter& painter, Gfx::IntPoint location, Array<Gfx::IntPoint, 3> coordinates, Color color);
+
+    void paint_media_controls(PaintContext&, HTML::HTMLMediaElement const&, DevicePixelRect media_rect, Optional<DevicePixelPoint> const& mouse_position) const;
+
+private:
+    virtual bool wants_mouse_events() const override { return true; }
+    virtual DispatchEventOfSameName handle_mouseup(Badge<EventHandler>, CSSPixelPoint, unsigned button, unsigned modifiers) override;
+    virtual DispatchEventOfSameName handle_mousemove(Badge<EventHandler>, CSSPixelPoint, unsigned buttons, unsigned modifiers) override;
+
+    DevicePixelRect paint_control_bar_playback_button(PaintContext&, HTML::HTMLMediaElement const&, DevicePixelRect control_box_rect, Optional<DevicePixelPoint> const& mouse_position) const;
+    DevicePixelRect paint_control_bar_timeline(PaintContext&, HTML::HTMLMediaElement const&, DevicePixelRect control_box_rect, Optional<DevicePixelPoint> const& mouse_position) const;
+    DevicePixelRect paint_control_bar_timestamp(PaintContext&, HTML::HTMLMediaElement const&, DevicePixelRect control_box_rect) const;
+};
+
+}

Userland/Libraries/LibWeb/Painting/VideoPaintable.cpp

@@ -5,7 +5,6 @@
  */
 
 #include <AK/Array.h>
-#include <AK/NumberFormat.h>
 #include <LibGUI/Event.h>
 #include <LibGfx/AntiAliasingPainter.h>
 #include <LibWeb/DOM/Document.h>
@@ -34,7 +33,7 @@ JS::NonnullGCPtr<VideoPaintable> VideoPaintable::create(Layout::VideoBox const&
 }
 
 VideoPaintable::VideoPaintable(Layout::VideoBox const& layout_box)
-    : PaintableBox(layout_box)
+    : MediaPaintable(layout_box)
 {
 }
 
@@ -57,7 +56,7 @@ void VideoPaintable::paint(PaintContext& context, PaintPhase phase) const
     if (is_out_of_view(context))
         return;
 
-    PaintableBox::paint(context, phase);
+    Base::paint(context, phase);
 
     if (phase != PaintPhase::Foreground)
         return;
@@ -68,11 +67,7 @@ void VideoPaintable::paint(PaintContext& context, PaintPhase phase) const
     ScopedCornerRadiusClip corner_clip { context, context.painter(), video_rect, normalized_border_radii_data(ShrinkRadiiForBorders::Yes) };
 
     auto const& video_element = layout_box().dom_node();
-    auto const& layout_mouse_position = video_element.layout_mouse_position({});
-
-    Optional<DevicePixelPoint> mouse_position;
-    if (layout_mouse_position.has_value() && document().hovered_node() == &video_element)
-        mouse_position = context.rounded_device_point(*layout_mouse_position);
+    auto mouse_position = MediaPaintable::mouse_position(context, video_element);
 
     auto const& current_frame = video_element.current_frame();
     auto const& poster_frame = video_element.poster_frame();
@@ -144,6 +139,14 @@ void VideoPaintable::paint(PaintContext& context, PaintPhase phase) const
         context.painter().fill_rect(video_rect.to_type<int>(), transparent_black);
     };
 
+    auto paint_loaded_video_controls = [&]() {
+        auto is_hovered = document().hovered_node() == &video_element;
+        auto is_paused = video_element.paused();
+
+        if (is_hovered || is_paused)
+            paint_media_controls(context, video_element, video_rect, mouse_position);
+    };
+
     auto paint_user_agent_controls = video_element.has_attribute(HTML::AttributeNames::controls) || video_element.is_scripting_disabled();
 
     switch (representation) {
@@ -155,7 +158,7 @@ void VideoPaintable::paint(PaintContext& context, PaintPhase phase) const
         if (current_frame.frame)
             paint_frame(current_frame.frame);
         if (paint_user_agent_controls)
-            paint_loaded_video_controls(context, video_element, video_rect, mouse_position);
+            paint_loaded_video_controls();
         break;
 
     case Representation::PosterFrame:
@@ -176,150 +179,6 @@ void VideoPaintable::paint(PaintContext& context, PaintPhase phase) const
     }
 }
 
-void VideoPaintable::paint_loaded_video_controls(PaintContext& context, HTML::HTMLVideoElement const& video_element, DevicePixelRect video_rect, Optional<DevicePixelPoint> const& mouse_position) const
-{
-    auto maximum_control_box_size = context.rounded_device_pixels(30);
-    auto playback_padding = context.rounded_device_pixels(5);
-
-    auto is_hovered = document().hovered_node() == &video_element;
-    auto is_paused = video_element.paused();
-
-    if (!is_hovered && !is_paused)
-        return;
-
-    auto control_box_rect = video_rect;
-    if (control_box_rect.height() > maximum_control_box_size)
-        control_box_rect.take_from_top(control_box_rect.height() - maximum_control_box_size);
-
-    context.painter().fill_rect(control_box_rect.to_type<int>(), control_box_color.with_alpha(0xd0));
-    layout_box().dom_node().cached_layout_boxes({}).control_box_rect = context.scale_to_css_rect(control_box_rect);
-
-    control_box_rect = paint_control_bar_playback_button(context, video_element, control_box_rect, mouse_position);
-    control_box_rect.take_from_left(playback_padding);
-
-    control_box_rect = paint_control_bar_timeline(context, video_element, control_box_rect, mouse_position);
-    control_box_rect.take_from_left(playback_padding);
-
-    control_box_rect = paint_control_bar_timestamp(context, video_element, control_box_rect);
-    control_box_rect.take_from_left(playback_padding);
-}
-
-static void fill_triangle(Gfx::Painter& painter, Gfx::IntPoint location, Array<Gfx::IntPoint, 3> coordinates, Color color)
-{
-    Gfx::AntiAliasingPainter aa_painter { painter };
-    Gfx::Path path;
-    path.move_to((coordinates[0] + location).to_type<float>());
-    path.line_to((coordinates[1] + location).to_type<float>());
-    path.line_to((coordinates[2] + location).to_type<float>());
-    path.close();
-    aa_painter.fill_path(path, color, Gfx::Painter::WindingRule::EvenOdd);
-}
-
-DevicePixelRect VideoPaintable::paint_control_bar_playback_button(PaintContext& context, HTML::HTMLVideoElement const& video_element, DevicePixelRect control_box_rect, Optional<DevicePixelPoint> const& mouse_position) const
-{
-    auto maximum_playback_button_size = context.rounded_device_pixels(15);
-    auto maximum_playback_button_offset_x = context.rounded_device_pixels(15);
-
-    auto playback_button_size = min(maximum_playback_button_size, control_box_rect.height() / 2);
-    auto playback_button_offset_x = min(maximum_playback_button_offset_x, control_box_rect.width());
-    auto playback_button_offset_y = (control_box_rect.height() - playback_button_size) / 2;
-
-    auto playback_button_location = control_box_rect.top_left().translated(playback_button_offset_x, playback_button_offset_y);
-
-    auto playback_button_hover_rect = DevicePixelRect {
-        control_box_rect.top_left(),
-        { playback_button_size + playback_button_offset_x * 2, control_box_rect.height() }
-    };
-    layout_box().dom_node().cached_layout_boxes({}).playback_button_rect = context.scale_to_css_rect(playback_button_hover_rect);
-
-    auto playback_button_is_hovered = mouse_position.has_value() && playback_button_hover_rect.contains(*mouse_position);
-    auto playback_button_color = control_button_color(playback_button_is_hovered);
-
-    if (video_element.paused()) {
-        Array<Gfx::IntPoint, 3> play_button_coordinates { {
-            { 0, 0 },
-            { static_cast<int>(playback_button_size), static_cast<int>(playback_button_size) / 2 },
-            { 0, static_cast<int>(playback_button_size) },
-        } };
-
-        fill_triangle(context.painter(), playback_button_location.to_type<int>(), play_button_coordinates, playback_button_color);
-    } else {
-        DevicePixelRect pause_button_left_rect {
-            playback_button_location,
-            { maximum_playback_button_size / 3, playback_button_size }
-        };
-        DevicePixelRect pause_button_right_rect {
-            playback_button_location.translated(maximum_playback_button_size * 2 / 3, 0),
-            { maximum_playback_button_size / 3, playback_button_size }
-        };
-
-        context.painter().fill_rect(pause_button_left_rect.to_type<int>(), playback_button_color);
-        context.painter().fill_rect(pause_button_right_rect.to_type<int>(), playback_button_color);
-    }
-
-    control_box_rect.take_from_left(playback_button_hover_rect.width());
-    return control_box_rect;
-}
-
-DevicePixelRect VideoPaintable::paint_control_bar_timeline(PaintContext& context, HTML::HTMLVideoElement const& video_element, DevicePixelRect control_box_rect, Optional<DevicePixelPoint> const& mouse_position) const
-{
-    auto maximum_timeline_button_size = context.rounded_device_pixels(16);
-
-    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;
-
-    auto timeline_button_size = min(maximum_timeline_button_size, timeline_rect.height() / 2);
-    auto timeline_button_offset_x = static_cast<DevicePixels>(round(playback_position));
-
-    Gfx::AntiAliasingPainter painter { context.painter() };
-
-    auto playback_timelime_scrub_rect = timeline_rect;
-    playback_timelime_scrub_rect.shrink(0, timeline_rect.height() - timeline_button_size / 2);
-
-    auto timeline_past_rect = playback_timelime_scrub_rect;
-    timeline_past_rect.set_width(timeline_button_offset_x);
-    painter.fill_rect_with_rounded_corners(timeline_past_rect.to_type<int>(), control_highlight_color.lightened(), 4);
-
-    auto timeline_future_rect = playback_timelime_scrub_rect;
-    timeline_future_rect.take_from_left(timeline_button_offset_x);
-    painter.fill_rect_with_rounded_corners(timeline_future_rect.to_type<int>(), Color::Black, 4);
-
-    auto timeline_button_rect = timeline_rect;
-    timeline_button_rect.shrink(timeline_rect.width() - timeline_button_size, timeline_rect.height() - timeline_button_size);
-    timeline_button_rect.set_x(timeline_rect.x() + timeline_button_offset_x - timeline_button_size / 2);
-
-    auto timeline_is_hovered = mouse_position.has_value() && timeline_rect.contains(*mouse_position);
-    auto timeline_color = control_button_color(timeline_is_hovered);
-    painter.fill_ellipse(timeline_button_rect.to_type<int>(), timeline_color);
-
-    control_box_rect.take_from_left(timeline_rect.width() + timeline_button_size / 2);
-    return control_box_rect;
-}
-
-DevicePixelRect VideoPaintable::paint_control_bar_timestamp(PaintContext& context, HTML::HTMLVideoElement const& video_element, DevicePixelRect control_box_rect) const
-{
-    auto current_time = human_readable_digital_time(round(video_element.current_time()));
-    auto duration = human_readable_digital_time(round(video_element.duration()));
-    auto timestamp = String::formatted("{} / {}", current_time, duration).release_value_but_fixme_should_propagate_errors();
-
-    auto timestamp_size = static_cast<DevicePixels::Type>(ceilf(context.painter().font().width(timestamp)));
-    if (timestamp_size > control_box_rect.width())
-        return control_box_rect;
-
-    auto timestamp_rect = control_box_rect;
-    timestamp_rect.set_width(timestamp_size);
-
-    auto const& scaled_font = layout_node().scaled_font(context);
-    context.painter().draw_text(timestamp_rect.to_type<int>(), timestamp, scaled_font, Gfx::TextAlignment::CenterLeft, Color::White);
-
-    control_box_rect.take_from_left(timestamp_rect.width());
-    return control_box_rect;
-}
-
 void VideoPaintable::paint_placeholder_video_controls(PaintContext& context, DevicePixelRect video_rect, Optional<DevicePixelPoint> const& mouse_position) const
 {
     auto maximum_control_box_size = context.rounded_device_pixels(100);
@@ -358,63 +217,4 @@ void VideoPaintable::paint_placeholder_video_controls(PaintContext& context, Dev
     fill_triangle(context.painter(), playback_button_location.to_type<int>(), play_button_coordinates, playback_button_color);
 }
 
-VideoPaintable::DispatchEventOfSameName VideoPaintable::handle_mouseup(Badge<EventHandler>, CSSPixelPoint position, unsigned button, unsigned)
-{
-    if (button != GUI::MouseButton::Primary)
-        return DispatchEventOfSameName::Yes;
-
-    auto& video_element = layout_box().dom_node();
-    auto const& cached_layout_boxes = video_element.cached_layout_boxes({});
-
-    // FIXME: This runs from outside the context of any user script, so we do not have a running execution
-    //        context. This pushes one to allow the promise creation hook to run.
-    auto& environment_settings = document().relevant_settings_object();
-    environment_settings.prepare_to_run_script();
-
-    ScopeGuard guard { [&] { environment_settings.clean_up_after_running_script(); } };
-
-    auto toggle_playback = [&]() -> WebIDL::ExceptionOr<void> {
-        if (video_element.paused())
-            TRY(video_element.play());
-        else
-            TRY(video_element.pause());
-        return {};
-    };
-
-    if (cached_layout_boxes.control_box_rect.has_value() && cached_layout_boxes.control_box_rect->contains(position)) {
-        if (cached_layout_boxes.playback_button_rect.has_value() && cached_layout_boxes.playback_button_rect->contains(position)) {
-            toggle_playback().release_value_but_fixme_should_propagate_errors();
-            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<double>(x_offset) / static_cast<double>(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;
-    }
-
-    toggle_playback().release_value_but_fixme_should_propagate_errors();
-    return DispatchEventOfSameName::Yes;
-}
-
-VideoPaintable::DispatchEventOfSameName VideoPaintable::handle_mousemove(Badge<EventHandler>, CSSPixelPoint position, unsigned, unsigned)
-{
-    auto& video_element = layout_box().dom_node();
-
-    if (absolute_rect().contains(position)) {
-        video_element.set_layout_mouse_position({}, position);
-        return DispatchEventOfSameName::Yes;
-    }
-
-    video_element.set_layout_mouse_position({}, {});
-    return DispatchEventOfSameName::No;
-}
-
 }

Userland/Libraries/LibWeb/Painting/VideoPaintable.h

@@ -7,12 +7,12 @@
 #pragma once
 
 #include <LibWeb/Forward.h>
-#include <LibWeb/Painting/PaintableBox.h>
+#include <LibWeb/Painting/MediaPaintable.h>
 
 namespace Web::Painting {
 
-class VideoPaintable final : public PaintableBox {
-    JS_CELL(VideoPaintable, PaintableBox);
+class VideoPaintable final : public MediaPaintable {
+    JS_CELL(VideoPaintable, MediaPaintable);
 
 public:
     static JS::NonnullGCPtr<VideoPaintable> create(Layout::VideoBox const&);
@@ -25,15 +25,6 @@ public:
 private:
     VideoPaintable(Layout::VideoBox const&);
 
-    virtual bool wants_mouse_events() const override { return true; }
-    virtual DispatchEventOfSameName handle_mouseup(Badge<EventHandler>, CSSPixelPoint, unsigned button, unsigned modifiers) override;
-    virtual DispatchEventOfSameName handle_mousemove(Badge<EventHandler>, CSSPixelPoint, unsigned buttons, unsigned modifiers) override;
-
-    void paint_loaded_video_controls(PaintContext&, HTML::HTMLVideoElement const&, DevicePixelRect video_rect, Optional<DevicePixelPoint> const& mouse_position) const;
-    DevicePixelRect paint_control_bar_playback_button(PaintContext&, HTML::HTMLVideoElement const&, DevicePixelRect control_box_rect, Optional<DevicePixelPoint> const& mouse_position) const;
-    DevicePixelRect paint_control_bar_timeline(PaintContext&, HTML::HTMLVideoElement const&, DevicePixelRect control_box_rect, Optional<DevicePixelPoint> const& mouse_position) const;
-    DevicePixelRect paint_control_bar_timestamp(PaintContext&, HTML::HTMLVideoElement const&, DevicePixelRect control_box_rect) const;
-
     void paint_placeholder_video_controls(PaintContext&, DevicePixelRect video_rect, Optional<DevicePixelPoint> const& mouse_position) const;
 };