feat: show album art in the avatar square while music is loaded
The LED wall square switches to the track's cover art whenever a song is loaded outside a conversation, and returns to the pulsing LED wall while speaking to the agent (music and conversation are mutually exclusive, so starting a talk hides the art and ending it restores it).
This commit is contained in:
1 parent
68f4c461c8
commit
436a26a0fc
2 files changed
+32
-1
No files matched your search
+3
-1
@@ -58,7 +58,9 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="orb-stage">
|
<div class="orb-stage">
|
||||||
<div class="led-wall" id="ledWall" data-state="idle" aria-hidden="true"></div>
|
<div class="led-wall" id="ledWall" data-state="idle" aria-hidden="true">
|
||||||
|
<img id="ledArt" class="led-art" alt="">
|
||||||
|
</div>
|
||||||
<div class="orb-labels" aria-live="polite">
|
<div class="orb-labels" aria-live="polite">
|
||||||
<span class="state-label" id="stateLabel">Ready when you are</span>
|
<span class="state-label" id="stateLabel">Ready when you are</span>
|
||||||
<span class="thinking-chip" id="thinkingChip" hidden>Thinking…</span>
|
<span class="thinking-chip" id="thinkingChip" hidden>Thinking…</span>
|
||||||
|
|||||||
@@ -371,6 +371,35 @@ button {
|
|||||||
transition: opacity 90ms linear, width 90ms linear, height 90ms linear;
|
transition: opacity 90ms linear, width 90ms linear, height 90ms linear;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Album art fills the square while a track is loaded outside a conversation. */
|
||||||
|
.led-art {
|
||||||
|
position: absolute;
|
||||||
|
inset: 12px;
|
||||||
|
width: calc(100% - 24px);
|
||||||
|
height: calc(100% - 24px);
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 18px;
|
||||||
|
z-index: 1;
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.96);
|
||||||
|
transition: opacity 240ms ease, transform 240ms ease;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.led-wall.show-art .led-art {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.led-wall.show-art .led-dot {
|
||||||
|
opacity: 0 !important;
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.led-wall.show-art {
|
||||||
|
filter: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* Palette shifts by state — a cool blue while it listens, warm toward the
|
/* Palette shifts by state — a cool blue while it listens, warm toward the
|
||||||
center as the agent speaks, amber while thinking, dim when idle. */
|
center as the agent speaks, amber while thinking, dim when idle. */
|
||||||
.led-wall[data-state="idle"] {
|
.led-wall[data-state="idle"] {
|
||||||
|
|||||||
Reference in new issue
Block a user