Replace declarative Video component with imperative controller

packages/protocol/PaintsCache.ts

@@ -1,7 +1,7 @@
 import { createSingleEntryCache } from "suspense";
 
-import { StreamingScreenShotCache } from "protocol/StreamingScreenShotCache";
 import { recordingTargetCache } from "replay-next/src/suspense/BuildIdCache";
+import { screenshotCache } from "replay-next/src/suspense/ScreenshotCache";
 import { find, findIndexGTE, findIndexLTE } from "replay-next/src/utils/array";
 import { getDimensions } from "replay-next/src/utils/image";
 import { replayClient } from "shared/client/ReplayClientContext";
@@ -41,17 +41,18 @@ export async function findFirstMeaningfulPaint() {
       const paint = paints[index];
 
       try {
-        const { value } = await StreamingScreenShotCache.readAsync(
+        const screenShot = await screenshotCache.readAsync(
           replayClient,
-          paint.time,
-          paint.point
+          paint.point,
+          paint.paintHash
         );
-        if (value && value.hash) {
-          const { width, height } = await getDimensions(value.hash, value.mimeType);
+
+        if (screenShot && screenShot.hash) {
+          const { width, height } = await getDimensions(screenShot.hash, screenShot.mimeType);
 
           // Estimate how "interesting" the screen is based on what % of the image is different pixels.
           // This is done to avoid showing something like a blank page or a mostly empty loading screen.
-          if (value.data.length > (width * height) / 40) {
+          if (screenShot.data.length > (width * height) / 40) {
             return paint;
           }
         }

packages/protocol/RepaintGraphicsCache.ts

@@ -0,0 +1,16 @@
+import { PauseId, repaintGraphicsResult } from "@replayio/protocol";
+import { Cache, createCache } from "suspense";
+
+import { ReplayClientInterface } from "shared/client/types";
+
+export const RepaintGraphicsCache: Cache<
+  [replayClient: ReplayClientInterface, pauseId: PauseId],
+  repaintGraphicsResult | null
+> = createCache({
+  config: { immutable: true },
+  debugLabel: "RepaintGraphicsCache",
+  getKey: ([replayClient, pauseId]) => pauseId,
+  load: async ([replayClient, pauseId]) => {
+    return replayClient.repaintGraphics(pauseId);
+  },
+});

src/ui/components/Comments/VideoComments/VideoComment.tsx

@@ -4,7 +4,7 @@ import { useLayoutEffect, useRef } from "react";
 import { isVisualCommentTypeData } from "replay-next/components/sources/utils/comments";
 import { Comment } from "shared/graphql/types";
 import { setHoveredCommentId, setSelectedCommentId } from "ui/actions/app";
-import { subscribe } from "ui/components/Video/MutableGraphicsState";
+import { mutableState } from "ui/components/Video/imperative/MutableGraphicsState";
 import { useAppDispatch } from "ui/setup/hooks";
 
 import styles from "./VideoComment.module.css";
@@ -26,8 +26,8 @@ export default function VideoComment({
     const element = elementRef.current;
     if (element) {
       // Imperatively position and scale these graphics to avoid "render lag" when resizes occur
-      return subscribe(state => {
-        const { height, width } = state;
+      return mutableState.listen(state => {
+        const { height, width } = state.graphicsRect;
         const { scaledX, scaledY } = typeData;
 
         element.style.left = `${scaledX * width}px`;

src/ui/components/NodePickerContext.tsx

@@ -13,7 +13,7 @@ import {
 import { highlightNode, unhighlightNode } from "devtools/client/inspector/markup/actions/markup";
 import { useMostRecentLoadedPause } from "replay-next/src/hooks/useMostRecentLoadedPause";
 import { ReplayClientContext } from "shared/client/ReplayClientContext";
-import { getMouseEventPosition } from "ui/components/Video/getMouseEventPosition";
+import { getMouseEventPosition } from "ui/components/Video/imperative/getMouseEventPosition";
 import { useAppDispatch } from "ui/setup/hooks";
 import { boundingRectsCache, getMouseTarget } from "ui/suspense/nodeCaches";
 

src/ui/components/Timeline/ProgressBars.tsx

@@ -1,35 +1,27 @@
 import clamp from "lodash/clamp";
-import React from "react";
 
-import {
-  getCurrentTime,
-  getHoverTime,
-  getPlaybackPrecachedTime,
-  getZoomRegion,
-} from "ui/reducers/timeline";
+import { getCurrentTime, getHoverTime, getZoomRegion } from "ui/reducers/timeline";
 import { useAppSelector } from "ui/setup/hooks";
 import { getVisiblePosition } from "ui/utils/timeline";
 
 export default function ProgressBars() {
   const currentTime = useAppSelector(getCurrentTime);
   const hoverTime = useAppSelector(getHoverTime);
-  const precachedTime = useAppSelector(getPlaybackPrecachedTime);
   const zoomRegion = useAppSelector(getZoomRegion);
 
   const percent = getVisiblePosition({ time: currentTime, zoom: zoomRegion }) * 100;
   const hoverPercent = getVisiblePosition({ time: hoverTime, zoom: zoomRegion }) * 100;
-  const precachedPercent = getVisiblePosition({ time: precachedTime, zoom: zoomRegion }) * 100;
 
   return (
     <>
       <div className="progress-line full" />
       <div
         className="progress-line preview-max"
-        style={{ width: `${clamp(Math.max(hoverPercent, precachedPercent), 0, 100)}%` }}
+        style={{ width: `${clamp(hoverPercent, 0, 100)}%` }}
       />
       <div
         className="progress-line preview-min"
-        style={{ width: `${clamp(Math.min(hoverPercent, precachedPercent), 0, 100)}%` }}
+        style={{ width: `${clamp(hoverPercent, 0, 100)}%` }}
         data-hover-value={hoverPercent}
       />
       <div

src/ui/components/Video/NodeHighlighter/PreviewNodeHighlighter.tsx

@@ -3,7 +3,7 @@ import { ReactNode, useLayoutEffect, useRef } from "react";
 
 import { getNodeBoxModelById } from "devtools/client/inspector/markup/reducers/markup";
 import { assert } from "protocol/utils";
-import { subscribe } from "ui/components/Video/MutableGraphicsState";
+import { mutableState } from "ui/components/Video/imperative/MutableGraphicsState";
 import { useAppSelector } from "ui/setup/hooks";
 
 // Note that the order of items in this array is important because it is used
@@ -112,7 +112,7 @@ export function PreviewNodeHighlighter({ nodeId }: { nodeId: string }) {
   useLayoutEffect(() => {
     const element = elementRef.current;
     if (element) {
-      return subscribe(state => {
+      return mutableState.listen(state => {
         const { localScale, recordingScale } = state;
         const scale = localScale * recordingScale;