valknar/pivoine.art
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: sync track cover hover effect with playing state

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-19 17:30:14 +01:00
parent f73aff8ce4
commit aed0b6bc61
2 changed files with 56 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
layouts/partials/track-card.html
View File

@@ -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>

57
layouts/tracks/single.html
View File

@@ -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"
>