jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change(player): add mouse thrashing ui event

Browse source
This commit is contained in:
nick-delirium 2023-02-13 14:13:21 +01:00
parent 4a96d87cb7
commit 42847b7c4b
4 changed files with 38 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
frontend/app/player/web/MessageManager.ts
View file

@ -19,7 +19,7 @@ import WindowNodeCounter from './managers/WindowNodeCounter';
import ActivityManager from './managers/ActivityManager';
import MFileReader from './messages/MFileReader';
import { MType } from './messages';
import { MouseThrashing, MType } from "./messages";
import { isDOMType } from './messages/filters.gen';
import type {
Message,
@ -100,6 +100,7 @@ export default class MessageManager {
private performanceTrackManager: PerformanceTrackManager = new PerformanceTrackManager();
private windowNodeCounter: WindowNodeCounter = new WindowNodeCounter();
private clickManager: ListWalker<MouseClick> = new ListWalker();
private mouseThrashingManager: ListWalker<MouseThrashing> = new ListWalker();
private resizeManager: ListWalker<SetViewportSize> = new ListWalker([]);
private pagesManager: PagesManager;
@ -322,9 +323,13 @@ export default class MessageManager {
// Moving mouse and setting :hover classes on ready view
this.mouseMoveManager.move(t);
const lastClick = this.clickManager.moveGetLast(t);
if (!!lastClick && t - lastClick.time < 600) { // happend during last 600ms
if (!!lastClick && t - lastClick.time < 600) { // happened during last 600ms
this.screen.cursor.click();
}
const lastThrashing = this.mouseThrashingManager.moveGetLast(t)
if (!!lastThrashing && t - lastThrashing.time < 300) {
this.screen.cursor.shake();
}
})
if (this.waitingForFiles && this.lastMessageTime <= t && t !== this.session.duration.milliseconds) {
@ -365,6 +370,9 @@ export default class MessageManager {
case MType.SetViewportSize:
this.resizeManager.append(msg);
break;
case MType.MouseThrashing:
this.mouseThrashingManager.append(msg);
break;
case MType.MouseMove:
this.mouseMoveManager.append(msg);
break;

25
frontend/app/player/web/Screen/Cursor.ts
View file

@ -3,9 +3,11 @@ import styles from './cursor.module.css';
export default class Cursor {
private readonly isMobile: boolean;
private readonly cursor: HTMLDivElement;
private tagElement: HTMLDivElement;
private isMobile: boolean;
private coords = { x: 0, y: 0 };
private isMoving = false;
constructor(overlay: HTMLDivElement, isMobile: boolean) {
this.cursor = document.createElement('div');
@ -13,6 +15,8 @@ export default class Cursor {
if (isMobile) this.cursor.style.backgroundImage = 'unset'
overlay.appendChild(this.cursor);
this.isMobile = isMobile;
window.shakeTest = this.shake.bind(this);
}
toggle(flag: boolean) {
@ -50,8 +54,27 @@ export default class Cursor {
}
move({ x, y }: Point) {
this.isMoving = true;
this.cursor.style.left = x + 'px';
this.cursor.style.top = y + 'px';
this.coords = { x, y };
setTimeout(() => this.isMoving = false, 60)
}
shake(iteration = 1, upwards = true, original: { x: number, y: number } = this.coords) {
if (this.isMoving) return;
if (iteration < 10) {
this.cursor.style.width = 45 + 'px'
this.cursor.style.height = 75 + 'px'
const shift = upwards ? 60 : -60
this.move({ x: this.coords.x + shift, y: this.coords.y - shift })
setTimeout(() => this.shake(iteration + 1, !upwards, original), 60)
} else {
this.cursor.style.width = 18 + 'px'
this.cursor.style.height = 30 + 'px'
this.move(original)
}
}
click() {

6
frontend/app/player/web/Screen/cursor.module.css
View file

@ -1,9 +1,9 @@
.cursor {
display: block;
position: absolute;
width: 13px;
height: 20px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M302.189 329.126H196.105l55.831 135.993c3.889 9.428-.555 19.999-9.444 23.999l-49.165 21.427c-9.165 4-19.443-.571-23.332-9.714l-53.053-129.136-86.664 89.138C18.729 472.71 0 463.554 0 447.977V18.299C0 1.899 19.921-6.096 30.277 5.443l284.412 292.542c11.472 11.179 3.007 31.141-12.5 31.141z"/></svg>');
width: 18px;
height: 30px;
background-image: url('data:image/svg+xml;utf8, <svg viewBox="0 0 486 647" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M400.189 402.126H294.105L349.936 538.119C353.825 547.547 349.381 558.118 340.492 562.118L291.327 583.545C282.162 587.545 271.884 582.974 267.995 573.831L214.942 444.695L128.278 533.833C116.729 545.71 98 536.554 98 520.977V91.299C98 74.899 117.921 66.904 128.277 78.443L412.689 370.985C424.161 382.164 415.696 402.126 400.189 402.126Z" fill="black"/></svg>');
background-repeat: no-repeat;
transition: top .125s linear, left .125s linear;

2
frontend/app/player/web/managers/MouseMoveManager.ts
View file

@ -1,5 +1,5 @@
import type Screen from '../Screen/Screen'
import type { MouseMove } from '../messages'
import type { MouseMove } from "../messages";
import ListWalker from '../../common/ListWalker'