ref(replay): hide 'fast forward' option for mobile replays (#67661)

https://github.com/getsentry/sentry/assets/56095982/7f471bdf-17aa-4af1-877e-3191636afebf

Works in full screen mode too
<img width="1509" alt="SCR-20240325-oiui"
src="https://github.com/getsentry/sentry/assets/56095982/27dec82b-b07f-4330-83d8-a634273a6353">

static/app/components/replays/replayController.tsx

@@ -20,6 +20,7 @@ const COMPACT_WIDTH_BREAKPOINT = 500;
 
 interface Props {
   toggleFullscreen: () => void;
+  hideFastForward?: boolean;
   speedOptions?: number[];
 }
 
@@ -59,7 +60,13 @@ function ReplayPlayPauseBar() {
   );
 }
 
-function ReplayOptionsMenu({speedOptions}: {speedOptions: number[]}) {
+function ReplayOptionsMenu({
+  speedOptions,
+  hideFastForward = false,
+}: {
+  hideFastForward: boolean;
+  speedOptions: number[];
+}) {
   const {setSpeed, speed, isSkippingInactive, toggleSkipInactive} = useReplayContext();
   const SKIP_OPTION_VALUE = 'skip';
 
@@ -84,26 +91,29 @@ function ReplayOptionsMenu({speedOptions}: {speedOptions: number[]}) {
           value: option,
         }))}
       />
-      <CompositeSelect.Region
-        aria-label={t('Fast-Forward Inactivity')}
-        multiple
-        value={isSkippingInactive ? [SKIP_OPTION_VALUE] : []}
-        onChange={opts => {
-          toggleSkipInactive(opts.length > 0);
-        }}
-        options={[
-          {
-            label: t('Fast-forward inactivity'),
-            value: SKIP_OPTION_VALUE,
-          },
-        ]}
-      />
+      {!hideFastForward && (
+        <CompositeSelect.Region
+          aria-label={t('Fast-Forward Inactivity')}
+          multiple
+          value={isSkippingInactive ? [SKIP_OPTION_VALUE] : []}
+          onChange={opts => {
+            toggleSkipInactive(opts.length > 0);
+          }}
+          options={[
+            {
+              label: t('Fast-forward inactivity'),
+              value: SKIP_OPTION_VALUE,
+            },
+          ]}
+        />
+      )}
     </CompositeSelect>
   );
 }
 
 function ReplayControls({
   toggleFullscreen,
+  hideFastForward = false,
   speedOptions = [0.1, 0.25, 0.5, 1, 2, 4, 8, 16],
 }: Props) {
   const barRef = useRef<HTMLDivElement>(null);
@@ -129,7 +139,10 @@ function ReplayControls({
         <TimeAndScrubberGrid isCompact={isCompact} showZoom />
       </Container>
       <ButtonBar gap={1}>
-        <ReplayOptionsMenu speedOptions={speedOptions} />
+        <ReplayOptionsMenu
+          speedOptions={speedOptions}
+          hideFastForward={hideFastForward}
+        />
         <ReplayFullscreenButton toggleFullscreen={toggleFullscreen} />
       </ButtonBar>
     </ButtonGrid>

static/app/components/replays/replayView.tsx

@@ -56,7 +56,12 @@ function ReplayView({toggleFullscreen}: Props) {
           </BreadcrumbContainer>
         ) : null}
       </PlayerBreadcrumbContainer>
-      {isFullscreen ? <ReplayController toggleFullscreen={toggleFullscreen} /> : null}
+      {isFullscreen ? (
+        <ReplayController
+          toggleFullscreen={toggleFullscreen}
+          hideFastForward={isVideoReplay}
+        />
+      ) : null}
     </Fragment>
   );
 }

static/app/views/replays/detail/layout/index.tsx

@@ -21,7 +21,7 @@ const MIN_CONTENT_HEIGHT = 180;
 
 const DIVIDER_SIZE = 16;
 
-function ReplayLayout() {
+function ReplayLayout({isVideoReplay}: {isVideoReplay?: boolean}) {
   const {getLayout} = useReplayLayout();
   const layout = getLayout() ?? LayoutKey.TOPBAR;
 
@@ -43,7 +43,10 @@ function ReplayLayout() {
 
   const controller = (
     <ErrorBoundary mini>
-      <ReplayController toggleFullscreen={toggleFullscreen} />
+      <ReplayController
+        toggleFullscreen={toggleFullscreen}
+        hideFastForward={isVideoReplay}
+      />
     </ErrorBoundary>
   );
 

static/app/views/replays/details.tsx

@@ -167,7 +167,7 @@ function ReplayDetails({params: {replaySlug}}: Props) {
           projectSlug={projectSlug}
           replayErrors={replayErrors}
         >
-          <ReplaysLayout />
+          <ReplaysLayout isVideoReplay={isVideoReplay} />
         </Page>
       </ReplayTransactionContext>
     </ReplayContextProvider>