Standard Player

"use client";

import { cn } from "@/lib/utils";
import { BeyondWordsLogo } from "@/registry/react/blocks/standard/BeyondWordsLogo";
import { CallToAction } from "@/registry/react/blocks/standard/CallToAction";
import { CloseWidgetButton } from "@/registry/react/blocks/standard/CloseWidgetButton";
import { Duration } from "@/registry/react/blocks/standard/Duration";
import { NextSegmentButton } from "@/registry/react/blocks/standard/NextSegmentButton";
import { PlaybackControls } from "@/registry/react/blocks/standard/PlaybackControls";
import { PlaybackRateButton } from "@/registry/react/blocks/standard/PlaybackRateButton";
import { PlayerInfo } from "@/registry/react/blocks/standard/PlayerInfo";
import { PlayerProvider } from "@/registry/react/blocks/standard/PlayerProvider";
import { PlayPauseButton } from "@/registry/react/blocks/standard/PlayPauseButton";
import { PrevSegmentButton } from "@/registry/react/blocks/standard/PrevSegmentButton";
import { ProgressBar } from "@/registry/react/blocks/standard/ProgressBar";
import { TimeIndicator } from "@/registry/react/blocks/standard/TimeIndicator";
import { WidgetConsumer, WidgetProvider } from "@/registry/react/blocks/standard/WidgetProvider";

export function StandardPlayer({ projectId, sourceId, ...args }) {
  return (
    <PlayerProvider args={{ projectId, sourceId, showUserInterface: false, ...args }}>
      <WidgetProvider>
        <WidgetConsumer>
          {({ mode }) => (
            <div
              className={cn(
                "group/player-root flex h-12 w-[536px] flex-row items-center gap-2 rounded-[25px] bg-[#F5F5F5] p-1 pr-4",
                {
                  "fixed right-4 bottom-4 z-50 w-auto min-w-60 shadow-md": mode === "widget",
                },
              )}
            >
              <PlayPauseButton />
              <PlayerInfo>
                <CallToAction />
                <Duration />
              </PlayerInfo>
              <PlaybackControls>
                <PlaybackRateButton />
                <PrevSegmentButton />
                <NextSegmentButton />
                <TimeIndicator />
                {mode === "inline" && <ProgressBar />}
                {mode === "widget" && <CloseWidgetButton />}
              </PlaybackControls>
              {mode === "inline" && <BeyondWordsLogo />}
            </div>
          )}
        </WidgetConsumer>
      </WidgetProvider>
    </PlayerProvider>
  );
}