From 75d4ac546749bba5f6ab0f5e945feebf07ac2f98 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Sun, 23 Feb 2025 00:01:13 +0100
Subject: [PATCH] fix(style): use buttons, add spacings and new play indicator
 animation for track row

---
 .../components/audio/track/PlayIndicator.vue  |   4 +
 front/src/components/audio/track/Row.vue      |  54 +++----
 front/src/components/audio/track/Table.vue    |   2 +-
 .../src/style/components/_play_indicator.scss | 140 +++++++++++++++++-
 front/src/style/components/_track_table.scss  |  10 +-
 5 files changed, 166 insertions(+), 44 deletions(-)

diff --git a/front/src/components/audio/track/PlayIndicator.vue b/front/src/components/audio/track/PlayIndicator.vue
index 131a9f388..3d06ebd4d 100644
--- a/front/src/components/audio/track/PlayIndicator.vue
+++ b/front/src/components/audio/track/PlayIndicator.vue
@@ -4,5 +4,9 @@
     <div class="audio-bar" />
     <div class="audio-bar" />
     <div class="audio-bar" />
+    <div class="audio-bar" />
+    <div class="audio-bar" />
+    <div class="audio-bar" />
+    <div class="audio-bar" />
   </div>
 </template>
diff --git a/front/src/components/audio/track/Row.vue b/front/src/components/audio/track/Row.vue
index a15487342..ebd5e0b3b 100644
--- a/front/src/components/audio/track/Row.vue
+++ b/front/src/components/audio/track/Row.vue
@@ -6,12 +6,14 @@ import { computed, ref } from 'vue'
 
 import usePlayOptions from '~/composables/audio/usePlayOptions'
 
-import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
-import PlayIndicator from '~/components/audio/track/PlayIndicator.vue'
-import PlayButton from '~/components/audio/PlayButton.vue'
 import { usePlayer } from '~/composables/audio/player'
 import { useQueue } from '~/composables/audio/queue'
 import { useStore } from '~/store'
+import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
+import PlayIndicator from '~/components/audio/track/PlayIndicator.vue'
+import PlayButton from '~/components/audio/PlayButton.vue'
+
+import Button from '~/components/ui/Button.vue'
 
 const store = useStore()
 
@@ -84,32 +86,29 @@ const hover = ref(false)
             !hover
         "
       />
-      <button
+      <Button
         v-else-if="
           !isPlaying &&
             active &&
             !hover
         "
-        class="ui really tiny basic icon button play-button paused"
-      >
-        <i class="bi bi-play-fill" />
-      </button>
-      <button
+        :icon="isPlaying && active && hover ? 'bi-play-fill' : 'bi-pause-fill'"
+        :class="[{ paused: isPlaying && active && hover }, 'ui', 'play-button']"
+      />
+      <Button
         v-else-if="
           isPlaying &&
             active &&
             hover
         "
-        class="ui really tiny basic icon button play-button"
-      >
-        <i class="bi bi-pause-fill" />
-      </button>
-      <button
+        icon="bi-pause-fill"
+        class="ui play-button"
+      />
+      <Button
         v-else-if="hover"
-        class="ui really tiny basic icon button play-button"
-      >
-        <i class="bi bi-play-fill" />
-      </button>
+        icon="bi-play-fill"
+        class="ui play-button"
+      />
       <span
         v-else-if="showPosition"
         class="track-position"
@@ -127,26 +126,20 @@ const hover = ref(false)
     >
       <img
         v-if="showArt && track.cover?.urls.original"
-        v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)"
-        alt=""
-        class="ui artist-track mini image"
+        v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.small_square_crop)"
+        :alt="track.title"
+        class="track_image"
       >
       <img
         v-else-if="showArt && track.album?.cover?.urls.original"
-        v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop)"
+        v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.small_square_crop)"
         alt=""
-        class="ui artist-track mini image"
-      >
-      <img
-        v-else-if="showArt && track.artist_credit?.length && track.artist_credit[0].artist.cover?.urls.original"
-        v-lazy="store.getters['instance/absoluteUrl'](track.artist_credit[0].artist.cover.urls.medium_square_crop) "
-        alt=""
-        class="ui artist-track mini image"
+        class="track_image"
       >
       <img
         v-else-if="showArt"
         alt=""
-        class="ui artist-track mini image"
+        class="track_image"
         src="../../../assets/audio/default-cover.png"
       >
     </div>
@@ -240,6 +233,7 @@ const hover = ref(false)
   .row > div {
     /* total height 64px, according to designs on penpot */
     margin-bottom: 8px;
+    margin-right: 8px;
     height: 48px;
   }
 </style>
diff --git a/front/src/components/audio/track/Table.vue b/front/src/components/audio/track/Table.vue
index 031faece1..9d3e2b0ac 100644
--- a/front/src/components/audio/track/Table.vue
+++ b/front/src/components/audio/track/Table.vue
@@ -187,7 +187,7 @@ const updatePage = (page: number) => {
       <Loader v-if="isLoading" />
 
       <Table
-        :grid-template-columns="['48px', '48px', 'auto', 'auto', 'auto', '48px', '64px', '48px']"
+        :grid-template-columns="['48px', '56px', 'auto', 'auto', 'auto', '56px', '64px', '48px']"
         :header-props="{ 'table-header': true }"
       >
         <template #header>
diff --git a/front/src/style/components/_play_indicator.scss b/front/src/style/components/_play_indicator.scss
index 32d0cee86..445936faa 100644
--- a/front/src/style/components/_play_indicator.scss
+++ b/front/src/style/components/_play_indicator.scss
@@ -1,13 +1,15 @@
 #audio-bars {
-  height: 1em;
+  height: 48px;
   display: flex;
-  width: 12px;
+  width: 48px;
+  align-items: center;
+  padding: 8px;
 }
 
 .audio-bar {
   background: var(--main-color);
-  width: 3px;
-  height: 1em;
+  width: 8px;
+  height: 100%;
   animation: sound 1s cubic-bezier(.17,.37,.43,.67) infinite alternate;
   will-change: opacity, transform;
   transform-origin: bottom;
@@ -24,7 +26,129 @@
   }
 }
 
-.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; }
+/* Keyframes for individual bars */
+@keyframes sound1 {
+  0% {
+    opacity: .35;
+    transform: scaleY(0.1) translateZ(0);
+  }
+  100% {
+    opacity: 1;
+    transform: scaleY(0.7); /* Scale to 70% of the container height */
+  }
+}
+
+@keyframes sound2 {
+  0% {
+    opacity: .35;
+    transform: scaleY(0.1) translateZ(0);
+  }
+  100% {
+    opacity: 1;
+    transform: scaleY(0.8); /* Scale to 80% of the container height */
+  }
+}
+
+@keyframes sound3 {
+  0% {
+    opacity: .35;
+    transform: scaleY(0.1) translateZ(0);
+  }
+  100% {
+    opacity: 1;
+    transform: scaleY(1); /* Scale to 100% of the container height */
+  }
+}
+
+@keyframes sound4 {
+  0% {
+    opacity: .35;
+    transform: scaleY(0.1) translateZ(0);
+  }
+  100% {
+    opacity: 1;
+    transform: scaleY(0.9); /* Scale to 90% of the container height */
+  }
+}
+
+@keyframes sound5 {
+  0% {
+    opacity: .35;
+    transform: scaleY(0.1) translateZ(0);
+  }
+  100% {
+    opacity: 1;
+    transform: scaleY(0.9); /* Scale to 90% of the container height */
+  }
+}
+
+@keyframes sound6 {
+  0% {
+    opacity: .35;
+    transform: scaleY(0.1) translateZ(0);
+  }
+  100% {
+    opacity: 1;
+    transform: scaleY(0.8); /* Scale to 80% of the container height */
+  }
+}
+
+@keyframes sound7 {
+  0% {
+    opacity: .35;
+    transform: scaleY(0.1) translateZ(0);
+  }
+  100% {
+    opacity: 1;
+    transform: scaleY(0.7); /* Scale to 70% of the container height */
+  }
+}
+
+@keyframes sound8 {
+  0% {
+    opacity: .35;
+    transform: scaleY(0.1) translateZ(0);
+  }
+  100% {
+    opacity: 1;
+    transform: scaleY(0.6); /* Scale to 60% of the container height */
+  }
+}
+
+/* Bass frequencies - slower attack, higher elevation */
+.audio-bar:nth-child(1) {
+  animation-duration: 0.8s;
+  animation-name: sound1;
+}
+.audio-bar:nth-child(2) {
+  animation-duration: 0.7s;
+  animation-name: sound2;
+}
+
+/* Mid frequencies - moderate attack and elevation */
+.audio-bar:nth-child(3) {
+  animation-duration: 0.6s;
+  animation-name: sound3;
+}
+.audio-bar:nth-child(4) {
+  animation-duration: 0.5s;
+  animation-name: sound4;
+}
+.audio-bar:nth-child(5) {
+  animation-duration: 0.4s;
+  animation-name: sound5;
+}
+
+/* High frequencies - quicker attack, lower elevation */
+.audio-bar:nth-child(6) {
+  animation-duration: 0.4s;
+  animation-name: sound6;
+}
+.audio-bar:nth-child(7) {
+  animation-duration: 0.3s;
+  animation-name: sound7;
+}
+.audio-bar:nth-child(8) {
+  animation-duration: 0.2s;
+  animation-name: sound8;
+}
diff --git a/front/src/style/components/_track_table.scss b/front/src/style/components/_track_table.scss
index d35a3c4c1..3bc46e6f5 100644
--- a/front/src/style/components/_track_table.scss
+++ b/front/src/style/components/_track_table.scss
@@ -62,12 +62,12 @@
     height: 100%;
     vertical-align: middle;
   }
-  .ui.artist-track.mini.image {
-    height: 40px;
-    margin-right: 8px;
-    margin-top: 4px;
+  .image.column {
+    padding: 8px;
+  }
+  .track_image {
+    height: 40px;
   }
-
   .image.left.floated.column {
 
   }