fix session player initial load state

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);
 

packages/app/src/Playbar.tsx

@@ -196,6 +196,8 @@ export default function Playbar({
  onChange={ts => {
  setFocus({ ts, setBy: 'slider' });
  }}
+ setPlayerState={setPlayerState}
+ playerState={playerState}
  />
  </div>
  <Checkbox

packages/app/src/PlaybarSlider.tsx

@@ -18,15 +18,19 @@ type PlaybarSliderProps = {
  min: number;
  max: number;
  markers?: PlaybarMarker[];
+ playerState: 'playing' | 'paused';
  onChange: (value: number) => void;
+ setPlayerState: (playerState: 'playing' | 'paused') => void;
 };
 
 export const PlaybarSlider = ({
  min,
  max,
  value,
- onChange,
  markers,
+ playerState,
+ onChange,
+ setPlayerState,
 }: PlaybarSliderProps) => {
  const valueLabelFormat = React.useCallback(
  (ts: number) => {
@@ -44,6 +48,7 @@ export const PlaybarSlider = ({
  () =>
  markers?.map(mark => (
  <Tooltip
+ color={mark.isError ? 'red' : 'gray'}
  key={mark.id}
  label={truncateText(mark?.description ?? '', 240, '...', /\n/)}
  position="top"
@@ -64,6 +69,15 @@ export const PlaybarSlider = ({
  [markers, max, min, onChange],
  );
 
+ const [prevPlayerState, setPrevPlayerState] = React.useState(playerState);
+ const handleMouseDown = React.useCallback(() => {
+ setPrevPlayerState(playerState);
+ setPlayerState('paused');
+ }, [playerState, setPlayerState]);
+ const handleMouseUp = React.useCallback(() => {
+ setPlayerState(prevPlayerState);
+ }, [prevPlayerState, setPlayerState]);
+
  return (
  <div className={styles.wrapper}>
  <div className={styles.markers}>{markersContent}</div>
@@ -76,6 +90,8 @@ export const PlaybarSlider = ({
  step={1000}
  label={valueLabelFormat}
  onChange={onChange}
+ onMouseDown={handleMouseDown}
+ onMouseUp={handleMouseUp}
  />
  </div>
  );

packages/app/src/SessionSubpanel.tsx

@@ -326,11 +326,13 @@ export default function SessionSubpanel({
  },
  );
  const prevTsQuery = usePrevious(tsQuery);
+
  useEffect(() => {
  if (prevTsQuery == null && tsQuery != null) {
  _setFocus({ ts: tsQuery, setBy: 'url' });
  }
  }, [prevTsQuery, tsQuery]);
+
  const debouncedSetTsQuery = useRef(
  throttle(async (ts: number) => {
  setTsQuery(ts, 'replaceIn');

packages/app/src/search.ts

@@ -292,12 +292,17 @@ function useSearchEventStream(
  [fetchResults, results.data.length, hasNextPage],
  );
 
+ const abort = useCallback(() => {
+ lastAbortController.current?.abort();
+ }, []);
+
  return {
  hasNextPage,
  isFetching,
  results: results.data,
  resultsKey: results.key,
  fetchNextPage,
+ abort,
  };
 }
 

yarn.lock

@@ -4406,13 +4406,6 @@
  dependencies:
  "@types/react" "*"
 
-"@types/react-slider@^1.3.1":
- version "1.3.1"
- resolved "https://registry.yarnpkg.com/@types/react-slider/-/react-slider-1.3.1.tgz#a3816989eb4fc172e7df316930f242fec90690fc"
- integrity sha512-4X2yK7RyCIy643YCFL+bc6XNmcnBtt8n88uuyihvcn5G7Lut23eNQU3q3KmwF7MWIfKfsW5NxCjw0SeDZRtgaA==
- dependencies:
- "@types/react" "*"
-
 "@types/react-syntax-highlighter@^13.5.2":
  version "13.5.2"
  resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-13.5.2.tgz#357cc03581dc434c57c3b31f70e0eecdbf7b3ab0"
@@ -12188,13 +12181,6 @@ react-select@^5.7.0:
  react-transition-group "^4.3.0"
  use-isomorphic-layout-effect "^1.1.2"
 
-react-slider@^2.0.1:
- version "2.0.4"
- resolved "https://registry.yarnpkg.com/react-slider/-/react-slider-2.0.4.tgz#21c656ffabc3bb4481cf6b49e6d647baeda83572"
- integrity sha512-sWwQD01n6v+MbeLCYthJGZPc0kzOyhQHyd0bSo0edg+IAxTVQmj3Oy4SBK65eX6gNwS9meUn6Z5sIBUVmwAd9g==
- dependencies:
- prop-types "^15.8.1"
-
 react-sliding-pane@^7.3.0:
  version "7.3.0"
  resolved "https://registry.yarnpkg.com/react-sliding-pane/-/react-sliding-pane-7.3.0.tgz#a6a03b90db216e7ec6f746c7e649d19ba03ff4e0"