From b8a65b193fe03bd9853eab9d999ff2dc56798d67 Mon Sep 17 00:00:00 2001
From: Kasper Seweryn <github@wvffle.net>
Date: Tue, 7 Mar 2023 10:31:48 +0100
Subject: [PATCH] perf(play-indicator): delegate play indicator to the GPU
 instead of CPU

This reduces the CSS paints by animating `scaleY` instead of element `height`

Part-of: <https://dev.funkwhale.audio/funkwhale/funkwhale/-/merge_requests/2346>
---
 front/src/composables/audio/tracks.ts         |  1 +
 .../src/style/components/_play_indicator.scss | 21 ++++++++++---------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/front/src/composables/audio/tracks.ts b/front/src/composables/audio/tracks.ts
index 48f3624b1..ffd6f8b52 100644
--- a/front/src/composables/audio/tracks.ts
+++ b/front/src/composables/audio/tracks.ts
@@ -93,6 +93,7 @@ export const useTracks = createGlobalState(() => {
 
       const SoundImplementation = soundImplementation.value
       const sound = new SoundImplementation(sources)
+      sound.track = track.title
 
       sound.onSoundEnd(() => {
         console.log('TRACK ENDED, PLAYING NEXT')
diff --git a/front/src/style/components/_play_indicator.scss b/front/src/style/components/_play_indicator.scss
index 380ab3951..bf8301d49 100644
--- a/front/src/style/components/_play_indicator.scss
+++ b/front/src/style/components/_play_indicator.scss
@@ -1,29 +1,30 @@
 #audio-bars {
   height: 1em;
-  position: relative;
+  display: flex;
+  width: 12px;
 }
 
 .audio-bar {
   background: var(--main-color);
-  bottom: 0;
-  height: .1em;
-  position: absolute;
   width: 3px;
+  height: 1em;
   animation: sound 1s cubic-bezier(.17,.37,.43,.67) infinite alternate;
+  will-change: opacity, transform;
+  transform-origin: bottom;
 }
 
 @keyframes sound {
   0% {
     opacity: .35;
-    height: .1em;
+    transform: scaleY(0.1) translateZ(0);
   }
   100% {
     opacity: 1;
-    height: 1em;
+    transform: scaleY(1) translateZ(0);
   }
 }
 
-.audio-bar:nth-child(1)  { left:  0em; animation-duration: 0.4s; }
-.audio-bar:nth-child(2)  { left: .25em; animation-duration: 0.2s; }
-.audio-bar:nth-child(3)  { left: .50em; animation-duration: 1.0s; }
-.audio-bar:nth-child(4)  { left: .75em; animation-duration: 0.3s; }
+.audio-bar:nth-child(1)  { animation-duration: 0.4s; }
+.audio-bar:nth-child(2)  { animation-duration: 0.2s; }
+.audio-bar:nth-child(3)  { animation-duration: 1.0s; }
+.audio-bar:nth-child(4)  { animation-duration: 0.3s; }