From 42847b7c4b2a6ed86e6dbb10002f91171fe21ee9 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Mon, 13 Feb 2023 14:13:21 +0100
Subject: [PATCH] change(player): add mouse thrashing ui event

---
 frontend/app/player/web/MessageManager.ts     | 12 +++++++--
 frontend/app/player/web/Screen/Cursor.ts      | 25 ++++++++++++++++++-
 .../app/player/web/Screen/cursor.module.css   |  6 ++---
 .../player/web/managers/MouseMoveManager.ts   |  2 +-
 4 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/frontend/app/player/web/MessageManager.ts b/frontend/app/player/web/MessageManager.ts
index d0ae18020..8fb928909 100644
--- a/frontend/app/player/web/MessageManager.ts
+++ b/frontend/app/player/web/MessageManager.ts
@@ -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;
diff --git a/frontend/app/player/web/Screen/Cursor.ts b/frontend/app/player/web/Screen/Cursor.ts
index f2d371062..799075b18 100644
--- a/frontend/app/player/web/Screen/Cursor.ts
+++ b/frontend/app/player/web/Screen/Cursor.ts
@@ -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() {
diff --git a/frontend/app/player/web/Screen/cursor.module.css b/frontend/app/player/web/Screen/cursor.module.css
index 93f3d05ff..67d452953 100644
--- a/frontend/app/player/web/Screen/cursor.module.css
+++ b/frontend/app/player/web/Screen/cursor.module.css
@@ -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;
 
diff --git a/frontend/app/player/web/managers/MouseMoveManager.ts b/frontend/app/player/web/managers/MouseMoveManager.ts
index 1b19d7e5b..fa320ab13 100644
--- a/frontend/app/player/web/managers/MouseMoveManager.ts
+++ b/frontend/app/player/web/managers/MouseMoveManager.ts
@@ -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'