jyapayne/streamer-widgets
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make the now playing a little nicer

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2026-01-07 16:19:26 -07:00
commit 04c37f4ded
3 changed files with 84 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

8
app/assets/web/widgets/nowplaying/app.js
View file

@ -7,7 +7,7 @@ const bgImg = document.getElementById("bgImg");
const titleEl = document.getElementById("title");
const albumEl = document.getElementById("album");
const artistEl = document.getElementById("artist");
const pill = document.getElementById("statusPill");
const playingIndicator = document.getElementById("playingIndicator");
let lastKey = "";
let lastTitle = "";
@ -104,9 +104,9 @@ function applyNowPlaying(data){
lastArtist = artist;
}
// Update status
pill.textContent = playing ? "Playing" : "Paused";
pill.classList.toggle("playing", playing);
// Update playing indicator
playingIndicator.classList.add("visible");
playingIndicator.classList.toggle("paused", !playing);
const hasArt = !!data.has_art;
artWrap.classList.toggle("placeholder", !hasArt);

10
app/assets/web/widgets/nowplaying/index.html
View file

@ -13,15 +13,19 @@
<div class="bubble-container" id="bubbleContainer"></div>
<div class="bubble-overlay"></div>
<img id="artImg" alt="Album art" />
<div id="playingIndicator" class="playing-indicator">
<div class="eq-bars">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="meta">
<div id="title" class="title">—</div>
<div id="artist" class="artist">—</div>
<div id="album" class="album">—</div>
<div class="statusRow">
<span id="statusPill" class="pill">Paused</span>
</div>
</div>
<div class="bg">

97
app/assets/web/widgets/nowplaying/style.css
View file

@ -132,14 +132,86 @@ html, body {
z-index: 2;
}
/* Playing indicator - overlayed on album art */
.playing-indicator{
position: absolute;
bottom: 5px;
right: 5px;
z-index: 10;
width: 20px;
height: 20px;
border-radius: 4px;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: scale(0.9);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.playing-indicator.visible{
opacity: 1;
transform: scale(1);
}
/* Equalizer bars */
.eq-bars{
display: flex;
align-items: flex-end;
justify-content: center;
gap: 2px;
height: 12px;
}
.eq-bars span{
width: 3px;
background: rgba(255, 255, 255, 0.9);
border-radius: 1px;
animation: eq-bounce 0.8s ease-in-out infinite;
}
.eq-bars span:nth-child(1){
height: 8px;
animation-delay: 0s;
}
.eq-bars span:nth-child(2){
height: 12px;
animation-delay: 0.2s;
}
.eq-bars span:nth-child(3){
height: 6px;
animation-delay: 0.4s;
}
@keyframes eq-bounce{
0%, 100% { transform: scaleY(0.4); }
50% { transform: scaleY(1); }
}
/* Paused state */
.playing-indicator.paused .eq-bars span{
animation: none;
background: rgba(255, 255, 255, 0.5);
}
.playing-indicator.paused .eq-bars span:nth-child(1){ height: 6px; }
.playing-indicator.paused .eq-bars span:nth-child(2){ height: 6px; }
.playing-indicator.paused .eq-bars span:nth-child(3){ height: 6px; }
.meta{
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-self: center;
min-width: 0;
gap: 3px;
gap: 4px;
padding-right: clamp(8px, calc(var(--w) * 0.02), 14px);
flex: 1;
}
@ -178,29 +250,6 @@ html, body {
font-style: italic;
}
.statusRow{
margin-top: 4px;
}
.pill{
display:inline-flex;
align-items:center;
gap:8px;
font-size: 12px;
font-weight: 700;
letter-spacing: .25px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.18);
background: rgba(0,0,0,.22);
color: rgba(255,255,255,.80);
text-transform: uppercase;
}
.pill.playing{
background: rgba(0,0,0,.18);
color: rgba(255,255,255,.90);
}
.bubble-container,
.bubble-overlay{