Redesign hosted web as broadcast console
This commit is contained in:
parent
bd5d9857ed
commit
5d6f77f868
5 changed files with 469 additions and 300 deletions
|
|
@ -10,70 +10,72 @@
|
|||
/>
|
||||
<link data-trunk rel="css" href="style.css" />
|
||||
<link data-trunk rel="copy-file" href="app.js" />
|
||||
<link data-trunk rel="copy-dir" href="assets" />
|
||||
</head>
|
||||
<body>
|
||||
<main class="shell">
|
||||
<header class="top">
|
||||
<div class="brand">
|
||||
<div class="brand-title">every.channel</div>
|
||||
<div class="brand-subtitle">Watch live streams over WebTransport.</div>
|
||||
</div>
|
||||
<div class="badge" title="MoQ over WebTransport">
|
||||
WebTransport
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="panel">
|
||||
<div class="panel-title">Watch</div>
|
||||
<div class="row">
|
||||
<label class="field">
|
||||
<div class="label">Relay URL</div>
|
||||
<input id="relayUrl" class="input" type="text" spellcheck="false" />
|
||||
</label>
|
||||
<label class="field">
|
||||
<div class="label">Broadcast name</div>
|
||||
<input id="broadcastName" class="input" type="text" spellcheck="false" />
|
||||
</label>
|
||||
<label class="field checkField">
|
||||
<div class="label">Mode</div>
|
||||
<div class="checkRow">
|
||||
<input id="archiveMode" type="checkbox" />
|
||||
<span>Archive DVR</span>
|
||||
</div>
|
||||
</label>
|
||||
<button id="watchBtn" class="btn">Watch</button>
|
||||
</div>
|
||||
<div class="hint" id="hint"></div>
|
||||
<div class="row share">
|
||||
<button id="copyLinkBtn" class="btn secondary">Copy link</button>
|
||||
<div class="shareLink" id="shareLink" aria-live="polite"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<div class="panelHead">
|
||||
<div class="panel-title">Live Now</div>
|
||||
<button id="refreshListBtn" class="btn secondary">Refresh</button>
|
||||
</div>
|
||||
<div class="hint" id="listHint"></div>
|
||||
<div id="liveList" class="liveList"></div>
|
||||
</section>
|
||||
|
||||
<section class="player">
|
||||
<div class="tv">
|
||||
<div class="tv-glow"></div>
|
||||
<div class="tv-frame">
|
||||
<div id="playerMount" class="mount"></div>
|
||||
<div class="tv-scanlines" aria-hidden="true"></div>
|
||||
<section class="studio">
|
||||
<header class="masthead">
|
||||
<div>
|
||||
<div class="brand-title">every.channel</div>
|
||||
<div class="brand-subtitle">Live television, tuned from real signals.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="badge">Local broadcast</div>
|
||||
</header>
|
||||
|
||||
<section class="watchDeck">
|
||||
<section class="player" aria-label="Live player">
|
||||
<div class="tv">
|
||||
<div class="tv-frame">
|
||||
<div id="playerMount" class="mount"></div>
|
||||
<div class="tv-scanlines" aria-hidden="true"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hint" id="hint"></div>
|
||||
</section>
|
||||
|
||||
<aside class="console" aria-label="Channel console">
|
||||
<div class="consoleHead">
|
||||
<div>
|
||||
<div class="panel-title">On Air</div>
|
||||
<div class="consoleCopy">Pick a station and the picture starts here.</div>
|
||||
</div>
|
||||
<button id="refreshListBtn" class="btn secondary">Scan</button>
|
||||
</div>
|
||||
<div class="hint listHint" id="listHint"></div>
|
||||
<div id="liveList" class="liveList"></div>
|
||||
|
||||
<details class="signalDrawer">
|
||||
<summary>Signal source</summary>
|
||||
<div class="signalGrid">
|
||||
<label class="field">
|
||||
<div class="label">Signal address</div>
|
||||
<input id="relayUrl" class="input" type="text" spellcheck="false" />
|
||||
</label>
|
||||
<label class="field">
|
||||
<div class="label">Channel key</div>
|
||||
<input id="broadcastName" class="input" type="text" spellcheck="false" />
|
||||
</label>
|
||||
<label class="field checkField">
|
||||
<div class="checkRow">
|
||||
<input id="archiveMode" type="checkbox" />
|
||||
<span>DVR replay</span>
|
||||
</div>
|
||||
</label>
|
||||
<button id="watchBtn" class="btn">Tune in</button>
|
||||
</div>
|
||||
<div class="share">
|
||||
<button id="copyLinkBtn" class="btn secondary">Copy link</button>
|
||||
<div class="shareLink" id="shareLink" aria-live="polite"></div>
|
||||
</div>
|
||||
</details>
|
||||
</aside>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<footer class="foot">
|
||||
<div class="foot-left">AGPLv3</div>
|
||||
<div class="foot-right">
|
||||
For Safari: WebTransport is behind a Developer/Advanced feature flag and may be incomplete.
|
||||
</div>
|
||||
<div>AGPLv3</div>
|
||||
<div>Safari support is still experimental.</div>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue