@gcorevideo/player 2.28.24 → 2.28.26

package/src/plugins/picture-in-picture/PictureInPicture.ts

@@ -1,16 +1,16 @@
-import { UICorePlugin, template, Events } from '@clappr/core';
-import { trace } from '@gcorevideo/utils';
+import { UICorePlugin, template, Events } from '@clappr/core'
+import { trace } from '@gcorevideo/utils'
 
-import { CLAPPR_VERSION } from '../../build.js';
+import { CLAPPR_VERSION } from '../../build.js'
 
-import pipIcon from '../../../assets/icons/new/pip.svg';
-import buttonHtml from '../../../assets/picture-in-picture/button.ejs';
-import '../../../assets/picture-in-picture/style.scss';
-import assert from 'assert';
+import pipIcon from '../../../assets/icons/new/pip.svg'
+import buttonHtml from '../../../assets/picture-in-picture/button.ejs'
+import '../../../assets/picture-in-picture/style.scss'
+import assert from 'assert'
 
-const VERSION = '0.0.1';
+const VERSION = '0.0.1'
 
-const T = `plugins.pip`;
+const T = `plugins.pip`
 
 /**
  * `PLUGIN` that enables picture-in-picture mode.
@@ -27,24 +27,24 @@ export class PictureInPicture extends UICorePlugin {
    * @internal
    */
   get name() {
-    return 'pip';
+    return 'pip'
   }
 
   /**
    * @internal
    */
   get supportedVersion() {
-    return { min: CLAPPR_VERSION };
+    return { min: CLAPPR_VERSION }
   }
 
   /**
    * @internal
    */
   static get version() {
-    return VERSION;
+    return VERSION
   }
 
-  private static buttonTemplate = template(buttonHtml);
+  private static buttonTemplate = template(buttonHtml)
 
   /**
    * @internal
@@ -52,17 +52,17 @@ export class PictureInPicture extends UICorePlugin {
   override get events() {
     return {
       'click button': 'togglePictureInPicture',
-    };
+    }
   }
 
   override get attributes() {
     return {
-      'class': 'media-control-pip',
-    };
+      class: 'media-control-pip',
+    }
   }
 
   private get videoElement() {
-    return this.core.activePlayback.el;
+    return this.core.activePlayback.el
   }
 
   /**
@@ -70,19 +70,23 @@ export class PictureInPicture extends UICorePlugin {
    */
   override bindEvents() {
     this.listenToOnce(this.core, Events.CORE_READY, () => {
-      const mediaControl = this.core.getPlugin('media_control');
-      assert(mediaControl, 'media_control plugin is required');
-      this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
-    });
+      const mediaControl = this.core.getPlugin('media_control')
+      assert(mediaControl, 'media_control plugin is required')
+      this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.render)
+    })
   }
 
   private isPiPSupported() {
     trace(`${T} isPiPSupported`, {
       pictureInPictureEnabled: !!document.pictureInPictureEnabled,
-      requestPictureInPicture: !!HTMLVideoElement.prototype.requestPictureInPicture,
-    });
-
-    return document.pictureInPictureEnabled && !!HTMLVideoElement.prototype.requestPictureInPicture;
+      requestPictureInPicture:
+        !!HTMLVideoElement.prototype.requestPictureInPicture,
+    })
+
+    return (
+      document.pictureInPictureEnabled &&
+      !!HTMLVideoElement.prototype.requestPictureInPicture
+    )
   }
 
   /**
@@ -90,37 +94,37 @@ export class PictureInPicture extends UICorePlugin {
    */
   override render() {
     if (!this.isPiPSupported()) {
-      return this;
+      return this
     }
 
-    this.$el.html(PictureInPicture.buttonTemplate({ pipIcon }));
+    this.$el.html(PictureInPicture.buttonTemplate({ pipIcon }))
 
-    const mediaControl = this.core.getPlugin('media_control');
+    const mediaControl = this.core.getPlugin('media_control')
     if (mediaControl) {
-      mediaControl.slot('pip', this.$el);
+      mediaControl.slot('pip', this.$el)
     }
 
-    return this;
+    return this
   }
 
   private togglePictureInPicture() {
-    trace(`${T} togglePictureInPicture`);
+    trace(`${T} togglePictureInPicture`)
     if (this.videoElement !== document.pictureInPictureElement) {
-      this.requestPictureInPicture();
+      this.requestPictureInPicture()
     } else {
-      this.exitPictureInPicture();
+      this.exitPictureInPicture()
     }
   }
 
   private requestPictureInPicture() {
     trace(`${T} requestPictureInPicture`, {
       videoElement: !!this.videoElement,
-    });
-    this.videoElement.requestPictureInPicture();
+    })
+    this.videoElement.requestPictureInPicture()
   }
 
   private exitPictureInPicture() {
-    trace(`${T} exitPictureInPicture`);
-    document.exitPictureInPicture();
+    trace(`${T} exitPictureInPicture`)
+    document.exitPictureInPicture()
   }
 }

package/src/plugins/playback-rate/__tests__/PlaybackRate.test.ts

@@ -55,7 +55,10 @@ describe('PlaybackRate', () => {
     })
     describe('until media source is loaded', () => {
       it('should not attach to the media control', () => {
-        expect(bottomGear.addItem).not.toHaveBeenCalledWith('rate', expect.anything())
+        expect(bottomGear.addItem).not.toHaveBeenCalledWith(
+          'rate',
+          expect.anything(),
+        )
       })
     })
     describe('after media source is loaded', () => {
@@ -67,11 +70,17 @@ describe('PlaybackRate', () => {
           core.activeContainer.emit(Events.CONTAINER_LOADEDMETADATA)
         })
         it('should not attach to the media control immediately', () => {
-          expect(bottomGear.addItem).not.toHaveBeenCalledWith('rate', expect.anything())
+          expect(bottomGear.addItem).not.toHaveBeenCalledWith(
+            'rate',
+            expect.anything(),
+          )
         })
         it('should attach to the media control after a short delay', async () => {
           await new Promise((resolve) => setTimeout(resolve, 25))
-          expect(bottomGear.addItem).toHaveBeenCalledWith('rate', playbackRate.$el)
+          expect(bottomGear.addItem).toHaveBeenCalledWith(
+            'rate',
+            playbackRate.$el,
+          )
           expect(
             bottomGear.$el.find('li[data-rate]').text(),
             // @ts-ignore
@@ -84,10 +93,13 @@ describe('PlaybackRate', () => {
           core.activeContainer.emit(Events.CONTAINER_LOADEDMETADATA)
         })
         it('should not attach to the media control', () => {
-          expect(bottomGear.addItem).not.toHaveBeenCalledWith('rate', expect.anything())
+          expect(bottomGear.addItem).not.toHaveBeenCalledWith(
+            'rate',
+            expect.anything(),
+          )
         })
       })
-    });
+    })
     describe('on playback rate select', () => {
       beforeEach(async () => {
         core.activePlayback.dvrEnabled = true
@@ -159,7 +171,9 @@ describe('PlaybackRate', () => {
         playbackRate.$el.find('[data-rate="1.5"]').parent().hasClass('current'),
       ).toBe(true)
       expect(
-        playbackRate.$el.find('[data-rate="1.5"]').hasClass('gcore-skin-active'),
+        playbackRate.$el
+          .find('[data-rate="1.5"]')
+          .hasClass('gcore-skin-active'),
       ).toBe(true)
     })
     it('should render proper gear box option label', () => {
@@ -175,11 +189,11 @@ expect.extend({
   toMatchPlaybackRateLabel(received, expected) {
     const { isNot } = this
     return {
-      pass:
-        received
-          .replace(/\/assets.*\.svg/g, '')
-          .replace(/\s+/g, ' ')
-          .trim().includes(`playback_rate ${expected}`),
+      pass: received
+        .replace(/\/assets.*\.svg/g, '')
+        .replace(/\s+/g, ' ')
+        .trim()
+        .includes(`playback_rate ${expected}`),
       message: () => `${received} does${isNot ? '' : ' not'} match ${expected}`,
     }
   },

package/src/plugins/poster/__tests__/Poster.test.ts

@@ -44,12 +44,9 @@ describe('Poster', () => {
     })
     describe('when playback is about to start', () => {
       describe.each([
-        [
-          Events.CONTAINER_STATE_BUFFERING, 
-        ], [
-          Events.CONTAINER_STATE_BUFFERFULL,
-        ]
-      ])("event %s", (event) => {
+        [Events.CONTAINER_STATE_BUFFERING],
+        [Events.CONTAINER_STATE_BUFFERFULL],
+      ])('event %s', (event) => {
         beforeEach(() => {
           core.activeContainer.buffering = true
           core.activeContainer.trigger(event)
@@ -62,7 +59,7 @@ describe('Poster', () => {
     describe('when playback is started', () => {
       beforeEach(() => {
         core.activeContainer.trigger(Events.CONTAINER_PLAY)
-            core.activeContainer.playback.trigger(Events.PLAYBACK_PLAY)
+        core.activeContainer.playback.trigger(Events.PLAYBACK_PLAY)
       })
       it('should hide poster', () => {
         expect(poster.el.style.display).toBe('none')
@@ -78,7 +75,9 @@ describe('Poster', () => {
         expect(poster.el.style.display).not.toBe('none')
       })
       it('should show button', () => {
-        expect(poster.$el.find('#poster-play')[0].style.display).not.toBe('none')
+        expect(poster.$el.find('#poster-play')[0].style.display).not.toBe(
+          'none',
+        )
       })
       it('should add clickable class', () => {
         expect(poster.el.classList.contains('clickable')).toBe(true)
@@ -116,4 +115,4 @@ describe('Poster', () => {
       expect(poster.$el.find('#poster-play')[0].style.display).toBe('none')
     })
   })
-})
+})

package/src/plugins/share/Share.ts

@@ -1,40 +1,40 @@
-import { Container, Events, UICorePlugin, template } from '@clappr/core';
+import { Container, Events, UICorePlugin, template } from '@clappr/core'
 
-import { CLAPPR_VERSION } from '../../build.js';
+import { CLAPPR_VERSION } from '../../build.js'
 
-import pluginHtml from '../../../assets/share/share.ejs';
-import '../../../assets/share/style.scss';
-import shareIcon from '../../../assets/icons/old/share.svg';
-import closeIcon from '../../../assets/icons/old/close-share.svg';
-import fbIcon from '../../../assets/icons/old/fb.svg';
-import twIcon from '../../../assets/icons/old/twitter.svg';
+import pluginHtml from '../../../assets/share/share.ejs'
+import '../../../assets/share/style.scss'
+import shareIcon from '../../../assets/icons/old/share.svg'
+import closeIcon from '../../../assets/icons/old/close-share.svg'
+import fbIcon from '../../../assets/icons/old/fb.svg'
+import twIcon from '../../../assets/icons/old/twitter.svg'
 
 /**
  * `PLUGIN` that adds a share button to the media control UI.
  * @beta
  */
 export class Share extends UICorePlugin {
-  private hide = false;
+  private hide = false
 
-  private container: Container | null = null;
+  private container: Container | null = null
 
   get name() {
-    return 'share';
+    return 'share'
   }
 
   get supportedVersion() {
-    return { min: CLAPPR_VERSION };
+    return { min: CLAPPR_VERSION }
   }
 
   get template() {
-    return template(pluginHtml);
+    return template(pluginHtml)
   }
 
   override get attributes() {
     return {
-      'class': this.name + '_plugin',
-      'data-share': ''
-    };
+      class: this.name + '_plugin',
+      'data-share': '',
+    }
   }
 
   override get events() {
@@ -44,109 +44,134 @@ export class Share extends UICorePlugin {
       'click [data-share-fb]': 'onShareFB',
       'click [data-share-tw]': 'onShareTW',
       'click [data-share-link]': 'onShareLinkClick',
-      'click [data-share-embed]': 'onShareEmbedClick'
-    };
+      'click [data-share-embed]': 'onShareEmbedClick',
+    }
   }
 
   override bindEvents() {
-    this.listenTo(this.core, Events.CORE_READY, this.onReady);
+    this.listenTo(this.core, Events.CORE_READY, this.onReady)
     // this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.reload);
-    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
-    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_HIDE, this.hideShare);
-    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_SHOW, this.showShare);
+    this.listenTo(
+      this.core.mediaControl,
+      Events.MEDIACONTROL_RENDERED,
+      this.render,
+    )
+    this.listenTo(
+      this.core.mediaControl,
+      Events.MEDIACONTROL_HIDE,
+      this.hideShare,
+    )
+    this.listenTo(
+      this.core.mediaControl,
+      Events.MEDIACONTROL_SHOW,
+      this.showShare,
+    )
   }
 
   unBindEvents() {
     // @ts-ignore
-    this.stopListening(this.core, Events.CORE_READY);
+    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);
+    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_RENDERED)
     // @ts-ignore
-    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_HIDE);
+    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_HIDE)
     // @ts-ignore
-    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_SHOW);
+    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_SHOW)
   }
 
   canShowShare() {
-    this.hide = false;
+    this.hide = false
   }
 
   private onReady() {
-    this.hide = true;
-    this.container = this.core.activeContainer;
+    this.hide = true
+    this.container = this.core.activeContainer
     if (this.container) {
-      this.listenTo(this.container, 'container:settingsupdate', this.canShowShare);
+      this.listenTo(
+        this.container,
+        'container:settingsupdate',
+        this.canShowShare,
+      )
     }
-    this.hideShare();
+    this.hideShare()
   }
 
   override render() {
-    this.$el.html(this.template({
-      'url':this.options.shareURL,
-      'embed': this.options.embed,
-      'embed_title': this.core.i18n.t('embed_title'),
-      'share_title': this.core.i18n.t('share_title'),
-      'link_title': this.core.i18n.t('link_title'),
-      'social_title': this.core.i18n.t('social_title'),
-    }));
-    this.core.mediaControl.$el.append(this.el);
-    this.$el.find('.share-container').hide();
-    this.initializeIcons();
-
-    return this;
+    this.$el.html(
+      this.template({
+        url: this.options.shareURL,
+        embed: this.options.embed,
+        embed_title: this.core.i18n.t('embed_title'),
+        share_title: this.core.i18n.t('share_title'),
+        link_title: this.core.i18n.t('link_title'),
+        social_title: this.core.i18n.t('social_title'),
+      }),
+    )
+    this.core.mediaControl.$el.append(this.el)
+    this.$el.find('.share-container').hide()
+    this.initializeIcons()
+
+    return this
   }
 
   hideShare() {
-    this.$el.addClass('share-hide');
+    this.$el.addClass('share-hide')
   }
 
   showShare() {
     if (this.hide) {
-      return;
+      return
     }
-    this.$el.removeClass('share-hide');
+    this.$el.removeClass('share-hide')
   }
 
   initializeIcons() {
-    this.$el.find('button.media-control-button[data-share-button]')
+    this.$el
+      .find('button.media-control-button[data-share-button]')
       .addClass('gcore-skin-button-color')
-      .append(shareIcon);
-    this.$el.find('div.share-container-header--close').append(closeIcon);
-    this.$el.find('div.share-container-header--socialicon_fb').append(fbIcon);
-    this.$el.find('div.share-container-header--socialicon_tw').append(twIcon);
+      .append(shareIcon)
+    this.$el.find('div.share-container-header--close').append(closeIcon)
+    this.$el.find('div.share-container-header--socialicon_fb').append(fbIcon)
+    this.$el.find('div.share-container-header--socialicon_tw').append(twIcon)
   }
 
   onShareShow() {
-    this.$el.find('.share-container').show();
+    this.$el.find('.share-container').show()
   }
 
   onShareHide() {
-    this.$el.find('.share-container').hide();
+    this.$el.find('.share-container').hide()
   }
 
   onShareFB() {
     if (this.options.shareURL) {
-      const url = 'https://www.facebook.com/sharer.php?u='+this.options.shareURL;
+      const url =
+        'https://www.facebook.com/sharer.php?u=' + this.options.shareURL
 
-      window.open(url, '_blank');
+      window.open(url, '_blank')
     }
   }
 
   onShareTW() {
     if (this.options.shareURL) {
-      const url = 'https://twitter.com/intent/tweet?url='+this.options.shareURL;
+      const url =
+        'https://twitter.com/intent/tweet?url=' + this.options.shareURL
 
-      window.open(url, '_blank');
+      window.open(url, '_blank')
     }
   }
 
   onShareLinkClick() {
-    this.$el.find('.share-container-header--link')[0].setSelectionRange(0, this.options.shareURL.length);
+    this.$el
+      .find('.share-container-header--link')[0]
+      .setSelectionRange(0, this.options.shareURL.length)
   }
 
   onShareEmbedClick() {
-    this.$el.find('.share-container-header--embed')[0].setSelectionRange(0, this.options.embed.length);
+    this.$el
+      .find('.share-container-header--embed')[0]
+      .setSelectionRange(0, this.options.embed.length)
   }
 }

package/src/plugins/skip-time/SkipTime.ts

@@ -56,7 +56,11 @@ export class SkipTime extends UICorePlugin {
    */
   override bindEvents() {
     this.listenTo(this.core, Events.CORE_READY, this.render)
-    this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onContainerChanged)
+    this.listenTo(
+      this.core,
+      Events.CORE_ACTIVE_CONTAINER_CHANGED,
+      this.onContainerChanged,
+    )
   }
 
   private onContainerChanged() {

package/src/plugins/spinner-three-bounce/SpinnerThreeBounce.ts

@@ -166,11 +166,14 @@ export class SpinnerThreeBounce extends UIContainerPlugin {
    */
   override render() {
     this.$el.html(this.template())
-    this.el.firstElementChild?.addEventListener('animationiteration', (event) => {
-      this.trigger(SpinnerEvents.SYNC, {
-        elapsedTime: (event as AnimationEvent).elapsedTime,
-      })
-    })
+    this.el.firstElementChild?.addEventListener(
+      'animationiteration',
+      (event) => {
+        this.trigger(SpinnerEvents.SYNC, {
+          elapsedTime: (event as AnimationEvent).elapsedTime,
+        })
+      },
+    )
     this.container.$el.append(this.$el[0])
     if (this.container.buffering) {
       this._show()

package/src/plugins/subtitles/ClosedCaptions.ts

@@ -132,11 +132,17 @@ export class ClosedCaptions extends UICorePlugin {
 
   private get preselectedLanguage(): string | undefined {
     return (
-      this.core.options.cc?.language ??
-      this.core.options.subtitles?.language
+      this.core.options.cc?.language ?? this.core.options.subtitles?.language
     )
   }
 
+  private isPreselectedLanguage(language: string): boolean {
+    if (!this.preselectedLanguage) {
+      return false
+    }
+    return language.startsWith(this.preselectedLanguage)
+  }
+
   /**
    * @internal
    */
@@ -228,12 +234,20 @@ export class ClosedCaptions extends UICorePlugin {
     this.mount()
   }
 
-  private onSubtitleChanged({ id: _ }: { id: number }) {
+  private onSubtitleChanged({ id: changedId }: { id: number }) {
     // ignoring the subtitle selected by the playback engine or user agent
     const id = this.track?.id ?? -1
+    trace(`${T} onSubtitleChanged`, {
+      changedId,
+      id,
+    })
     if (id === -1) {
       this.clearSubtitleText()
     }
+    this.activateTrack(id)
+  }
+
+  private activateTrack(id: number) {
     for (const track of this.tracks) {
       if (track.id === id) {
         if (this.useNativeSubtitles) {
@@ -404,8 +418,12 @@ export class ClosedCaptions extends UICorePlugin {
   private selectItem(item: TextTrackItem | null) {
     this.clearSubtitleText()
     this.track = item
+    const trackId = item?.id ?? -1
+    this.core.activePlayback.closedCaptionsTrackId = trackId
 
     this.updateSelection()
+
+    this.activateTrack(trackId)
   }
 
   private onItemSelect(event: MouseEvent) {
@@ -427,8 +445,8 @@ export class ClosedCaptions extends UICorePlugin {
       // to hide the subtitles forcefully, set the language to 'none'
       setTimeout(() => {
         this.selectItem(
-          this.tracks.find(
-            (t) => t.track.language === this.preselectedLanguage,
+          this.tracks.find((t) =>
+            this.isPreselectedLanguage(t.track.language),
           ) ?? null,
         )
       }, 0)
@@ -551,7 +569,13 @@ export class ClosedCaptions extends UICorePlugin {
   }
 
   private get useNativeSubtitles() {
-    const mode = this.core.options.cc?.mode ?? this.core.options.subtitles?.mode ?? 'custom'
+    if (this.core.activePlayback?.name === 'dash') {
+      return true
+    }
+    const mode =
+      this.core.options.cc?.mode ??
+      this.core.options.subtitles?.mode ??
+      'custom'
     // TODO or Safari? or iOS?
     return mode === 'native'
   }

package/src/plugins/subtitles/__tests__/ClosedCaptions.test.ts

@@ -173,7 +173,6 @@ describe('ClosedCaptions', () => {
         // TODO test explicitly that PLAYBACK_SUBTITLE_CHANGED event does not cause track switch
         core.activePlayback.emit(Events.PLAYBACK_SUBTITLE_CHANGED, { id: 2 })
         await new Promise((resolve) => setTimeout(resolve, 100))
-
       })
       it('should activate selected track', () => {
         expect(core.activePlayback.closedCaptionsTracks[1].track.mode).toBe(
@@ -235,10 +234,10 @@ describe('ClosedCaptions', () => {
       it('should deactivate subtitle track', () => {
         expect(core.activePlayback.closedCaptionsTrackId).toEqual(-1)
         expect(core.activePlayback.closedCaptionsTracks[0].track.mode).toBe(
-          'hidden',
+          'disabled',
         )
         expect(core.activePlayback.closedCaptionsTracks[1].track.mode).toBe(
-          'hidden',
+          'disabled',
         )
       })
       it('should select menu item', () => {