@gcorevideo/player 2.21.6 → 2.22.1
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/assets/bottom-gear/bottomgear copy.ejs +10 -0
- package/assets/bottom-gear/bottomgear.ejs +4 -8
- package/assets/bottom-gear/gear-sub-menu.scss +0 -1
- package/assets/bottom-gear/gear.scss +0 -1
- package/assets/clappr-nerd-stats/button.ejs +3 -3
- package/assets/level-selector/button.ejs +2 -4
- package/assets/level-selector/list.ejs +14 -10
- package/assets/level-selector/style.scss +9 -4
- package/assets/media-control/media-control.ejs +1 -1
- package/assets/playback-rate/list.ejs +5 -5
- package/dist/core.js +1 -2
- package/dist/index.css +652 -651
- package/dist/index.js +3850 -3766
- package/dist/player.d.ts +10 -17
- package/dist/plugins/index.css +742 -741
- package/dist/plugins/index.js +3951 -3868
- package/docs/api/player.mediacontrol.md +8 -36
- package/docs/api/player.mediacontrol.toggleelement.md +72 -0
- package/docs/api/player.mediacontrolelement.md +1 -1
- package/lib/playback/dash-playback/DashPlayback.d.ts.map +1 -1
- package/lib/playback/dash-playback/DashPlayback.js +0 -1
- package/lib/plugins/bottom-gear/BottomGear.d.ts +65 -14
- package/lib/plugins/bottom-gear/BottomGear.d.ts.map +1 -1
- package/lib/plugins/bottom-gear/BottomGear.js +113 -37
- package/lib/plugins/clappr-nerd-stats/ClapprNerdStats.d.ts +2 -3
- package/lib/plugins/clappr-nerd-stats/ClapprNerdStats.d.ts.map +1 -1
- package/lib/plugins/clappr-nerd-stats/ClapprNerdStats.js +18 -15
- package/lib/plugins/dvr-controls/DvrControls.js +1 -1
- package/lib/plugins/level-selector/LevelSelector.d.ts +8 -11
- package/lib/plugins/level-selector/LevelSelector.d.ts.map +1 -1
- package/lib/plugins/level-selector/LevelSelector.js +66 -102
- package/lib/plugins/media-control/MediaControl.d.ts +7 -5
- package/lib/plugins/media-control/MediaControl.d.ts.map +1 -1
- package/lib/plugins/media-control/MediaControl.js +40 -20
- package/lib/plugins/picture-in-picture/PictureInPicture.d.ts.map +1 -1
- package/lib/plugins/picture-in-picture/PictureInPicture.js +7 -2
- package/lib/plugins/playback-rate/PlaybackRate.d.ts +42 -14
- package/lib/plugins/playback-rate/PlaybackRate.d.ts.map +1 -1
- package/lib/plugins/playback-rate/PlaybackRate.js +101 -83
- package/lib/plugins/subtitles/ClosedCaptions.js +1 -1
- package/lib/testUtils.d.ts +1 -0
- package/lib/testUtils.d.ts.map +1 -1
- package/lib/testUtils.js +13 -0
- package/package.json +1 -1
- package/src/playback/dash-playback/DashPlayback.ts +0 -1
- package/src/plugins/bottom-gear/BottomGear.ts +162 -72
- package/src/plugins/bottom-gear/__tests__/BottomGear.test.ts +21 -5
- package/src/plugins/bottom-gear/__tests__/__snapshots__/BottomGear.test.ts.snap +5 -12
- package/src/plugins/clappr-nerd-stats/ClapprNerdStats.ts +27 -25
- package/src/plugins/dvr-controls/DvrControls.ts +1 -1
- package/src/plugins/dvr-controls/__tests__/DvrControls.test.ts +6 -4
- package/src/plugins/dvr-controls/__tests__/__snapshots__/DvrControls.test.ts.snap +2 -2
- package/src/plugins/level-selector/LevelSelector.ts +80 -120
- package/src/plugins/level-selector/__tests__/LevelSelector.test.ts +69 -79
- package/src/plugins/level-selector/__tests__/__snapshots__/LevelSelector.test.ts.snap +38 -71
- package/src/plugins/media-control/MediaControl.ts +54 -26
- package/src/plugins/media-control/__tests__/MediaControl.test.ts +4 -4
- package/src/plugins/media-control/__tests__/__snapshots__/MediaControl.test.ts.snap +4 -0
- package/src/plugins/picture-in-picture/PictureInPicture.ts +7 -2
- package/src/plugins/playback-rate/PlaybackRate.ts +136 -108
- package/src/plugins/playback-rate/__tests__/PlaybackRate.test.ts +84 -37
- package/src/plugins/playback-rate/__tests__/__snapshots__/PlaybackRate.test.ts.snap +55 -6
- package/src/plugins/subtitles/ClosedCaptions.ts +1 -1
- package/src/plugins/subtitles/__tests__/ClosedCaptions.test.ts +1 -1
- package/src/testUtils.ts +14 -0
- package/src/typings/vitest.d.ts +1 -0
- package/temp/player.api.json +66 -94
- package/tsconfig.tsbuildinfo +1 -1
- package/docs/api/player.mediacontrol.getcenterpanel.md +0 -18
- package/docs/api/player.mediacontrol.getleftpanel.md +0 -22
- package/docs/api/player.mediacontrol.getrightpanel.md +0 -22
|
@@ -1,4 +1,18 @@
|
|
|
1
1
|
import { UICorePlugin, Core } from '@clappr/core';
|
|
2
|
+
/**
|
|
3
|
+
* @beta
|
|
4
|
+
*/
|
|
5
|
+
export type PlaybackRateOption = {
|
|
6
|
+
value: number;
|
|
7
|
+
label: string;
|
|
8
|
+
};
|
|
9
|
+
/**
|
|
10
|
+
* @beta
|
|
11
|
+
*/
|
|
12
|
+
export type PlaybackRateSettings = {
|
|
13
|
+
options?: PlaybackRateOption[];
|
|
14
|
+
defaultValue?: number;
|
|
15
|
+
};
|
|
2
16
|
/**
|
|
3
17
|
* `PLUGIN` that allows changing the playback speed of the video.
|
|
4
18
|
* @beta
|
|
@@ -6,17 +20,32 @@ import { UICorePlugin, Core } from '@clappr/core';
|
|
|
6
20
|
* @remarks
|
|
7
21
|
* Depends on:
|
|
8
22
|
*
|
|
9
|
-
* - {@link MediaControl
|
|
23
|
+
* - {@link MediaControl}
|
|
24
|
+
*
|
|
25
|
+
* - {@link BottomGear}
|
|
26
|
+
*
|
|
27
|
+
* It renders an option in the gear menu, which opens a dropdown with the options to change the playback rate.
|
|
28
|
+
* Note that the playback rate change is supported only for VOD or DVR-enabled live streams.
|
|
10
29
|
*
|
|
11
|
-
* - {@link
|
|
30
|
+
* Plugin settings - {@link PlaybackRateSettings}
|
|
12
31
|
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
32
|
+
* @example
|
|
33
|
+
* ```ts
|
|
34
|
+
* import { Player, PlaybackRateSettings } from '@gcorevideo/player'
|
|
35
|
+
* Player.registerPlugin(PlaybackRate)
|
|
36
|
+
* const player = new Player({
|
|
37
|
+
* playbackRate: {
|
|
38
|
+
* options: [
|
|
39
|
+
* { value: 0.5, label: '0.5x' },
|
|
40
|
+
* { value: 1, label: '1x' },
|
|
41
|
+
* ],
|
|
42
|
+
* defaultValue: 1,
|
|
43
|
+
* } as PlaybackRateSettings,
|
|
44
|
+
* })
|
|
45
|
+
* ```
|
|
15
46
|
*/
|
|
16
47
|
export declare class PlaybackRate extends UICorePlugin {
|
|
17
48
|
private playbackRates;
|
|
18
|
-
private prevSelectedRate;
|
|
19
|
-
private rendered;
|
|
20
49
|
private selectedRate;
|
|
21
50
|
/**
|
|
22
51
|
* @internal
|
|
@@ -41,9 +70,8 @@ export declare class PlaybackRate extends UICorePlugin {
|
|
|
41
70
|
* @internal
|
|
42
71
|
*/
|
|
43
72
|
get events(): {
|
|
44
|
-
'click
|
|
45
|
-
'click
|
|
46
|
-
'click .go-back': string;
|
|
73
|
+
'click [data-rate]': string;
|
|
74
|
+
'click #playback-rate-back-button': string;
|
|
47
75
|
};
|
|
48
76
|
/**
|
|
49
77
|
* @internal
|
|
@@ -51,8 +79,10 @@ export declare class PlaybackRate extends UICorePlugin {
|
|
|
51
79
|
bindEvents(): void;
|
|
52
80
|
private onCoreReady;
|
|
53
81
|
private onActiveContainerChange;
|
|
82
|
+
private onMediaControlRendered;
|
|
54
83
|
private onGearRendered;
|
|
55
|
-
private
|
|
84
|
+
private addGearItem;
|
|
85
|
+
private onMetaDataLoaded;
|
|
56
86
|
private allRateElements;
|
|
57
87
|
private rateElement;
|
|
58
88
|
private onPlaybackRateChange;
|
|
@@ -61,16 +91,14 @@ export declare class PlaybackRate extends UICorePlugin {
|
|
|
61
91
|
* @internal
|
|
62
92
|
*/
|
|
63
93
|
render(): this;
|
|
64
|
-
private onStartAd;
|
|
65
|
-
private onFinishAd;
|
|
66
94
|
private onPlay;
|
|
67
95
|
private resetPlaybackRate;
|
|
68
96
|
private onStop;
|
|
69
|
-
private
|
|
70
|
-
private onShowMenu;
|
|
97
|
+
private onSelect;
|
|
71
98
|
private goBack;
|
|
72
99
|
private setSelectedRate;
|
|
73
100
|
private getTitle;
|
|
74
101
|
private highlightCurrentRate;
|
|
102
|
+
private updateGearOptionLabel;
|
|
75
103
|
}
|
|
76
104
|
//# sourceMappingURL=PlaybackRate.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PlaybackRate.d.ts","sourceRoot":"","sources":["../../../src/plugins/playback-rate/PlaybackRate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAsB,IAAI,
|
|
1
|
+
{"version":3,"file":"PlaybackRate.d.ts","sourceRoot":"","sources":["../../../src/plugins/playback-rate/PlaybackRate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAsB,IAAI,EAAK,MAAM,cAAc,CAAA;AAiBhF;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAA;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAgBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,qBAAa,YAAa,SAAQ,YAAY;IAC5C,OAAO,CAAC,aAAa,CAA+C;IAKpE,OAAO,CAAC,YAAY,CAAwB;IAE5C;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAuB;IAE7D,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAqB;gBAE7C,IAAI,EAAE,IAAI;IAQtB;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;;MAKlB;IAED;;OAEG;IACM,UAAU;IASnB,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,uBAAuB;IAgB/B,OAAO,CAAC,sBAAsB;IAK9B,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,WAAW;IAiBnB,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,oBAAoB;IAe5B,OAAO,CAAC,YAAY;IAepB;;OAEG;IACM,MAAM;IAwCf,OAAO,CAAC,MAAM;IAWd,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,MAAM;IAEd,OAAO,CAAC,QAAQ;IAchB,OAAO,CAAC,MAAM;IAMd,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,oBAAoB;IAU5B,OAAO,CAAC,qBAAqB;CAI9B"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Events, UICorePlugin, Playback, template } from '@clappr/core';
|
|
1
|
+
import { Events, UICorePlugin, Playback, template, $ } from '@clappr/core';
|
|
2
2
|
import { trace } from '@gcorevideo/utils';
|
|
3
3
|
import assert from 'assert';
|
|
4
4
|
import { CLAPPR_VERSION } from '../../build.js';
|
|
@@ -8,18 +8,18 @@ import speedIcon from '../../../assets/icons/new/speed.svg';
|
|
|
8
8
|
import arrowRightIcon from '../../../assets/icons/new/arrow-right.svg';
|
|
9
9
|
import arrowLeftIcon from '../../../assets/icons/new/arrow-left.svg';
|
|
10
10
|
import checkIcon from '../../../assets/icons/new/check.svg';
|
|
11
|
+
import { GearEvents } from '../bottom-gear/BottomGear.js';
|
|
11
12
|
import { PlaybackEvents } from '../../playback/types.js';
|
|
12
|
-
import { MediaControlEvents, } from '../media-control/MediaControl.js';
|
|
13
13
|
const DEFAULT_PLAYBACK_RATES = [
|
|
14
|
-
{ value:
|
|
15
|
-
{ value:
|
|
16
|
-
{ value:
|
|
17
|
-
{ value:
|
|
18
|
-
{ value:
|
|
19
|
-
{ value:
|
|
20
|
-
{ value:
|
|
14
|
+
{ value: 0.5, label: '0.5x' },
|
|
15
|
+
{ value: 0.75, label: '0.75x' },
|
|
16
|
+
{ value: 1.0, label: '1x' },
|
|
17
|
+
{ value: 1.25, label: '1.25x' },
|
|
18
|
+
{ value: 1.5, label: '1.5x' },
|
|
19
|
+
{ value: 1.75, label: '1.75x' },
|
|
20
|
+
{ value: 2.0, label: '2x' },
|
|
21
21
|
];
|
|
22
|
-
const DEFAULT_PLAYBACK_RATE =
|
|
22
|
+
const DEFAULT_PLAYBACK_RATE = 1;
|
|
23
23
|
const T = 'plugins.playback_rate';
|
|
24
24
|
/**
|
|
25
25
|
* `PLUGIN` that allows changing the playback speed of the video.
|
|
@@ -28,18 +28,34 @@ const T = 'plugins.playback_rate';
|
|
|
28
28
|
* @remarks
|
|
29
29
|
* Depends on:
|
|
30
30
|
*
|
|
31
|
-
* - {@link MediaControl
|
|
31
|
+
* - {@link MediaControl}
|
|
32
32
|
*
|
|
33
|
-
* - {@link BottomGear
|
|
33
|
+
* - {@link BottomGear}
|
|
34
34
|
*
|
|
35
|
-
* It renders
|
|
36
|
-
* Note that the playback rate change is supported only for VOD or DVR
|
|
35
|
+
* It renders an option in the gear menu, which opens a dropdown with the options to change the playback rate.
|
|
36
|
+
* Note that the playback rate change is supported only for VOD or DVR-enabled live streams.
|
|
37
|
+
*
|
|
38
|
+
* Plugin settings - {@link PlaybackRateSettings}
|
|
39
|
+
*
|
|
40
|
+
* @example
|
|
41
|
+
* ```ts
|
|
42
|
+
* import { Player, PlaybackRateSettings } from '@gcorevideo/player'
|
|
43
|
+
* Player.registerPlugin(PlaybackRate)
|
|
44
|
+
* const player = new Player({
|
|
45
|
+
* playbackRate: {
|
|
46
|
+
* options: [
|
|
47
|
+
* { value: 0.5, label: '0.5x' },
|
|
48
|
+
* { value: 1, label: '1x' },
|
|
49
|
+
* ],
|
|
50
|
+
* defaultValue: 1,
|
|
51
|
+
* } as PlaybackRateSettings,
|
|
52
|
+
* })
|
|
53
|
+
* ```
|
|
37
54
|
*/
|
|
38
55
|
export class PlaybackRate extends UICorePlugin {
|
|
39
56
|
playbackRates = DEFAULT_PLAYBACK_RATES;
|
|
40
57
|
// Saved when an ad starts to restore after it finishes
|
|
41
|
-
prevSelectedRate
|
|
42
|
-
rendered = false;
|
|
58
|
+
// private prevSelectedRate: string | undefined
|
|
43
59
|
selectedRate = DEFAULT_PLAYBACK_RATE;
|
|
44
60
|
/**
|
|
45
61
|
* @internal
|
|
@@ -75,16 +91,15 @@ export class PlaybackRate extends UICorePlugin {
|
|
|
75
91
|
*/
|
|
76
92
|
get events() {
|
|
77
93
|
return {
|
|
78
|
-
'click
|
|
79
|
-
'click
|
|
80
|
-
'click .go-back': 'goBack',
|
|
94
|
+
'click [data-rate]': 'onSelect',
|
|
95
|
+
'click #playback-rate-back-button': 'goBack',
|
|
81
96
|
};
|
|
82
97
|
}
|
|
83
98
|
/**
|
|
84
99
|
* @internal
|
|
85
100
|
*/
|
|
86
101
|
bindEvents() {
|
|
87
|
-
this.
|
|
102
|
+
this.listenToOnce(this.core, Events.CORE_READY, this.onCoreReady);
|
|
88
103
|
this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChange);
|
|
89
104
|
}
|
|
90
105
|
onCoreReady() {
|
|
@@ -93,45 +108,56 @@ export class PlaybackRate extends UICorePlugin {
|
|
|
93
108
|
assert(mediaControl, 'media_control plugin is required');
|
|
94
109
|
const gear = this.core.getPlugin('bottom_gear');
|
|
95
110
|
assert(gear, 'bottom_gear plugin is required');
|
|
96
|
-
this.listenTo(mediaControl,
|
|
111
|
+
this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.onMediaControlRendered);
|
|
112
|
+
this.listenTo(gear, GearEvents.RENDERED, this.onGearRendered);
|
|
97
113
|
}
|
|
98
114
|
onActiveContainerChange() {
|
|
99
115
|
trace(`${T} onActiveContainerChange`);
|
|
100
116
|
this.listenTo(this.core.activePlayback, Events.PLAYBACK_STOP, this.onStop);
|
|
101
117
|
this.listenTo(this.core.activePlayback, Events.PLAYBACK_PLAY, this.onPlay);
|
|
102
118
|
this.listenTo(this.core.activePlayback, PlaybackEvents.PLAYBACK_RATE_CHANGED, this.onPlaybackRateChange);
|
|
103
|
-
this.listenTo(this.core.activeContainer, Events.
|
|
119
|
+
this.listenTo(this.core.activeContainer, Events.CONTAINER_LOADEDMETADATA, this.onMetaDataLoaded);
|
|
104
120
|
}
|
|
105
|
-
|
|
106
|
-
trace(`${T}
|
|
107
|
-
rendered: this.rendered,
|
|
108
|
-
});
|
|
109
|
-
this.rendered = false;
|
|
121
|
+
onMediaControlRendered() {
|
|
122
|
+
trace(`${T} onMediaControlRendered`);
|
|
110
123
|
this.render();
|
|
111
124
|
}
|
|
112
|
-
|
|
113
|
-
trace(`${T}
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
125
|
+
onGearRendered() {
|
|
126
|
+
trace(`${T} onGearRendered`);
|
|
127
|
+
this.addGearItem();
|
|
128
|
+
}
|
|
129
|
+
addGearItem() {
|
|
130
|
+
trace(`${T} addGearItem`);
|
|
131
|
+
this.core
|
|
132
|
+
.getPlugin('bottom_gear')
|
|
133
|
+
?.addItem('rate', this.$el)
|
|
134
|
+
.html($(PlaybackRate.buttonTemplate({
|
|
135
|
+
title: this.getTitle(),
|
|
136
|
+
speedIcon,
|
|
137
|
+
arrowRightIcon,
|
|
138
|
+
i18n: this.core.i18n,
|
|
139
|
+
})));
|
|
140
|
+
}
|
|
141
|
+
onMetaDataLoaded() {
|
|
142
|
+
trace(`${T} onMetaDataLoaded`);
|
|
143
|
+
this.render();
|
|
119
144
|
}
|
|
120
145
|
allRateElements() {
|
|
121
|
-
return this.$('
|
|
146
|
+
return this.$el.find('#playback-rate-menu li');
|
|
122
147
|
}
|
|
123
|
-
rateElement(rate
|
|
124
|
-
return this.$(
|
|
148
|
+
rateElement(rate) {
|
|
149
|
+
return this.$el.find(`#playback-rate-menu a[data-rate="${rate}"]`).parent();
|
|
125
150
|
}
|
|
126
151
|
onPlaybackRateChange(playbackRate) {
|
|
127
|
-
const selectedRate = parseInt(this.selectedRate, 10);
|
|
128
152
|
// TODO check it doesn't interfere with the DASH.js or HLS.js playback live catchup
|
|
129
|
-
if (Math.abs(playbackRate - selectedRate) > 0.1) {
|
|
130
|
-
|
|
153
|
+
if (Math.abs(playbackRate - this.selectedRate) > 0.1) {
|
|
154
|
+
this.core.activePlayback?.setPlaybackRate(this.selectedRate);
|
|
155
|
+
}
|
|
156
|
+
else {
|
|
157
|
+
trace(`${T} onPlaybackRateChange not steering to the selected rate, it is seemingly a catchup algorithm working`, {
|
|
131
158
|
playbackRate,
|
|
132
|
-
selectedRate,
|
|
159
|
+
selectedRate: this.selectedRate,
|
|
133
160
|
});
|
|
134
|
-
this.core.activePlayback?.setPlaybackRate(selectedRate);
|
|
135
161
|
}
|
|
136
162
|
}
|
|
137
163
|
shouldRender() {
|
|
@@ -149,38 +175,35 @@ export class PlaybackRate extends UICorePlugin {
|
|
|
149
175
|
*/
|
|
150
176
|
render() {
|
|
151
177
|
trace(`${T} render`, {
|
|
152
|
-
rendered: this.rendered,
|
|
153
178
|
shouldRender: this.shouldRender(),
|
|
154
179
|
});
|
|
155
180
|
if (!this.shouldRender()) {
|
|
156
181
|
return this;
|
|
157
182
|
}
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
title: this.getTitle(),
|
|
163
|
-
speedIcon,
|
|
164
|
-
arrowRightIcon,
|
|
183
|
+
this.$el.html(PlaybackRate.listTemplate({
|
|
184
|
+
arrowLeftIcon,
|
|
185
|
+
checkIcon,
|
|
186
|
+
current: this.selectedRate,
|
|
165
187
|
i18n: this.core.i18n,
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
this.
|
|
169
|
-
?.getElement('rate')
|
|
170
|
-
?.html(this.el);
|
|
171
|
-
this.rendered = true;
|
|
188
|
+
playbackRates: this.playbackRates,
|
|
189
|
+
}));
|
|
190
|
+
this.addGearItem();
|
|
172
191
|
return this;
|
|
173
192
|
}
|
|
174
|
-
onStartAd() {
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
193
|
+
// private onStartAd() {
|
|
194
|
+
// this.prevSelectedRate = this.selectedRate
|
|
195
|
+
// this.resetPlaybackRate()
|
|
196
|
+
// this.listenToOnce(
|
|
197
|
+
// this.core.activePlayback,
|
|
198
|
+
// Events.PLAYBACK_PLAY,
|
|
199
|
+
// this.onFinishAd,
|
|
200
|
+
// )
|
|
201
|
+
// }
|
|
202
|
+
// private onFinishAd() {
|
|
203
|
+
// if (this.prevSelectedRate) {
|
|
204
|
+
// this.setSelectedRate(this.prevSelectedRate)
|
|
205
|
+
// }
|
|
206
|
+
// }
|
|
184
207
|
onPlay() {
|
|
185
208
|
if (this.core.getPlaybackType() === Playback.LIVE &&
|
|
186
209
|
!this.core.activePlayback.dvrEnabled) {
|
|
@@ -194,44 +217,39 @@ export class PlaybackRate extends UICorePlugin {
|
|
|
194
217
|
this.setSelectedRate(DEFAULT_PLAYBACK_RATE);
|
|
195
218
|
}
|
|
196
219
|
onStop() { }
|
|
197
|
-
|
|
220
|
+
onSelect(event) {
|
|
198
221
|
event.stopPropagation();
|
|
199
|
-
const rate = event.currentTarget.dataset.rate;
|
|
222
|
+
const rate = parseFloat(event.currentTarget.dataset.rate || '');
|
|
200
223
|
if (rate) {
|
|
201
224
|
this.setSelectedRate(rate);
|
|
202
225
|
this.highlightCurrentRate();
|
|
226
|
+
this.updateGearOptionLabel();
|
|
203
227
|
}
|
|
204
228
|
return false;
|
|
205
229
|
}
|
|
206
|
-
onShowMenu() {
|
|
207
|
-
this.$el.html(PlaybackRate.listTemplate({
|
|
208
|
-
playbackRates: this.playbackRates,
|
|
209
|
-
arrowLeftIcon,
|
|
210
|
-
checkIcon,
|
|
211
|
-
i18n: this.core.i18n,
|
|
212
|
-
}));
|
|
213
|
-
this.core.getPlugin('bottom_gear')?.setContent(this.el);
|
|
214
|
-
this.highlightCurrentRate();
|
|
215
|
-
}
|
|
216
230
|
goBack() {
|
|
217
231
|
setTimeout(() => {
|
|
218
232
|
this.core.getPlugin('bottom_gear').refresh();
|
|
219
233
|
}, 0);
|
|
220
234
|
}
|
|
221
235
|
setSelectedRate(rate) {
|
|
222
|
-
// Set <video playbackRate="..."
|
|
223
236
|
this.core.activePlayback?.setPlaybackRate(rate);
|
|
224
237
|
this.selectedRate = rate;
|
|
225
238
|
}
|
|
226
239
|
getTitle() {
|
|
227
240
|
return (this.playbackRates.find((r) => r.value === this.selectedRate)?.label ||
|
|
228
|
-
this.selectedRate);
|
|
241
|
+
`x${this.selectedRate}`);
|
|
229
242
|
}
|
|
230
243
|
highlightCurrentRate() {
|
|
231
244
|
this.allRateElements().removeClass('current');
|
|
232
245
|
this.allRateElements().find('a').removeClass('gcore-skin-active');
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
246
|
+
this.rateElement(this.selectedRate)
|
|
247
|
+
.addClass('current')
|
|
248
|
+
.find('a')
|
|
249
|
+
.addClass('gcore-skin-active');
|
|
250
|
+
}
|
|
251
|
+
updateGearOptionLabel() {
|
|
252
|
+
trace(`${T} updateGearOptionLabel`);
|
|
253
|
+
this.addGearItem();
|
|
236
254
|
}
|
|
237
255
|
}
|
|
@@ -248,7 +248,7 @@ export class ClosedCaptions extends UICorePlugin {
|
|
|
248
248
|
this.$line = $(ClosedCaptions.templateString());
|
|
249
249
|
this.resizeFont();
|
|
250
250
|
this.core.activeContainer.$el.append(this.$line);
|
|
251
|
-
mediaControl.putElement('cc', this
|
|
251
|
+
mediaControl.putElement('cc', this.$el);
|
|
252
252
|
this.updateSelection();
|
|
253
253
|
this.renderIcon();
|
|
254
254
|
return this;
|
package/lib/testUtils.d.ts
CHANGED
|
@@ -108,4 +108,5 @@ export declare function createMockContainer(playback?: any): Events<string | sym
|
|
|
108
108
|
trigger: <T extends string | symbol>(event: T, ...args: any[]) => boolean;
|
|
109
109
|
};
|
|
110
110
|
export declare function createMockMediaControl(core: any): UICorePlugin;
|
|
111
|
+
export declare function createMockBottomGear(core: any): any;
|
|
111
112
|
//# sourceMappingURL=testUtils.d.ts.map
|
package/lib/testUtils.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/testUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,YAAY,EAAE,MAAM,cAAc,CAAA;AACxD,OAAO,MAAM,MAAM,eAAe,CAAA;AAElC;;;;GAIG;AACH,qBAAa,aAAc,SAAQ,MAAM;IAErC,SAAS,CAAC,OAAO,EAAE,GAAG;IACtB,QAAQ,CAAC,IAAI,EAAE,GAAG;IAClB,SAAS,CAAC,WAAW,CAAC,EAAE,GAAG;gBAFjB,OAAO,EAAE,GAAG,EACb,IAAI,EAAE,GAAG,EACR,WAAW,CAAC,EAAE,GAAG,YAAA;IAK7B,IAAI,IAAI,WAEP;IAED,OAAO;IAEP,IAAI;IAEJ,KAAK;IAEL,IAAI;IAEJ,OAAO;IAEP,IAAI;IAEJ,cAAc;IAEd,WAAW;IAIX,QAAQ;IAER,OAAO;IAEP,eAAe;IAIf,kBAAkB;IAIlB,cAAc;IAId,qBAAqB;IAIrB,IAAI;IAEJ,MAAM;IAEN,MAAM;IAEN,SAAS;IAET,eAAe;IAIf,WAAW;IAIX,QAAQ;IAIR,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE;CAGtC;AAED,wBAAgB,cAAc,CAC5B,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,SAAS,GAAE,GAA2B;;;;;;;;;;;;;;;;EAqBvC;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiC/C;AAED,wBAAgB,mBAAmB,CAAC,QAAQ,GAAE,GAA0B;;;;;;;;;;;;;EAiBvE;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAiB/C"}
|
|
1
|
+
{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/testUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,YAAY,EAAE,MAAM,cAAc,CAAA;AACxD,OAAO,MAAM,MAAM,eAAe,CAAA;AAElC;;;;GAIG;AACH,qBAAa,aAAc,SAAQ,MAAM;IAErC,SAAS,CAAC,OAAO,EAAE,GAAG;IACtB,QAAQ,CAAC,IAAI,EAAE,GAAG;IAClB,SAAS,CAAC,WAAW,CAAC,EAAE,GAAG;gBAFjB,OAAO,EAAE,GAAG,EACb,IAAI,EAAE,GAAG,EACR,WAAW,CAAC,EAAE,GAAG,YAAA;IAK7B,IAAI,IAAI,WAEP;IAED,OAAO;IAEP,IAAI;IAEJ,KAAK;IAEL,IAAI;IAEJ,OAAO;IAEP,IAAI;IAEJ,cAAc;IAEd,WAAW;IAIX,QAAQ;IAER,OAAO;IAEP,eAAe;IAIf,kBAAkB;IAIlB,cAAc;IAId,qBAAqB;IAIrB,IAAI;IAEJ,MAAM;IAEN,MAAM;IAEN,SAAS;IAET,eAAe;IAIf,WAAW;IAIX,QAAQ;IAIR,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE;CAGtC;AAED,wBAAgB,cAAc,CAC5B,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,SAAS,GAAE,GAA2B;;;;;;;;;;;;;;;;EAqBvC;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiC/C;AAED,wBAAgB,mBAAmB,CAAC,QAAQ,GAAE,GAA0B;;;;;;;;;;;;;EAiBvE;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAiB/C;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,OAY7C"}
|
package/lib/testUtils.js
CHANGED
|
@@ -161,3 +161,16 @@ export function createMockMediaControl(core) {
|
|
|
161
161
|
mediaControl.toggleElement = vi.fn();
|
|
162
162
|
return mediaControl;
|
|
163
163
|
}
|
|
164
|
+
export function createMockBottomGear(core) {
|
|
165
|
+
const plugin = new UICorePlugin(core);
|
|
166
|
+
plugin.getItem = vi.fn();
|
|
167
|
+
plugin.addItem = vi.fn().mockImplementation((name, $el) => {
|
|
168
|
+
const existing = plugin.$el.find(`[data-${name}]`);
|
|
169
|
+
if (existing.length) {
|
|
170
|
+
return existing;
|
|
171
|
+
}
|
|
172
|
+
return $('<li></li>').attr(`data-${name}`, '').append($el).appendTo(plugin.$el);
|
|
173
|
+
});
|
|
174
|
+
plugin.refresh = vi.fn();
|
|
175
|
+
return plugin;
|
|
176
|
+
}
|
package/package.json
CHANGED
|
@@ -662,7 +662,6 @@ export default class DashPlayback extends BasePlayback {
|
|
|
662
662
|
get audioTracks(): AudioTrack[] {
|
|
663
663
|
assert.ok(this._dash, 'DASH.js MediaPlayer is not initialized')
|
|
664
664
|
const tracks = this._dash.getTracksFor('audio')
|
|
665
|
-
trace(`${T} get audioTracks`, { tracks })
|
|
666
665
|
return tracks.map(toClapprTrack)
|
|
667
666
|
}
|
|
668
667
|
|