siftlode/frontend/src/components/playerModalControls.tsx

import { useTranslation } from "react-i18next";
import { Repeat, Repeat1, Shuffle, SkipBack, SkipForward } from "lucide-react";
import type { AutoMode, LoopMode } from "../lib/playerModes";
import { Button } from "./ui/Button";

// Presentational controls for the YouTube modal player (PlayerModal), split out of the god component —
// the sibling of plexPlayerControls.tsx. No state or effects here; all behaviour comes in via props.
// The auto-advance / loop modes it renders are defined in `lib/playerModes`.

/** The queue transport cluster — prev / counter / next, then the auto-advance and loop mode toggles.
 *  Rendered in two places with identical logic: the modal's queue bar (`variant:"modal"`, normal glass
 *  theme, labels always shown) and the big-view docked control bar (`variant:"docked"`, white-on-dark,
 *  labels hidden until a breakpoint). Only the theme + label-visibility differ; the behaviour is one,
 *  so a mode/icon change lands once. The wrapper (fragment vs. bordered row) stays at the call site. */
export function PlayerTransportControls({
  variant,
  index,
  queueLength,
  autoMode,
  loopMode,
  onPrev,
  onNext,
  onCycleAuto,
  onCycleLoop,
}: {
  variant: "docked" | "modal";
  index: number;
  queueLength: number;
  autoMode: AutoMode;
  loopMode: LoopMode;
  onPrev: () => void;
  onNext: () => void;
  onCycleAuto: () => void;
  onCycleLoop: () => void;
}) {
  const { t } = useTranslation();
  const docked = variant === "docked";
  // The docked bar sits on the video (always dark): the overlay variant; the modal's is a page surface.
  const chrome = docked ? "overlay" : "ghost";
  const navLabel = docked ? "hidden sm:inline" : "";
  const counter = docked ? "tabular-nums text-white/70" : "text-muted tabular-nums";
  const divider = docked ? "h-4 w-px bg-white/20" : "w-px h-4 bg-border";
  const toggleLabel = docked ? "hidden md:inline" : "";
  return (
    <>
      <Button
        variant={chrome}
        size="sm"
        icon={<SkipBack />}
        onClick={onPrev}
        disabled={index === 0}
        label={t("player.previous")}
        title={`${t("player.previous")} · Shift+←`}
      >
        <span className={navLabel}>{t("player.previous")}</span>
      </Button>
      <span className={counter}>
        {index + 1} / {queueLength}
      </span>
      <Button
        variant={chrome}
        size="sm"
        onClick={onNext}
        disabled={index === queueLength - 1}
        label={t("player.next")}
        title={`${t("player.next")} · Shift+→`}
      >
        <span className={navLabel}>{t("player.next")}</span>
        <SkipForward />
      </Button>
      <span className={divider} />
      {/* Persistent playback settings — cycle on click, saved to your account. */}
      <Button
        variant={chrome}
        size="sm"
        pressed={autoMode !== "off"}
        icon={
          autoMode === "prev" ? <SkipBack /> : autoMode === "random" ? <Shuffle /> : <SkipForward />
        }
        onClick={onCycleAuto}
        label={`${t("player.autoAdvance.label")}: ${t(`player.autoAdvance.${autoMode}`)}`}
        title={t("player.autoAdvance.hint")}
      >
        <span className={toggleLabel}>
          {t("player.autoAdvance.label")}: {t(`player.autoAdvance.${autoMode}`)}
        </span>
      </Button>
      <Button
        variant={chrome}
        size="sm"
        pressed={loopMode !== "off"}
        icon={loopMode === "one" ? <Repeat1 /> : <Repeat />}
        onClick={onCycleLoop}
        label={`${t("player.loop.label")}: ${t(`player.loop.${loopMode}`)}`}
        title={t("player.loop.hint")}
      >
        <span className={toggleLabel}>
          {t("player.loop.label")}: {t(`player.loop.${loopMode}`)}
        </span>
      </Button>
    </>
  );
}