Skip to content

Commit

Permalink
Anthony/hig 156 change the color style of the cursor to (#25)
Browse files Browse the repository at this point in the history
* Added support for inactive threshold

* Updated version num

* Prettified

* Fixed names

* Fixed name

* Renamed

* Cleaned code and added handling for edge cases

* Updated package num

* More skip customize, changed cursor

* Update package version

* Changed to use webpack instead of rollup

Co-authored-by: Jay Khatri <[email protected]>

* Fixed files

* Added missing styles from CDN

Co-authored-by: Jay Khatri <[email protected]>
  • Loading branch information
eightants and jay-khatri authored Feb 21, 2021
1 parent f23b119 commit 093d3da
Show file tree
Hide file tree
Showing 9 changed files with 5,922 additions and 5,898 deletions.
10 changes: 4 additions & 6 deletions .github/workflows/release.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}
13 changes: 4 additions & 9 deletions package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
7 changes: 6 additions & 1 deletion src/replay/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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);
Expand Down
161 changes: 159 additions & 2 deletions src/replay/styles/style.css
Original file line number Diff line number Diff line change
@@ -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;
}
Expand All @@ -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: '';
Expand All @@ -28,7 +107,6 @@
position: absolute;
pointer-events: none;
}

@keyframes click {
0% {
opacity: 0.3;
Expand All @@ -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;
}
2 changes: 2 additions & 0 deletions src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -504,6 +504,8 @@ export type playerConfig = {
unpackFn?: UnpackFn;
logConfig: LogReplayConfig;
inactiveThreshold: number;
inactiveSkipTime: number;
maxSkipSpeed: number;
};

export type LogReplayConfig = {
Expand Down
6 changes: 4 additions & 2 deletions tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"],
Expand Down
1 change: 0 additions & 1 deletion typings/replay/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ export declare class Replayer {
private tailPositions;
private emitter;
private inactiveEndTimestamp;
private nextUserInteractionEvent;
private legacy_missingNodeRetryMap;
private treeIndex;
private fragmentParentMap;
Expand Down
94 changes: 49 additions & 45 deletions webpack.config.js
Original file line number Diff line number Diff line change
@@ -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',
};
Loading

0 comments on commit 093d3da

Please sign in to comment.