@twick/player-react 0.14.21 → 0.15.0

package/dist/index.cjs

@@ -0,0 +1,729 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+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/internal.ts
+var internal_exports = {};
+var import_core, import_core2, stylesNew, TEMPLATE, ID, TwickPlayer;
+var init_internal = __esm({
+  "src/internal.ts"() {
+    import_core = require("@twick/core");
+    import_core2 = require("@twick/core");
+    stylesNew = `
+.overlay {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	opacity: 0;
+	transition: opacity 0.1s;
+	z-index: 0;
+  }
+  .canvas {
+	width: 100%;
+	display: block;
+	opacity: 1;
+	transition: opacity 0.1s;
+  }
+`;
+    TEMPLATE = `<style>${stylesNew}</style><div class="overlay"></div>`;
+    ID = "twick-player";
+    TwickPlayer = class extends HTMLElement {
+      static get observedAttributes() {
+        return [
+          "playing",
+          "variables",
+          "looping",
+          "fps",
+          "quality",
+          "width",
+          "height",
+          "volume"
+        ];
+      }
+      get fps() {
+        const attr = this.getAttribute("fps");
+        return attr ? parseFloat(attr) : this.defaultSettings?.fps ?? 60;
+      }
+      get quality() {
+        const attr = this.getAttribute("quality");
+        return attr ? parseFloat(attr) : this.defaultSettings?.resolutionScale ?? 1;
+      }
+      get width() {
+        const attr = this.getAttribute("width");
+        return attr ? parseFloat(attr) : this.defaultSettings?.size.width ?? 0;
+      }
+      get height() {
+        const attr = this.getAttribute("height");
+        return attr ? parseFloat(attr) : this.defaultSettings?.size.height ?? 0;
+      }
+      get variables() {
+        try {
+          const attr = this.getAttribute("variables");
+          return attr ? JSON.parse(attr) : {};
+        } catch {
+          this.project?.logger.warn(`Project variables could not be parsed.`);
+          return {};
+        }
+      }
+      root;
+      canvas;
+      overlay;
+      state = "initial" /* Initial */;
+      project = null;
+      player = null;
+      defaultSettings;
+      abortController = null;
+      playing = false;
+      stage = new import_core.Stage();
+      time = 0;
+      duration = 0;
+      // in frames
+      looping = true;
+      volume = 1;
+      volumeChangeRequested = true;
+      constructor() {
+        super();
+        this.root = this.attachShadow({ mode: "open" });
+        this.root.innerHTML = TEMPLATE;
+        this.overlay = this.root.querySelector(".overlay");
+        this.canvas = this.stage.finalBuffer;
+        this.canvas.classList.add("canvas");
+        this.root.prepend(this.canvas);
+        this.setState("initial" /* Initial */);
+      }
+      setProject(project) {
+        this.updateProject(project);
+      }
+      setState(state) {
+        this.state = state;
+        this.setPlaying(this.playing);
+      }
+      setPlaying(value) {
+        if (this.state === "ready" /* Ready */ && value) {
+          this.player?.togglePlayback(true);
+          this.playing = true;
+        } else {
+          this.player?.togglePlayback(false);
+          this.playing = false;
+        }
+      }
+      async updateProject(project) {
+        const playing = this.playing;
+        this.setState("initial" /* Initial */);
+        this.abortController?.abort();
+        this.abortController = new AbortController();
+        this.project = project;
+        console.log(project);
+        this.defaultSettings = (0, import_core.getFullPreviewSettings)(this.project);
+        const player = new import_core.Player(this.project);
+        player.setVariables(this.variables);
+        player.toggleLoop(this.looping);
+        this.player?.onRender.unsubscribe(this.render);
+        this.player?.onFrameChanged.unsubscribe(this.handleFrameChanged);
+        this.player?.togglePlayback(false);
+        this.player?.deactivate();
+        this.player = player;
+        this.updateSettings();
+        this.setState("ready" /* Ready */);
+        this.dispatchEvent(new CustomEvent("playerready", { detail: this.player }));
+        this.setPlaying(playing);
+        this.player.onRender.subscribe(this.render);
+        this.player.onFrameChanged.subscribe(this.handleFrameChanged);
+      }
+      attributeChangedCallback(name, _, newValue) {
+        switch (name) {
+          case "playing":
+            this.setPlaying(newValue === "true");
+            break;
+          case "variables":
+            this.player?.setVariables(this.variables);
+            this.player?.requestSeek(this.player.playback.frame);
+            this.player?.playback.reload();
+            break;
+          case "looping":
+            this.looping = newValue === "true";
+            this.player?.toggleLoop(newValue === "true");
+            break;
+          case "fps":
+          case "quality":
+          case "width":
+          case "height":
+            this.updateSettings();
+            break;
+          case "volume":
+            this.volume = newValue;
+            this.volumeChangeRequested = true;
+        }
+      }
+      /**
+       * Runs when the element is removed from the DOM.
+       */
+      disconnectedCallback() {
+        this.player?.deactivate();
+        this.player?.onRender.unsubscribe(this.render);
+        this.removeEventListener("seekto", this.handleSeekTo);
+        this.removeEventListener("volumechange", this.handleVolumeChange);
+      }
+      /**
+       * Runs when the element is added to the DOM.
+       */
+      connectedCallback() {
+        this.player?.activate();
+        this.player?.onRender.subscribe(this.render);
+        this.addEventListener("seekto", this.handleSeekTo);
+        this.addEventListener("volumechange", this.handleVolumeChange);
+      }
+      /**
+       * Triggered by the timeline.
+       */
+      handleSeekTo = (event) => {
+        if (!this.project) {
+          return;
+        }
+        const e = event;
+        this.time = e.detail;
+        this.player?.requestSeek(e.detail * this.player.playback.fps);
+        this.volumeChangeRequested = true;
+      };
+      handleVolumeChange = (event) => {
+        if (!this.project) {
+          return;
+        }
+        const e = event;
+        this.volume = e.detail;
+        this.player?.playback.currentScene.adjustVolume(this.volume);
+      };
+      /**
+       * Triggered by the player.
+       */
+      handleFrameChanged = (frame) => {
+        if (!this.project || !this.player) {
+          return;
+        }
+        this.time = frame / this.player.playback.fps;
+        if (this.volumeChangeRequested || frame === 0) {
+          this.player?.playback.currentScene.adjustVolume(this.volume);
+          this.volumeChangeRequested = false;
+        }
+      };
+      /**
+       * Called on every frame.
+       */
+      render = async () => {
+        if (this.player && this.project) {
+          await this.stage.render(
+            this.player.playback.currentScene,
+            this.player.playback.previousScene
+          );
+          this.dispatchEvent(new CustomEvent("timeupdate", { detail: this.time }));
+          const durationInFrames = this.player.playback.duration;
+          if (durationInFrames === this.duration) {
+            return;
+          }
+          this.duration = durationInFrames;
+          const durationInSeconds = durationInFrames / this.player.playback.fps;
+          this.dispatchEvent(
+            new CustomEvent("duration", { detail: durationInSeconds })
+          );
+        }
+      };
+      updateSettings() {
+        if (!this.defaultSettings) {
+          return;
+        }
+        const settings = {
+          ...this.defaultSettings,
+          size: new import_core2.Vector2(this.width, this.height),
+          resolutionScale: this.quality,
+          fps: this.fps
+        };
+        this.stage.configure(settings);
+        this.player?.configure(settings);
+      }
+    };
+    if (!customElements.get(ID)) {
+      customElements.define(ID, TwickPlayer);
+    }
+  }
+});
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  Player: () => Player2
+});
+module.exports = __toCommonJS(index_exports);
+var import_react2 = require("react");
+
+// src/controls.tsx
+var import_react = require("react");
+
+// src/icons.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function PlayButton() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      className: "w-6 h-6",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  );
+}
+function PauseButton() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      className: "w-6 h-6",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M6.75 5.25a.75.75 0 0 1 .75-.75H9a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H7.5a.75.75 0 0 1-.75-.75V5.25Zm7.5 0A.75.75 0 0 1 15 4.5h1.5a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H15a.75.75 0 0 1-.75-.75V5.25Z",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  );
+}
+function SoundIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      className: "p-w-6 p-h-6",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18.36,19.36a1,1,0,0,1-.7-.29,1,1,0,0,1,0-1.41,8,8,0,0,0,0-11.32,1,1,0,0,1,1.41-1.41,10,10,0,0,1,0,14.14A1,1,0,0,1,18.36,19.36Z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15.54,16.54a1,1,0,0,1-.71-.3,1,1,0,0,1,0-1.41,4,4,0,0,0,0-5.66,1,1,0,0,1,1.41-1.41,6,6,0,0,1,0,8.48A1,1,0,0,1,15.54,16.54Z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M11.38,4.08a1,1,0,0,0-1.09.21L6.59,8H4a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2H6.59l3.7,3.71A1,1,0,0,0,11,20a.84.84,0,0,0,.38-.08A1,1,0,0,0,12,19V5A1,1,0,0,0,11.38,4.08Z" })
+      ]
+    }
+  );
+}
+function MutedSoundIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      className: "p-w-6 p-h-6",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M11.38,4.08a1,1,0,0,0-1.09.21L6.59,8H4a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2H6.59l3.7,3.71A1,1,0,0,0,11,20a.84.84,0,0,0,.38-.08A1,1,0,0,0,12,19V5A1,1,0,0,0,11.38,4.08Z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M16,15.5a1,1,0,0,1-.71-.29,1,1,0,0,1,0-1.42l5-5a1,1,0,0,1,1.42,1.42l-5,5A1,1,0,0,1,16,15.5Z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21,15.5a1,1,0,0,1-.71-.29l-5-5a1,1,0,0,1,1.42-1.42l5,5a1,1,0,0,1,0,1.42A1,1,0,0,1,21,15.5Z" })
+      ]
+    }
+  );
+}
+
+// src/utils.ts
+function getFormattedTime(timeInSeconds, absoluteTimeInSeconds, timeDisplayFormat) {
+  function toFormattedTime(timeInSeconds2) {
+    const minutes = Math.floor(timeInSeconds2 / 60);
+    const seconds = Math.floor(timeInSeconds2 % 60).toString().padStart(2, "0");
+    const milliseconds = Math.floor(timeInSeconds2 % 1 * 1e3).toString().padStart(3, "0");
+    if (timeDisplayFormat === "MM:SS") {
+      return `${minutes}:${seconds}`;
+    }
+    if (timeDisplayFormat === "MM:SS.m") {
+      return `${minutes}:${seconds}.${milliseconds[0]}`;
+    }
+    if (timeDisplayFormat === "MM:SS.mm") {
+      return `${minutes}:${seconds}.${milliseconds.slice(0, 2)}`;
+    }
+  }
+  return `${toFormattedTime(timeInSeconds)} / ${toFormattedTime(absoluteTimeInSeconds)}`;
+}
+function shouldShowControls(playing, isMouseOver, areControlsDisabled) {
+  if (areControlsDisabled) {
+    return false;
+  }
+  return !playing || isMouseOver;
+}
+
+// src/controls.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function PlayPause({
+  playing,
+  setPlaying
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", className: "p-1", onClick: () => setPlaying(!playing), children: playing ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PauseButton, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PlayButton, {}) });
+}
+function VolumeSlider({
+  volume,
+  setVolume
+}) {
+  const [isHovering, setIsHovering] = (0, import_react.useState)(false);
+  const [isInteracting, setIsInteracting] = (0, import_react.useState)(false);
+  const [previousVolume, setPreviousVolume] = (0, import_react.useState)(1);
+  const handleIconClick = () => {
+    if (volume > 0) {
+      setPreviousVolume(volume);
+      setVolume(0);
+    } else {
+      setVolume(previousVolume);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      className: "flex items-center space-x-2 relative",
+      onMouseEnter: () => setIsHovering(true),
+      onMouseLeave: () => {
+        if (!isInteracting) {
+          setIsHovering(false);
+        }
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            className: "w-6 h-6 flex items-center justify-center cursor-pointer",
+            onClick: handleIconClick,
+            children: volume === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MutedSoundIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SoundIcon, {})
+          }
+        ),
+        (isHovering || isInteracting) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex items-center h-1.5 whitespace-nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "relative w-20 h-1.5 bg-gray-300 rounded-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "div",
+            {
+              className: "absolute top-0 left-0 h-full bg-gray-100 rounded-full",
+              style: { width: `${volume * 100}%` }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "input",
+            {
+              type: "range",
+              min: 0,
+              max: 1,
+              step: 0.01,
+              value: volume,
+              onChange: (e) => {
+                const newVolume = Number(e.target.value);
+                setVolume(newVolume);
+                if (newVolume > 0) {
+                  setPreviousVolume(newVolume);
+                }
+              },
+              onMouseDown: () => setIsInteracting(true),
+              onMouseUp: () => setIsInteracting(false),
+              onMouseLeave: () => setIsInteracting(false),
+              className: "absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+}
+function Timeline({
+  currentTime,
+  duration,
+  setCurrentTime
+}) {
+  const progressPercentage = currentTime / duration * 100;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "relative flex-1 w-full h-1.5 bg-gray-300 rounded-full overflow-hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        className: "absolute top-0 left-0 h-full bg-gray-100",
+        style: { width: `${progressPercentage}%` }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "input",
+      {
+        type: "range",
+        value: currentTime,
+        min: 0,
+        max: duration,
+        step: 0.01,
+        className: "absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer",
+        onChange: (event) => setCurrentTime(Number(event.target.value))
+      }
+    )
+  ] });
+}
+function Controls({
+  duration,
+  playing,
+  setPlaying,
+  currentTime,
+  setForcedTime,
+  timeDisplayFormat,
+  volume,
+  setVolume
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "text-white p-4 flex-col space-y-2 bg-gradient-to-t from-gray-500 to-transparent", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center space-x-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PlayPause, { playing, setPlaying }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VolumeSlider, { volume, setVolume }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: getFormattedTime(currentTime, duration, timeDisplayFormat) }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex-grow" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      Timeline,
+      {
+        currentTime,
+        duration,
+        setCurrentTime: setForcedTime
+      }
+    )
+  ] });
+}
+
+// src/index.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Player2({
+  project,
+  controls = true,
+  variables = {},
+  playing = false,
+  currentTime = 0,
+  volume = 1,
+  looping = true,
+  fps = 30,
+  width = void 0,
+  height = void 0,
+  quality = void 0,
+  timeDisplayFormat = "MM:SS",
+  onDurationChange = () => {
+  },
+  onTimeUpdate = () => {
+  },
+  onPlayerReady = () => {
+  },
+  onPlayerResize = () => {
+  }
+}) {
+  const [playingState, setPlaying] = (0, import_react2.useState)(playing);
+  const [isMouseOver, setIsMouseOver] = (0, import_react2.useState)(false);
+  const [currentTimeState, setCurrentTime] = (0, import_react2.useState)(currentTime);
+  const [volumeState, setVolumeState] = (0, import_react2.useState)(volume);
+  const [duration, setDuration] = (0, import_react2.useState)(-1);
+  const focus = (0, import_react2.useRef)(false);
+  const playerRef = (0, import_react2.useRef)(null);
+  const wrapperRef = (0, import_react2.useRef)(null);
+  const lastRect = (0, import_react2.useRef)(null);
+  const onClickHandler = controls ? () => setPlaying((prev) => !prev) : void 0;
+  (0, import_react2.useEffect)(() => {
+    setPlaying(playing);
+  }, [playing]);
+  (0, import_react2.useEffect)(() => {
+    const diff = Math.abs(currentTime - currentTimeState);
+    if (diff > 0.05) {
+      setForcedTime(currentTime);
+    }
+  }, [currentTime]);
+  (0, import_react2.useEffect)(() => {
+    setForcedVolume(volume);
+  }, [volume]);
+  const onTimeUpdateRef = (0, import_react2.useRef)(onTimeUpdate);
+  const onDurationChangeRef = (0, import_react2.useRef)(onDurationChange);
+  (0, import_react2.useEffect)(() => {
+    onTimeUpdateRef.current = onTimeUpdate;
+  }, [onTimeUpdate]);
+  (0, import_react2.useEffect)(() => {
+    onDurationChangeRef.current = onDurationChange;
+  }, [onDurationChange]);
+  const handleTimeUpdate = (0, import_react2.useCallback)((event) => {
+    const e = event;
+    setCurrentTime(e.detail);
+    onTimeUpdateRef.current(e.detail);
+  }, []);
+  const handleDurationUpdate = (0, import_react2.useCallback)((event) => {
+    const e = event;
+    setDuration(e.detail);
+    onDurationChangeRef.current(e.detail);
+  }, []);
+  const handleKeyDown = (0, import_react2.useCallback)((event) => {
+    if (event.code === "Space" && focus.current) {
+      event.preventDefault();
+      setPlaying((prev) => !prev);
+    }
+  }, []);
+  const onPlayerReadyRef = (0, import_react2.useRef)(onPlayerReady);
+  (0, import_react2.useEffect)(() => {
+    onPlayerReadyRef.current = onPlayerReady;
+  }, [onPlayerReady]);
+  const handlePlayerReady = (0, import_react2.useCallback)((event) => {
+    const player = event.detail;
+    if (player) {
+      onPlayerReadyRef.current(player);
+    }
+    const playerElement = playerRef.current;
+    if (playerElement) {
+      playerElement.removeEventListener("timeupdate", handleTimeUpdate);
+      playerElement.removeEventListener("duration", handleDurationUpdate);
+      playerElement.addEventListener("timeupdate", handleTimeUpdate);
+      playerElement.addEventListener("duration", handleDurationUpdate);
+    }
+  }, [handleTimeUpdate, handleDurationUpdate]);
+  const handlePlayerResize = (0, import_react2.useCallback)(
+    (entries) => {
+      const [firstEntry] = entries;
+      if (!firstEntry || !wrapperRef.current) {
+        return;
+      }
+      const newRect = wrapperRef.current.getBoundingClientRect();
+      if (!lastRect.current || newRect.width !== lastRect.current.width || newRect.height !== lastRect.current.height || newRect.x !== lastRect.current.x || newRect.y !== lastRect.current.y) {
+        lastRect.current = newRect;
+        onPlayerResize(newRect);
+      }
+    },
+    [onPlayerResize]
+  );
+  (0, import_react2.useEffect)(() => {
+    if (!wrapperRef.current) return;
+    const resizeObserver = new ResizeObserver(handlePlayerResize);
+    resizeObserver.observe(wrapperRef.current);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [handlePlayerResize]);
+  (0, import_react2.useEffect)(() => {
+    let cleanup = null;
+    const setupListeners = () => {
+      const player = playerRef.current;
+      if (!player) return;
+      player.removeEventListener("timeupdate", handleTimeUpdate);
+      player.removeEventListener("duration", handleDurationUpdate);
+      player.removeEventListener("playerready", handlePlayerReady);
+      player.addEventListener("timeupdate", handleTimeUpdate);
+      player.addEventListener("duration", handleDurationUpdate);
+      player.addEventListener("playerready", handlePlayerReady);
+      document.addEventListener("keydown", handleKeyDown);
+      cleanup = () => {
+        player.removeEventListener("timeupdate", handleTimeUpdate);
+        player.removeEventListener("duration", handleDurationUpdate);
+        player.removeEventListener("playerready", handlePlayerReady);
+        document.removeEventListener("keydown", handleKeyDown);
+      };
+    };
+    Promise.resolve().then(() => (init_internal(), internal_exports)).then(() => {
+      requestAnimationFrame(() => {
+        if (playerRef.current) {
+          playerRef.current.setProject(project);
+          setupListeners();
+        }
+      });
+    });
+    if (playerRef.current) {
+      setupListeners();
+    }
+    return () => {
+      if (cleanup) {
+        cleanup();
+      }
+    };
+  }, [project, handleTimeUpdate, handleDurationUpdate, handlePlayerReady, handleKeyDown]);
+  function setForcedTime(forcedTime) {
+    if (playerRef.current) {
+      playerRef.current.dispatchEvent(
+        new CustomEvent("seekto", { detail: forcedTime })
+      );
+    }
+  }
+  function setForcedVolume(volume2) {
+    setVolumeState(volume2);
+    if (playerRef.current) {
+      playerRef.current.dispatchEvent(
+        new CustomEvent("volumechange", { detail: volume2 })
+      );
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "twick-player-root", style: { display: "contents" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      ref: wrapperRef,
+      className: "relative cursor-default focus:outline-none",
+      onFocus: () => focus.current = true,
+      onBlur: () => focus.current = false,
+      tabIndex: 0,
+      onMouseEnter: () => setIsMouseOver(true),
+      onMouseLeave: () => setIsMouseOver(false),
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "twick-player",
+          {
+            ref: playerRef,
+            playing: String(playingState),
+            onClick: onClickHandler,
+            variables: JSON.stringify(variables),
+            looping: looping ? "true" : "false",
+            width,
+            height,
+            quality,
+            fps,
+            volume: volumeState
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            className: `absolute bottom-0 w-full transition-opacity duration-200 ${shouldShowControls(playingState, isMouseOver, !controls) ? "opacity-100" : "opacity-0"}`,
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              Controls,
+              {
+                duration,
+                playing: playingState,
+                setPlaying,
+                currentTime: currentTimeState,
+                setForcedTime,
+                timeDisplayFormat,
+                volume: volumeState,
+                setVolume: setForcedVolume
+              }
+            )
+          }
+        )
+      ] })
+    }
+  ) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Player
+});
+//# sourceMappingURL=index.cjs.map