@markdy/renderer-dom 0.5.5 → 0.5.7

package/dist/index.js

@@ -540,6 +540,7 @@ function buildAction(ev, el, s, baseOpts, delayMs, durMs, ast, states, scene, as
         transformOrigin: "center bottom",
         background: "white",
         border: "2px solid #222",
+        color: "#222",
         borderRadius: "12px",
         padding: "6px 14px",
         fontFamily: "system-ui, sans-serif",
@@ -636,9 +637,26 @@ function buildAction(ev, el, s, baseOpts, delayMs, durMs, ast, states, scene, as
 }
 
 // src/player.ts
+function bgToTextColor(bg) {
+  let hex = bg.trim().replace(/^#/, "");
+  if (hex.length === 3) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+  if (hex.length === 6) {
+    const r = parseInt(hex.slice(0, 2), 16);
+    const g = parseInt(hex.slice(2, 4), 16);
+    const b = parseInt(hex.slice(4, 6), 16);
+    return 0.299 * r + 0.587 * g + 0.114 * b > 140 ? "#1a1a1a" : "#f0f0f0";
+  }
+  const named = {
+    white: "#1a1a1a",
+    black: "#f0f0f0",
+    transparent: "#1a1a1a"
+  };
+  return named[bg.toLowerCase()] ?? "#1a1a1a";
+}
 function createPlayer(opts) {
   const { container, code, assets: assetOverrides = {}, autoplay = true, loop = true, copyright = true, progressBar = true } = opts;
   const ast = parse(code);
+  const totalDurationMs = (ast.meta.duration ?? 0) * 1e3;
   const viewport = document.createElement("div");
   Object.assign(viewport.style, {
     position: "relative",
@@ -711,6 +729,7 @@ function createPlayer(opts) {
     width: `${ast.meta.width}px`,
     height: `${ast.meta.height}px`,
     background: ast.meta.bg,
+    color: bgToTextColor(ast.meta.bg),
     overflow: "hidden",
     userSelect: "none",
     transformOrigin: "0 0"
@@ -776,12 +795,11 @@ function createPlayer(opts) {
       sceneMs += timestamp - lastRafTs;
     }
     lastRafTs = timestamp;
-    const totalMs = (ast.meta.duration ?? 0) * 1e3;
-    if (totalMs > 0 && sceneMs >= totalMs) {
+    if (totalDurationMs > 0 && sceneMs >= totalDurationMs) {
       if (loop) {
-        sceneMs = sceneMs % totalMs;
+        sceneMs = sceneMs % totalDurationMs;
       } else {
-        sceneMs = totalMs;
+        sceneMs = totalDurationMs;
         applyCurrentTime();
         isPlaying = false;
         lastRafTs = null;
@@ -790,8 +808,7 @@ function createPlayer(opts) {
       }
     }
     applyCurrentTime();
-    const totalMsP = (ast.meta.duration ?? 0) * 1e3;
-    if (totalMsP > 0) updateProgressBar(sceneMs / totalMsP);
+    if (totalDurationMs > 0) updateProgressBar(sceneMs / totalDurationMs);
     rafId = requestAnimationFrame(rafTick);
   }
   const player = {
@@ -813,8 +830,7 @@ function createPlayer(opts) {
     seek(seconds) {
       sceneMs = seconds * 1e3;
       applyCurrentTime();
-      const totalMsS = (ast.meta.duration ?? 0) * 1e3;
-      if (totalMsS > 0) updateProgressBar(sceneMs / totalMsS);
+      if (totalDurationMs > 0) updateProgressBar(sceneMs / totalDurationMs);
     },
     destroy() {
       player.pause();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdy/renderer-dom",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "description": "Web Animations API renderer for MarkdyScript scenes.",
   "license": "MIT",
   "type": "module",
@@ -43,7 +43,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@markdy/core": "0.5.5"
+    "@markdy/core": "0.5.7"
   },
   "devDependencies": {
     "tsup": "^8.5.1",