@gcorevideo/player 2.22.29 → 2.22.30

package/lib/plugins/skip-time/SkipTime.d.ts

@@ -1,7 +1,7 @@
 import { UICorePlugin } from '@clappr/core';
 import '../../../assets/skip-time/style.scss';
 /**
- * `PLUGIN` that adds skip controls to the media control UI.
+ * `PLUGIN` that allows skipping time by tapping on the left or right side of the video.
  * @beta
  */
 export declare class SkipTime extends UICorePlugin {
@@ -10,23 +10,37 @@ export declare class SkipTime extends UICorePlugin {
         min: string;
     };
     get container(): any;
-    get template(): any;
+    private static readonly template;
+    /**
+     * @internal
+     */
     get attributes(): {
         class: string;
-        'data-skip-time': string;
     };
     private position;
+    /**
+     * @internal
+     */
     get events(): {
-        'click [data-skip-left]': string;
-        'click [data-skip-mid]': string;
-        'click [data-skip-right]': string;
+        'click #mc-skip-left': string;
+        'click #mc-skip-mid': string;
+        'click #mc-skip-right': string;
     };
+    /**
+     * @internal
+     */
     bindEvents(): void;
-    setBack(): void;
-    handleRewindClicks(): void;
-    setMidClick(): void;
-    setForward(): void;
-    toggleFullscreen(): void;
+    private onContainerChanged;
+    private setBack;
+    private handleRewindClicks;
+    private handleSkip;
+    private setMidClick;
+    private setForward;
+    private toggleFullscreen;
+    /**
+     * @internal
+     */
     render(): this;
+    private mount;
 }
 //# sourceMappingURL=SkipTime.d.ts.map

package/lib/plugins/skip-time/SkipTime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SkipTime.d.ts","sourceRoot":"","sources":["../../../src/plugins/skip-time/SkipTime.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAuC,MAAM,cAAc,CAAA;AAKhF,OAAO,sCAAsC,CAAA;AAI7C;;;GAGG;AACH,qBAAa,QAAS,SAAQ,YAAY;IACxC,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,IAAI,SAAS,QAEZ;IAED,IAAI,QAAQ,QAEX;IAED,IAAa,UAAU;;;MAKtB;IAED,OAAO,CAAC,QAAQ,CAAkB;IAElC,IAAa,MAAM;;;;MAMlB;IAEQ,UAAU;IAYnB,OAAO;IAIP,kBAAkB;IA+BlB,WAAW;IAIX,UAAU;IAIV,gBAAgB;IAMP,MAAM;CAWhB"}
+{"version":3,"file":"SkipTime.d.ts","sourceRoot":"","sources":["../../../src/plugins/skip-time/SkipTime.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAuC,MAAM,cAAc,CAAA;AAMhF,OAAO,sCAAsC,CAAA;AAM7C;;;GAGG;AACH,qBAAa,QAAS,SAAQ,YAAY;IACxC,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,IAAI,SAAS,QAEZ;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAuB;IAEvD;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED,OAAO,CAAC,QAAQ,CAAkB;IAElC;;OAEG;IACH,IAAa,MAAM;;;;MAMlB;IAED;;OAEG;IACM,UAAU;IAKnB,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,kBAAkB;IAc1B,OAAO,CAAC,UAAU;IA0BlB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,gBAAgB;IAOxB;;OAEG;IACM,MAAM;IAOf,OAAO,CAAC,KAAK;CAId"}

package/lib/plugins/skip-time/SkipTime.js

@@ -1,9 +1,11 @@
 import { UICorePlugin, Browser, Playback, Events, template } from '@clappr/core';
+import { trace } from '@gcorevideo/utils';
 import { CLAPPR_VERSION } from '../../build.js';
 import pluginHtml from '../../../assets/skip-time/skip-time.ejs';
 import '../../../assets/skip-time/style.scss';
+const T = 'plugins.skip_time';
 /**
- * `PLUGIN` that adds skip controls to the media control UI.
+ * `PLUGIN` that allows skipping time by tapping on the left or right side of the video.
  * @beta
  */
 export class SkipTime extends UICorePlugin {
@@ -16,39 +18,56 @@ export class SkipTime extends UICorePlugin {
     get container() {
         return this.core && this.core.activeContainer;
     }
-    get template() {
-        return template(pluginHtml);
-    }
+    static template = template(pluginHtml);
+    /**
+     * @internal
+     */
     get attributes() {
         return {
-            class: this.name + '_plugin',
-            'data-skip-time': '',
+            class: 'mc-skip-time',
         };
     }
     position = 'mid';
+    /**
+     * @internal
+     */
     get events() {
         return {
-            'click [data-skip-left]': 'setBack',
-            'click [data-skip-mid]': 'setMidClick',
-            'click [data-skip-right]': 'setForward',
+            'click #mc-skip-left': 'setBack',
+            'click #mc-skip-mid': 'setMidClick',
+            'click #mc-skip-right': 'setForward',
         };
     }
+    /**
+     * @internal
+     */
     bindEvents() {
         this.listenTo(this.core, Events.CORE_READY, this.render);
-        if (!this.container) {
-            return;
-        }
+        this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onContainerChanged);
+    }
+    onContainerChanged() {
         this.listenTo(this.container, Events.CONTAINER_DBLCLICK, this.handleRewindClicks);
+        this.mount();
     }
     setBack() {
+        trace(`${T} setBack`);
         this.position = 'left';
     }
     handleRewindClicks() {
+        trace(`${T} handleRewindClicks`, {
+            position: this.position,
+        });
         if (this.core.getPlaybackType() === Playback.LIVE &&
             !this.container.isDvrEnabled()) {
             this.toggleFullscreen();
             return;
         }
+        this.handleSkip();
+    }
+    handleSkip() {
+        trace(`${T} handleSkip`, {
+            position: this.position,
+        });
         if (Browser.isMobile) {
             if (this.position === 'left') {
                 const seekPos = this.container.getCurrentTime() - 10;
@@ -70,22 +89,29 @@ export class SkipTime extends UICorePlugin {
         }
     }
     setMidClick() {
+        trace(`${T} setMidClick`);
         this.position = 'mid';
     }
     setForward() {
+        trace(`${T} setForward`);
         this.position = 'right';
     }
     toggleFullscreen() {
+        trace(`${T} toggleFullscreen`);
         this.trigger(Events.MEDIACONTROL_FULLSCREEN, this.name);
         this.container.fullscreen();
         this.core.toggleFullscreen();
     }
+    /**
+     * @internal
+     */
     render() {
-        this.$el.html(template(pluginHtml));
-        if (this.core.activeContainer) {
-            this.core.activeContainer.$el.append(this.el);
-        }
-        this.bindEvents();
+        trace(`${T} render`);
+        this.$el.html(SkipTime.template());
         return this;
     }
+    mount() {
+        trace(`${T} mount`);
+        this.core.activeContainer.$el.append(this.el);
+    }
 }

package/package.json

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

package/src/plugins/media-control/__tests__/__snapshots__/MediaControl.test.ts.snap

@@ -246,7 +246,7 @@ exports[`MediaControl > rendering timing > once metadata is loaded > should wait
                 <span class="drawer-text" data-volume=""></span>
             </div>
             
-    <div class="bar-container" data-volume="">
+    <div class="bar-container volume-bar-hide" data-volume="">
         <div class="bar-background" data-volume="">
             <div class="bar-fill-1 gcore-skin-main-color" data-volume="" style="width: 100%;"></div>
         </div>

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

@@ -1,4 +1,5 @@
 import { UICorePlugin, Browser, Playback, Events, template } from '@clappr/core'
+import { trace } from '@gcorevideo/utils'
 
 import { CLAPPR_VERSION } from '../../build.js'
 
@@ -7,8 +8,10 @@ import '../../../assets/skip-time/style.scss'
 
 type Position = 'mid' | 'left' | 'right'
 
+const T = 'plugins.skip_time'
+
 /**
- * `PLUGIN` that adds skip controls to the media control UI.
+ * `PLUGIN` that allows skipping time by tapping on the left or right side of the video.
  * @beta
  */
 export class SkipTime extends UICorePlugin {
@@ -24,52 +27,70 @@ export class SkipTime extends UICorePlugin {
     return this.core && this.core.activeContainer
   }
 
-  get template() {
-    return template(pluginHtml)
-  }
+  private static readonly template = template(pluginHtml)
 
+  /**
+   * @internal
+   */
   override get attributes() {
     return {
-      class: this.name + '_plugin',
-      'data-skip-time': '',
+      class: 'mc-skip-time',
     }
   }
 
   private position: Position = 'mid'
 
+  /**
+   * @internal
+   */
   override get events() {
     return {
-      'click [data-skip-left]': 'setBack',
-      'click [data-skip-mid]': 'setMidClick',
-      'click [data-skip-right]': 'setForward',
+      'click #mc-skip-left': 'setBack',
+      'click #mc-skip-mid': 'setMidClick',
+      'click #mc-skip-right': 'setForward',
     }
   }
 
+  /**
+   * @internal
+   */
   override bindEvents() {
     this.listenTo(this.core, Events.CORE_READY, this.render)
-    if (!this.container) {
-      return
-    }
+    this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onContainerChanged)
+  }
+
+  private onContainerChanged() {
     this.listenTo(
       this.container,
       Events.CONTAINER_DBLCLICK,
       this.handleRewindClicks,
     )
+    this.mount()
   }
 
-  setBack() {
+  private setBack() {
+    trace(`${T} setBack`)
     this.position = 'left'
   }
 
-  handleRewindClicks() {
+  private handleRewindClicks() {
+    trace(`${T} handleRewindClicks`, {
+      position: this.position,
+    })
     if (
       this.core.getPlaybackType() === Playback.LIVE &&
       !this.container.isDvrEnabled()
     ) {
       this.toggleFullscreen()
-
       return
     }
+    this.handleSkip()
+  }
+
+  private handleSkip() {
+    trace(`${T} handleSkip`, {
+      position: this.position,
+    })
     if (Browser.isMobile) {
       if (this.position === 'left') {
         const seekPos = this.container.getCurrentTime() - 10
@@ -92,29 +113,35 @@ export class SkipTime extends UICorePlugin {
     }
   }
 
-  setMidClick() {
+  private setMidClick() {
+    trace(`${T} setMidClick`)
     this.position = 'mid'
   }
 
-  setForward() {
+  private setForward() {
+    trace(`${T} setForward`)
     this.position = 'right'
   }
 
-  toggleFullscreen() {
+  private toggleFullscreen() {
+    trace(`${T} toggleFullscreen`)
     this.trigger(Events.MEDIACONTROL_FULLSCREEN, this.name)
     this.container.fullscreen()
     this.core.toggleFullscreen()
   }
 
+  /**
+   * @internal
+   */
   override render() {
-    this.$el.html(template(pluginHtml))
-
-    if (this.core.activeContainer) {
-      this.core.activeContainer.$el.append(this.el)
-    }
-
-    this.bindEvents()
+    trace(`${T} render`)
+    this.$el.html(SkipTime.template())
 
     return this
   }
+
+  private mount() {
+    trace(`${T} mount`)
+    this.core.activeContainer.$el.append(this.el)
+  }
 }