import React from "react";
import {Video} from "@remotion/media";
import {AbsoluteFill, staticFile} from "remotion";
import type {VQVideoEvent} from "../timeline";

const externalVideoSourcePattern = /^(https?:|data:|blob:)/;

// 用途: videoイベントのsrcをRemotionで再生できるURLへ変換する。
// 使用方法: VQTimelineVideo内でpublic配下の相対パスと外部URLを同じpropsから扱う。
// オプションや引数詳細: http/https/data/blobはそのまま返し、それ以外はstaticFileのpublic相対パスとして扱う。
const resolveVideoSource = (src: string) =>
  externalVideoSourcePattern.test(src) ? src : staticFile(src);

// 用途: VQVideoEventをタイムライン上の動画レイヤーとして描画する。
// 使用方法: scheduled segmentのSequence内でvideoイベントを渡して使う。
// オプションや引数詳細: 表示尺は親Sequenceで制御し、loop/trim/音量/速度/配置はeventから反映する。
export const VQTimelineVideo: React.FC<
  Readonly<{
    video: VQVideoEvent;
  }>
> = ({video}) => {
  return (
    <AbsoluteFill
      style={{
        opacity: video.opacity,
        zIndex: video.zIndex,
        pointerEvents: "none",
      }}
    >
      <Video
        muted={video.muted ?? true}
        loop={video.playback === "loop"}
        loopVolumeCurveBehavior={video.loopVolumeCurveBehavior}
        objectFit={video.fit ?? "cover"}
        playbackRate={video.playbackRate}
        toneFrequency={video.toneFrequency}
        trimBefore={video.trimBeforeFrames}
        trimAfter={video.trimAfterFrames}
        volume={() => video.volume ?? 1}
        src={resolveVideoSource(video.src)}
        style={{
          width: "100%",
          height: "100%",
          objectPosition: video.objectPosition,
        }}
      />
    </AbsoluteFill>
  );
};