@efxlab/motion-canvas-player 4.0.0

package/dist/main.js

@@ -0,0 +1,299 @@
+var y = Object.defineProperty;
+var g = (l, n, t) => n in l ? y(l, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[n] = t;
+var s = (l, n, t) => (g(l, typeof n != "symbol" ? n + "" : n, t), t);
+import { Stage as b, Player as v, Vector2 as f } from "@efxlab/motion-canvas-core";
+const m = `.initial{display:none}.state-initial .initial{display:block}.loading{display:none}.state-loading .loading{display:block}.ready{display:none}.state-ready .ready{display:block}.error{display:none}.state-error .error{display:block}:host{position:relative;display:block;overflow:hidden}:host[data-fullscreen]{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999}.overlay{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;opacity:0;background-color:#0000008a;transition:opacity .1s}.overlay.state-ready:not(.auto){cursor:pointer}.overlay.state-ready:not(.playing):not(.auto){opacity:1}.overlay.state-ready:not(.playing):not(.auto) .button{scale:1;transition:scale .1s ease-out}.overlay.state-loading,.overlay.state-error{opacity:1;transition:opacity 1s}.overlay.auto{opacity:0;pointer-events:none}.button{width:50%;max-width:96px;aspect-ratio:1;scale:.5;transition:scale .1s ease-in,opacity .1s;background-color:transparent;border:none;background-size:100% 100%;background-repeat:no-repeat;opacity:.54;cursor:inherit;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjRweCIgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0yIDE0LjV2LTlsNiA0LjUtNiA0LjV6Ii8+PC9zdmc+)}.playing .button{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDI0IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0cHgiIGZpbGw9IiNmZmZmZmYiPjxnPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iMjQiIHdpZHRoPSIyNCIvPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iMjQiIHdpZHRoPSIyNCIvPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iMjQiIHdpZHRoPSIyNCIvPjwvZz48Zz48Zy8+PHBhdGggZD0iTTEyLDJDNi40OCwyLDIsNi40OCwyLDEyczQuNDgsMTAsMTAsMTBzMTAtNC40OCwxMC0xMFMxNy41MiwyLDEyLDJ6IE0xMSwxNkg5VjhoMlYxNnogTTE1LDE2aC0yVjhoMlYxNnoiLz48L2c+PC9zdmc+)}.button:focus,.overlay:hover .button{opacity:.87}.auto .button{display:none}.fullscreen-button{position:absolute;bottom:16px;right:16px;width:40px;height:40px;padding:8px;background:rgba(0,0,0,.54);border:none;border-radius:4px;cursor:pointer;opacity:0;transition:opacity .2s;display:none}.fullscreen-button svg{width:100%;height:100%;fill:#fff}:host([data-fullscreen-enabled]) .fullscreen-button{display:block}.overlay:hover .fullscreen-button,.fullscreen-button:focus{opacity:1}.fullscreen-button:hover{background:rgba(0,0,0,.87)}.canvas{width:100%;display:block;opacity:0;transition:opacity .1s}.canvas.state-ready{opacity:1}.message{font-family:JetBrains Mono,sans-serif;text-align:center;font-size:20px;padding:8px 16px;margin:16px;border-radius:4px;color:#fff9;background-color:#000000de}.loader{width:50%;max-width:96px;display:none;rotate:-90deg;animation:stroke 2s cubic-bezier(.5,0,.5,1) infinite,rotate 2s linear infinite}@keyframes stroke{0%{stroke-dasharray:5.6548667765px 50.8938009883px;stroke-dashoffset:2.8274333882px}50%{stroke-dasharray:50.8938009883px 5.6548667765px;stroke-dashoffset:-2.8274333882px}to{stroke-dasharray:5.6548667765px 50.8938009883px;stroke-dashoffset:-53.7212343766px}}@keyframes rotate{0%{rotate:-110deg}to{rotate:250deg}}
+`, k = `<div class="overlay" part="overlay">
+  <button
+    part="play-button"
+    title="Play / Pause"
+    class="button ready"
+    tabindex="0"
+  ></button>
+  <button
+    part="fullscreen-button"
+    title="Toggle Fullscreen"
+    class="fullscreen-button"
+    tabindex="0"
+  >
+    <svg viewBox="0 0 24 24" fill="currentColor">
+      <path
+        d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
+      />
+    </svg>
+  </button>
+  <div part="message" class="message error">
+    An error occurred while loading the animation.
+  </div>
+  <svg
+    part="loader"
+    class="loader loading"
+    viewBox="0 0 24 24"
+    stroke="#ffffff"
+    stroke-width="2"
+    fill="transparent"
+  >
+    <circle cx="12" cy="12" r="9" />
+  </svg>
+</div>
+`, x = `<style>${m}</style>${k}`, d = "motion-canvas-player";
+class M extends HTMLElement {
+  constructor() {
+    super();
+    s(this, "root");
+    s(this, "canvas");
+    s(this, "overlay");
+    s(this, "button");
+    s(this, "fullscreenButton");
+    s(this, "state", "initial");
+    s(this, "project", null);
+    s(this, "player", null);
+    s(this, "defaultSettings");
+    s(this, "abortController", null);
+    s(this, "finished", !1);
+    s(this, "playing", !1);
+    s(this, "connected", !1);
+    s(this, "stage", new b());
+    s(this, "resizeObserver", null);
+    s(this, "currentRatio", "16x9");
+    // Removed handleMouseMove and handleMouseLeave - no hover effects
+    s(this, "handleMouseMove", () => {
+    });
+    s(this, "handleMouseLeave", () => {
+    });
+    s(this, "handleMouseDown", (t) => {
+      t.preventDefault();
+    });
+    s(this, "handleFullscreenClick", (t) => {
+      t.stopPropagation(), this.toggleFullscreen();
+    });
+    s(this, "handleClick", () => {
+      this.auto || this.setPlaying(!this.playing);
+    });
+    s(this, "render", async () => {
+      this.player && await this.stage.render(
+        this.player.playback.currentScene,
+        this.player.playback.previousScene
+      );
+    });
+    this.root = this.attachShadow({ mode: "open" }), this.root.innerHTML = x, this.overlay = this.root.querySelector(".overlay"), this.button = this.root.querySelector(".button"), this.fullscreenButton = this.root.querySelector(".fullscreen-button"), this.canvas = this.stage.finalBuffer, this.canvas.classList.add("canvas"), this.root.prepend(this.canvas), this.overlay.addEventListener("click", this.handleClick), this.button.addEventListener("mousedown", this.handleMouseDown), this.fullscreenButton.addEventListener("click", this.handleFullscreenClick), this.updateResponsiveMode(), this.updateFullscreenMode(), this.updateControlsVisibility(), this.setState(
+      "initial"
+      /* Initial */
+    );
+  }
+  static get observedAttributes() {
+    return [
+      "src",
+      "quality",
+      "width",
+      "height",
+      "auto",
+      "variables",
+      "responsive",
+      "aspect-ratio",
+      "fullscreen",
+      "no-controls",
+      "background",
+      "timescale",
+      "ratio"
+    ];
+  }
+  get auto() {
+    return this.hasAttribute("auto");
+  }
+  get quality() {
+    const t = this.getAttribute("quality");
+    return t ? parseFloat(t) : this.defaultSettings.resolutionScale;
+  }
+  get width() {
+    const t = this.getAttribute("width");
+    return t ? parseFloat(t) : this.defaultSettings.size.width;
+  }
+  get height() {
+    const t = this.getAttribute("height");
+    return t ? parseFloat(t) : this.defaultSettings.size.height;
+  }
+  get variables() {
+    try {
+      const t = this.getAttribute("variables");
+      return t ? JSON.parse(t) : {};
+    } catch {
+      return this.project.logger.warn("Project variables could not be parsed."), {};
+    }
+  }
+  get responsive() {
+    return this.hasAttribute("responsive");
+  }
+  get aspectRatio() {
+    const t = this.getAttribute("aspect-ratio");
+    if (!t)
+      return null;
+    const [e, i] = t.split(":").map(Number);
+    return e && i ? e / i : null;
+  }
+  get fullscreen() {
+    return this.hasAttribute("fullscreen");
+  }
+  get noControls() {
+    return this.hasAttribute("no-controls");
+  }
+  get background() {
+    return this.getAttribute("background") || "#222222";
+  }
+  get timescale() {
+    const t = this.getAttribute("timescale");
+    return t ? parseFloat(t) : 1;
+  }
+  get ratio() {
+    return this.getAttribute("ratio") || "16x9";
+  }
+  // Public API for external play/pause control (bypasses auto logic)
+  play() {
+    this.state === "ready" && this.player && (this.player.togglePlayback(!0), this.playing = !0, this.updateClass());
+  }
+  pause() {
+    this.state === "ready" && this.player && (this.player.togglePlayback(!1), this.playing = !1, this.updateClass());
+  }
+  get isPlaying() {
+    return this.playing;
+  }
+  setRatio(t) {
+    this.currentRatio = t, this.setAttribute("ratio", t), this.handleRatioChange();
+  }
+  getRatio() {
+    return this.currentRatio;
+  }
+  handleRatioChange() {
+    this.player && this.responsive && this.updateSettings();
+  }
+  toggleFullscreen() {
+    document.fullscreenElement ? document.exitFullscreen() : this.requestFullscreen().catch((t) => {
+      console.error(`Error attempting to enable fullscreen: ${t.message}`);
+    });
+  }
+  updateResponsiveMode() {
+    var t;
+    this.responsive ? (this.dataset.responsive = "", this.connected && !this.resizeObserver && (this.resizeObserver = new ResizeObserver(() => {
+      this.updateSettings();
+    }), this.resizeObserver.observe(this))) : (delete this.dataset.responsive, (t = this.resizeObserver) == null || t.disconnect(), this.resizeObserver = null);
+  }
+  updateFullscreenMode() {
+    this.fullscreen ? this.dataset.fullscreenEnabled = "" : delete this.dataset.fullscreenEnabled;
+  }
+  updateControlsVisibility() {
+    this.noControls ? (this.button.style.display = "none", this.fullscreenButton.style.display = "none", this.overlay.style.pointerEvents = "none", this.overlay.style.opacity = "0") : (this.button.style.display = "", this.fullscreenButton.style.display = "", this.overlay.style.pointerEvents = "", this.overlay.style.opacity = "");
+  }
+  updateBackground() {
+    this.canvas.style.backgroundColor = this.background;
+  }
+  updateTimescale() {
+    this.player && (this.player.playback.speed = this.timescale);
+  }
+  setState(t) {
+    this.state = t, this.setPlaying(this.playing);
+  }
+  setPlaying(t) {
+    var e, i;
+    this.state === "ready" && (t || this.auto) ? ((e = this.player) == null || e.togglePlayback(!0), this.playing = !0) : ((i = this.player) == null || i.togglePlayback(!1), this.playing = !1), this.updateClass();
+  }
+  updateClass() {
+    this.overlay.className = `overlay state-${this.state}`, this.canvas.className = `canvas state-${this.state}`, this.overlay.classList.toggle("playing", this.playing), this.overlay.classList.toggle("auto", this.auto), this.connected && (this.playing ? delete this.dataset.overlay : this.dataset.overlay = "");
+  }
+  async updateSource(t) {
+    var o, a, r, c;
+    this.setState(
+      "initial"
+      /* Initial */
+    ), (o = this.abortController) == null || o.abort(), this.abortController = new AbortController();
+    let e;
+    try {
+      const h = import(
+        /* webpackIgnore: true */
+        /* @vite-ignore */
+        t
+      ), u = new Promise((p) => setTimeout(p, 200));
+      await Promise.any([u, h]), this.setState(
+        "loading"
+        /* Loading */
+      ), e = (await h).default;
+    } catch (h) {
+      console.error(h), this.setState(
+        "error"
+        /* Error */
+      );
+      return;
+    }
+    this.defaultSettings = e.meta.getFullRenderingSettings();
+    const i = new v(e);
+    i.setVariables(this.variables), this.finished = !1, (a = this.player) == null || a.onRender.unsubscribe(this.render), (r = this.player) == null || r.togglePlayback(!1), (c = this.player) == null || c.deactivate(), this.project = e, this.player = i, this.updateSettings(), this.updateBackground(), this.updateTimescale(), this.player.onRender.subscribe(this.render), this.auto && (this.playing = !0), this.player.togglePlayback(this.playing), this.setState(
+      "ready"
+      /* Ready */
+    );
+  }
+  attributeChangedCallback(t, e, i) {
+    var o;
+    switch (t) {
+      case "auto":
+        this.setPlaying(this.playing);
+        break;
+      case "src":
+        this.updateSource(i);
+        break;
+      case "quality":
+      case "width":
+      case "height":
+        this.updateSettings();
+        break;
+      case "variables":
+        (o = this.player) == null || o.setVariables(this.variables);
+        break;
+      case "responsive":
+        this.updateResponsiveMode();
+        break;
+      case "aspect-ratio":
+        this.updateSettings();
+        break;
+      case "fullscreen":
+        this.updateFullscreenMode();
+        break;
+      case "no-controls":
+        this.updateControlsVisibility();
+        break;
+      case "background":
+        this.updateBackground();
+        break;
+      case "timescale":
+        this.updateTimescale();
+        break;
+      case "ratio":
+        this.currentRatio = i || "16x9", this.handleRatioChange();
+        break;
+    }
+  }
+  disconnectedCallback() {
+    var t, e, i;
+    this.connected = !1, (t = this.player) == null || t.deactivate(), (e = this.player) == null || e.onRender.unsubscribe(this.render), (i = this.resizeObserver) == null || i.disconnect(), this.resizeObserver = null;
+  }
+  connectedCallback() {
+    var t, e;
+    this.connected = !0, (t = this.player) == null || t.activate(), (e = this.player) == null || e.onRender.subscribe(this.render), this.responsive && !this.resizeObserver && (this.resizeObserver = new ResizeObserver(() => {
+      this.updateSettings();
+    }), this.resizeObserver.observe(this));
+  }
+  updateSettings() {
+    if (!this.player || !this.defaultSettings)
+      return;
+    let t = this.width, e = this.height;
+    if (this.responsive) {
+      const o = this.getBoundingClientRect(), a = o.width, r = o.height;
+      this.aspectRatio && a > 0 && r > 0 ? a / r > this.aspectRatio ? (e = Math.round(r), t = Math.round(r * this.aspectRatio)) : (t = Math.round(a), e = Math.round(a / this.aspectRatio)) : a > 0 && r > 0 && (t = Math.round(a), e = Math.round(r)), this.canvas.style.width = `${t}px`, this.canvas.style.height = `${e}px`, this.canvas.style.position = "absolute", this.canvas.style.left = "50%", this.canvas.style.top = "50%", this.canvas.style.transform = "translate(-50%, -50%)";
+    }
+    const i = {
+      ...this.defaultSettings,
+      size: new f(t, e),
+      resolutionScale: this.quality
+    };
+    this.stage.configure(i), this.player.configure(i);
+  }
+}
+customElements.get(d) || customElements.define(d, M);

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@efxlab/motion-canvas-player",
+  "version": "4.0.0",
+  "description": "A custom element for displaying animations made with Motion Canvas",
+  "main": "dist/main.js",
+  "types": "types/main.d.ts",
+  "author": "motion-canvas",
+  "homepage": "https://motioncanvas.io/",
+  "bugs": "https://github.com/motion-canvas/motion-canvas/issues",
+  "license": "MIT",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/electroheadfx/efx-motion-canvas.git"
+  },
+  "files": [
+    "dist",
+    "types"
+  ],
+  "devDependencies": {
+    "@efxlab/motion-canvas-core": "workspace:*",
+    "@types/node": "^18.19.130",
+    "sass": "^1.58.0",
+    "terser": "^5.16.1",
+    "typescript": "^5.9.3",
+    "vite": "^4.5.14"
+  }
+}

package/types/main.d.ts

@@ -0,0 +1,8 @@
+export interface MotionCanvasPlayerProps {
+  src: string;
+  width?: number;
+  height?: number;
+  auto?: boolean;
+  quality?: number;
+  variables?: string;
+}