From ea28b1b2a872fb293bf2525b5bd81790757a3778 Mon Sep 17 00:00:00 2001 From: Justin Halsall Date: Tue, 20 Sep 2022 12:09:01 +0200 Subject: [PATCH] Make maximum scale configurable --- guide.md | 21 +++++++++++---------- packages/rrweb-player/src/Player.svelte | 5 ++++- 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/guide.md b/guide.md index c3f1e5ec06..206fa053ab 100644 --- 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 index bb2f4b6c87..b69bf0ca3e 100644 --- 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%)'; };