Make maximum scale configurable (#1006)

rrweb-io · Sep 26, 2022 · 6f63cf1 · 6f63cf1
1 parent 3924aaf
commit 6f63cf1
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 11 deletions.
diff --git a/guide.md b/guide.md
@@ -351,16 +351,17 @@ new rrwebPlayer({
 
 ##### Options
 
-| key            | default      | description                                            |
-| -------------- | ------------ | ------------------------------------------------------ |
-| events         | []           | the events for replaying                               |
-| width          | 1024         | the width of the replayer                              |
-| height         | 576          | the height of the replayer                             |
-| autoPlay       | true         | whether to autoplay                                    |
-| speedOption    | [1, 2, 4, 8] | speed options in UI                                    |
-| showController | true         | whether to show the controller UI                      |
-| tags           | {}           | customize the custom events style with a key-value map |
-| ...            | -            | all the rrweb Replayer options will be bypassed        |
+| key            | default      | description                                                          |
+| -------------- | ------------ | -------------------------------------------------------------------- |
+| events         | []           | the events for replaying                                             |
+| width          | 1024         | the width of the replayer                                            |
+| height         | 576          | the height of the replayer                                           |
+| maxScale       | 1            | the maximum scale of the replayer (1 = 100%), set to 0 for unlimited |
+| autoPlay       | true         | whether to autoplay                                                  |
+| speedOption    | [1, 2, 4, 8] | speed options in UI                                                  |
+| showController | true         | whether to show the controller UI                                    |
+| tags           | {}           | customize the custom events style with a key-value map               |
+| ...            | -            | all the rrweb Replayer options will be bypassed                      |
 
 #### Events
 

diff --git a/packages/rrweb-player/src/Player.svelte b/packages/rrweb-player/src/Player.svelte
@@ -14,6 +14,7 @@
 
   export let width = 1024;
   export let height = 576;
+  export let maxScale = 1;
   export let events: eventWithTime[] = [];
   export let skipInactive = true;
   export let autoPlay = true;
@@ -55,8 +56,10 @@
   ) => {
     const widthScale = width / frameDimension.width;
     const heightScale = height / frameDimension.height;
+    const scale = [widthScale, heightScale];
+    if (maxScale) scale.push(maxScale);
     el.style.transform =
-      `scale(${Math.min(widthScale, heightScale, 1)})` +
+      `scale(${Math.min(...scale)})` +
       'translate(-50%, -50%)';
   };