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 */}} {{/* Track Card Component */}}
{{- $hasVideo := .Resources.GetMatch "preview.*" -}} {{- $hasVideo := .Resources.GetMatch "preview.*" -}}
{{- $audio := "" -}}
{{- with .Resources.GetMatch "track.*" -}}
{{- $audio = .RelPermalink -}}
{{- end -}}
<article <article
class="track-card rounded-lg overflow-hidden group transition-all duration-300" class="track-card rounded-lg overflow-hidden group transition-all duration-300"
:class="hovering ? '' : 'grayscale'" x-data="{
x-data="{ hovering: false }" hovering: false,
@mouseenter="hovering = true; $refs.video?.play().catch(() => {})" get isActive() {
@mouseleave="hovering = false; if ($refs.video) { $refs.video.pause(); $refs.video.currentTime = 0; }" return this.hovering || ($store.audio.isPlaying && $store.audio.currentTrack?.url === '{{ $audio }}');
}
}"
:class="isActive ? '' : 'grayscale'"
@mouseenter="hovering = true"
@mouseleave="hovering = false"
> >
{{/* Cover Image/Video */}} {{/* Cover Image/Video */}}
<a href="{{ .Permalink }}" class="block relative aspect-square overflow-hidden"> <a href="{{ .Permalink }}" class="block relative aspect-square overflow-hidden">
@@ -15,7 +24,7 @@
src="{{ $img.RelPermalink }}" src="{{ $img.RelPermalink }}"
alt="{{ $.Title }}" alt="{{ $.Title }}"
class="track-card__cover w-full h-full object-cover" class="track-card__cover w-full h-full object-cover"
:class="{ 'opacity-0': hovering && $refs.video }" :class="{ 'opacity-0': isActive && $refs.video }"
loading="lazy" loading="lazy"
decoding="async" decoding="async"
> >
@@ -27,24 +36,25 @@
</div> </div>
{{- end }} {{- end }}
{{/* Video preview on hover */}} {{/* Video preview on hover or playing */}}
{{- with .Resources.GetMatch "preview.*" }} {{- with .Resources.GetMatch "preview.*" }}
<video <video
x-ref="video" x-ref="video"
src="{{ .RelPermalink }}" src="{{ .RelPermalink }}"
class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300" 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 muted
loop loop
playsinline playsinline
preload="metadata" preload="metadata"
x-effect="if (isActive) { $el.play().catch(() => {}) } else { $el.pause(); $el.currentTime = 0; }"
></video> ></video>
{{- end }} {{- end }}
{{/* Play overlay - only show if NO video exists */}} {{/* Play overlay - only show if NO video exists */}}
{{- if not $hasVideo }} {{- 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="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 scale-90 group-hover:scale-100 transition-transform"> <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"> <svg class="w-6 h-6 text-surface-0 ml-1" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/> <path d="M8 5v14l11-7z"/>
</svg> </svg>

57
layouts/tracks/single.html
View File

@@ -35,35 +35,48 @@
{{- $img := .Resize "400x webp q90" }} {{- $img := .Resize "400x webp q90" }}
<figure <figure
class="overflow-hidden rounded-lg group cursor-pointer relative aspect-square border border-border" 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 }} {{- if $audio }}
x-data
@click=" @click="
$store.audio.currentTrack = { if ($store.audio.currentTrack?.url === '{{ $audio }}') {
title: '{{ $.Title }}', window.__pivoine?.audioManager?.toggle();
url: '{{ $audio }}', } else {
image: '{{ with $.Resources.GetMatch "cover.*" }}{{ (.Resize "200x webp q85").RelPermalink }}{{ end }}' $store.audio.currentTrack = {
}; title: '{{ $.Title }}',
window.__pivoine?.audioManager?.play('{{ $audio }}'); url: '{{ $audio }}',
$store.audio.isPlaying = true; image: '{{ with $.Resources.GetMatch "cover.*" }}{{ (.Resize "200x webp q85").RelPermalink }}{{ end }}'
};
window.__pivoine?.audioManager?.play('{{ $audio }}');
$store.audio.isPlaying = true;
}
" "
{{- end }} {{- end }}
> >
<img <img
src="{{ $img.RelPermalink }}" src="{{ $img.RelPermalink }}"
alt="{{ $.Title }}" 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" loading="eager"
> >
{{/* Video preview on hover */}} {{/* Video preview on hover or playing */}}
{{- with $.Resources.GetMatch "preview.*" }} {{- with $.Resources.GetMatch "preview.*" }}
<video <video
x-ref="video"
src="{{ .RelPermalink }}" 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 muted
loop loop
playsinline playsinline
onmouseenter="this.play()" x-effect="if (isActive) { $el.play().catch(() => {}) } else { $el.pause(); $el.currentTime = 0; }"
onmouseleave="this.pause(); this.currentTime=0;"
></video> ></video>
{{- end }} {{- end }}
</figure> </figure>
@@ -74,13 +87,17 @@
<div <div
x-data x-data
@click=" @click="
$store.audio.currentTrack = { if ($store.audio.currentTrack?.url === '{{ $audio }}') {
title: '{{ .Title }}', window.__pivoine?.audioManager?.toggle();
url: '{{ $audio }}', } else {
image: '{{ with .Resources.GetMatch "cover.*" }}{{ (.Resize "200x webp q85").RelPermalink }}{{ end }}' $store.audio.currentTrack = {
}; title: '{{ .Title }}',
window.__pivoine?.audioManager?.play('{{ $audio }}'); url: '{{ $audio }}',
$store.audio.isPlaying = true; 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" class="md:col-span-2 flex items-center gap-4 cursor-pointer group"
> >