feat(replay): Use mobx for replay re-rendering [PoC]

Do not merge, this was a quick 1-2 hr refactor to show what mobx + replayer would look like
getsentry · Jul 3, 2024 · d66ea90 · d66ea90
1 parent 8555853
commit d66ea90
Show file tree

Hide file tree

Showing 5 changed files with 165 additions and 71 deletions.
diff --git a/static/app/components/replays/breadcrumbs/replayTimeline.tsx b/static/app/components/replays/breadcrumbs/replayTimeline.tsx
@@ -1,5 +1,6 @@
 import {useRef} from 'react';
 import styled from '@emotion/styled';
+import {observer} from 'mobx-react';
 
 import Panel from 'sentry/components/panels/panel';
 import Placeholder from 'sentry/components/placeholder';
@@ -16,8 +17,9 @@ import {divide} from 'sentry/components/replays/utils';
 import toPercent from 'sentry/utils/number/toPercent';
 import {useDimensions} from 'sentry/utils/useDimensions';
 
-export default function ReplayTimeline() {
- const {replay, currentTime, timelineScale} = useReplayContext();
+const ReplayTimeline = observer(() => {
+ const {replay, timer, timelineScale} = useReplayContext();
+ const {currentTime} = timer!;
 
  const panelRef = useRef<HTMLDivElement>(null);
  const mouseTrackingProps = useTimelineScrubberMouseTracking(
@@ -76,7 +78,9 @@ export default function ReplayTimeline() {
  </Stacked>
  </VisiblePanel>
  );
-}
+});
+
+export default ReplayTimeline;
 
 const VisiblePanel = styled(Panel)`
  margin: 0;

diff --git a/static/app/components/replays/player/scrubber.tsx b/static/app/components/replays/player/scrubber.tsx
@@ -1,5 +1,6 @@
 import {Fragment} from 'react';
 import styled from '@emotion/styled';
+import {observer} from 'mobx-react';
 
 import RangeSlider from 'sentry/components/forms/controls/rangeSlider';
 import SliderAndInputWrapper from 'sentry/components/forms/controls/rangeSlider/sliderAndInputWrapper';
@@ -16,13 +17,12 @@ type Props = {
  showZoomIndicators?: boolean;
 };
 
-function Scrubber({className, showZoomIndicators = false}: Props) {
- const {replay, currentHoverTime, currentTime, setCurrentTime, timelineScale} =
-  useReplayContext();
+const Scrubber = observer(({className, showZoomIndicators = false}: Props) => {
+ const {replay, timer, timelineScale} = useReplayContext();
+ const {currentTime} = timer;
 
  const durationMs = replay?.getDurationMs() ?? 0;
  const percentComplete = divide(currentTime, durationMs);
- const hoverPlace = divide(currentHoverTime || 0, durationMs);
 
  const initialTranslate = 0.5 / timelineScale;
 
@@ -56,37 +56,56 @@ function Scrubber({className, showZoomIndicators = false}: Props) {
  </Fragment>
  ) : null}
  <Meter>
- {currentHoverTime ? (
- <div>
- <TimelineTooltip labelText={formatTime(currentHoverTime)} />
- <MouseTrackingValue
- style={{
- width: toPercent(hoverPlace),
- }}
- />
- </div>
- ) : null}
+ <HoverTracker durationMs={durationMs} />
  <PlaybackTimeValue
  style={{
  width: toPercent(percentComplete),
  }}
  />
  </Meter>
  <RangeWrapper>
- <Range
- name="replay-timeline"
- min={0}
- max={durationMs}
- value={Math.round(currentTime)}
- onChange={value => setCurrentTime(value || 0)}
- showLabel={false}
- aria-label={t('Seek slider')}
- />
+ <SeekSlider durationMs={durationMs} />
  </RangeWrapper>
  </Wrapper>
  );
-}
+});
+
+const HoverTracker = observer(({durationMs}) => {
+ const {timer} = useReplayContext();
+ const {currentHoverTime} = timer;
+ if (currentHoverTime === undefined) {
+ return null;
+ }
 
+ const hoverPlace = divide(currentHoverTime || 0, durationMs);
+ return (
+ <div>
+ <TimelineTooltip labelText={formatTime(currentHoverTime)} />
+ <MouseTrackingValue
+ style={{
+ width: toPercent(hoverPlace),
+ }}
+ />
+ </div>
+ );
+});
+
+const SeekSlider = observer(({durationMs}) => {
+ const {timer, setCurrentTime} = useReplayContext();
+ const {currentTime} = timer;
+
+ return (
+ <Range
+ name="replay-timeline"
+ min={0}
+ max={durationMs}
+ value={Math.round(currentTime)}
+ onChange={value => setCurrentTime(value || 0)}
+ showLabel={false}
+ aria-label={t('Seek slider')}
+ />
+ );
+});
 const Meter = styled(Progress.Meter)`
  background: ${p => p.theme.gray200};
 `;

diff --git a/static/app/components/replays/replayContext.tsx b/static/app/components/replays/replayContext.tsx
@@ -3,7 +3,7 @@ import {
  useCallback,
  useContext,
  useEffect,
- useLayoutEffect,
+ // useLayoutEffect,
  useRef,
  useState,
 } from 'react';
@@ -186,12 +186,14 @@ interface ReplayPlayerContextProps extends HighlightCallbacks {
  */
  timelineScale: number;
 
+ timer: Timer;
  /**
  * Start or stop playback
  *
  * @param play
  */
  togglePlayPause: (play: boolean) => void;
+
  /**
  * Allow RRWeb to use Fast-Forward mode for idle moments in the video
  *
@@ -200,6 +202,47 @@ interface ReplayPlayerContextProps extends HighlightCallbacks {
  toggleSkipInactive: (skip: boolean) => void;
 }
 
+class Timer {
+ currentPlayerTime = 0;
+ currentHoverTime: number | undefined = undefined;
+ bufferTarget = -1;
+ bufferPrevious = -1;
+ startTimeOffsetMs = -1;
+
+ constructor() {
+ makeAutoObservable(this);
+ }
+
+ setPlayerTime = action((time: number) => {
+ this.currentPlayerTime = time;
+ });
+
+ setCurrentTimer() {}
+ setHoverTime = action((time: number | undefined) => {
+ this.currentHoverTime = time;
+ });
+
+ setStartTimeOffsetMs = action((time: number) => {
+ this.startTimeOffsetMs = time;
+ });
+
+ get isBuffering() {
+ return (
+ this.bufferTarget !== -1 &&
+ this.bufferPrevious === this.currentPlayerTime &&
+ this.bufferTarget !== this.bufferPrevious
+ );
+ }
+
+ get currentTime() {
+ return (
+ (this.isBuffering ? this.bufferTarget : this.currentPlayerTime) -
+ this.startTimeOffsetMs
+ );
+ }
+}
+const timer = new Timer();
+
 const ReplayPlayerContext = createContext<ReplayPlayerContextProps>({
  analyticsContext: '',
  clearAllHighlights: () => {},
@@ -224,6 +267,7 @@ const ReplayPlayerContext = createContext<ReplayPlayerContextProps>({
  setSpeed: () => {},
  setTimelineScale: () => {},
  speed: 1,
+ timer,
  timelineScale: 1,
  togglePlayPause: () => {},
  toggleSkipInactive: () => {},
@@ -266,11 +310,20 @@ type Props = {
  value?: Partial<ReplayPlayerContextProps>;
 };
 
-function useCurrentTime(callback: () => number) {
- const [currentTime, setCurrentTime] = useState(0);
- useRAF(() => setCurrentTime(callback));
- return currentTime;
-}
+// function useCurrentTime(callback: () => number) {
+// const [currentTime, setCurrentTime] = useState(0);
+// useRAF(() => setCurrentTime(callback));
+// return currentTime;
+// }
+
+import {action, makeAutoObservable} from 'mobx';
+
+// autorun(() => {
+// if (!timer.isBuffering && timer.bufferTarget !== -1) {
+// timer.bufferTarget = -1;
+// timer.bufferPrevious = -1;
+// }
+// });
 
 export function Provider({
  analyticsContext,
@@ -296,15 +349,15 @@ export function Provider({
  const hasNewEvents = events !== oldEvents;
  const replayerRef = useRef<Replayer>(null);
  const [dimensions, setDimensions] = useState<Dimensions>({height: 0, width: 0});
- const [currentHoverTime, setCurrentHoverTime] = useState<undefined | number>();
+ // const [currentHoverTime, setCurrentHoverTime] = useState<undefined | number>();
  const [isPlaying, setIsPlaying] = useState(false);
  const [finishedAtMS, setFinishedAtMS] = useState<number>(-1);
  const [isSkippingInactive, setIsSkippingInactive] = useState(
  savedReplayConfigRef.current.isSkippingInactive
  );
  const [speed, setSpeedState] = useState(savedReplayConfigRef.current.playbackSpeed);
  const [fastForwardSpeed, setFFSpeed] = useState(0);
- const [buffer, setBufferTime] = useState({target: -1, previous: -1});
+ // const [buffer, setBufferTime] = useState({target: -1, previous: -1});
  const [isVideoBuffering, setVideoBuffering] = useState(false);
  const playTimer = useRef<number | undefined>(undefined);
  const didApplyInitialOffset = useRef(false);
@@ -314,6 +367,7 @@ export function Provider({
  const durationMs = replay?.getDurationMs() ?? 0;
  const clipWindow = replay?.getClipWindow() ?? undefined;
  const startTimeOffsetMs = replay?.getStartOffsetMs() ?? 0;
+ timer.setStartTimeOffsetMs(startTimeOffsetMs);
  const videoEvents = replay?.getVideoEvents();
  const startTimestampMs = replay?.getStartTimestampMs();
  const isVideoReplay = Boolean(
@@ -341,6 +395,18 @@ export function Provider({
  []
  );
 
+ const tick = useCallback(() => {
+ return window.requestAnimationFrame(() => {
+ timer.setPlayerTime(getCurrentPlayerTime());
+ tick();
+ });
+ }, [getCurrentPlayerTime]);
+
+ useEffect(() => {
+ const id = tick();
+ return () => window.cancelAnimationFrame(id);
+ }, [tick]);
+
  const isFinished = getCurrentPlayerTime() === finishedAtMS;
  const setReplayFinished = useCallback(() => {
  setFinishedAtMS(getCurrentPlayerTime());
@@ -367,7 +433,9 @@ export function Provider({
 
  // Sometimes rrweb doesn't get to the exact target time, as long as it has
  // changed away from the previous time then we can hide then buffering message.
- setBufferTime({target: time, previous: getCurrentPlayerTime()});
+ // setBufferTime({target: time, previous: getCurrentPlayerTime()});
+ timer.bufferTarget = time;
+ timer.bufferPrevious = getCurrentPlayerTime();
 
  // Clear previous timers. Without this (but with the setTimeout) multiple
  // requests to set the currentTime could finish out of order and cause jumping.
@@ -700,48 +768,43 @@ export function Provider({
  [prefsStrategy]
  );
 
- const currentPlayerTime = useCurrentTime(getCurrentPlayerTime);
-
- const [isBuffering, currentBufferedPlayerTime] =
- buffer.target !== -1 &&
- buffer.previous === currentPlayerTime &&
- buffer.target !== buffer.previous
- ? [true, buffer.target]
- : [false, currentPlayerTime];
-
- const currentTime = currentBufferedPlayerTime - startTimeOffsetMs;
-
- useEffect(() => {
- if (!isBuffering && events && events.length >= 2 && replayerRef.current) {
- applyInitialOffset();
- }
- }, [isBuffering, events, applyInitialOffset]);
-
- useLayoutEffect(() => {
- replayPlayerTimestampEmitter.emit('replay timestamp change', {
- currentTime,
- currentHoverTime,
- });
- }, [currentTime, currentHoverTime]);
-
- useEffect(() => {
- if (!isBuffering && buffer.target !== -1) {
- setBufferTime({target: -1, previous: -1});
- }
- }, [isBuffering, buffer.target]);
+ useRAF(() => timer.setPlayerTime(getCurrentPlayerTime()));
+
+ // const [isBuffering, currentBufferedPlayerTime] =
+ // buffer.target !== -1 &&
+ // buffer.previous === currentPlayerTime &&
+ // buffer.target !== buffer.previous
+ // ? [true, buffer.target]
+ // : [false, timer.currentPlayerTime];
+ //
+ // const currentTime = currentBufferedPlayerTime - startTimeOffsetMs;
+
+ // TODO
+ // useEffect(() => {
+ // if (!isBuffering && events && events.length >= 2 && replayerRef.current) {
+ // applyInitialOffset();
+ // }
+ // }, [isBuffering, events, applyInitialOffset]);
+
+ // useLayoutEffect(() => {
+ // replayPlayerTimestampEmitter.emit('replay timestamp change', {
+ // currentTime,
+ // currentHoverTime,
+ // });
+ // }, [currentTime, currentHoverTime]);
 
  return (
  <ReplayPlayerContext.Provider
  value={{
  analyticsContext,
  clearAllHighlights,
- currentHoverTime,
- currentTime,
+ currentHoverTime: undefined,
+ currentTime: 0,
  dimensions,
  fastForwardSpeed,
  addHighlight,
  setRoot,
- isBuffering: isBuffering && !isVideoReplay,
+ isBuffering: timer.isBuffering && !isVideoReplay,
  isVideoBuffering,
  isFetching,
  isVideoReplay,
@@ -751,11 +814,12 @@ export function Provider({
  removeHighlight,
  replay,
  restart,
- setCurrentHoverTime,
+ setCurrentHoverTime: time => timer.setHoverTime(time),
  setCurrentTime,
  setSpeed,
  setTimelineScale,
  speed,
+ timer,
  timelineScale,
  togglePlayPause,
  toggleSkipInactive,