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

package/dist/index.js

@@ -1,673 +1,129 @@
-"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;
+'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);
         }
+    }, [currentTime]);
+    useEffect(() => {
+        setForcedVolume(volume);
+    }, [volume]);
+    /**
+     * Receives the current time of the video from the player.
+     */
+    const handleTimeUpdate = (event) => {
         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;
-        }
+        setCurrentTime(e.detail);
+        onTimeUpdate(e.detail);
+    };
+    /**
+     * Receives the duration of the video from the player.
+     */
+    const handleDurationUpdate = (event) => {
         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;
+        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.time = frame / this.player.playback.fps;
-        if (this.volumeChangeRequested || frame === 0) {
-          this.player?.playback.currentScene.adjustVolume(this.volume);
-          this.volumeChangeRequested = false;
+    };
+    const handlePlayerReady = (event) => {
+        const player = event.detail;
+        if (player) {
+            onPlayerReady(player);
         }
-      };
-      /**
-       * 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) {
+    };
+    const handlePlayerResize = useCallback((entries) => {
+        const [firstEntry] = entries;
+        if (!firstEntry || !wrapperRef.current) {
             return;
-          }
-          this.duration = durationInFrames;
-          const durationInSeconds = durationInFrames / this.player.playback.fps;
-          this.dispatchEvent(
-            new CustomEvent("duration", { detail: durationInSeconds })
-          );
         }
-      };
-      updateSettings() {
-        if (!this.defaultSettings) {
-          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);
         }
-        const settings = {
-          ...this.defaultSettings,
-          size: new import_core2.Vector2(this.width, this.height),
-          resolutionScale: this.quality,
-          fps: this.fps
+    }, [onPlayerResize]);
+    useEffect(() => {
+        if (!wrapperRef.current)
+            return;
+        const resizeObserver = new ResizeObserver(handlePlayerResize);
+        resizeObserver.observe(wrapperRef.current);
+        return () => {
+            resizeObserver.disconnect();
         };
-        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]}`;
-    }
-    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);
+    }, [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 }));
         }
-      }
-    },
-    /* @__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
     }
-  ));
-}
-
-// 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
+    function setForcedVolume(volume) {
+        setVolumeState(volume);
+        if (playerRef.current) {
+            playerRef.current.dispatchEvent(new CustomEvent('volumechange', { detail: volume }));
         }
-      )
-    ))
-  ));
+    }
+    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 }) })] }) }) }));
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Player
-});
+//# sourceMappingURL=index.js.map