diff --git a/src/pages/constituent/blur/artwork-controller/_applet.astro b/src/pages/constituent/blur/artwork-controller/_applet.astro index 6fa85ab..85d3b1c 100644 --- a/src/pages/constituent/blur/artwork-controller/_applet.astro +++ b/src/pages/constituent/blur/artwork-controller/_applet.astro @@ -135,9 +135,15 @@ import "@styles/diffuse/fonts.css"; .controller__inner { position: relative; + transition-duration: var(--transition-durition); + transition-property: color; z-index: 10; } + .controller__inner.controller__inner--light-mode { + color: rgba(0, 0, 0, 0.6); + } + /* Now playing */ cite { @@ -147,6 +153,10 @@ import "@styles/diffuse/fonts.css"; text-shadow: var(--text-shadow-sm); } + .controller__inner--light-mode cite { + text-shadow: none; + } + /* Progress */ .progress { @@ -165,6 +175,10 @@ import "@styles/diffuse/fonts.css"; text-shadow: var(--text-shadow-xs); } + .controller__inner--light-mode .timestamps { + text-shadow: none; + } + /* Controls */ .controller menu { @@ -338,6 +352,7 @@ import "@styles/diffuse/fonts.css"; const [activeTrack, setActiveTrack] = signal(undefined); const [artwork, setArtwork] = signal([]); const [artworkColor, setArtworkColor] = signal(undefined); + const [artworkLightMode, setArtworkLightMode] = signal(false); const [duration, setDuration] = signal("0:00"); const [groupId, setGroupId] = signal(context.groupId); const [isPlaying, setIsPlaying] = signal(false); @@ -485,7 +500,10 @@ import "@styles/diffuse/fonts.css"; const currTrack = activeTrack(); const currCacheId = currTrack ? await trackArtworkCacheId(currTrack) : undefined; - if (cacheId === currCacheId) setArtwork(art); + if (cacheId === currCacheId) + try { + setArtwork(art); + } catch (err) {} } //////////////////////////////////////////// @@ -551,7 +569,12 @@ import "@styles/diffuse/fonts.css"; img.onload = () => { const fac = new FastAverageColor(); const color = fac.getColor(img as HTMLImageElement); + const rgb = color.value; + const o = Math.round((rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000); + console.log(o); + setArtworkColor(color.rgba); + setArtworkLightMode(o > 170); bg.style.backgroundColor = color.rgba; main.style.backgroundColor = color.rgba; img.style.opacity = "1"; @@ -567,6 +590,11 @@ import "@styles/diffuse/fonts.css"; showcase.appendChild(img); }); + effect(() => { + if (artworkLightMode()) controller.classList.add("controller__inner--light-mode"); + else controller.classList.remove("controller__inner--light-mode"); + }); + //////////////////////////////////////////// // UI ░ GROUP ID //////////////////////////////////////////// @@ -676,8 +704,6 @@ import "@styles/diffuse/fonts.css"; engine.audio.sendAction("pause", { audioId }); } else if (audioId) { engine.audio.sendAction("play", { audioId }); - } else { - engine.queue.sendAction("shift"); } } diff --git a/src/pages/engine/audio/_applet.astro b/src/pages/engine/audio/_applet.astro index ce49e5f..41065e2 100644 --- a/src/pages/engine/audio/_applet.astro +++ b/src/pages/engine/audio/_applet.astro @@ -257,7 +257,7 @@ function endedEvent(event: Event) { const audio = event.target as HTMLAudioElement; audio.currentTime = 0; - updateItems(audio.id, { hasEnded: true, isPlaying: false }); + updateItems(audio.id, { hasEnded: true }); } function errorEvent(event: Event) { @@ -268,8 +268,10 @@ function pauseEvent(event: Event) { const audio = event.target as HTMLAudioElement; + const item = context.data.items[audio.id]; + const ended = item ? item.hasEnded || item.progress === 1 : false; updateItems(audio.id, { isPlaying: false }); - update({ isPlaying: false }); + update({ isPlaying: ended }); } function playEvent(event: Event) {