GKaszewski/k-tv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add subtitle track support to VideoPlayer and integrate with TvPage

Browse Source
This commit is contained in:
Gabriel Kaszewski
2026-03-11 21:55:20 +01:00
parent f6ff65094b
commit b2f40054fc
2 changed files with 100 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
k-tv-frontend/app/(main)/tv/page.tsx
View File

@@ -10,6 +10,7 @@ import {
UpNextBanner,
NoSignal,
} from "./components";
import type { SubtitleTrack } from "./components/video-player";
import { useAuthContext } from "@/context/auth-context";
import { useChannels, useCurrentBroadcast, useEpg } from "@/hooks/use-channels";
import {
@@ -53,6 +54,11 @@ export default function TvPage() {
// Stream error recovery
const [streamError, setStreamError] = useState(false);
// Subtitles
const [subtitleTracks, setSubtitleTracks] = useState<SubtitleTrack[]>([]);
const [activeSubtitleTrack, setActiveSubtitleTrack] = useState(-1);
const [showSubtitlePicker, setShowSubtitlePicker] = useState(false);
const queryClient = useQueryClient();
// Tick for live progress calculation (every 30 s is fine for the progress bar)
@@ -73,6 +79,13 @@ export default function TvPage() {
setStreamError(false);
}, [broadcast?.slot.id]);
// Reset subtitle state when channel or slot changes
useEffect(() => {
setSubtitleTracks([]);
setActiveSubtitleTrack(-1);
setShowSubtitlePicker(false);
}, [channelIdx, broadcast?.slot.id]);
// ------------------------------------------------------------------
// Derived display values
// ------------------------------------------------------------------
@@ -225,6 +238,8 @@ export default function TvPage() {
src={streamUrl}
className="absolute inset-0 h-full w-full"
initialOffset={broadcast ? calcOffsetSecs(broadcast.slot.start_at) : 0}
subtitleTrack={activeSubtitleTrack}
onSubtitleTracksChange={setSubtitleTracks}
onStreamError={handleStreamError}
/>
);
@@ -254,8 +269,52 @@ export default function TvPage() {
className="pointer-events-none absolute inset-0 z-10 flex flex-col justify-between transition-opacity duration-300"
style={{ opacity: showOverlays ? 1 : 0 }}
>
{/* Top-right: guide toggle */}
<div className="flex justify-end p-4">
{/* Top-right: subtitle picker + guide toggle */}
<div className="flex justify-end gap-2 p-4">
{subtitleTracks.length > 0 && (
<div className="pointer-events-auto relative">
<button
className="rounded-md bg-black/50 px-3 py-1.5 text-xs backdrop-blur transition-colors hover:bg-black/70 hover:text-white"
style={{
color: activeSubtitleTrack !== -1 ? "white" : undefined,
borderBottom:
activeSubtitleTrack !== -1
? "2px solid white"
: "2px solid transparent",
}}
onClick={() => setShowSubtitlePicker((s) => !s)}
>
CC
</button>
{showSubtitlePicker && (
<div className="absolute right-0 top-9 z-30 min-w-[10rem] overflow-hidden rounded-md border border-zinc-700 bg-zinc-900/95 py-1 shadow-xl backdrop-blur">
<button
className={`w-full px-3 py-1.5 text-left text-xs transition-colors hover:bg-zinc-700 ${activeSubtitleTrack === -1 ? "text-white" : "text-zinc-400"}`}
onClick={() => {
setActiveSubtitleTrack(-1);
setShowSubtitlePicker(false);
}}
>
Off
</button>
{subtitleTracks.map((track) => (
<button
key={track.id}
className={`w-full px-3 py-1.5 text-left text-xs transition-colors hover:bg-zinc-700 ${activeSubtitleTrack === track.id ? "text-white" : "text-zinc-400"}`}
onClick={() => {
setActiveSubtitleTrack(track.id);
setShowSubtitlePicker(false);
}}
>
{track.name || track.lang || `Track ${track.id + 1}`}
</button>
))}
</div>
)}
</div>
)}
<button
className="pointer-events-auto rounded-md bg-black/50 px-3 py-1.5 text-xs text-zinc-400 backdrop-blur transition-colors hover:bg-black/70 hover:text-white"
onClick={toggleSchedule}