From a0098296885d5d059e4bf9129be1504f2a734883 Mon Sep 17 00:00:00 2001
From: SrGooglo <srgooglo@ragestudio.net>
Date: Fri, 13 Oct 2023 20:45:29 +0000
Subject: [PATCH] add touch effect

---
 .../app/src/components/Music/Track/index.jsx  |  2 ++
 .../app/src/components/Music/Track/index.less | 27 ++++++++++++++++++-
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/components/Music/Track/index.jsx b/packages/app/src/components/Music/Track/index.jsx
index 60879243..8519c34e 100644
--- a/packages/app/src/components/Music/Track/index.jsx
+++ b/packages/app/src/components/Music/Track/index.jsx
@@ -25,6 +25,7 @@ const handlers = {
 
 const Track = (props) => {
     const {
+        loading,
         track_manifest,
         playback_status,
     } = React.useContext(PlayerContext)
@@ -139,6 +140,7 @@ const Track = (props) => {
             {
                 ["current"]: isCurrent,
                 ["playing"]: isPlaying,
+                ["loading"]: isCurrent && loading
             }
         )}
         style={{
diff --git a/packages/app/src/components/Music/Track/index.less b/packages/app/src/components/Music/Track/index.less
index 8e256ba7..4df899ad 100644
--- a/packages/app/src/components/Music/Track/index.less
+++ b/packages/app/src/components/Music/Track/index.less
@@ -1,3 +1,27 @@
+html {
+    &.mobile {
+        .music-track {
+            &:active {
+                animation: press 150ms ease-in-out;
+            }
+
+            &.loading {
+                // TODO: create a bottom line svg to animate stroke width
+            }
+        }
+    }
+}
+
+@keyframes press {
+    0% {
+        transform: scale(1);
+    }
+
+    100% {
+        transform: scale(0.95);
+    }
+}
+
 .music-track {
     position: relative;
 
@@ -9,6 +33,8 @@
 
     isolation: isolate;
 
+    transition: all 150ms ease-in-out;
+
     &:hover {
         .music-track_actions {
             &.withOrder {
@@ -45,7 +71,6 @@
                 linear-gradient(to right, rgba(var(--cover_average-color)), transparent),
                 url(https://grainy-gradients.vercel.app/noise.svg);
         }
-
     }
 
     .music-track_background {