diff options
Diffstat (limited to 'Userland')
| -rw-r--r-- | Userland/Libraries/LibWeb/Painting/VideoPaintable.cpp | 168 | ||||
| -rw-r--r-- | Userland/Libraries/LibWeb/Painting/VideoPaintable.h | 11 |
2 files changed, 176 insertions, 3 deletions
diff --git a/Userland/Libraries/LibWeb/Painting/VideoPaintable.cpp b/Userland/Libraries/LibWeb/Painting/VideoPaintable.cpp index f7551246e4..9d3e12f69c 100644 --- a/Userland/Libraries/LibWeb/Painting/VideoPaintable.cpp +++ b/Userland/Libraries/LibWeb/Painting/VideoPaintable.cpp @@ -4,13 +4,28 @@ * SPDX-License-Identifier: BSD-2-Clause */ +#include <AK/Array.h> +#include <LibGUI/Event.h> +#include <LibGfx/AntiAliasingPainter.h> +#include <LibWeb/DOM/Document.h> +#include <LibWeb/HTML/HTMLMediaElement.h> #include <LibWeb/HTML/HTMLVideoElement.h> #include <LibWeb/Layout/VideoBox.h> #include <LibWeb/Painting/BorderRadiusCornerClipper.h> +#include <LibWeb/Painting/InputColors.h> #include <LibWeb/Painting/VideoPaintable.h> namespace Web::Painting { +static constexpr auto control_box_color = Gfx::Color::from_rgb(0x262626); + +static Gfx::Color control_button_color(PaintContext& context, bool is_hovered) +{ + if (!is_hovered) + return Gfx::Color::from_rgb(0xff'ff'ff); + return context.palette().link(); +} + JS::NonnullGCPtr<VideoPaintable> VideoPaintable::create(Layout::VideoBox const& layout_box) { return layout_box.heap().allocate_without_realm<VideoPaintable>(layout_box); @@ -21,6 +36,11 @@ VideoPaintable::VideoPaintable(Layout::VideoBox const& layout_box) { } +Layout::VideoBox& VideoPaintable::layout_box() +{ + return static_cast<Layout::VideoBox&>(layout_node()); +} + Layout::VideoBox const& VideoPaintable::layout_box() const { return static_cast<Layout::VideoBox const&>(layout_node()); @@ -40,11 +60,153 @@ void VideoPaintable::paint(PaintContext& context, PaintPhase phase) const if (phase != PaintPhase::Foreground) return; + auto video_rect = context.rounded_device_rect(absolute_rect()); + ScopedCornerRadiusClip corner_clip { context, context.painter(), video_rect, normalized_border_radii_data(ShrinkRadiiForBorders::Yes) }; + + Optional<DevicePixelPoint> mouse_position; + if (m_mouse_position.has_value()) + mouse_position = context.rounded_device_point(*m_mouse_position); + + auto const& video_element = layout_box().dom_node(); + auto paint_user_agent_controls = video_element.has_attribute(HTML::AttributeNames::controls); + if (auto const& bitmap = layout_box().dom_node().current_frame()) { - auto image_rect = context.rounded_device_rect(absolute_rect()); - ScopedCornerRadiusClip corner_clip { context, context.painter(), image_rect, normalized_border_radii_data(ShrinkRadiiForBorders::Yes) }; - context.painter().draw_scaled_bitmap(image_rect.to_type<int>(), *bitmap, bitmap->rect(), 1.0f, to_gfx_scaling_mode(computed_values().image_rendering())); + context.painter().draw_scaled_bitmap(video_rect.to_type<int>(), *bitmap, bitmap->rect(), 1.0f, to_gfx_scaling_mode(computed_values().image_rendering())); + + if (paint_user_agent_controls) + paint_loaded_video_controls(context, video_element, video_rect, mouse_position); + } else { + auto input_colors = compute_input_colors(context.palette(), computed_values().accent_color()); + context.painter().fill_rect(video_rect.to_type<int>(), input_colors.light_gray); + + if (paint_user_agent_controls) + paint_placeholder_video_controls(context, video_rect, mouse_position); + } +} + +void VideoPaintable::paint_loaded_video_controls(PaintContext& context, HTML::HTMLVideoElement const& video_element, DevicePixelRect video_rect, Optional<DevicePixelPoint> const& mouse_position) const +{ + static constexpr DevicePixels maximum_control_box_size = 60; + static constexpr DevicePixels maximum_playback_button_size = 30; + static constexpr DevicePixels maximum_playback_button_offset_x = 30; + + 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)); + + 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() } + }; + + auto playback_button_is_hovered = mouse_position.has_value() && playback_button_hover_rect.contains(*mouse_position); + auto playback_button_color = control_button_color(context, playback_button_is_hovered); + + if (is_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) }, + } }; + + context.painter().draw_triangle(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); + } +} + +void VideoPaintable::paint_placeholder_video_controls(PaintContext& context, DevicePixelRect video_rect, Optional<DevicePixelPoint> const& mouse_position) const +{ + static constexpr DevicePixels maximum_control_box_size = 200; + static constexpr DevicePixels maximum_playback_button_size = 80; + + auto center = video_rect.center(); + + auto control_box_size = min(maximum_control_box_size, min(video_rect.width(), video_rect.height()) * 4 / 5); + auto control_box_offset_x = control_box_size / 2; + auto control_box_offset_y = control_box_size / 2; + + auto control_box_location = center.translated(-control_box_offset_x, -control_box_offset_y); + DevicePixelRect control_box_rect { control_box_location, { control_box_size, control_box_size } }; + + auto playback_button_size = min(maximum_playback_button_size, min(video_rect.width(), video_rect.height()) * 2 / 5); + auto playback_button_offset_x = playback_button_size / 2; + auto playback_button_offset_y = playback_button_size / 2; + + // We want to center the play button on its center of mass, which is not the midpoint of its vertices. + // To do so, reduce its desired x offset by a factor of tan(30 degrees) / 2 (about 0.288685). + playback_button_offset_x -= 0.288685f * static_cast<float>(static_cast<DevicePixels::Type>(playback_button_offset_x)); + + auto playback_button_location = center.translated(-playback_button_offset_x, -playback_button_offset_y); + + 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) }, + } }; + + auto playback_button_is_hovered = mouse_position.has_value() && control_box_rect.contains(*mouse_position); + auto playback_button_color = control_button_color(context, playback_button_is_hovered); + + Gfx::AntiAliasingPainter painter { context.painter() }; + painter.fill_ellipse(control_box_rect.to_type<int>(), control_box_color); + context.painter().draw_triangle(playback_button_location.to_type<int>(), play_button_coordinates, playback_button_color); +} + +VideoPaintable::DispatchEventOfSameName VideoPaintable::handle_mouseup(Badge<EventHandler>, CSSPixelPoint, unsigned button, unsigned) +{ + if (button != GUI::MouseButton::Primary) + return DispatchEventOfSameName::No; + + auto& video_element = layout_box().dom_node(); + + // 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(); + + if (video_element.paused()) + video_element.play().release_value_but_fixme_should_propagate_errors(); + else + video_element.pause().release_value_but_fixme_should_propagate_errors(); + + environment_settings.clean_up_after_running_script(); + return DispatchEventOfSameName::Yes; +} + +VideoPaintable::DispatchEventOfSameName VideoPaintable::handle_mousemove(Badge<EventHandler>, CSSPixelPoint position, unsigned, unsigned) +{ + if (absolute_rect().contains(position)) { + m_mouse_position = position; + return DispatchEventOfSameName::Yes; } + + m_mouse_position.clear(); + return DispatchEventOfSameName::No; } } diff --git a/Userland/Libraries/LibWeb/Painting/VideoPaintable.h b/Userland/Libraries/LibWeb/Painting/VideoPaintable.h index d5e6092a27..1d7204f0a6 100644 --- a/Userland/Libraries/LibWeb/Painting/VideoPaintable.h +++ b/Userland/Libraries/LibWeb/Painting/VideoPaintable.h @@ -6,6 +6,7 @@ #pragma once +#include <AK/Optional.h> #include <LibWeb/Forward.h> #include <LibWeb/Painting/PaintableBox.h> @@ -19,10 +20,20 @@ public: virtual void paint(PaintContext&, PaintPhase) const override; + Layout::VideoBox& layout_box(); Layout::VideoBox const& layout_box() const; 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; + void paint_placeholder_video_controls(PaintContext&, DevicePixelRect video_rect, Optional<DevicePixelPoint> const& mouse_position) const; + + Optional<CSSPixelPoint> m_mouse_position; }; } |