From b604e25e6d42cb3413e0fb1d0292c5d82583fffd Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Wed, 2 Sep 2026 02:38:30 +0000
Subject: [PATCH 01/10] perf(web-ui): lazily render EPG day sections and
 precompute row labels

Render each day of the programme guide only once it approaches the scroll
viewport (shared IntersectionObserver, fixed-height placeholders), always
rendering the section holding the playing programme so auto-scroll still
works. Row time labels are formatted once per EPG update with a cached
Intl.DateTimeFormat instead of toLocaleTimeString per render, and the
on-air clock ticks on minute boundaries instead of every second.

Co-authored-by: Stackie Jia <jsq2627@gmail.com>
---
 web-ui/src/components/player/epg-view.tsx | 325 +++++++++++++++-------
 1 file changed, 230 insertions(+), 95 deletions(-)

diff --git a/web-ui/src/components/player/epg-view.tsx b/web-ui/src/components/player/epg-view.tsx
index 5d03de21..263b49ea 100644
--- a/web-ui/src/components/player/epg-view.tsx
+++ b/web-ui/src/components/player/epg-view.tsx
@@ -3,8 +3,8 @@ import { Circle, History } from "lucide-react";
 import {
   memo,
   type RefObject,
+  startTransition,
   useCallback,
-  useDeferredValue,
   useEffect,
   useLayoutEffect,
   useMemo,
@@ -35,30 +35,58 @@ interface EPGViewProps {
 
 export const nextScrollBehaviorRef: RefObject<"smooth" | "instant" | "skip"> = { current: "instant" };
 
+/**
+ * Sections this far outside the scroll viewport are hydrated ahead of time so
+ * scrolling into them never shows an empty placeholder.
+ */
+const SECTION_HYDRATION_MARGIN = "800px 0px";
+
+let timeFormatter: Intl.DateTimeFormat | null = null;
+function formatProgramTime(date: Date): string {
+  timeFormatter ??= new Intl.DateTimeFormat(undefined, { hour: "2-digit", minute: "2-digit" });
+  return timeFormatter.format(date);
+}
+
+interface EPGProgramRow {
+  program: EPGProgram;
+  startLabel: string;
+  durationMinutes: number;
+}
+
+interface EPGDateSectionData {
+  dateKey: string;
+  date: Date;
+  rows: EPGProgramRow[];
+}
+
+type SectionVisibilityHandler = () => void;
+
 interface EPGProgramItemProps {
   currentProgramRef: RefObject<HTMLButtonElement | null>;
+  durationMinutes: number;
   handleProgramClick: (programStart: Date, programEnd: Date) => void;
   isPast: boolean;
   locale: Locale;
   onAir: boolean;
   playing: boolean;
   program: EPGProgram;
+  startLabel: string;
   supportsCatchup: boolean;
 }
 
 const EPGProgramItem = memo(function EPGProgramItem({
   currentProgramRef,
+  durationMinutes,
   handleProgramClick,
   isPast,
   locale,
   onAir,
   playing,
   program,
+  startLabel,
   supportsCatchup,
 }: EPGProgramItemProps) {
   const t = usePlayerTranslation(locale);
-  const formatTime = (date: Date) => date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
-  const durationMinutes = Math.round((program.end.getTime() - program.start.getTime()) / 60000);
 
   return (
     <button
@@ -103,7 +131,7 @@ const EPGProgramItem = memo(function EPGProgramItem({
               playing && "text-blue-700 dark:text-blue-200",
             )}
           >
-            {formatTime(program.start)}
+            {startLabel}
           </span>
           <span className="whitespace-nowrap text-[10px] text-slate-500 tabular-nums leading-4 dark:text-slate-400 md:text-xs">
             {durationMinutes}
@@ -134,77 +162,118 @@ const EPGProgramItem = memo(function EPGProgramItem({
   );
 });
 
-interface EPGProgramListProps {
-  currentPlayingProgram: EPGProgram | null;
+function formatRelativeDate(
+  date: Date,
+  currentTimeMs: number,
+  locale: Locale,
+  t: (key: "today" | "yesterday" | "dayBeforeYesterday" | "tomorrow") => string,
+) {
+  const now = new Date(currentTimeMs);
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const targetDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  const daysDiff = Math.floor((targetDate.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
+
+  switch (daysDiff) {
+    case 0:
+      return t("today");
+    case -1:
+      return t("yesterday");
+    case -2:
+      return t("dayBeforeYesterday");
+    case 1:
+      return t("tomorrow");
+    default:
+      return date.toLocaleDateString(locale === "zh-Hans" || locale === "zh-Hant" ? "zh-CN" : "en-US", {
+        month: "short",
+        day: "numeric",
+      });
+  }
+}
+
+interface EPGDateSectionProps {
+  currentPlayingProgramId: string | undefined;
   currentProgramRef: RefObject<HTMLButtonElement | null>;
-  currentTime: Date;
+  currentTimeMs: number;
+  /** Section contains the playing program; it must render synchronously so the scroll target exists. */
+  forceRender: boolean;
   handleProgramClick: (programStart: Date, programEnd: Date) => void;
   locale: Locale;
-  programsByDate: Map<string, EPGProgram[]>;
+  registerSection: (element: HTMLElement, onVisible: SectionVisibilityHandler) => void;
+  section: EPGDateSectionData;
   supportsCatchup: boolean;
+  unregisterSection: (element: HTMLElement) => void;
 }
 
-const EPGProgramList = memo(function EPGProgramList({
-  currentPlayingProgram,
+/**
+ * One day of programs. Rows are only materialized once the section approaches the
+ * scroll viewport (or when it holds the playing program); until then a fixed-height
+ * placeholder keeps the scroll geometry stable. Once hydrated a section stays hydrated.
+ */
+const EPGDateSection = memo(function EPGDateSection({
+  currentPlayingProgramId,
   currentProgramRef,
-  currentTime,
+  currentTimeMs,
+  forceRender,
   handleProgramClick,
   locale,
-  programsByDate,
+  registerSection,
+  section,
   supportsCatchup,
-}: EPGProgramListProps) {
+  unregisterSection,
+}: EPGDateSectionProps) {
   const t = usePlayerTranslation(locale);
-  const formatRelativeDate = (date: Date) => {
-    const today = new Date(currentTime.getFullYear(), currentTime.getMonth(), currentTime.getDate());
-    const targetDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
-    const daysDiff = Math.floor((targetDate.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
-
-    switch (daysDiff) {
-      case 0:
-        return t("today");
-      case -1:
-        return t("yesterday");
-      case -2:
-        return t("dayBeforeYesterday");
-      case 1:
-        return t("tomorrow");
-      default:
-        return date.toLocaleDateString(locale === "zh-Hans" || locale === "zh-Hant" ? "zh-CN" : "en-US", {
-          month: "short",
-          day: "numeric",
-        });
-    }
-  };
+  const [hydrated, setHydrated] = useState(forceRender);
+  const rendered = hydrated || forceRender;
 
-  return Array.from(programsByDate.entries()).map(([dateKey, programs]) => {
-    const date = new Date(dateKey);
-    return (
-      <div key={dateKey} className="relative">
-        <div className="player-performance-epg-header sticky top-0 z-10 border-blue-950/10 border-b bg-white/66 px-3 py-1.5 shadow-[0_8px_20px_rgba(30,64,175,0.06)] backdrop-blur-2xl dark:border-blue-100/10 dark:bg-[linear-gradient(90deg,#151c32,#25223f)] dark:shadow-[0_8px_20px_rgba(0,0,0,0.18)] md:px-4 md:py-2">
-          <h3 className="font-semibold text-blue-800 text-xs tracking-wide dark:text-blue-100 md:text-sm">
-            {formatRelativeDate(date)}
-          </h3>
-        </div>
-        <div className="px-2 py-2">
+  const placeholderRef = useCallback(
+    (element: HTMLDivElement | null) => {
+      if (!element) return;
+      registerSection(element, () => {
+        startTransition(() => setHydrated(true));
+      });
+      return () => unregisterSection(element);
+    },
+    [registerSection, unregisterSection],
+  );
+
+  const rowCount = section.rows.length;
+
+  return (
+    <div className="relative">
+      <div className="player-performance-epg-header sticky top-0 z-10 border-blue-950/10 border-b bg-white/66 px-3 py-1.5 shadow-[0_8px_20px_rgba(30,64,175,0.06)] backdrop-blur-2xl dark:border-blue-100/10 dark:bg-[linear-gradient(90deg,#151c32,#25223f)] dark:shadow-[0_8px_20px_rgba(0,0,0,0.18)] md:px-4 md:py-2">
+        <h3 className="font-semibold text-blue-800 text-xs tracking-wide dark:text-blue-100 md:text-sm">
+          {formatRelativeDate(section.date, currentTimeMs, locale, t)}
+        </h3>
+      </div>
+      <div className="px-2 py-2">
+        {rendered ? (
           <div className="space-y-2">
-            {programs.map((program) => (
+            {section.rows.map(({ program, startLabel, durationMinutes }) => (
               <EPGProgramItem
                 key={program.id}
                 currentProgramRef={currentProgramRef}
+                durationMinutes={durationMinutes}
                 handleProgramClick={handleProgramClick}
-                isPast={program.end <= currentTime}
+                isPast={program.end.getTime() <= currentTimeMs}
                 locale={locale}
-                onAir={program.start <= currentTime && program.end > currentTime}
-                playing={currentPlayingProgram?.id === program.id}
+                onAir={program.start.getTime() <= currentTimeMs && program.end.getTime() > currentTimeMs}
+                playing={currentPlayingProgramId === program.id}
                 program={program}
+                startLabel={startLabel}
                 supportsCatchup={supportsCatchup}
               />
             ))}
           </div>
-        </div>
+        ) : (
+          <div
+            ref={placeholderRef}
+            aria-hidden="true"
+            style={{ height: `calc(${rowCount} * var(--epg-item-h) + ${Math.max(rowCount - 1, 0)} * 0.5rem)` }}
+          />
+        )}
       </div>
-    );
-  });
+    </div>
+  );
 });
 
 function EPGViewComponent({
@@ -217,47 +286,106 @@ function EPGViewComponent({
 }: EPGViewProps) {
   const t = usePlayerTranslation(locale);
   const currentProgramRef = useRef<HTMLButtonElement>(null);
-  const [currentTime, setCurrentTime] = useState(() => new Date());
-  const deferredCurrentTime = useDeferredValue(currentTime);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const [currentTimeMs, setCurrentTimeMs] = useState(() => Date.now());
 
+  // Program boundaries fall on whole minutes, so ticking at minute boundaries gives the
+  // same on-air / past flags as a 1 s interval at a sixtieth of the re-renders.
   useEffect(() => {
-    const interval = window.setInterval(() => {
-      setCurrentTime(new Date());
-    }, 1000);
-    return () => window.clearInterval(interval);
-  }, []);
+    const tick = () => startTransition(() => setCurrentTimeMs(Date.now()));
+    tick();
 
-  // Group programs by date
-  const programsByDate = useMemo(() => {
-    if (!channelId) return new Map<string, EPGProgram[]>();
-
-    const programs = epgData[channelId];
-    if (!programs || programs.length === 0) return new Map<string, EPGProgram[]>();
-
-    // Group all available programs by date (no date range filtering)
-    const grouped = new Map<string, EPGProgram[]>();
-    programs.forEach((program) => {
-      const dateKey = new Date(
-        program.start.getFullYear(),
-        program.start.getMonth(),
-        program.start.getDate(),
-      ).toISOString();
-      const existing = grouped.get(dateKey) || [];
-      existing.push(program);
-      grouped.set(dateKey, existing);
-    });
+    let intervalId = 0;
+    const timeoutId = window.setTimeout(
+      () => {
+        tick();
+        intervalId = window.setInterval(tick, 60_000);
+      },
+      60_000 - (Date.now() % 60_000),
+    );
 
-    return grouped;
-  }, [channelId, epgData]);
+    return () => {
+      window.clearTimeout(timeoutId);
+      if (intervalId) window.clearInterval(intervalId);
+    };
+  }, []);
 
   const channelPrograms = useMemo(() => {
     if (!channelId) return [];
-    const programs = epgData[channelId];
-    if (!programs || programs.length === 0) return [];
-    // Return all available programs (no date range filtering)
-    return programs;
+    return epgData[channelId] ?? [];
   }, [channelId, epgData]);
 
+  // Group programs by day and precompute the per-row display strings once, so rows are
+  // cheap to render and their memo props stay primitive.
+  const sections = useMemo<EPGDateSectionData[]>(() => {
+    const result: EPGDateSectionData[] = [];
+    let current: EPGDateSectionData | null = null;
+    for (const program of channelPrograms) {
+      const start = program.start;
+      const dayStart = new Date(start.getFullYear(), start.getMonth(), start.getDate());
+      const dateKey = String(dayStart.getTime());
+      if (!current || current.dateKey !== dateKey) {
+        current = { dateKey, date: dayStart, rows: [] };
+        result.push(current);
+      }
+      current.rows.push({
+        program,
+        startLabel: formatProgramTime(start),
+        durationMinutes: Math.round((program.end.getTime() - start.getTime()) / 60000),
+      });
+    }
+    return result;
+  }, [channelPrograms]);
+
+  const currentPlayingProgramId = currentPlayingProgram?.id;
+  const playingSectionKey = useMemo(() => {
+    if (!currentPlayingProgramId) return null;
+    return (
+      sections.find((section) => section.rows.some((row) => row.program.id === currentPlayingProgramId))?.dateKey ??
+      null
+    );
+  }, [sections, currentPlayingProgramId]);
+
+  // Shared IntersectionObserver that hydrates sections as they approach the viewport.
+  const sectionHandlersRef = useRef(new Map<HTMLElement, SectionVisibilityHandler>());
+  const observerRef = useRef<IntersectionObserver | null>(null);
+
+  const registerSection = useCallback((element: HTMLElement, onVisible: SectionVisibilityHandler) => {
+    sectionHandlersRef.current.set(element, onVisible);
+    observerRef.current?.observe(element);
+  }, []);
+
+  const unregisterSection = useCallback((element: HTMLElement) => {
+    sectionHandlersRef.current.delete(element);
+    observerRef.current?.unobserve(element);
+  }, []);
+
+  const hasPrograms = channelPrograms.length > 0;
+  useEffect(() => {
+    if (!hasPrograms) return;
+    const handlers = sectionHandlersRef.current;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (!entry.isIntersecting) continue;
+          const element = entry.target as HTMLElement;
+          const onVisible = handlers.get(element);
+          if (!onVisible) continue;
+          handlers.delete(element);
+          observer.unobserve(element);
+          onVisible();
+        }
+      },
+      { root: scrollContainerRef.current, rootMargin: SECTION_HYDRATION_MARGIN },
+    );
+    for (const element of handlers.keys()) observer.observe(element);
+    observerRef.current = observer;
+    return () => {
+      observer.disconnect();
+      observerRef.current = null;
+    };
+  }, [hasPrograms]);
+
   // Auto-scroll to center current/playing program when it changes or channel changes
   useLayoutEffect(() => {
     window.setTimeout(() => {
@@ -286,7 +414,7 @@ function EPGViewComponent({
     [onProgramSelect],
   );
 
-  if (!channelId || channelPrograms.length === 0) {
+  if (!channelId || !hasPrograms) {
     return (
       <div className="flex h-full items-center justify-center bg-transparent px-6 text-center text-slate-500 text-sm leading-6 dark:text-slate-400">
         {t("noEpgAvailable")}
@@ -295,17 +423,24 @@ function EPGViewComponent({
   }
 
   return (
-    <div className="h-full overflow-y-auto pb-[env(safe-area-inset-bottom)]">
-      <div className="relative">
-        <EPGProgramList
-          currentPlayingProgram={currentPlayingProgram}
-          currentProgramRef={currentProgramRef}
-          currentTime={deferredCurrentTime}
-          handleProgramClick={handleProgramClick}
-          locale={locale}
-          programsByDate={programsByDate}
-          supportsCatchup={supportsCatchup}
-        />
+    <div ref={scrollContainerRef} className="h-full overflow-y-auto pb-[env(safe-area-inset-bottom)]">
+      {/* --epg-item-h mirrors the intrinsic block size in PLAYER_EPG_LIST_ITEM_CLASS for placeholder sizing. */}
+      <div key={channelId} className="relative [--epg-item-h:3rem] md:[--epg-item-h:3.75rem]">
+        {sections.map((section) => (
+          <EPGDateSection
+            key={section.dateKey}
+            currentPlayingProgramId={currentPlayingProgramId}
+            currentProgramRef={currentProgramRef}
+            currentTimeMs={currentTimeMs}
+            forceRender={section.dateKey === playingSectionKey}
+            handleProgramClick={handleProgramClick}
+            locale={locale}
+            registerSection={registerSection}
+            section={section}
+            supportsCatchup={supportsCatchup}
+            unregisterSection={unregisterSection}
+          />
+        ))}
       </div>
     </div>
   );

From d22d94f753e402186c4ebd7a400a83663b2555f3 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Wed, 2 Sep 2026 02:38:30 +0000
Subject: [PATCH 02/10] perf(web-ui): memoize VideoPlayer and dedupe EPG
 channel lookup

All VideoPlayer props are primitives or stable callbacks and the 1 Hz
playback clock flows through PlaybackTimeContext, so memo() lets it skip
re-rendering on unrelated PlayerPage updates. The EPG channel id for the
current channel is now computed once and shared by the programme lookup
and the EPG view.

Co-authored-by: Stackie Jia <jsq2627@gmail.com>
---
 web-ui/src/components/player/video-player.tsx |  5 ++++-
 web-ui/src/pages/player.tsx                   | 19 ++++++++++---------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/web-ui/src/components/player/video-player.tsx b/web-ui/src/components/player/video-player.tsx
index 99bb8055..7ee32d63 100644
--- a/web-ui/src/components/player/video-player.tsx
+++ b/web-ui/src/components/player/video-player.tsx
@@ -1,6 +1,7 @@
 import { clsx } from "clsx";
 import { CircleAlert, Play, X } from "lucide-react";
 import {
+  memo,
   type MouseEvent as ReactMouseEvent,
   type PointerEvent as ReactPointerEvent,
   useCallback,
@@ -2066,4 +2067,6 @@ function VideoPlayerComponent({
   );
 }
 
-export { VideoPlayerComponent as VideoPlayer };
+// Every prop is a primitive or a stable callback and the 1 Hz playback clock arrives through
+// PlaybackTimeContext, so memoizing skips the (large) re-render on unrelated PlayerPage updates.
+export const VideoPlayer = memo(VideoPlayerComponent);
diff --git a/web-ui/src/pages/player.tsx b/web-ui/src/pages/player.tsx
index ad4e4aef..0b122862 100644
--- a/web-ui/src/pages/player.tsx
+++ b/web-ui/src/pages/player.tsx
@@ -457,20 +457,21 @@ function PlayerPage() {
     loadPlaylist();
   }, [loadPlaylist]);
 
+  // EPG channel ID for the current channel using fallback logic (tvgId -> tvgName -> name)
+  const currentEpgChannelId = useMemo(
+    () => (currentChannel ? getEPGChannelId(currentChannel, epgData) : null),
+    [currentChannel, epgData],
+  );
+
   // Get current program for the video player
-  // Use tvgId / tvgName / name with fallback logic for EPG matching
   // Use streamStartTime + currentVideoTime to determine the actual time position
   const currentVideoProgram = useMemo(() => {
-    if (!currentChannel) return null;
-
-    // Get EPG channel ID using fallback logic (tvgId -> tvgName -> name)
-    const epgChannelId = getEPGChannelId(currentChannel, epgData);
-    if (!epgChannelId) return null;
+    if (!currentEpgChannelId) return null;
 
     // Calculate absolute time based on stream start + current video position
     const absoluteTime = mseToWallClock(deferredCurrentVideoTime, streamStartTime);
-    return getCurrentProgram(epgChannelId, epgData, absoluteTime);
-  }, [currentChannel, epgData, streamStartTime, deferredCurrentVideoTime]);
+    return getCurrentProgram(currentEpgChannelId, epgData, absoluteTime);
+  }, [currentEpgChannelId, epgData, streamStartTime, deferredCurrentVideoTime]);
 
   const handleVideoError = useCallback((err: string) => {
     setError(err);
@@ -681,7 +682,7 @@ function PlayerPage() {
               </Activity>
               <Activity mode={renderedSidebarView === "epg" ? "visible" : "hidden"}>
                 <EPGView
-                  channelId={currentChannel ? getEPGChannelId(currentChannel, epgData) : null}
+                  channelId={currentEpgChannelId}
                   epgData={epgData}
                   onProgramSelect={handleProgramSelect}
                   locale={locale}

From e31747f4ce162363ce2e2cb6624e7c3740360d96 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Wed, 2 Sep 2026 02:38:30 +0000
Subject: [PATCH 03/10] perf(web-ui): run EPG gap-fill once in the worker

fillEPGGaps used to run twice on the main thread (an empty-EPG placeholder
at startup and again on the full EPG when the worker finished, the latter
costing 200-300 ms for catchup playlists). The worker now receives channel
descriptors, derives the valid id set, parses and gap-fills, and posts the
final data; the main thread shows no EPG until it arrives. When there is
no x-tvg-url or the fetch fails the worker still returns fallback-only
data so catchup channels stay seekable. generateFallbackPrograms replaces
the per-slot .some() scan with two cursors over the start-sorted list and
a linear merge, taking the all-catchup case from ~300 ms to ~11 ms.

Co-authored-by: Stackie Jia <jsq2627@gmail.com>
---
 web-ui/src/lib/epg-loader.ts | 20 ++++++----
 web-ui/src/lib/epg-parser.ts | 72 ++++++++++++++++++++++++++----------
 web-ui/src/lib/epg-worker.ts | 41 ++++++++++++++------
 web-ui/src/pages/player.tsx  | 41 +++++++++-----------
 4 files changed, 111 insertions(+), 63 deletions(-)

diff --git a/web-ui/src/lib/epg-loader.ts b/web-ui/src/lib/epg-loader.ts
index 73866b73..0efc28aa 100644
--- a/web-ui/src/lib/epg-loader.ts
+++ b/web-ui/src/lib/epg-loader.ts
@@ -1,21 +1,22 @@
-import type { EPGData } from "./epg-parser";
+import type { EPGChannelDescriptor, EPGData } from "./epg-parser";
 import EPGWorker from "./epg-worker.ts?worker&inline";
 
 interface EPGWorkerRequest {
-  url: string;
-  validChannelIds?: string[];
+  url?: string;
+  channels: EPGChannelDescriptor[];
 }
 
-type EPGWorkerResponse = { type: "success"; epg: EPGData } | { type: "error"; message: string };
+type EPGWorkerResponse = { type: "success"; epg: EPGData; fetchError?: string } | { type: "error"; message: string };
 
 let inFlight: Promise<EPGData> | null = null;
 
 /**
- * Fetch and parse an XMLTV EPG in a Web Worker so the main thread stays responsive.
+ * Fetch, parse and gap-fill an XMLTV EPG in a Web Worker so the main thread stays responsive.
+ * When `url` is undefined the worker only produces gap-fill fallback programs for catchup channels.
  * The player loads EPG once; overlapping calls share the same in-flight job
  * (React StrictMode remount) instead of starting a second parse.
  */
-export function loadEPG(url: string, validChannelIds?: Set<string>): Promise<EPGData> {
+export function loadEPG(url: string | undefined, channels: EPGChannelDescriptor[]): Promise<EPGData> {
   if (inFlight) {
     return inFlight;
   }
@@ -29,6 +30,9 @@ export function loadEPG(url: string, validChannelIds?: Set<string>): Promise<EPG
     worker.onmessage = (event: MessageEvent<EPGWorkerResponse>) => {
       finish();
       if (event.data.type === "success") {
+        if (event.data.fetchError) {
+          console.error("Failed to load EPG:", event.data.fetchError);
+        }
         resolve(event.data.epg);
         return;
       }
@@ -42,8 +46,8 @@ export function loadEPG(url: string, validChannelIds?: Set<string>): Promise<EPG
 
     const request: EPGWorkerRequest = {
       // Inline blob workers resolve relative URLs against `blob:`, so make this absolute first.
-      url: new URL(url, document.baseURI).href,
-      validChannelIds: validChannelIds ? Array.from(validChannelIds) : undefined,
+      url: url ? new URL(url, document.baseURI).href : undefined,
+      channels,
     };
     worker.postMessage(request);
   });
diff --git a/web-ui/src/lib/epg-parser.ts b/web-ui/src/lib/epg-parser.ts
index d28d0334..0266199d 100644
--- a/web-ui/src/lib/epg-parser.ts
+++ b/web-ui/src/lib/epg-parser.ts
@@ -283,16 +283,37 @@ export function generateFallbackPrograms(
   const roundedHours = Math.floor(hoursSinceEpoch / 2) * 2;
   currentStart = new Date(roundedHours * 60 * 60 * 1000);
 
+  // Programs are sorted by start, and slots advance monotonically, so two cursors bound the
+  // candidates: `hi` grows past programs that start no later than the slot end, `lo` skips
+  // programs that lie entirely before the slot start (they cannot touch any later slot either).
+  // Each slot then only inspects the handful of programs in [lo, hi). Programs whose end
+  // precedes their start are malformed and never counted as overlapping.
+  let lo = 0;
+  let hi = 0;
+
   while (currentStart < now) {
     const currentEnd = new Date(currentStart.getTime() + TWO_HOURS_MS);
 
+    while (hi < existingPrograms.length && existingPrograms[hi].start <= currentEnd) {
+      hi++;
+    }
+    while (lo < hi && existingPrograms[lo].end < currentStart && existingPrograms[lo].start < currentStart) {
+      lo++;
+    }
+
     // Check if this time slot overlaps with any existing program
-    const hasOverlap = existingPrograms.some(
-      (p) =>
+    let hasOverlap = false;
+    for (let i = lo; i < hi; i++) {
+      const p = existingPrograms[i];
+      if (
         (p.start <= currentStart && p.end > currentStart) ||
         (p.start < currentEnd && p.end >= currentEnd) ||
-        (p.start >= currentStart && p.end <= currentEnd),
-    );
+        (p.start >= currentStart && p.end <= currentEnd)
+      ) {
+        hasOverlap = true;
+        break;
+      }
+    }
 
     if (!hasOverlap) {
       fallbackPrograms.push({
@@ -308,29 +329,42 @@ export function generateFallbackPrograms(
   return fallbackPrograms;
 }
 
+/** Merge two start-sorted program lists; on equal starts, entries from `a` come first. */
+function mergeSortedPrograms(a: EPGProgram[], b: EPGProgram[]): EPGProgram[] {
+  const merged: EPGProgram[] = new Array(a.length + b.length);
+  let i = 0;
+  let j = 0;
+  let k = 0;
+  while (i < a.length && j < b.length) {
+    merged[k++] = a[i].start.getTime() <= b[j].start.getTime() ? a[i++] : b[j++];
+  }
+  while (i < a.length) merged[k++] = a[i++];
+  while (j < b.length) merged[k++] = b[j++];
+  return merged;
+}
+
+/** Minimal channel shape needed to fill EPG gaps; safe to post to a Web Worker. */
+export interface EPGChannelDescriptor {
+  tvgId?: string;
+  tvgName?: string;
+  name: string;
+  hasCatchup: boolean;
+}
+
 /**
  * Fill gaps in EPG data with fallback programs
  * Only processes channels that have catchup support
  * @param epgData - Existing EPG data
- * @param channels - List of channels from M3U playlist
+ * @param channels - Channel descriptors derived from the M3U playlist
  * @param lookbackHours - How many hours back from now to generate fallback programs (default: 48)
  * @returns EPG data with gaps filled
  */
-export function fillEPGGaps(
-  epgData: EPGData,
-  channels: {
-    tvgId?: string;
-    tvgName?: string;
-    name: string;
-    sources?: { catchup?: string; catchupSource?: string }[];
-  }[],
-  lookbackHours: number = 72,
-): EPGData {
+export function fillEPGGaps(epgData: EPGData, channels: EPGChannelDescriptor[], lookbackHours: number = 72): EPGData {
   const filledData = { ...epgData };
 
   for (const channel of channels) {
     // Only process channels with catchup support
-    if (!channel.sources?.some((s) => s.catchup && s.catchupSource)) {
+    if (!channel.hasCatchup) {
       continue;
     }
 
@@ -355,10 +389,8 @@ export function fillEPGGaps(
     const fallbackPrograms = generateFallbackPrograms(existingPrograms, targetChannelId, lookbackHours);
 
     if (fallbackPrograms.length > 0) {
-      // Merge existing and fallback programs, then sort by start time
-      const mergedPrograms = [...existingPrograms, ...fallbackPrograms].sort(
-        (a, b) => a.start.getTime() - b.start.getTime(),
-      );
+      // Both lists are sorted by start time, so a linear merge keeps the result sorted
+      const mergedPrograms = mergeSortedPrograms(existingPrograms, fallbackPrograms);
 
       // Ensure all possible channel ID keys point to the same array
       filledData[targetChannelId] = mergedPrograms;
diff --git a/web-ui/src/lib/epg-worker.ts b/web-ui/src/lib/epg-worker.ts
index ca0805b3..b8ee3f59 100644
--- a/web-ui/src/lib/epg-worker.ts
+++ b/web-ui/src/lib/epg-worker.ts
@@ -1,26 +1,45 @@
-import { parseEPG } from "./epg-parser";
+import { type EPGChannelDescriptor, type EPGData, fillEPGGaps, parseEPG } from "./epg-parser";
 
 interface EPGWorkerRequest {
-  url: string;
-  validChannelIds?: string[];
+  /** XMLTV URL; omitted when the playlist has no x-tvg-url, in which case only gap-fill runs. */
+  url?: string;
+  channels: EPGChannelDescriptor[];
 }
 
-type EPGWorkerResponse = { type: "success"; epg: ReturnType<typeof parseEPG> } | { type: "error"; message: string };
+type EPGWorkerResponse = { type: "success"; epg: EPGData; fetchError?: string } | { type: "error"; message: string };
 
 function post(message: EPGWorkerResponse): void {
   (self as unknown as { postMessage(msg: unknown): void }).postMessage(message);
 }
 
 self.addEventListener("message", async (event: MessageEvent<EPGWorkerRequest>) => {
-  const { url, validChannelIds } = event.data;
+  const { url, channels } = event.data;
   try {
-    const response = await fetch(url);
-    if (!response.ok) {
-      throw new Error(`Failed to fetch EPG: ${response.statusText}`);
+    let epg: EPGData = {};
+    let fetchError: string | undefined;
+
+    if (url) {
+      try {
+        const response = await fetch(url);
+        if (!response.ok) {
+          throw new Error(`Failed to fetch EPG: ${response.statusText}`);
+        }
+        const xmlText = await response.text();
+        const validChannelIds = new Set<string>();
+        for (const channel of channels) {
+          if (channel.tvgId) validChannelIds.add(channel.tvgId);
+          if (channel.tvgName) validChannelIds.add(channel.tvgName);
+          validChannelIds.add(channel.name);
+        }
+        epg = parseEPG(xmlText, validChannelIds);
+      } catch (error) {
+        // Still deliver gap-filled fallback programs so catchup channels stay seekable.
+        fetchError = error instanceof Error ? error.message : "Failed to load EPG";
+      }
     }
-    const xmlText = await response.text();
-    const epg = parseEPG(xmlText, validChannelIds ? new Set(validChannelIds) : undefined);
-    post({ type: "success", epg });
+
+    // Gap filling runs exactly once, here, so the main thread receives final data.
+    post({ type: "success", epg: fillEPGGaps(epg, channels), fetchError });
   } catch (error) {
     post({
       type: "error",
diff --git a/web-ui/src/pages/player.tsx b/web-ui/src/pages/player.tsx
index 0b122862..fe2bc49c 100644
--- a/web-ui/src/pages/player.tsx
+++ b/web-ui/src/pages/player.tsx
@@ -29,7 +29,7 @@ import { usePlayerTranslation } from "../hooks/use-player-translation";
 import { useTheme } from "../hooks/use-theme";
 import { isDocumentPictureInPictureSupported } from "../lib/document-picture-in-picture";
 import { loadEPG } from "../lib/epg-loader";
-import { type EPGData, fillEPGGaps, getCurrentProgram, getEPGChannelId } from "../lib/epg-parser";
+import { type EPGChannelDescriptor, type EPGData, getCurrentProgram, getEPGChannelId } from "../lib/epg-parser";
 import type { Locale } from "../lib/locale";
 import { buildCatchupSegments, clampCatchupStartTime, parseM3U } from "../lib/m3u-parser";
 import { isLGWebOS } from "../lib/platform";
@@ -416,30 +416,23 @@ function PlayerPage() {
         deepLinkChannel ?? parsed.channels.find((channel) => channel.id === lastChannelId) ?? parsed.channels[0];
       selectChannel(channelToSelect);
 
-      // Show empty-EPG fallback immediately so startup is not blocked by XMLTV parsing.
-      // Catchup-capable channels get 2-hour "精彩节目" gap-fill programs until real data arrives.
-      setEpgData(fillEPGGaps({}, parsed.channels));
-
-      if (parsed.tvgUrl) {
-        const validChannelIds = new Set<string>();
-        for (const channel of parsed.channels) {
-          if (channel.tvgId) validChannelIds.add(channel.tvgId);
-          if (channel.tvgName) validChannelIds.add(channel.tvgName);
-          validChannelIds.add(channel.name);
-        }
-
-        const epgUrl = parsed.tvgUrl.replace(".gz", "");
-        const channels = parsed.channels;
-        void loadEPG(epgUrl, validChannelIds)
-          .then((epg) => {
-            startTransition(() => {
-              setEpgData(fillEPGGaps(epg, channels));
-            });
-          })
-          .catch((err) => {
-            console.error("Failed to load EPG:", err);
+      // The EPG (including gap-fill fallback programs) is produced entirely in the worker;
+      // until it arrives the UI simply shows no EPG.
+      const epgChannels: EPGChannelDescriptor[] = parsed.channels.map((channel) => ({
+        tvgId: channel.tvgId,
+        tvgName: channel.tvgName,
+        name: channel.name,
+        hasCatchup: channel.sources.some((s) => s.catchup && s.catchupSource),
+      }));
+      void loadEPG(parsed.tvgUrl?.replace(".gz", ""), epgChannels)
+        .then((epg) => {
+          startTransition(() => {
+            setEpgData(epg);
           });
-      }
+        })
+        .catch((err) => {
+          console.error("Failed to load EPG:", err);
+        });
 
       // Trigger reveal animation
       setIsRevealing(true);

From 503c61d8d115cb22c4c29695cc03f0b4657f488d Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Wed, 2 Sep 2026 02:44:14 +0000
Subject: [PATCH 04/10] perf(web-ui): keep the 1 Hz playback clock out of
 PlayerPage state

PlayerPage used to setState (plus a deferred re-render) every second from
the player's time updates, re-rendering the whole page and everything not
memoized beneath it, and interrupting in-flight transitions such as the
EPG arrival render. The clock now lives in a small external store behind
PlaybackTimeProvider, consumed via useSyncExternalStore only by the
timeline and time readout. The current programme is still derived in
render, but its time input is only bumped when the clock actually crosses
a programme boundary (or the lookup inputs change), so the page re-renders
on programme changes, channel switches, seeks and EPG arrival instead of
every second. Seek/reset paths still zero the clock as before.

Co-authored-by: Stackie Jia <jsq2627@gmail.com>
---
 .../player/playback-time-context.tsx          |  48 ++++++--
 web-ui/src/pages/player.tsx                   | 115 +++++++++++-------
 2 files changed, 115 insertions(+), 48 deletions(-)

diff --git a/web-ui/src/components/player/playback-time-context.tsx b/web-ui/src/components/player/playback-time-context.tsx
index ec4a4799..2ff29c59 100644
--- a/web-ui/src/components/player/playback-time-context.tsx
+++ b/web-ui/src/components/player/playback-time-context.tsx
@@ -1,16 +1,50 @@
-import { createContext, type ReactNode, useContext } from "react";
+import { createContext, type ReactNode, useContext, useSyncExternalStore } from "react";
 
-const PlaybackTimeContext = createContext(0);
+/**
+ * Tiny external store for the playback clock (seconds relative to stream start).
+ * Keeping the 1 Hz clock out of React state means only the components that
+ * actually display it (timeline, time readout) re-render on each tick.
+ */
+export interface PlaybackTimeStore {
+  get: () => number;
+  set: (time: number) => void;
+  subscribe: (listener: () => void) => () => void;
+}
+
+export function createPlaybackTimeStore(): PlaybackTimeStore {
+  let time = 0;
+  const listeners = new Set<() => void>();
+  return {
+    get: () => time,
+    set: (next) => {
+      if (next === time) return;
+      time = next;
+      for (const listener of listeners) listener();
+    },
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+  };
+}
+
+const noopSubscribe = () => () => {};
+const zero = () => 0;
+
+const PlaybackTimeContext = createContext<PlaybackTimeStore | null>(null);
 
 interface PlaybackTimeProviderProps {
   children: ReactNode;
-  value: number;
+  store: PlaybackTimeStore;
 }
 
-export function PlaybackTimeProvider({ children, value }: PlaybackTimeProviderProps) {
-  return <PlaybackTimeContext value={value}>{children}</PlaybackTimeContext>;
+export function PlaybackTimeProvider({ children, store }: PlaybackTimeProviderProps) {
+  return <PlaybackTimeContext value={store}>{children}</PlaybackTimeContext>;
 }
 
-export function usePlaybackTime() {
-  return useContext(PlaybackTimeContext);
+export function usePlaybackTime(): number {
+  const store = useContext(PlaybackTimeContext);
+  return useSyncExternalStore(store?.subscribe ?? noopSubscribe, store?.get ?? zero, store?.get ?? zero);
 }
diff --git a/web-ui/src/pages/player.tsx b/web-ui/src/pages/player.tsx
index fe2bc49c..b2bdc986 100644
--- a/web-ui/src/pages/player.tsx
+++ b/web-ui/src/pages/player.tsx
@@ -1,23 +1,13 @@
 import { clsx } from "clsx";
 import { AlertTriangle, ExternalLink, ListChecks, RefreshCw } from "lucide-react";
-import {
-  Activity,
-  StrictMode,
-  startTransition,
-  useCallback,
-  useDeferredValue,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { Activity, StrictMode, startTransition, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createRoot } from "react-dom/client";
 import {
   ChannelList,
   nextScrollBehaviorRef as channelListNextScrollBehaviorRef,
 } from "../components/player/channel-list";
 import { EPGView, nextScrollBehaviorRef as epgViewNextScrollBehaviorRef } from "../components/player/epg-view";
-import { PlaybackTimeProvider } from "../components/player/playback-time-context";
+import { createPlaybackTimeStore, PlaybackTimeProvider } from "../components/player/playback-time-context";
 import { SettingsDropdown } from "../components/player/settings-dropdown";
 import { VideoPlayer } from "../components/player/video-player";
 import { Button, buttonVariants } from "../components/ui/button";
@@ -140,11 +130,15 @@ function PlayerPage() {
   /** Whether the latest seek targets the session live edge (vs catchup). */
   const [seekAtLiveEdge, setSeekAtLiveEdge] = useState(true);
 
-  // Track current video playback time in seconds (relative to stream start)
-  const [currentVideoTime, setCurrentVideoTime] = useState(0);
-  const deferredCurrentVideoTime = useDeferredValue(currentVideoTime);
+  // Current video playback time in seconds (relative to stream start). The 1 Hz clock lives in
+  // an external store consumed only by the timeline widgets, so it never re-renders the page.
+  const [playbackTimeStore] = useState(createPlaybackTimeStore);
   const currentVideoTimeRef = useRef(0);
   const currentVideoSecondRef = useRef(0);
+  // Playback time at which the programme lookup below was last (re)evaluated. It is only
+  // bumped when the clock crosses into a different programme, so the page re-renders on
+  // programme boundaries rather than every second.
+  const [programLookupTime, setProgramLookupTime] = useState(0);
 
   // Track active source index for multi-source channels
   const [activeSourceIndex, setActiveSourceIndex] = useState(0);
@@ -231,8 +225,9 @@ function PlayerPage() {
   const resetCurrentVideoTime = useCallback(() => {
     currentVideoTimeRef.current = 0;
     currentVideoSecondRef.current = 0;
-    setCurrentVideoTime(0);
-  }, []);
+    playbackTimeStore.set(0);
+    setProgramLookupTime(0);
+  }, [playbackTimeStore]);
 
   const handleVideoSeek = useCallback(
     (seekTime: Date, goingLive: boolean) => {
@@ -316,13 +311,67 @@ function PlayerPage() {
     return () => window.removeEventListener("hashchange", onHashChange);
   }, [metadata, currentChannel, selectChannel]);
 
-  const handleCurrentVideoTimeChange = useCallback((time: number) => {
-    currentVideoTimeRef.current = time;
-    const currentSecond = Math.floor(time);
-    if (currentSecond === currentVideoSecondRef.current) return;
-    currentVideoSecondRef.current = currentSecond;
-    setCurrentVideoTime(time);
-  }, []);
+  // EPG channel ID for the current channel using fallback logic (tvgId -> tvgName -> name)
+  const currentEpgChannelId = useMemo(
+    () => (currentChannel ? getEPGChannelId(currentChannel, epgData) : null),
+    [currentChannel, epgData],
+  );
+
+  // Get current program for the video player
+  // Use streamStartTime + playback time to determine the actual time position
+  const currentVideoProgram = useMemo(() => {
+    if (!currentEpgChannelId) return null;
+
+    // Calculate absolute time based on stream start + current video position
+    const absoluteTime = mseToWallClock(programLookupTime, streamStartTime);
+    return getCurrentProgram(currentEpgChannelId, epgData, absoluteTime);
+  }, [currentEpgChannelId, epgData, streamStartTime, programLookupTime]);
+
+  // Latest committed inputs of the programme lookup, for the clock callback below.
+  const programLookupRef = useRef({
+    epgChannelId: currentEpgChannelId,
+    epgData,
+    streamStartTime,
+    program: currentVideoProgram,
+  });
+  useEffect(() => {
+    programLookupRef.current = {
+      epgChannelId: currentEpgChannelId,
+      epgData,
+      streamStartTime,
+      program: currentVideoProgram,
+    };
+    // programLookupTime may be stale relative to the live clock (e.g. after a live-edge
+    // recalibration moved streamStartTime); re-evaluate against the actual position now
+    // instead of waiting for the next programme boundary.
+    const time = currentVideoTimeRef.current;
+    const actualProgram = currentEpgChannelId
+      ? getCurrentProgram(currentEpgChannelId, epgData, mseToWallClock(time, streamStartTime))
+      : null;
+    if (actualProgram !== currentVideoProgram) {
+      setProgramLookupTime(time);
+    }
+  }, [currentEpgChannelId, epgData, streamStartTime, currentVideoProgram]);
+
+  const handleCurrentVideoTimeChange = useCallback(
+    (time: number) => {
+      currentVideoTimeRef.current = time;
+      const currentSecond = Math.floor(time);
+      if (currentSecond === currentVideoSecondRef.current) return;
+      currentVideoSecondRef.current = currentSecond;
+      playbackTimeStore.set(time);
+
+      // Only re-render the page when the clock has moved into a different programme.
+      const lookup = programLookupRef.current;
+      const nextProgram = lookup.epgChannelId
+        ? getCurrentProgram(lookup.epgChannelId, lookup.epgData, mseToWallClock(time, lookup.streamStartTime))
+        : null;
+      if (nextProgram !== lookup.program) {
+        setProgramLookupTime(time);
+      }
+    },
+    [playbackTimeStore],
+  );
 
   const handleLocaleChange = useCallback(
     (nextLocale: Locale) => {
@@ -450,22 +499,6 @@ function PlayerPage() {
     loadPlaylist();
   }, [loadPlaylist]);
 
-  // EPG channel ID for the current channel using fallback logic (tvgId -> tvgName -> name)
-  const currentEpgChannelId = useMemo(
-    () => (currentChannel ? getEPGChannelId(currentChannel, epgData) : null),
-    [currentChannel, epgData],
-  );
-
-  // Get current program for the video player
-  // Use streamStartTime + currentVideoTime to determine the actual time position
-  const currentVideoProgram = useMemo(() => {
-    if (!currentEpgChannelId) return null;
-
-    // Calculate absolute time based on stream start + current video position
-    const absoluteTime = mseToWallClock(deferredCurrentVideoTime, streamStartTime);
-    return getCurrentProgram(currentEpgChannelId, epgData, absoluteTime);
-  }, [currentEpgChannelId, epgData, streamStartTime, deferredCurrentVideoTime]);
-
   const handleVideoError = useCallback((err: string) => {
     setError(err);
   }, []);
@@ -603,7 +636,7 @@ function PlayerPage() {
         <div className="flex flex-col md:flex-row flex-1 overflow-hidden">
           {/* Video Player - Mobile: fixed aspect ratio at top, Desktop: fills left side */}
           <div className="w-full sticky md:static md:flex-1 shrink-0">
-            <PlaybackTimeProvider value={currentVideoTime}>
+            <PlaybackTimeProvider store={playbackTimeStore}>
               <VideoPlayer
                 channel={currentChannel}
                 segments={playbackSegments}

From c82786ae9be162fcd5486edfc7ec4ed8d30b06e2 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Wed, 2 Sep 2026 03:40:27 +0000
Subject: [PATCH 05/10] fix(web-ui): hydrate EPG sections against the viewport
 and keep them hydrated

Observing against the scroll container depended on when its ref was
attached relative to the observer effect; observe the viewport instead
(the list fills the sidebar height, so the result is identical). Also
eagerly render the sections adjacent to the playing programme so the
auto-scrolled viewport is full on reveal, and latch hydration so a
section never falls back to a placeholder once it has been rendered.

Co-authored-by: Stackie Jia <jsq2627@gmail.com>
---
 web-ui/src/components/player/epg-view.tsx | 34 ++++++++++++++---------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/web-ui/src/components/player/epg-view.tsx b/web-ui/src/components/player/epg-view.tsx
index 263b49ea..c5d95806 100644
--- a/web-ui/src/components/player/epg-view.tsx
+++ b/web-ui/src/components/player/epg-view.tsx
@@ -223,6 +223,8 @@ const EPGDateSection = memo(function EPGDateSection({
 }: EPGDateSectionProps) {
   const t = usePlayerTranslation(locale);
   const [hydrated, setHydrated] = useState(forceRender);
+  // Latch: a section that was rendered eagerly stays rendered when the eager set moves on.
+  if (forceRender && !hydrated) setHydrated(true);
   const rendered = hydrated || forceRender;
 
   const placeholderRef = useCallback(
@@ -286,7 +288,6 @@ function EPGViewComponent({
 }: EPGViewProps) {
   const t = usePlayerTranslation(locale);
   const currentProgramRef = useRef<HTMLButtonElement>(null);
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
   const [currentTimeMs, setCurrentTimeMs] = useState(() => Date.now());
 
   // Program boundaries fall on whole minutes, so ticking at minute boundaries gives the
@@ -338,15 +339,22 @@ function EPGViewComponent({
   }, [channelPrograms]);
 
   const currentPlayingProgramId = currentPlayingProgram?.id;
-  const playingSectionKey = useMemo(() => {
-    if (!currentPlayingProgramId) return null;
-    return (
-      sections.find((section) => section.rows.some((row) => row.program.id === currentPlayingProgramId))?.dateKey ??
-      null
+  // The section holding the playing programme plus its neighbours render eagerly: the list
+  // auto-scrolls to that row, so this is exactly what fills the viewport on reveal.
+  const eagerSectionKeys = useMemo(() => {
+    const keys = new Set<string>();
+    if (!currentPlayingProgramId) return keys;
+    const index = sections.findIndex((section) =>
+      section.rows.some((row) => row.program.id === currentPlayingProgramId),
     );
+    if (index < 0) return keys;
+    for (const section of sections.slice(Math.max(index - 1, 0), index + 2)) keys.add(section.dateKey);
+    return keys;
   }, [sections, currentPlayingProgramId]);
 
-  // Shared IntersectionObserver that hydrates sections as they approach the viewport.
+  // Shared IntersectionObserver that hydrates sections as they approach the viewport. It observes
+  // against the viewport rather than the scroll container: the list fills the sidebar height, so
+  // the result is the same, and it avoids depending on when the container ref is attached.
   const sectionHandlersRef = useRef(new Map<HTMLElement, SectionVisibilityHandler>());
   const observerRef = useRef<IntersectionObserver | null>(null);
 
@@ -360,9 +368,7 @@ function EPGViewComponent({
     observerRef.current?.unobserve(element);
   }, []);
 
-  const hasPrograms = channelPrograms.length > 0;
   useEffect(() => {
-    if (!hasPrograms) return;
     const handlers = sectionHandlersRef.current;
     const observer = new IntersectionObserver(
       (entries) => {
@@ -376,7 +382,7 @@ function EPGViewComponent({
           onVisible();
         }
       },
-      { root: scrollContainerRef.current, rootMargin: SECTION_HYDRATION_MARGIN },
+      { rootMargin: SECTION_HYDRATION_MARGIN },
     );
     for (const element of handlers.keys()) observer.observe(element);
     observerRef.current = observer;
@@ -384,7 +390,9 @@ function EPGViewComponent({
       observer.disconnect();
       observerRef.current = null;
     };
-  }, [hasPrograms]);
+  }, []);
+
+  const hasPrograms = channelPrograms.length > 0;
 
   // Auto-scroll to center current/playing program when it changes or channel changes
   useLayoutEffect(() => {
@@ -423,7 +431,7 @@ function EPGViewComponent({
   }
 
   return (
-    <div ref={scrollContainerRef} className="h-full overflow-y-auto pb-[env(safe-area-inset-bottom)]">
+    <div className="h-full overflow-y-auto pb-[env(safe-area-inset-bottom)]">
       {/* --epg-item-h mirrors the intrinsic block size in PLAYER_EPG_LIST_ITEM_CLASS for placeholder sizing. */}
       <div key={channelId} className="relative [--epg-item-h:3rem] md:[--epg-item-h:3.75rem]">
         {sections.map((section) => (
@@ -432,7 +440,7 @@ function EPGViewComponent({
             currentPlayingProgramId={currentPlayingProgramId}
             currentProgramRef={currentProgramRef}
             currentTimeMs={currentTimeMs}
-            forceRender={section.dateKey === playingSectionKey}
+            forceRender={eagerSectionKeys.has(section.dateKey)}
             handleProgramClick={handleProgramClick}
             locale={locale}
             registerSection={registerSection}

From 48cc2ce581aca47f2642abcc060381db1e1c4a97 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Wed, 2 Sep 2026 03:40:27 +0000
Subject: [PATCH 06/10] fix(web-ui): do not memo() VideoPlayer, it breaks
 useEffectEvent

react-dom 19.2 refreshes useEffectEvent implementations in the
before-mutation phase only for FunctionComponent fibers; the
SimpleMemoComponent fiber created by memo() is skipped, so every Effect
Event in VideoPlayer kept its mount-time props. In practice playMode
stayed "live" and streamStartTime stayed at page load, so the first
"playing" event of a catchup stream recalibrated the live session and
rebuilt the catchup URL at "now" in a loop. Revert to the plain export;
the 1 Hz page re-render memo() was meant to absorb is gone since the
playback clock moved to an external store.

Co-authored-by: Stackie Jia <jsq2627@gmail.com>
---
 web-ui/src/components/player/video-player.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/web-ui/src/components/player/video-player.tsx b/web-ui/src/components/player/video-player.tsx
index 7ee32d63..78aa21a8 100644
--- a/web-ui/src/components/player/video-player.tsx
+++ b/web-ui/src/components/player/video-player.tsx
@@ -1,7 +1,6 @@
 import { clsx } from "clsx";
 import { CircleAlert, Play, X } from "lucide-react";
 import {
-  memo,
   type MouseEvent as ReactMouseEvent,
   type PointerEvent as ReactPointerEvent,
   useCallback,
@@ -2067,6 +2066,9 @@ function VideoPlayerComponent({
   );
 }
 
-// Every prop is a primitive or a stable callback and the 1 Hz playback clock arrives through
-// PlaybackTimeContext, so memoizing skips the (large) re-render on unrelated PlayerPage updates.
-export const VideoPlayer = memo(VideoPlayerComponent);
+// Deliberately NOT wrapped in memo(): this component relies on useEffectEvent, and react-dom
+// 19.2 only refreshes Effect Event implementations for plain function-component fibers, not
+// for the SimpleMemoComponent fiber memo() produces. Under memo() every Effect Event kept its
+// mount-time props (playMode stayed "live", streamStartTime stayed at page load), which broke
+// catchup seeking. PlayerPage instead avoids re-rendering on the 1 Hz playback clock.
+export { VideoPlayerComponent as VideoPlayer };

From 0bdba679157040d88bf90b3aadd63c0eab5b8281 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Wed, 2 Sep 2026 05:18:14 +0000
Subject: [PATCH 07/10] fix(web-ui): keep the first EPG guide positioning
 instant

The timer that switches the guide's auto-scroll to smooth ran before the
"no programmes yet" early return, so when the guide was open before the
EPG arrived the very first positioning animated. Smooth scrolling is meant
only for programme changes while the guide is already showing, so arm it
only after a scroll target has actually existed. Tab switches already
request instant via nextScrollBehaviorRef.

Co-authored-by: Stackie Jia <jsq2627@gmail.com>
---
 web-ui/src/components/player/epg-view.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/web-ui/src/components/player/epg-view.tsx b/web-ui/src/components/player/epg-view.tsx
index c5d95806..488d4a70 100644
--- a/web-ui/src/components/player/epg-view.tsx
+++ b/web-ui/src/components/player/epg-view.tsx
@@ -394,13 +394,16 @@ function EPGViewComponent({
 
   const hasPrograms = channelPrograms.length > 0;
 
-  // Auto-scroll to center current/playing program when it changes or channel changes
+  // Auto-scroll to center current/playing program when it changes or channel changes.
+  // Smooth scrolling is only armed once a scroll target has actually existed while the guide
+  // is open: the very first positioning (EPG arrival, or revealing the tab) must be instant.
   useLayoutEffect(() => {
+    if (!currentPlayingProgram || !channelId || !channelPrograms.length) return;
+
     window.setTimeout(() => {
       nextScrollBehaviorRef.current = "smooth";
     }, 0);
 
-    if (!currentPlayingProgram || !channelId || !channelPrograms.length) return;
     const requestedBehavior = nextScrollBehaviorRef.current;
     if (requestedBehavior === "skip") return;
     const behavior =

From cbc18b7160bbf2b04f859ecdce2fed202bee30f8 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Wed, 2 Sep 2026 05:38:57 +0000
Subject: [PATCH 08/10] refactor(web-ui): render the EPG guide from deferred
 values instead of lazy sections

Drop the hand-maintained section hydration (IntersectionObserver,
fixed-height placeholders, eager set, latch). Every day renders in full
again; instead the list is derived from useDeferredValue(channelId /
epgData / currentPlayingProgram) so its work always runs in a non-urgent,
interruptible lane: EPG arrival is already a transition and passes
straight through, while urgent updates such as a channel zap or a
programme boundary commit the cheap parts first and let React render the
rows in the background, yielding to user input between them. Precomputed
row labels, the minute-aligned clock and the instant first positioning
are kept.

Co-authored-by: Stackie Jia <jsq2627@gmail.com>
---
 web-ui/src/components/player/epg-view.tsx | 165 +++++-----------------
 1 file changed, 35 insertions(+), 130 deletions(-)

diff --git a/web-ui/src/components/player/epg-view.tsx b/web-ui/src/components/player/epg-view.tsx
index 488d4a70..76349f60 100644
--- a/web-ui/src/components/player/epg-view.tsx
+++ b/web-ui/src/components/player/epg-view.tsx
@@ -5,6 +5,7 @@ import {
   type RefObject,
   startTransition,
   useCallback,
+  useDeferredValue,
   useEffect,
   useLayoutEffect,
   useMemo,
@@ -35,12 +36,6 @@ interface EPGViewProps {
 
 export const nextScrollBehaviorRef: RefObject<"smooth" | "instant" | "skip"> = { current: "instant" };
 
-/**
- * Sections this far outside the scroll viewport are hydrated ahead of time so
- * scrolling into them never shows an empty placeholder.
- */
-const SECTION_HYDRATION_MARGIN = "800px 0px";
-
 let timeFormatter: Intl.DateTimeFormat | null = null;
 function formatProgramTime(date: Date): string {
   timeFormatter ??= new Intl.DateTimeFormat(undefined, { hour: "2-digit", minute: "2-digit" });
@@ -59,8 +54,6 @@ interface EPGDateSectionData {
   rows: EPGProgramRow[];
 }
 
-type SectionVisibilityHandler = () => void;
-
 interface EPGProgramItemProps {
   currentProgramRef: RefObject<HTMLButtonElement | null>;
   durationMinutes: number;
@@ -194,51 +187,23 @@ interface EPGDateSectionProps {
   currentPlayingProgramId: string | undefined;
   currentProgramRef: RefObject<HTMLButtonElement | null>;
   currentTimeMs: number;
-  /** Section contains the playing program; it must render synchronously so the scroll target exists. */
-  forceRender: boolean;
   handleProgramClick: (programStart: Date, programEnd: Date) => void;
   locale: Locale;
-  registerSection: (element: HTMLElement, onVisible: SectionVisibilityHandler) => void;
   section: EPGDateSectionData;
   supportsCatchup: boolean;
-  unregisterSection: (element: HTMLElement) => void;
 }
 
-/**
- * One day of programs. Rows are only materialized once the section approaches the
- * scroll viewport (or when it holds the playing program); until then a fixed-height
- * placeholder keeps the scroll geometry stable. Once hydrated a section stays hydrated.
- */
+/** One day of programmes under a sticky date header. */
 const EPGDateSection = memo(function EPGDateSection({
   currentPlayingProgramId,
   currentProgramRef,
   currentTimeMs,
-  forceRender,
   handleProgramClick,
   locale,
-  registerSection,
   section,
   supportsCatchup,
-  unregisterSection,
 }: EPGDateSectionProps) {
   const t = usePlayerTranslation(locale);
-  const [hydrated, setHydrated] = useState(forceRender);
-  // Latch: a section that was rendered eagerly stays rendered when the eager set moves on.
-  if (forceRender && !hydrated) setHydrated(true);
-  const rendered = hydrated || forceRender;
-
-  const placeholderRef = useCallback(
-    (element: HTMLDivElement | null) => {
-      if (!element) return;
-      registerSection(element, () => {
-        startTransition(() => setHydrated(true));
-      });
-      return () => unregisterSection(element);
-    },
-    [registerSection, unregisterSection],
-  );
-
-  const rowCount = section.rows.length;
 
   return (
     <div className="relative">
@@ -248,31 +213,23 @@ const EPGDateSection = memo(function EPGDateSection({
         </h3>
       </div>
       <div className="px-2 py-2">
-        {rendered ? (
-          <div className="space-y-2">
-            {section.rows.map(({ program, startLabel, durationMinutes }) => (
-              <EPGProgramItem
-                key={program.id}
-                currentProgramRef={currentProgramRef}
-                durationMinutes={durationMinutes}
-                handleProgramClick={handleProgramClick}
-                isPast={program.end.getTime() <= currentTimeMs}
-                locale={locale}
-                onAir={program.start.getTime() <= currentTimeMs && program.end.getTime() > currentTimeMs}
-                playing={currentPlayingProgramId === program.id}
-                program={program}
-                startLabel={startLabel}
-                supportsCatchup={supportsCatchup}
-              />
-            ))}
-          </div>
-        ) : (
-          <div
-            ref={placeholderRef}
-            aria-hidden="true"
-            style={{ height: `calc(${rowCount} * var(--epg-item-h) + ${Math.max(rowCount - 1, 0)} * 0.5rem)` }}
-          />
-        )}
+        <div className="space-y-2">
+          {section.rows.map(({ program, startLabel, durationMinutes }) => (
+            <EPGProgramItem
+              key={program.id}
+              currentProgramRef={currentProgramRef}
+              durationMinutes={durationMinutes}
+              handleProgramClick={handleProgramClick}
+              isPast={program.end.getTime() <= currentTimeMs}
+              locale={locale}
+              onAir={program.start.getTime() <= currentTimeMs && program.end.getTime() > currentTimeMs}
+              playing={currentPlayingProgramId === program.id}
+              program={program}
+              startLabel={startLabel}
+              supportsCatchup={supportsCatchup}
+            />
+          ))}
+        </div>
       </div>
     </div>
   );
@@ -290,6 +247,14 @@ function EPGViewComponent({
   const currentProgramRef = useRef<HTMLButtonElement>(null);
   const [currentTimeMs, setCurrentTimeMs] = useState(() => Date.now());
 
+  // The programme list can be hundreds of rows. Rendering it from deferred values keeps that
+  // work in a non-urgent, interruptible lane: an urgent update (channel zap, programme boundary)
+  // commits the cheap parts first, then React renders the list in the background and yields to
+  // user input between rows. EPG arrival is already a transition, so these pass straight through.
+  const deferredChannelId = useDeferredValue(channelId);
+  const deferredEpgData = useDeferredValue(epgData);
+  const deferredPlayingProgram = useDeferredValue(currentPlayingProgram);
+
   // Program boundaries fall on whole minutes, so ticking at minute boundaries gives the
   // same on-air / past flags as a 1 s interval at a sixtieth of the re-renders.
   useEffect(() => {
@@ -312,9 +277,9 @@ function EPGViewComponent({
   }, []);
 
   const channelPrograms = useMemo(() => {
-    if (!channelId) return [];
-    return epgData[channelId] ?? [];
-  }, [channelId, epgData]);
+    if (!deferredChannelId) return [];
+    return deferredEpgData[deferredChannelId] ?? [];
+  }, [deferredChannelId, deferredEpgData]);
 
   // Group programs by day and precompute the per-row display strings once, so rows are
   // cheap to render and their memo props stay primitive.
@@ -338,67 +303,11 @@ function EPGViewComponent({
     return result;
   }, [channelPrograms]);
 
-  const currentPlayingProgramId = currentPlayingProgram?.id;
-  // The section holding the playing programme plus its neighbours render eagerly: the list
-  // auto-scrolls to that row, so this is exactly what fills the viewport on reveal.
-  const eagerSectionKeys = useMemo(() => {
-    const keys = new Set<string>();
-    if (!currentPlayingProgramId) return keys;
-    const index = sections.findIndex((section) =>
-      section.rows.some((row) => row.program.id === currentPlayingProgramId),
-    );
-    if (index < 0) return keys;
-    for (const section of sections.slice(Math.max(index - 1, 0), index + 2)) keys.add(section.dateKey);
-    return keys;
-  }, [sections, currentPlayingProgramId]);
-
-  // Shared IntersectionObserver that hydrates sections as they approach the viewport. It observes
-  // against the viewport rather than the scroll container: the list fills the sidebar height, so
-  // the result is the same, and it avoids depending on when the container ref is attached.
-  const sectionHandlersRef = useRef(new Map<HTMLElement, SectionVisibilityHandler>());
-  const observerRef = useRef<IntersectionObserver | null>(null);
-
-  const registerSection = useCallback((element: HTMLElement, onVisible: SectionVisibilityHandler) => {
-    sectionHandlersRef.current.set(element, onVisible);
-    observerRef.current?.observe(element);
-  }, []);
-
-  const unregisterSection = useCallback((element: HTMLElement) => {
-    sectionHandlersRef.current.delete(element);
-    observerRef.current?.unobserve(element);
-  }, []);
-
-  useEffect(() => {
-    const handlers = sectionHandlersRef.current;
-    const observer = new IntersectionObserver(
-      (entries) => {
-        for (const entry of entries) {
-          if (!entry.isIntersecting) continue;
-          const element = entry.target as HTMLElement;
-          const onVisible = handlers.get(element);
-          if (!onVisible) continue;
-          handlers.delete(element);
-          observer.unobserve(element);
-          onVisible();
-        }
-      },
-      { rootMargin: SECTION_HYDRATION_MARGIN },
-    );
-    for (const element of handlers.keys()) observer.observe(element);
-    observerRef.current = observer;
-    return () => {
-      observer.disconnect();
-      observerRef.current = null;
-    };
-  }, []);
-
-  const hasPrograms = channelPrograms.length > 0;
-
   // Auto-scroll to center current/playing program when it changes or channel changes.
   // Smooth scrolling is only armed once a scroll target has actually existed while the guide
   // is open: the very first positioning (EPG arrival, or revealing the tab) must be instant.
   useLayoutEffect(() => {
-    if (!currentPlayingProgram || !channelId || !channelPrograms.length) return;
+    if (!deferredPlayingProgram || !deferredChannelId || !channelPrograms.length) return;
 
     window.setTimeout(() => {
       nextScrollBehaviorRef.current = "smooth";
@@ -415,7 +324,7 @@ function EPGViewComponent({
       behavior,
       block: "center",
     });
-  }, [currentPlayingProgram, channelId, channelPrograms]);
+  }, [deferredPlayingProgram, deferredChannelId, channelPrograms]);
 
   const handleProgramClick = useCallback(
     (programStart: Date, programEnd: Date) => {
@@ -425,7 +334,7 @@ function EPGViewComponent({
     [onProgramSelect],
   );
 
-  if (!channelId || !hasPrograms) {
+  if (!deferredChannelId || channelPrograms.length === 0) {
     return (
       <div className="flex h-full items-center justify-center bg-transparent px-6 text-center text-slate-500 text-sm leading-6 dark:text-slate-400">
         {t("noEpgAvailable")}
@@ -435,21 +344,17 @@ function EPGViewComponent({
 
   return (
     <div className="h-full overflow-y-auto pb-[env(safe-area-inset-bottom)]">
-      {/* --epg-item-h mirrors the intrinsic block size in PLAYER_EPG_LIST_ITEM_CLASS for placeholder sizing. */}
-      <div key={channelId} className="relative [--epg-item-h:3rem] md:[--epg-item-h:3.75rem]">
+      <div className="relative">
         {sections.map((section) => (
           <EPGDateSection
             key={section.dateKey}
-            currentPlayingProgramId={currentPlayingProgramId}
+            currentPlayingProgramId={deferredPlayingProgram?.id}
             currentProgramRef={currentProgramRef}
             currentTimeMs={currentTimeMs}
-            forceRender={eagerSectionKeys.has(section.dateKey)}
             handleProgramClick={handleProgramClick}
             locale={locale}
-            registerSection={registerSection}
             section={section}
             supportsCatchup={supportsCatchup}
-            unregisterSection={unregisterSection}
           />
         ))}
       </div>

From 8fa2ef280cb3c7fd62188ee65f71de851c415391 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Wed, 2 Sep 2026 05:53:25 +0000
Subject: [PATCH 09/10] refactor(web-ui): share one minute-aligned wall clock
 across player widgets

EPGView, ChannelList and the top-left overlay clock each ran their own
60 s timer (ChannelList's not even minute-aligned), so their notion of
"now" could disagree by up to a minute and ChannelList showed a stale
value after its tab had been hidden. Replace them with a single
module-level, minute-aligned ticker exposed through useSyncExternalStore
(useWallClockMinute). It starts with the first subscriber, refreshes the
value immediately on subscribe (tab reveal), re-aligns on visibilitychange
and stops when nobody listens. The media clock (video position) stays a
separate, event-driven source: it can be paused, stalled or point into the
past during catchup, so it cannot stand in for real time.

Co-authored-by: Stackie Jia <jsq2627@gmail.com>
---
 web-ui/src/components/player/channel-list.tsx | 28 ++-----
 web-ui/src/components/player/epg-view.tsx     | 46 ++--------
 web-ui/src/components/player/video-player.tsx | 20 +----
 web-ui/src/hooks/use-wall-clock-minute.ts     | 83 +++++++++++++++++++
 4 files changed, 101 insertions(+), 76 deletions(-)
 create mode 100644 web-ui/src/hooks/use-wall-clock-minute.ts

diff --git a/web-ui/src/components/player/channel-list.tsx b/web-ui/src/components/player/channel-list.tsx
index e445dc21..3bacfb67 100644
--- a/web-ui/src/components/player/channel-list.tsx
+++ b/web-ui/src/components/player/channel-list.tsx
@@ -1,18 +1,8 @@
 import { clsx } from "clsx";
 import { Search } from "lucide-react";
-import {
-  memo,
-  type RefObject,
-  startTransition,
-  useCallback,
-  useDeferredValue,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { memo, type RefObject, useCallback, useDeferredValue, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { usePlayerTranslation } from "../../hooks/use-player-translation";
+import { useWallClockMinute } from "../../hooks/use-wall-clock-minute";
 import { type EPGData, getCurrentProgram, getEPGChannelId } from "../../lib/epg-parser";
 import type { Locale } from "../../lib/locale";
 import type { Channel } from "../../types/player";
@@ -114,14 +104,9 @@ function ChannelListComponent({
   const deferredSelectedGroup = useDeferredValue(selectedGroup);
   const currentChannelRef = useRef<HTMLButtonElement>(null);
 
-  // Re-compute current programs every minute (low-priority update)
-  const [now, setNow] = useState(() => new Date());
-  useEffect(() => {
-    const timer = setInterval(() => {
-      startTransition(() => setNow(new Date()));
-    }, 60_000);
-    return () => clearInterval(timer);
-  }, []);
+  // "Now playing" titles follow the page-wide minute clock; deferring it (like epgData) keeps
+  // the recompute and the row updates in a non-urgent, interruptible render.
+  const nowMs = useDeferredValue(useWallClockMinute());
 
   // Defer epgData so initial load / large EPG updates don't block interactions
   const deferredEpgData = useDeferredValue(epgData);
@@ -130,6 +115,7 @@ function ChannelListComponent({
   const currentProgramMap = useMemo(() => {
     const map: Record<string, string> = {};
     if (!channels || !deferredEpgData) return map;
+    const now = new Date(nowMs);
     for (const ch of channels) {
       const epgId = getEPGChannelId(ch, deferredEpgData);
       if (!epgId) continue;
@@ -139,7 +125,7 @@ function ChannelListComponent({
       }
     }
     return map;
-  }, [channels, deferredEpgData, now]);
+  }, [channels, deferredEpgData, nowMs]);
 
   const filteredChannels = useMemo(
     () => filterChannels(channels, deferredSearchQuery, deferredSelectedGroup),
diff --git a/web-ui/src/components/player/epg-view.tsx b/web-ui/src/components/player/epg-view.tsx
index 76349f60..4bfe3802 100644
--- a/web-ui/src/components/player/epg-view.tsx
+++ b/web-ui/src/components/player/epg-view.tsx
@@ -1,18 +1,8 @@
 import { clsx } from "clsx";
 import { Circle, History } from "lucide-react";
-import {
-  memo,
-  type RefObject,
-  startTransition,
-  useCallback,
-  useDeferredValue,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { memo, type RefObject, useCallback, useDeferredValue, useLayoutEffect, useMemo, useRef } from "react";
 import { usePlayerTranslation } from "../../hooks/use-player-translation";
+import { useWallClockMinute } from "../../hooks/use-wall-clock-minute";
 import type { EPGData } from "../../lib/epg-parser";
 import type { Locale } from "../../lib/locale";
 import type { EPGProgram } from "../../types/player";
@@ -245,36 +235,18 @@ function EPGViewComponent({
 }: EPGViewProps) {
   const t = usePlayerTranslation(locale);
   const currentProgramRef = useRef<HTMLButtonElement>(null);
-  const [currentTimeMs, setCurrentTimeMs] = useState(() => Date.now());
 
   // The programme list can be hundreds of rows. Rendering it from deferred values keeps that
-  // work in a non-urgent, interruptible lane: an urgent update (channel zap, programme boundary)
-  // commits the cheap parts first, then React renders the list in the background and yields to
-  // user input between rows. EPG arrival is already a transition, so these pass straight through.
+  // work in a non-urgent, interruptible lane: an urgent update (channel zap, programme boundary,
+  // the shared wall clock crossing a minute) commits the cheap parts first, then React renders
+  // the list in the background and yields to user input between rows. EPG arrival is already a
+  // transition, so these pass straight through.
   const deferredChannelId = useDeferredValue(channelId);
   const deferredEpgData = useDeferredValue(epgData);
   const deferredPlayingProgram = useDeferredValue(currentPlayingProgram);
-
-  // Program boundaries fall on whole minutes, so ticking at minute boundaries gives the
-  // same on-air / past flags as a 1 s interval at a sixtieth of the re-renders.
-  useEffect(() => {
-    const tick = () => startTransition(() => setCurrentTimeMs(Date.now()));
-    tick();
-
-    let intervalId = 0;
-    const timeoutId = window.setTimeout(
-      () => {
-        tick();
-        intervalId = window.setInterval(tick, 60_000);
-      },
-      60_000 - (Date.now() % 60_000),
-    );
-
-    return () => {
-      window.clearTimeout(timeoutId);
-      if (intervalId) window.clearInterval(intervalId);
-    };
-  }, []);
+  // Programme boundaries fall on whole minutes, so the page-wide minute clock is all the
+  // on-air / past flags need.
+  const currentTimeMs = useDeferredValue(useWallClockMinute());
 
   const channelPrograms = useMemo(() => {
     if (!deferredChannelId) return [];
diff --git a/web-ui/src/components/player/video-player.tsx b/web-ui/src/components/player/video-player.tsx
index 78aa21a8..081ecafb 100644
--- a/web-ui/src/components/player/video-player.tsx
+++ b/web-ui/src/components/player/video-player.tsx
@@ -13,6 +13,7 @@ import {
 import { createPortal } from "react-dom";
 import { usePlayerTouchGestures } from "../../hooks/use-player-touch-gestures";
 import { usePlayerTranslation } from "../../hooks/use-player-translation";
+import { useWallClockMinute } from "../../hooks/use-wall-clock-minute";
 import {
   getDocumentPictureInPicture,
   getDocumentPiPWindowOptions,
@@ -202,24 +203,7 @@ function PlayerTopLeftOverlay({
   loading: boolean;
   loadingText: string;
 }) {
-  const [time, setTime] = useState(() => new Date());
-
-  useEffect(() => {
-    const tick = () => setTime(new Date());
-    tick();
-
-    const msUntilNextMinute = 60_000 - (Date.now() % 60_000);
-    let intervalId = 0;
-    const timeoutId = window.setTimeout(() => {
-      tick();
-      intervalId = window.setInterval(tick, 60_000);
-    }, msUntilNextMinute);
-
-    return () => {
-      window.clearTimeout(timeoutId);
-      if (intervalId) window.clearInterval(intervalId);
-    };
-  }, []);
+  const time = new Date(useWallClockMinute());
 
   return (
     <div
diff --git a/web-ui/src/hooks/use-wall-clock-minute.ts b/web-ui/src/hooks/use-wall-clock-minute.ts
new file mode 100644
index 00000000..dc13cb31
--- /dev/null
+++ b/web-ui/src/hooks/use-wall-clock-minute.ts
@@ -0,0 +1,83 @@
+import { useSyncExternalStore } from "react";
+
+/**
+ * Page-wide wall clock with minute resolution.
+ *
+ * Programme boundaries in the EPG fall on whole minutes and the overlay clock shows hh:mm, so
+ * every wall-clock consumer only needs to know which minute it is. One shared, minute-aligned
+ * timer feeds all of them, which keeps their notion of "now" identical and leaves a single
+ * timer on the page. This is deliberately separate from the media clock (video position):
+ * the media clock can be paused, stalled or point into the past during catchup, so it cannot
+ * stand in for real time.
+ */
+
+const MINUTE_MS = 60_000;
+
+const listeners = new Set<() => void>();
+let currentMinuteMs = floorToMinute(Date.now());
+let alignTimeoutId = 0;
+let intervalId = 0;
+
+function floorToMinute(ms: number): number {
+  return ms - (ms % MINUTE_MS);
+}
+
+function tick(): void {
+  const next = floorToMinute(Date.now());
+  if (next === currentMinuteMs) return;
+  currentMinuteMs = next;
+  for (const listener of listeners) listener();
+}
+
+function clearTimers(): void {
+  if (alignTimeoutId) window.clearTimeout(alignTimeoutId);
+  if (intervalId) window.clearInterval(intervalId);
+  alignTimeoutId = 0;
+  intervalId = 0;
+}
+
+/** (Re)start the schedule so the next fire lands right after the minute boundary. */
+function schedule(): void {
+  clearTimers();
+  alignTimeoutId = window.setTimeout(
+    () => {
+      alignTimeoutId = 0;
+      tick();
+      intervalId = window.setInterval(tick, MINUTE_MS);
+    },
+    MINUTE_MS - (Date.now() % MINUTE_MS),
+  );
+}
+
+// Timers are throttled or suspended in background tabs; catch up and re-align on return.
+function handleVisibilityChange(): void {
+  if (document.visibilityState !== "visible") return;
+  tick();
+  schedule();
+}
+
+function subscribe(listener: () => void): () => void {
+  if (listeners.size === 0) {
+    // First subscriber (e.g. a tab being revealed): make sure the value is current before it renders.
+    tick();
+    schedule();
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+  }
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size === 0) {
+      clearTimers();
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    }
+  };
+}
+
+function getSnapshot(): number {
+  return currentMinuteMs;
+}
+
+/** Current wall-clock time floored to the minute (epoch ms); re-renders on minute boundaries. */
+export function useWallClockMinute(): number {
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}

From 4396bec9cd26c3db709472f57a554f6f066981cc Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Wed, 2 Sep 2026 06:02:31 +0000
Subject: [PATCH 10/10] refactor(web-ui): make the media clock a cohesive
 PlaybackClock

PlaybackTimeStore was a dumb value store written from a PlayerPage
callback; the whole-second throttling, the two position refs and the
programme-boundary detection lived in PlayerPage around it. Replace it
with PlaybackClock, which owns the media-clock semantics (raw position,
1 Hz snapshot, reset) and is fed directly by VideoPlayer from the active
backend's time-update; VideoPlayer also publishes it to its own controls
through PlaybackTimeProvider, so the onCurrentVideoTimeChange prop and the
provider in PlayerPage go away. The programme-follows-the-clock logic
moves into useCurrentVideoProgram, leaving PlayerPage with a single hook
call. Seek/reset paths still zero the clock via resetCurrentVideoTime.

Co-authored-by: Stackie Jia <jsq2627@gmail.com>
---
 .../src/components/player/playback-clock.ts   |  55 +++++++
 .../player/playback-time-context.tsx          |  49 ++-----
 web-ui/src/components/player/video-player.tsx |  11 +-
 web-ui/src/hooks/use-current-video-program.ts |  68 +++++++++
 web-ui/src/pages/player.tsx                   | 138 +++++-------------
 5 files changed, 180 insertions(+), 141 deletions(-)
 create mode 100644 web-ui/src/components/player/playback-clock.ts
 create mode 100644 web-ui/src/hooks/use-current-video-program.ts

diff --git a/web-ui/src/components/player/playback-clock.ts b/web-ui/src/components/player/playback-clock.ts
new file mode 100644
index 00000000..56b21819
--- /dev/null
+++ b/web-ui/src/components/player/playback-clock.ts
@@ -0,0 +1,55 @@
+/**
+ * The media clock of the player: the playback position in seconds relative to the start of
+ * the current stream (MSE timeline). It is fed by the active playback backend's `time-update`
+ * events (browser `timeupdate`, ~4 Hz while playing) and publishes a snapshot that only
+ * changes when the position crosses a whole second, so UI bound to it re-renders at most 1 Hz.
+ *
+ * This is distinct from wall-clock time: during catchup the position maps to a moment in the
+ * past, and while paused or stalled it does not advance at all.
+ */
+export interface PlaybackClock {
+  /** Latest raw position, updated on every backend tick. For imperative reads (seek math). */
+  get(): number;
+  /** Position as of the last whole-second change; what subscribers observe. */
+  getSnapshot(): number;
+  /** Notified when the snapshot changes (second boundary or reset). */
+  subscribe(listener: () => void): () => void;
+  /** Feed a raw backend position. */
+  update(time: number): void;
+  /** A new stream is starting (channel/source switch, seek): position goes back to 0. */
+  reset(): void;
+}
+
+export function createPlaybackClock(): PlaybackClock {
+  let time = 0;
+  let snapshot = 0;
+  let snapshotSecond = 0;
+  const listeners = new Set<() => void>();
+
+  const publish = (next: number) => {
+    snapshot = next;
+    snapshotSecond = Math.floor(next);
+    for (const listener of listeners) listener();
+  };
+
+  return {
+    get: () => time,
+    getSnapshot: () => snapshot,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    update: (next) => {
+      time = next;
+      if (Math.floor(next) === snapshotSecond) return;
+      publish(next);
+    },
+    reset: () => {
+      time = 0;
+      if (snapshot === 0) return;
+      publish(0);
+    },
+  };
+}
diff --git a/web-ui/src/components/player/playback-time-context.tsx b/web-ui/src/components/player/playback-time-context.tsx
index 2ff29c59..409fe78f 100644
--- a/web-ui/src/components/player/playback-time-context.tsx
+++ b/web-ui/src/components/player/playback-time-context.tsx
@@ -1,50 +1,27 @@
 import { createContext, type ReactNode, useContext, useSyncExternalStore } from "react";
-
-/**
- * Tiny external store for the playback clock (seconds relative to stream start).
- * Keeping the 1 Hz clock out of React state means only the components that
- * actually display it (timeline, time readout) re-render on each tick.
- */
-export interface PlaybackTimeStore {
-  get: () => number;
-  set: (time: number) => void;
-  subscribe: (listener: () => void) => () => void;
-}
-
-export function createPlaybackTimeStore(): PlaybackTimeStore {
-  let time = 0;
-  const listeners = new Set<() => void>();
-  return {
-    get: () => time,
-    set: (next) => {
-      if (next === time) return;
-      time = next;
-      for (const listener of listeners) listener();
-    },
-    subscribe: (listener) => {
-      listeners.add(listener);
-      return () => {
-        listeners.delete(listener);
-      };
-    },
-  };
-}
+import type { PlaybackClock } from "./playback-clock";
 
 const noopSubscribe = () => () => {};
 const zero = () => 0;
 
-const PlaybackTimeContext = createContext<PlaybackTimeStore | null>(null);
+const PlaybackClockContext = createContext<PlaybackClock | null>(null);
 
 interface PlaybackTimeProviderProps {
   children: ReactNode;
-  store: PlaybackTimeStore;
+  clock: PlaybackClock;
 }
 
-export function PlaybackTimeProvider({ children, store }: PlaybackTimeProviderProps) {
-  return <PlaybackTimeContext value={store}>{children}</PlaybackTimeContext>;
+/** Publishes the player's media clock to the controls rendered beneath it. */
+export function PlaybackTimeProvider({ children, clock }: PlaybackTimeProviderProps) {
+  return <PlaybackClockContext value={clock}>{children}</PlaybackClockContext>;
 }
 
+/** Playback position in seconds; re-renders the caller on whole-second changes only. */
 export function usePlaybackTime(): number {
-  const store = useContext(PlaybackTimeContext);
-  return useSyncExternalStore(store?.subscribe ?? noopSubscribe, store?.get ?? zero, store?.get ?? zero);
+  const clock = useContext(PlaybackClockContext);
+  return useSyncExternalStore(
+    clock?.subscribe ?? noopSubscribe,
+    clock?.getSnapshot ?? zero,
+    clock?.getSnapshot ?? zero,
+  );
 }
diff --git a/web-ui/src/components/player/video-player.tsx b/web-ui/src/components/player/video-player.tsx
index 081ecafb..701ced92 100644
--- a/web-ui/src/components/player/video-player.tsx
+++ b/web-ui/src/components/player/video-player.tsx
@@ -51,6 +51,8 @@ import mp2WasmUrl from "../../playback-engine/wasm/minimp3/mp2_decoder.wasm?url"
 import type { Channel, EPGProgram } from "../../types/player";
 import type { PictureInPictureMode } from "../../types/ui";
 import { PLAYER_OVERLAY_SURFACE_CLASS } from "./classnames";
+import type { PlaybackClock } from "./playback-clock";
+import { PlaybackTimeProvider } from "./playback-time-context";
 import { PlayerControls } from "./player-controls";
 import { PlayerGestureIndicatorOverlay } from "./player-gesture-overlay";
 import { PlayerSelectedGlassLayers } from "./player-selected-glass-layers";
@@ -66,7 +68,8 @@ interface VideoPlayerProps {
   /** Recalibrate MSE t=0 → wall-clock mapping (live mode). */
   onStreamStartTimeChange?: (time: Date) => void;
   streamStartTime: Date;
-  onCurrentVideoTimeChange: (time: number) => void;
+  /** Media clock fed from the active backend's position and published to the controls. */
+  clock: PlaybackClock;
   onChannelNavigate?: (target: "prev" | "next" | number) => void;
   /** Neighbours of the current channel, used to preview the target of a swipe-to-zap gesture. */
   prevChannel?: Channel | null;
@@ -250,7 +253,7 @@ function VideoPlayerComponent({
   onSeek,
   onStreamStartTimeChange,
   streamStartTime,
-  onCurrentVideoTimeChange,
+  clock,
   onChannelNavigate,
   prevChannel = null,
   nextChannel = null,
@@ -881,7 +884,7 @@ function VideoPlayerComponent({
     p.on("time-update", (time) => {
       if (slotPlayerRef(slotId).current !== p || slotId !== getActiveSlotId()) return;
       currentVideoTimeRef.current = time;
-      onCurrentVideoTimeChange(time);
+      clock.update(time);
       updateMediaSessionPosition();
     });
     p.on("ended", () => {
@@ -2045,7 +2048,7 @@ function VideoPlayerComponent({
           </div>
         )}
       </div>
-      {createPortal(playerSurface, playerPortalHost)}
+      <PlaybackTimeProvider clock={clock}>{createPortal(playerSurface, playerPortalHost)}</PlaybackTimeProvider>
     </div>
   );
 }
diff --git a/web-ui/src/hooks/use-current-video-program.ts b/web-ui/src/hooks/use-current-video-program.ts
new file mode 100644
index 00000000..dbe16d03
--- /dev/null
+++ b/web-ui/src/hooks/use-current-video-program.ts
@@ -0,0 +1,68 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { PlaybackClock } from "../components/player/playback-clock";
+import { type EPGData, getCurrentProgram } from "../lib/epg-parser";
+import { mseToWallClock } from "../playback-engine/timeline/wall-clock";
+import type { EPGProgram } from "../types/player";
+
+function lookupProgram(
+  epgChannelId: string | null,
+  epgData: EPGData,
+  streamStartTime: Date,
+  playbackTime: number,
+): EPGProgram | null {
+  if (!epgChannelId) return null;
+  return getCurrentProgram(epgChannelId, epgData, mseToWallClock(playbackTime, streamStartTime));
+}
+
+/**
+ * The EPG programme at the current playback position.
+ *
+ * The programme is derived during render from `lookupTime`, but that time input is only
+ * bumped when the media clock actually crosses into a different programme (or when the
+ * lookup inputs change), so the owner re-renders on programme boundaries rather than every
+ * second. A clock reset (new stream) always re-evaluates at position 0.
+ */
+export function useCurrentVideoProgram(
+  clock: PlaybackClock,
+  epgChannelId: string | null,
+  epgData: EPGData,
+  streamStartTime: Date,
+): EPGProgram | null {
+  const [lookupTime, setLookupTime] = useState(0);
+
+  const program = useMemo(
+    () => lookupProgram(epgChannelId, epgData, streamStartTime, lookupTime),
+    [epgChannelId, epgData, streamStartTime, lookupTime],
+  );
+
+  // Latest committed inputs, so the clock listener compares against what is on screen.
+  const inputsRef = useRef({ epgChannelId, epgData, streamStartTime, program });
+  useEffect(() => {
+    inputsRef.current = { epgChannelId, epgData, streamStartTime, program };
+    // lookupTime may be stale relative to the live position (e.g. a live-edge recalibration
+    // moved streamStartTime); re-evaluate now instead of waiting for the next boundary.
+    const time = clock.get();
+    if (lookupProgram(epgChannelId, epgData, streamStartTime, time) !== program) {
+      setLookupTime(time);
+    }
+  }, [clock, epgChannelId, epgData, streamStartTime, program]);
+
+  useEffect(
+    () =>
+      clock.subscribe(() => {
+        const time = clock.getSnapshot();
+        if (time === 0) {
+          // Stream restarted: the position is authoritative regardless of programme identity.
+          setLookupTime(0);
+          return;
+        }
+        const inputs = inputsRef.current;
+        if (lookupProgram(inputs.epgChannelId, inputs.epgData, inputs.streamStartTime, time) !== inputs.program) {
+          setLookupTime(time);
+        }
+      }),
+    [clock],
+  );
+
+  return program;
+}
diff --git a/web-ui/src/pages/player.tsx b/web-ui/src/pages/player.tsx
index b2bdc986..eb088fb8 100644
--- a/web-ui/src/pages/player.tsx
+++ b/web-ui/src/pages/player.tsx
@@ -7,11 +7,12 @@ import {
   nextScrollBehaviorRef as channelListNextScrollBehaviorRef,
 } from "../components/player/channel-list";
 import { EPGView, nextScrollBehaviorRef as epgViewNextScrollBehaviorRef } from "../components/player/epg-view";
-import { createPlaybackTimeStore, PlaybackTimeProvider } from "../components/player/playback-time-context";
+import { createPlaybackClock } from "../components/player/playback-clock";
 import { SettingsDropdown } from "../components/player/settings-dropdown";
 import { VideoPlayer } from "../components/player/video-player";
 import { Button, buttonVariants } from "../components/ui/button";
 import { Card } from "../components/ui/card";
+import { useCurrentVideoProgram } from "../hooks/use-current-video-program";
 import { useLocale } from "../hooks/use-locale";
 import { usePersistedEnum } from "../hooks/use-persisted-enum";
 import { usePlayerAppearance } from "../hooks/use-player-appearance";
@@ -19,7 +20,7 @@ import { usePlayerTranslation } from "../hooks/use-player-translation";
 import { useTheme } from "../hooks/use-theme";
 import { isDocumentPictureInPictureSupported } from "../lib/document-picture-in-picture";
 import { loadEPG } from "../lib/epg-loader";
-import { type EPGChannelDescriptor, type EPGData, getCurrentProgram, getEPGChannelId } from "../lib/epg-parser";
+import { type EPGChannelDescriptor, type EPGData, getEPGChannelId } from "../lib/epg-parser";
 import type { Locale } from "../lib/locale";
 import { buildCatchupSegments, clampCatchupStartTime, parseM3U } from "../lib/m3u-parser";
 import { isLGWebOS } from "../lib/platform";
@@ -130,15 +131,8 @@ function PlayerPage() {
   /** Whether the latest seek targets the session live edge (vs catchup). */
   const [seekAtLiveEdge, setSeekAtLiveEdge] = useState(true);
 
-  // Current video playback time in seconds (relative to stream start). The 1 Hz clock lives in
-  // an external store consumed only by the timeline widgets, so it never re-renders the page.
-  const [playbackTimeStore] = useState(createPlaybackTimeStore);
-  const currentVideoTimeRef = useRef(0);
-  const currentVideoSecondRef = useRef(0);
-  // Playback time at which the programme lookup below was last (re)evaluated. It is only
-  // bumped when the clock crosses into a different programme, so the page re-renders on
-  // programme boundaries rather than every second.
-  const [programLookupTime, setProgramLookupTime] = useState(0);
+  // Media clock: fed by the VideoPlayer, consumed by its controls and by the programme lookup.
+  const [playbackClock] = useState(createPlaybackClock);
 
   // Track active source index for multi-source channels
   const [activeSourceIndex, setActiveSourceIndex] = useState(0);
@@ -223,11 +217,8 @@ function PlayerPage() {
   }, [currentChannel, activeSource, activeSourceIndex, streamStartTime, seekAtLiveEdge, playbackBackendKind]);
 
   const resetCurrentVideoTime = useCallback(() => {
-    currentVideoTimeRef.current = 0;
-    currentVideoSecondRef.current = 0;
-    playbackTimeStore.set(0);
-    setProgramLookupTime(0);
-  }, [playbackTimeStore]);
+    playbackClock.reset();
+  }, [playbackClock]);
 
   const handleVideoSeek = useCallback(
     (seekTime: Date, goingLive: boolean) => {
@@ -257,12 +248,12 @@ function PlayerPage() {
         setStreamStartTime(new Date());
       } else {
         // Preserve current playback position when switching source in catchup mode
-        setStreamStartTime(mseToWallClock(currentVideoTimeRef.current, streamStartTime));
+        setStreamStartTime(mseToWallClock(playbackClock.get(), streamStartTime));
       }
       resetCurrentVideoTime();
       setActiveSourceIndex(sourceIndex);
     },
-    [playMode, resetCurrentVideoTime, streamStartTime],
+    [playMode, playbackClock, resetCurrentVideoTime, streamStartTime],
   );
 
   const handlePlaybackStarted = useCallback(() => {
@@ -317,61 +308,8 @@ function PlayerPage() {
     [currentChannel, epgData],
   );
 
-  // Get current program for the video player
-  // Use streamStartTime + playback time to determine the actual time position
-  const currentVideoProgram = useMemo(() => {
-    if (!currentEpgChannelId) return null;
-
-    // Calculate absolute time based on stream start + current video position
-    const absoluteTime = mseToWallClock(programLookupTime, streamStartTime);
-    return getCurrentProgram(currentEpgChannelId, epgData, absoluteTime);
-  }, [currentEpgChannelId, epgData, streamStartTime, programLookupTime]);
-
-  // Latest committed inputs of the programme lookup, for the clock callback below.
-  const programLookupRef = useRef({
-    epgChannelId: currentEpgChannelId,
-    epgData,
-    streamStartTime,
-    program: currentVideoProgram,
-  });
-  useEffect(() => {
-    programLookupRef.current = {
-      epgChannelId: currentEpgChannelId,
-      epgData,
-      streamStartTime,
-      program: currentVideoProgram,
-    };
-    // programLookupTime may be stale relative to the live clock (e.g. after a live-edge
-    // recalibration moved streamStartTime); re-evaluate against the actual position now
-    // instead of waiting for the next programme boundary.
-    const time = currentVideoTimeRef.current;
-    const actualProgram = currentEpgChannelId
-      ? getCurrentProgram(currentEpgChannelId, epgData, mseToWallClock(time, streamStartTime))
-      : null;
-    if (actualProgram !== currentVideoProgram) {
-      setProgramLookupTime(time);
-    }
-  }, [currentEpgChannelId, epgData, streamStartTime, currentVideoProgram]);
-
-  const handleCurrentVideoTimeChange = useCallback(
-    (time: number) => {
-      currentVideoTimeRef.current = time;
-      const currentSecond = Math.floor(time);
-      if (currentSecond === currentVideoSecondRef.current) return;
-      currentVideoSecondRef.current = currentSecond;
-      playbackTimeStore.set(time);
-
-      // Only re-render the page when the clock has moved into a different programme.
-      const lookup = programLookupRef.current;
-      const nextProgram = lookup.epgChannelId
-        ? getCurrentProgram(lookup.epgChannelId, lookup.epgData, mseToWallClock(time, lookup.streamStartTime))
-        : null;
-      if (nextProgram !== lookup.program) {
-        setProgramLookupTime(time);
-      }
-    },
-    [playbackTimeStore],
-  );
+  // Programme at the current playback position (stream start + media clock)
+  const currentVideoProgram = useCurrentVideoProgram(playbackClock, currentEpgChannelId, epgData, streamStartTime);
 
   const handleLocaleChange = useCallback(
     (nextLocale: Locale) => {
@@ -636,34 +574,32 @@ function PlayerPage() {
         <div className="flex flex-col md:flex-row flex-1 overflow-hidden">
           {/* Video Player - Mobile: fixed aspect ratio at top, Desktop: fills left side */}
           <div className="w-full sticky md:static md:flex-1 shrink-0">
-            <PlaybackTimeProvider store={playbackTimeStore}>
-              <VideoPlayer
-                channel={currentChannel}
-                segments={playbackSegments}
-                playMode={playMode}
-                onError={handleVideoError}
-                locale={locale}
-                currentProgram={currentVideoProgram}
-                onSeek={handleVideoSeek}
-                onStreamStartTimeChange={setStreamStartTime}
-                streamStartTime={streamStartTime}
-                onCurrentVideoTimeChange={handleCurrentVideoTimeChange}
-                onChannelNavigate={handleChannelNavigate}
-                prevChannel={prevChannel}
-                nextChannel={nextChannel}
-                showSidebar={showSidebar}
-                onToggleSidebar={handleToggleSidebar}
-                isFullscreen={isFullscreen}
-                onFullscreenToggle={handleFullscreenToggle}
-                seamlessSwitch={supportsSeamlessSwitch && seamlessSwitch}
-                autoDeinterlace={autoDeinterlace}
-                pictureEnhancement={pictureEnhancement}
-                pictureInPictureMode={pictureInPictureMode}
-                activeSourceIndex={activeSourceIndex}
-                onSourceChange={handleSourceChange}
-                onPlaybackStarted={handlePlaybackStarted}
-              />
-            </PlaybackTimeProvider>
+            <VideoPlayer
+              channel={currentChannel}
+              segments={playbackSegments}
+              playMode={playMode}
+              onError={handleVideoError}
+              locale={locale}
+              currentProgram={currentVideoProgram}
+              onSeek={handleVideoSeek}
+              onStreamStartTimeChange={setStreamStartTime}
+              streamStartTime={streamStartTime}
+              clock={playbackClock}
+              onChannelNavigate={handleChannelNavigate}
+              prevChannel={prevChannel}
+              nextChannel={nextChannel}
+              showSidebar={showSidebar}
+              onToggleSidebar={handleToggleSidebar}
+              isFullscreen={isFullscreen}
+              onFullscreenToggle={handleFullscreenToggle}
+              seamlessSwitch={supportsSeamlessSwitch && seamlessSwitch}
+              autoDeinterlace={autoDeinterlace}
+              pictureEnhancement={pictureEnhancement}
+              pictureInPictureMode={pictureInPictureMode}
+              activeSourceIndex={activeSourceIndex}
+              onSourceChange={handleSourceChange}
+              onPlaybackStarted={handlePlaybackStarted}
+            />
           </div>
 
           {/* Sidebar - Mobile: always visible (below video, hidden in fullscreen), Desktop: toggle-able side panel (visible in fullscreen) */}