MediaPaintable.cpp 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400
  1. /*
  2. * Copyright (c) 2023, Tim Flynn <trflynn89@serenityos.org>
  3. *
  4. * SPDX-License-Identifier: BSD-2-Clause
  5. */
  6. #include <AK/Array.h>
  7. #include <AK/NumberFormat.h>
  8. #include <LibGUI/Event.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/Painting/MediaPaintable.h>
  17. namespace Web::Painting {
  18. static constexpr auto control_box_color = Gfx::Color::from_rgb(0x26'26'26);
  19. static constexpr auto control_highlight_color = Gfx::Color::from_rgb(0x1d'99'f3);
  20. static constexpr Gfx::Color control_button_color(bool is_hovered)
  21. {
  22. if (!is_hovered)
  23. return Color::White;
  24. return control_highlight_color;
  25. }
  26. MediaPaintable::MediaPaintable(Layout::ReplacedBox const& layout_box)
  27. : PaintableBox(layout_box)
  28. {
  29. }
  30. Optional<DevicePixelPoint> MediaPaintable::mouse_position(PaintContext& context, HTML::HTMLMediaElement const& media_element)
  31. {
  32. auto const& layout_mouse_position = media_element.layout_mouse_position({});
  33. if (layout_mouse_position.has_value() && media_element.document().hovered_node() == &media_element)
  34. return context.rounded_device_point(*layout_mouse_position);
  35. return {};
  36. }
  37. void MediaPaintable::fill_triangle(Gfx::Painter& painter, Gfx::IntPoint location, Array<Gfx::IntPoint, 3> coordinates, Color color)
  38. {
  39. Gfx::AntiAliasingPainter aa_painter { painter };
  40. Gfx::Path path;
  41. path.move_to((coordinates[0] + location).to_type<float>());
  42. path.line_to((coordinates[1] + location).to_type<float>());
  43. path.line_to((coordinates[2] + location).to_type<float>());
  44. path.close();
  45. aa_painter.fill_path(path, color, Gfx::Painter::WindingRule::EvenOdd);
  46. }
  47. void MediaPaintable::paint_media_controls(PaintContext& context, HTML::HTMLMediaElement const& media_element, DevicePixelRect media_rect, Optional<DevicePixelPoint> const& mouse_position) const
  48. {
  49. auto components = compute_control_bar_components(context, media_element, media_rect);
  50. context.painter().fill_rect(components.control_box_rect.to_type<int>(), control_box_color.with_alpha(0xd0));
  51. paint_control_bar_playback_button(context, media_element, components, mouse_position);
  52. paint_control_bar_timeline(context, media_element, components);
  53. paint_control_bar_timestamp(context, components);
  54. paint_control_bar_speaker(context, media_element, components, mouse_position);
  55. paint_control_bar_volume(context, media_element, components, mouse_position);
  56. }
  57. MediaPaintable::Components MediaPaintable::compute_control_bar_components(PaintContext& context, HTML::HTMLMediaElement const& media_element, DevicePixelRect media_rect) const
  58. {
  59. auto maximum_control_box_height = context.rounded_device_pixels(40);
  60. auto component_padding = context.rounded_device_pixels(5);
  61. Components components {};
  62. components.control_box_rect = media_rect;
  63. if (components.control_box_rect.height() > maximum_control_box_height)
  64. components.control_box_rect.take_from_top(components.control_box_rect.height() - maximum_control_box_height);
  65. auto remaining_rect = components.control_box_rect;
  66. remaining_rect.shrink(component_padding * 2, 0);
  67. auto timeline_rect_height = context.rounded_device_pixels(8);
  68. if ((timeline_rect_height * 3) <= components.control_box_rect.height()) {
  69. components.timeline_rect = components.control_box_rect;
  70. components.timeline_rect.set_height(timeline_rect_height);
  71. remaining_rect.take_from_top(timeline_rect_height);
  72. }
  73. auto playback_button_rect_width = min(context.rounded_device_pixels(40), remaining_rect.width());
  74. components.playback_button_rect = remaining_rect;
  75. components.playback_button_rect.set_width(playback_button_rect_width);
  76. remaining_rect.take_from_left(playback_button_rect_width);
  77. components.speaker_button_size = context.rounded_device_pixels(30);
  78. if (components.speaker_button_size <= remaining_rect.width()) {
  79. components.volume_button_size = context.rounded_device_pixels(16);
  80. if ((components.speaker_button_size + components.volume_button_size * 3) <= remaining_rect.width()) {
  81. auto volume_width = min(context.rounded_device_pixels(60), remaining_rect.width() - components.speaker_button_size);
  82. components.volume_rect = remaining_rect;
  83. components.volume_rect.take_from_left(remaining_rect.width() - volume_width);
  84. remaining_rect.take_from_right(volume_width);
  85. }
  86. components.speaker_button_rect = remaining_rect;
  87. components.speaker_button_rect.take_from_left(remaining_rect.width() - components.speaker_button_size);
  88. remaining_rect.take_from_right(components.speaker_button_size + component_padding);
  89. }
  90. auto display_time = human_readable_digital_time(round(media_element.layout_display_time({})));
  91. auto duration = human_readable_digital_time(isnan(media_element.duration()) ? 0 : round(media_element.duration()));
  92. components.timestamp = String::formatted("{} / {}", display_time, duration).release_value_but_fixme_should_propagate_errors();
  93. components.timestamp_font = layout_node().scaled_font(context);
  94. auto timestamp_size = DevicePixels { static_cast<DevicePixels::Type>(ceilf(components.timestamp_font->width(components.timestamp))) };
  95. if (timestamp_size <= remaining_rect.width()) {
  96. components.timestamp_rect = remaining_rect;
  97. components.timestamp_rect.take_from_right(remaining_rect.width() - timestamp_size);
  98. remaining_rect.take_from_left(timestamp_size + component_padding);
  99. }
  100. media_element.cached_layout_boxes({}).control_box_rect = context.scale_to_css_rect(components.control_box_rect);
  101. media_element.cached_layout_boxes({}).playback_button_rect = context.scale_to_css_rect(components.playback_button_rect);
  102. media_element.cached_layout_boxes({}).timeline_rect = context.scale_to_css_rect(components.timeline_rect);
  103. media_element.cached_layout_boxes({}).speaker_button_rect = context.scale_to_css_rect(components.speaker_button_rect);
  104. media_element.cached_layout_boxes({}).volume_rect = context.scale_to_css_rect(components.volume_rect);
  105. return components;
  106. }
  107. void MediaPaintable::paint_control_bar_playback_button(PaintContext& context, HTML::HTMLMediaElement const& media_element, Components const& components, Optional<DevicePixelPoint> const& mouse_position)
  108. {
  109. auto playback_button_size = components.playback_button_rect.width() * 4 / 10;
  110. auto playback_button_offset_x = (components.playback_button_rect.width() - playback_button_size) / 2;
  111. auto playback_button_offset_y = (components.playback_button_rect.height() - playback_button_size) / 2;
  112. auto playback_button_location = components.playback_button_rect.top_left().translated(playback_button_offset_x, playback_button_offset_y);
  113. auto playback_button_is_hovered = rect_is_hovered(media_element, components.playback_button_rect, mouse_position);
  114. auto playback_button_color = control_button_color(playback_button_is_hovered);
  115. if (media_element.paused()) {
  116. Array<Gfx::IntPoint, 3> play_button_coordinates { {
  117. { 0, 0 },
  118. { static_cast<int>(playback_button_size), static_cast<int>(playback_button_size) / 2 },
  119. { 0, static_cast<int>(playback_button_size) },
  120. } };
  121. fill_triangle(context.painter(), playback_button_location.to_type<int>(), play_button_coordinates, playback_button_color);
  122. } else {
  123. DevicePixelRect pause_button_left_rect {
  124. playback_button_location,
  125. { playback_button_size / 3, playback_button_size }
  126. };
  127. DevicePixelRect pause_button_right_rect {
  128. playback_button_location.translated(playback_button_size * 2 / 3, 0),
  129. { playback_button_size / 3, playback_button_size }
  130. };
  131. context.painter().fill_rect(pause_button_left_rect.to_type<int>(), playback_button_color);
  132. context.painter().fill_rect(pause_button_right_rect.to_type<int>(), playback_button_color);
  133. }
  134. }
  135. void MediaPaintable::paint_control_bar_timeline(PaintContext& context, HTML::HTMLMediaElement const& media_element, Components const& components)
  136. {
  137. if (components.timeline_rect.is_empty())
  138. return;
  139. auto playback_percentage = isnan(media_element.duration()) ? 0.0 : media_element.layout_display_time({}) / media_element.duration();
  140. auto playback_position = static_cast<double>(static_cast<int>(components.timeline_rect.width())) * playback_percentage;
  141. auto timeline_button_offset_x = static_cast<DevicePixels>(round(playback_position));
  142. auto timeline_past_rect = components.timeline_rect;
  143. timeline_past_rect.set_width(timeline_button_offset_x);
  144. context.painter().fill_rect(timeline_past_rect.to_type<int>(), control_highlight_color.lightened());
  145. auto timeline_future_rect = components.timeline_rect;
  146. timeline_future_rect.take_from_left(timeline_button_offset_x);
  147. context.painter().fill_rect(timeline_future_rect.to_type<int>(), Color::Black);
  148. }
  149. void MediaPaintable::paint_control_bar_timestamp(PaintContext& context, Components const& components)
  150. {
  151. if (components.timestamp_rect.is_empty())
  152. return;
  153. context.painter().draw_text(components.timestamp_rect.to_type<int>(), components.timestamp, *components.timestamp_font, Gfx::TextAlignment::CenterLeft, Color::White);
  154. }
  155. void MediaPaintable::paint_control_bar_speaker(PaintContext& context, HTML::HTMLMediaElement const& media_element, Components const& components, Optional<DevicePixelPoint> const& mouse_position)
  156. {
  157. if (components.speaker_button_rect.is_empty())
  158. return;
  159. auto speaker_button_width = context.rounded_device_pixels(20);
  160. auto speaker_button_height = context.rounded_device_pixels(15);
  161. auto speaker_button_offset_x = (components.speaker_button_rect.width() - speaker_button_width) / 2;
  162. auto speaker_button_offset_y = (components.speaker_button_rect.height() - speaker_button_height) / 2;
  163. auto speaker_button_location = components.speaker_button_rect.top_left().translated(speaker_button_offset_x, speaker_button_offset_y);
  164. auto device_point = [&](double x, double y) {
  165. auto position = context.rounded_device_point({ x, y }) + speaker_button_location;
  166. return position.to_type<DevicePixels::Type>().to_type<float>();
  167. };
  168. auto speaker_button_is_hovered = rect_is_hovered(media_element, components.speaker_button_rect, mouse_position);
  169. auto speaker_button_color = control_button_color(speaker_button_is_hovered);
  170. Gfx::AntiAliasingPainter painter { context.painter() };
  171. Gfx::Path path;
  172. path.move_to(device_point(0, 4));
  173. path.line_to(device_point(5, 4));
  174. path.line_to(device_point(11, 0));
  175. path.line_to(device_point(11, 15));
  176. path.line_to(device_point(5, 11));
  177. path.line_to(device_point(0, 11));
  178. path.line_to(device_point(0, 4));
  179. path.close();
  180. painter.fill_path(path, speaker_button_color, Gfx::Painter::WindingRule::EvenOdd);
  181. path.clear();
  182. path.move_to(device_point(13, 3));
  183. path.quadratic_bezier_curve_to(device_point(16, 7.5), device_point(13, 12));
  184. path.move_to(device_point(14, 0));
  185. path.quadratic_bezier_curve_to(device_point(20, 7.5), device_point(14, 15));
  186. painter.stroke_path(path, speaker_button_color, 1);
  187. if (media_element.muted()) {
  188. painter.draw_line(device_point(0, 0), device_point(20, 15), Color::Red, 2);
  189. painter.draw_line(device_point(0, 15), device_point(20, 0), Color::Red, 2);
  190. }
  191. }
  192. void MediaPaintable::paint_control_bar_volume(PaintContext& context, HTML::HTMLMediaElement const& media_element, Components const& components, Optional<DevicePixelPoint> const& mouse_position)
  193. {
  194. if (components.volume_rect.is_empty())
  195. return;
  196. auto volume_scrub_rect = components.volume_rect;
  197. volume_scrub_rect.shrink(components.volume_button_size, volume_scrub_rect.height() - components.volume_button_size / 2);
  198. auto volume_position = static_cast<double>(static_cast<int>(volume_scrub_rect.width())) * media_element.volume();
  199. auto volume_button_offset_x = static_cast<DevicePixels>(round(volume_position));
  200. Gfx::AntiAliasingPainter painter { context.painter() };
  201. auto volume_lower_rect = volume_scrub_rect;
  202. volume_lower_rect.set_width(volume_button_offset_x);
  203. painter.fill_rect_with_rounded_corners(volume_lower_rect.to_type<int>(), control_highlight_color.lightened(), 4);
  204. auto volume_higher_rect = volume_scrub_rect;
  205. volume_higher_rect.take_from_left(volume_button_offset_x);
  206. painter.fill_rect_with_rounded_corners(volume_higher_rect.to_type<int>(), Color::Black, 4);
  207. auto volume_button_rect = volume_scrub_rect;
  208. volume_button_rect.shrink(volume_scrub_rect.width() - components.volume_button_size, volume_scrub_rect.height() - components.volume_button_size);
  209. volume_button_rect.set_x(volume_scrub_rect.x() + volume_button_offset_x - components.volume_button_size / 2);
  210. auto volume_is_hovered = rect_is_hovered(media_element, components.volume_rect, mouse_position, HTML::HTMLMediaElement::MouseTrackingComponent::Volume);
  211. auto volume_color = control_button_color(volume_is_hovered);
  212. painter.fill_ellipse(volume_button_rect.to_type<int>(), volume_color);
  213. }
  214. MediaPaintable::DispatchEventOfSameName MediaPaintable::handle_mousedown(Badge<EventHandler>, CSSPixelPoint position, unsigned button, unsigned)
  215. {
  216. if (button != GUI::MouseButton::Primary)
  217. return DispatchEventOfSameName::Yes;
  218. auto& media_element = *verify_cast<HTML::HTMLMediaElement>(layout_box().dom_node());
  219. auto const& cached_layout_boxes = media_element.cached_layout_boxes({});
  220. if (cached_layout_boxes.timeline_rect.has_value() && cached_layout_boxes.timeline_rect->contains(position)) {
  221. media_element.set_layout_mouse_tracking_component({}, HTML::HTMLMediaElement::MouseTrackingComponent::Timeline);
  222. set_current_time(media_element, *cached_layout_boxes.timeline_rect, position, Temporary::Yes);
  223. } else if (cached_layout_boxes.volume_rect.has_value() && cached_layout_boxes.volume_rect->contains(position)) {
  224. media_element.set_layout_mouse_tracking_component({}, HTML::HTMLMediaElement::MouseTrackingComponent::Volume);
  225. set_volume(media_element, *cached_layout_boxes.volume_rect, position);
  226. }
  227. if (media_element.layout_mouse_tracking_component({}).has_value())
  228. const_cast<HTML::BrowsingContext&>(browsing_context()).event_handler().set_mouse_event_tracking_layout_node(&layout_node());
  229. return DispatchEventOfSameName::Yes;
  230. }
  231. MediaPaintable::DispatchEventOfSameName MediaPaintable::handle_mouseup(Badge<EventHandler>, CSSPixelPoint position, unsigned button, unsigned)
  232. {
  233. auto& media_element = *verify_cast<HTML::HTMLMediaElement>(layout_box().dom_node());
  234. auto const& cached_layout_boxes = media_element.cached_layout_boxes({});
  235. auto was_tracking_mouse = media_element.layout_mouse_tracking_component({}).has_value();
  236. auto was_tracking_timeline = media_element.layout_mouse_tracking_component({}) == HTML::HTMLMediaElement::MouseTrackingComponent::Timeline;
  237. media_element.set_layout_mouse_tracking_component({}, {});
  238. if (was_tracking_mouse) {
  239. if (was_tracking_timeline) {
  240. set_current_time(media_element, *cached_layout_boxes.timeline_rect, position, Temporary::No);
  241. media_element.set_layout_display_time({}, {});
  242. }
  243. const_cast<HTML::BrowsingContext&>(browsing_context()).event_handler().set_mouse_event_tracking_layout_node(nullptr);
  244. return DispatchEventOfSameName::Yes;
  245. }
  246. if (button != GUI::MouseButton::Primary)
  247. return DispatchEventOfSameName::Yes;
  248. if (cached_layout_boxes.control_box_rect.has_value() && cached_layout_boxes.control_box_rect->contains(position)) {
  249. if (cached_layout_boxes.playback_button_rect.has_value() && cached_layout_boxes.playback_button_rect->contains(position)) {
  250. media_element.toggle_playback().release_value_but_fixme_should_propagate_errors();
  251. return DispatchEventOfSameName::Yes;
  252. }
  253. if (cached_layout_boxes.speaker_button_rect.has_value() && cached_layout_boxes.speaker_button_rect->contains(position)) {
  254. media_element.set_muted(!media_element.muted());
  255. return DispatchEventOfSameName::Yes;
  256. }
  257. if (cached_layout_boxes.timeline_rect.has_value() && cached_layout_boxes.timeline_rect->contains(position))
  258. return DispatchEventOfSameName::No;
  259. }
  260. media_element.toggle_playback().release_value_but_fixme_should_propagate_errors();
  261. return DispatchEventOfSameName::Yes;
  262. }
  263. MediaPaintable::DispatchEventOfSameName MediaPaintable::handle_mousemove(Badge<EventHandler>, CSSPixelPoint position, unsigned, unsigned)
  264. {
  265. auto& media_element = *verify_cast<HTML::HTMLMediaElement>(layout_box().dom_node());
  266. auto const& cached_layout_boxes = media_element.cached_layout_boxes({});
  267. if (auto const& mouse_tracking_component = media_element.layout_mouse_tracking_component({}); mouse_tracking_component.has_value()) {
  268. switch (*mouse_tracking_component) {
  269. case HTML::HTMLMediaElement::MouseTrackingComponent::Timeline:
  270. if (cached_layout_boxes.timeline_rect.has_value())
  271. set_current_time(media_element, *cached_layout_boxes.timeline_rect, position, Temporary::Yes);
  272. break;
  273. case HTML::HTMLMediaElement::MouseTrackingComponent::Volume:
  274. if (cached_layout_boxes.volume_rect.has_value())
  275. set_volume(media_element, *cached_layout_boxes.volume_rect, position);
  276. break;
  277. }
  278. }
  279. if (absolute_rect().contains(position)) {
  280. media_element.set_layout_mouse_position({}, position);
  281. return DispatchEventOfSameName::Yes;
  282. }
  283. media_element.set_layout_mouse_position({}, {});
  284. return DispatchEventOfSameName::No;
  285. }
  286. void MediaPaintable::set_current_time(HTML::HTMLMediaElement& media_element, CSSPixelRect timeline_rect, CSSPixelPoint mouse_position, Temporary temporarily)
  287. {
  288. auto x_offset = mouse_position.x() - timeline_rect.x();
  289. x_offset = max(x_offset, 0);
  290. x_offset = min(x_offset, timeline_rect.width());
  291. auto x_percentage = static_cast<double>(x_offset) / static_cast<double>(timeline_rect.width());
  292. auto position = static_cast<double>(x_percentage) * media_element.duration();
  293. switch (temporarily) {
  294. case Temporary::Yes:
  295. media_element.set_layout_display_time({}, position);
  296. break;
  297. case Temporary::No:
  298. media_element.set_current_time(position);
  299. break;
  300. }
  301. }
  302. void MediaPaintable::set_volume(HTML::HTMLMediaElement& media_element, CSSPixelRect volume_rect, CSSPixelPoint mouse_position)
  303. {
  304. auto x_offset = mouse_position.x() - volume_rect.x();
  305. x_offset = max(x_offset, 0);
  306. x_offset = min(x_offset, volume_rect.width());
  307. auto volume = static_cast<double>(x_offset) / static_cast<double>(volume_rect.width());
  308. media_element.set_volume(volume).release_value_but_fixme_should_propagate_errors();
  309. }
  310. 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)
  311. {
  312. if (auto const& mouse_tracking_component = media_element.layout_mouse_tracking_component({}); mouse_tracking_component.has_value())
  313. return mouse_tracking_component == allowed_mouse_tracking_component;
  314. if (!rect.has_value() || !mouse_position.has_value())
  315. return false;
  316. return rect->contains(*mouse_position);
  317. }
  318. }