@shotstack/shotstack-canvas 1.9.6 → 2.0.1
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 +2593 -15
- package/dist/entry.node.d.cts +748 -39
- package/dist/entry.node.d.ts +748 -39
- package/dist/entry.node.js +2247 -14
- package/dist/entry.web.d.ts +720 -39
- package/dist/entry.web.js +37349 -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.cjs
CHANGED
|
@@ -5,6 +5,9 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
|
5
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
7
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __esm = (fn, res) => function __init() {
|
|
9
|
+
return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
|
|
10
|
+
};
|
|
8
11
|
var __export = (target, all) => {
|
|
9
12
|
for (var name in all)
|
|
10
13
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -27,25 +30,370 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
27
30
|
));
|
|
28
31
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
32
|
|
|
33
|
+
// src/core/video/web-encoder.ts
|
|
34
|
+
var web_encoder_exports = {};
|
|
35
|
+
__export(web_encoder_exports, {
|
|
36
|
+
WebCodecsEncoder: () => WebCodecsEncoder,
|
|
37
|
+
createWebCodecsEncoder: () => createWebCodecsEncoder
|
|
38
|
+
});
|
|
39
|
+
function getH264CodecCandidates(profile) {
|
|
40
|
+
switch (profile) {
|
|
41
|
+
case "baseline":
|
|
42
|
+
return ["avc1.42E028", "avc1.42001F", "avc1.42001E"];
|
|
43
|
+
case "main":
|
|
44
|
+
return ["avc1.4D0028", "avc1.4D001F", "avc1.4D001E"];
|
|
45
|
+
case "high":
|
|
46
|
+
default:
|
|
47
|
+
return ["avc1.640028", "avc1.640029", "avc1.64001F", "avc1.64001E"];
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
async function createWebCodecsEncoder(config) {
|
|
51
|
+
const encoder = new WebCodecsEncoder();
|
|
52
|
+
await encoder.configure(config);
|
|
53
|
+
return encoder;
|
|
54
|
+
}
|
|
55
|
+
var WebCodecsEncoder;
|
|
56
|
+
var init_web_encoder = __esm({
|
|
57
|
+
"src/core/video/web-encoder.ts"() {
|
|
58
|
+
"use strict";
|
|
59
|
+
WebCodecsEncoder = class {
|
|
60
|
+
encoder = null;
|
|
61
|
+
muxer = null;
|
|
62
|
+
config = null;
|
|
63
|
+
frameCount = 0;
|
|
64
|
+
totalFrames = 0;
|
|
65
|
+
startTime = 0;
|
|
66
|
+
fps = 30;
|
|
67
|
+
keyframeInterval = 150;
|
|
68
|
+
encoderError = null;
|
|
69
|
+
onProgress;
|
|
70
|
+
async configure(config) {
|
|
71
|
+
if (typeof VideoEncoder === "undefined") {
|
|
72
|
+
throw new Error("WebCodecs API not supported in this browser.");
|
|
73
|
+
}
|
|
74
|
+
this.config = config;
|
|
75
|
+
this.fps = config.fps;
|
|
76
|
+
this.totalFrames = Math.max(2, Math.round(config.duration * config.fps) + 1);
|
|
77
|
+
this.frameCount = 0;
|
|
78
|
+
this.startTime = Date.now();
|
|
79
|
+
this.keyframeInterval = Math.round(config.fps * 10);
|
|
80
|
+
this.encoderError = null;
|
|
81
|
+
const { Muxer, ArrayBufferTarget } = await import("mp4-muxer");
|
|
82
|
+
this.muxer = new Muxer({
|
|
83
|
+
target: new ArrayBufferTarget(),
|
|
84
|
+
video: {
|
|
85
|
+
codec: "avc",
|
|
86
|
+
width: config.width,
|
|
87
|
+
height: config.height
|
|
88
|
+
},
|
|
89
|
+
fastStart: "in-memory"
|
|
90
|
+
});
|
|
91
|
+
const candidates = getH264CodecCandidates(config.profile || "high");
|
|
92
|
+
let encoderConfig = null;
|
|
93
|
+
for (const codec of candidates) {
|
|
94
|
+
const candidate = {
|
|
95
|
+
codec,
|
|
96
|
+
width: config.width,
|
|
97
|
+
height: config.height,
|
|
98
|
+
bitrate: config.bitrate ?? 8e6,
|
|
99
|
+
framerate: config.fps,
|
|
100
|
+
hardwareAcceleration: config.hardwareAcceleration ?? "prefer-hardware",
|
|
101
|
+
latencyMode: "quality"
|
|
102
|
+
};
|
|
103
|
+
const support = await VideoEncoder.isConfigSupported(candidate);
|
|
104
|
+
if (support.supported) {
|
|
105
|
+
encoderConfig = candidate;
|
|
106
|
+
break;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
if (!encoderConfig) {
|
|
110
|
+
throw new Error("H.264 encoding not supported. Tried codecs: " + candidates.join(", "));
|
|
111
|
+
}
|
|
112
|
+
this.encoder = new VideoEncoder({
|
|
113
|
+
output: (chunk, metadata) => {
|
|
114
|
+
this.muxer.addVideoChunk(chunk, metadata);
|
|
115
|
+
},
|
|
116
|
+
error: (e) => {
|
|
117
|
+
this.encoderError = e;
|
|
118
|
+
}
|
|
119
|
+
});
|
|
120
|
+
this.encoder.configure(encoderConfig);
|
|
121
|
+
}
|
|
122
|
+
async encodeFrame(frameData, frameIndex) {
|
|
123
|
+
if (this.encoderError) {
|
|
124
|
+
throw this.encoderError;
|
|
125
|
+
}
|
|
126
|
+
if (!this.encoder || !this.config) {
|
|
127
|
+
throw new Error("Encoder not configured. Call configure() first.");
|
|
128
|
+
}
|
|
129
|
+
const { width, height } = this.config;
|
|
130
|
+
const timestamp = Math.round(frameIndex * 1e6 / this.fps);
|
|
131
|
+
const pixelData = frameData instanceof ArrayBuffer ? new Uint8ClampedArray(frameData) : frameData;
|
|
132
|
+
const imageData = new ImageData(pixelData, width, height);
|
|
133
|
+
const videoFrame = new VideoFrame(imageData, { timestamp });
|
|
134
|
+
const isKeyFrame = frameIndex % this.keyframeInterval === 0;
|
|
135
|
+
this.encoder.encode(videoFrame, { keyFrame: isKeyFrame });
|
|
136
|
+
videoFrame.close();
|
|
137
|
+
this.frameCount++;
|
|
138
|
+
this.reportProgress();
|
|
139
|
+
}
|
|
140
|
+
async encodeCanvas(canvas, frameIndex) {
|
|
141
|
+
if (this.encoderError) {
|
|
142
|
+
throw this.encoderError;
|
|
143
|
+
}
|
|
144
|
+
if (!this.encoder || !this.config) {
|
|
145
|
+
throw new Error("Encoder not configured. Call configure() first.");
|
|
146
|
+
}
|
|
147
|
+
const timestamp = Math.round(frameIndex * 1e6 / this.fps);
|
|
148
|
+
const videoFrame = new VideoFrame(canvas, { timestamp });
|
|
149
|
+
const isKeyFrame = frameIndex % this.keyframeInterval === 0;
|
|
150
|
+
this.encoder.encode(videoFrame, { keyFrame: isKeyFrame });
|
|
151
|
+
videoFrame.close();
|
|
152
|
+
this.frameCount++;
|
|
153
|
+
this.reportProgress();
|
|
154
|
+
}
|
|
155
|
+
async encodeCanvasRepeat(canvas, startFrameIndex, repeatCount) {
|
|
156
|
+
if (this.encoderError) {
|
|
157
|
+
throw this.encoderError;
|
|
158
|
+
}
|
|
159
|
+
if (!this.encoder || !this.config) {
|
|
160
|
+
throw new Error("Encoder not configured. Call configure() first.");
|
|
161
|
+
}
|
|
162
|
+
for (let i = 0; i < repeatCount; i++) {
|
|
163
|
+
const actualFrameIndex = startFrameIndex + i;
|
|
164
|
+
const timestamp = Math.round(actualFrameIndex * 1e6 / this.fps);
|
|
165
|
+
const videoFrame = new VideoFrame(canvas, { timestamp });
|
|
166
|
+
const isKeyFrame = actualFrameIndex % this.keyframeInterval === 0;
|
|
167
|
+
this.encoder.encode(videoFrame, { keyFrame: isKeyFrame });
|
|
168
|
+
videoFrame.close();
|
|
169
|
+
this.frameCount++;
|
|
170
|
+
}
|
|
171
|
+
this.reportProgress();
|
|
172
|
+
}
|
|
173
|
+
async flush() {
|
|
174
|
+
if (this.encoderError) {
|
|
175
|
+
throw this.encoderError;
|
|
176
|
+
}
|
|
177
|
+
if (!this.encoder || !this.muxer) {
|
|
178
|
+
throw new Error("Encoder not configured.");
|
|
179
|
+
}
|
|
180
|
+
await this.encoder.flush();
|
|
181
|
+
this.muxer.finalize();
|
|
182
|
+
const buffer = this.muxer.target.buffer;
|
|
183
|
+
return new Blob([buffer], { type: "video/mp4" });
|
|
184
|
+
}
|
|
185
|
+
close() {
|
|
186
|
+
if (this.encoder && this.encoder.state !== "closed") {
|
|
187
|
+
this.encoder.close();
|
|
188
|
+
}
|
|
189
|
+
this.encoder = null;
|
|
190
|
+
this.muxer = null;
|
|
191
|
+
}
|
|
192
|
+
reportProgress() {
|
|
193
|
+
if (!this.onProgress) return;
|
|
194
|
+
const elapsedMs = Date.now() - this.startTime;
|
|
195
|
+
if (elapsedMs === 0) return;
|
|
196
|
+
const framesPerSecond = this.frameCount / (elapsedMs / 1e3);
|
|
197
|
+
const remainingFrames = this.totalFrames - this.frameCount;
|
|
198
|
+
const estimatedRemainingMs = remainingFrames / framesPerSecond * 1e3;
|
|
199
|
+
this.onProgress({
|
|
200
|
+
framesEncoded: this.frameCount,
|
|
201
|
+
totalFrames: this.totalFrames,
|
|
202
|
+
percentage: this.frameCount / this.totalFrames * 100,
|
|
203
|
+
elapsedMs,
|
|
204
|
+
estimatedRemainingMs: Math.round(estimatedRemainingMs),
|
|
205
|
+
currentFps: Math.round(framesPerSecond * 10) / 10
|
|
206
|
+
});
|
|
207
|
+
}
|
|
208
|
+
};
|
|
209
|
+
}
|
|
210
|
+
});
|
|
211
|
+
|
|
212
|
+
// src/core/video/mediarecorder-fallback.ts
|
|
213
|
+
var mediarecorder_fallback_exports = {};
|
|
214
|
+
__export(mediarecorder_fallback_exports, {
|
|
215
|
+
MediaRecorderFallback: () => MediaRecorderFallback,
|
|
216
|
+
createMediaRecorderFallback: () => createMediaRecorderFallback,
|
|
217
|
+
isMediaRecorderSupported: () => isMediaRecorderSupported
|
|
218
|
+
});
|
|
219
|
+
function getPreferredMimeType() {
|
|
220
|
+
const mimeTypes = [
|
|
221
|
+
"video/webm;codecs=vp9",
|
|
222
|
+
"video/webm;codecs=vp8",
|
|
223
|
+
"video/webm",
|
|
224
|
+
"video/mp4"
|
|
225
|
+
];
|
|
226
|
+
for (const mimeType of mimeTypes) {
|
|
227
|
+
if (MediaRecorder.isTypeSupported(mimeType)) {
|
|
228
|
+
return mimeType;
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
return "video/webm";
|
|
232
|
+
}
|
|
233
|
+
function isMediaRecorderSupported() {
|
|
234
|
+
return typeof MediaRecorder !== "undefined" && typeof HTMLCanvasElement !== "undefined" && typeof HTMLCanvasElement.prototype.captureStream === "function";
|
|
235
|
+
}
|
|
236
|
+
async function createMediaRecorderFallback(config, canvas) {
|
|
237
|
+
const encoder = new MediaRecorderFallback();
|
|
238
|
+
await encoder.configure(config, canvas);
|
|
239
|
+
return encoder;
|
|
240
|
+
}
|
|
241
|
+
var MediaRecorderFallback;
|
|
242
|
+
var init_mediarecorder_fallback = __esm({
|
|
243
|
+
"src/core/video/mediarecorder-fallback.ts"() {
|
|
244
|
+
"use strict";
|
|
245
|
+
MediaRecorderFallback = class {
|
|
246
|
+
mediaRecorder = null;
|
|
247
|
+
canvas = null;
|
|
248
|
+
config = null;
|
|
249
|
+
chunks = [];
|
|
250
|
+
frameCount = 0;
|
|
251
|
+
totalFrames = 0;
|
|
252
|
+
startTime = 0;
|
|
253
|
+
ctx = null;
|
|
254
|
+
onProgress;
|
|
255
|
+
async configure(config, canvas) {
|
|
256
|
+
this.config = config;
|
|
257
|
+
this.totalFrames = Math.max(2, Math.round(config.duration * config.fps) + 1);
|
|
258
|
+
this.frameCount = 0;
|
|
259
|
+
this.startTime = Date.now();
|
|
260
|
+
this.chunks = [];
|
|
261
|
+
if (canvas) {
|
|
262
|
+
this.canvas = canvas;
|
|
263
|
+
} else {
|
|
264
|
+
if (typeof OffscreenCanvas !== "undefined") {
|
|
265
|
+
this.canvas = new OffscreenCanvas(config.width, config.height);
|
|
266
|
+
} else if (typeof document !== "undefined") {
|
|
267
|
+
this.canvas = document.createElement("canvas");
|
|
268
|
+
this.canvas.width = config.width;
|
|
269
|
+
this.canvas.height = config.height;
|
|
270
|
+
} else {
|
|
271
|
+
throw new Error("No canvas available for MediaRecorder fallback");
|
|
272
|
+
}
|
|
273
|
+
}
|
|
274
|
+
this.ctx = this.canvas.getContext("2d");
|
|
275
|
+
if (!this.ctx) {
|
|
276
|
+
throw new Error("Failed to get 2D context");
|
|
277
|
+
}
|
|
278
|
+
const stream = this.canvas.captureStream?.(config.fps);
|
|
279
|
+
if (!stream) {
|
|
280
|
+
throw new Error("captureStream not supported on this canvas type");
|
|
281
|
+
}
|
|
282
|
+
const mimeType = getPreferredMimeType();
|
|
283
|
+
this.mediaRecorder = new MediaRecorder(stream, {
|
|
284
|
+
mimeType,
|
|
285
|
+
videoBitsPerSecond: config.bitrate ?? 8e6
|
|
286
|
+
});
|
|
287
|
+
this.mediaRecorder.ondataavailable = (event) => {
|
|
288
|
+
if (event.data.size > 0) {
|
|
289
|
+
this.chunks.push(event.data);
|
|
290
|
+
}
|
|
291
|
+
};
|
|
292
|
+
this.mediaRecorder.start(100);
|
|
293
|
+
}
|
|
294
|
+
async encodeFrame(frameData, _frameIndex) {
|
|
295
|
+
if (!this.ctx || !this.config) {
|
|
296
|
+
throw new Error("Encoder not configured. Call configure() first.");
|
|
297
|
+
}
|
|
298
|
+
const { width, height } = this.config;
|
|
299
|
+
const pixelData = frameData instanceof ArrayBuffer ? new Uint8ClampedArray(frameData) : frameData;
|
|
300
|
+
const imageData = new ImageData(pixelData, width, height);
|
|
301
|
+
this.ctx.putImageData(imageData, 0, 0);
|
|
302
|
+
this.frameCount++;
|
|
303
|
+
if (this.onProgress) {
|
|
304
|
+
const elapsedMs = Date.now() - this.startTime;
|
|
305
|
+
if (elapsedMs > 0) {
|
|
306
|
+
const framesPerSecond = this.frameCount / (elapsedMs / 1e3);
|
|
307
|
+
const remainingFrames = this.totalFrames - this.frameCount;
|
|
308
|
+
const estimatedRemainingMs = remainingFrames / framesPerSecond * 1e3;
|
|
309
|
+
this.onProgress({
|
|
310
|
+
framesEncoded: this.frameCount,
|
|
311
|
+
totalFrames: this.totalFrames,
|
|
312
|
+
percentage: this.frameCount / this.totalFrames * 100,
|
|
313
|
+
elapsedMs,
|
|
314
|
+
estimatedRemainingMs: Math.round(estimatedRemainingMs),
|
|
315
|
+
currentFps: Math.round(framesPerSecond * 10) / 10
|
|
316
|
+
});
|
|
317
|
+
}
|
|
318
|
+
}
|
|
319
|
+
const frameInterval = 1e3 / this.config.fps;
|
|
320
|
+
await new Promise((resolve) => setTimeout(resolve, frameInterval));
|
|
321
|
+
}
|
|
322
|
+
async flush() {
|
|
323
|
+
if (!this.mediaRecorder) {
|
|
324
|
+
throw new Error("MediaRecorder not configured.");
|
|
325
|
+
}
|
|
326
|
+
return new Promise((resolve, reject) => {
|
|
327
|
+
this.mediaRecorder.onstop = () => {
|
|
328
|
+
const blob = new Blob(this.chunks, { type: this.mediaRecorder.mimeType });
|
|
329
|
+
resolve(blob);
|
|
330
|
+
};
|
|
331
|
+
this.mediaRecorder.onerror = (event) => {
|
|
332
|
+
reject(new Error(`MediaRecorder error: ${event}`));
|
|
333
|
+
};
|
|
334
|
+
this.mediaRecorder.stop();
|
|
335
|
+
});
|
|
336
|
+
}
|
|
337
|
+
close() {
|
|
338
|
+
if (this.mediaRecorder && this.mediaRecorder.state !== "inactive") {
|
|
339
|
+
this.mediaRecorder.stop();
|
|
340
|
+
}
|
|
341
|
+
this.mediaRecorder = null;
|
|
342
|
+
this.canvas = null;
|
|
343
|
+
this.ctx = null;
|
|
344
|
+
this.chunks = [];
|
|
345
|
+
}
|
|
346
|
+
getOutputMimeType() {
|
|
347
|
+
return this.mediaRecorder?.mimeType || "video/webm";
|
|
348
|
+
}
|
|
349
|
+
};
|
|
350
|
+
}
|
|
351
|
+
});
|
|
352
|
+
|
|
30
353
|
// src/env/entry.node.ts
|
|
31
354
|
var entry_node_exports = {};
|
|
32
355
|
__export(entry_node_exports, {
|
|
356
|
+
CanvasRichCaptionAssetSchema: () => CanvasRichCaptionAssetSchema,
|
|
33
357
|
CanvasRichTextAssetSchema: () => CanvasRichTextAssetSchema,
|
|
34
358
|
CanvasSvgAssetSchema: () => CanvasSvgAssetSchema,
|
|
359
|
+
CaptionLayoutEngine: () => CaptionLayoutEngine,
|
|
360
|
+
FontRegistry: () => FontRegistry,
|
|
361
|
+
NodeRawEncoder: () => NodeRawEncoder,
|
|
362
|
+
RichCaptionRenderer: () => RichCaptionRenderer,
|
|
363
|
+
WordTimingStore: () => WordTimingStore,
|
|
35
364
|
arcToCubicBeziers: () => arcToCubicBeziers,
|
|
365
|
+
calculateAnimationStatesForGroup: () => calculateAnimationStatesForGroup,
|
|
36
366
|
commandsToPathString: () => commandsToPathString,
|
|
37
367
|
computeSimplePathBounds: () => computeSimplePathBounds,
|
|
368
|
+
createDefaultGeneratorConfig: () => createDefaultGeneratorConfig,
|
|
369
|
+
createFrameSchedule: () => createFrameSchedule,
|
|
38
370
|
createNodePainter: () => createNodePainter,
|
|
371
|
+
createNodeRawEncoder: () => createNodeRawEncoder,
|
|
372
|
+
createRichCaptionRenderer: () => createRichCaptionRenderer,
|
|
39
373
|
createTextEngine: () => createTextEngine,
|
|
374
|
+
createVideoEncoder: () => createVideoEncoder,
|
|
375
|
+
detectPlatform: () => detectPlatform,
|
|
376
|
+
detectSubtitleFormat: () => detectSubtitleFormat,
|
|
377
|
+
findWordAtTime: () => findWordAtTime,
|
|
378
|
+
generateRichCaptionDrawOps: () => generateRichCaptionDrawOps,
|
|
379
|
+
generateRichCaptionFrame: () => generateRichCaptionFrame,
|
|
40
380
|
generateShapePathData: () => generateShapePathData,
|
|
41
|
-
|
|
42
|
-
|
|
381
|
+
getDefaultAnimationConfig: () => getDefaultAnimationConfig,
|
|
382
|
+
getDrawCaptionWordOps: () => getDrawCaptionWordOps,
|
|
383
|
+
getEncoderCapabilities: () => getEncoderCapabilities,
|
|
384
|
+
getEncoderWarning: () => getEncoderWarning,
|
|
385
|
+
groupWordsByPause: () => groupWordsByPause,
|
|
386
|
+
isDrawCaptionWordOp: () => isDrawCaptionWordOp,
|
|
387
|
+
isRTLText: () => isRTLText,
|
|
388
|
+
isWebCodecsH264Supported: () => isWebCodecsH264Supported,
|
|
43
389
|
normalizePath: () => normalizePath,
|
|
44
390
|
normalizePathString: () => normalizePathString,
|
|
391
|
+
parseSubtitleToWords: () => parseSubtitleToWords,
|
|
45
392
|
parseSvgPath: () => parseSvgPath,
|
|
46
393
|
quadraticToCubic: () => quadraticToCubic,
|
|
47
394
|
renderSvgAssetToPng: () => renderSvgAssetToPng,
|
|
48
395
|
renderSvgToPng: () => renderSvgToPng,
|
|
396
|
+
richCaptionAssetSchema: () => richCaptionAssetSchema,
|
|
49
397
|
shapeToSvgString: () => shapeToSvgString,
|
|
50
398
|
svgAssetSchema: () => import_zod2.svgAssetSchema,
|
|
51
399
|
svgGradientStopSchema: () => import_zod2.svgGradientStopSchema,
|
|
@@ -71,7 +419,7 @@ var CANVAS_CONFIG = {
|
|
|
71
419
|
pixelRatio: 2,
|
|
72
420
|
fontFamily: "Roboto",
|
|
73
421
|
fontSize: 48,
|
|
74
|
-
color: "#
|
|
422
|
+
color: "#ffffff",
|
|
75
423
|
textAlign: "center"
|
|
76
424
|
},
|
|
77
425
|
LIMITS: {
|
|
@@ -217,6 +565,71 @@ var CanvasRichTextAssetSchema = import_zod2.richTextAssetSchema.extend({
|
|
|
217
565
|
customFonts: import_zod.z.array(customFontSchema).optional()
|
|
218
566
|
}).strict();
|
|
219
567
|
var CanvasSvgAssetSchema = import_zod2.svgAssetSchema;
|
|
568
|
+
var wordTimingSchema = import_zod2.wordTimingSchema.extend({
|
|
569
|
+
text: import_zod.z.string().min(1),
|
|
570
|
+
start: import_zod.z.number().min(0),
|
|
571
|
+
end: import_zod.z.number().min(0),
|
|
572
|
+
confidence: import_zod.z.number().min(0).max(1).optional()
|
|
573
|
+
});
|
|
574
|
+
var richCaptionFontSchema = import_zod.z.object({
|
|
575
|
+
family: import_zod.z.string().default("Open Sans"),
|
|
576
|
+
size: import_zod.z.number().int().min(1).max(500).default(24),
|
|
577
|
+
weight: import_zod.z.union([import_zod.z.string(), import_zod.z.number()]).default("400"),
|
|
578
|
+
color: import_zod.z.string().regex(HEX6).default("#ffffff"),
|
|
579
|
+
opacity: import_zod.z.number().min(0).max(1).default(1),
|
|
580
|
+
background: import_zod.z.string().regex(HEX6).optional()
|
|
581
|
+
});
|
|
582
|
+
var richCaptionActiveSchema = import_zod2.richCaptionActiveSchema.extend({
|
|
583
|
+
font: import_zod.z.object({
|
|
584
|
+
color: import_zod.z.string().regex(HEX6).default("#ffff00"),
|
|
585
|
+
background: import_zod.z.string().regex(HEX6).optional(),
|
|
586
|
+
opacity: import_zod.z.number().min(0).max(1).default(1)
|
|
587
|
+
}).optional(),
|
|
588
|
+
stroke: import_zod.z.object({
|
|
589
|
+
width: import_zod.z.number().min(0).optional(),
|
|
590
|
+
color: import_zod.z.string().regex(HEX6).optional(),
|
|
591
|
+
opacity: import_zod.z.number().min(0).max(1).optional()
|
|
592
|
+
}).optional(),
|
|
593
|
+
scale: import_zod.z.number().min(0.5).max(2).default(1)
|
|
594
|
+
});
|
|
595
|
+
var richCaptionWordAnimationSchema = import_zod2.richCaptionWordAnimationSchema.extend({
|
|
596
|
+
style: import_zod.z.enum(["karaoke", "highlight", "pop", "fade", "slide", "bounce", "typewriter", "none"]).default("highlight"),
|
|
597
|
+
speed: import_zod.z.number().min(0.5).max(2).default(1),
|
|
598
|
+
direction: import_zod.z.enum(["left", "right", "up", "down"]).default("up")
|
|
599
|
+
});
|
|
600
|
+
var richCaptionAssetSchema = import_zod.z.object({
|
|
601
|
+
type: import_zod.z.literal("rich-caption"),
|
|
602
|
+
src: import_zod.z.string().min(1).optional(),
|
|
603
|
+
words: import_zod.z.array(wordTimingSchema).max(1e5).optional(),
|
|
604
|
+
font: richCaptionFontSchema.optional(),
|
|
605
|
+
style: canvasStyleSchema.optional(),
|
|
606
|
+
stroke: canvasStrokeSchema.optional(),
|
|
607
|
+
shadow: canvasShadowSchema.optional(),
|
|
608
|
+
background: canvasBackgroundSchema.optional(),
|
|
609
|
+
padding: paddingSchema.optional(),
|
|
610
|
+
align: canvasAlignmentSchema.optional(),
|
|
611
|
+
active: richCaptionActiveSchema.optional(),
|
|
612
|
+
wordAnimation: richCaptionWordAnimationSchema.optional(),
|
|
613
|
+
position: import_zod.z.enum(["top", "center", "bottom"]).default("bottom"),
|
|
614
|
+
maxWidth: import_zod.z.number().min(0.1).max(1).default(0.9),
|
|
615
|
+
maxLines: import_zod.z.number().int().min(1).max(10).default(2)
|
|
616
|
+
}).superRefine((data, ctx) => {
|
|
617
|
+
if (data.src && data.words) {
|
|
618
|
+
ctx.addIssue({
|
|
619
|
+
code: import_zod.z.ZodIssueCode.custom,
|
|
620
|
+
message: "src and words are mutually exclusive",
|
|
621
|
+
path: ["src"]
|
|
622
|
+
});
|
|
623
|
+
}
|
|
624
|
+
if (!data.src && !data.words) {
|
|
625
|
+
ctx.addIssue({
|
|
626
|
+
code: import_zod.z.ZodIssueCode.custom,
|
|
627
|
+
message: "Either src or words must be provided",
|
|
628
|
+
path: ["words"]
|
|
629
|
+
});
|
|
630
|
+
}
|
|
631
|
+
});
|
|
632
|
+
var CanvasRichCaptionAssetSchema = richCaptionAssetSchema;
|
|
220
633
|
|
|
221
634
|
// src/wasm/hb-loader.ts
|
|
222
635
|
var import_meta = {};
|
|
@@ -458,6 +871,7 @@ var FontRegistry = class _FontRegistry {
|
|
|
458
871
|
fontkitBaseFonts = /* @__PURE__ */ new Map();
|
|
459
872
|
colorEmojiFonts = /* @__PURE__ */ new Set();
|
|
460
873
|
colorEmojiFontBytes = /* @__PURE__ */ new Map();
|
|
874
|
+
registeredCanvasFonts = /* @__PURE__ */ new Set();
|
|
461
875
|
wasmBaseURL;
|
|
462
876
|
initPromise;
|
|
463
877
|
emojiFallbackDesc;
|
|
@@ -655,6 +1069,7 @@ var FontRegistry = class _FontRegistry {
|
|
|
655
1069
|
} catch (err) {
|
|
656
1070
|
console.warn(`\u26A0\uFE0F Fontkit failed for ${desc.family}:`, err);
|
|
657
1071
|
}
|
|
1072
|
+
await this.registerWithCanvas(desc.family, bytes);
|
|
658
1073
|
} catch (err) {
|
|
659
1074
|
throw new Error(
|
|
660
1075
|
`Failed to register font "${desc.family}": ${err instanceof Error ? err.message : String(err)}`
|
|
@@ -797,6 +1212,21 @@ var FontRegistry = class _FontRegistry {
|
|
|
797
1212
|
);
|
|
798
1213
|
}
|
|
799
1214
|
}
|
|
1215
|
+
async registerWithCanvas(family, bytes) {
|
|
1216
|
+
if (this.registeredCanvasFonts.has(family)) {
|
|
1217
|
+
return;
|
|
1218
|
+
}
|
|
1219
|
+
try {
|
|
1220
|
+
const canvasMod = await import("canvas");
|
|
1221
|
+
const GlobalFonts = canvasMod.GlobalFonts;
|
|
1222
|
+
if (GlobalFonts && typeof GlobalFonts.register === "function") {
|
|
1223
|
+
const buffer = Buffer.from(bytes);
|
|
1224
|
+
GlobalFonts.register(buffer, family);
|
|
1225
|
+
this.registeredCanvasFonts.add(family);
|
|
1226
|
+
}
|
|
1227
|
+
} catch {
|
|
1228
|
+
}
|
|
1229
|
+
}
|
|
800
1230
|
destroy() {
|
|
801
1231
|
try {
|
|
802
1232
|
for (const [, f] of this.fonts) {
|
|
@@ -833,6 +1263,7 @@ var FontRegistry = class _FontRegistry {
|
|
|
833
1263
|
this.fontkitBaseFonts.clear();
|
|
834
1264
|
this.colorEmojiFonts.clear();
|
|
835
1265
|
this.colorEmojiFontBytes.clear();
|
|
1266
|
+
this.registeredCanvasFonts.clear();
|
|
836
1267
|
this.hb = void 0;
|
|
837
1268
|
this.initPromise = void 0;
|
|
838
1269
|
} catch (err) {
|
|
@@ -1969,12 +2400,14 @@ async function createNodePainter(opts) {
|
|
|
1969
2400
|
if (!ctx) throw new Error("2D context unavailable in Node (canvas).");
|
|
1970
2401
|
const offscreenCanvas = createCanvas(canvas.width, canvas.height);
|
|
1971
2402
|
const offscreenCtx = offscreenCanvas.getContext("2d");
|
|
2403
|
+
const GRADIENT_CACHE_MAX = 500;
|
|
1972
2404
|
const gradientCache = /* @__PURE__ */ new Map();
|
|
1973
2405
|
const api = {
|
|
1974
2406
|
async render(ops) {
|
|
1975
2407
|
const globalBox = computeGlobalTextBounds(ops);
|
|
1976
2408
|
let needsAlphaExtraction = false;
|
|
1977
|
-
for (
|
|
2409
|
+
for (let i = 0; i < ops.length; i++) {
|
|
2410
|
+
const op = ops[i];
|
|
1978
2411
|
if (op.op === "BeginFrame") {
|
|
1979
2412
|
const dpr = op.pixelRatio ?? opts.pixelRatio;
|
|
1980
2413
|
const wantW = Math.floor(op.width);
|
|
@@ -1986,7 +2419,9 @@ async function createNodePainter(opts) {
|
|
|
1986
2419
|
offscreenCanvas.height = wantH;
|
|
1987
2420
|
}
|
|
1988
2421
|
ctx.setTransform(1, 0, 0, 1, 0, 0);
|
|
2422
|
+
ctx.globalAlpha = 1;
|
|
1989
2423
|
offscreenCtx.setTransform(1, 0, 0, 1, 0, 0);
|
|
2424
|
+
offscreenCtx.globalAlpha = 1;
|
|
1990
2425
|
const hasBackground = !!(op.bg && op.bg.color);
|
|
1991
2426
|
const hasRoundedBackground = hasBackground && op.bg && op.bg.radius && op.bg.radius > 0;
|
|
1992
2427
|
needsAlphaExtraction = !!hasRoundedBackground;
|
|
@@ -2119,7 +2554,7 @@ async function createNodePainter(opts) {
|
|
|
2119
2554
|
context.save();
|
|
2120
2555
|
const c = parseHex6(op.stroke.color, op.stroke.opacity);
|
|
2121
2556
|
context.strokeStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
|
|
2122
|
-
context.lineWidth = op.stroke.width;
|
|
2557
|
+
context.lineWidth = op.stroke.width * 2;
|
|
2123
2558
|
if (op.borderRadius && op.borderRadius > 0) {
|
|
2124
2559
|
context.beginPath();
|
|
2125
2560
|
roundRectPath(context, op.x, op.y, op.width, op.height, op.borderRadius);
|
|
@@ -2222,6 +2657,140 @@ async function createNodePainter(opts) {
|
|
|
2222
2657
|
});
|
|
2223
2658
|
continue;
|
|
2224
2659
|
}
|
|
2660
|
+
if (op.op === "DrawCaptionBackground") {
|
|
2661
|
+
renderToBoth((context) => {
|
|
2662
|
+
context.save();
|
|
2663
|
+
const bgC = parseHex6(op.color, op.opacity);
|
|
2664
|
+
context.fillStyle = `rgba(${bgC.r},${bgC.g},${bgC.b},${bgC.a})`;
|
|
2665
|
+
context.beginPath();
|
|
2666
|
+
roundRectPath(context, op.x, op.y, op.width, op.height, op.borderRadius);
|
|
2667
|
+
context.fill();
|
|
2668
|
+
context.restore();
|
|
2669
|
+
});
|
|
2670
|
+
continue;
|
|
2671
|
+
}
|
|
2672
|
+
if (op.op === "DrawCaptionWord") {
|
|
2673
|
+
const captionWordOps = [op];
|
|
2674
|
+
while (i + 1 < ops.length) {
|
|
2675
|
+
const nextOp = ops[i + 1];
|
|
2676
|
+
if (nextOp.op !== "DrawCaptionWord") break;
|
|
2677
|
+
captionWordOps.push(nextOp);
|
|
2678
|
+
i++;
|
|
2679
|
+
}
|
|
2680
|
+
renderToBoth((context) => {
|
|
2681
|
+
for (const wordOp of captionWordOps) {
|
|
2682
|
+
if (!wordOp.background) continue;
|
|
2683
|
+
const wordDisplayText = wordOp.visibleCharacters >= 0 && wordOp.visibleCharacters < wordOp.text.length ? wordOp.text.slice(0, wordOp.visibleCharacters) : wordOp.text;
|
|
2684
|
+
if (wordDisplayText.length === 0) continue;
|
|
2685
|
+
context.save();
|
|
2686
|
+
const bgTx = Math.round(wordOp.x + wordOp.transform.translateX);
|
|
2687
|
+
const bgTy = Math.round(wordOp.y + wordOp.transform.translateY);
|
|
2688
|
+
context.translate(bgTx, bgTy);
|
|
2689
|
+
if (wordOp.transform.scale !== 1) {
|
|
2690
|
+
const halfWidth = wordOp.width / 2;
|
|
2691
|
+
context.translate(halfWidth, 0);
|
|
2692
|
+
context.scale(wordOp.transform.scale, wordOp.transform.scale);
|
|
2693
|
+
context.translate(-halfWidth, 0);
|
|
2694
|
+
}
|
|
2695
|
+
context.globalAlpha = wordOp.transform.opacity;
|
|
2696
|
+
context.font = `${wordOp.fontWeight} ${wordOp.fontSize}px "${wordOp.fontFamily}"`;
|
|
2697
|
+
context.textBaseline = "alphabetic";
|
|
2698
|
+
if (wordOp.letterSpacing) {
|
|
2699
|
+
context.letterSpacing = `${wordOp.letterSpacing}px`;
|
|
2700
|
+
}
|
|
2701
|
+
const bgMetrics = context.measureText(wordDisplayText);
|
|
2702
|
+
const bgTextWidth = bgMetrics.width;
|
|
2703
|
+
const bgAscent = wordOp.fontSize * 0.8;
|
|
2704
|
+
const bgDescent = wordOp.fontSize * 0.2;
|
|
2705
|
+
const bgTextHeight = bgAscent + bgDescent;
|
|
2706
|
+
const bgX = -wordOp.background.padding;
|
|
2707
|
+
const bgY = -bgAscent - wordOp.background.padding;
|
|
2708
|
+
const bgW = bgTextWidth + wordOp.background.padding * 2;
|
|
2709
|
+
const bgH = bgTextHeight + wordOp.background.padding * 2;
|
|
2710
|
+
const bgC = parseHex6(wordOp.background.color, wordOp.background.opacity);
|
|
2711
|
+
context.fillStyle = `rgba(${bgC.r},${bgC.g},${bgC.b},${bgC.a})`;
|
|
2712
|
+
context.beginPath();
|
|
2713
|
+
roundRectPath(context, bgX, bgY, bgW, bgH, wordOp.background.borderRadius);
|
|
2714
|
+
context.fill();
|
|
2715
|
+
context.restore();
|
|
2716
|
+
}
|
|
2717
|
+
for (const wordOp of captionWordOps) {
|
|
2718
|
+
const displayText = wordOp.visibleCharacters >= 0 && wordOp.visibleCharacters < wordOp.text.length ? wordOp.text.slice(0, wordOp.visibleCharacters) : wordOp.text;
|
|
2719
|
+
if (displayText.length === 0) continue;
|
|
2720
|
+
context.save();
|
|
2721
|
+
const tx = Math.round(wordOp.x + wordOp.transform.translateX);
|
|
2722
|
+
const ty = Math.round(wordOp.y + wordOp.transform.translateY);
|
|
2723
|
+
context.translate(tx, ty);
|
|
2724
|
+
if (wordOp.transform.scale !== 1) {
|
|
2725
|
+
const halfWidth = wordOp.width / 2;
|
|
2726
|
+
context.translate(halfWidth, 0);
|
|
2727
|
+
context.scale(wordOp.transform.scale, wordOp.transform.scale);
|
|
2728
|
+
context.translate(-halfWidth, 0);
|
|
2729
|
+
}
|
|
2730
|
+
context.globalAlpha = wordOp.transform.opacity;
|
|
2731
|
+
context.font = `${wordOp.fontWeight} ${wordOp.fontSize}px "${wordOp.fontFamily}"`;
|
|
2732
|
+
context.textBaseline = "alphabetic";
|
|
2733
|
+
if (wordOp.letterSpacing) {
|
|
2734
|
+
context.letterSpacing = `${wordOp.letterSpacing}px`;
|
|
2735
|
+
}
|
|
2736
|
+
const metrics = context.measureText(displayText);
|
|
2737
|
+
const textWidth = metrics.width;
|
|
2738
|
+
const ascent = metrics.actualBoundingBoxAscent ?? wordOp.fontSize * 0.8;
|
|
2739
|
+
const descent = metrics.actualBoundingBoxDescent ?? wordOp.fontSize * 0.2;
|
|
2740
|
+
const textHeight = ascent + descent;
|
|
2741
|
+
if (wordOp.shadow) {
|
|
2742
|
+
const shadowC = parseHex6(wordOp.shadow.color, wordOp.shadow.opacity);
|
|
2743
|
+
context.fillStyle = `rgba(${shadowC.r},${shadowC.g},${shadowC.b},${shadowC.a})`;
|
|
2744
|
+
context.shadowColor = `rgba(${shadowC.r},${shadowC.g},${shadowC.b},${shadowC.a})`;
|
|
2745
|
+
context.shadowOffsetX = wordOp.shadow.offsetX;
|
|
2746
|
+
context.shadowOffsetY = wordOp.shadow.offsetY;
|
|
2747
|
+
context.shadowBlur = wordOp.shadow.blur;
|
|
2748
|
+
context.fillText(displayText, 0, 0);
|
|
2749
|
+
context.shadowColor = "transparent";
|
|
2750
|
+
context.shadowOffsetX = 0;
|
|
2751
|
+
context.shadowOffsetY = 0;
|
|
2752
|
+
context.shadowBlur = 0;
|
|
2753
|
+
}
|
|
2754
|
+
if (wordOp.stroke && wordOp.stroke.width > 0) {
|
|
2755
|
+
const strokeC = parseHex6(wordOp.stroke.color, wordOp.stroke.opacity);
|
|
2756
|
+
context.strokeStyle = `rgba(${strokeC.r},${strokeC.g},${strokeC.b},${strokeC.a})`;
|
|
2757
|
+
context.lineWidth = wordOp.stroke.width * 2;
|
|
2758
|
+
context.lineJoin = "round";
|
|
2759
|
+
context.lineCap = "round";
|
|
2760
|
+
context.strokeText(displayText, 0, 0);
|
|
2761
|
+
}
|
|
2762
|
+
if (wordOp.fillProgress <= 0) {
|
|
2763
|
+
const baseC = parseHex6(wordOp.baseColor, wordOp.baseOpacity);
|
|
2764
|
+
context.fillStyle = `rgba(${baseC.r},${baseC.g},${baseC.b},${baseC.a})`;
|
|
2765
|
+
context.fillText(displayText, 0, 0);
|
|
2766
|
+
} else if (wordOp.fillProgress >= 1) {
|
|
2767
|
+
const activeC = parseHex6(wordOp.activeColor, wordOp.activeOpacity);
|
|
2768
|
+
context.fillStyle = `rgba(${activeC.r},${activeC.g},${activeC.b},${activeC.a})`;
|
|
2769
|
+
context.fillText(displayText, 0, 0);
|
|
2770
|
+
} else {
|
|
2771
|
+
const baseC = parseHex6(wordOp.baseColor, wordOp.baseOpacity);
|
|
2772
|
+
context.fillStyle = `rgba(${baseC.r},${baseC.g},${baseC.b},${baseC.a})`;
|
|
2773
|
+
context.fillText(displayText, 0, 0);
|
|
2774
|
+
context.save();
|
|
2775
|
+
context.beginPath();
|
|
2776
|
+
const clipWidth = textWidth * wordOp.fillProgress;
|
|
2777
|
+
if (wordOp.isRTL) {
|
|
2778
|
+
const clipX = textWidth - clipWidth;
|
|
2779
|
+
context.rect(clipX, -ascent - 5, clipWidth + 5, textHeight + 10);
|
|
2780
|
+
} else {
|
|
2781
|
+
context.rect(-5, -ascent - 5, clipWidth + 5, textHeight + 10);
|
|
2782
|
+
}
|
|
2783
|
+
context.clip();
|
|
2784
|
+
const activeC = parseHex6(wordOp.activeColor, wordOp.activeOpacity);
|
|
2785
|
+
context.fillStyle = `rgba(${activeC.r},${activeC.g},${activeC.b},${activeC.a})`;
|
|
2786
|
+
context.fillText(displayText, 0, 0);
|
|
2787
|
+
context.restore();
|
|
2788
|
+
}
|
|
2789
|
+
context.restore();
|
|
2790
|
+
}
|
|
2791
|
+
});
|
|
2792
|
+
continue;
|
|
2793
|
+
}
|
|
2225
2794
|
}
|
|
2226
2795
|
if (needsAlphaExtraction) {
|
|
2227
2796
|
const whiteData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
|
@@ -2259,6 +2828,17 @@ async function createNodePainter(opts) {
|
|
|
2259
2828
|
},
|
|
2260
2829
|
async toPNG() {
|
|
2261
2830
|
return canvas.toBuffer("image/png");
|
|
2831
|
+
},
|
|
2832
|
+
toRawRGBA() {
|
|
2833
|
+
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
|
2834
|
+
return {
|
|
2835
|
+
data: new Uint8ClampedArray(imageData.data),
|
|
2836
|
+
width: canvas.width,
|
|
2837
|
+
height: canvas.height
|
|
2838
|
+
};
|
|
2839
|
+
},
|
|
2840
|
+
getCanvasSize() {
|
|
2841
|
+
return { width: canvas.width, height: canvas.height };
|
|
2262
2842
|
}
|
|
2263
2843
|
};
|
|
2264
2844
|
return api;
|
|
@@ -2721,14 +3301,6 @@ var VideoGenerator = class {
|
|
|
2721
3301
|
}
|
|
2722
3302
|
};
|
|
2723
3303
|
|
|
2724
|
-
// src/types.ts
|
|
2725
|
-
var isShadowFill2 = (op) => {
|
|
2726
|
-
return op.op === "FillPath" && op.isShadow === true;
|
|
2727
|
-
};
|
|
2728
|
-
var isGlyphFill2 = (op) => {
|
|
2729
|
-
return op.op === "FillPath" && op.isShadow !== true;
|
|
2730
|
-
};
|
|
2731
|
-
|
|
2732
3304
|
// src/core/svg-path-utils.ts
|
|
2733
3305
|
var TAU = Math.PI * 2;
|
|
2734
3306
|
var PATH_COMMAND_REGEX = /([MmLlHhVvCcSsQqTtAaZz])([^MmLlHhVvCcSsQqTtAaZz]*)/g;
|
|
@@ -3673,6 +4245,1987 @@ function extractSvgDimensions(svgString) {
|
|
|
3673
4245
|
return { width, height };
|
|
3674
4246
|
}
|
|
3675
4247
|
|
|
4248
|
+
// src/core/rich-caption-layout.ts
|
|
4249
|
+
var import_lru_cache = require("lru-cache");
|
|
4250
|
+
var RTL_RANGES = /[\u0590-\u05FF\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF]/;
|
|
4251
|
+
function isRTLText(text) {
|
|
4252
|
+
return RTL_RANGES.test(text);
|
|
4253
|
+
}
|
|
4254
|
+
var WordTimingStore = class {
|
|
4255
|
+
startTimes;
|
|
4256
|
+
endTimes;
|
|
4257
|
+
xPositions;
|
|
4258
|
+
yPositions;
|
|
4259
|
+
widths;
|
|
4260
|
+
words;
|
|
4261
|
+
length;
|
|
4262
|
+
constructor(words) {
|
|
4263
|
+
this.length = words.length;
|
|
4264
|
+
this.startTimes = new Uint32Array(this.length);
|
|
4265
|
+
this.endTimes = new Uint32Array(this.length);
|
|
4266
|
+
this.xPositions = new Float32Array(this.length);
|
|
4267
|
+
this.yPositions = new Float32Array(this.length);
|
|
4268
|
+
this.widths = new Float32Array(this.length);
|
|
4269
|
+
this.words = new Array(this.length);
|
|
4270
|
+
for (let i = 0; i < this.length; i++) {
|
|
4271
|
+
this.startTimes[i] = Math.floor(words[i].start);
|
|
4272
|
+
this.endTimes[i] = Math.floor(words[i].end);
|
|
4273
|
+
this.words[i] = words[i].text;
|
|
4274
|
+
}
|
|
4275
|
+
}
|
|
4276
|
+
};
|
|
4277
|
+
function findWordAtTime(store, timeMs) {
|
|
4278
|
+
let left = 0;
|
|
4279
|
+
let right = store.length - 1;
|
|
4280
|
+
while (left <= right) {
|
|
4281
|
+
const mid = left + right >>> 1;
|
|
4282
|
+
const start = store.startTimes[mid];
|
|
4283
|
+
const end = store.endTimes[mid];
|
|
4284
|
+
if (timeMs >= start && timeMs < end) {
|
|
4285
|
+
return mid;
|
|
4286
|
+
}
|
|
4287
|
+
if (timeMs < start) {
|
|
4288
|
+
right = mid - 1;
|
|
4289
|
+
} else {
|
|
4290
|
+
left = mid + 1;
|
|
4291
|
+
}
|
|
4292
|
+
}
|
|
4293
|
+
return -1;
|
|
4294
|
+
}
|
|
4295
|
+
function groupWordsByPause(store, pauseThreshold = 500) {
|
|
4296
|
+
if (store.length === 0) {
|
|
4297
|
+
return [];
|
|
4298
|
+
}
|
|
4299
|
+
const groups = [];
|
|
4300
|
+
let currentGroup = [];
|
|
4301
|
+
for (let i = 0; i < store.length; i++) {
|
|
4302
|
+
if (currentGroup.length === 0) {
|
|
4303
|
+
currentGroup.push(i);
|
|
4304
|
+
continue;
|
|
4305
|
+
}
|
|
4306
|
+
const prevEnd = store.endTimes[currentGroup[currentGroup.length - 1]];
|
|
4307
|
+
const currStart = store.startTimes[i];
|
|
4308
|
+
const gap = currStart - prevEnd;
|
|
4309
|
+
const prevText = store.words[currentGroup[currentGroup.length - 1]];
|
|
4310
|
+
const endsWithPunctuation = /[.!?]$/.test(prevText);
|
|
4311
|
+
if (gap >= pauseThreshold || endsWithPunctuation) {
|
|
4312
|
+
groups.push(currentGroup);
|
|
4313
|
+
currentGroup = [i];
|
|
4314
|
+
} else {
|
|
4315
|
+
currentGroup.push(i);
|
|
4316
|
+
}
|
|
4317
|
+
}
|
|
4318
|
+
if (currentGroup.length > 0) {
|
|
4319
|
+
groups.push(currentGroup);
|
|
4320
|
+
}
|
|
4321
|
+
return groups;
|
|
4322
|
+
}
|
|
4323
|
+
function breakIntoLines(wordWidths, maxWidth, maxLines, spaceWidth) {
|
|
4324
|
+
const lines = [];
|
|
4325
|
+
let currentLine = [];
|
|
4326
|
+
let currentWidth = 0;
|
|
4327
|
+
for (let i = 0; i < wordWidths.length; i++) {
|
|
4328
|
+
const wordWidth = wordWidths[i];
|
|
4329
|
+
const spaceNeeded = currentLine.length > 0 ? spaceWidth : 0;
|
|
4330
|
+
if (currentWidth + spaceNeeded + wordWidth <= maxWidth) {
|
|
4331
|
+
currentLine.push(i);
|
|
4332
|
+
currentWidth += spaceNeeded + wordWidth;
|
|
4333
|
+
} else {
|
|
4334
|
+
if (currentLine.length > 0) {
|
|
4335
|
+
lines.push(currentLine);
|
|
4336
|
+
if (lines.length >= maxLines) {
|
|
4337
|
+
return lines;
|
|
4338
|
+
}
|
|
4339
|
+
}
|
|
4340
|
+
currentLine = [i];
|
|
4341
|
+
currentWidth = wordWidth;
|
|
4342
|
+
}
|
|
4343
|
+
}
|
|
4344
|
+
if (currentLine.length > 0 && lines.length < maxLines) {
|
|
4345
|
+
lines.push(currentLine);
|
|
4346
|
+
}
|
|
4347
|
+
return lines;
|
|
4348
|
+
}
|
|
4349
|
+
var GLYPH_SIZE_ESTIMATE = 64;
|
|
4350
|
+
function createShapedWordCache() {
|
|
4351
|
+
return new import_lru_cache.LRUCache({
|
|
4352
|
+
max: 5e4,
|
|
4353
|
+
maxSize: 50 * 1024 * 1024,
|
|
4354
|
+
maxEntrySize: 100 * 1024,
|
|
4355
|
+
sizeCalculation: (value, key) => {
|
|
4356
|
+
const keySize = key.length * 2;
|
|
4357
|
+
const glyphsSize = value.glyphs.length * GLYPH_SIZE_ESTIMATE;
|
|
4358
|
+
return keySize + glyphsSize + 100;
|
|
4359
|
+
}
|
|
4360
|
+
});
|
|
4361
|
+
}
|
|
4362
|
+
function makeShapingKey(text, fontFamily, fontSize, fontWeight, letterSpacing = 0) {
|
|
4363
|
+
return `${text}\0${fontFamily}\0${fontSize}\0${fontWeight}\0${letterSpacing}`;
|
|
4364
|
+
}
|
|
4365
|
+
function transformText(text, transform) {
|
|
4366
|
+
switch (transform) {
|
|
4367
|
+
case "uppercase":
|
|
4368
|
+
return text.toUpperCase();
|
|
4369
|
+
case "lowercase":
|
|
4370
|
+
return text.toLowerCase();
|
|
4371
|
+
case "capitalize":
|
|
4372
|
+
return text.replace(/\b\w/g, (c) => c.toUpperCase());
|
|
4373
|
+
default:
|
|
4374
|
+
return text;
|
|
4375
|
+
}
|
|
4376
|
+
}
|
|
4377
|
+
var CaptionLayoutEngine = class {
|
|
4378
|
+
fontRegistry;
|
|
4379
|
+
cache;
|
|
4380
|
+
layoutEngine;
|
|
4381
|
+
constructor(fontRegistry) {
|
|
4382
|
+
this.fontRegistry = fontRegistry;
|
|
4383
|
+
this.cache = createShapedWordCache();
|
|
4384
|
+
this.layoutEngine = new LayoutEngine(fontRegistry);
|
|
4385
|
+
}
|
|
4386
|
+
async measureWord(text, config) {
|
|
4387
|
+
const transformedText = transformText(text, config.textTransform);
|
|
4388
|
+
const cacheKey = makeShapingKey(
|
|
4389
|
+
transformedText,
|
|
4390
|
+
config.fontFamily,
|
|
4391
|
+
config.fontSize,
|
|
4392
|
+
config.fontWeight,
|
|
4393
|
+
config.letterSpacing
|
|
4394
|
+
);
|
|
4395
|
+
const cached = this.cache.get(cacheKey);
|
|
4396
|
+
if (cached) {
|
|
4397
|
+
return cached;
|
|
4398
|
+
}
|
|
4399
|
+
const lines = await this.layoutEngine.layout({
|
|
4400
|
+
text: transformedText,
|
|
4401
|
+
width: 1e5,
|
|
4402
|
+
letterSpacing: config.letterSpacing,
|
|
4403
|
+
fontSize: config.fontSize,
|
|
4404
|
+
lineHeight: 1,
|
|
4405
|
+
desc: { family: config.fontFamily, weight: config.fontWeight },
|
|
4406
|
+
textTransform: "none"
|
|
4407
|
+
});
|
|
4408
|
+
const width = lines[0]?.width ?? 0;
|
|
4409
|
+
const glyphs = lines[0]?.glyphs ?? [];
|
|
4410
|
+
const isRTL = isRTLText(transformedText);
|
|
4411
|
+
const shaped = {
|
|
4412
|
+
text: transformedText,
|
|
4413
|
+
width,
|
|
4414
|
+
glyphs: glyphs.map((g) => ({
|
|
4415
|
+
id: g.id,
|
|
4416
|
+
xAdvance: g.xAdvance,
|
|
4417
|
+
xOffset: g.xOffset,
|
|
4418
|
+
yOffset: g.yOffset,
|
|
4419
|
+
cluster: g.cluster
|
|
4420
|
+
})),
|
|
4421
|
+
isRTL
|
|
4422
|
+
};
|
|
4423
|
+
this.cache.set(cacheKey, shaped);
|
|
4424
|
+
return shaped;
|
|
4425
|
+
}
|
|
4426
|
+
async layoutCaption(words, config) {
|
|
4427
|
+
const store = new WordTimingStore(words);
|
|
4428
|
+
const measurementConfig = {
|
|
4429
|
+
fontFamily: config.fontFamily,
|
|
4430
|
+
fontSize: config.fontSize,
|
|
4431
|
+
fontWeight: config.fontWeight,
|
|
4432
|
+
letterSpacing: config.letterSpacing,
|
|
4433
|
+
textTransform: config.textTransform
|
|
4434
|
+
};
|
|
4435
|
+
const shapedWords = await Promise.all(
|
|
4436
|
+
words.map((w) => this.measureWord(w.text, measurementConfig))
|
|
4437
|
+
);
|
|
4438
|
+
if (config.measureTextWidth) {
|
|
4439
|
+
const fontString = `${config.fontWeight} ${config.fontSize}px "${config.fontFamily}"`;
|
|
4440
|
+
for (let i = 0; i < shapedWords.length; i++) {
|
|
4441
|
+
store.widths[i] = config.measureTextWidth(shapedWords[i].text, fontString);
|
|
4442
|
+
}
|
|
4443
|
+
} else {
|
|
4444
|
+
for (let i = 0; i < shapedWords.length; i++) {
|
|
4445
|
+
store.widths[i] = shapedWords[i].width;
|
|
4446
|
+
}
|
|
4447
|
+
}
|
|
4448
|
+
if (config.textTransform !== "none") {
|
|
4449
|
+
for (let i = 0; i < shapedWords.length; i++) {
|
|
4450
|
+
store.words[i] = shapedWords[i].text;
|
|
4451
|
+
}
|
|
4452
|
+
}
|
|
4453
|
+
const wordGroups = groupWordsByPause(store, config.pauseThreshold);
|
|
4454
|
+
const pixelMaxWidth = config.frameWidth * config.maxWidth;
|
|
4455
|
+
let spaceWidth;
|
|
4456
|
+
if (config.measureTextWidth) {
|
|
4457
|
+
const fontString = `${config.fontWeight} ${config.fontSize}px "${config.fontFamily}"`;
|
|
4458
|
+
spaceWidth = config.measureTextWidth(" ", fontString) + config.wordSpacing;
|
|
4459
|
+
} else {
|
|
4460
|
+
const spaceWord = await this.measureWord(" ", measurementConfig);
|
|
4461
|
+
spaceWidth = spaceWord.width + config.wordSpacing;
|
|
4462
|
+
}
|
|
4463
|
+
const groups = wordGroups.map((indices) => {
|
|
4464
|
+
const groupWidths = indices.map((i) => store.widths[i]);
|
|
4465
|
+
const lineIndices = breakIntoLines(
|
|
4466
|
+
groupWidths,
|
|
4467
|
+
pixelMaxWidth,
|
|
4468
|
+
config.maxLines,
|
|
4469
|
+
spaceWidth
|
|
4470
|
+
);
|
|
4471
|
+
const lines = lineIndices.map((lineWordIndices, lineIndex) => {
|
|
4472
|
+
const actualIndices = lineWordIndices.map((i) => indices[i]);
|
|
4473
|
+
const lineWidth = actualIndices.reduce((sum, idx) => sum + store.widths[idx], 0) + (actualIndices.length - 1) * spaceWidth;
|
|
4474
|
+
return {
|
|
4475
|
+
wordIndices: actualIndices,
|
|
4476
|
+
x: 0,
|
|
4477
|
+
y: lineIndex * config.fontSize * config.lineHeight,
|
|
4478
|
+
width: lineWidth,
|
|
4479
|
+
height: config.fontSize
|
|
4480
|
+
};
|
|
4481
|
+
});
|
|
4482
|
+
return {
|
|
4483
|
+
wordIndices: lines.flatMap((l) => l.wordIndices),
|
|
4484
|
+
startTime: store.startTimes[indices[0]],
|
|
4485
|
+
endTime: store.endTimes[indices[indices.length - 1]],
|
|
4486
|
+
lines
|
|
4487
|
+
};
|
|
4488
|
+
});
|
|
4489
|
+
const calculateGroupY = (group) => {
|
|
4490
|
+
const totalHeight = group.lines.length * config.fontSize * config.lineHeight;
|
|
4491
|
+
switch (config.position) {
|
|
4492
|
+
case "top":
|
|
4493
|
+
return config.fontSize * 1.5;
|
|
4494
|
+
case "bottom":
|
|
4495
|
+
return config.frameHeight - totalHeight - config.fontSize * 0.5;
|
|
4496
|
+
case "center":
|
|
4497
|
+
default:
|
|
4498
|
+
return (config.frameHeight - totalHeight) / 2 + config.fontSize;
|
|
4499
|
+
}
|
|
4500
|
+
};
|
|
4501
|
+
for (const group of groups) {
|
|
4502
|
+
const baseY = calculateGroupY(group);
|
|
4503
|
+
for (let lineIdx = 0; lineIdx < group.lines.length; lineIdx++) {
|
|
4504
|
+
const line = group.lines[lineIdx];
|
|
4505
|
+
line.x = (config.frameWidth - line.width) / 2;
|
|
4506
|
+
line.y = baseY + lineIdx * config.fontSize * config.lineHeight;
|
|
4507
|
+
let xCursor = line.x;
|
|
4508
|
+
for (const wordIdx of line.wordIndices) {
|
|
4509
|
+
store.xPositions[wordIdx] = xCursor;
|
|
4510
|
+
store.yPositions[wordIdx] = line.y;
|
|
4511
|
+
xCursor += store.widths[wordIdx] + spaceWidth;
|
|
4512
|
+
}
|
|
4513
|
+
}
|
|
4514
|
+
}
|
|
4515
|
+
return {
|
|
4516
|
+
store,
|
|
4517
|
+
groups,
|
|
4518
|
+
shapedWords
|
|
4519
|
+
};
|
|
4520
|
+
}
|
|
4521
|
+
getVisibleWordsAtTime(layout, timeMs) {
|
|
4522
|
+
const activeGroup = layout.groups.find(
|
|
4523
|
+
(g) => timeMs >= g.startTime && timeMs <= g.endTime
|
|
4524
|
+
);
|
|
4525
|
+
if (!activeGroup) {
|
|
4526
|
+
return [];
|
|
4527
|
+
}
|
|
4528
|
+
return activeGroup.wordIndices.map((idx) => ({
|
|
4529
|
+
wordIndex: idx,
|
|
4530
|
+
text: layout.store.words[idx],
|
|
4531
|
+
x: layout.store.xPositions[idx],
|
|
4532
|
+
y: layout.store.yPositions[idx],
|
|
4533
|
+
width: layout.store.widths[idx],
|
|
4534
|
+
startTime: layout.store.startTimes[idx],
|
|
4535
|
+
endTime: layout.store.endTimes[idx],
|
|
4536
|
+
isRTL: layout.shapedWords[idx].isRTL
|
|
4537
|
+
}));
|
|
4538
|
+
}
|
|
4539
|
+
getActiveWordAtTime(layout, timeMs) {
|
|
4540
|
+
const wordIndex = findWordAtTime(layout.store, timeMs);
|
|
4541
|
+
if (wordIndex === -1) {
|
|
4542
|
+
return null;
|
|
4543
|
+
}
|
|
4544
|
+
return {
|
|
4545
|
+
wordIndex,
|
|
4546
|
+
text: layout.store.words[wordIndex],
|
|
4547
|
+
x: layout.store.xPositions[wordIndex],
|
|
4548
|
+
y: layout.store.yPositions[wordIndex],
|
|
4549
|
+
width: layout.store.widths[wordIndex],
|
|
4550
|
+
startTime: layout.store.startTimes[wordIndex],
|
|
4551
|
+
endTime: layout.store.endTimes[wordIndex],
|
|
4552
|
+
isRTL: layout.shapedWords[wordIndex].isRTL
|
|
4553
|
+
};
|
|
4554
|
+
}
|
|
4555
|
+
clearCache() {
|
|
4556
|
+
this.cache.clear();
|
|
4557
|
+
}
|
|
4558
|
+
getCacheStats() {
|
|
4559
|
+
return {
|
|
4560
|
+
size: this.cache.size,
|
|
4561
|
+
calculatedSize: this.cache.calculatedSize
|
|
4562
|
+
};
|
|
4563
|
+
}
|
|
4564
|
+
};
|
|
4565
|
+
|
|
4566
|
+
// src/core/rich-caption-animator.ts
|
|
4567
|
+
var ANIMATION_DURATIONS = {
|
|
4568
|
+
karaoke: 0,
|
|
4569
|
+
highlight: 0,
|
|
4570
|
+
pop: 200,
|
|
4571
|
+
fade: 150,
|
|
4572
|
+
slide: 250,
|
|
4573
|
+
bounce: 400,
|
|
4574
|
+
typewriter: 0,
|
|
4575
|
+
none: 0
|
|
4576
|
+
};
|
|
4577
|
+
var DEFAULT_ANIMATION_STATE = {
|
|
4578
|
+
opacity: 1,
|
|
4579
|
+
scale: 1,
|
|
4580
|
+
translateX: 0,
|
|
4581
|
+
translateY: 0,
|
|
4582
|
+
fillProgress: 1,
|
|
4583
|
+
isActive: false,
|
|
4584
|
+
visibleCharacters: -1
|
|
4585
|
+
};
|
|
4586
|
+
function easeOutQuad2(t) {
|
|
4587
|
+
return t * (2 - t);
|
|
4588
|
+
}
|
|
4589
|
+
function easeInOutQuad(t) {
|
|
4590
|
+
return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
|
|
4591
|
+
}
|
|
4592
|
+
function easeOutBack(t) {
|
|
4593
|
+
const c1 = 1.70158;
|
|
4594
|
+
const c3 = c1 + 1;
|
|
4595
|
+
return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
|
|
4596
|
+
}
|
|
4597
|
+
function easeOutCirc(t) {
|
|
4598
|
+
return Math.sqrt(1 - Math.pow(t - 1, 2));
|
|
4599
|
+
}
|
|
4600
|
+
function easeOutBounce(t) {
|
|
4601
|
+
const n1 = 7.5625;
|
|
4602
|
+
const d1 = 2.75;
|
|
4603
|
+
if (t < 1 / d1) {
|
|
4604
|
+
return n1 * t * t;
|
|
4605
|
+
}
|
|
4606
|
+
if (t < 2 / d1) {
|
|
4607
|
+
return n1 * (t -= 1.5 / d1) * t + 0.75;
|
|
4608
|
+
}
|
|
4609
|
+
if (t < 2.5 / d1) {
|
|
4610
|
+
return n1 * (t -= 2.25 / d1) * t + 0.9375;
|
|
4611
|
+
}
|
|
4612
|
+
return n1 * (t -= 2.625 / d1) * t + 0.984375;
|
|
4613
|
+
}
|
|
4614
|
+
function clamp(value, min, max) {
|
|
4615
|
+
return Math.min(Math.max(value, min), max);
|
|
4616
|
+
}
|
|
4617
|
+
function calculateAnimationProgress(ctx) {
|
|
4618
|
+
if (ctx.animationDuration <= 0) {
|
|
4619
|
+
return ctx.currentTime >= ctx.wordStart ? 1 : 0;
|
|
4620
|
+
}
|
|
4621
|
+
const elapsed = ctx.currentTime - ctx.wordStart;
|
|
4622
|
+
return clamp(elapsed / ctx.animationDuration, 0, 1);
|
|
4623
|
+
}
|
|
4624
|
+
function calculateWordProgress(ctx) {
|
|
4625
|
+
const duration = ctx.wordEnd - ctx.wordStart;
|
|
4626
|
+
if (duration <= 0) {
|
|
4627
|
+
return ctx.currentTime >= ctx.wordStart ? 1 : 0;
|
|
4628
|
+
}
|
|
4629
|
+
const elapsed = ctx.currentTime - ctx.wordStart;
|
|
4630
|
+
return clamp(elapsed / duration, 0, 1);
|
|
4631
|
+
}
|
|
4632
|
+
function isWordActive(ctx) {
|
|
4633
|
+
return ctx.currentTime >= ctx.wordStart && ctx.currentTime < ctx.wordEnd;
|
|
4634
|
+
}
|
|
4635
|
+
function calculateKaraokeState(ctx, speed) {
|
|
4636
|
+
const isActive = isWordActive(ctx);
|
|
4637
|
+
const wordDuration = ctx.wordEnd - ctx.wordStart;
|
|
4638
|
+
const adjustedDuration = wordDuration / speed;
|
|
4639
|
+
const adjustedEnd = ctx.wordStart + adjustedDuration;
|
|
4640
|
+
const adjustedCtx = { ...ctx, wordEnd: adjustedEnd };
|
|
4641
|
+
if (ctx.currentTime < ctx.wordStart) {
|
|
4642
|
+
return {
|
|
4643
|
+
fillProgress: 0,
|
|
4644
|
+
isActive: false,
|
|
4645
|
+
opacity: 1
|
|
4646
|
+
};
|
|
4647
|
+
}
|
|
4648
|
+
if (ctx.currentTime >= adjustedEnd) {
|
|
4649
|
+
return {
|
|
4650
|
+
fillProgress: 1,
|
|
4651
|
+
isActive: false,
|
|
4652
|
+
opacity: 1
|
|
4653
|
+
};
|
|
4654
|
+
}
|
|
4655
|
+
return {
|
|
4656
|
+
fillProgress: calculateWordProgress(adjustedCtx),
|
|
4657
|
+
isActive,
|
|
4658
|
+
opacity: 1
|
|
4659
|
+
};
|
|
4660
|
+
}
|
|
4661
|
+
function calculateHighlightState(ctx) {
|
|
4662
|
+
const isActive = isWordActive(ctx);
|
|
4663
|
+
return {
|
|
4664
|
+
isActive,
|
|
4665
|
+
fillProgress: isActive ? 1 : 0,
|
|
4666
|
+
opacity: 1
|
|
4667
|
+
};
|
|
4668
|
+
}
|
|
4669
|
+
function calculatePopState(ctx, activeScale, speed) {
|
|
4670
|
+
if (ctx.currentTime < ctx.wordStart) {
|
|
4671
|
+
return {
|
|
4672
|
+
scale: 0.5,
|
|
4673
|
+
opacity: 0,
|
|
4674
|
+
isActive: false
|
|
4675
|
+
};
|
|
4676
|
+
}
|
|
4677
|
+
const adjustedDuration = ctx.animationDuration / speed;
|
|
4678
|
+
const adjustedCtx = { ...ctx, animationDuration: adjustedDuration };
|
|
4679
|
+
const progress = calculateAnimationProgress(adjustedCtx);
|
|
4680
|
+
const easedProgress = easeOutBack(progress);
|
|
4681
|
+
const startScale = 0.5;
|
|
4682
|
+
const endScale = isWordActive(ctx) ? activeScale : 1;
|
|
4683
|
+
const scale = startScale + (endScale - startScale) * easedProgress;
|
|
4684
|
+
return {
|
|
4685
|
+
scale: Math.min(scale, activeScale),
|
|
4686
|
+
opacity: easedProgress,
|
|
4687
|
+
isActive: isWordActive(ctx)
|
|
4688
|
+
};
|
|
4689
|
+
}
|
|
4690
|
+
function calculateFadeState(ctx, speed) {
|
|
4691
|
+
if (ctx.currentTime < ctx.wordStart) {
|
|
4692
|
+
return {
|
|
4693
|
+
opacity: 0,
|
|
4694
|
+
isActive: false
|
|
4695
|
+
};
|
|
4696
|
+
}
|
|
4697
|
+
const adjustedDuration = ctx.animationDuration / speed;
|
|
4698
|
+
const adjustedCtx = { ...ctx, animationDuration: adjustedDuration };
|
|
4699
|
+
const progress = calculateAnimationProgress(adjustedCtx);
|
|
4700
|
+
const easedProgress = easeInOutQuad(progress);
|
|
4701
|
+
return {
|
|
4702
|
+
opacity: easedProgress,
|
|
4703
|
+
isActive: isWordActive(ctx)
|
|
4704
|
+
};
|
|
4705
|
+
}
|
|
4706
|
+
function calculateSlideState(ctx, direction, speed, fontSize) {
|
|
4707
|
+
const slideDistance = fontSize * 1.5;
|
|
4708
|
+
if (ctx.currentTime < ctx.wordStart) {
|
|
4709
|
+
const offset2 = getDirectionOffset(direction, slideDistance);
|
|
4710
|
+
return {
|
|
4711
|
+
translateX: offset2.x,
|
|
4712
|
+
translateY: offset2.y,
|
|
4713
|
+
opacity: 0,
|
|
4714
|
+
isActive: false
|
|
4715
|
+
};
|
|
4716
|
+
}
|
|
4717
|
+
const adjustedDuration = ctx.animationDuration / speed;
|
|
4718
|
+
const adjustedCtx = { ...ctx, animationDuration: adjustedDuration };
|
|
4719
|
+
const progress = calculateAnimationProgress(adjustedCtx);
|
|
4720
|
+
const easedProgress = easeOutCirc(progress);
|
|
4721
|
+
const offset = getDirectionOffset(direction, slideDistance);
|
|
4722
|
+
const translateX = offset.x * (1 - easedProgress);
|
|
4723
|
+
const translateY = offset.y * (1 - easedProgress);
|
|
4724
|
+
return {
|
|
4725
|
+
translateX,
|
|
4726
|
+
translateY,
|
|
4727
|
+
opacity: easeOutQuad2(progress),
|
|
4728
|
+
isActive: isWordActive(ctx)
|
|
4729
|
+
};
|
|
4730
|
+
}
|
|
4731
|
+
function getDirectionOffset(direction, distance) {
|
|
4732
|
+
switch (direction) {
|
|
4733
|
+
case "left":
|
|
4734
|
+
return { x: -distance, y: 0 };
|
|
4735
|
+
case "right":
|
|
4736
|
+
return { x: distance, y: 0 };
|
|
4737
|
+
case "up":
|
|
4738
|
+
return { x: 0, y: -distance };
|
|
4739
|
+
case "down":
|
|
4740
|
+
return { x: 0, y: distance };
|
|
4741
|
+
}
|
|
4742
|
+
}
|
|
4743
|
+
function calculateBounceState(ctx, speed, fontSize) {
|
|
4744
|
+
const bounceDistance = fontSize * 0.8;
|
|
4745
|
+
if (ctx.currentTime < ctx.wordStart) {
|
|
4746
|
+
return {
|
|
4747
|
+
translateY: -bounceDistance,
|
|
4748
|
+
opacity: 0,
|
|
4749
|
+
isActive: false
|
|
4750
|
+
};
|
|
4751
|
+
}
|
|
4752
|
+
const adjustedDuration = ctx.animationDuration / speed;
|
|
4753
|
+
const adjustedCtx = { ...ctx, animationDuration: adjustedDuration };
|
|
4754
|
+
const progress = calculateAnimationProgress(adjustedCtx);
|
|
4755
|
+
const easedProgress = easeOutBounce(progress);
|
|
4756
|
+
return {
|
|
4757
|
+
translateY: -bounceDistance * (1 - easedProgress),
|
|
4758
|
+
opacity: easeOutQuad2(progress),
|
|
4759
|
+
isActive: isWordActive(ctx)
|
|
4760
|
+
};
|
|
4761
|
+
}
|
|
4762
|
+
function calculateTypewriterState(ctx, charCount, speed) {
|
|
4763
|
+
const wordDuration = ctx.wordEnd - ctx.wordStart;
|
|
4764
|
+
const adjustedDuration = wordDuration / speed;
|
|
4765
|
+
const adjustedEnd = ctx.wordStart + adjustedDuration;
|
|
4766
|
+
const adjustedCtx = { ...ctx, wordEnd: adjustedEnd };
|
|
4767
|
+
if (ctx.currentTime < ctx.wordStart) {
|
|
4768
|
+
return {
|
|
4769
|
+
visibleCharacters: 0,
|
|
4770
|
+
opacity: 1,
|
|
4771
|
+
isActive: false
|
|
4772
|
+
};
|
|
4773
|
+
}
|
|
4774
|
+
if (ctx.currentTime >= adjustedEnd) {
|
|
4775
|
+
return {
|
|
4776
|
+
visibleCharacters: charCount,
|
|
4777
|
+
opacity: 1,
|
|
4778
|
+
isActive: false
|
|
4779
|
+
};
|
|
4780
|
+
}
|
|
4781
|
+
const progress = calculateWordProgress(adjustedCtx);
|
|
4782
|
+
const visibleCharacters = Math.ceil(progress * charCount);
|
|
4783
|
+
return {
|
|
4784
|
+
visibleCharacters: clamp(visibleCharacters, 0, charCount),
|
|
4785
|
+
opacity: 1,
|
|
4786
|
+
isActive: isWordActive(ctx)
|
|
4787
|
+
};
|
|
4788
|
+
}
|
|
4789
|
+
function calculateNoneState(ctx) {
|
|
4790
|
+
return {
|
|
4791
|
+
opacity: 1,
|
|
4792
|
+
isActive: isWordActive(ctx)
|
|
4793
|
+
};
|
|
4794
|
+
}
|
|
4795
|
+
function calculateWordAnimationState(wordStart, wordEnd, currentTime, config, activeScale = 1, charCount = 0, fontSize = 48) {
|
|
4796
|
+
const ctx = {
|
|
4797
|
+
wordStart,
|
|
4798
|
+
wordEnd,
|
|
4799
|
+
currentTime,
|
|
4800
|
+
animationDuration: ANIMATION_DURATIONS[config.style]
|
|
4801
|
+
};
|
|
4802
|
+
const baseState = { ...DEFAULT_ANIMATION_STATE };
|
|
4803
|
+
let partialState;
|
|
4804
|
+
switch (config.style) {
|
|
4805
|
+
case "karaoke":
|
|
4806
|
+
partialState = calculateKaraokeState(ctx, config.speed);
|
|
4807
|
+
break;
|
|
4808
|
+
case "highlight":
|
|
4809
|
+
partialState = calculateHighlightState(ctx);
|
|
4810
|
+
break;
|
|
4811
|
+
case "pop":
|
|
4812
|
+
partialState = calculatePopState(ctx, activeScale, config.speed);
|
|
4813
|
+
break;
|
|
4814
|
+
case "fade":
|
|
4815
|
+
partialState = calculateFadeState(ctx, config.speed);
|
|
4816
|
+
break;
|
|
4817
|
+
case "slide":
|
|
4818
|
+
partialState = calculateSlideState(ctx, config.direction, config.speed, fontSize);
|
|
4819
|
+
break;
|
|
4820
|
+
case "bounce":
|
|
4821
|
+
partialState = calculateBounceState(ctx, config.speed, fontSize);
|
|
4822
|
+
break;
|
|
4823
|
+
case "typewriter":
|
|
4824
|
+
partialState = calculateTypewriterState(ctx, charCount, config.speed);
|
|
4825
|
+
break;
|
|
4826
|
+
case "none":
|
|
4827
|
+
default:
|
|
4828
|
+
partialState = calculateNoneState(ctx);
|
|
4829
|
+
break;
|
|
4830
|
+
}
|
|
4831
|
+
return { ...baseState, ...partialState };
|
|
4832
|
+
}
|
|
4833
|
+
function calculateAnimationStatesForGroup(words, currentTime, config, activeScale = 1, fontSize = 48) {
|
|
4834
|
+
const states = /* @__PURE__ */ new Map();
|
|
4835
|
+
for (const word of words) {
|
|
4836
|
+
const state = calculateWordAnimationState(
|
|
4837
|
+
word.startTime,
|
|
4838
|
+
word.endTime,
|
|
4839
|
+
currentTime,
|
|
4840
|
+
config,
|
|
4841
|
+
activeScale,
|
|
4842
|
+
word.text.length,
|
|
4843
|
+
fontSize
|
|
4844
|
+
);
|
|
4845
|
+
states.set(word.wordIndex, state);
|
|
4846
|
+
}
|
|
4847
|
+
return states;
|
|
4848
|
+
}
|
|
4849
|
+
function getDefaultAnimationConfig() {
|
|
4850
|
+
return {
|
|
4851
|
+
style: "highlight",
|
|
4852
|
+
speed: 1,
|
|
4853
|
+
direction: "up"
|
|
4854
|
+
};
|
|
4855
|
+
}
|
|
4856
|
+
|
|
4857
|
+
// src/core/rich-caption-generator.ts
|
|
4858
|
+
function extractFontConfig(asset) {
|
|
4859
|
+
const font = asset.font;
|
|
4860
|
+
const active = asset.active?.font;
|
|
4861
|
+
return {
|
|
4862
|
+
family: font?.family ?? "Open Sans",
|
|
4863
|
+
size: font?.size ?? 24,
|
|
4864
|
+
weight: String(font?.weight ?? "400"),
|
|
4865
|
+
baseColor: font?.color ?? "#ffffff",
|
|
4866
|
+
activeColor: active?.color ?? "#ffff00",
|
|
4867
|
+
baseOpacity: font?.opacity ?? 1,
|
|
4868
|
+
activeOpacity: active?.opacity ?? 1,
|
|
4869
|
+
letterSpacing: asset.style?.letterSpacing ?? 0
|
|
4870
|
+
};
|
|
4871
|
+
}
|
|
4872
|
+
function extractStrokeConfig(asset, isActive) {
|
|
4873
|
+
const baseStroke = asset.stroke;
|
|
4874
|
+
const activeStroke = asset.active?.stroke;
|
|
4875
|
+
if (!baseStroke && !activeStroke) {
|
|
4876
|
+
return void 0;
|
|
4877
|
+
}
|
|
4878
|
+
if (isActive && activeStroke) {
|
|
4879
|
+
return {
|
|
4880
|
+
width: activeStroke.width ?? baseStroke?.width ?? 0,
|
|
4881
|
+
color: activeStroke.color ?? baseStroke?.color ?? "#000000",
|
|
4882
|
+
opacity: activeStroke.opacity ?? baseStroke?.opacity ?? 1
|
|
4883
|
+
};
|
|
4884
|
+
}
|
|
4885
|
+
if (baseStroke) {
|
|
4886
|
+
return {
|
|
4887
|
+
width: baseStroke.width ?? 0,
|
|
4888
|
+
color: baseStroke.color ?? "#000000",
|
|
4889
|
+
opacity: baseStroke.opacity ?? 1
|
|
4890
|
+
};
|
|
4891
|
+
}
|
|
4892
|
+
return void 0;
|
|
4893
|
+
}
|
|
4894
|
+
function extractShadowConfig(asset) {
|
|
4895
|
+
const shadow = asset.shadow;
|
|
4896
|
+
if (!shadow) {
|
|
4897
|
+
return void 0;
|
|
4898
|
+
}
|
|
4899
|
+
return {
|
|
4900
|
+
offsetX: shadow.offsetX ?? 0,
|
|
4901
|
+
offsetY: shadow.offsetY ?? 0,
|
|
4902
|
+
blur: shadow.blur ?? 0,
|
|
4903
|
+
color: shadow.color ?? "#000000",
|
|
4904
|
+
opacity: shadow.opacity ?? 0.5
|
|
4905
|
+
};
|
|
4906
|
+
}
|
|
4907
|
+
function extractBackgroundConfig(asset, isActive) {
|
|
4908
|
+
const fontBackground = asset.font?.background;
|
|
4909
|
+
const activeBackground = asset.active?.font?.background;
|
|
4910
|
+
const bgColor = isActive && activeBackground ? activeBackground : fontBackground;
|
|
4911
|
+
if (!bgColor) {
|
|
4912
|
+
return void 0;
|
|
4913
|
+
}
|
|
4914
|
+
const paddingValues = extractCaptionPadding(asset);
|
|
4915
|
+
const paddingValue = Math.max(paddingValues.top, paddingValues.right, paddingValues.bottom, paddingValues.left);
|
|
4916
|
+
return {
|
|
4917
|
+
color: bgColor,
|
|
4918
|
+
opacity: 1,
|
|
4919
|
+
borderRadius: 4,
|
|
4920
|
+
padding: paddingValue
|
|
4921
|
+
};
|
|
4922
|
+
}
|
|
4923
|
+
function extractCaptionPadding(asset) {
|
|
4924
|
+
const padding = asset.padding;
|
|
4925
|
+
if (!padding) {
|
|
4926
|
+
return { top: 0, right: 0, bottom: 0, left: 0 };
|
|
4927
|
+
}
|
|
4928
|
+
if (typeof padding === "number") {
|
|
4929
|
+
return { top: padding, right: padding, bottom: padding, left: padding };
|
|
4930
|
+
}
|
|
4931
|
+
return {
|
|
4932
|
+
top: padding.top ?? 0,
|
|
4933
|
+
right: padding.right ?? 0,
|
|
4934
|
+
bottom: padding.bottom ?? 0,
|
|
4935
|
+
left: padding.left ?? 0
|
|
4936
|
+
};
|
|
4937
|
+
}
|
|
4938
|
+
function extractCaptionBackground(asset) {
|
|
4939
|
+
const bg = asset.background;
|
|
4940
|
+
if (!bg || !bg.color) {
|
|
4941
|
+
return void 0;
|
|
4942
|
+
}
|
|
4943
|
+
return {
|
|
4944
|
+
color: bg.color,
|
|
4945
|
+
opacity: bg.opacity ?? 1
|
|
4946
|
+
};
|
|
4947
|
+
}
|
|
4948
|
+
function extractAnimationConfig(asset) {
|
|
4949
|
+
const wordAnim = asset.wordAnimation;
|
|
4950
|
+
if (!wordAnim) {
|
|
4951
|
+
return getDefaultAnimationConfig();
|
|
4952
|
+
}
|
|
4953
|
+
return {
|
|
4954
|
+
style: wordAnim.style ?? "highlight",
|
|
4955
|
+
speed: wordAnim.speed ?? 1,
|
|
4956
|
+
direction: wordAnim.direction ?? "up"
|
|
4957
|
+
};
|
|
4958
|
+
}
|
|
4959
|
+
function extractActiveScale(asset) {
|
|
4960
|
+
return asset.active?.scale ?? 1;
|
|
4961
|
+
}
|
|
4962
|
+
function createDrawCaptionWordOp(word, animState, asset, fontConfig) {
|
|
4963
|
+
const isActive = animState.isActive;
|
|
4964
|
+
const displayText = animState.visibleCharacters >= 0 && animState.visibleCharacters < word.text.length ? word.text.slice(0, animState.visibleCharacters) : word.text;
|
|
4965
|
+
return {
|
|
4966
|
+
op: "DrawCaptionWord",
|
|
4967
|
+
text: displayText,
|
|
4968
|
+
x: word.x,
|
|
4969
|
+
y: word.y,
|
|
4970
|
+
width: word.width,
|
|
4971
|
+
fontSize: fontConfig.size,
|
|
4972
|
+
fontFamily: fontConfig.family,
|
|
4973
|
+
fontWeight: fontConfig.weight,
|
|
4974
|
+
baseColor: fontConfig.baseColor,
|
|
4975
|
+
activeColor: fontConfig.activeColor,
|
|
4976
|
+
baseOpacity: fontConfig.baseOpacity,
|
|
4977
|
+
activeOpacity: fontConfig.activeOpacity,
|
|
4978
|
+
fillProgress: animState.fillProgress,
|
|
4979
|
+
transform: {
|
|
4980
|
+
scale: animState.scale,
|
|
4981
|
+
translateX: animState.translateX,
|
|
4982
|
+
translateY: animState.translateY,
|
|
4983
|
+
opacity: animState.opacity
|
|
4984
|
+
},
|
|
4985
|
+
isRTL: word.isRTL,
|
|
4986
|
+
visibleCharacters: animState.visibleCharacters,
|
|
4987
|
+
letterSpacing: fontConfig.letterSpacing > 0 ? fontConfig.letterSpacing : void 0,
|
|
4988
|
+
stroke: extractStrokeConfig(asset, isActive),
|
|
4989
|
+
shadow: extractShadowConfig(asset),
|
|
4990
|
+
background: extractBackgroundConfig(asset, isActive)
|
|
4991
|
+
};
|
|
4992
|
+
}
|
|
4993
|
+
function generateRichCaptionDrawOps(asset, layout, frameTimeMs, layoutEngine, _config) {
|
|
4994
|
+
if (layout.store.length === 0) {
|
|
4995
|
+
return [];
|
|
4996
|
+
}
|
|
4997
|
+
const visibleWords = layoutEngine.getVisibleWordsAtTime(layout, frameTimeMs);
|
|
4998
|
+
if (visibleWords.length === 0) {
|
|
4999
|
+
return [];
|
|
5000
|
+
}
|
|
5001
|
+
const animConfig = extractAnimationConfig(asset);
|
|
5002
|
+
const activeScale = extractActiveScale(asset);
|
|
5003
|
+
const fontConfig = extractFontConfig(asset);
|
|
5004
|
+
const animationStates = calculateAnimationStatesForGroup(
|
|
5005
|
+
visibleWords,
|
|
5006
|
+
frameTimeMs,
|
|
5007
|
+
animConfig,
|
|
5008
|
+
activeScale,
|
|
5009
|
+
fontConfig.size
|
|
5010
|
+
);
|
|
5011
|
+
const ops = [];
|
|
5012
|
+
const captionBg = extractCaptionBackground(asset);
|
|
5013
|
+
if (captionBg) {
|
|
5014
|
+
const activeGroup = layout.groups.find(
|
|
5015
|
+
(g) => frameTimeMs >= g.startTime && frameTimeMs <= g.endTime
|
|
5016
|
+
);
|
|
5017
|
+
if (activeGroup && activeGroup.lines.length > 0) {
|
|
5018
|
+
const padding = extractCaptionPadding(asset);
|
|
5019
|
+
let minX = Infinity;
|
|
5020
|
+
let maxX = -Infinity;
|
|
5021
|
+
let minY = Infinity;
|
|
5022
|
+
let maxY = -Infinity;
|
|
5023
|
+
for (const line of activeGroup.lines) {
|
|
5024
|
+
const lineX = line.x;
|
|
5025
|
+
const lineRight = line.x + line.width;
|
|
5026
|
+
const lineY = line.y - line.height * 0.8;
|
|
5027
|
+
const lineBottom = line.y + line.height * 0.2;
|
|
5028
|
+
if (lineX < minX) minX = lineX;
|
|
5029
|
+
if (lineRight > maxX) maxX = lineRight;
|
|
5030
|
+
if (lineY < minY) minY = lineY;
|
|
5031
|
+
if (lineBottom > maxY) maxY = lineBottom;
|
|
5032
|
+
}
|
|
5033
|
+
ops.push({
|
|
5034
|
+
op: "DrawCaptionBackground",
|
|
5035
|
+
x: minX - padding.left,
|
|
5036
|
+
y: minY - padding.top,
|
|
5037
|
+
width: maxX - minX + padding.left + padding.right,
|
|
5038
|
+
height: maxY - minY + padding.top + padding.bottom,
|
|
5039
|
+
color: captionBg.color,
|
|
5040
|
+
opacity: captionBg.opacity,
|
|
5041
|
+
borderRadius: 8
|
|
5042
|
+
});
|
|
5043
|
+
}
|
|
5044
|
+
}
|
|
5045
|
+
for (const word of visibleWords) {
|
|
5046
|
+
const animState = animationStates.get(word.wordIndex);
|
|
5047
|
+
if (!animState) {
|
|
5048
|
+
continue;
|
|
5049
|
+
}
|
|
5050
|
+
if (animState.opacity <= 0) {
|
|
5051
|
+
continue;
|
|
5052
|
+
}
|
|
5053
|
+
const drawOp = createDrawCaptionWordOp(word, animState, asset, fontConfig);
|
|
5054
|
+
ops.push(drawOp);
|
|
5055
|
+
}
|
|
5056
|
+
return ops;
|
|
5057
|
+
}
|
|
5058
|
+
function generateRichCaptionFrame(asset, layout, frameTimeMs, layoutEngine, config) {
|
|
5059
|
+
const ops = generateRichCaptionDrawOps(
|
|
5060
|
+
asset,
|
|
5061
|
+
layout,
|
|
5062
|
+
frameTimeMs,
|
|
5063
|
+
layoutEngine,
|
|
5064
|
+
config
|
|
5065
|
+
);
|
|
5066
|
+
const activeWord = layoutEngine.getActiveWordAtTime(layout, frameTimeMs);
|
|
5067
|
+
return {
|
|
5068
|
+
ops,
|
|
5069
|
+
visibleWordCount: ops.length,
|
|
5070
|
+
activeWordIndex: activeWord?.wordIndex ?? -1
|
|
5071
|
+
};
|
|
5072
|
+
}
|
|
5073
|
+
function createDefaultGeneratorConfig(frameWidth = 1920, frameHeight = 1080, pixelRatio = 1) {
|
|
5074
|
+
return {
|
|
5075
|
+
frameWidth,
|
|
5076
|
+
frameHeight,
|
|
5077
|
+
pixelRatio
|
|
5078
|
+
};
|
|
5079
|
+
}
|
|
5080
|
+
function isDrawCaptionWordOp(op) {
|
|
5081
|
+
return op.op === "DrawCaptionWord";
|
|
5082
|
+
}
|
|
5083
|
+
function getDrawCaptionWordOps(ops) {
|
|
5084
|
+
return ops.filter(isDrawCaptionWordOp);
|
|
5085
|
+
}
|
|
5086
|
+
|
|
5087
|
+
// src/core/canvas-text-measurer.ts
|
|
5088
|
+
async function createCanvasTextMeasurer() {
|
|
5089
|
+
const canvasMod = await import("canvas");
|
|
5090
|
+
const canvas = canvasMod.createCanvas(1, 1);
|
|
5091
|
+
const ctx = canvas.getContext("2d");
|
|
5092
|
+
ctx.textBaseline = "alphabetic";
|
|
5093
|
+
let lastFont = "";
|
|
5094
|
+
return (text, font) => {
|
|
5095
|
+
if (font !== lastFont) {
|
|
5096
|
+
ctx.font = font;
|
|
5097
|
+
lastFont = font;
|
|
5098
|
+
}
|
|
5099
|
+
return ctx.measureText(text).width;
|
|
5100
|
+
};
|
|
5101
|
+
}
|
|
5102
|
+
|
|
5103
|
+
// src/core/subtitle-parser.ts
|
|
5104
|
+
function detectSubtitleFormat(content) {
|
|
5105
|
+
const firstNewline = content.indexOf("\n");
|
|
5106
|
+
const firstLine = (firstNewline === -1 ? content : content.substring(0, firstNewline)).trim();
|
|
5107
|
+
return firstLine.startsWith("WEBVTT") ? "vtt" : "srt";
|
|
5108
|
+
}
|
|
5109
|
+
function parseSubtitleToWords(content) {
|
|
5110
|
+
const normalized = normalizeContent(content);
|
|
5111
|
+
if (normalized.length === 0) {
|
|
5112
|
+
return [];
|
|
5113
|
+
}
|
|
5114
|
+
const format = detectSubtitleFormat(normalized);
|
|
5115
|
+
const cues = format === "vtt" ? parseVTTCues(normalized) : parseSRTCues(normalized);
|
|
5116
|
+
const words = [];
|
|
5117
|
+
for (let i = 0; i < cues.length; i++) {
|
|
5118
|
+
const cueWords = distributeCueToWords(cues[i]);
|
|
5119
|
+
for (let j = 0; j < cueWords.length; j++) {
|
|
5120
|
+
words.push(cueWords[j]);
|
|
5121
|
+
}
|
|
5122
|
+
}
|
|
5123
|
+
return words;
|
|
5124
|
+
}
|
|
5125
|
+
function normalizeContent(content) {
|
|
5126
|
+
let start = 0;
|
|
5127
|
+
if (content.charCodeAt(0) === 65279) {
|
|
5128
|
+
start = 1;
|
|
5129
|
+
}
|
|
5130
|
+
let result = start > 0 ? content.substring(start) : content;
|
|
5131
|
+
result = result.replace(/\r\n?/g, "\n");
|
|
5132
|
+
return result.trim();
|
|
5133
|
+
}
|
|
5134
|
+
function parseVTTCues(content) {
|
|
5135
|
+
const cues = [];
|
|
5136
|
+
let pos = 0;
|
|
5137
|
+
const len = content.length;
|
|
5138
|
+
const firstNewline = content.indexOf("\n", pos);
|
|
5139
|
+
if (firstNewline === -1) {
|
|
5140
|
+
return cues;
|
|
5141
|
+
}
|
|
5142
|
+
pos = firstNewline + 1;
|
|
5143
|
+
while (pos < len) {
|
|
5144
|
+
pos = skipWhitespaceAndNewlines(content, pos);
|
|
5145
|
+
if (pos >= len) break;
|
|
5146
|
+
const lineEnd = findLineEnd(content, pos);
|
|
5147
|
+
const line = content.substring(pos, lineEnd);
|
|
5148
|
+
if (line.startsWith("NOTE") || line.startsWith("STYLE") || line.startsWith("REGION")) {
|
|
5149
|
+
pos = skipBlock(content, lineEnd + 1);
|
|
5150
|
+
continue;
|
|
5151
|
+
}
|
|
5152
|
+
const arrowIdx = line.indexOf("-->");
|
|
5153
|
+
let timeLine;
|
|
5154
|
+
if (arrowIdx !== -1) {
|
|
5155
|
+
timeLine = line;
|
|
5156
|
+
pos = lineEnd + 1;
|
|
5157
|
+
} else {
|
|
5158
|
+
pos = lineEnd + 1;
|
|
5159
|
+
if (pos >= len) break;
|
|
5160
|
+
const nextLineEnd = findLineEnd(content, pos);
|
|
5161
|
+
const nextLine = content.substring(pos, nextLineEnd);
|
|
5162
|
+
if (nextLine.indexOf("-->") === -1) {
|
|
5163
|
+
pos = skipBlock(content, nextLineEnd + 1);
|
|
5164
|
+
continue;
|
|
5165
|
+
}
|
|
5166
|
+
timeLine = nextLine;
|
|
5167
|
+
pos = nextLineEnd + 1;
|
|
5168
|
+
}
|
|
5169
|
+
const timestamps = parseTimeLineVTT(timeLine);
|
|
5170
|
+
if (!timestamps) {
|
|
5171
|
+
pos = skipBlock(content, pos);
|
|
5172
|
+
continue;
|
|
5173
|
+
}
|
|
5174
|
+
let textLines = [];
|
|
5175
|
+
while (pos < len) {
|
|
5176
|
+
const tLineEnd = findLineEnd(content, pos);
|
|
5177
|
+
const tLine = content.substring(pos, tLineEnd);
|
|
5178
|
+
pos = tLineEnd + 1;
|
|
5179
|
+
if (tLine.length === 0) break;
|
|
5180
|
+
textLines.push(tLine);
|
|
5181
|
+
}
|
|
5182
|
+
if (textLines.length === 0) continue;
|
|
5183
|
+
const rawText = textLines.join(" ");
|
|
5184
|
+
const { cleanText, timestamps: inlineTs } = extractInlineTimestamps(rawText);
|
|
5185
|
+
const strippedText = stripMarkupTags(cleanText).trim();
|
|
5186
|
+
if (strippedText.length === 0) continue;
|
|
5187
|
+
if (timestamps.endMs <= timestamps.startMs) continue;
|
|
5188
|
+
cues.push({
|
|
5189
|
+
startMs: timestamps.startMs,
|
|
5190
|
+
endMs: timestamps.endMs,
|
|
5191
|
+
text: strippedText,
|
|
5192
|
+
inlineTimestamps: inlineTs
|
|
5193
|
+
});
|
|
5194
|
+
}
|
|
5195
|
+
return cues;
|
|
5196
|
+
}
|
|
5197
|
+
function parseSRTCues(content) {
|
|
5198
|
+
const cues = [];
|
|
5199
|
+
let pos = 0;
|
|
5200
|
+
const len = content.length;
|
|
5201
|
+
while (pos < len) {
|
|
5202
|
+
pos = skipWhitespaceAndNewlines(content, pos);
|
|
5203
|
+
if (pos >= len) break;
|
|
5204
|
+
let lineEnd = findLineEnd(content, pos);
|
|
5205
|
+
let line = content.substring(pos, lineEnd);
|
|
5206
|
+
pos = lineEnd + 1;
|
|
5207
|
+
if (line.indexOf("-->") === -1) {
|
|
5208
|
+
if (pos >= len) break;
|
|
5209
|
+
lineEnd = findLineEnd(content, pos);
|
|
5210
|
+
line = content.substring(pos, lineEnd);
|
|
5211
|
+
pos = lineEnd + 1;
|
|
5212
|
+
}
|
|
5213
|
+
if (line.indexOf("-->") === -1) {
|
|
5214
|
+
continue;
|
|
5215
|
+
}
|
|
5216
|
+
const timestamps = parseTimeLineSRT(line);
|
|
5217
|
+
if (!timestamps) continue;
|
|
5218
|
+
let textLines = [];
|
|
5219
|
+
while (pos < len) {
|
|
5220
|
+
const tLineEnd = findLineEnd(content, pos);
|
|
5221
|
+
const tLine = content.substring(pos, tLineEnd);
|
|
5222
|
+
pos = tLineEnd + 1;
|
|
5223
|
+
if (tLine.length === 0) break;
|
|
5224
|
+
textLines.push(tLine);
|
|
5225
|
+
}
|
|
5226
|
+
if (textLines.length === 0) continue;
|
|
5227
|
+
const rawText = textLines.join(" ");
|
|
5228
|
+
const strippedText = stripMarkupTags(rawText).trim();
|
|
5229
|
+
if (strippedText.length === 0) continue;
|
|
5230
|
+
if (timestamps.endMs <= timestamps.startMs) continue;
|
|
5231
|
+
cues.push({
|
|
5232
|
+
startMs: timestamps.startMs,
|
|
5233
|
+
endMs: timestamps.endMs,
|
|
5234
|
+
text: strippedText,
|
|
5235
|
+
inlineTimestamps: []
|
|
5236
|
+
});
|
|
5237
|
+
}
|
|
5238
|
+
return cues;
|
|
5239
|
+
}
|
|
5240
|
+
function parseTimeLineVTT(line) {
|
|
5241
|
+
const arrowIdx = line.indexOf("-->");
|
|
5242
|
+
if (arrowIdx === -1) return null;
|
|
5243
|
+
const startRaw = line.substring(0, arrowIdx).trim();
|
|
5244
|
+
const afterArrow = line.substring(arrowIdx + 3).trim();
|
|
5245
|
+
const spaceIdx = afterArrow.indexOf(" ");
|
|
5246
|
+
const endRaw = spaceIdx === -1 ? afterArrow : afterArrow.substring(0, spaceIdx);
|
|
5247
|
+
const startMs = parseTimestampVTT(startRaw);
|
|
5248
|
+
const endMs = parseTimestampVTT(endRaw);
|
|
5249
|
+
if (startMs < 0 || endMs < 0) return null;
|
|
5250
|
+
return { startMs, endMs };
|
|
5251
|
+
}
|
|
5252
|
+
function parseTimeLineSRT(line) {
|
|
5253
|
+
const arrowIdx = line.indexOf("-->");
|
|
5254
|
+
if (arrowIdx === -1) return null;
|
|
5255
|
+
const startRaw = line.substring(0, arrowIdx).trim();
|
|
5256
|
+
const endRaw = line.substring(arrowIdx + 3).trim();
|
|
5257
|
+
const startMs = parseTimestampSRT(startRaw);
|
|
5258
|
+
const endMs = parseTimestampSRT(endRaw);
|
|
5259
|
+
if (startMs < 0 || endMs < 0) return null;
|
|
5260
|
+
return { startMs, endMs };
|
|
5261
|
+
}
|
|
5262
|
+
function parseTimestampVTT(raw) {
|
|
5263
|
+
const dotIdx = raw.lastIndexOf(".");
|
|
5264
|
+
if (dotIdx === -1) return -1;
|
|
5265
|
+
const msStr = raw.substring(dotIdx + 1);
|
|
5266
|
+
const ms = parseIntFast(msStr);
|
|
5267
|
+
if (ms < 0) return -1;
|
|
5268
|
+
const beforeDot = raw.substring(0, dotIdx);
|
|
5269
|
+
const parts = beforeDot.split(":");
|
|
5270
|
+
if (parts.length === 2) {
|
|
5271
|
+
const minutes = parseIntFast(parts[0]);
|
|
5272
|
+
const seconds = parseIntFast(parts[1]);
|
|
5273
|
+
if (minutes < 0 || seconds < 0) return -1;
|
|
5274
|
+
return minutes * 6e4 + seconds * 1e3 + ms;
|
|
5275
|
+
}
|
|
5276
|
+
if (parts.length === 3) {
|
|
5277
|
+
const hours = parseIntFast(parts[0]);
|
|
5278
|
+
const minutes = parseIntFast(parts[1]);
|
|
5279
|
+
const seconds = parseIntFast(parts[2]);
|
|
5280
|
+
if (hours < 0 || minutes < 0 || seconds < 0) return -1;
|
|
5281
|
+
return hours * 36e5 + minutes * 6e4 + seconds * 1e3 + ms;
|
|
5282
|
+
}
|
|
5283
|
+
return -1;
|
|
5284
|
+
}
|
|
5285
|
+
function parseTimestampSRT(raw) {
|
|
5286
|
+
const commaIdx = raw.lastIndexOf(",");
|
|
5287
|
+
if (commaIdx === -1) return -1;
|
|
5288
|
+
const msStr = raw.substring(commaIdx + 1);
|
|
5289
|
+
const ms = parseIntFast(msStr);
|
|
5290
|
+
if (ms < 0) return -1;
|
|
5291
|
+
const beforeComma = raw.substring(0, commaIdx);
|
|
5292
|
+
const parts = beforeComma.split(":");
|
|
5293
|
+
if (parts.length !== 3) return -1;
|
|
5294
|
+
const hours = parseIntFast(parts[0]);
|
|
5295
|
+
const minutes = parseIntFast(parts[1]);
|
|
5296
|
+
const seconds = parseIntFast(parts[2]);
|
|
5297
|
+
if (hours < 0 || minutes < 0 || seconds < 0) return -1;
|
|
5298
|
+
return hours * 36e5 + minutes * 6e4 + seconds * 1e3 + ms;
|
|
5299
|
+
}
|
|
5300
|
+
function parseIntFast(str) {
|
|
5301
|
+
let result = 0;
|
|
5302
|
+
for (let i = 0; i < str.length; i++) {
|
|
5303
|
+
const code = str.charCodeAt(i);
|
|
5304
|
+
if (code < 48 || code > 57) return -1;
|
|
5305
|
+
result = result * 10 + (code - 48);
|
|
5306
|
+
}
|
|
5307
|
+
return result;
|
|
5308
|
+
}
|
|
5309
|
+
var MARKUP_TAG_REGEX = /<[^>]+>/g;
|
|
5310
|
+
function stripMarkupTags(text) {
|
|
5311
|
+
return text.replace(MARKUP_TAG_REGEX, "");
|
|
5312
|
+
}
|
|
5313
|
+
var INLINE_TIMESTAMP_REGEX = /<(\d{2}:)?(\d{2}):(\d{2}\.\d{3})>/g;
|
|
5314
|
+
function extractInlineTimestamps(text) {
|
|
5315
|
+
const timestamps = [];
|
|
5316
|
+
let cleanText = "";
|
|
5317
|
+
let lastIndex = 0;
|
|
5318
|
+
let match;
|
|
5319
|
+
INLINE_TIMESTAMP_REGEX.lastIndex = 0;
|
|
5320
|
+
while ((match = INLINE_TIMESTAMP_REGEX.exec(text)) !== null) {
|
|
5321
|
+
cleanText += text.substring(lastIndex, match.index);
|
|
5322
|
+
const position = cleanText.length;
|
|
5323
|
+
const hoursStr = match[1] ? match[1].substring(0, match[1].length - 1) : "00";
|
|
5324
|
+
const minutesStr = match[2];
|
|
5325
|
+
const secondsAndMs = match[3];
|
|
5326
|
+
const dotIdx = secondsAndMs.indexOf(".");
|
|
5327
|
+
const secondsStr = secondsAndMs.substring(0, dotIdx);
|
|
5328
|
+
const msStr = secondsAndMs.substring(dotIdx + 1);
|
|
5329
|
+
const hours = parseIntFast(hoursStr);
|
|
5330
|
+
const minutes = parseIntFast(minutesStr);
|
|
5331
|
+
const seconds = parseIntFast(secondsStr);
|
|
5332
|
+
const ms = parseIntFast(msStr);
|
|
5333
|
+
if (hours >= 0 && minutes >= 0 && seconds >= 0 && ms >= 0) {
|
|
5334
|
+
const timeMs = hours * 36e5 + minutes * 6e4 + seconds * 1e3 + ms;
|
|
5335
|
+
timestamps.push({ timeMs, position });
|
|
5336
|
+
}
|
|
5337
|
+
lastIndex = match.index + match[0].length;
|
|
5338
|
+
}
|
|
5339
|
+
cleanText += text.substring(lastIndex);
|
|
5340
|
+
return { cleanText, timestamps };
|
|
5341
|
+
}
|
|
5342
|
+
function distributeCueToWords(cue) {
|
|
5343
|
+
const wordTexts = cue.text.split(/\s+/).filter((w) => w.length > 0);
|
|
5344
|
+
if (wordTexts.length === 0) return [];
|
|
5345
|
+
if (wordTexts.length === 1) {
|
|
5346
|
+
return [{ text: wordTexts[0], start: cue.startMs, end: cue.endMs }];
|
|
5347
|
+
}
|
|
5348
|
+
if (cue.inlineTimestamps.length > 0) {
|
|
5349
|
+
return distributeWithInlineTimestamps(wordTexts, cue);
|
|
5350
|
+
}
|
|
5351
|
+
return distributeByCharacterProportion(wordTexts, cue.startMs, cue.endMs);
|
|
5352
|
+
}
|
|
5353
|
+
function distributeWithInlineTimestamps(wordTexts, cue) {
|
|
5354
|
+
const wordPositions = [];
|
|
5355
|
+
let charPos = 0;
|
|
5356
|
+
for (let i = 0; i < wordTexts.length; i++) {
|
|
5357
|
+
wordPositions.push(charPos);
|
|
5358
|
+
charPos += wordTexts[i].length + 1;
|
|
5359
|
+
}
|
|
5360
|
+
const sortedTimestamps = [...cue.inlineTimestamps].sort((a, b) => a.position - b.position);
|
|
5361
|
+
const wordStartTimes = new Array(wordTexts.length);
|
|
5362
|
+
wordStartTimes[0] = cue.startMs;
|
|
5363
|
+
for (let i = 1; i < wordTexts.length; i++) {
|
|
5364
|
+
const wp = wordPositions[i];
|
|
5365
|
+
let bestTs = -1;
|
|
5366
|
+
for (let t = 0; t < sortedTimestamps.length; t++) {
|
|
5367
|
+
if (sortedTimestamps[t].position <= wp) {
|
|
5368
|
+
bestTs = t;
|
|
5369
|
+
}
|
|
5370
|
+
}
|
|
5371
|
+
if (bestTs >= 0) {
|
|
5372
|
+
wordStartTimes[i] = sortedTimestamps[bestTs].timeMs;
|
|
5373
|
+
} else {
|
|
5374
|
+
wordStartTimes[i] = wordStartTimes[i - 1];
|
|
5375
|
+
}
|
|
5376
|
+
}
|
|
5377
|
+
const words = [];
|
|
5378
|
+
for (let i = 0; i < wordTexts.length; i++) {
|
|
5379
|
+
const start = wordStartTimes[i];
|
|
5380
|
+
const end = i < wordTexts.length - 1 ? wordStartTimes[i + 1] : cue.endMs;
|
|
5381
|
+
words.push({ text: wordTexts[i], start, end: Math.max(end, start) });
|
|
5382
|
+
}
|
|
5383
|
+
return words;
|
|
5384
|
+
}
|
|
5385
|
+
function distributeByCharacterProportion(wordTexts, startMs, endMs) {
|
|
5386
|
+
const totalChars = wordTexts.reduce((sum, w) => sum + w.length, 0);
|
|
5387
|
+
const duration = endMs - startMs;
|
|
5388
|
+
const words = [];
|
|
5389
|
+
let cursor = startMs;
|
|
5390
|
+
for (let i = 0; i < wordTexts.length; i++) {
|
|
5391
|
+
const wordStart = cursor;
|
|
5392
|
+
if (i === wordTexts.length - 1) {
|
|
5393
|
+
words.push({ text: wordTexts[i], start: wordStart, end: endMs });
|
|
5394
|
+
} else {
|
|
5395
|
+
const proportion = wordTexts[i].length / totalChars;
|
|
5396
|
+
const wordDuration = Math.round(proportion * duration);
|
|
5397
|
+
cursor = wordStart + wordDuration;
|
|
5398
|
+
words.push({ text: wordTexts[i], start: wordStart, end: cursor });
|
|
5399
|
+
}
|
|
5400
|
+
}
|
|
5401
|
+
return words;
|
|
5402
|
+
}
|
|
5403
|
+
function findLineEnd(content, pos) {
|
|
5404
|
+
const idx = content.indexOf("\n", pos);
|
|
5405
|
+
return idx === -1 ? content.length : idx;
|
|
5406
|
+
}
|
|
5407
|
+
function skipWhitespaceAndNewlines(content, pos) {
|
|
5408
|
+
while (pos < content.length) {
|
|
5409
|
+
const ch = content.charCodeAt(pos);
|
|
5410
|
+
if (ch === 10 || ch === 13 || ch === 32 || ch === 9) {
|
|
5411
|
+
pos++;
|
|
5412
|
+
} else {
|
|
5413
|
+
break;
|
|
5414
|
+
}
|
|
5415
|
+
}
|
|
5416
|
+
return pos;
|
|
5417
|
+
}
|
|
5418
|
+
function skipBlock(content, pos) {
|
|
5419
|
+
while (pos < content.length) {
|
|
5420
|
+
const lineEnd = findLineEnd(content, pos);
|
|
5421
|
+
const line = content.substring(pos, lineEnd);
|
|
5422
|
+
pos = lineEnd + 1;
|
|
5423
|
+
if (line.length === 0) break;
|
|
5424
|
+
}
|
|
5425
|
+
return pos;
|
|
5426
|
+
}
|
|
5427
|
+
|
|
5428
|
+
// src/core/video/frame-scheduler.ts
|
|
5429
|
+
var PER_FRAME_ANIMATION_STYLES = /* @__PURE__ */ new Set([
|
|
5430
|
+
"karaoke",
|
|
5431
|
+
"typewriter"
|
|
5432
|
+
]);
|
|
5433
|
+
var TRANSITION_ANIMATION_STYLES = /* @__PURE__ */ new Set([
|
|
5434
|
+
"pop",
|
|
5435
|
+
"fade",
|
|
5436
|
+
"slide",
|
|
5437
|
+
"bounce"
|
|
5438
|
+
]);
|
|
5439
|
+
var ANIMATION_DURATION_MS = {
|
|
5440
|
+
pop: 200,
|
|
5441
|
+
fade: 150,
|
|
5442
|
+
slide: 250,
|
|
5443
|
+
bounce: 400
|
|
5444
|
+
};
|
|
5445
|
+
function findGroupIndexAtTime(groups, timeMs) {
|
|
5446
|
+
for (let i = 0; i < groups.length; i++) {
|
|
5447
|
+
if (timeMs >= groups[i].startTime && timeMs <= groups[i].endTime) {
|
|
5448
|
+
return i;
|
|
5449
|
+
}
|
|
5450
|
+
}
|
|
5451
|
+
return -1;
|
|
5452
|
+
}
|
|
5453
|
+
function findActiveWordIndex(store, groupWordIndices, timeMs) {
|
|
5454
|
+
for (const idx of groupWordIndices) {
|
|
5455
|
+
if (timeMs >= store.startTimes[idx] && timeMs < store.endTimes[idx]) {
|
|
5456
|
+
return idx;
|
|
5457
|
+
}
|
|
5458
|
+
}
|
|
5459
|
+
return -1;
|
|
5460
|
+
}
|
|
5461
|
+
function getAnimationPhase(store, groupWordIndices, timeMs, animationStyle, speed) {
|
|
5462
|
+
if (groupWordIndices.length === 0) {
|
|
5463
|
+
return "idle";
|
|
5464
|
+
}
|
|
5465
|
+
const activeWordIdx = findActiveWordIndex(store, groupWordIndices, timeMs);
|
|
5466
|
+
if (PER_FRAME_ANIMATION_STYLES.has(animationStyle)) {
|
|
5467
|
+
if (activeWordIdx !== -1) {
|
|
5468
|
+
return "animating";
|
|
5469
|
+
}
|
|
5470
|
+
for (const idx of groupWordIndices) {
|
|
5471
|
+
if (timeMs < store.startTimes[idx]) {
|
|
5472
|
+
return "before";
|
|
5473
|
+
}
|
|
5474
|
+
}
|
|
5475
|
+
return "after";
|
|
5476
|
+
}
|
|
5477
|
+
if (TRANSITION_ANIMATION_STYLES.has(animationStyle)) {
|
|
5478
|
+
const transitionDurationMs = (ANIMATION_DURATION_MS[animationStyle] ?? 200) / speed;
|
|
5479
|
+
for (const idx of groupWordIndices) {
|
|
5480
|
+
const wordStart = store.startTimes[idx];
|
|
5481
|
+
if (timeMs >= wordStart && timeMs < wordStart + transitionDurationMs) {
|
|
5482
|
+
return "animating";
|
|
5483
|
+
}
|
|
5484
|
+
}
|
|
5485
|
+
if (activeWordIdx !== -1) {
|
|
5486
|
+
return "active";
|
|
5487
|
+
}
|
|
5488
|
+
for (const idx of groupWordIndices) {
|
|
5489
|
+
if (timeMs < store.startTimes[idx]) {
|
|
5490
|
+
return "before";
|
|
5491
|
+
}
|
|
5492
|
+
}
|
|
5493
|
+
return "after";
|
|
5494
|
+
}
|
|
5495
|
+
if (activeWordIdx !== -1) {
|
|
5496
|
+
return "active";
|
|
5497
|
+
}
|
|
5498
|
+
return "before";
|
|
5499
|
+
}
|
|
5500
|
+
function computeStateSignature(layout, timeMs, animationStyle, speed) {
|
|
5501
|
+
const groupIndex = findGroupIndexAtTime(layout.groups, timeMs);
|
|
5502
|
+
if (groupIndex === -1) {
|
|
5503
|
+
return { groupIndex: -1, activeWordIndex: -1, animationPhase: "idle" };
|
|
5504
|
+
}
|
|
5505
|
+
const group = layout.groups[groupIndex];
|
|
5506
|
+
const activeWordIndex = findActiveWordIndex(layout.store, group.wordIndices, timeMs);
|
|
5507
|
+
const animationPhase = getAnimationPhase(
|
|
5508
|
+
layout.store,
|
|
5509
|
+
group.wordIndices,
|
|
5510
|
+
timeMs,
|
|
5511
|
+
animationStyle,
|
|
5512
|
+
speed
|
|
5513
|
+
);
|
|
5514
|
+
return { groupIndex, activeWordIndex, animationPhase };
|
|
5515
|
+
}
|
|
5516
|
+
function signaturesMatch(a, b) {
|
|
5517
|
+
return a.groupIndex === b.groupIndex && a.activeWordIndex === b.activeWordIndex && a.animationPhase === b.animationPhase;
|
|
5518
|
+
}
|
|
5519
|
+
function createFrameSchedule(layout, durationMs, fps, animationStyle = "highlight", speed = 1) {
|
|
5520
|
+
const totalFrames = Math.max(2, Math.round(durationMs / 1e3 * fps) + 1);
|
|
5521
|
+
const renderFrames = [];
|
|
5522
|
+
let previousSignature = null;
|
|
5523
|
+
for (let frame = 0; frame < totalFrames; frame++) {
|
|
5524
|
+
const timeMs = frame / (totalFrames - 1) * durationMs;
|
|
5525
|
+
const signature = computeStateSignature(layout, timeMs, animationStyle, speed);
|
|
5526
|
+
const isAnimating = signature.animationPhase === "animating";
|
|
5527
|
+
if (isAnimating || previousSignature === null || !signaturesMatch(signature, previousSignature)) {
|
|
5528
|
+
renderFrames.push({
|
|
5529
|
+
frameIndex: frame,
|
|
5530
|
+
repeatCount: 1,
|
|
5531
|
+
timeMs
|
|
5532
|
+
});
|
|
5533
|
+
} else {
|
|
5534
|
+
renderFrames[renderFrames.length - 1].repeatCount++;
|
|
5535
|
+
}
|
|
5536
|
+
previousSignature = signature;
|
|
5537
|
+
}
|
|
5538
|
+
const uniqueFrameCount = renderFrames.length;
|
|
5539
|
+
const skipRatio = 1 - uniqueFrameCount / totalFrames;
|
|
5540
|
+
return {
|
|
5541
|
+
renderFrames,
|
|
5542
|
+
totalFrames,
|
|
5543
|
+
uniqueFrameCount,
|
|
5544
|
+
skipRatio
|
|
5545
|
+
};
|
|
5546
|
+
}
|
|
5547
|
+
|
|
5548
|
+
// src/core/video/node-raw-encoder.ts
|
|
5549
|
+
var import_child_process2 = require("child_process");
|
|
5550
|
+
var import_node_fs2 = __toESM(require("fs"), 1);
|
|
5551
|
+
var NodeRawEncoder = class _NodeRawEncoder {
|
|
5552
|
+
ffmpegPath = null;
|
|
5553
|
+
ffmpegProcess = null;
|
|
5554
|
+
config = null;
|
|
5555
|
+
outputPath = "";
|
|
5556
|
+
frameCount = 0;
|
|
5557
|
+
totalFrames = 0;
|
|
5558
|
+
startTime = 0;
|
|
5559
|
+
chunks = [];
|
|
5560
|
+
outputToMemory = false;
|
|
5561
|
+
ffmpegError = null;
|
|
5562
|
+
static DRAIN_TIMEOUT_MS = 3e4;
|
|
5563
|
+
onProgress;
|
|
5564
|
+
trySetPath(p) {
|
|
5565
|
+
if (p && import_node_fs2.default.existsSync(p)) {
|
|
5566
|
+
this.ffmpegPath = p;
|
|
5567
|
+
return true;
|
|
5568
|
+
}
|
|
5569
|
+
return false;
|
|
5570
|
+
}
|
|
5571
|
+
async initFFmpeg(ffmpegPath) {
|
|
5572
|
+
if (this.trySetPath(ffmpegPath)) return;
|
|
5573
|
+
if (this.trySetPath(process.env.FFMPEG_PATH)) return;
|
|
5574
|
+
if (this.trySetPath(process.env.FFMPEG_BIN)) return;
|
|
5575
|
+
if (this.trySetPath("/opt/bin/ffmpeg")) return;
|
|
5576
|
+
try {
|
|
5577
|
+
const ffmpegStatic = await import("ffmpeg-static");
|
|
5578
|
+
const p = ffmpegStatic.default;
|
|
5579
|
+
if (this.trySetPath(p)) return;
|
|
5580
|
+
} catch {
|
|
5581
|
+
}
|
|
5582
|
+
throw new Error("FFmpeg not available. Please install ffmpeg-static or provide FFMPEG_PATH.");
|
|
5583
|
+
}
|
|
5584
|
+
async configure(config, options) {
|
|
5585
|
+
this.config = config;
|
|
5586
|
+
this.outputPath = options?.outputPath || "";
|
|
5587
|
+
this.outputToMemory = !this.outputPath;
|
|
5588
|
+
this.totalFrames = Math.max(2, Math.round(config.duration * config.fps) + 1);
|
|
5589
|
+
this.frameCount = 0;
|
|
5590
|
+
this.startTime = Date.now();
|
|
5591
|
+
this.chunks = [];
|
|
5592
|
+
this.ffmpegError = null;
|
|
5593
|
+
await this.initFFmpeg(options?.ffmpegPath);
|
|
5594
|
+
const {
|
|
5595
|
+
width,
|
|
5596
|
+
height,
|
|
5597
|
+
fps,
|
|
5598
|
+
crf = 17,
|
|
5599
|
+
preset = "ultrafast",
|
|
5600
|
+
profile = "high"
|
|
5601
|
+
} = config;
|
|
5602
|
+
const args = [
|
|
5603
|
+
"-y",
|
|
5604
|
+
"-f",
|
|
5605
|
+
"rawvideo",
|
|
5606
|
+
"-pix_fmt",
|
|
5607
|
+
"rgba",
|
|
5608
|
+
"-s",
|
|
5609
|
+
`${width}x${height}`,
|
|
5610
|
+
"-r",
|
|
5611
|
+
String(fps),
|
|
5612
|
+
"-thread_queue_size",
|
|
5613
|
+
"512",
|
|
5614
|
+
"-i",
|
|
5615
|
+
"pipe:0",
|
|
5616
|
+
"-c:v",
|
|
5617
|
+
"libx264",
|
|
5618
|
+
"-preset",
|
|
5619
|
+
preset,
|
|
5620
|
+
"-tune",
|
|
5621
|
+
"stillimage",
|
|
5622
|
+
"-crf",
|
|
5623
|
+
String(crf),
|
|
5624
|
+
"-profile:v",
|
|
5625
|
+
profile,
|
|
5626
|
+
"-g",
|
|
5627
|
+
"300",
|
|
5628
|
+
"-bf",
|
|
5629
|
+
"2",
|
|
5630
|
+
"-threads",
|
|
5631
|
+
"0",
|
|
5632
|
+
"-pix_fmt",
|
|
5633
|
+
"yuv420p",
|
|
5634
|
+
"-r",
|
|
5635
|
+
String(fps),
|
|
5636
|
+
"-movflags",
|
|
5637
|
+
"+faststart"
|
|
5638
|
+
];
|
|
5639
|
+
if (this.outputToMemory) {
|
|
5640
|
+
args.push("-f", "mp4", "pipe:1");
|
|
5641
|
+
} else {
|
|
5642
|
+
args.push(this.outputPath);
|
|
5643
|
+
}
|
|
5644
|
+
this.ffmpegProcess = (0, import_child_process2.spawn)(this.ffmpegPath, args, {
|
|
5645
|
+
stdio: ["pipe", this.outputToMemory ? "pipe" : "inherit", "pipe"]
|
|
5646
|
+
});
|
|
5647
|
+
if (this.outputToMemory && this.ffmpegProcess.stdout) {
|
|
5648
|
+
this.ffmpegProcess.stdout.on("data", (chunk) => {
|
|
5649
|
+
this.chunks.push(chunk);
|
|
5650
|
+
});
|
|
5651
|
+
}
|
|
5652
|
+
this.ffmpegProcess.on("error", (err) => {
|
|
5653
|
+
this.ffmpegError = err;
|
|
5654
|
+
});
|
|
5655
|
+
this.ffmpegProcess.stderr?.on("data", () => {
|
|
5656
|
+
});
|
|
5657
|
+
}
|
|
5658
|
+
async encodeFrame(frameData, _frameIndex) {
|
|
5659
|
+
if (this.ffmpegError) {
|
|
5660
|
+
throw this.ffmpegError;
|
|
5661
|
+
}
|
|
5662
|
+
if (!this.ffmpegProcess || !this.ffmpegProcess.stdin) {
|
|
5663
|
+
throw new Error("FFmpeg process not initialized. Call configure() first.");
|
|
5664
|
+
}
|
|
5665
|
+
const buffer = this.toBuffer(frameData);
|
|
5666
|
+
const ok = this.ffmpegProcess.stdin.write(buffer);
|
|
5667
|
+
if (!ok) {
|
|
5668
|
+
await this.waitForDrain();
|
|
5669
|
+
}
|
|
5670
|
+
this.frameCount++;
|
|
5671
|
+
this.reportProgress();
|
|
5672
|
+
}
|
|
5673
|
+
async encodeFrameRepeat(frameData, repeatCount) {
|
|
5674
|
+
if (this.ffmpegError) {
|
|
5675
|
+
throw this.ffmpegError;
|
|
5676
|
+
}
|
|
5677
|
+
if (!this.ffmpegProcess || !this.ffmpegProcess.stdin) {
|
|
5678
|
+
throw new Error("FFmpeg process not initialized. Call configure() first.");
|
|
5679
|
+
}
|
|
5680
|
+
const buffer = this.toBuffer(frameData);
|
|
5681
|
+
for (let i = 0; i < repeatCount; i++) {
|
|
5682
|
+
const ok = this.ffmpegProcess.stdin.write(buffer);
|
|
5683
|
+
if (!ok) {
|
|
5684
|
+
await this.waitForDrain();
|
|
5685
|
+
}
|
|
5686
|
+
this.frameCount++;
|
|
5687
|
+
}
|
|
5688
|
+
this.reportProgress();
|
|
5689
|
+
}
|
|
5690
|
+
async flush() {
|
|
5691
|
+
if (!this.ffmpegProcess) {
|
|
5692
|
+
throw new Error("FFmpeg process not initialized.");
|
|
5693
|
+
}
|
|
5694
|
+
return new Promise((resolve, reject) => {
|
|
5695
|
+
this.ffmpegProcess.on("close", (code) => {
|
|
5696
|
+
if (code === 0) {
|
|
5697
|
+
if (this.outputToMemory) {
|
|
5698
|
+
const result = Buffer.concat(this.chunks);
|
|
5699
|
+
resolve(new Uint8Array(result));
|
|
5700
|
+
} else {
|
|
5701
|
+
const fileBuffer = import_node_fs2.default.readFileSync(this.outputPath);
|
|
5702
|
+
resolve(new Uint8Array(fileBuffer));
|
|
5703
|
+
}
|
|
5704
|
+
} else {
|
|
5705
|
+
reject(new Error(`FFmpeg exited with code ${code}`));
|
|
5706
|
+
}
|
|
5707
|
+
});
|
|
5708
|
+
this.ffmpegProcess.on("error", (err) => {
|
|
5709
|
+
reject(err);
|
|
5710
|
+
});
|
|
5711
|
+
this.ffmpegProcess.stdin?.end();
|
|
5712
|
+
});
|
|
5713
|
+
}
|
|
5714
|
+
close() {
|
|
5715
|
+
if (this.ffmpegProcess) {
|
|
5716
|
+
this.ffmpegProcess.kill("SIGTERM");
|
|
5717
|
+
this.ffmpegProcess = null;
|
|
5718
|
+
}
|
|
5719
|
+
this.chunks = [];
|
|
5720
|
+
}
|
|
5721
|
+
waitForDrain() {
|
|
5722
|
+
return new Promise((resolve, reject) => {
|
|
5723
|
+
const timer = setTimeout(() => {
|
|
5724
|
+
reject(new Error("FFmpeg stdin drain timeout"));
|
|
5725
|
+
}, _NodeRawEncoder.DRAIN_TIMEOUT_MS);
|
|
5726
|
+
const onError = (err) => {
|
|
5727
|
+
clearTimeout(timer);
|
|
5728
|
+
reject(err);
|
|
5729
|
+
};
|
|
5730
|
+
this.ffmpegProcess.once("error", onError);
|
|
5731
|
+
this.ffmpegProcess.stdin.once("drain", () => {
|
|
5732
|
+
clearTimeout(timer);
|
|
5733
|
+
this.ffmpegProcess?.removeListener("error", onError);
|
|
5734
|
+
resolve();
|
|
5735
|
+
});
|
|
5736
|
+
});
|
|
5737
|
+
}
|
|
5738
|
+
toBuffer(frameData) {
|
|
5739
|
+
if (frameData instanceof ArrayBuffer) {
|
|
5740
|
+
return Buffer.from(frameData);
|
|
5741
|
+
}
|
|
5742
|
+
return Buffer.from(frameData.buffer, frameData.byteOffset, frameData.byteLength);
|
|
5743
|
+
}
|
|
5744
|
+
reportProgress() {
|
|
5745
|
+
if (!this.onProgress) return;
|
|
5746
|
+
const elapsedMs = Date.now() - this.startTime;
|
|
5747
|
+
if (elapsedMs === 0) return;
|
|
5748
|
+
const framesPerSecond = this.frameCount / (elapsedMs / 1e3);
|
|
5749
|
+
const remainingFrames = this.totalFrames - this.frameCount;
|
|
5750
|
+
const estimatedRemainingMs = remainingFrames / framesPerSecond * 1e3;
|
|
5751
|
+
this.onProgress({
|
|
5752
|
+
framesEncoded: this.frameCount,
|
|
5753
|
+
totalFrames: this.totalFrames,
|
|
5754
|
+
percentage: this.frameCount / this.totalFrames * 100,
|
|
5755
|
+
elapsedMs,
|
|
5756
|
+
estimatedRemainingMs: Math.round(estimatedRemainingMs),
|
|
5757
|
+
currentFps: Math.round(framesPerSecond * 10) / 10
|
|
5758
|
+
});
|
|
5759
|
+
}
|
|
5760
|
+
};
|
|
5761
|
+
async function createNodeRawEncoder(config, options) {
|
|
5762
|
+
const encoder = new NodeRawEncoder();
|
|
5763
|
+
await encoder.configure(config, options);
|
|
5764
|
+
return encoder;
|
|
5765
|
+
}
|
|
5766
|
+
|
|
5767
|
+
// src/core/rich-caption-renderer.ts
|
|
5768
|
+
var ROBOTO_FONT_URLS = {
|
|
5769
|
+
"100": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbGmT.ttf",
|
|
5770
|
+
"300": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuaabWmT.ttf",
|
|
5771
|
+
"400": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbWmT.ttf",
|
|
5772
|
+
"500": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWub2bWmT.ttf",
|
|
5773
|
+
"600": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuYaammT.ttf",
|
|
5774
|
+
"700": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuYjammT.ttf",
|
|
5775
|
+
"800": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuZEammT.ttf",
|
|
5776
|
+
"900": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuZtammT.ttf"
|
|
5777
|
+
};
|
|
5778
|
+
var RichCaptionRenderer = class {
|
|
5779
|
+
width;
|
|
5780
|
+
height;
|
|
5781
|
+
pixelRatio;
|
|
5782
|
+
fps;
|
|
5783
|
+
wasmBaseURL;
|
|
5784
|
+
fetchFile;
|
|
5785
|
+
fontRegistry = null;
|
|
5786
|
+
layoutEngine = null;
|
|
5787
|
+
currentAsset = null;
|
|
5788
|
+
currentLayout = null;
|
|
5789
|
+
generatorConfig;
|
|
5790
|
+
frameCount = 0;
|
|
5791
|
+
totalRenderTimeMs = 0;
|
|
5792
|
+
peakMemoryMB = 0;
|
|
5793
|
+
lastMemoryCheckFrame = 0;
|
|
5794
|
+
constructor(options) {
|
|
5795
|
+
this.width = options.width;
|
|
5796
|
+
this.height = options.height;
|
|
5797
|
+
this.pixelRatio = options.pixelRatio ?? 1;
|
|
5798
|
+
this.fps = options.fps ?? 30;
|
|
5799
|
+
this.wasmBaseURL = options.wasmBaseURL;
|
|
5800
|
+
this.fetchFile = options.fetchFile ?? loadFileOrHttpToArrayBuffer;
|
|
5801
|
+
this.generatorConfig = createDefaultGeneratorConfig(this.width, this.height, this.pixelRatio);
|
|
5802
|
+
}
|
|
5803
|
+
async initialize() {
|
|
5804
|
+
this.fontRegistry = await FontRegistry.getSharedInstance(this.wasmBaseURL);
|
|
5805
|
+
this.layoutEngine = new CaptionLayoutEngine(this.fontRegistry);
|
|
5806
|
+
const weightsToLoad = Object.keys(ROBOTO_FONT_URLS);
|
|
5807
|
+
const loadPromises = weightsToLoad.map(async (weight) => {
|
|
5808
|
+
const existingFace = await this.fontRegistry.getFace({ family: "Roboto", weight });
|
|
5809
|
+
if (!existingFace) {
|
|
5810
|
+
const bytes = await loadFileOrHttpToArrayBuffer(ROBOTO_FONT_URLS[weight]);
|
|
5811
|
+
await this.fontRegistry.registerFromBytes(bytes, { family: "Roboto", weight });
|
|
5812
|
+
}
|
|
5813
|
+
});
|
|
5814
|
+
await Promise.all(loadPromises);
|
|
5815
|
+
}
|
|
5816
|
+
async registerFont(source, desc) {
|
|
5817
|
+
if (!this.fontRegistry) {
|
|
5818
|
+
throw new Error("Renderer not initialized. Call initialize() first.");
|
|
5819
|
+
}
|
|
5820
|
+
const bytes = await loadFileOrHttpToArrayBuffer(source);
|
|
5821
|
+
await this.fontRegistry.registerFromBytes(bytes, desc);
|
|
5822
|
+
}
|
|
5823
|
+
async loadAsset(asset) {
|
|
5824
|
+
if (!this.layoutEngine || !this.fontRegistry) {
|
|
5825
|
+
throw new Error("Renderer not initialized. Call initialize() first.");
|
|
5826
|
+
}
|
|
5827
|
+
this.currentAsset = asset;
|
|
5828
|
+
let words;
|
|
5829
|
+
if (asset.src) {
|
|
5830
|
+
const bytes = await this.fetchFile(asset.src);
|
|
5831
|
+
const text = new TextDecoder().decode(bytes);
|
|
5832
|
+
words = parseSubtitleToWords(text);
|
|
5833
|
+
} else {
|
|
5834
|
+
words = (asset.words ?? []).map((w) => ({
|
|
5835
|
+
text: w.text,
|
|
5836
|
+
start: w.start,
|
|
5837
|
+
end: w.end,
|
|
5838
|
+
confidence: w.confidence
|
|
5839
|
+
}));
|
|
5840
|
+
}
|
|
5841
|
+
if (words.length === 0) {
|
|
5842
|
+
this.currentLayout = null;
|
|
5843
|
+
return;
|
|
5844
|
+
}
|
|
5845
|
+
const font = asset.font;
|
|
5846
|
+
const style = asset.style;
|
|
5847
|
+
const measureTextWidth = await createCanvasTextMeasurer();
|
|
5848
|
+
const layoutConfig = {
|
|
5849
|
+
frameWidth: this.width,
|
|
5850
|
+
frameHeight: this.height,
|
|
5851
|
+
maxWidth: asset.maxWidth ?? 0.9,
|
|
5852
|
+
maxLines: asset.maxLines ?? 2,
|
|
5853
|
+
position: asset.position ?? "bottom",
|
|
5854
|
+
fontSize: font?.size ?? 24,
|
|
5855
|
+
fontFamily: font?.family ?? "Roboto",
|
|
5856
|
+
fontWeight: String(font?.weight ?? "400"),
|
|
5857
|
+
letterSpacing: style?.letterSpacing ?? 0,
|
|
5858
|
+
wordSpacing: typeof style?.wordSpacing === "number" ? style.wordSpacing : 0,
|
|
5859
|
+
lineHeight: style?.lineHeight ?? 1.2,
|
|
5860
|
+
textTransform: style?.textTransform ?? "none",
|
|
5861
|
+
pauseThreshold: 500,
|
|
5862
|
+
measureTextWidth
|
|
5863
|
+
};
|
|
5864
|
+
this.currentLayout = await this.layoutEngine.layoutCaption(words, layoutConfig);
|
|
5865
|
+
}
|
|
5866
|
+
renderFrame(timeMs) {
|
|
5867
|
+
if (!this.currentAsset || !this.currentLayout || !this.layoutEngine) {
|
|
5868
|
+
return [];
|
|
5869
|
+
}
|
|
5870
|
+
const startTime = performance.now();
|
|
5871
|
+
const ops = generateRichCaptionDrawOps(
|
|
5872
|
+
this.currentAsset,
|
|
5873
|
+
this.currentLayout,
|
|
5874
|
+
timeMs,
|
|
5875
|
+
this.layoutEngine,
|
|
5876
|
+
this.generatorConfig
|
|
5877
|
+
);
|
|
5878
|
+
const endTime = performance.now();
|
|
5879
|
+
this.totalRenderTimeMs += endTime - startTime;
|
|
5880
|
+
this.frameCount++;
|
|
5881
|
+
if (this.frameCount - this.lastMemoryCheckFrame >= 1e3) {
|
|
5882
|
+
this.checkMemoryUsage();
|
|
5883
|
+
this.lastMemoryCheckFrame = this.frameCount;
|
|
5884
|
+
}
|
|
5885
|
+
return ops;
|
|
5886
|
+
}
|
|
5887
|
+
async generateVideo(outputPath, duration, options) {
|
|
5888
|
+
if (!this.currentAsset || !this.currentLayout) {
|
|
5889
|
+
throw new Error("No asset loaded. Call loadAsset() first.");
|
|
5890
|
+
}
|
|
5891
|
+
const animationStyle = this.extractAnimationStyle();
|
|
5892
|
+
const animationSpeed = this.extractAnimationSpeed();
|
|
5893
|
+
const durationMs = duration * 1e3;
|
|
5894
|
+
const schedule = createFrameSchedule(
|
|
5895
|
+
this.currentLayout,
|
|
5896
|
+
durationMs,
|
|
5897
|
+
this.fps,
|
|
5898
|
+
animationStyle,
|
|
5899
|
+
animationSpeed
|
|
5900
|
+
);
|
|
5901
|
+
const encoder = new NodeRawEncoder();
|
|
5902
|
+
await encoder.configure(
|
|
5903
|
+
{
|
|
5904
|
+
width: this.width * this.pixelRatio,
|
|
5905
|
+
height: this.height * this.pixelRatio,
|
|
5906
|
+
fps: this.fps,
|
|
5907
|
+
duration,
|
|
5908
|
+
crf: options?.crf ?? 23,
|
|
5909
|
+
preset: options?.preset ?? "ultrafast",
|
|
5910
|
+
profile: options?.profile ?? "high"
|
|
5911
|
+
},
|
|
5912
|
+
{
|
|
5913
|
+
outputPath,
|
|
5914
|
+
ffmpegPath: options?.ffmpegPath
|
|
5915
|
+
}
|
|
5916
|
+
);
|
|
5917
|
+
const painter = await createNodePainter({
|
|
5918
|
+
width: this.width,
|
|
5919
|
+
height: this.height,
|
|
5920
|
+
pixelRatio: this.pixelRatio
|
|
5921
|
+
});
|
|
5922
|
+
const bgColor = options?.bgColor ?? "#000000";
|
|
5923
|
+
const totalStart = performance.now();
|
|
5924
|
+
let framesProcessed = 0;
|
|
5925
|
+
let lastPct = -1;
|
|
5926
|
+
try {
|
|
5927
|
+
for (let i = 0; i < schedule.renderFrames.length; i++) {
|
|
5928
|
+
const renderFrame = schedule.renderFrames[i];
|
|
5929
|
+
const captionOps = this.renderFrame(renderFrame.timeMs);
|
|
5930
|
+
const beginOp = {
|
|
5931
|
+
op: "BeginFrame",
|
|
5932
|
+
width: this.width * this.pixelRatio,
|
|
5933
|
+
height: this.height * this.pixelRatio,
|
|
5934
|
+
pixelRatio: this.pixelRatio,
|
|
5935
|
+
clear: true,
|
|
5936
|
+
bg: { color: bgColor, opacity: 1, radius: 0 }
|
|
5937
|
+
};
|
|
5938
|
+
await painter.render([beginOp, ...captionOps]);
|
|
5939
|
+
const rawResult = painter.toRawRGBA();
|
|
5940
|
+
await encoder.encodeFrameRepeat(rawResult.data, renderFrame.repeatCount);
|
|
5941
|
+
framesProcessed += renderFrame.repeatCount;
|
|
5942
|
+
const pct = Math.floor(framesProcessed / schedule.totalFrames * 100);
|
|
5943
|
+
if (pct % 5 === 0 && pct !== lastPct) {
|
|
5944
|
+
lastPct = pct;
|
|
5945
|
+
const elapsed = performance.now() - totalStart;
|
|
5946
|
+
const fps = framesProcessed / (elapsed / 1e3);
|
|
5947
|
+
const eta = (schedule.totalFrames - framesProcessed) / fps * 1e3;
|
|
5948
|
+
this.logProgress(pct, framesProcessed, schedule.totalFrames, i + 1, schedule.uniqueFrameCount, fps, eta);
|
|
5949
|
+
}
|
|
5950
|
+
if (i % 500 === 0 && i > 0) {
|
|
5951
|
+
this.checkMemoryUsage();
|
|
5952
|
+
if (typeof global !== "undefined" && global.gc) {
|
|
5953
|
+
global.gc();
|
|
5954
|
+
}
|
|
5955
|
+
}
|
|
5956
|
+
}
|
|
5957
|
+
await encoder.flush();
|
|
5958
|
+
const totalTimeMs = performance.now() - totalStart;
|
|
5959
|
+
const realtimeMultiplier = duration / (totalTimeMs / 1e3);
|
|
5960
|
+
this.logCompletion(totalTimeMs, realtimeMultiplier);
|
|
5961
|
+
return outputPath;
|
|
5962
|
+
} catch (error) {
|
|
5963
|
+
encoder.close();
|
|
5964
|
+
throw error;
|
|
5965
|
+
}
|
|
5966
|
+
}
|
|
5967
|
+
async generateVideoLegacy(outputPath, duration, options) {
|
|
5968
|
+
if (!this.currentAsset || !this.currentLayout) {
|
|
5969
|
+
throw new Error("No asset loaded. Call loadAsset() first.");
|
|
5970
|
+
}
|
|
5971
|
+
const videoGenerator = new VideoGenerator();
|
|
5972
|
+
const frameGenerator = async (timeSeconds) => {
|
|
5973
|
+
const timeMs = timeSeconds * 1e3;
|
|
5974
|
+
const ops = this.renderFrame(timeMs);
|
|
5975
|
+
const beginFrameOp = {
|
|
5976
|
+
op: "BeginFrame",
|
|
5977
|
+
width: this.width * this.pixelRatio,
|
|
5978
|
+
height: this.height * this.pixelRatio,
|
|
5979
|
+
pixelRatio: this.pixelRatio,
|
|
5980
|
+
clear: true,
|
|
5981
|
+
bg: {
|
|
5982
|
+
color: options?.bgColor ?? "#000000",
|
|
5983
|
+
opacity: 1,
|
|
5984
|
+
radius: 0
|
|
5985
|
+
}
|
|
5986
|
+
};
|
|
5987
|
+
return [beginFrameOp, ...ops];
|
|
5988
|
+
};
|
|
5989
|
+
const videoOptions = {
|
|
5990
|
+
width: this.width,
|
|
5991
|
+
height: this.height,
|
|
5992
|
+
fps: this.fps,
|
|
5993
|
+
duration,
|
|
5994
|
+
outputPath,
|
|
5995
|
+
pixelRatio: this.pixelRatio,
|
|
5996
|
+
hasAlpha: false,
|
|
5997
|
+
...options
|
|
5998
|
+
};
|
|
5999
|
+
return videoGenerator.generateVideo(frameGenerator, videoOptions);
|
|
6000
|
+
}
|
|
6001
|
+
async generateVideoWithChunking(outputPath, duration, options) {
|
|
6002
|
+
if (!this.currentAsset || !this.currentLayout) {
|
|
6003
|
+
throw new Error("No asset loaded. Call loadAsset() first.");
|
|
6004
|
+
}
|
|
6005
|
+
const videoGenerator = new VideoGenerator();
|
|
6006
|
+
const chunkSize = 1e3;
|
|
6007
|
+
let processedFrames = 0;
|
|
6008
|
+
const frameGenerator = async (timeSeconds) => {
|
|
6009
|
+
const timeMs = timeSeconds * 1e3;
|
|
6010
|
+
const ops = this.renderFrame(timeMs);
|
|
6011
|
+
processedFrames++;
|
|
6012
|
+
if (processedFrames % chunkSize === 0) {
|
|
6013
|
+
this.checkMemoryUsage();
|
|
6014
|
+
if (typeof global !== "undefined" && global.gc) {
|
|
6015
|
+
global.gc();
|
|
6016
|
+
}
|
|
6017
|
+
}
|
|
6018
|
+
const beginFrameOp = {
|
|
6019
|
+
op: "BeginFrame",
|
|
6020
|
+
width: this.width * this.pixelRatio,
|
|
6021
|
+
height: this.height * this.pixelRatio,
|
|
6022
|
+
pixelRatio: this.pixelRatio,
|
|
6023
|
+
clear: true,
|
|
6024
|
+
bg: {
|
|
6025
|
+
color: options?.bgColor ?? "#000000",
|
|
6026
|
+
opacity: 1,
|
|
6027
|
+
radius: 0
|
|
6028
|
+
}
|
|
6029
|
+
};
|
|
6030
|
+
return [beginFrameOp, ...ops];
|
|
6031
|
+
};
|
|
6032
|
+
const videoOptions = {
|
|
6033
|
+
width: this.width,
|
|
6034
|
+
height: this.height,
|
|
6035
|
+
fps: this.fps,
|
|
6036
|
+
duration,
|
|
6037
|
+
outputPath,
|
|
6038
|
+
pixelRatio: this.pixelRatio,
|
|
6039
|
+
hasAlpha: false,
|
|
6040
|
+
...options
|
|
6041
|
+
};
|
|
6042
|
+
return videoGenerator.generateVideo(frameGenerator, videoOptions);
|
|
6043
|
+
}
|
|
6044
|
+
getFrameSchedule(duration) {
|
|
6045
|
+
if (!this.currentLayout) {
|
|
6046
|
+
throw new Error("No asset loaded. Call loadAsset() first.");
|
|
6047
|
+
}
|
|
6048
|
+
const animationStyle = this.extractAnimationStyle();
|
|
6049
|
+
const animationSpeed = this.extractAnimationSpeed();
|
|
6050
|
+
return createFrameSchedule(
|
|
6051
|
+
this.currentLayout,
|
|
6052
|
+
duration * 1e3,
|
|
6053
|
+
this.fps,
|
|
6054
|
+
animationStyle,
|
|
6055
|
+
animationSpeed
|
|
6056
|
+
);
|
|
6057
|
+
}
|
|
6058
|
+
getStats() {
|
|
6059
|
+
const cacheStats = this.layoutEngine?.getCacheStats() ?? { size: 0, calculatedSize: 0 };
|
|
6060
|
+
return {
|
|
6061
|
+
frameCount: this.frameCount,
|
|
6062
|
+
totalRenderTimeMs: this.totalRenderTimeMs,
|
|
6063
|
+
averageFrameTimeMs: this.frameCount > 0 ? this.totalRenderTimeMs / this.frameCount : 0,
|
|
6064
|
+
peakMemoryMB: this.peakMemoryMB,
|
|
6065
|
+
cacheHitRate: cacheStats.size > 0 ? 0.95 : 0
|
|
6066
|
+
};
|
|
6067
|
+
}
|
|
6068
|
+
resetStats() {
|
|
6069
|
+
this.frameCount = 0;
|
|
6070
|
+
this.totalRenderTimeMs = 0;
|
|
6071
|
+
this.peakMemoryMB = 0;
|
|
6072
|
+
this.lastMemoryCheckFrame = 0;
|
|
6073
|
+
}
|
|
6074
|
+
clearCache() {
|
|
6075
|
+
this.layoutEngine?.clearCache();
|
|
6076
|
+
}
|
|
6077
|
+
extractAnimationStyle() {
|
|
6078
|
+
const wordAnim = this.currentAsset?.wordAnimation;
|
|
6079
|
+
return wordAnim?.style ?? "highlight";
|
|
6080
|
+
}
|
|
6081
|
+
extractAnimationSpeed() {
|
|
6082
|
+
const wordAnim = this.currentAsset?.wordAnimation;
|
|
6083
|
+
return wordAnim?.speed ?? 1;
|
|
6084
|
+
}
|
|
6085
|
+
logProgress(pct, framesProcessed, totalFrames, uniqueProcessed, uniqueTotal, fps, eta) {
|
|
6086
|
+
if (typeof process !== "undefined" && process.stderr) {
|
|
6087
|
+
process.stderr.write(
|
|
6088
|
+
` [${String(pct).padStart(3)}%] Frame ${framesProcessed}/${totalFrames} (${uniqueProcessed}/${uniqueTotal} unique) | ${fps.toFixed(1)} fps | ETA: ${formatMs(eta)}
|
|
6089
|
+
`
|
|
6090
|
+
);
|
|
6091
|
+
}
|
|
6092
|
+
}
|
|
6093
|
+
logCompletion(totalTimeMs, realtimeMultiplier) {
|
|
6094
|
+
if (typeof process !== "undefined" && process.stderr) {
|
|
6095
|
+
process.stderr.write(
|
|
6096
|
+
` Done: ${formatMs(totalTimeMs)} (${realtimeMultiplier.toFixed(1)}x realtime)
|
|
6097
|
+
`
|
|
6098
|
+
);
|
|
6099
|
+
}
|
|
6100
|
+
}
|
|
6101
|
+
checkMemoryUsage() {
|
|
6102
|
+
if (typeof process !== "undefined" && process.memoryUsage) {
|
|
6103
|
+
const usage = process.memoryUsage();
|
|
6104
|
+
const heapUsedMB = usage.heapUsed / (1024 * 1024);
|
|
6105
|
+
if (heapUsedMB > this.peakMemoryMB) {
|
|
6106
|
+
this.peakMemoryMB = heapUsedMB;
|
|
6107
|
+
}
|
|
6108
|
+
if (usage.heapUsed > 1500 * 1024 * 1024) {
|
|
6109
|
+
if (typeof global !== "undefined" && global.gc) {
|
|
6110
|
+
global.gc();
|
|
6111
|
+
}
|
|
6112
|
+
}
|
|
6113
|
+
}
|
|
6114
|
+
}
|
|
6115
|
+
destroy() {
|
|
6116
|
+
this.currentAsset = null;
|
|
6117
|
+
this.currentLayout = null;
|
|
6118
|
+
this.layoutEngine?.clearCache();
|
|
6119
|
+
if (this.fontRegistry) {
|
|
6120
|
+
this.fontRegistry.release();
|
|
6121
|
+
this.fontRegistry = null;
|
|
6122
|
+
}
|
|
6123
|
+
this.layoutEngine = null;
|
|
6124
|
+
}
|
|
6125
|
+
};
|
|
6126
|
+
function formatMs(ms) {
|
|
6127
|
+
if (ms < 1e3) return `${Math.round(ms)}ms`;
|
|
6128
|
+
if (ms < 6e4) return `${(ms / 1e3).toFixed(1)}s`;
|
|
6129
|
+
return `${Math.floor(ms / 6e4)}m ${(ms % 6e4 / 1e3).toFixed(0)}s`;
|
|
6130
|
+
}
|
|
6131
|
+
async function createRichCaptionRenderer(options) {
|
|
6132
|
+
const renderer = new RichCaptionRenderer(options);
|
|
6133
|
+
await renderer.initialize();
|
|
6134
|
+
return renderer;
|
|
6135
|
+
}
|
|
6136
|
+
|
|
6137
|
+
// src/core/video/encoder-factory.ts
|
|
6138
|
+
async function createVideoEncoder(config, options) {
|
|
6139
|
+
const platform = options?.platform ?? detectPlatform();
|
|
6140
|
+
if (platform === "node") {
|
|
6141
|
+
throw new Error("Use createNodeRawEncoder from node-raw-encoder module for Node.js encoding");
|
|
6142
|
+
}
|
|
6143
|
+
if (options?.preferredEncoder === "mediarecorder") {
|
|
6144
|
+
return createMediaRecorderEncoder(config, options?.canvas);
|
|
6145
|
+
}
|
|
6146
|
+
const webCodecsSupported = await isWebCodecsH264Supported();
|
|
6147
|
+
if (webCodecsSupported) {
|
|
6148
|
+
try {
|
|
6149
|
+
const { WebCodecsEncoder: WebCodecsEncoder2 } = await Promise.resolve().then(() => (init_web_encoder(), web_encoder_exports));
|
|
6150
|
+
const encoder = new WebCodecsEncoder2();
|
|
6151
|
+
await encoder.configure(config);
|
|
6152
|
+
return encoder;
|
|
6153
|
+
} catch (error) {
|
|
6154
|
+
console.warn("WebCodecs encoder failed to initialize, falling back to MediaRecorder:", error);
|
|
6155
|
+
}
|
|
6156
|
+
}
|
|
6157
|
+
return createMediaRecorderEncoder(config, options?.canvas);
|
|
6158
|
+
}
|
|
6159
|
+
async function createMediaRecorderEncoder(config, canvas) {
|
|
6160
|
+
const { MediaRecorderFallback: MediaRecorderFallback2 } = await Promise.resolve().then(() => (init_mediarecorder_fallback(), mediarecorder_fallback_exports));
|
|
6161
|
+
const encoder = new MediaRecorderFallback2();
|
|
6162
|
+
await encoder.configure(config, canvas);
|
|
6163
|
+
return encoder;
|
|
6164
|
+
}
|
|
6165
|
+
async function isWebCodecsH264Supported() {
|
|
6166
|
+
if (typeof globalThis === "undefined") return false;
|
|
6167
|
+
const VideoEncoder2 = globalThis.VideoEncoder;
|
|
6168
|
+
if (!VideoEncoder2 || typeof VideoEncoder2.isConfigSupported !== "function") {
|
|
6169
|
+
return false;
|
|
6170
|
+
}
|
|
6171
|
+
try {
|
|
6172
|
+
const config = {
|
|
6173
|
+
codec: "avc1.42001E",
|
|
6174
|
+
width: 1920,
|
|
6175
|
+
height: 1080,
|
|
6176
|
+
bitrate: 8e6,
|
|
6177
|
+
framerate: 30
|
|
6178
|
+
};
|
|
6179
|
+
const support = await VideoEncoder2.isConfigSupported(config);
|
|
6180
|
+
return support.supported === true;
|
|
6181
|
+
} catch {
|
|
6182
|
+
return false;
|
|
6183
|
+
}
|
|
6184
|
+
}
|
|
6185
|
+
async function getEncoderCapabilities() {
|
|
6186
|
+
const platform = detectPlatform();
|
|
6187
|
+
if (platform === "node") {
|
|
6188
|
+
return {
|
|
6189
|
+
encoder: "node-raw",
|
|
6190
|
+
codec: "h264",
|
|
6191
|
+
hardwareAccelerated: false,
|
|
6192
|
+
supportsH264: true
|
|
6193
|
+
};
|
|
6194
|
+
}
|
|
6195
|
+
const webCodecsSupported = await isWebCodecsH264Supported();
|
|
6196
|
+
if (webCodecsSupported) {
|
|
6197
|
+
return {
|
|
6198
|
+
encoder: "webcodecs",
|
|
6199
|
+
codec: "h264",
|
|
6200
|
+
hardwareAccelerated: true,
|
|
6201
|
+
supportsH264: true
|
|
6202
|
+
};
|
|
6203
|
+
}
|
|
6204
|
+
return {
|
|
6205
|
+
encoder: "mediarecorder",
|
|
6206
|
+
codec: "vp9",
|
|
6207
|
+
hardwareAccelerated: false,
|
|
6208
|
+
supportsH264: false
|
|
6209
|
+
};
|
|
6210
|
+
}
|
|
6211
|
+
function detectPlatform() {
|
|
6212
|
+
if (typeof window === "undefined" && typeof process !== "undefined" && process.versions?.node) {
|
|
6213
|
+
return "node";
|
|
6214
|
+
}
|
|
6215
|
+
return "web";
|
|
6216
|
+
}
|
|
6217
|
+
function getEncoderWarning() {
|
|
6218
|
+
const platform = detectPlatform();
|
|
6219
|
+
if (platform === "node") return null;
|
|
6220
|
+
if (typeof globalThis !== "undefined") {
|
|
6221
|
+
const VideoEncoder2 = globalThis.VideoEncoder;
|
|
6222
|
+
if (!VideoEncoder2) {
|
|
6223
|
+
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+.";
|
|
6224
|
+
}
|
|
6225
|
+
}
|
|
6226
|
+
return null;
|
|
6227
|
+
}
|
|
6228
|
+
|
|
3676
6229
|
// src/env/entry.node.ts
|
|
3677
6230
|
var registeredGlobalFonts = /* @__PURE__ */ new Set();
|
|
3678
6231
|
async function registerColorEmojiWithCanvas(family, bytes) {
|
|
@@ -3992,22 +6545,47 @@ async function createTextEngine(opts = {}) {
|
|
|
3992
6545
|
}
|
|
3993
6546
|
// Annotate the CommonJS export names for ESM import in node:
|
|
3994
6547
|
0 && (module.exports = {
|
|
6548
|
+
CanvasRichCaptionAssetSchema,
|
|
3995
6549
|
CanvasRichTextAssetSchema,
|
|
3996
6550
|
CanvasSvgAssetSchema,
|
|
6551
|
+
CaptionLayoutEngine,
|
|
6552
|
+
FontRegistry,
|
|
6553
|
+
NodeRawEncoder,
|
|
6554
|
+
RichCaptionRenderer,
|
|
6555
|
+
WordTimingStore,
|
|
3997
6556
|
arcToCubicBeziers,
|
|
6557
|
+
calculateAnimationStatesForGroup,
|
|
3998
6558
|
commandsToPathString,
|
|
3999
6559
|
computeSimplePathBounds,
|
|
6560
|
+
createDefaultGeneratorConfig,
|
|
6561
|
+
createFrameSchedule,
|
|
4000
6562
|
createNodePainter,
|
|
6563
|
+
createNodeRawEncoder,
|
|
6564
|
+
createRichCaptionRenderer,
|
|
4001
6565
|
createTextEngine,
|
|
6566
|
+
createVideoEncoder,
|
|
6567
|
+
detectPlatform,
|
|
6568
|
+
detectSubtitleFormat,
|
|
6569
|
+
findWordAtTime,
|
|
6570
|
+
generateRichCaptionDrawOps,
|
|
6571
|
+
generateRichCaptionFrame,
|
|
4002
6572
|
generateShapePathData,
|
|
4003
|
-
|
|
4004
|
-
|
|
6573
|
+
getDefaultAnimationConfig,
|
|
6574
|
+
getDrawCaptionWordOps,
|
|
6575
|
+
getEncoderCapabilities,
|
|
6576
|
+
getEncoderWarning,
|
|
6577
|
+
groupWordsByPause,
|
|
6578
|
+
isDrawCaptionWordOp,
|
|
6579
|
+
isRTLText,
|
|
6580
|
+
isWebCodecsH264Supported,
|
|
4005
6581
|
normalizePath,
|
|
4006
6582
|
normalizePathString,
|
|
6583
|
+
parseSubtitleToWords,
|
|
4007
6584
|
parseSvgPath,
|
|
4008
6585
|
quadraticToCubic,
|
|
4009
6586
|
renderSvgAssetToPng,
|
|
4010
6587
|
renderSvgToPng,
|
|
6588
|
+
richCaptionAssetSchema,
|
|
4011
6589
|
shapeToSvgString,
|
|
4012
6590
|
svgAssetSchema,
|
|
4013
6591
|
svgGradientStopSchema,
|