attach the scaled iframe into player

.gitignore

@@ -5,3 +5,4 @@ package-lock.json
 yarn.lock
 
 .vscode
+temp

package.json

@@ -14,6 +14,9 @@
     "sirv-cli": "^0.2.2",
     "svelte": "^2.13.5"
   },
+  "dependencies": {
+    "rrweb": "file:../rrweb"
+  },
   "scripts": {
     "build": "rollup -c",
     "autobuild": "rollup -c -w",

rollup.config.js

@@ -6,38 +6,38 @@ import { terser } from 'rollup-plugin-terser';
 const production = !process.env.ROLLUP_WATCH;
 
 export default {
-	input: 'src/main.js',
+  input: 'src/main.js',
-	output: {
+  output: {
-		sourcemap: true,
+    sourcemap: true,
-		format: 'iife',
+    format: 'iife',
-		name: 'app',
+    name: 'app',
-		file: 'public/bundle.js'
+    file: 'public/bundle.js',
-	},
+  },
-	plugins: [
+  plugins: [
-		svelte({
+    svelte({
-			// opt in to v3 behaviour today
+      // opt in to v3 behaviour today
-			skipIntroByDefault: true,
+      skipIntroByDefault: true,
-			nestedTransitions: true,
+      nestedTransitions: true,
 
-			// enable run-time checks when not in production
+      // enable run-time checks when not in production
-			dev: !production,
+      dev: !production,
-			// we'll extract any component CSS out into
+      // we'll extract any component CSS out into
-			// a separate file — better for performance
+      // a separate file — better for performance
-			css: css => {
+      css: css => {
-				css.write('public/bundle.css');
+        css.write('public/bundle.css');
-			}
+      },
-		}),
+    }),
 
-		// If you have external dependencies installed from
+    // If you have external dependencies installed from
-		// npm, you'll most likely need these plugins. In
+    // npm, you'll most likely need these plugins. In
-		// some cases you'll need additional configuration —
+    // some cases you'll need additional configuration —
-		// consult the documentation for details:
+    // consult the documentation for details:
-		// https://github.com/rollup/rollup-plugin-commonjs
+    // https://github.com/rollup/rollup-plugin-commonjs
-		resolve(),
+    resolve(),
-		commonjs(),
+    commonjs(),
 
-		// If we're building for production (npm run build
+    // If we're building for production (npm run build
-		// instead of npm run dev), minify
+    // instead of npm run dev), minify
-		production && terser()
+    production && terser(),
-	]
+  ],
 };

src/App.html

@@ -1,13 +1,14 @@
 <h1>
   rrweb player playground
 </h1>
-<Player />
+<Player {events} />
 
 <style>
 </style>
 
 <script>
   import Player from './Player.html';
+
   export default {
     components: {
       Player,

src/Player.html

@@ -1,21 +1,60 @@
-<div class="rr-player" { style }>
+<div class="rr-player">
-  rrplayer
+  <div class="rr-player__frame" ref:frame { style }></div>
 </div>
 
 <style>
   .rr-player {
-    border: 1px solid indianred;
+    border: 3px solid indianred;
+    float: left;
+    clear: both;
+  }
+
+  .rr-player__frame {
+    overflow: hidden;
+  }
+
+  :global(.replayer-wrapper) {
+    float: left;
+    clear: both;
+    transform-origin: top left;
+    left: 50%;
+    top: 50%;
+    border: 2px solid grey;
+  }
+
+  /* get from rrweb */
+  :global(.replayer-wrapper) {
+    position: relative;
+  }
+
+  :global(.replayer-mouse) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+  }
+
+  :global(.replayer-mouse::after) {
+    content: '';
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border-radius: 10px;
+    background: thistle;
+    transform: translate(-10px, -10px);
+    opacity: 0.5;
   }
 </style>
 
 <script>
-  import { inlineCss } from '../util.js';
+  import { Replayer } from 'rrweb';
+  import { inlineCss } from './util.js';
 
   export default {
     data() {
       return {
         width: 1024,
         height: 576,
+        events: [],
       };
     },
     computed: {
@@ -26,6 +65,26 @@
         });
       },
     },
+    methods: {
+      updateScale(el, frameDimension) {
+        const { width, height } = this.get();
+        const widthScale = width / frameDimension.width;
+        const heightScale = height / frameDimension.height;
+        el.style.transform =
+          `scale(${Math.min(widthScale, heightScale, 1)})` +
+          'translate(-50%, -50%)';
+      },
+    },
+    oncreate(p) {
+      const { events } = this.get();
+      const replayer = new Replayer(events, {
+        speed: 1,
+        root: this.refs.frame,
+        onResize: (dimension) => this.updateScale(replayer.wrapper, dimension),
+      });
+      replayer.play();
+    },
   };
 
+
 </script>