Skip to content

Commit 2344c81

Browse files
ryan953ryan953
authored
feat(replay): Start bringing in new replay context wrappers to test (#91982)
1 parent 955c2a8 commit 2344c81

File tree

5 files changed

+81
-36
lines changed

5 files changed

+81
-36
lines changed

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

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,12 @@ import {StaticReplayPreview} from 'sentry/components/events/eventReplay/staticRe
88
import LoadingIndicator from 'sentry/components/loadingIndicator';
99
import ArchivedReplayAlert from 'sentry/components/replays/alerts/archivedReplayAlert';
1010
import ReplayLoadingState from 'sentry/components/replays/player/replayLoadingState';
11-
import ReplayProcessingError from 'sentry/components/replays/replayProcessingError';
1211
import {t} from 'sentry/locale';
1312
import type useLoadReplayReader from 'sentry/utils/replays/hooks/useLoadReplayReader';
1413
import useLogEventReplayStatus from 'sentry/utils/replays/hooks/useLogEventReplayStatus';
14+
import {ReplayPlayerPluginsContextProvider} from 'sentry/utils/replays/playback/providers/replayPlayerPluginsContext';
15+
import {ReplayPlayerStateContextProvider} from 'sentry/utils/replays/playback/providers/replayPlayerStateContext';
16+
import {ReplayReaderProvider} from 'sentry/utils/replays/playback/providers/replayReaderProvider';
1517
import FluidHeight from 'sentry/views/replays/detail/layout/fluidHeight';
1618

1719
interface Props {
@@ -59,17 +61,19 @@ export default function ReplayClipPreviewPlayer({
5961

6062
return (
6163
<PlayerContainer data-test-id="player-container">
62-
{replay.hasProcessingErrors() ? (
63-
<ReplayProcessingError processingErrors={replay.processingErrors()} />
64-
) : (
65-
<ReplayPreviewPlayer
66-
errorBeforeReplayStart={replay.getErrorBeforeReplayStart()}
67-
fullReplayButtonProps={fullReplayButtonProps}
68-
overlayContent={overlayContent}
69-
replayId={replayReaderResult.replayId}
70-
replayRecord={replayReaderResult.replayRecord!}
71-
/>
72-
)}
64+
<ReplayPlayerPluginsContextProvider>
65+
<ReplayReaderProvider replay={replay}>
66+
<ReplayPlayerStateContextProvider>
67+
<ReplayPreviewPlayer
68+
errorBeforeReplayStart={replay.getErrorBeforeReplayStart()}
69+
fullReplayButtonProps={fullReplayButtonProps}
70+
overlayContent={overlayContent}
71+
replayId={replayReaderResult.replayId}
72+
replayRecord={replayReaderResult.replayRecord!}
73+
/>
74+
</ReplayPlayerStateContextProvider>
75+
</ReplayReaderProvider>
76+
</ReplayPlayerPluginsContextProvider>
7377
</PlayerContainer>
7478
);
7579
}}

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,38 @@
11
import {useState} from 'react';
22

3+
import {DateTime} from 'sentry/components/dateTime';
34
import Duration from 'sentry/components/duration/duration';
5+
import {useReplayContext} from 'sentry/components/replays/replayContext';
46
import useReplayCurrentTime from 'sentry/utils/replays/playback/hooks/useReplayCurrentTime';
7+
import {useReplayPrefs} from 'sentry/utils/replays/playback/providers/replayPreferencesContext';
8+
import useOrganization from 'sentry/utils/useOrganization';
59

610
export default function ReplayCurrentTime() {
11+
const organization = useOrganization();
12+
if (organization.features.includes('replay-new-context')) {
13+
return <ReplayCurrentTimeNew />;
14+
}
15+
16+
return <OriginalReplayCurrentTime />;
17+
}
18+
19+
function ReplayCurrentTimeNew() {
720
const [currentTime, setCurrentTime] = useState({timeMs: 0});
821

922
useReplayCurrentTime({callback: setCurrentTime});
1023

1124
return <Duration duration={[currentTime.timeMs, 'ms']} precision="sec" />;
1225
}
26+
27+
function OriginalReplayCurrentTime() {
28+
const {currentTime, replay} = useReplayContext();
29+
const [prefs] = useReplayPrefs();
30+
const timestampType = prefs.timestampType;
31+
const startTimestamp = replay?.getStartTimestampMs() ?? 0;
32+
33+
return timestampType === 'absolute' ? (
34+
<DateTime timeOnly seconds date={startTimestamp + currentTime} />
35+
) : (
36+
<Duration duration={[currentTime, 'ms']} precision="sec" />
37+
);
38+
}

‎static/app/components/replays/replayPlayPauseButton.tsx

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,26 @@
11
import type {ButtonProps} from 'sentry/components/core/button';
22
import {Button} from 'sentry/components/core/button';
3+
import NewReplayPlayPauseButton from 'sentry/components/replays/player/replayPlayPauseButton';
34
import {useReplayContext} from 'sentry/components/replays/replayContext';
45
import {IconPause, IconPlay, IconRefresh} from 'sentry/icons';
56
import {t} from 'sentry/locale';
7+
import useOrganization from 'sentry/utils/useOrganization';
68

7-
function ReplayPlayPauseButton(props: Partial<ButtonProps> & {isLoading?: boolean}) {
9+
export default function ReplayPlayPauseButton({
10+
isLoading,
11+
...props
12+
}: Partial<ButtonProps> & {isLoading?: boolean}) {
13+
const organization = useOrganization();
14+
if (organization.features.includes('replay-new-context')) {
15+
return <NewReplayPlayPauseButton {...props} />;
16+
}
17+
18+
return <OriginalReplayPlayPauseButton isLoading={isLoading} {...props} />;
19+
}
20+
21+
function OriginalReplayPlayPauseButton(
22+
props: Partial<ButtonProps> & {isLoading?: boolean}
23+
) {
824
const {isFinished, isPlaying, restart, togglePlayPause} = useReplayContext();
925

1026
return isFinished ? (
@@ -28,5 +44,3 @@ function ReplayPlayPauseButton(props: Partial<ButtonProps> & {isLoading?: boolea
2844
/>
2945
);
3046
}
31-
32-
export default ReplayPlayPauseButton;

‎static/app/components/replays/timeAndScrubberGrid.tsx

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {ButtonBar} from 'sentry/components/core/button/buttonBar';
77
import {DateTime} from 'sentry/components/dateTime';
88
import Duration from 'sentry/components/duration/duration';
99
import ReplayTimeline from 'sentry/components/replays/breadcrumbs/replayTimeline';
10+
import ReplayCurrentTime from 'sentry/components/replays/player/replayCurrentTime';
1011
import {PlayerScrubber} from 'sentry/components/replays/player/scrubber';
1112
import {useScrubberMouseTracking} from 'sentry/components/replays/player/useScrubberMouseTracking';
1213
import {useReplayContext} from 'sentry/components/replays/replayContext';
@@ -63,7 +64,7 @@ export default function TimeAndScrubberGrid({
6364
showZoom = false,
6465
isLoading,
6566
}: TimeAndScrubberGridProps) {
66-
const {currentTime, replay} = useReplayContext();
67+
const {replay} = useReplayContext();
6768
const [prefs] = useReplayPrefs();
6869
const timestampType = prefs.timestampType;
6970
const startTimestamp = replay?.getStartTimestampMs() ?? 0;
@@ -75,11 +76,7 @@ export default function TimeAndScrubberGrid({
7576
<TimelineScaleContextProvider>
7677
<Grid id="replay-timeline-player" isCompact={isCompact}>
7778
<Numeric style={{gridArea: 'currentTime'}}>
78-
{timestampType === 'absolute' ? (
79-
<DateTime timeOnly seconds date={startTimestamp + currentTime} />
80-
) : (
81-
<Duration duration={[currentTime, 'ms']} precision="sec" />
82-
)}
79+
<ReplayCurrentTime />
8380
</Numeric>
8481

8582
<div style={{gridArea: 'timeline'}}>

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

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,12 @@ import {StaticReplayPreview} from 'sentry/components/events/eventReplay/staticRe
77
import LoadingIndicator from 'sentry/components/loadingIndicator';
88
import ArchivedReplayAlert from 'sentry/components/replays/alerts/archivedReplayAlert';
99
import ReplayLoadingState from 'sentry/components/replays/player/replayLoadingState';
10-
import ReplayProcessingError from 'sentry/components/replays/replayProcessingError';
1110
import {t} from 'sentry/locale';
1211
import type useLoadReplayReader from 'sentry/utils/replays/hooks/useLoadReplayReader';
1312
import useLogEventReplayStatus from 'sentry/utils/replays/hooks/useLogEventReplayStatus';
13+
import {ReplayPlayerPluginsContextProvider} from 'sentry/utils/replays/playback/providers/replayPlayerPluginsContext';
14+
import {ReplayPlayerStateContextProvider} from 'sentry/utils/replays/playback/providers/replayPlayerStateContext';
15+
import {ReplayReaderProvider} from 'sentry/utils/replays/playback/providers/replayReaderProvider';
1416
import FluidHeight from 'sentry/views/replays/detail/layout/fluidHeight';
1517

1618
interface Props {
@@ -59,20 +61,22 @@ export default function GroupReplaysPlayer({
5961

6062
return (
6163
<PlayerContainer data-test-id="player-container">
62-
{replay?.hasProcessingErrors() ? (
63-
<ReplayProcessingError processingErrors={replay.processingErrors()} />
64-
) : (
65-
<ReplayPreviewPlayer
66-
errorBeforeReplayStart={replay.getErrorBeforeReplayStart()}
67-
replayId={replayReaderResult.replayId}
68-
replayRecord={replayReaderResult.replayRecord!}
69-
handleBackClick={handleBackClick}
70-
handleForwardClick={handleForwardClick}
71-
overlayContent={overlayContent}
72-
showNextAndPrevious
73-
playPausePriority="default"
74-
/>
75-
)}
64+
<ReplayPlayerPluginsContextProvider>
65+
<ReplayReaderProvider replay={replay}>
66+
<ReplayPlayerStateContextProvider>
67+
<ReplayPreviewPlayer
68+
errorBeforeReplayStart={replay.getErrorBeforeReplayStart()}
69+
replayId={replayReaderResult.replayId}
70+
replayRecord={replayReaderResult.replayRecord!}
71+
handleBackClick={handleBackClick}
72+
handleForwardClick={handleForwardClick}
73+
overlayContent={overlayContent}
74+
showNextAndPrevious
75+
playPausePriority="default"
76+
/>
77+
</ReplayPlayerStateContextProvider>
78+
</ReplayReaderProvider>
79+
</ReplayPlayerPluginsContextProvider>
7680
</PlayerContainer>
7781
);
7882
}}

0 commit comments

Comments
 (0)