diff --git a/src/replay/machine.ts b/src/replay/machine.ts index f4cf39d4..b92362fc 100644 --- a/src/replay/machine.ts +++ b/src/replay/machine.ts @@ -102,6 +102,10 @@ export function createPlayerService( target: 'paused', actions: ['resetLastPlayedEvent', 'pause'], }, + ADD_EVENT: { + target: 'playing', + actions: ['addEvent'], + }, }, }, paused: { @@ -118,6 +122,10 @@ export function createPlayerService( target: 'live', actions: ['startLive'], }, + ADD_EVENT: { + target: 'paused', + actions: ['addEvent'], + }, }, }, live: { @@ -232,6 +240,9 @@ export function createPlayerService( }, delay: event.delay!, }); + if (!timer.isActive()) { + timer.start(); + } } } return { ...ctx, events }; diff --git a/src/replay/timer.ts b/src/replay/timer.ts index 72e6516a..f256b8eb 100644 --- a/src/replay/timer.ts +++ b/src/replay/timer.ts @@ -10,7 +10,7 @@ export class Timer { public speed: number; private actions: actionWithDelay[]; - private raf: number; + private raf: number | null = null; private liveMode: boolean; constructor(actions: actionWithDelay[] = [], speed: number) { @@ -61,6 +61,7 @@ export class Timer { public clear() { if (this.raf) { cancelAnimationFrame(this.raf); + this.raf = null; } this.actions.length = 0; } @@ -73,6 +74,10 @@ export class Timer { this.liveMode = mode; } + public isActive() { + return this.raf !== null; + } + private findActionIndex(action: actionWithDelay): number { let start = 0; let end = this.actions.length - 1;