Video Player

"use client";

import { CloseWidgetButton } from "@/registry/react/blocks/video/CloseWidgetButton";
import { ControlBar } from "@/registry/react/blocks/video/ControlBar";
import { FeatureImage } from "@/registry/react/blocks/video/FeatureImage";
import { NextSecondsButton } from "@/registry/react/blocks/video/NextSecondsButton";
import { PlaybackRateButton } from "@/registry/react/blocks/video/PlaybackRateButton";
import { PlayerProvider } from "@/registry/react/blocks/video/PlayerProvider";
import { PlayPauseButton } from "@/registry/react/blocks/video/PlayPauseButton";
import { PrevSecondsButton } from "@/registry/react/blocks/video/PrevSecondsButton";
import { ProgressBar } from "@/registry/react/blocks/video/ProgressBar";
import { TimeIndicator } from "@/registry/react/blocks/video/TimeIndicator";
import { WidgetConsumer, WidgetProvider } from "@/registry/react/blocks/video/WidgetProvider";

export function VideoPlayer({ vertical = false, ...args }) {
  return (
    <PlayerProvider vertical={vertical} args={{ video: true, showUserInterface: false, ...args }}>
      <WidgetProvider>
        <WidgetConsumer>
          {({ mode }) => (
            <>
              <FeatureImage />
              <ControlBar>
                <PrevSecondsButton color={"white"} />
                <span className="[&_svg]:size-14">
                  <PlayPauseButton color={"white"} />
                </span>
                <NextSecondsButton color={"white"} />
              </ControlBar>
              {mode === "widget" && (
                <div className="fixed right-4 bottom-4 z-50 flex h-12 min-w-60 flex-row items-center gap-2 rounded-3xl bg-[#F5F5F5] p-1 shadow-md">
                  <PlayPauseButton />
                  <div className="flex grow flex-row items-center gap-2">
                    <PlaybackRateButton />
                    <PrevSecondsButton />
                    <NextSecondsButton />
                    <TimeIndicator />
                    <ProgressBar />
                    <CloseWidgetButton />
                  </div>
                </div>
              )}
            </>
          )}
        </WidgetConsumer>
      </WidgetProvider>
    </PlayerProvider>
  );
}