ref(replay): Make root in VideoReplay* classes non-nullable (#82517)

The class is only instantiated from one spot, and there's a guard to
make sure root is not-null:

https://github.com/getsentry/sentry/blob/2c797560316c1666a0aca53b6eaa9f90bd3cd6e0/static/app/components/replays/replayContext.tsx#L394-L396

Lets lean into that and enforce it.

static/app/components/replays/videoReplayer.tsx

@@ -3,8 +3,6 @@ import type {ClipWindow, VideoEvent} from 'sentry/utils/replays/types';
 
 import {findVideoSegmentIndex} from './utils';
 
-type RootElem = HTMLDivElement | null;
-
 // The number of segments to load on either side of the requested segment (around 15 seconds)
 // Also the number of segments we load initially
 const PRELOAD_BUFFER = 3;
@@ -19,7 +17,7 @@ interface VideoReplayerOptions {
   onBuffer: (isBuffering: boolean) => void;
   onFinished: () => void;
   onLoaded: (event: any) => void;
-  root: RootElem;
+  root: HTMLDivElement;
   start: number;
   videoApiPrefix: string;
   clipWindow?: ClipWindow;
@@ -92,9 +90,7 @@ export class VideoReplayer {
     this.config = config;
 
     this.wrapper = document.createElement('div');
-    if (root) {
-      root.appendChild(this.wrapper);
-    }
+    root.appendChild(this.wrapper);
 
     this._trackList = this._attachments.map(({timestamp}, i) => [timestamp, i]);
 

static/app/components/replays/videoReplayerWithInteractions.tsx

@@ -6,16 +6,14 @@ import type {VideoReplayerConfig} from 'sentry/components/replays/videoReplayer'
 import {VideoReplayer} from 'sentry/components/replays/videoReplayer';
 import type {ClipWindow, RecordingFrame, VideoEvent} from 'sentry/utils/replays/types';
 
-type RootElem = HTMLDivElement | null;
-
 interface VideoReplayerWithInteractionsOptions {
   context: {sdkName: string | undefined | null; sdkVersion: string | undefined | null};
   durationMs: number;
   eventsWithSnapshots: RecordingFrame[];
   onBuffer: (isBuffering: boolean) => void;
   onFinished: () => void;
   onLoaded: (event: any) => void;
-  root: RootElem;
+  root: HTMLDivElement;
   speed: number;
   start: number;
   theme: Theme;
@@ -67,7 +65,7 @@ export class VideoReplayerWithInteractions {
       config: this.config,
     });
 
-    root?.classList.add('video-replayer');
+    root.classList.add('video-replayer');
 
     const grouped = Object.groupBy(touchEvents, (t: any) => t.data.pointerId);
     Object.values(grouped).forEach(t => {
@@ -86,7 +84,7 @@ export class VideoReplayerWithInteractions {
     });
 
     this.replayer = new Replayer(eventsWithSnapshots, {
-      root: root as Element,
+      root,
       blockClass: 'sentry-block',
       mouseTail: {
         duration: 0.75 * 1000,