fix session player initial load state

hyperdxio · May 6, 2024 · 319ccf5 · 319ccf5
1 parent 803a921
commit 319ccf5
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 18 deletions.
diff --git a/packages/app/src/AppNav.tsx b/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 ? (

diff --git a/packages/app/src/DOMPlayer.tsx b/packages/app/src/DOMPlayer.tsx
@@ -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,6 +322,38 @@ 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) {
@@ -346,7 +366,6 @@ export default function DOMPlayer({
  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);
 

diff --git a/packages/app/src/Playbar.tsx b/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

diff --git a/packages/app/src/PlaybarSlider.tsx b/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>
  );

diff --git a/packages/app/src/SessionSubpanel.tsx b/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');