feat: enhance stream URL handling and add initial offset support in VideoPlayer

k-tv-frontend/app/(main)/tv/components/index.ts

@@ -1,6 +1,7 @@
 export { VideoPlayer } from "./video-player";
 export type { VideoPlayerProps } from "./video-player";
 
+
 export { ChannelInfo } from "./channel-info";
 export type { ChannelInfoProps } from "./channel-info";
 

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

@@ -4,10 +4,12 @@ interface VideoPlayerProps {
   src?: string;
   poster?: string;
   className?: string;
+  /** Seek to this many seconds after metadata loads (broadcast sync on refresh). */
+  initialOffset?: number;
 }
 
 const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
-  ({ src, poster, className }, ref) => {
+  ({ src, poster, className, initialOffset }, ref) => {
     return (
       <div className={`relative h-full w-full bg-black ${className ?? ""}`}>
         <video
@@ -16,6 +18,11 @@ const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
           poster={poster}
           autoPlay
           playsInline
+          onLoadedMetadata={(e) => {
+            if (initialOffset && initialOffset > 0) {
+              e.currentTarget.currentTime = initialOffset;
+            }
+          }}
           className="h-full w-full object-contain"
         />
       </div>

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

@@ -57,7 +57,11 @@ export default function TvPage() {
   const { data: broadcast, isLoading: isLoadingBroadcast } =
     useCurrentBroadcast(channel?.id ?? "");
   const { data: epgSlots } = useEpg(channel?.id ?? "");
-  const { data: streamUrl } = useStreamUrl(channel?.id, token);
+  const { data: streamUrl } = useStreamUrl(
+    channel?.id,
+    token,
+    broadcast?.slot.id,
+  );
 
   // ------------------------------------------------------------------
   // Derived display values
@@ -176,7 +180,11 @@ export default function TvPage() {
     }
     if (streamUrl) {
       return (
-        <VideoPlayer src={streamUrl} className="absolute inset-0 h-full w-full" />
+        <VideoPlayer
+          src={streamUrl}
+          className="absolute inset-0 h-full w-full"
+          initialOffset={broadcast?.offset_secs}
+        />
       );
     }
     // Broadcast exists but stream URL resolving — show no-signal until ready

k-tv-frontend/hooks/use-tv.ts

@@ -65,30 +65,44 @@ export function findNextSlot(
 // ---------------------------------------------------------------------------
 
 /**
- * Resolves the live stream URL for a channel.
+ * Resolves the live stream URL for a channel, starting at the correct
+ * broadcast offset so refresh doesn't replay from the beginning.
  *
  * The backend's GET /channels/:id/stream endpoint returns a 307 redirect to
  * the Jellyfin stream URL. Since browsers can't read redirect Location headers
  * from fetch(), we proxy through /api/stream/[channelId] (a Next.js route that
  * runs server-side) and return the final URL as JSON.
  *
+ * slotId is included in the query key so the URL is re-fetched automatically
+ * when the current item changes (the next scheduled item starts playing).
+ * Within the same slot, the URL stays stable — no mid-item restarts.
+ *
  * Returns null when the channel is in a gap (no-signal / 204).
  */
-export function useStreamUrl(channelId: string | undefined, token: string | null) {
+/**
+ * slotId is in the query key so the URL refetches when the playing item
+ * changes (new slot starts), but stays stable while the same item runs —
+ * no mid-item restarts.
+ */
+export function useStreamUrl(
+  channelId: string | undefined,
+  token: string | null,
+  slotId: string | undefined,
+) {
   return useQuery({
-    queryKey: ["stream-url", channelId],
+    queryKey: ["stream-url", channelId, slotId],
     queryFn: async (): Promise<string | null> => {
-      const res = await fetch(
-        `/api/stream/${channelId}?token=${encodeURIComponent(token!)}`,
-        { cache: "no-store" },
-      );
+      const params = new URLSearchParams({ token: token! });
+      const res = await fetch(`/api/stream/${channelId}?${params}`, {
+        cache: "no-store",
+      });
       if (res.status === 204) return null;
       if (!res.ok) throw new Error(`Stream resolve failed: ${res.status}`);
       const { url } = await res.json();
       return url as string;
     },
-    enabled: !!channelId && !!token,
-    refetchInterval: 30_000,
+    enabled: !!channelId && !!token && !!slotId,
+    staleTime: Infinity,
     retry: false,
   });
 }