@gcorevideo/player 2.21.1 → 2.21.4

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.
Files changed (97) hide show
  1. package/assets/audio-selector/style.scss +1 -1
  2. package/assets/audio-selector/track-selector.ejs +3 -3
  3. package/assets/bottom-gear/bottomgear.ejs +2 -2
  4. package/assets/media-control/container.scss +1 -1
  5. package/assets/media-control/media-control.ejs +1 -11
  6. package/assets/media-control/media-control.scss +49 -57
  7. package/assets/media-control/width270.scss +1 -1
  8. package/assets/media-control/width370.scss +7 -9
  9. package/assets/playback-rate/button.ejs +2 -2
  10. package/assets/playback-rate/list.ejs +4 -4
  11. package/assets/subtitles/combobox.ejs +10 -12
  12. package/assets/subtitles/string.ejs +1 -1
  13. package/assets/subtitles/style.scss +9 -16
  14. package/dist/core.js +5 -1
  15. package/dist/index.css +782 -794
  16. package/dist/index.js +240 -244
  17. package/dist/player.d.ts +141 -119
  18. package/dist/plugins/index.css +862 -874
  19. package/dist/plugins/index.js +222 -238
  20. package/docs/api/player.bottomgear.getelement.md +2 -2
  21. package/docs/api/player.bottomgear.md +1 -1
  22. package/docs/api/{player.subtitles.hide.md → player.closedcaptions.hide.md} +2 -2
  23. package/docs/api/{player.subtitles.md → player.closedcaptions.md} +11 -11
  24. package/docs/api/{player.subtitles.show.md → player.closedcaptions.show.md} +2 -2
  25. package/docs/api/player.closedcaptionspluginsettings.md +13 -0
  26. package/docs/api/player.gearitemelement.md +6 -4
  27. package/docs/api/player.gearoptionsitem.md +16 -0
  28. package/docs/api/player.md +48 -12
  29. package/docs/api/player.mediacontrol.putelement.md +2 -2
  30. package/docs/api/player.mediacontrolelement.md +1 -1
  31. package/docs/api/player.playbackrate.md +1 -1
  32. package/docs/api/player.subtitlespluginsettings.md +18 -0
  33. package/docs/api/player.texttrackitem.id.md +11 -0
  34. package/docs/api/player.texttrackitem.md +87 -0
  35. package/docs/api/player.texttrackitem.name.md +11 -0
  36. package/docs/api/player.texttrackitem.track.md +11 -0
  37. package/lib/index.d.ts +1 -1
  38. package/lib/index.js +1 -1
  39. package/lib/index.plugins.d.ts +2 -1
  40. package/lib/index.plugins.d.ts.map +1 -1
  41. package/lib/index.plugins.js +2 -1
  42. package/lib/playback/BasePlayback.d.ts +1 -0
  43. package/lib/playback/BasePlayback.d.ts.map +1 -1
  44. package/lib/playback/BasePlayback.js +3 -0
  45. package/lib/playback/dash-playback/DashPlayback.d.ts.map +1 -1
  46. package/lib/playback/dash-playback/DashPlayback.js +1 -0
  47. package/lib/playback.types.d.ts +5 -0
  48. package/lib/playback.types.d.ts.map +1 -1
  49. package/lib/plugins/audio-selector/AudioSelector.d.ts +2 -3
  50. package/lib/plugins/audio-selector/AudioSelector.d.ts.map +1 -1
  51. package/lib/plugins/audio-selector/AudioSelector.js +6 -7
  52. package/lib/plugins/bottom-gear/BottomGear.d.ts +7 -3
  53. package/lib/plugins/bottom-gear/BottomGear.d.ts.map +1 -1
  54. package/lib/plugins/bottom-gear/BottomGear.js +4 -2
  55. package/lib/plugins/media-control/MediaControl.d.ts +5 -6
  56. package/lib/plugins/media-control/MediaControl.d.ts.map +1 -1
  57. package/lib/plugins/media-control/MediaControl.js +48 -39
  58. package/lib/plugins/picture-in-picture/PictureInPicture.d.ts +1 -0
  59. package/lib/plugins/picture-in-picture/PictureInPicture.d.ts.map +1 -1
  60. package/lib/plugins/picture-in-picture/PictureInPicture.js +4 -4
  61. package/lib/plugins/playback-rate/PlaybackRate.d.ts +1 -1
  62. package/lib/plugins/playback-rate/PlaybackRate.d.ts.map +1 -1
  63. package/lib/plugins/playback-rate/PlaybackRate.js +24 -14
  64. package/lib/plugins/subtitles/ClosedCaptions.d.ts +118 -0
  65. package/lib/plugins/subtitles/ClosedCaptions.d.ts.map +1 -0
  66. package/lib/plugins/subtitles/ClosedCaptions.js +348 -0
  67. package/lib/plugins/subtitles/Subtitles.d.ts +31 -26
  68. package/lib/plugins/subtitles/Subtitles.d.ts.map +1 -1
  69. package/lib/plugins/subtitles/Subtitles.js +138 -169
  70. package/lib/testUtils.d.ts +22 -18
  71. package/lib/testUtils.d.ts.map +1 -1
  72. package/lib/testUtils.js +22 -36
  73. package/package.json +1 -1
  74. package/src/index.plugins.ts +2 -1
  75. package/src/index.ts +1 -1
  76. package/src/playback/BasePlayback.ts +4 -0
  77. package/src/playback/dash-playback/DashPlayback.ts +1 -0
  78. package/src/playback.types.ts +6 -0
  79. package/src/plugins/audio-selector/AudioSelector.ts +9 -8
  80. package/src/plugins/bottom-gear/BottomGear.ts +14 -5
  81. package/src/plugins/bottom-gear/__tests__/BottomGear.test.ts +1 -1
  82. package/src/plugins/bottom-gear/__tests__/__snapshots__/BottomGear.test.ts.snap +2 -2
  83. package/src/plugins/media-control/MediaControl.ts +84 -60
  84. package/src/plugins/media-control/__tests__/MediaControl.test.ts +43 -0
  85. package/src/plugins/media-control/__tests__/__snapshots__/MediaControl.test.ts.snap +175 -0
  86. package/src/plugins/picture-in-picture/PictureInPicture.ts +5 -5
  87. package/src/plugins/playback-rate/PlaybackRate.ts +143 -100
  88. package/src/plugins/playback-rate/__tests__/PlaybackRate.test.ts +65 -0
  89. package/src/plugins/playback-rate/__tests__/__snapshots__/PlaybackRate.test.ts.snap +11 -0
  90. package/src/plugins/subtitles/ClosedCaptions.ts +469 -0
  91. package/src/plugins/subtitles/__tests__/ClosedCaptions.test.ts +58 -0
  92. package/src/plugins/subtitles/__tests__/__snapshots__/ClosedCaptions.test.ts.snap +25 -0
  93. package/src/testUtils.ts +22 -36
  94. package/temp/player.api.json +269 -89
  95. package/tsconfig.tsbuildinfo +1 -1
  96. package/src/plugins/index.ts +0 -39
  97. package/src/plugins/subtitles/Subtitles.ts +0 -496
@@ -0,0 +1,118 @@
1
+ import { UICorePlugin } from '@clappr/core';
2
+ import '../../../assets/subtitles/style.scss';
3
+ export type ClosedCaptionsPluginSettings = {
4
+ /**
5
+ * Initially selected subtitles language
6
+ */
7
+ language?: string;
8
+ };
9
+ /**
10
+ * @deprecated Use {@link ClosedCaptionsPluginSettings} instead.
11
+ */
12
+ export type SubtitlesPluginSettings = ClosedCaptionsPluginSettings;
13
+ /**
14
+ * `PLUGIN` that provides a UI to select the subtitles when available.
15
+ * @beta
16
+ *
17
+ * @remarks
18
+ * The plugin is activated when closed captions tracks are provided with the media source.
19
+ * It shows a familiar "CC" button with a dropdown menu to select the subtitles language.
20
+ *
21
+ * Depends on:
22
+ *
23
+ * - {@link MediaControl}
24
+ *
25
+ * Configuration options - {@link ClosedCaptionsPluginSettings}
26
+ * @example
27
+ * ```ts
28
+ * import { ClosedCaptions } from '@gcorevideo/player'
29
+ *
30
+ * Player.registerPlugin(ClosedCaptions)
31
+ *
32
+ * new Player({
33
+ * ...
34
+ * cc: {
35
+ * language: 'en',
36
+ * },
37
+ * })
38
+ * ```
39
+ */
40
+ export declare class ClosedCaptions extends UICorePlugin {
41
+ private isPreselectedApplied;
42
+ private isShowing;
43
+ private track;
44
+ private tracks;
45
+ private $line;
46
+ /**
47
+ * @internal
48
+ */
49
+ get name(): string;
50
+ /**
51
+ * @internal
52
+ */
53
+ get supportedVersion(): {
54
+ min: string;
55
+ };
56
+ /**
57
+ * @internal
58
+ */
59
+ static get version(): string;
60
+ private static readonly template;
61
+ private static readonly templateString;
62
+ /**
63
+ * @internal
64
+ */
65
+ get attributes(): {
66
+ class: string;
67
+ };
68
+ /**
69
+ * @internal
70
+ */
71
+ get events(): {
72
+ 'click [data-cc-select]': string;
73
+ 'click [data-cc-button]': string;
74
+ };
75
+ private get preselectedLanguage();
76
+ /**
77
+ * @internal
78
+ */
79
+ bindEvents(): void;
80
+ private onCoreReady;
81
+ private onContainerChanged;
82
+ private onSubtitleAvailable;
83
+ private onSubtitleChanged;
84
+ private applyTracks;
85
+ private onStartAd;
86
+ private onFinishAd;
87
+ private playerResize;
88
+ /**
89
+ * Hides the subtitles menu and the subtitles.
90
+ */
91
+ hide(): void;
92
+ /**
93
+ * Shows the subtitles menu and the subtitles.
94
+ */
95
+ show(): void;
96
+ private shouldRender;
97
+ private resizeFont;
98
+ /**
99
+ * @internal
100
+ */
101
+ render(): this;
102
+ private findById;
103
+ private selectItem;
104
+ private onItemSelect;
105
+ private applyPreselectedSubtitles;
106
+ private hideMenu;
107
+ private toggleMenu;
108
+ private itemElement;
109
+ private allItemElements;
110
+ private selectSubtitles;
111
+ private getSubtitleText;
112
+ private setSubtitleText;
113
+ private clearSubtitleText;
114
+ private updateSelection;
115
+ private highlightCurrentSubtitles;
116
+ private renderIcon;
117
+ }
118
+ //# sourceMappingURL=ClosedCaptions.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ClosedCaptions.d.ts","sourceRoot":"","sources":["../../../src/plugins/subtitles/ClosedCaptions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAwB,MAAM,cAAc,CAAA;AAOzE,OAAO,sCAAsC,CAAA;AAe7C,MAAM,MAAM,4BAA4B,GAAG;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG,4BAA4B,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,cAAe,SAAQ,YAAY;IAC9C,OAAO,CAAC,oBAAoB,CAAQ;IAEpC,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAO,CAAC,KAAK,CAA6B;IAE1C,OAAO,CAAC,MAAM,CAAsB;IAEpC,OAAO,CAAC,KAAK,CAA2B;IAExC;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAyB;IAEzD,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAuB;IAE7D;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;;MAKlB;IAED,OAAO,KAAK,mBAAmB,GAE9B;IAED;;OAEG;IACM,UAAU;IAUnB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,kBAAkB;IAwC1B,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,iBAAiB;IA+BzB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,SAAS;IAWjB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,YAAY;IAqBpB;;OAEG;IACH,IAAI;IAWJ;;OAEG;IACH,IAAI;IAiBJ,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,UAAU;IAUlB;;OAEG;IACM,MAAM;IA0Bf,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,yBAAyB;IAgBjC,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,eAAe;IAgBvB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,yBAAyB;IAgBjC,OAAO,CAAC,UAAU;CAKnB"}
@@ -0,0 +1,348 @@
1
+ import { Events, UICorePlugin, Browser, template, $ } from '@clappr/core';
2
+ import { reportError, trace } from '@gcorevideo/utils';
3
+ import assert from 'assert';
4
+ import { CLAPPR_VERSION } from '../../build.js';
5
+ import '../../../assets/subtitles/style.scss';
6
+ import subtitlesOffIcon from '../../../assets/icons/new/subtitles-off.svg';
7
+ import subtitlesOnIcon from '../../../assets/icons/new/subtitles-on.svg';
8
+ import comboboxHTML from '../../../assets/subtitles/combobox.ejs';
9
+ import stringHTML from '../../../assets/subtitles/string.ejs';
10
+ import { isFullscreen } from '../utils.js';
11
+ const VERSION = '2.19.14';
12
+ const LOCAL_STORAGE_CC_ID = 'gplayer.plugins.cc.selected';
13
+ const T = 'plugins.cc';
14
+ /**
15
+ * `PLUGIN` that provides a UI to select the subtitles when available.
16
+ * @beta
17
+ *
18
+ * @remarks
19
+ * The plugin is activated when closed captions tracks are provided with the media source.
20
+ * It shows a familiar "CC" button with a dropdown menu to select the subtitles language.
21
+ *
22
+ * Depends on:
23
+ *
24
+ * - {@link MediaControl}
25
+ *
26
+ * Configuration options - {@link ClosedCaptionsPluginSettings}
27
+ * @example
28
+ * ```ts
29
+ * import { ClosedCaptions } from '@gcorevideo/player'
30
+ *
31
+ * Player.registerPlugin(ClosedCaptions)
32
+ *
33
+ * new Player({
34
+ * ...
35
+ * cc: {
36
+ * language: 'en',
37
+ * },
38
+ * })
39
+ * ```
40
+ */
41
+ export class ClosedCaptions extends UICorePlugin {
42
+ isPreselectedApplied = false;
43
+ isShowing = false;
44
+ track = null;
45
+ tracks = [];
46
+ $line = null;
47
+ /**
48
+ * @internal
49
+ */
50
+ get name() {
51
+ return 'cc';
52
+ }
53
+ /**
54
+ * @internal
55
+ */
56
+ get supportedVersion() {
57
+ return { min: CLAPPR_VERSION };
58
+ }
59
+ /**
60
+ * @internal
61
+ */
62
+ static get version() {
63
+ return VERSION;
64
+ }
65
+ static template = template(comboboxHTML);
66
+ static templateString = template(stringHTML);
67
+ /**
68
+ * @internal
69
+ */
70
+ get attributes() {
71
+ return {
72
+ class: 'media-control-cc',
73
+ };
74
+ }
75
+ /**
76
+ * @internal
77
+ */
78
+ get events() {
79
+ return {
80
+ 'click [data-cc-select]': 'onItemSelect',
81
+ 'click [data-cc-button]': 'toggleMenu',
82
+ };
83
+ }
84
+ get preselectedLanguage() {
85
+ return this.core.options.cc?.language ?? this.core.options.subtitles?.language ?? '';
86
+ }
87
+ /**
88
+ * @internal
89
+ */
90
+ bindEvents() {
91
+ this.listenTo(this.core, Events.CORE_READY, this.onCoreReady);
92
+ this.listenTo(this.core, Events.CORE_RESIZE, this.playerResize);
93
+ this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onContainerChanged);
94
+ }
95
+ onCoreReady() {
96
+ trace(`${T} onCoreReady`);
97
+ const mediaControl = this.core.getPlugin('media_control');
98
+ assert(mediaControl, 'media_control plugin is required');
99
+ this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
100
+ this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hideMenu);
101
+ }
102
+ onContainerChanged() {
103
+ trace(`${T} onContainerChanged`);
104
+ this.listenTo(this.core.activeContainer, Events.CONTAINER_FULLSCREEN, this.playerResize);
105
+ this.listenTo(this.core.activeContainer, 'container:advertisement:start', this.onStartAd);
106
+ this.listenTo(this.core.activePlayback, Events.PLAYBACK_SUBTITLE_AVAILABLE, this.onSubtitleAvailable);
107
+ this.listenTo(this.core.activePlayback, Events.PLAYBACK_SUBTITLE_CHANGED, this.onSubtitleChanged);
108
+ // fix for iOS
109
+ const video = this.core.activePlayback.el;
110
+ assert(video, 'video element is required');
111
+ video.addEventListener('webkitbeginfullscreen', () => {
112
+ if (Browser.isiOS) {
113
+ video.classList.add('ios-fullscreen');
114
+ }
115
+ });
116
+ video.addEventListener('webkitendfullscreen', () => {
117
+ if (Browser.isiOS) {
118
+ video.classList.remove('ios-fullscreen');
119
+ }
120
+ });
121
+ }
122
+ onSubtitleAvailable() {
123
+ trace(`${T} onSubtitleAvailable`);
124
+ this.applyTracks();
125
+ }
126
+ onSubtitleChanged({ id }) {
127
+ trace(`${T} onSubtitleChanged`, { id });
128
+ if (id === -1) {
129
+ this.clearSubtitleText();
130
+ }
131
+ for (const track of this.tracks) {
132
+ if (track.id === id) {
133
+ track.track.mode = 'showing';
134
+ this.setSubtitleText(this.getSubtitleText(track.track));
135
+ track.track.oncuechange = (e) => {
136
+ try {
137
+ if (track.track.activeCues?.length) {
138
+ const html = track.track.activeCues[0].getCueAsHTML();
139
+ this.setSubtitleText(html);
140
+ }
141
+ else {
142
+ this.clearSubtitleText();
143
+ }
144
+ }
145
+ catch (error) {
146
+ reportError(error);
147
+ }
148
+ };
149
+ }
150
+ else {
151
+ track.track.oncuechange = null;
152
+ track.track.mode = 'hidden';
153
+ }
154
+ }
155
+ }
156
+ applyTracks() {
157
+ try {
158
+ this.tracks = this.core.activePlayback.closedCaptionsTracks;
159
+ this.applyPreselectedSubtitles();
160
+ this.render();
161
+ }
162
+ catch (error) {
163
+ reportError(error);
164
+ }
165
+ }
166
+ onStartAd() {
167
+ if (this.isShowing && this.core.activeContainer) {
168
+ this.hide();
169
+ this.listenTo(this.core.activeContainer, 'container:advertisement:finish', this.onFinishAd);
170
+ }
171
+ }
172
+ onFinishAd() {
173
+ this.show();
174
+ this.stopListening(this.core.activeContainer, 'container:advertisement:finish', this.onFinishAd);
175
+ }
176
+ playerResize() {
177
+ trace(`${T} playerResize`);
178
+ const shouldShow = this.core.activeContainer &&
179
+ isFullscreen(this.core.activeContainer.el) &&
180
+ this.track &&
181
+ this.track.track.mode &&
182
+ Browser.isiOS &&
183
+ this.isShowing;
184
+ if (shouldShow) {
185
+ this.show();
186
+ }
187
+ try {
188
+ this.resizeFont();
189
+ }
190
+ catch (error) {
191
+ reportError(error);
192
+ }
193
+ }
194
+ /**
195
+ * Hides the subtitles menu and the subtitles.
196
+ */
197
+ hide() {
198
+ this.isShowing = false;
199
+ this.renderIcon();
200
+ this.$line.hide();
201
+ if (this.tracks) {
202
+ for (const t of this.tracks) {
203
+ t.track.mode = 'hidden';
204
+ }
205
+ }
206
+ }
207
+ /**
208
+ * Shows the subtitles menu and the subtitles.
209
+ */
210
+ show() {
211
+ this.isShowing = true;
212
+ this.renderIcon();
213
+ if (this.core.activeContainer &&
214
+ isFullscreen(this.core.activeContainer.el) &&
215
+ this.track &&
216
+ this.track.track.mode &&
217
+ Browser.isiOS) {
218
+ this.$line.hide();
219
+ this.track.track.mode = 'showing';
220
+ }
221
+ else {
222
+ this.$line.show();
223
+ }
224
+ }
225
+ shouldRender() {
226
+ return this.tracks?.length > 0;
227
+ }
228
+ resizeFont() {
229
+ if (!this.$line) {
230
+ return;
231
+ }
232
+ const skinWidth = this.core.activeContainer.$el.width();
233
+ this.$line.find('p').css('font-size', skinWidth * 0.03);
234
+ }
235
+ /**
236
+ * @internal
237
+ */
238
+ render() {
239
+ if (!this.core.activeContainer) {
240
+ return this;
241
+ }
242
+ if (!this.shouldRender()) {
243
+ return this;
244
+ }
245
+ const mediaControl = this.core.getPlugin('media_control');
246
+ this.$el.html(ClosedCaptions.template({ tracks: this.tracks }));
247
+ this.core.activeContainer.$el.find('#cc-line').remove();
248
+ this.$line = $(ClosedCaptions.templateString());
249
+ this.resizeFont();
250
+ this.core.activeContainer.$el.append(this.$line);
251
+ mediaControl.putElement('cc', this.el);
252
+ this.updateSelection();
253
+ this.renderIcon();
254
+ return this;
255
+ }
256
+ findById(id) {
257
+ return this.tracks.find((track) => track.id === id) ?? null;
258
+ }
259
+ selectItem(item) {
260
+ this.clearSubtitleText();
261
+ this.track = item;
262
+ this.hideMenu();
263
+ this.updateSelection();
264
+ }
265
+ onItemSelect(event) {
266
+ const id = event.target.dataset.ccSelect ?? '-1';
267
+ trace(`${T} onItemSelect`, { id });
268
+ localStorage.setItem(LOCAL_STORAGE_CC_ID, id);
269
+ this.selectItem(this.findById(Number(id)));
270
+ return false;
271
+ }
272
+ applyPreselectedSubtitles() {
273
+ if (!this.isPreselectedApplied) {
274
+ this.isPreselectedApplied = true;
275
+ if (!this.preselectedLanguage) {
276
+ return;
277
+ }
278
+ setTimeout(() => {
279
+ this.selectItem(this.tracks.find((t) => t.track.language === this.preselectedLanguage) ?? null);
280
+ }, 300); // TODO why delay?
281
+ }
282
+ }
283
+ hideMenu() {
284
+ ;
285
+ this.$('[data-cc] ul').hide();
286
+ }
287
+ toggleMenu() {
288
+ trace(`${T} toggleMenu`);
289
+ this.$('[data-cc] ul').toggle();
290
+ }
291
+ itemElement(id) {
292
+ return this.$(`ul li a[data-cc-select="${id}"]`).parent();
293
+ }
294
+ allItemElements() {
295
+ return this.$('[data-cc] li');
296
+ }
297
+ selectSubtitles() {
298
+ const trackId = this.track ? this.track.id : -1;
299
+ this.core.activePlayback.closedCaptionsTrackId = trackId;
300
+ }
301
+ getSubtitleText(track) {
302
+ const currentTime = this.core.activePlayback?.getCurrentTime() ?? 0;
303
+ const cues = track.cues;
304
+ const lines = [];
305
+ if (cues && cues.length) {
306
+ for (const cue of cues) {
307
+ if (currentTime >= cue.startTime && currentTime <= cue.endTime) {
308
+ lines.push(cue.getCueAsHTML().textContent);
309
+ }
310
+ }
311
+ }
312
+ return lines.join('\n');
313
+ }
314
+ setSubtitleText(text) {
315
+ this.$line.find('p').html(text);
316
+ }
317
+ clearSubtitleText() {
318
+ this.setSubtitleText('');
319
+ }
320
+ updateSelection() {
321
+ if (!this.track) {
322
+ this.hide();
323
+ }
324
+ else {
325
+ this.show();
326
+ }
327
+ this.selectSubtitles();
328
+ this.highlightCurrentSubtitles();
329
+ }
330
+ highlightCurrentSubtitles() {
331
+ this.allItemElements()
332
+ .removeClass('current')
333
+ .find('a')
334
+ .removeClass('gcore-skin-active');
335
+ trace(`${T} highlightCurrentSubtitles`, {
336
+ track: this.track?.id,
337
+ });
338
+ const currentLevelElement = this.itemElement(this.track ? this.track.id : -1);
339
+ currentLevelElement
340
+ .addClass('current')
341
+ .find('a')
342
+ .addClass('gcore-skin-active');
343
+ }
344
+ renderIcon() {
345
+ const icon = this.isShowing ? subtitlesOnIcon : subtitlesOffIcon;
346
+ this.$el.find('span.cc-text').html(icon);
347
+ }
348
+ }
@@ -1,5 +1,15 @@
1
1
  import { UICorePlugin } from '@clappr/core';
2
2
  import '../../../assets/subtitles/style.scss';
3
+ export type ClosedCaptionsPluginSettings = {
4
+ /**
5
+ * Initially selected subtitles language
6
+ */
7
+ language?: string;
8
+ };
9
+ /**
10
+ * @deprecated Use {@link ClosedCaptionsPluginSettings} instead.
11
+ */
12
+ export type SubtitlesPluginSettings = ClosedCaptionsPluginSettings;
3
13
  /**
4
14
  * `PLUGIN` that provides a UI to select the subtitles when available.
5
15
  * @beta
@@ -9,31 +19,27 @@ import '../../../assets/subtitles/style.scss';
9
19
  *
10
20
  * - {@link MediaControl}
11
21
  *
12
- * Configuration options:
13
- *
14
- * - subtitles.language - The language of the subtitles to select by default.
15
- *
22
+ * Configuration options - {@link ClosedCaptionsPluginSettings}
16
23
  * @example
17
24
  * ```ts
18
- * import { Subtitles } from '@gcorevideo/player'
25
+ * import { ClosedCaptions } from '@gcorevideo/player'
19
26
  *
20
- * Player.registerPlugin(Subtitles)
27
+ * Player.registerPlugin(ClosedCaptions)
21
28
  *
22
29
  * new Player({
23
30
  * ...
24
- * subtitles: {
31
+ * cc: {
25
32
  * language: 'en',
26
33
  * },
27
34
  * })
28
35
  * ```
29
36
  */
30
37
  export declare class Subtitles extends UICorePlugin {
31
- private currentLevel;
32
38
  private isPreselectedApplied;
33
39
  private isShowing;
34
40
  private track;
35
41
  private tracks;
36
- private $string;
42
+ private $line;
37
43
  /**
38
44
  * @internal
39
45
  */
@@ -55,22 +61,24 @@ export declare class Subtitles extends UICorePlugin {
55
61
  */
56
62
  get attributes(): {
57
63
  class: string;
58
- 'data-subtitles': string;
59
64
  };
60
65
  /**
61
66
  * @internal
62
67
  */
63
68
  get events(): {
64
- 'click [data-subtitles-select]': string;
65
- 'click [data-subtitles-button]': string;
69
+ 'click [data-cc-select]': string;
70
+ 'click [data-cc-button]': string;
66
71
  };
67
72
  private get preselectedLanguage();
68
73
  /**
69
74
  * @internal
70
75
  */
71
76
  bindEvents(): void;
72
- private bindPlaybackEvents;
73
- private getTracks;
77
+ private onCoreReady;
78
+ private onContainerChanged;
79
+ private onSubtitleAvailable;
80
+ private onSubtitleChanged;
81
+ private applyTracks;
74
82
  private onStartAd;
75
83
  private onFinishAd;
76
84
  private playerResize;
@@ -88,22 +96,19 @@ export declare class Subtitles extends UICorePlugin {
88
96
  * @internal
89
97
  */
90
98
  render(): this;
91
- private setTracks;
92
- private findLevelBy;
93
- private selectLevel;
94
- private onLevelSelect;
99
+ private findById;
100
+ private selectItem;
101
+ private onItemSelect;
95
102
  private applyPreselectedSubtitles;
96
- private onShowLevelSelectMenu;
97
- private hideSelectLevelMenu;
98
- private toggleContextMenu;
99
- private buttonElement;
100
- private levelElement;
101
- private startLevelSwitch;
102
- private stopLevelSwitch;
103
+ private hideMenu;
104
+ private toggleMenu;
105
+ private itemElement;
106
+ private allItemElements;
103
107
  private selectSubtitles;
108
+ private getSubtitleText;
104
109
  private setSubtitleText;
105
110
  private clearSubtitleText;
106
- private updateCurrentLevel;
111
+ private updateSelection;
107
112
  private highlightCurrentSubtitles;
108
113
  private renderIcon;
109
114
  }
@@ -1 +1 @@
1
- {"version":3,"file":"Subtitles.d.ts","sourceRoot":"","sources":["../../../src/plugins/subtitles/Subtitles.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,YAAY,EAIb,MAAM,cAAc,CAAA;AAMrB,OAAO,sCAAsC,CAAA;AAuB7C;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,SAAU,SAAQ,YAAY;IACzC,OAAO,CAAC,YAAY,CAA6B;IAEjD,OAAO,CAAC,oBAAoB,CAAQ;IAEpC,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAO,CAAC,KAAK,CAAiC;IAE9C,OAAO,CAAC,MAAM,CAA6B;IAE3C,OAAO,CAAC,OAAO,CAA2B;IAE1C;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAyB;IAEzD,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAuB;IAE7D;;OAEG;IACH,IAAa,UAAU;;;MAKtB;IAED;;OAEG;IACH,IAAa,MAAM;;;MAKlB;IAED,OAAO,KAAK,mBAAmB,GAE9B;IAED;;OAEG;IACM,UAAU;IAiBnB,OAAO,CAAC,kBAAkB;IAkC1B,OAAO,CAAC,SAAS;IAcjB,OAAO,CAAC,SAAS;IAWjB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,YAAY;IAoBpB;;OAEG;IACH,IAAI;IAWJ;;OAEG;IACH,IAAI;IAiBJ,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,UAAU;IAclB;;OAEG;IACM,MAAM;IAwCf,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,aAAa;IAWrB,OAAO,CAAC,yBAAyB;IASjC,OAAO,CAAC,qBAAqB;IAK7B,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,eAAe;IAgDvB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,yBAAyB;IAYjC,OAAO,CAAC,UAAU;CASnB"}
1
+ {"version":3,"file":"Subtitles.d.ts","sourceRoot":"","sources":["../../../src/plugins/subtitles/Subtitles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAwB,MAAM,cAAc,CAAA;AAOzE,OAAO,sCAAsC,CAAA;AAe7C,MAAM,MAAM,4BAA4B,GAAG;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG,4BAA4B,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBAAa,SAAU,SAAQ,YAAY;IACzC,OAAO,CAAC,oBAAoB,CAAQ;IAEpC,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAO,CAAC,KAAK,CAA6B;IAE1C,OAAO,CAAC,MAAM,CAAsB;IAEpC,OAAO,CAAC,KAAK,CAA2B;IAExC;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAyB;IAEzD,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAuB;IAE7D;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;;MAKlB;IAED,OAAO,KAAK,mBAAmB,GAE9B;IAED;;OAEG;IACM,UAAU;IAUnB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,kBAAkB;IAwC1B,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,iBAAiB;IA+BzB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,SAAS;IAWjB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,YAAY;IAqBpB;;OAEG;IACH,IAAI;IAWJ;;OAEG;IACH,IAAI;IAiBJ,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,UAAU;IAUlB;;OAEG;IACM,MAAM;IA0Bf,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,yBAAyB;IAgBjC,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,eAAe;IAgBvB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,yBAAyB;IAgBjC,OAAO,CAAC,UAAU;CAKnB"}