diff --git a/.changeset/safe-pause.md b/.changeset/safe-pause.md new file mode 100644 index 0000000000..9422916855 --- /dev/null +++ b/.changeset/safe-pause.md @@ -0,0 +1,5 @@ +--- +'rrweb': patch +--- + +fix: safe pause diff --git a/packages/rrweb/src/replay/media/index.ts b/packages/rrweb/src/replay/media/index.ts index 3c137665df..d76a37a0f7 100644 --- a/packages/rrweb/src/replay/media/index.ts +++ b/packages/rrweb/src/replay/media/index.ts @@ -49,11 +49,22 @@ export class MediaManager { }); } + private safePause(target: HTMLMediaElement | RRMediaElement) { + // https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause + // RRMediaElement inherits from BaseRRMediaElementImpl, which has a pause method + // but we received a type error when trying to call it directly (target.pause is not a function) + // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access + if (typeof target.pause === 'function') { + // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call + target.pause(); + } + } + private syncAllMediaElements(options = { pause: false }) { this.mediaMap.forEach((mediaState, target) => { this.syncTargetWithState(target); if (options.pause) { - target.pause(); + this.safePause(target); } }); } @@ -103,7 +114,7 @@ export class MediaManager { target.currentTime = seekToTime; } else { - target.pause(); + this.safePause(target); target.currentTime = mediaState.currentTimeAtLastInteraction; } } @@ -194,7 +205,7 @@ export class MediaManager { // unexpected behavior void target.play(); } else { - target.pause(); + this.safePause(target); } } catch (error) { this.warn( @@ -220,7 +231,7 @@ export class MediaManager { } else { isPlaying = target.getAttribute('autoplay') !== null; } - if (isPlaying && playerIsPaused) target.pause(); + if (isPlaying && playerIsPaused) this.safePause(target); let playbackRate = 1; if (typeof mediaAttributes.rr_mediaPlaybackRate === 'number') {