@markdy/renderer-dom 0.5.1 → 0.5.2

package/dist/index.d.ts

@@ -28,6 +28,8 @@ interface PlayerOptions {
     loop?: boolean;
     /** Show a small "Powered by Markdy" badge below the animation. Defaults to true. */
     copyright?: boolean;
+    /** Show a rainbow progress bar around the viewport border. Defaults to true. */
+    progressBar?: boolean;
 }
 interface Player {
     play(): void;

package/dist/index.js

@@ -637,7 +637,7 @@ function buildAction(ev, el, s, baseOpts, delayMs, durMs, ast, states, scene, as
 
 // src/player.ts
 function createPlayer(opts) {
-  const { container, code, assets: assetOverrides = {}, autoplay = true, loop = true, copyright = true } = opts;
+  const { container, code, assets: assetOverrides = {}, autoplay = true, loop = true, copyright = true, progressBar = true } = opts;
   const ast = parse(code);
   const viewport = document.createElement("div");
   Object.assign(viewport.style, {
@@ -647,6 +647,29 @@ function createPlayer(opts) {
     overflow: "hidden"
   });
   container.appendChild(viewport);
+  let progressEl = null;
+  if (progressBar) {
+    progressEl = document.createElement("div");
+    Object.assign(progressEl.style, {
+      position: "absolute",
+      inset: "0",
+      zIndex: "9999",
+      pointerEvents: "none",
+      borderRadius: "inherit"
+    });
+    viewport.appendChild(progressEl);
+  }
+  function updateProgressBar(pct) {
+    if (!progressEl) return;
+    const deg = pct * 360;
+    const rainbow = "hsl(0,90%,60%), hsl(45,90%,55%), hsl(90,80%,50%), hsl(180,80%,50%), hsl(270,80%,55%), hsl(330,90%,60%)";
+    progressEl.style.background = `conic-gradient(from 225deg, ${rainbow} ${deg}deg, transparent ${deg}deg)`;
+    progressEl.style.mask = `linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)`;
+    progressEl.style.webkitMask = progressEl.style.mask;
+    progressEl.style.maskComposite = "exclude";
+    progressEl.style.webkitMaskComposite = "xor";
+    progressEl.style.padding = "2px";
+  }
   let badge = null;
   if (copyright) {
     badge = document.createElement("a");
@@ -760,6 +783,8 @@ function createPlayer(opts) {
       }
     }
     applyCurrentTime();
+    const totalMsP = (ast.meta.duration ?? 0) * 1e3;
+    if (totalMsP > 0) updateProgressBar(sceneMs / totalMsP);
     rafId = requestAnimationFrame(rafTick);
   }
   const player = {
@@ -781,11 +806,14 @@ function createPlayer(opts) {
     seek(seconds) {
       sceneMs = seconds * 1e3;
       applyCurrentTime();
+      const totalMsS = (ast.meta.duration ?? 0) * 1e3;
+      if (totalMsS > 0) updateProgressBar(sceneMs / totalMsS);
     },
     destroy() {
       player.pause();
       for (const anim of allAnims) anim.cancel();
       resizeObserver.disconnect();
+      if (progressEl?.parentNode === viewport) viewport.removeChild(progressEl);
       if (badge?.parentNode === container) container.removeChild(badge);
       if (viewport.parentNode === container) container.removeChild(viewport);
     }

package/package.json

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