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

40
k-tv-frontend/app/(main)/tv/components/video-player.tsx
View File

@@ -1,17 +1,37 @@
import { forwardRef, useEffect, useRef } from "react";
import Hls from "hls.js";
export interface SubtitleTrack {
id: number;
name: string;
lang?: string;
}
interface VideoPlayerProps {
src?: string;
poster?: string;
className?: string;
/** Seconds into the current item to seek on load (broadcast sync). */
initialOffset?: number;
/** Active subtitle track index, or -1 to disable. */
subtitleTrack?: number;
onStreamError?: () => void;
onSubtitleTracksChange?: (tracks: SubtitleTrack[]) => void;
}
const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
({ src, poster, className, initialOffset = 0, onStreamError }, ref) => {
(
{
src,
poster,
className,
initialOffset = 0,
subtitleTrack = -1,
onStreamError,
onSubtitleTracksChange,
},
ref,
) => {
const internalRef = useRef<HTMLVideoElement | null>(null);
const hlsRef = useRef<Hls | null>(null);
@@ -21,12 +41,20 @@ const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
else if (ref) ref.current = el;
};
// Apply subtitle track changes without tearing down the HLS instance
useEffect(() => {
if (hlsRef.current) {
hlsRef.current.subtitleTrack = subtitleTrack;
}
}, [subtitleTrack]);
useEffect(() => {
const video = internalRef.current;
if (!video || !src) return;
hlsRef.current?.destroy();
hlsRef.current = null;
onSubtitleTracksChange?.([]);
const isHls = src.includes(".m3u8");
@@ -41,6 +69,16 @@ const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
video.play().catch(() => {});
});
hls.on(Hls.Events.SUBTITLE_TRACKS_UPDATED, (_event, data) => {
onSubtitleTracksChange?.(
data.subtitleTracks.map((t) => ({
id: t.id,
name: t.name,
lang: t.lang,
})),
);
});
hls.on(Hls.Events.ERROR, (_event, data) => {
if (data.fatal) onStreamError?.();
});

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}