From 313dee2a26671cb1900e545c16ee8577ef094cf6 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 1 Apr 2026 12:00:00 +0800
Subject: [PATCH] add eslint

---
 .eslintrc.json  | 13 +++++++++++++
 package.json    |  5 ++++-
 src/App.html    | 15 +++++++--------
 src/Player.html | 24 +++++++++++++++++++-----
 src/main.js     | 10 +++++-----
 src/util.js     |  7 +++++++
 6 files changed, 55 insertions(+), 19 deletions(-)
 create mode 100644 .eslintrc.json
 create mode 100644 src/util.js

diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 00000000..b066720d
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,13 @@
+{
+  "extends": "google",
+  "parserOptions": {
+    "ecmaVersion": 7,
+    "sourceType": "module"
+  },
+  "rules": {
+    "require-jsdoc": "off",
+    "arrow-parens": "off",
+    "object-curly-spacing": "off"
+  },
+  "plugins": ["html"]
+}
diff --git a/package.json b/package.json
index b07af65f..75368a6a 100644
--- a/package.json
+++ b/package.json
@@ -2,6 +2,9 @@
   "name": "rrweb-player",
   "version": "0.1.0",
   "devDependencies": {
+    "eslint": "^5.7.0",
+    "eslint-config-google": "^0.11.0",
+    "eslint-plugin-html": "^4.0.6",
     "npm-run-all": "^4.1.3",
     "rollup": "^0.66.2",
     "rollup-plugin-commonjs": "^9.1.8",
@@ -18,4 +21,4 @@
     "start": "sirv public",
     "start:dev": "sirv public --dev"
   }
-}
\ No newline at end of file
+}
diff --git a/src/App.html b/src/App.html
index 140cf9d3..73363aec 100644
--- a/src/App.html
+++ b/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>
\ No newline at end of file
diff --git a/src/Player.html b/src/Player.html
index 719e03a7..edabdbb1 100644
--- a/src/Player.html
+++ b/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>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index c804ceec..92632901 100644
--- a/src/main.js
+++ b/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;
\ No newline at end of file
+export default app;
diff --git a/src/util.js b/src/util.js
new file mode 100644
index 00000000..da07ec19
--- /dev/null
+++ b/src/util.js
@@ -0,0 +1,7 @@
+export function inlineCss(cssObj) {
+  let style = '';
+  Object.keys(cssObj).forEach(key => {
+    style += `${key}: ${cssObj[key]};`;
+  });
+  return style;
+}