fix: Update session player

.changeset/flat-cups-invite.md

@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': patch
+---
+
+New performant session replay playbar component

packages/app/package.json

@@ -72,7 +72,6 @@
     "react-query": "^3.39.1",
     "react-reflex": "^4.0.9",
     "react-select": "^5.7.0",
-    "react-slider": "^2.0.1",
     "react-sliding-pane": "^7.3.0",
     "react-sortable-hoc": "^2.0.0",
     "react-syntax-highlighter": "^15.4.5",
@@ -109,7 +108,6 @@
     "@types/react-datepicker": "^4.10.0",
     "@types/react-dom": "^18.2.18",
     "@types/react-grid-layout": "^1.3.2",
-    "@types/react-slider": "^1.3.1",
     "@types/react-syntax-highlighter": "^13.5.2",
     "@types/react-table": "^7.7.14",
     "@types/react-virtualized-auto-sizer": "^1.0.1",

packages/app/src/AppNav.tsx

@@ -476,7 +476,7 @@ function SearchInput({
       placeholder={placeholder}
       value={value}
       onChange={e => onChange(e.currentTarget.value)}
-      leftSection={<i className="bi bi-search fs-8 ps-1" text-slate-400 />}
+      leftSection={<i className="bi bi-search fs-8 ps-1 text-slate-400" />}
       onKeyDown={handleKeyDown}
       rightSection={
         value ? (

packages/app/src/DOMPlayer.tsx

@@ -53,7 +53,7 @@ export default function DOMPlayer({
 
   let currentRrwebEvent = '';
 
-  const { isFetching: isSearchResultsFetching } = useSearchEventStream(
+  const { isFetching: isSearchResultsFetching, abort } = useSearchEventStream(
     {
       apiUrlPath: `/sessions/${sessionId}/rrweb`,
       q: '',
@@ -219,21 +219,7 @@ export default function DOMPlayer({
         replayer.current?.setConfig({ speed: playerSpeed, skipInactive });
       }
     }
-  }, [playerState, playerSpeed, skipInactive]);
-
-  // Set player to the correct time based on focus
-  useEffect(() => {
-    if (focus?.setBy !== 'player' && replayer.current != null) {
-      pause(
-        focus?.ts == null
-          ? 0
-          : focus?.ts - replayer.current.getMetaData().startTime,
-      );
-      if (playerState === 'playing') {
-        play();
-      }
-    }
-  }, [focus, pause, setPlayerState, playerState, play]);
+  }, [playerState, playerSpeed, skipInactive, pause, play]);
 
   const handleResize = useCallback(() => {
     if (wrapper.current == null || playerContainer.current == null) {
@@ -262,6 +248,7 @@ export default function DOMPlayer({
     handleResize();
   }, [resizeKey, handleResize]);
 
+  const [isReplayerInitialized, setIsReplayerInitialized] = useState(false);
   // Set up player
   useEffect(() => {
     if (
@@ -281,6 +268,7 @@ export default function DOMPlayer({
       showWarning: debug,
       skipInactive: true,
     });
+    setIsReplayerInitialized(true);
 
     if (debug) {
       // @ts-ignore
@@ -334,19 +322,51 @@ export default function DOMPlayer({
     debug,
   ]);
 
+  // Set player to the correct time based on focus
+  useEffect(() => {
+    if (
+      !isInitialEventsLoaded ||
+      !isReplayerInitialized ||
+      lastEventTsLoaded < (focus?.ts ? focus.ts + 1000 : Infinity)
+    ) {
+      return;
+    }
+    if (focus?.setBy !== 'player' && replayer.current != null) {
+      pause(
+        focus?.ts == null
+          ? 0
+          : focus?.ts - replayer.current.getMetaData().startTime,
+      );
+      handleResize();
+      if (playerState === 'playing') {
+        play();
+      }
+    }
+  }, [
+    focus,
+    pause,
+    setPlayerState,
+    playerState,
+    play,
+    isInitialEventsLoaded,
+    isReplayerInitialized,
+    handleResize,
+    lastEventTsLoaded,
+  ]);
+
   useEffect(() => {
     return () => {
       if (replayer.current != null) {
         replayer.current?.destroy();
         replayer.current = null;
       }
+      abort();
     };
   }, []);
 
   const isLoading = isInitialEventsLoaded === false && isSearchResultsFetching;
   // TODO: Handle when ts is set to a value that's outside of this session
   const isBuffering =
-    playerState === 'playing' &&
     isReplayFullyLoaded === false &&
     (replayer.current?.getMetaData()?.endTime ?? 0) < (focus?.ts ?? 0);