add eslint

src/App.html

@@ -1,5 +1,5 @@
 <h1>
-	rrweb player playground
+  rrweb player playground
 </h1>
 <Player />
 
@@ -7,11 +7,10 @@
 </style>
 
 <script>
-	import Player from './Player.html';
-
-	export default {
-		components: {
-			Player
-		}
-	}
+  import Player from './Player.html';
+  export default {
+    components: {
+      Player,
+    },
+  };
 </script>

src/Player.html

@@ -1,4 +1,4 @@
-<div class="rr-player">
+<div class="rr-player" { style }>
   rrplayer
 </div>
 
@@ -9,9 +9,23 @@
 </style>
 
 <script>
+  import { inlineCss } from '../util.js';
+
   export default {
     data() {
-      return {}
-    }
-  }
-</script>
+      return {
+        width: 1024,
+        height: 576,
+      };
+    },
+    computed: {
+      style({ width, height }) {
+        return inlineCss({
+          width: `${width}px`,
+          height: `${height}px`,
+        });
+      },
+    },
+  };
+
+</script>

src/main.js

@@ -1,10 +1,10 @@
 import App from './App.html';
 
 const app = new App({
-	target: document.body,
-	data: {
-		name: 'world'
-	}
+  target: document.body,
+  data: {
+    name: 'world',
+  },
 });
 
-export default app;
+export default app;

src/util.js

@@ -0,0 +1,7 @@
+export function inlineCss(cssObj) {
+  let style = '';
+  Object.keys(cssObj).forEach(key => {
+    style += `${key}: ${cssObj[key]};`;
+  });
+  return style;
+}