Ensure animations don't continue playing when we've paused playback (#417)

This commit is contained in:
Eoghan Murray
2026-04-01 12:00:00 +08:00
committed by GitHub
parent 0efc644a29
commit 8833d3c7ce

View File

@@ -276,6 +276,7 @@ export class Replayer {
this.service.send({ type: 'PAUSE' }); this.service.send({ type: 'PAUSE' });
this.service.send({ type: 'PLAY', payload: { timeOffset } }); this.service.send({ type: 'PLAY', payload: { timeOffset } });
} }
this.iframe.contentDocument.getElementsByTagName('html')[0].classList.remove('rrweb-paused');
this.emitter.emit(ReplayerEvents.Start); this.emitter.emit(ReplayerEvents.Start);
} }
@@ -287,6 +288,7 @@ export class Replayer {
this.play(timeOffset); this.play(timeOffset);
this.service.send({ type: 'PAUSE' }); this.service.send({ type: 'PAUSE' });
} }
this.iframe.contentDocument.getElementsByTagName('html')[0].classList.add('rrweb-paused');
this.emitter.emit(ReplayerEvents.Pause); this.emitter.emit(ReplayerEvents.Pause);
} }
@@ -492,6 +494,10 @@ export class Replayer {
const injectStylesRules = getInjectStyleRules( const injectStylesRules = getInjectStyleRules(
this.config.blockClass, this.config.blockClass,
).concat(this.config.insertStyleRules); ).concat(this.config.insertStyleRules);
injectStylesRules.push('html.rrweb-paused * { animation-play-state: paused !important; }');
if (!this.service.state.matches('playing')) {
this.iframe.contentDocument.getElementsByTagName('html')[0].classList.add('rrweb-paused');
}
for (let idx = 0; idx < injectStylesRules.length; idx++) { for (let idx = 0; idx < injectStylesRules.length; idx++) {
(styleEl.sheet! as CSSStyleSheet).insertRule(injectStylesRules[idx], idx); (styleEl.sheet! as CSSStyleSheet).insertRule(injectStylesRules[idx], idx);
} }