50 lines
1.6 KiB
HTML
50 lines
1.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
|
<title>Now playing</title>
|
|
<link rel="stylesheet" href="visualiser.css">
|
|
</head>
|
|
<body>
|
|
<!--
|
|
The now-playing screen every endpoint can show: a circular spectrum behind the album
|
|
art, coloured from the cover, with lyrics underneath when the track has them.
|
|
|
|
Config from URL query params, never baked in — the same rule as every other frontend
|
|
here, so this stays a static asset with no secret in git:
|
|
|
|
?ha=http://ha:8123&token=<HA long-lived token>&entity=media_player.living_room
|
|
|
|
The source is Home Assistant's own media_player state, which is the one thing every
|
|
endpoint in this house can reach and which already knows what is playing everywhere.
|
|
A kiosk with local audio can additionally call visualiser.attachAudio(<audio element>)
|
|
to upgrade itself to the reactive tier; without that it renders the synthetic one,
|
|
which is the honest default for a panel showing what a DIFFERENT room is playing.
|
|
-->
|
|
<div id="stage">
|
|
<canvas id="ring"></canvas>
|
|
|
|
<div id="centre">
|
|
<img id="cover" alt="" hidden>
|
|
<div id="cover-fallback" aria-hidden="true">♪</div>
|
|
</div>
|
|
|
|
<div id="meta">
|
|
<h1 id="title">—</h1>
|
|
<p id="artist"></p>
|
|
<p id="tier-note" class="tier-note"></p>
|
|
</div>
|
|
|
|
<div id="lyrics" hidden>
|
|
<div id="lyrics-lines"></div>
|
|
</div>
|
|
|
|
<p id="error" class="error" hidden></p>
|
|
</div>
|
|
|
|
<script src="visualiser.js"></script>
|
|
<script src="nowplaying.js"></script>
|
|
</body>
|
|
</html>
|