This commit is contained in:
franzz committed
1 parent
0560079b16
commit
db00e57ef7
9 files changed
+328
-228
No files matched your search
+75
-82
@@ -20,6 +20,16 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{# Play and pause are one button: panel.css shows whichever glyph the
|
||||
.playing class calls for. A room's drives its Spotify stream, the AVR's
|
||||
the film on the Zidoo plugged into it. #}
|
||||
{% macro play_button(role, label) -%}
|
||||
<button class="control-btn" data-role="{{ role }}" aria-label="{{ label }}: play">
|
||||
<svg class="icon-play" viewBox="0 0 384 512" aria-hidden="true"><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80L0 432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>
|
||||
<svg class="icon-pause" viewBox="0 0 320 512" aria-hidden="true"><path d="M48 64C21.5 64 0 85.5 0 112L0 400c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48L48 64zm192 0c-26.5 0-48 21.5-48 48l0 288c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48l-32 0z"/></svg>
|
||||
</button>
|
||||
{%- endmacro %}
|
||||
|
||||
{% macro host_toggle() -%}
|
||||
<button class="sources-btn toggle" data-role="group" aria-pressed="false">
|
||||
<svg class="cinema icon" viewBox="0 0 512 512" aria-hidden="true"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zM128 192c0-17.7 14.3-32 32-32l128 0c17.7 0 32 14.3 32 32l0 38.4 61-36.6c1.9-1.2 4.2-1.8 6.4-1.8 6.9 0 12.5 5.6 12.5 12.5l0 102.9c0 6.9-5.6 12.5-12.5 12.5-2.3 0-4.5-.6-6.4-1.8l-61-36.6 0 38.4c0 17.7-14.3 32-32 32l-128 0c-17.7 0-32-14.3-32-32l0-128z"/></svg>
|
||||
@@ -47,99 +57,82 @@
|
||||
</div>
|
||||
{%- endmacro %}
|
||||
|
||||
<div class="app">
|
||||
<header class="top">
|
||||
<img class="logo" src="{{ url_for('static', filename='logo.svg') }}" alt="{{ app_name }}">
|
||||
</header>
|
||||
{% macro room_card(room, accounts=()) -%}
|
||||
{% set avr = room.kind == 'avr' %}
|
||||
<section class="card {{ 'avr' if avr else '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>
|
||||
</div>
|
||||
|
||||
{% for room in rooms %}
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="media" data-role="media" hidden>
|
||||
<div class="now-playing">
|
||||
<img class="cover" data-role="cover" alt="">
|
||||
<div class="media" data-role="media" hidden>
|
||||
<div class="now-playing">
|
||||
<img class="cover{{ ' poster' if avr }}" data-role="cover" alt="">
|
||||
<div class="track">
|
||||
<span class="song" data-role="song"></span>
|
||||
<span class="artist" data-role="artist"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress" data-role="progress" data-target="{{ room.key }}">
|
||||
<div class="progress-line">
|
||||
<i data-role="progress-fill"></i>
|
||||
<b class="progress-cursor" data-role="progress-cursor"></b>
|
||||
<span class="progress-time elapsed" data-role="progress-elapsed"></span>
|
||||
<span class="progress-time remaining" data-role="progress-remaining"></span>
|
||||
</div>
|
||||
<span class="progress-total" data-role="progress-total"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="volume">
|
||||
<button class="control-btn step" data-delta="-1" aria-label="{{ room.label }}: volume down">
|
||||
<svg viewBox="0 0 448 512" aria-hidden="true"><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>
|
||||
</button>
|
||||
<div class="meter" data-role="meter"><i></i><b class="knob" data-role="level">—</b></div>
|
||||
<button class="control-btn step" data-delta="1" aria-label="{{ room.label }}: volume up">
|
||||
<svg viewBox="0 0 448 512" aria-hidden="true"><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="actions" data-role="actions" hidden>
|
||||
<button class="control-btn" data-role="prev" aria-label="{{ room.label }}: previous track">
|
||||
<!-- backward-step: the forward-step glyph below, mirrored -->
|
||||
<svg viewBox="0 0 320 512" aria-hidden="true"><path transform="matrix(-1 0 0 1 320 0)" d="M52.5 440.6c-9.5 7.9-22.8 9.7-34.1 4.4S0 428.4 0 416L0 96C0 83.6 7.2 72.3 18.4 67s24.5-3.6 34.1 4.4l192 160L256 241l0-145c0-17.7 14.3-32 32-32s32 14.3 32 32l0 320c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-145-11.5 9.6-192 160z"/></svg>
|
||||
</button>
|
||||
|
||||
<button class="control-btn" data-role="play" aria-label="{{ room.label }}: play">
|
||||
<svg class="icon-play" viewBox="0 0 384 512" aria-hidden="true"><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80L0 432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>
|
||||
<svg class="icon-pause" viewBox="0 0 320 512" aria-hidden="true"><path d="M48 64C21.5 64 0 85.5 0 112L0 400c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48L48 64zm192 0c-26.5 0-48 21.5-48 48l0 288c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48l-32 0z"/></svg>
|
||||
</button>
|
||||
|
||||
<button class="control-btn" data-role="next" aria-label="{{ room.label }}: next track">
|
||||
<svg viewBox="0 0 320 512" aria-hidden="true"><path d="M52.5 440.6c-9.5 7.9-22.8 9.7-34.1 4.4S0 428.4 0 416L0 96C0 83.6 7.2 72.3 18.4 67s24.5-3.6 34.1 4.4l192 160L256 241l0-145c0-17.7 14.3-32 32-32s32 14.3 32 32l0 320c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-145-11.5 9.6-192 160z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{{ control_row(room.key, spotify_accounts) }}
|
||||
</section>
|
||||
{% endfor %}
|
||||
|
||||
<section class="card avr">
|
||||
<div class="card-head">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="media" data-role="avr-media" hidden>
|
||||
<div class="now-playing" data-role="avr-now-playing">
|
||||
<img class="cover poster" data-role="avr-cover" alt="">
|
||||
<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" data-target="{{ host.key }}">
|
||||
<div class="progress-line">
|
||||
<i data-role="progress-fill"></i>
|
||||
<b class="progress-cursor" data-role="progress-cursor"></b>
|
||||
<span class="progress-time elapsed" data-role="progress-elapsed"></span>
|
||||
<span class="progress-time remaining" data-role="progress-remaining"></span>
|
||||
</div>
|
||||
<span class="progress-total" data-role="progress-total"></span>
|
||||
<div class="progress" data-role="progress">
|
||||
<div class="progress-line">
|
||||
<i data-role="progress-fill"></i>
|
||||
<b class="progress-cursor" data-role="progress-cursor"></b>
|
||||
<span class="progress-time elapsed" data-role="progress-elapsed"></span>
|
||||
<span class="progress-time remaining" data-role="progress-remaining"></span>
|
||||
</div>
|
||||
<span class="progress-total" data-role="progress-total"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="input-select" 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>
|
||||
<span class="value" data-role="input-name">—</span>
|
||||
<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>
|
||||
{% if not avr %}
|
||||
<div class="volume">
|
||||
<button class="control-btn step" data-delta="-1" aria-label="{{ room.label }}: volume down">
|
||||
<svg viewBox="0 0 448 512" aria-hidden="true"><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>
|
||||
</button>
|
||||
<div class="meter" data-role="meter"><i></i><b class="knob" data-role="level">—</b></div>
|
||||
<button class="control-btn step" data-delta="1" aria-label="{{ room.label }}: volume up">
|
||||
<svg viewBox="0 0 448 512" aria-hidden="true"><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="joined" data-role="joined" hidden></div>
|
||||
</section>
|
||||
<div class="actions" data-role="actions" hidden>
|
||||
{% if not avr %}
|
||||
<button class="control-btn" data-role="prev" aria-label="{{ room.label }}: previous track">
|
||||
<svg viewBox="0 0 320 512" aria-hidden="true"><path transform="matrix(-1 0 0 1 320 0)" d="M52.5 440.6c-9.5 7.9-22.8 9.7-34.1 4.4S0 428.4 0 416L0 96C0 83.6 7.2 72.3 18.4 67s24.5-3.6 34.1 4.4l192 160L256 241l0-145c0-17.7 14.3-32 32-32s32 14.3 32 32l0 320c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-145-11.5 9.6-192 160z"/></svg>
|
||||
</button>
|
||||
{% endif %}
|
||||
|
||||
{{ play_button('play', room.label) }}
|
||||
|
||||
{% if not avr %}
|
||||
<button class="control-btn" data-role="next" aria-label="{{ room.label }}: next track">
|
||||
<svg viewBox="0 0 320 512" aria-hidden="true"><path d="M52.5 440.6c-9.5 7.9-22.8 9.7-34.1 4.4S0 428.4 0 416L0 96C0 83.6 7.2 72.3 18.4 67s24.5-3.6 34.1 4.4l192 160L256 241l0-145c0-17.7 14.3-32 32-32s32 14.3 32 32l0 320c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-145-11.5 9.6-192 160z"/></svg>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if avr %}
|
||||
<button class="input-select" 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>
|
||||
<span class="value" data-role="input-name">—</span>
|
||||
<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="joined" data-role="joined" hidden></div>
|
||||
{% else %}
|
||||
{{ control_row(room.key, accounts) }}
|
||||
{% endif %}
|
||||
</section>
|
||||
{%- endmacro %}
|
||||
|
||||
<div class="app">
|
||||
<header>
|
||||
<img class="logo" src="{{ url_for('static', filename='logo.svg') }}" alt="{{ app_name }}">
|
||||
</header>
|
||||
|
||||
{% for room in rooms + [host] %}
|
||||
{{ room_card(room, spotify_accounts) }}
|
||||
{% endfor %}
|
||||
|
||||
<footer data-role="foot"></footer>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user