@subvo/renderer 1.0.0

package/dist/renderer.d.ts

@@ -0,0 +1,66 @@
+type SchemaVersion = "1.0";
+type RenderJob = {
+    schemaVersion: SchemaVersion;
+    rendererVersion: string;
+    fps: number;
+    durationMs: number;
+    playRes: {
+        width: number;
+        height: number;
+    };
+    style: RenderStyle;
+    lines: RenderLine[];
+    layoutHints?: RenderLayoutHints;
+    metadata?: RenderMetadata;
+};
+type RenderLine = {
+    id: string;
+    startMs: number;
+    endMs: number;
+    words: RenderWord[];
+};
+type RenderWord = {
+    id: string;
+    text: string;
+    startMs: number;
+    endMs: number;
+};
+type RenderLayoutHints = {
+    maxWordsPerLine?: number;
+};
+type RenderMetadata = {
+    jobId?: string;
+    source?: string;
+    createdAt?: string;
+    tags?: string[];
+};
+type RenderPosition = "bottom_safe" | "center";
+type RenderPreset = "fire" | "clean" | "luxury" | "pop" | "ghost";
+type RenderStyle = {
+    fontFamily: string;
+    fontSize: number;
+    fontWeight: number;
+    lineSpacing: number;
+    baseColor: string;
+    highlightColor: string;
+    outlineWidth: number;
+    outlineColor: string;
+    shadow: boolean;
+    shadowDepth: number;
+    glowIntensity: number;
+    highlightStrength: number;
+    pulse: number;
+    karaokeScale: number;
+    maxWordsPerLine: number;
+    position: RenderPosition;
+    offsetY: number;
+    fadeInMs: number;
+    fadeOutMs: number;
+    preset: RenderPreset;
+};
+
+declare function renderFrame(ctx: CanvasRenderingContext2D, renderJob: RenderJob, timeMs: number): void;
+
+declare const VERSION: string;
+
+export { type RenderJob, type RenderLayoutHints, type RenderLine, type RenderMetadata, type RenderPosition, type RenderPreset, type RenderStyle, type RenderWord, type SchemaVersion, VERSION, renderFrame };

package/dist/renderer.esm.js

@@ -0,0 +1,146 @@
+// src/layout.ts
+function computeLayout(ctx, renderJob) {
+  const { style } = renderJob;
+  ctx.font = `${style.fontWeight} ${style.fontSize}px ${style.fontFamily}`;
+  ctx.textBaseline = "alphabetic";
+  return renderJob.lines.map((line) => {
+    const rows = chunkWords(line.words, style.maxWordsPerLine);
+    return {
+      line,
+      rows: rows.map((words) => {
+        let rowWidth = 0;
+        const measuredWords = words.map((word, index) => {
+          const text = index < words.length - 1 ? `${word.text} ` : word.text;
+          const metrics = ctx.measureText(text);
+          const width = metrics.width;
+          rowWidth += width;
+          return {
+            word,
+            text,
+            width
+          };
+        });
+        return {
+          words: measuredWords,
+          width: rowWidth
+        };
+      })
+    };
+  });
+}
+function chunkWords(words, maxPerLine) {
+  if (maxPerLine <= 0) return [words];
+  const rows = [];
+  let current = [];
+  for (const word of words) {
+    current.push(word);
+    if (current.length >= maxPerLine) {
+      rows.push(current);
+      current = [];
+    }
+  }
+  if (current.length > 0) {
+    rows.push(current);
+  }
+  return rows;
+}
+
+// src/effects.ts
+function clamp(value, min = 0, max = 1) {
+  return Math.min(max, Math.max(min, value));
+}
+function computeFadeAlpha(style, line, timeMs) {
+  let alpha = 1;
+  if (style.fadeInMs > 0) {
+    alpha = Math.min(alpha, (timeMs - line.startMs) / style.fadeInMs);
+  }
+  if (style.fadeOutMs > 0) {
+    alpha = Math.min(alpha, (line.endMs - timeMs) / style.fadeOutMs);
+  }
+  return clamp(alpha);
+}
+function computeWordProgress(word, timeMs) {
+  const duration = word.endMs - word.startMs;
+  if (duration <= 0) return 0;
+  return clamp((timeMs - word.startMs) / duration);
+}
+function computePulseScale(style, progress) {
+  return 1 + (style.pulse - 1) * progress * style.highlightStrength;
+}
+
+// src/drawText.ts
+function drawWord(ctx, text, x, y, style, scaleFactor, ascent, fillColor) {
+  const invScale = 1 / scaleFactor;
+  ctx.save();
+  ctx.translate(x, y);
+  ctx.translate(0, -ascent);
+  ctx.scale(scaleFactor, scaleFactor);
+  ctx.translate(0, ascent);
+  ctx.fillStyle = fillColor;
+  if (style.outlineWidth > 0) {
+    ctx.lineWidth = style.outlineWidth * invScale;
+    ctx.strokeStyle = style.outlineColor;
+    ctx.strokeText(text, 0, 0);
+  }
+  if (style.shadow || style.glowIntensity > 0) {
+    ctx.shadowColor = style.outlineColor;
+    ctx.shadowOffsetX = style.shadow ? style.shadowDepth * invScale : 0;
+    ctx.shadowOffsetY = style.shadow ? style.shadowDepth * invScale : 0;
+    ctx.shadowBlur = style.glowIntensity > 0 ? style.fontSize * 0.3 * invScale : 0;
+  } else {
+    ctx.shadowColor = "transparent";
+    ctx.shadowBlur = 0;
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = 0;
+  }
+  ctx.fillText(text, 0, 0);
+  ctx.restore();
+}
+
+// src/renderFrame.ts
+function renderFrame(ctx, renderJob, timeMs) {
+  const { playRes, style } = renderJob;
+  const layout = computeLayout(ctx, renderJob);
+  const active = layout.find(
+    (line) => timeMs >= line.line.startMs && timeMs <= line.line.endMs
+  );
+  if (!active) return;
+  const transform = ctx.getTransform();
+  const canvasWidth = ctx.canvas.width / (transform.a || 1);
+  const canvasHeight = ctx.canvas.height / (transform.d || 1);
+  const scale = Math.max(canvasWidth / playRes.width, canvasHeight / playRes.height);
+  const offsetX = (canvasWidth - playRes.width * scale) / 2;
+  const offsetY = (canvasHeight - playRes.height * scale) / 2;
+  const alpha = computeFadeAlpha(style, active.line, timeMs);
+  ctx.save();
+  ctx.translate(offsetX, offsetY);
+  ctx.scale(scale, scale);
+  ctx.globalAlpha = alpha;
+  ctx.font = `${style.fontWeight} ${style.fontSize}px ${style.fontFamily}`;
+  ctx.textBaseline = "alphabetic";
+  const metrics = ctx.measureText("Mg");
+  const ascent = metrics.actualBoundingBoxAscent;
+  const centerX = playRes.width / 2;
+  let y = style.position === "center" ? playRes.height / 2 + style.offsetY : playRes.height * 0.92 + style.offsetY;
+  for (const row of active.rows) {
+    let x = centerX - row.width / 2;
+    for (const { word, text, width } of row.words) {
+      const activeWord = timeMs >= word.startMs && timeMs <= word.endMs;
+      const progress = activeWord ? computeWordProgress(word, timeMs) : 0;
+      const scaleFactor = computePulseScale(style, progress);
+      const fillColor = activeWord ? style.highlightColor : style.baseColor;
+      drawWord(ctx, text, x, y, style, scaleFactor, ascent, fillColor);
+      x += width;
+    }
+    y += style.fontSize * style.lineSpacing;
+  }
+  ctx.restore();
+}
+
+// src/index.ts
+var injectedVersion = "1.0.0".length > 0 ? "1.0.0" : "dev";
+var VERSION = injectedVersion;
+export {
+  VERSION,
+  renderFrame
+};

package/dist/renderer.iife.js

@@ -0,0 +1,171 @@
+"use strict";
+var SubvoRenderer = (() => {
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __export = (target, all) => {
+    for (var name in all)
+      __defProp(target, name, { get: all[name], enumerable: true });
+  };
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+  // src/index.ts
+  var src_exports = {};
+  __export(src_exports, {
+    VERSION: () => VERSION,
+    renderFrame: () => renderFrame
+  });
+
+  // src/layout.ts
+  function computeLayout(ctx, renderJob) {
+    const { style } = renderJob;
+    ctx.font = `${style.fontWeight} ${style.fontSize}px ${style.fontFamily}`;
+    ctx.textBaseline = "alphabetic";
+    return renderJob.lines.map((line) => {
+      const rows = chunkWords(line.words, style.maxWordsPerLine);
+      return {
+        line,
+        rows: rows.map((words) => {
+          let rowWidth = 0;
+          const measuredWords = words.map((word, index) => {
+            const text = index < words.length - 1 ? `${word.text} ` : word.text;
+            const metrics = ctx.measureText(text);
+            const width = metrics.width;
+            rowWidth += width;
+            return {
+              word,
+              text,
+              width
+            };
+          });
+          return {
+            words: measuredWords,
+            width: rowWidth
+          };
+        })
+      };
+    });
+  }
+  function chunkWords(words, maxPerLine) {
+    if (maxPerLine <= 0) return [words];
+    const rows = [];
+    let current = [];
+    for (const word of words) {
+      current.push(word);
+      if (current.length >= maxPerLine) {
+        rows.push(current);
+        current = [];
+      }
+    }
+    if (current.length > 0) {
+      rows.push(current);
+    }
+    return rows;
+  }
+
+  // src/effects.ts
+  function clamp(value, min = 0, max = 1) {
+    return Math.min(max, Math.max(min, value));
+  }
+  function computeFadeAlpha(style, line, timeMs) {
+    let alpha = 1;
+    if (style.fadeInMs > 0) {
+      alpha = Math.min(alpha, (timeMs - line.startMs) / style.fadeInMs);
+    }
+    if (style.fadeOutMs > 0) {
+      alpha = Math.min(alpha, (line.endMs - timeMs) / style.fadeOutMs);
+    }
+    return clamp(alpha);
+  }
+  function computeWordProgress(word, timeMs) {
+    const duration = word.endMs - word.startMs;
+    if (duration <= 0) return 0;
+    return clamp((timeMs - word.startMs) / duration);
+  }
+  function computePulseScale(style, progress) {
+    return 1 + (style.pulse - 1) * progress * style.highlightStrength;
+  }
+
+  // src/drawText.ts
+  function drawWord(ctx, text, x, y, style, scaleFactor, ascent, fillColor) {
+    const invScale = 1 / scaleFactor;
+    ctx.save();
+    ctx.translate(x, y);
+    ctx.translate(0, -ascent);
+    ctx.scale(scaleFactor, scaleFactor);
+    ctx.translate(0, ascent);
+    ctx.fillStyle = fillColor;
+    if (style.outlineWidth > 0) {
+      ctx.lineWidth = style.outlineWidth * invScale;
+      ctx.strokeStyle = style.outlineColor;
+      ctx.strokeText(text, 0, 0);
+    }
+    if (style.shadow || style.glowIntensity > 0) {
+      ctx.shadowColor = style.outlineColor;
+      ctx.shadowOffsetX = style.shadow ? style.shadowDepth * invScale : 0;
+      ctx.shadowOffsetY = style.shadow ? style.shadowDepth * invScale : 0;
+      ctx.shadowBlur = style.glowIntensity > 0 ? style.fontSize * 0.3 * invScale : 0;
+    } else {
+      ctx.shadowColor = "transparent";
+      ctx.shadowBlur = 0;
+      ctx.shadowOffsetX = 0;
+      ctx.shadowOffsetY = 0;
+    }
+    ctx.fillText(text, 0, 0);
+    ctx.restore();
+  }
+
+  // src/renderFrame.ts
+  function renderFrame(ctx, renderJob, timeMs) {
+    const { playRes, style } = renderJob;
+    const layout = computeLayout(ctx, renderJob);
+    const active = layout.find(
+      (line) => timeMs >= line.line.startMs && timeMs <= line.line.endMs
+    );
+    if (!active) return;
+    const transform = ctx.getTransform();
+    const canvasWidth = ctx.canvas.width / (transform.a || 1);
+    const canvasHeight = ctx.canvas.height / (transform.d || 1);
+    const scale = Math.max(canvasWidth / playRes.width, canvasHeight / playRes.height);
+    const offsetX = (canvasWidth - playRes.width * scale) / 2;
+    const offsetY = (canvasHeight - playRes.height * scale) / 2;
+    const alpha = computeFadeAlpha(style, active.line, timeMs);
+    ctx.save();
+    ctx.translate(offsetX, offsetY);
+    ctx.scale(scale, scale);
+    ctx.globalAlpha = alpha;
+    ctx.font = `${style.fontWeight} ${style.fontSize}px ${style.fontFamily}`;
+    ctx.textBaseline = "alphabetic";
+    const metrics = ctx.measureText("Mg");
+    const ascent = metrics.actualBoundingBoxAscent;
+    const centerX = playRes.width / 2;
+    let y = style.position === "center" ? playRes.height / 2 + style.offsetY : playRes.height * 0.92 + style.offsetY;
+    for (const row of active.rows) {
+      let x = centerX - row.width / 2;
+      for (const { word, text, width } of row.words) {
+        const activeWord = timeMs >= word.startMs && timeMs <= word.endMs;
+        const progress = activeWord ? computeWordProgress(word, timeMs) : 0;
+        const scaleFactor = computePulseScale(style, progress);
+        const fillColor = activeWord ? style.highlightColor : style.baseColor;
+        drawWord(ctx, text, x, y, style, scaleFactor, ascent, fillColor);
+        x += width;
+      }
+      y += style.fontSize * style.lineSpacing;
+    }
+    ctx.restore();
+  }
+
+  // src/index.ts
+  var injectedVersion = "1.0.0".length > 0 ? "1.0.0" : "dev";
+  var VERSION = injectedVersion;
+  return __toCommonJS(src_exports);
+})();

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@subvo/renderer",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./dist/renderer.esm.js",
+  "module": "./dist/renderer.esm.js",
+  "types": "./dist/renderer.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/renderer.d.ts",
+      "import": "./dist/renderer.esm.js"
+    },
+    "./iife": "./dist/renderer.iife.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.7.0"
+  },
+  "scripts": {
+    "build": "tsup"
+  }
+}