@gcorevideo/player 2.22.10 → 2.22.12

package/dist/plugins/index.js

@@ -13320,7 +13320,7 @@ class ClipsPlugin extends UICorePlugin {
 
 const templateHtml$1 = "<ul class=\"context-menu-list\">\n    <% if(options) { %>\n        <% for (var i = 0; i < options.length; i++) { %>\n        <li class=\"context-menu-list-item <%= options[i].class %>\"\n            data-<%= options[i].name %>><%= options[i].label %></li>\n        <% } %>\n    <% } %>\n</ul>\n";
 
-var version$1 = "2.22.10";
+var version$1 = "2.22.12";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -16018,6 +16018,8 @@ class PlaybackRate extends UICorePlugin {
     // private prevSelectedRate: string | undefined
     selectedRate = DEFAULT_PLAYBACK_RATE;
     metadataLoaded = false;
+    playbackSettingsUpdateReceived = false;
+    mountTimerId = null;
     /**
      * @internal
      */
@@ -16075,6 +16077,7 @@ class PlaybackRate extends UICorePlugin {
     }
     onActiveContainerChange() {
         this.metadataLoaded = false;
+        this.playbackSettingsUpdateReceived = false;
         this.listenTo(this.core.activePlayback, Events.PLAYBACK_STOP, this.onStop);
         this.listenTo(this.core.activePlayback, Events.PLAYBACK_PLAY, this.onPlay);
         this.listenTo(this.core.activePlayback, Events.PLAYBACK_SETTINGSUPDATE, this.onSettingsUpdate);
@@ -16109,17 +16112,30 @@ class PlaybackRate extends UICorePlugin {
             playbackType: this.core.activePlayback.getPlaybackType(),
             dvrEnabled: this.core.activePlayback.dvrEnabled,
         });
-        // this.metadataLoaded = false
+        this.playbackSettingsUpdateReceived = true;
+        if (this.metadataLoaded) {
+            if (this.mountTimerId) {
+                clearTimeout(this.mountTimerId);
+                this.mountTimerId = null;
+            }
+            this.mount();
+        }
     }
     onMetaDataLoaded() {
         trace(`${T$7} onMetaDataLoaded`, {
             playbackType: this.core.activePlayback.getPlaybackType(),
             dvrEnabled: this.core.activePlayback.dvrEnabled,
         });
-        setTimeout(() => {
-            this.metadataLoaded = true;
-            this.render();
-        }, 0);
+        this.metadataLoaded = true;
+        if (this.playbackSettingsUpdateReceived) {
+            this.mount();
+        }
+        else {
+            this.mountTimerId = setTimeout(() => {
+                this.mountTimerId = null;
+                this.mount();
+            }, 25);
+        }
     }
     allRateElements() {
         return this.$el.find('#playback-rate-menu li');
@@ -16166,9 +16182,19 @@ class PlaybackRate extends UICorePlugin {
             i18n: this.core.i18n,
             playbackRates: this.playbackRates,
         }));
-        this.mount();
+        // this.mount()
         return this;
     }
+    /**
+     * @internal
+     */
+    destroy() {
+        if (this.mountTimerId) {
+            clearTimeout(this.mountTimerId);
+            this.mountTimerId = null;
+        }
+        return super.destroy();
+    }
     // private onStartAd() {
     //   this.prevSelectedRate = this.selectedRate
     //   this.resetPlaybackRate()
@@ -16230,8 +16256,8 @@ class PlaybackRate extends UICorePlugin {
     }
     getTitle() {
         const rate = this.selectedRate;
-        return (this.playbackRates.find((r) => r.value === rate)?.label ||
-            `x${rate}`);
+        return (this.playbackRates.find((r) => r.value === rate)
+            ?.label || `x${rate}`);
     }
     highlightCurrentRate() {
         trace(`${T$7} highlightCurrentRate`, {

package/lib/Player.js

@@ -11,7 +11,7 @@ const DEFAULT_OPTIONS = {
     debug: 'none',
     loop: false,
     mute: false,
-    // playbackType: 'vod',
+    playbackType: 'vod',
     priorityTransport: 'dash',
     sources: [],
     strings: {},

package/lib/plugins/playback-rate/PlaybackRate.d.ts

@@ -47,6 +47,8 @@ export type PlaybackRateSettings = {
 export declare class PlaybackRate extends UICorePlugin {
     private selectedRate;
     private metadataLoaded;
+    private playbackSettingsUpdateReceived;
+    private mountTimerId;
     /**
      * @internal
      */
@@ -93,6 +95,10 @@ export declare class PlaybackRate extends UICorePlugin {
      * @internal
      */
     render(): this;
+    /**
+     * @internal
+     */
+    destroy(): import("@clappr/core").UIObject;
     private onPlay;
     private syncRate;
     private resetPlaybackRate;

package/lib/plugins/playback-rate/PlaybackRate.d.ts.map

@@ -1 +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;IAI5C,OAAO,CAAC,YAAY,CAAwB;IAE5C,OAAO,CAAC,cAAc,CAAQ;IAE9B;;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;IAOtB,OAAO,KAAK,aAAa,GAExB;IAED;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;;MAKlB;IAED;;OAEG;IACM,UAAU;IASnB,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,uBAAuB;IAsB/B,OAAO,CAAC,sBAAsB;IAK9B,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,KAAK;IAsBb,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,oBAAoB;IAe5B,OAAO,CAAC,WAAW;IAoBnB;;OAEG;IACM,MAAM;IAoCf,OAAO,CAAC,MAAM;IAWd,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,MAAM;IAEd,OAAO,CAAC,QAAQ;IAYhB,OAAO,CAAC,MAAM;IAMd,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,QAAQ;IAQhB,OAAO,CAAC,oBAAoB;IAa5B,OAAO,CAAC,qBAAqB;CAM9B"}
+{"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;AAkBhF;;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;IAI5C,OAAO,CAAC,YAAY,CAAwB;IAE5C,OAAO,CAAC,cAAc,CAAQ;IAE9B,OAAO,CAAC,8BAA8B,CAAQ;IAE9C,OAAO,CAAC,YAAY,CAAuB;IAE3C;;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;IAOtB,OAAO,KAAK,aAAa,GAExB;IAED;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;;MAKlB;IAED;;OAEG;IACM,UAAU;IASnB,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,uBAAuB;IAuB/B,OAAO,CAAC,sBAAsB;IAK9B,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,KAAK;IAsBb,OAAO,CAAC,gBAAgB;IAexB,OAAO,CAAC,gBAAgB;IAgBxB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,oBAAoB;IAe5B,OAAO,CAAC,WAAW;IAoBnB;;OAEG;IACM,MAAM;IAoBf;;OAEG;IACM,OAAO;IAwBhB,OAAO,CAAC,MAAM;IAWd,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,MAAM;IAEd,OAAO,CAAC,QAAQ;IAYhB,OAAO,CAAC,MAAM;IAMd,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,QAAQ;IAQhB,OAAO,CAAC,oBAAoB;IAa5B,OAAO,CAAC,qBAAqB;CAM9B"}

package/lib/plugins/playback-rate/PlaybackRate.js

@@ -57,6 +57,8 @@ export class PlaybackRate extends UICorePlugin {
     // private prevSelectedRate: string | undefined
     selectedRate = DEFAULT_PLAYBACK_RATE;
     metadataLoaded = false;
+    playbackSettingsUpdateReceived = false;
+    mountTimerId = null;
     /**
      * @internal
      */
@@ -116,6 +118,7 @@ export class PlaybackRate extends UICorePlugin {
     onActiveContainerChange() {
         trace(`${T} onActiveContainerChange`);
         this.metadataLoaded = false;
+        this.playbackSettingsUpdateReceived = false;
         this.listenTo(this.core.activePlayback, Events.PLAYBACK_STOP, this.onStop);
         this.listenTo(this.core.activePlayback, Events.PLAYBACK_PLAY, this.onPlay);
         this.listenTo(this.core.activePlayback, Events.PLAYBACK_SETTINGSUPDATE, this.onSettingsUpdate);
@@ -152,17 +155,30 @@ export class PlaybackRate extends UICorePlugin {
             playbackType: this.core.activePlayback.getPlaybackType(),
             dvrEnabled: this.core.activePlayback.dvrEnabled,
         });
-        // this.metadataLoaded = false
+        this.playbackSettingsUpdateReceived = true;
+        if (this.metadataLoaded) {
+            if (this.mountTimerId) {
+                clearTimeout(this.mountTimerId);
+                this.mountTimerId = null;
+            }
+            this.mount();
+        }
     }
     onMetaDataLoaded() {
         trace(`${T} onMetaDataLoaded`, {
             playbackType: this.core.activePlayback.getPlaybackType(),
             dvrEnabled: this.core.activePlayback.dvrEnabled,
         });
-        setTimeout(() => {
-            this.metadataLoaded = true;
-            this.render();
-        }, 0);
+        this.metadataLoaded = true;
+        if (this.playbackSettingsUpdateReceived) {
+            this.mount();
+        }
+        else {
+            this.mountTimerId = setTimeout(() => {
+                this.mountTimerId = null;
+                this.mount();
+            }, 25);
+        }
     }
     allRateElements() {
         return this.$el.find('#playback-rate-menu li');
@@ -210,9 +226,19 @@ export class PlaybackRate extends UICorePlugin {
             i18n: this.core.i18n,
             playbackRates: this.playbackRates,
         }));
-        this.mount();
+        // this.mount()
         return this;
     }
+    /**
+     * @internal
+     */
+    destroy() {
+        if (this.mountTimerId) {
+            clearTimeout(this.mountTimerId);
+            this.mountTimerId = null;
+        }
+        return super.destroy();
+    }
     // private onStartAd() {
     //   this.prevSelectedRate = this.selectedRate
     //   this.resetPlaybackRate()
@@ -274,8 +300,8 @@ export class PlaybackRate extends UICorePlugin {
     }
     getTitle() {
         const rate = this.selectedRate;
-        return (this.playbackRates.find((r) => r.value === rate)?.label ||
-            `x${rate}`);
+        return (this.playbackRates.find((r) => r.value === rate)
+            ?.label || `x${rate}`);
     }
     highlightCurrentRate() {
         trace(`${T} highlightCurrentRate`, {

package/package.json

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

package/src/Player.ts

@@ -59,7 +59,7 @@ const DEFAULT_OPTIONS: PlayerConfig = {
   debug: 'none',
   loop: false,
   mute: false,
-  // playbackType: 'vod',
+  playbackType: 'vod',
   priorityTransport: 'dash',
   sources: [],
   strings: {},

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

@@ -14,6 +14,7 @@ import checkIcon from '../../../assets/icons/new/check.svg'
 import { BottomGear, GearEvents } from '../bottom-gear/BottomGear.js'
 import { PlaybackEvents } from '../../playback/types.js'
 import { MediaControl } from '../media-control/MediaControl.js'
+import { TimerId } from '../../utils/types.js'
 
 /**
  * @beta
@@ -84,6 +85,10 @@ export class PlaybackRate extends UICorePlugin {
 
   private metadataLoaded = false
 
+  private playbackSettingsUpdateReceived = false
+
+  private mountTimerId: TimerId | null = null
+
   /**
    * @internal
    */
@@ -162,6 +167,7 @@ export class PlaybackRate extends UICorePlugin {
   private onActiveContainerChange() {
     trace(`${T} onActiveContainerChange`)
     this.metadataLoaded = false
+    this.playbackSettingsUpdateReceived = false
     this.listenTo(this.core.activePlayback, Events.PLAYBACK_STOP, this.onStop)
     this.listenTo(this.core.activePlayback, Events.PLAYBACK_PLAY, this.onPlay)
     this.listenTo(
@@ -218,7 +224,14 @@ export class PlaybackRate extends UICorePlugin {
       playbackType: this.core.activePlayback.getPlaybackType(),
       dvrEnabled: this.core.activePlayback.dvrEnabled,
     })
-    // this.metadataLoaded = false
+    this.playbackSettingsUpdateReceived = true
+    if (this.metadataLoaded) {
+      if (this.mountTimerId) {
+        clearTimeout(this.mountTimerId)
+        this.mountTimerId = null
+      }
+      this.mount()
+    }
   }
 
   private onMetaDataLoaded() {
@@ -226,10 +239,15 @@ export class PlaybackRate extends UICorePlugin {
       playbackType: this.core.activePlayback.getPlaybackType(),
       dvrEnabled: this.core.activePlayback.dvrEnabled,
     })
-    setTimeout(() => {
-      this.metadataLoaded = true
-      this.render()
-    }, 0)
+    this.metadataLoaded = true
+    if (this.playbackSettingsUpdateReceived) {
+      this.mount()
+    } else {
+      this.mountTimerId = setTimeout(() => {
+        this.mountTimerId = null
+        this.mount()
+      }, 25)
+    }
   }
 
   private allRateElements(): ZeptoResult {
@@ -295,11 +313,22 @@ export class PlaybackRate extends UICorePlugin {
       }),
     )
 
-    this.mount()
+    // this.mount()
 
     return this
   }
 
+  /**
+   * @internal
+   */
+  override destroy() {
+    if (this.mountTimerId) {
+      clearTimeout(this.mountTimerId)
+      this.mountTimerId = null
+    }
+    return super.destroy()
+  }
+
   // private onStartAd() {
   //   this.prevSelectedRate = this.selectedRate
   //   this.resetPlaybackRate()
@@ -375,8 +404,8 @@ export class PlaybackRate extends UICorePlugin {
   private getTitle() {
     const rate = this.selectedRate
     return (
-      this.playbackRates.find((r: PlaybackRateOption) => r.value === rate)?.label ||
-      `x${rate}`
+      this.playbackRates.find((r: PlaybackRateOption) => r.value === rate)
+        ?.label || `x${rate}`
     )
   }
 

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

@@ -66,7 +66,20 @@ describe('PlaybackRate', () => {
           core.activePlayback.emit(Events.PLAYBACK_LOADEDMETADATA)
           core.activeContainer.emit(Events.CONTAINER_LOADEDMETADATA)
         })
-        it('should attach to the media control', () => {
+        it('should not attach to the media control immediately', () => {
+          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.$el.find('li[data-rate]').text(),
+            // @ts-ignore
+          ).toMatchPlaybackRateLabel('1x')
+        })
+        it('should attach to the media when playback settings update is received', async () => {
+          core.activePlayback.emit(Events.PLAYBACK_SETTINGSUPDATE)
+          core.activeContainer.emit(Events.CONTAINER_SETTINGSUPDATE)
           expect(bottomGear.addItem).toHaveBeenCalledWith('rate', playbackRate.$el)
           expect(
             bottomGear.$el.find('li[data-rate]').text(),
@@ -144,6 +157,8 @@ describe('PlaybackRate', () => {
       core.activeContainer.isDvrEnabled.mockReturnValue(true)
       core.activePlayback.emit(Events.PLAYBACK_LOADEDMETADATA)
       core.activeContainer.emit(Events.CONTAINER_LOADEDMETADATA)
+      core.activePlayback.emit(Events.PLAYBACK_SETTINGSUPDATE)
+      core.activeContainer.emit(Events.CONTAINER_SETTINGSUPDATE)
     })
     it('should set the selected rate to the defaultValue', () => {
       expect(core.activePlayback.setPlaybackRate).toHaveBeenCalledWith(1.5)