franzz/heos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix grouped AVR / room card + add movie info
Deploy HEOS panel / deploy (push) Successful in 25s
Details

Browse Source
This commit is contained in:
franzz
2026-09-16 20:36:29 +02:00
parent 69476134f7
commit 532b48ad37
7 changed files with 316 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/index.html
+31 -23
View File
@@ -19,18 +19,29 @@
</head>
<body>
{% macro spotify_row(target, accounts) -%}
{% if accounts %}
<div class="spotify-row" hidden>
{% macro host_toggle() -%}
<button class="toggle" data-role="group" aria-pressed="false">
<svg class="cinema" viewBox="0 -16 576 512" aria-hidden="true"><path d="M0 112c0 70.7 57.3 128 128 128l224 0c70.7 0 128-57.3 128-128S422.7-16 352-16c-48.2 0-90.2 26.6-112 66-21.8-39.4-63.8-66-112-66-70.7 0-128 57.3-128 128zm304 0a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zM128 64a48 48 0 1 1 0 96 48 48 0 1 1 0-96zM64 352l0 64c0 35.3 28.7 64 64 64l224 0c35.3 0 64-28.7 64-64l0-64c0-35.3-28.7-64-64-64l-224 0c-35.3 0-64 28.7-64 64zM537.5 490.8c4.2 3.4 9.4 5.2 14.8 5.2 13.1 0 23.7-10.6 23.7-23.7l0-240.6c0-13.1-10.6-23.7-23.7-23.7-5.4 0-10.6 1.8-14.8 5.2l-73.5 58.8 0 160 73.5 58.8z"/></svg>
<svg class="leave" viewBox="0 0 512 512" aria-hidden="true"><path d="M502.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 224 192 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l210.7 0-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l128-128zM160 96c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 32C43 32 0 75 0 128L0 384c0 53 43 96 96 96l64 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-64 0c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l64 0z"/></svg>
<span data-role="group-label">Cinema</span>
</button>
{%- endmacro %}
{# The Spotify resume buttons with the host toggle in the middle of them. #}
{% macro control_row(target, accounts) -%}
{% set split = (accounts | length + 1) // 2 %}
<div class="spotify-row">
{% for account in accounts %}
{% if loop.index0 == split %}{{ host_toggle() }}{% endif %}
<button class="spotify" data-target="{{ target }}" data-account="{{ account.key }}"
aria-label="Resume {{ account.label }}'s Spotify">
aria-label="Resume {{ account.label }}'s Spotify" hidden>
<svg viewBox="0 0 496 512" aria-hidden="true"><path d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"/></svg>
<span>{{ account.label }}</span>
</button>
{% endfor %}
{# Fewer accounts than the midpoint means the loop never reached it. #}
{% if accounts | length <= split %}{{ host_toggle() }}{% endif %}
</div>
{% endif %}
{%- endmacro %}
<div class="app">
@@ -46,10 +57,6 @@
<section class="card room" data-room="{{ room.key }}">
<div class="card-head">
<h2><svg class="room-icon" data-icon="{{ room.kind }}" viewBox="0 0 512 512" aria-hidden="true"><path d=""/></svg><span class="room-label">{{ room.label }}</span></h2>
<button class="toggle" data-role="group" aria-pressed="false">
<span class="dot" aria-hidden="true"></span>
<span data-role="group-label">Separate</span>
</button>
</div>
<div class="now-playing" data-role="now-playing" hidden>
@@ -91,7 +98,7 @@
</button>
</div>
{{ spotify_row(room.key, spotify_accounts) }}
{{ control_row(room.key, spotify_accounts) }}
</section>
</div>
{% endfor %}
@@ -101,6 +108,19 @@
<h2><svg class="room-icon" data-icon="{{ host.kind }}" viewBox="0 0 512 512" aria-hidden="true"><path d=""/></svg><span class="room-label">{{ host.label }}</span></h2>
<span class="pill" data-role="avr-status">offline</span>
</div>
<div class="now-playing" data-role="avr-now-playing" hidden>
<img class="cover poster" data-role="avr-cover" alt="" hidden>
<div class="track">
<span class="song" data-role="avr-song"></span>
<span class="artist" data-role="avr-artist"></span>
</div>
</div>
<div class="progress" data-role="avr-progress" hidden>
<i data-role="progress-fill"></i>
<b class="progress-cursor" data-role="progress-cursor"></b>
</div>
<button class="source-button" data-role="input-button">
<span class="eyebrow">Input</span>
<svg class="input-icon" data-role="input-icon" viewBox="0 0 512 512" aria-hidden="true"><path d=""/></svg>
@@ -108,21 +128,9 @@
<svg class="chevron" viewBox="0 0 320 512" aria-hidden="true"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>
</button>
<div class="now-playing" data-role="avr-now-playing" hidden>
<img class="cover" data-role="avr-cover" alt="" hidden>
<div class="track">
<span class="song" data-role="avr-song"></span>
<span class="artist" data-role="avr-artist"></span>
</div>
</div>
<div class="joined" data-role="joined" hidden>
<p class="joined-title">Playing together</p>
<div class="joined-rooms" data-role="joined-rooms"></div>
</div>
<div class="joined" data-role="joined" hidden></div>
</section>
<button class="wide ghost" data-role="split-all" hidden>Separate everything</button>
<p class="foot" data-role="foot"></p>
</div>