@gcorevideo/player 2.17.0 → 2.18.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/dist/index.js +182 -109
- package/dist/player.d.ts +150 -24
- package/docs/api/player.containersize.md +19 -0
- package/docs/api/player.dashsettings.md +2 -0
- package/docs/api/player.errorlevel.md +1 -0
- package/docs/api/player.langtag.md +6 -0
- package/docs/api/player.md +57 -22
- package/docs/api/player.mediatransport.md +1 -0
- package/docs/api/player.playbackerror.code.md +2 -0
- package/docs/api/player.playbackerror.description.md +2 -0
- package/docs/api/player.playbackerror.level.md +2 -0
- package/docs/api/player.playbackerror.md +43 -4
- package/docs/api/player.playbackerror.message.md +2 -0
- package/docs/api/player.playbackerror.origin.md +21 -0
- package/docs/api/player.playbackerror.scope.md +16 -0
- package/docs/api/player.playbackerrorcode.md +4 -3
- package/docs/api/player.playbackmodule.md +1 -0
- package/docs/api/player.player.isdvrinuse.md +24 -0
- package/docs/api/player.player.isplaying.md +1 -1
- package/docs/api/player.player.md +15 -1
- package/docs/api/player.player.off.md +4 -4
- package/docs/api/player.player.on.md +5 -5
- package/docs/api/player.player.resize.md +3 -6
- package/docs/api/player.playercomponenttype.md +16 -0
- package/docs/api/player.playerdebugsettings.md +1 -1
- package/docs/api/player.playerdebugtag.md +1 -0
- package/docs/api/player.playerevent.md +96 -0
- package/docs/api/player.playereventhandler.md +3 -2
- package/docs/api/player.playereventparams.md +20 -0
- package/docs/api/player.playermediasourcedesc.md +1 -1
- package/docs/api/player.playermediasourcedesc.mimetype.md +1 -1
- package/docs/api/player.qualitylevel.bitrate.md +16 -0
- package/docs/api/player.qualitylevel.height.md +16 -0
- package/docs/api/player.qualitylevel.level.md +16 -0
- package/docs/api/player.qualitylevel.md +104 -7
- package/docs/api/player.qualitylevel.width.md +16 -0
- package/docs/api/player.timeposition.current.md +16 -0
- package/docs/api/player.timeposition.md +65 -7
- package/docs/api/player.timeposition.total.md +16 -0
- package/docs/api/player.timevalue.md +1 -1
- package/docs/api/player.translationsettings.md +7 -1
- package/docs/api/player.transportpreference.md +1 -0
- package/lib/Player.d.ts +30 -14
- package/lib/Player.d.ts.map +1 -1
- package/lib/Player.js +72 -65
- package/lib/internal.types.d.ts +3 -5
- package/lib/internal.types.d.ts.map +1 -1
- package/lib/playback/dash-playback/DashPlayback.d.ts +2 -0
- package/lib/playback/dash-playback/DashPlayback.d.ts.map +1 -1
- package/lib/playback/dash-playback/DashPlayback.js +37 -25
- package/lib/playback/hls-playback/HlsPlayback.d.ts +3 -0
- package/lib/playback/hls-playback/HlsPlayback.d.ts.map +1 -1
- package/lib/playback/hls-playback/HlsPlayback.js +33 -18
- package/lib/playback.types.d.ts +65 -6
- package/lib/playback.types.d.ts.map +1 -1
- package/lib/playback.types.js +10 -0
- package/lib/types.d.ts +54 -5
- package/lib/types.d.ts.map +1 -1
- package/lib/types.js +31 -2
- package/package.json +1 -1
- package/src/Player.ts +109 -78
- package/src/internal.types.ts +3 -2
- package/src/playback/dash-playback/DashPlayback.ts +64 -35
- package/src/playback/hls-playback/HlsPlayback.ts +46 -22
- package/src/playback.types.ts +65 -5
- package/src/types.ts +56 -6
- package/temp/player.api.json +611 -87
- package/tsconfig.tsbuildinfo +1 -1
- package/dist/DashPlayback-BRJzl8D8.js +0 -901
|
@@ -2,19 +2,116 @@
|
|
|
2
2
|
|
|
3
3
|
[Home](./index.md) > [@gcorevideo/player](./player.md) > [QualityLevel](./player.qualitylevel.md)
|
|
4
4
|
|
|
5
|
-
## QualityLevel
|
|
5
|
+
## QualityLevel interface
|
|
6
6
|
|
|
7
7
|
> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
|
|
8
8
|
>
|
|
9
9
|
|
|
10
|
+
A level of quality within a media source.
|
|
10
11
|
|
|
11
12
|
**Signature:**
|
|
12
13
|
|
|
13
14
|
```typescript
|
|
14
|
-
export
|
|
15
|
-
level: number;
|
|
16
|
-
width: number;
|
|
17
|
-
height: number;
|
|
18
|
-
bitrate: number;
|
|
19
|
-
};
|
|
15
|
+
export interface QualityLevel
|
|
20
16
|
```
|
|
17
|
+
|
|
18
|
+
## Properties
|
|
19
|
+
|
|
20
|
+
<table><thead><tr><th>
|
|
21
|
+
|
|
22
|
+
Property
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
</th><th>
|
|
26
|
+
|
|
27
|
+
Modifiers
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
</th><th>
|
|
31
|
+
|
|
32
|
+
Type
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
</th><th>
|
|
36
|
+
|
|
37
|
+
Description
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
</th></tr></thead>
|
|
41
|
+
<tbody><tr><td>
|
|
42
|
+
|
|
43
|
+
[bitrate](./player.qualitylevel.bitrate.md)
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
</td><td>
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
</td><td>
|
|
50
|
+
|
|
51
|
+
number
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
</td><td>
|
|
55
|
+
|
|
56
|
+
**_(BETA)_** Bitrate of the video, bps.
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
</td></tr>
|
|
60
|
+
<tr><td>
|
|
61
|
+
|
|
62
|
+
[height](./player.qualitylevel.height.md)
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
</td><td>
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
</td><td>
|
|
69
|
+
|
|
70
|
+
number
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
</td><td>
|
|
74
|
+
|
|
75
|
+
**_(BETA)_** Height of the video, pixels.
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
</td></tr>
|
|
79
|
+
<tr><td>
|
|
80
|
+
|
|
81
|
+
[level](./player.qualitylevel.level.md)
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
</td><td>
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
</td><td>
|
|
88
|
+
|
|
89
|
+
number
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
</td><td>
|
|
93
|
+
|
|
94
|
+
**_(BETA)_** Zero-based index of the quality level.
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
</td></tr>
|
|
98
|
+
<tr><td>
|
|
99
|
+
|
|
100
|
+
[width](./player.qualitylevel.width.md)
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
</td><td>
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
</td><td>
|
|
107
|
+
|
|
108
|
+
number
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
</td><td>
|
|
112
|
+
|
|
113
|
+
**_(BETA)_** Width of the video, pixels.
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
</td></tr>
|
|
117
|
+
</tbody></table>
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
+
|
|
3
|
+
[Home](./index.md) > [@gcorevideo/player](./player.md) > [QualityLevel](./player.qualitylevel.md) > [width](./player.qualitylevel.width.md)
|
|
4
|
+
|
|
5
|
+
## QualityLevel.width property
|
|
6
|
+
|
|
7
|
+
> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
|
|
8
|
+
>
|
|
9
|
+
|
|
10
|
+
Width of the video, pixels.
|
|
11
|
+
|
|
12
|
+
**Signature:**
|
|
13
|
+
|
|
14
|
+
```typescript
|
|
15
|
+
width: number;
|
|
16
|
+
```
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
+
|
|
3
|
+
[Home](./index.md) > [@gcorevideo/player](./player.md) > [TimePosition](./player.timeposition.md) > [current](./player.timeposition.current.md)
|
|
4
|
+
|
|
5
|
+
## TimePosition.current property
|
|
6
|
+
|
|
7
|
+
> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
|
|
8
|
+
>
|
|
9
|
+
|
|
10
|
+
Current playback time, 0..duration, seconds.
|
|
11
|
+
|
|
12
|
+
**Signature:**
|
|
13
|
+
|
|
14
|
+
```typescript
|
|
15
|
+
current: TimeValue;
|
|
16
|
+
```
|
|
@@ -2,20 +2,78 @@
|
|
|
2
2
|
|
|
3
3
|
[Home](./index.md) > [@gcorevideo/player](./player.md) > [TimePosition](./player.timeposition.md)
|
|
4
4
|
|
|
5
|
-
## TimePosition
|
|
5
|
+
## TimePosition interface
|
|
6
6
|
|
|
7
7
|
> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
|
|
8
8
|
>
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
Current playback time and total duration of the media.
|
|
11
11
|
|
|
12
12
|
**Signature:**
|
|
13
13
|
|
|
14
14
|
```typescript
|
|
15
|
-
export
|
|
16
|
-
current: TimeValue;
|
|
17
|
-
total: TimeValue;
|
|
18
|
-
};
|
|
15
|
+
export interface TimePosition
|
|
19
16
|
```
|
|
20
|
-
**References:** [TimeValue](./player.timevalue.md)
|
|
21
17
|
|
|
18
|
+
## Properties
|
|
19
|
+
|
|
20
|
+
<table><thead><tr><th>
|
|
21
|
+
|
|
22
|
+
Property
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
</th><th>
|
|
26
|
+
|
|
27
|
+
Modifiers
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
</th><th>
|
|
31
|
+
|
|
32
|
+
Type
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
</th><th>
|
|
36
|
+
|
|
37
|
+
Description
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
</th></tr></thead>
|
|
41
|
+
<tbody><tr><td>
|
|
42
|
+
|
|
43
|
+
[current](./player.timeposition.current.md)
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
</td><td>
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
</td><td>
|
|
50
|
+
|
|
51
|
+
[TimeValue](./player.timevalue.md)
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
</td><td>
|
|
55
|
+
|
|
56
|
+
**_(BETA)_** Current playback time, 0..duration, seconds.
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
</td></tr>
|
|
60
|
+
<tr><td>
|
|
61
|
+
|
|
62
|
+
[total](./player.timeposition.total.md)
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
</td><td>
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
</td><td>
|
|
69
|
+
|
|
70
|
+
[TimeValue](./player.timevalue.md)
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
</td><td>
|
|
74
|
+
|
|
75
|
+
**_(BETA)_** Total duration of the media, seconds.
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
</td></tr>
|
|
79
|
+
</tbody></table>
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
+
|
|
3
|
+
[Home](./index.md) > [@gcorevideo/player](./player.md) > [TimePosition](./player.timeposition.md) > [total](./player.timeposition.total.md)
|
|
4
|
+
|
|
5
|
+
## TimePosition.total property
|
|
6
|
+
|
|
7
|
+
> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
|
|
8
|
+
>
|
|
9
|
+
|
|
10
|
+
Total duration of the media, seconds.
|
|
11
|
+
|
|
12
|
+
**Signature:**
|
|
13
|
+
|
|
14
|
+
```typescript
|
|
15
|
+
total: TimeValue;
|
|
16
|
+
```
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
|
|
8
8
|
>
|
|
9
9
|
|
|
10
|
-
Playback time in seconds since the beginning of the stream (or a segment for the live streams)
|
|
10
|
+
Playback time in seconds since the beginning of the stream (or a segment for the live streams)
|
|
11
11
|
|
|
12
12
|
**Signature:**
|
|
13
13
|
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
|
|
8
8
|
>
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
Localization strings for the player UI.
|
|
11
11
|
|
|
12
12
|
**Signature:**
|
|
13
13
|
|
|
@@ -16,6 +16,12 @@ export type TranslationSettings = Partial<Record<LangTag, Record<TranslationKey,
|
|
|
16
16
|
```
|
|
17
17
|
**References:** [LangTag](./player.langtag.md)<!-- -->, [TranslationKey](./player.translationkey.md)
|
|
18
18
|
|
|
19
|
+
## Remarks
|
|
20
|
+
|
|
21
|
+
The keys are language codes, and the values are objects with keys being the translation keys and values being the translations.
|
|
22
|
+
|
|
23
|
+
This dictionary is used to localize the player UI, including the error messages and is shared across all the player components (including the plugins).
|
|
24
|
+
|
|
19
25
|
## Example
|
|
20
26
|
|
|
21
27
|
|
package/lib/Player.d.ts
CHANGED
|
@@ -1,20 +1,31 @@
|
|
|
1
|
-
import type { PlayerPlugin } from './types.js';
|
|
1
|
+
import type { ContainerSize, PlayerPlugin } from './types.js';
|
|
2
2
|
import { PlayerConfig, PlayerEvent } from './types.js';
|
|
3
|
+
import { PlaybackError, TimePosition } from './playback.types.js';
|
|
3
4
|
/**
|
|
4
5
|
* @beta
|
|
5
6
|
*/
|
|
6
|
-
export type
|
|
7
|
+
export type PlayerEventParams<E extends PlayerEvent> = E extends PlayerEvent.Seek ? [number] : E extends PlayerEvent.VolumeUpdate ? [number] : E extends PlayerEvent.TimeUpdate ? [TimePosition] : E extends PlayerEvent.Resize ? [{
|
|
8
|
+
width: number;
|
|
9
|
+
height: number;
|
|
10
|
+
}] : E extends PlayerEvent.Fullscreen ? [boolean] : E extends PlayerEvent.Error ? [PlaybackError] : [];
|
|
7
11
|
/**
|
|
12
|
+
* Type of a listener callback function for a player event.
|
|
13
|
+
* See the description of the event parameters in {@link PlayerEvent}.
|
|
14
|
+
* @beta
|
|
15
|
+
*/
|
|
16
|
+
export type PlayerEventHandler<E extends PlayerEvent> = (...args: PlayerEventParams<E>) => void;
|
|
17
|
+
/**
|
|
18
|
+
* Module to perform the playback.
|
|
8
19
|
* @beta
|
|
9
20
|
*/
|
|
10
21
|
export type PlaybackModule = 'dash' | 'hls' | 'html5_video';
|
|
11
22
|
/**
|
|
12
23
|
* The main component to use in the application code.
|
|
24
|
+
* @beta
|
|
13
25
|
* @remarks
|
|
14
26
|
* The Player object provides very basic API to control playback.
|
|
15
27
|
* To build a sophisticated UI, use the plugins framework to tap into the Clappr core.
|
|
16
28
|
* {@link https://github.com/clappr/clappr/wiki/Architecture}
|
|
17
|
-
* @beta
|
|
18
29
|
*/
|
|
19
30
|
export declare class Player {
|
|
20
31
|
private config;
|
|
@@ -27,16 +38,16 @@ export declare class Player {
|
|
|
27
38
|
constructor(config: PlayerConfig);
|
|
28
39
|
/**
|
|
29
40
|
* Adds a listener to a player event
|
|
30
|
-
* @param event -
|
|
31
|
-
* @param handler -
|
|
41
|
+
* @param event - event type, see {@link PlayerEvent}
|
|
42
|
+
* @param handler - a callback function to handle the event
|
|
32
43
|
*/
|
|
33
|
-
on<
|
|
44
|
+
on<E extends PlayerEvent>(event: E, handler: PlayerEventHandler<E>): void;
|
|
34
45
|
/**
|
|
35
46
|
* Removes a previously added event listener
|
|
36
47
|
* @param event - See {@link PlayerEvent}
|
|
37
|
-
* @param handler -
|
|
48
|
+
* @param handler - a callback attached earlier to that event type
|
|
38
49
|
*/
|
|
39
|
-
off<
|
|
50
|
+
off<E extends PlayerEvent>(event: E, handler: PlayerEventHandler<E>): void;
|
|
40
51
|
/**
|
|
41
52
|
* Configures the player.
|
|
42
53
|
*
|
|
@@ -101,7 +112,13 @@ export declare class Player {
|
|
|
101
112
|
*/
|
|
102
113
|
isDvrEnabled(): boolean;
|
|
103
114
|
/**
|
|
104
|
-
* Indicates
|
|
115
|
+
* Indicates whether DVR is in use.
|
|
116
|
+
* @remarks
|
|
117
|
+
* DVR mode, if it is enabled, is triggered we a user seeks behind the live edge.
|
|
118
|
+
*/
|
|
119
|
+
isDvrInUse(): boolean;
|
|
120
|
+
/**
|
|
121
|
+
* Indicates the playing state.
|
|
105
122
|
*/
|
|
106
123
|
isPlaying(): boolean;
|
|
107
124
|
/**
|
|
@@ -124,13 +141,10 @@ export declare class Player {
|
|
|
124
141
|
* Resizes the player container element and everything within it.
|
|
125
142
|
* @param newSize - new size of the player
|
|
126
143
|
* @remarks
|
|
127
|
-
* Use this method when the player itself does not detect the change in size of its container element.
|
|
144
|
+
* Use this method when the player itself does not detect properly the change in size of its container element.
|
|
128
145
|
* It can be a case for orientation change on some mobile devices.
|
|
129
146
|
*/
|
|
130
|
-
resize(newSize:
|
|
131
|
-
width: number;
|
|
132
|
-
height: number;
|
|
133
|
-
}): void;
|
|
147
|
+
resize(newSize: ContainerSize): void;
|
|
134
148
|
/**
|
|
135
149
|
* Seeks to the given time.
|
|
136
150
|
* @param time - time to seek to in seconds (since the beginning of the stream)
|
|
@@ -176,10 +190,12 @@ export declare class Player {
|
|
|
176
190
|
private setConfig;
|
|
177
191
|
private initPlayer;
|
|
178
192
|
private tuneIn;
|
|
193
|
+
private safeTriggerEvent;
|
|
179
194
|
private events;
|
|
180
195
|
private buildCoreOptions;
|
|
181
196
|
private configurePlaybacks;
|
|
182
197
|
private buildMediaSourcesList;
|
|
183
198
|
private bindContainerEventListeners;
|
|
199
|
+
private bindSizeManagementListeners;
|
|
184
200
|
}
|
|
185
201
|
//# sourceMappingURL=Player.d.ts.map
|
package/lib/Player.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Player.d.ts","sourceRoot":"","sources":["../src/Player.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAyB,YAAY,EAAE,MAAM,YAAY,CAAA;
|
|
1
|
+
{"version":3,"file":"Player.d.ts","sourceRoot":"","sources":["../src/Player.ts"],"names":[],"mappings":"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"}
|
package/lib/Player.js
CHANGED
|
@@ -18,11 +18,11 @@ const DEFAULT_OPTIONS = {
|
|
|
18
18
|
};
|
|
19
19
|
/**
|
|
20
20
|
* The main component to use in the application code.
|
|
21
|
+
* @beta
|
|
21
22
|
* @remarks
|
|
22
23
|
* The Player object provides very basic API to control playback.
|
|
23
24
|
* To build a sophisticated UI, use the plugins framework to tap into the Clappr core.
|
|
24
25
|
* {@link https://github.com/clappr/clappr/wiki/Architecture}
|
|
25
|
-
* @beta
|
|
26
26
|
*/
|
|
27
27
|
export class Player {
|
|
28
28
|
config = DEFAULT_OPTIONS;
|
|
@@ -40,8 +40,8 @@ export class Player {
|
|
|
40
40
|
}
|
|
41
41
|
/**
|
|
42
42
|
* Adds a listener to a player event
|
|
43
|
-
* @param event -
|
|
44
|
-
* @param handler -
|
|
43
|
+
* @param event - event type, see {@link PlayerEvent}
|
|
44
|
+
* @param handler - a callback function to handle the event
|
|
45
45
|
*/
|
|
46
46
|
on(event, handler) {
|
|
47
47
|
this.emitter.on(event, handler);
|
|
@@ -49,7 +49,7 @@ export class Player {
|
|
|
49
49
|
/**
|
|
50
50
|
* Removes a previously added event listener
|
|
51
51
|
* @param event - See {@link PlayerEvent}
|
|
52
|
-
* @param handler -
|
|
52
|
+
* @param handler - a callback attached earlier to that event type
|
|
53
53
|
*/
|
|
54
54
|
off(event, handler) {
|
|
55
55
|
this.emitter.off(event, handler);
|
|
@@ -163,7 +163,15 @@ export class Player {
|
|
|
163
163
|
return this.player?.isDvrEnabled() ?? false;
|
|
164
164
|
}
|
|
165
165
|
/**
|
|
166
|
-
* Indicates
|
|
166
|
+
* Indicates whether DVR is in use.
|
|
167
|
+
* @remarks
|
|
168
|
+
* DVR mode, if it is enabled, is triggered we a user seeks behind the live edge.
|
|
169
|
+
*/
|
|
170
|
+
isDvrInUse() {
|
|
171
|
+
return this.player?.isDvrInUse() ?? false;
|
|
172
|
+
}
|
|
173
|
+
/**
|
|
174
|
+
* Indicates the playing state.
|
|
167
175
|
*/
|
|
168
176
|
isPlaying() {
|
|
169
177
|
return this.player?.isPlaying() ?? false;
|
|
@@ -196,7 +204,7 @@ export class Player {
|
|
|
196
204
|
* Resizes the player container element and everything within it.
|
|
197
205
|
* @param newSize - new size of the player
|
|
198
206
|
* @remarks
|
|
199
|
-
* Use this method when the player itself does not detect the change in size of its container element.
|
|
207
|
+
* Use this method when the player itself does not detect properly the change in size of its container element.
|
|
200
208
|
* It can be a case for orientation change on some mobile devices.
|
|
201
209
|
*/
|
|
202
210
|
resize(newSize) {
|
|
@@ -293,32 +301,7 @@ export class Player {
|
|
|
293
301
|
const player = this.player;
|
|
294
302
|
this.bindContainerEventListeners(player);
|
|
295
303
|
player.core.on(ClapprEvents.CORE_ACTIVE_CONTAINER_CHANGED, () => this.bindContainerEventListeners(player), null);
|
|
296
|
-
|
|
297
|
-
trace(`${T} CORE_SCREEN_ORIENTATION_CHANGED`, {
|
|
298
|
-
orientation,
|
|
299
|
-
rootNode: {
|
|
300
|
-
width: this.rootNode?.clientWidth,
|
|
301
|
-
height: this.rootNode?.clientHeight,
|
|
302
|
-
},
|
|
303
|
-
});
|
|
304
|
-
if (Browser.isiOS && this.rootNode) {
|
|
305
|
-
player.core.resize({
|
|
306
|
-
width: this.rootNode.clientWidth,
|
|
307
|
-
height: this.rootNode.clientHeight,
|
|
308
|
-
});
|
|
309
|
-
}
|
|
310
|
-
}, null);
|
|
311
|
-
player.core.on(ClapprEvents.CORE_RESIZE, ({ width, height }) => {
|
|
312
|
-
trace(`${T} CORE_RESIZE`, {
|
|
313
|
-
width,
|
|
314
|
-
height,
|
|
315
|
-
});
|
|
316
|
-
}, null);
|
|
317
|
-
player.core.on(ClapprEvents.CORE_FULLSCREEN, (isFullscreen) => {
|
|
318
|
-
trace(`${T} CORE_FULLSCREEN`, {
|
|
319
|
-
isFullscreen,
|
|
320
|
-
});
|
|
321
|
-
}, null);
|
|
304
|
+
this.bindSizeManagementListeners(player);
|
|
322
305
|
if (this.config.autoPlay) {
|
|
323
306
|
setTimeout(() => {
|
|
324
307
|
trace(`${T} autoPlay`, {
|
|
@@ -336,6 +319,15 @@ export class Player {
|
|
|
336
319
|
reportError(e);
|
|
337
320
|
}
|
|
338
321
|
}
|
|
322
|
+
safeTriggerEvent(event, ...args) {
|
|
323
|
+
try {
|
|
324
|
+
this.emitter.emit(event, ...args);
|
|
325
|
+
}
|
|
326
|
+
catch (e) {
|
|
327
|
+
reportError(e);
|
|
328
|
+
}
|
|
329
|
+
}
|
|
330
|
+
// TODO test
|
|
339
331
|
events = {
|
|
340
332
|
onReady: () => {
|
|
341
333
|
trace(`${T} onReady`, {
|
|
@@ -352,42 +344,29 @@ export class Player {
|
|
|
352
344
|
// TODO ensure that CORE_ACTIVE_CONTAINER_CHANGED does not get caught before onReady
|
|
353
345
|
setTimeout(() => this.tuneIn(), 0);
|
|
354
346
|
},
|
|
355
|
-
onResize: (newSize) => {
|
|
356
|
-
trace(`${T} onResize`, {
|
|
357
|
-
newSize,
|
|
358
|
-
});
|
|
359
|
-
},
|
|
360
347
|
onPlay: () => {
|
|
361
|
-
|
|
362
|
-
this.emitter.emit(PlayerEvent.Play);
|
|
363
|
-
}
|
|
364
|
-
catch (e) {
|
|
365
|
-
reportError(e);
|
|
366
|
-
}
|
|
348
|
+
this.safeTriggerEvent(PlayerEvent.Play);
|
|
367
349
|
},
|
|
368
350
|
onPause: () => {
|
|
369
|
-
|
|
370
|
-
this.emitter.emit(PlayerEvent.Pause);
|
|
371
|
-
}
|
|
372
|
-
catch (e) {
|
|
373
|
-
reportError(e);
|
|
374
|
-
}
|
|
351
|
+
this.safeTriggerEvent(PlayerEvent.Pause);
|
|
375
352
|
},
|
|
376
353
|
onEnded: () => {
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
reportError(e);
|
|
382
|
-
}
|
|
354
|
+
this.safeTriggerEvent(PlayerEvent.Ended);
|
|
355
|
+
},
|
|
356
|
+
onSeek: (time) => {
|
|
357
|
+
this.safeTriggerEvent(PlayerEvent.Seek, time);
|
|
383
358
|
},
|
|
384
359
|
onStop: () => {
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
360
|
+
this.safeTriggerEvent(PlayerEvent.Stop);
|
|
361
|
+
},
|
|
362
|
+
onVolumeUpdate: (volume) => {
|
|
363
|
+
this.safeTriggerEvent(PlayerEvent.VolumeUpdate, volume);
|
|
364
|
+
},
|
|
365
|
+
onTimeUpdate: (time) => {
|
|
366
|
+
this.safeTriggerEvent(PlayerEvent.TimeUpdate, time);
|
|
367
|
+
},
|
|
368
|
+
onError: (error) => {
|
|
369
|
+
this.safeTriggerEvent(PlayerEvent.Error, error);
|
|
391
370
|
},
|
|
392
371
|
};
|
|
393
372
|
buildCoreOptions(rootNode) {
|
|
@@ -415,6 +394,7 @@ export class Player {
|
|
|
415
394
|
mute: this.config.mute,
|
|
416
395
|
crossOrigin: 'anonymous', // TODO
|
|
417
396
|
hlsjsConfig: {
|
|
397
|
+
// TODO
|
|
418
398
|
debug: this.config.debug === 'all' || this.config.debug === 'hls',
|
|
419
399
|
},
|
|
420
400
|
},
|
|
@@ -423,7 +403,7 @@ export class Player {
|
|
|
423
403
|
width: rootNode.clientWidth,
|
|
424
404
|
source: source ? source.source : undefined,
|
|
425
405
|
mimeType: source ? source.mimeType : undefined,
|
|
426
|
-
sources,
|
|
406
|
+
sources,
|
|
427
407
|
strings: this.config.strings,
|
|
428
408
|
};
|
|
429
409
|
return coreOptions;
|
|
@@ -437,9 +417,6 @@ export class Player {
|
|
|
437
417
|
this.config.sources.map((s) => wrapSource(s)), this.config.priorityTransport);
|
|
438
418
|
}
|
|
439
419
|
bindContainerEventListeners(player) {
|
|
440
|
-
trace(`${T} bindContainerEventListeners`, {
|
|
441
|
-
activePlayback: player.core.activePlayback?.name,
|
|
442
|
-
});
|
|
443
420
|
if (Browser.isiOS && player.core.activePlayback) {
|
|
444
421
|
player.core.activePlayback.$el.on('webkitendfullscreen', () => {
|
|
445
422
|
try {
|
|
@@ -451,4 +428,34 @@ export class Player {
|
|
|
451
428
|
});
|
|
452
429
|
}
|
|
453
430
|
}
|
|
431
|
+
bindSizeManagementListeners(player) {
|
|
432
|
+
player.core.on(ClapprEvents.CORE_SCREEN_ORIENTATION_CHANGED, ({ orientation }) => {
|
|
433
|
+
trace(`${T} on CORE_SCREEN_ORIENTATION_CHANGED`, {
|
|
434
|
+
orientation,
|
|
435
|
+
rootNode: {
|
|
436
|
+
width: this.rootNode?.clientWidth,
|
|
437
|
+
height: this.rootNode?.clientHeight,
|
|
438
|
+
},
|
|
439
|
+
});
|
|
440
|
+
if (Browser.isiOS && this.rootNode) {
|
|
441
|
+
player.core.resize({
|
|
442
|
+
width: this.rootNode.clientWidth,
|
|
443
|
+
height: this.rootNode.clientHeight,
|
|
444
|
+
});
|
|
445
|
+
}
|
|
446
|
+
}, null);
|
|
447
|
+
player.core.on(ClapprEvents.CORE_RESIZE, ({ width, height }) => {
|
|
448
|
+
trace(`${T} on CORE_RESIZE`, {
|
|
449
|
+
width,
|
|
450
|
+
height,
|
|
451
|
+
});
|
|
452
|
+
this.safeTriggerEvent(PlayerEvent.Resize, { width, height });
|
|
453
|
+
}, null);
|
|
454
|
+
player.core.on(ClapprEvents.CORE_FULLSCREEN, (isFullscreen) => {
|
|
455
|
+
trace(`${T} CORE_FULLSCREEN`, {
|
|
456
|
+
isFullscreen,
|
|
457
|
+
});
|
|
458
|
+
this.safeTriggerEvent(PlayerEvent.Fullscreen, isFullscreen);
|
|
459
|
+
}, null);
|
|
460
|
+
}
|
|
454
461
|
}
|
package/lib/internal.types.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { CorePlugin, ContainerPlugin, Playback as ClapprPlayback } from "@clappr/core";
|
|
2
|
-
import { PlaybackType, PlayerDebugTag, PlayerMediaSource } from "./types";
|
|
2
|
+
import { ContainerSize, PlaybackType, PlayerDebugTag, PlayerMediaSource } from "./types";
|
|
3
3
|
import { PlaybackError } from "./playback.types";
|
|
4
4
|
type ExternalTrack = {
|
|
5
5
|
kind?: "subtitles" | "captions";
|
|
@@ -34,6 +34,7 @@ export interface CorePlaybackConfig {
|
|
|
34
34
|
mute?: boolean;
|
|
35
35
|
playInline: boolean;
|
|
36
36
|
preload?: 'metadata' | 'auto' | 'none';
|
|
37
|
+
recycleVideo?: boolean;
|
|
37
38
|
shakaConfiguration?: ShakaConfig;
|
|
38
39
|
}
|
|
39
40
|
/**
|
|
@@ -41,10 +42,7 @@ export interface CorePlaybackConfig {
|
|
|
41
42
|
*/
|
|
42
43
|
export type CorePlayerEvents = {
|
|
43
44
|
onReady?: () => void;
|
|
44
|
-
onResize?: (data:
|
|
45
|
-
width: number;
|
|
46
|
-
height: number;
|
|
47
|
-
}) => void;
|
|
45
|
+
onResize?: (data: ContainerSize) => void;
|
|
48
46
|
onPlay?: (metadata: unknown) => void;
|
|
49
47
|
onPause?: (metadata: unknown) => void;
|
|
50
48
|
onStop?: (metadata: unknown) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.types.d.ts","sourceRoot":"","sources":["../src/internal.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,UAAU,EACV,eAAe,EACf,QAAQ,IAAI,cAAc,EAC3B,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.types.d.ts","sourceRoot":"","sources":["../src/internal.types.ts"],"names":[],"mappings":"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"}
|