feat(replay): show screen name in url bar for mobile replays

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

@@ -6,6 +6,7 @@ import {Button, LinkButton} from 'sentry/components/button';
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import Panel from 'sentry/components/panels/panel';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
+import ReplayCurrentScreen from 'sentry/components/replays/replayCurrentScreen';
 import ReplayCurrentUrl from 'sentry/components/replays/replayCurrentUrl';
 import {ReplayFullscreenButton} from 'sentry/components/replays/replayFullscreenButton';
 import ReplayPlayer from 'sentry/components/replays/replayPlayer';
@@ -54,7 +55,8 @@ function ReplayPreviewPlayer({
   const location = useLocation();
   const organization = useOrganization();
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
-  const {replay, currentTime, isFetching, isFinished, isPlaying} = useReplayContext();
+  const {replay, currentTime, isFetching, isFinished, isPlaying, isVideoReplay} =
+    useReplayContext();
   const eventView = EventView.fromLocation(location);
 
   const fullscreenRef = useRef(null);
@@ -103,7 +105,7 @@ function ReplayPreviewPlayer({
           <PlayerContextContainer>
             {isFullscreen ? (
               <ContextContainer>
-                <ReplayCurrentUrl />
+                {isVideoReplay ? <ReplayCurrentScreen /> : <ReplayCurrentUrl />}
                 <BrowserOSIcons />
                 <ReplaySidebarToggleButton
                   isOpen={isSidebarOpen}

static/app/components/replays/replayCurrentScreen.tsx

@@ -0,0 +1,38 @@
+import {useMemo} from 'react';
+import * as Sentry from '@sentry/react';
+
+import {useReplayContext} from 'sentry/components/replays/replayContext';
+import TextCopyInput from 'sentry/components/textCopyInput';
+import {t} from 'sentry/locale';
+import getCurrentScreenName from 'sentry/utils/replays/getCurrentScreenName';
+
+// Screen name component for video/mobile replays - mirrors replayCurrentUrl.tsx
+function ReplayCurrentScreen() {
+  const {currentTime, replay} = useReplayContext();
+  const frames = replay?.getMobileNavigationFrames();
+
+  const screenName = useMemo(() => {
+    try {
+      return getCurrentScreenName(frames, currentTime);
+    } catch (err) {
+      Sentry.captureException(err);
+      return '';
+    }
+  }, [frames, currentTime]);
+
+  if (!replay || !screenName) {
+    return (
+      <TextCopyInput aria-label={t('Current Screen Name')} size="sm" disabled>
+        {''}
+      </TextCopyInput>
+    );
+  }
+
+  return (
+    <TextCopyInput aria-label={t('Current Screen Name')} size="sm">
+      {screenName}
+    </TextCopyInput>
+  );
+}
+
+export default ReplayCurrentScreen;

static/app/components/replays/replayView.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 
 import {useReplayContext} from 'sentry/components/replays/replayContext';
 import ReplayController from 'sentry/components/replays/replayController';
+import ReplayCurrentScreen from 'sentry/components/replays/replayCurrentScreen';
 import ReplayCurrentUrl from 'sentry/components/replays/replayCurrentUrl';
 import ReplayPlayer from 'sentry/components/replays/replayPlayer';
 import ReplayProcessingError from 'sentry/components/replays/replayProcessingError';
@@ -30,7 +31,7 @@ function ReplayView({toggleFullscreen}: Props) {
       <PlayerBreadcrumbContainer>
         <PlayerContainer>
           <ContextContainer>
-            <ReplayCurrentUrl />
+            {isVideoReplay ? <ReplayCurrentScreen /> : <ReplayCurrentUrl />}
             <BrowserOSIcons showBrowser={!isVideoReplay} />
             {isFullscreen ? (
               <ReplaySidebarToggleButton

static/app/utils/replays/getCurrentScreenName.tsx

@@ -0,0 +1,20 @@
+import type {BreadcrumbFrame} from 'sentry/utils/replays/types';
+
+// Gets the current screen name for video/mobile replays - mirrors getCurrentUrl.tsx
+function getCurrentScreenName(
+  frames: undefined | BreadcrumbFrame[],
+  currentOffsetMS: number
+) {
+  const framesBeforeCurrentOffset = frames?.filter(
+    frame => frame.offsetMs < currentOffsetMS
+  );
+
+  const mostRecentFrame = framesBeforeCurrentOffset?.at(-1) ?? frames?.at(0);
+  if (!mostRecentFrame) {
+    return '';
+  }
+
+  return mostRecentFrame.data.to;
+}
+
+export default getCurrentScreenName;

static/app/utils/replays/replayReader.tsx

@@ -429,6 +429,14 @@ export default class ReplayReader {
     ].sort(sortFrames)
   );
 
+  getMobileNavigationFrames = memoize(() =>
+    [
+      ...this._sortedBreadcrumbFrames.filter(frame =>
+        ['replay.init', 'navigation'].includes(frame.category)
+      ),
+    ].sort(sortFrames)
+  );
+
   getNetworkFrames = memoize(() =>
     this._sortedSpanFrames.filter(
       frame => frame.op.startsWith('navigation.') || frame.op.startsWith('resource.')