@revideo/player-react 0.10.0 → 0.10.1-alpha.1116

package/dist/index.js

@@ -1,129 +1,673 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { Controls } from './controls';
-import './index.css';
-import { shouldShowControls } from './utils';
-export function Player({ project, controls = true, variables = {}, playing = false, currentTime = 0, volume = 1, looping = true, fps = 30, width = undefined, height = undefined, quality = undefined, timeDisplayFormat = 'MM:SS', onDurationChange = () => { }, onTimeUpdate = () => { }, onPlayerReady = () => { }, onPlayerResize = () => { }, }) {
-    const [playingState, setPlaying] = useState(playing);
-    const [isMouseOver, setIsMouseOver] = useState(false);
-    const [currentTimeState, setCurrentTime] = useState(currentTime);
-    const [volumeState, setVolumeState] = useState(volume);
-    const [duration, setDuration] = useState(-1);
-    const focus = useRef(false);
-    const playerRef = useRef(null);
-    const wrapperRef = useRef(null);
-    const lastRect = useRef(null);
-    const onClickHandler = controls ? () => setPlaying(prev => !prev) : undefined;
-    /**
-     * Sync the playing prop with the player's own state when it changes.
-     */
-    useEffect(() => {
-        setPlaying(playing);
-    }, [playing]);
-    /**
-     * Sync the current time with the player's own state.
-     */
-    useEffect(() => {
-        const diff = Math.abs(currentTime - currentTimeState);
-        if (diff > 0.05) {
-            setForcedTime(currentTime);
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/internal.ts
+var internal_exports = {};
+var import_core, import_core2, stylesNew, TEMPLATE, ID, RevideoPlayer;
+var init_internal = __esm({
+  "src/internal.ts"() {
+    import_core = require("@revideo/core");
+    import_core2 = require("@revideo/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 = "revideo-player";
+    RevideoPlayer = 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;
         }
-    }, [currentTime]);
-    useEffect(() => {
-        setForcedVolume(volume);
-    }, [volume]);
-    /**
-     * Receives the current time of the video from the player.
-     */
-    const handleTimeUpdate = (event) => {
         const e = event;
-        setCurrentTime(e.detail);
-        onTimeUpdate(e.detail);
-    };
-    /**
-     * Receives the duration of the video from the player.
-     */
-    const handleDurationUpdate = (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;
-        setDuration(e.detail);
-        onDurationChange(e.detail);
-    };
-    /**
-     * Play and pause using the space key.
-     */
-    const handleKeyDown = (event) => {
-        if (event.code === 'Space' && focus.current) {
-            event.preventDefault();
-            setPlaying(prev => !prev);
+        this.volume = e.detail;
+        this.player?.playback.currentScene.adjustVolume(this.volume);
+      };
+      /**
+       * Triggered by the player.
+       */
+      handleFrameChanged = (frame) => {
+        if (!this.project || !this.player) {
+          return;
         }
-    };
-    const handlePlayerReady = (event) => {
-        const player = event.detail;
-        if (player) {
-            onPlayerReady(player);
+        this.time = frame / this.player.playback.fps;
+        if (this.volumeChangeRequested || frame === 0) {
+          this.player?.playback.currentScene.adjustVolume(this.volume);
+          this.volumeChangeRequested = false;
         }
-    };
-    const handlePlayerResize = useCallback((entries) => {
-        const [firstEntry] = entries;
-        if (!firstEntry || !wrapperRef.current) {
+      };
+      /**
+       * 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 })
+          );
         }
-        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);
+      };
+      updateSettings() {
+        if (!this.defaultSettings) {
+          return;
         }
-    }, [onPlayerResize]);
-    useEffect(() => {
-        if (!wrapperRef.current)
-            return;
-        const resizeObserver = new ResizeObserver(handlePlayerResize);
-        resizeObserver.observe(wrapperRef.current);
-        return () => {
-            resizeObserver.disconnect();
+        const settings = {
+          ...this.defaultSettings,
+          size: new import_core2.Vector2(this.width, this.height),
+          resolutionScale: this.quality,
+          fps: this.fps
         };
-    }, [handlePlayerResize]);
-    /**
-     * Import the player and add all event listeners.
-     */
-    useEffect(() => {
-        import('./internal').then(() => {
-            if (playerRef.current) {
-                playerRef.current.setProject(project);
-            }
-        });
-        playerRef.current?.addEventListener('timeupdate', handleTimeUpdate);
-        playerRef.current?.addEventListener('duration', handleDurationUpdate);
-        playerRef.current?.addEventListener('playerready', handlePlayerReady);
-        document.addEventListener('keydown', handleKeyDown);
-        return () => {
-            playerRef.current?.removeEventListener('timeupdate', handleTimeUpdate);
-            playerRef.current?.removeEventListener('duration', handleDurationUpdate);
-            playerRef.current?.removeEventListener('playerready', handlePlayerReady);
-            document.removeEventListener('keydown', handleKeyDown);
-        };
-    }, [project]);
-    /**
-     * When the forced time changes, seek to that time.
-     */
-    function setForcedTime(forcedTime) {
-        if (playerRef.current) {
-            playerRef.current.dispatchEvent(new CustomEvent('seekto', { detail: forcedTime }));
-        }
+        this.stage.configure(settings);
+        this.player?.configure(settings);
+      }
+    };
+    if (!customElements.get(ID)) {
+      customElements.define(ID, RevideoPlayer);
+    }
+  }
+});
+
+// src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  Player: () => Player2
+});
+module.exports = __toCommonJS(src_exports);
+var import_react3 = __toESM(require("react"));
+
+// src/controls.tsx
+var import_react2 = __toESM(require("react"));
+
+// src/icons.tsx
+var import_react = __toESM(require("react"));
+function PlayButton() {
+  return /* @__PURE__ */ import_react.default.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      className: "w-6 h-6"
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "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__ */ import_react.default.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      className: "w-6 h-6"
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "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__ */ import_react.default.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      className: "p-w-6 p-h-6"
+    },
+    /* @__PURE__ */ import_react.default.createElement("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__ */ import_react.default.createElement("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__ */ import_react.default.createElement("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__ */ import_react.default.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      className: "p-w-6 p-h-6"
+    },
+    /* @__PURE__ */ import_react.default.createElement("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__ */ import_react.default.createElement("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__ */ import_react.default.createElement("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]}`;
     }
-    function setForcedVolume(volume) {
-        setVolumeState(volume);
-        if (playerRef.current) {
-            playerRef.current.dispatchEvent(new CustomEvent('volumechange', { detail: volume }));
+    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
+function PlayPause({
+  playing,
+  setPlaying
+}) {
+  return /* @__PURE__ */ import_react2.default.createElement("button", { type: "button", className: "p-1", onClick: () => setPlaying(!playing) }, playing ? /* @__PURE__ */ import_react2.default.createElement(PauseButton, null) : /* @__PURE__ */ import_react2.default.createElement(PlayButton, null));
+}
+function VolumeSlider({
+  volume,
+  setVolume
+}) {
+  const [isHovering, setIsHovering] = (0, import_react2.useState)(false);
+  const [isInteracting, setIsInteracting] = (0, import_react2.useState)(false);
+  const [previousVolume, setPreviousVolume] = (0, import_react2.useState)(1);
+  const handleIconClick = () => {
+    if (volume > 0) {
+      setPreviousVolume(volume);
+      setVolume(0);
+    } else {
+      setVolume(previousVolume);
+    }
+  };
+  return /* @__PURE__ */ import_react2.default.createElement(
+    "div",
+    {
+      className: "flex items-center space-x-2 relative",
+      onMouseEnter: () => setIsHovering(true),
+      onMouseLeave: () => {
+        if (!isInteracting) {
+          setIsHovering(false);
         }
+      }
+    },
+    /* @__PURE__ */ import_react2.default.createElement(
+      "div",
+      {
+        className: "w-6 h-6 flex items-center justify-center cursor-pointer",
+        onClick: handleIconClick
+      },
+      volume === 0 ? /* @__PURE__ */ import_react2.default.createElement(MutedSoundIcon, null) : /* @__PURE__ */ import_react2.default.createElement(SoundIcon, null)
+    ),
+    (isHovering || isInteracting) && /* @__PURE__ */ import_react2.default.createElement("div", { className: "flex items-center h-1.5 whitespace-nowrap" }, /* @__PURE__ */ import_react2.default.createElement("div", { className: "relative w-20 h-1.5 bg-gray-300 rounded-full" }, /* @__PURE__ */ import_react2.default.createElement(
+      "div",
+      {
+        className: "absolute top-0 left-0 h-full bg-gray-100 rounded-full",
+        style: { width: `${volume * 100}%` }
+      }
+    ), /* @__PURE__ */ import_react2.default.createElement(
+      "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__ */ import_react2.default.createElement("div", { className: "relative flex-1 w-full h-1.5 bg-gray-300 rounded-full overflow-hidden" }, /* @__PURE__ */ import_react2.default.createElement(
+    "div",
+    {
+      className: "absolute top-0 left-0 h-full bg-gray-100",
+      style: { width: `${progressPercentage}%` }
+    }
+  ), /* @__PURE__ */ import_react2.default.createElement(
+    "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__ */ import_react2.default.createElement("div", { className: "text-white p-4 flex-col space-y-2 bg-gradient-to-t from-gray-500 to-transparent" }, /* @__PURE__ */ import_react2.default.createElement("div", { className: "flex items-center space-x-2" }, /* @__PURE__ */ import_react2.default.createElement(PlayPause, { playing, setPlaying }), /* @__PURE__ */ import_react2.default.createElement("div", { className: "flex items-center space-x-2" }, /* @__PURE__ */ import_react2.default.createElement(VolumeSlider, { volume, setVolume }), /* @__PURE__ */ import_react2.default.createElement("div", null, /* @__PURE__ */ import_react2.default.createElement("span", null, getFormattedTime(currentTime, duration, timeDisplayFormat)))), /* @__PURE__ */ import_react2.default.createElement("div", { className: "flex-grow" })), /* @__PURE__ */ import_react2.default.createElement(
+    Timeline,
+    {
+      currentTime,
+      duration,
+      setCurrentTime: setForcedTime
     }
-    return (_jsx("div", { className: "revideo-player-root", style: { display: 'contents' }, children: _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: _jsxs("div", { className: "relative", children: [_jsx("revideo-player", { ref: playerRef, playing: String(playingState), onClick: onClickHandler, variables: JSON.stringify(variables), looping: looping ? 'true' : 'false', width: width, height: height, quality: quality, fps: fps, volume: volumeState }), _jsx("div", { className: `absolute bottom-0 w-full transition-opacity duration-200 ${shouldShowControls(playingState, isMouseOver, !controls)
-                            ? 'opacity-100'
-                            : 'opacity-0'}`, children: _jsx(Controls, { duration: duration, playing: playingState, setPlaying: setPlaying, currentTime: currentTimeState, setForcedTime: setForcedTime, timeDisplayFormat: timeDisplayFormat, volume: volumeState, setVolume: setForcedVolume }) })] }) }) }));
+  ));
+}
+
+// src/index.tsx
+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_react3.useState)(playing);
+  const [isMouseOver, setIsMouseOver] = (0, import_react3.useState)(false);
+  const [currentTimeState, setCurrentTime] = (0, import_react3.useState)(currentTime);
+  const [volumeState, setVolumeState] = (0, import_react3.useState)(volume);
+  const [duration, setDuration] = (0, import_react3.useState)(-1);
+  const focus = (0, import_react3.useRef)(false);
+  const playerRef = (0, import_react3.useRef)(null);
+  const wrapperRef = (0, import_react3.useRef)(null);
+  const lastRect = (0, import_react3.useRef)(null);
+  const onClickHandler = controls ? () => setPlaying((prev) => !prev) : void 0;
+  (0, import_react3.useEffect)(() => {
+    setPlaying(playing);
+  }, [playing]);
+  (0, import_react3.useEffect)(() => {
+    const diff = Math.abs(currentTime - currentTimeState);
+    if (diff > 0.05) {
+      setForcedTime(currentTime);
+    }
+  }, [currentTime]);
+  (0, import_react3.useEffect)(() => {
+    setForcedVolume(volume);
+  }, [volume]);
+  const handleTimeUpdate = (event) => {
+    const e = event;
+    setCurrentTime(e.detail);
+    onTimeUpdate(e.detail);
+  };
+  const handleDurationUpdate = (event) => {
+    const e = event;
+    setDuration(e.detail);
+    onDurationChange(e.detail);
+  };
+  const handleKeyDown = (event) => {
+    if (event.code === "Space" && focus.current) {
+      event.preventDefault();
+      setPlaying((prev) => !prev);
+    }
+  };
+  const handlePlayerReady = (event) => {
+    const player = event.detail;
+    if (player) {
+      onPlayerReady(player);
+    }
+  };
+  const handlePlayerResize = (0, import_react3.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_react3.useEffect)(() => {
+    if (!wrapperRef.current) return;
+    const resizeObserver = new ResizeObserver(handlePlayerResize);
+    resizeObserver.observe(wrapperRef.current);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [handlePlayerResize]);
+  (0, import_react3.useEffect)(() => {
+    Promise.resolve().then(() => (init_internal(), internal_exports)).then(() => {
+      if (playerRef.current) {
+        playerRef.current.setProject(project);
+      }
+    });
+    playerRef.current?.addEventListener("timeupdate", handleTimeUpdate);
+    playerRef.current?.addEventListener("duration", handleDurationUpdate);
+    playerRef.current?.addEventListener("playerready", handlePlayerReady);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      playerRef.current?.removeEventListener("timeupdate", handleTimeUpdate);
+      playerRef.current?.removeEventListener("duration", handleDurationUpdate);
+      playerRef.current?.removeEventListener("playerready", handlePlayerReady);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [project]);
+  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__ */ import_react3.default.createElement("div", { className: "revideo-player-root", style: { display: "contents" } }, /* @__PURE__ */ import_react3.default.createElement(
+    "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)
+    },
+    /* @__PURE__ */ import_react3.default.createElement("div", { className: "relative" }, /* @__PURE__ */ import_react3.default.createElement(
+      "revideo-player",
+      {
+        ref: playerRef,
+        playing: String(playingState),
+        onClick: onClickHandler,
+        variables: JSON.stringify(variables),
+        looping: looping ? "true" : "false",
+        width,
+        height,
+        quality,
+        fps,
+        volume: volumeState
+      }
+    ), /* @__PURE__ */ import_react3.default.createElement(
+      "div",
+      {
+        className: `absolute bottom-0 w-full transition-opacity duration-200 ${shouldShowControls(playingState, isMouseOver, !controls) ? "opacity-100" : "opacity-0"}`
+      },
+      /* @__PURE__ */ import_react3.default.createElement(
+        Controls,
+        {
+          duration,
+          playing: playingState,
+          setPlaying,
+          currentTime: currentTimeState,
+          setForcedTime,
+          timeDisplayFormat,
+          volume: volumeState,
+          setVolume: setForcedVolume
+        }
+      )
+    ))
+  ));
 }
-//# sourceMappingURL=index.js.map
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Player
+});