Gabriel Kaszewski
8ed8da2d90
Area 1 (tv/page.tsx 964→423 lines): - hooks: use-fullscreen, use-idle, use-volume, use-quality, use-subtitles, use-channel-input, use-channel-passwords, use-tv-keyboard - components: SubtitlePicker, VolumeControl, QualityPicker, TopControlBar, LogoWatermark, AutoplayPrompt, ChannelNumberOverlay, TvBaseLayer Area 2 (edit-channel-sheet.tsx 1244→678 lines): - hooks: use-channel-form (all form state + reset logic) - lib/schemas.ts: extracted Zod schemas + extractErrors - components: AlgorithmicFilterEditor, RecyclePolicyEditor, WebhookEditor, AccessSettingsEditor, LogoEditor Area 3 (dashboard/page.tsx 406→261 lines): - hooks: use-channel-order, use-import-channel, use-regenerate-all - lib/channel-export.ts: pure export utility - components: DashboardHeader
K-TV Frontend
Next.js 16 / React 19 EPG viewer and channel manager for k-tv — the self-hosted linear TV orchestration backend.
Quick Start
cp .env.local.example .env.local
# Edit .env.local — set NEXT_PUBLIC_API_URL to your backend URL
pnpm dev
Open http://localhost:3001 in your browser.
Environment Variables
| Variable | Where | Description |
|---|---|---|
NEXT_PUBLIC_API_URL |
build arg + runtime | Browser-side API base URL. Baked in at build time — must point to the public backend URL. Default: http://localhost:4000/api/v1 |
API_URL |
runtime only | Server-side API URL for Next.js API routes (e.g. stream redirect resolver). Falls back to NEXT_PUBLIC_API_URL if not set. Use this to set a private backend address in Docker. |
Routes
| Path | Auth | Description |
|---|---|---|
/tv |
public | TV player — EPG grid, channel switching, HLS/direct video stream |
/dashboard |
required | Channel management — create, edit, configure schedule blocks |
/admin |
required | Live server log stream + recent activity log |
/login |
— | Email/password login |
/register |
— | New account registration |
Architecture
lib/api.ts— typed fetch client wrapping all backend endpoints (api.auth.*,api.channels.*,api.schedule.*,api.library.*)hooks/— TanStack Query v5 hooks for all data fetching and mutations; components never fetch directlycontext/auth-context.tsx— JWT stored in localStorage,isLoadedflag prevents flash redirects- Components are props-only; all business logic lives in hooks
Docker
See the root README for build and deploy instructions.