@theoplayer/web-ui 1.0.0 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +60 -32
- package/dist/THEOplayerUI.d.ts +1646 -1627
- package/dist/THEOplayerUI.es5.js +4 -0
- package/dist/THEOplayerUI.es5.mjs +1 -0
- package/dist/THEOplayerUI.js +33 -2
- package/dist/THEOplayerUI.js.map +1 -1
- package/dist/THEOplayerUI.mjs +15 -1
- package/dist/THEOplayerUI.mjs.map +1 -1
- package/package.json +12 -7
package/dist/THEOplayerUI.d.ts
CHANGED
|
@@ -1,1751 +1,1770 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* THEOplayer Web UI v1.
|
|
2
|
+
* THEOplayer Web UI v1.1.0
|
|
3
3
|
* License: MIT
|
|
4
4
|
*/
|
|
5
5
|
import { ChromelessPlayer, VideoQuality, THEOplayerError, MediaTrack, TextTrack, TextTracksList, EdgeStyle, VendorCast, CastState, PlayerConfiguration, SourceDescription } from 'theoplayer';
|
|
6
6
|
|
|
7
|
-
/**
|
|
8
|
-
* A horizontal control bar that can contain other controls.
|
|
9
|
-
*
|
|
10
|
-
* @group Components
|
|
11
|
-
*/
|
|
12
|
-
declare class ControlBar extends HTMLElement {
|
|
13
|
-
constructor();
|
|
14
|
-
connectedCallback(): void;
|
|
7
|
+
/**
|
|
8
|
+
* A horizontal control bar that can contain other controls.
|
|
9
|
+
*
|
|
10
|
+
* @group Components
|
|
11
|
+
*/
|
|
12
|
+
declare class ControlBar extends HTMLElement {
|
|
13
|
+
constructor();
|
|
14
|
+
connectedCallback(): void;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
-
declare enum Attribute {
|
|
18
|
-
CONFIGURATION = "configuration",
|
|
19
|
-
SOURCE = "source",
|
|
20
|
-
AUTOPLAY = "autoplay",
|
|
21
|
-
MUTED = "muted",
|
|
22
|
-
FULLSCREEN = "fullscreen",
|
|
23
|
-
FLUID = "fluid",
|
|
24
|
-
MOBILE = "mobile",
|
|
25
|
-
MOBILE_ONLY = "mobile-only",
|
|
26
|
-
MOBILE_HIDDEN = "mobile-hidden",
|
|
27
|
-
USER_IDLE = "user-idle",
|
|
28
|
-
USER_IDLE_TIMEOUT = "user-idle-timeout",
|
|
29
|
-
NO_AUTO_HIDE = "no-auto-hide",
|
|
30
|
-
DISABLED = "disabled",
|
|
31
|
-
HIDDEN = "hidden",
|
|
32
|
-
PAUSED = "paused",
|
|
33
|
-
ENDED = "ended",
|
|
34
|
-
VOLUME_LEVEL = "volume-level",
|
|
35
|
-
CASTING = "casting",
|
|
36
|
-
LOADING = "loading",
|
|
37
|
-
STREAM_TYPE = "stream-type",
|
|
38
|
-
LIVE = "live",
|
|
39
|
-
LIVE_ONLY = "live-only",
|
|
40
|
-
LIVE_HIDDEN = "live-hidden",
|
|
41
|
-
LIVE_THRESHOLD = "live-threshold",
|
|
42
|
-
DVR_THRESHOLD = "dvr-threshold",
|
|
43
|
-
REMAINING = "remaining",
|
|
44
|
-
REMAINING_WHEN_LIVE = "remaining-when-live",
|
|
45
|
-
SHOW_DURATION = "show-duration",
|
|
46
|
-
SEEK_OFFSET = "seek-offset",
|
|
47
|
-
MENU = "menu",
|
|
48
|
-
MENU_OPENED = "menu-opened",
|
|
49
|
-
MENU_CLOSE_ON_INPUT = "menu-close-on-input",
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
17
|
+
declare enum Attribute {
|
|
18
|
+
CONFIGURATION = "configuration",
|
|
19
|
+
SOURCE = "source",
|
|
20
|
+
AUTOPLAY = "autoplay",
|
|
21
|
+
MUTED = "muted",
|
|
22
|
+
FULLSCREEN = "fullscreen",
|
|
23
|
+
FLUID = "fluid",
|
|
24
|
+
MOBILE = "mobile",
|
|
25
|
+
MOBILE_ONLY = "mobile-only",
|
|
26
|
+
MOBILE_HIDDEN = "mobile-hidden",
|
|
27
|
+
USER_IDLE = "user-idle",
|
|
28
|
+
USER_IDLE_TIMEOUT = "user-idle-timeout",
|
|
29
|
+
NO_AUTO_HIDE = "no-auto-hide",
|
|
30
|
+
DISABLED = "disabled",
|
|
31
|
+
HIDDEN = "hidden",
|
|
32
|
+
PAUSED = "paused",
|
|
33
|
+
ENDED = "ended",
|
|
34
|
+
VOLUME_LEVEL = "volume-level",
|
|
35
|
+
CASTING = "casting",
|
|
36
|
+
LOADING = "loading",
|
|
37
|
+
STREAM_TYPE = "stream-type",
|
|
38
|
+
LIVE = "live",
|
|
39
|
+
LIVE_ONLY = "live-only",
|
|
40
|
+
LIVE_HIDDEN = "live-hidden",
|
|
41
|
+
LIVE_THRESHOLD = "live-threshold",
|
|
42
|
+
DVR_THRESHOLD = "dvr-threshold",
|
|
43
|
+
REMAINING = "remaining",
|
|
44
|
+
REMAINING_WHEN_LIVE = "remaining-when-live",
|
|
45
|
+
SHOW_DURATION = "show-duration",
|
|
46
|
+
SEEK_OFFSET = "seek-offset",
|
|
47
|
+
MENU = "menu",
|
|
48
|
+
MENU_OPENED = "menu-opened",
|
|
49
|
+
MENU_CLOSE_ON_INPUT = "menu-close-on-input",
|
|
50
|
+
ARIA_LABEL = "aria-label",
|
|
51
|
+
ARIA_LIVE = "aria-live",
|
|
52
|
+
ARIA_CHECKED = "aria-checked",
|
|
53
|
+
HAS_AUDIO = "has-audio",
|
|
54
|
+
HAS_SUBTITLES = "has-subtitles",
|
|
55
|
+
HAS_ERROR = "has-error",
|
|
56
|
+
HAS_FIRST_PLAY = "has-first-play",
|
|
57
|
+
HAS_TITLE = "has-title",
|
|
58
|
+
CAST_STATE = "cast-state",
|
|
59
|
+
TRACK_TYPE = "track-type",
|
|
60
|
+
SHOW_OFF = "show-off",
|
|
61
|
+
PLAYING_AD = "playing-ad",
|
|
62
|
+
CLICKTHROUGH = "clickthrough",
|
|
63
|
+
PROPERTY = "property",
|
|
64
|
+
VALUE = "value"
|
|
63
65
|
}
|
|
64
66
|
|
|
65
|
-
interface ButtonOptions {
|
|
66
|
-
template: HTMLTemplateElement;
|
|
67
|
-
}
|
|
68
|
-
declare function buttonTemplate(button: string, extraCss?: string): string;
|
|
69
|
-
/**
|
|
70
|
-
* A basic button.
|
|
71
|
-
*
|
|
72
|
-
* @attribute `disabled` - Whether the button is disabled. When disabled, the button cannot be clicked.
|
|
73
|
-
* @group Components
|
|
74
|
-
*/
|
|
75
|
-
declare class Button extends HTMLElement {
|
|
76
|
-
static get observedAttributes(): Attribute[];
|
|
77
|
-
/**
|
|
78
|
-
* Creates a basic button.
|
|
79
|
-
*
|
|
80
|
-
* By default, the button renders the contents of its direct children (i.e. it has a single unnamed `<slot>`).
|
|
81
|
-
* Subclasses can override this by passing a different {@link ButtonOptions.template} in the options,
|
|
82
|
-
* using {@link buttonTemplate} to correctly style the custom template.
|
|
83
|
-
*
|
|
84
|
-
* @param options - The options for this button.
|
|
85
|
-
*/
|
|
86
|
-
constructor(options?: ButtonOptions);
|
|
87
|
-
protected _upgradeProperty(prop: keyof this): void;
|
|
88
|
-
connectedCallback(): void;
|
|
89
|
-
disconnectedCallback(): void;
|
|
90
|
-
/**
|
|
91
|
-
* Whether the button is disabled.
|
|
92
|
-
*
|
|
93
|
-
* When disabled, the button cannot be clicked.
|
|
94
|
-
*/
|
|
95
|
-
get disabled(): boolean;
|
|
96
|
-
set disabled(disabled: boolean);
|
|
97
|
-
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
98
|
-
private readonly _onKeyDown;
|
|
99
|
-
private readonly _onClick;
|
|
100
|
-
/**
|
|
101
|
-
* Handle a button click.
|
|
102
|
-
*
|
|
103
|
-
* By default, this does nothing. Subclasses can override this method to add behavior to the button.
|
|
104
|
-
*/
|
|
105
|
-
protected handleClick(): void;
|
|
67
|
+
interface ButtonOptions {
|
|
68
|
+
template: HTMLTemplateElement;
|
|
69
|
+
}
|
|
70
|
+
declare function buttonTemplate(button: string, extraCss?: string): string;
|
|
71
|
+
/**
|
|
72
|
+
* A basic button.
|
|
73
|
+
*
|
|
74
|
+
* @attribute `disabled` - Whether the button is disabled. When disabled, the button cannot be clicked.
|
|
75
|
+
* @group Components
|
|
76
|
+
*/
|
|
77
|
+
declare class Button extends HTMLElement {
|
|
78
|
+
static get observedAttributes(): Attribute[];
|
|
79
|
+
/**
|
|
80
|
+
* Creates a basic button.
|
|
81
|
+
*
|
|
82
|
+
* By default, the button renders the contents of its direct children (i.e. it has a single unnamed `<slot>`).
|
|
83
|
+
* Subclasses can override this by passing a different {@link ButtonOptions.template} in the options,
|
|
84
|
+
* using {@link buttonTemplate} to correctly style the custom template.
|
|
85
|
+
*
|
|
86
|
+
* @param options - The options for this button.
|
|
87
|
+
*/
|
|
88
|
+
constructor(options?: ButtonOptions);
|
|
89
|
+
protected _upgradeProperty(prop: keyof this): void;
|
|
90
|
+
connectedCallback(): void;
|
|
91
|
+
disconnectedCallback(): void;
|
|
92
|
+
/**
|
|
93
|
+
* Whether the button is disabled.
|
|
94
|
+
*
|
|
95
|
+
* When disabled, the button cannot be clicked.
|
|
96
|
+
*/
|
|
97
|
+
get disabled(): boolean;
|
|
98
|
+
set disabled(disabled: boolean);
|
|
99
|
+
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
100
|
+
private readonly _onKeyDown;
|
|
101
|
+
private readonly _onClick;
|
|
102
|
+
/**
|
|
103
|
+
* Handle a button click.
|
|
104
|
+
*
|
|
105
|
+
* By default, this does nothing. Subclasses can override this method to add behavior to the button.
|
|
106
|
+
*/
|
|
107
|
+
protected handleClick(): void;
|
|
106
108
|
}
|
|
107
109
|
|
|
108
|
-
declare function linkButtonTemplate(button: string, extraCss?: string): string;
|
|
109
|
-
/**
|
|
110
|
-
* A {@link Button | button} that opens a hyperlink.
|
|
111
|
-
*
|
|
112
|
-
* @attribute `disabled` - Whether the button is disabled. When disabled, the button cannot be clicked.
|
|
113
|
-
* @group Components
|
|
114
|
-
*/
|
|
115
|
-
declare class LinkButton extends HTMLElement {
|
|
116
|
-
private readonly _linkEl;
|
|
117
|
-
static get observedAttributes(): Attribute[];
|
|
118
|
-
constructor(options?: ButtonOptions);
|
|
119
|
-
protected _upgradeProperty(prop: keyof this): void;
|
|
120
|
-
connectedCallback(): void;
|
|
121
|
-
disconnectedCallback(): void;
|
|
122
|
-
/**
|
|
123
|
-
* Whether the button is disabled.
|
|
124
|
-
*
|
|
125
|
-
* When disabled, the button cannot be clicked.
|
|
126
|
-
*/
|
|
127
|
-
get disabled(): boolean;
|
|
128
|
-
set disabled(disabled: boolean);
|
|
129
|
-
protected setLink(href: string, target: string): void;
|
|
130
|
-
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
131
|
-
private readonly _onKeyDown;
|
|
132
|
-
private readonly _onClick;
|
|
133
|
-
protected handleClick(): void;
|
|
110
|
+
declare function linkButtonTemplate(button: string, extraCss?: string): string;
|
|
111
|
+
/**
|
|
112
|
+
* A {@link Button | button} that opens a hyperlink.
|
|
113
|
+
*
|
|
114
|
+
* @attribute `disabled` - Whether the button is disabled. When disabled, the button cannot be clicked.
|
|
115
|
+
* @group Components
|
|
116
|
+
*/
|
|
117
|
+
declare class LinkButton extends HTMLElement {
|
|
118
|
+
private readonly _linkEl;
|
|
119
|
+
static get observedAttributes(): Attribute[];
|
|
120
|
+
constructor(options?: ButtonOptions);
|
|
121
|
+
protected _upgradeProperty(prop: keyof this): void;
|
|
122
|
+
connectedCallback(): void;
|
|
123
|
+
disconnectedCallback(): void;
|
|
124
|
+
/**
|
|
125
|
+
* Whether the button is disabled.
|
|
126
|
+
*
|
|
127
|
+
* When disabled, the button cannot be clicked.
|
|
128
|
+
*/
|
|
129
|
+
get disabled(): boolean;
|
|
130
|
+
set disabled(disabled: boolean);
|
|
131
|
+
protected setLink(href: string, target: string): void;
|
|
132
|
+
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
133
|
+
private readonly _onKeyDown;
|
|
134
|
+
private readonly _onClick;
|
|
135
|
+
protected handleClick(): void;
|
|
134
136
|
}
|
|
135
137
|
|
|
136
138
|
type Constructor<T> = abstract new (...args: any[]) => T;
|
|
137
139
|
|
|
138
140
|
type StreamType = 'vod' | 'live' | 'dvr';
|
|
139
141
|
|
|
140
|
-
/** @internal */
|
|
141
|
-
declare const StateReceiverProps: "theoplayerUiObservedProperties";
|
|
142
|
-
interface StateReceiverPropertyMap {
|
|
143
|
-
player: ChromelessPlayer | undefined;
|
|
144
|
-
fullscreen: boolean;
|
|
145
|
-
streamType: StreamType;
|
|
146
|
-
playbackRate: number;
|
|
147
|
-
activeVideoQuality: VideoQuality | undefined;
|
|
148
|
-
targetVideoQualities: VideoQuality[] | undefined;
|
|
149
|
-
error: THEOplayerError | undefined;
|
|
150
|
-
previewTime: number;
|
|
151
|
-
}
|
|
152
|
-
/**
|
|
153
|
-
* A custom element that automatically receives selected state updates
|
|
154
|
-
* from an ancestor {@link UIContainer | `<theoplayer-ui>`} element.
|
|
155
|
-
*
|
|
156
|
-
* Do not implement this interface directly, instead use {@link StateReceiverMixin}.
|
|
157
|
-
*
|
|
158
|
-
* @see {@link StateReceiverMixin}
|
|
159
|
-
*/
|
|
160
|
-
interface StateReceiverElement extends Partial<StateReceiverPropertyMap>, Element {
|
|
161
|
-
/**
|
|
162
|
-
* The names of the properties this element will receive.
|
|
163
|
-
*/
|
|
164
|
-
readonly [StateReceiverProps]: Array<keyof StateReceiverPropertyMap>;
|
|
165
|
-
}
|
|
166
|
-
/**
|
|
167
|
-
* A [mixin class](https://www.typescriptlang.org/docs/handbook/mixins.html) to apply on the superclass of a custom element,
|
|
168
|
-
* such that it will automatically receive selected state updates from an ancestor {@link UIContainer | `<theoplayer-ui>`} element.
|
|
169
|
-
*
|
|
170
|
-
* For each property name in `props`, the custom element *MUST* implement a corresponding property with a setter.
|
|
171
|
-
* For example, if `props` equals `["player", "fullscreen"]`, then the element must have writable `player` and `fullscreen`
|
|
172
|
-
* properties.
|
|
173
|
-
*
|
|
174
|
-
* @param base - The superclass for the new element class.
|
|
175
|
-
* @param props - The names of the properties this element will receive.
|
|
176
|
-
* @returns A class constructor that extends `base` and implements {@link StateReceiverElement}.
|
|
177
|
-
* @see {@link StateReceiverElement}
|
|
178
|
-
*/
|
|
142
|
+
/** @internal */
|
|
143
|
+
declare const StateReceiverProps: "theoplayerUiObservedProperties";
|
|
144
|
+
interface StateReceiverPropertyMap {
|
|
145
|
+
player: ChromelessPlayer | undefined;
|
|
146
|
+
fullscreen: boolean;
|
|
147
|
+
streamType: StreamType;
|
|
148
|
+
playbackRate: number;
|
|
149
|
+
activeVideoQuality: VideoQuality | undefined;
|
|
150
|
+
targetVideoQualities: VideoQuality[] | undefined;
|
|
151
|
+
error: THEOplayerError | undefined;
|
|
152
|
+
previewTime: number;
|
|
153
|
+
}
|
|
154
|
+
/**
|
|
155
|
+
* A custom element that automatically receives selected state updates
|
|
156
|
+
* from an ancestor {@link UIContainer | `<theoplayer-ui>`} element.
|
|
157
|
+
*
|
|
158
|
+
* Do not implement this interface directly, instead use {@link StateReceiverMixin}.
|
|
159
|
+
*
|
|
160
|
+
* @see {@link StateReceiverMixin}
|
|
161
|
+
*/
|
|
162
|
+
interface StateReceiverElement extends Partial<StateReceiverPropertyMap>, Element {
|
|
163
|
+
/**
|
|
164
|
+
* The names of the properties this element will receive.
|
|
165
|
+
*/
|
|
166
|
+
readonly [StateReceiverProps]: Array<keyof StateReceiverPropertyMap>;
|
|
167
|
+
}
|
|
168
|
+
/**
|
|
169
|
+
* A [mixin class](https://www.typescriptlang.org/docs/handbook/mixins.html) to apply on the superclass of a custom element,
|
|
170
|
+
* such that it will automatically receive selected state updates from an ancestor {@link UIContainer | `<theoplayer-ui>`} element.
|
|
171
|
+
*
|
|
172
|
+
* For each property name in `props`, the custom element *MUST* implement a corresponding property with a setter.
|
|
173
|
+
* For example, if `props` equals `["player", "fullscreen"]`, then the element must have writable `player` and `fullscreen`
|
|
174
|
+
* properties.
|
|
175
|
+
*
|
|
176
|
+
* @param base - The superclass for the new element class.
|
|
177
|
+
* @param props - The names of the properties this element will receive.
|
|
178
|
+
* @returns A class constructor that extends `base` and implements {@link StateReceiverElement}.
|
|
179
|
+
* @see {@link StateReceiverElement}
|
|
180
|
+
*/
|
|
179
181
|
declare function StateReceiverMixin<T extends Constructor<Element>>(base: T, props: Array<keyof StateReceiverPropertyMap>): T & Constructor<StateReceiverElement>;
|
|
180
182
|
|
|
181
|
-
declare const PlayButton_base: typeof Button & Constructor<StateReceiverElement>;
|
|
182
|
-
/**
|
|
183
|
-
* A button that toggles whether the player is playing or paused.
|
|
184
|
-
*
|
|
185
|
-
* @attribute `paused` (readonly) - Whether the player is paused. Reflects `ui.player.paused`.
|
|
186
|
-
* @attribute `ended` (readonly) - Whether the player is ended. Reflects `ui.player.ended`.
|
|
187
|
-
* @group Components
|
|
188
|
-
*/
|
|
189
|
-
declare class PlayButton extends PlayButton_base {
|
|
190
|
-
static get observedAttributes(): Attribute[];
|
|
191
|
-
private _player;
|
|
192
|
-
constructor();
|
|
193
|
-
connectedCallback(): void;
|
|
194
|
-
get paused(): boolean;
|
|
195
|
-
set paused(paused: boolean);
|
|
196
|
-
get ended(): boolean;
|
|
197
|
-
set ended(ended: boolean);
|
|
198
|
-
get player(): ChromelessPlayer | undefined;
|
|
199
|
-
set player(player: ChromelessPlayer | undefined);
|
|
200
|
-
private readonly _onPlay;
|
|
201
|
-
private readonly _onPause;
|
|
202
|
-
private readonly _updateFromPlayer;
|
|
203
|
-
private _updateEnded;
|
|
204
|
-
protected handleClick(): void;
|
|
205
|
-
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
183
|
+
declare const PlayButton_base: typeof Button & Constructor<StateReceiverElement>;
|
|
184
|
+
/**
|
|
185
|
+
* A button that toggles whether the player is playing or paused.
|
|
186
|
+
*
|
|
187
|
+
* @attribute `paused` (readonly) - Whether the player is paused. Reflects `ui.player.paused`.
|
|
188
|
+
* @attribute `ended` (readonly) - Whether the player is ended. Reflects `ui.player.ended`.
|
|
189
|
+
* @group Components
|
|
190
|
+
*/
|
|
191
|
+
declare class PlayButton extends PlayButton_base {
|
|
192
|
+
static get observedAttributes(): Attribute[];
|
|
193
|
+
private _player;
|
|
194
|
+
constructor();
|
|
195
|
+
connectedCallback(): void;
|
|
196
|
+
get paused(): boolean;
|
|
197
|
+
set paused(paused: boolean);
|
|
198
|
+
get ended(): boolean;
|
|
199
|
+
set ended(ended: boolean);
|
|
200
|
+
get player(): ChromelessPlayer | undefined;
|
|
201
|
+
set player(player: ChromelessPlayer | undefined);
|
|
202
|
+
private readonly _onPlay;
|
|
203
|
+
private readonly _onPause;
|
|
204
|
+
private readonly _updateFromPlayer;
|
|
205
|
+
private _updateEnded;
|
|
206
|
+
protected handleClick(): void;
|
|
207
|
+
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
208
|
+
private _updateAriaLabel;
|
|
206
209
|
}
|
|
207
210
|
|
|
208
|
-
type VolumeLevel = 'off' | 'low' | 'high';
|
|
209
|
-
declare const MuteButton_base: typeof Button & Constructor<StateReceiverElement>;
|
|
210
|
-
/**
|
|
211
|
-
* A button that toggles whether audio is muted or not.
|
|
212
|
-
*
|
|
213
|
-
* @attribute `volume-level` (readonly) - The volume level of the player.
|
|
214
|
-
* Can be "off" (muted), "low" (volume < 50%) or "high" (volume >= 50%).
|
|
215
|
-
* @group Components
|
|
216
|
-
*/
|
|
217
|
-
declare class MuteButton extends MuteButton_base {
|
|
218
|
-
static get observedAttributes(): Attribute[];
|
|
219
|
-
private _player;
|
|
220
|
-
constructor();
|
|
221
|
-
connectedCallback(): void;
|
|
222
|
-
/**
|
|
223
|
-
* The volume level of the player.
|
|
224
|
-
*/
|
|
225
|
-
get volumeLevel(): VolumeLevel;
|
|
226
|
-
get player(): ChromelessPlayer | undefined;
|
|
227
|
-
set player(player: ChromelessPlayer | undefined);
|
|
228
|
-
private readonly _updateFromPlayer;
|
|
229
|
-
protected handleClick(): void;
|
|
230
|
-
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
211
|
+
type VolumeLevel = 'off' | 'low' | 'high';
|
|
212
|
+
declare const MuteButton_base: typeof Button & Constructor<StateReceiverElement>;
|
|
213
|
+
/**
|
|
214
|
+
* A button that toggles whether audio is muted or not.
|
|
215
|
+
*
|
|
216
|
+
* @attribute `volume-level` (readonly) - The volume level of the player.
|
|
217
|
+
* Can be "off" (muted), "low" (volume < 50%) or "high" (volume >= 50%).
|
|
218
|
+
* @group Components
|
|
219
|
+
*/
|
|
220
|
+
declare class MuteButton extends MuteButton_base {
|
|
221
|
+
static get observedAttributes(): Attribute[];
|
|
222
|
+
private _player;
|
|
223
|
+
constructor();
|
|
224
|
+
connectedCallback(): void;
|
|
225
|
+
/**
|
|
226
|
+
* The volume level of the player.
|
|
227
|
+
*/
|
|
228
|
+
get volumeLevel(): VolumeLevel;
|
|
229
|
+
get player(): ChromelessPlayer | undefined;
|
|
230
|
+
set player(player: ChromelessPlayer | undefined);
|
|
231
|
+
private readonly _updateFromPlayer;
|
|
232
|
+
protected handleClick(): void;
|
|
233
|
+
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
234
|
+
private _updateAriaLabel;
|
|
231
235
|
}
|
|
232
236
|
|
|
233
|
-
declare const SeekButton_base: typeof Button & Constructor<StateReceiverElement>;
|
|
234
|
-
/**
|
|
235
|
-
* A button that seeks forward or backward by a fixed offset.
|
|
236
|
-
*
|
|
237
|
-
* @attribute `seek-offset` - The offset (in seconds) by which to seek forward (if positive) or backward (if negative).
|
|
238
|
-
* @group Components
|
|
239
|
-
*/
|
|
240
|
-
declare class SeekButton extends SeekButton_base {
|
|
241
|
-
static get observedAttributes(): Attribute[];
|
|
242
|
-
private _player;
|
|
243
|
-
private _offsetEl;
|
|
244
|
-
constructor();
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
237
|
+
declare const SeekButton_base: typeof Button & Constructor<StateReceiverElement>;
|
|
238
|
+
/**
|
|
239
|
+
* A button that seeks forward or backward by a fixed offset.
|
|
240
|
+
*
|
|
241
|
+
* @attribute `seek-offset` - The offset (in seconds) by which to seek forward (if positive) or backward (if negative).
|
|
242
|
+
* @group Components
|
|
243
|
+
*/
|
|
244
|
+
declare class SeekButton extends SeekButton_base {
|
|
245
|
+
static get observedAttributes(): Attribute[];
|
|
246
|
+
private _player;
|
|
247
|
+
private _offsetEl;
|
|
248
|
+
constructor();
|
|
249
|
+
connectedCallback(): void;
|
|
250
|
+
/**
|
|
251
|
+
* The offset (in seconds) by which to seek forward (if positive) or backward (if negative).
|
|
252
|
+
*/
|
|
253
|
+
get seekOffset(): number;
|
|
254
|
+
set seekOffset(value: number);
|
|
255
|
+
get player(): ChromelessPlayer | undefined;
|
|
256
|
+
set player(player: ChromelessPlayer | undefined);
|
|
257
|
+
protected handleClick(): void;
|
|
258
|
+
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
259
|
+
private _updateAriaLabel;
|
|
254
260
|
}
|
|
255
261
|
|
|
256
|
-
declare const TimeDisplay_base: {
|
|
257
|
-
new (): HTMLElement;
|
|
258
|
-
prototype: HTMLElement;
|
|
259
|
-
} & Constructor<StateReceiverElement>;
|
|
260
|
-
/**
|
|
261
|
-
* A control that displays the current time of the stream.
|
|
262
|
-
*
|
|
263
|
-
* @attribute `show-duration` - If set, also shows the duration of the stream.
|
|
264
|
-
* @attribute `remaining` - If set, shows the remaining time of the stream. Not compatible with `show-duration`.
|
|
265
|
-
* @attribute `remaining-when-live` - If set, and the stream is a livestream, shows the remaining time
|
|
266
|
-
* (until the live point) of the stream.
|
|
267
|
-
* @group Components
|
|
268
|
-
*/
|
|
269
|
-
declare class TimeDisplay extends TimeDisplay_base {
|
|
270
|
-
private readonly _spanEl;
|
|
271
|
-
private _player;
|
|
272
|
-
static get observedAttributes(): Attribute[];
|
|
273
|
-
constructor();
|
|
274
|
-
protected _upgradeProperty(prop: keyof this): void;
|
|
275
|
-
connectedCallback(): void;
|
|
276
|
-
get player(): ChromelessPlayer | undefined;
|
|
277
|
-
set player(player: ChromelessPlayer | undefined);
|
|
278
|
-
get streamType(): StreamType;
|
|
279
|
-
set streamType(streamType: StreamType);
|
|
280
|
-
private readonly _updateFromPlayer;
|
|
281
|
-
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
262
|
+
declare const TimeDisplay_base: {
|
|
263
|
+
new (): HTMLElement;
|
|
264
|
+
prototype: HTMLElement;
|
|
265
|
+
} & Constructor<StateReceiverElement>;
|
|
266
|
+
/**
|
|
267
|
+
* A control that displays the current time of the stream.
|
|
268
|
+
*
|
|
269
|
+
* @attribute `show-duration` - If set, also shows the duration of the stream.
|
|
270
|
+
* @attribute `remaining` - If set, shows the remaining time of the stream. Not compatible with `show-duration`.
|
|
271
|
+
* @attribute `remaining-when-live` - If set, and the stream is a livestream, shows the remaining time
|
|
272
|
+
* (until the live point) of the stream.
|
|
273
|
+
* @group Components
|
|
274
|
+
*/
|
|
275
|
+
declare class TimeDisplay extends TimeDisplay_base {
|
|
276
|
+
private readonly _spanEl;
|
|
277
|
+
private _player;
|
|
278
|
+
static get observedAttributes(): Attribute[];
|
|
279
|
+
constructor();
|
|
280
|
+
protected _upgradeProperty(prop: keyof this): void;
|
|
281
|
+
connectedCallback(): void;
|
|
282
|
+
get player(): ChromelessPlayer | undefined;
|
|
283
|
+
set player(player: ChromelessPlayer | undefined);
|
|
284
|
+
get streamType(): StreamType;
|
|
285
|
+
set streamType(streamType: StreamType);
|
|
286
|
+
private readonly _updateFromPlayer;
|
|
287
|
+
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
282
288
|
}
|
|
283
289
|
|
|
284
|
-
declare const DurationDisplay_base: {
|
|
285
|
-
new (): HTMLElement;
|
|
286
|
-
prototype: HTMLElement;
|
|
287
|
-
} & Constructor<StateReceiverElement>;
|
|
288
|
-
/**
|
|
289
|
-
* A control that displays the duration of the stream.
|
|
290
|
-
*
|
|
291
|
-
* @group Components
|
|
292
|
-
*/
|
|
293
|
-
declare class DurationDisplay extends DurationDisplay_base {
|
|
294
|
-
private readonly _spanEl;
|
|
295
|
-
private _player;
|
|
296
|
-
constructor();
|
|
297
|
-
protected _upgradeProperty(prop: keyof this): void;
|
|
298
|
-
connectedCallback(): void;
|
|
299
|
-
get player(): ChromelessPlayer | undefined;
|
|
300
|
-
set player(player: ChromelessPlayer | undefined);
|
|
301
|
-
private readonly _updateFromPlayer;
|
|
290
|
+
declare const DurationDisplay_base: {
|
|
291
|
+
new (): HTMLElement;
|
|
292
|
+
prototype: HTMLElement;
|
|
293
|
+
} & Constructor<StateReceiverElement>;
|
|
294
|
+
/**
|
|
295
|
+
* A control that displays the duration of the stream.
|
|
296
|
+
*
|
|
297
|
+
* @group Components
|
|
298
|
+
*/
|
|
299
|
+
declare class DurationDisplay extends DurationDisplay_base {
|
|
300
|
+
private readonly _spanEl;
|
|
301
|
+
private _player;
|
|
302
|
+
constructor();
|
|
303
|
+
protected _upgradeProperty(prop: keyof this): void;
|
|
304
|
+
connectedCallback(): void;
|
|
305
|
+
get player(): ChromelessPlayer | undefined;
|
|
306
|
+
set player(player: ChromelessPlayer | undefined);
|
|
307
|
+
private readonly _updateFromPlayer;
|
|
302
308
|
}
|
|
303
309
|
|
|
304
|
-
/**
|
|
305
|
-
* A button that can be checked.
|
|
306
|
-
*
|
|
307
|
-
* When part of a {@link RadioGroup}, at most one button in the group can be checked.
|
|
308
|
-
*
|
|
309
|
-
* @group Components
|
|
310
|
-
*/
|
|
311
|
-
declare class RadioButton extends Button {
|
|
312
|
-
static get observedAttributes(): Attribute[];
|
|
313
|
-
private _value;
|
|
314
|
-
constructor(options?: ButtonOptions);
|
|
315
|
-
connectedCallback(): void;
|
|
316
|
-
/**
|
|
317
|
-
* Whether this radio button is checked.
|
|
318
|
-
*/
|
|
319
|
-
get checked(): boolean;
|
|
320
|
-
set checked(checked: boolean);
|
|
321
|
-
/**
|
|
322
|
-
* The value associated with this radio button.
|
|
323
|
-
*/
|
|
324
|
-
get value(): any;
|
|
325
|
-
set value(value: any);
|
|
326
|
-
protected handleClick(): void;
|
|
327
|
-
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
310
|
+
/**
|
|
311
|
+
* A button that can be checked.
|
|
312
|
+
*
|
|
313
|
+
* When part of a {@link RadioGroup}, at most one button in the group can be checked.
|
|
314
|
+
*
|
|
315
|
+
* @group Components
|
|
316
|
+
*/
|
|
317
|
+
declare class RadioButton extends Button {
|
|
318
|
+
static get observedAttributes(): Attribute[];
|
|
319
|
+
private _value;
|
|
320
|
+
constructor(options?: ButtonOptions);
|
|
321
|
+
connectedCallback(): void;
|
|
322
|
+
/**
|
|
323
|
+
* Whether this radio button is checked.
|
|
324
|
+
*/
|
|
325
|
+
get checked(): boolean;
|
|
326
|
+
set checked(checked: boolean);
|
|
327
|
+
/**
|
|
328
|
+
* The value associated with this radio button.
|
|
329
|
+
*/
|
|
330
|
+
get value(): any;
|
|
331
|
+
set value(value: any);
|
|
332
|
+
protected handleClick(): void;
|
|
333
|
+
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
328
334
|
}
|
|
329
335
|
|
|
330
|
-
/**
|
|
331
|
-
* A group of {@link RadioButton}s. At most one button in the group can be checked.
|
|
332
|
-
*
|
|
333
|
-
* ## Behavior
|
|
334
|
-
* This radio group implements the [roving tabindex](https://www.w3.org/WAI/ARIA/apg/example-index/radio/radio.html) pattern.
|
|
335
|
-
* - `Tab` moves focus in or out of the radio group.
|
|
336
|
-
* - `Up`/`Left` arrow moves focus to the previous radio button.
|
|
337
|
-
* - `Down`/`Right` arrow moves focus to the next radio button.
|
|
338
|
-
* - `Home` moves focus to the first radio button.
|
|
339
|
-
* - `End` moves focus to the last radio button.
|
|
340
|
-
*
|
|
341
|
-
* @group Components
|
|
342
|
-
*/
|
|
343
|
-
declare class RadioGroup extends HTMLElement {
|
|
344
|
-
private _slot;
|
|
345
|
-
private _radioButtons;
|
|
346
|
-
constructor();
|
|
347
|
-
connectedCallback(): void;
|
|
348
|
-
disconnectedCallback(): void;
|
|
349
|
-
private readonly _onSlotChange;
|
|
350
|
-
private readonly _onKeyDown;
|
|
351
|
-
get focusedRadioButton(): RadioButton | null;
|
|
352
|
-
get checkedRadioButton(): RadioButton | null;
|
|
353
|
-
get firstRadioButton(): RadioButton | null;
|
|
354
|
-
get lastRadioButton(): RadioButton | null;
|
|
355
|
-
allRadioButtons(): readonly RadioButton[];
|
|
356
|
-
private _prevRadioButton;
|
|
357
|
-
private _nextRadioButton;
|
|
358
|
-
private _focusPrevButton;
|
|
359
|
-
private _focusNextButton;
|
|
360
|
-
setFocusedRadioButton(button: RadioButton | null): void;
|
|
361
|
-
private _unfocusAll;
|
|
362
|
-
setCheckedRadioButton(checkedButton: RadioButton | null): void;
|
|
363
|
-
private readonly _onButtonChange;
|
|
336
|
+
/**
|
|
337
|
+
* A group of {@link RadioButton}s. At most one button in the group can be checked.
|
|
338
|
+
*
|
|
339
|
+
* ## Behavior
|
|
340
|
+
* This radio group implements the [roving tabindex](https://www.w3.org/WAI/ARIA/apg/example-index/radio/radio.html) pattern.
|
|
341
|
+
* - `Tab` moves focus in or out of the radio group.
|
|
342
|
+
* - `Up`/`Left` arrow moves focus to the previous radio button.
|
|
343
|
+
* - `Down`/`Right` arrow moves focus to the next radio button.
|
|
344
|
+
* - `Home` moves focus to the first radio button.
|
|
345
|
+
* - `End` moves focus to the last radio button.
|
|
346
|
+
*
|
|
347
|
+
* @group Components
|
|
348
|
+
*/
|
|
349
|
+
declare class RadioGroup extends HTMLElement {
|
|
350
|
+
private _slot;
|
|
351
|
+
private _radioButtons;
|
|
352
|
+
constructor();
|
|
353
|
+
connectedCallback(): void;
|
|
354
|
+
disconnectedCallback(): void;
|
|
355
|
+
private readonly _onSlotChange;
|
|
356
|
+
private readonly _onKeyDown;
|
|
357
|
+
get focusedRadioButton(): RadioButton | null;
|
|
358
|
+
get checkedRadioButton(): RadioButton | null;
|
|
359
|
+
get firstRadioButton(): RadioButton | null;
|
|
360
|
+
get lastRadioButton(): RadioButton | null;
|
|
361
|
+
allRadioButtons(): readonly RadioButton[];
|
|
362
|
+
private _prevRadioButton;
|
|
363
|
+
private _nextRadioButton;
|
|
364
|
+
private _focusPrevButton;
|
|
365
|
+
private _focusNextButton;
|
|
366
|
+
setFocusedRadioButton(button: RadioButton | null): void;
|
|
367
|
+
private _unfocusAll;
|
|
368
|
+
setCheckedRadioButton(checkedButton: RadioButton | null): void;
|
|
369
|
+
private readonly _onButtonChange;
|
|
364
370
|
}
|
|
365
371
|
|
|
366
|
-
interface MenuOptions {
|
|
367
|
-
template?: HTMLTemplateElement;
|
|
368
|
-
}
|
|
369
|
-
declare function menuTemplate(heading: string, content: string, extraCss?: string): string;
|
|
370
|
-
/**
|
|
371
|
-
* A menu that can be opened on top of the player.
|
|
372
|
-
*
|
|
373
|
-
* The menu has a heading at the top, with a {@link CloseMenuButton | close button} and a heading text.
|
|
374
|
-
*
|
|
375
|
-
* @attribute `menu-close-on-input` - Whether to automatically close the menu whenever one of its controls
|
|
376
|
-
* receives an input (e.g. when a radio button is clicked).
|
|
377
|
-
* @attribute `menu-opened` (readonly) - Whether the menu is currently open.
|
|
378
|
-
* @group Components
|
|
379
|
-
*/
|
|
380
|
-
declare class Menu extends HTMLElement {
|
|
381
|
-
static get observedAttributes(): Attribute[];
|
|
382
|
-
private readonly _contentEl;
|
|
383
|
-
/**
|
|
384
|
-
* Creates a menu.
|
|
385
|
-
*
|
|
386
|
-
* By default, the button has an unnamed `<slot>` for its contents, and a named `"heading"` `<slot>` for its heading text.
|
|
387
|
-
* Subclasses can override this by passing a different {@link MenuOptions.template} in the options,
|
|
388
|
-
* using {@link menuTemplate} to correctly style the custom template.
|
|
389
|
-
*
|
|
390
|
-
* @param options - The options for this menu.
|
|
391
|
-
*/
|
|
392
|
-
constructor(options?: MenuOptions);
|
|
393
|
-
protected _upgradeProperty(prop: keyof this): void;
|
|
394
|
-
connectedCallback(): void;
|
|
395
|
-
disconnectedCallback(): void;
|
|
396
|
-
/**
|
|
397
|
-
* Open the menu.
|
|
398
|
-
*/
|
|
399
|
-
openMenu(): void;
|
|
400
|
-
/**
|
|
401
|
-
* Close the menu.
|
|
402
|
-
*/
|
|
403
|
-
closeMenu(): void;
|
|
404
|
-
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
405
|
-
private readonly _onContentInput;
|
|
372
|
+
interface MenuOptions {
|
|
373
|
+
template?: HTMLTemplateElement;
|
|
374
|
+
}
|
|
375
|
+
declare function menuTemplate(heading: string, content: string, extraCss?: string): string;
|
|
376
|
+
/**
|
|
377
|
+
* A menu that can be opened on top of the player.
|
|
378
|
+
*
|
|
379
|
+
* The menu has a heading at the top, with a {@link CloseMenuButton | close button} and a heading text.
|
|
380
|
+
*
|
|
381
|
+
* @attribute `menu-close-on-input` - Whether to automatically close the menu whenever one of its controls
|
|
382
|
+
* receives an input (e.g. when a radio button is clicked).
|
|
383
|
+
* @attribute `menu-opened` (readonly) - Whether the menu is currently open.
|
|
384
|
+
* @group Components
|
|
385
|
+
*/
|
|
386
|
+
declare class Menu extends HTMLElement {
|
|
387
|
+
static get observedAttributes(): Attribute[];
|
|
388
|
+
private readonly _contentEl;
|
|
389
|
+
/**
|
|
390
|
+
* Creates a menu.
|
|
391
|
+
*
|
|
392
|
+
* By default, the button has an unnamed `<slot>` for its contents, and a named `"heading"` `<slot>` for its heading text.
|
|
393
|
+
* Subclasses can override this by passing a different {@link MenuOptions.template} in the options,
|
|
394
|
+
* using {@link menuTemplate} to correctly style the custom template.
|
|
395
|
+
*
|
|
396
|
+
* @param options - The options for this menu.
|
|
397
|
+
*/
|
|
398
|
+
constructor(options?: MenuOptions);
|
|
399
|
+
protected _upgradeProperty(prop: keyof this): void;
|
|
400
|
+
connectedCallback(): void;
|
|
401
|
+
disconnectedCallback(): void;
|
|
402
|
+
/**
|
|
403
|
+
* Open the menu.
|
|
404
|
+
*/
|
|
405
|
+
openMenu(): void;
|
|
406
|
+
/**
|
|
407
|
+
* Close the menu.
|
|
408
|
+
*/
|
|
409
|
+
closeMenu(): void;
|
|
410
|
+
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
411
|
+
private readonly _onContentInput;
|
|
406
412
|
}
|
|
407
413
|
|
|
408
|
-
interface MenuGroupOptions {
|
|
409
|
-
template?: HTMLTemplateElement;
|
|
410
|
-
}
|
|
411
|
-
declare function menuGroupTemplate(content: string, extraCss?: string): string;
|
|
412
|
-
/**
|
|
413
|
-
* A group of {@link Menu}s.
|
|
414
|
-
*
|
|
415
|
-
* This can contain multiple other menus, which can be opened with {@link MenuGroup.openMenu}.
|
|
416
|
-
* When a {@link MenuButton} in one menu opens another menu in this group, it is opened as a "submenu".
|
|
417
|
-
* When a submenu is closed, the menu that originally opened it is shown again.
|
|
418
|
-
*
|
|
419
|
-
* @attribute `menu-opened` (readonly) - Whether any menu in the group is currently open.
|
|
420
|
-
* @group Components
|
|
421
|
-
*/
|
|
422
|
-
declare class MenuGroup extends HTMLElement {
|
|
423
|
-
static get observedAttributes(): Attribute[];
|
|
424
|
-
private readonly _menuSlot;
|
|
425
|
-
private _menus;
|
|
426
|
-
private readonly _openMenuStack;
|
|
427
|
-
constructor(options?: MenuGroupOptions);
|
|
428
|
-
protected _upgradeProperty(prop: keyof this): void;
|
|
429
|
-
connectedCallback(): void;
|
|
430
|
-
disconnectedCallback(): void;
|
|
431
|
-
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
432
|
-
/**
|
|
433
|
-
* Get the menu with the given ID.
|
|
434
|
-
*
|
|
435
|
-
* @param [menuId] - The ID of the menu. If unset, returns this menu group.
|
|
436
|
-
*/
|
|
437
|
-
getMenuById(menuId?: string): Menu | MenuGroup | undefined;
|
|
438
|
-
/**
|
|
439
|
-
* Open the menu with the given ID.
|
|
440
|
-
*
|
|
441
|
-
* If no ID is given, the first menu in the group is opened.
|
|
442
|
-
*
|
|
443
|
-
* If there's already an open menu, then the new menu is opened as a "submenu".
|
|
444
|
-
* When it closed, the previous menu is opened.
|
|
445
|
-
*
|
|
446
|
-
* @param [menuId] - The ID of the menu to open.
|
|
447
|
-
* @param [opener] - The control that opened the menu. When the menu is closed, focus is moved back to this control.
|
|
448
|
-
* @returns True if the given menu was found.
|
|
449
|
-
*/
|
|
450
|
-
openMenu(menuId?: string, opener?: HTMLElement): boolean;
|
|
451
|
-
/**
|
|
452
|
-
* Closes the menu with the given ID.
|
|
453
|
-
*
|
|
454
|
-
* If no ID is given, then the entire menu group is closed.
|
|
455
|
-
*
|
|
456
|
-
* If the given menu has opened one or more submenus, then those are also closed.
|
|
457
|
-
* If the last open menu is closed, then the menu group also becomes closed.
|
|
458
|
-
*
|
|
459
|
-
* @param [menuId] - The ID of the menu to close.
|
|
460
|
-
* @returns True if the given menu was found and closed.
|
|
461
|
-
*/
|
|
462
|
-
closeMenu(menuId?: string): boolean;
|
|
463
|
-
private closeMenusFromIndex_;
|
|
464
|
-
/**
|
|
465
|
-
* Whether this menu group has a currently open menu.
|
|
466
|
-
*/
|
|
467
|
-
hasCurrentMenu(): boolean;
|
|
468
|
-
private getCurrentMenu_;
|
|
469
|
-
/**
|
|
470
|
-
* Close the current menu.
|
|
471
|
-
*/
|
|
472
|
-
closeCurrentMenu(): boolean;
|
|
473
|
-
/**
|
|
474
|
-
* Whether the menu with the given ID is currently open.
|
|
475
|
-
*
|
|
476
|
-
* @param [menuId] - The ID of the menu.
|
|
477
|
-
*/
|
|
478
|
-
isMenuOpen(menuId?: string): boolean;
|
|
479
|
-
/**
|
|
480
|
-
* Update the list of menus whenever the `<slot>` contents change.
|
|
481
|
-
* Note: the `slotchange` event bubbles up, so we don't have to manually attach
|
|
482
|
-
* this listener to each nested `<slot>`.
|
|
483
|
-
*/
|
|
484
|
-
private readonly _onMenuListChange;
|
|
485
|
-
private readonly _onToggleMenu;
|
|
486
|
-
private readonly _onCloseMenu;
|
|
487
|
-
private readonly _onMenuChange;
|
|
488
|
-
private readonly _onKeyDown;
|
|
414
|
+
interface MenuGroupOptions {
|
|
415
|
+
template?: HTMLTemplateElement;
|
|
416
|
+
}
|
|
417
|
+
declare function menuGroupTemplate(content: string, extraCss?: string): string;
|
|
418
|
+
/**
|
|
419
|
+
* A group of {@link Menu}s.
|
|
420
|
+
*
|
|
421
|
+
* This can contain multiple other menus, which can be opened with {@link MenuGroup.openMenu}.
|
|
422
|
+
* When a {@link MenuButton} in one menu opens another menu in this group, it is opened as a "submenu".
|
|
423
|
+
* When a submenu is closed, the menu that originally opened it is shown again.
|
|
424
|
+
*
|
|
425
|
+
* @attribute `menu-opened` (readonly) - Whether any menu in the group is currently open.
|
|
426
|
+
* @group Components
|
|
427
|
+
*/
|
|
428
|
+
declare class MenuGroup extends HTMLElement {
|
|
429
|
+
static get observedAttributes(): Attribute[];
|
|
430
|
+
private readonly _menuSlot;
|
|
431
|
+
private _menus;
|
|
432
|
+
private readonly _openMenuStack;
|
|
433
|
+
constructor(options?: MenuGroupOptions);
|
|
434
|
+
protected _upgradeProperty(prop: keyof this): void;
|
|
435
|
+
connectedCallback(): void;
|
|
436
|
+
disconnectedCallback(): void;
|
|
437
|
+
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
438
|
+
/**
|
|
439
|
+
* Get the menu with the given ID.
|
|
440
|
+
*
|
|
441
|
+
* @param [menuId] - The ID of the menu. If unset, returns this menu group.
|
|
442
|
+
*/
|
|
443
|
+
getMenuById(menuId?: string): Menu | MenuGroup | undefined;
|
|
444
|
+
/**
|
|
445
|
+
* Open the menu with the given ID.
|
|
446
|
+
*
|
|
447
|
+
* If no ID is given, the first menu in the group is opened.
|
|
448
|
+
*
|
|
449
|
+
* If there's already an open menu, then the new menu is opened as a "submenu".
|
|
450
|
+
* When it closed, the previous menu is opened.
|
|
451
|
+
*
|
|
452
|
+
* @param [menuId] - The ID of the menu to open.
|
|
453
|
+
* @param [opener] - The control that opened the menu. When the menu is closed, focus is moved back to this control.
|
|
454
|
+
* @returns True if the given menu was found.
|
|
455
|
+
*/
|
|
456
|
+
openMenu(menuId?: string, opener?: HTMLElement): boolean;
|
|
457
|
+
/**
|
|
458
|
+
* Closes the menu with the given ID.
|
|
459
|
+
*
|
|
460
|
+
* If no ID is given, then the entire menu group is closed.
|
|
461
|
+
*
|
|
462
|
+
* If the given menu has opened one or more submenus, then those are also closed.
|
|
463
|
+
* If the last open menu is closed, then the menu group also becomes closed.
|
|
464
|
+
*
|
|
465
|
+
* @param [menuId] - The ID of the menu to close.
|
|
466
|
+
* @returns True if the given menu was found and closed.
|
|
467
|
+
*/
|
|
468
|
+
closeMenu(menuId?: string): boolean;
|
|
469
|
+
private closeMenusFromIndex_;
|
|
470
|
+
/**
|
|
471
|
+
* Whether this menu group has a currently open menu.
|
|
472
|
+
*/
|
|
473
|
+
hasCurrentMenu(): boolean;
|
|
474
|
+
private getCurrentMenu_;
|
|
475
|
+
/**
|
|
476
|
+
* Close the current menu.
|
|
477
|
+
*/
|
|
478
|
+
closeCurrentMenu(): boolean;
|
|
479
|
+
/**
|
|
480
|
+
* Whether the menu with the given ID is currently open.
|
|
481
|
+
*
|
|
482
|
+
* @param [menuId] - The ID of the menu.
|
|
483
|
+
*/
|
|
484
|
+
isMenuOpen(menuId?: string): boolean;
|
|
485
|
+
/**
|
|
486
|
+
* Update the list of menus whenever the `<slot>` contents change.
|
|
487
|
+
* Note: the `slotchange` event bubbles up, so we don't have to manually attach
|
|
488
|
+
* this listener to each nested `<slot>`.
|
|
489
|
+
*/
|
|
490
|
+
private readonly _onMenuListChange;
|
|
491
|
+
private readonly _onToggleMenu;
|
|
492
|
+
private readonly _onCloseMenu;
|
|
493
|
+
private readonly _onMenuChange;
|
|
494
|
+
private readonly _onKeyDown;
|
|
489
495
|
}
|
|
490
496
|
|
|
491
|
-
/**
|
|
492
|
-
* A menu button that opens a {@link Menu}.
|
|
493
|
-
*
|
|
494
|
-
* @attribute `menu` - The ID of the menu to open.
|
|
495
|
-
* @group Components
|
|
496
|
-
*/
|
|
497
|
-
declare class MenuButton extends Button {
|
|
498
|
-
static get observedAttributes(): Attribute[];
|
|
499
|
-
constructor(options?: Partial<ButtonOptions>);
|
|
500
|
-
connectedCallback(): void;
|
|
501
|
-
/**
|
|
502
|
-
* The ID of the menu to open.
|
|
503
|
-
*/
|
|
504
|
-
get menu(): string | null;
|
|
505
|
-
set menu(menuId: string | null);
|
|
506
|
-
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
507
|
-
protected handleClick(): void;
|
|
497
|
+
/**
|
|
498
|
+
* A menu button that opens a {@link Menu}.
|
|
499
|
+
*
|
|
500
|
+
* @attribute `menu` - The ID of the menu to open.
|
|
501
|
+
* @group Components
|
|
502
|
+
*/
|
|
503
|
+
declare class MenuButton extends Button {
|
|
504
|
+
static get observedAttributes(): Attribute[];
|
|
505
|
+
constructor(options?: Partial<ButtonOptions>);
|
|
506
|
+
connectedCallback(): void;
|
|
507
|
+
/**
|
|
508
|
+
* The ID of the menu to open.
|
|
509
|
+
*/
|
|
510
|
+
get menu(): string | null;
|
|
511
|
+
set menu(menuId: string | null);
|
|
512
|
+
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
513
|
+
protected handleClick(): void;
|
|
508
514
|
}
|
|
509
515
|
|
|
510
|
-
/**
|
|
511
|
-
* A button that closes its parent menu.
|
|
512
|
-
*
|
|
513
|
-
* This button must be placed inside a {@link Menu | `<theoplayer-menu>`}.
|
|
514
|
-
*
|
|
515
|
-
* @group Components
|
|
516
|
-
*/
|
|
517
|
-
declare class CloseMenuButton extends Button {
|
|
518
|
-
static get observedAttributes(): Attribute[];
|
|
519
|
-
constructor();
|
|
520
|
-
|
|
516
|
+
/**
|
|
517
|
+
* A button that closes its parent menu.
|
|
518
|
+
*
|
|
519
|
+
* This button must be placed inside a {@link Menu | `<theoplayer-menu>`}.
|
|
520
|
+
*
|
|
521
|
+
* @group Components
|
|
522
|
+
*/
|
|
523
|
+
declare class CloseMenuButton extends Button {
|
|
524
|
+
static get observedAttributes(): Attribute[];
|
|
525
|
+
constructor();
|
|
526
|
+
connectedCallback(): void;
|
|
527
|
+
protected handleClick(): void;
|
|
521
528
|
}
|
|
522
529
|
|
|
523
|
-
/**
|
|
524
|
-
* A radio button that shows the label of a given media track, and switches to that track when clicked.
|
|
525
|
-
* @group Components
|
|
526
|
-
*/
|
|
527
|
-
declare class MediaTrackRadioButton extends RadioButton {
|
|
528
|
-
private _slotEl;
|
|
529
|
-
private _track;
|
|
530
|
-
constructor();
|
|
531
|
-
/**
|
|
532
|
-
* The media track that is controlled by this radio button.
|
|
533
|
-
*/
|
|
534
|
-
get track(): MediaTrack | undefined;
|
|
535
|
-
set track(track: MediaTrack | undefined);
|
|
536
|
-
private _updateFromTrack;
|
|
537
|
-
private _updateTrack;
|
|
538
|
-
private readonly _onTrackChange;
|
|
539
|
-
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
530
|
+
/**
|
|
531
|
+
* A radio button that shows the label of a given media track, and switches to that track when clicked.
|
|
532
|
+
* @group Components
|
|
533
|
+
*/
|
|
534
|
+
declare class MediaTrackRadioButton extends RadioButton {
|
|
535
|
+
private _slotEl;
|
|
536
|
+
private _track;
|
|
537
|
+
constructor();
|
|
538
|
+
/**
|
|
539
|
+
* The media track that is controlled by this radio button.
|
|
540
|
+
*/
|
|
541
|
+
get track(): MediaTrack | undefined;
|
|
542
|
+
set track(track: MediaTrack | undefined);
|
|
543
|
+
private _updateFromTrack;
|
|
544
|
+
private _updateTrack;
|
|
545
|
+
private readonly _onTrackChange;
|
|
546
|
+
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
540
547
|
}
|
|
541
548
|
|
|
542
|
-
type TrackType = 'audio' | 'video' | 'subtitles';
|
|
543
|
-
declare const TrackRadioGroup_base: {
|
|
544
|
-
new (): HTMLElement;
|
|
545
|
-
prototype: HTMLElement;
|
|
546
|
-
} & Constructor<StateReceiverElement>;
|
|
547
|
-
/**
|
|
548
|
-
* A radio group that shows a list of media or text tracks, from which the user can choose an active track.
|
|
549
|
-
*
|
|
550
|
-
* @attribute `track-type` - The track type of the available tracks. Can be "audio", "video" or "subtitles".
|
|
551
|
-
* @attribute `show-off` - If set, shows an "off" button to disable all tracks.
|
|
552
|
-
* Can only be used with the "subtitles" track type.
|
|
553
|
-
* @group Components
|
|
554
|
-
*/
|
|
555
|
-
declare class TrackRadioGroup extends TrackRadioGroup_base {
|
|
556
|
-
static get observedAttributes(): Attribute[];
|
|
557
|
-
private readonly _radioGroup;
|
|
558
|
-
private _offButton;
|
|
559
|
-
private _player;
|
|
560
|
-
private _tracksList;
|
|
561
|
-
constructor();
|
|
562
|
-
protected _upgradeProperty(prop: keyof this): void;
|
|
563
|
-
connectedCallback(): void;
|
|
564
|
-
disconnectedCallback(): void;
|
|
565
|
-
/**
|
|
566
|
-
* The track type of the available tracks.
|
|
567
|
-
*/
|
|
568
|
-
get trackType(): TrackType;
|
|
569
|
-
set trackType(value: TrackType);
|
|
570
|
-
/**
|
|
571
|
-
* If set, shows an "off" button to disable all tracks.
|
|
572
|
-
*
|
|
573
|
-
* Can only be used with the `"subtitles"` track type.
|
|
574
|
-
*/
|
|
575
|
-
get showOffButton(): boolean;
|
|
576
|
-
set showOffButton(value: boolean);
|
|
577
|
-
get player(): ChromelessPlayer | undefined;
|
|
578
|
-
set player(player: ChromelessPlayer | undefined);
|
|
579
|
-
private _getTracksList;
|
|
580
|
-
private _updateTracksList;
|
|
581
|
-
private _getTracks;
|
|
582
|
-
private readonly _updateTracks;
|
|
583
|
-
private _createTrackButton;
|
|
584
|
-
private _updateOffButton;
|
|
585
|
-
private readonly _onChange;
|
|
586
|
-
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
549
|
+
type TrackType = 'audio' | 'video' | 'subtitles';
|
|
550
|
+
declare const TrackRadioGroup_base: {
|
|
551
|
+
new (): HTMLElement;
|
|
552
|
+
prototype: HTMLElement;
|
|
553
|
+
} & Constructor<StateReceiverElement>;
|
|
554
|
+
/**
|
|
555
|
+
* A radio group that shows a list of media or text tracks, from which the user can choose an active track.
|
|
556
|
+
*
|
|
557
|
+
* @attribute `track-type` - The track type of the available tracks. Can be "audio", "video" or "subtitles".
|
|
558
|
+
* @attribute `show-off` - If set, shows an "off" button to disable all tracks.
|
|
559
|
+
* Can only be used with the "subtitles" track type.
|
|
560
|
+
* @group Components
|
|
561
|
+
*/
|
|
562
|
+
declare class TrackRadioGroup extends TrackRadioGroup_base {
|
|
563
|
+
static get observedAttributes(): Attribute[];
|
|
564
|
+
private readonly _radioGroup;
|
|
565
|
+
private _offButton;
|
|
566
|
+
private _player;
|
|
567
|
+
private _tracksList;
|
|
568
|
+
constructor();
|
|
569
|
+
protected _upgradeProperty(prop: keyof this): void;
|
|
570
|
+
connectedCallback(): void;
|
|
571
|
+
disconnectedCallback(): void;
|
|
572
|
+
/**
|
|
573
|
+
* The track type of the available tracks.
|
|
574
|
+
*/
|
|
575
|
+
get trackType(): TrackType;
|
|
576
|
+
set trackType(value: TrackType);
|
|
577
|
+
/**
|
|
578
|
+
* If set, shows an "off" button to disable all tracks.
|
|
579
|
+
*
|
|
580
|
+
* Can only be used with the `"subtitles"` track type.
|
|
581
|
+
*/
|
|
582
|
+
get showOffButton(): boolean;
|
|
583
|
+
set showOffButton(value: boolean);
|
|
584
|
+
get player(): ChromelessPlayer | undefined;
|
|
585
|
+
set player(player: ChromelessPlayer | undefined);
|
|
586
|
+
private _getTracksList;
|
|
587
|
+
private _updateTracksList;
|
|
588
|
+
private _getTracks;
|
|
589
|
+
private readonly _updateTracks;
|
|
590
|
+
private _createTrackButton;
|
|
591
|
+
private _updateOffButton;
|
|
592
|
+
private readonly _onChange;
|
|
593
|
+
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
587
594
|
}
|
|
588
595
|
|
|
589
|
-
/**
|
|
590
|
-
* A radio button that shows the label of a given text track, and switches to that track when clicked.
|
|
591
|
-
*
|
|
592
|
-
* @group Components
|
|
593
|
-
*/
|
|
594
|
-
declare class TextTrackRadioButton extends RadioButton {
|
|
595
|
-
private _slotEl;
|
|
596
|
-
private _track;
|
|
597
|
-
constructor();
|
|
598
|
-
/**
|
|
599
|
-
* The text track that is controlled by this radio button.
|
|
600
|
-
*/
|
|
601
|
-
get track(): TextTrack | undefined;
|
|
602
|
-
set track(track: TextTrack | undefined);
|
|
603
|
-
private _updateFromTrack;
|
|
604
|
-
private _updateTrack;
|
|
605
|
-
private readonly _onTrackChange;
|
|
606
|
-
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
596
|
+
/**
|
|
597
|
+
* A radio button that shows the label of a given text track, and switches to that track when clicked.
|
|
598
|
+
*
|
|
599
|
+
* @group Components
|
|
600
|
+
*/
|
|
601
|
+
declare class TextTrackRadioButton extends RadioButton {
|
|
602
|
+
private _slotEl;
|
|
603
|
+
private _track;
|
|
604
|
+
constructor();
|
|
605
|
+
/**
|
|
606
|
+
* The text track that is controlled by this radio button.
|
|
607
|
+
*/
|
|
608
|
+
get track(): TextTrack | undefined;
|
|
609
|
+
set track(track: TextTrack | undefined);
|
|
610
|
+
private _updateFromTrack;
|
|
611
|
+
private _updateTrack;
|
|
612
|
+
private readonly _onTrackChange;
|
|
613
|
+
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
607
614
|
}
|
|
608
615
|
|
|
609
|
-
/**
|
|
610
|
-
* A radio button that disables the active subtitle track when clicked.
|
|
611
|
-
*
|
|
612
|
-
* @group Components
|
|
613
|
-
*/
|
|
614
|
-
declare class TextTrackOffRadioButton extends RadioButton {
|
|
615
|
-
private _trackList;
|
|
616
|
-
constructor();
|
|
617
|
-
get trackList(): TextTracksList | undefined;
|
|
618
|
-
set trackList(trackList: TextTracksList | undefined);
|
|
619
|
-
private _updateFromTrackList;
|
|
620
|
-
private _updateTrackList;
|
|
621
|
-
private readonly _onTrackChange;
|
|
622
|
-
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
616
|
+
/**
|
|
617
|
+
* A radio button that disables the active subtitle track when clicked.
|
|
618
|
+
*
|
|
619
|
+
* @group Components
|
|
620
|
+
*/
|
|
621
|
+
declare class TextTrackOffRadioButton extends RadioButton {
|
|
622
|
+
private _trackList;
|
|
623
|
+
constructor();
|
|
624
|
+
get trackList(): TextTracksList | undefined;
|
|
625
|
+
set trackList(trackList: TextTracksList | undefined);
|
|
626
|
+
private _updateFromTrackList;
|
|
627
|
+
private _updateTrackList;
|
|
628
|
+
private readonly _onTrackChange;
|
|
629
|
+
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
623
630
|
}
|
|
624
631
|
|
|
625
|
-
interface TextTrackStyleMap {
|
|
626
|
-
fontFamily: string | undefined;
|
|
627
|
-
fontColor: string | undefined;
|
|
628
|
-
fontOpacity: number | undefined;
|
|
629
|
-
fontSize: string | undefined;
|
|
630
|
-
backgroundColor: string | undefined;
|
|
631
|
-
backgroundOpacity: number | undefined;
|
|
632
|
-
windowColor: string | undefined;
|
|
633
|
-
windowOpacity: number | undefined;
|
|
634
|
-
edgeStyle: EdgeStyle | undefined;
|
|
635
|
-
}
|
|
636
|
-
type TextTrackStyleOption = keyof TextTrackStyleMap;
|
|
637
|
-
declare const TextTrackStyleRadioGroup_base: {
|
|
638
|
-
new (): HTMLElement;
|
|
639
|
-
prototype: HTMLElement;
|
|
640
|
-
} & Constructor<StateReceiverElement>;
|
|
641
|
-
/**
|
|
642
|
-
* A radio group that shows a list of values for a text track style option, from which the user can choose a desired value.
|
|
643
|
-
*
|
|
644
|
-
* @attribute `property` - The property name of the text track style option. One of {@link TextTrackStyleOption}.
|
|
645
|
-
* @slot {@link RadioButton} - The possible options for the text track style option.
|
|
646
|
-
* For example: `<theoplayer-radio-button value="#ff0000">Red</theoplayer-radio-button>`
|
|
647
|
-
* @group Components
|
|
648
|
-
*/
|
|
649
|
-
declare class TextTrackStyleRadioGroup extends TextTrackStyleRadioGroup_base {
|
|
650
|
-
static get observedAttributes(): Attribute[];
|
|
651
|
-
private readonly _radioGroup;
|
|
652
|
-
private readonly _optionsSlot;
|
|
653
|
-
private _player;
|
|
654
|
-
private _value;
|
|
655
|
-
constructor();
|
|
656
|
-
connectedCallback(): void;
|
|
657
|
-
disconnectedCallback(): void;
|
|
658
|
-
protected _upgradeProperty(prop: keyof this): void;
|
|
659
|
-
/**
|
|
660
|
-
* The property name of the text track style option.
|
|
661
|
-
*/
|
|
662
|
-
get property(): TextTrackStyleOption;
|
|
663
|
-
set property(value: TextTrackStyleOption);
|
|
664
|
-
/**
|
|
665
|
-
* The currently chosen value for the text track style option.
|
|
666
|
-
*/
|
|
667
|
-
get value(): string;
|
|
668
|
-
set value(value: string);
|
|
669
|
-
get player(): ChromelessPlayer | undefined;
|
|
670
|
-
set player(player: ChromelessPlayer | undefined);
|
|
671
|
-
private readonly _updateChecked;
|
|
672
|
-
private readonly _onChange;
|
|
673
|
-
private readonly _updateFromPlayer;
|
|
674
|
-
private _updateToPlayer;
|
|
675
|
-
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
632
|
+
interface TextTrackStyleMap {
|
|
633
|
+
fontFamily: string | undefined;
|
|
634
|
+
fontColor: string | undefined;
|
|
635
|
+
fontOpacity: number | undefined;
|
|
636
|
+
fontSize: string | undefined;
|
|
637
|
+
backgroundColor: string | undefined;
|
|
638
|
+
backgroundOpacity: number | undefined;
|
|
639
|
+
windowColor: string | undefined;
|
|
640
|
+
windowOpacity: number | undefined;
|
|
641
|
+
edgeStyle: EdgeStyle | undefined;
|
|
642
|
+
}
|
|
643
|
+
type TextTrackStyleOption = keyof TextTrackStyleMap;
|
|
644
|
+
declare const TextTrackStyleRadioGroup_base: {
|
|
645
|
+
new (): HTMLElement;
|
|
646
|
+
prototype: HTMLElement;
|
|
647
|
+
} & Constructor<StateReceiverElement>;
|
|
648
|
+
/**
|
|
649
|
+
* A radio group that shows a list of values for a text track style option, from which the user can choose a desired value.
|
|
650
|
+
*
|
|
651
|
+
* @attribute `property` - The property name of the text track style option. One of {@link TextTrackStyleOption}.
|
|
652
|
+
* @slot {@link RadioButton} - The possible options for the text track style option.
|
|
653
|
+
* For example: `<theoplayer-radio-button value="#ff0000">Red</theoplayer-radio-button>`
|
|
654
|
+
* @group Components
|
|
655
|
+
*/
|
|
656
|
+
declare class TextTrackStyleRadioGroup extends TextTrackStyleRadioGroup_base {
|
|
657
|
+
static get observedAttributes(): Attribute[];
|
|
658
|
+
private readonly _radioGroup;
|
|
659
|
+
private readonly _optionsSlot;
|
|
660
|
+
private _player;
|
|
661
|
+
private _value;
|
|
662
|
+
constructor();
|
|
663
|
+
connectedCallback(): void;
|
|
664
|
+
disconnectedCallback(): void;
|
|
665
|
+
protected _upgradeProperty(prop: keyof this): void;
|
|
666
|
+
/**
|
|
667
|
+
* The property name of the text track style option.
|
|
668
|
+
*/
|
|
669
|
+
get property(): TextTrackStyleOption;
|
|
670
|
+
set property(value: TextTrackStyleOption);
|
|
671
|
+
/**
|
|
672
|
+
* The currently chosen value for the text track style option.
|
|
673
|
+
*/
|
|
674
|
+
get value(): string;
|
|
675
|
+
set value(value: string);
|
|
676
|
+
get player(): ChromelessPlayer | undefined;
|
|
677
|
+
set player(player: ChromelessPlayer | undefined);
|
|
678
|
+
private readonly _updateChecked;
|
|
679
|
+
private readonly _onChange;
|
|
680
|
+
private readonly _updateFromPlayer;
|
|
681
|
+
private _updateToPlayer;
|
|
682
|
+
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
676
683
|
}
|
|
677
684
|
|
|
678
|
-
declare const TextTrackStyleDisplay_base: {
|
|
679
|
-
new (): HTMLElement;
|
|
680
|
-
prototype: HTMLElement;
|
|
681
|
-
} & Constructor<StateReceiverElement>;
|
|
682
|
-
/**
|
|
683
|
-
* Displays the value of a single text track style option in a human-readable format.
|
|
684
|
-
*
|
|
685
|
-
* @attribute `property` - The property name of the text track style option. One of {@link TextTrackStyleOption}.
|
|
686
|
-
* @group Components
|
|
687
|
-
*/
|
|
688
|
-
declare class TextTrackStyleDisplay extends TextTrackStyleDisplay_base {
|
|
689
|
-
static get observedAttributes(): Attribute[];
|
|
690
|
-
private readonly _spanEl;
|
|
691
|
-
private _player;
|
|
692
|
-
constructor();
|
|
693
|
-
connectedCallback(): void;
|
|
694
|
-
protected _upgradeProperty(prop: keyof this): void;
|
|
695
|
-
/**
|
|
696
|
-
* The property name of the text track style option.
|
|
697
|
-
*/
|
|
698
|
-
get property(): TextTrackStyleOption;
|
|
699
|
-
set property(value: TextTrackStyleOption);
|
|
700
|
-
get player(): ChromelessPlayer | undefined;
|
|
701
|
-
set player(player: ChromelessPlayer | undefined);
|
|
702
|
-
private readonly _updateFromPlayer;
|
|
703
|
-
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
685
|
+
declare const TextTrackStyleDisplay_base: {
|
|
686
|
+
new (): HTMLElement;
|
|
687
|
+
prototype: HTMLElement;
|
|
688
|
+
} & Constructor<StateReceiverElement>;
|
|
689
|
+
/**
|
|
690
|
+
* Displays the value of a single text track style option in a human-readable format.
|
|
691
|
+
*
|
|
692
|
+
* @attribute `property` - The property name of the text track style option. One of {@link TextTrackStyleOption}.
|
|
693
|
+
* @group Components
|
|
694
|
+
*/
|
|
695
|
+
declare class TextTrackStyleDisplay extends TextTrackStyleDisplay_base {
|
|
696
|
+
static get observedAttributes(): Attribute[];
|
|
697
|
+
private readonly _spanEl;
|
|
698
|
+
private _player;
|
|
699
|
+
constructor();
|
|
700
|
+
connectedCallback(): void;
|
|
701
|
+
protected _upgradeProperty(prop: keyof this): void;
|
|
702
|
+
/**
|
|
703
|
+
* The property name of the text track style option.
|
|
704
|
+
*/
|
|
705
|
+
get property(): TextTrackStyleOption;
|
|
706
|
+
set property(value: TextTrackStyleOption);
|
|
707
|
+
get player(): ChromelessPlayer | undefined;
|
|
708
|
+
set player(player: ChromelessPlayer | undefined);
|
|
709
|
+
private readonly _updateFromPlayer;
|
|
710
|
+
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
704
711
|
}
|
|
705
712
|
|
|
706
|
-
/**
|
|
707
|
-
* A menu to change the {@link theoplayer!TextTrackStyle | text track style} of the player.
|
|
708
|
-
*
|
|
709
|
-
* @group Components
|
|
710
|
-
*/
|
|
711
|
-
declare class TextTrackStyleMenu extends MenuGroup {
|
|
712
|
-
constructor();
|
|
713
|
+
/**
|
|
714
|
+
* A menu to change the {@link theoplayer!TextTrackStyle | text track style} of the player.
|
|
715
|
+
*
|
|
716
|
+
* @group Components
|
|
717
|
+
*/
|
|
718
|
+
declare class TextTrackStyleMenu extends MenuGroup {
|
|
719
|
+
constructor();
|
|
713
720
|
}
|
|
714
721
|
|
|
715
|
-
declare const LanguageMenu_base: typeof MenuGroup & Constructor<StateReceiverElement>;
|
|
716
|
-
/**
|
|
717
|
-
* A menu to change the spoken language and subtitles of the stream.
|
|
718
|
-
*
|
|
719
|
-
* @group Components
|
|
720
|
-
*/
|
|
721
|
-
declare class LanguageMenu extends LanguageMenu_base {
|
|
722
|
-
private _player;
|
|
723
|
-
static get observedAttributes(): Attribute[];
|
|
724
|
-
constructor();
|
|
725
|
-
get player(): ChromelessPlayer | undefined;
|
|
726
|
-
set player(player: ChromelessPlayer | undefined);
|
|
727
|
-
private readonly _updateAudioTracks;
|
|
728
|
-
private readonly _updateTextTracks;
|
|
729
|
-
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
722
|
+
declare const LanguageMenu_base: typeof MenuGroup & Constructor<StateReceiverElement>;
|
|
723
|
+
/**
|
|
724
|
+
* A menu to change the spoken language and subtitles of the stream.
|
|
725
|
+
*
|
|
726
|
+
* @group Components
|
|
727
|
+
*/
|
|
728
|
+
declare class LanguageMenu extends LanguageMenu_base {
|
|
729
|
+
private _player;
|
|
730
|
+
static get observedAttributes(): Attribute[];
|
|
731
|
+
constructor();
|
|
732
|
+
get player(): ChromelessPlayer | undefined;
|
|
733
|
+
set player(player: ChromelessPlayer | undefined);
|
|
734
|
+
private readonly _updateAudioTracks;
|
|
735
|
+
private readonly _updateTextTracks;
|
|
736
|
+
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
730
737
|
}
|
|
731
738
|
|
|
732
|
-
declare const LanguageMenuButton_base: typeof MenuButton & Constructor<StateReceiverElement>;
|
|
733
|
-
/**
|
|
734
|
-
* A menu button that opens a {@link LanguageMenu}.
|
|
735
|
-
*
|
|
736
|
-
* When there are no alternative audio languages or subtitles, this button automatically hides itself.
|
|
737
|
-
*
|
|
738
|
-
* @attribute `menu` - The ID of the language menu.
|
|
739
|
-
* @group Components
|
|
740
|
-
*/
|
|
741
|
-
declare class LanguageMenuButton extends LanguageMenuButton_base {
|
|
742
|
-
private _player;
|
|
743
|
-
constructor();
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
739
|
+
declare const LanguageMenuButton_base: typeof MenuButton & Constructor<StateReceiverElement>;
|
|
740
|
+
/**
|
|
741
|
+
* A menu button that opens a {@link LanguageMenu}.
|
|
742
|
+
*
|
|
743
|
+
* When there are no alternative audio languages or subtitles, this button automatically hides itself.
|
|
744
|
+
*
|
|
745
|
+
* @attribute `menu` - The ID of the language menu.
|
|
746
|
+
* @group Components
|
|
747
|
+
*/
|
|
748
|
+
declare class LanguageMenuButton extends LanguageMenuButton_base {
|
|
749
|
+
private _player;
|
|
750
|
+
constructor();
|
|
751
|
+
connectedCallback(): void;
|
|
752
|
+
get player(): ChromelessPlayer | undefined;
|
|
753
|
+
set player(player: ChromelessPlayer | undefined);
|
|
754
|
+
private readonly _updateTracks;
|
|
747
755
|
}
|
|
748
756
|
|
|
749
|
-
declare const PlaybackRateRadioGroup_base: {
|
|
750
|
-
new (): HTMLElement;
|
|
751
|
-
prototype: HTMLElement;
|
|
752
|
-
} & Constructor<StateReceiverElement>;
|
|
753
|
-
/**
|
|
754
|
-
* A radio group that shows a list of playback rates, from which the user can choose a desired playback rate.
|
|
755
|
-
*
|
|
756
|
-
* @slot {@link RadioButton} - The possible options for the playback rate.
|
|
757
|
-
* The value of each radio button must be a valid number.
|
|
758
|
-
* For example: `<theoplayer-radio-button value="2">2x</theoplayer-radio-button>`
|
|
759
|
-
* @group Components
|
|
760
|
-
*/
|
|
761
|
-
declare class PlaybackRateRadioGroup extends PlaybackRateRadioGroup_base {
|
|
762
|
-
private readonly _radioGroup;
|
|
763
|
-
private readonly _optionsSlot;
|
|
764
|
-
private _player;
|
|
765
|
-
private _value;
|
|
766
|
-
constructor();
|
|
767
|
-
protected _upgradeProperty(prop: keyof this): void;
|
|
768
|
-
connectedCallback(): void;
|
|
769
|
-
disconnectedCallback(): void;
|
|
770
|
-
/**
|
|
771
|
-
* The currently chosen playback rate.
|
|
772
|
-
*/
|
|
773
|
-
get value(): number;
|
|
774
|
-
set value(value: number);
|
|
775
|
-
get player(): ChromelessPlayer | undefined;
|
|
776
|
-
set player(player: ChromelessPlayer | undefined);
|
|
777
|
-
private readonly _updateChecked;
|
|
778
|
-
private readonly _onChange;
|
|
779
|
-
private readonly _updateFromPlayer;
|
|
757
|
+
declare const PlaybackRateRadioGroup_base: {
|
|
758
|
+
new (): HTMLElement;
|
|
759
|
+
prototype: HTMLElement;
|
|
760
|
+
} & Constructor<StateReceiverElement>;
|
|
761
|
+
/**
|
|
762
|
+
* A radio group that shows a list of playback rates, from which the user can choose a desired playback rate.
|
|
763
|
+
*
|
|
764
|
+
* @slot {@link RadioButton} - The possible options for the playback rate.
|
|
765
|
+
* The value of each radio button must be a valid number.
|
|
766
|
+
* For example: `<theoplayer-radio-button value="2">2x</theoplayer-radio-button>`
|
|
767
|
+
* @group Components
|
|
768
|
+
*/
|
|
769
|
+
declare class PlaybackRateRadioGroup extends PlaybackRateRadioGroup_base {
|
|
770
|
+
private readonly _radioGroup;
|
|
771
|
+
private readonly _optionsSlot;
|
|
772
|
+
private _player;
|
|
773
|
+
private _value;
|
|
774
|
+
constructor();
|
|
775
|
+
protected _upgradeProperty(prop: keyof this): void;
|
|
776
|
+
connectedCallback(): void;
|
|
777
|
+
disconnectedCallback(): void;
|
|
778
|
+
/**
|
|
779
|
+
* The currently chosen playback rate.
|
|
780
|
+
*/
|
|
781
|
+
get value(): number;
|
|
782
|
+
set value(value: number);
|
|
783
|
+
get player(): ChromelessPlayer | undefined;
|
|
784
|
+
set player(player: ChromelessPlayer | undefined);
|
|
785
|
+
private readonly _updateChecked;
|
|
786
|
+
private readonly _onChange;
|
|
787
|
+
private readonly _updateFromPlayer;
|
|
780
788
|
}
|
|
781
789
|
|
|
782
|
-
/**
|
|
783
|
-
* A menu button that opens a [playback rate menu]{@link PlaybackRateMenu}.
|
|
784
|
-
*
|
|
785
|
-
* @attribute menu - The ID of the playback rate menu.
|
|
786
|
-
* @group Components
|
|
787
|
-
*/
|
|
788
|
-
declare class PlaybackRateMenuButton extends MenuButton {
|
|
789
|
-
constructor();
|
|
790
|
+
/**
|
|
791
|
+
* A menu button that opens a [playback rate menu]{@link PlaybackRateMenu}.
|
|
792
|
+
*
|
|
793
|
+
* @attribute menu - The ID of the playback rate menu.
|
|
794
|
+
* @group Components
|
|
795
|
+
*/
|
|
796
|
+
declare class PlaybackRateMenuButton extends MenuButton {
|
|
797
|
+
constructor();
|
|
798
|
+
connectedCallback(): void;
|
|
790
799
|
}
|
|
791
800
|
|
|
792
|
-
/**
|
|
793
|
-
* A menu to change the playback rate of the player.
|
|
794
|
-
*
|
|
795
|
-
* @group Components
|
|
796
|
-
*/
|
|
797
|
-
declare class PlaybackRateMenu extends Menu {
|
|
798
|
-
constructor();
|
|
801
|
+
/**
|
|
802
|
+
* A menu to change the playback rate of the player.
|
|
803
|
+
*
|
|
804
|
+
* @group Components
|
|
805
|
+
*/
|
|
806
|
+
declare class PlaybackRateMenu extends Menu {
|
|
807
|
+
constructor();
|
|
799
808
|
}
|
|
800
809
|
|
|
801
|
-
declare const PlaybackRateDisplay_base: {
|
|
802
|
-
new (): HTMLElement;
|
|
803
|
-
prototype: HTMLElement;
|
|
804
|
-
} & Constructor<StateReceiverElement>;
|
|
805
|
-
/**
|
|
806
|
-
* @group Components
|
|
807
|
-
*/
|
|
808
|
-
declare class PlaybackRateDisplay extends PlaybackRateDisplay_base {
|
|
809
|
-
private readonly _spanEl;
|
|
810
|
-
private _playbackRate;
|
|
811
|
-
constructor();
|
|
812
|
-
connectedCallback(): void;
|
|
813
|
-
protected _upgradeProperty(prop: keyof this): void;
|
|
814
|
-
get playbackRate(): number;
|
|
815
|
-
set playbackRate(value: number);
|
|
810
|
+
declare const PlaybackRateDisplay_base: {
|
|
811
|
+
new (): HTMLElement;
|
|
812
|
+
prototype: HTMLElement;
|
|
813
|
+
} & Constructor<StateReceiverElement>;
|
|
814
|
+
/**
|
|
815
|
+
* @group Components
|
|
816
|
+
*/
|
|
817
|
+
declare class PlaybackRateDisplay extends PlaybackRateDisplay_base {
|
|
818
|
+
private readonly _spanEl;
|
|
819
|
+
private _playbackRate;
|
|
820
|
+
constructor();
|
|
821
|
+
connectedCallback(): void;
|
|
822
|
+
protected _upgradeProperty(prop: keyof this): void;
|
|
823
|
+
get playbackRate(): number;
|
|
824
|
+
set playbackRate(value: number);
|
|
816
825
|
}
|
|
817
826
|
|
|
818
|
-
declare const ActiveQualityDisplay_base: {
|
|
819
|
-
new (): HTMLElement;
|
|
820
|
-
prototype: HTMLElement;
|
|
821
|
-
} & Constructor<StateReceiverElement>;
|
|
822
|
-
/**
|
|
823
|
-
* @group Components
|
|
824
|
-
*/
|
|
825
|
-
declare class ActiveQualityDisplay extends ActiveQualityDisplay_base {
|
|
826
|
-
private readonly _spanEl;
|
|
827
|
-
private _activeVideoQuality;
|
|
828
|
-
private _targetVideoQualities;
|
|
829
|
-
constructor();
|
|
830
|
-
connectedCallback(): void;
|
|
831
|
-
protected _upgradeProperty(prop: keyof this): void;
|
|
832
|
-
get activeVideoQuality(): VideoQuality | undefined;
|
|
833
|
-
set activeVideoQuality(quality: VideoQuality | undefined);
|
|
834
|
-
get targetVideoQualities(): VideoQuality[] | undefined;
|
|
835
|
-
set targetVideoQualities(qualities: VideoQuality[] | undefined);
|
|
836
|
-
private update_;
|
|
827
|
+
declare const ActiveQualityDisplay_base: {
|
|
828
|
+
new (): HTMLElement;
|
|
829
|
+
prototype: HTMLElement;
|
|
830
|
+
} & Constructor<StateReceiverElement>;
|
|
831
|
+
/**
|
|
832
|
+
* @group Components
|
|
833
|
+
*/
|
|
834
|
+
declare class ActiveQualityDisplay extends ActiveQualityDisplay_base {
|
|
835
|
+
private readonly _spanEl;
|
|
836
|
+
private _activeVideoQuality;
|
|
837
|
+
private _targetVideoQualities;
|
|
838
|
+
constructor();
|
|
839
|
+
connectedCallback(): void;
|
|
840
|
+
protected _upgradeProperty(prop: keyof this): void;
|
|
841
|
+
get activeVideoQuality(): VideoQuality | undefined;
|
|
842
|
+
set activeVideoQuality(quality: VideoQuality | undefined);
|
|
843
|
+
get targetVideoQualities(): VideoQuality[] | undefined;
|
|
844
|
+
set targetVideoQualities(qualities: VideoQuality[] | undefined);
|
|
845
|
+
private update_;
|
|
837
846
|
}
|
|
838
847
|
|
|
839
|
-
/**
|
|
840
|
-
* A radio button that shows the label of a given video quality, and switches the video track's
|
|
841
|
-
* {@link theoplayer!MediaTrack.targetQuality | target quality} to that quality when clicked.
|
|
842
|
-
*
|
|
843
|
-
* @group Components
|
|
844
|
-
*/
|
|
845
|
-
declare class QualityRadioButton extends RadioButton {
|
|
846
|
-
private _slotEl;
|
|
847
|
-
private _track;
|
|
848
|
-
private _quality;
|
|
849
|
-
constructor();
|
|
850
|
-
/**
|
|
851
|
-
* The video track containing the quality being controlled.
|
|
852
|
-
*/
|
|
853
|
-
get track(): MediaTrack | undefined;
|
|
854
|
-
set track(track: MediaTrack | undefined);
|
|
855
|
-
/**
|
|
856
|
-
* The video quality being controlled.
|
|
857
|
-
*/
|
|
858
|
-
get quality(): VideoQuality | undefined;
|
|
859
|
-
set quality(quality: VideoQuality | undefined);
|
|
860
|
-
private readonly _updateFromTrack;
|
|
861
|
-
private readonly _updateFromQuality;
|
|
862
|
-
private _updateTargetQuality;
|
|
863
|
-
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
848
|
+
/**
|
|
849
|
+
* A radio button that shows the label of a given video quality, and switches the video track's
|
|
850
|
+
* {@link theoplayer!MediaTrack.targetQuality | target quality} to that quality when clicked.
|
|
851
|
+
*
|
|
852
|
+
* @group Components
|
|
853
|
+
*/
|
|
854
|
+
declare class QualityRadioButton extends RadioButton {
|
|
855
|
+
private _slotEl;
|
|
856
|
+
private _track;
|
|
857
|
+
private _quality;
|
|
858
|
+
constructor();
|
|
859
|
+
/**
|
|
860
|
+
* The video track containing the quality being controlled.
|
|
861
|
+
*/
|
|
862
|
+
get track(): MediaTrack | undefined;
|
|
863
|
+
set track(track: MediaTrack | undefined);
|
|
864
|
+
/**
|
|
865
|
+
* The video quality being controlled.
|
|
866
|
+
*/
|
|
867
|
+
get quality(): VideoQuality | undefined;
|
|
868
|
+
set quality(quality: VideoQuality | undefined);
|
|
869
|
+
private readonly _updateFromTrack;
|
|
870
|
+
private readonly _updateFromQuality;
|
|
871
|
+
private _updateTargetQuality;
|
|
872
|
+
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
864
873
|
}
|
|
865
874
|
|
|
866
|
-
declare const QualityRadioGroup_base: {
|
|
867
|
-
new (): HTMLElement;
|
|
868
|
-
prototype: HTMLElement;
|
|
869
|
-
} & Constructor<StateReceiverElement>;
|
|
870
|
-
/**
|
|
871
|
-
* A radio group that shows a list of available video qualities, from which the user can choose a desired target quality.
|
|
872
|
-
*
|
|
873
|
-
* @group Components
|
|
874
|
-
*/
|
|
875
|
-
declare class QualityRadioGroup extends QualityRadioGroup_base {
|
|
876
|
-
private readonly _radioGroup;
|
|
877
|
-
private _player;
|
|
878
|
-
private _track;
|
|
879
|
-
constructor();
|
|
880
|
-
protected _upgradeProperty(prop: keyof this): void;
|
|
881
|
-
connectedCallback(): void;
|
|
882
|
-
disconnectedCallback(): void;
|
|
883
|
-
get player(): ChromelessPlayer | undefined;
|
|
884
|
-
set player(player: ChromelessPlayer | undefined);
|
|
885
|
-
private readonly _onChange;
|
|
886
|
-
private readonly _updateTrack;
|
|
887
|
-
private readonly _update;
|
|
875
|
+
declare const QualityRadioGroup_base: {
|
|
876
|
+
new (): HTMLElement;
|
|
877
|
+
prototype: HTMLElement;
|
|
878
|
+
} & Constructor<StateReceiverElement>;
|
|
879
|
+
/**
|
|
880
|
+
* A radio group that shows a list of available video qualities, from which the user can choose a desired target quality.
|
|
881
|
+
*
|
|
882
|
+
* @group Components
|
|
883
|
+
*/
|
|
884
|
+
declare class QualityRadioGroup extends QualityRadioGroup_base {
|
|
885
|
+
private readonly _radioGroup;
|
|
886
|
+
private _player;
|
|
887
|
+
private _track;
|
|
888
|
+
constructor();
|
|
889
|
+
protected _upgradeProperty(prop: keyof this): void;
|
|
890
|
+
connectedCallback(): void;
|
|
891
|
+
disconnectedCallback(): void;
|
|
892
|
+
get player(): ChromelessPlayer | undefined;
|
|
893
|
+
set player(player: ChromelessPlayer | undefined);
|
|
894
|
+
private readonly _onChange;
|
|
895
|
+
private readonly _updateTrack;
|
|
896
|
+
private readonly _update;
|
|
888
897
|
}
|
|
889
898
|
|
|
890
|
-
declare const TextTrackStyleResetButton_base: typeof Button & Constructor<StateReceiverElement>;
|
|
891
|
-
/**
|
|
892
|
-
* A button that resets the text track style.
|
|
893
|
-
*
|
|
894
|
-
* @group Components
|
|
895
|
-
*/
|
|
896
|
-
declare class TextTrackStyleResetButton extends TextTrackStyleResetButton_base {
|
|
897
|
-
static get observedAttributes(): Attribute[];
|
|
898
|
-
private _player;
|
|
899
|
-
constructor();
|
|
900
|
-
get player(): ChromelessPlayer | undefined;
|
|
901
|
-
set player(player: ChromelessPlayer | undefined);
|
|
902
|
-
protected handleClick(): void;
|
|
899
|
+
declare const TextTrackStyleResetButton_base: typeof Button & Constructor<StateReceiverElement>;
|
|
900
|
+
/**
|
|
901
|
+
* A button that resets the text track style.
|
|
902
|
+
*
|
|
903
|
+
* @group Components
|
|
904
|
+
*/
|
|
905
|
+
declare class TextTrackStyleResetButton extends TextTrackStyleResetButton_base {
|
|
906
|
+
static get observedAttributes(): Attribute[];
|
|
907
|
+
private _player;
|
|
908
|
+
constructor();
|
|
909
|
+
get player(): ChromelessPlayer | undefined;
|
|
910
|
+
set player(player: ChromelessPlayer | undefined);
|
|
911
|
+
protected handleClick(): void;
|
|
903
912
|
}
|
|
904
913
|
|
|
905
|
-
/**
|
|
906
|
-
* A menu to change the settings of the player, such as the active video quality and the playback speed.
|
|
907
|
-
*
|
|
908
|
-
* @group Components
|
|
909
|
-
*/
|
|
910
|
-
declare class SettingsMenu extends MenuGroup {
|
|
911
|
-
constructor();
|
|
914
|
+
/**
|
|
915
|
+
* A menu to change the settings of the player, such as the active video quality and the playback speed.
|
|
916
|
+
*
|
|
917
|
+
* @group Components
|
|
918
|
+
*/
|
|
919
|
+
declare class SettingsMenu extends MenuGroup {
|
|
920
|
+
constructor();
|
|
912
921
|
}
|
|
913
922
|
|
|
914
|
-
/**
|
|
915
|
-
* A menu button that opens a {@link SettingsMenu}.
|
|
916
|
-
*
|
|
917
|
-
* @attribute `menu` - The ID of the settings menu.
|
|
918
|
-
* @group Components
|
|
919
|
-
*/
|
|
920
|
-
declare class SettingsMenuButton extends MenuButton {
|
|
921
|
-
constructor();
|
|
923
|
+
/**
|
|
924
|
+
* A menu button that opens a {@link SettingsMenu}.
|
|
925
|
+
*
|
|
926
|
+
* @attribute `menu` - The ID of the settings menu.
|
|
927
|
+
* @group Components
|
|
928
|
+
*/
|
|
929
|
+
declare class SettingsMenuButton extends MenuButton {
|
|
930
|
+
constructor();
|
|
931
|
+
connectedCallback(): void;
|
|
922
932
|
}
|
|
923
933
|
|
|
924
|
-
declare const FullscreenButton_base: typeof Button & Constructor<StateReceiverElement>;
|
|
925
|
-
/**
|
|
926
|
-
* A button that toggles fullscreen.
|
|
927
|
-
*
|
|
928
|
-
* @group Components
|
|
929
|
-
*/
|
|
930
|
-
declare class FullscreenButton extends FullscreenButton_base {
|
|
931
|
-
static get observedAttributes(): Attribute[];
|
|
932
|
-
constructor();
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
934
|
+
declare const FullscreenButton_base: typeof Button & Constructor<StateReceiverElement>;
|
|
935
|
+
/**
|
|
936
|
+
* A button that toggles fullscreen.
|
|
937
|
+
*
|
|
938
|
+
* @group Components
|
|
939
|
+
*/
|
|
940
|
+
declare class FullscreenButton extends FullscreenButton_base {
|
|
941
|
+
static get observedAttributes(): Attribute[];
|
|
942
|
+
constructor();
|
|
943
|
+
connectedCallback(): void;
|
|
944
|
+
get fullscreen(): boolean;
|
|
945
|
+
set fullscreen(fullscreen: boolean);
|
|
946
|
+
protected handleClick(): void;
|
|
947
|
+
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
948
|
+
private _updateAriaLabel;
|
|
937
949
|
}
|
|
938
950
|
|
|
939
|
-
interface RangeOptions {
|
|
940
|
-
template: HTMLTemplateElement;
|
|
941
|
-
}
|
|
942
|
-
declare function rangeTemplate(range: string, extraCss?: string): string;
|
|
943
|
-
/**
|
|
944
|
-
* A slider to select a value from a range.
|
|
945
|
-
*
|
|
946
|
-
* @attribute `disabled` - Whether the range is disabled.
|
|
947
|
-
* When disabled, the slider value cannot be changed, and the slider thumb is hidden.
|
|
948
|
-
*
|
|
949
|
-
* @group Components
|
|
950
|
-
*/
|
|
951
|
-
declare abstract class Range extends HTMLElement {
|
|
952
|
-
static get observedAttributes(): Attribute[];
|
|
953
|
-
protected readonly _rangeEl: HTMLInputElement;
|
|
954
|
-
protected readonly _pointerEl: HTMLElement;
|
|
955
|
-
private _lastRangeWidth;
|
|
956
|
-
constructor(options: RangeOptions);
|
|
957
|
-
protected _upgradeProperty(prop: keyof this): void;
|
|
958
|
-
connectedCallback(): void;
|
|
959
|
-
disconnectedCallback(): void;
|
|
960
|
-
/**
|
|
961
|
-
* Whether the range is disabled.
|
|
962
|
-
*
|
|
963
|
-
* When disabled, the slider value cannot be changed, and the slider thumb is hidden.
|
|
964
|
-
*/
|
|
965
|
-
get disabled(): boolean;
|
|
966
|
-
set disabled(disabled: boolean);
|
|
967
|
-
/**
|
|
968
|
-
* The current value.
|
|
969
|
-
*/
|
|
970
|
-
get value(): number;
|
|
971
|
-
set value(value: number);
|
|
972
|
-
/**
|
|
973
|
-
* The minimum allowed value.
|
|
974
|
-
*/
|
|
975
|
-
get min(): number;
|
|
976
|
-
set min(min: number);
|
|
977
|
-
/**
|
|
978
|
-
* The maximum allowed value.
|
|
979
|
-
*/
|
|
980
|
-
get max(): number;
|
|
981
|
-
set max(max: number);
|
|
982
|
-
/**
|
|
983
|
-
* The granularity at which the value can change.
|
|
984
|
-
*
|
|
985
|
-
* If set to `"any"`, the value can change with arbitrary precision.
|
|
986
|
-
*/
|
|
987
|
-
get step(): number | 'any';
|
|
988
|
-
set step(step: number | 'any');
|
|
989
|
-
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
990
|
-
private readonly _onInput;
|
|
991
|
-
protected handleInput(): void;
|
|
992
|
-
protected update(): void;
|
|
993
|
-
/**
|
|
994
|
-
* The value for the `aria-label` attribute of the `<input type="range">` element.
|
|
995
|
-
*/
|
|
996
|
-
protected abstract getAriaLabel(): string;
|
|
997
|
-
/**
|
|
998
|
-
* The value for the `aria-valuetext` attribute of the `<input type="range">` element.
|
|
999
|
-
*/
|
|
1000
|
-
protected abstract getAriaValueText(): string;
|
|
1001
|
-
/**
|
|
1002
|
-
* Native ranges have a single color for the whole track, which is different
|
|
1003
|
-
* from most video players that have a colored "bar" to the left of the handle
|
|
1004
|
-
* showing playback progress or volume level. Here we're building that bar
|
|
1005
|
-
* by using a background gradient that moves with the range value.
|
|
1006
|
-
*/
|
|
1007
|
-
private updateBar_;
|
|
1008
|
-
/**
|
|
1009
|
-
* Build the color gradient for the range bar.
|
|
1010
|
-
* Creating an array so progress-bar can insert the buffered bar.
|
|
1011
|
-
*/
|
|
1012
|
-
protected getBarColors(): Array<[string, number]>;
|
|
1013
|
-
private readonly _updatePointerBar;
|
|
1014
|
-
protected updatePointer_(mousePercent: number, rangeRect: DOMRectReadOnly): void;
|
|
951
|
+
interface RangeOptions {
|
|
952
|
+
template: HTMLTemplateElement;
|
|
953
|
+
}
|
|
954
|
+
declare function rangeTemplate(range: string, extraCss?: string): string;
|
|
955
|
+
/**
|
|
956
|
+
* A slider to select a value from a range.
|
|
957
|
+
*
|
|
958
|
+
* @attribute `disabled` - Whether the range is disabled.
|
|
959
|
+
* When disabled, the slider value cannot be changed, and the slider thumb is hidden.
|
|
960
|
+
*
|
|
961
|
+
* @group Components
|
|
962
|
+
*/
|
|
963
|
+
declare abstract class Range extends HTMLElement {
|
|
964
|
+
static get observedAttributes(): Attribute[];
|
|
965
|
+
protected readonly _rangeEl: HTMLInputElement;
|
|
966
|
+
protected readonly _pointerEl: HTMLElement;
|
|
967
|
+
private _lastRangeWidth;
|
|
968
|
+
constructor(options: RangeOptions);
|
|
969
|
+
protected _upgradeProperty(prop: keyof this): void;
|
|
970
|
+
connectedCallback(): void;
|
|
971
|
+
disconnectedCallback(): void;
|
|
972
|
+
/**
|
|
973
|
+
* Whether the range is disabled.
|
|
974
|
+
*
|
|
975
|
+
* When disabled, the slider value cannot be changed, and the slider thumb is hidden.
|
|
976
|
+
*/
|
|
977
|
+
get disabled(): boolean;
|
|
978
|
+
set disabled(disabled: boolean);
|
|
979
|
+
/**
|
|
980
|
+
* The current value.
|
|
981
|
+
*/
|
|
982
|
+
get value(): number;
|
|
983
|
+
set value(value: number);
|
|
984
|
+
/**
|
|
985
|
+
* The minimum allowed value.
|
|
986
|
+
*/
|
|
987
|
+
get min(): number;
|
|
988
|
+
set min(min: number);
|
|
989
|
+
/**
|
|
990
|
+
* The maximum allowed value.
|
|
991
|
+
*/
|
|
992
|
+
get max(): number;
|
|
993
|
+
set max(max: number);
|
|
994
|
+
/**
|
|
995
|
+
* The granularity at which the value can change.
|
|
996
|
+
*
|
|
997
|
+
* If set to `"any"`, the value can change with arbitrary precision.
|
|
998
|
+
*/
|
|
999
|
+
get step(): number | 'any';
|
|
1000
|
+
set step(step: number | 'any');
|
|
1001
|
+
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
1002
|
+
private readonly _onInput;
|
|
1003
|
+
protected handleInput(): void;
|
|
1004
|
+
protected update(): void;
|
|
1005
|
+
/**
|
|
1006
|
+
* The value for the `aria-label` attribute of the `<input type="range">` element.
|
|
1007
|
+
*/
|
|
1008
|
+
protected abstract getAriaLabel(): string;
|
|
1009
|
+
/**
|
|
1010
|
+
* The value for the `aria-valuetext` attribute of the `<input type="range">` element.
|
|
1011
|
+
*/
|
|
1012
|
+
protected abstract getAriaValueText(): string;
|
|
1013
|
+
/**
|
|
1014
|
+
* Native ranges have a single color for the whole track, which is different
|
|
1015
|
+
* from most video players that have a colored "bar" to the left of the handle
|
|
1016
|
+
* showing playback progress or volume level. Here we're building that bar
|
|
1017
|
+
* by using a background gradient that moves with the range value.
|
|
1018
|
+
*/
|
|
1019
|
+
private updateBar_;
|
|
1020
|
+
/**
|
|
1021
|
+
* Build the color gradient for the range bar.
|
|
1022
|
+
* Creating an array so progress-bar can insert the buffered bar.
|
|
1023
|
+
*/
|
|
1024
|
+
protected getBarColors(): Array<[string, number]>;
|
|
1025
|
+
private readonly _updatePointerBar;
|
|
1026
|
+
protected updatePointer_(mousePercent: number, rangeRect: DOMRectReadOnly): void;
|
|
1015
1027
|
}
|
|
1016
1028
|
|
|
1017
|
-
declare const PreviewThumbnail_base: {
|
|
1018
|
-
new (): HTMLElement;
|
|
1019
|
-
prototype: HTMLElement;
|
|
1020
|
-
} & Constructor<StateReceiverElement>;
|
|
1021
|
-
/**
|
|
1022
|
-
* A display that shows the thumbnail image at the current preview time of a {@link TimeRange | `<theoplayer-time-range>`}.
|
|
1023
|
-
*
|
|
1024
|
-
* The first `metadata` text track whose label equals `"thumbnails"` is used as source for the thumbnails.
|
|
1025
|
-
* This track is expected to contain cues whose content is the URL for the thumbnail image.
|
|
1026
|
-
* If the thumbnail image URL ends with a [spatial fragment](https://www.w3.org/TR/media-frags/#naming-space)
|
|
1027
|
-
* (e.g. `#xywh=180,80,60,40`), then the thumbnail is clipped to the rectangle defined by that fragment.
|
|
1028
|
-
*
|
|
1029
|
-
* If the stream does not contain thumbnails, then this display shows nothing.
|
|
1030
|
-
* @group Components
|
|
1031
|
-
*/
|
|
1032
|
-
declare class PreviewThumbnail extends PreviewThumbnail_base {
|
|
1033
|
-
private readonly _canvasEl;
|
|
1034
|
-
private readonly _canvasContext;
|
|
1035
|
-
private readonly _thumbnailImageSource;
|
|
1036
|
-
private _player;
|
|
1037
|
-
private _previewTime;
|
|
1038
|
-
private _thumbnailTextTrack;
|
|
1039
|
-
private _lastLoadedThumbnailUrl;
|
|
1040
|
-
constructor();
|
|
1041
|
-
protected _upgradeProperty(prop: keyof this): void;
|
|
1042
|
-
connectedCallback(): void;
|
|
1043
|
-
get player(): ChromelessPlayer | undefined;
|
|
1044
|
-
set player(player: ChromelessPlayer | undefined);
|
|
1045
|
-
get previewTime(): number;
|
|
1046
|
-
set previewTime(previewTime: number);
|
|
1047
|
-
private readonly _updateThumbnailTextTrack;
|
|
1048
|
-
private updateThumbnail_;
|
|
1049
|
-
private loadThumbnailImage_;
|
|
1050
|
-
private showThumbnail_;
|
|
1051
|
-
private hideThumbnail_;
|
|
1029
|
+
declare const PreviewThumbnail_base: {
|
|
1030
|
+
new (): HTMLElement;
|
|
1031
|
+
prototype: HTMLElement;
|
|
1032
|
+
} & Constructor<StateReceiverElement>;
|
|
1033
|
+
/**
|
|
1034
|
+
* A display that shows the thumbnail image at the current preview time of a {@link TimeRange | `<theoplayer-time-range>`}.
|
|
1035
|
+
*
|
|
1036
|
+
* The first `metadata` text track whose label equals `"thumbnails"` is used as source for the thumbnails.
|
|
1037
|
+
* This track is expected to contain cues whose content is the URL for the thumbnail image.
|
|
1038
|
+
* If the thumbnail image URL ends with a [spatial fragment](https://www.w3.org/TR/media-frags/#naming-space)
|
|
1039
|
+
* (e.g. `#xywh=180,80,60,40`), then the thumbnail is clipped to the rectangle defined by that fragment.
|
|
1040
|
+
*
|
|
1041
|
+
* If the stream does not contain thumbnails, then this display shows nothing.
|
|
1042
|
+
* @group Components
|
|
1043
|
+
*/
|
|
1044
|
+
declare class PreviewThumbnail extends PreviewThumbnail_base {
|
|
1045
|
+
private readonly _canvasEl;
|
|
1046
|
+
private readonly _canvasContext;
|
|
1047
|
+
private readonly _thumbnailImageSource;
|
|
1048
|
+
private _player;
|
|
1049
|
+
private _previewTime;
|
|
1050
|
+
private _thumbnailTextTrack;
|
|
1051
|
+
private _lastLoadedThumbnailUrl;
|
|
1052
|
+
constructor();
|
|
1053
|
+
protected _upgradeProperty(prop: keyof this): void;
|
|
1054
|
+
connectedCallback(): void;
|
|
1055
|
+
get player(): ChromelessPlayer | undefined;
|
|
1056
|
+
set player(player: ChromelessPlayer | undefined);
|
|
1057
|
+
get previewTime(): number;
|
|
1058
|
+
set previewTime(previewTime: number);
|
|
1059
|
+
private readonly _updateThumbnailTextTrack;
|
|
1060
|
+
private updateThumbnail_;
|
|
1061
|
+
private loadThumbnailImage_;
|
|
1062
|
+
private showThumbnail_;
|
|
1063
|
+
private hideThumbnail_;
|
|
1052
1064
|
}
|
|
1053
1065
|
|
|
1054
|
-
declare const PreviewTimeDisplay_base: {
|
|
1055
|
-
new (): HTMLElement;
|
|
1056
|
-
prototype: HTMLElement;
|
|
1057
|
-
} & Constructor<StateReceiverElement>;
|
|
1058
|
-
/**
|
|
1059
|
-
* A display that shows the current preview time of a {@link TimeRange | `<theoplayer-time-range>`}.
|
|
1060
|
-
*
|
|
1061
|
-
* @attribute `remaining` - If set, shows the remaining time of the stream.
|
|
1062
|
-
* @attribute `remaining-when-live` - If set, and the stream is a livestream, shows the remaining time
|
|
1063
|
-
* (until the live point) of the stream.
|
|
1064
|
-
* @group Components
|
|
1065
|
-
*/
|
|
1066
|
-
declare class PreviewTimeDisplay extends PreviewTimeDisplay_base {
|
|
1067
|
-
private readonly _spanEl;
|
|
1068
|
-
private _previewTime;
|
|
1069
|
-
private _player;
|
|
1070
|
-
static get observedAttributes(): Attribute[];
|
|
1071
|
-
constructor();
|
|
1072
|
-
protected _upgradeProperty(prop: keyof this): void;
|
|
1073
|
-
connectedCallback(): void;
|
|
1074
|
-
get previewTime(): number;
|
|
1075
|
-
set previewTime(previewTime: number);
|
|
1076
|
-
get streamType(): StreamType;
|
|
1077
|
-
set streamType(streamType: StreamType);
|
|
1078
|
-
get player(): ChromelessPlayer | undefined;
|
|
1079
|
-
set player(player: ChromelessPlayer | undefined);
|
|
1080
|
-
private readonly _update;
|
|
1081
|
-
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
1066
|
+
declare const PreviewTimeDisplay_base: {
|
|
1067
|
+
new (): HTMLElement;
|
|
1068
|
+
prototype: HTMLElement;
|
|
1069
|
+
} & Constructor<StateReceiverElement>;
|
|
1070
|
+
/**
|
|
1071
|
+
* A display that shows the current preview time of a {@link TimeRange | `<theoplayer-time-range>`}.
|
|
1072
|
+
*
|
|
1073
|
+
* @attribute `remaining` - If set, shows the remaining time of the stream.
|
|
1074
|
+
* @attribute `remaining-when-live` - If set, and the stream is a livestream, shows the remaining time
|
|
1075
|
+
* (until the live point) of the stream.
|
|
1076
|
+
* @group Components
|
|
1077
|
+
*/
|
|
1078
|
+
declare class PreviewTimeDisplay extends PreviewTimeDisplay_base {
|
|
1079
|
+
private readonly _spanEl;
|
|
1080
|
+
private _previewTime;
|
|
1081
|
+
private _player;
|
|
1082
|
+
static get observedAttributes(): Attribute[];
|
|
1083
|
+
constructor();
|
|
1084
|
+
protected _upgradeProperty(prop: keyof this): void;
|
|
1085
|
+
connectedCallback(): void;
|
|
1086
|
+
get previewTime(): number;
|
|
1087
|
+
set previewTime(previewTime: number);
|
|
1088
|
+
get streamType(): StreamType;
|
|
1089
|
+
set streamType(streamType: StreamType);
|
|
1090
|
+
get player(): ChromelessPlayer | undefined;
|
|
1091
|
+
set player(player: ChromelessPlayer | undefined);
|
|
1092
|
+
private readonly _update;
|
|
1093
|
+
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
1082
1094
|
}
|
|
1083
1095
|
|
|
1084
|
-
declare const TimeRange_base: typeof Range & Constructor<StateReceiverElement>;
|
|
1085
|
-
/**
|
|
1086
|
-
* A seek bar, showing the current time of the player, and which seeks the player when clicked or dragged.
|
|
1087
|
-
*
|
|
1088
|
-
* @slot `preview` - A slot holding a preview of the seek time, shown while hovering the seek bar.
|
|
1089
|
-
* By default, this shows the {@link PreviewTimeDisplay | preview time} and
|
|
1090
|
-
* the {@link PreviewThumbnail | preview thumbnail}.
|
|
1091
|
-
* @group Components
|
|
1092
|
-
*/
|
|
1093
|
-
declare class TimeRange extends TimeRange_base {
|
|
1094
|
-
static get observedAttributes(): Attribute[];
|
|
1095
|
-
private readonly _previewRailEl;
|
|
1096
|
-
private readonly _previewBoxEl;
|
|
1097
|
-
private _player;
|
|
1098
|
-
private _pausedWhileScrubbing;
|
|
1099
|
-
private _autoAdvanceId;
|
|
1100
|
-
private _lastUpdateTime;
|
|
1101
|
-
private _lastCurrentTime;
|
|
1102
|
-
private _lastPlaybackRate;
|
|
1103
|
-
constructor();
|
|
1104
|
-
connectedCallback(): void;
|
|
1105
|
-
disconnectedCallback(): void;
|
|
1106
|
-
get player(): ChromelessPlayer | undefined;
|
|
1107
|
-
set player(player: ChromelessPlayer | undefined);
|
|
1108
|
-
get streamType(): StreamType;
|
|
1109
|
-
set streamType(streamType: StreamType);
|
|
1110
|
-
private readonly _updateFromPlayer;
|
|
1111
|
-
private readonly _updateDisabled;
|
|
1112
|
-
protected getAriaLabel(): string;
|
|
1113
|
-
protected getAriaValueText(): string;
|
|
1114
|
-
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
1115
|
-
protected handleInput(): void;
|
|
1116
|
-
private readonly _pauseOnScrubStart;
|
|
1117
|
-
private readonly _playOnScrubEnd;
|
|
1118
|
-
private shouldAutoAdvance_;
|
|
1119
|
-
private readonly _toggleAutoAdvance;
|
|
1120
|
-
private readonly _autoAdvanceWhilePlaying;
|
|
1121
|
-
protected updatePointer_(mousePercent: number, rangeRect: DOMRectReadOnly): void;
|
|
1096
|
+
declare const TimeRange_base: typeof Range & Constructor<StateReceiverElement>;
|
|
1097
|
+
/**
|
|
1098
|
+
* A seek bar, showing the current time of the player, and which seeks the player when clicked or dragged.
|
|
1099
|
+
*
|
|
1100
|
+
* @slot `preview` - A slot holding a preview of the seek time, shown while hovering the seek bar.
|
|
1101
|
+
* By default, this shows the {@link PreviewTimeDisplay | preview time} and
|
|
1102
|
+
* the {@link PreviewThumbnail | preview thumbnail}.
|
|
1103
|
+
* @group Components
|
|
1104
|
+
*/
|
|
1105
|
+
declare class TimeRange extends TimeRange_base {
|
|
1106
|
+
static get observedAttributes(): Attribute[];
|
|
1107
|
+
private readonly _previewRailEl;
|
|
1108
|
+
private readonly _previewBoxEl;
|
|
1109
|
+
private _player;
|
|
1110
|
+
private _pausedWhileScrubbing;
|
|
1111
|
+
private _autoAdvanceId;
|
|
1112
|
+
private _lastUpdateTime;
|
|
1113
|
+
private _lastCurrentTime;
|
|
1114
|
+
private _lastPlaybackRate;
|
|
1115
|
+
constructor();
|
|
1116
|
+
connectedCallback(): void;
|
|
1117
|
+
disconnectedCallback(): void;
|
|
1118
|
+
get player(): ChromelessPlayer | undefined;
|
|
1119
|
+
set player(player: ChromelessPlayer | undefined);
|
|
1120
|
+
get streamType(): StreamType;
|
|
1121
|
+
set streamType(streamType: StreamType);
|
|
1122
|
+
private readonly _updateFromPlayer;
|
|
1123
|
+
private readonly _updateDisabled;
|
|
1124
|
+
protected getAriaLabel(): string;
|
|
1125
|
+
protected getAriaValueText(): string;
|
|
1126
|
+
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
1127
|
+
protected handleInput(): void;
|
|
1128
|
+
private readonly _pauseOnScrubStart;
|
|
1129
|
+
private readonly _playOnScrubEnd;
|
|
1130
|
+
private shouldAutoAdvance_;
|
|
1131
|
+
private readonly _toggleAutoAdvance;
|
|
1132
|
+
private readonly _autoAdvanceWhilePlaying;
|
|
1133
|
+
protected updatePointer_(mousePercent: number, rangeRect: DOMRectReadOnly): void;
|
|
1122
1134
|
}
|
|
1123
1135
|
|
|
1124
|
-
declare const VolumeRange_base: typeof Range & Constructor<StateReceiverElement>;
|
|
1125
|
-
/**
|
|
1126
|
-
* A volume slider, showing the current audio volume of the player, and which changes the volume when clicked or dragged.
|
|
1127
|
-
*
|
|
1128
|
-
* @group Components
|
|
1129
|
-
*/
|
|
1130
|
-
declare class VolumeRange extends VolumeRange_base {
|
|
1131
|
-
private _player;
|
|
1132
|
-
constructor();
|
|
1133
|
-
get player(): ChromelessPlayer | undefined;
|
|
1134
|
-
set player(player: ChromelessPlayer | undefined);
|
|
1135
|
-
private readonly _updateFromPlayer;
|
|
1136
|
-
protected getAriaLabel(): string;
|
|
1137
|
-
protected getAriaValueText(): string;
|
|
1138
|
-
protected handleInput(): void;
|
|
1136
|
+
declare const VolumeRange_base: typeof Range & Constructor<StateReceiverElement>;
|
|
1137
|
+
/**
|
|
1138
|
+
* A volume slider, showing the current audio volume of the player, and which changes the volume when clicked or dragged.
|
|
1139
|
+
*
|
|
1140
|
+
* @group Components
|
|
1141
|
+
*/
|
|
1142
|
+
declare class VolumeRange extends VolumeRange_base {
|
|
1143
|
+
private _player;
|
|
1144
|
+
constructor();
|
|
1145
|
+
get player(): ChromelessPlayer | undefined;
|
|
1146
|
+
set player(player: ChromelessPlayer | undefined);
|
|
1147
|
+
private readonly _updateFromPlayer;
|
|
1148
|
+
protected getAriaLabel(): string;
|
|
1149
|
+
protected getAriaValueText(): string;
|
|
1150
|
+
protected handleInput(): void;
|
|
1139
1151
|
}
|
|
1140
1152
|
|
|
1141
|
-
declare const ErrorDisplay_base: {
|
|
1142
|
-
new (): HTMLElement;
|
|
1143
|
-
prototype: HTMLElement;
|
|
1144
|
-
} & Constructor<StateReceiverElement>;
|
|
1145
|
-
/**
|
|
1146
|
-
* A screen that shows the details of a fatal player error.
|
|
1147
|
-
*
|
|
1148
|
-
* @group Components
|
|
1149
|
-
*/
|
|
1150
|
-
declare class ErrorDisplay extends ErrorDisplay_base {
|
|
1151
|
-
private readonly _messageSlot;
|
|
1152
|
-
private _error;
|
|
1153
|
-
static get observedAttributes(): Attribute[];
|
|
1154
|
-
constructor();
|
|
1155
|
-
protected _upgradeProperty(prop: keyof this): void;
|
|
1156
|
-
connectedCallback(): void;
|
|
1157
|
-
/**
|
|
1158
|
-
* The error.
|
|
1159
|
-
*/
|
|
1160
|
-
get error(): THEOplayerError | undefined;
|
|
1161
|
-
set error(error: THEOplayerError | undefined);
|
|
1162
|
-
get fullscreen(): boolean;
|
|
1163
|
-
set fullscreen(fullscreen: boolean);
|
|
1164
|
-
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
1153
|
+
declare const ErrorDisplay_base: {
|
|
1154
|
+
new (): HTMLElement;
|
|
1155
|
+
prototype: HTMLElement;
|
|
1156
|
+
} & Constructor<StateReceiverElement>;
|
|
1157
|
+
/**
|
|
1158
|
+
* A screen that shows the details of a fatal player error.
|
|
1159
|
+
*
|
|
1160
|
+
* @group Components
|
|
1161
|
+
*/
|
|
1162
|
+
declare class ErrorDisplay extends ErrorDisplay_base {
|
|
1163
|
+
private readonly _messageSlot;
|
|
1164
|
+
private _error;
|
|
1165
|
+
static get observedAttributes(): Attribute[];
|
|
1166
|
+
constructor();
|
|
1167
|
+
protected _upgradeProperty(prop: keyof this): void;
|
|
1168
|
+
connectedCallback(): void;
|
|
1169
|
+
/**
|
|
1170
|
+
* The error.
|
|
1171
|
+
*/
|
|
1172
|
+
get error(): THEOplayerError | undefined;
|
|
1173
|
+
set error(error: THEOplayerError | undefined);
|
|
1174
|
+
get fullscreen(): boolean;
|
|
1175
|
+
set fullscreen(fullscreen: boolean);
|
|
1176
|
+
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
1165
1177
|
}
|
|
1166
1178
|
|
|
1167
|
-
/**
|
|
1168
|
-
* A generic button to start and stop casting.
|
|
1169
|
-
*
|
|
1170
|
-
* For a concrete implementation, see {@link ChromecastButton}.
|
|
1171
|
-
* @group Components
|
|
1172
|
-
*/
|
|
1173
|
-
declare class CastButton extends Button {
|
|
1174
|
-
private _castApi;
|
|
1175
|
-
static get observedAttributes(): Attribute[];
|
|
1176
|
-
constructor(options?: ButtonOptions);
|
|
1177
|
-
connectedCallback(): void;
|
|
1178
|
-
/**
|
|
1179
|
-
* The cast API for which this cast button.
|
|
1180
|
-
*/
|
|
1181
|
-
get castApi(): VendorCast | undefined;
|
|
1182
|
-
set castApi(castApi: VendorCast | undefined);
|
|
1183
|
-
/**
|
|
1184
|
-
* The current cast state.
|
|
1185
|
-
*/
|
|
1186
|
-
get castState(): CastState;
|
|
1187
|
-
protected handleClick(): void;
|
|
1188
|
-
private readonly _updateCastState;
|
|
1189
|
-
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
1179
|
+
/**
|
|
1180
|
+
* A generic button to start and stop casting.
|
|
1181
|
+
*
|
|
1182
|
+
* For a concrete implementation, see {@link ChromecastButton}.
|
|
1183
|
+
* @group Components
|
|
1184
|
+
*/
|
|
1185
|
+
declare class CastButton extends Button {
|
|
1186
|
+
private _castApi;
|
|
1187
|
+
static get observedAttributes(): Attribute[];
|
|
1188
|
+
constructor(options?: ButtonOptions);
|
|
1189
|
+
connectedCallback(): void;
|
|
1190
|
+
/**
|
|
1191
|
+
* The cast API for which this cast button.
|
|
1192
|
+
*/
|
|
1193
|
+
get castApi(): VendorCast | undefined;
|
|
1194
|
+
set castApi(castApi: VendorCast | undefined);
|
|
1195
|
+
/**
|
|
1196
|
+
* The current cast state.
|
|
1197
|
+
*/
|
|
1198
|
+
get castState(): CastState;
|
|
1199
|
+
protected handleClick(): void;
|
|
1200
|
+
private readonly _updateCastState;
|
|
1201
|
+
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
1190
1202
|
}
|
|
1191
1203
|
|
|
1192
|
-
declare const ChromecastButton_base: typeof CastButton & Constructor<StateReceiverElement>;
|
|
1193
|
-
/**
|
|
1194
|
-
* A button to start and stop casting using Chromecast.
|
|
1195
|
-
*
|
|
1196
|
-
* @group Components
|
|
1197
|
-
*/
|
|
1198
|
-
declare class ChromecastButton extends ChromecastButton_base {
|
|
1199
|
-
private _player;
|
|
1200
|
-
constructor();
|
|
1201
|
-
|
|
1202
|
-
|
|
1204
|
+
declare const ChromecastButton_base: typeof CastButton & Constructor<StateReceiverElement>;
|
|
1205
|
+
/**
|
|
1206
|
+
* A button to start and stop casting using Chromecast.
|
|
1207
|
+
*
|
|
1208
|
+
* @group Components
|
|
1209
|
+
*/
|
|
1210
|
+
declare class ChromecastButton extends ChromecastButton_base {
|
|
1211
|
+
private _player;
|
|
1212
|
+
constructor();
|
|
1213
|
+
connectedCallback(): void;
|
|
1214
|
+
get player(): ChromelessPlayer | undefined;
|
|
1215
|
+
set player(player: ChromelessPlayer | undefined);
|
|
1216
|
+
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
1217
|
+
private _updateAriaLabel;
|
|
1203
1218
|
}
|
|
1204
1219
|
|
|
1205
|
-
declare const ChromecastDisplay_base: {
|
|
1206
|
-
new (): HTMLElement;
|
|
1207
|
-
prototype: HTMLElement;
|
|
1208
|
-
} & Constructor<StateReceiverElement>;
|
|
1209
|
-
/**
|
|
1210
|
-
* A control that displays the casting status while using Chromecast.
|
|
1211
|
-
*
|
|
1212
|
-
* @group Components
|
|
1213
|
-
*/
|
|
1214
|
-
declare class ChromecastDisplay extends ChromecastDisplay_base {
|
|
1215
|
-
private readonly _receiverNameEl;
|
|
1216
|
-
private _player;
|
|
1217
|
-
constructor();
|
|
1218
|
-
protected _upgradeProperty(prop: keyof this): void;
|
|
1219
|
-
connectedCallback(): void;
|
|
1220
|
-
get player(): ChromelessPlayer | undefined;
|
|
1221
|
-
set player(player: ChromelessPlayer | undefined);
|
|
1222
|
-
private readonly _updateFromPlayer;
|
|
1220
|
+
declare const ChromecastDisplay_base: {
|
|
1221
|
+
new (): HTMLElement;
|
|
1222
|
+
prototype: HTMLElement;
|
|
1223
|
+
} & Constructor<StateReceiverElement>;
|
|
1224
|
+
/**
|
|
1225
|
+
* A control that displays the casting status while using Chromecast.
|
|
1226
|
+
*
|
|
1227
|
+
* @group Components
|
|
1228
|
+
*/
|
|
1229
|
+
declare class ChromecastDisplay extends ChromecastDisplay_base {
|
|
1230
|
+
private readonly _receiverNameEl;
|
|
1231
|
+
private _player;
|
|
1232
|
+
constructor();
|
|
1233
|
+
protected _upgradeProperty(prop: keyof this): void;
|
|
1234
|
+
connectedCallback(): void;
|
|
1235
|
+
get player(): ChromelessPlayer | undefined;
|
|
1236
|
+
set player(player: ChromelessPlayer | undefined);
|
|
1237
|
+
private readonly _updateFromPlayer;
|
|
1223
1238
|
}
|
|
1224
1239
|
|
|
1225
|
-
declare const AirPlayButton_base: typeof CastButton & Constructor<StateReceiverElement>;
|
|
1226
|
-
/**
|
|
1227
|
-
* A button to start and stop casting using AirPlay.
|
|
1228
|
-
*
|
|
1229
|
-
* @group Components
|
|
1230
|
-
*/
|
|
1231
|
-
declare class AirPlayButton extends AirPlayButton_base {
|
|
1232
|
-
private _player;
|
|
1233
|
-
constructor();
|
|
1234
|
-
|
|
1235
|
-
|
|
1240
|
+
declare const AirPlayButton_base: typeof CastButton & Constructor<StateReceiverElement>;
|
|
1241
|
+
/**
|
|
1242
|
+
* A button to start and stop casting using AirPlay.
|
|
1243
|
+
*
|
|
1244
|
+
* @group Components
|
|
1245
|
+
*/
|
|
1246
|
+
declare class AirPlayButton extends AirPlayButton_base {
|
|
1247
|
+
private _player;
|
|
1248
|
+
constructor();
|
|
1249
|
+
connectedCallback(): void;
|
|
1250
|
+
get player(): ChromelessPlayer | undefined;
|
|
1251
|
+
set player(player: ChromelessPlayer | undefined);
|
|
1252
|
+
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
1253
|
+
private _updateAriaLabel;
|
|
1236
1254
|
}
|
|
1237
1255
|
|
|
1238
|
-
declare const LoadingIndicator_base: {
|
|
1239
|
-
new (): HTMLElement;
|
|
1240
|
-
prototype: HTMLElement;
|
|
1241
|
-
} & Constructor<StateReceiverElement>;
|
|
1242
|
-
/**
|
|
1243
|
-
* An indicator that shows whether the player is currently waiting for more data to resume playback.
|
|
1244
|
-
*
|
|
1245
|
-
* @attribute `loading` (readonly) - Whether the player is waiting for more data. If set, the indicator is shown.
|
|
1246
|
-
* @group Components
|
|
1247
|
-
*/
|
|
1248
|
-
declare class LoadingIndicator extends LoadingIndicator_base {
|
|
1249
|
-
private _player;
|
|
1250
|
-
static get observedAttributes(): Attribute[];
|
|
1251
|
-
constructor();
|
|
1252
|
-
protected _upgradeProperty(prop: keyof this): void;
|
|
1253
|
-
connectedCallback(): void;
|
|
1254
|
-
get player(): ChromelessPlayer | undefined;
|
|
1255
|
-
set player(player: ChromelessPlayer | undefined);
|
|
1256
|
-
private readonly _updateFromPlayer;
|
|
1257
|
-
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
1256
|
+
declare const LoadingIndicator_base: {
|
|
1257
|
+
new (): HTMLElement;
|
|
1258
|
+
prototype: HTMLElement;
|
|
1259
|
+
} & Constructor<StateReceiverElement>;
|
|
1260
|
+
/**
|
|
1261
|
+
* An indicator that shows whether the player is currently waiting for more data to resume playback.
|
|
1262
|
+
*
|
|
1263
|
+
* @attribute `loading` (readonly) - Whether the player is waiting for more data. If set, the indicator is shown.
|
|
1264
|
+
* @group Components
|
|
1265
|
+
*/
|
|
1266
|
+
declare class LoadingIndicator extends LoadingIndicator_base {
|
|
1267
|
+
private _player;
|
|
1268
|
+
static get observedAttributes(): Attribute[];
|
|
1269
|
+
constructor();
|
|
1270
|
+
protected _upgradeProperty(prop: keyof this): void;
|
|
1271
|
+
connectedCallback(): void;
|
|
1272
|
+
get player(): ChromelessPlayer | undefined;
|
|
1273
|
+
set player(player: ChromelessPlayer | undefined);
|
|
1274
|
+
private readonly _updateFromPlayer;
|
|
1275
|
+
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
1258
1276
|
}
|
|
1259
1277
|
|
|
1260
|
-
declare const GestureReceiver_base: {
|
|
1261
|
-
new (): HTMLElement;
|
|
1262
|
-
prototype: HTMLElement;
|
|
1263
|
-
} & Constructor<StateReceiverElement>;
|
|
1264
|
-
/**
|
|
1265
|
-
* An overlay that receives and handles gestures on the player.
|
|
1266
|
-
*
|
|
1267
|
-
* On desktop devices, this plays or pauses the player whenever it is clicked.
|
|
1268
|
-
* On mobile devices, this currently does nothing.
|
|
1269
|
-
*
|
|
1270
|
-
* @group Components
|
|
1271
|
-
*/
|
|
1272
|
-
declare class GestureReceiver extends GestureReceiver_base {
|
|
1273
|
-
private _player;
|
|
1274
|
-
private _pointerType;
|
|
1275
|
-
constructor();
|
|
1276
|
-
protected _upgradeProperty(prop: keyof this): void;
|
|
1277
|
-
connectedCallback(): void;
|
|
1278
|
-
get player(): ChromelessPlayer | undefined;
|
|
1279
|
-
set player(player: ChromelessPlayer | undefined);
|
|
1280
|
-
private readonly _onPointerDown;
|
|
1281
|
-
private readonly _onClick;
|
|
1282
|
-
handleTap(_event: MouseEvent): void;
|
|
1283
|
-
handleMouseClick(_event: MouseEvent): void;
|
|
1278
|
+
declare const GestureReceiver_base: {
|
|
1279
|
+
new (): HTMLElement;
|
|
1280
|
+
prototype: HTMLElement;
|
|
1281
|
+
} & Constructor<StateReceiverElement>;
|
|
1282
|
+
/**
|
|
1283
|
+
* An overlay that receives and handles gestures on the player.
|
|
1284
|
+
*
|
|
1285
|
+
* On desktop devices, this plays or pauses the player whenever it is clicked.
|
|
1286
|
+
* On mobile devices, this currently does nothing.
|
|
1287
|
+
*
|
|
1288
|
+
* @group Components
|
|
1289
|
+
*/
|
|
1290
|
+
declare class GestureReceiver extends GestureReceiver_base {
|
|
1291
|
+
private _player;
|
|
1292
|
+
private _pointerType;
|
|
1293
|
+
constructor();
|
|
1294
|
+
protected _upgradeProperty(prop: keyof this): void;
|
|
1295
|
+
connectedCallback(): void;
|
|
1296
|
+
get player(): ChromelessPlayer | undefined;
|
|
1297
|
+
set player(player: ChromelessPlayer | undefined);
|
|
1298
|
+
private readonly _onPointerDown;
|
|
1299
|
+
private readonly _onClick;
|
|
1300
|
+
handleTap(_event: MouseEvent): void;
|
|
1301
|
+
handleMouseClick(_event: MouseEvent): void;
|
|
1284
1302
|
}
|
|
1285
1303
|
|
|
1286
|
-
declare const LiveButton_base: typeof Button & Constructor<StateReceiverElement>;
|
|
1287
|
-
/**
|
|
1288
|
-
* A button that shows whether the player is currently playing at the live point, and seeks to the live point when clicked.
|
|
1289
|
-
*
|
|
1290
|
-
* @attribute `live-threshold` - The maximum distance (in seconds) from the live point that the player's current time
|
|
1291
|
-
* can be for it to still be considered "at the live point". If unset, defaults to 10 seconds.
|
|
1292
|
-
* @attribute `live` (readonly) - Whether the player is considered to be playing at the live point.
|
|
1293
|
-
* @group Components
|
|
1294
|
-
*/
|
|
1295
|
-
declare class LiveButton extends LiveButton_base {
|
|
1296
|
-
static get observedAttributes(): Attribute[];
|
|
1297
|
-
private _player;
|
|
1298
|
-
constructor();
|
|
1299
|
-
|
|
1300
|
-
|
|
1301
|
-
|
|
1302
|
-
|
|
1303
|
-
|
|
1304
|
-
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
private readonly
|
|
1311
|
-
|
|
1312
|
-
|
|
1304
|
+
declare const LiveButton_base: typeof Button & Constructor<StateReceiverElement>;
|
|
1305
|
+
/**
|
|
1306
|
+
* A button that shows whether the player is currently playing at the live point, and seeks to the live point when clicked.
|
|
1307
|
+
*
|
|
1308
|
+
* @attribute `live-threshold` - The maximum distance (in seconds) from the live point that the player's current time
|
|
1309
|
+
* can be for it to still be considered "at the live point". If unset, defaults to 10 seconds.
|
|
1310
|
+
* @attribute `live` (readonly) - Whether the player is considered to be playing at the live point.
|
|
1311
|
+
* @group Components
|
|
1312
|
+
*/
|
|
1313
|
+
declare class LiveButton extends LiveButton_base {
|
|
1314
|
+
static get observedAttributes(): Attribute[];
|
|
1315
|
+
private _player;
|
|
1316
|
+
constructor();
|
|
1317
|
+
connectedCallback(): void;
|
|
1318
|
+
get paused(): boolean;
|
|
1319
|
+
set paused(paused: boolean);
|
|
1320
|
+
get streamType(): StreamType;
|
|
1321
|
+
set streamType(streamType: StreamType);
|
|
1322
|
+
get liveThreshold(): number;
|
|
1323
|
+
set liveThreshold(value: number);
|
|
1324
|
+
get live(): boolean;
|
|
1325
|
+
set live(live: boolean);
|
|
1326
|
+
get player(): ChromelessPlayer | undefined;
|
|
1327
|
+
set player(player: ChromelessPlayer | undefined);
|
|
1328
|
+
private readonly _updatePaused;
|
|
1329
|
+
private readonly _updateLive;
|
|
1330
|
+
protected handleClick(): void;
|
|
1331
|
+
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
1313
1332
|
}
|
|
1314
1333
|
|
|
1315
|
-
declare const AdDisplay_base: {
|
|
1316
|
-
new (): HTMLElement;
|
|
1317
|
-
prototype: HTMLElement;
|
|
1318
|
-
} & Constructor<StateReceiverElement>;
|
|
1319
|
-
/**
|
|
1320
|
-
* @group Components
|
|
1321
|
-
*/
|
|
1322
|
-
declare class AdDisplay extends AdDisplay_base {
|
|
1323
|
-
private readonly _spanEl;
|
|
1324
|
-
private _player;
|
|
1325
|
-
constructor();
|
|
1326
|
-
protected _upgradeProperty(prop: keyof this): void;
|
|
1327
|
-
connectedCallback(): void;
|
|
1328
|
-
get player(): ChromelessPlayer | undefined;
|
|
1329
|
-
set player(player: ChromelessPlayer | undefined);
|
|
1330
|
-
private readonly _updateFromPlayer;
|
|
1334
|
+
declare const AdDisplay_base: {
|
|
1335
|
+
new (): HTMLElement;
|
|
1336
|
+
prototype: HTMLElement;
|
|
1337
|
+
} & Constructor<StateReceiverElement>;
|
|
1338
|
+
/**
|
|
1339
|
+
* @group Components
|
|
1340
|
+
*/
|
|
1341
|
+
declare class AdDisplay extends AdDisplay_base {
|
|
1342
|
+
private readonly _spanEl;
|
|
1343
|
+
private _player;
|
|
1344
|
+
constructor();
|
|
1345
|
+
protected _upgradeProperty(prop: keyof this): void;
|
|
1346
|
+
connectedCallback(): void;
|
|
1347
|
+
get player(): ChromelessPlayer | undefined;
|
|
1348
|
+
set player(player: ChromelessPlayer | undefined);
|
|
1349
|
+
private readonly _updateFromPlayer;
|
|
1331
1350
|
}
|
|
1332
1351
|
|
|
1333
|
-
declare const AdCountdown_base: {
|
|
1334
|
-
new (): HTMLElement;
|
|
1335
|
-
prototype: HTMLElement;
|
|
1336
|
-
} & Constructor<StateReceiverElement>;
|
|
1337
|
-
/**
|
|
1338
|
-
* @group Components
|
|
1339
|
-
*/
|
|
1340
|
-
declare class AdCountdown extends AdCountdown_base {
|
|
1341
|
-
private readonly _spanEl;
|
|
1342
|
-
private _player;
|
|
1343
|
-
constructor();
|
|
1344
|
-
protected _upgradeProperty(prop: keyof this): void;
|
|
1345
|
-
connectedCallback(): void;
|
|
1346
|
-
get player(): ChromelessPlayer | undefined;
|
|
1347
|
-
set player(player: ChromelessPlayer | undefined);
|
|
1348
|
-
private readonly _onAdChange;
|
|
1349
|
-
private readonly _update;
|
|
1352
|
+
declare const AdCountdown_base: {
|
|
1353
|
+
new (): HTMLElement;
|
|
1354
|
+
prototype: HTMLElement;
|
|
1355
|
+
} & Constructor<StateReceiverElement>;
|
|
1356
|
+
/**
|
|
1357
|
+
* @group Components
|
|
1358
|
+
*/
|
|
1359
|
+
declare class AdCountdown extends AdCountdown_base {
|
|
1360
|
+
private readonly _spanEl;
|
|
1361
|
+
private _player;
|
|
1362
|
+
constructor();
|
|
1363
|
+
protected _upgradeProperty(prop: keyof this): void;
|
|
1364
|
+
connectedCallback(): void;
|
|
1365
|
+
get player(): ChromelessPlayer | undefined;
|
|
1366
|
+
set player(player: ChromelessPlayer | undefined);
|
|
1367
|
+
private readonly _onAdChange;
|
|
1368
|
+
private readonly _update;
|
|
1350
1369
|
}
|
|
1351
1370
|
|
|
1352
|
-
declare const AdClickThroughButton_base: typeof LinkButton & Constructor<StateReceiverElement>;
|
|
1353
|
-
/**
|
|
1354
|
-
* @group Components
|
|
1355
|
-
*/
|
|
1356
|
-
declare class AdClickThroughButton extends AdClickThroughButton_base {
|
|
1357
|
-
private _player;
|
|
1358
|
-
static get observedAttributes(): Attribute[];
|
|
1359
|
-
constructor();
|
|
1360
|
-
connectedCallback(): void;
|
|
1361
|
-
get clickThrough(): string | null;
|
|
1362
|
-
set clickThrough(clickThrough: string | null);
|
|
1363
|
-
get player(): ChromelessPlayer | undefined;
|
|
1364
|
-
set player(player: ChromelessPlayer | undefined);
|
|
1365
|
-
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
1366
|
-
private readonly _updateFromPlayer;
|
|
1367
|
-
protected handleClick(): void;
|
|
1371
|
+
declare const AdClickThroughButton_base: typeof LinkButton & Constructor<StateReceiverElement>;
|
|
1372
|
+
/**
|
|
1373
|
+
* @group Components
|
|
1374
|
+
*/
|
|
1375
|
+
declare class AdClickThroughButton extends AdClickThroughButton_base {
|
|
1376
|
+
private _player;
|
|
1377
|
+
static get observedAttributes(): Attribute[];
|
|
1378
|
+
constructor();
|
|
1379
|
+
connectedCallback(): void;
|
|
1380
|
+
get clickThrough(): string | null;
|
|
1381
|
+
set clickThrough(clickThrough: string | null);
|
|
1382
|
+
get player(): ChromelessPlayer | undefined;
|
|
1383
|
+
set player(player: ChromelessPlayer | undefined);
|
|
1384
|
+
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
1385
|
+
private readonly _updateFromPlayer;
|
|
1386
|
+
protected handleClick(): void;
|
|
1368
1387
|
}
|
|
1369
1388
|
|
|
1370
|
-
declare const AdSkipButton_base: typeof Button & Constructor<StateReceiverElement>;
|
|
1371
|
-
/**
|
|
1372
|
-
* @group Components
|
|
1373
|
-
*/
|
|
1374
|
-
declare class AdSkipButton extends AdSkipButton_base {
|
|
1375
|
-
private readonly _countdownEl;
|
|
1376
|
-
private readonly _skipEl;
|
|
1377
|
-
private _player;
|
|
1378
|
-
static get observedAttributes(): Attribute[];
|
|
1379
|
-
constructor();
|
|
1380
|
-
connectedCallback(): void;
|
|
1381
|
-
get player(): ChromelessPlayer | undefined;
|
|
1382
|
-
set player(player: ChromelessPlayer | undefined);
|
|
1383
|
-
protected handleClick(): void;
|
|
1384
|
-
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
1385
|
-
private readonly _onAdChange;
|
|
1386
|
-
private readonly _update;
|
|
1389
|
+
declare const AdSkipButton_base: typeof Button & Constructor<StateReceiverElement>;
|
|
1390
|
+
/**
|
|
1391
|
+
* @group Components
|
|
1392
|
+
*/
|
|
1393
|
+
declare class AdSkipButton extends AdSkipButton_base {
|
|
1394
|
+
private readonly _countdownEl;
|
|
1395
|
+
private readonly _skipEl;
|
|
1396
|
+
private _player;
|
|
1397
|
+
static get observedAttributes(): Attribute[];
|
|
1398
|
+
constructor();
|
|
1399
|
+
connectedCallback(): void;
|
|
1400
|
+
get player(): ChromelessPlayer | undefined;
|
|
1401
|
+
set player(player: ChromelessPlayer | undefined);
|
|
1402
|
+
protected handleClick(): void;
|
|
1403
|
+
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
1404
|
+
private readonly _onAdChange;
|
|
1405
|
+
private readonly _update;
|
|
1387
1406
|
}
|
|
1388
1407
|
|
|
1389
|
-
declare enum ExtensionSlot {
|
|
1390
|
-
TopControlBar = "top-control-bar",
|
|
1391
|
-
BottomControlBar = "bottom-control-bar",
|
|
1392
|
-
Menu = "menu"
|
|
1408
|
+
declare enum ExtensionSlot {
|
|
1409
|
+
TopControlBar = "top-control-bar",
|
|
1410
|
+
BottomControlBar = "bottom-control-bar",
|
|
1411
|
+
Menu = "menu"
|
|
1393
1412
|
}
|
|
1394
1413
|
|
|
1395
|
-
/**
|
|
1396
|
-
* A default UI for THEOplayer.
|
|
1397
|
-
*
|
|
1398
|
-
* This default UI provides a great player experience out-of-the-box, that works well on all types of devices
|
|
1399
|
-
* and for all types of streams. It provides all the common playback controls for playing, seeking,
|
|
1400
|
-
* changing languages and qualities. It also supports advertisements and casting.
|
|
1401
|
-
*
|
|
1402
|
-
* ## Usage
|
|
1403
|
-
*
|
|
1404
|
-
* 1. Create a `<theoplayer-default-ui>` element.
|
|
1405
|
-
* 1. Set its `configuration` attribute or property to a valid player configuration.
|
|
1406
|
-
* 1. Set its `source` attribute or property to a valid stream source.
|
|
1407
|
-
* 1. Optionally, customize the player using CSS custom properties and/or extra controls.
|
|
1408
|
-
*
|
|
1409
|
-
* ## Customization
|
|
1410
|
-
*
|
|
1411
|
-
* The styling can be controlled using CSS custom properties (see {@link UIContainer | `<theoplayer-ui>`}).
|
|
1412
|
-
* Additional controls can be added to the `top-control-bar` and `bottom-control-bar` slots.
|
|
1413
|
-
* For more extensive customizations, we recommend defining your own custom UI using
|
|
1414
|
-
* a {@link UIContainer | `<theoplayer-ui>`}.
|
|
1415
|
-
*
|
|
1416
|
-
* @attribute `configuration` - The THEOplayer {@link theoplayer!PlayerConfiguration | PlayerConfiguration}, as a JSON string.
|
|
1417
|
-
* @attribute `source` - The THEOplayer {@link theoplayer!SourceDescription | SourceDescription}, as a JSON string.
|
|
1418
|
-
* @attribute `fluid` - If set, the player automatically adjusts its height to fit the video's aspect ratio.
|
|
1419
|
-
* @attribute `muted` - If set, the player starts out as muted. Reflects `ui.player.muted`.
|
|
1420
|
-
* @attribute `autoplay` - If set, the player attempts to automatically start playing (if allowed).
|
|
1421
|
-
* @attribute `mobile` - Whether to use a mobile-optimized UI layout instead.
|
|
1422
|
-
* Can be used in CSS to show/hide certain desktop-specific or mobile-specific UI controls.
|
|
1423
|
-
* @attribute `stream-type` - The stream type, either "vod", "live" or "dvr".
|
|
1424
|
-
* Can be used to show/hide certain UI controls specific for livestreams, such as
|
|
1425
|
-
* a {@link LiveButton | `<theoplayer-live-button>`}.
|
|
1426
|
-
* If you know in advance that the source will be a livestream, you can set this attribute to avoid a screen flicker
|
|
1427
|
-
* when the player switches between its VOD-specific and live-only controls.
|
|
1428
|
-
* @attribute `user-idle-timeout` - The timeout (in seconds) between when the user stops interacting with the UI,
|
|
1429
|
-
* and when the user is considered to be "idle".
|
|
1430
|
-
* @attribute `dvr-threshold` - The minimum length (in seconds) of a livestream's sliding window for the stream to be DVR
|
|
1431
|
-
* and its stream type to be set to "dvr".
|
|
1432
|
-
*
|
|
1433
|
-
* @slot `top-control-bar` - A slot for extra UI controls in the top control bar.
|
|
1434
|
-
* @slot `bottom-control-bar` - A slot for extra UI controls in the bottom control bar.
|
|
1435
|
-
* @slot `menu` - A slot for extra menus (see {@link Menu | `<theoplayer-menu>`}).
|
|
1436
|
-
* @group Components
|
|
1437
|
-
*/
|
|
1438
|
-
declare class DefaultUI extends HTMLElement {
|
|
1439
|
-
static get observedAttributes(): Attribute[];
|
|
1440
|
-
private readonly _ui;
|
|
1441
|
-
private readonly _titleSlot;
|
|
1442
|
-
private readonly _timeRange;
|
|
1443
|
-
private _appliedExtensions;
|
|
1444
|
-
/**
|
|
1445
|
-
* Creates a new THEOplayer default UI.
|
|
1446
|
-
*
|
|
1447
|
-
* @param configuration - The player configuration.
|
|
1448
|
-
* Will be passed to the {@link theoplayer!ChromelessPlayer | ChromelessPlayer} constructor to create
|
|
1449
|
-
* the underlying THEOplayer instance.
|
|
1450
|
-
* Can also be set later on through the {@link configuration} property.
|
|
1451
|
-
*/
|
|
1452
|
-
constructor(configuration?: PlayerConfiguration);
|
|
1453
|
-
private _upgradeProperty;
|
|
1454
|
-
/**
|
|
1455
|
-
* The underlying THEOplayer player instance.
|
|
1456
|
-
*
|
|
1457
|
-
* This is constructed automatically as soon as a valid {@link configuration} is set.
|
|
1458
|
-
*/
|
|
1459
|
-
get player(): ChromelessPlayer | undefined;
|
|
1460
|
-
/**
|
|
1461
|
-
* The player configuration.
|
|
1462
|
-
*
|
|
1463
|
-
* Used to create the underlying THEOplayer instance.
|
|
1464
|
-
*/
|
|
1465
|
-
get configuration(): PlayerConfiguration;
|
|
1466
|
-
set configuration(configuration: PlayerConfiguration);
|
|
1467
|
-
/**
|
|
1468
|
-
* The player's current source.
|
|
1469
|
-
*/
|
|
1470
|
-
get source(): SourceDescription | undefined;
|
|
1471
|
-
set source(value: SourceDescription | undefined);
|
|
1472
|
-
/**
|
|
1473
|
-
* Whether the player's audio is muted.
|
|
1474
|
-
*/
|
|
1475
|
-
get muted(): boolean;
|
|
1476
|
-
set muted(value: boolean);
|
|
1477
|
-
/**
|
|
1478
|
-
* Whether the player should attempt to automatically start playback.
|
|
1479
|
-
*/
|
|
1480
|
-
get autoplay(): boolean;
|
|
1481
|
-
set autoplay(value: boolean);
|
|
1482
|
-
/**
|
|
1483
|
-
* The stream type, either "vod", "live" or "dvr".
|
|
1484
|
-
*
|
|
1485
|
-
* If you know in advance that the source will be a livestream, you can set this property to avoid a screen flicker
|
|
1486
|
-
* when the player switches between its VOD-specific and live-only controls.
|
|
1487
|
-
*/
|
|
1488
|
-
get streamType(): StreamType;
|
|
1489
|
-
set streamType(value: StreamType);
|
|
1490
|
-
/**
|
|
1491
|
-
* The timeout (in seconds) between when the user stops interacting with the UI,
|
|
1492
|
-
* and when the user is considered to be "idle".
|
|
1493
|
-
*/
|
|
1494
|
-
get userIdleTimeout(): number;
|
|
1495
|
-
set userIdleTimeout(value: number);
|
|
1496
|
-
/**
|
|
1497
|
-
* The minimum length (in seconds) of a livestream's sliding window for the stream to be DVR
|
|
1498
|
-
* and its stream type to be set to "dvr".
|
|
1499
|
-
*/
|
|
1500
|
-
get dvrThreshold(): number;
|
|
1501
|
-
set dvrThreshold(value: number);
|
|
1502
|
-
connectedCallback(): void;
|
|
1503
|
-
disconnectedCallback(): void;
|
|
1504
|
-
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
1505
|
-
private readonly _updateStreamType;
|
|
1506
|
-
private readonly _onTitleSlotChange;
|
|
1414
|
+
/**
|
|
1415
|
+
* A default UI for THEOplayer.
|
|
1416
|
+
*
|
|
1417
|
+
* This default UI provides a great player experience out-of-the-box, that works well on all types of devices
|
|
1418
|
+
* and for all types of streams. It provides all the common playback controls for playing, seeking,
|
|
1419
|
+
* changing languages and qualities. It also supports advertisements and casting.
|
|
1420
|
+
*
|
|
1421
|
+
* ## Usage
|
|
1422
|
+
*
|
|
1423
|
+
* 1. Create a `<theoplayer-default-ui>` element.
|
|
1424
|
+
* 1. Set its `configuration` attribute or property to a valid player configuration.
|
|
1425
|
+
* 1. Set its `source` attribute or property to a valid stream source.
|
|
1426
|
+
* 1. Optionally, customize the player using CSS custom properties and/or extra controls.
|
|
1427
|
+
*
|
|
1428
|
+
* ## Customization
|
|
1429
|
+
*
|
|
1430
|
+
* The styling can be controlled using CSS custom properties (see {@link UIContainer | `<theoplayer-ui>`}).
|
|
1431
|
+
* Additional controls can be added to the `top-control-bar` and `bottom-control-bar` slots.
|
|
1432
|
+
* For more extensive customizations, we recommend defining your own custom UI using
|
|
1433
|
+
* a {@link UIContainer | `<theoplayer-ui>`}.
|
|
1434
|
+
*
|
|
1435
|
+
* @attribute `configuration` - The THEOplayer {@link theoplayer!PlayerConfiguration | PlayerConfiguration}, as a JSON string.
|
|
1436
|
+
* @attribute `source` - The THEOplayer {@link theoplayer!SourceDescription | SourceDescription}, as a JSON string.
|
|
1437
|
+
* @attribute `fluid` - If set, the player automatically adjusts its height to fit the video's aspect ratio.
|
|
1438
|
+
* @attribute `muted` - If set, the player starts out as muted. Reflects `ui.player.muted`.
|
|
1439
|
+
* @attribute `autoplay` - If set, the player attempts to automatically start playing (if allowed).
|
|
1440
|
+
* @attribute `mobile` - Whether to use a mobile-optimized UI layout instead.
|
|
1441
|
+
* Can be used in CSS to show/hide certain desktop-specific or mobile-specific UI controls.
|
|
1442
|
+
* @attribute `stream-type` - The stream type, either "vod", "live" or "dvr".
|
|
1443
|
+
* Can be used to show/hide certain UI controls specific for livestreams, such as
|
|
1444
|
+
* a {@link LiveButton | `<theoplayer-live-button>`}.
|
|
1445
|
+
* If you know in advance that the source will be a livestream, you can set this attribute to avoid a screen flicker
|
|
1446
|
+
* when the player switches between its VOD-specific and live-only controls.
|
|
1447
|
+
* @attribute `user-idle-timeout` - The timeout (in seconds) between when the user stops interacting with the UI,
|
|
1448
|
+
* and when the user is considered to be "idle".
|
|
1449
|
+
* @attribute `dvr-threshold` - The minimum length (in seconds) of a livestream's sliding window for the stream to be DVR
|
|
1450
|
+
* and its stream type to be set to "dvr".
|
|
1451
|
+
*
|
|
1452
|
+
* @slot `top-control-bar` - A slot for extra UI controls in the top control bar.
|
|
1453
|
+
* @slot `bottom-control-bar` - A slot for extra UI controls in the bottom control bar.
|
|
1454
|
+
* @slot `menu` - A slot for extra menus (see {@link Menu | `<theoplayer-menu>`}).
|
|
1455
|
+
* @group Components
|
|
1456
|
+
*/
|
|
1457
|
+
declare class DefaultUI extends HTMLElement {
|
|
1458
|
+
static get observedAttributes(): Attribute[];
|
|
1459
|
+
private readonly _ui;
|
|
1460
|
+
private readonly _titleSlot;
|
|
1461
|
+
private readonly _timeRange;
|
|
1462
|
+
private _appliedExtensions;
|
|
1463
|
+
/**
|
|
1464
|
+
* Creates a new THEOplayer default UI.
|
|
1465
|
+
*
|
|
1466
|
+
* @param configuration - The player configuration.
|
|
1467
|
+
* Will be passed to the {@link theoplayer!ChromelessPlayer | ChromelessPlayer} constructor to create
|
|
1468
|
+
* the underlying THEOplayer instance.
|
|
1469
|
+
* Can also be set later on through the {@link configuration} property.
|
|
1470
|
+
*/
|
|
1471
|
+
constructor(configuration?: PlayerConfiguration);
|
|
1472
|
+
private _upgradeProperty;
|
|
1473
|
+
/**
|
|
1474
|
+
* The underlying THEOplayer player instance.
|
|
1475
|
+
*
|
|
1476
|
+
* This is constructed automatically as soon as a valid {@link configuration} is set.
|
|
1477
|
+
*/
|
|
1478
|
+
get player(): ChromelessPlayer | undefined;
|
|
1479
|
+
/**
|
|
1480
|
+
* The player configuration.
|
|
1481
|
+
*
|
|
1482
|
+
* Used to create the underlying THEOplayer instance.
|
|
1483
|
+
*/
|
|
1484
|
+
get configuration(): PlayerConfiguration;
|
|
1485
|
+
set configuration(configuration: PlayerConfiguration);
|
|
1486
|
+
/**
|
|
1487
|
+
* The player's current source.
|
|
1488
|
+
*/
|
|
1489
|
+
get source(): SourceDescription | undefined;
|
|
1490
|
+
set source(value: SourceDescription | undefined);
|
|
1491
|
+
/**
|
|
1492
|
+
* Whether the player's audio is muted.
|
|
1493
|
+
*/
|
|
1494
|
+
get muted(): boolean;
|
|
1495
|
+
set muted(value: boolean);
|
|
1496
|
+
/**
|
|
1497
|
+
* Whether the player should attempt to automatically start playback.
|
|
1498
|
+
*/
|
|
1499
|
+
get autoplay(): boolean;
|
|
1500
|
+
set autoplay(value: boolean);
|
|
1501
|
+
/**
|
|
1502
|
+
* The stream type, either "vod", "live" or "dvr".
|
|
1503
|
+
*
|
|
1504
|
+
* If you know in advance that the source will be a livestream, you can set this property to avoid a screen flicker
|
|
1505
|
+
* when the player switches between its VOD-specific and live-only controls.
|
|
1506
|
+
*/
|
|
1507
|
+
get streamType(): StreamType;
|
|
1508
|
+
set streamType(value: StreamType);
|
|
1509
|
+
/**
|
|
1510
|
+
* The timeout (in seconds) between when the user stops interacting with the UI,
|
|
1511
|
+
* and when the user is considered to be "idle".
|
|
1512
|
+
*/
|
|
1513
|
+
get userIdleTimeout(): number;
|
|
1514
|
+
set userIdleTimeout(value: number);
|
|
1515
|
+
/**
|
|
1516
|
+
* The minimum length (in seconds) of a livestream's sliding window for the stream to be DVR
|
|
1517
|
+
* and its stream type to be set to "dvr".
|
|
1518
|
+
*/
|
|
1519
|
+
get dvrThreshold(): number;
|
|
1520
|
+
set dvrThreshold(value: number);
|
|
1521
|
+
connectedCallback(): void;
|
|
1522
|
+
disconnectedCallback(): void;
|
|
1523
|
+
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
1524
|
+
private readonly _updateStreamType;
|
|
1525
|
+
private readonly _onTitleSlotChange;
|
|
1507
1526
|
}
|
|
1508
1527
|
|
|
1509
|
-
/**
|
|
1510
|
-
* An extension for the default UI.
|
|
1511
|
-
*
|
|
1512
|
-
* This is called whenever a `<theoplayer-default-ui>` element is created.
|
|
1513
|
-
* The extension can then choose to modify this element, for example by appending extra elements
|
|
1514
|
-
* or attaching extra event listeners.
|
|
1515
|
-
*
|
|
1516
|
-
* @example
|
|
1517
|
-
* The following extension adds an extra button to the bottom control bar of every default UI:
|
|
1518
|
-
* ```javascript
|
|
1519
|
-
* THEOplayerUI.registerExtension((ui) => {
|
|
1520
|
-
* // Create a new button
|
|
1521
|
-
* const button = new THEOplayerUI.Button();
|
|
1522
|
-
* button.innerHTML = "Click me!";
|
|
1523
|
-
* button.addEventListener("click", () => alert("I was clicked!"));
|
|
1524
|
-
* // Place it in the bottom control bar
|
|
1525
|
-
* button.slot = "bottom-control-bar";
|
|
1526
|
-
* ui.appendChild(button);
|
|
1527
|
-
* });
|
|
1528
|
-
* ```
|
|
1529
|
-
* See the documentation of `<theoplayer-default-ui>` for more information about the available slots
|
|
1530
|
-
* in which you can add extra elements.
|
|
1531
|
-
*/
|
|
1532
|
-
type Extension = (ui: DefaultUI) => void;
|
|
1533
|
-
/**
|
|
1534
|
-
* Registers an extension for the default UI.
|
|
1535
|
-
*
|
|
1536
|
-
* @param extension The extension.
|
|
1537
|
-
* @see {@link Extension}
|
|
1538
|
-
*/
|
|
1528
|
+
/**
|
|
1529
|
+
* An extension for the default UI.
|
|
1530
|
+
*
|
|
1531
|
+
* This is called whenever a `<theoplayer-default-ui>` element is created.
|
|
1532
|
+
* The extension can then choose to modify this element, for example by appending extra elements
|
|
1533
|
+
* or attaching extra event listeners.
|
|
1534
|
+
*
|
|
1535
|
+
* @example
|
|
1536
|
+
* The following extension adds an extra button to the bottom control bar of every default UI:
|
|
1537
|
+
* ```javascript
|
|
1538
|
+
* THEOplayerUI.registerExtension((ui) => {
|
|
1539
|
+
* // Create a new button
|
|
1540
|
+
* const button = new THEOplayerUI.Button();
|
|
1541
|
+
* button.innerHTML = "Click me!";
|
|
1542
|
+
* button.addEventListener("click", () => alert("I was clicked!"));
|
|
1543
|
+
* // Place it in the bottom control bar
|
|
1544
|
+
* button.slot = "bottom-control-bar";
|
|
1545
|
+
* ui.appendChild(button);
|
|
1546
|
+
* });
|
|
1547
|
+
* ```
|
|
1548
|
+
* See the documentation of `<theoplayer-default-ui>` for more information about the available slots
|
|
1549
|
+
* in which you can add extra elements.
|
|
1550
|
+
*/
|
|
1551
|
+
type Extension = (ui: DefaultUI) => void;
|
|
1552
|
+
/**
|
|
1553
|
+
* Registers an extension for the default UI.
|
|
1554
|
+
*
|
|
1555
|
+
* @param extension The extension.
|
|
1556
|
+
* @see {@link Extension}
|
|
1557
|
+
*/
|
|
1539
1558
|
declare function registerExtension(extension: Extension): void;
|
|
1540
1559
|
|
|
1541
|
-
/**
|
|
1542
|
-
* The container element for a THEOplayer UI.
|
|
1543
|
-
*
|
|
1544
|
-
* This element provides a basic layout structure for a general player UI, and handles the creation and management
|
|
1545
|
-
* of a {@link theoplayer!ChromelessPlayer | THEOplayer player instance} for this UI.
|
|
1546
|
-
*
|
|
1547
|
-
* ## Usage
|
|
1548
|
-
*
|
|
1549
|
-
* 1. Create a `<theoplayer-ui>` element.
|
|
1550
|
-
* 1. Place your UI elements as children of the `<theoplayer-ui>`.
|
|
1551
|
-
* Set their `slot` attribute to one of the defined slots (see below) to place them in the layout.
|
|
1552
|
-
* 1. Set its `configuration` attribute or property to a valid player configuration.
|
|
1553
|
-
* 1. Set its `source` attribute or property to a valid stream source.
|
|
1554
|
-
*
|
|
1555
|
-
* ## Customization
|
|
1556
|
-
*
|
|
1557
|
-
* This element does not provide any UI elements by default, you need to add all elements as children of
|
|
1558
|
-
* the `<theoplayer-ui>` element. If you're looking for a simple out-of-the-box player experience instead,
|
|
1559
|
-
* see {@link DefaultUI | `<theoplayer-default-ui>`}.
|
|
1560
|
-
*
|
|
1561
|
-
* The styling can be controlled using CSS custom properties (see below).
|
|
1562
|
-
*
|
|
1563
|
-
* @attribute `configuration` - The THEOplayer {@link theoplayer!PlayerConfiguration | PlayerConfiguration}, as a JSON string.
|
|
1564
|
-
* @attribute `source` - The THEOplayer {@link theoplayer!SourceDescription | SourceDescription}, as a JSON string.
|
|
1565
|
-
* @attribute `fluid` - If set, the player automatically adjusts its height to fit the video's aspect ratio.
|
|
1566
|
-
* @attribute `muted` - If set, the player starts out as muted. Reflects `ui.player.muted`.
|
|
1567
|
-
* @attribute `autoplay` - If set, the player attempts to automatically start playing (if allowed).
|
|
1568
|
-
* @attribute `mobile` - Whether to use a mobile-optimized UI layout instead.
|
|
1569
|
-
* Can be used in CSS to show/hide certain desktop-specific or mobile-specific UI controls.
|
|
1570
|
-
* @attribute `stream-type` - The stream type, either "vod", "live" or "dvr".
|
|
1571
|
-
* Can be used to show/hide certain UI controls specific for livestreams, such as
|
|
1572
|
-
* a {@link LiveButton | `<theoplayer-live-button>`}.
|
|
1573
|
-
* If you know in advance that the source will be a livestream, you can set this attribute to avoid a screen flicker
|
|
1574
|
-
* when the player switches between its VOD-specific and live-only controls.
|
|
1575
|
-
* @attribute `user-idle` (readonly) - Whether the user is considered to be "idle".
|
|
1576
|
-
* When the user is idle and the video is playing, all slotted UI elements will be hidden
|
|
1577
|
-
* (unless they have the `no-auto-hide` attribute).
|
|
1578
|
-
* @attribute `user-idle-timeout` - The timeout (in seconds) between when the user stops interacting with the UI,
|
|
1579
|
-
* and when the user is considered to be "idle".
|
|
1580
|
-
* @attribute `dvr-threshold` - The minimum length (in seconds) of a livestream's sliding window for the stream to be DVR
|
|
1581
|
-
* and its stream type to be set to "dvr".
|
|
1582
|
-
* @attribute `paused` (readonly) - Whether the player is paused. Reflects `ui.player.paused`.
|
|
1583
|
-
* @attribute `ended` (readonly) - Whether the player is ended. Reflects `ui.player.ended`.
|
|
1584
|
-
* @attribute `casting` (readonly) - Whether the player is ended. Reflects `ui.player.cast.casting`.
|
|
1585
|
-
* @attribute `playing-ad` (readonly) - Whether the player is playing a linear ad. Reflects `ui.player.ads.playing`.
|
|
1586
|
-
* @attribute `has-error` (readonly) - Whether the player has encountered a fatal error.
|
|
1587
|
-
* @attribute `has-first-play` (readonly) - Whether the player has (previously) started playback for this stream.
|
|
1588
|
-
* Can be used in CSS to show/hide certain initial controls, such as a poster image or a centered play button.
|
|
1589
|
-
*
|
|
1590
|
-
* @slot `(no` name, default slot) - A slot for controls at the bottom of the player.
|
|
1591
|
-
* Can be used for controls such as a play button ({@link PlayButton | `<theoplayer-play-button>`}) or a seek bar
|
|
1592
|
-
* ({@link TimeRange | `<theoplayer-time-range>`}).
|
|
1593
|
-
* @slot `top-chrome` - A slot for controls at the top of the player.
|
|
1594
|
-
* Can be used to display the stream's title, or for a cast button ({@link ChromecastButton | `<theoplayer-chromecast-button>`}).
|
|
1595
|
-
* @slot `middle-chrome` - A slot for controls in the middle of the player (between the top and bottom chrome).
|
|
1596
|
-
* @slot `centered-chrome` - A slot for controls centered on the player, on top of other controls.
|
|
1597
|
-
* @slot `centered-loading` - A slot for a loading indicator centered on the player, on top of other controls
|
|
1598
|
-
* but behind the centered chrome.
|
|
1599
|
-
* @slot `menu` - A slot for extra menus (see {@link Menu | `<theoplayer-menu>`}).
|
|
1600
|
-
* @slot `error` - A slot for an error display, to show when the player encounters a fatal error
|
|
1601
|
-
* (see {@link ErrorDisplay | `<theoplayer-error-display>`}).
|
|
1602
|
-
* @group Components
|
|
1603
|
-
*/
|
|
1604
|
-
declare class UIContainer extends HTMLElement {
|
|
1605
|
-
static get observedAttributes(): Attribute[];
|
|
1606
|
-
private _configuration;
|
|
1607
|
-
private readonly _playerEl;
|
|
1608
|
-
private readonly _menuEl;
|
|
1609
|
-
private readonly _menuGroup;
|
|
1610
|
-
private _menuOpener;
|
|
1611
|
-
private readonly _topChromeEl;
|
|
1612
|
-
private readonly _topChromeSlot;
|
|
1613
|
-
private readonly _bottomChromeEl;
|
|
1614
|
-
private readonly _bottomChromeSlot;
|
|
1615
|
-
private _pointerType;
|
|
1616
|
-
private _lastPointerUpTime;
|
|
1617
|
-
private readonly _mutationObserver;
|
|
1618
|
-
private readonly _resizeObserver;
|
|
1619
|
-
private readonly _stateReceivers;
|
|
1620
|
-
private _player;
|
|
1621
|
-
private _source;
|
|
1622
|
-
private _userIdleTimer;
|
|
1623
|
-
private _previewTime;
|
|
1624
|
-
private _activeVideoTrack;
|
|
1625
|
-
/**
|
|
1626
|
-
* Creates a new THEOplayer UI container element.
|
|
1627
|
-
*
|
|
1628
|
-
* @param configuration - The player configuration.
|
|
1629
|
-
* Will be passed to the {@link theoplayer!ChromelessPlayer | ChromelessPlayer} constructor to create
|
|
1630
|
-
* the underlying THEOplayer instance.
|
|
1631
|
-
* Can also be set later on through the {@link configuration} property.
|
|
1632
|
-
*/
|
|
1633
|
-
constructor(configuration?: PlayerConfiguration);
|
|
1634
|
-
private _upgradeProperty;
|
|
1635
|
-
/**
|
|
1636
|
-
* The underlying THEOplayer player instance.
|
|
1637
|
-
*
|
|
1638
|
-
* This is constructed automatically as soon as a valid {@link configuration} is set.
|
|
1639
|
-
*/
|
|
1640
|
-
get player(): ChromelessPlayer | undefined;
|
|
1641
|
-
/**
|
|
1642
|
-
* The player configuration.
|
|
1643
|
-
*
|
|
1644
|
-
* Used to create the underlying THEOplayer instance.
|
|
1645
|
-
*/
|
|
1646
|
-
get configuration(): PlayerConfiguration;
|
|
1647
|
-
set configuration(playerConfiguration: PlayerConfiguration);
|
|
1648
|
-
private _setConfiguration;
|
|
1649
|
-
/**
|
|
1650
|
-
* The player's current source.
|
|
1651
|
-
*/
|
|
1652
|
-
get source(): SourceDescription | undefined;
|
|
1653
|
-
set source(value: SourceDescription | undefined);
|
|
1654
|
-
private _setSource;
|
|
1655
|
-
/**
|
|
1656
|
-
* Whether the player's audio is muted.
|
|
1657
|
-
*/
|
|
1658
|
-
get muted(): boolean;
|
|
1659
|
-
set muted(value: boolean);
|
|
1660
|
-
/**
|
|
1661
|
-
* Whether the player should attempt to automatically start playback.
|
|
1662
|
-
*/
|
|
1663
|
-
get autoplay(): boolean;
|
|
1664
|
-
set autoplay(value: boolean);
|
|
1665
|
-
/**
|
|
1666
|
-
* Whether the UI is in fullscreen mode.
|
|
1667
|
-
*/
|
|
1668
|
-
get fullscreen(): boolean;
|
|
1669
|
-
/**
|
|
1670
|
-
* Whether the player is paused.
|
|
1671
|
-
*/
|
|
1672
|
-
get paused(): boolean;
|
|
1673
|
-
/**
|
|
1674
|
-
* Whether the player is ended.
|
|
1675
|
-
*/
|
|
1676
|
-
get ended(): boolean;
|
|
1677
|
-
/**
|
|
1678
|
-
* Whether the player is casting to a remote receiver.
|
|
1679
|
-
*/
|
|
1680
|
-
get casting(): boolean;
|
|
1681
|
-
/**
|
|
1682
|
-
* The timeout (in seconds) between when the user stops interacting with the UI,
|
|
1683
|
-
* and when the user is considered to be "idle".
|
|
1684
|
-
*/
|
|
1685
|
-
get userIdleTimeout(): number;
|
|
1686
|
-
set userIdleTimeout(value: number);
|
|
1687
|
-
/**
|
|
1688
|
-
* The stream type, either "vod", "live" or "dvr".
|
|
1689
|
-
*
|
|
1690
|
-
* If you know in advance that the source will be a livestream, you can set this property to avoid a screen flicker
|
|
1691
|
-
* when the player switches between its VOD-specific and live-only controls.
|
|
1692
|
-
*/
|
|
1693
|
-
get streamType(): StreamType;
|
|
1694
|
-
set streamType(streamType: StreamType);
|
|
1695
|
-
/**
|
|
1696
|
-
* The minimum length (in seconds) of a livestream's sliding window for the stream to be DVR
|
|
1697
|
-
* and its stream type to be set to "dvr".
|
|
1698
|
-
*/
|
|
1699
|
-
get dvrThreshold(): number;
|
|
1700
|
-
set dvrThreshold(value: number);
|
|
1701
|
-
connectedCallback(): void;
|
|
1702
|
-
private tryInitializePlayer_;
|
|
1703
|
-
disconnectedCallback(): void;
|
|
1704
|
-
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
1705
|
-
private readonly _onMutation;
|
|
1706
|
-
private readonly _onSlotChange;
|
|
1707
|
-
private readonly registerStateReceiver_;
|
|
1708
|
-
private readonly unregisterStateReceiver_;
|
|
1709
|
-
private propagateStateToReceiver_;
|
|
1710
|
-
private removeStateFromReceiver_;
|
|
1711
|
-
private openMenu_;
|
|
1712
|
-
private closeMenu_;
|
|
1713
|
-
private readonly _onToggleMenu;
|
|
1714
|
-
private readonly _onCloseMenu;
|
|
1715
|
-
private readonly _onMenuChange;
|
|
1716
|
-
private readonly _onMenuPointerDown;
|
|
1717
|
-
private readonly _onMenuClick;
|
|
1718
|
-
private readonly _onEnterFullscreen;
|
|
1719
|
-
private readonly _onExitFullscreen;
|
|
1720
|
-
private readonly _onFullscreenChange;
|
|
1721
|
-
private readonly _updateAspectRatio;
|
|
1722
|
-
private readonly _updateError;
|
|
1723
|
-
private readonly _onPlay;
|
|
1724
|
-
private readonly _onPause;
|
|
1725
|
-
private readonly _updatePausedAndEnded;
|
|
1726
|
-
private readonly _updateEnded;
|
|
1727
|
-
private readonly _updateStreamType;
|
|
1728
|
-
private readonly _updatePlaybackRate;
|
|
1729
|
-
private readonly _updateMuted;
|
|
1730
|
-
private readonly _updateActiveVideoTrack;
|
|
1731
|
-
private readonly _updateActiveVideoQuality;
|
|
1732
|
-
private readonly _updateTargetVideoQualities;
|
|
1733
|
-
private readonly _updateCasting;
|
|
1734
|
-
private readonly _updatePlayingAd;
|
|
1735
|
-
private readonly _onSourceChange;
|
|
1736
|
-
private isUserIdle_;
|
|
1737
|
-
private setUserActive_;
|
|
1738
|
-
private readonly setUserIdle_;
|
|
1739
|
-
private readonly scheduleUserIdle_;
|
|
1740
|
-
private isPlayerOrMedia_;
|
|
1741
|
-
private readonly _onKeyUp;
|
|
1742
|
-
private readonly _onPointerUp;
|
|
1743
|
-
private readonly _onClickAfterPointerUp;
|
|
1744
|
-
private readonly _onPointerMove;
|
|
1745
|
-
private readonly _onMouseLeave;
|
|
1746
|
-
private readonly _onChromeSlotTransition;
|
|
1747
|
-
private readonly _updateTextTrackMargins;
|
|
1748
|
-
private readonly _onPreviewTimeChange;
|
|
1560
|
+
/**
|
|
1561
|
+
* The container element for a THEOplayer UI.
|
|
1562
|
+
*
|
|
1563
|
+
* This element provides a basic layout structure for a general player UI, and handles the creation and management
|
|
1564
|
+
* of a {@link theoplayer!ChromelessPlayer | THEOplayer player instance} for this UI.
|
|
1565
|
+
*
|
|
1566
|
+
* ## Usage
|
|
1567
|
+
*
|
|
1568
|
+
* 1. Create a `<theoplayer-ui>` element.
|
|
1569
|
+
* 1. Place your UI elements as children of the `<theoplayer-ui>`.
|
|
1570
|
+
* Set their `slot` attribute to one of the defined slots (see below) to place them in the layout.
|
|
1571
|
+
* 1. Set its `configuration` attribute or property to a valid player configuration.
|
|
1572
|
+
* 1. Set its `source` attribute or property to a valid stream source.
|
|
1573
|
+
*
|
|
1574
|
+
* ## Customization
|
|
1575
|
+
*
|
|
1576
|
+
* This element does not provide any UI elements by default, you need to add all elements as children of
|
|
1577
|
+
* the `<theoplayer-ui>` element. If you're looking for a simple out-of-the-box player experience instead,
|
|
1578
|
+
* see {@link DefaultUI | `<theoplayer-default-ui>`}.
|
|
1579
|
+
*
|
|
1580
|
+
* The styling can be controlled using CSS custom properties (see below).
|
|
1581
|
+
*
|
|
1582
|
+
* @attribute `configuration` - The THEOplayer {@link theoplayer!PlayerConfiguration | PlayerConfiguration}, as a JSON string.
|
|
1583
|
+
* @attribute `source` - The THEOplayer {@link theoplayer!SourceDescription | SourceDescription}, as a JSON string.
|
|
1584
|
+
* @attribute `fluid` - If set, the player automatically adjusts its height to fit the video's aspect ratio.
|
|
1585
|
+
* @attribute `muted` - If set, the player starts out as muted. Reflects `ui.player.muted`.
|
|
1586
|
+
* @attribute `autoplay` - If set, the player attempts to automatically start playing (if allowed).
|
|
1587
|
+
* @attribute `mobile` - Whether to use a mobile-optimized UI layout instead.
|
|
1588
|
+
* Can be used in CSS to show/hide certain desktop-specific or mobile-specific UI controls.
|
|
1589
|
+
* @attribute `stream-type` - The stream type, either "vod", "live" or "dvr".
|
|
1590
|
+
* Can be used to show/hide certain UI controls specific for livestreams, such as
|
|
1591
|
+
* a {@link LiveButton | `<theoplayer-live-button>`}.
|
|
1592
|
+
* If you know in advance that the source will be a livestream, you can set this attribute to avoid a screen flicker
|
|
1593
|
+
* when the player switches between its VOD-specific and live-only controls.
|
|
1594
|
+
* @attribute `user-idle` (readonly) - Whether the user is considered to be "idle".
|
|
1595
|
+
* When the user is idle and the video is playing, all slotted UI elements will be hidden
|
|
1596
|
+
* (unless they have the `no-auto-hide` attribute).
|
|
1597
|
+
* @attribute `user-idle-timeout` - The timeout (in seconds) between when the user stops interacting with the UI,
|
|
1598
|
+
* and when the user is considered to be "idle".
|
|
1599
|
+
* @attribute `dvr-threshold` - The minimum length (in seconds) of a livestream's sliding window for the stream to be DVR
|
|
1600
|
+
* and its stream type to be set to "dvr".
|
|
1601
|
+
* @attribute `paused` (readonly) - Whether the player is paused. Reflects `ui.player.paused`.
|
|
1602
|
+
* @attribute `ended` (readonly) - Whether the player is ended. Reflects `ui.player.ended`.
|
|
1603
|
+
* @attribute `casting` (readonly) - Whether the player is ended. Reflects `ui.player.cast.casting`.
|
|
1604
|
+
* @attribute `playing-ad` (readonly) - Whether the player is playing a linear ad. Reflects `ui.player.ads.playing`.
|
|
1605
|
+
* @attribute `has-error` (readonly) - Whether the player has encountered a fatal error.
|
|
1606
|
+
* @attribute `has-first-play` (readonly) - Whether the player has (previously) started playback for this stream.
|
|
1607
|
+
* Can be used in CSS to show/hide certain initial controls, such as a poster image or a centered play button.
|
|
1608
|
+
*
|
|
1609
|
+
* @slot `(no` name, default slot) - A slot for controls at the bottom of the player.
|
|
1610
|
+
* Can be used for controls such as a play button ({@link PlayButton | `<theoplayer-play-button>`}) or a seek bar
|
|
1611
|
+
* ({@link TimeRange | `<theoplayer-time-range>`}).
|
|
1612
|
+
* @slot `top-chrome` - A slot for controls at the top of the player.
|
|
1613
|
+
* Can be used to display the stream's title, or for a cast button ({@link ChromecastButton | `<theoplayer-chromecast-button>`}).
|
|
1614
|
+
* @slot `middle-chrome` - A slot for controls in the middle of the player (between the top and bottom chrome).
|
|
1615
|
+
* @slot `centered-chrome` - A slot for controls centered on the player, on top of other controls.
|
|
1616
|
+
* @slot `centered-loading` - A slot for a loading indicator centered on the player, on top of other controls
|
|
1617
|
+
* but behind the centered chrome.
|
|
1618
|
+
* @slot `menu` - A slot for extra menus (see {@link Menu | `<theoplayer-menu>`}).
|
|
1619
|
+
* @slot `error` - A slot for an error display, to show when the player encounters a fatal error
|
|
1620
|
+
* (see {@link ErrorDisplay | `<theoplayer-error-display>`}).
|
|
1621
|
+
* @group Components
|
|
1622
|
+
*/
|
|
1623
|
+
declare class UIContainer extends HTMLElement {
|
|
1624
|
+
static get observedAttributes(): Attribute[];
|
|
1625
|
+
private _configuration;
|
|
1626
|
+
private readonly _playerEl;
|
|
1627
|
+
private readonly _menuEl;
|
|
1628
|
+
private readonly _menuGroup;
|
|
1629
|
+
private _menuOpener;
|
|
1630
|
+
private readonly _topChromeEl;
|
|
1631
|
+
private readonly _topChromeSlot;
|
|
1632
|
+
private readonly _bottomChromeEl;
|
|
1633
|
+
private readonly _bottomChromeSlot;
|
|
1634
|
+
private _pointerType;
|
|
1635
|
+
private _lastPointerUpTime;
|
|
1636
|
+
private readonly _mutationObserver;
|
|
1637
|
+
private readonly _resizeObserver;
|
|
1638
|
+
private readonly _stateReceivers;
|
|
1639
|
+
private _player;
|
|
1640
|
+
private _source;
|
|
1641
|
+
private _userIdleTimer;
|
|
1642
|
+
private _previewTime;
|
|
1643
|
+
private _activeVideoTrack;
|
|
1644
|
+
/**
|
|
1645
|
+
* Creates a new THEOplayer UI container element.
|
|
1646
|
+
*
|
|
1647
|
+
* @param configuration - The player configuration.
|
|
1648
|
+
* Will be passed to the {@link theoplayer!ChromelessPlayer | ChromelessPlayer} constructor to create
|
|
1649
|
+
* the underlying THEOplayer instance.
|
|
1650
|
+
* Can also be set later on through the {@link configuration} property.
|
|
1651
|
+
*/
|
|
1652
|
+
constructor(configuration?: PlayerConfiguration);
|
|
1653
|
+
private _upgradeProperty;
|
|
1654
|
+
/**
|
|
1655
|
+
* The underlying THEOplayer player instance.
|
|
1656
|
+
*
|
|
1657
|
+
* This is constructed automatically as soon as a valid {@link configuration} is set.
|
|
1658
|
+
*/
|
|
1659
|
+
get player(): ChromelessPlayer | undefined;
|
|
1660
|
+
/**
|
|
1661
|
+
* The player configuration.
|
|
1662
|
+
*
|
|
1663
|
+
* Used to create the underlying THEOplayer instance.
|
|
1664
|
+
*/
|
|
1665
|
+
get configuration(): PlayerConfiguration;
|
|
1666
|
+
set configuration(playerConfiguration: PlayerConfiguration);
|
|
1667
|
+
private _setConfiguration;
|
|
1668
|
+
/**
|
|
1669
|
+
* The player's current source.
|
|
1670
|
+
*/
|
|
1671
|
+
get source(): SourceDescription | undefined;
|
|
1672
|
+
set source(value: SourceDescription | undefined);
|
|
1673
|
+
private _setSource;
|
|
1674
|
+
/**
|
|
1675
|
+
* Whether the player's audio is muted.
|
|
1676
|
+
*/
|
|
1677
|
+
get muted(): boolean;
|
|
1678
|
+
set muted(value: boolean);
|
|
1679
|
+
/**
|
|
1680
|
+
* Whether the player should attempt to automatically start playback.
|
|
1681
|
+
*/
|
|
1682
|
+
get autoplay(): boolean;
|
|
1683
|
+
set autoplay(value: boolean);
|
|
1684
|
+
/**
|
|
1685
|
+
* Whether the UI is in fullscreen mode.
|
|
1686
|
+
*/
|
|
1687
|
+
get fullscreen(): boolean;
|
|
1688
|
+
/**
|
|
1689
|
+
* Whether the player is paused.
|
|
1690
|
+
*/
|
|
1691
|
+
get paused(): boolean;
|
|
1692
|
+
/**
|
|
1693
|
+
* Whether the player is ended.
|
|
1694
|
+
*/
|
|
1695
|
+
get ended(): boolean;
|
|
1696
|
+
/**
|
|
1697
|
+
* Whether the player is casting to a remote receiver.
|
|
1698
|
+
*/
|
|
1699
|
+
get casting(): boolean;
|
|
1700
|
+
/**
|
|
1701
|
+
* The timeout (in seconds) between when the user stops interacting with the UI,
|
|
1702
|
+
* and when the user is considered to be "idle".
|
|
1703
|
+
*/
|
|
1704
|
+
get userIdleTimeout(): number;
|
|
1705
|
+
set userIdleTimeout(value: number);
|
|
1706
|
+
/**
|
|
1707
|
+
* The stream type, either "vod", "live" or "dvr".
|
|
1708
|
+
*
|
|
1709
|
+
* If you know in advance that the source will be a livestream, you can set this property to avoid a screen flicker
|
|
1710
|
+
* when the player switches between its VOD-specific and live-only controls.
|
|
1711
|
+
*/
|
|
1712
|
+
get streamType(): StreamType;
|
|
1713
|
+
set streamType(streamType: StreamType);
|
|
1714
|
+
/**
|
|
1715
|
+
* The minimum length (in seconds) of a livestream's sliding window for the stream to be DVR
|
|
1716
|
+
* and its stream type to be set to "dvr".
|
|
1717
|
+
*/
|
|
1718
|
+
get dvrThreshold(): number;
|
|
1719
|
+
set dvrThreshold(value: number);
|
|
1720
|
+
connectedCallback(): void;
|
|
1721
|
+
private tryInitializePlayer_;
|
|
1722
|
+
disconnectedCallback(): void;
|
|
1723
|
+
attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
|
|
1724
|
+
private readonly _onMutation;
|
|
1725
|
+
private readonly _onSlotChange;
|
|
1726
|
+
private readonly registerStateReceiver_;
|
|
1727
|
+
private readonly unregisterStateReceiver_;
|
|
1728
|
+
private propagateStateToReceiver_;
|
|
1729
|
+
private removeStateFromReceiver_;
|
|
1730
|
+
private openMenu_;
|
|
1731
|
+
private closeMenu_;
|
|
1732
|
+
private readonly _onToggleMenu;
|
|
1733
|
+
private readonly _onCloseMenu;
|
|
1734
|
+
private readonly _onMenuChange;
|
|
1735
|
+
private readonly _onMenuPointerDown;
|
|
1736
|
+
private readonly _onMenuClick;
|
|
1737
|
+
private readonly _onEnterFullscreen;
|
|
1738
|
+
private readonly _onExitFullscreen;
|
|
1739
|
+
private readonly _onFullscreenChange;
|
|
1740
|
+
private readonly _updateAspectRatio;
|
|
1741
|
+
private readonly _updateError;
|
|
1742
|
+
private readonly _onPlay;
|
|
1743
|
+
private readonly _onPause;
|
|
1744
|
+
private readonly _updatePausedAndEnded;
|
|
1745
|
+
private readonly _updateEnded;
|
|
1746
|
+
private readonly _updateStreamType;
|
|
1747
|
+
private readonly _updatePlaybackRate;
|
|
1748
|
+
private readonly _updateMuted;
|
|
1749
|
+
private readonly _updateActiveVideoTrack;
|
|
1750
|
+
private readonly _updateActiveVideoQuality;
|
|
1751
|
+
private readonly _updateTargetVideoQualities;
|
|
1752
|
+
private readonly _updateCasting;
|
|
1753
|
+
private readonly _updatePlayingAd;
|
|
1754
|
+
private readonly _onSourceChange;
|
|
1755
|
+
private isUserIdle_;
|
|
1756
|
+
private setUserActive_;
|
|
1757
|
+
private readonly setUserIdle_;
|
|
1758
|
+
private readonly scheduleUserIdle_;
|
|
1759
|
+
private isPlayerOrMedia_;
|
|
1760
|
+
private readonly _onKeyUp;
|
|
1761
|
+
private readonly _onPointerUp;
|
|
1762
|
+
private readonly _onClickAfterPointerUp;
|
|
1763
|
+
private readonly _onPointerMove;
|
|
1764
|
+
private readonly _onMouseLeave;
|
|
1765
|
+
private readonly _onChromeSlotTransition;
|
|
1766
|
+
private readonly _updateTextTrackMargins;
|
|
1767
|
+
private readonly _onPreviewTimeChange;
|
|
1749
1768
|
}
|
|
1750
1769
|
|
|
1751
1770
|
export { ActiveQualityDisplay, AdClickThroughButton, AdCountdown, AdDisplay, AdSkipButton, AirPlayButton, Attribute, Button, ButtonOptions, CastButton, ChromecastButton, ChromecastDisplay, CloseMenuButton, Constructor, ControlBar, DefaultUI, DurationDisplay, ErrorDisplay, Extension, ExtensionSlot, FullscreenButton, GestureReceiver, LanguageMenu, LanguageMenuButton, LinkButton, LiveButton, LoadingIndicator, MediaTrackRadioButton, Menu, MenuButton, MenuGroup, MenuGroupOptions, MenuOptions, MuteButton, PlayButton, PlaybackRateDisplay, PlaybackRateMenu, PlaybackRateMenuButton, PlaybackRateRadioGroup, PreviewThumbnail, PreviewTimeDisplay, QualityRadioButton, QualityRadioGroup, RadioButton, RadioGroup, Range, RangeOptions, SeekButton, SettingsMenu, SettingsMenuButton, StateReceiverElement, StateReceiverMixin, StateReceiverPropertyMap, StreamType, TextTrackOffRadioButton, TextTrackRadioButton, TextTrackStyleDisplay, TextTrackStyleMap, TextTrackStyleMenu, TextTrackStyleOption, TextTrackStyleRadioGroup, TextTrackStyleResetButton, TimeDisplay, TimeRange, TrackRadioGroup, TrackType, UIContainer, VolumeLevel, VolumeRange, buttonTemplate, linkButtonTemplate, menuGroupTemplate, menuTemplate, rangeTemplate, registerExtension };
|