fix(replay): when seeking while mobile replay is playing, pause old v…

…ideo (#67841)

- for mobile replays, after pressing play, and then seeking to a new
later part of the video, the replay was still playing an "old" segment
and not the one we wanted, because we weren't pausing the old video.
this PR fixes this bug by pausing the old video before playing the next
(correct) video.
- fixes #67725
- there's still a bug where the later video is still buffering but the
timer/player keeps going, so we need to fix that:
  - #67712
  - #67727)


https://github.com/getsentry/sentry/assets/56095982/b3d4575c-739d-4249-8e6b-4d4c26847f2e

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

@@ -7,6 +7,7 @@ import {VideoReplayer} from './videoReplayer';
 //
 // advancing by 2000ms ~== 20000s in Timer, but this may depend on hardware, TBD
 jest.useFakeTimers();
+jest.spyOn(window.HTMLMediaElement.prototype, 'pause').mockImplementation(() => {});
 
 describe('VideoReplayer - no starting gap', () => {
   beforeEach(() => {

static/app/components/replays/videoReplayer.tsx

@@ -406,6 +406,11 @@ export class VideoReplayer {
    */
   public play(videoOffsetMs: number): Promise<void> {
     this._timer.start(videoOffsetMs);
+
+    // When we seek to a new spot in the replay, pause the old video
+    const currentVideo = this.getVideo(this._currentIndex);
+    currentVideo?.pause();
+
     return this.playSegmentAtTime(videoOffsetMs);
   }