@shotstack/shotstack-canvas 1.9.6 → 2.0.0
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/README.md +13 -13
- package/dist/chunk-5BH5YLM5.js +140 -0
- package/dist/chunk-FPPKRKBX.js +66 -0
- package/dist/chunk-KBAXJEJG.js +178 -0
- package/dist/entry.node.cjs +2575 -15
- package/dist/entry.node.d.cts +746 -39
- package/dist/entry.node.d.ts +746 -39
- package/dist/entry.node.js +2229 -14
- package/dist/entry.web.d.ts +718 -39
- package/dist/entry.web.js +37331 -2969
- package/dist/{hb-ODWKSLMB.js → hb-HSWG3Q47.js} +1 -1
- package/dist/{hbjs-HHU2TAW7.js → hbjs-VGYWXH44.js} +1 -1
- package/dist/mediarecorder-fallback-5JYZBGT3.js +133 -0
- package/dist/mediarecorder-fallback-TSLY4MAU.js +11 -0
- package/dist/web-encoder-7CLF7KX4.js +171 -0
- package/dist/web-encoder-MXBT3N36.js +9 -0
- package/package.json +5 -5
- package/scripts/postinstall.js +58 -58
- package/dist/chunk-HYGMWVDX.js +0 -19
package/dist/entry.node.js
CHANGED
|
@@ -17,7 +17,10 @@ import {
|
|
|
17
17
|
svgStrokeSchema,
|
|
18
18
|
svgShadowSchema,
|
|
19
19
|
svgTransformSchema,
|
|
20
|
-
svgGradientStopSchema
|
|
20
|
+
svgGradientStopSchema,
|
|
21
|
+
richCaptionActiveSchema as baseCaptionActiveSchema,
|
|
22
|
+
richCaptionWordAnimationSchema as baseCaptionWordAnimationSchema,
|
|
23
|
+
wordTimingSchema as baseWordTimingSchema
|
|
21
24
|
} from "@shotstack/schemas/zod";
|
|
22
25
|
|
|
23
26
|
// src/config/canvas-constants.ts
|
|
@@ -28,7 +31,7 @@ var CANVAS_CONFIG = {
|
|
|
28
31
|
pixelRatio: 2,
|
|
29
32
|
fontFamily: "Roboto",
|
|
30
33
|
fontSize: 48,
|
|
31
|
-
color: "#
|
|
34
|
+
color: "#ffffff",
|
|
32
35
|
textAlign: "center"
|
|
33
36
|
},
|
|
34
37
|
LIMITS: {
|
|
@@ -174,6 +177,71 @@ var CanvasRichTextAssetSchema = richTextAssetSchema.extend({
|
|
|
174
177
|
customFonts: z.array(customFontSchema).optional()
|
|
175
178
|
}).strict();
|
|
176
179
|
var CanvasSvgAssetSchema = svgAssetSchema;
|
|
180
|
+
var wordTimingSchema = baseWordTimingSchema.extend({
|
|
181
|
+
text: z.string().min(1),
|
|
182
|
+
start: z.number().min(0),
|
|
183
|
+
end: z.number().min(0),
|
|
184
|
+
confidence: z.number().min(0).max(1).optional()
|
|
185
|
+
});
|
|
186
|
+
var richCaptionFontSchema = z.object({
|
|
187
|
+
family: z.string().default("Open Sans"),
|
|
188
|
+
size: z.number().int().min(1).max(500).default(24),
|
|
189
|
+
weight: z.union([z.string(), z.number()]).default("400"),
|
|
190
|
+
color: z.string().regex(HEX6).default("#ffffff"),
|
|
191
|
+
opacity: z.number().min(0).max(1).default(1),
|
|
192
|
+
background: z.string().regex(HEX6).optional()
|
|
193
|
+
});
|
|
194
|
+
var richCaptionActiveSchema = baseCaptionActiveSchema.extend({
|
|
195
|
+
font: z.object({
|
|
196
|
+
color: z.string().regex(HEX6).default("#ffff00"),
|
|
197
|
+
background: z.string().regex(HEX6).optional(),
|
|
198
|
+
opacity: z.number().min(0).max(1).default(1)
|
|
199
|
+
}).optional(),
|
|
200
|
+
stroke: z.object({
|
|
201
|
+
width: z.number().min(0).optional(),
|
|
202
|
+
color: z.string().regex(HEX6).optional(),
|
|
203
|
+
opacity: z.number().min(0).max(1).optional()
|
|
204
|
+
}).optional(),
|
|
205
|
+
scale: z.number().min(0.5).max(2).default(1)
|
|
206
|
+
});
|
|
207
|
+
var richCaptionWordAnimationSchema = baseCaptionWordAnimationSchema.extend({
|
|
208
|
+
style: z.enum(["karaoke", "highlight", "pop", "fade", "slide", "bounce", "typewriter", "none"]).default("highlight"),
|
|
209
|
+
speed: z.number().min(0.5).max(2).default(1),
|
|
210
|
+
direction: z.enum(["left", "right", "up", "down"]).default("up")
|
|
211
|
+
});
|
|
212
|
+
var richCaptionAssetSchema = z.object({
|
|
213
|
+
type: z.literal("rich-caption"),
|
|
214
|
+
src: z.string().min(1).optional(),
|
|
215
|
+
words: z.array(wordTimingSchema).max(1e5).optional(),
|
|
216
|
+
font: richCaptionFontSchema.optional(),
|
|
217
|
+
style: canvasStyleSchema.optional(),
|
|
218
|
+
stroke: canvasStrokeSchema.optional(),
|
|
219
|
+
shadow: canvasShadowSchema.optional(),
|
|
220
|
+
background: canvasBackgroundSchema.optional(),
|
|
221
|
+
padding: paddingSchema.optional(),
|
|
222
|
+
align: canvasAlignmentSchema.optional(),
|
|
223
|
+
active: richCaptionActiveSchema.optional(),
|
|
224
|
+
wordAnimation: richCaptionWordAnimationSchema.optional(),
|
|
225
|
+
position: z.enum(["top", "center", "bottom"]).default("bottom"),
|
|
226
|
+
maxWidth: z.number().min(0.1).max(1).default(0.9),
|
|
227
|
+
maxLines: z.number().int().min(1).max(10).default(2)
|
|
228
|
+
}).superRefine((data, ctx) => {
|
|
229
|
+
if (data.src && data.words) {
|
|
230
|
+
ctx.addIssue({
|
|
231
|
+
code: z.ZodIssueCode.custom,
|
|
232
|
+
message: "src and words are mutually exclusive",
|
|
233
|
+
path: ["src"]
|
|
234
|
+
});
|
|
235
|
+
}
|
|
236
|
+
if (!data.src && !data.words) {
|
|
237
|
+
ctx.addIssue({
|
|
238
|
+
code: z.ZodIssueCode.custom,
|
|
239
|
+
message: "Either src or words must be provided",
|
|
240
|
+
path: ["words"]
|
|
241
|
+
});
|
|
242
|
+
}
|
|
243
|
+
});
|
|
244
|
+
var CanvasRichCaptionAssetSchema = richCaptionAssetSchema;
|
|
177
245
|
|
|
178
246
|
// src/wasm/hb-loader.ts
|
|
179
247
|
var hbSingleton = null;
|
|
@@ -1925,12 +1993,14 @@ async function createNodePainter(opts) {
|
|
|
1925
1993
|
if (!ctx) throw new Error("2D context unavailable in Node (canvas).");
|
|
1926
1994
|
const offscreenCanvas = createCanvas(canvas.width, canvas.height);
|
|
1927
1995
|
const offscreenCtx = offscreenCanvas.getContext("2d");
|
|
1996
|
+
const GRADIENT_CACHE_MAX = 500;
|
|
1928
1997
|
const gradientCache = /* @__PURE__ */ new Map();
|
|
1929
1998
|
const api = {
|
|
1930
1999
|
async render(ops) {
|
|
1931
2000
|
const globalBox = computeGlobalTextBounds(ops);
|
|
1932
2001
|
let needsAlphaExtraction = false;
|
|
1933
|
-
for (
|
|
2002
|
+
for (let i = 0; i < ops.length; i++) {
|
|
2003
|
+
const op = ops[i];
|
|
1934
2004
|
if (op.op === "BeginFrame") {
|
|
1935
2005
|
const dpr = op.pixelRatio ?? opts.pixelRatio;
|
|
1936
2006
|
const wantW = Math.floor(op.width);
|
|
@@ -1942,7 +2012,9 @@ async function createNodePainter(opts) {
|
|
|
1942
2012
|
offscreenCanvas.height = wantH;
|
|
1943
2013
|
}
|
|
1944
2014
|
ctx.setTransform(1, 0, 0, 1, 0, 0);
|
|
2015
|
+
ctx.globalAlpha = 1;
|
|
1945
2016
|
offscreenCtx.setTransform(1, 0, 0, 1, 0, 0);
|
|
2017
|
+
offscreenCtx.globalAlpha = 1;
|
|
1946
2018
|
const hasBackground = !!(op.bg && op.bg.color);
|
|
1947
2019
|
const hasRoundedBackground = hasBackground && op.bg && op.bg.radius && op.bg.radius > 0;
|
|
1948
2020
|
needsAlphaExtraction = !!hasRoundedBackground;
|
|
@@ -2075,7 +2147,7 @@ async function createNodePainter(opts) {
|
|
|
2075
2147
|
context.save();
|
|
2076
2148
|
const c = parseHex6(op.stroke.color, op.stroke.opacity);
|
|
2077
2149
|
context.strokeStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
|
|
2078
|
-
context.lineWidth = op.stroke.width;
|
|
2150
|
+
context.lineWidth = op.stroke.width * 2;
|
|
2079
2151
|
if (op.borderRadius && op.borderRadius > 0) {
|
|
2080
2152
|
context.beginPath();
|
|
2081
2153
|
roundRectPath(context, op.x, op.y, op.width, op.height, op.borderRadius);
|
|
@@ -2178,6 +2250,140 @@ async function createNodePainter(opts) {
|
|
|
2178
2250
|
});
|
|
2179
2251
|
continue;
|
|
2180
2252
|
}
|
|
2253
|
+
if (op.op === "DrawCaptionBackground") {
|
|
2254
|
+
renderToBoth((context) => {
|
|
2255
|
+
context.save();
|
|
2256
|
+
const bgC = parseHex6(op.color, op.opacity);
|
|
2257
|
+
context.fillStyle = `rgba(${bgC.r},${bgC.g},${bgC.b},${bgC.a})`;
|
|
2258
|
+
context.beginPath();
|
|
2259
|
+
roundRectPath(context, op.x, op.y, op.width, op.height, op.borderRadius);
|
|
2260
|
+
context.fill();
|
|
2261
|
+
context.restore();
|
|
2262
|
+
});
|
|
2263
|
+
continue;
|
|
2264
|
+
}
|
|
2265
|
+
if (op.op === "DrawCaptionWord") {
|
|
2266
|
+
const captionWordOps = [op];
|
|
2267
|
+
while (i + 1 < ops.length) {
|
|
2268
|
+
const nextOp = ops[i + 1];
|
|
2269
|
+
if (nextOp.op !== "DrawCaptionWord") break;
|
|
2270
|
+
captionWordOps.push(nextOp);
|
|
2271
|
+
i++;
|
|
2272
|
+
}
|
|
2273
|
+
renderToBoth((context) => {
|
|
2274
|
+
for (const wordOp of captionWordOps) {
|
|
2275
|
+
if (!wordOp.background) continue;
|
|
2276
|
+
const wordDisplayText = wordOp.visibleCharacters >= 0 && wordOp.visibleCharacters < wordOp.text.length ? wordOp.text.slice(0, wordOp.visibleCharacters) : wordOp.text;
|
|
2277
|
+
if (wordDisplayText.length === 0) continue;
|
|
2278
|
+
context.save();
|
|
2279
|
+
const bgTx = Math.round(wordOp.x + wordOp.transform.translateX);
|
|
2280
|
+
const bgTy = Math.round(wordOp.y + wordOp.transform.translateY);
|
|
2281
|
+
context.translate(bgTx, bgTy);
|
|
2282
|
+
if (wordOp.transform.scale !== 1) {
|
|
2283
|
+
const halfWidth = wordOp.width / 2;
|
|
2284
|
+
context.translate(halfWidth, 0);
|
|
2285
|
+
context.scale(wordOp.transform.scale, wordOp.transform.scale);
|
|
2286
|
+
context.translate(-halfWidth, 0);
|
|
2287
|
+
}
|
|
2288
|
+
context.globalAlpha = wordOp.transform.opacity;
|
|
2289
|
+
context.font = `${wordOp.fontWeight} ${wordOp.fontSize}px "${wordOp.fontFamily}"`;
|
|
2290
|
+
context.textBaseline = "alphabetic";
|
|
2291
|
+
if (wordOp.letterSpacing) {
|
|
2292
|
+
context.letterSpacing = `${wordOp.letterSpacing}px`;
|
|
2293
|
+
}
|
|
2294
|
+
const bgMetrics = context.measureText(wordDisplayText);
|
|
2295
|
+
const bgTextWidth = bgMetrics.width;
|
|
2296
|
+
const bgAscent = wordOp.fontSize * 0.8;
|
|
2297
|
+
const bgDescent = wordOp.fontSize * 0.2;
|
|
2298
|
+
const bgTextHeight = bgAscent + bgDescent;
|
|
2299
|
+
const bgX = -wordOp.background.padding;
|
|
2300
|
+
const bgY = -bgAscent - wordOp.background.padding;
|
|
2301
|
+
const bgW = bgTextWidth + wordOp.background.padding * 2;
|
|
2302
|
+
const bgH = bgTextHeight + wordOp.background.padding * 2;
|
|
2303
|
+
const bgC = parseHex6(wordOp.background.color, wordOp.background.opacity);
|
|
2304
|
+
context.fillStyle = `rgba(${bgC.r},${bgC.g},${bgC.b},${bgC.a})`;
|
|
2305
|
+
context.beginPath();
|
|
2306
|
+
roundRectPath(context, bgX, bgY, bgW, bgH, wordOp.background.borderRadius);
|
|
2307
|
+
context.fill();
|
|
2308
|
+
context.restore();
|
|
2309
|
+
}
|
|
2310
|
+
for (const wordOp of captionWordOps) {
|
|
2311
|
+
const displayText = wordOp.visibleCharacters >= 0 && wordOp.visibleCharacters < wordOp.text.length ? wordOp.text.slice(0, wordOp.visibleCharacters) : wordOp.text;
|
|
2312
|
+
if (displayText.length === 0) continue;
|
|
2313
|
+
context.save();
|
|
2314
|
+
const tx = Math.round(wordOp.x + wordOp.transform.translateX);
|
|
2315
|
+
const ty = Math.round(wordOp.y + wordOp.transform.translateY);
|
|
2316
|
+
context.translate(tx, ty);
|
|
2317
|
+
if (wordOp.transform.scale !== 1) {
|
|
2318
|
+
const halfWidth = wordOp.width / 2;
|
|
2319
|
+
context.translate(halfWidth, 0);
|
|
2320
|
+
context.scale(wordOp.transform.scale, wordOp.transform.scale);
|
|
2321
|
+
context.translate(-halfWidth, 0);
|
|
2322
|
+
}
|
|
2323
|
+
context.globalAlpha = wordOp.transform.opacity;
|
|
2324
|
+
context.font = `${wordOp.fontWeight} ${wordOp.fontSize}px "${wordOp.fontFamily}"`;
|
|
2325
|
+
context.textBaseline = "alphabetic";
|
|
2326
|
+
if (wordOp.letterSpacing) {
|
|
2327
|
+
context.letterSpacing = `${wordOp.letterSpacing}px`;
|
|
2328
|
+
}
|
|
2329
|
+
const metrics = context.measureText(displayText);
|
|
2330
|
+
const textWidth = metrics.width;
|
|
2331
|
+
const ascent = metrics.actualBoundingBoxAscent ?? wordOp.fontSize * 0.8;
|
|
2332
|
+
const descent = metrics.actualBoundingBoxDescent ?? wordOp.fontSize * 0.2;
|
|
2333
|
+
const textHeight = ascent + descent;
|
|
2334
|
+
if (wordOp.shadow) {
|
|
2335
|
+
const shadowC = parseHex6(wordOp.shadow.color, wordOp.shadow.opacity);
|
|
2336
|
+
context.fillStyle = `rgba(${shadowC.r},${shadowC.g},${shadowC.b},${shadowC.a})`;
|
|
2337
|
+
context.shadowColor = `rgba(${shadowC.r},${shadowC.g},${shadowC.b},${shadowC.a})`;
|
|
2338
|
+
context.shadowOffsetX = wordOp.shadow.offsetX;
|
|
2339
|
+
context.shadowOffsetY = wordOp.shadow.offsetY;
|
|
2340
|
+
context.shadowBlur = wordOp.shadow.blur;
|
|
2341
|
+
context.fillText(displayText, 0, 0);
|
|
2342
|
+
context.shadowColor = "transparent";
|
|
2343
|
+
context.shadowOffsetX = 0;
|
|
2344
|
+
context.shadowOffsetY = 0;
|
|
2345
|
+
context.shadowBlur = 0;
|
|
2346
|
+
}
|
|
2347
|
+
if (wordOp.stroke && wordOp.stroke.width > 0) {
|
|
2348
|
+
const strokeC = parseHex6(wordOp.stroke.color, wordOp.stroke.opacity);
|
|
2349
|
+
context.strokeStyle = `rgba(${strokeC.r},${strokeC.g},${strokeC.b},${strokeC.a})`;
|
|
2350
|
+
context.lineWidth = wordOp.stroke.width * 2;
|
|
2351
|
+
context.lineJoin = "round";
|
|
2352
|
+
context.lineCap = "round";
|
|
2353
|
+
context.strokeText(displayText, 0, 0);
|
|
2354
|
+
}
|
|
2355
|
+
if (wordOp.fillProgress <= 0) {
|
|
2356
|
+
const baseC = parseHex6(wordOp.baseColor, wordOp.baseOpacity);
|
|
2357
|
+
context.fillStyle = `rgba(${baseC.r},${baseC.g},${baseC.b},${baseC.a})`;
|
|
2358
|
+
context.fillText(displayText, 0, 0);
|
|
2359
|
+
} else if (wordOp.fillProgress >= 1) {
|
|
2360
|
+
const activeC = parseHex6(wordOp.activeColor, wordOp.activeOpacity);
|
|
2361
|
+
context.fillStyle = `rgba(${activeC.r},${activeC.g},${activeC.b},${activeC.a})`;
|
|
2362
|
+
context.fillText(displayText, 0, 0);
|
|
2363
|
+
} else {
|
|
2364
|
+
const baseC = parseHex6(wordOp.baseColor, wordOp.baseOpacity);
|
|
2365
|
+
context.fillStyle = `rgba(${baseC.r},${baseC.g},${baseC.b},${baseC.a})`;
|
|
2366
|
+
context.fillText(displayText, 0, 0);
|
|
2367
|
+
context.save();
|
|
2368
|
+
context.beginPath();
|
|
2369
|
+
const clipWidth = textWidth * wordOp.fillProgress;
|
|
2370
|
+
if (wordOp.isRTL) {
|
|
2371
|
+
const clipX = textWidth - clipWidth;
|
|
2372
|
+
context.rect(clipX, -ascent - 5, clipWidth + 5, textHeight + 10);
|
|
2373
|
+
} else {
|
|
2374
|
+
context.rect(-5, -ascent - 5, clipWidth + 5, textHeight + 10);
|
|
2375
|
+
}
|
|
2376
|
+
context.clip();
|
|
2377
|
+
const activeC = parseHex6(wordOp.activeColor, wordOp.activeOpacity);
|
|
2378
|
+
context.fillStyle = `rgba(${activeC.r},${activeC.g},${activeC.b},${activeC.a})`;
|
|
2379
|
+
context.fillText(displayText, 0, 0);
|
|
2380
|
+
context.restore();
|
|
2381
|
+
}
|
|
2382
|
+
context.restore();
|
|
2383
|
+
}
|
|
2384
|
+
});
|
|
2385
|
+
continue;
|
|
2386
|
+
}
|
|
2181
2387
|
}
|
|
2182
2388
|
if (needsAlphaExtraction) {
|
|
2183
2389
|
const whiteData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
|
@@ -2215,6 +2421,17 @@ async function createNodePainter(opts) {
|
|
|
2215
2421
|
},
|
|
2216
2422
|
async toPNG() {
|
|
2217
2423
|
return canvas.toBuffer("image/png");
|
|
2424
|
+
},
|
|
2425
|
+
toRawRGBA() {
|
|
2426
|
+
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
|
2427
|
+
return {
|
|
2428
|
+
data: new Uint8ClampedArray(imageData.data),
|
|
2429
|
+
width: canvas.width,
|
|
2430
|
+
height: canvas.height
|
|
2431
|
+
};
|
|
2432
|
+
},
|
|
2433
|
+
getCanvasSize() {
|
|
2434
|
+
return { width: canvas.width, height: canvas.height };
|
|
2218
2435
|
}
|
|
2219
2436
|
};
|
|
2220
2437
|
return api;
|
|
@@ -2677,14 +2894,6 @@ var VideoGenerator = class {
|
|
|
2677
2894
|
}
|
|
2678
2895
|
};
|
|
2679
2896
|
|
|
2680
|
-
// src/types.ts
|
|
2681
|
-
var isShadowFill2 = (op) => {
|
|
2682
|
-
return op.op === "FillPath" && op.isShadow === true;
|
|
2683
|
-
};
|
|
2684
|
-
var isGlyphFill2 = (op) => {
|
|
2685
|
-
return op.op === "FillPath" && op.isShadow !== true;
|
|
2686
|
-
};
|
|
2687
|
-
|
|
2688
2897
|
// src/core/svg-path-utils.ts
|
|
2689
2898
|
var TAU = Math.PI * 2;
|
|
2690
2899
|
var PATH_COMMAND_REGEX = /([MmLlHhVvCcSsQqTtAaZz])([^MmLlHhVvCcSsQqTtAaZz]*)/g;
|
|
@@ -3629,6 +3838,1987 @@ function extractSvgDimensions(svgString) {
|
|
|
3629
3838
|
return { width, height };
|
|
3630
3839
|
}
|
|
3631
3840
|
|
|
3841
|
+
// src/core/rich-caption-layout.ts
|
|
3842
|
+
import { LRUCache } from "lru-cache";
|
|
3843
|
+
var RTL_RANGES = /[\u0590-\u05FF\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF]/;
|
|
3844
|
+
function isRTLText(text) {
|
|
3845
|
+
return RTL_RANGES.test(text);
|
|
3846
|
+
}
|
|
3847
|
+
var WordTimingStore = class {
|
|
3848
|
+
startTimes;
|
|
3849
|
+
endTimes;
|
|
3850
|
+
xPositions;
|
|
3851
|
+
yPositions;
|
|
3852
|
+
widths;
|
|
3853
|
+
words;
|
|
3854
|
+
length;
|
|
3855
|
+
constructor(words) {
|
|
3856
|
+
this.length = words.length;
|
|
3857
|
+
this.startTimes = new Uint32Array(this.length);
|
|
3858
|
+
this.endTimes = new Uint32Array(this.length);
|
|
3859
|
+
this.xPositions = new Float32Array(this.length);
|
|
3860
|
+
this.yPositions = new Float32Array(this.length);
|
|
3861
|
+
this.widths = new Float32Array(this.length);
|
|
3862
|
+
this.words = new Array(this.length);
|
|
3863
|
+
for (let i = 0; i < this.length; i++) {
|
|
3864
|
+
this.startTimes[i] = Math.floor(words[i].start);
|
|
3865
|
+
this.endTimes[i] = Math.floor(words[i].end);
|
|
3866
|
+
this.words[i] = words[i].text;
|
|
3867
|
+
}
|
|
3868
|
+
}
|
|
3869
|
+
};
|
|
3870
|
+
function findWordAtTime(store, timeMs) {
|
|
3871
|
+
let left = 0;
|
|
3872
|
+
let right = store.length - 1;
|
|
3873
|
+
while (left <= right) {
|
|
3874
|
+
const mid = left + right >>> 1;
|
|
3875
|
+
const start = store.startTimes[mid];
|
|
3876
|
+
const end = store.endTimes[mid];
|
|
3877
|
+
if (timeMs >= start && timeMs < end) {
|
|
3878
|
+
return mid;
|
|
3879
|
+
}
|
|
3880
|
+
if (timeMs < start) {
|
|
3881
|
+
right = mid - 1;
|
|
3882
|
+
} else {
|
|
3883
|
+
left = mid + 1;
|
|
3884
|
+
}
|
|
3885
|
+
}
|
|
3886
|
+
return -1;
|
|
3887
|
+
}
|
|
3888
|
+
function groupWordsByPause(store, pauseThreshold = 500) {
|
|
3889
|
+
if (store.length === 0) {
|
|
3890
|
+
return [];
|
|
3891
|
+
}
|
|
3892
|
+
const groups = [];
|
|
3893
|
+
let currentGroup = [];
|
|
3894
|
+
for (let i = 0; i < store.length; i++) {
|
|
3895
|
+
if (currentGroup.length === 0) {
|
|
3896
|
+
currentGroup.push(i);
|
|
3897
|
+
continue;
|
|
3898
|
+
}
|
|
3899
|
+
const prevEnd = store.endTimes[currentGroup[currentGroup.length - 1]];
|
|
3900
|
+
const currStart = store.startTimes[i];
|
|
3901
|
+
const gap = currStart - prevEnd;
|
|
3902
|
+
const prevText = store.words[currentGroup[currentGroup.length - 1]];
|
|
3903
|
+
const endsWithPunctuation = /[.!?]$/.test(prevText);
|
|
3904
|
+
if (gap >= pauseThreshold || endsWithPunctuation) {
|
|
3905
|
+
groups.push(currentGroup);
|
|
3906
|
+
currentGroup = [i];
|
|
3907
|
+
} else {
|
|
3908
|
+
currentGroup.push(i);
|
|
3909
|
+
}
|
|
3910
|
+
}
|
|
3911
|
+
if (currentGroup.length > 0) {
|
|
3912
|
+
groups.push(currentGroup);
|
|
3913
|
+
}
|
|
3914
|
+
return groups;
|
|
3915
|
+
}
|
|
3916
|
+
function breakIntoLines(wordWidths, maxWidth, maxLines, spaceWidth) {
|
|
3917
|
+
const lines = [];
|
|
3918
|
+
let currentLine = [];
|
|
3919
|
+
let currentWidth = 0;
|
|
3920
|
+
for (let i = 0; i < wordWidths.length; i++) {
|
|
3921
|
+
const wordWidth = wordWidths[i];
|
|
3922
|
+
const spaceNeeded = currentLine.length > 0 ? spaceWidth : 0;
|
|
3923
|
+
if (currentWidth + spaceNeeded + wordWidth <= maxWidth) {
|
|
3924
|
+
currentLine.push(i);
|
|
3925
|
+
currentWidth += spaceNeeded + wordWidth;
|
|
3926
|
+
} else {
|
|
3927
|
+
if (currentLine.length > 0) {
|
|
3928
|
+
lines.push(currentLine);
|
|
3929
|
+
if (lines.length >= maxLines) {
|
|
3930
|
+
return lines;
|
|
3931
|
+
}
|
|
3932
|
+
}
|
|
3933
|
+
currentLine = [i];
|
|
3934
|
+
currentWidth = wordWidth;
|
|
3935
|
+
}
|
|
3936
|
+
}
|
|
3937
|
+
if (currentLine.length > 0 && lines.length < maxLines) {
|
|
3938
|
+
lines.push(currentLine);
|
|
3939
|
+
}
|
|
3940
|
+
return lines;
|
|
3941
|
+
}
|
|
3942
|
+
var GLYPH_SIZE_ESTIMATE = 64;
|
|
3943
|
+
function createShapedWordCache() {
|
|
3944
|
+
return new LRUCache({
|
|
3945
|
+
max: 5e4,
|
|
3946
|
+
maxSize: 50 * 1024 * 1024,
|
|
3947
|
+
maxEntrySize: 100 * 1024,
|
|
3948
|
+
sizeCalculation: (value, key) => {
|
|
3949
|
+
const keySize = key.length * 2;
|
|
3950
|
+
const glyphsSize = value.glyphs.length * GLYPH_SIZE_ESTIMATE;
|
|
3951
|
+
return keySize + glyphsSize + 100;
|
|
3952
|
+
}
|
|
3953
|
+
});
|
|
3954
|
+
}
|
|
3955
|
+
function makeShapingKey(text, fontFamily, fontSize, fontWeight, letterSpacing = 0) {
|
|
3956
|
+
return `${text}\0${fontFamily}\0${fontSize}\0${fontWeight}\0${letterSpacing}`;
|
|
3957
|
+
}
|
|
3958
|
+
function transformText(text, transform) {
|
|
3959
|
+
switch (transform) {
|
|
3960
|
+
case "uppercase":
|
|
3961
|
+
return text.toUpperCase();
|
|
3962
|
+
case "lowercase":
|
|
3963
|
+
return text.toLowerCase();
|
|
3964
|
+
case "capitalize":
|
|
3965
|
+
return text.replace(/\b\w/g, (c) => c.toUpperCase());
|
|
3966
|
+
default:
|
|
3967
|
+
return text;
|
|
3968
|
+
}
|
|
3969
|
+
}
|
|
3970
|
+
var CaptionLayoutEngine = class {
|
|
3971
|
+
fontRegistry;
|
|
3972
|
+
cache;
|
|
3973
|
+
layoutEngine;
|
|
3974
|
+
constructor(fontRegistry) {
|
|
3975
|
+
this.fontRegistry = fontRegistry;
|
|
3976
|
+
this.cache = createShapedWordCache();
|
|
3977
|
+
this.layoutEngine = new LayoutEngine(fontRegistry);
|
|
3978
|
+
}
|
|
3979
|
+
async measureWord(text, config) {
|
|
3980
|
+
const transformedText = transformText(text, config.textTransform);
|
|
3981
|
+
const cacheKey = makeShapingKey(
|
|
3982
|
+
transformedText,
|
|
3983
|
+
config.fontFamily,
|
|
3984
|
+
config.fontSize,
|
|
3985
|
+
config.fontWeight,
|
|
3986
|
+
config.letterSpacing
|
|
3987
|
+
);
|
|
3988
|
+
const cached = this.cache.get(cacheKey);
|
|
3989
|
+
if (cached) {
|
|
3990
|
+
return cached;
|
|
3991
|
+
}
|
|
3992
|
+
const lines = await this.layoutEngine.layout({
|
|
3993
|
+
text: transformedText,
|
|
3994
|
+
width: 1e5,
|
|
3995
|
+
letterSpacing: config.letterSpacing,
|
|
3996
|
+
fontSize: config.fontSize,
|
|
3997
|
+
lineHeight: 1,
|
|
3998
|
+
desc: { family: config.fontFamily, weight: config.fontWeight },
|
|
3999
|
+
textTransform: "none"
|
|
4000
|
+
});
|
|
4001
|
+
const width = lines[0]?.width ?? 0;
|
|
4002
|
+
const glyphs = lines[0]?.glyphs ?? [];
|
|
4003
|
+
const isRTL = isRTLText(transformedText);
|
|
4004
|
+
const shaped = {
|
|
4005
|
+
text: transformedText,
|
|
4006
|
+
width,
|
|
4007
|
+
glyphs: glyphs.map((g) => ({
|
|
4008
|
+
id: g.id,
|
|
4009
|
+
xAdvance: g.xAdvance,
|
|
4010
|
+
xOffset: g.xOffset,
|
|
4011
|
+
yOffset: g.yOffset,
|
|
4012
|
+
cluster: g.cluster
|
|
4013
|
+
})),
|
|
4014
|
+
isRTL
|
|
4015
|
+
};
|
|
4016
|
+
this.cache.set(cacheKey, shaped);
|
|
4017
|
+
return shaped;
|
|
4018
|
+
}
|
|
4019
|
+
async layoutCaption(words, config) {
|
|
4020
|
+
const store = new WordTimingStore(words);
|
|
4021
|
+
const measurementConfig = {
|
|
4022
|
+
fontFamily: config.fontFamily,
|
|
4023
|
+
fontSize: config.fontSize,
|
|
4024
|
+
fontWeight: config.fontWeight,
|
|
4025
|
+
letterSpacing: config.letterSpacing,
|
|
4026
|
+
textTransform: config.textTransform
|
|
4027
|
+
};
|
|
4028
|
+
const shapedWords = await Promise.all(
|
|
4029
|
+
words.map((w) => this.measureWord(w.text, measurementConfig))
|
|
4030
|
+
);
|
|
4031
|
+
if (config.measureTextWidth) {
|
|
4032
|
+
const fontString = `${config.fontWeight} ${config.fontSize}px "${config.fontFamily}"`;
|
|
4033
|
+
for (let i = 0; i < shapedWords.length; i++) {
|
|
4034
|
+
store.widths[i] = config.measureTextWidth(shapedWords[i].text, fontString);
|
|
4035
|
+
}
|
|
4036
|
+
} else {
|
|
4037
|
+
for (let i = 0; i < shapedWords.length; i++) {
|
|
4038
|
+
store.widths[i] = shapedWords[i].width;
|
|
4039
|
+
}
|
|
4040
|
+
}
|
|
4041
|
+
if (config.textTransform !== "none") {
|
|
4042
|
+
for (let i = 0; i < shapedWords.length; i++) {
|
|
4043
|
+
store.words[i] = shapedWords[i].text;
|
|
4044
|
+
}
|
|
4045
|
+
}
|
|
4046
|
+
const wordGroups = groupWordsByPause(store, config.pauseThreshold);
|
|
4047
|
+
const pixelMaxWidth = config.frameWidth * config.maxWidth;
|
|
4048
|
+
let spaceWidth;
|
|
4049
|
+
if (config.measureTextWidth) {
|
|
4050
|
+
const fontString = `${config.fontWeight} ${config.fontSize}px "${config.fontFamily}"`;
|
|
4051
|
+
spaceWidth = config.measureTextWidth(" ", fontString) + config.wordSpacing;
|
|
4052
|
+
} else {
|
|
4053
|
+
const spaceWord = await this.measureWord(" ", measurementConfig);
|
|
4054
|
+
spaceWidth = spaceWord.width + config.wordSpacing;
|
|
4055
|
+
}
|
|
4056
|
+
const groups = wordGroups.map((indices) => {
|
|
4057
|
+
const groupWidths = indices.map((i) => store.widths[i]);
|
|
4058
|
+
const lineIndices = breakIntoLines(
|
|
4059
|
+
groupWidths,
|
|
4060
|
+
pixelMaxWidth,
|
|
4061
|
+
config.maxLines,
|
|
4062
|
+
spaceWidth
|
|
4063
|
+
);
|
|
4064
|
+
const lines = lineIndices.map((lineWordIndices, lineIndex) => {
|
|
4065
|
+
const actualIndices = lineWordIndices.map((i) => indices[i]);
|
|
4066
|
+
const lineWidth = actualIndices.reduce((sum, idx) => sum + store.widths[idx], 0) + (actualIndices.length - 1) * spaceWidth;
|
|
4067
|
+
return {
|
|
4068
|
+
wordIndices: actualIndices,
|
|
4069
|
+
x: 0,
|
|
4070
|
+
y: lineIndex * config.fontSize * config.lineHeight,
|
|
4071
|
+
width: lineWidth,
|
|
4072
|
+
height: config.fontSize
|
|
4073
|
+
};
|
|
4074
|
+
});
|
|
4075
|
+
return {
|
|
4076
|
+
wordIndices: lines.flatMap((l) => l.wordIndices),
|
|
4077
|
+
startTime: store.startTimes[indices[0]],
|
|
4078
|
+
endTime: store.endTimes[indices[indices.length - 1]],
|
|
4079
|
+
lines
|
|
4080
|
+
};
|
|
4081
|
+
});
|
|
4082
|
+
const calculateGroupY = (group) => {
|
|
4083
|
+
const totalHeight = group.lines.length * config.fontSize * config.lineHeight;
|
|
4084
|
+
switch (config.position) {
|
|
4085
|
+
case "top":
|
|
4086
|
+
return config.fontSize * 1.5;
|
|
4087
|
+
case "bottom":
|
|
4088
|
+
return config.frameHeight - totalHeight - config.fontSize * 0.5;
|
|
4089
|
+
case "center":
|
|
4090
|
+
default:
|
|
4091
|
+
return (config.frameHeight - totalHeight) / 2 + config.fontSize;
|
|
4092
|
+
}
|
|
4093
|
+
};
|
|
4094
|
+
for (const group of groups) {
|
|
4095
|
+
const baseY = calculateGroupY(group);
|
|
4096
|
+
for (let lineIdx = 0; lineIdx < group.lines.length; lineIdx++) {
|
|
4097
|
+
const line = group.lines[lineIdx];
|
|
4098
|
+
line.x = (config.frameWidth - line.width) / 2;
|
|
4099
|
+
line.y = baseY + lineIdx * config.fontSize * config.lineHeight;
|
|
4100
|
+
let xCursor = line.x;
|
|
4101
|
+
for (const wordIdx of line.wordIndices) {
|
|
4102
|
+
store.xPositions[wordIdx] = xCursor;
|
|
4103
|
+
store.yPositions[wordIdx] = line.y;
|
|
4104
|
+
xCursor += store.widths[wordIdx] + spaceWidth;
|
|
4105
|
+
}
|
|
4106
|
+
}
|
|
4107
|
+
}
|
|
4108
|
+
return {
|
|
4109
|
+
store,
|
|
4110
|
+
groups,
|
|
4111
|
+
shapedWords
|
|
4112
|
+
};
|
|
4113
|
+
}
|
|
4114
|
+
getVisibleWordsAtTime(layout, timeMs) {
|
|
4115
|
+
const activeGroup = layout.groups.find(
|
|
4116
|
+
(g) => timeMs >= g.startTime && timeMs <= g.endTime
|
|
4117
|
+
);
|
|
4118
|
+
if (!activeGroup) {
|
|
4119
|
+
return [];
|
|
4120
|
+
}
|
|
4121
|
+
return activeGroup.wordIndices.map((idx) => ({
|
|
4122
|
+
wordIndex: idx,
|
|
4123
|
+
text: layout.store.words[idx],
|
|
4124
|
+
x: layout.store.xPositions[idx],
|
|
4125
|
+
y: layout.store.yPositions[idx],
|
|
4126
|
+
width: layout.store.widths[idx],
|
|
4127
|
+
startTime: layout.store.startTimes[idx],
|
|
4128
|
+
endTime: layout.store.endTimes[idx],
|
|
4129
|
+
isRTL: layout.shapedWords[idx].isRTL
|
|
4130
|
+
}));
|
|
4131
|
+
}
|
|
4132
|
+
getActiveWordAtTime(layout, timeMs) {
|
|
4133
|
+
const wordIndex = findWordAtTime(layout.store, timeMs);
|
|
4134
|
+
if (wordIndex === -1) {
|
|
4135
|
+
return null;
|
|
4136
|
+
}
|
|
4137
|
+
return {
|
|
4138
|
+
wordIndex,
|
|
4139
|
+
text: layout.store.words[wordIndex],
|
|
4140
|
+
x: layout.store.xPositions[wordIndex],
|
|
4141
|
+
y: layout.store.yPositions[wordIndex],
|
|
4142
|
+
width: layout.store.widths[wordIndex],
|
|
4143
|
+
startTime: layout.store.startTimes[wordIndex],
|
|
4144
|
+
endTime: layout.store.endTimes[wordIndex],
|
|
4145
|
+
isRTL: layout.shapedWords[wordIndex].isRTL
|
|
4146
|
+
};
|
|
4147
|
+
}
|
|
4148
|
+
clearCache() {
|
|
4149
|
+
this.cache.clear();
|
|
4150
|
+
}
|
|
4151
|
+
getCacheStats() {
|
|
4152
|
+
return {
|
|
4153
|
+
size: this.cache.size,
|
|
4154
|
+
calculatedSize: this.cache.calculatedSize
|
|
4155
|
+
};
|
|
4156
|
+
}
|
|
4157
|
+
};
|
|
4158
|
+
|
|
4159
|
+
// src/core/rich-caption-animator.ts
|
|
4160
|
+
var ANIMATION_DURATIONS = {
|
|
4161
|
+
karaoke: 0,
|
|
4162
|
+
highlight: 0,
|
|
4163
|
+
pop: 200,
|
|
4164
|
+
fade: 150,
|
|
4165
|
+
slide: 250,
|
|
4166
|
+
bounce: 400,
|
|
4167
|
+
typewriter: 0,
|
|
4168
|
+
none: 0
|
|
4169
|
+
};
|
|
4170
|
+
var DEFAULT_ANIMATION_STATE = {
|
|
4171
|
+
opacity: 1,
|
|
4172
|
+
scale: 1,
|
|
4173
|
+
translateX: 0,
|
|
4174
|
+
translateY: 0,
|
|
4175
|
+
fillProgress: 1,
|
|
4176
|
+
isActive: false,
|
|
4177
|
+
visibleCharacters: -1
|
|
4178
|
+
};
|
|
4179
|
+
function easeOutQuad2(t) {
|
|
4180
|
+
return t * (2 - t);
|
|
4181
|
+
}
|
|
4182
|
+
function easeInOutQuad(t) {
|
|
4183
|
+
return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
|
|
4184
|
+
}
|
|
4185
|
+
function easeOutBack(t) {
|
|
4186
|
+
const c1 = 1.70158;
|
|
4187
|
+
const c3 = c1 + 1;
|
|
4188
|
+
return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
|
|
4189
|
+
}
|
|
4190
|
+
function easeOutCirc(t) {
|
|
4191
|
+
return Math.sqrt(1 - Math.pow(t - 1, 2));
|
|
4192
|
+
}
|
|
4193
|
+
function easeOutBounce(t) {
|
|
4194
|
+
const n1 = 7.5625;
|
|
4195
|
+
const d1 = 2.75;
|
|
4196
|
+
if (t < 1 / d1) {
|
|
4197
|
+
return n1 * t * t;
|
|
4198
|
+
}
|
|
4199
|
+
if (t < 2 / d1) {
|
|
4200
|
+
return n1 * (t -= 1.5 / d1) * t + 0.75;
|
|
4201
|
+
}
|
|
4202
|
+
if (t < 2.5 / d1) {
|
|
4203
|
+
return n1 * (t -= 2.25 / d1) * t + 0.9375;
|
|
4204
|
+
}
|
|
4205
|
+
return n1 * (t -= 2.625 / d1) * t + 0.984375;
|
|
4206
|
+
}
|
|
4207
|
+
function clamp(value, min, max) {
|
|
4208
|
+
return Math.min(Math.max(value, min), max);
|
|
4209
|
+
}
|
|
4210
|
+
function calculateAnimationProgress(ctx) {
|
|
4211
|
+
if (ctx.animationDuration <= 0) {
|
|
4212
|
+
return ctx.currentTime >= ctx.wordStart ? 1 : 0;
|
|
4213
|
+
}
|
|
4214
|
+
const elapsed = ctx.currentTime - ctx.wordStart;
|
|
4215
|
+
return clamp(elapsed / ctx.animationDuration, 0, 1);
|
|
4216
|
+
}
|
|
4217
|
+
function calculateWordProgress(ctx) {
|
|
4218
|
+
const duration = ctx.wordEnd - ctx.wordStart;
|
|
4219
|
+
if (duration <= 0) {
|
|
4220
|
+
return ctx.currentTime >= ctx.wordStart ? 1 : 0;
|
|
4221
|
+
}
|
|
4222
|
+
const elapsed = ctx.currentTime - ctx.wordStart;
|
|
4223
|
+
return clamp(elapsed / duration, 0, 1);
|
|
4224
|
+
}
|
|
4225
|
+
function isWordActive(ctx) {
|
|
4226
|
+
return ctx.currentTime >= ctx.wordStart && ctx.currentTime < ctx.wordEnd;
|
|
4227
|
+
}
|
|
4228
|
+
function calculateKaraokeState(ctx, speed) {
|
|
4229
|
+
const isActive = isWordActive(ctx);
|
|
4230
|
+
const wordDuration = ctx.wordEnd - ctx.wordStart;
|
|
4231
|
+
const adjustedDuration = wordDuration / speed;
|
|
4232
|
+
const adjustedEnd = ctx.wordStart + adjustedDuration;
|
|
4233
|
+
const adjustedCtx = { ...ctx, wordEnd: adjustedEnd };
|
|
4234
|
+
if (ctx.currentTime < ctx.wordStart) {
|
|
4235
|
+
return {
|
|
4236
|
+
fillProgress: 0,
|
|
4237
|
+
isActive: false,
|
|
4238
|
+
opacity: 1
|
|
4239
|
+
};
|
|
4240
|
+
}
|
|
4241
|
+
if (ctx.currentTime >= adjustedEnd) {
|
|
4242
|
+
return {
|
|
4243
|
+
fillProgress: 1,
|
|
4244
|
+
isActive: false,
|
|
4245
|
+
opacity: 1
|
|
4246
|
+
};
|
|
4247
|
+
}
|
|
4248
|
+
return {
|
|
4249
|
+
fillProgress: calculateWordProgress(adjustedCtx),
|
|
4250
|
+
isActive,
|
|
4251
|
+
opacity: 1
|
|
4252
|
+
};
|
|
4253
|
+
}
|
|
4254
|
+
function calculateHighlightState(ctx) {
|
|
4255
|
+
const isActive = isWordActive(ctx);
|
|
4256
|
+
return {
|
|
4257
|
+
isActive,
|
|
4258
|
+
fillProgress: isActive ? 1 : 0,
|
|
4259
|
+
opacity: 1
|
|
4260
|
+
};
|
|
4261
|
+
}
|
|
4262
|
+
function calculatePopState(ctx, activeScale, speed) {
|
|
4263
|
+
if (ctx.currentTime < ctx.wordStart) {
|
|
4264
|
+
return {
|
|
4265
|
+
scale: 0.5,
|
|
4266
|
+
opacity: 0,
|
|
4267
|
+
isActive: false
|
|
4268
|
+
};
|
|
4269
|
+
}
|
|
4270
|
+
const adjustedDuration = ctx.animationDuration / speed;
|
|
4271
|
+
const adjustedCtx = { ...ctx, animationDuration: adjustedDuration };
|
|
4272
|
+
const progress = calculateAnimationProgress(adjustedCtx);
|
|
4273
|
+
const easedProgress = easeOutBack(progress);
|
|
4274
|
+
const startScale = 0.5;
|
|
4275
|
+
const endScale = isWordActive(ctx) ? activeScale : 1;
|
|
4276
|
+
const scale = startScale + (endScale - startScale) * easedProgress;
|
|
4277
|
+
return {
|
|
4278
|
+
scale: Math.min(scale, activeScale),
|
|
4279
|
+
opacity: easedProgress,
|
|
4280
|
+
isActive: isWordActive(ctx)
|
|
4281
|
+
};
|
|
4282
|
+
}
|
|
4283
|
+
function calculateFadeState(ctx, speed) {
|
|
4284
|
+
if (ctx.currentTime < ctx.wordStart) {
|
|
4285
|
+
return {
|
|
4286
|
+
opacity: 0,
|
|
4287
|
+
isActive: false
|
|
4288
|
+
};
|
|
4289
|
+
}
|
|
4290
|
+
const adjustedDuration = ctx.animationDuration / speed;
|
|
4291
|
+
const adjustedCtx = { ...ctx, animationDuration: adjustedDuration };
|
|
4292
|
+
const progress = calculateAnimationProgress(adjustedCtx);
|
|
4293
|
+
const easedProgress = easeInOutQuad(progress);
|
|
4294
|
+
return {
|
|
4295
|
+
opacity: easedProgress,
|
|
4296
|
+
isActive: isWordActive(ctx)
|
|
4297
|
+
};
|
|
4298
|
+
}
|
|
4299
|
+
function calculateSlideState(ctx, direction, speed, fontSize) {
|
|
4300
|
+
const slideDistance = fontSize * 1.5;
|
|
4301
|
+
if (ctx.currentTime < ctx.wordStart) {
|
|
4302
|
+
const offset2 = getDirectionOffset(direction, slideDistance);
|
|
4303
|
+
return {
|
|
4304
|
+
translateX: offset2.x,
|
|
4305
|
+
translateY: offset2.y,
|
|
4306
|
+
opacity: 0,
|
|
4307
|
+
isActive: false
|
|
4308
|
+
};
|
|
4309
|
+
}
|
|
4310
|
+
const adjustedDuration = ctx.animationDuration / speed;
|
|
4311
|
+
const adjustedCtx = { ...ctx, animationDuration: adjustedDuration };
|
|
4312
|
+
const progress = calculateAnimationProgress(adjustedCtx);
|
|
4313
|
+
const easedProgress = easeOutCirc(progress);
|
|
4314
|
+
const offset = getDirectionOffset(direction, slideDistance);
|
|
4315
|
+
const translateX = offset.x * (1 - easedProgress);
|
|
4316
|
+
const translateY = offset.y * (1 - easedProgress);
|
|
4317
|
+
return {
|
|
4318
|
+
translateX,
|
|
4319
|
+
translateY,
|
|
4320
|
+
opacity: easeOutQuad2(progress),
|
|
4321
|
+
isActive: isWordActive(ctx)
|
|
4322
|
+
};
|
|
4323
|
+
}
|
|
4324
|
+
function getDirectionOffset(direction, distance) {
|
|
4325
|
+
switch (direction) {
|
|
4326
|
+
case "left":
|
|
4327
|
+
return { x: -distance, y: 0 };
|
|
4328
|
+
case "right":
|
|
4329
|
+
return { x: distance, y: 0 };
|
|
4330
|
+
case "up":
|
|
4331
|
+
return { x: 0, y: -distance };
|
|
4332
|
+
case "down":
|
|
4333
|
+
return { x: 0, y: distance };
|
|
4334
|
+
}
|
|
4335
|
+
}
|
|
4336
|
+
function calculateBounceState(ctx, speed, fontSize) {
|
|
4337
|
+
const bounceDistance = fontSize * 0.8;
|
|
4338
|
+
if (ctx.currentTime < ctx.wordStart) {
|
|
4339
|
+
return {
|
|
4340
|
+
translateY: -bounceDistance,
|
|
4341
|
+
opacity: 0,
|
|
4342
|
+
isActive: false
|
|
4343
|
+
};
|
|
4344
|
+
}
|
|
4345
|
+
const adjustedDuration = ctx.animationDuration / speed;
|
|
4346
|
+
const adjustedCtx = { ...ctx, animationDuration: adjustedDuration };
|
|
4347
|
+
const progress = calculateAnimationProgress(adjustedCtx);
|
|
4348
|
+
const easedProgress = easeOutBounce(progress);
|
|
4349
|
+
return {
|
|
4350
|
+
translateY: -bounceDistance * (1 - easedProgress),
|
|
4351
|
+
opacity: easeOutQuad2(progress),
|
|
4352
|
+
isActive: isWordActive(ctx)
|
|
4353
|
+
};
|
|
4354
|
+
}
|
|
4355
|
+
function calculateTypewriterState(ctx, charCount, speed) {
|
|
4356
|
+
const wordDuration = ctx.wordEnd - ctx.wordStart;
|
|
4357
|
+
const adjustedDuration = wordDuration / speed;
|
|
4358
|
+
const adjustedEnd = ctx.wordStart + adjustedDuration;
|
|
4359
|
+
const adjustedCtx = { ...ctx, wordEnd: adjustedEnd };
|
|
4360
|
+
if (ctx.currentTime < ctx.wordStart) {
|
|
4361
|
+
return {
|
|
4362
|
+
visibleCharacters: 0,
|
|
4363
|
+
opacity: 1,
|
|
4364
|
+
isActive: false
|
|
4365
|
+
};
|
|
4366
|
+
}
|
|
4367
|
+
if (ctx.currentTime >= adjustedEnd) {
|
|
4368
|
+
return {
|
|
4369
|
+
visibleCharacters: charCount,
|
|
4370
|
+
opacity: 1,
|
|
4371
|
+
isActive: false
|
|
4372
|
+
};
|
|
4373
|
+
}
|
|
4374
|
+
const progress = calculateWordProgress(adjustedCtx);
|
|
4375
|
+
const visibleCharacters = Math.ceil(progress * charCount);
|
|
4376
|
+
return {
|
|
4377
|
+
visibleCharacters: clamp(visibleCharacters, 0, charCount),
|
|
4378
|
+
opacity: 1,
|
|
4379
|
+
isActive: isWordActive(ctx)
|
|
4380
|
+
};
|
|
4381
|
+
}
|
|
4382
|
+
function calculateNoneState(ctx) {
|
|
4383
|
+
return {
|
|
4384
|
+
opacity: 1,
|
|
4385
|
+
isActive: isWordActive(ctx)
|
|
4386
|
+
};
|
|
4387
|
+
}
|
|
4388
|
+
function calculateWordAnimationState(wordStart, wordEnd, currentTime, config, activeScale = 1, charCount = 0, fontSize = 48) {
|
|
4389
|
+
const ctx = {
|
|
4390
|
+
wordStart,
|
|
4391
|
+
wordEnd,
|
|
4392
|
+
currentTime,
|
|
4393
|
+
animationDuration: ANIMATION_DURATIONS[config.style]
|
|
4394
|
+
};
|
|
4395
|
+
const baseState = { ...DEFAULT_ANIMATION_STATE };
|
|
4396
|
+
let partialState;
|
|
4397
|
+
switch (config.style) {
|
|
4398
|
+
case "karaoke":
|
|
4399
|
+
partialState = calculateKaraokeState(ctx, config.speed);
|
|
4400
|
+
break;
|
|
4401
|
+
case "highlight":
|
|
4402
|
+
partialState = calculateHighlightState(ctx);
|
|
4403
|
+
break;
|
|
4404
|
+
case "pop":
|
|
4405
|
+
partialState = calculatePopState(ctx, activeScale, config.speed);
|
|
4406
|
+
break;
|
|
4407
|
+
case "fade":
|
|
4408
|
+
partialState = calculateFadeState(ctx, config.speed);
|
|
4409
|
+
break;
|
|
4410
|
+
case "slide":
|
|
4411
|
+
partialState = calculateSlideState(ctx, config.direction, config.speed, fontSize);
|
|
4412
|
+
break;
|
|
4413
|
+
case "bounce":
|
|
4414
|
+
partialState = calculateBounceState(ctx, config.speed, fontSize);
|
|
4415
|
+
break;
|
|
4416
|
+
case "typewriter":
|
|
4417
|
+
partialState = calculateTypewriterState(ctx, charCount, config.speed);
|
|
4418
|
+
break;
|
|
4419
|
+
case "none":
|
|
4420
|
+
default:
|
|
4421
|
+
partialState = calculateNoneState(ctx);
|
|
4422
|
+
break;
|
|
4423
|
+
}
|
|
4424
|
+
return { ...baseState, ...partialState };
|
|
4425
|
+
}
|
|
4426
|
+
function calculateAnimationStatesForGroup(words, currentTime, config, activeScale = 1, fontSize = 48) {
|
|
4427
|
+
const states = /* @__PURE__ */ new Map();
|
|
4428
|
+
for (const word of words) {
|
|
4429
|
+
const state = calculateWordAnimationState(
|
|
4430
|
+
word.startTime,
|
|
4431
|
+
word.endTime,
|
|
4432
|
+
currentTime,
|
|
4433
|
+
config,
|
|
4434
|
+
activeScale,
|
|
4435
|
+
word.text.length,
|
|
4436
|
+
fontSize
|
|
4437
|
+
);
|
|
4438
|
+
states.set(word.wordIndex, state);
|
|
4439
|
+
}
|
|
4440
|
+
return states;
|
|
4441
|
+
}
|
|
4442
|
+
function getDefaultAnimationConfig() {
|
|
4443
|
+
return {
|
|
4444
|
+
style: "highlight",
|
|
4445
|
+
speed: 1,
|
|
4446
|
+
direction: "up"
|
|
4447
|
+
};
|
|
4448
|
+
}
|
|
4449
|
+
|
|
4450
|
+
// src/core/rich-caption-generator.ts
|
|
4451
|
+
function extractFontConfig(asset) {
|
|
4452
|
+
const font = asset.font;
|
|
4453
|
+
const active = asset.active?.font;
|
|
4454
|
+
return {
|
|
4455
|
+
family: font?.family ?? "Open Sans",
|
|
4456
|
+
size: font?.size ?? 24,
|
|
4457
|
+
weight: String(font?.weight ?? "400"),
|
|
4458
|
+
baseColor: font?.color ?? "#ffffff",
|
|
4459
|
+
activeColor: active?.color ?? "#ffff00",
|
|
4460
|
+
baseOpacity: font?.opacity ?? 1,
|
|
4461
|
+
activeOpacity: active?.opacity ?? 1,
|
|
4462
|
+
letterSpacing: asset.style?.letterSpacing ?? 0
|
|
4463
|
+
};
|
|
4464
|
+
}
|
|
4465
|
+
function extractStrokeConfig(asset, isActive) {
|
|
4466
|
+
const baseStroke = asset.stroke;
|
|
4467
|
+
const activeStroke = asset.active?.stroke;
|
|
4468
|
+
if (!baseStroke && !activeStroke) {
|
|
4469
|
+
return void 0;
|
|
4470
|
+
}
|
|
4471
|
+
if (isActive && activeStroke) {
|
|
4472
|
+
return {
|
|
4473
|
+
width: activeStroke.width ?? baseStroke?.width ?? 0,
|
|
4474
|
+
color: activeStroke.color ?? baseStroke?.color ?? "#000000",
|
|
4475
|
+
opacity: activeStroke.opacity ?? baseStroke?.opacity ?? 1
|
|
4476
|
+
};
|
|
4477
|
+
}
|
|
4478
|
+
if (baseStroke) {
|
|
4479
|
+
return {
|
|
4480
|
+
width: baseStroke.width ?? 0,
|
|
4481
|
+
color: baseStroke.color ?? "#000000",
|
|
4482
|
+
opacity: baseStroke.opacity ?? 1
|
|
4483
|
+
};
|
|
4484
|
+
}
|
|
4485
|
+
return void 0;
|
|
4486
|
+
}
|
|
4487
|
+
function extractShadowConfig(asset) {
|
|
4488
|
+
const shadow = asset.shadow;
|
|
4489
|
+
if (!shadow) {
|
|
4490
|
+
return void 0;
|
|
4491
|
+
}
|
|
4492
|
+
return {
|
|
4493
|
+
offsetX: shadow.offsetX ?? 0,
|
|
4494
|
+
offsetY: shadow.offsetY ?? 0,
|
|
4495
|
+
blur: shadow.blur ?? 0,
|
|
4496
|
+
color: shadow.color ?? "#000000",
|
|
4497
|
+
opacity: shadow.opacity ?? 0.5
|
|
4498
|
+
};
|
|
4499
|
+
}
|
|
4500
|
+
function extractBackgroundConfig(asset, isActive) {
|
|
4501
|
+
const fontBackground = asset.font?.background;
|
|
4502
|
+
const activeBackground = asset.active?.font?.background;
|
|
4503
|
+
const bgColor = isActive && activeBackground ? activeBackground : fontBackground;
|
|
4504
|
+
if (!bgColor) {
|
|
4505
|
+
return void 0;
|
|
4506
|
+
}
|
|
4507
|
+
const paddingValues = extractCaptionPadding(asset);
|
|
4508
|
+
const paddingValue = Math.max(paddingValues.top, paddingValues.right, paddingValues.bottom, paddingValues.left);
|
|
4509
|
+
return {
|
|
4510
|
+
color: bgColor,
|
|
4511
|
+
opacity: 1,
|
|
4512
|
+
borderRadius: 4,
|
|
4513
|
+
padding: paddingValue
|
|
4514
|
+
};
|
|
4515
|
+
}
|
|
4516
|
+
function extractCaptionPadding(asset) {
|
|
4517
|
+
const padding = asset.padding;
|
|
4518
|
+
if (!padding) {
|
|
4519
|
+
return { top: 0, right: 0, bottom: 0, left: 0 };
|
|
4520
|
+
}
|
|
4521
|
+
if (typeof padding === "number") {
|
|
4522
|
+
return { top: padding, right: padding, bottom: padding, left: padding };
|
|
4523
|
+
}
|
|
4524
|
+
return {
|
|
4525
|
+
top: padding.top ?? 0,
|
|
4526
|
+
right: padding.right ?? 0,
|
|
4527
|
+
bottom: padding.bottom ?? 0,
|
|
4528
|
+
left: padding.left ?? 0
|
|
4529
|
+
};
|
|
4530
|
+
}
|
|
4531
|
+
function extractCaptionBackground(asset) {
|
|
4532
|
+
const bg = asset.background;
|
|
4533
|
+
if (!bg || !bg.color) {
|
|
4534
|
+
return void 0;
|
|
4535
|
+
}
|
|
4536
|
+
return {
|
|
4537
|
+
color: bg.color,
|
|
4538
|
+
opacity: bg.opacity ?? 1
|
|
4539
|
+
};
|
|
4540
|
+
}
|
|
4541
|
+
function extractAnimationConfig(asset) {
|
|
4542
|
+
const wordAnim = asset.wordAnimation;
|
|
4543
|
+
if (!wordAnim) {
|
|
4544
|
+
return getDefaultAnimationConfig();
|
|
4545
|
+
}
|
|
4546
|
+
return {
|
|
4547
|
+
style: wordAnim.style ?? "highlight",
|
|
4548
|
+
speed: wordAnim.speed ?? 1,
|
|
4549
|
+
direction: wordAnim.direction ?? "up"
|
|
4550
|
+
};
|
|
4551
|
+
}
|
|
4552
|
+
function extractActiveScale(asset) {
|
|
4553
|
+
return asset.active?.scale ?? 1;
|
|
4554
|
+
}
|
|
4555
|
+
function createDrawCaptionWordOp(word, animState, asset, fontConfig) {
|
|
4556
|
+
const isActive = animState.isActive;
|
|
4557
|
+
const displayText = animState.visibleCharacters >= 0 && animState.visibleCharacters < word.text.length ? word.text.slice(0, animState.visibleCharacters) : word.text;
|
|
4558
|
+
return {
|
|
4559
|
+
op: "DrawCaptionWord",
|
|
4560
|
+
text: displayText,
|
|
4561
|
+
x: word.x,
|
|
4562
|
+
y: word.y,
|
|
4563
|
+
width: word.width,
|
|
4564
|
+
fontSize: fontConfig.size,
|
|
4565
|
+
fontFamily: fontConfig.family,
|
|
4566
|
+
fontWeight: fontConfig.weight,
|
|
4567
|
+
baseColor: fontConfig.baseColor,
|
|
4568
|
+
activeColor: fontConfig.activeColor,
|
|
4569
|
+
baseOpacity: fontConfig.baseOpacity,
|
|
4570
|
+
activeOpacity: fontConfig.activeOpacity,
|
|
4571
|
+
fillProgress: animState.fillProgress,
|
|
4572
|
+
transform: {
|
|
4573
|
+
scale: animState.scale,
|
|
4574
|
+
translateX: animState.translateX,
|
|
4575
|
+
translateY: animState.translateY,
|
|
4576
|
+
opacity: animState.opacity
|
|
4577
|
+
},
|
|
4578
|
+
isRTL: word.isRTL,
|
|
4579
|
+
visibleCharacters: animState.visibleCharacters,
|
|
4580
|
+
letterSpacing: fontConfig.letterSpacing > 0 ? fontConfig.letterSpacing : void 0,
|
|
4581
|
+
stroke: extractStrokeConfig(asset, isActive),
|
|
4582
|
+
shadow: extractShadowConfig(asset),
|
|
4583
|
+
background: extractBackgroundConfig(asset, isActive)
|
|
4584
|
+
};
|
|
4585
|
+
}
|
|
4586
|
+
function generateRichCaptionDrawOps(asset, layout, frameTimeMs, layoutEngine, _config) {
|
|
4587
|
+
if (layout.store.length === 0) {
|
|
4588
|
+
return [];
|
|
4589
|
+
}
|
|
4590
|
+
const visibleWords = layoutEngine.getVisibleWordsAtTime(layout, frameTimeMs);
|
|
4591
|
+
if (visibleWords.length === 0) {
|
|
4592
|
+
return [];
|
|
4593
|
+
}
|
|
4594
|
+
const animConfig = extractAnimationConfig(asset);
|
|
4595
|
+
const activeScale = extractActiveScale(asset);
|
|
4596
|
+
const fontConfig = extractFontConfig(asset);
|
|
4597
|
+
const animationStates = calculateAnimationStatesForGroup(
|
|
4598
|
+
visibleWords,
|
|
4599
|
+
frameTimeMs,
|
|
4600
|
+
animConfig,
|
|
4601
|
+
activeScale,
|
|
4602
|
+
fontConfig.size
|
|
4603
|
+
);
|
|
4604
|
+
const ops = [];
|
|
4605
|
+
const captionBg = extractCaptionBackground(asset);
|
|
4606
|
+
if (captionBg) {
|
|
4607
|
+
const activeGroup = layout.groups.find(
|
|
4608
|
+
(g) => frameTimeMs >= g.startTime && frameTimeMs <= g.endTime
|
|
4609
|
+
);
|
|
4610
|
+
if (activeGroup && activeGroup.lines.length > 0) {
|
|
4611
|
+
const padding = extractCaptionPadding(asset);
|
|
4612
|
+
let minX = Infinity;
|
|
4613
|
+
let maxX = -Infinity;
|
|
4614
|
+
let minY = Infinity;
|
|
4615
|
+
let maxY = -Infinity;
|
|
4616
|
+
for (const line of activeGroup.lines) {
|
|
4617
|
+
const lineX = line.x;
|
|
4618
|
+
const lineRight = line.x + line.width;
|
|
4619
|
+
const lineY = line.y - line.height * 0.8;
|
|
4620
|
+
const lineBottom = line.y + line.height * 0.2;
|
|
4621
|
+
if (lineX < minX) minX = lineX;
|
|
4622
|
+
if (lineRight > maxX) maxX = lineRight;
|
|
4623
|
+
if (lineY < minY) minY = lineY;
|
|
4624
|
+
if (lineBottom > maxY) maxY = lineBottom;
|
|
4625
|
+
}
|
|
4626
|
+
ops.push({
|
|
4627
|
+
op: "DrawCaptionBackground",
|
|
4628
|
+
x: minX - padding.left,
|
|
4629
|
+
y: minY - padding.top,
|
|
4630
|
+
width: maxX - minX + padding.left + padding.right,
|
|
4631
|
+
height: maxY - minY + padding.top + padding.bottom,
|
|
4632
|
+
color: captionBg.color,
|
|
4633
|
+
opacity: captionBg.opacity,
|
|
4634
|
+
borderRadius: 8
|
|
4635
|
+
});
|
|
4636
|
+
}
|
|
4637
|
+
}
|
|
4638
|
+
for (const word of visibleWords) {
|
|
4639
|
+
const animState = animationStates.get(word.wordIndex);
|
|
4640
|
+
if (!animState) {
|
|
4641
|
+
continue;
|
|
4642
|
+
}
|
|
4643
|
+
if (animState.opacity <= 0) {
|
|
4644
|
+
continue;
|
|
4645
|
+
}
|
|
4646
|
+
const drawOp = createDrawCaptionWordOp(word, animState, asset, fontConfig);
|
|
4647
|
+
ops.push(drawOp);
|
|
4648
|
+
}
|
|
4649
|
+
return ops;
|
|
4650
|
+
}
|
|
4651
|
+
function generateRichCaptionFrame(asset, layout, frameTimeMs, layoutEngine, config) {
|
|
4652
|
+
const ops = generateRichCaptionDrawOps(
|
|
4653
|
+
asset,
|
|
4654
|
+
layout,
|
|
4655
|
+
frameTimeMs,
|
|
4656
|
+
layoutEngine,
|
|
4657
|
+
config
|
|
4658
|
+
);
|
|
4659
|
+
const activeWord = layoutEngine.getActiveWordAtTime(layout, frameTimeMs);
|
|
4660
|
+
return {
|
|
4661
|
+
ops,
|
|
4662
|
+
visibleWordCount: ops.length,
|
|
4663
|
+
activeWordIndex: activeWord?.wordIndex ?? -1
|
|
4664
|
+
};
|
|
4665
|
+
}
|
|
4666
|
+
function createDefaultGeneratorConfig(frameWidth = 1920, frameHeight = 1080, pixelRatio = 1) {
|
|
4667
|
+
return {
|
|
4668
|
+
frameWidth,
|
|
4669
|
+
frameHeight,
|
|
4670
|
+
pixelRatio
|
|
4671
|
+
};
|
|
4672
|
+
}
|
|
4673
|
+
function isDrawCaptionWordOp(op) {
|
|
4674
|
+
return op.op === "DrawCaptionWord";
|
|
4675
|
+
}
|
|
4676
|
+
function getDrawCaptionWordOps(ops) {
|
|
4677
|
+
return ops.filter(isDrawCaptionWordOp);
|
|
4678
|
+
}
|
|
4679
|
+
|
|
4680
|
+
// src/core/canvas-text-measurer.ts
|
|
4681
|
+
async function createCanvasTextMeasurer() {
|
|
4682
|
+
const canvasMod = await import("canvas");
|
|
4683
|
+
const canvas = canvasMod.createCanvas(1, 1);
|
|
4684
|
+
const ctx = canvas.getContext("2d");
|
|
4685
|
+
ctx.textBaseline = "alphabetic";
|
|
4686
|
+
let lastFont = "";
|
|
4687
|
+
return (text, font) => {
|
|
4688
|
+
if (font !== lastFont) {
|
|
4689
|
+
ctx.font = font;
|
|
4690
|
+
lastFont = font;
|
|
4691
|
+
}
|
|
4692
|
+
return ctx.measureText(text).width;
|
|
4693
|
+
};
|
|
4694
|
+
}
|
|
4695
|
+
|
|
4696
|
+
// src/core/subtitle-parser.ts
|
|
4697
|
+
function detectSubtitleFormat(content) {
|
|
4698
|
+
const firstNewline = content.indexOf("\n");
|
|
4699
|
+
const firstLine = (firstNewline === -1 ? content : content.substring(0, firstNewline)).trim();
|
|
4700
|
+
return firstLine.startsWith("WEBVTT") ? "vtt" : "srt";
|
|
4701
|
+
}
|
|
4702
|
+
function parseSubtitleToWords(content) {
|
|
4703
|
+
const normalized = normalizeContent(content);
|
|
4704
|
+
if (normalized.length === 0) {
|
|
4705
|
+
return [];
|
|
4706
|
+
}
|
|
4707
|
+
const format = detectSubtitleFormat(normalized);
|
|
4708
|
+
const cues = format === "vtt" ? parseVTTCues(normalized) : parseSRTCues(normalized);
|
|
4709
|
+
const words = [];
|
|
4710
|
+
for (let i = 0; i < cues.length; i++) {
|
|
4711
|
+
const cueWords = distributeCueToWords(cues[i]);
|
|
4712
|
+
for (let j = 0; j < cueWords.length; j++) {
|
|
4713
|
+
words.push(cueWords[j]);
|
|
4714
|
+
}
|
|
4715
|
+
}
|
|
4716
|
+
return words;
|
|
4717
|
+
}
|
|
4718
|
+
function normalizeContent(content) {
|
|
4719
|
+
let start = 0;
|
|
4720
|
+
if (content.charCodeAt(0) === 65279) {
|
|
4721
|
+
start = 1;
|
|
4722
|
+
}
|
|
4723
|
+
let result = start > 0 ? content.substring(start) : content;
|
|
4724
|
+
result = result.replace(/\r\n?/g, "\n");
|
|
4725
|
+
return result.trim();
|
|
4726
|
+
}
|
|
4727
|
+
function parseVTTCues(content) {
|
|
4728
|
+
const cues = [];
|
|
4729
|
+
let pos = 0;
|
|
4730
|
+
const len = content.length;
|
|
4731
|
+
const firstNewline = content.indexOf("\n", pos);
|
|
4732
|
+
if (firstNewline === -1) {
|
|
4733
|
+
return cues;
|
|
4734
|
+
}
|
|
4735
|
+
pos = firstNewline + 1;
|
|
4736
|
+
while (pos < len) {
|
|
4737
|
+
pos = skipWhitespaceAndNewlines(content, pos);
|
|
4738
|
+
if (pos >= len) break;
|
|
4739
|
+
const lineEnd = findLineEnd(content, pos);
|
|
4740
|
+
const line = content.substring(pos, lineEnd);
|
|
4741
|
+
if (line.startsWith("NOTE") || line.startsWith("STYLE") || line.startsWith("REGION")) {
|
|
4742
|
+
pos = skipBlock(content, lineEnd + 1);
|
|
4743
|
+
continue;
|
|
4744
|
+
}
|
|
4745
|
+
const arrowIdx = line.indexOf("-->");
|
|
4746
|
+
let timeLine;
|
|
4747
|
+
if (arrowIdx !== -1) {
|
|
4748
|
+
timeLine = line;
|
|
4749
|
+
pos = lineEnd + 1;
|
|
4750
|
+
} else {
|
|
4751
|
+
pos = lineEnd + 1;
|
|
4752
|
+
if (pos >= len) break;
|
|
4753
|
+
const nextLineEnd = findLineEnd(content, pos);
|
|
4754
|
+
const nextLine = content.substring(pos, nextLineEnd);
|
|
4755
|
+
if (nextLine.indexOf("-->") === -1) {
|
|
4756
|
+
pos = skipBlock(content, nextLineEnd + 1);
|
|
4757
|
+
continue;
|
|
4758
|
+
}
|
|
4759
|
+
timeLine = nextLine;
|
|
4760
|
+
pos = nextLineEnd + 1;
|
|
4761
|
+
}
|
|
4762
|
+
const timestamps = parseTimeLineVTT(timeLine);
|
|
4763
|
+
if (!timestamps) {
|
|
4764
|
+
pos = skipBlock(content, pos);
|
|
4765
|
+
continue;
|
|
4766
|
+
}
|
|
4767
|
+
let textLines = [];
|
|
4768
|
+
while (pos < len) {
|
|
4769
|
+
const tLineEnd = findLineEnd(content, pos);
|
|
4770
|
+
const tLine = content.substring(pos, tLineEnd);
|
|
4771
|
+
pos = tLineEnd + 1;
|
|
4772
|
+
if (tLine.length === 0) break;
|
|
4773
|
+
textLines.push(tLine);
|
|
4774
|
+
}
|
|
4775
|
+
if (textLines.length === 0) continue;
|
|
4776
|
+
const rawText = textLines.join(" ");
|
|
4777
|
+
const { cleanText, timestamps: inlineTs } = extractInlineTimestamps(rawText);
|
|
4778
|
+
const strippedText = stripMarkupTags(cleanText).trim();
|
|
4779
|
+
if (strippedText.length === 0) continue;
|
|
4780
|
+
if (timestamps.endMs <= timestamps.startMs) continue;
|
|
4781
|
+
cues.push({
|
|
4782
|
+
startMs: timestamps.startMs,
|
|
4783
|
+
endMs: timestamps.endMs,
|
|
4784
|
+
text: strippedText,
|
|
4785
|
+
inlineTimestamps: inlineTs
|
|
4786
|
+
});
|
|
4787
|
+
}
|
|
4788
|
+
return cues;
|
|
4789
|
+
}
|
|
4790
|
+
function parseSRTCues(content) {
|
|
4791
|
+
const cues = [];
|
|
4792
|
+
let pos = 0;
|
|
4793
|
+
const len = content.length;
|
|
4794
|
+
while (pos < len) {
|
|
4795
|
+
pos = skipWhitespaceAndNewlines(content, pos);
|
|
4796
|
+
if (pos >= len) break;
|
|
4797
|
+
let lineEnd = findLineEnd(content, pos);
|
|
4798
|
+
let line = content.substring(pos, lineEnd);
|
|
4799
|
+
pos = lineEnd + 1;
|
|
4800
|
+
if (line.indexOf("-->") === -1) {
|
|
4801
|
+
if (pos >= len) break;
|
|
4802
|
+
lineEnd = findLineEnd(content, pos);
|
|
4803
|
+
line = content.substring(pos, lineEnd);
|
|
4804
|
+
pos = lineEnd + 1;
|
|
4805
|
+
}
|
|
4806
|
+
if (line.indexOf("-->") === -1) {
|
|
4807
|
+
continue;
|
|
4808
|
+
}
|
|
4809
|
+
const timestamps = parseTimeLineSRT(line);
|
|
4810
|
+
if (!timestamps) continue;
|
|
4811
|
+
let textLines = [];
|
|
4812
|
+
while (pos < len) {
|
|
4813
|
+
const tLineEnd = findLineEnd(content, pos);
|
|
4814
|
+
const tLine = content.substring(pos, tLineEnd);
|
|
4815
|
+
pos = tLineEnd + 1;
|
|
4816
|
+
if (tLine.length === 0) break;
|
|
4817
|
+
textLines.push(tLine);
|
|
4818
|
+
}
|
|
4819
|
+
if (textLines.length === 0) continue;
|
|
4820
|
+
const rawText = textLines.join(" ");
|
|
4821
|
+
const strippedText = stripMarkupTags(rawText).trim();
|
|
4822
|
+
if (strippedText.length === 0) continue;
|
|
4823
|
+
if (timestamps.endMs <= timestamps.startMs) continue;
|
|
4824
|
+
cues.push({
|
|
4825
|
+
startMs: timestamps.startMs,
|
|
4826
|
+
endMs: timestamps.endMs,
|
|
4827
|
+
text: strippedText,
|
|
4828
|
+
inlineTimestamps: []
|
|
4829
|
+
});
|
|
4830
|
+
}
|
|
4831
|
+
return cues;
|
|
4832
|
+
}
|
|
4833
|
+
function parseTimeLineVTT(line) {
|
|
4834
|
+
const arrowIdx = line.indexOf("-->");
|
|
4835
|
+
if (arrowIdx === -1) return null;
|
|
4836
|
+
const startRaw = line.substring(0, arrowIdx).trim();
|
|
4837
|
+
const afterArrow = line.substring(arrowIdx + 3).trim();
|
|
4838
|
+
const spaceIdx = afterArrow.indexOf(" ");
|
|
4839
|
+
const endRaw = spaceIdx === -1 ? afterArrow : afterArrow.substring(0, spaceIdx);
|
|
4840
|
+
const startMs = parseTimestampVTT(startRaw);
|
|
4841
|
+
const endMs = parseTimestampVTT(endRaw);
|
|
4842
|
+
if (startMs < 0 || endMs < 0) return null;
|
|
4843
|
+
return { startMs, endMs };
|
|
4844
|
+
}
|
|
4845
|
+
function parseTimeLineSRT(line) {
|
|
4846
|
+
const arrowIdx = line.indexOf("-->");
|
|
4847
|
+
if (arrowIdx === -1) return null;
|
|
4848
|
+
const startRaw = line.substring(0, arrowIdx).trim();
|
|
4849
|
+
const endRaw = line.substring(arrowIdx + 3).trim();
|
|
4850
|
+
const startMs = parseTimestampSRT(startRaw);
|
|
4851
|
+
const endMs = parseTimestampSRT(endRaw);
|
|
4852
|
+
if (startMs < 0 || endMs < 0) return null;
|
|
4853
|
+
return { startMs, endMs };
|
|
4854
|
+
}
|
|
4855
|
+
function parseTimestampVTT(raw) {
|
|
4856
|
+
const dotIdx = raw.lastIndexOf(".");
|
|
4857
|
+
if (dotIdx === -1) return -1;
|
|
4858
|
+
const msStr = raw.substring(dotIdx + 1);
|
|
4859
|
+
const ms = parseIntFast(msStr);
|
|
4860
|
+
if (ms < 0) return -1;
|
|
4861
|
+
const beforeDot = raw.substring(0, dotIdx);
|
|
4862
|
+
const parts = beforeDot.split(":");
|
|
4863
|
+
if (parts.length === 2) {
|
|
4864
|
+
const minutes = parseIntFast(parts[0]);
|
|
4865
|
+
const seconds = parseIntFast(parts[1]);
|
|
4866
|
+
if (minutes < 0 || seconds < 0) return -1;
|
|
4867
|
+
return minutes * 6e4 + seconds * 1e3 + ms;
|
|
4868
|
+
}
|
|
4869
|
+
if (parts.length === 3) {
|
|
4870
|
+
const hours = parseIntFast(parts[0]);
|
|
4871
|
+
const minutes = parseIntFast(parts[1]);
|
|
4872
|
+
const seconds = parseIntFast(parts[2]);
|
|
4873
|
+
if (hours < 0 || minutes < 0 || seconds < 0) return -1;
|
|
4874
|
+
return hours * 36e5 + minutes * 6e4 + seconds * 1e3 + ms;
|
|
4875
|
+
}
|
|
4876
|
+
return -1;
|
|
4877
|
+
}
|
|
4878
|
+
function parseTimestampSRT(raw) {
|
|
4879
|
+
const commaIdx = raw.lastIndexOf(",");
|
|
4880
|
+
if (commaIdx === -1) return -1;
|
|
4881
|
+
const msStr = raw.substring(commaIdx + 1);
|
|
4882
|
+
const ms = parseIntFast(msStr);
|
|
4883
|
+
if (ms < 0) return -1;
|
|
4884
|
+
const beforeComma = raw.substring(0, commaIdx);
|
|
4885
|
+
const parts = beforeComma.split(":");
|
|
4886
|
+
if (parts.length !== 3) return -1;
|
|
4887
|
+
const hours = parseIntFast(parts[0]);
|
|
4888
|
+
const minutes = parseIntFast(parts[1]);
|
|
4889
|
+
const seconds = parseIntFast(parts[2]);
|
|
4890
|
+
if (hours < 0 || minutes < 0 || seconds < 0) return -1;
|
|
4891
|
+
return hours * 36e5 + minutes * 6e4 + seconds * 1e3 + ms;
|
|
4892
|
+
}
|
|
4893
|
+
function parseIntFast(str) {
|
|
4894
|
+
let result = 0;
|
|
4895
|
+
for (let i = 0; i < str.length; i++) {
|
|
4896
|
+
const code = str.charCodeAt(i);
|
|
4897
|
+
if (code < 48 || code > 57) return -1;
|
|
4898
|
+
result = result * 10 + (code - 48);
|
|
4899
|
+
}
|
|
4900
|
+
return result;
|
|
4901
|
+
}
|
|
4902
|
+
var MARKUP_TAG_REGEX = /<[^>]+>/g;
|
|
4903
|
+
function stripMarkupTags(text) {
|
|
4904
|
+
return text.replace(MARKUP_TAG_REGEX, "");
|
|
4905
|
+
}
|
|
4906
|
+
var INLINE_TIMESTAMP_REGEX = /<(\d{2}:)?(\d{2}):(\d{2}\.\d{3})>/g;
|
|
4907
|
+
function extractInlineTimestamps(text) {
|
|
4908
|
+
const timestamps = [];
|
|
4909
|
+
let cleanText = "";
|
|
4910
|
+
let lastIndex = 0;
|
|
4911
|
+
let match;
|
|
4912
|
+
INLINE_TIMESTAMP_REGEX.lastIndex = 0;
|
|
4913
|
+
while ((match = INLINE_TIMESTAMP_REGEX.exec(text)) !== null) {
|
|
4914
|
+
cleanText += text.substring(lastIndex, match.index);
|
|
4915
|
+
const position = cleanText.length;
|
|
4916
|
+
const hoursStr = match[1] ? match[1].substring(0, match[1].length - 1) : "00";
|
|
4917
|
+
const minutesStr = match[2];
|
|
4918
|
+
const secondsAndMs = match[3];
|
|
4919
|
+
const dotIdx = secondsAndMs.indexOf(".");
|
|
4920
|
+
const secondsStr = secondsAndMs.substring(0, dotIdx);
|
|
4921
|
+
const msStr = secondsAndMs.substring(dotIdx + 1);
|
|
4922
|
+
const hours = parseIntFast(hoursStr);
|
|
4923
|
+
const minutes = parseIntFast(minutesStr);
|
|
4924
|
+
const seconds = parseIntFast(secondsStr);
|
|
4925
|
+
const ms = parseIntFast(msStr);
|
|
4926
|
+
if (hours >= 0 && minutes >= 0 && seconds >= 0 && ms >= 0) {
|
|
4927
|
+
const timeMs = hours * 36e5 + minutes * 6e4 + seconds * 1e3 + ms;
|
|
4928
|
+
timestamps.push({ timeMs, position });
|
|
4929
|
+
}
|
|
4930
|
+
lastIndex = match.index + match[0].length;
|
|
4931
|
+
}
|
|
4932
|
+
cleanText += text.substring(lastIndex);
|
|
4933
|
+
return { cleanText, timestamps };
|
|
4934
|
+
}
|
|
4935
|
+
function distributeCueToWords(cue) {
|
|
4936
|
+
const wordTexts = cue.text.split(/\s+/).filter((w) => w.length > 0);
|
|
4937
|
+
if (wordTexts.length === 0) return [];
|
|
4938
|
+
if (wordTexts.length === 1) {
|
|
4939
|
+
return [{ text: wordTexts[0], start: cue.startMs, end: cue.endMs }];
|
|
4940
|
+
}
|
|
4941
|
+
if (cue.inlineTimestamps.length > 0) {
|
|
4942
|
+
return distributeWithInlineTimestamps(wordTexts, cue);
|
|
4943
|
+
}
|
|
4944
|
+
return distributeByCharacterProportion(wordTexts, cue.startMs, cue.endMs);
|
|
4945
|
+
}
|
|
4946
|
+
function distributeWithInlineTimestamps(wordTexts, cue) {
|
|
4947
|
+
const wordPositions = [];
|
|
4948
|
+
let charPos = 0;
|
|
4949
|
+
for (let i = 0; i < wordTexts.length; i++) {
|
|
4950
|
+
wordPositions.push(charPos);
|
|
4951
|
+
charPos += wordTexts[i].length + 1;
|
|
4952
|
+
}
|
|
4953
|
+
const sortedTimestamps = [...cue.inlineTimestamps].sort((a, b) => a.position - b.position);
|
|
4954
|
+
const wordStartTimes = new Array(wordTexts.length);
|
|
4955
|
+
wordStartTimes[0] = cue.startMs;
|
|
4956
|
+
for (let i = 1; i < wordTexts.length; i++) {
|
|
4957
|
+
const wp = wordPositions[i];
|
|
4958
|
+
let bestTs = -1;
|
|
4959
|
+
for (let t = 0; t < sortedTimestamps.length; t++) {
|
|
4960
|
+
if (sortedTimestamps[t].position <= wp) {
|
|
4961
|
+
bestTs = t;
|
|
4962
|
+
}
|
|
4963
|
+
}
|
|
4964
|
+
if (bestTs >= 0) {
|
|
4965
|
+
wordStartTimes[i] = sortedTimestamps[bestTs].timeMs;
|
|
4966
|
+
} else {
|
|
4967
|
+
wordStartTimes[i] = wordStartTimes[i - 1];
|
|
4968
|
+
}
|
|
4969
|
+
}
|
|
4970
|
+
const words = [];
|
|
4971
|
+
for (let i = 0; i < wordTexts.length; i++) {
|
|
4972
|
+
const start = wordStartTimes[i];
|
|
4973
|
+
const end = i < wordTexts.length - 1 ? wordStartTimes[i + 1] : cue.endMs;
|
|
4974
|
+
words.push({ text: wordTexts[i], start, end: Math.max(end, start) });
|
|
4975
|
+
}
|
|
4976
|
+
return words;
|
|
4977
|
+
}
|
|
4978
|
+
function distributeByCharacterProportion(wordTexts, startMs, endMs) {
|
|
4979
|
+
const totalChars = wordTexts.reduce((sum, w) => sum + w.length, 0);
|
|
4980
|
+
const duration = endMs - startMs;
|
|
4981
|
+
const words = [];
|
|
4982
|
+
let cursor = startMs;
|
|
4983
|
+
for (let i = 0; i < wordTexts.length; i++) {
|
|
4984
|
+
const wordStart = cursor;
|
|
4985
|
+
if (i === wordTexts.length - 1) {
|
|
4986
|
+
words.push({ text: wordTexts[i], start: wordStart, end: endMs });
|
|
4987
|
+
} else {
|
|
4988
|
+
const proportion = wordTexts[i].length / totalChars;
|
|
4989
|
+
const wordDuration = Math.round(proportion * duration);
|
|
4990
|
+
cursor = wordStart + wordDuration;
|
|
4991
|
+
words.push({ text: wordTexts[i], start: wordStart, end: cursor });
|
|
4992
|
+
}
|
|
4993
|
+
}
|
|
4994
|
+
return words;
|
|
4995
|
+
}
|
|
4996
|
+
function findLineEnd(content, pos) {
|
|
4997
|
+
const idx = content.indexOf("\n", pos);
|
|
4998
|
+
return idx === -1 ? content.length : idx;
|
|
4999
|
+
}
|
|
5000
|
+
function skipWhitespaceAndNewlines(content, pos) {
|
|
5001
|
+
while (pos < content.length) {
|
|
5002
|
+
const ch = content.charCodeAt(pos);
|
|
5003
|
+
if (ch === 10 || ch === 13 || ch === 32 || ch === 9) {
|
|
5004
|
+
pos++;
|
|
5005
|
+
} else {
|
|
5006
|
+
break;
|
|
5007
|
+
}
|
|
5008
|
+
}
|
|
5009
|
+
return pos;
|
|
5010
|
+
}
|
|
5011
|
+
function skipBlock(content, pos) {
|
|
5012
|
+
while (pos < content.length) {
|
|
5013
|
+
const lineEnd = findLineEnd(content, pos);
|
|
5014
|
+
const line = content.substring(pos, lineEnd);
|
|
5015
|
+
pos = lineEnd + 1;
|
|
5016
|
+
if (line.length === 0) break;
|
|
5017
|
+
}
|
|
5018
|
+
return pos;
|
|
5019
|
+
}
|
|
5020
|
+
|
|
5021
|
+
// src/core/video/frame-scheduler.ts
|
|
5022
|
+
var PER_FRAME_ANIMATION_STYLES = /* @__PURE__ */ new Set([
|
|
5023
|
+
"karaoke",
|
|
5024
|
+
"typewriter"
|
|
5025
|
+
]);
|
|
5026
|
+
var TRANSITION_ANIMATION_STYLES = /* @__PURE__ */ new Set([
|
|
5027
|
+
"pop",
|
|
5028
|
+
"fade",
|
|
5029
|
+
"slide",
|
|
5030
|
+
"bounce"
|
|
5031
|
+
]);
|
|
5032
|
+
var ANIMATION_DURATION_MS = {
|
|
5033
|
+
pop: 200,
|
|
5034
|
+
fade: 150,
|
|
5035
|
+
slide: 250,
|
|
5036
|
+
bounce: 400
|
|
5037
|
+
};
|
|
5038
|
+
function findGroupIndexAtTime(groups, timeMs) {
|
|
5039
|
+
for (let i = 0; i < groups.length; i++) {
|
|
5040
|
+
if (timeMs >= groups[i].startTime && timeMs <= groups[i].endTime) {
|
|
5041
|
+
return i;
|
|
5042
|
+
}
|
|
5043
|
+
}
|
|
5044
|
+
return -1;
|
|
5045
|
+
}
|
|
5046
|
+
function findActiveWordIndex(store, groupWordIndices, timeMs) {
|
|
5047
|
+
for (const idx of groupWordIndices) {
|
|
5048
|
+
if (timeMs >= store.startTimes[idx] && timeMs < store.endTimes[idx]) {
|
|
5049
|
+
return idx;
|
|
5050
|
+
}
|
|
5051
|
+
}
|
|
5052
|
+
return -1;
|
|
5053
|
+
}
|
|
5054
|
+
function getAnimationPhase(store, groupWordIndices, timeMs, animationStyle, speed) {
|
|
5055
|
+
if (groupWordIndices.length === 0) {
|
|
5056
|
+
return "idle";
|
|
5057
|
+
}
|
|
5058
|
+
const activeWordIdx = findActiveWordIndex(store, groupWordIndices, timeMs);
|
|
5059
|
+
if (PER_FRAME_ANIMATION_STYLES.has(animationStyle)) {
|
|
5060
|
+
if (activeWordIdx !== -1) {
|
|
5061
|
+
return "animating";
|
|
5062
|
+
}
|
|
5063
|
+
for (const idx of groupWordIndices) {
|
|
5064
|
+
if (timeMs < store.startTimes[idx]) {
|
|
5065
|
+
return "before";
|
|
5066
|
+
}
|
|
5067
|
+
}
|
|
5068
|
+
return "after";
|
|
5069
|
+
}
|
|
5070
|
+
if (TRANSITION_ANIMATION_STYLES.has(animationStyle)) {
|
|
5071
|
+
const transitionDurationMs = (ANIMATION_DURATION_MS[animationStyle] ?? 200) / speed;
|
|
5072
|
+
for (const idx of groupWordIndices) {
|
|
5073
|
+
const wordStart = store.startTimes[idx];
|
|
5074
|
+
if (timeMs >= wordStart && timeMs < wordStart + transitionDurationMs) {
|
|
5075
|
+
return "animating";
|
|
5076
|
+
}
|
|
5077
|
+
}
|
|
5078
|
+
if (activeWordIdx !== -1) {
|
|
5079
|
+
return "active";
|
|
5080
|
+
}
|
|
5081
|
+
for (const idx of groupWordIndices) {
|
|
5082
|
+
if (timeMs < store.startTimes[idx]) {
|
|
5083
|
+
return "before";
|
|
5084
|
+
}
|
|
5085
|
+
}
|
|
5086
|
+
return "after";
|
|
5087
|
+
}
|
|
5088
|
+
if (activeWordIdx !== -1) {
|
|
5089
|
+
return "active";
|
|
5090
|
+
}
|
|
5091
|
+
return "before";
|
|
5092
|
+
}
|
|
5093
|
+
function computeStateSignature(layout, timeMs, animationStyle, speed) {
|
|
5094
|
+
const groupIndex = findGroupIndexAtTime(layout.groups, timeMs);
|
|
5095
|
+
if (groupIndex === -1) {
|
|
5096
|
+
return { groupIndex: -1, activeWordIndex: -1, animationPhase: "idle" };
|
|
5097
|
+
}
|
|
5098
|
+
const group = layout.groups[groupIndex];
|
|
5099
|
+
const activeWordIndex = findActiveWordIndex(layout.store, group.wordIndices, timeMs);
|
|
5100
|
+
const animationPhase = getAnimationPhase(
|
|
5101
|
+
layout.store,
|
|
5102
|
+
group.wordIndices,
|
|
5103
|
+
timeMs,
|
|
5104
|
+
animationStyle,
|
|
5105
|
+
speed
|
|
5106
|
+
);
|
|
5107
|
+
return { groupIndex, activeWordIndex, animationPhase };
|
|
5108
|
+
}
|
|
5109
|
+
function signaturesMatch(a, b) {
|
|
5110
|
+
return a.groupIndex === b.groupIndex && a.activeWordIndex === b.activeWordIndex && a.animationPhase === b.animationPhase;
|
|
5111
|
+
}
|
|
5112
|
+
function createFrameSchedule(layout, durationMs, fps, animationStyle = "highlight", speed = 1) {
|
|
5113
|
+
const totalFrames = Math.max(2, Math.round(durationMs / 1e3 * fps) + 1);
|
|
5114
|
+
const renderFrames = [];
|
|
5115
|
+
let previousSignature = null;
|
|
5116
|
+
for (let frame = 0; frame < totalFrames; frame++) {
|
|
5117
|
+
const timeMs = frame / (totalFrames - 1) * durationMs;
|
|
5118
|
+
const signature = computeStateSignature(layout, timeMs, animationStyle, speed);
|
|
5119
|
+
const isAnimating = signature.animationPhase === "animating";
|
|
5120
|
+
if (isAnimating || previousSignature === null || !signaturesMatch(signature, previousSignature)) {
|
|
5121
|
+
renderFrames.push({
|
|
5122
|
+
frameIndex: frame,
|
|
5123
|
+
repeatCount: 1,
|
|
5124
|
+
timeMs
|
|
5125
|
+
});
|
|
5126
|
+
} else {
|
|
5127
|
+
renderFrames[renderFrames.length - 1].repeatCount++;
|
|
5128
|
+
}
|
|
5129
|
+
previousSignature = signature;
|
|
5130
|
+
}
|
|
5131
|
+
const uniqueFrameCount = renderFrames.length;
|
|
5132
|
+
const skipRatio = 1 - uniqueFrameCount / totalFrames;
|
|
5133
|
+
return {
|
|
5134
|
+
renderFrames,
|
|
5135
|
+
totalFrames,
|
|
5136
|
+
uniqueFrameCount,
|
|
5137
|
+
skipRatio
|
|
5138
|
+
};
|
|
5139
|
+
}
|
|
5140
|
+
|
|
5141
|
+
// src/core/video/node-raw-encoder.ts
|
|
5142
|
+
import { spawn as spawn2 } from "child_process";
|
|
5143
|
+
import fs2 from "fs";
|
|
5144
|
+
var NodeRawEncoder = class _NodeRawEncoder {
|
|
5145
|
+
ffmpegPath = null;
|
|
5146
|
+
ffmpegProcess = null;
|
|
5147
|
+
config = null;
|
|
5148
|
+
outputPath = "";
|
|
5149
|
+
frameCount = 0;
|
|
5150
|
+
totalFrames = 0;
|
|
5151
|
+
startTime = 0;
|
|
5152
|
+
chunks = [];
|
|
5153
|
+
outputToMemory = false;
|
|
5154
|
+
ffmpegError = null;
|
|
5155
|
+
static DRAIN_TIMEOUT_MS = 3e4;
|
|
5156
|
+
onProgress;
|
|
5157
|
+
trySetPath(p) {
|
|
5158
|
+
if (p && fs2.existsSync(p)) {
|
|
5159
|
+
this.ffmpegPath = p;
|
|
5160
|
+
return true;
|
|
5161
|
+
}
|
|
5162
|
+
return false;
|
|
5163
|
+
}
|
|
5164
|
+
async initFFmpeg(ffmpegPath) {
|
|
5165
|
+
if (this.trySetPath(ffmpegPath)) return;
|
|
5166
|
+
if (this.trySetPath(process.env.FFMPEG_PATH)) return;
|
|
5167
|
+
if (this.trySetPath(process.env.FFMPEG_BIN)) return;
|
|
5168
|
+
if (this.trySetPath("/opt/bin/ffmpeg")) return;
|
|
5169
|
+
try {
|
|
5170
|
+
const ffmpegStatic = await import("ffmpeg-static");
|
|
5171
|
+
const p = ffmpegStatic.default;
|
|
5172
|
+
if (this.trySetPath(p)) return;
|
|
5173
|
+
} catch {
|
|
5174
|
+
}
|
|
5175
|
+
throw new Error("FFmpeg not available. Please install ffmpeg-static or provide FFMPEG_PATH.");
|
|
5176
|
+
}
|
|
5177
|
+
async configure(config, options) {
|
|
5178
|
+
this.config = config;
|
|
5179
|
+
this.outputPath = options?.outputPath || "";
|
|
5180
|
+
this.outputToMemory = !this.outputPath;
|
|
5181
|
+
this.totalFrames = Math.max(2, Math.round(config.duration * config.fps) + 1);
|
|
5182
|
+
this.frameCount = 0;
|
|
5183
|
+
this.startTime = Date.now();
|
|
5184
|
+
this.chunks = [];
|
|
5185
|
+
this.ffmpegError = null;
|
|
5186
|
+
await this.initFFmpeg(options?.ffmpegPath);
|
|
5187
|
+
const {
|
|
5188
|
+
width,
|
|
5189
|
+
height,
|
|
5190
|
+
fps,
|
|
5191
|
+
crf = 17,
|
|
5192
|
+
preset = "ultrafast",
|
|
5193
|
+
profile = "high"
|
|
5194
|
+
} = config;
|
|
5195
|
+
const args = [
|
|
5196
|
+
"-y",
|
|
5197
|
+
"-f",
|
|
5198
|
+
"rawvideo",
|
|
5199
|
+
"-pix_fmt",
|
|
5200
|
+
"rgba",
|
|
5201
|
+
"-s",
|
|
5202
|
+
`${width}x${height}`,
|
|
5203
|
+
"-r",
|
|
5204
|
+
String(fps),
|
|
5205
|
+
"-thread_queue_size",
|
|
5206
|
+
"512",
|
|
5207
|
+
"-i",
|
|
5208
|
+
"pipe:0",
|
|
5209
|
+
"-c:v",
|
|
5210
|
+
"libx264",
|
|
5211
|
+
"-preset",
|
|
5212
|
+
preset,
|
|
5213
|
+
"-tune",
|
|
5214
|
+
"stillimage",
|
|
5215
|
+
"-crf",
|
|
5216
|
+
String(crf),
|
|
5217
|
+
"-profile:v",
|
|
5218
|
+
profile,
|
|
5219
|
+
"-g",
|
|
5220
|
+
"300",
|
|
5221
|
+
"-bf",
|
|
5222
|
+
"2",
|
|
5223
|
+
"-threads",
|
|
5224
|
+
"0",
|
|
5225
|
+
"-pix_fmt",
|
|
5226
|
+
"yuv420p",
|
|
5227
|
+
"-r",
|
|
5228
|
+
String(fps),
|
|
5229
|
+
"-movflags",
|
|
5230
|
+
"+faststart"
|
|
5231
|
+
];
|
|
5232
|
+
if (this.outputToMemory) {
|
|
5233
|
+
args.push("-f", "mp4", "pipe:1");
|
|
5234
|
+
} else {
|
|
5235
|
+
args.push(this.outputPath);
|
|
5236
|
+
}
|
|
5237
|
+
this.ffmpegProcess = spawn2(this.ffmpegPath, args, {
|
|
5238
|
+
stdio: ["pipe", this.outputToMemory ? "pipe" : "inherit", "pipe"]
|
|
5239
|
+
});
|
|
5240
|
+
if (this.outputToMemory && this.ffmpegProcess.stdout) {
|
|
5241
|
+
this.ffmpegProcess.stdout.on("data", (chunk) => {
|
|
5242
|
+
this.chunks.push(chunk);
|
|
5243
|
+
});
|
|
5244
|
+
}
|
|
5245
|
+
this.ffmpegProcess.on("error", (err) => {
|
|
5246
|
+
this.ffmpegError = err;
|
|
5247
|
+
});
|
|
5248
|
+
this.ffmpegProcess.stderr?.on("data", () => {
|
|
5249
|
+
});
|
|
5250
|
+
}
|
|
5251
|
+
async encodeFrame(frameData, _frameIndex) {
|
|
5252
|
+
if (this.ffmpegError) {
|
|
5253
|
+
throw this.ffmpegError;
|
|
5254
|
+
}
|
|
5255
|
+
if (!this.ffmpegProcess || !this.ffmpegProcess.stdin) {
|
|
5256
|
+
throw new Error("FFmpeg process not initialized. Call configure() first.");
|
|
5257
|
+
}
|
|
5258
|
+
const buffer = this.toBuffer(frameData);
|
|
5259
|
+
const ok = this.ffmpegProcess.stdin.write(buffer);
|
|
5260
|
+
if (!ok) {
|
|
5261
|
+
await this.waitForDrain();
|
|
5262
|
+
}
|
|
5263
|
+
this.frameCount++;
|
|
5264
|
+
this.reportProgress();
|
|
5265
|
+
}
|
|
5266
|
+
async encodeFrameRepeat(frameData, repeatCount) {
|
|
5267
|
+
if (this.ffmpegError) {
|
|
5268
|
+
throw this.ffmpegError;
|
|
5269
|
+
}
|
|
5270
|
+
if (!this.ffmpegProcess || !this.ffmpegProcess.stdin) {
|
|
5271
|
+
throw new Error("FFmpeg process not initialized. Call configure() first.");
|
|
5272
|
+
}
|
|
5273
|
+
const buffer = this.toBuffer(frameData);
|
|
5274
|
+
for (let i = 0; i < repeatCount; i++) {
|
|
5275
|
+
const ok = this.ffmpegProcess.stdin.write(buffer);
|
|
5276
|
+
if (!ok) {
|
|
5277
|
+
await this.waitForDrain();
|
|
5278
|
+
}
|
|
5279
|
+
this.frameCount++;
|
|
5280
|
+
}
|
|
5281
|
+
this.reportProgress();
|
|
5282
|
+
}
|
|
5283
|
+
async flush() {
|
|
5284
|
+
if (!this.ffmpegProcess) {
|
|
5285
|
+
throw new Error("FFmpeg process not initialized.");
|
|
5286
|
+
}
|
|
5287
|
+
return new Promise((resolve, reject) => {
|
|
5288
|
+
this.ffmpegProcess.on("close", (code) => {
|
|
5289
|
+
if (code === 0) {
|
|
5290
|
+
if (this.outputToMemory) {
|
|
5291
|
+
const result = Buffer.concat(this.chunks);
|
|
5292
|
+
resolve(new Uint8Array(result));
|
|
5293
|
+
} else {
|
|
5294
|
+
const fileBuffer = fs2.readFileSync(this.outputPath);
|
|
5295
|
+
resolve(new Uint8Array(fileBuffer));
|
|
5296
|
+
}
|
|
5297
|
+
} else {
|
|
5298
|
+
reject(new Error(`FFmpeg exited with code ${code}`));
|
|
5299
|
+
}
|
|
5300
|
+
});
|
|
5301
|
+
this.ffmpegProcess.on("error", (err) => {
|
|
5302
|
+
reject(err);
|
|
5303
|
+
});
|
|
5304
|
+
this.ffmpegProcess.stdin?.end();
|
|
5305
|
+
});
|
|
5306
|
+
}
|
|
5307
|
+
close() {
|
|
5308
|
+
if (this.ffmpegProcess) {
|
|
5309
|
+
this.ffmpegProcess.kill("SIGTERM");
|
|
5310
|
+
this.ffmpegProcess = null;
|
|
5311
|
+
}
|
|
5312
|
+
this.chunks = [];
|
|
5313
|
+
}
|
|
5314
|
+
waitForDrain() {
|
|
5315
|
+
return new Promise((resolve, reject) => {
|
|
5316
|
+
const timer = setTimeout(() => {
|
|
5317
|
+
reject(new Error("FFmpeg stdin drain timeout"));
|
|
5318
|
+
}, _NodeRawEncoder.DRAIN_TIMEOUT_MS);
|
|
5319
|
+
const onError = (err) => {
|
|
5320
|
+
clearTimeout(timer);
|
|
5321
|
+
reject(err);
|
|
5322
|
+
};
|
|
5323
|
+
this.ffmpegProcess.once("error", onError);
|
|
5324
|
+
this.ffmpegProcess.stdin.once("drain", () => {
|
|
5325
|
+
clearTimeout(timer);
|
|
5326
|
+
this.ffmpegProcess?.removeListener("error", onError);
|
|
5327
|
+
resolve();
|
|
5328
|
+
});
|
|
5329
|
+
});
|
|
5330
|
+
}
|
|
5331
|
+
toBuffer(frameData) {
|
|
5332
|
+
if (frameData instanceof ArrayBuffer) {
|
|
5333
|
+
return Buffer.from(frameData);
|
|
5334
|
+
}
|
|
5335
|
+
return Buffer.from(frameData.buffer, frameData.byteOffset, frameData.byteLength);
|
|
5336
|
+
}
|
|
5337
|
+
reportProgress() {
|
|
5338
|
+
if (!this.onProgress) return;
|
|
5339
|
+
const elapsedMs = Date.now() - this.startTime;
|
|
5340
|
+
if (elapsedMs === 0) return;
|
|
5341
|
+
const framesPerSecond = this.frameCount / (elapsedMs / 1e3);
|
|
5342
|
+
const remainingFrames = this.totalFrames - this.frameCount;
|
|
5343
|
+
const estimatedRemainingMs = remainingFrames / framesPerSecond * 1e3;
|
|
5344
|
+
this.onProgress({
|
|
5345
|
+
framesEncoded: this.frameCount,
|
|
5346
|
+
totalFrames: this.totalFrames,
|
|
5347
|
+
percentage: this.frameCount / this.totalFrames * 100,
|
|
5348
|
+
elapsedMs,
|
|
5349
|
+
estimatedRemainingMs: Math.round(estimatedRemainingMs),
|
|
5350
|
+
currentFps: Math.round(framesPerSecond * 10) / 10
|
|
5351
|
+
});
|
|
5352
|
+
}
|
|
5353
|
+
};
|
|
5354
|
+
async function createNodeRawEncoder(config, options) {
|
|
5355
|
+
const encoder = new NodeRawEncoder();
|
|
5356
|
+
await encoder.configure(config, options);
|
|
5357
|
+
return encoder;
|
|
5358
|
+
}
|
|
5359
|
+
|
|
5360
|
+
// src/core/rich-caption-renderer.ts
|
|
5361
|
+
var ROBOTO_FONT_URLS = {
|
|
5362
|
+
"100": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbGmT.ttf",
|
|
5363
|
+
"300": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuaabWmT.ttf",
|
|
5364
|
+
"400": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbWmT.ttf",
|
|
5365
|
+
"500": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWub2bWmT.ttf",
|
|
5366
|
+
"600": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuYaammT.ttf",
|
|
5367
|
+
"700": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuYjammT.ttf",
|
|
5368
|
+
"800": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuZEammT.ttf",
|
|
5369
|
+
"900": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuZtammT.ttf"
|
|
5370
|
+
};
|
|
5371
|
+
var RichCaptionRenderer = class {
|
|
5372
|
+
width;
|
|
5373
|
+
height;
|
|
5374
|
+
pixelRatio;
|
|
5375
|
+
fps;
|
|
5376
|
+
wasmBaseURL;
|
|
5377
|
+
fetchFile;
|
|
5378
|
+
fontRegistry = null;
|
|
5379
|
+
layoutEngine = null;
|
|
5380
|
+
currentAsset = null;
|
|
5381
|
+
currentLayout = null;
|
|
5382
|
+
generatorConfig;
|
|
5383
|
+
frameCount = 0;
|
|
5384
|
+
totalRenderTimeMs = 0;
|
|
5385
|
+
peakMemoryMB = 0;
|
|
5386
|
+
lastMemoryCheckFrame = 0;
|
|
5387
|
+
constructor(options) {
|
|
5388
|
+
this.width = options.width;
|
|
5389
|
+
this.height = options.height;
|
|
5390
|
+
this.pixelRatio = options.pixelRatio ?? 1;
|
|
5391
|
+
this.fps = options.fps ?? 30;
|
|
5392
|
+
this.wasmBaseURL = options.wasmBaseURL;
|
|
5393
|
+
this.fetchFile = options.fetchFile ?? loadFileOrHttpToArrayBuffer;
|
|
5394
|
+
this.generatorConfig = createDefaultGeneratorConfig(this.width, this.height, this.pixelRatio);
|
|
5395
|
+
}
|
|
5396
|
+
async initialize() {
|
|
5397
|
+
this.fontRegistry = await FontRegistry.getSharedInstance(this.wasmBaseURL);
|
|
5398
|
+
this.layoutEngine = new CaptionLayoutEngine(this.fontRegistry);
|
|
5399
|
+
const weightsToLoad = Object.keys(ROBOTO_FONT_URLS);
|
|
5400
|
+
const loadPromises = weightsToLoad.map(async (weight) => {
|
|
5401
|
+
const existingFace = await this.fontRegistry.getFace({ family: "Roboto", weight });
|
|
5402
|
+
if (!existingFace) {
|
|
5403
|
+
const bytes = await loadFileOrHttpToArrayBuffer(ROBOTO_FONT_URLS[weight]);
|
|
5404
|
+
await this.fontRegistry.registerFromBytes(bytes, { family: "Roboto", weight });
|
|
5405
|
+
}
|
|
5406
|
+
});
|
|
5407
|
+
await Promise.all(loadPromises);
|
|
5408
|
+
}
|
|
5409
|
+
async registerFont(source, desc) {
|
|
5410
|
+
if (!this.fontRegistry) {
|
|
5411
|
+
throw new Error("Renderer not initialized. Call initialize() first.");
|
|
5412
|
+
}
|
|
5413
|
+
const bytes = await loadFileOrHttpToArrayBuffer(source);
|
|
5414
|
+
await this.fontRegistry.registerFromBytes(bytes, desc);
|
|
5415
|
+
}
|
|
5416
|
+
async loadAsset(asset) {
|
|
5417
|
+
if (!this.layoutEngine || !this.fontRegistry) {
|
|
5418
|
+
throw new Error("Renderer not initialized. Call initialize() first.");
|
|
5419
|
+
}
|
|
5420
|
+
this.currentAsset = asset;
|
|
5421
|
+
let words;
|
|
5422
|
+
if (asset.src) {
|
|
5423
|
+
const bytes = await this.fetchFile(asset.src);
|
|
5424
|
+
const text = new TextDecoder().decode(bytes);
|
|
5425
|
+
words = parseSubtitleToWords(text);
|
|
5426
|
+
} else {
|
|
5427
|
+
words = (asset.words ?? []).map((w) => ({
|
|
5428
|
+
text: w.text,
|
|
5429
|
+
start: w.start,
|
|
5430
|
+
end: w.end,
|
|
5431
|
+
confidence: w.confidence
|
|
5432
|
+
}));
|
|
5433
|
+
}
|
|
5434
|
+
if (words.length === 0) {
|
|
5435
|
+
this.currentLayout = null;
|
|
5436
|
+
return;
|
|
5437
|
+
}
|
|
5438
|
+
const font = asset.font;
|
|
5439
|
+
const style = asset.style;
|
|
5440
|
+
const measureTextWidth = await createCanvasTextMeasurer();
|
|
5441
|
+
const layoutConfig = {
|
|
5442
|
+
frameWidth: this.width,
|
|
5443
|
+
frameHeight: this.height,
|
|
5444
|
+
maxWidth: asset.maxWidth ?? 0.9,
|
|
5445
|
+
maxLines: asset.maxLines ?? 2,
|
|
5446
|
+
position: asset.position ?? "bottom",
|
|
5447
|
+
fontSize: font?.size ?? 24,
|
|
5448
|
+
fontFamily: font?.family ?? "Roboto",
|
|
5449
|
+
fontWeight: String(font?.weight ?? "400"),
|
|
5450
|
+
letterSpacing: style?.letterSpacing ?? 0,
|
|
5451
|
+
wordSpacing: typeof style?.wordSpacing === "number" ? style.wordSpacing : 0,
|
|
5452
|
+
lineHeight: style?.lineHeight ?? 1.2,
|
|
5453
|
+
textTransform: style?.textTransform ?? "none",
|
|
5454
|
+
pauseThreshold: 500,
|
|
5455
|
+
measureTextWidth
|
|
5456
|
+
};
|
|
5457
|
+
this.currentLayout = await this.layoutEngine.layoutCaption(words, layoutConfig);
|
|
5458
|
+
}
|
|
5459
|
+
renderFrame(timeMs) {
|
|
5460
|
+
if (!this.currentAsset || !this.currentLayout || !this.layoutEngine) {
|
|
5461
|
+
return [];
|
|
5462
|
+
}
|
|
5463
|
+
const startTime = performance.now();
|
|
5464
|
+
const ops = generateRichCaptionDrawOps(
|
|
5465
|
+
this.currentAsset,
|
|
5466
|
+
this.currentLayout,
|
|
5467
|
+
timeMs,
|
|
5468
|
+
this.layoutEngine,
|
|
5469
|
+
this.generatorConfig
|
|
5470
|
+
);
|
|
5471
|
+
const endTime = performance.now();
|
|
5472
|
+
this.totalRenderTimeMs += endTime - startTime;
|
|
5473
|
+
this.frameCount++;
|
|
5474
|
+
if (this.frameCount - this.lastMemoryCheckFrame >= 1e3) {
|
|
5475
|
+
this.checkMemoryUsage();
|
|
5476
|
+
this.lastMemoryCheckFrame = this.frameCount;
|
|
5477
|
+
}
|
|
5478
|
+
return ops;
|
|
5479
|
+
}
|
|
5480
|
+
async generateVideo(outputPath, duration, options) {
|
|
5481
|
+
if (!this.currentAsset || !this.currentLayout) {
|
|
5482
|
+
throw new Error("No asset loaded. Call loadAsset() first.");
|
|
5483
|
+
}
|
|
5484
|
+
const animationStyle = this.extractAnimationStyle();
|
|
5485
|
+
const animationSpeed = this.extractAnimationSpeed();
|
|
5486
|
+
const durationMs = duration * 1e3;
|
|
5487
|
+
const schedule = createFrameSchedule(
|
|
5488
|
+
this.currentLayout,
|
|
5489
|
+
durationMs,
|
|
5490
|
+
this.fps,
|
|
5491
|
+
animationStyle,
|
|
5492
|
+
animationSpeed
|
|
5493
|
+
);
|
|
5494
|
+
const encoder = new NodeRawEncoder();
|
|
5495
|
+
await encoder.configure(
|
|
5496
|
+
{
|
|
5497
|
+
width: this.width * this.pixelRatio,
|
|
5498
|
+
height: this.height * this.pixelRatio,
|
|
5499
|
+
fps: this.fps,
|
|
5500
|
+
duration,
|
|
5501
|
+
crf: options?.crf ?? 23,
|
|
5502
|
+
preset: options?.preset ?? "ultrafast",
|
|
5503
|
+
profile: options?.profile ?? "high"
|
|
5504
|
+
},
|
|
5505
|
+
{
|
|
5506
|
+
outputPath,
|
|
5507
|
+
ffmpegPath: options?.ffmpegPath
|
|
5508
|
+
}
|
|
5509
|
+
);
|
|
5510
|
+
const painter = await createNodePainter({
|
|
5511
|
+
width: this.width,
|
|
5512
|
+
height: this.height,
|
|
5513
|
+
pixelRatio: this.pixelRatio
|
|
5514
|
+
});
|
|
5515
|
+
const bgColor = options?.bgColor ?? "#000000";
|
|
5516
|
+
const totalStart = performance.now();
|
|
5517
|
+
let framesProcessed = 0;
|
|
5518
|
+
let lastPct = -1;
|
|
5519
|
+
try {
|
|
5520
|
+
for (let i = 0; i < schedule.renderFrames.length; i++) {
|
|
5521
|
+
const renderFrame = schedule.renderFrames[i];
|
|
5522
|
+
const captionOps = this.renderFrame(renderFrame.timeMs);
|
|
5523
|
+
const beginOp = {
|
|
5524
|
+
op: "BeginFrame",
|
|
5525
|
+
width: this.width * this.pixelRatio,
|
|
5526
|
+
height: this.height * this.pixelRatio,
|
|
5527
|
+
pixelRatio: this.pixelRatio,
|
|
5528
|
+
clear: true,
|
|
5529
|
+
bg: { color: bgColor, opacity: 1, radius: 0 }
|
|
5530
|
+
};
|
|
5531
|
+
await painter.render([beginOp, ...captionOps]);
|
|
5532
|
+
const rawResult = painter.toRawRGBA();
|
|
5533
|
+
await encoder.encodeFrameRepeat(rawResult.data, renderFrame.repeatCount);
|
|
5534
|
+
framesProcessed += renderFrame.repeatCount;
|
|
5535
|
+
const pct = Math.floor(framesProcessed / schedule.totalFrames * 100);
|
|
5536
|
+
if (pct % 5 === 0 && pct !== lastPct) {
|
|
5537
|
+
lastPct = pct;
|
|
5538
|
+
const elapsed = performance.now() - totalStart;
|
|
5539
|
+
const fps = framesProcessed / (elapsed / 1e3);
|
|
5540
|
+
const eta = (schedule.totalFrames - framesProcessed) / fps * 1e3;
|
|
5541
|
+
this.logProgress(pct, framesProcessed, schedule.totalFrames, i + 1, schedule.uniqueFrameCount, fps, eta);
|
|
5542
|
+
}
|
|
5543
|
+
if (i % 500 === 0 && i > 0) {
|
|
5544
|
+
this.checkMemoryUsage();
|
|
5545
|
+
if (typeof global !== "undefined" && global.gc) {
|
|
5546
|
+
global.gc();
|
|
5547
|
+
}
|
|
5548
|
+
}
|
|
5549
|
+
}
|
|
5550
|
+
await encoder.flush();
|
|
5551
|
+
const totalTimeMs = performance.now() - totalStart;
|
|
5552
|
+
const realtimeMultiplier = duration / (totalTimeMs / 1e3);
|
|
5553
|
+
this.logCompletion(totalTimeMs, realtimeMultiplier);
|
|
5554
|
+
return outputPath;
|
|
5555
|
+
} catch (error) {
|
|
5556
|
+
encoder.close();
|
|
5557
|
+
throw error;
|
|
5558
|
+
}
|
|
5559
|
+
}
|
|
5560
|
+
async generateVideoLegacy(outputPath, duration, options) {
|
|
5561
|
+
if (!this.currentAsset || !this.currentLayout) {
|
|
5562
|
+
throw new Error("No asset loaded. Call loadAsset() first.");
|
|
5563
|
+
}
|
|
5564
|
+
const videoGenerator = new VideoGenerator();
|
|
5565
|
+
const frameGenerator = async (timeSeconds) => {
|
|
5566
|
+
const timeMs = timeSeconds * 1e3;
|
|
5567
|
+
const ops = this.renderFrame(timeMs);
|
|
5568
|
+
const beginFrameOp = {
|
|
5569
|
+
op: "BeginFrame",
|
|
5570
|
+
width: this.width * this.pixelRatio,
|
|
5571
|
+
height: this.height * this.pixelRatio,
|
|
5572
|
+
pixelRatio: this.pixelRatio,
|
|
5573
|
+
clear: true,
|
|
5574
|
+
bg: {
|
|
5575
|
+
color: options?.bgColor ?? "#000000",
|
|
5576
|
+
opacity: 1,
|
|
5577
|
+
radius: 0
|
|
5578
|
+
}
|
|
5579
|
+
};
|
|
5580
|
+
return [beginFrameOp, ...ops];
|
|
5581
|
+
};
|
|
5582
|
+
const videoOptions = {
|
|
5583
|
+
width: this.width,
|
|
5584
|
+
height: this.height,
|
|
5585
|
+
fps: this.fps,
|
|
5586
|
+
duration,
|
|
5587
|
+
outputPath,
|
|
5588
|
+
pixelRatio: this.pixelRatio,
|
|
5589
|
+
hasAlpha: false,
|
|
5590
|
+
...options
|
|
5591
|
+
};
|
|
5592
|
+
return videoGenerator.generateVideo(frameGenerator, videoOptions);
|
|
5593
|
+
}
|
|
5594
|
+
async generateVideoWithChunking(outputPath, duration, options) {
|
|
5595
|
+
if (!this.currentAsset || !this.currentLayout) {
|
|
5596
|
+
throw new Error("No asset loaded. Call loadAsset() first.");
|
|
5597
|
+
}
|
|
5598
|
+
const videoGenerator = new VideoGenerator();
|
|
5599
|
+
const chunkSize = 1e3;
|
|
5600
|
+
let processedFrames = 0;
|
|
5601
|
+
const frameGenerator = async (timeSeconds) => {
|
|
5602
|
+
const timeMs = timeSeconds * 1e3;
|
|
5603
|
+
const ops = this.renderFrame(timeMs);
|
|
5604
|
+
processedFrames++;
|
|
5605
|
+
if (processedFrames % chunkSize === 0) {
|
|
5606
|
+
this.checkMemoryUsage();
|
|
5607
|
+
if (typeof global !== "undefined" && global.gc) {
|
|
5608
|
+
global.gc();
|
|
5609
|
+
}
|
|
5610
|
+
}
|
|
5611
|
+
const beginFrameOp = {
|
|
5612
|
+
op: "BeginFrame",
|
|
5613
|
+
width: this.width * this.pixelRatio,
|
|
5614
|
+
height: this.height * this.pixelRatio,
|
|
5615
|
+
pixelRatio: this.pixelRatio,
|
|
5616
|
+
clear: true,
|
|
5617
|
+
bg: {
|
|
5618
|
+
color: options?.bgColor ?? "#000000",
|
|
5619
|
+
opacity: 1,
|
|
5620
|
+
radius: 0
|
|
5621
|
+
}
|
|
5622
|
+
};
|
|
5623
|
+
return [beginFrameOp, ...ops];
|
|
5624
|
+
};
|
|
5625
|
+
const videoOptions = {
|
|
5626
|
+
width: this.width,
|
|
5627
|
+
height: this.height,
|
|
5628
|
+
fps: this.fps,
|
|
5629
|
+
duration,
|
|
5630
|
+
outputPath,
|
|
5631
|
+
pixelRatio: this.pixelRatio,
|
|
5632
|
+
hasAlpha: false,
|
|
5633
|
+
...options
|
|
5634
|
+
};
|
|
5635
|
+
return videoGenerator.generateVideo(frameGenerator, videoOptions);
|
|
5636
|
+
}
|
|
5637
|
+
getFrameSchedule(duration) {
|
|
5638
|
+
if (!this.currentLayout) {
|
|
5639
|
+
throw new Error("No asset loaded. Call loadAsset() first.");
|
|
5640
|
+
}
|
|
5641
|
+
const animationStyle = this.extractAnimationStyle();
|
|
5642
|
+
const animationSpeed = this.extractAnimationSpeed();
|
|
5643
|
+
return createFrameSchedule(
|
|
5644
|
+
this.currentLayout,
|
|
5645
|
+
duration * 1e3,
|
|
5646
|
+
this.fps,
|
|
5647
|
+
animationStyle,
|
|
5648
|
+
animationSpeed
|
|
5649
|
+
);
|
|
5650
|
+
}
|
|
5651
|
+
getStats() {
|
|
5652
|
+
const cacheStats = this.layoutEngine?.getCacheStats() ?? { size: 0, calculatedSize: 0 };
|
|
5653
|
+
return {
|
|
5654
|
+
frameCount: this.frameCount,
|
|
5655
|
+
totalRenderTimeMs: this.totalRenderTimeMs,
|
|
5656
|
+
averageFrameTimeMs: this.frameCount > 0 ? this.totalRenderTimeMs / this.frameCount : 0,
|
|
5657
|
+
peakMemoryMB: this.peakMemoryMB,
|
|
5658
|
+
cacheHitRate: cacheStats.size > 0 ? 0.95 : 0
|
|
5659
|
+
};
|
|
5660
|
+
}
|
|
5661
|
+
resetStats() {
|
|
5662
|
+
this.frameCount = 0;
|
|
5663
|
+
this.totalRenderTimeMs = 0;
|
|
5664
|
+
this.peakMemoryMB = 0;
|
|
5665
|
+
this.lastMemoryCheckFrame = 0;
|
|
5666
|
+
}
|
|
5667
|
+
clearCache() {
|
|
5668
|
+
this.layoutEngine?.clearCache();
|
|
5669
|
+
}
|
|
5670
|
+
extractAnimationStyle() {
|
|
5671
|
+
const wordAnim = this.currentAsset?.wordAnimation;
|
|
5672
|
+
return wordAnim?.style ?? "highlight";
|
|
5673
|
+
}
|
|
5674
|
+
extractAnimationSpeed() {
|
|
5675
|
+
const wordAnim = this.currentAsset?.wordAnimation;
|
|
5676
|
+
return wordAnim?.speed ?? 1;
|
|
5677
|
+
}
|
|
5678
|
+
logProgress(pct, framesProcessed, totalFrames, uniqueProcessed, uniqueTotal, fps, eta) {
|
|
5679
|
+
if (typeof process !== "undefined" && process.stderr) {
|
|
5680
|
+
process.stderr.write(
|
|
5681
|
+
` [${String(pct).padStart(3)}%] Frame ${framesProcessed}/${totalFrames} (${uniqueProcessed}/${uniqueTotal} unique) | ${fps.toFixed(1)} fps | ETA: ${formatMs(eta)}
|
|
5682
|
+
`
|
|
5683
|
+
);
|
|
5684
|
+
}
|
|
5685
|
+
}
|
|
5686
|
+
logCompletion(totalTimeMs, realtimeMultiplier) {
|
|
5687
|
+
if (typeof process !== "undefined" && process.stderr) {
|
|
5688
|
+
process.stderr.write(
|
|
5689
|
+
` Done: ${formatMs(totalTimeMs)} (${realtimeMultiplier.toFixed(1)}x realtime)
|
|
5690
|
+
`
|
|
5691
|
+
);
|
|
5692
|
+
}
|
|
5693
|
+
}
|
|
5694
|
+
checkMemoryUsage() {
|
|
5695
|
+
if (typeof process !== "undefined" && process.memoryUsage) {
|
|
5696
|
+
const usage = process.memoryUsage();
|
|
5697
|
+
const heapUsedMB = usage.heapUsed / (1024 * 1024);
|
|
5698
|
+
if (heapUsedMB > this.peakMemoryMB) {
|
|
5699
|
+
this.peakMemoryMB = heapUsedMB;
|
|
5700
|
+
}
|
|
5701
|
+
if (usage.heapUsed > 1500 * 1024 * 1024) {
|
|
5702
|
+
if (typeof global !== "undefined" && global.gc) {
|
|
5703
|
+
global.gc();
|
|
5704
|
+
}
|
|
5705
|
+
}
|
|
5706
|
+
}
|
|
5707
|
+
}
|
|
5708
|
+
destroy() {
|
|
5709
|
+
this.currentAsset = null;
|
|
5710
|
+
this.currentLayout = null;
|
|
5711
|
+
this.layoutEngine?.clearCache();
|
|
5712
|
+
if (this.fontRegistry) {
|
|
5713
|
+
this.fontRegistry.release();
|
|
5714
|
+
this.fontRegistry = null;
|
|
5715
|
+
}
|
|
5716
|
+
this.layoutEngine = null;
|
|
5717
|
+
}
|
|
5718
|
+
};
|
|
5719
|
+
function formatMs(ms) {
|
|
5720
|
+
if (ms < 1e3) return `${Math.round(ms)}ms`;
|
|
5721
|
+
if (ms < 6e4) return `${(ms / 1e3).toFixed(1)}s`;
|
|
5722
|
+
return `${Math.floor(ms / 6e4)}m ${(ms % 6e4 / 1e3).toFixed(0)}s`;
|
|
5723
|
+
}
|
|
5724
|
+
async function createRichCaptionRenderer(options) {
|
|
5725
|
+
const renderer = new RichCaptionRenderer(options);
|
|
5726
|
+
await renderer.initialize();
|
|
5727
|
+
return renderer;
|
|
5728
|
+
}
|
|
5729
|
+
|
|
5730
|
+
// src/core/video/encoder-factory.ts
|
|
5731
|
+
async function createVideoEncoder(config, options) {
|
|
5732
|
+
const platform = options?.platform ?? detectPlatform();
|
|
5733
|
+
if (platform === "node") {
|
|
5734
|
+
throw new Error("Use createNodeRawEncoder from node-raw-encoder module for Node.js encoding");
|
|
5735
|
+
}
|
|
5736
|
+
if (options?.preferredEncoder === "mediarecorder") {
|
|
5737
|
+
return createMediaRecorderEncoder(config, options?.canvas);
|
|
5738
|
+
}
|
|
5739
|
+
const webCodecsSupported = await isWebCodecsH264Supported();
|
|
5740
|
+
if (webCodecsSupported) {
|
|
5741
|
+
try {
|
|
5742
|
+
const { WebCodecsEncoder } = await import("./web-encoder-7CLF7KX4.js");
|
|
5743
|
+
const encoder = new WebCodecsEncoder();
|
|
5744
|
+
await encoder.configure(config);
|
|
5745
|
+
return encoder;
|
|
5746
|
+
} catch (error) {
|
|
5747
|
+
console.warn("WebCodecs encoder failed to initialize, falling back to MediaRecorder:", error);
|
|
5748
|
+
}
|
|
5749
|
+
}
|
|
5750
|
+
return createMediaRecorderEncoder(config, options?.canvas);
|
|
5751
|
+
}
|
|
5752
|
+
async function createMediaRecorderEncoder(config, canvas) {
|
|
5753
|
+
const { MediaRecorderFallback } = await import("./mediarecorder-fallback-5JYZBGT3.js");
|
|
5754
|
+
const encoder = new MediaRecorderFallback();
|
|
5755
|
+
await encoder.configure(config, canvas);
|
|
5756
|
+
return encoder;
|
|
5757
|
+
}
|
|
5758
|
+
async function isWebCodecsH264Supported() {
|
|
5759
|
+
if (typeof globalThis === "undefined") return false;
|
|
5760
|
+
const VideoEncoder = globalThis.VideoEncoder;
|
|
5761
|
+
if (!VideoEncoder || typeof VideoEncoder.isConfigSupported !== "function") {
|
|
5762
|
+
return false;
|
|
5763
|
+
}
|
|
5764
|
+
try {
|
|
5765
|
+
const config = {
|
|
5766
|
+
codec: "avc1.42001E",
|
|
5767
|
+
width: 1920,
|
|
5768
|
+
height: 1080,
|
|
5769
|
+
bitrate: 8e6,
|
|
5770
|
+
framerate: 30
|
|
5771
|
+
};
|
|
5772
|
+
const support = await VideoEncoder.isConfigSupported(config);
|
|
5773
|
+
return support.supported === true;
|
|
5774
|
+
} catch {
|
|
5775
|
+
return false;
|
|
5776
|
+
}
|
|
5777
|
+
}
|
|
5778
|
+
async function getEncoderCapabilities() {
|
|
5779
|
+
const platform = detectPlatform();
|
|
5780
|
+
if (platform === "node") {
|
|
5781
|
+
return {
|
|
5782
|
+
encoder: "node-raw",
|
|
5783
|
+
codec: "h264",
|
|
5784
|
+
hardwareAccelerated: false,
|
|
5785
|
+
supportsH264: true
|
|
5786
|
+
};
|
|
5787
|
+
}
|
|
5788
|
+
const webCodecsSupported = await isWebCodecsH264Supported();
|
|
5789
|
+
if (webCodecsSupported) {
|
|
5790
|
+
return {
|
|
5791
|
+
encoder: "webcodecs",
|
|
5792
|
+
codec: "h264",
|
|
5793
|
+
hardwareAccelerated: true,
|
|
5794
|
+
supportsH264: true
|
|
5795
|
+
};
|
|
5796
|
+
}
|
|
5797
|
+
return {
|
|
5798
|
+
encoder: "mediarecorder",
|
|
5799
|
+
codec: "vp9",
|
|
5800
|
+
hardwareAccelerated: false,
|
|
5801
|
+
supportsH264: false
|
|
5802
|
+
};
|
|
5803
|
+
}
|
|
5804
|
+
function detectPlatform() {
|
|
5805
|
+
if (typeof window === "undefined" && typeof process !== "undefined" && process.versions?.node) {
|
|
5806
|
+
return "node";
|
|
5807
|
+
}
|
|
5808
|
+
return "web";
|
|
5809
|
+
}
|
|
5810
|
+
function getEncoderWarning() {
|
|
5811
|
+
const platform = detectPlatform();
|
|
5812
|
+
if (platform === "node") return null;
|
|
5813
|
+
if (typeof globalThis !== "undefined") {
|
|
5814
|
+
const VideoEncoder = globalThis.VideoEncoder;
|
|
5815
|
+
if (!VideoEncoder) {
|
|
5816
|
+
return "Your browser doesn't support fast H.264 encoding (WebCodecs). Using real-time recording with WebM format instead. For best performance, use Chrome 94+, Edge 94+, or Safari 16.4+.";
|
|
5817
|
+
}
|
|
5818
|
+
}
|
|
5819
|
+
return null;
|
|
5820
|
+
}
|
|
5821
|
+
|
|
3632
5822
|
// src/env/entry.node.ts
|
|
3633
5823
|
var registeredGlobalFonts = /* @__PURE__ */ new Set();
|
|
3634
5824
|
async function registerColorEmojiWithCanvas(family, bytes) {
|
|
@@ -3947,22 +6137,47 @@ async function createTextEngine(opts = {}) {
|
|
|
3947
6137
|
};
|
|
3948
6138
|
}
|
|
3949
6139
|
export {
|
|
6140
|
+
CanvasRichCaptionAssetSchema,
|
|
3950
6141
|
CanvasRichTextAssetSchema,
|
|
3951
6142
|
CanvasSvgAssetSchema,
|
|
6143
|
+
CaptionLayoutEngine,
|
|
6144
|
+
FontRegistry,
|
|
6145
|
+
NodeRawEncoder,
|
|
6146
|
+
RichCaptionRenderer,
|
|
6147
|
+
WordTimingStore,
|
|
3952
6148
|
arcToCubicBeziers,
|
|
6149
|
+
calculateAnimationStatesForGroup,
|
|
3953
6150
|
commandsToPathString,
|
|
3954
6151
|
computeSimplePathBounds,
|
|
6152
|
+
createDefaultGeneratorConfig,
|
|
6153
|
+
createFrameSchedule,
|
|
3955
6154
|
createNodePainter,
|
|
6155
|
+
createNodeRawEncoder,
|
|
6156
|
+
createRichCaptionRenderer,
|
|
3956
6157
|
createTextEngine,
|
|
6158
|
+
createVideoEncoder,
|
|
6159
|
+
detectPlatform,
|
|
6160
|
+
detectSubtitleFormat,
|
|
6161
|
+
findWordAtTime,
|
|
6162
|
+
generateRichCaptionDrawOps,
|
|
6163
|
+
generateRichCaptionFrame,
|
|
3957
6164
|
generateShapePathData,
|
|
3958
|
-
|
|
3959
|
-
|
|
6165
|
+
getDefaultAnimationConfig,
|
|
6166
|
+
getDrawCaptionWordOps,
|
|
6167
|
+
getEncoderCapabilities,
|
|
6168
|
+
getEncoderWarning,
|
|
6169
|
+
groupWordsByPause,
|
|
6170
|
+
isDrawCaptionWordOp,
|
|
6171
|
+
isRTLText,
|
|
6172
|
+
isWebCodecsH264Supported,
|
|
3960
6173
|
normalizePath,
|
|
3961
6174
|
normalizePathString,
|
|
6175
|
+
parseSubtitleToWords,
|
|
3962
6176
|
parseSvgPath,
|
|
3963
6177
|
quadraticToCubic,
|
|
3964
6178
|
renderSvgAssetToPng,
|
|
3965
6179
|
renderSvgToPng,
|
|
6180
|
+
richCaptionAssetSchema,
|
|
3966
6181
|
shapeToSvgString,
|
|
3967
6182
|
svgAssetSchema,
|
|
3968
6183
|
svgGradientStopSchema,
|