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

package/dist/index.mjs

@@ -0,0 +1,387 @@
+"use client";
+
+// src/index.tsx
+import React3, { useCallback, useEffect, useRef, useState as useState2 } from "react";
+
+// src/controls.tsx
+import React2, { useState } from "react";
+
+// src/icons.tsx
+import React from "react";
+function PlayButton() {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      className: "w-6 h-6"
+    },
+    /* @__PURE__ */ React.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__ */ React.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      className: "w-6 h-6"
+    },
+    /* @__PURE__ */ React.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__ */ React.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      className: "p-w-6 p-h-6"
+    },
+    /* @__PURE__ */ React.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__ */ React.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__ */ React.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__ */ React.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      className: "p-w-6 p-h-6"
+    },
+    /* @__PURE__ */ React.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__ */ React.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__ */ React.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__ */ React2.createElement("button", { type: "button", className: "p-1", onClick: () => setPlaying(!playing) }, playing ? /* @__PURE__ */ React2.createElement(PauseButton, null) : /* @__PURE__ */ React2.createElement(PlayButton, null));
+}
+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__ */ React2.createElement(
+    "div",
+    {
+      className: "flex items-center space-x-2 relative",
+      onMouseEnter: () => setIsHovering(true),
+      onMouseLeave: () => {
+        if (!isInteracting) {
+          setIsHovering(false);
+        }
+      }
+    },
+    /* @__PURE__ */ React2.createElement(
+      "div",
+      {
+        className: "w-6 h-6 flex items-center justify-center cursor-pointer",
+        onClick: handleIconClick
+      },
+      volume === 0 ? /* @__PURE__ */ React2.createElement(MutedSoundIcon, null) : /* @__PURE__ */ React2.createElement(SoundIcon, null)
+    ),
+    (isHovering || isInteracting) && /* @__PURE__ */ React2.createElement("div", { className: "flex items-center h-1.5 whitespace-nowrap" }, /* @__PURE__ */ React2.createElement("div", { className: "relative w-20 h-1.5 bg-gray-300 rounded-full" }, /* @__PURE__ */ React2.createElement(
+      "div",
+      {
+        className: "absolute top-0 left-0 h-full bg-gray-100 rounded-full",
+        style: { width: `${volume * 100}%` }
+      }
+    ), /* @__PURE__ */ React2.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__ */ React2.createElement("div", { className: "relative flex-1 w-full h-1.5 bg-gray-300 rounded-full overflow-hidden" }, /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      className: "absolute top-0 left-0 h-full bg-gray-100",
+      style: { width: `${progressPercentage}%` }
+    }
+  ), /* @__PURE__ */ React2.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__ */ React2.createElement("div", { className: "text-white p-4 flex-col space-y-2 bg-gradient-to-t from-gray-500 to-transparent" }, /* @__PURE__ */ React2.createElement("div", { className: "flex items-center space-x-2" }, /* @__PURE__ */ React2.createElement(PlayPause, { playing, setPlaying }), /* @__PURE__ */ React2.createElement("div", { className: "flex items-center space-x-2" }, /* @__PURE__ */ React2.createElement(VolumeSlider, { volume, setVolume }), /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement("span", null, getFormattedTime(currentTime, duration, timeDisplayFormat)))), /* @__PURE__ */ React2.createElement("div", { className: "flex-grow" })), /* @__PURE__ */ React2.createElement(
+    Timeline,
+    {
+      currentTime,
+      duration,
+      setCurrentTime: setForcedTime
+    }
+  ));
+}
+
+// src/index.tsx
+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);
+    }
+  }, [currentTime]);
+  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 = 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(() => {
+    import("./internal-LRAKNBSP.mjs").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__ */ React3.createElement("div", { className: "revideo-player-root", style: { display: "contents" } }, /* @__PURE__ */ React3.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__ */ React3.createElement("div", { className: "relative" }, /* @__PURE__ */ React3.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__ */ React3.createElement(
+      "div",
+      {
+        className: `absolute bottom-0 w-full transition-opacity duration-200 ${shouldShowControls(playingState, isMouseOver, !controls) ? "opacity-100" : "opacity-0"}`
+      },
+      /* @__PURE__ */ React3.createElement(
+        Controls,
+        {
+          duration,
+          playing: playingState,
+          setPlaying,
+          currentTime: currentTimeState,
+          setForcedTime,
+          timeDisplayFormat,
+          volume: volumeState,
+          setVolume: setForcedVolume
+        }
+      )
+    ))
+  ));
+}
+export {
+  Player
+};

package/dist/internal-LRAKNBSP.mjs

@@ -0,0 +1,243 @@
+// src/internal.ts
+import { Player, Stage, getFullPreviewSettings } from "@revideo/core";
+import { Vector2 } from "@revideo/core";
+var 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;
+  }
+`;
+var TEMPLATE = `<style>${stylesNew}</style><div class="overlay"></div>`;
+var ID = "revideo-player";
+var 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 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 = getFullPreviewSettings(this.project);
+    const player = new Player(this.project);
+    player.setVariables(this.variables);
+    player.toggleLoop(this.looping);
+    this.player?.onRender.unsubscribe(this.render);
+    this.player?.onFrameChanged.unsubscribe(this.handleFrameChanged);
+    this.player?.togglePlayback(false);
+    this.player?.deactivate();
+    this.player = player;
+    this.updateSettings();
+    this.setState("ready" /* Ready */);
+    this.dispatchEvent(new CustomEvent("playerready", { detail: this.player }));
+    this.setPlaying(playing);
+    this.player.onRender.subscribe(this.render);
+    this.player.onFrameChanged.subscribe(this.handleFrameChanged);
+  }
+  attributeChangedCallback(name, _, newValue) {
+    switch (name) {
+      case "playing":
+        this.setPlaying(newValue === "true");
+        break;
+      case "variables":
+        this.player?.setVariables(this.variables);
+        this.player?.requestSeek(this.player.playback.frame);
+        this.player?.playback.reload();
+        break;
+      case "looping":
+        this.looping = newValue === "true";
+        this.player?.toggleLoop(newValue === "true");
+        break;
+      case "fps":
+      case "quality":
+      case "width":
+      case "height":
+        this.updateSettings();
+        break;
+      case "volume":
+        this.volume = newValue;
+        this.volumeChangeRequested = true;
+    }
+  }
+  /**
+   * Runs when the element is removed from the DOM.
+   */
+  disconnectedCallback() {
+    this.player?.deactivate();
+    this.player?.onRender.unsubscribe(this.render);
+    this.removeEventListener("seekto", this.handleSeekTo);
+    this.removeEventListener("volumechange", this.handleVolumeChange);
+  }
+  /**
+   * Runs when the element is added to the DOM.
+   */
+  connectedCallback() {
+    this.player?.activate();
+    this.player?.onRender.subscribe(this.render);
+    this.addEventListener("seekto", this.handleSeekTo);
+    this.addEventListener("volumechange", this.handleVolumeChange);
+  }
+  /**
+   * Triggered by the timeline.
+   */
+  handleSeekTo = (event) => {
+    if (!this.project) {
+      return;
+    }
+    const e = event;
+    this.time = e.detail;
+    this.player?.requestSeek(e.detail * this.player.playback.fps);
+    this.volumeChangeRequested = true;
+  };
+  handleVolumeChange = (event) => {
+    if (!this.project) {
+      return;
+    }
+    const e = event;
+    this.volume = e.detail;
+    this.player?.playback.currentScene.adjustVolume(this.volume);
+  };
+  /**
+   * Triggered by the player.
+   */
+  handleFrameChanged = (frame) => {
+    if (!this.project || !this.player) {
+      return;
+    }
+    this.time = frame / this.player.playback.fps;
+    if (this.volumeChangeRequested || frame === 0) {
+      this.player?.playback.currentScene.adjustVolume(this.volume);
+      this.volumeChangeRequested = false;
+    }
+  };
+  /**
+   * Called on every frame.
+   */
+  render = async () => {
+    if (this.player && this.project) {
+      await this.stage.render(
+        this.player.playback.currentScene,
+        this.player.playback.previousScene
+      );
+      this.dispatchEvent(new CustomEvent("timeupdate", { detail: this.time }));
+      const durationInFrames = this.player.playback.duration;
+      if (durationInFrames === this.duration) {
+        return;
+      }
+      this.duration = durationInFrames;
+      const durationInSeconds = durationInFrames / this.player.playback.fps;
+      this.dispatchEvent(
+        new CustomEvent("duration", { detail: durationInSeconds })
+      );
+    }
+  };
+  updateSettings() {
+    if (!this.defaultSettings) {
+      return;
+    }
+    const settings = {
+      ...this.defaultSettings,
+      size: new Vector2(this.width, this.height),
+      resolutionScale: this.quality,
+      fps: this.fps
+    };
+    this.stage.configure(settings);
+    this.player?.configure(settings);
+  }
+};
+if (!customElements.get(ID)) {
+  customElements.define(ID, RevideoPlayer);
+}

package/package.json

@@ -1,17 +1,20 @@
 {
   "name": "@revideo/player-react",
-  "version": "0.10.0",
+  "version": "0.10.1-alpha.1116+bf8dc820",
   "description": "",
   "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
   "files": [
-    "dist"
+    "dist/**"
   ],
   "scripts": {
-    "build": "tsc && postcss src/**/*.css --dir dist"
+    "build": "tsup src/index.tsx --format esm,cjs --dts --external react"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0"
   },
-  "keywords": [],
-  "author": "revideo",
-  "license": "MIT",
   "devDependencies": {
     "@types/react": "^18",
     "@types/react-dom": "^18",
@@ -19,13 +22,12 @@
     "cssnano": "^7.0.6",
     "postcss": "^8.4.47",
     "postcss-cli": "^11.0.0",
-    "tailwindcss": "^3.4.12"
+    "react": "^18.3.1",
+    "tailwindcss": "^3.4.12",
+    "tsup": "^8.0.0"
   },
   "dependencies": {
-    "@revideo/core": "0.10.0",
-    "react": "^18",
-    "react-dom": "^18",
-    "uuid": "^10.0.0"
+    "@revideo/core": "^0.10.1-alpha.1116+bf8dc820"
   },
-  "gitHead": "5ce6d551d46a072f27a35c8df46c5a466bd739bc"
+  "gitHead": "bf8dc820fddb74de3f39f174d4b7a8e6e1bfa03c"
 }

package/dist/controls.d.ts

@@ -1,11 +0,0 @@
-export declare function Controls({ duration, playing, setPlaying, currentTime, setForcedTime, timeDisplayFormat, volume, setVolume, }: {
-    duration: number;
-    playing: boolean;
-    setPlaying: (playing: boolean) => void;
-    currentTime: number;
-    setForcedTime: (currentTime: number) => void;
-    timeDisplayFormat: 'MM:SS' | 'MM:SS.m' | 'MM:SS.mm';
-    volume: number;
-    setVolume: (volume: number) => void;
-}): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=controls.d.ts.map

package/dist/controls.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"controls.d.ts","sourceRoot":"","sources":["../src/controls.tsx"],"names":[],"mappings":"AAoHA,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,OAAO,EACP,UAAU,EACV,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,MAAM,EACN,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,iBAAiB,EAAE,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;IACpD,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC,2CAsBA"}