/src/serenity/Userland/Libraries/LibWeb/Painting/MediaPaintable.cpp
Line | Count | Source (jump to first uncovered line) |
1 | | /* |
2 | | * Copyright (c) 2023, Tim Flynn <trflynn89@serenityos.org> |
3 | | * |
4 | | * SPDX-License-Identifier: BSD-2-Clause |
5 | | */ |
6 | | |
7 | | #include <AK/Array.h> |
8 | | #include <AK/NumberFormat.h> |
9 | | #include <LibGfx/AntiAliasingPainter.h> |
10 | | #include <LibWeb/DOM/Document.h> |
11 | | #include <LibWeb/HTML/BrowsingContext.h> |
12 | | #include <LibWeb/HTML/HTMLAudioElement.h> |
13 | | #include <LibWeb/HTML/HTMLVideoElement.h> |
14 | | #include <LibWeb/Layout/ReplacedBox.h> |
15 | | #include <LibWeb/Page/EventHandler.h> |
16 | | #include <LibWeb/Page/Page.h> |
17 | | #include <LibWeb/Painting/MediaPaintable.h> |
18 | | #include <LibWeb/UIEvents/MouseButton.h> |
19 | | |
20 | | namespace Web::Painting { |
21 | | |
22 | | static constexpr auto control_box_color = Gfx::Color::from_rgb(0x26'26'26); |
23 | | static constexpr auto control_highlight_color = Gfx::Color::from_rgb(0x1d'99'f3); |
24 | | |
25 | | static constexpr Gfx::Color control_button_color(bool is_hovered) |
26 | 0 | { |
27 | 0 | if (!is_hovered) |
28 | 0 | return Color::White; |
29 | 0 | return control_highlight_color; |
30 | 0 | } |
31 | | |
32 | | MediaPaintable::MediaPaintable(Layout::ReplacedBox const& layout_box) |
33 | 0 | : PaintableBox(layout_box) |
34 | 0 | { |
35 | 0 | } |
36 | | |
37 | | Optional<DevicePixelPoint> MediaPaintable::mouse_position(PaintContext& context, HTML::HTMLMediaElement const& media_element) |
38 | 0 | { |
39 | 0 | auto const& layout_mouse_position = media_element.layout_mouse_position({}); |
40 | |
|
41 | 0 | if (layout_mouse_position.has_value() && media_element.document().hovered_node() == &media_element) |
42 | 0 | return context.rounded_device_point(*layout_mouse_position); |
43 | | |
44 | 0 | return {}; |
45 | 0 | } |
46 | | |
47 | | void MediaPaintable::fill_triangle(DisplayListRecorder& painter, Gfx::IntPoint location, Array<Gfx::IntPoint, 3> coordinates, Color color) |
48 | 0 | { |
49 | 0 | Gfx::Path path; |
50 | 0 | path.move_to((coordinates[0] + location).to_type<float>()); |
51 | 0 | path.line_to((coordinates[1] + location).to_type<float>()); |
52 | 0 | path.line_to((coordinates[2] + location).to_type<float>()); |
53 | 0 | path.close(); |
54 | 0 | painter.fill_path({ |
55 | 0 | .path = path, |
56 | 0 | .color = color, |
57 | 0 | .winding_rule = Gfx::WindingRule::EvenOdd, |
58 | 0 | }); |
59 | 0 | } |
60 | | |
61 | | void MediaPaintable::paint_media_controls(PaintContext& context, HTML::HTMLMediaElement const& media_element, DevicePixelRect media_rect, Optional<DevicePixelPoint> const& mouse_position) const |
62 | 0 | { |
63 | 0 | auto components = compute_control_bar_components(context, media_element, media_rect); |
64 | 0 | context.display_list_recorder().fill_rect(components.control_box_rect.to_type<int>(), control_box_color.with_alpha(0xd0)); |
65 | |
|
66 | 0 | paint_control_bar_playback_button(context, media_element, components, mouse_position); |
67 | 0 | paint_control_bar_timeline(context, media_element, components); |
68 | 0 | paint_control_bar_timestamp(context, components); |
69 | 0 | paint_control_bar_speaker(context, media_element, components, mouse_position); |
70 | 0 | paint_control_bar_volume(context, media_element, components, mouse_position); |
71 | 0 | } |
72 | | |
73 | | MediaPaintable::Components MediaPaintable::compute_control_bar_components(PaintContext& context, HTML::HTMLMediaElement const& media_element, DevicePixelRect media_rect) const |
74 | 0 | { |
75 | 0 | auto maximum_control_box_height = context.rounded_device_pixels(40); |
76 | 0 | auto component_padding = context.rounded_device_pixels(5); |
77 | |
|
78 | 0 | Components components {}; |
79 | |
|
80 | 0 | components.control_box_rect = media_rect; |
81 | 0 | if (components.control_box_rect.height() > maximum_control_box_height) |
82 | 0 | components.control_box_rect.take_from_top(components.control_box_rect.height() - maximum_control_box_height); |
83 | |
|
84 | 0 | auto remaining_rect = components.control_box_rect; |
85 | 0 | remaining_rect.shrink(component_padding * 2, 0); |
86 | |
|
87 | 0 | auto timeline_rect_height = context.rounded_device_pixels(8); |
88 | 0 | if ((timeline_rect_height * 3) <= components.control_box_rect.height()) { |
89 | 0 | components.timeline_rect = components.control_box_rect; |
90 | 0 | components.timeline_rect.set_height(timeline_rect_height); |
91 | 0 | remaining_rect.take_from_top(timeline_rect_height); |
92 | 0 | } |
93 | |
|
94 | 0 | auto playback_button_rect_width = min(context.rounded_device_pixels(40), remaining_rect.width()); |
95 | 0 | components.playback_button_rect = remaining_rect; |
96 | 0 | components.playback_button_rect.set_width(playback_button_rect_width); |
97 | 0 | remaining_rect.take_from_left(playback_button_rect_width); |
98 | |
|
99 | 0 | components.speaker_button_size = context.rounded_device_pixels(30); |
100 | 0 | if (components.speaker_button_size <= remaining_rect.width()) { |
101 | 0 | components.volume_button_size = context.rounded_device_pixels(16); |
102 | |
|
103 | 0 | if ((components.speaker_button_size + components.volume_button_size * 3) <= remaining_rect.width()) { |
104 | 0 | auto volume_width = min(context.rounded_device_pixels(60), remaining_rect.width() - components.speaker_button_size); |
105 | |
|
106 | 0 | components.volume_rect = remaining_rect; |
107 | 0 | components.volume_rect.take_from_left(remaining_rect.width() - volume_width); |
108 | 0 | remaining_rect.take_from_right(volume_width); |
109 | |
|
110 | 0 | components.volume_scrub_rect = components.volume_rect.shrunken(components.volume_button_size, components.volume_rect.height() - components.volume_button_size / 2); |
111 | 0 | } |
112 | |
|
113 | 0 | components.speaker_button_rect = remaining_rect; |
114 | 0 | components.speaker_button_rect.take_from_left(remaining_rect.width() - components.speaker_button_size); |
115 | 0 | remaining_rect.take_from_right(components.speaker_button_size + component_padding); |
116 | 0 | } |
117 | |
|
118 | 0 | auto display_time = human_readable_digital_time(round(media_element.layout_display_time({}))); |
119 | 0 | auto duration = human_readable_digital_time(isnan(media_element.duration()) ? 0 : round(media_element.duration())); |
120 | 0 | components.timestamp = String::formatted("{} / {}", display_time, duration).release_value_but_fixme_should_propagate_errors(); |
121 | 0 | components.timestamp_font = layout_node().scaled_font(context); |
122 | |
|
123 | 0 | auto timestamp_size = DevicePixels { static_cast<DevicePixels::Type>(ceilf(components.timestamp_font->width(components.timestamp))) }; |
124 | 0 | if (timestamp_size <= remaining_rect.width()) { |
125 | 0 | components.timestamp_rect = remaining_rect; |
126 | 0 | components.timestamp_rect.take_from_right(remaining_rect.width() - timestamp_size); |
127 | 0 | remaining_rect.take_from_left(timestamp_size + component_padding); |
128 | 0 | } |
129 | |
|
130 | 0 | media_element.cached_layout_boxes({}).control_box_rect = context.scale_to_css_rect(components.control_box_rect); |
131 | 0 | media_element.cached_layout_boxes({}).playback_button_rect = context.scale_to_css_rect(components.playback_button_rect); |
132 | 0 | media_element.cached_layout_boxes({}).timeline_rect = context.scale_to_css_rect(components.timeline_rect); |
133 | 0 | media_element.cached_layout_boxes({}).speaker_button_rect = context.scale_to_css_rect(components.speaker_button_rect); |
134 | 0 | media_element.cached_layout_boxes({}).volume_rect = context.scale_to_css_rect(components.volume_rect); |
135 | 0 | media_element.cached_layout_boxes({}).volume_scrub_rect = context.scale_to_css_rect(components.volume_scrub_rect); |
136 | |
|
137 | 0 | return components; |
138 | 0 | } |
139 | | |
140 | | void MediaPaintable::paint_control_bar_playback_button(PaintContext& context, HTML::HTMLMediaElement const& media_element, Components const& components, Optional<DevicePixelPoint> const& mouse_position) |
141 | 0 | { |
142 | 0 | auto playback_button_size = components.playback_button_rect.width() * 4 / 10; |
143 | |
|
144 | 0 | auto playback_button_offset_x = (components.playback_button_rect.width() - playback_button_size) / 2; |
145 | 0 | auto playback_button_offset_y = (components.playback_button_rect.height() - playback_button_size) / 2; |
146 | 0 | auto playback_button_location = components.playback_button_rect.top_left().translated(playback_button_offset_x, playback_button_offset_y); |
147 | |
|
148 | 0 | auto playback_button_is_hovered = rect_is_hovered(media_element, components.playback_button_rect, mouse_position); |
149 | 0 | auto playback_button_color = control_button_color(playback_button_is_hovered); |
150 | |
|
151 | 0 | if (media_element.paused()) { |
152 | 0 | Array<Gfx::IntPoint, 3> play_button_coordinates { { |
153 | 0 | { 0, 0 }, |
154 | 0 | { static_cast<int>(playback_button_size), static_cast<int>(playback_button_size) / 2 }, |
155 | 0 | { 0, static_cast<int>(playback_button_size) }, |
156 | 0 | } }; |
157 | |
|
158 | 0 | fill_triangle(context.display_list_recorder(), playback_button_location.to_type<int>(), play_button_coordinates, playback_button_color); |
159 | 0 | } else { |
160 | 0 | DevicePixelRect pause_button_left_rect { |
161 | 0 | playback_button_location, |
162 | 0 | { playback_button_size / 3, playback_button_size } |
163 | 0 | }; |
164 | 0 | DevicePixelRect pause_button_right_rect { |
165 | 0 | playback_button_location.translated(playback_button_size * 2 / 3, 0), |
166 | 0 | { playback_button_size / 3, playback_button_size } |
167 | 0 | }; |
168 | |
|
169 | 0 | context.display_list_recorder().fill_rect(pause_button_left_rect.to_type<int>(), playback_button_color); |
170 | 0 | context.display_list_recorder().fill_rect(pause_button_right_rect.to_type<int>(), playback_button_color); |
171 | 0 | } |
172 | 0 | } |
173 | | |
174 | | void MediaPaintable::paint_control_bar_timeline(PaintContext& context, HTML::HTMLMediaElement const& media_element, Components const& components) |
175 | 0 | { |
176 | 0 | if (components.timeline_rect.is_empty()) |
177 | 0 | return; |
178 | | |
179 | 0 | auto playback_percentage = isnan(media_element.duration()) ? 0.0 : media_element.layout_display_time({}) / media_element.duration(); |
180 | 0 | auto playback_position = static_cast<double>(static_cast<int>(components.timeline_rect.width())) * playback_percentage; |
181 | 0 | auto timeline_button_offset_x = static_cast<DevicePixels>(round(playback_position)); |
182 | |
|
183 | 0 | auto timeline_past_rect = components.timeline_rect; |
184 | 0 | timeline_past_rect.set_width(timeline_button_offset_x); |
185 | 0 | context.display_list_recorder().fill_rect(timeline_past_rect.to_type<int>(), control_highlight_color.lightened()); |
186 | |
|
187 | 0 | auto timeline_future_rect = components.timeline_rect; |
188 | 0 | timeline_future_rect.take_from_left(timeline_button_offset_x); |
189 | 0 | context.display_list_recorder().fill_rect(timeline_future_rect.to_type<int>(), Color::Black); |
190 | 0 | } |
191 | | |
192 | | void MediaPaintable::paint_control_bar_timestamp(PaintContext& context, Components const& components) |
193 | 0 | { |
194 | 0 | if (components.timestamp_rect.is_empty()) |
195 | 0 | return; |
196 | | |
197 | 0 | context.display_list_recorder().draw_text(components.timestamp_rect.to_type<int>(), components.timestamp, *components.timestamp_font, Gfx::TextAlignment::CenterLeft, Color::White); |
198 | 0 | } |
199 | | |
200 | | void MediaPaintable::paint_control_bar_speaker(PaintContext& context, HTML::HTMLMediaElement const& media_element, Components const& components, Optional<DevicePixelPoint> const& mouse_position) |
201 | 0 | { |
202 | 0 | if (components.speaker_button_rect.is_empty()) |
203 | 0 | return; |
204 | | |
205 | 0 | auto speaker_button_width = context.rounded_device_pixels(20); |
206 | 0 | auto speaker_button_height = context.rounded_device_pixels(15); |
207 | |
|
208 | 0 | auto speaker_button_offset_x = (components.speaker_button_rect.width() - speaker_button_width) / 2; |
209 | 0 | auto speaker_button_offset_y = (components.speaker_button_rect.height() - speaker_button_height) / 2; |
210 | 0 | auto speaker_button_location = components.speaker_button_rect.top_left().translated(speaker_button_offset_x, speaker_button_offset_y); |
211 | |
|
212 | 0 | auto device_point = [&](double x, double y) { |
213 | 0 | auto position = context.rounded_device_point({ x, y }) + speaker_button_location; |
214 | 0 | return position.to_type<DevicePixels::Type>().to_type<float>(); |
215 | 0 | }; |
216 | |
|
217 | 0 | auto speaker_button_is_hovered = rect_is_hovered(media_element, components.speaker_button_rect, mouse_position); |
218 | 0 | auto speaker_button_color = control_button_color(speaker_button_is_hovered); |
219 | |
|
220 | 0 | Gfx::Path path; |
221 | |
|
222 | 0 | path.move_to(device_point(0, 4)); |
223 | 0 | path.line_to(device_point(5, 4)); |
224 | 0 | path.line_to(device_point(11, 0)); |
225 | 0 | path.line_to(device_point(11, 15)); |
226 | 0 | path.line_to(device_point(5, 11)); |
227 | 0 | path.line_to(device_point(0, 11)); |
228 | 0 | path.line_to(device_point(0, 4)); |
229 | 0 | path.close(); |
230 | 0 | context.display_list_recorder().fill_path({ .path = path, .color = speaker_button_color, .winding_rule = Gfx::WindingRule::EvenOdd }); |
231 | |
|
232 | 0 | path.clear(); |
233 | 0 | path.move_to(device_point(13, 3)); |
234 | 0 | path.quadratic_bezier_curve_to(device_point(16, 7.5), device_point(13, 12)); |
235 | 0 | path.move_to(device_point(14, 0)); |
236 | 0 | path.quadratic_bezier_curve_to(device_point(20, 7.5), device_point(14, 15)); |
237 | 0 | context.display_list_recorder().stroke_path({ |
238 | 0 | .cap_style = Gfx::Path::CapStyle::Round, |
239 | 0 | .join_style = Gfx::Path::JoinStyle::Round, |
240 | 0 | .miter_limit = 4, |
241 | 0 | .path = path, |
242 | 0 | .color = speaker_button_color, |
243 | 0 | .thickness = 1, |
244 | 0 | }); |
245 | |
|
246 | 0 | if (media_element.muted()) { |
247 | 0 | context.display_list_recorder().draw_line(device_point(0, 0).to_type<int>(), device_point(20, 15).to_type<int>(), Color::Red, 2); |
248 | 0 | context.display_list_recorder().draw_line(device_point(0, 15).to_type<int>(), device_point(20, 0).to_type<int>(), Color::Red, 2); |
249 | 0 | } |
250 | 0 | } |
251 | | |
252 | | void MediaPaintable::paint_control_bar_volume(PaintContext& context, HTML::HTMLMediaElement const& media_element, Components const& components, Optional<DevicePixelPoint> const& mouse_position) |
253 | 0 | { |
254 | 0 | if (components.volume_rect.is_empty()) |
255 | 0 | return; |
256 | | |
257 | 0 | auto volume_position = static_cast<double>(static_cast<int>(components.volume_scrub_rect.width())) * media_element.volume(); |
258 | 0 | auto volume_button_offset_x = static_cast<DevicePixels>(round(volume_position)); |
259 | |
|
260 | 0 | auto volume_lower_rect = components.volume_scrub_rect; |
261 | 0 | volume_lower_rect.set_width(volume_button_offset_x); |
262 | 0 | context.display_list_recorder().fill_rect_with_rounded_corners(volume_lower_rect.to_type<int>(), control_highlight_color.lightened(), 4); |
263 | |
|
264 | 0 | auto volume_higher_rect = components.volume_scrub_rect; |
265 | 0 | volume_higher_rect.take_from_left(volume_button_offset_x); |
266 | 0 | context.display_list_recorder().fill_rect_with_rounded_corners(volume_higher_rect.to_type<int>(), Color::Black, 4); |
267 | |
|
268 | 0 | auto volume_button_rect = components.volume_scrub_rect; |
269 | 0 | volume_button_rect.shrink(components.volume_scrub_rect.width() - components.volume_button_size, components.volume_scrub_rect.height() - components.volume_button_size); |
270 | 0 | volume_button_rect.set_x(components.volume_scrub_rect.x() + volume_button_offset_x - components.volume_button_size / 2); |
271 | |
|
272 | 0 | auto volume_is_hovered = rect_is_hovered(media_element, components.volume_rect, mouse_position, HTML::HTMLMediaElement::MouseTrackingComponent::Volume); |
273 | 0 | auto volume_color = control_button_color(volume_is_hovered); |
274 | 0 | context.display_list_recorder().fill_ellipse(volume_button_rect.to_type<int>(), volume_color); |
275 | 0 | } |
276 | | |
277 | | MediaPaintable::DispatchEventOfSameName MediaPaintable::handle_mousedown(Badge<EventHandler>, CSSPixelPoint position, unsigned button, unsigned) |
278 | 0 | { |
279 | 0 | if (button != UIEvents::MouseButton::Primary) |
280 | 0 | return DispatchEventOfSameName::Yes; |
281 | | |
282 | 0 | auto& media_element = *verify_cast<HTML::HTMLMediaElement>(layout_box().dom_node()); |
283 | 0 | auto const& cached_layout_boxes = media_element.cached_layout_boxes({}); |
284 | |
|
285 | 0 | if (cached_layout_boxes.timeline_rect.has_value() && cached_layout_boxes.timeline_rect->contains(position)) { |
286 | 0 | media_element.set_layout_mouse_tracking_component({}, HTML::HTMLMediaElement::MouseTrackingComponent::Timeline); |
287 | 0 | set_current_time(media_element, *cached_layout_boxes.timeline_rect, position, Temporary::Yes); |
288 | 0 | } else if (cached_layout_boxes.volume_rect.has_value() && cached_layout_boxes.volume_rect->contains(position)) { |
289 | 0 | media_element.set_layout_mouse_tracking_component({}, HTML::HTMLMediaElement::MouseTrackingComponent::Volume); |
290 | 0 | set_volume(media_element, *cached_layout_boxes.volume_scrub_rect, position); |
291 | 0 | } |
292 | |
|
293 | 0 | if (media_element.layout_mouse_tracking_component({}).has_value()) |
294 | 0 | const_cast<HTML::Navigable&>(*navigable()).event_handler().set_mouse_event_tracking_paintable(this); |
295 | |
|
296 | 0 | return DispatchEventOfSameName::Yes; |
297 | 0 | } |
298 | | |
299 | | MediaPaintable::DispatchEventOfSameName MediaPaintable::handle_mouseup(Badge<EventHandler>, CSSPixelPoint position, unsigned button, unsigned) |
300 | 0 | { |
301 | 0 | auto& media_element = *verify_cast<HTML::HTMLMediaElement>(layout_box().dom_node()); |
302 | 0 | auto const& cached_layout_boxes = media_element.cached_layout_boxes({}); |
303 | |
|
304 | 0 | if (auto const& mouse_tracking_component = media_element.layout_mouse_tracking_component({}); mouse_tracking_component.has_value()) { |
305 | 0 | switch (*mouse_tracking_component) { |
306 | 0 | case HTML::HTMLMediaElement::MouseTrackingComponent::Timeline: |
307 | 0 | set_current_time(media_element, *cached_layout_boxes.timeline_rect, position, Temporary::No); |
308 | 0 | media_element.set_layout_display_time({}, {}); |
309 | 0 | break; |
310 | | |
311 | 0 | case HTML::HTMLMediaElement::MouseTrackingComponent::Volume: |
312 | 0 | browsing_context().page().client().page_did_stop_tooltip_override(); |
313 | 0 | break; |
314 | 0 | } |
315 | | |
316 | 0 | const_cast<HTML::Navigable&>(*navigable()).event_handler().set_mouse_event_tracking_paintable(nullptr); |
317 | 0 | media_element.set_layout_mouse_tracking_component({}, {}); |
318 | |
|
319 | 0 | return DispatchEventOfSameName::Yes; |
320 | 0 | } |
321 | | |
322 | 0 | if (button != UIEvents::MouseButton::Primary) |
323 | 0 | return DispatchEventOfSameName::Yes; |
324 | | |
325 | 0 | if (cached_layout_boxes.control_box_rect.has_value() && cached_layout_boxes.control_box_rect->contains(position)) { |
326 | 0 | if (cached_layout_boxes.playback_button_rect.has_value() && cached_layout_boxes.playback_button_rect->contains(position)) { |
327 | 0 | media_element.toggle_playback().release_value_but_fixme_should_propagate_errors(); |
328 | 0 | return DispatchEventOfSameName::Yes; |
329 | 0 | } |
330 | | |
331 | 0 | if (cached_layout_boxes.speaker_button_rect.has_value() && cached_layout_boxes.speaker_button_rect->contains(position)) { |
332 | 0 | media_element.set_muted(!media_element.muted()); |
333 | 0 | return DispatchEventOfSameName::Yes; |
334 | 0 | } |
335 | | |
336 | 0 | if (cached_layout_boxes.timeline_rect.has_value() && cached_layout_boxes.timeline_rect->contains(position)) |
337 | 0 | return DispatchEventOfSameName::No; |
338 | 0 | } |
339 | | |
340 | 0 | media_element.toggle_playback().release_value_but_fixme_should_propagate_errors(); |
341 | 0 | return DispatchEventOfSameName::Yes; |
342 | 0 | } |
343 | | |
344 | | MediaPaintable::DispatchEventOfSameName MediaPaintable::handle_mousemove(Badge<EventHandler>, CSSPixelPoint position, unsigned, unsigned) |
345 | 0 | { |
346 | 0 | auto& media_element = *verify_cast<HTML::HTMLMediaElement>(layout_box().dom_node()); |
347 | 0 | auto const& cached_layout_boxes = media_element.cached_layout_boxes({}); |
348 | |
|
349 | 0 | if (auto const& mouse_tracking_component = media_element.layout_mouse_tracking_component({}); mouse_tracking_component.has_value()) { |
350 | 0 | switch (*mouse_tracking_component) { |
351 | 0 | case HTML::HTMLMediaElement::MouseTrackingComponent::Timeline: |
352 | 0 | if (cached_layout_boxes.timeline_rect.has_value()) |
353 | 0 | set_current_time(media_element, *cached_layout_boxes.timeline_rect, position, Temporary::Yes); |
354 | 0 | break; |
355 | | |
356 | 0 | case HTML::HTMLMediaElement::MouseTrackingComponent::Volume: |
357 | 0 | if (cached_layout_boxes.volume_rect.has_value()) { |
358 | 0 | set_volume(media_element, *cached_layout_boxes.volume_scrub_rect, position); |
359 | |
|
360 | 0 | auto volume = static_cast<u8>(media_element.volume() * 100.0); |
361 | 0 | browsing_context().page().client().page_did_request_tooltip_override({ position.x(), cached_layout_boxes.volume_scrub_rect->y() }, ByteString::formatted("{}%", volume)); |
362 | 0 | } |
363 | |
|
364 | 0 | break; |
365 | 0 | } |
366 | 0 | } |
367 | | |
368 | 0 | if (absolute_rect().contains(position)) { |
369 | 0 | media_element.set_layout_mouse_position({}, position); |
370 | 0 | return DispatchEventOfSameName::Yes; |
371 | 0 | } |
372 | | |
373 | 0 | media_element.set_layout_mouse_position({}, {}); |
374 | 0 | return DispatchEventOfSameName::No; |
375 | 0 | } |
376 | | |
377 | | void MediaPaintable::set_current_time(HTML::HTMLMediaElement& media_element, CSSPixelRect timeline_rect, CSSPixelPoint mouse_position, Temporary temporarily) |
378 | 0 | { |
379 | 0 | auto x_offset = mouse_position.x() - timeline_rect.x(); |
380 | 0 | x_offset = max(x_offset, 0); |
381 | 0 | x_offset = min(x_offset, timeline_rect.width()); |
382 | |
|
383 | 0 | auto x_percentage = static_cast<double>(x_offset) / static_cast<double>(timeline_rect.width()); |
384 | 0 | auto position = static_cast<double>(x_percentage) * media_element.duration(); |
385 | |
|
386 | 0 | switch (temporarily) { |
387 | 0 | case Temporary::Yes: |
388 | 0 | media_element.set_layout_display_time({}, position); |
389 | 0 | break; |
390 | 0 | case Temporary::No: |
391 | 0 | media_element.set_current_time(position); |
392 | 0 | break; |
393 | 0 | } |
394 | 0 | } |
395 | | |
396 | | void MediaPaintable::set_volume(HTML::HTMLMediaElement& media_element, CSSPixelRect volume_rect, CSSPixelPoint mouse_position) |
397 | 0 | { |
398 | 0 | auto x_offset = mouse_position.x() - volume_rect.x(); |
399 | 0 | x_offset = max(x_offset, 0); |
400 | 0 | x_offset = min(x_offset, volume_rect.width()); |
401 | |
|
402 | 0 | auto volume = static_cast<double>(x_offset) / static_cast<double>(volume_rect.width()); |
403 | 0 | media_element.set_volume(volume).release_value_but_fixme_should_propagate_errors(); |
404 | 0 | } |
405 | | |
406 | | bool MediaPaintable::rect_is_hovered(HTML::HTMLMediaElement const& media_element, Optional<DevicePixelRect> const& rect, Optional<DevicePixelPoint> const& mouse_position, Optional<HTML::HTMLMediaElement::MouseTrackingComponent> const& allowed_mouse_tracking_component) |
407 | 0 | { |
408 | 0 | if (auto const& mouse_tracking_component = media_element.layout_mouse_tracking_component({}); mouse_tracking_component.has_value()) |
409 | 0 | return mouse_tracking_component == allowed_mouse_tracking_component; |
410 | | |
411 | 0 | if (!rect.has_value() || !mouse_position.has_value()) |
412 | 0 | return false; |
413 | | |
414 | 0 | return rect->contains(*mouse_position); |
415 | 0 | } |
416 | | |
417 | | } |