feat(replay): add time duration for each playback speed (#94888)

Provide users with immediate insight into the actual duration of a
replay when viewed at different playback speeds, improving clarity and
user experience.

<img width="228" alt="SCR-20250707-nzrx"
src="https://github.com/user-attachments/assets/a6bb864f-cdc9-4f53-bcaa-c2430bb0382b"
/>

---------

Co-authored-by: Cursor Agent <[email protected]>
Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>
Co-authored-by: Michelle Zhang <[email protected]>

Author: 4 people

static/app/components/replays/preferences/replayPreferenceDropdown.tsx

@@ -1,7 +1,12 @@
+import styled from '@emotion/styled';
+
 import {Button} from 'sentry/components/core/button';
 import {CompositeSelect} from 'sentry/components/core/compactSelect/composite';
+import {Flex} from 'sentry/components/core/layout';
+import {useReplayContext} from 'sentry/components/replays/replayContext';
 import {IconSettings} from 'sentry/icons';
 import {t} from 'sentry/locale';
+import formatDuration from 'sentry/utils/duration/formatDuration';
 import {useReplayPrefs} from 'sentry/utils/replays/playback/providers/replayPreferencesContext';
 import {toTitleCase} from 'sentry/utils/string/toTitleCase';
 
@@ -17,9 +22,24 @@ export default function ReplayPreferenceDropdown({
   isLoading?: boolean;
 }) {
   const [prefs, setPrefs] = useReplayPrefs();
+  const {isFetching, replay} = useReplayContext();
 
   const SKIP_OPTION_VALUE = 'skip';
 
+  // Calculate adjusted duration for each speed, rounded up to the nearest second.
+  // Returns in seconds
+  const calculateAdjustedDuration = (originalDurationMs: number, speed: number) => {
+    if (speed === 1) {
+      return originalDurationMs / 1000;
+    }
+
+    return Math.ceil(originalDurationMs / speed / 1000);
+  };
+
+  // Check if we should show duration (data is loaded and duration is available)
+  const shouldShowDuration =
+    !isLoading && !isFetching && replay && replay.getDurationMs() > 0;
+
   return (
     <CompositeSelect
       disabled={isLoading}
@@ -37,10 +57,35 @@ export default function ReplayPreferenceDropdown({
         label={t('Playback Speed')}
         value={prefs.playbackSpeed}
         onChange={opt => setPrefs({playbackSpeed: opt.value})}
-        options={speedOptions.map(option => ({
-          label: `${option}x`,
-          value: option,
-        }))}
+        options={speedOptions.map(option => {
+          const baseLabel = `${option}x`;
+
+          if (shouldShowDuration) {
+            const adjustedDurationMs = calculateAdjustedDuration(
+              replay.getDurationMs(),
+              option
+            );
+            const durationDisplay = formatDuration({
+              duration: [adjustedDurationMs, 'sec'],
+              precision: 'sec',
+              style: 'h:mm:ss',
+            });
+            return {
+              label: (
+                <Flex justify="space-between">
+                  <span>{baseLabel}</span>
+                  <DurationDisplay>{durationDisplay}</DurationDisplay>
+                </Flex>
+              ),
+              value: option,
+            };
+          }
+
+          return {
+            label: baseLabel,
+            value: option,
+          };
+        })}
       />
       <CompositeSelect.Region
         label={t('Timestamps')}
@@ -68,3 +113,7 @@ export default function ReplayPreferenceDropdown({
     </CompositeSelect>
   );
 }
+
+const DurationDisplay = styled('span')`
+  color: ${p => p.theme.subText};
+`;