@twick/player-react 0.14.21 → 0.15.0

package/dist/index.js

@@ -1,129 +1,453 @@
-'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";
+
+// src/index.tsx
+import { useCallback, useEffect, useRef, useState as useState2 } from "react";
+
+// src/controls.tsx
+import { useState } from "react";
+
+// src/icons.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function PlayButton() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      className: "w-6 h-6",
+      children: /* @__PURE__ */ 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"
         }
-    }, [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) => {
-        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);
-        }
-    };
-    const handlePlayerReady = (event) => {
-        const player = event.detail;
-        if (player) {
-            onPlayerReady(player);
-        }
-    };
-    const handlePlayerResize = useCallback((entries) => {
-        const [firstEntry] = entries;
-        if (!firstEntry || !wrapperRef.current) {
-            return;
+      )
+    }
+  );
+}
+function PauseButton() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      className: "w-6 h-6",
+      children: /* @__PURE__ */ 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"
         }
-        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);
+      )
+    }
+  );
+}
+function SoundIcon() {
+  return /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function PlayPause({
+  playing,
+  setPlaying
+}) {
+  return /* @__PURE__ */ jsx2("button", { type: "button", className: "p-1", onClick: () => setPlaying(!playing), children: playing ? /* @__PURE__ */ jsx2(PauseButton, {}) : /* @__PURE__ */ jsx2(PlayButton, {}) });
+}
+function VolumeSlider({
+  volume,
+  setVolume
+}) {
+  const [isHovering, setIsHovering] = useState(false);
+  const [isInteracting, setIsInteracting] = useState(false);
+  const [previousVolume, setPreviousVolume] = useState(1);
+  const handleIconClick = () => {
+    if (volume > 0) {
+      setPreviousVolume(volume);
+      setVolume(0);
+    } else {
+      setVolume(previousVolume);
+    }
+  };
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "flex items-center space-x-2 relative",
+      onMouseEnter: () => setIsHovering(true),
+      onMouseLeave: () => {
+        if (!isInteracting) {
+          setIsHovering(false);
         }
-    }, [onPlayerResize]);
-    useEffect(() => {
-        if (!wrapperRef.current)
-            return;
-        const resizeObserver = new ResizeObserver(handlePlayerResize);
-        resizeObserver.observe(wrapperRef.current);
-        return () => {
-            resizeObserver.disconnect();
-        };
-    }, [handlePlayerResize]);
-    /**
-     * Import the player and add all event listeners.
-     */
-    useEffect(() => {
-        import('./internal').then(() => {
-            if (playerRef.current) {
-                playerRef.current.setProject(project);
+      },
+      children: [
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            className: "w-6 h-6 flex items-center justify-center cursor-pointer",
+            onClick: handleIconClick,
+            children: volume === 0 ? /* @__PURE__ */ jsx2(MutedSoundIcon, {}) : /* @__PURE__ */ jsx2(SoundIcon, {})
+          }
+        ),
+        (isHovering || isInteracting) && /* @__PURE__ */ jsx2("div", { className: "flex items-center h-1.5 whitespace-nowrap", children: /* @__PURE__ */ jsxs2("div", { className: "relative w-20 h-1.5 bg-gray-300 rounded-full", children: [
+          /* @__PURE__ */ jsx2(
+            "div",
+            {
+              className: "absolute top-0 left-0 h-full bg-gray-100 rounded-full",
+              style: { width: `${volume * 100}%` }
             }
-        });
-        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__ */ jsx2(
+            "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__ */ jsxs2("div", { className: "relative flex-1 w-full h-1.5 bg-gray-300 rounded-full overflow-hidden", children: [
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: "absolute top-0 left-0 h-full bg-gray-100",
+        style: { width: `${progressPercentage}%` }
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "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__ */ jsxs2("div", { className: "text-white p-4 flex-col space-y-2 bg-gradient-to-t from-gray-500 to-transparent", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center space-x-2", children: [
+      /* @__PURE__ */ jsx2(PlayPause, { playing, setPlaying }),
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ jsx2(VolumeSlider, { volume, setVolume }),
+        /* @__PURE__ */ jsx2("div", { children: /* @__PURE__ */ jsx2("span", { children: getFormattedTime(currentTime, duration, timeDisplayFormat) }) })
+      ] }),
+      /* @__PURE__ */ jsx2("div", { className: "flex-grow" })
+    ] }),
+    /* @__PURE__ */ jsx2(
+      Timeline,
+      {
+        currentTime,
+        duration,
+        setCurrentTime: setForcedTime
+      }
+    )
+  ] });
+}
+
+// src/index.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function Player({
+  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] = useState2(playing);
+  const [isMouseOver, setIsMouseOver] = useState2(false);
+  const [currentTimeState, setCurrentTime] = useState2(currentTime);
+  const [volumeState, setVolumeState] = useState2(volume);
+  const [duration, setDuration] = useState2(-1);
+  const focus = useRef(false);
+  const playerRef = useRef(null);
+  const wrapperRef = useRef(null);
+  const lastRect = useRef(null);
+  const onClickHandler = controls ? () => setPlaying((prev) => !prev) : void 0;
+  useEffect(() => {
+    setPlaying(playing);
+  }, [playing]);
+  useEffect(() => {
+    const diff = Math.abs(currentTime - currentTimeState);
+    if (diff > 0.05) {
+      setForcedTime(currentTime);
     }
-    function setForcedVolume(volume) {
-        setVolumeState(volume);
+  }, [currentTime]);
+  useEffect(() => {
+    setForcedVolume(volume);
+  }, [volume]);
+  const onTimeUpdateRef = useRef(onTimeUpdate);
+  const onDurationChangeRef = useRef(onDurationChange);
+  useEffect(() => {
+    onTimeUpdateRef.current = onTimeUpdate;
+  }, [onTimeUpdate]);
+  useEffect(() => {
+    onDurationChangeRef.current = onDurationChange;
+  }, [onDurationChange]);
+  const handleTimeUpdate = useCallback((event) => {
+    const e = event;
+    setCurrentTime(e.detail);
+    onTimeUpdateRef.current(e.detail);
+  }, []);
+  const handleDurationUpdate = useCallback((event) => {
+    const e = event;
+    setDuration(e.detail);
+    onDurationChangeRef.current(e.detail);
+  }, []);
+  const handleKeyDown = useCallback((event) => {
+    if (event.code === "Space" && focus.current) {
+      event.preventDefault();
+      setPlaying((prev) => !prev);
+    }
+  }, []);
+  const onPlayerReadyRef = useRef(onPlayerReady);
+  useEffect(() => {
+    onPlayerReadyRef.current = onPlayerReady;
+  }, [onPlayerReady]);
+  const handlePlayerReady = 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 = 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]
+  );
+  useEffect(() => {
+    if (!wrapperRef.current) return;
+    const resizeObserver = new ResizeObserver(handlePlayerResize);
+    resizeObserver.observe(wrapperRef.current);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [handlePlayerResize]);
+  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);
+      };
+    };
+    import("./internal-H4HUGGQY.js").then(() => {
+      requestAnimationFrame(() => {
         if (playerRef.current) {
-            playerRef.current.dispatchEvent(new CustomEvent('volumechange', { detail: volume }));
+          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__ */ jsx3("div", { className: "twick-player-root", style: { display: "contents" }, children: /* @__PURE__ */ jsx3(
+    "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__ */ jsxs3("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx3(
+          "twick-player",
+          {
+            ref: playerRef,
+            playing: String(playingState),
+            onClick: onClickHandler,
+            variables: JSON.stringify(variables),
+            looping: looping ? "true" : "false",
+            width,
+            height,
+            quality,
+            fps,
+            volume: volumeState
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: `absolute bottom-0 w-full transition-opacity duration-200 ${shouldShowControls(playingState, isMouseOver, !controls) ? "opacity-100" : "opacity-0"}`,
+            children: /* @__PURE__ */ jsx3(
+              Controls,
+              {
+                duration,
+                playing: playingState,
+                setPlaying,
+                currentTime: currentTimeState,
+                setForcedTime,
+                timeDisplayFormat,
+                volume: volumeState,
+                setVolume: setForcedVolume
+              }
+            )
+          }
+        )
+      ] })
     }
-    return (_jsx("div", { className: "twick-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("twick-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 }) })] }) }) }));
+  ) });
 }
+export {
+  Player
+};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../src/index.tsx","../src/controls.tsx","../src/icons.tsx","../src/utils.ts"],"sourcesContent":["'use client';\nimport type {Player as CorePlayer, Project} from '@twick/core';\nimport type {ComponentProps} from 'react';\nimport {useCallback, useEffect, useRef, useState} from 'react';\nimport {Controls} from './controls';\nimport './index.css';\nimport {shouldShowControls} from './utils';\n\ninterface TwickPlayerProps {\n  playing?: string;\n  variables?: string;\n  looping?: string;\n  width?: number;\n  height?: number;\n  quality?: number;\n  fps?: number;\n  volume?: number;\n}\n\ndeclare global {\n  namespace JSX {\n    interface IntrinsicElements {\n      // eslint-disable-next-line\n      'twick-player': TwickPlayerProps & ComponentProps<'div'>;\n    }\n  }\n}\n\ninterface PlayerProps {\n  project: Project;\n  controls?: boolean;\n  variables?: Record<string, any>;\n  playing?: boolean;\n  currentTime?: number;\n  volume?: number;\n  looping?: boolean;\n  fps?: number;\n\n  width?: number;\n  height?: number;\n  quality?: number;\n  timeDisplayFormat?: 'MM:SS' | 'MM:SS.mm' | 'MM:SS.m';\n\n  onDurationChange?: (duration: number) => void;\n  onTimeUpdate?: (currentTime: number) => void;\n  onPlayerReady?: (player: CorePlayer) => void;\n  onPlayerResize?: (rect: DOMRectReadOnly) => void;\n}\n\nexport function Player({\n  project,\n  controls = true,\n  variables = {},\n  playing = false,\n  currentTime = 0,\n  volume = 1,\n  looping = true,\n  fps = 30,\n\n  width = undefined,\n  height = undefined,\n  quality = undefined,\n  timeDisplayFormat = 'MM:SS',\n\n  onDurationChange = () => {},\n  onTimeUpdate = () => {},\n  onPlayerReady = () => {},\n  onPlayerResize = () => {},\n}: PlayerProps) {\n  const [playingState, setPlaying] = useState(playing);\n  const [isMouseOver, setIsMouseOver] = useState(false);\n  const [currentTimeState, setCurrentTime] = useState(currentTime);\n  const [volumeState, setVolumeState] = useState(volume);\n  const [duration, setDuration] = useState(-1);\n\n  const focus = useRef(false);\n  const playerRef = useRef<HTMLDivElement | null>(null);\n  const wrapperRef = useRef<HTMLDivElement | null>(null);\n  const lastRect = useRef<DOMRectReadOnly | null>(null);\n\n  const onClickHandler = controls ? () => setPlaying(prev => !prev) : undefined;\n\n  /**\n   * Sync the playing prop with the player's own state when it changes.\n   */\n  useEffect(() => {\n    setPlaying(playing);\n  }, [playing]);\n\n  /**\n   * Sync the current time with the player's own state.\n   */\n  useEffect(() => {\n    const diff = Math.abs(currentTime - currentTimeState);\n    if (diff > 0.05) {\n      setForcedTime(currentTime);\n    }\n  }, [currentTime]);\n\n  useEffect(() => {\n    setForcedVolume(volume);\n  }, [volume]);\n\n  /**\n   * Receives the current time of the video from the player.\n   * Use refs to ensure we always call the latest callbacks.\n   */\n  const onTimeUpdateRef = useRef(onTimeUpdate);\n  const onDurationChangeRef = useRef(onDurationChange);\n  \n  // Update refs when callbacks change\n  useEffect(() => {\n    onTimeUpdateRef.current = onTimeUpdate;\n  }, [onTimeUpdate]);\n  \n  useEffect(() => {\n    onDurationChangeRef.current = onDurationChange;\n  }, [onDurationChange]);\n\n  const handleTimeUpdate = useCallback((event: Event) => {\n    const e = event as CustomEvent;\n    setCurrentTime(e.detail);\n    onTimeUpdateRef.current(e.detail);\n  }, []);\n\n  /**\n   * Receives the duration of the video from the player.\n   */\n  const handleDurationUpdate = useCallback((event: Event) => {\n    const e = event as CustomEvent;\n    setDuration(e.detail);\n    onDurationChangeRef.current(e.detail);\n  }, []);\n\n  /**\n   * Play and pause using the space key.\n   */\n  const handleKeyDown = useCallback((event: KeyboardEvent) => {\n    if (event.code === 'Space' && focus.current) {\n      event.preventDefault();\n      setPlaying(prev => !prev);\n    }\n  }, []);\n\n  const onPlayerReadyRef = useRef(onPlayerReady);\n  \n  useEffect(() => {\n    onPlayerReadyRef.current = onPlayerReady;\n  }, [onPlayerReady]);\n\n  const handlePlayerReady = useCallback((event: Event) => {\n    const player = (event as CustomEvent).detail;\n    if (player) {\n      onPlayerReadyRef.current(player);\n    }\n    \n    // Ensure event listeners are attached when player becomes ready\n    // This is a fallback in case listeners weren't attached earlier\n    const playerElement = playerRef.current;\n    if (playerElement) {\n      // Remove and re-add to ensure they're attached\n      playerElement.removeEventListener('timeupdate', handleTimeUpdate);\n      playerElement.removeEventListener('duration', handleDurationUpdate);\n      playerElement.addEventListener('timeupdate', handleTimeUpdate);\n      playerElement.addEventListener('duration', handleDurationUpdate);\n    }\n  }, [handleTimeUpdate, handleDurationUpdate]);\n\n  const handlePlayerResize = useCallback(\n    (entries: ResizeObserverEntry[]) => {\n      const [firstEntry] = entries;\n      if (!firstEntry || !wrapperRef.current) {\n        return;\n      }\n\n      const newRect = wrapperRef.current.getBoundingClientRect();\n      if (\n        !lastRect.current ||\n        newRect.width !== lastRect.current.width ||\n        newRect.height !== lastRect.current.height ||\n        newRect.x !== lastRect.current.x ||\n        newRect.y !== lastRect.current.y\n      ) {\n        lastRect.current = newRect;\n        onPlayerResize(newRect);\n      }\n    },\n    [onPlayerResize],\n  );\n\n  useEffect(() => {\n    if (!wrapperRef.current) return;\n\n    const resizeObserver = new ResizeObserver(handlePlayerResize);\n    resizeObserver.observe(wrapperRef.current);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [handlePlayerResize]);\n\n  /**\n   * Import the player and add all event listeners.\n   */\n  useEffect(() => {\n    let cleanup: (() => void) | null = null;\n\n    const setupListeners = () => {\n      const player = playerRef.current;\n      if (!player) return;\n\n      // Remove any existing listeners first to avoid duplicates\n      player.removeEventListener('timeupdate', handleTimeUpdate);\n      player.removeEventListener('duration', handleDurationUpdate);\n      player.removeEventListener('playerready', handlePlayerReady);\n\n      // Add event listeners\n      player.addEventListener('timeupdate', handleTimeUpdate);\n      player.addEventListener('duration', handleDurationUpdate);\n      player.addEventListener('playerready', handlePlayerReady);\n      document.addEventListener('keydown', handleKeyDown);\n\n      cleanup = () => {\n        player.removeEventListener('timeupdate', handleTimeUpdate);\n        player.removeEventListener('duration', handleDurationUpdate);\n        player.removeEventListener('playerready', handlePlayerReady);\n        document.removeEventListener('keydown', handleKeyDown);\n      };\n    };\n\n    // Import the custom element definition\n    import('./internal').then(() => {\n      // Wait for the next tick to ensure the element is in the DOM\n      // Use requestAnimationFrame to ensure the custom element is ready\n      requestAnimationFrame(() => {\n        if (playerRef.current) {\n          (playerRef.current as any).setProject(project);\n          // Set up listeners after the element is ready\n          setupListeners();\n        }\n      });\n    });\n\n    // Also set up listeners immediately if element already exists\n    // This handles the case where the element was already in the DOM\n    if (playerRef.current) {\n      setupListeners();\n    }\n\n    return () => {\n      if (cleanup) {\n        cleanup();\n      }\n    };\n  }, [project, handleTimeUpdate, handleDurationUpdate, handlePlayerReady, handleKeyDown]);\n\n  /**\n   * When the forced time changes, seek to that time.\n   */\n  function setForcedTime(forcedTime: number) {\n    if (playerRef.current) {\n      playerRef.current.dispatchEvent(\n        new CustomEvent('seekto', {detail: forcedTime}),\n      );\n    }\n  }\n\n  function setForcedVolume(volume: number) {\n    setVolumeState(volume);\n    if (playerRef.current) {\n      playerRef.current.dispatchEvent(\n        new CustomEvent('volumechange', {detail: volume}),\n      );\n    }\n  }\n\n  return (\n    <div className=\"twick-player-root\" style={{display: 'contents'}}>\n      <div\n        ref={wrapperRef}\n        className=\"relative cursor-default focus:outline-none\"\n        onFocus={() => (focus.current = true)}\n        onBlur={() => (focus.current = false)}\n        tabIndex={0}\n        onMouseEnter={() => setIsMouseOver(true)}\n        onMouseLeave={() => setIsMouseOver(false)}\n      >\n        <div className=\"relative\">\n          <twick-player\n            ref={playerRef}\n            playing={String(playingState)}\n            onClick={onClickHandler}\n            variables={JSON.stringify(variables)}\n            looping={looping ? 'true' : 'false'}\n            width={width}\n            height={height}\n            quality={quality}\n            fps={fps}\n            volume={volumeState}\n          />\n          <div\n            className={`absolute bottom-0 w-full transition-opacity duration-200 ${\n              shouldShowControls(playingState, isMouseOver, !controls)\n                ? 'opacity-100'\n                : 'opacity-0'\n            }`}\n          >\n            <Controls\n              duration={duration}\n              playing={playingState}\n              setPlaying={setPlaying}\n              currentTime={currentTimeState}\n              setForcedTime={setForcedTime}\n              timeDisplayFormat={timeDisplayFormat}\n              volume={volumeState}\n              setVolume={setForcedVolume}\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n","import {useState} from 'react';\nimport {MutedSoundIcon, PauseButton, PlayButton, SoundIcon} from './icons';\nimport {getFormattedTime} from './utils';\n\nfunction PlayPause({\n  playing,\n  setPlaying,\n}: {\n  playing: boolean;\n  setPlaying: (playing: boolean) => void;\n}) {\n  return (\n    <button type=\"button\" className=\"p-1\" onClick={() => setPlaying(!playing)}>\n      {playing ? <PauseButton /> : <PlayButton />}\n    </button>\n  );\n}\n\nfunction VolumeSlider({\n  volume,\n  setVolume,\n}: {\n  volume: number;\n  setVolume: (volume: number) => void;\n}) {\n  const [isHovering, setIsHovering] = useState(false);\n  const [isInteracting, setIsInteracting] = useState(false);\n  const [previousVolume, setPreviousVolume] = useState(1);\n\n  const handleIconClick = () => {\n    if (volume > 0) {\n      setPreviousVolume(volume);\n      setVolume(0);\n    } else {\n      setVolume(previousVolume);\n    }\n  };\n\n  return (\n    <div\n      className=\"flex items-center space-x-2 relative\"\n      onMouseEnter={() => setIsHovering(true)}\n      onMouseLeave={() => {\n        if (!isInteracting) {\n          setIsHovering(false);\n        }\n      }}\n    >\n      <div\n        className=\"w-6 h-6 flex items-center justify-center cursor-pointer\"\n        onClick={handleIconClick}\n      >\n        {volume === 0 ? <MutedSoundIcon /> : <SoundIcon />}\n      </div>\n      {(isHovering || isInteracting) && (\n        <div className=\"flex items-center h-1.5 whitespace-nowrap\">\n          <div className=\"relative w-20 h-1.5 bg-gray-300 rounded-full\">\n            <div\n              className=\"absolute top-0 left-0 h-full bg-gray-100 rounded-full\"\n              style={{width: `${volume * 100}%`}}\n            />\n            <input\n              type=\"range\"\n              min={0}\n              max={1}\n              step={0.01}\n              value={volume}\n              onChange={e => {\n                const newVolume = Number(e.target.value);\n                setVolume(newVolume);\n                if (newVolume > 0) {\n                  setPreviousVolume(newVolume);\n                }\n              }}\n              onMouseDown={() => setIsInteracting(true)}\n              onMouseUp={() => setIsInteracting(false)}\n              onMouseLeave={() => setIsInteracting(false)}\n              className=\"absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer\"\n            />\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction Timeline({\n  currentTime,\n  duration,\n  setCurrentTime,\n}: {\n  currentTime: number;\n  duration: number;\n  setCurrentTime: (currentTime: number) => void;\n}) {\n  const progressPercentage = (currentTime / duration) * 100;\n\n  return (\n    <div className=\"relative flex-1 w-full h-1.5 bg-gray-300 rounded-full overflow-hidden\">\n      <div\n        className=\"absolute top-0 left-0 h-full bg-gray-100\"\n        style={{width: `${progressPercentage}%`}}\n      />\n      <input\n        type=\"range\"\n        value={currentTime}\n        min={0}\n        max={duration}\n        step={0.01}\n        className=\"absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer\"\n        onChange={event => setCurrentTime(Number(event.target.value))}\n      />\n    </div>\n  );\n}\n\nexport function Controls({\n  duration,\n  playing,\n  setPlaying,\n  currentTime,\n  setForcedTime,\n  timeDisplayFormat,\n  volume,\n  setVolume,\n}: {\n  duration: number;\n  playing: boolean;\n  setPlaying: (playing: boolean) => void;\n  currentTime: number;\n  setForcedTime: (currentTime: number) => void;\n  timeDisplayFormat: 'MM:SS' | 'MM:SS.m' | 'MM:SS.mm';\n  volume: number;\n  setVolume: (volume: number) => void;\n}) {\n  return (\n    <div className=\"text-white p-4 flex-col space-y-2 bg-gradient-to-t from-gray-500 to-transparent\">\n      <div className=\"flex items-center space-x-2\">\n        <PlayPause playing={playing} setPlaying={setPlaying} />\n        <div className=\"flex items-center space-x-2\">\n          <VolumeSlider volume={volume} setVolume={setVolume} />\n          <div>\n            <span>\n              {getFormattedTime(currentTime, duration, timeDisplayFormat)}\n            </span>\n          </div>\n        </div>\n        <div className=\"flex-grow\" />\n      </div>\n      <Timeline\n        currentTime={currentTime}\n        duration={duration}\n        setCurrentTime={setForcedTime}\n      />\n    </div>\n  );\n}\n","export function PlayButton() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      className=\"w-6 h-6\"\n    >\n      <path\n        fillRule=\"evenodd\"\n        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\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  );\n}\n\nexport function PauseButton() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      className=\"w-6 h-6\"\n    >\n      <path\n        fillRule=\"evenodd\"\n        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\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  );\n}\n\nexport function SoundIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      className=\"p-w-6 p-h-6\"\n    >\n      <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\" />\n      <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\" />\n      <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\" />\n    </svg>\n  );\n}\n\nexport function MutedSoundIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      className=\"p-w-6 p-h-6\"\n    >\n      <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\" />\n      <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\" />\n      <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\" />\n    </svg>\n  );\n}\n","export function getFormattedTime(\n  timeInSeconds: number,\n  absoluteTimeInSeconds: number,\n  timeDisplayFormat: 'MM:SS' | 'MM:SS.mm' | 'MM:SS.m',\n) {\n  function toFormattedTime(timeInSeconds: number) {\n    const minutes = Math.floor(timeInSeconds / 60);\n    const seconds = Math.floor(timeInSeconds % 60)\n      .toString()\n      .padStart(2, '0');\n    const milliseconds = Math.floor((timeInSeconds % 1) * 1000)\n      .toString()\n      .padStart(3, '0');\n\n    if (timeDisplayFormat === 'MM:SS') {\n      return `${minutes}:${seconds}`;\n    }\n\n    if (timeDisplayFormat === 'MM:SS.m') {\n      return `${minutes}:${seconds}.${milliseconds[0]}`;\n    }\n\n    if (timeDisplayFormat === 'MM:SS.mm') {\n      return `${minutes}:${seconds}.${milliseconds.slice(0, 2)}`;\n    }\n  }\n\n  return `${toFormattedTime(timeInSeconds)} / ${toFormattedTime(absoluteTimeInSeconds)}`;\n}\n\nexport function shouldShowControls(\n  playing: boolean,\n  isMouseOver: boolean,\n  areControlsDisabled: boolean,\n) {\n  if (areControlsDisabled) {\n    return false;\n  }\n\n  return !playing || isMouseOver;\n}\n"],"mappings":"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","names":["useState","timeInSeconds","jsx","jsxs","jsx","jsxs","useState","volume"]}