@vindral/web-sdk 4.1.9 → 4.1.10

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.1.9",
+  "version": "4.1.10",
   "name": "@vindral/web-sdk",
   "main": "./legacy.umd.js",
   "module": "./legacy.es.js",

package/player.d.ts

@@ -20,17 +20,6 @@ interface Channel {
 	 */
 	timeshiftUrls?: string[];
 }
-interface ClientOverrides {
-	maxVideoBitRate?: number;
-	minBufferTime?: number;
-	maxBufferTime?: number;
-	burstEnabled?: boolean;
-	sizeBasedResolutionCapEnabled?: boolean;
-	separateVideoSocketEnabled?: boolean;
-	videoCodecs?: string[];
-}
-type AudioCodec = "aac" | "opus" | "mp3";
-type VideoCodec = "h264" | "av1";
 interface MinMaxAverage {
 	last: number;
 	/**
@@ -103,44 +92,48 @@ type Tagged<BaseType, Tag extends PropertyKey> = BaseType & {
 		[K in Tag]: void;
 	};
 };
-type Namespace = Tagged<Array<string>, "Namespace">;
-interface TrackObject {
-	namespace?: Namespace;
-	name: string;
-	format: string;
-	label?: string;
-	renderGroup?: number;
-	altGroup?: number;
-	initData?: string;
-	initTrack?: string;
-	depends?: Array<string>;
-	temporalId?: number;
-	spatialId?: number;
-	codec?: string;
-	mimeType?: string;
-	framerate?: [
-		number,
-		number
-	];
-	bitrate?: number;
-	width?: number;
-	height?: number;
-	samplerate?: number;
-	channelConfig?: string;
-	displayWidth?: number;
-	displayHeight?: number;
-	language?: string;
-	["com.vindral.variant_uid"]?: string;
-	["com.vindral.drm"]?: string;
-}
-interface CatalogRoot {
-	version: number;
-	streamingFormat?: number;
-	streamingFormatVersion?: string;
+declare class UserAgentInformation {
+	private highEntropyValues?;
+	constructor();
+	getUserAgentInformation(): {
+		locationOrigin: string;
+		locationPath: string;
+		ancestorOrigins: string[] | undefined;
+		hardwareConcurrency: number;
+		deviceMemory: number | undefined;
+		userAgentLegacy: string;
+		ua: {
+			browser: {
+				brands: string[];
+				fullVersionBrands: string[];
+				majorVersions: string[];
+			};
+			device: string;
+			os: {
+				family: string;
+				version: string;
+				major_version: number;
+			};
+		};
+	} | {
+		locationOrigin: string;
+		locationPath: string;
+		ancestorOrigins: string[] | undefined;
+		hardwareConcurrency: number;
+		deviceMemory: number | undefined;
+		userAgent: string;
+	};
 }
-interface TracksCatalog extends CatalogRoot {
-	namespace: Namespace;
-	tracks: Array<TrackObject>;
+type AudioCodec = "aac" | "opus" | "mp3";
+type VideoCodec = "h264" | "av1";
+interface ReconnectState {
+	/**
+	 * The number or retry attempts so far.
+	 * This gets reset on every successful connect, so it will start from zero every
+	 * time the client instance gets disconnected and will increment until the
+	 * client instance makes a connection attempt is successful.
+	 */
+	reconnectRetries: number;
 }
 interface RenditionProps {
 	id: number;
@@ -183,78 +176,6 @@ type VideoRendition = VideoRenditionProps & RenditionProps;
 type AudioRendition = AudioRenditionProps & RenditionProps;
 type TextRendition = TextRenditionProps & RenditionProps;
 type Rendition = VideoRendition | AudioRendition | TextRendition;
-interface Telemetry {
-	url: string;
-	probability?: number;
-	includeErrors?: boolean;
-	includeEvents?: boolean;
-	includeStats?: boolean;
-	maxRetries?: number;
-	maxErrorReports?: number;
-	interval?: number;
-}
-interface ChannelWithCatalog extends Channel {
-	catalog: TracksCatalog;
-	renditions: Rendition[];
-	overrides?: ClientOverrides;
-}
-interface ChannelWithRenditions extends Channel {
-	renditions: Rendition[];
-	overrides?: ClientOverrides;
-}
-interface ServerCertificateHash {
-	algorithm: string;
-	value: string;
-}
-interface Edge {
-	moqUrl?: string;
-	moqWsUrl: string;
-	serverCertificateHashes?: ServerCertificateHash[];
-}
-interface MoQConnectInfo {
-	logsUrl?: string;
-	statsUrl?: string;
-	telemetry?: Telemetry;
-	channels: ChannelWithCatalog[];
-	edges: Edge[];
-	timeshift: {
-		urls: string[];
-		duration: string;
-	};
-}
-interface VindralConnectInfo {
-	logsUrl?: string;
-	statsUrl?: string;
-	telemetry?: Telemetry;
-	channels: ChannelWithRenditions[];
-	edges: string[];
-}
-type ConnectInfo = VindralConnectInfo | MoQConnectInfo;
-interface Metadata {
-	/**
-	 * The raw string content as it was ingested (if using JSON, it needs to be parsed on your end)
-	 */
-	content: string;
-	/**
-	 * Timestamp in ms
-	 */
-	timestamp: number;
-}
-interface TimeRange {
-	/** */
-	start: number;
-	/** */
-	end: number;
-}
-interface ReconnectState {
-	/**
-	 * The number or retry attempts so far.
-	 * This gets reset on every successful connect, so it will start from zero every
-	 * time the client instance gets disconnected and will increment until the
-	 * client instance makes a connection attempt is successful.
-	 */
-	reconnectRetries: number;
-}
 interface Size {
 	/** */
 	width: number;
@@ -306,6 +227,7 @@ interface DrmOptions {
 	};
 }
 type Media = "audio" | "video" | "audio+video";
+type WebCodecsHardwareAccelerationPreference = "no-preference" | "prefer-hardware" | "prefer-software";
 interface Options {
 	/**
 	 * URL to use when connecting to the stream
@@ -506,6 +428,38 @@ interface Options {
 	 * Enables iOS devices to use a media element for playback. This enables fullscreen and picture in picture support on iOS.
 	 */
 	iosMediaElementEnabled?: boolean;
+	/**
+	 * Enable WebCodecs API for hardware-accelerated decoding.
+	 *
+	 * When enabled, the browser's native VideoDecoder and AudioDecoder APIs will be used instead
+	 * of WASM decoding on supported browsers (Chrome 94+, Edge 94+, Safari 16.4+). This provides:
+	 * - Hardware-accelerated decoding (uses GPU for video)
+	 * - Better performance at higher resolutions
+	 * - Lower CPU usage and battery consumption
+	 *
+	 * Disabled by default to allow gradual rollout and testing.
+	 *
+	 * Note: Automatically falls back to WASM decoding if:
+	 * - The browser doesn't support WebCodecs
+	 * - WebCodecs initialization fails
+	 * - This option is set to false or undefined
+	 */
+	webcodecsEnabled?: boolean;
+	/**
+	 * Hardware acceleration preference for WebCodecs video decoding.
+	 *
+	 * Defaults to `"no-preference"`.
+	 */
+	webcodecsHardwareAcceleration?: WebCodecsHardwareAccelerationPreference;
+	/**
+	 * Enable OffscreenCanvas rendering in worker thread (requires webcodecsEnabled: true).
+	 *
+	 * When enabled, video rendering happens in the worker thread using OffscreenCanvas.
+	 * Disabled by default to allow gradual rollout and testing.
+	 *
+	 * Note: Requires browser support for OffscreenCanvas and webcodecsEnabled must be true, and iosMediaElementEnabled must be false.
+	 */
+	offscreenCanvasEnabled?: boolean;
 	/**
 	 * Advanced options to override default behaviour.
 	 */
@@ -517,6 +471,120 @@ interface Options {
 	 */
 	drm?: DrmOptions;
 }
+interface ClientOverrides {
+	maxVideoBitRate?: number;
+	minBufferTime?: number;
+	maxBufferTime?: number;
+	burstEnabled?: boolean;
+	sizeBasedResolutionCapEnabled?: boolean;
+	separateVideoSocketEnabled?: boolean;
+	webcodecsEnabled?: boolean;
+	webcodecsHardwareAcceleration?: WebCodecsHardwareAccelerationPreference;
+	offscreenCanvasEnabled?: boolean;
+	videoCodecs?: string[];
+}
+type Namespace = Tagged<Array<string>, "Namespace">;
+interface TrackObject {
+	namespace?: Namespace;
+	name: string;
+	format: string;
+	label?: string;
+	renderGroup?: number;
+	altGroup?: number;
+	initData?: string;
+	initTrack?: string;
+	depends?: Array<string>;
+	temporalId?: number;
+	spatialId?: number;
+	codec?: string;
+	mimeType?: string;
+	framerate?: [
+		number,
+		number
+	];
+	bitrate?: number;
+	width?: number;
+	height?: number;
+	samplerate?: number;
+	channelConfig?: string;
+	displayWidth?: number;
+	displayHeight?: number;
+	language?: string;
+	["com.vindral.variant_uid"]?: string;
+	["com.vindral.drm"]?: string;
+}
+interface CatalogRoot {
+	version: number;
+	streamingFormat?: number;
+	streamingFormatVersion?: string;
+}
+interface TracksCatalog extends CatalogRoot {
+	namespace: Namespace;
+	tracks: Array<TrackObject>;
+}
+interface Telemetry {
+	url: string;
+	probability?: number;
+	includeErrors?: boolean;
+	includeEvents?: boolean;
+	includeStats?: boolean;
+	maxRetries?: number;
+	maxErrorReports?: number;
+	interval?: number;
+}
+interface ChannelWithCatalog extends Channel {
+	catalog: TracksCatalog;
+	renditions: Rendition[];
+	overrides?: ClientOverrides;
+}
+interface ChannelWithRenditions extends Channel {
+	renditions: Rendition[];
+	overrides?: ClientOverrides;
+}
+interface ServerCertificateHash {
+	algorithm: string;
+	value: string;
+}
+interface Edge {
+	moqUrl?: string;
+	moqWsUrl: string;
+	serverCertificateHashes?: ServerCertificateHash[];
+}
+interface MoQConnectInfo {
+	logsUrl?: string;
+	statsUrl?: string;
+	telemetry?: Telemetry;
+	channels: ChannelWithCatalog[];
+	edges: Edge[];
+	timeshift: {
+		urls: string[];
+		duration: string;
+	};
+}
+interface VindralConnectInfo {
+	logsUrl?: string;
+	statsUrl?: string;
+	telemetry?: Telemetry;
+	channels: ChannelWithRenditions[];
+	edges: string[];
+}
+type ConnectInfo = VindralConnectInfo | MoQConnectInfo;
+interface Metadata {
+	/**
+	 * The raw string content as it was ingested (if using JSON, it needs to be parsed on your end)
+	 */
+	content: string;
+	/**
+	 * Timestamp in ms
+	 */
+	timestamp: number;
+}
+interface TimeRange {
+	/** */
+	start: number;
+	/** */
+	end: number;
+}
 interface RenditionLevel {
 	/** */
 	audio?: AudioRendition;
@@ -849,38 +917,6 @@ interface VideoPlayerStatistics {
 	contextLostCount: number;
 	contextRestoredCount: number;
 }
-declare class UserAgentInformation {
-	private highEntropyValues?;
-	constructor();
-	getUserAgentInformation(): {
-		locationOrigin: string;
-		locationPath: string;
-		ancestorOrigins: string[] | undefined;
-		hardwareConcurrency: number;
-		deviceMemory: number | undefined;
-		userAgentLegacy: string;
-		ua: {
-			browser: {
-				brands: string[];
-				fullVersionBrands: string[];
-				majorVersions: string[];
-			};
-			device: string;
-			os: {
-				family: string;
-				version: string;
-				major_version: number;
-			};
-		};
-	} | {
-		locationOrigin: string;
-		locationPath: string;
-		ancestorOrigins: string[] | undefined;
-		hardwareConcurrency: number;
-		deviceMemory: number | undefined;
-		userAgent: string;
-	};
-}
 type ModuleStatistics = AdaptivityStatistics & BufferTimeStatistics & ConnectionStatistics & ConstraintCapStatistics & DecoderStatistics & DocumentStateModulesStatistics & IncomingDataModuleStatistics & JitterModuleStatistics & MseModuleStatistics & PlaybackModuleStatistics & QualityOfServiceModuleStatistics & RenditionsModuleStatistics & SyncModuleStatistics & TelemetryModuleStatistics & VideoPlayerStatistics;
 type Statistics = ModuleStatistics & ReturnType<UserAgentInformation["getUserAgentInformation"]> & {
 	/**
@@ -1541,6 +1577,37 @@ export declare class AirPlayButton extends VindralButton {
 	get isAirPlaying(): boolean;
 	protected handleClick(_: Event): void;
 }
+declare class VindralMenuButton extends VindralButton {
+	#private;
+	constructor();
+	connectedCallback(): void;
+	set button(button: HTMLElement);
+	set listbox(listbox: HTMLElement);
+	set listboxSlot(listboxSlot: HTMLElement);
+	enable(): void;
+	hide(): void;
+	protected handleClick(e: Event): void;
+}
+declare class AdvancedRenditionMenu extends VindralMenuButton {
+	#private;
+	static observedAttributes: string[];
+	constructor();
+	connectedCallback(): void;
+	attributeChangedCallback(name: string, old: string, value: string): void;
+}
+declare class AdvancedRenditionMenuList extends HTMLElement {
+	#private;
+	static observedAttributes: ("rendition-levels" | "rendition-level" | "max-video-bit-rate" | "abr-enabled" | "size-based-resolution-cap-enabled")[];
+	constructor();
+	connectedCallback(): void;
+	disconnectedCallback(): void;
+	attributeChangedCallback(name: string, old: string | null, value: string | null): void;
+	private set list(value);
+	private set maxVideoBitrate(value);
+	get keysUsed(): string[];
+	handleEvent: (event: Event) => void;
+	focus(): void;
+}
 declare class BufferingIcon extends HTMLElement {
 	#private;
 	static observedAttributes: "buffering"[];
@@ -1720,7 +1787,7 @@ type ControllerAttributes = (typeof Controller.observedAttributes)[number];
 export declare class Controller extends HTMLElement {
 	#private;
 	static observedAttributes: readonly [
-		...("language" | "channels" | "buffering" | "paused" | "volume" | "muted" | "duration" | "user-interacting" | "is-casting" | "cast-available" | "cast-receiver-name" | "ui-locked" | "hide-ui-on-pause" | "is-fullscreen" | "is-fullscreen-fallback" | "rendition-levels" | "rendition-level" | "max-video-bit-rate" | "max-initial-bit-rate" | "channel-id" | "channel-group-id" | "pip-available" | "is-pip" | "airplay-available" | "is-airplaying" | "media" | "languages" | "text-tracks" | "text-track" | "needs-user-input-video" | "needs-user-input-audio" | "authentication-token" | "volume-level" | "cast" | "airplay" | "pip" | "fullscreen" | "vu-meter" | "timeshift" | "timeshift-position" | "poster-src")[],
+		...("language" | "channels" | "buffering" | "paused" | "volume" | "muted" | "duration" | "user-interacting" | "is-casting" | "cast-available" | "cast-receiver-name" | "ui-locked" | "hide-ui-on-pause" | "is-fullscreen" | "is-fullscreen-fallback" | "rendition-levels" | "rendition-level" | "max-video-bit-rate" | "max-initial-bit-rate" | "abr-enabled" | "size-based-resolution-cap-enabled" | "channel-id" | "channel-group-id" | "pip-available" | "is-pip" | "airplay-available" | "is-airplaying" | "media" | "languages" | "text-tracks" | "text-track" | "needs-user-input-video" | "needs-user-input-audio" | "authentication-token" | "volume-level" | "cast" | "airplay" | "pip" | "fullscreen" | "vu-meter" | "timeshift" | "timeshift-position" | "poster-src")[],
 		"url",
 		"edge-url",
 		"target-buffer-time",
@@ -1751,6 +1818,9 @@ export declare class Controller extends HTMLElement {
 		"drm-playready-video-robustness",
 		"drm-playready-audio-robustness",
 		"webtransport-enabled",
+		"webcodecs-enabled",
+		"webcodecs-hardware-acceleration",
+		"offscreen-canvas-enabled",
 		"reconnect-retries",
 		"auto-instance-enabled",
 		"language"
@@ -1778,17 +1848,6 @@ export declare class FullscreenButton extends VindralButton {
 	get isFullscreen(): boolean;
 	protected handleClick(_: Event): void;
 }
-declare class VindralMenuButton extends VindralButton {
-	#private;
-	constructor();
-	connectedCallback(): void;
-	set button(button: HTMLElement);
-	set listbox(listbox: HTMLElement);
-	set listboxSlot(listboxSlot: HTMLElement);
-	enable(): void;
-	hide(): void;
-	protected handleClick(e: Event): void;
-}
 export declare class LanguageMenu extends VindralMenuButton {
 	#private;
 	static observedAttributes: string[];
@@ -1849,7 +1908,7 @@ export declare class PlayButton extends VindralButton {
  */
 export declare class Player extends HTMLElement {
 	#private;
-	static observedAttributes: readonly ("title" | "advanced" | "poster" | "language" | "channels" | "buffering" | "paused" | "volume" | "muted" | "duration" | "user-interacting" | "is-casting" | "cast-available" | "cast-receiver-name" | "ui-locked" | "hide-ui-on-pause" | "is-fullscreen" | "is-fullscreen-fallback" | "rendition-levels" | "rendition-level" | "max-video-bit-rate" | "max-initial-bit-rate" | "channel-id" | "channel-group-id" | "pip-available" | "is-pip" | "airplay-available" | "is-airplaying" | "media" | "languages" | "text-tracks" | "text-track" | "needs-user-input-video" | "needs-user-input-audio" | "authentication-token" | "volume-level" | "cast" | "airplay" | "pip" | "fullscreen" | "vu-meter" | "timeshift" | "timeshift-position" | "poster-src" | "url" | "offline" | "edge-url" | "target-buffer-time" | "cast-receiver-id" | "cast-background" | "log-level" | "max-size" | "min-buffer-time" | "max-buffer-time" | "max-audio-bit-rate" | "burst-enabled" | "mse-enabled" | "mse-opus-enabled" | "ios-background-play-enabled" | "ios-wake-lock-enabled" | "ios-media-element-enabled" | "abr-enabled" | "size-based-resolution-cap-enabled" | "telemetry-enabled" | "video-codecs" | "drm-headers" | "drm-queryparams" | "drm-widevine-video-robustness" | "drm-widevine-audio-robustness" | "drm-playready-video-robustness" | "drm-playready-audio-robustness" | "webtransport-enabled" | "reconnect-retries" | "auto-instance-enabled" | "refresh-poster-enabled" | "stream-poll-enabled")[];
+	static observedAttributes: readonly ("title" | "offline" | "advanced" | "poster" | "language" | "channels" | "buffering" | "paused" | "volume" | "muted" | "duration" | "user-interacting" | "is-casting" | "cast-available" | "cast-receiver-name" | "ui-locked" | "hide-ui-on-pause" | "is-fullscreen" | "is-fullscreen-fallback" | "rendition-levels" | "rendition-level" | "max-video-bit-rate" | "max-initial-bit-rate" | "abr-enabled" | "size-based-resolution-cap-enabled" | "channel-id" | "channel-group-id" | "pip-available" | "is-pip" | "airplay-available" | "is-airplaying" | "media" | "languages" | "text-tracks" | "text-track" | "needs-user-input-video" | "needs-user-input-audio" | "authentication-token" | "volume-level" | "cast" | "airplay" | "pip" | "fullscreen" | "vu-meter" | "timeshift" | "timeshift-position" | "poster-src" | "url" | "edge-url" | "target-buffer-time" | "cast-receiver-id" | "cast-background" | "log-level" | "max-size" | "min-buffer-time" | "max-buffer-time" | "max-audio-bit-rate" | "burst-enabled" | "mse-enabled" | "mse-opus-enabled" | "ios-background-play-enabled" | "ios-wake-lock-enabled" | "ios-media-element-enabled" | "telemetry-enabled" | "video-codecs" | "drm-headers" | "drm-queryparams" | "drm-widevine-video-robustness" | "drm-widevine-audio-robustness" | "drm-playready-video-robustness" | "drm-playready-audio-robustness" | "webtransport-enabled" | "webcodecs-enabled" | "webcodecs-hardware-acceleration" | "offscreen-canvas-enabled" | "reconnect-retries" | "auto-instance-enabled" | "advanced-rendition-menu-enabled" | "refresh-poster-enabled" | "stream-poll-enabled")[];
 	constructor();
 	connectedCallback(): void;
 	disconnectedCallback(): void;
@@ -1905,7 +1964,7 @@ export declare class ScrollOverlay extends HTMLElement {
 	constructor();
 	connectedCallback(): void;
 	disconnectedCallback(): void;
-	attributeChangedCallback(name: string, old: string, value: string): void;
+	attributeChangedCallback(name: string, old: string | null, value: string | null): void;
 	handleEvent: (event: Event) => void;
 	set open(value: boolean);
 	get open(): boolean;
@@ -1972,6 +2031,8 @@ export declare function registerComponents(): void;
 export declare interface VindralHTMLElementTagNameMap {
 	"vindral-controller": Controller;
 	"vindral-control-bar": ControlBar;
+	"vindral-advanced-rendition-menu": AdvancedRenditionMenu;
+	"vindral-advanced-rendition-menu-list": AdvancedRenditionMenuList;
 	"vindral-play-button": PlayButton;
 	"vindral-mute-button": MuteButton;
 	"vindral-buffering-overlay": BufferingOverlay;