@gcorevideo/player 2.28.35 → 2.29.0

package/lib/plugins/multi-camera/MultiCamera.js

@@ -1,11 +1,10 @@
 import { Browser, Events, Playback, template, UICorePlugin, } from '@clappr/core';
 import { reportError, trace } from '@gcorevideo/utils';
+import { guessMimeType, MIME_TYPE_DASH } from '../../utils/mediaSources.js';
 import { CLAPPR_VERSION } from '../../build.js';
 import pluginHtml from '../../../assets/multi-camera/multicamera.ejs';
 import '../../../assets/multi-camera/style.scss';
 import streamsIcon from '../../../assets/icons/old/streams.svg';
-import streamsMomentoIcon from '../../../assets/icons/old/language.svg';
-import streamsWhiteNightsIcon from '../../../assets/icons/old/wn.svg';
 const VERSION = '0.0.1';
 const T = 'plugins.multicamera';
 /**
@@ -53,6 +52,8 @@ export class MultiCamera extends UICorePlugin {
         // Don't mutate the options, TODO check if some plugin observes the options.multicamera
         this.multicamera = this.options.multisources.map((item) => ({ ...item }));
         this.noActiveStreams = this.multicamera.every((item) => !item.live);
+        // TODO filter out non-live
+        this.core.options.sources = expandMediaSource(this.multicamera[0]);
     }
     bindEvents() {
         this.listenTo(this.core, Events.CORE_READY, this.bindPlaybackEvents);
@@ -61,15 +62,10 @@ export class MultiCamera extends UICorePlugin {
         this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_HIDE, this.hideSelectLevelMenu);
     }
     unBindEvents() {
-        // @ts-ignore
-        this.stopListening(this.core, Events.CORE_READY);
-        // @ts-ignore
-        this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED);
-        // @ts-ignore
-        this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_RENDERED);
-        // @ts-ignore
-        this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_HIDE);
-        // @ts-ignore
+        this.stopListening(this.core, Events.CORE_READY, this.bindPlaybackEvents);
+        this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.reload);
+        this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
+        this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_HIDE, this.hideSelectLevelMenu);
         this.stopListening(this.core.activePlayback, Events.PLAYBACK_PLAY, this.onPlay);
     }
     onPlay() {
@@ -85,80 +81,53 @@ export class MultiCamera extends UICorePlugin {
         this.bindPlaybackEvents();
     }
     shouldRender() {
-        if (!this.core.activeContainer || this.noActiveStreams) {
-            return false;
-        }
-        if (!this.core.activePlayback) {
+        if (this.noActiveStreams) {
             return false;
         }
         return this.multicamera.length >= 2;
     }
     render() {
-        if (this.shouldRender()) {
-            let numActiveSources = 0;
-            // const currentSource = this.core.options.source
-            const currentSource = this.core.activePlayback?.sourceMedia;
-            for (const item of this.multicamera) {
-                if (item.live) {
-                    numActiveSources++;
-                }
-                if (!this.currentCamera && item.source === currentSource) {
-                    this.currentCamera = item;
-                }
-            }
-            // const mediaControl = this.core.getPlugin('media_control')
-            if (this.currentTime &&
-                // TODO check the last active playback type instead
-                // !mediaControl.$el.hasClass('live') &&
-                this.core.getPlaybackType() !== Playback.LIVE) {
-                if (this.currentTime < this.core.activePlayback.getDuration()) {
-                    this.core.activePlayback.seek(this.currentTime);
-                }
-                this.currentTime = 0;
-                // if (mediaControl.$el.hasClass('dvr')) {
-                //   this.core.activeContainer.dvrInUse = true;
-                // }
-            }
-            // TODO current source
-            this.$el.html(this.template({
-                streams: this.multicamera,
-                multisources_mode: this.options.multisourcesMode,
-            }));
-            if ((numActiveSources <= 1 &&
-                this.options.multisourcesMode !== 'show_all') ||
-                this.options.multisourcesMode === 'one_first') {
-                this.$el.hide();
-            }
-            else {
-                this.$el.show();
-            }
-            if (this.core.mediaControl.$multiCameraSelector &&
-                this.core.mediaControl.$multiCameraSelector.length > 0) {
-                this.core.mediaControl.$multiCameraSelector.append(this.el);
+        if (!this.core.activeContainer || !this.core.activePlayback) {
+            return this;
+        }
+        if (!this.shouldRender()) {
+            return this;
+        }
+        let numActiveSources = 0;
+        const currentSource = this.core.activePlayback?.sourceMedia;
+        for (const item of this.multicamera) {
+            if (item.live) {
+                numActiveSources++;
             }
-            else {
-                this.core.mediaControl.$('.media-control-right-panel').append(this.el);
+            if (!this.currentCamera && item.source === currentSource) {
+                this.currentCamera = item;
             }
-            if (Object.prototype.hasOwnProperty.call(this.core.mediaControl, '$multiCameraSelector') &&
-                this.core.mediaControl.$multiCameraSelector.find('span.multicamera-icon').length > 0) {
-                if (~window.location.href.indexOf('whitenights.gcdn.co')) {
-                    this.core.mediaControl.$multiCameraSelector
-                        .find('span.multicamera-icon')
-                        .append(streamsWhiteNightsIcon);
-                }
-                else if (~window.location.href.indexOf('momentosolutions.gcdn.co')) {
-                    this.core.mediaControl.$multiCameraSelector
-                        .find('span.multicamera-icon')
-                        .append(streamsMomentoIcon);
-                }
-                else {
-                    this.core.mediaControl.$multiCameraSelector
-                        .find('span.multicamera-icon')
-                        .append(streamsIcon);
-                }
+        }
+        if (this.currentTime &&
+            this.core.getPlaybackType() !== Playback.LIVE) {
+            if (this.currentTime < this.core.activePlayback.getDuration()) {
+                this.core.activePlayback.seek(this.currentTime);
             }
-            this.highlightCurrentLevel();
+            this.currentTime = 0;
         }
+        this.$el.html(this.template({
+            streams: this.multicamera,
+            multisources_mode: this.options.multisourcesMode,
+        }));
+        if ((numActiveSources < 2 &&
+            this.options.multisourcesMode !== 'show_all') ||
+            this.options.multisourcesMode === 'one_first') {
+            this.$el.hide();
+        }
+        else {
+            this.$el.show();
+        }
+        const mediaControl = this.core.getPlugin('media_control');
+        mediaControl.slot('multicamera', this.$el);
+        this.$el
+            .find('span.multicamera-icon')
+            .html(streamsIcon);
+        this.highlightCurrentLevel();
         return this;
     }
     onCameraSelect(event) {
@@ -171,33 +140,6 @@ export class MultiCamera extends UICorePlugin {
         event.stopPropagation();
         return false;
     }
-    activeById(id, active) {
-        this.setLiveStatus(id, active);
-        if (!this.currentCamera && !this.noActiveStreams) {
-            return;
-        }
-        if (this.noActiveStreams && !active) {
-            return;
-        }
-        if (this.currentCamera) {
-            if (this.options.multisourcesMode === 'only_live') {
-                this.behaviorLive(id, active);
-            }
-            if (this.options.multisourcesMode === 'one_first') {
-                this.behaviorOne(id, active);
-            }
-            if (this.options.multisourcesMode === 'show_all') {
-                this.behaviorAll(id, active);
-            }
-        }
-        else {
-            if (this.noActiveStreams && active) {
-                this.changeById(id);
-                this.noActiveStreams = false;
-            }
-        }
-        this.render();
-    }
     setLiveStatus(id, active) {
         try {
             const index = this.findIndexById(id);
@@ -260,7 +202,6 @@ export class MultiCamera extends UICorePlugin {
         this.currentCamera = null;
         this.noActiveStreams = true;
         this.core.trigger('core:multicamera:no_active_translation');
-        // this.changeById(this.multicamera[nextIndex].id);
     }
     showError() {
         this.core.activePlayback.pause();
@@ -283,7 +224,7 @@ export class MultiCamera extends UICorePlugin {
     }
     hideError() {
         try {
-            this.core.mediaControl.enableControlButton();
+            this.core.getPlugin('media_control')?.enableControlButton();
         }
         catch (error) {
             reportError(error);
@@ -293,14 +234,9 @@ export class MultiCamera extends UICorePlugin {
         trace(`${T} changeById`, { id });
         queueMicrotask(() => {
             const playbackOptions = this.core.options.playback || {};
-            // TODO figure out what this does
+            // TODO figure out if it's needed
             playbackOptions.recycleVideo = Browser.isMobile;
-            this.currentCamera = this.findElementById(id) ?? null;
-            trace(`${T} changeById`, {
-                id,
-                currentCamera: this.currentCamera,
-                multicamera: this.multicamera,
-            });
+            this.currentCamera = this.findElementById(id);
             if (!this.currentCamera) {
                 return;
             }
@@ -322,26 +258,16 @@ export class MultiCamera extends UICorePlugin {
             this.core.configure({
                 playback: playbackOptions,
                 source: this.currentCamera.source, // TODO ensure that the preferred transport is used
-                video360: {
-                    // TODO
-                    projection: this.currentCamera.projection,
-                },
                 fullscreenDisable,
                 autoPlay: this.playing,
                 disableCanAutoPlay: true,
             });
-            this.core.activeContainer.mediaControlDisabled = false;
+            this.core.activeContainer?.enableMediaControl();
         });
         this.toggleContextMenu();
     }
-    getCamerasList() {
-        return this.multicamera;
-    }
-    getCurrentCamera() {
-        return this.currentCamera;
-    }
     findElementById(id) {
-        return this.multicamera.find((element) => element.id === id);
+        return this.multicamera.find((element) => element.id === id) ?? null;
     }
     findIndexById(id) {
         return this.multicamera.findIndex((element) => element.id === id);
@@ -351,20 +277,14 @@ export class MultiCamera extends UICorePlugin {
     }
     hideSelectLevelMenu() {
         ;
-        this.$('.multicamera ul').hide();
+        this.$('ul').hide();
     }
     toggleContextMenu() {
         ;
-        this.$('.multicamera ul').toggle();
-    }
-    // private buttonElement(): ZeptoResult {
-    //   return this.$('.multicamera button');
-    // }
-    // private buttonElementText(): ZeptoResult {
-    //   return this.$('.multicamera button .quality-text');
-    // }
+        this.$('ul').toggle();
+    }
     levelElement(id) {
-        return this.$('.multicamera ul li > div' +
+        return this.$('ul .multicamera-item' +
             (id !== undefined
                 ? '[data-multicamera-selector-select="' + id + '"]'
                 : ''));
@@ -376,3 +296,19 @@ export class MultiCamera extends UICorePlugin {
             this.levelElement(this.currentCamera.id).addClass('multicamera-active');
     }
 }
+function expandMediaSource(source) {
+    const result = [{
+            source: source.source,
+            mimeType: guessMimeType(source.source),
+        }];
+    if (source.source_dash) {
+        result.push({
+            source: source.source_dash,
+            mimeType: MIME_TYPE_DASH,
+        });
+    }
+    if (source.hls_mpegts_url) {
+        result.push(source.hls_mpegts_url);
+    }
+    return result;
+}

package/lib/plugins/source-controller/SourceController.d.ts

@@ -4,45 +4,6 @@ import { type PlayerMediaSourceDesc } from '../../types.js';
  * `PLUGIN` that is managing the automatic failover between media sources.
  * @public
  * @remarks
- * Have a look at the {@link https://miro.com/app/board/uXjVLiN15tY=/?share_link_id=390327585787 | source failover diagram} for the details
- * on how sources ordering and selection works. Below is a simplified diagram:
- *
- * ```markdown
- * sources_list:
- *       - a.mpd  |    +--------------------+
- *       - b.m3u8 |--->|         init       |
- *       - ...    |    |--------------------|
- *                     | current_source = 0 |
- *                     +--------------------+
- *                            |
- *                            |  source = a.mpd
- *                            |  playback = dash.js
- *                            v
- *                      +------------------+
- *                  +-->|   load source    |
- *                  |   +---------|--------+
- *                  |             v
- *                  |   +------------------+
- *                  |   |       play       |
- *                  |   +---------|--------+
- *                  |             |
- *                  |             v
- *                  |   +-----------------------+
- *                  |   |  on playback_error    |
- *                  |   |-----------------------|
- *                  |   | current_source =      |
- *                  |   |  (current_source + 1) |
- *                  |   |  % len sources_list   |
- *                  |   |                       |
- *                  |   | delay 1..3s           |
- *                  |   +---------------|-------+
- *                  |                   |
- *                  |   source=b.m3u8   |
- *                  |   playback=hls.js |
- *                  +-------------------+
- *
- * ```
- *
  * @example
  * ```ts
  * import { SourceController } from '@gcorevideo/player'

package/lib/plugins/source-controller/SourceController.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SourceController.d.ts","sourceRoot":"","sources":["../../../src/plugins/source-controller/SourceController.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,UAAU,EACV,KAAK,IAAI,IAAI,UAAU,EACxB,MAAM,cAAc,CAAA;AAErB,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,gBAAgB,CAAA;AAsB3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,qBAAa,gBAAiB,SAAQ,UAAU;IAwC9C,OAAO,CAAC,WAAW,CAA8B;IAEjD,OAAO,CAAC,kBAAkB,CAAI;IAE9B,OAAO,CAAC,YAAY,CAA6B;IAEjD,OAAO,CAAC,MAAM,CAAQ;IAEtB,OAAO,CAAC,QAAQ,CAAQ;IAExB,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAO,CAAC,IAAI,CAAiB;IAE7B;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;gBACS,IAAI,EAAE,UAAU;IAY5B;;;;;;;OAOG;IACH,cAAc,CAAC,WAAW,EAAE,qBAAqB,EAAE;IAQnD;;OAEG;IACM,UAAU;IAWnB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,wBAAwB;IAgBhC,OAAO,CAAC,2BAA2B;IAiDnC,OAAO,CAAC,KAAK;IAKb,OAAO,CAAC,aAAa;IAgCrB,OAAO,CAAC,kBAAkB;IAe1B;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;CACF"}
+{"version":3,"file":"SourceController.d.ts","sourceRoot":"","sources":["../../../src/plugins/source-controller/SourceController.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,UAAU,EACV,KAAK,IAAI,IAAI,UAAU,EACxB,MAAM,cAAc,CAAA;AAErB,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,gBAAgB,CAAA;AAsB3D;;;;;;;;;;GAUG;AACH,qBAAa,gBAAiB,SAAQ,UAAU;IAwC9C,OAAO,CAAC,WAAW,CAA8B;IAEjD,OAAO,CAAC,kBAAkB,CAAI;IAE9B,OAAO,CAAC,YAAY,CAA6B;IAEjD,OAAO,CAAC,MAAM,CAAQ;IAEtB,OAAO,CAAC,QAAQ,CAAQ;IAExB,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAO,CAAC,IAAI,CAAiB;IAE7B;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;gBACS,IAAI,EAAE,UAAU;IAY5B;;;;;;;OAOG;IACH,cAAc,CAAC,WAAW,EAAE,qBAAqB,EAAE;IAQnD;;OAEG;IACM,UAAU;IAWnB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,wBAAwB;IAgBhC,OAAO,CAAC,2BAA2B;IAiDnC,OAAO,CAAC,KAAK;IAKb,OAAO,CAAC,aAAa;IAgCrB,OAAO,CAAC,kBAAkB;IAe1B;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;CACF"}

package/lib/plugins/source-controller/SourceController.js

@@ -15,45 +15,6 @@ function noSync(cb) {
  * `PLUGIN` that is managing the automatic failover between media sources.
  * @public
  * @remarks
- * Have a look at the {@link https://miro.com/app/board/uXjVLiN15tY=/?share_link_id=390327585787 | source failover diagram} for the details
- * on how sources ordering and selection works. Below is a simplified diagram:
- *
- * ```markdown
- * sources_list:
- *       - a.mpd  |    +--------------------+
- *       - b.m3u8 |--->|         init       |
- *       - ...    |    |--------------------|
- *                     | current_source = 0 |
- *                     +--------------------+
- *                            |
- *                            |  source = a.mpd
- *                            |  playback = dash.js
- *                            v
- *                      +------------------+
- *                  +-->|   load source    |
- *                  |   +---------|--------+
- *                  |             v
- *                  |   +------------------+
- *                  |   |       play       |
- *                  |   +---------|--------+
- *                  |             |
- *                  |             v
- *                  |   +-----------------------+
- *                  |   |  on playback_error    |
- *                  |   |-----------------------|
- *                  |   | current_source =      |
- *                  |   |  (current_source + 1) |
- *                  |   |  % len sources_list   |
- *                  |   |                       |
- *                  |   | delay 1..3s           |
- *                  |   +---------------|-------+
- *                  |                   |
- *                  |   source=b.m3u8   |
- *                  |   playback=hls.js |
- *                  +-------------------+
- *
- * ```
- *
  * @example
  * ```ts
  * import { SourceController } from '@gcorevideo/player'

package/lib/plugins/subtitles/ClosedCaptions.d.ts

@@ -1,5 +1,5 @@
 import { UICorePlugin } from '@clappr/core';
-import '../../../assets/subtitles/style.scss';
+import '../../../assets/cc/style.scss';
 /**
  * Configuration options for the {@link ClosedCaptions} plugin.
  * @public

package/lib/plugins/subtitles/ClosedCaptions.d.ts.map

@@ -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;AAmB7C;;;GAGG;AACH,MAAM,MAAM,4BAA4B,GAAG;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;CAC3B,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,qBAAa,cAAe,SAAQ,YAAY;IAC9C,OAAO,CAAC,iBAAiB,CAAQ;IAEjC,OAAO,CAAC,MAAM,CAAQ;IAEtB,OAAO,CAAC,IAAI,CAAQ;IAEpB,OAAO,CAAC,kBAAkB,CAAa;IAEvC,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,eAAe,CAAyB;IAEhE,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAuB;IAE3D;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;;MAKlB;IAED,OAAO,KAAK,mBAAmB,GAI9B;IAED,OAAO,CAAC,qBAAqB;IAO7B;;OAEG;IACM,UAAU;IAWnB,OAAO,CAAC,WAAW;IAmBnB,OAAO,CAAC,kBAAkB;IAiD1B,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,aAAa;IAmCrB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,iBAAiB;IAqBzB;;OAEG;IACH,IAAI;IAYJ;;OAEG;IACH,IAAI;IAiBJ,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,UAAU;IAUlB;;OAEG;IACM,MAAM;IA+Bf,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,sBAAsB;IAuB9B,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,eAAe;IAiBvB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,yBAAyB;IAiBjC,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,KAAK;IAOb,OAAO,KAAK,kBAAkB,GAO7B;IAED,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,KAAK,YAAY,QAEvB;IAED,OAAO,KAAK,aAAa,QAMxB;IAED,OAAO,CAAC,SAAS,CAA+C;CACjE"}
+{"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,+BAA+B,CAAA;AAmBtC;;;GAGG;AACH,MAAM,MAAM,4BAA4B,GAAG;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;CAC3B,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,qBAAa,cAAe,SAAQ,YAAY;IAC9C,OAAO,CAAC,iBAAiB,CAAQ;IAEjC,OAAO,CAAC,MAAM,CAAQ;IAEtB,OAAO,CAAC,IAAI,CAAQ;IAEpB,OAAO,CAAC,kBAAkB,CAAa;IAEvC,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,eAAe,CAAyB;IAEhE,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAuB;IAE3D;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;;MAKlB;IAED,OAAO,KAAK,mBAAmB,GAI9B;IAED,OAAO,CAAC,qBAAqB;IAO7B;;OAEG;IACM,UAAU;IAWnB,OAAO,CAAC,WAAW;IAuBnB,OAAO,CAAC,kBAAkB;IAiD1B,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,aAAa;IAuCrB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,iBAAiB;IAqBzB;;OAEG;IACH,IAAI;IAcJ;;OAEG;IACH,IAAI;IAgBJ,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,UAAU;IAUlB;;OAEG;IACM,MAAM;IAmCf,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,sBAAsB;IAwB9B,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,eAAe;IAiBvB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,yBAAyB;IAiBjC,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,KAAK;IAOb,OAAO,KAAK,kBAAkB,GAO7B;IAED,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,KAAK,YAAY,QAEvB;IAED,OAAO,KAAK,aAAa,QAMxB;IAED,OAAO,CAAC,SAAS,CAA+C;CACjE"}

package/lib/plugins/subtitles/ClosedCaptions.js

@@ -2,18 +2,15 @@ import { Events, UICorePlugin, Browser, template, $ } from '@clappr/core';
 import { reportError } from '@gcorevideo/utils';
 import assert from 'assert';
 import { CLAPPR_VERSION } from '../../build.js';
-import '../../../assets/subtitles/style.scss';
+import '../../../assets/cc/style.scss';
 import subtitlesOffIcon from '../../../assets/icons/new/subtitles-off.svg';
 import subtitlesOnIcon from '../../../assets/icons/new/subtitles-on.svg';
-import comboboxHTML from '../../../assets/subtitles/combobox.ejs';
-import stringHTML from '../../../assets/subtitles/string.ejs';
+import comboboxHTML from '../../../assets/cc/combobox.ejs';
+import stringHTML from '../../../assets/cc/string.ejs';
 import { isFullscreen } from '../utils/fullscreen.js';
 import { ExtendedEvents } from '../media-control/MediaControl.js';
 import { mediaControlClickaway } from '../../utils/clickaway.js';
 const VERSION = '2.19.14';
-// TODO review
-// const LOCAL_STORAGE_CC_ID = 'gplayer.plugins.cc.selected'
-const T = 'plugins.cc';
 /**
  * `PLUGIN` that provides a UI to select the subtitles when available.
  * @public
@@ -115,8 +112,12 @@ export class ClosedCaptions extends UICorePlugin {
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
         this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.mount);
+        this.listenTo(mediaControl, Events.MEDIACONTROL_SHOW, () => {
+            this.$line?.removeClass('media-control-cc-pulled');
+        });
         this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, () => {
             this.hideMenu();
+            this.$line?.addClass('media-control-cc-pulled');
         });
         this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, (from) => {
             if (from !== this.name) {
@@ -174,23 +175,27 @@ export class ClosedCaptions extends UICorePlugin {
         this.activateTrack(id);
     }
     activateTrack(id) {
-        if (this.core.activePlayback && ['dash', 'hls'].includes(this.core.activePlayback.name)) {
-            this.core.activePlayback.setTextTrack(id);
+        const isManaged = this.core.activePlayback?.name === 'hls';
+        this.core.activePlayback.setTextTrack(id);
+        if (isManaged) {
+            return;
+        }
+        if (!this.core.activePlayback?.el.textTracks) {
             return;
         }
-        for (const track of this.currentTracks) {
-            if (track.id === id) {
+        for (const [index, track] of Array.from(this.core.activePlayback?.el.textTracks ?? []).entries()) {
+            if (index === id) {
                 if (this.useNativeSubtitles) {
-                    track.track.mode = 'showing';
+                    track.mode = 'showing';
                 }
                 else {
-                    track.track.mode = 'hidden';
+                    track.mode = 'hidden';
                 }
-                this.setSubtitleText(this.getSubtitleText(track.track));
-                track.track.oncuechange = (e) => {
+                this.setSubtitleText(this.getSubtitleText(track));
+                track.oncuechange = () => {
                     try {
-                        if (track.track.activeCues?.length) {
-                            const html = track.track.activeCues[0].getCueAsHTML();
+                        if (track.activeCues?.length) {
+                            const html = track.activeCues[0].getCueAsHTML();
                             this.setSubtitleText(html);
                         }
                         else {
@@ -203,8 +208,8 @@ export class ClosedCaptions extends UICorePlugin {
                 };
             }
             else {
-                track.track.oncuechange = () => { };
-                track.track.mode = 'disabled';
+                track.oncuechange = () => { };
+                track.mode = 'disabled';
             }
         }
     }
@@ -247,8 +252,10 @@ export class ClosedCaptions extends UICorePlugin {
         this.$el.find('#gplayer-cc-menu').hide();
         this.$el.find('#gplayer-cc-button').attr('aria-expanded', 'false');
         this.$line.hide();
-        for (const track of this.currentTracks) {
-            track.track.mode = 'hidden';
+        for (const track of this.core.activePlayback.el.textTracks) {
+            if (track.mode === 'showing') {
+                track.mode = 'hidden';
+            }
         }
     }
     /**
@@ -260,7 +267,6 @@ export class ClosedCaptions extends UICorePlugin {
         if (this.core.activeContainer &&
             isFullscreen(this.core.activeContainer.el) &&
             this.currentTrack &&
-            // this.currentTrack.track.mode &&
             (Browser.isiOS || this.useNativeSubtitles)) {
             this.$line.hide();
             this.currentTrack.track.mode = 'showing';
@@ -302,6 +308,10 @@ export class ClosedCaptions extends UICorePlugin {
         this.resizeFont();
         this.clampPopup();
         this.core.activeContainer.$el.append(this.$line);
+        const mc = this.core.getPlugin('media_control');
+        if (!mc?.isVisible()) {
+            this.$line?.addClass('media-control-cc-pulled');
+        }
         this.updateSelection();
         this.renderIcon();
         return this;
@@ -407,7 +417,7 @@ export class ClosedCaptions extends UICorePlugin {
         this.setSubtitleText('');
     }
     updateSelection() {
-        if (!this.currentTrack) {
+        if (this.core.activePlayback.closedCaptionsTrackId === -1) {
             this.hide();
         }
         else {

package/lib/testUtils.d.ts

@@ -65,6 +65,7 @@ export declare function createMockPlayback(name?: string, options?: Record<strin
     canAutoPlay: import("vitest").Mock<(...args: any[]) => any>;
     onResize: import("vitest").Mock<(...args: any[]) => any>;
     setPlaybackRate: import("vitest").Mock<(...args: any[]) => any>;
+    setTextTrack: import("vitest").Mock<(...args: any[]) => any>;
     switchAudioTrack: import("vitest").Mock<(...args: any[]) => any>;
     trigger: <T extends string | symbol>(event: T, ...args: any[]) => boolean;
 };

package/lib/testUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/testUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAK,YAAY,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,MAAM,MAAM,eAAe,CAAA;AAGlC,wBAAgB,cAAc,CAC5B,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,SAAS,GAAE,GAAkC;;;;;;;;;;;;;;;;;;EAuB9C;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAChC,IAAI,SAAS,EACb,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuCtC;AAED,wBAAgB,mBAAmB,CACjC,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,QAAQ,GAAE,GAAgD;;;;;;;;;;;;;;;;;;;;;;;;;EA8B3D;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAyB/C;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,OAe7C"}
+{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/testUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAK,YAAY,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,MAAM,MAAM,eAAe,CAAA;AAGlC,wBAAgB,cAAc,CAC5B,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,SAAS,GAAE,GAAkC;;;;;;;;;;;;;;;;;;EAuB9C;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAChC,IAAI,SAAS,EACb,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwCtC;AAED,wBAAgB,mBAAmB,CACjC,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,QAAQ,GAAE,GAAgD;;;;;;;;;;;;;;;;;;;;;;;;;EA8B3D;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBA2B/C;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,OAe7C"}

package/lib/testUtils.js

@@ -71,6 +71,7 @@ export function createMockPlayback(name = 'mock', options = {}) {
         canAutoPlay: vi.fn().mockImplementation(() => true),
         onResize: vi.fn().mockImplementation(() => true),
         setPlaybackRate: vi.fn(),
+        setTextTrack: vi.fn(),
         switchAudioTrack: vi.fn(),
         trigger: emitter.emit,
     });
@@ -122,6 +123,8 @@ export function createMockMediaControl(core) {
     // @ts-ignore
     mediaControl.getAvailablePopupHeight = vi.fn().mockReturnValue(286);
     // @ts-ignore
+    mediaControl.isVisible = vi.fn().mockReturnValue(true);
+    // @ts-ignore
     mediaControl.toggleElement = vi.fn();
     // @ts-ignore
     mediaControl.setKeepVisible = vi.fn();

package/lib/utils/mediaSources.d.ts

@@ -1,7 +1,11 @@
 import type { PlayerMediaSource, PlayerMediaSourceDesc, TransportPreference } from '../types';
+export declare const MIME_TYPES_HLS: string[];
+export declare const MIME_TYPE_HLS: string;
+export declare const MIME_TYPE_DASH = "application/dash+xml";
 export declare function buildMediaSourcesList(sources: PlayerMediaSourceDesc[], priorityTransport?: TransportPreference): PlayerMediaSourceDesc[];
 export declare function unwrapSource(s: PlayerMediaSource): string;
 export declare function wrapSource(s: PlayerMediaSource): PlayerMediaSourceDesc;
+export declare function guessMimeType(s: string): string | undefined;
 export declare function isDashSource(source: string, mimeType?: string): boolean;
 export declare function isHlsSource(source: string, mimeType?: string): boolean;
 //# sourceMappingURL=mediaSources.d.ts.map

package/lib/utils/mediaSources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mediaSources.d.ts","sourceRoot":"","sources":["../../src/utils/mediaSources.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,iBAAiB,EACjB,qBAAqB,EACrB,mBAAmB,EACpB,MAAM,UAAU,CAAA;AAIjB,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,qBAAqB,EAAE,EAChC,iBAAiB,GAAE,mBAA4B,GAC9C,qBAAqB,EAAE,CAqCzB;AAED,wBAAgB,YAAY,CAAC,CAAC,EAAE,iBAAiB,GAAG,MAAM,CAEzD;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,iBAAiB,GAAG,qBAAqB,CAEtE;AAYD,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,WAK7D;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,WAO5D"}
+{"version":3,"file":"mediaSources.d.ts","sourceRoot":"","sources":["../../src/utils/mediaSources.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,iBAAiB,EACjB,qBAAqB,EACrB,mBAAmB,EACpB,MAAM,UAAU,CAAA;AAGjB,eAAO,MAAM,cAAc,UAA6D,CAAA;AACxF,eAAO,MAAM,aAAa,QAAoB,CAAA;AAC9C,eAAO,MAAM,cAAc,yBAAyB,CAAA;AAGpD,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,qBAAqB,EAAE,EAChC,iBAAiB,GAAE,mBAA4B,GAC9C,qBAAqB,EAAE,CAqCzB;AAED,wBAAgB,YAAY,CAAC,CAAC,EAAE,iBAAiB,GAAG,MAAM,CAEzD;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,iBAAiB,GAAG,qBAAqB,CAEtE;AAGD,wBAAgB,aAAa,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAO3D;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,WAK7D;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,WAO5D"}

package/lib/utils/mediaSources.js

@@ -1,5 +1,8 @@
 import { Loader } from '@clappr/core';
 import { trace } from '@gcorevideo/utils';
+export const MIME_TYPES_HLS = ['application/x-mpegurl', 'application/vnd.apple.mpegurl'];
+export const MIME_TYPE_HLS = MIME_TYPES_HLS[0];
+export const MIME_TYPE_DASH = 'application/dash+xml';
 // TODO rewrite using the Playback classes and canPlay static methods
 export function buildMediaSourcesList(sources, priorityTransport = 'dash') {
     const playbacks = Loader.registeredPlaybacks;
@@ -40,24 +43,23 @@ export function unwrapSource(s) {
 export function wrapSource(s) {
     return typeof s === 'string' ? { source: s, mimeType: guessMimeType(s) } : s;
 }
-function guessMimeType(s) {
+export function guessMimeType(s) {
     if (s.endsWith('.mpd')) {
-        return 'application/dash+xml';
+        return MIME_TYPE_DASH;
     }
     if (s.endsWith('.m3u8')) {
-        // return 'application/vnd.apple.mpegurl'
-        return 'application/x-mpegurl';
+        return MIME_TYPE_HLS;
     }
 }
 export function isDashSource(source, mimeType) {
     if (mimeType) {
-        return mimeType === 'application/dash+xml'; // TODO consider video/mp4
+        return mimeType === MIME_TYPE_DASH; // TODO consider video/mp4
     }
     return source.endsWith('.mpd');
 }
 export function isHlsSource(source, mimeType) {
     if (mimeType) {
-        return ['application/vnd.apple.mpegurl', 'application/x-mpegurl'].includes(mimeType.toLowerCase());
+        return MIME_TYPES_HLS.includes(mimeType.toLowerCase());
     }
     return source.endsWith('.m3u8');
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcorevideo/player",
-  "version": "2.28.35",
+  "version": "2.29.0",
   "description": "Gcore JavaScript video player",
   "main": "dist/index.js",
   "type": "module",

package/src/playback/BasePlayback.ts

@@ -50,4 +50,8 @@ export class BasePlayback extends HTML5Video {
     super._onPlaying()
     this.trigger(Events.PLAYBACK_MEDIACONTROL_ENABLE)
   }
+
+  setTextTrack(id: number) {
+    // noop
+  }
 }