144 lines
8.6 KiB
HTML
144 lines
8.6 KiB
HTML
<!doctype html>
|
|
<html lang="en" data-step="{{ step }}" data-host="{{ host.label }}" data-base="{{ url_for('index') }}">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no">
|
|
<title>{{ app_name }}</title>
|
|
|
|
<!-- Added to the iOS home screen, this opens full-screen with no browser chrome. -->
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<meta name="apple-mobile-web-app-title" content="{{ app_name }}">
|
|
<meta name="theme-color" content="#0a0d14">
|
|
|
|
<link rel="manifest" href="{{ url_for('manifest') }}">
|
|
<link rel="apple-touch-icon" href="{{ url_for('static', filename='icon-180.png') }}">
|
|
<link rel="icon" href="{{ url_for('static', filename='icon-180.png') }}">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='panel.css') }}">
|
|
</head>
|
|
<body>
|
|
|
|
{% macro spotify_row(target, accounts) -%}
|
|
{% if accounts %}
|
|
<div class="spotify-row" hidden>
|
|
{% for account in accounts %}
|
|
<button class="spotify" data-target="{{ target }}" data-account="{{ account.key }}"
|
|
aria-label="Resume {{ account.label }}'s Spotify">
|
|
<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 %}
|
|
</div>
|
|
{% endif %}
|
|
{%- endmacro %}
|
|
|
|
<div class="app">
|
|
<header class="top">
|
|
<h1><img class="logo" src="{{ url_for('static', filename='logo.svg') }}" alt="{{ app_name }}"></h1>
|
|
<button class="icon-button" data-role="refresh" aria-label="Refresh">
|
|
<svg viewBox="0 0 512 512" aria-hidden="true"><path d="M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160 352 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l111.5 0c0 0 0 0 0 0l.4 0c17.7 0 32-14.3 32-32l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 35.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1L16 432c0 17.7 14.3 32 32 32s32-14.3 32-32l0-35.1 17.6 17.5c0 0 0 0 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.8c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352l34.4 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L48.4 288c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z"/></svg>
|
|
</button>
|
|
</header>
|
|
|
|
{% for room in rooms %}
|
|
<div class="room-slot" data-slot="{{ room.key }}">
|
|
<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>
|
|
<img class="cover" data-role="cover" alt="" hidden>
|
|
<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" hidden>
|
|
<i data-role="progress-fill"></i>
|
|
<b class="progress-cursor" data-role="progress-cursor"></b>
|
|
</div>
|
|
|
|
<div class="volume">
|
|
<button class="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="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="transport" 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="transport" 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="transport" 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>
|
|
|
|
{{ spotify_row(room.key, spotify_accounts) }}
|
|
</section>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
<section class="card source">
|
|
<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>
|
|
<span class="pill" data-role="avr-status">offline</span>
|
|
</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>
|
|
<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="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>
|
|
</section>
|
|
|
|
<button class="wide ghost" data-role="split-all" hidden>Separate everything</button>
|
|
<p class="foot" data-role="foot"></p>
|
|
</div>
|
|
|
|
<div class="sheet-wrap" data-role="sheet" hidden>
|
|
<div class="scrim" data-role="scrim"></div>
|
|
<div class="sheet" role="dialog" aria-modal="true" aria-label="{{ host.label }} input">
|
|
<div class="grabber" aria-hidden="true"></div>
|
|
<h3>{{ host.label }} input</h3>
|
|
<div class="options" data-role="options"></div>
|
|
<button class="wide ghost" data-role="sheet-close">Cancel</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toast" data-role="toast" hidden></div>
|
|
|
|
<script src="{{ url_for('static', filename='app.js') }}"></script>
|
|
</body>
|
|
</html>
|