movi-player 0.3.4 → 0.3.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/core/MoviPlayer.d.ts.map +1 -1
- package/dist/core/MoviPlayer.js +7 -1
- package/dist/core/MoviPlayer.js.map +1 -1
- package/dist/element.cjs +89 -72
- package/dist/element.js +89 -72
- package/dist/index.cjs +89 -72
- package/dist/index.js +89 -72
- package/dist/player.cjs +50 -48
- package/dist/player.js +50 -48
- package/dist/render/CanvasRenderer.d.ts.map +1 -1
- package/dist/render/CanvasRenderer.js +50 -25
- package/dist/render/CanvasRenderer.js.map +1 -1
- package/dist/render/MoviElement.d.ts +14 -0
- package/dist/render/MoviElement.d.ts.map +1 -1
- package/dist/render/MoviElement.js +82 -23
- package/dist/render/MoviElement.js.map +1 -1
- package/package.json +1 -1
package/dist/player.js
CHANGED
|
@@ -51012,10 +51012,10 @@ class CanvasRenderer {
|
|
|
51012
51012
|
v.error(U, "Error redrawing frame after resize", A3);
|
|
51013
51013
|
}
|
|
51014
51014
|
if (this.subtitleOverlay) {
|
|
51015
|
-
const v2 =
|
|
51016
|
-
this.subtitleOverlay.style.position = "absolute", this.subtitleOverlay.style.
|
|
51017
|
-
const
|
|
51018
|
-
this.subtitleOverlay.style.paddingBottom = `${
|
|
51015
|
+
const v2 = ((this.rotation ?? 0) % 360 + 360) % 360, n3 = 90 === v2 || 270 === v2, b3 = n3 ? t2 : A2, j3 = n3 ? A2 : t2, f3 = CanvasRenderer.computeSubtitleBottomPadding(j3);
|
|
51016
|
+
this.subtitleOverlay.style.position = "absolute", this.subtitleOverlay.style.right = "auto", this.subtitleOverlay.style.bottom = "auto", this.subtitleOverlay.style.width = `${b3}px`, this.subtitleOverlay.style.height = `${j3}px`, this.subtitleOverlay.style.left = (A2 - b3) / 2 + "px", this.subtitleOverlay.style.top = (t2 - j3) / 2 + "px", this.subtitleOverlay.style.margin = "0", this.subtitleOverlay.style.padding = "0";
|
|
51017
|
+
const s3 = this.subtitleControlsPadding > 0 ? this.subtitleControlsPadding : f3;
|
|
51018
|
+
this.subtitleOverlay.style.paddingBottom = `${s3}px`, this.subtitleOverlay.style.display = "flex", this.subtitleOverlay.style.flexDirection = "column", this.subtitleOverlay.style.justifyContent = "flex-end", this.subtitleOverlay.style.alignItems = "center", this.subtitleOverlay.style.transformOrigin = "center center", this.subtitleOverlay.style.transform = v2 ? `rotate(${v2}deg)` : "none", this.subtitleOverlay.style.boxSizing = "border-box", this.activeSubtitleCue && u2 && this.scheduleSubtitleRerender();
|
|
51019
51019
|
}
|
|
51020
51020
|
}
|
|
51021
51021
|
}
|
|
@@ -51319,15 +51319,17 @@ class CanvasRenderer {
|
|
|
51319
51319
|
const A3 = l2 - m2 - _2;
|
|
51320
51320
|
T2 = A3 < 0 ? Math.max(0, l2 - m2 - 10) : A3, T2 = Math.max(0, Math.min(T2, l2 - m2));
|
|
51321
51321
|
}
|
|
51322
|
-
B2 = Math.max(0, Math.min(B2, s2 - g2))
|
|
51323
|
-
const S2 =
|
|
51324
|
-
this.subtitleOverlay.style.
|
|
51325
|
-
|
|
51326
|
-
|
|
51322
|
+
B2 = Math.max(0, Math.min(B2, s2 - g2));
|
|
51323
|
+
const S2 = ((this.rotation ?? 0) % 360 + 360) % 360, I2 = 90 === S2 || 270 === S2, q2 = I2 ? l2 : s2, $2 = I2 ? s2 : l2;
|
|
51324
|
+
this.subtitleOverlay.style.position = "absolute", this.subtitleOverlay.style.right = "auto", this.subtitleOverlay.style.bottom = "auto", this.subtitleOverlay.style.width = `${q2}px`, this.subtitleOverlay.style.height = `${$2}px`, this.subtitleOverlay.style.left = (s2 - q2) / 2 + "px", this.subtitleOverlay.style.top = (l2 - $2) / 2 + "px", this.subtitleOverlay.style.pointerEvents = "none", this.subtitleOverlay.style.transformOrigin = "center center", this.subtitleOverlay.style.transform = S2 ? `rotate(${S2}deg)` : "none", this.subtitleOverlay.style.display = "flex", this.subtitleOverlay.style.flexDirection = "column", this.subtitleOverlay.style.justifyContent = "flex-end", this.subtitleOverlay.style.alignItems = "center", this.subtitleOverlay.style.overflow = "hidden", this.subtitleOverlay.style.padding = "0";
|
|
51325
|
+
const N2 = CanvasRenderer.computeSubtitleBottomPadding($2), H2 = this.subtitleControlsPadding > 0 ? this.subtitleControlsPadding : N2;
|
|
51326
|
+
this.subtitleOverlay.style.paddingBottom = `${H2}px`, this.subtitleOverlay.style.textAlign = "center", this.subtitleOverlay.style.boxSizing = "border-box", this.subtitleOverlay.style.margin = "0";
|
|
51327
|
+
let D2 = this.subtitleOverlay.querySelector("img.movi-subtitle-image");
|
|
51328
|
+
if (v.debug(U, `Rendering image subtitle in overlay: ${D2 ? "img exists" : "creating img"}, x=${B2.toFixed(0)}, y=${T2.toFixed(0)}, width=${(A2.image.width * d2).toFixed(0)}, height=${(A2.image.height * F2).toFixed(0)}`), D2 || (D2 = document.createElement("img"), D2.className = "movi-subtitle-image", D2.style.display = "block", D2.style.position = "relative", D2.style.margin = "0", D2.style.padding = "0", D2.style.border = "none", D2.style.outline = "none", this.subtitleOverlay.innerHTML = "", this.subtitleOverlay.appendChild(D2)), A2.position?.x) {
|
|
51327
51329
|
const A3 = B2 - (s2 - g2) / 2;
|
|
51328
|
-
|
|
51329
|
-
} else
|
|
51330
|
-
|
|
51330
|
+
D2.style.marginLeft = `${A3}px`, D2.style.marginRight = "0";
|
|
51331
|
+
} else D2.style.marginLeft = "auto", D2.style.marginRight = "auto";
|
|
51332
|
+
D2.src = b2, D2.style.width = `${g2}px`, D2.style.height = `${m2}px`, D2.style.maxWidth = `${q2}px`, D2.style.maxHeight = `${$2}px`, D2.style.objectFit = "contain", D2.style.display = "block", D2.style.visibility = "visible", D2.style.opacity = "1", v.debug(U, `Image subtitle rendered: src set, dimensions=${(A2.image.width * d2).toFixed(0)}x${(A2.image.height * F2).toFixed(0)}, position=(${B2.toFixed(0)}, ${T2.toFixed(0)})`);
|
|
51331
51333
|
} catch (A3) {
|
|
51332
51334
|
v.error(U, "Failed to render image subtitle in overlay", A3);
|
|
51333
51335
|
}
|
|
@@ -51364,49 +51366,49 @@ class CanvasRenderer {
|
|
|
51364
51366
|
if (n2.image) return this.subtitleOverlay ? void this.renderImageSubtitleInOverlay(n2) : void 0;
|
|
51365
51367
|
if (this.subtitleOverlay) {
|
|
51366
51368
|
if (!n2.text) return this.subtitleOverlay.textContent = "", void (this.subtitleOverlay.style.display = "none");
|
|
51367
|
-
const A3 = this.canvas instanceof HTMLCanvasElement ? this.canvas : null, b2 = A3?.getBoundingClientRect(), j2 = b2?.width || t2, f2 = b2?.height || v2, s2 = CanvasRenderer.computeSubtitleBottomPadding(
|
|
51368
|
-
this.subtitleOverlay.style.position = "absolute", this.subtitleOverlay.style.
|
|
51369
|
-
const
|
|
51370
|
-
this.subtitleOverlay.style.paddingBottom = `${
|
|
51371
|
-
const
|
|
51372
|
-
if (
|
|
51373
|
-
this._lastRenderedSubtitleKey =
|
|
51374
|
-
const
|
|
51369
|
+
const A3 = this.canvas instanceof HTMLCanvasElement ? this.canvas : null, b2 = A3?.getBoundingClientRect(), j2 = b2?.width || t2, f2 = b2?.height || v2, s2 = ((this.rotation ?? 0) % 360 + 360) % 360, l2 = 90 === s2 || 270 === s2, E2 = l2 ? f2 : j2, u2 = l2 ? j2 : f2, d2 = CanvasRenderer.computeSubtitleBottomPadding(u2);
|
|
51370
|
+
this.subtitleOverlay.style.position = "absolute", this.subtitleOverlay.style.right = "auto", this.subtitleOverlay.style.bottom = "auto", this.subtitleOverlay.style.width = `${E2}px`, this.subtitleOverlay.style.height = `${u2}px`, this.subtitleOverlay.style.left = (j2 - E2) / 2 + "px", this.subtitleOverlay.style.top = (f2 - u2) / 2 + "px", this.subtitleOverlay.style.margin = "0", this.subtitleOverlay.style.padding = "0";
|
|
51371
|
+
const F2 = this.subtitleControlsPadding > 0 ? this.subtitleControlsPadding : d2;
|
|
51372
|
+
this.subtitleOverlay.style.paddingBottom = `${F2}px`, this.subtitleOverlay.style.transformOrigin = "center center", this.subtitleOverlay.style.transform = s2 ? `rotate(${s2}deg)` : "none", this.subtitleOverlay.style.boxSizing = "border-box", this.subtitleOverlay.style.display = "flex", this.subtitleOverlay.style.flexDirection = "column", this.subtitleOverlay.style.justifyContent = "flex-end", this.subtitleOverlay.style.alignItems = "center", this.subtitleOverlay.style.textAlign = "left", this.subtitleOverlay.style.pointerEvents = "none";
|
|
51373
|
+
const c2 = `${n2.start.toFixed(3)}|${n2.text}`;
|
|
51374
|
+
if (c2 === this._lastRenderedSubtitleKey) return;
|
|
51375
|
+
this._lastRenderedSubtitleKey = c2;
|
|
51376
|
+
const h2 = "⟨⟨GHOST⟩⟩", k2 = n2.text.indexOf(h2), p2 = k2 >= 0 ? n2.text.slice(0, k2) : n2.text, g2 = k2 >= 0 ? n2.text.slice(k2 + h2.length) : n2.text, m2 = (() => {
|
|
51375
51377
|
const A4 = this._subtitleFontCache;
|
|
51376
51378
|
if (A4 && A4.viewport === window.innerWidth) return A4.font;
|
|
51377
51379
|
const t3 = document.createElement("div");
|
|
51378
51380
|
t3.className = "movi-subtitle-line", t3.style.position = "absolute", t3.style.left = "-99999px", t3.style.top = "-99999px", t3.style.visibility = "hidden", t3.textContent = "M", this.subtitleOverlay.parentNode?.appendChild(t3);
|
|
51379
51381
|
const v3 = window.getComputedStyle(t3), n3 = `${v3.fontStyle} ${v3.fontWeight} ${v3.fontSize} ${v3.fontFamily}`;
|
|
51380
51382
|
return t3.remove(), this._subtitleFontCache = { viewport: window.innerWidth, font: n3 }, n3;
|
|
51381
|
-
})(),
|
|
51382
|
-
const t3 = A4.indexOf(
|
|
51383
|
+
})(), x2 = (A4) => {
|
|
51384
|
+
const t3 = A4.indexOf(h2);
|
|
51383
51385
|
return t3 >= 0 ? A4.slice(0, t3) : A4;
|
|
51384
51386
|
};
|
|
51385
|
-
let
|
|
51386
|
-
const
|
|
51387
|
-
if (
|
|
51388
|
-
let A4 =
|
|
51389
|
-
for (let t3 =
|
|
51387
|
+
let y2 = g2;
|
|
51388
|
+
const _2 = this.subtitleCues.indexOf(this.activeSubtitleCue);
|
|
51389
|
+
if (_2 >= 0) {
|
|
51390
|
+
let A4 = p2;
|
|
51391
|
+
for (let t3 = _2 + 1; t3 < this.subtitleCues.length; t3++) {
|
|
51390
51392
|
const v3 = this.subtitleCues[t3];
|
|
51391
51393
|
if (!v3?.text) break;
|
|
51392
|
-
const n3 =
|
|
51393
|
-
if (n3.length > A4.length && n3.startsWith(A4)) A4 = n3,
|
|
51394
|
+
const n3 = x2(v3.text);
|
|
51395
|
+
if (n3.length > A4.length && n3.startsWith(A4)) A4 = n3, y2 = v3.text.length > n3.length ? v3.text : n3;
|
|
51394
51396
|
else if (!n3.startsWith(A4)) break;
|
|
51395
51397
|
}
|
|
51396
51398
|
}
|
|
51397
|
-
const
|
|
51398
|
-
let
|
|
51399
|
-
if (
|
|
51400
|
-
|
|
51401
|
-
for (const A4 of
|
|
51402
|
-
const t3 = Math.ceil(
|
|
51403
|
-
t3 >
|
|
51399
|
+
const B2 = x2(y2).replace(/<[^>]*>/g, ""), T2 = (this._subtitleMeasureCanvas ||= document.createElement("canvas")).getContext("2d");
|
|
51400
|
+
let S2 = 0;
|
|
51401
|
+
if (T2) {
|
|
51402
|
+
T2.font = m2;
|
|
51403
|
+
for (const A4 of B2.split("\n")) {
|
|
51404
|
+
const t3 = Math.ceil(T2.measureText(A4).width);
|
|
51405
|
+
t3 > S2 && (S2 = t3);
|
|
51404
51406
|
}
|
|
51405
51407
|
}
|
|
51406
|
-
const
|
|
51407
|
-
this._lastRenderedSubtitlePlain =
|
|
51408
|
-
let
|
|
51409
|
-
const
|
|
51408
|
+
const I2 = p2.split("\n"), q2 = this._lastRenderedSubtitlePlain, $2 = q2 && p2.startsWith(q2) && p2.length > q2.length ? q2.split(/\s+/).filter(Boolean).length : 0;
|
|
51409
|
+
this._lastRenderedSubtitlePlain = p2;
|
|
51410
|
+
let N2 = 0;
|
|
51411
|
+
const H2 = I2.map((A4) => {
|
|
51410
51412
|
const t3 = [];
|
|
51411
51413
|
let v3 = A4.replace(/</g, "<").replace(/>/g, ">").replace(/"/g, '"').replace(/�?39;/g, "'").replace(/'/g, "'").replace(/ /g, " ").replace(/&/g, "&");
|
|
51412
51414
|
v3 = v3.replace(/<(\/?)i>/gi, (A5) => {
|
|
@@ -51441,24 +51443,24 @@ class CanvasRenderer {
|
|
|
51441
51443
|
}
|
|
51442
51444
|
const E3 = [], u3 = [];
|
|
51443
51445
|
for (const A5 of s3) {
|
|
51444
|
-
const t4 = (A6) => A6 <
|
|
51446
|
+
const t4 = (A6) => A6 < $2 ? E3 : u3;
|
|
51445
51447
|
if ("ws" === A5.kind) {
|
|
51446
|
-
const v5 = t4(
|
|
51447
|
-
if (v5 === E3 && 0 === E3.length && 0 ===
|
|
51448
|
+
const v5 = t4(N2);
|
|
51449
|
+
if (v5 === E3 && 0 === E3.length && 0 === N2) continue;
|
|
51448
51450
|
v5.push(A5.text);
|
|
51449
51451
|
continue;
|
|
51450
51452
|
}
|
|
51451
|
-
const v4 = t4(
|
|
51453
|
+
const v4 = t4(N2);
|
|
51452
51454
|
if (v4 === u3 && 0 === u3.length && E3.length > 0) {
|
|
51453
51455
|
const A6 = E3[E3.length - 1];
|
|
51454
51456
|
/\s$/.test(A6) || E3.push(" ");
|
|
51455
51457
|
}
|
|
51456
|
-
v4.push(A5.text),
|
|
51458
|
+
v4.push(A5.text), N2 += 1;
|
|
51457
51459
|
}
|
|
51458
51460
|
const d3 = E3.join("").replace(/\s+$/, " "), F3 = u3.join(""), c3 = ['<div class="movi-subtitle-line">'];
|
|
51459
51461
|
return d3 && c3.push(`<span class="movi-subtitle-static">${d3}</span>`), F3 && c3.push(`<span class="movi-subtitle-new">${F3}</span>`), c3.push("</div>"), c3.join("");
|
|
51460
|
-
}).join(""),
|
|
51461
|
-
return void (this.subtitleOverlay.innerHTML = `<div class="movi-subtitle-anchor"${
|
|
51462
|
+
}).join(""), D2 = parseFloat(this.subtitleOverlay.style.width) || 0, R2 = D2 > 0 && S2 > 0 && S2 <= 0.92 * D2, P2 = R2 ? Math.max(0, Math.floor((D2 - S2) / 2)) : 0, C2 = R2 ? P2 > 0 ? ` style="padding-left:${P2}px"` : "" : ' style="text-align:center"';
|
|
51463
|
+
return void (this.subtitleOverlay.innerHTML = `<div class="movi-subtitle-anchor"${C2}><div class="movi-subtitle-block">${H2}</div></div>`);
|
|
51462
51464
|
}
|
|
51463
51465
|
}
|
|
51464
51466
|
setPlaybackRate(A2) {
|
|
@@ -108975,7 +108977,7 @@ class MoviPlayer extends j {
|
|
|
108975
108977
|
return this.trackManager.getAudioTracks().length > 0 || this.hasNativeAudio() || null !== this.streamWrapper;
|
|
108976
108978
|
}
|
|
108977
108979
|
usesNativeAudio() {
|
|
108978
|
-
return null !== this.streamWrapper || this.
|
|
108980
|
+
return null !== this.streamWrapper || null !== this.nativeAudioEl;
|
|
108979
108981
|
}
|
|
108980
108982
|
isLiveStream() {
|
|
108981
108983
|
return this.streamWrapper?.isLive?.() ?? false;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CanvasRenderer.d.ts","sourceRoot":"","sources":["../../src/render/CanvasRenderer.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"CanvasRenderer.d.ts","sourceRoot":"","sources":["../../src/render/CanvasRenderer.ts"],"names":[],"mappings":"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"}
|
|
@@ -1313,20 +1313,26 @@ export class CanvasRenderer {
|
|
|
1313
1313
|
}
|
|
1314
1314
|
// Update overlay dimensions
|
|
1315
1315
|
if (this.subtitleOverlay) {
|
|
1316
|
-
//
|
|
1317
|
-
//
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
//
|
|
1321
|
-
const
|
|
1316
|
+
// The overlay lives in the video's own (pre-rotation) coordinate space
|
|
1317
|
+
// and is then rotated to match the video, so captions ride the video's
|
|
1318
|
+
// bottom edge and turn with it. For 90°/270° the box is swapped (H×W)
|
|
1319
|
+
// and centred in the container so that, once rotated around its centre,
|
|
1320
|
+
// it maps back onto the video area.
|
|
1321
|
+
const rot = (((this.rotation ?? 0) % 360) + 360) % 360;
|
|
1322
|
+
const swapped = rot === 90 || rot === 270;
|
|
1323
|
+
const overlayWidth = swapped ? height : width;
|
|
1324
|
+
const overlayHeight = swapped ? width : height;
|
|
1325
|
+
// Responsive bottom padding is relative to the video's visual height
|
|
1326
|
+
// in its own frame (overlayHeight), not the container.
|
|
1327
|
+
const bottomPadding = CanvasRenderer.computeSubtitleBottomPadding(overlayHeight);
|
|
1322
1328
|
// Reset overlay positioning to ensure it stays aligned with canvas
|
|
1323
1329
|
this.subtitleOverlay.style.position = "absolute";
|
|
1324
|
-
this.subtitleOverlay.style.top = "0";
|
|
1325
|
-
this.subtitleOverlay.style.left = "0";
|
|
1326
1330
|
this.subtitleOverlay.style.right = "auto";
|
|
1327
1331
|
this.subtitleOverlay.style.bottom = "auto";
|
|
1328
|
-
this.subtitleOverlay.style.width = `${
|
|
1329
|
-
this.subtitleOverlay.style.height = `${
|
|
1332
|
+
this.subtitleOverlay.style.width = `${overlayWidth}px`;
|
|
1333
|
+
this.subtitleOverlay.style.height = `${overlayHeight}px`;
|
|
1334
|
+
this.subtitleOverlay.style.left = `${(width - overlayWidth) / 2}px`;
|
|
1335
|
+
this.subtitleOverlay.style.top = `${(height - overlayHeight) / 2}px`;
|
|
1330
1336
|
this.subtitleOverlay.style.margin = "0";
|
|
1331
1337
|
this.subtitleOverlay.style.padding = "0";
|
|
1332
1338
|
const effectivePadding = this.subtitleControlsPadding > 0 ? this.subtitleControlsPadding : bottomPadding;
|
|
@@ -1335,7 +1341,8 @@ export class CanvasRenderer {
|
|
|
1335
1341
|
this.subtitleOverlay.style.flexDirection = "column";
|
|
1336
1342
|
this.subtitleOverlay.style.justifyContent = "flex-end";
|
|
1337
1343
|
this.subtitleOverlay.style.alignItems = "center";
|
|
1338
|
-
this.subtitleOverlay.style.
|
|
1344
|
+
this.subtitleOverlay.style.transformOrigin = "center center";
|
|
1345
|
+
this.subtitleOverlay.style.transform = rot ? `rotate(${rot}deg)` : "none";
|
|
1339
1346
|
this.subtitleOverlay.style.boxSizing = "border-box";
|
|
1340
1347
|
// Schedule a re-render so the on-screen subtitle picks up the
|
|
1341
1348
|
// new dimensions. Coalesce via rAF — a window drag bursts
|
|
@@ -2383,23 +2390,31 @@ export class CanvasRenderer {
|
|
|
2383
2390
|
// Override CSS defaults that might interfere
|
|
2384
2391
|
// The overlay should cover the entire canvas area and not overflow
|
|
2385
2392
|
// Position overlay at bottom center (above controls), same as text subtitles
|
|
2393
|
+
// Rotate the overlay to match the video (same approach as text captions),
|
|
2394
|
+
// swapping to the video's own frame dimensions for 90°/270° and centring
|
|
2395
|
+
// so it maps back onto the video once rotated.
|
|
2396
|
+
const rotImg = (((this.rotation ?? 0) % 360) + 360) % 360;
|
|
2397
|
+
const swappedImg = rotImg === 90 || rotImg === 270;
|
|
2398
|
+
const ovW = swappedImg ? canvasHeight : canvasWidth;
|
|
2399
|
+
const ovH = swappedImg ? canvasWidth : canvasHeight;
|
|
2386
2400
|
this.subtitleOverlay.style.position = "absolute";
|
|
2387
|
-
this.subtitleOverlay.style.top = "0";
|
|
2388
|
-
this.subtitleOverlay.style.left = "0";
|
|
2389
2401
|
this.subtitleOverlay.style.right = "auto";
|
|
2390
2402
|
this.subtitleOverlay.style.bottom = "auto";
|
|
2391
|
-
this.subtitleOverlay.style.width = `${
|
|
2392
|
-
this.subtitleOverlay.style.height = `${
|
|
2403
|
+
this.subtitleOverlay.style.width = `${ovW}px`;
|
|
2404
|
+
this.subtitleOverlay.style.height = `${ovH}px`;
|
|
2405
|
+
this.subtitleOverlay.style.left = `${(canvasWidth - ovW) / 2}px`;
|
|
2406
|
+
this.subtitleOverlay.style.top = `${(canvasHeight - ovH) / 2}px`;
|
|
2393
2407
|
this.subtitleOverlay.style.pointerEvents = "none";
|
|
2394
2408
|
// zIndex controlled by CSS (.movi-subtitle-overlay)
|
|
2395
|
-
this.subtitleOverlay.style.
|
|
2409
|
+
this.subtitleOverlay.style.transformOrigin = "center center";
|
|
2410
|
+
this.subtitleOverlay.style.transform = rotImg ? `rotate(${rotImg}deg)` : "none";
|
|
2396
2411
|
this.subtitleOverlay.style.display = "flex";
|
|
2397
2412
|
this.subtitleOverlay.style.flexDirection = "column";
|
|
2398
2413
|
this.subtitleOverlay.style.justifyContent = "flex-end";
|
|
2399
2414
|
this.subtitleOverlay.style.alignItems = "center";
|
|
2400
2415
|
this.subtitleOverlay.style.overflow = "hidden"; // Prevent overflow outside canvas
|
|
2401
2416
|
this.subtitleOverlay.style.padding = "0";
|
|
2402
|
-
const bottomPaddingImg = CanvasRenderer.computeSubtitleBottomPadding(
|
|
2417
|
+
const bottomPaddingImg = CanvasRenderer.computeSubtitleBottomPadding(ovH);
|
|
2403
2418
|
const effectivePaddingImg = this.subtitleControlsPadding > 0 ? this.subtitleControlsPadding : bottomPaddingImg;
|
|
2404
2419
|
this.subtitleOverlay.style.paddingBottom = `${effectivePaddingImg}px`;
|
|
2405
2420
|
this.subtitleOverlay.style.textAlign = "center";
|
|
@@ -2439,8 +2454,8 @@ export class CanvasRenderer {
|
|
|
2439
2454
|
imgElement.src = dataUrl;
|
|
2440
2455
|
imgElement.style.width = `${scaledWidth}px`;
|
|
2441
2456
|
imgElement.style.height = `${scaledHeight}px`;
|
|
2442
|
-
imgElement.style.maxWidth = `${
|
|
2443
|
-
imgElement.style.maxHeight = `${
|
|
2457
|
+
imgElement.style.maxWidth = `${ovW}px`; // Ensure image doesn't exceed the (rotated) video frame width
|
|
2458
|
+
imgElement.style.maxHeight = `${ovH}px`; // Ensure image doesn't exceed the (rotated) video frame height
|
|
2444
2459
|
imgElement.style.objectFit = "contain"; // Preserve aspect ratio
|
|
2445
2460
|
imgElement.style.display = "block";
|
|
2446
2461
|
imgElement.style.visibility = "visible";
|
|
@@ -2624,19 +2639,29 @@ export class CanvasRenderer {
|
|
|
2624
2639
|
const rect = canvasEl?.getBoundingClientRect();
|
|
2625
2640
|
const overlayW = rect?.width || displayWidth;
|
|
2626
2641
|
const overlayH = rect?.height || displayHeight;
|
|
2627
|
-
|
|
2642
|
+
// Rotate the caption overlay to ride the video: swap to the video's own
|
|
2643
|
+
// frame box for 90°/270° and centre it so, once rotated around its centre,
|
|
2644
|
+
// it lands back over the video (see resize() for the same approach). This
|
|
2645
|
+
// render path runs ~60×/s and previously forced transform:none, undoing
|
|
2646
|
+
// the rotation set on rotate — so the rotation has to be re-applied here.
|
|
2647
|
+
const rotTxt = (((this.rotation ?? 0) % 360) + 360) % 360;
|
|
2648
|
+
const swappedTxt = rotTxt === 90 || rotTxt === 270;
|
|
2649
|
+
const ovTxtW = swappedTxt ? overlayH : overlayW;
|
|
2650
|
+
const ovTxtH = swappedTxt ? overlayW : overlayH;
|
|
2651
|
+
const bottomPadding = CanvasRenderer.computeSubtitleBottomPadding(ovTxtH);
|
|
2628
2652
|
this.subtitleOverlay.style.position = "absolute";
|
|
2629
|
-
this.subtitleOverlay.style.top = "0";
|
|
2630
|
-
this.subtitleOverlay.style.left = "0";
|
|
2631
2653
|
this.subtitleOverlay.style.right = "auto";
|
|
2632
2654
|
this.subtitleOverlay.style.bottom = "auto";
|
|
2633
|
-
this.subtitleOverlay.style.width = `${
|
|
2634
|
-
this.subtitleOverlay.style.height = `${
|
|
2655
|
+
this.subtitleOverlay.style.width = `${ovTxtW}px`;
|
|
2656
|
+
this.subtitleOverlay.style.height = `${ovTxtH}px`;
|
|
2657
|
+
this.subtitleOverlay.style.left = `${(overlayW - ovTxtW) / 2}px`;
|
|
2658
|
+
this.subtitleOverlay.style.top = `${(overlayH - ovTxtH) / 2}px`;
|
|
2635
2659
|
this.subtitleOverlay.style.margin = "0";
|
|
2636
2660
|
this.subtitleOverlay.style.padding = "0";
|
|
2637
2661
|
const effectivePad = this.subtitleControlsPadding > 0 ? this.subtitleControlsPadding : bottomPadding;
|
|
2638
2662
|
this.subtitleOverlay.style.paddingBottom = `${effectivePad}px`;
|
|
2639
|
-
this.subtitleOverlay.style.
|
|
2663
|
+
this.subtitleOverlay.style.transformOrigin = "center center";
|
|
2664
|
+
this.subtitleOverlay.style.transform = rotTxt ? `rotate(${rotTxt}deg)` : "none";
|
|
2640
2665
|
this.subtitleOverlay.style.boxSizing = "border-box";
|
|
2641
2666
|
this.subtitleOverlay.style.display = "flex";
|
|
2642
2667
|
this.subtitleOverlay.style.flexDirection = "column";
|