From e205d1b9decea31b9e372458dcb04507ee12d15b Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Tue, 20 Sep 2022 12:40:04 +0200
Subject: [PATCH 1/2] Allow player to play a from-to range

And optionally trigger a callback or loop
---
 packages/rrweb-player/src/Controller.svelte | 46 +++++++++++++++++++++
 packages/rrweb-player/src/Player.svelte     |  8 ++++
 2 files changed, 54 insertions(+)

diff --git a/packages/rrweb-player/src/Controller.svelte b/packages/rrweb-player/src/Controller.svelte
index f183e7d66e..183f743593 100644
--- a/packages/rrweb-player/src/Controller.svelte
+++ b/packages/rrweb-player/src/Controller.svelte
@@ -39,6 +39,13 @@
   let step: HTMLElement;
   let finished: boolean;
 
+  let pauseAt: number | false = false;
+  let onPauseHook: () => unknown | undefined = undefined;
+  let loop: {
+    start: number;
+    end: number;
+  } | null = null;
+
   let meta: playerMetaData;
   $: meta = replayer.getMetaData();
   let percentage: string;
@@ -94,6 +101,18 @@
     function update() {
       currentTime = replayer.getCurrentTime();
 
+      if (pauseAt && currentTime >= pauseAt) {
+        if (loop) {
+          playRange(loop.start, loop.end, true, undefined);
+        } else {
+          replayer.pause();
+          if (onPauseHook) {
+            onPauseHook();
+            onPauseHook = null;
+          }
+        }
+      }
+
       if (currentTime < meta.totalTime) {
         timer = requestAnimationFrame(update);
       }
@@ -139,10 +158,12 @@
       return;
     }
     replayer.pause();
+    pauseAt = false;
   };
 
   export const goto = (timeOffset: number, play?: boolean) => {
     currentTime = timeOffset;
+    pauseAt = false;
     const resumePlaying =
       typeof play === 'boolean' ? play : playerState === 'playing';
     if (resumePlaying) {
@@ -152,6 +173,27 @@
     }
   };
 
+  export const playRange = (
+     timeOffset: number,
+     endTimeOffset: number,
+     startLooping: boolean = false,
+     afterHook: undefined | (() => void) = undefined,
+   ) => {
+    if (startLooping) {
+      loop = {
+        start: timeOffset,
+        end: endTimeOffset,
+      };
+    } else {
+      loop = undefined;
+    }
+    currentTime = timeOffset;
+    pauseAt = endTimeOffset;
+    onPauseHook = afterHook;
+    replayer.play(timeOffset);
+  };
+
+
   const handleProgressClick = (event: MouseEvent) => {
     if (speedState === 'skipping') {
       return;
@@ -218,6 +260,10 @@
     );
     replayer.on('finish', () => {
       finished = true;
+      if (onPauseHook) {
+        onPauseHook();
+        onPauseHook = null;
+      }
     });
 
     if (autoPlay) {
diff --git a/packages/rrweb-player/src/Player.svelte b/packages/rrweb-player/src/Player.svelte
index bb2f4b6c87..86c8f702eb 100644
--- a/packages/rrweb-player/src/Player.svelte
+++ b/packages/rrweb-player/src/Player.svelte
@@ -114,6 +114,14 @@
   export const goto = (timeOffset: number, play?: boolean) => {
     controller.goto(timeOffset, play);
   };
+  export const playRange = (
+    timeOffset: number,
+    endTimeOffset: number,
+    startLooping: boolean = false,
+    afterHook: undefined | (() => void) = undefined,
+  ) => {
+    controller.playRange(timeOffset, endTimeOffset, startLooping, afterHook);
+  };  
 
   onMount(() => {
     // runtime type check

From fafb577a233adf31e1fde1490682e1181fca5770 Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Tue, 20 Sep 2022 15:19:26 +0200
Subject: [PATCH 2/2] Update packages/rrweb-player/src/Controller.svelte

---
 packages/rrweb-player/src/Controller.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/rrweb-player/src/Controller.svelte b/packages/rrweb-player/src/Controller.svelte
index 183f743593..61c3d56ac1 100644
--- a/packages/rrweb-player/src/Controller.svelte
+++ b/packages/rrweb-player/src/Controller.svelte
@@ -185,7 +185,7 @@
         end: endTimeOffset,
       };
     } else {
-      loop = undefined;
+      loop = null;
     }
     currentTime = timeOffset;
     pauseAt = endTimeOffset;