feat(replay): Start bringing in new replay context wrappers to test (#91982)

Author: ryan953

static/app/components/events/eventReplay/replayClipPreviewPlayer.tsx

@@ -8,10 +8,12 @@ import {StaticReplayPreview} from 'sentry/components/events/eventReplay/staticRe
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import ArchivedReplayAlert from 'sentry/components/replays/alerts/archivedReplayAlert';
 import ReplayLoadingState from 'sentry/components/replays/player/replayLoadingState';
-import ReplayProcessingError from 'sentry/components/replays/replayProcessingError';
 import {t} from 'sentry/locale';
 import type useLoadReplayReader from 'sentry/utils/replays/hooks/useLoadReplayReader';
 import useLogEventReplayStatus from 'sentry/utils/replays/hooks/useLogEventReplayStatus';
+import {ReplayPlayerPluginsContextProvider} from 'sentry/utils/replays/playback/providers/replayPlayerPluginsContext';
+import {ReplayPlayerStateContextProvider} from 'sentry/utils/replays/playback/providers/replayPlayerStateContext';
+import {ReplayReaderProvider} from 'sentry/utils/replays/playback/providers/replayReaderProvider';
 import FluidHeight from 'sentry/views/replays/detail/layout/fluidHeight';
 
 interface Props {
@@ -59,17 +61,19 @@ export default function ReplayClipPreviewPlayer({
 
         return (
           <PlayerContainer data-test-id="player-container">
-            {replay.hasProcessingErrors() ? (
-              <ReplayProcessingError processingErrors={replay.processingErrors()} />
-            ) : (
-              <ReplayPreviewPlayer
-                errorBeforeReplayStart={replay.getErrorBeforeReplayStart()}
-                fullReplayButtonProps={fullReplayButtonProps}
-                overlayContent={overlayContent}
-                replayId={replayReaderResult.replayId}
-                replayRecord={replayReaderResult.replayRecord!}
-              />
-            )}
+            <ReplayPlayerPluginsContextProvider>
+              <ReplayReaderProvider replay={replay}>
+                <ReplayPlayerStateContextProvider>
+                  <ReplayPreviewPlayer
+                    errorBeforeReplayStart={replay.getErrorBeforeReplayStart()}
+                    fullReplayButtonProps={fullReplayButtonProps}
+                    overlayContent={overlayContent}
+                    replayId={replayReaderResult.replayId}
+                    replayRecord={replayReaderResult.replayRecord!}
+                  />
+                </ReplayPlayerStateContextProvider>
+              </ReplayReaderProvider>
+            </ReplayPlayerPluginsContextProvider>
           </PlayerContainer>
         );
       }}

static/app/components/replays/player/replayCurrentTime.tsx

@@ -1,12 +1,38 @@
 import {useState} from 'react';
 
+import {DateTime} from 'sentry/components/dateTime';
 import Duration from 'sentry/components/duration/duration';
+import {useReplayContext} from 'sentry/components/replays/replayContext';
 import useReplayCurrentTime from 'sentry/utils/replays/playback/hooks/useReplayCurrentTime';
+import {useReplayPrefs} from 'sentry/utils/replays/playback/providers/replayPreferencesContext';
+import useOrganization from 'sentry/utils/useOrganization';
 
 export default function ReplayCurrentTime() {
+  const organization = useOrganization();
+  if (organization.features.includes('replay-new-context')) {
+    return <ReplayCurrentTimeNew />;
+  }
+
+  return <OriginalReplayCurrentTime />;
+}
+
+function ReplayCurrentTimeNew() {
   const [currentTime, setCurrentTime] = useState({timeMs: 0});
 
   useReplayCurrentTime({callback: setCurrentTime});
 
   return <Duration duration={[currentTime.timeMs, 'ms']} precision="sec" />;
 }
+
+function OriginalReplayCurrentTime() {
+  const {currentTime, replay} = useReplayContext();
+  const [prefs] = useReplayPrefs();
+  const timestampType = prefs.timestampType;
+  const startTimestamp = replay?.getStartTimestampMs() ?? 0;
+
+  return timestampType === 'absolute' ? (
+    <DateTime timeOnly seconds date={startTimestamp + currentTime} />
+  ) : (
+    <Duration duration={[currentTime, 'ms']} precision="sec" />
+  );
+}

static/app/components/replays/replayPlayPauseButton.tsx

@@ -1,10 +1,26 @@
 import type {ButtonProps} from 'sentry/components/core/button';
 import {Button} from 'sentry/components/core/button';
+import NewReplayPlayPauseButton from 'sentry/components/replays/player/replayPlayPauseButton';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
 import {IconPause, IconPlay, IconRefresh} from 'sentry/icons';
 import {t} from 'sentry/locale';
+import useOrganization from 'sentry/utils/useOrganization';
 
-function ReplayPlayPauseButton(props: Partial<ButtonProps> & {isLoading?: boolean}) {
+export default function ReplayPlayPauseButton({
+  isLoading,
+  ...props
+}: Partial<ButtonProps> & {isLoading?: boolean}) {
+  const organization = useOrganization();
+  if (organization.features.includes('replay-new-context')) {
+    return <NewReplayPlayPauseButton {...props} />;
+  }
+
+  return <OriginalReplayPlayPauseButton isLoading={isLoading} {...props} />;
+}
+
+function OriginalReplayPlayPauseButton(
+  props: Partial<ButtonProps> & {isLoading?: boolean}
+) {
   const {isFinished, isPlaying, restart, togglePlayPause} = useReplayContext();
 
   return isFinished ? (
@@ -28,5 +44,3 @@ function ReplayPlayPauseButton(props: Partial<ButtonProps> & {isLoading?: boolea
     />
   );
 }
-
-export default ReplayPlayPauseButton;

static/app/components/replays/timeAndScrubberGrid.tsx

@@ -7,6 +7,7 @@ import {ButtonBar} from 'sentry/components/core/button/buttonBar';
 import {DateTime} from 'sentry/components/dateTime';
 import Duration from 'sentry/components/duration/duration';
 import ReplayTimeline from 'sentry/components/replays/breadcrumbs/replayTimeline';
+import ReplayCurrentTime from 'sentry/components/replays/player/replayCurrentTime';
 import {PlayerScrubber} from 'sentry/components/replays/player/scrubber';
 import {useScrubberMouseTracking} from 'sentry/components/replays/player/useScrubberMouseTracking';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
@@ -63,7 +64,7 @@ export default function TimeAndScrubberGrid({
   showZoom = false,
   isLoading,
 }: TimeAndScrubberGridProps) {
-  const {currentTime, replay} = useReplayContext();
+  const {replay} = useReplayContext();
   const [prefs] = useReplayPrefs();
   const timestampType = prefs.timestampType;
   const startTimestamp = replay?.getStartTimestampMs() ?? 0;
@@ -75,11 +76,7 @@ export default function TimeAndScrubberGrid({
     <TimelineScaleContextProvider>
       <Grid id="replay-timeline-player" isCompact={isCompact}>
         <Numeric style={{gridArea: 'currentTime'}}>
-          {timestampType === 'absolute' ? (
-            <DateTime timeOnly seconds date={startTimestamp + currentTime} />
-          ) : (
-            <Duration duration={[currentTime, 'ms']} precision="sec" />
-          )}
+          <ReplayCurrentTime />
         </Numeric>
 
         <div style={{gridArea: 'timeline'}}>

static/app/views/issueDetails/groupReplays/groupReplaysPlayer.tsx

@@ -7,10 +7,12 @@ import {StaticReplayPreview} from 'sentry/components/events/eventReplay/staticRe
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import ArchivedReplayAlert from 'sentry/components/replays/alerts/archivedReplayAlert';
 import ReplayLoadingState from 'sentry/components/replays/player/replayLoadingState';
-import ReplayProcessingError from 'sentry/components/replays/replayProcessingError';
 import {t} from 'sentry/locale';
 import type useLoadReplayReader from 'sentry/utils/replays/hooks/useLoadReplayReader';
 import useLogEventReplayStatus from 'sentry/utils/replays/hooks/useLogEventReplayStatus';
+import {ReplayPlayerPluginsContextProvider} from 'sentry/utils/replays/playback/providers/replayPlayerPluginsContext';
+import {ReplayPlayerStateContextProvider} from 'sentry/utils/replays/playback/providers/replayPlayerStateContext';
+import {ReplayReaderProvider} from 'sentry/utils/replays/playback/providers/replayReaderProvider';
 import FluidHeight from 'sentry/views/replays/detail/layout/fluidHeight';
 
 interface Props {
@@ -59,20 +61,22 @@ export default function GroupReplaysPlayer({
 
         return (
           <PlayerContainer data-test-id="player-container">
-            {replay?.hasProcessingErrors() ? (
-              <ReplayProcessingError processingErrors={replay.processingErrors()} />
-            ) : (
-              <ReplayPreviewPlayer
-                errorBeforeReplayStart={replay.getErrorBeforeReplayStart()}
-                replayId={replayReaderResult.replayId}
-                replayRecord={replayReaderResult.replayRecord!}
-                handleBackClick={handleBackClick}
-                handleForwardClick={handleForwardClick}
-                overlayContent={overlayContent}
-                showNextAndPrevious
-                playPausePriority="default"
-              />
-            )}
+            <ReplayPlayerPluginsContextProvider>
+              <ReplayReaderProvider replay={replay}>
+                <ReplayPlayerStateContextProvider>
+                  <ReplayPreviewPlayer
+                    errorBeforeReplayStart={replay.getErrorBeforeReplayStart()}
+                    replayId={replayReaderResult.replayId}
+                    replayRecord={replayReaderResult.replayRecord!}
+                    handleBackClick={handleBackClick}
+                    handleForwardClick={handleForwardClick}
+                    overlayContent={overlayContent}
+                    showNextAndPrevious
+                    playPausePriority="default"
+                  />
+                </ReplayPlayerStateContextProvider>
+              </ReplayReaderProvider>
+            </ReplayPlayerPluginsContextProvider>
           </PlayerContainer>
         );
       }}