Tie animations to playback state
- Paused/stopped playerctl treated as no music (QML change) - Character and notes only appear when Playing - VU meter always visible but in rest state (3px, faint) when idle Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
b6eb089c2c
commit
2ee2470089
2 changed files with 19 additions and 14 deletions
|
|
@ -102,14 +102,13 @@ html, body {
|
|||
============================================================ */
|
||||
.vu-meter {
|
||||
position: absolute;
|
||||
bottom: 4%;
|
||||
bottom: 5%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 4px;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.8s;
|
||||
}
|
||||
.vu-bar {
|
||||
|
|
@ -887,9 +886,14 @@ for (let i = 0; i < VU_COUNT; i++) {
|
|||
function animateVU(ts) {
|
||||
const t = ts * 0.001;
|
||||
vuBars.forEach(bar => {
|
||||
const h = bar._maxH * Math.abs(Math.sin(t * bar._speed + bar._phase));
|
||||
bar.style.height = Math.max(3, h) + 'px';
|
||||
bar.style.opacity = 0.55 + 0.45 * (h / bar._maxH);
|
||||
if (isPlaying) {
|
||||
const h = bar._maxH * Math.abs(Math.sin(t * bar._speed + bar._phase));
|
||||
bar.style.height = Math.max(3, h) + 'px';
|
||||
bar.style.opacity = 0.55 + 0.45 * (h / bar._maxH);
|
||||
} else {
|
||||
bar.style.height = '3px';
|
||||
bar.style.opacity = '0.15';
|
||||
}
|
||||
});
|
||||
requestAnimationFrame(animateVU);
|
||||
}
|
||||
|
|
@ -919,15 +923,15 @@ function spawnNote() {
|
|||
setTimeout(() => el.remove(), dur * 1000 + 100);
|
||||
}
|
||||
|
||||
let isPlaying = false;
|
||||
|
||||
/* Spawn on every beat (500ms) with a 50 % chance of two notes */
|
||||
setInterval(() => {
|
||||
if (!isPlaying) return;
|
||||
spawnNote();
|
||||
if (Math.random() < 0.5) spawnNote();
|
||||
}, BEAT_MS);
|
||||
|
||||
/* First note immediately */
|
||||
spawnNote();
|
||||
|
||||
/* ============================================================
|
||||
MUSIC INFO (called by QML via runJavaScript)
|
||||
============================================================ */
|
||||
|
|
@ -936,8 +940,8 @@ function updateMusic(artist, title) {
|
|||
const text = (artist && title) ? `${artist} — ${title}`
|
||||
: (title || artist || '— —');
|
||||
const playing = !!(artist || title);
|
||||
isPlaying = playing;
|
||||
document.querySelector('.robot-wrap').style.opacity = playing ? '1' : '0';
|
||||
document.querySelector('.vu-meter').style.opacity = playing ? '1' : '0';
|
||||
if (el.textContent === text) return;
|
||||
el.textContent = text;
|
||||
if (playing) pickSkeleton();
|
||||
|
|
|
|||
|
|
@ -28,14 +28,15 @@ WallpaperItem {
|
|||
Plasma5Support.DataSource {
|
||||
id: musicSource
|
||||
engine: "executable"
|
||||
connectedSources: ["playerctl metadata --format '{{artist}}||{{title}}' 2>/dev/null || echo '||'"]
|
||||
connectedSources: ["playerctl metadata --format '{{status}}||{{artist}}||{{title}}' 2>/dev/null || echo '||'"]
|
||||
interval: 2000
|
||||
|
||||
onNewData: function(sourceName, data) {
|
||||
var raw = data["stdout"].trim()
|
||||
var sep = raw.indexOf("||")
|
||||
var artist = sep >= 0 ? raw.substring(0, sep) : ""
|
||||
var title = sep >= 0 ? raw.substring(sep + 2) : raw
|
||||
var raw = data["stdout"].trim()
|
||||
var parts = raw.split("||")
|
||||
var status = parts[0] || ""
|
||||
var artist = status === "Playing" ? (parts[1] || "") : ""
|
||||
var title = status === "Playing" ? (parts[2] || "") : ""
|
||||
webView.runJavaScript(
|
||||
"updateMusic(" + JSON.stringify(artist) + "," + JSON.stringify(title) + ")"
|
||||
)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue