feat: initialize k-tv-frontend with Next.js and Tailwind CSS

- Added package.json with dependencies and scripts for development, build, and linting. - Created postcss.config.mjs for Tailwind CSS integration. - Added SVG assets for UI components including file, globe, next, vercel, and window icons. - Configured TypeScript with tsconfig.json for strict type checking and module resolution.
2026-03-11 19:13:21 +01:00
commit 01108aa23e
130 changed files with 29949 additions and 0 deletions
--- a/k-tv-frontend/app/(main)/tv/components/channel-controls.tsx
+++ b/k-tv-frontend/app/(main)/tv/components/channel-controls.tsx
@@ -0,0 +1,46 @@
+import { ChevronUp, ChevronDown } from "lucide-react";
+
+interface ChannelControlsProps {
+  channelNumber: number;
+  channelName: string;
+  onPrevChannel: () => void;
+  onNextChannel: () => void;
+}
+
+export function ChannelControls({
+  channelNumber,
+  channelName,
+  onPrevChannel,
+  onNextChannel,
+}: ChannelControlsProps) {
+  return (
+    <div className="flex flex-col items-center gap-1 rounded-lg bg-black/60 p-3 backdrop-blur-md">
+      <button
+        onClick={onNextChannel}
+        aria-label="Next channel"
+        className="flex h-10 w-10 items-center justify-center rounded-md text-zinc-400 transition-colors hover:bg-zinc-700 hover:text-white active:scale-95"
+      >
+        <ChevronUp className="h-5 w-5" />
+      </button>
+
+      <div className="flex flex-col items-center px-2 py-1 text-center">
+        <span className="font-mono text-2xl font-bold tabular-nums text-white leading-none">
+          {channelNumber}
+        </span>
+        <span className="mt-0.5 max-w-20 truncate text-[10px] text-zinc-400">
+          {channelName}
+        </span>
+      </div>
+
+      <button
+        onClick={onPrevChannel}
+        aria-label="Previous channel"
+        className="flex h-10 w-10 items-center justify-center rounded-md text-zinc-400 transition-colors hover:bg-zinc-700 hover:text-white active:scale-95"
+      >
+        <ChevronDown className="h-5 w-5" />
+      </button>
+    </div>
+  );
+}
+
+export type { ChannelControlsProps };
--- a/k-tv-frontend/app/(main)/tv/components/channel-info.tsx
+++ b/k-tv-frontend/app/(main)/tv/components/channel-info.tsx
@@ -0,0 +1,62 @@
+interface ChannelInfoProps {
+  channelNumber: number;
+  channelName: string;
+  showTitle: string;
+  showStartTime: string; // "HH:MM"
+  showEndTime: string; // "HH:MM"
+  /** Progress through the current show, 0–100 */
+  progress: number;
+  description?: string;
+}
+
+export function ChannelInfo({
+  channelNumber,
+  channelName,
+  showTitle,
+  showStartTime,
+  showEndTime,
+  progress,
+  description,
+}: ChannelInfoProps) {
+  const clampedProgress = Math.min(100, Math.max(0, progress));
+
+  return (
+    <div className="flex flex-col gap-2 rounded-lg bg-black/60 p-4 backdrop-blur-md w-80">
+      {/* Channel badge */}
+      <div className="flex items-center gap-2">
+        <span className="flex h-7 min-w-9 items-center justify-center rounded bg-white px-1.5 font-mono text-xs font-bold text-black">
+          {channelNumber}
+        </span>
+        <span className="truncate text-sm font-medium text-zinc-300">
+          {channelName}
+        </span>
+      </div>
+
+      {/* Show title */}
+      <p className="text-base font-semibold leading-tight text-white">
+        {showTitle}
+      </p>
+
+      {/* Description */}
+      {description && (
+        <p className="line-clamp-2 text-xs text-zinc-400">{description}</p>
+      )}
+
+      {/* Progress bar */}
+      <div className="flex flex-col gap-1">
+        <div className="h-1 w-full overflow-hidden rounded-full bg-zinc-700">
+          <div
+            className="h-full rounded-full bg-white transition-all duration-500"
+            style={{ width: `${clampedProgress}%` }}
+          />
+        </div>
+        <div className="flex justify-between font-mono text-[10px] text-zinc-500">
+          <span>{showStartTime}</span>
+          <span>{showEndTime}</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export type { ChannelInfoProps };
--- a/k-tv-frontend/app/(main)/tv/components/index.ts
+++ b/k-tv-frontend/app/(main)/tv/components/index.ts
@@ -0,0 +1,17 @@
+export { VideoPlayer } from "./video-player";
+export type { VideoPlayerProps } from "./video-player";
+
+export { ChannelInfo } from "./channel-info";
+export type { ChannelInfoProps } from "./channel-info";
+
+export { ChannelControls } from "./channel-controls";
+export type { ChannelControlsProps } from "./channel-controls";
+
+export { ScheduleOverlay } from "./schedule-overlay";
+export type { ScheduleOverlayProps, ScheduleSlot } from "./schedule-overlay";
+
+export { UpNextBanner } from "./up-next-banner";
+export type { UpNextBannerProps } from "./up-next-banner";
+
+export { NoSignal } from "./no-signal";
+export type { NoSignalProps, NoSignalVariant } from "./no-signal";
--- a/k-tv-frontend/app/(main)/tv/components/no-signal.tsx
+++ b/k-tv-frontend/app/(main)/tv/components/no-signal.tsx
@@ -0,0 +1,59 @@
+import { WifiOff, AlertTriangle, Loader2 } from "lucide-react";
+
+type NoSignalVariant = "no-signal" | "error" | "loading";
+
+interface NoSignalProps {
+  variant?: NoSignalVariant;
+  message?: string;
+}
+
+const VARIANTS: Record<
+  NoSignalVariant,
+  { icon: React.ReactNode; heading: string; defaultMessage: string }
+> = {
+  "no-signal": {
+    icon: <WifiOff className="h-10 w-10 text-zinc-600" />,
+    heading: "No Signal",
+    defaultMessage: "Nothing is scheduled to play right now.",
+  },
+  error: {
+    icon: <AlertTriangle className="h-10 w-10 text-zinc-600" />,
+    heading: "Playback Error",
+    defaultMessage: "Something went wrong. Try switching channels.",
+  },
+  loading: {
+    icon: <Loader2 className="h-10 w-10 animate-spin text-zinc-600" />,
+    heading: "Loading",
+    defaultMessage: "Tuning in…",
+  },
+};
+
+export function NoSignal({ variant = "no-signal", message }: NoSignalProps) {
+  const { icon, heading, defaultMessage } = VARIANTS[variant];
+
+  return (
+    <div className="relative flex h-full w-full flex-col items-center justify-center gap-4 bg-zinc-950 select-none overflow-hidden">
+      {/* Static noise texture */}
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-0 opacity-[0.03]"
+        style={{
+          backgroundImage:
+            "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E\")",
+          backgroundSize: "200px 200px",
+        }}
+      />
+
+      {icon}
+
+      <div className="flex flex-col items-center gap-1 text-center">
+        <p className="text-sm font-semibold uppercase tracking-widest text-zinc-500">
+          {heading}
+        </p>
+        <p className="max-w-xs text-xs text-zinc-700">{message ?? defaultMessage}</p>
+      </div>
+    </div>
+  );
+}
+
+export type { NoSignalProps, NoSignalVariant };
--- a/k-tv-frontend/app/(main)/tv/components/schedule-overlay.tsx
+++ b/k-tv-frontend/app/(main)/tv/components/schedule-overlay.tsx
@@ -0,0 +1,64 @@
+import { CalendarClock } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export interface ScheduleSlot {
+  id: string;
+  title: string;
+  startTime: string; // "HH:MM"
+  endTime: string;   // "HH:MM"
+  isCurrent?: boolean;
+}
+
+interface ScheduleOverlayProps {
+  channelName: string;
+  slots: ScheduleSlot[];
+}
+
+export function ScheduleOverlay({ channelName, slots }: ScheduleOverlayProps) {
+  return (
+    <div className="flex h-full w-80 flex-col rounded-lg bg-black/70 backdrop-blur-md overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center gap-2 border-b border-zinc-700/60 px-4 py-3">
+        <CalendarClock className="h-4 w-4 text-zinc-400 shrink-0" />
+        <span className="truncate text-sm font-medium text-zinc-200">{channelName}</span>
+      </div>
+
+      {/* Slots */}
+      <ul className="flex-1 overflow-y-auto">
+        {slots.map((slot) => (
+          <li
+            key={slot.id}
+            className={cn(
+              "flex items-start gap-3 border-b border-zinc-800/60 px-4 py-3 transition-colors last:border-0",
+              slot.isCurrent && "bg-white/5"
+            )}
+          >
+            {/* Current indicator */}
+            <span
+              className={cn(
+                "mt-0.5 h-2 w-2 shrink-0 rounded-full",
+                slot.isCurrent ? "bg-white" : "bg-transparent"
+              )}
+            />
+
+            <div className="min-w-0 flex-1">
+              <p
+                className={cn(
+                  "truncate text-sm font-medium leading-snug",
+                  slot.isCurrent ? "text-white" : "text-zinc-400"
+                )}
+              >
+                {slot.title}
+              </p>
+              <p className="mt-0.5 font-mono text-[10px] text-zinc-600">
+                {slot.startTime} – {slot.endTime}
+              </p>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export type { ScheduleOverlayProps };
--- a/k-tv-frontend/app/(main)/tv/components/up-next-banner.tsx
+++ b/k-tv-frontend/app/(main)/tv/components/up-next-banner.tsx
@@ -0,0 +1,42 @@
+import { ArrowRight } from "lucide-react";
+
+interface UpNextBannerProps {
+  nextShowTitle: string;
+  /** Minutes remaining until the next show */
+  minutesUntil: number;
+  nextShowStartTime: string; // "HH:MM"
+}
+
+export function UpNextBanner({
+  nextShowTitle,
+  minutesUntil,
+  nextShowStartTime,
+}: UpNextBannerProps) {
+  const timeLabel =
+    minutesUntil <= 1 ? "Starting now" : `In ${minutesUntil} min`;
+
+  return (
+    <div className="flex w-full items-center gap-3 rounded-lg bg-black/70 px-5 py-3 backdrop-blur-md">
+      {/* Label */}
+      <div className="flex shrink-0 flex-col">
+        <span className="text-[10px] font-semibold uppercase tracking-widest text-zinc-500">
+          Up Next
+        </span>
+        <span className="font-mono text-xs text-zinc-400">{timeLabel}</span>
+      </div>
+
+      <div className="h-8 w-px shrink-0 bg-zinc-700" />
+
+      {/* Show info */}
+      <div className="flex min-w-0 flex-1 items-center gap-2">
+        <ArrowRight className="h-4 w-4 shrink-0 text-zinc-500" />
+        <p className="truncate text-sm font-medium text-white">{nextShowTitle}</p>
+        <span className="ml-auto shrink-0 font-mono text-xs text-zinc-500">
+          {nextShowStartTime}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+export type { UpNextBannerProps };
--- a/k-tv-frontend/app/(main)/tv/components/video-player.tsx
+++ b/k-tv-frontend/app/(main)/tv/components/video-player.tsx
@@ -0,0 +1,29 @@
+import { forwardRef } from "react";
+
+interface VideoPlayerProps {
+  src?: string;
+  poster?: string;
+  className?: string;
+}
+
+const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
+  ({ src, poster, className }, ref) => {
+    return (
+      <div className={`relative h-full w-full bg-black ${className ?? ""}`}>
+        <video
+          ref={ref}
+          src={src}
+          poster={poster}
+          autoPlay
+          playsInline
+          className="h-full w-full object-contain"
+        />
+      </div>
+    );
+  }
+);
+
+VideoPlayer.displayName = "VideoPlayer";
+
+export { VideoPlayer };
+export type { VideoPlayerProps };