From cc367d3bc6ec3528ce3c86103fa1f27d4c83e7b2 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Wed, 22 Jul 2026 13:33:53 +0000
Subject: [PATCH 1/6] Fix video ref tracking to prevent unnecessary re-renders

---
 templates/clips/app/routes/r.$recordingId.tsx | 16 ++++++++++------
 templates/clips/app/routes/share.$shareId.tsx | 13 +++++++++----
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/templates/clips/app/routes/r.$recordingId.tsx b/templates/clips/app/routes/r.$recordingId.tsx
index ec1b28ede7..a7c72fe58e 100644
--- a/templates/clips/app/routes/r.$recordingId.tsx
+++ b/templates/clips/app/routes/r.$recordingId.tsx
@@ -800,16 +800,20 @@ export default function RecordingPage() {
 
   usePlayerShortcuts({ playerRef, chapters });
 
-  const tracking = useViewTracking({
-    recordingId: recordingId ?? "",
-    videoRef: {
+  const trackedVideoRef = useMemo(
+    () => ({
       get current() {
         return playerRef.current?.video ?? null;
       },
-    } as any,
+    }),
+    [],
+  ) as React.RefObject<HTMLVideoElement | null>;
+
+  const tracking = useViewTracking({
+    recordingId: recordingId ?? "",
+    videoRef: trackedVideoRef,
     durationMs: recording?.durationMs ?? 0,
-    // Skip tracking for the owner — they shouldn't inflate their own views.
-    disabled: role === "owner",
+    disabled: role === "owner", // Skip tracking for the owner: they shouldn't inflate their own views.
   });
 
   if (!recordingId) return null;
diff --git a/templates/clips/app/routes/share.$shareId.tsx b/templates/clips/app/routes/share.$shareId.tsx
index 4b124ee5cf..b921fd3d45 100644
--- a/templates/clips/app/routes/share.$shareId.tsx
+++ b/templates/clips/app/routes/share.$shareId.tsx
@@ -579,13 +579,18 @@ export default function ShareRoute() {
 
   usePlayerShortcuts({ playerRef });
 
-  const tracking = useViewTracking({
-    recordingId: shareId ?? "",
-    videoRef: {
+  const trackedVideoRef = useMemo(
+    () => ({
       get current() {
         return playerRef.current?.video ?? null;
       },
-    } as any,
+    }),
+    [],
+  ) as React.RefObject<HTMLVideoElement | null>;
+
+  const tracking = useViewTracking({
+    recordingId: shareId ?? "",
+    videoRef: trackedVideoRef,
     durationMs: recording?.durationMs ?? 0,
     trackOpenWithoutVideo: isLoomEmbedBacked,
   });

From 90daff382762fa27d0bdb1fdf677df32b9c777aa Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Wed, 22 Jul 2026 16:44:51 +0000
Subject: [PATCH 2/6] fix(clips): reattach view tracking listeners when the
 video element changes

Guard the tracking effect by comparing the actual video DOM node instead
of relying on caller-side ref identity, so an edit-mode unmount/remount
on /r/:recordingId correctly reattaches listeners instead of leaving
them on the detached element.
---
 .../clips/app/hooks/use-view-tracking.ts      | 47 ++++++++++++++++---
 1 file changed, 40 insertions(+), 7 deletions(-)

diff --git a/templates/clips/app/hooks/use-view-tracking.ts b/templates/clips/app/hooks/use-view-tracking.ts
index 651410f31f..6ac05c30ea 100644
--- a/templates/clips/app/hooks/use-view-tracking.ts
+++ b/templates/clips/app/hooks/use-view-tracking.ts
@@ -46,10 +46,17 @@ export interface UseViewTrackingOpts {
  * Wires up the view-event tracker for a player instance. Fires a "view-start"
  * on mount, then throttled "watch-progress" every 5s while playing, plus
  * seek/pause/resume events and a final flush on unmount.
+ *
+ * Runs on every render (no dependency array) but only re-attaches listeners
+ * when `videoRef.current` actually changes identity — e.g. an edit-mode
+ * toggle unmounts/remounts the player. Reading the latest opts through a ref
+ * keeps long-lived listener closures (which may outlive several renders)
+ * from ever using stale values like `durationMs`.
  */
 export function useViewTracking(opts: UseViewTrackingOpts) {
-  const { recordingId, videoRef, durationMs, disabled, trackOpenWithoutVideo } =
-    opts;
+  const optsRef = useRef(opts);
+  optsRef.current = opts;
+
   const watchMsRef = useRef(0);
   const lastTickRef = useRef<number | null>(null);
   const startedRef = useRef(false);
@@ -57,16 +64,36 @@ export function useViewTracking(opts: UseViewTrackingOpts) {
   const lastSentProgressRef = useRef(0);
   const maxPctRef = useRef(0);
   const viewSessionRef = useRef<string | null>(null);
+  const attachedVideoRef = useRef<HTMLVideoElement | null>(null);
+  const hasAttachedRef = useRef(false);
+  const cleanupRef = useRef<() => void>(() => {});
 
   useEffect(() => {
-    if (disabled) return;
+    const { recordingId, videoRef, disabled, trackOpenWithoutVideo } =
+      optsRef.current;
+
+    if (disabled) {
+      cleanupRef.current();
+      cleanupRef.current = () => {};
+      hasAttachedRef.current = true;
+      attachedVideoRef.current = null;
+      return;
+    }
+
     const video = videoRef.current;
+    if (hasAttachedRef.current && video === attachedVideoRef.current) return;
+
+    cleanupRef.current();
+    hasAttachedRef.current = true;
+    attachedVideoRef.current = video;
+
     if (!video) {
       if (
         !trackOpenWithoutVideo ||
         !recordingId ||
         openTrackedRecordingRef.current === recordingId
       ) {
+        cleanupRef.current = () => {};
         return;
       }
       openTrackedRecordingRef.current = recordingId;
@@ -87,6 +114,7 @@ export function useViewTracking(opts: UseViewTrackingOpts) {
           payload: { source: "iframe-open" },
         }),
       }).catch(() => {});
+      cleanupRef.current = () => {};
       return;
     }
 
@@ -105,6 +133,7 @@ export function useViewTracking(opts: UseViewTrackingOpts) {
         | "reaction",
       extra?: Record<string, unknown>,
     ) {
+      const { recordingId, videoRef, durationMs } = optsRef.current;
       const v = videoRef.current;
       if (!v) return;
       const completedPct =
@@ -180,7 +209,7 @@ export function useViewTracking(opts: UseViewTrackingOpts) {
     video.addEventListener("seeked", onSeek);
     video.addEventListener("ended", onEnded);
 
-    return () => {
+    cleanupRef.current = () => {
       video.removeEventListener("play", onPlay);
       video.removeEventListener("pause", onPause);
       video.removeEventListener("seeked", onSeek);
@@ -189,7 +218,11 @@ export function useViewTracking(opts: UseViewTrackingOpts) {
       // Flush final progress.
       if (startedRef.current) post("watch-progress");
     };
-  }, [recordingId, videoRef, durationMs, disabled, trackOpenWithoutVideo]);
+  });
+
+  useEffect(() => {
+    return () => cleanupRef.current();
+  }, []);
 
   return {
     reportCtaClick: () => {
@@ -198,7 +231,7 @@ export function useViewTracking(opts: UseViewTrackingOpts) {
         keepalive: true,
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
-          recordingId,
+          recordingId: optsRef.current.recordingId,
           kind: "cta-click",
           sessionId: getSessionId(),
         }),
@@ -210,7 +243,7 @@ export function useViewTracking(opts: UseViewTrackingOpts) {
         keepalive: true,
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
-          recordingId,
+          recordingId: optsRef.current.recordingId,
           kind: "reaction",
           sessionId: getSessionId(),
           payload: { emoji },

From 9ade92e84fd8789e9d361862a34ebf56ea56741c Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Wed, 22 Jul 2026 17:04:47 +0000
Subject: [PATCH 3/6] fix(clips): reset view-tracking session state when
 recording or embed mode changes

The reattachment guard only compared the video DOM node, so a route that
reuses the same player instance for a different recordingId (or a Loom
share where trackOpenWithoutVideo flips true after the native video stays
null) would either bleed stale watch counters into the new recording or
skip the no-video iframe-open tracking entirely. Track recordingId and
trackOpenWithoutVideo alongside the video element, and reset all
per-session counters whenever any of them change.
---
 .../clips/app/hooks/use-view-tracking.ts      | 32 ++++++++++++++++---
 1 file changed, 27 insertions(+), 5 deletions(-)

diff --git a/templates/clips/app/hooks/use-view-tracking.ts b/templates/clips/app/hooks/use-view-tracking.ts
index 6ac05c30ea..b732659884 100644
--- a/templates/clips/app/hooks/use-view-tracking.ts
+++ b/templates/clips/app/hooks/use-view-tracking.ts
@@ -48,10 +48,12 @@ export interface UseViewTrackingOpts {
  * seek/pause/resume events and a final flush on unmount.
  *
  * Runs on every render (no dependency array) but only re-attaches listeners
- * when `videoRef.current` actually changes identity — e.g. an edit-mode
- * toggle unmounts/remounts the player. Reading the latest opts through a ref
- * keeps long-lived listener closures (which may outlive several renders)
- * from ever using stale values like `durationMs`.
+ * when the video element, recordingId, or trackOpenWithoutVideo actually
+ * change — e.g. an edit-mode toggle unmounts/remounts the player, or a
+ * route reuses the same player instance for a different recording. Reading
+ * the latest opts through a ref keeps long-lived listener closures (which
+ * may outlive several renders) from ever using stale values like
+ * `durationMs`.
  */
 export function useViewTracking(opts: UseViewTrackingOpts) {
   const optsRef = useRef(opts);
@@ -65,6 +67,8 @@ export function useViewTracking(opts: UseViewTrackingOpts) {
   const maxPctRef = useRef(0);
   const viewSessionRef = useRef<string | null>(null);
   const attachedVideoRef = useRef<HTMLVideoElement | null>(null);
+  const attachedRecordingIdRef = useRef<string | null>(null);
+  const attachedTrackOpenRef = useRef(false);
   const hasAttachedRef = useRef(false);
   const cleanupRef = useRef<() => void>(() => {});
 
@@ -77,15 +81,33 @@ export function useViewTracking(opts: UseViewTrackingOpts) {
       cleanupRef.current = () => {};
       hasAttachedRef.current = true;
       attachedVideoRef.current = null;
+      attachedRecordingIdRef.current = recordingId;
+      attachedTrackOpenRef.current = !!trackOpenWithoutVideo;
       return;
     }
 
     const video = videoRef.current;
-    if (hasAttachedRef.current && video === attachedVideoRef.current) return;
+    const unchanged =
+      hasAttachedRef.current &&
+      video === attachedVideoRef.current &&
+      recordingId === attachedRecordingIdRef.current &&
+      !!trackOpenWithoutVideo === attachedTrackOpenRef.current;
+    if (unchanged) return;
 
     cleanupRef.current();
     hasAttachedRef.current = true;
     attachedVideoRef.current = video;
+    attachedRecordingIdRef.current = recordingId;
+    attachedTrackOpenRef.current = !!trackOpenWithoutVideo;
+
+    // A different video element, recording, or embed mode starts a fresh
+    // tracking session — last session's counters must not carry over.
+    watchMsRef.current = 0;
+    lastTickRef.current = null;
+    startedRef.current = false;
+    lastSentProgressRef.current = 0;
+    maxPctRef.current = 0;
+    viewSessionRef.current = null;
 
     if (!video) {
       if (

From 09eca10d39b00a4ce72618df9e38704b552ba2e3 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Wed, 22 Jul 2026 21:48:41 +0000
Subject: [PATCH 4/6] fix(clips): correct final-flush recordingId and
 StrictMode remount handling

- post() now uses the recordingId captured at attach time for the outgoing
  event body instead of re-reading optsRef.current, which by cleanup time
  may already reflect a newer recordingId from a subsequent render,
  mislabeling the previous session's final watch-progress flush.
- The unmount effect now resets hasAttachedRef/attachedVideoRef/
  attachedRecordingIdRef/attachedTrackOpenRef after running cleanup, so a
  React StrictMode dev mount->cleanup->remount cycle (or any real remount
  reusing the same video/recording) re-attaches listeners instead of
  seeing 'unchanged' and silently leaving tracking disabled.
---
 templates/clips/app/hooks/use-view-tracking.ts | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/templates/clips/app/hooks/use-view-tracking.ts b/templates/clips/app/hooks/use-view-tracking.ts
index b732659884..a0153bb467 100644
--- a/templates/clips/app/hooks/use-view-tracking.ts
+++ b/templates/clips/app/hooks/use-view-tracking.ts
@@ -155,7 +155,7 @@ export function useViewTracking(opts: UseViewTrackingOpts) {
         | "reaction",
       extra?: Record<string, unknown>,
     ) {
-      const { recordingId, videoRef, durationMs } = optsRef.current;
+      const { videoRef, durationMs } = optsRef.current;
       const v = videoRef.current;
       if (!v) return;
       const completedPct =
@@ -243,7 +243,17 @@ export function useViewTracking(opts: UseViewTrackingOpts) {
   });
 
   useEffect(() => {
-    return () => cleanupRef.current();
+    return () => {
+      cleanupRef.current();
+      cleanupRef.current = () => {};
+      // Reset attachment identity so a StrictMode dev remount (or any real
+      // remount that reuses the same video/recording) re-attaches instead
+      // of seeing "unchanged" and silently skipping setup.
+      hasAttachedRef.current = false;
+      attachedVideoRef.current = null;
+      attachedRecordingIdRef.current = null;
+      attachedTrackOpenRef.current = false;
+    };
   }, []);
 
   return {

From ff4534f953b3d77e4ec26f2cdfbb31dfcf1312a2 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Wed, 22 Jul 2026 22:16:56 +0000
Subject: [PATCH 5/6] fix(clips): use session-scoped duration for flushes,
 reset iframe-open dedup on unmount

- post() now reads durationMs from a dedicated durationMsRef instead of
  optsRef.current, which is updated to a new session's duration BEFORE the
  old session's cleanup flush runs. durationMsRef only advances to the new
  value after the old session's teardown, and stays live-synced during an
  unchanged session so an async-loaded duration is still picked up without
  a full reattach.
- The unmount effect now also resets openTrackedRecordingRef, so a later
  reopen of the same no-video (Loom-backed) recording fires its
  view-start again instead of being permanently deduped by a stale guard
  left over from the previous attachment.
---
 .../clips/app/hooks/use-view-tracking.ts      | 30 +++++++++++++++----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/templates/clips/app/hooks/use-view-tracking.ts b/templates/clips/app/hooks/use-view-tracking.ts
index a0153bb467..5c1df293fa 100644
--- a/templates/clips/app/hooks/use-view-tracking.ts
+++ b/templates/clips/app/hooks/use-view-tracking.ts
@@ -71,10 +71,16 @@ export function useViewTracking(opts: UseViewTrackingOpts) {
   const attachedTrackOpenRef = useRef(false);
   const hasAttachedRef = useRef(false);
   const cleanupRef = useRef<() => void>(() => {});
+  const durationMsRef = useRef(opts.durationMs);
 
   useEffect(() => {
-    const { recordingId, videoRef, disabled, trackOpenWithoutVideo } =
-      optsRef.current;
+    const {
+      recordingId,
+      videoRef,
+      disabled,
+      trackOpenWithoutVideo,
+      durationMs,
+    } = optsRef.current;
 
     if (disabled) {
       cleanupRef.current();
@@ -92,9 +98,19 @@ export function useViewTracking(opts: UseViewTrackingOpts) {
       video === attachedVideoRef.current &&
       recordingId === attachedRecordingIdRef.current &&
       !!trackOpenWithoutVideo === attachedTrackOpenRef.current;
-    if (unchanged) return;
+    if (unchanged) {
+      // Still the same session — keep the duration in sync so an
+      // async-loaded duration is reflected without a full reattach. Do
+      // this before any potential teardown below so a genuine session
+      // change never mutates the ref before the old session's final flush.
+      durationMsRef.current = durationMs;
+      return;
+    }
 
+    // Tear down the previous session's listeners while durationMsRef still
+    // holds its duration, so its final flush computes completion correctly.
     cleanupRef.current();
+    durationMsRef.current = durationMs;
     hasAttachedRef.current = true;
     attachedVideoRef.current = video;
     attachedRecordingIdRef.current = recordingId;
@@ -155,9 +171,10 @@ export function useViewTracking(opts: UseViewTrackingOpts) {
         | "reaction",
       extra?: Record<string, unknown>,
     ) {
-      const { videoRef, durationMs } = optsRef.current;
+      const { videoRef } = optsRef.current;
       const v = videoRef.current;
       if (!v) return;
+      const durationMs = durationMsRef.current;
       const completedPct =
         durationMs > 0 ? (watchMsRef.current / durationMs) * 100 : 0;
       maxPctRef.current = Math.max(
@@ -248,11 +265,14 @@ export function useViewTracking(opts: UseViewTrackingOpts) {
       cleanupRef.current = () => {};
       // Reset attachment identity so a StrictMode dev remount (or any real
       // remount that reuses the same video/recording) re-attaches instead
-      // of seeing "unchanged" and silently skipping setup.
+      // of seeing "unchanged" and silently skipping setup. Also reset the
+      // iframe-open dedup guard so a later reopen of the same no-video
+      // (e.g. Loom-backed) recording fires its view-start again.
       hasAttachedRef.current = false;
       attachedVideoRef.current = null;
       attachedRecordingIdRef.current = null;
       attachedTrackOpenRef.current = false;
+      openTrackedRecordingRef.current = null;
     };
   }, []);
 

From cb3d008e05da6b776eb1a01659bf68f9466caa3d Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Wed, 22 Jul 2026 23:49:43 +0000
Subject: [PATCH 6/6] refactor(clips): redesign view tracking to depend on the
 actual video element
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Per review feedback: the previous fix layered manual attachment-identity
bookkeeping (hasAttachedRef/attachedVideoRef/attachedRecordingIdRef/
attachedTrackOpenRef) onto useViewTracking to work around an unstable
videoRef object, but still had an unresolved bug — post() read
videoRef.current live during a session's cleanup, which could already
point at a different video (or null) by the time that cleanup ran.

- VideoPlayer now accepts onVideoElementChange, wired to the real <video>
  ref via a callback ref, so callers can hold the actual HTMLVideoElement
  in state instead of polling an imperative-handle getter.
- useViewTracking now takes that element directly (videoEl) and depends
  on [recordingId, videoEl, trackOpenWithoutVideo, disabled] in a normal
  useEffect. React's own dependency comparison decides when to reattach;
  each closure captures its own video/recordingId, so a cleanup's final
  flush always describes the session it belonged to. durationMs stays
  read live from a ref since it can load asynchronously without needing
  a reattach.
- r.$recordingId.tsx, share.$shareId.tsx, embed.$shareId.tsx: hold the
  video element in useState instead of the unstable inline ref-getter
  object. embed.$shareId.tsx had the identical bug and was previously
  unaddressed by this PR.
- Added use-view-tracking.test.tsx covering: rerenders while playing,
  video replacement (Edit -> Done), recordingId changes on a reused
  element, async Loom trackOpenWithoutVideo activation, unmount/final-
  flush attribution, and StrictMode's dev mount/cleanup/remount cycle.
---
 .../app/components/player/video-player.tsx    |  17 +-
 .../app/hooks/use-view-tracking.test.tsx      | 295 ++++++++++++++++++
 .../clips/app/hooks/use-view-tracking.ts      | 136 +++-----
 templates/clips/app/routes/embed.$shareId.tsx |  11 +-
 templates/clips/app/routes/r.$recordingId.tsx |  14 +-
 templates/clips/app/routes/share.$shareId.tsx |  14 +-
 6 files changed, 374 insertions(+), 113 deletions(-)
 create mode 100644 templates/clips/app/hooks/use-view-tracking.test.tsx

diff --git a/templates/clips/app/components/player/video-player.tsx b/templates/clips/app/components/player/video-player.tsx
index d306afb79a..3c908af40a 100644
--- a/templates/clips/app/components/player/video-player.tsx
+++ b/templates/clips/app/components/player/video-player.tsx
@@ -209,6 +209,13 @@ export interface VideoPlayerProps {
    * a visible frame for missing or blank auto-generated library thumbnails.
    */
   role?: "owner" | "admin" | "editor" | "viewer";
+  /**
+   * Called with the live `<video>` DOM node whenever it is created or
+   * destroyed (e.g. swapping to/from the Loom iframe or unsupported-format
+   * placeholder). Lets a caller key an effect off the actual element
+   * lifecycle instead of polling an imperative-handle getter.
+   */
+  onVideoElementChange?: (video: HTMLVideoElement | null) => void;
 }
 
 export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
@@ -245,6 +252,7 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
       cover,
       recordingId,
       role,
+      onVideoElementChange,
     } = props;
 
     const resolvedVideoSrc = useMemo(
@@ -252,6 +260,13 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
       [videoUrl],
     );
     const videoRef = useRef<HTMLVideoElement | null>(null);
+    const setVideoNode = useCallback(
+      (el: HTMLVideoElement | null) => {
+        videoRef.current = el;
+        onVideoElementChange?.(el);
+      },
+      [onVideoElementChange],
+    );
     const containerRef = useRef<HTMLDivElement | null>(null);
     const idleTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
     const touchTapCandidateRef = useRef<{
@@ -1262,7 +1277,7 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
           </div>
         ) : activeVideoSrc ? (
           <video
-            ref={videoRef}
+            ref={setVideoNode}
             src={domVideoSrc}
             poster={resolveLocalUrl(thumbnailUrl)}
             // `crossOrigin` is only needed so the owner's canvas thumbnail
diff --git a/templates/clips/app/hooks/use-view-tracking.test.tsx b/templates/clips/app/hooks/use-view-tracking.test.tsx
new file mode 100644
index 0000000000..2e7064ab5e
--- /dev/null
+++ b/templates/clips/app/hooks/use-view-tracking.test.tsx
@@ -0,0 +1,295 @@
+// @vitest-environment happy-dom
+
+import React, { act, StrictMode, useState } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { useViewTracking } from "./use-view-tracking";
+
+vi.mock("@agent-native/core/client/api-path", () => ({
+  appBasePath: () => "",
+}));
+
+interface HarnessProps {
+  recordingId: string;
+  durationMs: number;
+  disabled?: boolean;
+  trackOpenWithoutVideo?: boolean;
+  withVideo?: boolean;
+}
+
+function Harness({ withVideo = true, ...opts }: HarnessProps) {
+  const [videoEl, setVideoEl] = useState<HTMLVideoElement | null>(null);
+  useViewTracking({
+    ...opts,
+    videoEl: withVideo ? videoEl : null,
+  });
+  return withVideo ? <video ref={setVideoEl} /> : null;
+}
+
+function viewEventBodies(fetchMock: ReturnType<typeof vi.fn>) {
+  return fetchMock.mock.calls
+    .filter(([url]) => String(url).includes("/api/view-event"))
+    .map(([, init]) => JSON.parse((init as RequestInit).body as string));
+}
+
+describe("useViewTracking", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+  let fetchMock: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    vi.useFakeTimers({
+      toFake: [
+        "setTimeout",
+        "clearTimeout",
+        "setInterval",
+        "clearInterval",
+        "Date",
+        "performance",
+      ],
+    });
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+    fetchMock = vi.fn().mockResolvedValue({ ok: true, json: async () => ({}) });
+    vi.stubGlobal("fetch", fetchMock);
+    try {
+      localStorage.clear();
+    } catch {}
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+    vi.clearAllMocks();
+  });
+
+  function getVideo(): HTMLVideoElement {
+    const video = container.querySelector("video");
+    if (!video) throw new Error("no <video> rendered");
+    return video;
+  }
+
+  it("keeps accumulating watch time across unrelated parent rerenders while playing", () => {
+    act(() => {
+      root.render(<Harness recordingId="rec-a" durationMs={10_000} />);
+    });
+    const video = getVideo();
+
+    act(() => {
+      video.dispatchEvent(new Event("play"));
+    });
+
+    // Re-render with the exact same tracked identity (video/recordingId/
+    // trackOpenWithoutVideo/disabled unchanged) several times, simulating
+    // unrelated parent state updates (e.g. a scrubber position re-render).
+    for (let i = 0; i < 5; i++) {
+      act(() => {
+        root.render(<Harness recordingId="rec-a" durationMs={10_000} />);
+      });
+    }
+
+    act(() => {
+      vi.advanceTimersByTime(6000);
+    });
+
+    const bodies = viewEventBodies(fetchMock);
+    const progress = bodies.filter((b) => b.kind === "watch-progress");
+    expect(progress.length).toBeGreaterThan(0);
+    // The heartbeat interval must never have been torn down by the
+    // unrelated rerenders, so watch time keeps accumulating past the
+    // counted-view threshold.
+    expect(progress[progress.length - 1].totalWatchMs).toBeGreaterThanOrEqual(
+      4000,
+    );
+  });
+
+  it("reattaches with a fresh session when the video element is replaced (Edit -> Done)", () => {
+    act(() => {
+      root.render(<Harness recordingId="rec-a" durationMs={10_000} />);
+    });
+    let video = getVideo();
+    act(() => {
+      video.dispatchEvent(new Event("play"));
+    });
+    act(() => {
+      vi.advanceTimersByTime(6000);
+    });
+
+    // "Edit" — the player (and its <video>) unmounts.
+    act(() => {
+      root.render(
+        <Harness recordingId="rec-a" durationMs={10_000} withVideo={false} />,
+      );
+    });
+    // "Done" — a brand new player/video mounts.
+    act(() => {
+      root.render(<Harness recordingId="rec-a" durationMs={10_000} />);
+    });
+    video = getVideo();
+
+    act(() => {
+      video.dispatchEvent(new Event("play"));
+    });
+    act(() => {
+      vi.advanceTimersByTime(6000);
+    });
+
+    const bodies = viewEventBodies(fetchMock);
+    const viewStarts = bodies.filter((b) => b.kind === "view-start");
+    // One view-start for the original attach, one for the post-edit remount.
+    expect(viewStarts).toHaveLength(2);
+    expect(viewStarts[0].viewSessionId).not.toBe(viewStarts[1].viewSessionId);
+
+    const secondSessionProgress = bodies.filter(
+      (b) =>
+        b.kind === "watch-progress" &&
+        b.viewSessionId === viewStarts[1].viewSessionId,
+    );
+    expect(secondSessionProgress.length).toBeGreaterThan(0);
+    // The new session must not start with the old session's watch time
+    // already counted.
+    expect(secondSessionProgress[0].totalWatchMs).toBeLessThan(6000);
+  });
+
+  it("flushes the outgoing recording's own id when recordingId changes on a reused video element", () => {
+    act(() => {
+      root.render(<Harness recordingId="rec-a" durationMs={10_000} />);
+    });
+    const video = getVideo();
+    act(() => {
+      video.dispatchEvent(new Event("play"));
+    });
+    act(() => {
+      vi.advanceTimersByTime(6000);
+    });
+
+    // Same component instance and DOM node persist — only recordingId (and
+    // duration) change, simulating a route that reuses the player for a
+    // different recording without remounting.
+    act(() => {
+      root.render(<Harness recordingId="rec-b" durationMs={20_000} />);
+    });
+
+    const bodies = viewEventBodies(fetchMock);
+    // The final flush triggered by tearing down rec-a's session must still
+    // be posted under rec-a, never rec-b.
+    const misattributed = bodies.filter(
+      (b) => b.kind === "watch-progress" && b.recordingId === "rec-b",
+    );
+    expect(misattributed).toHaveLength(0);
+
+    const flushesForA = bodies.filter(
+      (b) => b.kind === "watch-progress" && b.recordingId === "rec-a",
+    );
+    expect(flushesForA.length).toBeGreaterThan(0);
+
+    // rec-b gets its own fresh session — playing it posts view-start under
+    // rec-b, not rec-a.
+    act(() => {
+      video.dispatchEvent(new Event("play"));
+    });
+    const viewStartsForB = viewEventBodies(fetchMock).filter(
+      (b) => b.kind === "view-start" && b.recordingId === "rec-b",
+    );
+    expect(viewStartsForB).toHaveLength(1);
+  });
+
+  it("fires the no-video view-start once trackOpenWithoutVideo resolves true (async Loom activation)", () => {
+    act(() => {
+      root.render(
+        <Harness
+          recordingId="rec-loom"
+          durationMs={0}
+          withVideo={false}
+          trackOpenWithoutVideo={false}
+        />,
+      );
+    });
+
+    expect(viewEventBodies(fetchMock)).toHaveLength(0);
+
+    // The public-recording query resolves and reveals this is Loom-backed.
+    act(() => {
+      root.render(
+        <Harness
+          recordingId="rec-loom"
+          durationMs={0}
+          withVideo={false}
+          trackOpenWithoutVideo
+        />,
+      );
+    });
+
+    const bodies = viewEventBodies(fetchMock);
+    expect(bodies).toHaveLength(1);
+    expect(bodies[0]).toMatchObject({
+      kind: "view-start",
+      recordingId: "rec-loom",
+      payload: { source: "iframe-open" },
+    });
+
+    // Further unrelated rerenders with the same resolved value must not
+    // re-fire it.
+    act(() => {
+      root.render(
+        <Harness
+          recordingId="rec-loom"
+          durationMs={0}
+          withVideo={false}
+          trackOpenWithoutVideo
+        />,
+      );
+    });
+    expect(viewEventBodies(fetchMock)).toHaveLength(1);
+  });
+
+  it("flushes final watch progress for the correct recording on unmount", () => {
+    act(() => {
+      root.render(<Harness recordingId="rec-a" durationMs={10_000} />);
+    });
+    const video = getVideo();
+    act(() => {
+      video.dispatchEvent(new Event("play"));
+    });
+    act(() => {
+      vi.advanceTimersByTime(6000);
+    });
+
+    act(() => {
+      root.unmount();
+    });
+
+    const bodies = viewEventBodies(fetchMock);
+    const flushes = bodies.filter(
+      (b) => b.kind === "watch-progress" && b.recordingId === "rec-a",
+    );
+    expect(flushes.length).toBeGreaterThan(0);
+    expect(flushes[flushes.length - 1].totalWatchMs).toBeGreaterThanOrEqual(
+      6000,
+    );
+  });
+
+  it("does not double-post the no-video view-start under StrictMode's dev mount/cleanup/remount cycle", () => {
+    act(() => {
+      root.render(
+        <StrictMode>
+          <Harness
+            recordingId="rec-strict"
+            durationMs={0}
+            withVideo={false}
+            trackOpenWithoutVideo
+          />
+        </StrictMode>,
+      );
+    });
+
+    const bodies = viewEventBodies(fetchMock);
+    const viewStarts = bodies.filter((b) => b.kind === "view-start");
+    expect(viewStarts).toHaveLength(1);
+  });
+});
diff --git a/templates/clips/app/hooks/use-view-tracking.ts b/templates/clips/app/hooks/use-view-tracking.ts
index 5c1df293fa..093197329d 100644
--- a/templates/clips/app/hooks/use-view-tracking.ts
+++ b/templates/clips/app/hooks/use-view-tracking.ts
@@ -34,7 +34,14 @@ function createViewSessionId(recordingId: string): string {
 
 export interface UseViewTrackingOpts {
   recordingId: string;
-  videoRef: React.RefObject<HTMLVideoElement | null>;
+  /**
+   * The live `<video>` DOM node, or `null` when there is none (e.g. a Loom
+   * iframe embed). Pass the actual element — not a ref wrapper — so this
+   * hook's effect can depend on it directly and React's own dependency
+   * comparison decides when to reattach, instead of hand-rolled identity
+   * bookkeeping.
+   */
+  videoEl: HTMLVideoElement | null;
   durationMs: number;
   /** Disable tracking entirely (e.g. for the recording's owner viewing their own clip). */
   disabled?: boolean;
@@ -47,17 +54,22 @@ export interface UseViewTrackingOpts {
  * on mount, then throttled "watch-progress" every 5s while playing, plus
  * seek/pause/resume events and a final flush on unmount.
  *
- * Runs on every render (no dependency array) but only re-attaches listeners
- * when the video element, recordingId, or trackOpenWithoutVideo actually
- * change — e.g. an edit-mode toggle unmounts/remounts the player, or a
- * route reuses the same player instance for a different recording. Reading
- * the latest opts through a ref keeps long-lived listener closures (which
- * may outlive several renders) from ever using stale values like
- * `durationMs`.
+ * The effect depends on `[recordingId, videoEl, trackOpenWithoutVideo,
+ * disabled]`, so React naturally creates a fresh closure — and runs the
+ * previous one's cleanup — exactly when any of those actually change (a
+ * different video element, a different recording, or the no-video/embed
+ * mode flipping). Each closure captures its own `recordingId` and `videoEl`,
+ * so a cleanup's final flush always describes the session it belonged to,
+ * never a session that has since replaced it.
+ *
+ * `durationMs` is intentionally excluded from the dependency array — it can
+ * load asynchronously after the video/recording is already attached, and
+ * reattaching just for that would be wasted work. It's kept in a ref that's
+ * synced every render and read fresh inside `post()`.
  */
 export function useViewTracking(opts: UseViewTrackingOpts) {
-  const optsRef = useRef(opts);
-  optsRef.current = opts;
+  const { recordingId, videoEl, durationMs, disabled, trackOpenWithoutVideo } =
+    opts;
 
   const watchMsRef = useRef(0);
   const lastTickRef = useRef<number | null>(null);
@@ -66,58 +78,17 @@ export function useViewTracking(opts: UseViewTrackingOpts) {
   const lastSentProgressRef = useRef(0);
   const maxPctRef = useRef(0);
   const viewSessionRef = useRef<string | null>(null);
-  const attachedVideoRef = useRef<HTMLVideoElement | null>(null);
-  const attachedRecordingIdRef = useRef<string | null>(null);
-  const attachedTrackOpenRef = useRef(false);
-  const hasAttachedRef = useRef(false);
-  const cleanupRef = useRef<() => void>(() => {});
-  const durationMsRef = useRef(opts.durationMs);
-
-  useEffect(() => {
-    const {
-      recordingId,
-      videoRef,
-      disabled,
-      trackOpenWithoutVideo,
-      durationMs,
-    } = optsRef.current;
+  const durationMsRef = useRef(durationMs);
+  const recordingIdRef = useRef(recordingId);
 
-    if (disabled) {
-      cleanupRef.current();
-      cleanupRef.current = () => {};
-      hasAttachedRef.current = true;
-      attachedVideoRef.current = null;
-      attachedRecordingIdRef.current = recordingId;
-      attachedTrackOpenRef.current = !!trackOpenWithoutVideo;
-      return;
-    }
-
-    const video = videoRef.current;
-    const unchanged =
-      hasAttachedRef.current &&
-      video === attachedVideoRef.current &&
-      recordingId === attachedRecordingIdRef.current &&
-      !!trackOpenWithoutVideo === attachedTrackOpenRef.current;
-    if (unchanged) {
-      // Still the same session — keep the duration in sync so an
-      // async-loaded duration is reflected without a full reattach. Do
-      // this before any potential teardown below so a genuine session
-      // change never mutates the ref before the old session's final flush.
-      durationMsRef.current = durationMs;
-      return;
-    }
+  durationMsRef.current = durationMs;
+  recordingIdRef.current = recordingId;
 
-    // Tear down the previous session's listeners while durationMsRef still
-    // holds its duration, so its final flush computes completion correctly.
-    cleanupRef.current();
-    durationMsRef.current = durationMs;
-    hasAttachedRef.current = true;
-    attachedVideoRef.current = video;
-    attachedRecordingIdRef.current = recordingId;
-    attachedTrackOpenRef.current = !!trackOpenWithoutVideo;
+  useEffect(() => {
+    if (disabled) return;
 
-    // A different video element, recording, or embed mode starts a fresh
-    // tracking session — last session's counters must not carry over.
+    // Reset per-session counters — this effect only reruns when the video
+    // element, recording, or embed mode actually change.
     watchMsRef.current = 0;
     lastTickRef.current = null;
     startedRef.current = false;
@@ -125,15 +96,18 @@ export function useViewTracking(opts: UseViewTrackingOpts) {
     maxPctRef.current = 0;
     viewSessionRef.current = null;
 
-    if (!video) {
+    if (!videoEl) {
       if (
         !trackOpenWithoutVideo ||
         !recordingId ||
         openTrackedRecordingRef.current === recordingId
       ) {
-        cleanupRef.current = () => {};
         return;
       }
+      // Persists for the hook's lifetime (never reset on cleanup): this is
+      // what stops a React StrictMode dev mount->cleanup->remount cycle
+      // from double-posting the same iframe-open view-start, since — unlike
+      // the with-video path below — there's no native DOM event gating it.
       openTrackedRecordingRef.current = recordingId;
       viewSessionRef.current = createViewSessionId(recordingId);
       fetch(`${appBasePath()}/api/view-event`, {
@@ -152,10 +126,10 @@ export function useViewTracking(opts: UseViewTrackingOpts) {
           payload: { source: "iframe-open" },
         }),
       }).catch(() => {});
-      cleanupRef.current = () => {};
       return;
     }
 
+    const video = videoEl;
     const sessionId = getSessionId();
     viewSessionRef.current = createViewSessionId(recordingId);
     let progressTimer: ReturnType<typeof setInterval> | null = null;
@@ -171,9 +145,6 @@ export function useViewTracking(opts: UseViewTrackingOpts) {
         | "reaction",
       extra?: Record<string, unknown>,
     ) {
-      const { videoRef } = optsRef.current;
-      const v = videoRef.current;
-      if (!v) return;
       const durationMs = durationMsRef.current;
       const completedPct =
         durationMs > 0 ? (watchMsRef.current / durationMs) * 100 : 0;
@@ -188,12 +159,13 @@ export function useViewTracking(opts: UseViewTrackingOpts) {
         body: JSON.stringify({
           recordingId,
           kind,
-          timestampMs: Math.floor(v.currentTime * 1000),
+          timestampMs: Math.floor(video.currentTime * 1000),
           sessionId,
           viewSessionId: viewSessionRef.current,
           totalWatchMs: Math.floor(watchMsRef.current),
           completedPct: Math.floor(maxPctRef.current),
-          scrubbedToEnd: v.duration > 0 && v.currentTime >= v.duration - 0.5,
+          scrubbedToEnd:
+            video.duration > 0 && video.currentTime >= video.duration - 0.5,
           payload: extra,
         }),
       }).catch(() => {});
@@ -248,33 +220,19 @@ export function useViewTracking(opts: UseViewTrackingOpts) {
     video.addEventListener("seeked", onSeek);
     video.addEventListener("ended", onEnded);
 
-    cleanupRef.current = () => {
+    return () => {
       video.removeEventListener("play", onPlay);
       video.removeEventListener("pause", onPause);
       video.removeEventListener("seeked", onSeek);
       video.removeEventListener("ended", onEnded);
       if (progressTimer) clearInterval(progressTimer);
-      // Flush final progress.
+      // Flush final progress, still scoped to this closure's own video and
+      // recordingId — never one a later render has since moved on to.
       if (startedRef.current) post("watch-progress");
     };
-  });
-
-  useEffect(() => {
-    return () => {
-      cleanupRef.current();
-      cleanupRef.current = () => {};
-      // Reset attachment identity so a StrictMode dev remount (or any real
-      // remount that reuses the same video/recording) re-attaches instead
-      // of seeing "unchanged" and silently skipping setup. Also reset the
-      // iframe-open dedup guard so a later reopen of the same no-video
-      // (e.g. Loom-backed) recording fires its view-start again.
-      hasAttachedRef.current = false;
-      attachedVideoRef.current = null;
-      attachedRecordingIdRef.current = null;
-      attachedTrackOpenRef.current = false;
-      openTrackedRecordingRef.current = null;
-    };
-  }, []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- durationMs is
+    // deliberately excluded; it's read live from durationMsRef inside post().
+  }, [recordingId, videoEl, trackOpenWithoutVideo, disabled]);
 
   return {
     reportCtaClick: () => {
@@ -283,7 +241,7 @@ export function useViewTracking(opts: UseViewTrackingOpts) {
         keepalive: true,
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
-          recordingId: optsRef.current.recordingId,
+          recordingId: recordingIdRef.current,
           kind: "cta-click",
           sessionId: getSessionId(),
         }),
@@ -295,7 +253,7 @@ export function useViewTracking(opts: UseViewTrackingOpts) {
         keepalive: true,
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
-          recordingId: optsRef.current.recordingId,
+          recordingId: recordingIdRef.current,
           kind: "reaction",
           sessionId: getSessionId(),
           payload: { emoji },
diff --git a/templates/clips/app/routes/embed.$shareId.tsx b/templates/clips/app/routes/embed.$shareId.tsx
index 316d876997..7596ff256b 100644
--- a/templates/clips/app/routes/embed.$shareId.tsx
+++ b/templates/clips/app/routes/embed.$shareId.tsx
@@ -131,13 +131,13 @@ export default function EmbedRoute() {
   const firstCta = ctas[0] ?? null;
   const isLoomEmbedBacked = isLoomEmbedBackedRecording(recording);
 
+  const [trackedVideoEl, setTrackedVideoEl] = useState<HTMLVideoElement | null>(
+    null,
+  );
+
   const tracking = useViewTracking({
     recordingId: shareId ?? "",
-    videoRef: {
-      get current() {
-        return playerRef.current?.video ?? null;
-      },
-    } as any,
+    videoEl: trackedVideoEl,
     durationMs: recording?.durationMs ?? 0,
     trackOpenWithoutVideo: isLoomEmbedBacked,
   });
@@ -193,6 +193,7 @@ export default function EmbedRoute() {
     <div className="fixed inset-0 h-dvh w-dvw overflow-hidden bg-black">
       <VideoPlayer
         ref={playerRef}
+        onVideoElementChange={setTrackedVideoEl}
         recordingId={recording.id}
         videoUrl={recording.videoUrl}
         videoFormat={recording.videoFormat}
diff --git a/templates/clips/app/routes/r.$recordingId.tsx b/templates/clips/app/routes/r.$recordingId.tsx
index a7c72fe58e..343dec474f 100644
--- a/templates/clips/app/routes/r.$recordingId.tsx
+++ b/templates/clips/app/routes/r.$recordingId.tsx
@@ -800,18 +800,13 @@ export default function RecordingPage() {
 
   usePlayerShortcuts({ playerRef, chapters });
 
-  const trackedVideoRef = useMemo(
-    () => ({
-      get current() {
-        return playerRef.current?.video ?? null;
-      },
-    }),
-    [],
-  ) as React.RefObject<HTMLVideoElement | null>;
+  const [trackedVideoEl, setTrackedVideoEl] = useState<HTMLVideoElement | null>(
+    null,
+  );
 
   const tracking = useViewTracking({
     recordingId: recordingId ?? "",
-    videoRef: trackedVideoRef,
+    videoEl: trackedVideoEl,
     durationMs: recording?.durationMs ?? 0,
     disabled: role === "owner", // Skip tracking for the owner: they shouldn't inflate their own views.
   });
@@ -1549,6 +1544,7 @@ export default function RecordingPage() {
               <div className="relative aspect-video w-full xl:min-h-0 xl:flex-1 xl:aspect-auto">
                 <VideoPlayer
                   ref={playerRef}
+                  onVideoElementChange={setTrackedVideoEl}
                   recordingId={recording.id}
                   videoUrl={recording.videoUrl}
                   videoFormat={recording.videoFormat}
diff --git a/templates/clips/app/routes/share.$shareId.tsx b/templates/clips/app/routes/share.$shareId.tsx
index b921fd3d45..31b51f6db7 100644
--- a/templates/clips/app/routes/share.$shareId.tsx
+++ b/templates/clips/app/routes/share.$shareId.tsx
@@ -579,18 +579,13 @@ export default function ShareRoute() {
 
   usePlayerShortcuts({ playerRef });
 
-  const trackedVideoRef = useMemo(
-    () => ({
-      get current() {
-        return playerRef.current?.video ?? null;
-      },
-    }),
-    [],
-  ) as React.RefObject<HTMLVideoElement | null>;
+  const [trackedVideoEl, setTrackedVideoEl] = useState<HTMLVideoElement | null>(
+    null,
+  );
 
   const tracking = useViewTracking({
     recordingId: shareId ?? "",
-    videoRef: trackedVideoRef,
+    videoEl: trackedVideoEl,
     durationMs: recording?.durationMs ?? 0,
     trackOpenWithoutVideo: isLoomEmbedBacked,
   });
@@ -966,6 +961,7 @@ export default function ShareRoute() {
           <div className="aspect-video w-full lg:min-h-0 lg:flex-1 lg:aspect-auto">
             <VideoPlayer
               ref={playerRef}
+              onVideoElementChange={setTrackedVideoEl}
               recordingId={recording.id}
               videoUrl={recording.videoUrl}
               videoFormat={recording.videoFormat}