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

package/dist/index.mjs

@@ -1,387 +0,0 @@
-"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

@@ -1,243 +0,0 @@
-// 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);
-}