declare style for player and add playerClassName props

rrweb-io · Feb 23, 2024 · 34408cf · 34408cf
1 parent 314a8dd
commit 34408cf
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/packages/rrweb-player/src/Player.svelte b/packages/rrweb-player/src/Player.svelte
@@ -12,6 +12,7 @@
   } from './utils';
   import Controller from './Controller.svelte';
 
+  export let playerClassName: string = '';
   export let width = 1024;
   export let height = 576;
   export let maxScale = 1;
@@ -213,14 +214,16 @@
     transform-origin: top left;
     left: 50%;
     top: 50%;
+    height: 100%;
   }
 
   .replayer-wrapper > iframe {
     border: none;
+    height: 100%;
   }
 </style>
 
-<div class="rr-player" bind:this={player} style={playerStyle}>
+<div class="{['rr-player', playerClassName].join(' ').trim()}" bind:this={player} style={playerStyle}>
   <div class="rr-player__frame" bind:this={frame} {style} />
   {#if replayer}
     <Controller

diff --git a/packages/rrweb-player/src/main.ts b/packages/rrweb-player/src/main.ts
@@ -3,6 +3,7 @@ import _Player from './Player.svelte';
 
 type PlayerProps = {
   events: eventWithTime[];
+  playerClassName?: string;
 };
 
 class Player extends _Player {

diff --git a/packages/rrweb-player/typings/index.d.ts b/packages/rrweb-player/typings/index.d.ts
@@ -12,6 +12,10 @@ export type RRwebPlayerOptions = {
      * @default `[]`
      */
     events: eventWithTime[];
+    /**
+     * The class names to apply to the player
+     */
+    playerClassName?: string;
     /**
      * The width of the replayer
      * @defaultValue `1024`