media-captions - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

dist/dev.js

@@ -10,3 +10,3 @@ import {
   parseVTTTimestamp
-} from "./chunks/chunk-5FM3VAVL.js";
+} from "./chunks/chunk-665KQXAY.js";
 
@@ -72,10 +72,10 @@ // src/parse/text-transform.ts
       case "srt":
-        factory = (await import("./chunks/parse-WUELWVRB.js")).default;
+        factory = (await import("./chunks/parse-ZLFM5JS3.js")).default;
         break;
       case "ssa":
       case "ass":
-        factory = (await import("./chunks/parse-5ZDGH4JQ.js")).default;
+        factory = (await import("./chunks/parse-VS4JCP7M.js")).default;
         break;
       default:
-        factory = (await import("./chunks/parse-ZNWA4XMD.js")).default;
+        factory = (await import("./chunks/parse-VRKH2NXJ.js")).default;
     }
@@ -413,8 +413,7 @@ } else {
 }
-function updateBoxDimensions(box, el) {
+function updateBoxDimensions(container, box, el) {
   box.width = el.clientWidth;
   box.height = el.clientHeight;
-  box.right = box.left + box.width;
-  box.bottom = box.top + box.height;
-  return box;
+  box.right = Math.min(container.right, box.left + box.width);
+  box.bottom = Math.min(container.bottom, box.top + box.height);
 }
@@ -473,19 +472,18 @@ function moveBox(box, axis, delta) {
     left: (box.left - container.left) / container.width,
-    right: (box.right - container.right) / container.width,
-    bottom: (box.bottom - container.bottom) / container.height
+    right: (container.right - box.right) / container.width,
+    bottom: (container.bottom - box.bottom) / container.height
   };
 }
+var BOX_SIDES = ["top", "left", "right", "bottom"];
 function setBoxCSSVars(el, container, box, prefix) {
   const cssBox = createCSSBox(container, box);
-  for (const pos of ["top", "left", "right", "bottom"]) {
-    setCSSVar(el, `${prefix}-${pos}`, Math.abs(cssBox[pos]) * 100 + "%");
+  for (const side of BOX_SIDES) {
+    setCSSVar(el, `${prefix}-${side}`, Math.abs(cssBox[side]) * 100 + "%");
   }
 }
 function avoidBoxCollisions(container, box, boxes, axis) {
-  let percentage = 1, collisionBox = null, positionedBox, startBox = createBox(box);
+  let percentage = 1, positionedBox, startBox = { ...box };
   for (let i = 0; i < axis.length; i++) {
-    collisionBox = null;
-    while (isBoxOutOfBounds(container, box, axis[i]) || isWithinBox(container, box) && (collisionBox = isAnyBoxCollision(box, boxes))) {
-      moveBox(box, axis[i], calcBoxMoveDelta(axis[i], box, collisionBox) + 8);
-      collisionBox = null;
+    while (isBoxOutOfBounds(container, box, axis[i]) || isWithinBox(container, box) && isAnyBoxCollision(box, boxes)) {
+      moveBox(box, axis[i], 1);
     }
@@ -496,29 +494,22 @@ if (isWithinBox(container, box))
     if (percentage > intersection) {
-      positionedBox = createBox(box);
+      positionedBox = { ...box };
       percentage = intersection;
     }
-    box = createBox(startBox);
+    box = { ...startBox };
   }
   return positionedBox || startBox;
 }
-function calcBoxMoveDelta(axis, box, avoid) {
-  if (!avoid)
-    return 0;
-  switch (axis) {
-    case "+x":
-      return avoid.right - box.right;
-    case "-x":
-      return box.left - avoid.left;
-    case "+y":
-      return avoid.bottom - box.top;
-    case "-y":
-      return avoid.top - box.top;
-  }
-}
 
 // src/vtt/overlay/position-cue.ts
-function positionCue(container, cue, cueEl, boxes) {
-  let line = computeCueLine(cue), cueBox = { ...cueEl[STARTING_BOX] ??= createBox(cueEl) }, axis = [];
-  updateBoxDimensions(cueBox, cueEl);
-  if (cue.snapToLines) {
+var POSITION_OVERRIDE = Symbol(true ? "POSITION_OVERRIDE" : 0);
+function positionCue(container, cue, displayEl, boxes) {
+  let cueEl = displayEl.firstElementChild, line = computeCueLine(cue), displayBox, axis = [];
+  if (!displayEl[STARTING_BOX]) {
+    displayEl[STARTING_BOX] = createStartingBox(container, displayEl);
+  }
+  displayBox = resolveStartingBox(container, { ...displayEl[STARTING_BOX] });
+  updateBoxDimensions(container, displayBox, displayEl);
+  if (displayEl[POSITION_OVERRIDE]) {
+    axis = [displayEl[POSITION_OVERRIDE] === "top" ? "+y" : "-y", "+x", "-x"];
+  } else if (cue.snapToLines) {
     let size;
@@ -539,3 +530,3 @@ switch (cue.vertical) {
     }
-    let step = getLineHeight(cueEl.firstElementChild), position = step * Math.round(line), maxPosition = container[size] + step, initialAxis = axis[0];
+    let step = getLineHeight(cueEl), position = step * Math.round(line), maxPosition = container[size] + step, initialAxis = axis[0];
     if (Math.abs(position) > maxPosition) {
@@ -549,9 +540,13 @@ position = position < 0 ? -1 : 1;
     }
-    moveBox(cueBox, initialAxis, position);
+    moveBox(displayBox, initialAxis, position);
   } else {
-    const isHorizontal = cue.vertical === "", posAxis = isHorizontal ? "+y" : "+x", size = isHorizontal ? cueBox.height : cueBox.width;
-    moveBox(cueBox, posAxis, (isHorizontal ? container.height : container.width) * line / 100);
+    const isHorizontal = cue.vertical === "", posAxis = isHorizontal ? "+y" : "+x", size = isHorizontal ? displayBox.height : displayBox.width;
     moveBox(
-      cueBox,
+      displayBox,
       posAxis,
+      (isHorizontal ? container.height : container.width) * line / 100
+    );
+    moveBox(
+      displayBox,
+      posAxis,
       cue.lineAlign === "center" ? size / 2 : cue.lineAlign === "end" ? size : 0
@@ -561,6 +556,41 @@ );
   }
-  avoidBoxCollisions(container, cueBox, boxes, axis);
-  setBoxCSSVars(cueEl, container, cueBox, "cue");
-  return updateBoxDimensions(cueBox, cueEl.firstElementChild);
+  displayBox = avoidBoxCollisions(container, displayBox, boxes, axis);
+  setBoxCSSVars(displayEl, container, displayBox, "cue");
+  return displayBox;
 }
+function createStartingBox(container, cueEl) {
+  const box = createBox(cueEl), pos = getStyledPositions(cueEl);
+  cueEl[POSITION_OVERRIDE] = false;
+  if (pos.top) {
+    const top = container.top + pos.top;
+    box.top = top;
+    box.bottom = top + box.height;
+    cueEl[POSITION_OVERRIDE] = "top";
+  }
+  if (pos.bottom) {
+    const bottom = container.bottom - pos.bottom;
+    box.top = bottom - box.height;
+    box.bottom = bottom;
+    cueEl[POSITION_OVERRIDE] = "bottom";
+  }
+  if (pos.left)
+    box.left = container.left + pos.left;
+  if (pos.right)
+    box.right = container.right - pos.right;
+  return createCSSBox(container, box);
+}
+function getStyledPositions(el) {
+  const positions = {};
+  for (const side of BOX_SIDES) {
+    positions[side] = parseFloat(el.style.getPropertyValue(`--cue-${side}`));
+  }
+  return positions;
+}
+function resolveStartingBox(container, box) {
+  box.top = container.top + container.height * box.top;
+  box.left = container.left + container.width * box.left;
+  box.right = container.right - container.width * box.right;
+  box.bottom = container.bottom - container.height * box.bottom;
+  return box;
+}
 function computeCueLine(cue) {
@@ -621,3 +651,3 @@ if (cue.line === "auto") {
   let box = { ...regionEl[STARTING_BOX] ??= createBox(regionEl) };
-  updateBoxDimensions(box, regionEl);
+  updateBoxDimensions(container, box, regionEl);
   box = avoidBoxCollisions(container, box, boxes, REGION_AXIS);
@@ -747,8 +777,2 @@ setBoxCSSVars(regionEl, container, box, "region");
       }
-      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]);
-        }
-      }
     }
@@ -814,15 +838,17 @@ if (forceUpdate) {
       );
-      let maxSize = position;
-      if (positionAlignment === "line-left") {
-        maxSize = 100 - position;
-      } else if (positionAlignment === "center" && position <= 50) {
-        maxSize = position * 2;
-      } else if (positionAlignment === "center" && position > 50) {
-        maxSize = (100 - position) * 2;
+      if (!cue.style?.["--cue-width"]) {
+        let maxSize = position;
+        if (positionAlignment === "line-left") {
+          maxSize = 100 - position;
+        } else if (positionAlignment === "center" && position <= 50) {
+          maxSize = position * 2;
+        } else if (positionAlignment === "center" && position > 50) {
+          maxSize = (100 - position) * 2;
+        }
+        const size = cue.size < maxSize ? cue.size : maxSize;
+        if (cue.vertical === "")
+          setCSSVar(display, "cue-width", size + "%");
+        else
+          setCSSVar(display, "cue-height", size + "%");
       }
-      const size = cue.size < maxSize ? cue.size : maxSize;
-      if (cue.vertical === "")
-        setCSSVar(display, "cue-width", size + "%");
-      else
-        setCSSVar(display, "cue-height", size + "%");
     } else {
@@ -829,0 +855,0 @@ setCSSVar(

dist/prod.js

@@ -10,3 +10,3 @@ import {
   parseVTTTimestamp
-} from "./chunks/chunk-NULAFTWC.js";
+} from "./chunks/chunk-ZD2GRR6D.js";
 
@@ -36,9 +36,9 @@ // src/parse/text-transform.ts
   constructor(encoding) {
-    this.p = "";
-    this.F = new TextDecoder(encoding);
+    this.n = "";
+    this.D = new TextDecoder(encoding);
   }
   transform(chunk) {
-    this.p += this.F.decode(chunk, { stream: true });
-    const lines = this.p.split(LINE_TERMINATOR_RE);
-    this.p = lines.pop() || "";
+    this.n += this.D.decode(chunk, { stream: true });
+    const lines = this.n.split(LINE_TERMINATOR_RE);
+    this.n = lines.pop() || "";
     for (let i = 0; i < lines.length; i++)
@@ -48,5 +48,5 @@ this.onLine(lines[i].trim());
   close() {
-    if (this.p)
-      this.onLine(this.p.trim());
-    this.p = "";
+    if (this.n)
+      this.onLine(this.n.trim());
+    this.n = "";
     this.onClose();
@@ -74,10 +74,10 @@ }
       case "srt":
-        factory = (await import("./chunks/parse-E6FOLWTS.js")).default;
+        factory = (await import("./chunks/parse-4CWP6KKB.js")).default;
         break;
       case "ssa":
       case "ass":
-        factory = (await import("./chunks/parse-TPIYUARW.js")).default;
+        factory = (await import("./chunks/parse-JDCZG2M2.js")).default;
         break;
       default:
-        factory = (await import("./chunks/parse-DFV3F6MU.js")).default;
+        factory = (await import("./chunks/parse-KKUE4ZK4.js")).default;
     }
@@ -415,8 +415,7 @@ } else {
 }
-function updateBoxDimensions(box, el) {
+function updateBoxDimensions(container, box, el) {
   box.width = el.clientWidth;
   box.height = el.clientHeight;
-  box.right = box.left + box.width;
-  box.bottom = box.top + box.height;
-  return box;
+  box.right = Math.min(container.right, box.left + box.width);
+  box.bottom = Math.min(container.bottom, box.top + box.height);
 }
@@ -475,19 +474,18 @@ function moveBox(box, axis, delta) {
     left: (box.left - container.left) / container.width,
-    right: (box.right - container.right) / container.width,
-    bottom: (box.bottom - container.bottom) / container.height
+    right: (container.right - box.right) / container.width,
+    bottom: (container.bottom - box.bottom) / container.height
   };
 }
+var BOX_SIDES = ["top", "left", "right", "bottom"];
 function setBoxCSSVars(el, container, box, prefix) {
   const cssBox = createCSSBox(container, box);
-  for (const pos of ["top", "left", "right", "bottom"]) {
-    setCSSVar(el, `${prefix}-${pos}`, Math.abs(cssBox[pos]) * 100 + "%");
+  for (const side of BOX_SIDES) {
+    setCSSVar(el, `${prefix}-${side}`, Math.abs(cssBox[side]) * 100 + "%");
   }
 }
 function avoidBoxCollisions(container, box, boxes, axis) {
-  let percentage = 1, collisionBox = null, positionedBox, startBox = createBox(box);
+  let percentage = 1, positionedBox, startBox = { ...box };
   for (let i = 0; i < axis.length; i++) {
-    collisionBox = null;
-    while (isBoxOutOfBounds(container, box, axis[i]) || isWithinBox(container, box) && (collisionBox = isAnyBoxCollision(box, boxes))) {
-      moveBox(box, axis[i], calcBoxMoveDelta(axis[i], box, collisionBox) + 8);
-      collisionBox = null;
+    while (isBoxOutOfBounds(container, box, axis[i]) || isWithinBox(container, box) && isAnyBoxCollision(box, boxes)) {
+      moveBox(box, axis[i], 1);
     }
@@ -498,29 +496,22 @@ if (isWithinBox(container, box))
     if (percentage > intersection) {
-      positionedBox = createBox(box);
+      positionedBox = { ...box };
       percentage = intersection;
     }
-    box = createBox(startBox);
+    box = { ...startBox };
   }
   return positionedBox || startBox;
 }
-function calcBoxMoveDelta(axis, box, avoid) {
-  if (!avoid)
-    return 0;
-  switch (axis) {
-    case "+x":
-      return avoid.right - box.right;
-    case "-x":
-      return box.left - avoid.left;
-    case "+y":
-      return avoid.bottom - box.top;
-    case "-y":
-      return avoid.top - box.top;
-  }
-}
 
 // src/vtt/overlay/position-cue.ts
-function positionCue(container, cue, cueEl, boxes) {
-  let line = computeCueLine(cue), cueBox = { ...cueEl[STARTING_BOX] ??= createBox(cueEl) }, axis = [];
-  updateBoxDimensions(cueBox, cueEl);
-  if (cue.snapToLines) {
+var POSITION_OVERRIDE = Symbol(false ? "POSITION_OVERRIDE" : 0);
+function positionCue(container, cue, displayEl, boxes) {
+  let cueEl = displayEl.firstElementChild, line = computeCueLine(cue), displayBox, axis = [];
+  if (!displayEl[STARTING_BOX]) {
+    displayEl[STARTING_BOX] = createStartingBox(container, displayEl);
+  }
+  displayBox = resolveStartingBox(container, { ...displayEl[STARTING_BOX] });
+  updateBoxDimensions(container, displayBox, displayEl);
+  if (displayEl[POSITION_OVERRIDE]) {
+    axis = [displayEl[POSITION_OVERRIDE] === "top" ? "+y" : "-y", "+x", "-x"];
+  } else if (cue.snapToLines) {
     let size;
@@ -541,3 +532,3 @@ switch (cue.vertical) {
     }
-    let step = getLineHeight(cueEl.firstElementChild), position = step * Math.round(line), maxPosition = container[size] + step, initialAxis = axis[0];
+    let step = getLineHeight(cueEl), position = step * Math.round(line), maxPosition = container[size] + step, initialAxis = axis[0];
     if (Math.abs(position) > maxPosition) {
@@ -551,9 +542,13 @@ position = position < 0 ? -1 : 1;
     }
-    moveBox(cueBox, initialAxis, position);
+    moveBox(displayBox, initialAxis, position);
   } else {
-    const isHorizontal = cue.vertical === "", posAxis = isHorizontal ? "+y" : "+x", size = isHorizontal ? cueBox.height : cueBox.width;
-    moveBox(cueBox, posAxis, (isHorizontal ? container.height : container.width) * line / 100);
+    const isHorizontal = cue.vertical === "", posAxis = isHorizontal ? "+y" : "+x", size = isHorizontal ? displayBox.height : displayBox.width;
     moveBox(
-      cueBox,
+      displayBox,
       posAxis,
+      (isHorizontal ? container.height : container.width) * line / 100
+    );
+    moveBox(
+      displayBox,
+      posAxis,
       cue.lineAlign === "center" ? size / 2 : cue.lineAlign === "end" ? size : 0
@@ -563,6 +558,41 @@ );
   }
-  avoidBoxCollisions(container, cueBox, boxes, axis);
-  setBoxCSSVars(cueEl, container, cueBox, "cue");
-  return updateBoxDimensions(cueBox, cueEl.firstElementChild);
+  displayBox = avoidBoxCollisions(container, displayBox, boxes, axis);
+  setBoxCSSVars(displayEl, container, displayBox, "cue");
+  return displayBox;
 }
+function createStartingBox(container, cueEl) {
+  const box = createBox(cueEl), pos = getStyledPositions(cueEl);
+  cueEl[POSITION_OVERRIDE] = false;
+  if (pos.top) {
+    const top = container.top + pos.top;
+    box.top = top;
+    box.bottom = top + box.height;
+    cueEl[POSITION_OVERRIDE] = "top";
+  }
+  if (pos.bottom) {
+    const bottom = container.bottom - pos.bottom;
+    box.top = bottom - box.height;
+    box.bottom = bottom;
+    cueEl[POSITION_OVERRIDE] = "bottom";
+  }
+  if (pos.left)
+    box.left = container.left + pos.left;
+  if (pos.right)
+    box.right = container.right - pos.right;
+  return createCSSBox(container, box);
+}
+function getStyledPositions(el) {
+  const positions = {};
+  for (const side of BOX_SIDES) {
+    positions[side] = parseFloat(el.style.getPropertyValue(`--cue-${side}`));
+  }
+  return positions;
+}
+function resolveStartingBox(container, box) {
+  box.top = container.top + container.height * box.top;
+  box.left = container.left + container.width * box.left;
+  box.right = container.right - container.width * box.right;
+  box.bottom = container.bottom - container.height * box.bottom;
+  return box;
+}
 function computeCueLine(cue) {
@@ -623,3 +653,3 @@ if (cue.line === "auto") {
   let box = { ...regionEl[STARTING_BOX] ??= createBox(regionEl) };
-  updateBoxDimensions(box, regionEl);
+  updateBoxDimensions(container, box, regionEl);
   box = avoidBoxCollisions(container, box, boxes, REGION_AXIS);
@@ -633,8 +663,8 @@ setBoxCSSVars(regionEl, container, box, "region");
   constructor(overlay, init) {
-    this.t = 0;
-    this.B = "ltr";
-    this.y = [];
-    this.C = -1;
-    this.w = -1;
-    this.n = /* @__PURE__ */ new Map();
+    this.r = 0;
+    this.z = "ltr";
+    this.w = [];
+    this.A = -1;
+    this.s = -1;
+    this.l = /* @__PURE__ */ new Map();
     this.d = /* @__PURE__ */ new Map();
@@ -644,19 +674,19 @@ this.overlay = overlay;
     setPartAttr(overlay, "captions");
-    this.O();
-    this.D = new ResizeObserver(this.X.bind(this));
-    this.D.observe(overlay);
+    this.N();
+    this.B = new ResizeObserver(this.W.bind(this));
+    this.B.observe(overlay);
   }
   /* Text direction. */
   get dir() {
-    return this.B;
+    return this.z;
   }
   set dir(dir) {
-    this.B = dir;
+    this.z = dir;
     setDataAttr(this.overlay, "dir", dir);
   }
   get currentTime() {
-    return this.t;
+    return this.r;
   }
   set currentTime(time) {
-    this.t = time;
+    this.r = time;
     this.update();
@@ -666,3 +696,3 @@ }
     this.reset();
-    this.Y(regions);
+    this.X(regions);
     for (const cue of cues)
@@ -681,15 +711,15 @@ this.d.set(cue, null);
   update(forceUpdate = false) {
-    if (this.w >= 0)
+    if (this.s >= 0)
       return;
-    this.w = requestAnimationFrame(() => {
-      this.Z(forceUpdate);
-      this.w = -1;
+    this.s = requestAnimationFrame(() => {
+      this.Y(forceUpdate);
+      this.s = -1;
     });
   }
   reset() {
-    cancelAnimationFrame(this.w);
-    this.w = -1;
+    cancelAnimationFrame(this.s);
+    this.s = -1;
     this.d.clear();
-    this.n.clear();
-    this.y = [];
+    this.l.clear();
+    this.w = [];
     this.overlay.textContent = "";
@@ -699,29 +729,29 @@ }
     this.reset();
-    this.D.disconnect();
+    this.B.disconnect();
   }
-  X() {
-    if (this.C >= 0)
+  W() {
+    if (this.A >= 0)
       return;
-    this.C = requestAnimationFrame(() => {
-      this.O();
-      this.C = -1;
+    this.A = requestAnimationFrame(() => {
+      this.N();
+      this.A = -1;
     });
   }
-  O() {
-    this.s = createBox(this.overlay);
-    setCSSVar(this.overlay, "overlay-width", this.s.width + "px");
-    setCSSVar(this.overlay, "overlay-height", this.s.height + "px");
+  N() {
+    this.q = createBox(this.overlay);
+    setCSSVar(this.overlay, "overlay-width", this.q.width + "px");
+    setCSSVar(this.overlay, "overlay-height", this.q.height + "px");
   }
-  Z(forceUpdate = false) {
+  Y(forceUpdate = false) {
     if (!this.d.size)
       return;
-    let cue, activeCues = [...this.d.keys()].filter((cue2) => this.t >= cue2.startTime && this.t <= cue2.endTime).sort(
+    let cue, activeCues = [...this.d.keys()].filter((cue2) => this.r >= cue2.startTime && this.r <= cue2.endTime).sort(
       (cueA, cueB) => cueA.startTime !== cueB.startTime ? cueA.startTime - cueB.startTime : cueA.endTime - cueB.endTime
     ), activeRegions = activeCues.map((cue2) => cue2.region);
-    for (let i = 0; i < this.y.length; i++) {
-      cue = this.y[i];
+    for (let i = 0; i < this.w.length; i++) {
+      cue = this.w[i];
       if (activeCues[i] === cue)
         continue;
       if (cue.region && !activeRegions.includes(cue.region)) {
-        const regionEl = this.n.get(cue.region.id);
+        const regionEl = this.l.get(cue.region.id);
         if (regionEl) {
@@ -742,4 +772,4 @@ regionEl.removeAttribute("data-active");
       if (!cueEl)
-        this.d.set(cue, cueEl = this._(cue));
-      const regionEl = this.E(cue) && this.n.get(cue.region.id);
+        this.d.set(cue, cueEl = this.Z(cue));
+      const regionEl = this.C(cue) && this.l.get(cue.region.id);
       if (regionEl && !regionEl.hasAttribute("data-active")) {
@@ -755,8 +785,2 @@ requestAnimationFrame(() => {
       }
-      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]);
-        }
-      }
     }
@@ -769,7 +793,7 @@ if (forceUpdate) {
           continue;
-        const isRegion = this.E(cue), el = isRegion ? this.n.get(cue.region.id) : this.d.get(cue);
+        const isRegion = this.C(cue), el = isRegion ? this.l.get(cue.region.id) : this.d.get(cue);
         if (isRegion) {
-          boxes.push(positionRegion(this.s, cue.region, el, boxes));
+          boxes.push(positionRegion(this.q, cue.region, el, boxes));
         } else {
-          boxes.push(positionCue(this.s, cue, el, boxes));
+          boxes.push(positionCue(this.q, cue, el, boxes));
         }
@@ -779,12 +803,12 @@ seen.add(isRegion ? cue.region : cue);
     }
-    updateTimedVTTCueNodes(this.overlay, this.t);
-    this.y = activeCues;
+    updateTimedVTTCueNodes(this.overlay, this.r);
+    this.w = activeCues;
   }
-  Y(regions) {
+  X(regions) {
     if (!regions)
       return;
     for (const region of regions) {
-      const el = this.$(region);
+      const el = this._(region);
       if (el) {
-        this.n.set(region.id, el);
+        this.l.set(region.id, el);
         this.overlay.append(el);
@@ -794,3 +818,3 @@ }
   }
-  $(region) {
+  _(region) {
     const el = document.createElement("div");
@@ -808,4 +832,4 @@ setPartAttr(el, "region");
   }
-  _(cue) {
-    const display = document.createElement("div"), position = computeCuePosition(cue), positionAlignment = computeCuePositionAlignment(cue, this.B);
+  Z(cue) {
+    const display = document.createElement("div"), position = computeCuePosition(cue), positionAlignment = computeCuePositionAlignment(cue, this.z);
     setPartAttr(display, "cue-display");
@@ -820,3 +844,3 @@ if (cue.vertical !== "")
     }
-    if (!this.E(cue)) {
+    if (!this.C(cue)) {
       setCSSVar(
@@ -827,15 +851,17 @@ display,
       );
-      let maxSize = position;
-      if (positionAlignment === "line-left") {
-        maxSize = 100 - position;
-      } else if (positionAlignment === "center" && position <= 50) {
-        maxSize = position * 2;
-      } else if (positionAlignment === "center" && position > 50) {
-        maxSize = (100 - position) * 2;
+      if (!cue.style?.["--cue-width"]) {
+        let maxSize = position;
+        if (positionAlignment === "line-left") {
+          maxSize = 100 - position;
+        } else if (positionAlignment === "center" && position <= 50) {
+          maxSize = position * 2;
+        } else if (positionAlignment === "center" && position > 50) {
+          maxSize = (100 - position) * 2;
+        }
+        const size = cue.size < maxSize ? cue.size : maxSize;
+        if (cue.vertical === "")
+          setCSSVar(display, "cue-width", size + "%");
+        else
+          setCSSVar(display, "cue-height", size + "%");
       }
-      const size = cue.size < maxSize ? cue.size : maxSize;
-      if (cue.vertical === "")
-        setCSSVar(display, "cue-width", size + "%");
-      else
-        setCSSVar(display, "cue-height", size + "%");
     } else {
@@ -856,3 +882,3 @@ setCSSVar(
   }
-  E(cue) {
+  C(cue) {
     return cue.region && cue.size === 100 && cue.vertical === "" && cue.line === "auto";
@@ -859,0 +885,0 @@ }

dist/server.js

@@ -10,3 +10,3 @@ import {
   parseVTTTimestamp
-} from "./chunks/chunk-FZWA6M3C.js";
+} from "./chunks/chunk-TBFUWLUI.js";
 
@@ -72,10 +72,10 @@ // src/parse/text-transform.ts
       case "srt":
-        factory = (await import("./chunks/parse-WTDM5RPL.js")).default;
+        factory = (await import("./chunks/parse-5RGVTYYM.js")).default;
         break;
       case "ssa":
       case "ass":
-        factory = (await import("./chunks/parse-AX3K2D4J.js")).default;
+        factory = (await import("./chunks/parse-JVUAMWWI.js")).default;
         break;
       default:
-        factory = (await import("./chunks/parse-CMLHUIUX.js")).default;
+        factory = (await import("./chunks/parse-4JBWSX4V.js")).default;
     }
@@ -415,8 +415,7 @@ } else {
 }
-function updateBoxDimensions(box, el) {
+function updateBoxDimensions(container, box, el) {
   box.width = el.clientWidth;
   box.height = el.clientHeight;
-  box.right = box.left + box.width;
-  box.bottom = box.top + box.height;
-  return box;
+  box.right = Math.min(container.right, box.left + box.width);
+  box.bottom = Math.min(container.bottom, box.top + box.height);
 }
@@ -475,19 +474,18 @@ function moveBox(box, axis, delta) {
     left: (box.left - container.left) / container.width,
-    right: (box.right - container.right) / container.width,
-    bottom: (box.bottom - container.bottom) / container.height
+    right: (container.right - box.right) / container.width,
+    bottom: (container.bottom - box.bottom) / container.height
   };
 }
+var BOX_SIDES = ["top", "left", "right", "bottom"];
 function setBoxCSSVars(el, container, box, prefix) {
   const cssBox = createCSSBox(container, box);
-  for (const pos of ["top", "left", "right", "bottom"]) {
-    setCSSVar(el, `${prefix}-${pos}`, Math.abs(cssBox[pos]) * 100 + "%");
+  for (const side of BOX_SIDES) {
+    setCSSVar(el, `${prefix}-${side}`, Math.abs(cssBox[side]) * 100 + "%");
   }
 }
 function avoidBoxCollisions(container, box, boxes, axis) {
-  let percentage = 1, collisionBox = null, positionedBox, startBox = createBox(box);
+  let percentage = 1, positionedBox, startBox = { ...box };
   for (let i = 0; i < axis.length; i++) {
-    collisionBox = null;
-    while (isBoxOutOfBounds(container, box, axis[i]) || isWithinBox(container, box) && (collisionBox = isAnyBoxCollision(box, boxes))) {
-      moveBox(box, axis[i], calcBoxMoveDelta(axis[i], box, collisionBox) + 8);
-      collisionBox = null;
+    while (isBoxOutOfBounds(container, box, axis[i]) || isWithinBox(container, box) && isAnyBoxCollision(box, boxes)) {
+      moveBox(box, axis[i], 1);
     }
@@ -498,29 +496,22 @@ if (isWithinBox(container, box))
     if (percentage > intersection) {
-      positionedBox = createBox(box);
+      positionedBox = { ...box };
       percentage = intersection;
     }
-    box = createBox(startBox);
+    box = { ...startBox };
   }
   return positionedBox || startBox;
 }
-function calcBoxMoveDelta(axis, box, avoid) {
-  if (!avoid)
-    return 0;
-  switch (axis) {
-    case "+x":
-      return avoid.right - box.right;
-    case "-x":
-      return box.left - avoid.left;
-    case "+y":
-      return avoid.bottom - box.top;
-    case "-y":
-      return avoid.top - box.top;
-  }
-}
 
 // src/vtt/overlay/position-cue.ts
-function positionCue(container, cue, cueEl, boxes) {
-  let line = computeCueLine(cue), cueBox = { ...cueEl[STARTING_BOX] ??= createBox(cueEl) }, axis = [];
-  updateBoxDimensions(cueBox, cueEl);
-  if (cue.snapToLines) {
+var POSITION_OVERRIDE = Symbol(true ? "POSITION_OVERRIDE" : 0);
+function positionCue(container, cue, displayEl, boxes) {
+  let cueEl = displayEl.firstElementChild, line = computeCueLine(cue), displayBox, axis = [];
+  if (!displayEl[STARTING_BOX]) {
+    displayEl[STARTING_BOX] = createStartingBox(container, displayEl);
+  }
+  displayBox = resolveStartingBox(container, { ...displayEl[STARTING_BOX] });
+  updateBoxDimensions(container, displayBox, displayEl);
+  if (displayEl[POSITION_OVERRIDE]) {
+    axis = [displayEl[POSITION_OVERRIDE] === "top" ? "+y" : "-y", "+x", "-x"];
+  } else if (cue.snapToLines) {
     let size;
@@ -541,3 +532,3 @@ switch (cue.vertical) {
     }
-    let step = getLineHeight(cueEl.firstElementChild), position = step * Math.round(line), maxPosition = container[size] + step, initialAxis = axis[0];
+    let step = getLineHeight(cueEl), position = step * Math.round(line), maxPosition = container[size] + step, initialAxis = axis[0];
     if (Math.abs(position) > maxPosition) {
@@ -551,9 +542,13 @@ position = position < 0 ? -1 : 1;
     }
-    moveBox(cueBox, initialAxis, position);
+    moveBox(displayBox, initialAxis, position);
   } else {
-    const isHorizontal = cue.vertical === "", posAxis = isHorizontal ? "+y" : "+x", size = isHorizontal ? cueBox.height : cueBox.width;
-    moveBox(cueBox, posAxis, (isHorizontal ? container.height : container.width) * line / 100);
+    const isHorizontal = cue.vertical === "", posAxis = isHorizontal ? "+y" : "+x", size = isHorizontal ? displayBox.height : displayBox.width;
     moveBox(
-      cueBox,
+      displayBox,
       posAxis,
+      (isHorizontal ? container.height : container.width) * line / 100
+    );
+    moveBox(
+      displayBox,
+      posAxis,
       cue.lineAlign === "center" ? size / 2 : cue.lineAlign === "end" ? size : 0
@@ -563,6 +558,41 @@ );
   }
-  avoidBoxCollisions(container, cueBox, boxes, axis);
-  setBoxCSSVars(cueEl, container, cueBox, "cue");
-  return updateBoxDimensions(cueBox, cueEl.firstElementChild);
+  displayBox = avoidBoxCollisions(container, displayBox, boxes, axis);
+  setBoxCSSVars(displayEl, container, displayBox, "cue");
+  return displayBox;
 }
+function createStartingBox(container, cueEl) {
+  const box = createBox(cueEl), pos = getStyledPositions(cueEl);
+  cueEl[POSITION_OVERRIDE] = false;
+  if (pos.top) {
+    const top = container.top + pos.top;
+    box.top = top;
+    box.bottom = top + box.height;
+    cueEl[POSITION_OVERRIDE] = "top";
+  }
+  if (pos.bottom) {
+    const bottom = container.bottom - pos.bottom;
+    box.top = bottom - box.height;
+    box.bottom = bottom;
+    cueEl[POSITION_OVERRIDE] = "bottom";
+  }
+  if (pos.left)
+    box.left = container.left + pos.left;
+  if (pos.right)
+    box.right = container.right - pos.right;
+  return createCSSBox(container, box);
+}
+function getStyledPositions(el) {
+  const positions = {};
+  for (const side of BOX_SIDES) {
+    positions[side] = parseFloat(el.style.getPropertyValue(`--cue-${side}`));
+  }
+  return positions;
+}
+function resolveStartingBox(container, box) {
+  box.top = container.top + container.height * box.top;
+  box.left = container.left + container.width * box.left;
+  box.right = container.right - container.width * box.right;
+  box.bottom = container.bottom - container.height * box.bottom;
+  return box;
+}
 function computeCueLine(cue) {
@@ -623,3 +653,3 @@ if (cue.line === "auto") {
   let box = { ...regionEl[STARTING_BOX] ??= createBox(regionEl) };
-  updateBoxDimensions(box, regionEl);
+  updateBoxDimensions(container, box, regionEl);
   box = avoidBoxCollisions(container, box, boxes, REGION_AXIS);
@@ -749,8 +779,2 @@ setBoxCSSVars(regionEl, container, box, "region");
       }
-      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]);
-        }
-      }
     }
@@ -800,2 +824,3 @@ if (forceUpdate) {
   _createCueElement(cue) {
+    var _a;
     const display = document.createElement("div"), position = computeCuePosition(cue), positionAlignment = computeCuePositionAlignment(cue, this._dir);
@@ -817,15 +842,17 @@ setPartAttr(display, "cue-display");
       );
-      let maxSize = position;
-      if (positionAlignment === "line-left") {
-        maxSize = 100 - position;
-      } else if (positionAlignment === "center" && position <= 50) {
-        maxSize = position * 2;
-      } else if (positionAlignment === "center" && position > 50) {
-        maxSize = (100 - position) * 2;
+      if (!((_a = cue.style) == null ? void 0 : _a["--cue-width"])) {
+        let maxSize = position;
+        if (positionAlignment === "line-left") {
+          maxSize = 100 - position;
+        } else if (positionAlignment === "center" && position <= 50) {
+          maxSize = position * 2;
+        } else if (positionAlignment === "center" && position > 50) {
+          maxSize = (100 - position) * 2;
+        }
+        const size = cue.size < maxSize ? cue.size : maxSize;
+        if (cue.vertical === "")
+          setCSSVar(display, "cue-width", size + "%");
+        else
+          setCSSVar(display, "cue-height", size + "%");
       }
-      const size = cue.size < maxSize ? cue.size : maxSize;
-      if (cue.vertical === "")
-        setCSSVar(display, "cue-width", size + "%");
-      else
-        setCSSVar(display, "cue-height", size + "%");
     } else {
@@ -832,0 +859,0 @@ setCSSVar(

dist/types/vtt/overlay/box.d.ts

@@ -12,3 +12,3 @@ export declare const STARTING_BOX: unique symbol;
 export declare function createBox(box: Box | Element): Box;
-export declare function updateBoxDimensions(box: Box, el: Element): Box;
+export declare function updateBoxDimensions(container: Box, box: Box, el: Element): void;
 export declare function moveBox(box: Box, axis: DirectionalAxis, delta: number): void;
@@ -26,3 +26,4 @@ export declare function isBoxCollision(boxA: Box, boxB: Box): boolean;
 };
+export declare const BOX_SIDES: readonly ["top", "left", "right", "bottom"];
 export declare function setBoxCSSVars(el: HTMLElement, container: Box, box: Box, prefix: string): void;
 export declare function avoidBoxCollisions(container: Box, box: Box, boxes: Box[], axis: DirectionalAxis[]): Box;

dist/types/vtt/overlay/position-cue.d.ts

 import type { VTTCue } from '../vtt-cue';
 import { type Box } from './box';
-export declare function positionCue(container: Box, cue: VTTCue, cueEl: HTMLElement, boxes: Box[]): Box;
+export declare function positionCue(container: Box, cue: VTTCue, displayEl: HTMLElement, boxes: Box[]): Box;
 export declare function computeCueLine(cue: VTTCue): number;
 export declare function computeCuePosition(cue: VTTCue): number;
 export declare function computeCuePositionAlignment(cue: VTTCue, dir: 'ltr' | 'rtl'): PositionAlignSetting;

dist/types/vtt/vtt-cue.d.ts

 import { TextCue } from './text-cue';
 import type { VTTRegion } from './vtt-region';
+declare const CueBase: typeof TextCue;
 /**
@@ -7,3 +8,3 @@ * @see {@link https://www.w3.org/TR/webvtt1/#model-cues}
  */
-export declare class VTTCue extends TextCue {
+export declare class VTTCue extends CueBase {
     /**
@@ -74,1 +75,2 @@ * A `VTTRegion` object describing the video's sub-region that the cue will be drawn onto,
 }
+export {};

package.json

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

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

280782

increased by3.61%

Lines of code

7785

increased by2.41%

No dependency changes