Anthony/hig 156 change the color style of the cursor to

.github/workflows/release.yml

@@ -9,18 +9,16 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: 13.x
+          node-version: 14.15.4
           registry-url: https://registry.npmjs.org
       - name: Install
-        run: npm install
+        run: yarn install
       - name: Bundle
-        run: npm run bundle
-      - name: Typings
-        run: npm run typings
+        run: yarn bundle:highlight
       - name: Confirm new version
         run: python3 compare.py
       - name: Publish
         if: github.ref == 'refs/heads/master'
-        run: npm publish --access public
+        run: yarn publish --access public
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@highlight-run/rrweb",
-  "version": "0.9.26",
+  "version": "0.9.27",
   "description": "record and replay the web",
   "scripts": {
     "test": "npm run bundle:browser && cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.test.ts",
@@ -20,16 +20,10 @@
   "keywords": [
     "rrweb"
   ],
-  "main": "lib/rrweb-all.js",
-  "module": "es/rrweb/src/entries/all.js",
-  "unpkg": "dist/rrweb.js",
+  "main": "dist/index.js",
   "sideEffects": false,
-  "typings": "typings/entries/all.d.ts",
   "files": [
-    "dist",
-    "lib",
-    "es",
-    "typings"
+    "dist"
   ],
   "author": "[email protected]",
   "license": "MIT",
@@ -48,6 +42,7 @@
     "css-loader": "^5.0.1",
     "inquirer": "^6.2.1",
     "jest-snapshot": "^23.6.0",
+    "mini-css-extract-plugin": "^1.3.8",
     "mocha": "^5.2.0",
     "puppeteer": "^1.11.0",
     "rollup": "^2.3.3",

src/replay/index.ts

@@ -136,6 +136,8 @@ export class Replayer {
       mouseTail: defaultMouseTailConfig,
       logConfig: defaultLogConfig,
       inactiveThreshold: 0.02,
+      inactiveSkipTime: SKIP_TIME_INTERVAL,
+      maxSkipSpeed: 360,
     };
     this.config = Object.assign({}, defaultConfig, config);
     if (!this.config.logConfig.replayLogger)
@@ -605,7 +607,10 @@ export class Replayer {
       if (this.inactiveEndTimestamp) {
         const skipTime = this.inactiveEndTimestamp! - timestamp!;
         const payload = {
-          speed: Math.min(Math.round(skipTime / SKIP_TIME_INTERVAL), 360),
+          speed: Math.min(
+            Math.round(skipTime / this.config.inactiveSkipTime),
+            this.config.maxSkipSpeed,
+          ),
         };
         this.speedService.send({ type: 'FAST_FORWARD', payload });
         this.emitter.emit(ReplayerEvents.SkipStart, payload);

src/replay/styles/style.css

@@ -1,3 +1,82 @@
+.rr-controller.svelte-dxnc1j.svelte-dxnc1j {
+  width: 100%;
+  height: 80px;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  border-radius: 0 0 5px 5px;
+}
+.rr-timeline.svelte-dxnc1j.svelte-dxnc1j {
+  width: 80%;
+  display: flex;
+  align-items: center;
+}
+.rr-timeline__time.svelte-dxnc1j.svelte-dxnc1j {
+  display: inline-block;
+  width: 100px;
+  text-align: center;
+  color: #11103e;
+}
+.rr-progress.svelte-dxnc1j.svelte-dxnc1j {
+  flex: 1;
+  height: 12px;
+  background: #eee;
+  position: relative;
+  border-radius: 3px;
+  cursor: pointer;
+  box-sizing: border-box;
+  border-top: solid 4px #fff;
+  border-bottom: solid 4px #fff;
+}
+.rr-progress.disabled.svelte-dxnc1j.svelte-dxnc1j {
+  cursor: not-allowed;
+}
+.rr-progress__step.svelte-dxnc1j.svelte-dxnc1j {
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: #e0e1fe;
+}
+.rr-progress__handler.svelte-dxnc1j.svelte-dxnc1j {
+  width: 20px;
+  height: 20px;
+  border-radius: 10px;
+  position: absolute;
+  top: 2px;
+  transform: translate(-50%, -50%);
+  background: rgb(73, 80, 246);
+}
+.rr-controller__btns.svelte-dxnc1j.svelte-dxnc1j {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+}
+.rr-controller__btns.svelte-dxnc1j button.svelte-dxnc1j {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  padding: 0;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+}
+.rr-controller__btns.svelte-dxnc1j button.svelte-dxnc1j:active {
+  background: #e0e1fe;
+}
+.rr-controller__btns.svelte-dxnc1j button.active.svelte-dxnc1j {
+  color: #fff;
+  background: rgb(73, 80, 246);
+}
+.rr-controller__btns.svelte-dxnc1j button.svelte-dxnc1j:disabled {
+  cursor: not-allowed;
+}
 .replayer-wrapper {
   position: relative;
 }
@@ -9,7 +88,7 @@
   background-size: contain;
   background-position: center center;
   background-repeat: no-repeat;
-  background-image: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iTGF5ZXIgMSIgdmlld0JveD0iMCAwIDUwIDUwIiB4PSIwcHgiIHk9IjBweCI+PHRpdGxlPkRlc2lnbl90bnA8L3RpdGxlPjxwYXRoIGQ9Ik00OC43MSw0Mi45MUwzNC4wOCwyOC4yOSw0NC4zMywxOEExLDEsMCwwLDAsNDQsMTYuMzlMMi4zNSwxLjA2QTEsMSwwLDAsMCwxLjA2LDIuMzVMMTYuMzksNDRhMSwxLDAsMCwwLDEuNjUuMzZMMjguMjksMzQuMDgsNDIuOTEsNDguNzFhMSwxLDAsMCwwLDEuNDEsMGw0LjM4LTQuMzhBMSwxLDAsMCwwLDQ4LjcxLDQyLjkxWm0tNS4wOSwzLjY3TDI5LDMyYTEsMSwwLDAsMC0xLjQxLDBsLTkuODUsOS44NUwzLjY5LDMuNjlsMzguMTIsMTRMMzIsMjcuNThBMSwxLDAsMCwwLDMyLDI5TDQ2LjU5LDQzLjYyWiI+PC9wYXRoPjwvc3ZnPg==');
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDMwMCAzMDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMwMCAzMDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNGRkZGRkY7fQ0KCS5zdDF7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjg7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fQ0KPC9zdHlsZT4NCjxnIGlkPSJMYXllcl8yIj4NCgk8cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjE0LDE3IDk4LjMsMjY0IDE3NCwxOTIgMjYxLjcsMjc5LjUgMjc5LjUsMjYxLjcgMTkyLDE3NCAyNjQsOTguMyAJIi8+DQo8L2c+DQo8ZyBpZD0iTGF5ZXJfMSI+DQoJPHRpdGxlPkRlc2lnbl90bnA8L3RpdGxlPg0KCTxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0yOTIuMywyNTcuNWwtODcuOC04Ny43TDI2NiwxMDhjMi4zLTIuNCwyLjItNi4yLTAuMi04LjVjLTAuNS0wLjUtMS4xLTAuOS0xLjgtMS4yTDE0LjEsNi40DQoJCUMxMSw1LjIsNy41LDYuNyw2LjQsOS44Yy0wLjUsMS40LTAuNSwyLjksMCw0LjNsOTIsMjQ5LjljMS4xLDMuMSw0LjYsNC43LDcuNywzLjZjMC44LTAuMywxLjYtMC44LDIuMi0xLjRsNjEuNS02MS43bDg3LjcsODcuOA0KCQljMi4zLDIuMyw2LjEsMi4zLDguNSwwbDI2LjMtMjYuM0MyOTQuNiwyNjMuNywyOTQuNiwyNTkuOSwyOTIuMywyNTcuNUMyOTIuMywyNTcuNSwyOTIuMywyNTcuNSwyOTIuMywyNTcuNXogTTI2MS43LDI3OS41TDE3NCwxOTINCgkJYy0yLjMtMi4zLTYuMS0yLjMtOC41LDBsLTU5LjEsNTkuMWwtODQuMy0yMjlsMjI4LjcsODRMMTkyLDE2NS41Yy0yLjQsMi4zLTIuNCw2LjEsMCw4LjVjMCwwLDAsMCwwLDBsODcuNSw4Ny43TDI2MS43LDI3OS41eiIvPg0KPC9nPg0KPC9zdmc+DQo=');
 }
 .replayer-mouse::after {
   content: '';
@@ -28,7 +107,6 @@
   position: absolute;
   pointer-events: none;
 }
-
 @keyframes click {
   0% {
     opacity: 0.3;
@@ -45,3 +123,82 @@
     transform: translate(-5px, -5px);
   }
 }
+.rr-player {
+  position: relative;
+  background: white;
+  float: left;
+  border-radius: 5px;
+  box-shadow: 0 24px 48px rgba(17, 16, 62, 0.12);
+}
+.rr-player__frame {
+  overflow: hidden;
+}
+.replayer-wrapper {
+  float: left;
+  clear: both;
+  transform-origin: top left;
+  left: 50%;
+  top: 50%;
+}
+.replayer-wrapper > iframe {
+  border: none;
+}
+.switch.svelte-1mmdovf.svelte-1mmdovf {
+  height: 1em;
+  display: flex;
+  align-items: center;
+}
+.switch.disabled.svelte-1mmdovf.svelte-1mmdovf {
+  opacity: 0.5;
+}
+.label.svelte-1mmdovf.svelte-1mmdovf {
+  margin: 0 8px;
+}
+.switch.svelte-1mmdovf input[type='checkbox'].svelte-1mmdovf {
+  position: absolute;
+  opacity: 0;
+}
+.switch.svelte-1mmdovf label.svelte-1mmdovf {
+  width: 2em;
+  height: 1em;
+  position: relative;
+  cursor: pointer;
+  display: block;
+}
+.switch.disabled.svelte-1mmdovf label.svelte-1mmdovf {
+  cursor: not-allowed;
+}
+.switch.svelte-1mmdovf label.svelte-1mmdovf:before {
+  content: '';
+  position: absolute;
+  width: 2em;
+  height: 1em;
+  left: 0.1em;
+  transition: background 0.1s ease;
+  background: rgba(73, 80, 246, 0.5);
+  border-radius: 50px;
+}
+.switch.svelte-1mmdovf label.svelte-1mmdovf:after {
+  content: '';
+  position: absolute;
+  width: 1em;
+  height: 1em;
+  border-radius: 50px;
+  left: 0;
+  transition: all 0.2s ease;
+  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
+  background: #fcfff4;
+  animation: switch-off 0.2s ease-out;
+  z-index: 2;
+}
+.switch
+  input[type='checkbox']:checked
+  + label.svelte-1mmdovf.svelte-1mmdovf:before {
+  background: rgb(73, 80, 246);
+}
+.switch
+  input[type='checkbox']:checked
+  + label.svelte-1mmdovf.svelte-1mmdovf:after {
+  animation: switch-on 0.2s ease-out;
+  left: 1.1em;
+}

src/types.ts

@@ -504,6 +504,8 @@ export type playerConfig = {
   unpackFn?: UnpackFn;
   logConfig: LogReplayConfig;
   inactiveThreshold: number;
+  inactiveSkipTime: number;
+  maxSkipSpeed: number;
 };
 
 export type LogReplayConfig = {

tsconfig.json

@@ -8,9 +8,11 @@
     "preserveConstEnums": true,
     "sourceMap": true,
     "rootDir": "src",
-    "outDir": "build",
+    "outDir": "dist",
+    "declarationDir": "dist",
     "lib": ["es6", "dom"],
-    "downlevelIteration": true
+    "downlevelIteration": true,
+    "declaration": true,
   },
   "compileOnSave": true,
   "exclude": ["test"],

typings/replay/index.d.ts

@@ -14,7 +14,6 @@ export declare class Replayer {
     private tailPositions;
     private emitter;
     private inactiveEndTimestamp;
-    private nextUserInteractionEvent;
     private legacy_missingNodeRetryMap;
     private treeIndex;
     private fragmentParentMap;

webpack.config.js

@@ -1,51 +1,55 @@
 const path = require('path');
 const webpack = require('webpack'); //to access built-in plugins
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = {
-    entry: {
-        index: path.resolve(__dirname, 'src/index.ts'),
+  entry: {
+    index: path.resolve(__dirname, 'src/index.ts'),
+  },
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: '[name].js',
+    library: 'highlightLib',
+    libraryTarget: 'umd',
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+    }),
+  ],
+  devServer: {
+    watchContentBase: true,
+    writeToDisk: true,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
     },
-    output: {
-        path: path.resolve(__dirname, 'dist'),
-        filename: '[name].js',
-        library: 'highlightLib',
-        libraryTarget: 'umd',
-    },
-    devServer: {
-        watchContentBase: true,
-        writeToDisk: true,
-        headers: {
-            'Access-Control-Allow-Origin': '*',
-        },
-    },
-    devServer: {
-        contentBase: path.join(__dirname, 'dist'),
-        port: 8083
-    },
-    module: {
-        rules: [
-            {
-                test: /\.tsx?$/,
-                use: 'ts-loader',
-                exclude: /node_modules/,
-            },
-            {
-                test: /\.css$/,
-                use: [
-                    'style-loader',
-                    'css-loader'
-                ]
-            }
-        ],
-    },
-    resolve: {
-        extensions: ['.js', '.ts', '.tsx'],
-        modules: [path.resolve(__dirname, 'src'), 'node_modules'],
-        // NOTE: Only uncomment for experimenting with rrweb-snapshot.
-        // alias: {
-        //     "rrweb-snapshot": path.resolve(__dirname, "../rrweb-snapshot/dist"),
-        // },
-    },
-    mode: 'development',
-    devtool: 'source-map',
+  },
+  devServer: {
+    contentBase: path.join(__dirname, 'dist'),
+    port: 8083,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.css?$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+        sideEffects: true,
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.js', '.ts', '.tsx'],
+    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
+    // NOTE: Only uncomment for experimenting with rrweb-snapshot.
+    // alias: {
+    //   'rrweb-snapshot': path.resolve(__dirname, '../rrweb-snapshot/dist'),
+    // },
+  },
+  mode: 'development',
+  devtool: 'source-map',
 };