@gcorevideo/player 2.23.0 → 2.23.1

package/dist/index.js

@@ -43303,7 +43303,7 @@ class Player {
     }
 }
 
-var version$1 = "2.23.0";
+var version$1 = "2.23.1";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -52144,16 +52144,16 @@ class Thumbnails extends UICorePlugin {
         this.update();
     }
     mount() {
-        // insert after the background TODO figure out why
         const mediaControl = this.core.getPlugin('media_control');
-        mediaControl.$el.find('.seek-time').css('bottom', 56); // TODO check
-        // TODO use mediaControl.mount? into the `layer`
-        mediaControl.$el.append(this.$el);
+        mediaControl.$el.find('.seek-time').css('bottom', 56); // TODO check the offset
+        mediaControl.$el.first().after(this.$el);
     }
     onMouseMoveSeekbar(_, pos) {
-        this.hoverPosition = pos;
-        this.showing = true;
-        this.update();
+        if (Math.abs(pos - this.hoverPosition) >= 0.01) {
+            this.hoverPosition = pos;
+            this.showing = true;
+            this.update();
+        }
     }
     onMouseLeave() {
         this.showing = false;
@@ -52161,9 +52161,9 @@ class Thumbnails extends UICorePlugin {
     }
     // builds a dom element which represents the thumbnail
     // scaled to the given height
-    buildThumbImage(thumb, height) {
+    buildThumbImage(thumb, height, $ref) {
         const scaleFactor = height / thumb.h;
-        const $container = $('<div />').addClass('thumbnail-container');
+        const $container = $ref && $ref.length ? $ref : $('<div />').addClass('thumbnail-container');
         $container.css('width', thumb.w * scaleFactor);
         $container.css('height', height);
         $container.css({
@@ -52267,8 +52267,7 @@ class Thumbnails extends UICorePlugin {
         const thumb = this.thumbs[thumbIndex];
         // update thumbnail
         const $spotlight = this.$el.find('#thumbnails-spotlight');
-        $spotlight.empty();
-        $spotlight.append(this.buildThumbImage(thumb, this.spotlightHeight));
+        this.buildThumbImage(thumb, this.spotlightHeight, $spotlight.find('.thumbnail-container')).appendTo($spotlight);
         const elWidth = this.$el.width();
         const thumbWidth = $spotlight.width();
         const thumbHeight = $spotlight.height();

package/lib/plugins/thumbnails/Thumbnails.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Thumbnails.d.ts","sourceRoot":"","sources":["../../../src/plugins/thumbnails/Thumbnails.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAKZ,IAAI,EACL,MAAM,cAAc,CAAA;AAUrB,OAAO,uCAAuC,CAAA;AAM9C;;;GAGG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,MAAM,EAAE,MAAM,CAAA;IACd,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AAeD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBAAa,UAAW,SAAQ,YAAY;IAC1C,OAAO,CAAC,qBAAqB,CAAoB;IAEjD,OAAO,CAAC,iBAAiB,CAAY;IAErC,OAAO,CAAC,gBAAgB,CAAY;IAEpC,OAAO,CAAC,aAAa,CAAI;IAEzB,OAAO,CAAC,OAAO,CAAQ;IAEvB,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,eAAe,CAAI;IAE3B,OAAO,CAAC,cAAc,CAAI;IAE1B,OAAO,CAAC,MAAM,CAAsB;IAEpC;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAuB;gBAE3C,IAAI,EAAE,IAAI;IAgBtB,OAAO,CAAC,iBAAiB;IAiCzB;;OAEG;IACM,UAAU;IAInB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,WAAW;YAmDL,eAAe;IAO7B,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,IAAI;IAaZ,OAAO,CAAC,KAAK;IAQb,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,eAAe;IAmBvB,OAAO,CAAC,YAAY;IAkBpB,OAAO,CAAC,OAAO;IAUf,OAAO,CAAC,cAAc;IAuEtB,OAAO,CAAC,oBAAoB;IA+C5B,OAAO,CAAC,oBAAoB;IAa5B,OAAO,CAAC,MAAM;IAad,OAAO,CAAC,WAAW;IAgBnB,OAAO,KAAK,YAAY,GAMvB;IAEQ,MAAM;CAShB"}
+{"version":3,"file":"Thumbnails.d.ts","sourceRoot":"","sources":["../../../src/plugins/thumbnails/Thumbnails.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAKZ,IAAI,EACL,MAAM,cAAc,CAAA;AAUrB,OAAO,uCAAuC,CAAA;AAM9C;;;GAGG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,MAAM,EAAE,MAAM,CAAA;IACd,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AAeD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBAAa,UAAW,SAAQ,YAAY;IAC1C,OAAO,CAAC,qBAAqB,CAAoB;IAEjD,OAAO,CAAC,iBAAiB,CAAY;IAErC,OAAO,CAAC,gBAAgB,CAAY;IAEpC,OAAO,CAAC,aAAa,CAAI;IAEzB,OAAO,CAAC,OAAO,CAAQ;IAEvB,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,eAAe,CAAI;IAE3B,OAAO,CAAC,cAAc,CAAI;IAE1B,OAAO,CAAC,MAAM,CAAsB;IAEpC;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAuB;gBAE3C,IAAI,EAAE,IAAI;IAgBtB,OAAO,CAAC,iBAAiB;IAiCzB;;OAEG;IACM,UAAU;IAInB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,WAAW;YAmDL,eAAe;IAO7B,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,IAAI;IAaZ,OAAO,CAAC,KAAK;IAMb,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,eAAe;IAuBvB,OAAO,CAAC,YAAY;IAkBpB,OAAO,CAAC,OAAO;IAUf,OAAO,CAAC,cAAc;IAuEtB,OAAO,CAAC,oBAAoB;IAkD5B,OAAO,CAAC,oBAAoB;IAa5B,OAAO,CAAC,MAAM;IAad,OAAO,CAAC,WAAW;IAgBnB,OAAO,KAAK,YAAY,GAMvB;IAEQ,MAAM;CAShB"}

package/lib/plugins/thumbnails/Thumbnails.js

@@ -169,16 +169,16 @@ export class Thumbnails extends UICorePlugin {
         this.update();
     }
     mount() {
-        // insert after the background TODO figure out why
         const mediaControl = this.core.getPlugin('media_control');
-        mediaControl.$el.find('.seek-time').css('bottom', 56); // TODO check
-        // TODO use mediaControl.mount? into the `layer`
-        mediaControl.$el.append(this.$el);
+        mediaControl.$el.find('.seek-time').css('bottom', 56); // TODO check the offset
+        mediaControl.$el.first().after(this.$el);
     }
     onMouseMoveSeekbar(_, pos) {
-        this.hoverPosition = pos;
-        this.showing = true;
-        this.update();
+        if (Math.abs(pos - this.hoverPosition) >= 0.01) {
+            this.hoverPosition = pos;
+            this.showing = true;
+            this.update();
+        }
     }
     onMouseLeave() {
         this.showing = false;
@@ -186,9 +186,9 @@ export class Thumbnails extends UICorePlugin {
     }
     // builds a dom element which represents the thumbnail
     // scaled to the given height
-    buildThumbImage(thumb, height) {
+    buildThumbImage(thumb, height, $ref) {
         const scaleFactor = height / thumb.h;
-        const $container = $('<div />').addClass('thumbnail-container');
+        const $container = $ref && $ref.length ? $ref : $('<div />').addClass('thumbnail-container');
         $container.css('width', thumb.w * scaleFactor);
         $container.css('height', height);
         $container.css({
@@ -292,8 +292,7 @@ export class Thumbnails extends UICorePlugin {
         const thumb = this.thumbs[thumbIndex];
         // update thumbnail
         const $spotlight = this.$el.find('#thumbnails-spotlight');
-        $spotlight.empty();
-        $spotlight.append(this.buildThumbImage(thumb, this.spotlightHeight));
+        this.buildThumbImage(thumb, this.spotlightHeight, $spotlight.find('.thumbnail-container')).appendTo($spotlight);
         const elWidth = this.$el.width();
         const thumbWidth = $spotlight.width();
         const thumbHeight = $spotlight.height();

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;;;;;;;;;;;;;;;;EAqB9C;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmC/C;AAED,wBAAgB,mBAAmB,CACjC,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,QAAQ,GAAE,GAA0B;;;;;;;;;;;;;;;;;;;;;;;EA4BrC;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAc/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;;;;;;;;;;;;;;;;EAqB9C;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmC/C;AAED,wBAAgB,mBAAmB,CACjC,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,QAAQ,GAAE,GAA0B;;;;;;;;;;;;;;;;;;;;;;;EA4BrC;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAe/C;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,OAe7C"}

package/lib/testUtils.js

@@ -109,6 +109,7 @@ export function createMockMediaControl(core) {
     // @ts-ignore
     mediaControl.toggleElement = vi.fn();
     vi.spyOn(mediaControl, 'trigger');
+    core.$el.append(mediaControl.$el);
     return mediaControl;
 }
 export function createMockBottomGear(core) {

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@gcorevideo/player",
-  "version": "2.23.0",
+  "version": "2.23.1",
   "description": "Gcore JavaScript video player",
   "main": "dist/index.js",
   "type": "module",
   "typings": "lib/index.d.ts",
-  "keywords": ["player", "video streaming"],
+  "keywords": [
+    "player",
+    "video streaming"
+  ],
   "scripts": {
     "build": "npm run build:ts && npm run build:bundle",
     "build:1": "npm run build:ts && npm run build:bundle && date",

package/src/plugins/thumbnails/Thumbnails.ts

@@ -255,17 +255,17 @@ export class Thumbnails extends UICorePlugin {
   }
 
   private mount() {
-    // insert after the background TODO figure out why
     const mediaControl = this.core.getPlugin('media_control') as MediaControl
-    mediaControl.$el.find('.seek-time').css('bottom', 56) // TODO check
-    // TODO use mediaControl.mount? into the `layer`
-    mediaControl.$el.append(this.$el)
+    mediaControl.$el.find('.seek-time').css('bottom', 56) // TODO check the offset
+    mediaControl.$el.first().after(this.$el);
   }
 
   private onMouseMoveSeekbar(_: MouseEvent, pos: number) {
-    this.hoverPosition = pos
-    this.showing = true
-    this.update()
+    if (Math.abs(pos - this.hoverPosition) >= 0.01) {
+      this.hoverPosition = pos
+      this.showing = true
+      this.update()
+    }
   }
 
   private onMouseLeave() {
@@ -275,9 +275,13 @@ export class Thumbnails extends UICorePlugin {
 
   // builds a dom element which represents the thumbnail
   // scaled to the given height
-  private buildThumbImage(thumb: ThumbnailDesc, height: number) {
+  private buildThumbImage(
+    thumb: ThumbnailDesc,
+    height: number,
+    $ref?: ZeptoResult,
+  ) {
     const scaleFactor = height / thumb.h
-    const $container = $('<div />').addClass('thumbnail-container')
+    const $container = $ref && $ref.length ? $ref : $('<div />').addClass('thumbnail-container')
 
     $container.css('width', thumb.w * scaleFactor)
     $container.css('height', height)
@@ -414,8 +418,11 @@ export class Thumbnails extends UICorePlugin {
     // update thumbnail
     const $spotlight = this.$el.find('#thumbnails-spotlight')
 
-    $spotlight.empty()
-    $spotlight.append(this.buildThumbImage(thumb, this.spotlightHeight))
+    this.buildThumbImage(
+      thumb,
+      this.spotlightHeight,
+      $spotlight.find('.thumbnail-container'),
+    ).appendTo($spotlight)
 
     const elWidth = this.$el.width()
     const thumbWidth = $spotlight.width()

package/src/plugins/thumbnails/__tests__/Thumbnails.test.ts

@@ -55,14 +55,14 @@ sprite.png#xywh=200,200,100,100
     it('should render', () => {
       expect(thumbnails.$el.html()).toMatchSnapshot()
     })
-    it('should mount to media controls', () => {
-      expect(mediaControl.$el.find('.scrub-thumbnails')).toHaveLength(1)
+    it('should mount along with media controls', () => {
+      expect(core.$el.find('.scrub-thumbnails')).toHaveLength(1)
     })
     it('should load image dimensions', () => {
       expect(loadImageDimensions).toHaveBeenCalledWith('https://example.com/sprite.png')
     })
     it('should parse sprite sheet and create thumbnails', () => {
-      const thumbs = mediaControl.$el.find('#thumbnails-carousel .thumbnail-container')
+      const thumbs = thumbnails.$el.find('#thumbnails-carousel .thumbnail-container')
       expect(thumbs).toHaveLength(2)
     })
     it('should hide', () => {

package/src/testUtils.ts

@@ -123,6 +123,7 @@ export function createMockMediaControl(core: any) {
   // @ts-ignore
   mediaControl.toggleElement = vi.fn()
   vi.spyOn(mediaControl, 'trigger')
+  core.$el.append(mediaControl.$el)
   return mediaControl
 }