Harden LA publishers and add multi-relay guide
This commit is contained in:
Conrad Kramer
parent
5d6f77f868
commit
cfc4902016
13 changed files with 1430 additions and 402 deletions
|
|
@ -4,79 +4,113 @@
|
|||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>every.channel</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Watch and share free over-the-air TV. Local first, global when you want."
|
||||
/>
|
||||
<meta name="description" content="Watch live television from every.channel." />
|
||||
<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">
|
||||
<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>
|
||||
<main class="watchSurface">
|
||||
<header class="topbar" aria-label="Watch controls">
|
||||
<a class="brand" href="/" aria-label="every.channel">
|
||||
<span class="brandLens" aria-hidden="true"></span>
|
||||
<span>every.channel</span>
|
||||
</a>
|
||||
|
||||
<label class="quickTune">
|
||||
<span class="quickTuneLabel">Channel</span>
|
||||
<input id="broadcastName" class="quickTuneInput" type="text" spellcheck="false" />
|
||||
</label>
|
||||
|
||||
<button id="watchBtn" class="primaryButton" type="button">Watch</button>
|
||||
<button id="refreshListBtn" class="roundButton" type="button" aria-label="Scan channels">
|
||||
<span class="scanIcon" aria-hidden="true"></span>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<section class="stageGrid">
|
||||
<section class="playerStack" aria-label="Live player">
|
||||
<div class="television">
|
||||
<div id="playerMount" class="mount">
|
||||
<div class="idleScreen">
|
||||
<div class="idlePlate">
|
||||
<span class="playGlyph" aria-hidden="true"></span>
|
||||
<strong>Pick a channel</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="controlShelf" aria-label="Playback controls">
|
||||
<div class="nowLine">
|
||||
<div>
|
||||
<div class="kicker">Now</div>
|
||||
<div id="nowTitle" class="nowTitle">Ready</div>
|
||||
</div>
|
||||
<div id="hint" class="hint" aria-live="polite"></div>
|
||||
</div>
|
||||
|
||||
<div class="scrubDeck">
|
||||
<button class="transportButton" type="button" aria-label="Back">
|
||||
<span class="backGlyph" aria-hidden="true"></span>
|
||||
</button>
|
||||
<label class="scrubberWrap" aria-label="Scrub">
|
||||
<input id="watchScrubber" class="scrubber" type="range" min="0" max="100" value="78" />
|
||||
<span class="chapterMarks" aria-hidden="true"></span>
|
||||
</label>
|
||||
<button class="transportButton" type="button" aria-label="Forward">
|
||||
<span class="forwardGlyph" aria-hidden="true"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="toolRow">
|
||||
<button id="clipStartBtn" class="toolButton" type="button">Clip start</button>
|
||||
<button id="clipEndBtn" class="toolButton" type="button">Clip end</button>
|
||||
<button id="copyClipBtn" class="toolButton" type="button">Copy clip</button>
|
||||
<button id="multiViewBtn" class="toolButton pressed" type="button">Multiview</button>
|
||||
</div>
|
||||
</section>
|
||||
</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>
|
||||
<section class="multiview" aria-label="Multiview">
|
||||
<div id="multiViewGrid" class="multiViewGrid">
|
||||
<button class="miniScreen tileA" type="button">News</button>
|
||||
<button class="miniScreen tileB" type="button">Game</button>
|
||||
<button class="miniScreen tileC" type="button">Weather</button>
|
||||
<button class="miniScreen tileD" type="button">Kitchen</button>
|
||||
</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>AGPLv3</div>
|
||||
<div>Safari support is still experimental.</div>
|
||||
</footer>
|
||||
<aside class="channelRail" aria-label="Channels">
|
||||
<div class="railHead">
|
||||
<div>
|
||||
<div class="kicker">Channels</div>
|
||||
<div id="listHint" class="listHint" aria-live="polite"></div>
|
||||
</div>
|
||||
<div class="modeSwitch" aria-label="Mode">
|
||||
<button id="liveModeBtn" class="modeButton pressed" type="button">Live</button>
|
||||
<button id="dvrModeBtn" class="modeButton" type="button">DVR</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="liveList" class="liveList"></div>
|
||||
|
||||
<details id="signalDrawer" class="signalDrawer">
|
||||
<summary>Signal</summary>
|
||||
<div class="signalGrid">
|
||||
<label class="field">
|
||||
<span>Address</span>
|
||||
<input id="relayUrl" class="input" type="text" spellcheck="false" />
|
||||
</label>
|
||||
<label class="checkField">
|
||||
<input id="archiveMode" type="checkbox" />
|
||||
<span>DVR replay</span>
|
||||
</label>
|
||||
<button id="copyLinkBtn" class="secondaryButton" type="button">Copy link</button>
|
||||
<div id="shareLink" class="shareLink" aria-live="polite"></div>
|
||||
</div>
|
||||
</details>
|
||||
</aside>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script type="module" src="app.js"></script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue