From aed0b6bc61d8f78faafbe61d1eb3530f4878a690 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Thu, 19 Feb 2026 17:30:14 +0100
Subject: [PATCH] feat: sync track cover hover effect with playing state

---
 layouts/partials/track-card.html | 28 +++++++++++-----
 layouts/tracks/single.html       | 57 +++++++++++++++++++++-----------
 2 files changed, 56 insertions(+), 29 deletions(-)

diff --git a/layouts/partials/track-card.html b/layouts/partials/track-card.html
index ef4a9fd..cce596f 100755
--- a/layouts/partials/track-card.html
+++ b/layouts/partials/track-card.html
@@ -1,11 +1,20 @@
 {{/* Track Card Component */}}
 {{- $hasVideo := .Resources.GetMatch "preview.*" -}}
+{{- $audio := "" -}}
+{{- with .Resources.GetMatch "track.*" -}}
+  {{- $audio = .RelPermalink -}}
+{{- end -}}
 <article
   class="track-card rounded-lg overflow-hidden group transition-all duration-300"
-  :class="hovering ? '' : 'grayscale'"
-  x-data="{ hovering: false }"
-  @mouseenter="hovering = true; $refs.video?.play().catch(() => {})"
-  @mouseleave="hovering = false; if ($refs.video) { $refs.video.pause(); $refs.video.currentTime = 0; }"
+  x-data="{ 
+    hovering: false,
+    get isActive() {
+      return this.hovering || ($store.audio.isPlaying && $store.audio.currentTrack?.url === '{{ $audio }}');
+    }
+  }"
+  :class="isActive ? '' : 'grayscale'"
+  @mouseenter="hovering = true"
+  @mouseleave="hovering = false"
 >
   {{/* Cover Image/Video */}}
   <a href="{{ .Permalink }}" class="block relative aspect-square overflow-hidden">
@@ -15,7 +24,7 @@
         src="{{ $img.RelPermalink }}"
         alt="{{ $.Title }}"
         class="track-card__cover w-full h-full object-cover"
-        :class="{ 'opacity-0': hovering && $refs.video }"
+        :class="{ 'opacity-0': isActive && $refs.video }"
         loading="lazy"
         decoding="async"
       >
@@ -27,24 +36,25 @@
       </div>
     {{- end }}
 
-    {{/* Video preview on hover */}}
+    {{/* Video preview on hover or playing */}}
     {{- with .Resources.GetMatch "preview.*" }}
     <video
       x-ref="video"
       src="{{ .RelPermalink }}"
       class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300"
-      :class="hovering ? 'opacity-100' : 'opacity-0'"
+      :class="isActive ? 'opacity-100' : 'opacity-0'"
       muted
       loop
       playsinline
       preload="metadata"
+      x-effect="if (isActive) { $el.play().catch(() => {}) } else { $el.pause(); $el.currentTime = 0; }"
     ></video>
     {{- end }}
 
     {{/* Play overlay - only show if NO video exists */}}
     {{- if not $hasVideo }}
-    <div class="absolute inset-0 bg-surface-0/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
-      <div class="w-14 h-14 rounded-full bg-accent flex items-center justify-center transform scale-90 group-hover:scale-100 transition-transform">
+    <div class="absolute inset-0 bg-surface-0/60 transition-opacity flex items-center justify-center" :class="isActive ? 'opacity-100' : 'opacity-0'">
+      <div class="w-14 h-14 rounded-full bg-accent flex items-center justify-center transform transition-transform" :class="isActive ? 'scale-100' : 'scale-90'">
         <svg class="w-6 h-6 text-surface-0 ml-1" fill="currentColor" viewBox="0 0 24 24">
           <path d="M8 5v14l11-7z"/>
         </svg>
diff --git a/layouts/tracks/single.html b/layouts/tracks/single.html
index 950fd72..4f93b88 100755
--- a/layouts/tracks/single.html
+++ b/layouts/tracks/single.html
@@ -35,35 +35,48 @@
           {{- $img := .Resize "400x webp q90" }}
           <figure
             class="overflow-hidden rounded-lg group cursor-pointer relative aspect-square border border-border"
+            x-data="{ 
+              hovering: false,
+              get isActive() {
+                return this.hovering || ($store.audio.isPlaying && $store.audio.currentTrack?.url === '{{ $audio }}');
+              }
+            }"
+            @mouseenter="hovering = true"
+            @mouseleave="hovering = false"
             {{- if $audio }}
-            x-data
             @click="
-              $store.audio.currentTrack = {
-                title: '{{ $.Title }}',
-                url: '{{ $audio }}',
-                image: '{{ with $.Resources.GetMatch "cover.*" }}{{ (.Resize "200x webp q85").RelPermalink }}{{ end }}'
-              };
-              window.__pivoine?.audioManager?.play('{{ $audio }}');
-              $store.audio.isPlaying = true;
+              if ($store.audio.currentTrack?.url === '{{ $audio }}') {
+                window.__pivoine?.audioManager?.toggle();
+              } else {
+                $store.audio.currentTrack = {
+                  title: '{{ $.Title }}',
+                  url: '{{ $audio }}',
+                  image: '{{ with $.Resources.GetMatch "cover.*" }}{{ (.Resize "200x webp q85").RelPermalink }}{{ end }}'
+                };
+                window.__pivoine?.audioManager?.play('{{ $audio }}');
+                $store.audio.isPlaying = true;
+              }
             "
             {{- end }}
           >
             <img
               src="{{ $img.RelPermalink }}"
               alt="{{ $.Title }}"
-              class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500"
+              class="w-full h-full object-cover transition-all duration-500"
+              :class="isActive ? 'grayscale-0' : 'grayscale'"
               loading="eager"
             >
-            {{/* Video preview on hover */}}
+            {{/* Video preview on hover or playing */}}
             {{- with $.Resources.GetMatch "preview.*" }}
             <video
+              x-ref="video"
               src="{{ .RelPermalink }}"
-              class="absolute inset-0 w-full h-full object-cover opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+              class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300"
+              :class="isActive ? 'opacity-100' : 'opacity-0'"
               muted
               loop
               playsinline
-              onmouseenter="this.play()"
-              onmouseleave="this.pause(); this.currentTime=0;"
+              x-effect="if (isActive) { $el.play().catch(() => {}) } else { $el.pause(); $el.currentTime = 0; }"
             ></video>
             {{- end }}
           </figure>
@@ -74,13 +87,17 @@
         <div
           x-data
           @click="
-            $store.audio.currentTrack = {
-              title: '{{ .Title }}',
-              url: '{{ $audio }}',
-              image: '{{ with .Resources.GetMatch "cover.*" }}{{ (.Resize "200x webp q85").RelPermalink }}{{ end }}'
-            };
-            window.__pivoine?.audioManager?.play('{{ $audio }}');
-            $store.audio.isPlaying = true;
+            if ($store.audio.currentTrack?.url === '{{ $audio }}') {
+              window.__pivoine?.audioManager?.toggle();
+            } else {
+              $store.audio.currentTrack = {
+                title: '{{ .Title }}',
+                url: '{{ $audio }}',
+                image: '{{ with .Resources.GetMatch "cover.*" }}{{ (.Resize "200x webp q85").RelPermalink }}{{ end }}'
+              };
+              window.__pivoine?.audioManager?.play('{{ $audio }}');
+              $store.audio.isPlaying = true;
+            }
           "
           class="md:col-span-2 flex items-center gap-4 cursor-pointer group"
         >