From f368ab624ed887fa0e1d48b133fea6a985c88238 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Tue, 13 Dec 2022 16:55:15 +0100
Subject: [PATCH] change(player): add mobile animation

---
 frontend/app/player/web/Screen/Cursor.ts      |  8 +++-
 .../app/player/web/Screen/cursor.module.css   | 41 +++++++++++++++++++
 2 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/frontend/app/player/web/Screen/Cursor.ts b/frontend/app/player/web/Screen/Cursor.ts
index 83dba4ab1..f2d371062 100644
--- a/frontend/app/player/web/Screen/Cursor.ts
+++ b/frontend/app/player/web/Screen/Cursor.ts
@@ -5,11 +5,14 @@ import styles from './cursor.module.css';
 export default class Cursor {
   private readonly cursor: HTMLDivElement;
   private tagElement: HTMLDivElement;
+  private isMobile: boolean;
+
   constructor(overlay: HTMLDivElement, isMobile: boolean) {
     this.cursor = document.createElement('div');
     this.cursor.className = styles.cursor;
     if (isMobile) this.cursor.style.backgroundImage = 'unset'
     overlay.appendChild(this.cursor);
+    this.isMobile = isMobile;
   }
 
   toggle(flag: boolean) {
@@ -52,9 +55,10 @@ export default class Cursor {
   }
 
   click() {
-    this.cursor.classList.add(styles.clicked)
+    const styleList = this.isMobile ? styles.clickedMobile : styles.clicked
+    this.cursor.classList.add(styleList)
     setTimeout(() => {
-      this.cursor.classList.remove(styles.clicked)
+      this.cursor.classList.remove(styleList)
     }, 600)
   }
 
diff --git a/frontend/app/player/web/Screen/cursor.module.css b/frontend/app/player/web/Screen/cursor.module.css
index 7a94c99b8..93f3d05ff 100644
--- a/frontend/app/player/web/Screen/cursor.module.css
+++ b/frontend/app/player/web/Screen/cursor.module.css
@@ -67,3 +67,44 @@
     transform: scale3d(1.2, 1.2, 1);
   }
 }
+
+.cursor.clickedMobile::after {
+	-webkit-animation: anim-effect-sanja 1s ease-out forwards;
+	animation: anim-effect-sanja 1s ease-out forwards;
+}
+
+@-webkit-keyframes anim-effect-sanja {
+	0% {
+		opacity: 1;
+		-webkit-transform: scale3d(0.5, 0.5, 1);
+		transform: scale3d(0.5, 0.5, 1);
+	}
+	25% {
+		opacity: 1;
+		-webkit-transform: scale3d(1, 1, 1);
+		transform: scale3d(1, 1, 1);
+	}
+	100% {
+		opacity: 0;
+		-webkit-transform: scale3d(1, 1, 1);
+		transform: scale3d(1, 1, 1);
+	}
+}
+
+@keyframes anim-effect-sanja {
+	0% {
+		opacity: 1;
+		-webkit-transform: scale3d(0.5, 0.5, 1);
+		transform: scale3d(0.5, 0.5, 1);
+	}
+	25% {
+		opacity: 1;
+		-webkit-transform: scale3d(1, 1, 1);
+		transform: scale3d(1, 1, 1);
+	}
+	100% {
+		opacity: 0;
+		-webkit-transform: scale3d(1, 1, 1);
+		transform: scale3d(1, 1, 1);
+	}
+}