k-tv/k-tv-frontend/app/(main)/tv/components/tv-base-layer.tsx

import { RefObject } from "react";
import type { CurrentBroadcastResponse } from "@/lib/types";
import { VideoPlayer } from "./video-player";
import { NoSignal } from "./no-signal";
import { calcOffsetSecs } from "@/hooks/use-tv";
import type { SubtitleTrack } from "./video-player";

interface TvBaseLayerProps {
  isLoadingChannels: boolean;
  hasChannels: boolean;
  broadcastError: unknown;
  isLoadingBroadcast: boolean;
  hasBroadcast: boolean;
  streamUrlError: unknown;
  streamError: boolean;
  videoEnded: boolean;
  streamUrl?: string | null;
  broadcast?: CurrentBroadcastResponse | null;
  activeSubtitleTrack: number;
  isMuted: boolean;
  showStats: boolean;
  videoRef: RefObject<HTMLVideoElement | null>;
  onSubtitleTracksChange: (tracks: SubtitleTrack[]) => void;
  onStreamError: () => void;
  onEnded: () => void;
  onNeedsInteraction: () => void;
  onRetry: () => void;
}

export function TvBaseLayer({
  isLoadingChannels,
  hasChannels,
  broadcastError,
  isLoadingBroadcast,
  hasBroadcast,
  streamUrlError,
  streamError,
  videoEnded,
  streamUrl,
  broadcast,
  activeSubtitleTrack,
  isMuted,
  showStats,
  videoRef,
  onSubtitleTracksChange,
  onStreamError,
  onEnded,
  onNeedsInteraction,
  onRetry,
}: TvBaseLayerProps) {
  if (isLoadingChannels) {
    return <NoSignal variant="loading" message="Tuning in…" />;
  }
  if (!hasChannels) {
    return (
      <NoSignal
        variant="no-signal"
        message="No channels configured. Visit the Dashboard to create one."
      />
    );
  }

  const broadcastErrMsg = (broadcastError as Error)?.message;
  if (broadcastErrMsg === "auth_required") {
    return (
      <NoSignal variant="locked" message="Sign in to watch this channel." />
    );
  }
  if (
    broadcastErrMsg &&
    broadcastError &&
    (broadcastError as { status?: number }).status === 403
  ) {
    return (
      <NoSignal variant="locked" message="This channel is owner-only." />
    );
  }

  if (isLoadingBroadcast) {
    return <NoSignal variant="loading" message="Tuning in…" />;
  }
  if (!hasBroadcast) {
    return (
      <NoSignal
        variant="no-signal"
        message="Nothing is scheduled right now. Check back later."
      />
    );
  }

  const streamErrMsg = (streamUrlError as Error)?.message;
  if (streamErrMsg === "auth_required") {
    return (
      <NoSignal variant="locked" message="Sign in to watch this block." />
    );
  }
  if (
    streamUrlError &&
    (streamUrlError as { status?: number }).status === 403
  ) {
    return <NoSignal variant="locked" message="This block is owner-only." />;
  }

  if (streamError) {
    return (
      <NoSignal variant="error" message="Stream failed to load.">
        <button
          onClick={onRetry}
          className="mt-2 rounded-md border border-zinc-700 bg-zinc-800/80 px-4 py-2 text-xs text-zinc-300 transition-colors hover:bg-zinc-700 hover:text-zinc-100"
        >
          Retry
        </button>
      </NoSignal>
    );
  }
  if (videoEnded) {
    return <NoSignal variant="loading" message="Up next, stay tuned…" />;
  }
  if (streamUrl) {
    return (
      <VideoPlayer
        ref={videoRef}
        src={streamUrl}
        className="absolute inset-0 h-full w-full"
        initialOffset={
          broadcast ? calcOffsetSecs(broadcast.slot.start_at) : 0
        }
        subtitleTrack={activeSubtitleTrack}
        muted={isMuted}
        showStats={showStats}
        broadcast={broadcast ?? undefined}
        onSubtitleTracksChange={onSubtitleTracksChange}
        onStreamError={onStreamError}
        onEnded={onEnded}
        onNeedsInteraction={onNeedsInteraction}
      />
    );
  }
  return <NoSignal variant="loading" message="Loading stream…" />;
}