From 0cd4a2723b7353555716fdcc61921a275ee81d3a Mon Sep 17 00:00:00 2001 From: Manoel Aranda Neto Date: Fri, 26 Apr 2024 14:47:05 +0200 Subject: [PATCH 1/3] fix: safe pause --- packages/rrweb/src/replay/media/index.ts | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/packages/rrweb/src/replay/media/index.ts b/packages/rrweb/src/replay/media/index.ts index 3c137665df..092b43b788 100644 --- a/packages/rrweb/src/replay/media/index.ts +++ b/packages/rrweb/src/replay/media/index.ts @@ -49,11 +49,21 @@ 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') { + target.pause(); + } + } + private syncAllMediaElements(options = { pause: false }) { this.mediaMap.forEach((mediaState, target) => { this.syncTargetWithState(target); if (options.pause) { - target.pause(); + safePause(target); } }); } @@ -103,7 +113,7 @@ export class MediaManager { target.currentTime = seekToTime; } else { - target.pause(); + this.safePause(target); target.currentTime = mediaState.currentTimeAtLastInteraction; } } @@ -194,7 +204,7 @@ export class MediaManager { // unexpected behavior void target.play(); } else { - target.pause(); + this.safePause(target); } } catch (error) { this.warn( @@ -220,7 +230,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') { From cedbc66f00921c2b7de72ae84c214e6ced73c388 Mon Sep 17 00:00:00 2001 From: Manoel Aranda Neto Date: Fri, 26 Apr 2024 14:53:51 +0200 Subject: [PATCH 2/3] fix --- packages/rrweb/src/replay/media/index.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/rrweb/src/replay/media/index.ts b/packages/rrweb/src/replay/media/index.ts index 092b43b788..d76a37a0f7 100644 --- a/packages/rrweb/src/replay/media/index.ts +++ b/packages/rrweb/src/replay/media/index.ts @@ -55,6 +55,7 @@ export class MediaManager { // 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(); } } @@ -63,7 +64,7 @@ export class MediaManager { this.mediaMap.forEach((mediaState, target) => { this.syncTargetWithState(target); if (options.pause) { - safePause(target); + this.safePause(target); } }); } From 1181b47fb839f6917603c76fd9872cdd971e4420 Mon Sep 17 00:00:00 2001 From: Manoel Aranda Neto Date: Fri, 26 Apr 2024 15:43:05 +0200 Subject: [PATCH 3/3] changeset --- .changeset/safe-pause.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/safe-pause.md 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