ladybird/Userland/Libraries/LibWeb/HTML/HTMLMediaElement.h
Timothy Flynn 9df2d6ee0f LibWeb: Implement scrubbing of the media element timeline and volume
This implements the ability to drag the timeline and volume buttons on
UA-rendered media controls. The two behave a bit differently:

Volume is updated as the user drags the volume button. This isn't a very
expensive operation, so updating in real-time and hearing the volume
change feels nice.

The current time, on the other hand, is not committed until the user
releases the mouse button. Performing a seek every time we get a mouse-
move event is pretty laggy, especially for video. However, we still want
to render updates on the timeline itself (so the position of the button
and the timestamp update as you drag). To do so, we internally pause the
media and override the timestamp provided to the layout node.

In the future, we may be able to seek video periodically to provide some
visual feedback. For example, we can seek after every N seconds of
scrubbing, or when the user pauses scrubbing for a while.
2023-06-22 06:58:07 +02:00

279 lines
11 KiB
C++

/*
* Copyright (c) 2020, the SerenityOS developers.
* Copyright (c) 2023, Tim Flynn <trflynn89@serenityos.org>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#pragma once
#include <AK/ByteBuffer.h>
#include <AK/Optional.h>
#include <AK/Time.h>
#include <AK/Variant.h>
#include <LibGfx/Rect.h>
#include <LibJS/Heap/MarkedVector.h>
#include <LibJS/SafeFunction.h>
#include <LibWeb/DOM/DocumentLoadEventDelayer.h>
#include <LibWeb/HTML/CORSSettingAttribute.h>
#include <LibWeb/HTML/EventLoop/Task.h>
#include <LibWeb/HTML/HTMLElement.h>
#include <LibWeb/PixelUnits.h>
#include <LibWeb/WebIDL/DOMException.h>
#include <math.h>
namespace Web::HTML {
enum class MediaSeekMode {
Accurate,
ApproximateForSpeed,
};
class SourceElementSelector;
class HTMLMediaElement : public HTMLElement {
WEB_PLATFORM_OBJECT(HTMLMediaElement, HTMLElement);
public:
virtual ~HTMLMediaElement() override;
void queue_a_media_element_task(JS::SafeFunction<void()> steps);
JS::GCPtr<MediaError> error() const { return m_error; }
WebIDL::ExceptionOr<void> set_decoder_error(String error_message);
String const& current_src() const { return m_current_src; }
WebIDL::ExceptionOr<void> select_resource();
enum class NetworkState : u16 {
Empty,
Idle,
Loading,
NoSource,
};
NetworkState network_state() const { return m_network_state; }
WebIDL::ExceptionOr<JS::NonnullGCPtr<TimeRanges>> buffered() const;
WebIDL::ExceptionOr<Bindings::CanPlayTypeResult> can_play_type(DeprecatedString const& type) const;
enum class ReadyState : u16 {
HaveNothing,
HaveMetadata,
HaveCurrentData,
HaveFutureData,
HaveEnoughData,
};
ReadyState ready_state() const { return m_ready_state; }
bool seeking() const { return m_seeking; }
WebIDL::ExceptionOr<void> load();
double current_time() const;
void set_current_time(double);
void fast_seek(double);
double current_playback_position() const { return m_current_playback_position; }
void set_current_playback_position(double);
double duration() const;
bool show_poster() const { return m_show_poster; }
bool paused() const { return m_paused; }
bool ended() const;
bool potentially_playing() const;
WebIDL::ExceptionOr<JS::NonnullGCPtr<JS::Promise>> play();
WebIDL::ExceptionOr<void> pause();
double volume() const { return m_volume; }
WebIDL::ExceptionOr<void> set_volume(double);
bool muted() const { return m_muted; }
void set_muted(bool);
double effective_media_volume() const;
JS::NonnullGCPtr<AudioTrackList> audio_tracks() const { return *m_audio_tracks; }
JS::NonnullGCPtr<VideoTrackList> video_tracks() const { return *m_video_tracks; }
enum class MouseTrackingComponent {
Timeline,
Volume,
};
void set_layout_mouse_tracking_component(Badge<Painting::MediaPaintable>, Optional<MouseTrackingComponent> mouse_tracking_component) { m_mouse_tracking_component = move(mouse_tracking_component); }
Optional<MouseTrackingComponent> const& layout_mouse_tracking_component(Badge<Painting::MediaPaintable>) const { return m_mouse_tracking_component; }
void set_layout_mouse_position(Badge<Painting::MediaPaintable>, Optional<CSSPixelPoint> mouse_position) { m_mouse_position = move(mouse_position); }
Optional<CSSPixelPoint> const& layout_mouse_position(Badge<Painting::MediaPaintable>) const { return m_mouse_position; }
void set_layout_display_time(Badge<Painting::MediaPaintable>, Optional<double> display_time);
double layout_display_time(Badge<Painting::MediaPaintable>) const;
struct CachedLayoutBoxes {
Optional<CSSPixelRect> control_box_rect;
Optional<CSSPixelRect> playback_button_rect;
Optional<CSSPixelRect> timeline_rect;
Optional<CSSPixelRect> speaker_button_rect;
Optional<CSSPixelRect> volume_rect;
};
CachedLayoutBoxes& cached_layout_boxes(Badge<Painting::MediaPaintable>) const { return m_layout_boxes; }
protected:
HTMLMediaElement(DOM::Document&, DOM::QualifiedName);
virtual JS::ThrowCompletionOr<void> initialize(JS::Realm&) override;
virtual void visit_edges(Cell::Visitor&) override;
virtual void parse_attribute(DeprecatedFlyString const& name, DeprecatedString const& value) override;
virtual void did_remove_attribute(DeprecatedFlyString const&) override;
virtual void removed_from(DOM::Node*) override;
virtual void children_changed() override;
// Override in subclasses to handle implementation-specific behavior when the element state changes
// to playing or paused, e.g. to start/stop play timers.
virtual void on_playing() { }
virtual void on_paused() { }
// Override in subclasses to handle implementation-specific seeking behavior. When seeking is complete,
// subclasses must invoke set_current_playback_position() to unblock the user agent.
virtual void on_seek(double, MediaSeekMode) { m_seek_in_progress = false; }
virtual void on_volume_change() { }
private:
friend SourceElementSelector;
struct EntireResource { };
using ByteRange = Variant<EntireResource>; // FIXME: This will need to include "until end" and an actual byte range.
Task::Source media_element_event_task_source() const { return m_media_element_event_task_source.source; }
WebIDL::ExceptionOr<void> load_element();
WebIDL::ExceptionOr<void> fetch_resource(AK::URL const&, Function<void(String)> failure_callback);
static bool verify_response(JS::NonnullGCPtr<Fetch::Infrastructure::Response>, ByteRange const&);
WebIDL::ExceptionOr<void> process_media_data(Function<void(String)> failure_callback);
WebIDL::ExceptionOr<void> handle_media_source_failure(Span<JS::NonnullGCPtr<WebIDL::Promise>> promises, String error_message);
void forget_media_resource_specific_tracks();
void set_ready_state(ReadyState);
WebIDL::ExceptionOr<void> play_element();
WebIDL::ExceptionOr<void> pause_element();
void seek_element(double playback_position, MediaSeekMode = MediaSeekMode::Accurate);
void notify_about_playing();
void set_show_poster(bool);
void set_paused(bool);
void set_duration(double);
void volume_or_muted_attribute_changed();
bool blocked() const;
bool is_eligible_for_autoplay() const;
bool has_ended_playback() const;
WebIDL::ExceptionOr<void> reached_end_of_media_playback();
WebIDL::ExceptionOr<void> dispatch_time_update_event();
enum class TimeMarchesOnReason {
NormalPlayback,
Other,
};
void time_marches_on(TimeMarchesOnReason = TimeMarchesOnReason::NormalPlayback);
JS::MarkedVector<JS::NonnullGCPtr<WebIDL::Promise>> take_pending_play_promises();
void resolve_pending_play_promises(ReadonlySpan<JS::NonnullGCPtr<WebIDL::Promise>> promises);
void reject_pending_play_promises(ReadonlySpan<JS::NonnullGCPtr<WebIDL::Promise>> promises, JS::NonnullGCPtr<WebIDL::DOMException> error);
// https://html.spec.whatwg.org/multipage/media.html#reject-pending-play-promises
template<typename ErrorType>
void reject_pending_play_promises(ReadonlySpan<JS::NonnullGCPtr<WebIDL::Promise>> promises, FlyString const& message)
{
auto& realm = this->realm();
auto error = ErrorType::create(realm, message.to_deprecated_fly_string());
reject_pending_play_promises(promises, error);
}
// https://html.spec.whatwg.org/multipage/media.html#media-element-event-task-source
UniqueTaskSource m_media_element_event_task_source {};
// https://html.spec.whatwg.org/multipage/media.html#dom-media-error
JS::GCPtr<MediaError> m_error;
// https://html.spec.whatwg.org/multipage/media.html#dom-media-crossorigin
CORSSettingAttribute m_crossorigin { CORSSettingAttribute::NoCORS };
// https://html.spec.whatwg.org/multipage/media.html#dom-media-currentsrc
String m_current_src;
// https://html.spec.whatwg.org/multipage/media.html#dom-media-networkstate
NetworkState m_network_state { NetworkState::Empty };
// https://html.spec.whatwg.org/multipage/media.html#dom-media-readystate
ReadyState m_ready_state { ReadyState::HaveNothing };
bool m_first_data_load_event_since_load_start { false };
// https://html.spec.whatwg.org/multipage/media.html#dom-media-seeking
bool m_seeking { false };
// https://html.spec.whatwg.org/multipage/media.html#current-playback-position
double m_current_playback_position { 0 };
// https://html.spec.whatwg.org/multipage/media.html#official-playback-position
double m_official_playback_position { 0 };
// https://html.spec.whatwg.org/multipage/media.html#default-playback-start-position
double m_default_playback_start_position { 0 };
// https://html.spec.whatwg.org/multipage/media.html#show-poster-flag
bool m_show_poster { true };
// https://html.spec.whatwg.org/multipage/media.html#dom-media-duration
double m_duration { NAN };
// https://html.spec.whatwg.org/multipage/media.html#list-of-pending-play-promises
JS::MarkedVector<JS::NonnullGCPtr<WebIDL::Promise>> m_pending_play_promises;
// https://html.spec.whatwg.org/multipage/media.html#dom-media-paused
bool m_paused { true };
// https://html.spec.whatwg.org/multipage/media.html#dom-media-volume
double m_volume { 1.0 };
// https://html.spec.whatwg.org/multipage/media.html#dom-media-muted
bool m_muted { false };
// https://html.spec.whatwg.org/multipage/media.html#dom-media-audiotracks
JS::GCPtr<AudioTrackList> m_audio_tracks;
// https://html.spec.whatwg.org/multipage/media.html#dom-media-videotracks
JS::GCPtr<VideoTrackList> m_video_tracks;
// https://html.spec.whatwg.org/multipage/media.html#media-data
ByteBuffer m_media_data;
// https://html.spec.whatwg.org/multipage/media.html#can-autoplay-flag
bool m_can_autoplay { true };
// https://html.spec.whatwg.org/multipage/media.html#delaying-the-load-event-flag
Optional<DOM::DocumentLoadEventDelayer> m_delaying_the_load_event;
bool m_running_time_update_event_handler { false };
Optional<MonotonicTime> m_last_time_update_event_time;
JS::GCPtr<DOM::DocumentObserver> m_document_observer;
JS::GCPtr<SourceElementSelector> m_source_element_selector;
JS::GCPtr<Fetch::Infrastructure::FetchController> m_fetch_controller;
bool m_seek_in_progress = false;
// Cached state for layout.
Optional<MouseTrackingComponent> m_mouse_tracking_component;
bool m_tracking_mouse_position_while_playing { false };
Optional<CSSPixelPoint> m_mouse_position;
Optional<double> m_display_time;
mutable CachedLayoutBoxes m_layout_boxes;
};
}