dmaax/ladybird
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
ladybird/Libraries/LibWeb/Layout/AudioBox.cpp

42 lines
1,012 B
C++
Raw Normal View History

LibWeb: Begin implementing the HTMLAudioElement for audio playback This uses LibAudio to attempt to decode resoures downloaded with <audio> elements, and draws some basic media controls for the element.
2023-06-12 14:55:43 -03:00
/*
* Copyright (c) 2023, Tim Flynn <trflynn89@serenityos.org>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#include <LibWeb/HTML/HTMLAudioElement.h>
#include <LibWeb/Layout/AudioBox.h>
LibWeb: Use UA shadow DOM for media elements' controls Instead of using a custom paintable to draw the controls for video and audio elements, we build them out of plain old HTML elements within a shadow root. This required a few hacks in the previous commits in order to allow a replaced element to host children within a shadow root, but it's fairly self-contained. A big benefit is that we can drive all the UI updates off of plain old DOM events (except the play button overlay on videos, which uses the video element representation), so we can test our media and input event handling more thoroughly. :^) The control bar visibility is now more similar to how other browsers handle it. It will show upon hovering over the element, but if the cursor is kept still for more than a second, it will hide again. While dragging, the controls remain visible, and will then hide after the mouse button is released. The icons have been redesigned from scratch, and the mute icon now visualizes the volume level along with indicating the mute state.
2026-02-21 03:14:45 -03:00
#include <LibWeb/Painting/PaintableBox.h>
LibWeb: Begin implementing the HTMLAudioElement for audio playback This uses LibAudio to attempt to decode resoures downloaded with <audio> elements, and draws some basic media controls for the element.
2023-06-12 14:55:43 -03:00
namespace Web::Layout {
LibGC+Everywhere: Factor out a LibGC from LibJS Resulting in a massive rename across almost everywhere! Alongside the namespace change, we now have the following names: * JS::NonnullGCPtr -> GC::Ref * JS::GCPtr -> GC::Ptr * JS::HeapFunction -> GC::Function * JS::CellImpl -> GC::Cell * JS::Handle -> GC::Root
2024-11-14 12:01:23 -03:00
GC_DEFINE_ALLOCATOR(AudioBox);
LibWeb: Add calls to JS_{DECLARE,DEFINE}_ALLOCATOR()
2024-04-06 14:16:04 -03:00
LibWeb: Make CSS::ComputedProperties GC-allocated
2024-12-20 12:35:12 -03:00
AudioBox::AudioBox(DOM::Document& document, DOM::Element& element, GC::Ref<CSS::ComputedProperties> style)
LibWeb: Remove useless moves of computed styles in AudioBox/VideoBox Fixes a clang-tidy warning.
2026-02-20 22:54:03 -03:00
: ReplacedBox(document, element, style)
LibWeb: Begin implementing the HTMLAudioElement for audio playback This uses LibAudio to attempt to decode resoures downloaded with <audio> elements, and draws some basic media controls for the element.
2023-06-12 14:55:43 -03:00
{
}
HTML::HTMLAudioElement& AudioBox::dom_node()
{
LibWeb: Allow Layout::ImageBox to be anonymous This is prep work for CSS content:image, which means pseudo-elements can be used to generate images without a corresponding DOM node.
2025-07-26 09:22:50 -03:00
return static_cast<HTML::HTMLAudioElement&>(*ReplacedBox::dom_node());
LibWeb: Begin implementing the HTMLAudioElement for audio playback This uses LibAudio to attempt to decode resoures downloaded with <audio> elements, and draws some basic media controls for the element.
2023-06-12 14:55:43 -03:00
}
HTML::HTMLAudioElement const& AudioBox::dom_node() const
{
LibWeb: Allow Layout::ImageBox to be anonymous This is prep work for CSS content:image, which means pseudo-elements can be used to generate images without a corresponding DOM node.
2025-07-26 09:22:50 -03:00
return static_cast<HTML::HTMLAudioElement const&>(*ReplacedBox::dom_node());
LibWeb: Begin implementing the HTMLAudioElement for audio playback This uses LibAudio to attempt to decode resoures downloaded with <audio> elements, and draws some basic media controls for the element.
2023-06-12 14:55:43 -03:00
}
LibWeb: Use UA shadow DOM for media elements' controls Instead of using a custom paintable to draw the controls for video and audio elements, we build them out of plain old HTML elements within a shadow root. This required a few hacks in the previous commits in order to allow a replaced element to host children within a shadow root, but it's fairly self-contained. A big benefit is that we can drive all the UI updates off of plain old DOM events (except the play button overlay on videos, which uses the video element representation), so we can test our media and input event handling more thoroughly. :^) The control bar visibility is now more similar to how other browsers handle it. It will show upon hovering over the element, but if the cursor is kept still for more than a second, it will hide again. While dragging, the controls remain visible, and will then hide after the mouse button is released. The icons have been redesigned from scratch, and the mute icon now visualizes the volume level along with indicating the mute state.
2026-02-21 03:14:45 -03:00
bool AudioBox::can_have_children() const
LibWeb: Begin implementing the HTMLAudioElement for audio playback This uses LibAudio to attempt to decode resoures downloaded with <audio> elements, and draws some basic media controls for the element.
2023-06-12 14:55:43 -03:00
{
LibWeb: Use UA shadow DOM for media elements' controls Instead of using a custom paintable to draw the controls for video and audio elements, we build them out of plain old HTML elements within a shadow root. This required a few hacks in the previous commits in order to allow a replaced element to host children within a shadow root, but it's fairly self-contained. A big benefit is that we can drive all the UI updates off of plain old DOM events (except the play button overlay on videos, which uses the video element representation), so we can test our media and input event handling more thoroughly. :^) The control bar visibility is now more similar to how other browsers handle it. It will show upon hovering over the element, but if the cursor is kept still for more than a second, it will hide again. While dragging, the controls remain visible, and will then hide after the mouse button is released. The icons have been redesigned from scratch, and the mute icon now visualizes the volume level along with indicating the mute state.
2026-02-21 03:14:45 -03:00
// If we allow children when controls are disabled, innerText may be non-empty.
return dom_node().shadow_root() != nullptr;
LibWeb: Begin implementing the HTMLAudioElement for audio playback This uses LibAudio to attempt to decode resoures downloaded with <audio> elements, and draws some basic media controls for the element.
2023-06-12 14:55:43 -03:00
}
LibWeb: Make Paintable tree ref-counted The Paintable tree and its supplemental painting data structures were GC allocated because that was the easiest way to manage it and avoid leaks introduced by ref cycles. This included the Paintable subclasses themselves plus StackingContext, ChromeWidget, Scrollbar, ResizeHandle, and scroll-frame state. We are now trying to reduce GC allocation churn on layout and painting updates, so keeping this short-lived rendering tree outside the JS heap is a better fit. Move Paintable to RefCountedTreeNode, make painting helpers ref-counted or weakly reference Paintables, and update the layout and event-handler call sites to use RefPtr/WeakPtr ownership.
2026-05-07 08:38:05 -03:00
RefPtr<Painting::Paintable> AudioBox::create_paintable() const
LibWeb: Hide audio element when controls is not set When an audio element has no controls attribute, it should not render at all and take up no space.
2025-01-04 08:13:40 -03:00
{
LibWeb: Use UA shadow DOM for media elements' controls Instead of using a custom paintable to draw the controls for video and audio elements, we build them out of plain old HTML elements within a shadow root. This required a few hacks in the previous commits in order to allow a replaced element to host children within a shadow root, but it's fairly self-contained. A big benefit is that we can drive all the UI updates off of plain old DOM events (except the play button overlay on videos, which uses the video element representation), so we can test our media and input event handling more thoroughly. :^) The control bar visibility is now more similar to how other browsers handle it. It will show upon hovering over the element, but if the cursor is kept still for more than a second, it will hide again. While dragging, the controls remain visible, and will then hide after the mouse button is released. The icons have been redesigned from scratch, and the mute icon now visualizes the volume level along with indicating the mute state.
2026-02-21 03:14:45 -03:00
return Painting::PaintableBox::create(*this);
LibWeb: Hide audio element when controls is not set When an audio element has no controls attribute, it should not render at all and take up no space.
2025-01-04 08:13:40 -03:00
}
LibWeb: Begin implementing the HTMLAudioElement for audio playback This uses LibAudio to attempt to decode resoures downloaded with <audio> elements, and draws some basic media controls for the element.
2023-06-12 14:55:43 -03:00
}
Reference in a new issue Copy permalink