rename to durationMS

Author: michellewzhang

static/app/components/replays/replayContext.tsx

@@ -495,7 +495,7 @@ function ProviderNonMemo({
           setVideoBuffering(buffering);
         },
         clipWindow,
-        duration: durationMs,
+        durationMs: durationMs,
       });
       // `.current` is marked as readonly, but it's safe to set the value from
       // inside a `useEffect` hook.

static/app/components/replays/videoReplayer.spec.tsx

@@ -87,7 +87,7 @@ describe('VideoReplayer - no starting gap', () => {
       onFinished: jest.fn(),
       onLoaded: jest.fn(),
       onBuffer: jest.fn(),
-      duration: 40,
+      durationMs: 40,
     });
     // @ts-expect-error private
     expect(inst._currentIndex).toEqual(0);
@@ -113,7 +113,7 @@ describe('VideoReplayer - no starting gap', () => {
       onFinished: jest.fn(),
       onLoaded: jest.fn(),
       onBuffer: jest.fn(),
-      duration: 40,
+      durationMs: 40,
     });
     const playPromise = inst.play(18100);
     // @ts-expect-error private
@@ -142,7 +142,7 @@ describe('VideoReplayer - no starting gap', () => {
       onFinished: jest.fn(),
       onLoaded: jest.fn(),
       onBuffer: jest.fn(),
-      duration: 40,
+      durationMs: 40,
     });
     const playPromise = inst.play(50000);
     // 15000 -> 20000 is a gap, so player should start playing @ index 3, from
@@ -165,7 +165,7 @@ describe('VideoReplayer - no starting gap', () => {
       onFinished: jest.fn(),
       onLoaded: jest.fn(),
       onBuffer: jest.fn(),
-      duration: 40,
+      durationMs: 40,
     });
     const playPromise = inst.play(0);
     jest.advanceTimersByTime(2500);
@@ -185,7 +185,7 @@ describe('VideoReplayer - no starting gap', () => {
       onFinished: jest.fn(),
       onLoaded: jest.fn(),
       onBuffer: jest.fn(),
-      duration: 50,
+      durationMs: 50,
     });
     // play at segment 7
     const playPromise = inst.play(45_003);
@@ -220,7 +220,7 @@ describe('VideoReplayer - no starting gap', () => {
       onFinished: jest.fn(),
       onLoaded: jest.fn(),
       onBuffer: jest.fn(),
-      duration: 60,
+      durationMs: 60,
     });
     // play at segment 7
     const playPromise = inst.play(45_003);
@@ -294,7 +294,7 @@ describe('VideoReplayer - with starting gap', () => {
       onFinished: jest.fn(),
       onLoaded: jest.fn(),
       onBuffer: jest.fn(),
-      duration: 40,
+      durationMs: 40,
     });
     // @ts-expect-error private
     expect(inst._currentIndex).toEqual(0);
@@ -318,7 +318,7 @@ describe('VideoReplayer - with starting gap', () => {
       onFinished: jest.fn(),
       onLoaded: jest.fn(),
       onBuffer: jest.fn(),
-      duration: 40,
+      durationMs: 40,
     });
     const playPromise = inst.play(18100);
     // @ts-expect-error private
@@ -347,7 +347,7 @@ describe('VideoReplayer - with starting gap', () => {
       onFinished: jest.fn(),
       onLoaded: jest.fn(),
       onBuffer: jest.fn(),
-      duration: 40,
+      durationMs: 40,
     });
     const playPromise = inst.play(50000);
     // 15000 -> 20000 is a gap, so player should start playing @ index 3, from

static/app/components/replays/videoReplayer.tsx

@@ -14,7 +14,7 @@ interface OffsetOptions {
 }
 
 interface VideoReplayerOptions {
-  duration: number;
+  durationMs: number;
   onBuffer: (isBuffering: boolean) => void;
   onFinished: () => void;
   onLoaded: (event: any) => void;
@@ -57,7 +57,7 @@ export class VideoReplayer {
   private _videos: Map<any, HTMLVideoElement>;
   private _videoApiPrefix: string;
   private _clipDuration: number | undefined;
-  private _duration: number;
+  private _durationMs: number;
   public config: VideoReplayerConfig = {
     skipInactive: false,
     speed: 1.0,
@@ -75,7 +75,7 @@ export class VideoReplayer {
       onFinished,
       onLoaded,
       clipWindow,
-      duration,
+      durationMs,
     }: VideoReplayerOptions
   ) {
     this._attachments = attachments;
@@ -89,7 +89,7 @@ export class VideoReplayer {
     };
     this._videos = new Map<any, HTMLVideoElement>();
     this._clipDuration = undefined;
-    this._duration = duration;
+    this._durationMs = durationMs;
 
     this.wrapper = document.createElement('div');
     if (root) {
@@ -304,7 +304,7 @@ export class VideoReplayer {
       // If we're at the end of a segment, but there's a gap
       // at the end, force the replay to play until the end duration
       // rather than stopping right away.
-      this._timer.addNotificationAtTime(this._duration, () => {
+      this._timer.addNotificationAtTime(this._durationMs, () => {
         this.stopReplay();
       });
       return;
@@ -611,7 +611,7 @@ export class VideoReplayer {
       // at the end of the replay.
       // This tells the timer to stop at the specified duration
       // and prevents the timer from running infinitely.
-      this._timer.addNotificationAtTime(this._duration, () => {
+      this._timer.addNotificationAtTime(this._durationMs, () => {
         this.stopReplay();
       });
       return Promise.resolve();