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 5d03de21..4bfe3802 100644
--- a/web-ui/src/components/player/epg-view.tsx
+++ b/web-ui/src/components/player/epg-view.tsx
@@ -1,17 +1,8 @@
 import { clsx } from "clsx";
 import { Circle, History } from "lucide-react";
-import {
-  memo,
-  type RefObject,
-  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";
@@ -35,30 +26,50 @@ interface EPGViewProps {
 
 export const nextScrollBehaviorRef: RefObject<"smooth" | "instant" | "skip"> = { current: "instant" };
 
+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[];
+}
+
 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 +114,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 +145,84 @@ 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;
   handleProgramClick: (programStart: Date, programEnd: Date) => void;
   locale: Locale;
-  programsByDate: Map<string, EPGProgram[]>;
+  section: EPGDateSectionData;
   supportsCatchup: boolean;
 }
 
-const EPGProgramList = memo(function EPGProgramList({
-  currentPlayingProgram,
+/** One day of programmes under a sticky date header. */
+const EPGDateSection = memo(function EPGDateSection({
+  currentPlayingProgramId,
   currentProgramRef,
-  currentTime,
+  currentTimeMs,
   handleProgramClick,
   locale,
-  programsByDate,
+  section,
   supportsCatchup,
-}: EPGProgramListProps) {
+}: 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",
-        });
-    }
-  };
 
-  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">
-          <div className="space-y-2">
-            {programs.map((program) => (
-              <EPGProgramItem
-                key={program.id}
-                currentProgramRef={currentProgramRef}
-                handleProgramClick={handleProgramClick}
-                isPast={program.end <= currentTime}
-                locale={locale}
-                onAir={program.start <= currentTime && program.end > currentTime}
-                playing={currentPlayingProgram?.id === program.id}
-                program={program}
-                supportsCatchup={supportsCatchup}
-              />
-            ))}
-          </div>
+  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">
+        <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>
+  );
 });
 
 function EPGViewComponent({
@@ -217,54 +235,56 @@ function EPGViewComponent({
 }: EPGViewProps) {
   const t = usePlayerTranslation(locale);
   const currentProgramRef = useRef<HTMLButtonElement>(null);
-  const [currentTime, setCurrentTime] = useState(() => new Date());
-  const deferredCurrentTime = useDeferredValue(currentTime);
 
-  useEffect(() => {
-    const interval = window.setInterval(() => {
-      setCurrentTime(new Date());
-    }, 1000);
-    return () => window.clearInterval(interval);
-  }, []);
-
-  // 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);
-    });
-
-    return grouped;
-  }, [channelId, epgData]);
+  // 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,
+  // 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);
+  // 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 (!channelId) return [];
-    const programs = epgData[channelId];
-    if (!programs || programs.length === 0) return [];
-    // Return all available programs (no date range filtering)
-    return programs;
-  }, [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.
+  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]);
 
-  // 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 (!deferredPlayingProgram || !deferredChannelId || !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 =
@@ -276,7 +296,7 @@ function EPGViewComponent({
       behavior,
       block: "center",
     });
-  }, [currentPlayingProgram, channelId, channelPrograms]);
+  }, [deferredPlayingProgram, deferredChannelId, channelPrograms]);
 
   const handleProgramClick = useCallback(
     (programStart: Date, programEnd: Date) => {
@@ -286,7 +306,7 @@ function EPGViewComponent({
     [onProgramSelect],
   );
 
-  if (!channelId || channelPrograms.length === 0) {
+  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")}
@@ -297,15 +317,18 @@ 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}
-        />
+        {sections.map((section) => (
+          <EPGDateSection
+            key={section.dateKey}
+            currentPlayingProgramId={deferredPlayingProgram?.id}
+            currentProgramRef={currentProgramRef}
+            currentTimeMs={currentTimeMs}
+            handleProgramClick={handleProgramClick}
+            locale={locale}
+            section={section}
+            supportsCatchup={supportsCatchup}
+          />
+        ))}
       </div>
     </div>
   );
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 ec4a4799..409fe78f 100644
--- a/web-ui/src/components/player/playback-time-context.tsx
+++ b/web-ui/src/components/player/playback-time-context.tsx
@@ -1,16 +1,27 @@
-import { createContext, type ReactNode, useContext } from "react";
+import { createContext, type ReactNode, useContext, useSyncExternalStore } from "react";
+import type { PlaybackClock } from "./playback-clock";
 
-const PlaybackTimeContext = createContext(0);
+const noopSubscribe = () => () => {};
+const zero = () => 0;
+
+const PlaybackClockContext = createContext<PlaybackClock | null>(null);
 
 interface PlaybackTimeProviderProps {
   children: ReactNode;
-  value: number;
+  clock: PlaybackClock;
 }
 
-export function PlaybackTimeProvider({ children, value }: PlaybackTimeProviderProps) {
-  return <PlaybackTimeContext value={value}>{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>;
 }
 
-export function usePlaybackTime() {
-  return useContext(PlaybackTimeContext);
+/** Playback position in seconds; re-renders the caller on whole-second changes only. */
+export function usePlaybackTime(): number {
+  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 99bb8055..701ced92 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,
@@ -50,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";
@@ -65,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;
@@ -202,24 +206,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
@@ -266,7 +253,7 @@ function VideoPlayerComponent({
   onSeek,
   onStreamStartTimeChange,
   streamStartTime,
-  onCurrentVideoTimeChange,
+  clock,
   onChannelNavigate,
   prevChannel = null,
   nextChannel = null,
@@ -897,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", () => {
@@ -2061,9 +2048,14 @@ function VideoPlayerComponent({
           </div>
         )}
       </div>
-      {createPortal(playerSurface, playerPortalHost)}
+      <PlaybackTimeProvider clock={clock}>{createPortal(playerSurface, playerPortalHost)}</PlaybackTimeProvider>
     </div>
   );
 }
 
+// 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 };
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/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);
+}
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 ad4e4aef..eb088fb8 100644
--- a/web-ui/src/pages/player.tsx
+++ b/web-ui/src/pages/player.tsx
@@ -1,27 +1,18 @@
 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 { 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";
@@ -29,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 EPGData, fillEPGGaps, 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";
@@ -140,11 +131,8 @@ 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);
-  const currentVideoTimeRef = useRef(0);
-  const currentVideoSecondRef = useRef(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);
@@ -229,10 +217,8 @@ function PlayerPage() {
   }, [currentChannel, activeSource, activeSourceIndex, streamStartTime, seekAtLiveEdge, playbackBackendKind]);
 
   const resetCurrentVideoTime = useCallback(() => {
-    currentVideoTimeRef.current = 0;
-    currentVideoSecondRef.current = 0;
-    setCurrentVideoTime(0);
-  }, []);
+    playbackClock.reset();
+  }, [playbackClock]);
 
   const handleVideoSeek = useCallback(
     (seekTime: Date, goingLive: boolean) => {
@@ -262,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(() => {
@@ -316,13 +302,14 @@ 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],
+  );
+
+  // Programme at the current playback position (stream start + media clock)
+  const currentVideoProgram = useCurrentVideoProgram(playbackClock, currentEpgChannelId, epgData, streamStartTime);
 
   const handleLocaleChange = useCallback(
     (nextLocale: Locale) => {
@@ -416,30 +403,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);
@@ -457,21 +437,6 @@ function PlayerPage() {
     loadPlaylist();
   }, [loadPlaylist]);
 
-  // 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;
-
-    // Calculate absolute time based on stream start + current video position
-    const absoluteTime = mseToWallClock(deferredCurrentVideoTime, streamStartTime);
-    return getCurrentProgram(epgChannelId, epgData, absoluteTime);
-  }, [currentChannel, epgData, streamStartTime, deferredCurrentVideoTime]);
-
   const handleVideoError = useCallback((err: string) => {
     setError(err);
   }, []);
@@ -609,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 value={currentVideoTime}>
-              <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) */}
@@ -681,7 +644,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}