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

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