@markdy/renderer-dom 0.5.2 → 0.5.4

package/README.md

@@ -50,7 +50,10 @@ player.destroy();    // clean up DOM + cancel animations
 | `container` | `HTMLElement` | *(required)* | DOM element to mount the scene into |
 | `code` | `string` | *(required)* | MarkdyScript source code |
 | `assets` | `Record<string, string>` | `{}` | Asset URL overrides (key = asset name) |
-| `autoplay` | `boolean` | `false` | Start playing immediately |
+| `autoplay` | `boolean` | `true` | Start playing immediately |
+| `loop` | `boolean` | `true` | Loop the animation when it reaches the end |
+| `copyright` | `boolean` | `true` | Show a small "Powered by Markdy" badge below the animation |
+| `progressBar` | `boolean` | `true` | Show a rainbow progress bar around the viewport border |
 
 ### `Player`
 

package/dist/index.js

@@ -659,11 +659,12 @@ function createPlayer(opts) {
     });
     viewport.appendChild(progressEl);
   }
+  const tlAngle = (Math.atan2(-ast.meta.width / 2, ast.meta.height / 2) * 180 / Math.PI + 360) % 360;
   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.background = `conic-gradient(from ${tlAngle}deg, ${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";
@@ -686,7 +687,9 @@ function createPlayer(opts) {
       textDecoration: "none",
       padding: "3px 6px 0",
       opacity: "0.7",
-      transition: "opacity 0.2s"
+      transition: "opacity 0.2s",
+      maxWidth: container.style.maxWidth || "100%",
+      width: "100%"
     });
     badge.addEventListener("mouseenter", () => {
       badge.style.opacity = "1";
@@ -694,7 +697,11 @@ function createPlayer(opts) {
     badge.addEventListener("mouseleave", () => {
       badge.style.opacity = "0.7";
     });
-    container.appendChild(badge);
+    if (container.parentNode) {
+      container.parentNode.insertBefore(badge, container.nextSibling);
+    } else {
+      container.appendChild(badge);
+    }
   }
   const scene = document.createElement("div");
   Object.assign(scene.style, {
@@ -814,7 +821,7 @@ function createPlayer(opts) {
       for (const anim of allAnims) anim.cancel();
       resizeObserver.disconnect();
       if (progressEl?.parentNode === viewport) viewport.removeChild(progressEl);
-      if (badge?.parentNode === container) container.removeChild(badge);
+      if (badge?.parentNode) badge.parentNode.removeChild(badge);
       if (viewport.parentNode === container) container.removeChild(viewport);
     }
   };

package/package.json

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