Coverage Report

Created: 2025-03-04 07:22

/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
}