media-captions - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

dist/dev.js

@@ -468,6 +468,6 @@ import {
   return {
-    top: box.top - container.top,
-    left: box.left - container.left,
-    right: container.right - box.right,
-    bottom: container.bottom - box.bottom
+    top: (box.top - container.top) / container.height,
+    left: (box.left - container.left) / container.width,
+    right: (box.right - container.right) / container.width,
+    bottom: (box.bottom - container.bottom) / container.height
   };
@@ -478,3 +478,3 @@ }
   for (const pos of ["top", "left", "right", "bottom"]) {
-    setCSSVar(el, `${prefix}-${pos}`, cssBox[pos] + "px");
+    setCSSVar(el, `${prefix}-${pos}`, Math.abs(cssBox[pos]) * 100 + "%");
   }
@@ -655,14 +655,5 @@ }
     this.reset();
-    if (regions) {
-      for (const region of regions) {
-        const el = this._createRegionElement(region);
-        if (el) {
-          this._regions.set(region.id, el);
-          this.overlay.append(el);
-        }
-      }
-    }
-    for (const cue of cues) {
+    this._buildRegions(regions);
+    for (const cue of cues)
       this._cues.set(cue, null);
-    }
     this.update();
@@ -699,6 +690,6 @@ }
   _resize() {
-    cancelAnimationFrame(this._resizeRafID);
+    if (this._resizeRafID >= 0)
+      return;
     this._resizeRafID = requestAnimationFrame(() => {
       this._updateOverlay();
-      this.update(true);
       this._resizeRafID = -1;
@@ -708,9 +699,5 @@ });
   _updateOverlay() {
-    const rect = this.overlay.getBoundingClientRect();
-    setCSSVar(this.overlay, "overlay-width", rect.width + "px");
-    setCSSVar(this.overlay, "overlay-height", rect.height + "px");
-    if (!this._overlayBox)
-      this._overlayBox = createBox(this.overlay);
-    else
-      updateBoxDimensions(this._overlayBox, this.overlay);
+    this._overlayBox = createBox(this.overlay);
+    setCSSVar(this.overlay, "overlay-width", this._overlayBox.width + "px");
+    setCSSVar(this.overlay, "overlay-height", this._overlayBox.height + "px");
   }
@@ -756,2 +743,8 @@ _render(forceUpdate = false) {
       }
+      if (this._cues.size > 100) {
+        const keys = Array.from(this._cues.keys()).slice(0, 50);
+        for (let i2 = 0; i2 < keys.length; i2++) {
+          this._cues.delete(keys[i2]);
+        }
+      }
     }
@@ -776,2 +769,13 @@ if (forceUpdate) {
   }
+  _buildRegions(regions) {
+    if (!regions)
+      return;
+    for (const region of regions) {
+      const el = this._createRegionElement(region);
+      if (el) {
+        this._regions.set(region.id, el);
+        this.overlay.append(el);
+      }
+    }
+  }
   _createRegionElement(region) {
@@ -778,0 +782,0 @@ const el = document.createElement("div");

dist/prod.js

@@ -468,6 +468,6 @@ import {
   return {
-    top: box.top - container.top,
-    left: box.left - container.left,
-    right: container.right - box.right,
-    bottom: container.bottom - box.bottom
+    top: (box.top - container.top) / container.height,
+    left: (box.left - container.left) / container.width,
+    right: (box.right - container.right) / container.width,
+    bottom: (box.bottom - container.bottom) / container.height
   };
@@ -478,3 +478,3 @@ }
   for (const pos of ["top", "left", "right", "bottom"]) {
-    setCSSVar(el, `${prefix}-${pos}`, cssBox[pos] + "px");
+    setCSSVar(el, `${prefix}-${pos}`, Math.abs(cssBox[pos]) * 100 + "%");
   }
@@ -655,14 +655,5 @@ }
     this.reset();
-    if (regions) {
-      for (const region of regions) {
-        const el = this.Y(region);
-        if (el) {
-          this.n.set(region.id, el);
-          this.overlay.append(el);
-        }
-      }
-    }
-    for (const cue of cues) {
+    this.Y(regions);
+    for (const cue of cues)
       this.d.set(cue, null);
-    }
     this.update();
@@ -699,6 +690,6 @@ }
   X() {
-    cancelAnimationFrame(this.C);
+    if (this.C >= 0)
+      return;
     this.C = requestAnimationFrame(() => {
       this.O();
-      this.update(true);
       this.C = -1;
@@ -708,9 +699,5 @@ });
   O() {
-    const rect = this.overlay.getBoundingClientRect();
-    setCSSVar(this.overlay, "overlay-width", rect.width + "px");
-    setCSSVar(this.overlay, "overlay-height", rect.height + "px");
-    if (!this.s)
-      this.s = createBox(this.overlay);
-    else
-      updateBoxDimensions(this.s, this.overlay);
+    this.s = createBox(this.overlay);
+    setCSSVar(this.overlay, "overlay-width", this.s.width + "px");
+    setCSSVar(this.overlay, "overlay-height", this.s.height + "px");
   }
@@ -756,2 +743,8 @@ Z(forceUpdate = false) {
       }
+      if (this.d.size > 100) {
+        const keys = Array.from(this.d.keys()).slice(0, 50);
+        for (let i2 = 0; i2 < keys.length; i2++) {
+          this.d.delete(keys[i2]);
+        }
+      }
     }
@@ -776,3 +769,14 @@ if (forceUpdate) {
   }
-  Y(region) {
+  Y(regions) {
+    if (!regions)
+      return;
+    for (const region of regions) {
+      const el = this.$(region);
+      if (el) {
+        this.n.set(region.id, el);
+        this.overlay.append(el);
+      }
+    }
+  }
+  $(region) {
     const el = document.createElement("div");
@@ -779,0 +783,0 @@ setPartAttr(el, "region");

dist/server.js

@@ -470,6 +470,6 @@ import {
   return {
-    top: box.top - container.top,
-    left: box.left - container.left,
-    right: container.right - box.right,
-    bottom: container.bottom - box.bottom
+    top: (box.top - container.top) / container.height,
+    left: (box.left - container.left) / container.width,
+    right: (box.right - container.right) / container.width,
+    bottom: (box.bottom - container.bottom) / container.height
   };
@@ -480,3 +480,3 @@ }
   for (const pos of ["top", "left", "right", "bottom"]) {
-    setCSSVar(el, `${prefix}-${pos}`, cssBox[pos] + "px");
+    setCSSVar(el, `${prefix}-${pos}`, Math.abs(cssBox[pos]) * 100 + "%");
   }
@@ -657,14 +657,5 @@ }
     this.reset();
-    if (regions) {
-      for (const region of regions) {
-        const el = this._createRegionElement(region);
-        if (el) {
-          this._regions.set(region.id, el);
-          this.overlay.append(el);
-        }
-      }
-    }
-    for (const cue of cues) {
+    this._buildRegions(regions);
+    for (const cue of cues)
       this._cues.set(cue, null);
-    }
     this.update();
@@ -701,6 +692,6 @@ }
   _resize() {
-    cancelAnimationFrame(this._resizeRafID);
+    if (this._resizeRafID >= 0)
+      return;
     this._resizeRafID = requestAnimationFrame(() => {
       this._updateOverlay();
-      this.update(true);
       this._resizeRafID = -1;
@@ -710,9 +701,5 @@ });
   _updateOverlay() {
-    const rect = this.overlay.getBoundingClientRect();
-    setCSSVar(this.overlay, "overlay-width", rect.width + "px");
-    setCSSVar(this.overlay, "overlay-height", rect.height + "px");
-    if (!this._overlayBox)
-      this._overlayBox = createBox(this.overlay);
-    else
-      updateBoxDimensions(this._overlayBox, this.overlay);
+    this._overlayBox = createBox(this.overlay);
+    setCSSVar(this.overlay, "overlay-width", this._overlayBox.width + "px");
+    setCSSVar(this.overlay, "overlay-height", this._overlayBox.height + "px");
   }
@@ -758,2 +745,8 @@ _render(forceUpdate = false) {
       }
+      if (this._cues.size > 100) {
+        const keys = Array.from(this._cues.keys()).slice(0, 50);
+        for (let i2 = 0; i2 < keys.length; i2++) {
+          this._cues.delete(keys[i2]);
+        }
+      }
     }
@@ -778,2 +771,13 @@ if (forceUpdate) {
   }
+  _buildRegions(regions) {
+    if (!regions)
+      return;
+    for (const region of regions) {
+      const el = this._createRegionElement(region);
+      if (el) {
+        this._regions.set(region.id, el);
+        this.overlay.append(el);
+      }
+    }
+  }
   _createRegionElement(region) {
@@ -780,0 +784,0 @@ const el = document.createElement("div");

dist/types/vtt/overlay/render-overlay.d.ts

@@ -28,2 +28,3 @@ import type { VTTCue } from '../vtt-cue';
     private _render;
+    private _buildRegions;
     private _createRegionElement;
@@ -30,0 +31,0 @@ private _createCueElement;

package.json

 {
   "name": "media-captions",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Media captions parser and renderer.",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -894,3 +894,3 @@ # Media Captions
 [discord-badge]: https://img.shields.io/discord/742612686679965696?color=%235865F2&label=%20&logo=discord&logoColor=white&style=flat-square
-[stackblitz-demo]: https://stackblitz.com/edit/media-captions?embed=1&file=index.ts&hideNavigation=1&view=editor
+[stackblitz-demo]: https://stackblitz.com/edit/media-captions?embed=1&file=src/main.ts&hideNavigation=1&showSidebar=1
 [demuxed]: https://demuxed.com
@@ -897,0 +897,0 @@ [caption-me-talk]: https://www.youtube.com/watch?v=Z0HqYQqdErE

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

270990

increased by0.3%

Lines of code

7602

increased by0.22%

No dependency changes