media-captions - npm Package Compare versions

Comparing version 0.0.13 to 0.0.14

dist/dev.js

@@ -391,2 +391,22 @@ import {
 
+// src/utils/timing.ts
+function debounce(fn, delay) {
+  let timeout = null, args;
+  function run() {
+    clear();
+    fn(...args);
+    args = void 0;
+  }
+  function clear() {
+    clearTimeout(timeout);
+    timeout = null;
+  }
+  function debounce2() {
+    args = [].slice.call(arguments);
+    clear();
+    timeout = setTimeout(run, delay);
+  }
+  return debounce2;
+}
+
 // src/vtt/overlay/box.ts
@@ -645,6 +665,10 @@ var STARTING_BOX = Symbol(true ? "STARTING_BOX" : 0);
     this._activeCues = [];
-    this._resizeRafID = -1;
-    this._updateRafID = -1;
+    this._isResizing = false;
     this._regions = /* @__PURE__ */ new Map();
     this._cues = /* @__PURE__ */ new Map();
+    this._resize = debounce(() => {
+      this._isResizing = false;
+      this._updateOverlay();
+      this._render(true);
+    }, 50);
     this.overlay = overlay;
@@ -657,3 +681,3 @@ this.dir = init?.dir ?? "ltr";
     this._updateOverlay();
-    this._resizeObserver = new ResizeObserver(this._resize.bind(this));
+    this._resizeObserver = new ResizeObserver(this._resizing.bind(this));
     this._resizeObserver.observe(overlay);
@@ -692,12 +716,5 @@ }
   update(forceUpdate = false) {
-    if (this._updateRafID >= 0)
-      return;
-    this._updateRafID = requestAnimationFrame(() => {
-      this._render(forceUpdate);
-      this._updateRafID = -1;
-    });
+    this._render(forceUpdate);
   }
   reset() {
-    cancelAnimationFrame(this._updateRafID);
-    this._updateRafID = -1;
     this._cues.clear();
@@ -712,11 +729,5 @@ this._regions.clear();
   }
-  _resize() {
-    if (this._resizeRafID >= 0)
-      return;
-    this._resizeRafID = requestAnimationFrame(() => {
-      this._updateOverlay();
-      this._resizeRafID = -1;
-      if (this._regions.size)
-        this._render(true);
-    });
+  _resizing() {
+    this._isResizing = true;
+    this._resize();
   }
@@ -729,3 +740,3 @@ _updateOverlay() {
   _render(forceUpdate = false) {
-    if (!this._cues.size)
+    if (!this._cues.size || this._isResizing)
       return;
@@ -759,5 +770,3 @@ let cue, activeCues = [...this._cues.keys()].filter((cue2) => this._currentTime >= cue2.startTime && this._currentTime <= cue2.endTime).sort(
       if (regionEl && !regionEl.hasAttribute("data-active")) {
-        requestAnimationFrame(() => {
-          setDataAttr(regionEl, "active");
-        });
+        requestAnimationFrame(() => setDataAttr(regionEl, "active"));
         forceUpdate = true;
@@ -764,0 +773,0 @@ }

dist/prod.js

@@ -10,3 +10,3 @@ import {
   parseVTTTimestamp
-} from "./chunks/chunk-4NZJWVPJ.js";
+} from "./chunks/chunk-3XHOFLI5.js";
 
@@ -37,6 +37,6 @@ // src/parse/text-transform.ts
     this.n = "";
-    this.D = new TextDecoder(encoding);
+    this.C = new TextDecoder(encoding);
   }
   transform(chunk) {
-    this.n += this.D.decode(chunk, { stream: true });
+    this.n += this.C.decode(chunk, { stream: true });
     const lines = this.n.split(LINE_TERMINATOR_RE);
@@ -73,10 +73,10 @@ this.n = lines.pop() || "";
       case "srt":
-        factory = (await import("./chunks/parse-OWSXII2A.js")).default;
+        factory = (await import("./chunks/parse-3ID7YS64.js")).default;
         break;
       case "ssa":
       case "ass":
-        factory = (await import("./chunks/parse-5AJVIO2J.js")).default;
+        factory = (await import("./chunks/parse-MHXWKG3Q.js")).default;
         break;
       default:
-        factory = (await import("./chunks/parse-MMUDIPMV.js")).default;
+        factory = (await import("./chunks/parse-F44NSPYQ.js")).default;
     }
@@ -394,2 +394,22 @@ } else {
 
+// src/utils/timing.ts
+function debounce(fn, delay) {
+  let timeout = null, args;
+  function run() {
+    clear();
+    fn(...args);
+    args = void 0;
+  }
+  function clear() {
+    clearTimeout(timeout);
+    timeout = null;
+  }
+  function debounce2() {
+    args = [].slice.call(arguments);
+    clear();
+    timeout = setTimeout(run, delay);
+  }
+  return debounce2;
+}
+
 // src/vtt/overlay/box.ts
@@ -646,8 +666,12 @@ var STARTING_BOX = Symbol(false ? "STARTING_BOX" : 0);
     this.r = 0;
-    this.z = "ltr";
-    this.w = [];
-    this.A = -1;
-    this.s = -1;
+    this.y = "ltr";
+    this.t = [];
+    this.z = false;
     this.l = /* @__PURE__ */ new Map();
     this.d = /* @__PURE__ */ new Map();
+    this.Y = debounce(() => {
+      this.z = false;
+      this.M();
+      this.N(true);
+    }, 50);
     this.overlay = overlay;
@@ -659,12 +683,12 @@ this.dir = init?.dir ?? "ltr";
     setPartAttr(overlay, "captions");
-    this.N();
-    this.B = new ResizeObserver(this.X.bind(this));
-    this.B.observe(overlay);
+    this.M();
+    this.A = new ResizeObserver(this.W.bind(this));
+    this.A.observe(overlay);
   }
   /* Text direction. */
   get dir() {
-    return this.z;
+    return this.y;
   }
   set dir(dir) {
-    this.z = dir;
+    this.y = dir;
     setDataAttr(this.overlay, "dir", dir);
@@ -681,3 +705,3 @@ }
     this.reset();
-    this.Y(regions);
+    this.X(regions);
     for (const cue of cues)
@@ -696,15 +720,8 @@ this.d.set(cue, null);
   update(forceUpdate = false) {
-    if (this.s >= 0)
-      return;
-    this.s = requestAnimationFrame(() => {
-      this.O(forceUpdate);
-      this.s = -1;
-    });
+    this.N(forceUpdate);
   }
   reset() {
-    cancelAnimationFrame(this.s);
-    this.s = -1;
     this.d.clear();
     this.l.clear();
-    this.w = [];
+    this.t = [];
     this.overlay.textContent = "";
@@ -714,15 +731,9 @@ }
     this.reset();
-    this.B.disconnect();
+    this.A.disconnect();
   }
-  X() {
-    if (this.A >= 0)
-      return;
-    this.A = requestAnimationFrame(() => {
-      this.N();
-      this.A = -1;
-      if (this.l.size)
-        this.O(true);
-    });
+  W() {
+    this.z = true;
+    this.Y();
   }
-  N() {
+  M() {
     this.q = createBox(this.overlay);
@@ -732,4 +743,4 @@ setCSSVar(this.overlay, "overlay-width", this.q.width + "px");
   }
-  O(forceUpdate = false) {
-    if (!this.d.size)
+  N(forceUpdate = false) {
+    if (!this.d.size || this.z)
       return;
@@ -739,4 +750,4 @@ let cue, activeCues = [...this.d.keys()].filter((cue2) => this.r >= cue2.startTime && this.r <= cue2.endTime).sort(
     ), activeRegions = activeCues.map((cue2) => cue2.region);
-    for (let i = 0; i < this.w.length; i++) {
-      cue = this.w[i];
+    for (let i = 0; i < this.t.length; i++) {
+      cue = this.t[i];
       if (activeCues[i] === cue)
@@ -762,7 +773,5 @@ continue;
         this.d.set(cue, cueEl = this.Z(cue));
-      const regionEl = this.C(cue) && this.l.get(cue.region.id);
+      const regionEl = this.B(cue) && this.l.get(cue.region.id);
       if (regionEl && !regionEl.hasAttribute("data-active")) {
-        requestAnimationFrame(() => {
-          setDataAttr(regionEl, "active");
-        });
+        requestAnimationFrame(() => setDataAttr(regionEl, "active"));
         forceUpdate = true;
@@ -781,3 +790,3 @@ }
           continue;
-        const isRegion = this.C(cue), el = isRegion ? this.l.get(cue.region.id) : this.d.get(cue);
+        const isRegion = this.B(cue), el = isRegion ? this.l.get(cue.region.id) : this.d.get(cue);
         if (isRegion) {
@@ -792,5 +801,5 @@ boxes.push(positionRegion(this.q, cue.region, el, boxes));
     updateTimedVTTCueNodes(this.overlay, this.r);
-    this.w = activeCues;
+    this.t = activeCues;
   }
-  Y(regions) {
+  X(regions) {
     if (!regions)
@@ -820,3 +829,3 @@ return;
   Z(cue) {
-    const display = document.createElement("div"), position = computeCuePosition(cue), positionAlignment = computeCuePositionAlignment(cue, this.z);
+    const display = document.createElement("div"), position = computeCuePosition(cue), positionAlignment = computeCuePositionAlignment(cue, this.y);
     setPartAttr(display, "cue-display");
@@ -831,3 +840,3 @@ if (cue.vertical !== "")
     }
-    if (!this.C(cue)) {
+    if (!this.B(cue)) {
       setCSSVar(
@@ -868,3 +877,3 @@ display,
   }
-  C(cue) {
+  B(cue) {
     return cue.region && cue.size === 100 && cue.vertical === "" && cue.line === "auto";
@@ -871,0 +880,0 @@ }

dist/server.js

@@ -393,2 +393,22 @@ import {
 
+// src/utils/timing.ts
+function debounce(fn, delay) {
+  let timeout = null, args;
+  function run() {
+    clear();
+    fn(...args);
+    args = void 0;
+  }
+  function clear() {
+    clearTimeout(timeout);
+    timeout = null;
+  }
+  function debounce2() {
+    args = [].slice.call(arguments);
+    clear();
+    timeout = setTimeout(run, delay);
+  }
+  return debounce2;
+}
+
 // src/vtt/overlay/box.ts
@@ -647,6 +667,10 @@ var STARTING_BOX = Symbol(true ? "STARTING_BOX" : 0);
     this._activeCues = [];
-    this._resizeRafID = -1;
-    this._updateRafID = -1;
+    this._isResizing = false;
     this._regions = /* @__PURE__ */ new Map();
     this._cues = /* @__PURE__ */ new Map();
+    this._resize = debounce(() => {
+      this._isResizing = false;
+      this._updateOverlay();
+      this._render(true);
+    }, 50);
     this.overlay = overlay;
@@ -659,3 +683,3 @@ this.dir = (init == null ? void 0 : init.dir) ?? "ltr";
     this._updateOverlay();
-    this._resizeObserver = new ResizeObserver(this._resize.bind(this));
+    this._resizeObserver = new ResizeObserver(this._resizing.bind(this));
     this._resizeObserver.observe(overlay);
@@ -694,12 +718,5 @@ }
   update(forceUpdate = false) {
-    if (this._updateRafID >= 0)
-      return;
-    this._updateRafID = requestAnimationFrame(() => {
-      this._render(forceUpdate);
-      this._updateRafID = -1;
-    });
+    this._render(forceUpdate);
   }
   reset() {
-    cancelAnimationFrame(this._updateRafID);
-    this._updateRafID = -1;
     this._cues.clear();
@@ -714,11 +731,5 @@ this._regions.clear();
   }
-  _resize() {
-    if (this._resizeRafID >= 0)
-      return;
-    this._resizeRafID = requestAnimationFrame(() => {
-      this._updateOverlay();
-      this._resizeRafID = -1;
-      if (this._regions.size)
-        this._render(true);
-    });
+  _resizing() {
+    this._isResizing = true;
+    this._resize();
   }
@@ -731,3 +742,3 @@ _updateOverlay() {
   _render(forceUpdate = false) {
-    if (!this._cues.size)
+    if (!this._cues.size || this._isResizing)
       return;
@@ -761,5 +772,3 @@ let cue, activeCues = [...this._cues.keys()].filter((cue2) => this._currentTime >= cue2.startTime && this._currentTime <= cue2.endTime).sort(
       if (regionEl && !regionEl.hasAttribute("data-active")) {
-        requestAnimationFrame(() => {
-          setDataAttr(regionEl, "active");
-        });
+        requestAnimationFrame(() => setDataAttr(regionEl, "active"));
         forceUpdate = true;
@@ -766,0 +775,0 @@ }

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

@@ -9,4 +9,3 @@ import type { VTTCue } from '../vtt-cue';
     private _activeCues;
-    private _resizeRafID;
-    private _updateRafID;
+    private _isResizing;
     private readonly _resizeObserver;
@@ -26,3 +25,4 @@ private readonly _regions;
     destroy(): void;
-    private _resize;
+    private _resizing;
+    protected _resize: () => void;
     private _updateOverlay;
@@ -29,0 +29,0 @@ private _render;

package.json

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

README.md

@@ -618,3 +618,3 @@ # Media Captions
 - `removeCue(cue: VTTCue)`: Remove a cue from the renderer.
-- `update(forceUpdate: boolean)`: Schedules a re-render to happen on the next animation frame.
+- `update(forceUpdate: boolean)`: Schedules a re-render to happen.
 - `reset()`: Reset the renderer and clear all internal state including region and cue DOM nodes.
@@ -621,0 +621,0 @@ - `destroy()`: Reset the renderer and destroy internal observers and event listeners.

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

279202

increased by0.17%

Number of package files

47

increased by2.17%

Lines of code

7789

increased by0.43%

No dependency changes