ref(replay): Move ReplayPlayerTimestampEmitter into its own file (#73612)

Move this class and singleton into it's own file. replayContext.tsx is a
big file and this helps trim it down

This shouldn't be a singleton imo, if there were two replays anywhere on
the page then the timestamps would get messed up really quickly. But
this just moves the problem around, neither replayContext.tsx nor
trace.tsx owns this class, so it can float on it's own.

static/app/components/replays/replayContext.tsx

@@ -20,6 +20,7 @@ import {trackAnalytics} from 'sentry/utils/analytics';
 import clamp from 'sentry/utils/number/clamp';
 import type useInitialOffsetMs from 'sentry/utils/replays/hooks/useInitialTimeOffsetMs';
 import useRAF from 'sentry/utils/replays/hooks/useRAF';
+import {replayPlayerTimestampEmitter} from 'sentry/utils/replays/replayPlayerTimestampEmitter';
 import type ReplayReader from 'sentry/utils/replays/replayReader';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePrevious from 'sentry/utils/usePrevious';
@@ -33,40 +34,6 @@ type RootElem = null | HTMLDivElement;
 
 type HighlightCallbacks = ReturnType<typeof useReplayHighlighting>;
 
-type ReplayPlayerTimestampChangeEvent = {
-  currentHoverTime: number | undefined;
-  currentTime: number;
-};
-type ReplayPlayerListener = (arg: ReplayPlayerTimestampChangeEvent) => void;
-
-class ReplayPlayerTimestampEmitter {
-  private listeners: {[key: string]: Set<ReplayPlayerListener>} = {};
-
-  on(event: 'replay timestamp change', handler: ReplayPlayerListener): void {
-    if (!this.listeners[event]) {
-      this.listeners[event] = new Set();
-    }
-    this.listeners[event].add(handler);
-  }
-
-  emit(event: 'replay timestamp change', arg: ReplayPlayerTimestampChangeEvent): void {
-    const handlers = this.listeners[event] || [];
-    handlers.forEach(handler => handler(arg));
-  }
-
-  off(event: 'replay timestamp change', handler: ReplayPlayerListener): void {
-    const handlers = this.listeners[event];
-
-    if (!handlers) {
-      return;
-    }
-
-    handlers.delete?.(handler);
-  }
-}
-
-export const replayPlayerTimestampEmitter = new ReplayPlayerTimestampEmitter();
-
 // Important: Don't allow context Consumers to access `Replayer` directly.
 // It has state that, when changed, will not trigger a react render.
 // Instead only expose methods that wrap `Replayer` and manage state.

static/app/utils/replays/replayPlayerTimestampEmitter.tsx

@@ -0,0 +1,33 @@
+type ReplayPlayerTimestampChangeEvent = {
+  currentHoverTime: number | undefined;
+  currentTime: number;
+};
+type ReplayPlayerListener = (arg: ReplayPlayerTimestampChangeEvent) => void;
+
+class ReplayPlayerTimestampEmitter {
+  private listeners: {[key: string]: Set<ReplayPlayerListener>} = {};
+
+  on(event: 'replay timestamp change', handler: ReplayPlayerListener): void {
+    if (!this.listeners[event]) {
+      this.listeners[event] = new Set();
+    }
+    this.listeners[event].add(handler);
+  }
+
+  emit(event: 'replay timestamp change', arg: ReplayPlayerTimestampChangeEvent): void {
+    const handlers = this.listeners[event] || [];
+    handlers.forEach(handler => handler(arg));
+  }
+
+  off(event: 'replay timestamp change', handler: ReplayPlayerListener): void {
+    const handlers = this.listeners[event];
+
+    if (!handlers) {
+      return;
+    }
+
+    handlers.delete?.(handler);
+  }
+}
+
+export const replayPlayerTimestampEmitter = new ReplayPlayerTimestampEmitter();

static/app/views/performance/newTraceDetails/trace.tsx

@@ -15,7 +15,6 @@ import {PlatformIcon} from 'platformicons';
 
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import Placeholder from 'sentry/components/placeholder';
-import {replayPlayerTimestampEmitter} from 'sentry/components/replays/replayContext';
 import {t, tct} from 'sentry/locale';
 import ConfigStore from 'sentry/stores/configStore';
 import {space} from 'sentry/styles/space';
@@ -27,6 +26,7 @@ import type {
   TracePerformanceIssue,
 } from 'sentry/utils/performance/quickTrace/types';
 import {clamp} from 'sentry/utils/profiling/colors/utils';
+import {replayPlayerTimestampEmitter} from 'sentry/utils/replays/replayPlayerTimestampEmitter';
 import useApi from 'sentry/utils/useApi';
 import useOrganization from 'sentry/utils/useOrganization';
 import useProjects from 'sentry/utils/useProjects';