+29 -3

src/pages/constituent/blur/artwork-controller/_applet.astro

Reviewed

··· 135 135 136 136 .controller__inner { 137 137 position: relative; 138 138 + transition-duration: var(--transition-durition); 139 139 + transition-property: color; 138 140 z-index: 10; 141 141 + } 142 142 + 143 143 + .controller__inner.controller__inner--light-mode { 144 144 + color: rgba(0, 0, 0, 0.6); 139 145 } 140 146 141 147 /* Now playing */ ··· 147 153 text-shadow: var(--text-shadow-sm); 148 154 } 149 155 156 156 + .controller__inner--light-mode cite { 157 157 + text-shadow: none; 158 158 + } 159 159 + 150 160 /* Progress */ 151 161 152 162 .progress { ··· 163 173 margin-top: var(--space-3xs); 164 174 opacity: 0.4; 165 175 text-shadow: var(--text-shadow-xs); 176 176 + } 177 177 + 178 178 + .controller__inner--light-mode .timestamps { 179 179 + text-shadow: none; 166 180 } 167 181 168 182 /* Controls */ ··· 338 352 const [activeTrack, setActiveTrack] = signal<Track | undefined>(undefined); 339 353 const [artwork, setArtwork] = signal<Artwork[]>([]); 340 354 const [artworkColor, setArtworkColor] = signal<string | undefined>(undefined); 355 355 + const [artworkLightMode, setArtworkLightMode] = signal<boolean>(false); 341 356 const [duration, setDuration] = signal<string>("0:00"); 342 357 const [groupId, setGroupId] = signal<string | undefined>(context.groupId); 343 358 const [isPlaying, setIsPlaying] = signal<boolean>(false); ··· 485 500 486 501 const currTrack = activeTrack(); 487 502 const currCacheId = currTrack ? await trackArtworkCacheId(currTrack) : undefined; 488 488 - if (cacheId === currCacheId) setArtwork(art); 503 503 + if (cacheId === currCacheId) 504 504 + try { 505 505 + setArtwork(art); 506 506 + } catch (err) {} 489 507 } 490 508 491 509 //////////////////////////////////////////// ··· 551 569 img.onload = () => { 552 570 const fac = new FastAverageColor(); 553 571 const color = fac.getColor(img as HTMLImageElement); 572 572 + const rgb = color.value; 573 573 + const o = Math.round((rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000); 574 574 + console.log(o); 575 575 + 554 576 setArtworkColor(color.rgba); 577 577 + setArtworkLightMode(o > 170); 555 578 bg.style.backgroundColor = color.rgba; 556 579 main.style.backgroundColor = color.rgba; 557 580 img.style.opacity = "1"; ··· 565 588 566 589 // Insert new artwork 567 590 showcase.appendChild(img); 591 591 + }); 592 592 + 593 593 + effect(() => { 594 594 + if (artworkLightMode()) controller.classList.add("controller__inner--light-mode"); 595 595 + else controller.classList.remove("controller__inner--light-mode"); 568 596 }); 569 597 570 598 //////////////////////////////////////////// ··· 676 704 engine.audio.sendAction("pause", { audioId }); 677 705 } else if (audioId) { 678 706 engine.audio.sendAction("play", { audioId }); 679 679 - } else { 680 680 - engine.queue.sendAction("shift"); 681 707 } 682 708 } 683 709

+4 -2

src/pages/engine/audio/_applet.astro

Reviewed

··· 257 257 function endedEvent(event: Event) { 258 258 const audio = event.target as HTMLAudioElement; 259 259 audio.currentTime = 0; 260 260 - updateItems(audio.id, { hasEnded: true, isPlaying: false }); 260 260 + updateItems(audio.id, { hasEnded: true }); 261 261 } 262 262 263 263 function errorEvent(event: Event) { ··· 268 268 269 269 function pauseEvent(event: Event) { 270 270 const audio = event.target as HTMLAudioElement; 271 271 + const item = context.data.items[audio.id]; 272 272 + const ended = item ? item.hasEnded || item.progress === 1 : false; 271 273 updateItems(audio.id, { isPlaying: false }); 272 272 - update({ isPlaying: false }); 274 274 + update({ isPlaying: ended }); 273 275 } 274 276 275 277 function playEvent(event: Event) {