215 lines
7.3 KiB
HTML
215 lines
7.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>kkkmeet</title>
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
<body>
|
|
<main class="app-shell">
|
|
<header class="topbar">
|
|
<div>
|
|
<h1>kkkmeet</h1>
|
|
<p id="status">Enter your name to join the call.</p>
|
|
<p id="activity-status" aria-live="polite"></p>
|
|
</div>
|
|
<button id="rename-button" type="button">Rename</button>
|
|
</header>
|
|
|
|
<section class="stage" aria-label="Video call">
|
|
<section class="watch-panel" aria-label="Watch together">
|
|
<div class="watch-main">
|
|
<div class="youtube-shell" id="youtube-shell">
|
|
<div id="youtube-player"></div>
|
|
<button
|
|
id="youtube-start-button"
|
|
class="youtube-start-button"
|
|
type="button"
|
|
hidden
|
|
>
|
|
Click here to consoom
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<aside class="playlist-panel">
|
|
<div class="playlist-header">
|
|
<span>Playlist</span>
|
|
<button id="clear-playlist-button" type="button">Clear list</button>
|
|
</div>
|
|
<ul id="playlist-list" class="playlist-list"></ul>
|
|
<form id="youtube-form" class="youtube-form">
|
|
<input
|
|
id="youtube-input"
|
|
type="url"
|
|
inputmode="url"
|
|
placeholder="YouTube URL"
|
|
autocomplete="off"
|
|
/>
|
|
<button type="submit">Add</button>
|
|
</form>
|
|
</aside>
|
|
</section>
|
|
<button
|
|
id="watch-resize-handle"
|
|
class="watch-resize-handle"
|
|
type="button"
|
|
aria-label="Resize YouTube panel"
|
|
title="Resize YouTube panel"
|
|
>
|
|
<span
|
|
id="watch-collapse-button"
|
|
class="watch-collapse-button"
|
|
role="button"
|
|
tabindex="0"
|
|
aria-label="Collapse YouTube panel"
|
|
title="Collapse YouTube panel"
|
|
>
|
|
↑
|
|
</span>
|
|
</button>
|
|
<div class="remote-grid" id="remote-grid">
|
|
<div class="empty-stage" id="empty-stage">Waiting for others to join</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="controls">
|
|
<div class="control-panel">
|
|
<div class="device-controls" aria-label="Media devices">
|
|
<div class="device-row">
|
|
<button
|
|
id="camera-button"
|
|
type="button"
|
|
class="symbol-button"
|
|
aria-label="Turn camera off"
|
|
aria-pressed="true"
|
|
title="Turn camera off"
|
|
>
|
|
●
|
|
</button>
|
|
<label>
|
|
<span>Camera</span>
|
|
<select id="camera-select"></select>
|
|
</label>
|
|
</div>
|
|
<div class="device-row">
|
|
<button
|
|
id="mic-button"
|
|
type="button"
|
|
class="symbol-button"
|
|
aria-label="Mute microphone"
|
|
aria-pressed="true"
|
|
title="Mute microphone"
|
|
>
|
|
●
|
|
</button>
|
|
<label>
|
|
<span>Microphone</span>
|
|
<select id="mic-select"></select>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="control-actions" aria-label="Call controls">
|
|
<button id="share-button" type="button">Share Screen</button>
|
|
<button id="announce-button" type="button">Announce</button>
|
|
<div class="self-mic-control" aria-label="Local microphone volume">
|
|
<label>
|
|
<span>Capture volume</span>
|
|
<input id="self-mic-volume" type="range" min="0" max="200" step="1" />
|
|
</label>
|
|
<div class="self-mic-level">
|
|
<meter id="self-mic-meter" min="0" max="1" low="0.15" high="0.65" optimum="0.45"></meter>
|
|
<label class="noise-suppression-toggle">
|
|
<input id="noise-suppression" type="checkbox" />
|
|
<span>Noise suppression</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<article class="self-preview">
|
|
<video id="local-video" autoplay muted playsinline></video>
|
|
<span id="local-name">You</span>
|
|
</article>
|
|
</footer>
|
|
</main>
|
|
|
|
<template id="remote-template">
|
|
<article class="tile">
|
|
<video autoplay playsinline></video>
|
|
<span class="tile-name">Participant</span>
|
|
<div class="participant-audio-controls">
|
|
<label>
|
|
<span>Volume</span>
|
|
<input class="participant-volume" type="range" min="0" max="200" step="1" />
|
|
</label>
|
|
</div>
|
|
</article>
|
|
</template>
|
|
|
|
<dialog id="name-dialog" class="name-dialog">
|
|
<form id="initial-name-form" class="initial-name-form">
|
|
<h2 id="name-dialog-title">Choose your name</h2>
|
|
<input
|
|
id="initial-name-input"
|
|
autocomplete="name"
|
|
maxlength="48"
|
|
placeholder="Your name"
|
|
required
|
|
/>
|
|
<div id="captcha-control" class="captcha-control">
|
|
<span class="captcha-label">Prove that you are not a bot</span>
|
|
<div class="captcha-row">
|
|
<canvas id="captcha-canvas" width="160" height="42" aria-label="Captcha passphrase"></canvas>
|
|
<input
|
|
id="captcha-input"
|
|
autocomplete="off"
|
|
placeholder="Type captcha text here"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
<button id="name-dialog-submit" type="submit">Join call</button>
|
|
</form>
|
|
</dialog>
|
|
|
|
<dialog id="announcement-dialog" class="name-dialog">
|
|
<form id="announcement-form" class="initial-name-form">
|
|
<h2>Announce</h2>
|
|
<textarea
|
|
id="announcement-input"
|
|
maxlength="240"
|
|
placeholder="Announcement text"
|
|
required
|
|
></textarea>
|
|
<div class="voice-controls" aria-label="Announcement voice settings">
|
|
<label>
|
|
<span>Volume</span>
|
|
<input id="announcement-amplitude" type="range" min="0" max="200" step="1" value="100" />
|
|
</label>
|
|
<label>
|
|
<span>Pitch</span>
|
|
<input id="announcement-pitch" type="range" min="0" max="99" step="1" value="32" />
|
|
</label>
|
|
<label>
|
|
<span>Speed</span>
|
|
<input id="announcement-speed" type="range" min="80" max="240" step="1" value="135" />
|
|
</label>
|
|
<label>
|
|
<span>Word gap</span>
|
|
<input id="announcement-wordgap" type="range" min="0" max="20" step="1" value="4" />
|
|
</label>
|
|
</div>
|
|
<div class="dialog-actions">
|
|
<button id="announcement-cancel-button" type="button">Cancel</button>
|
|
<button type="submit">Send</button>
|
|
</div>
|
|
</form>
|
|
</dialog>
|
|
|
|
<div id="audio" hidden></div>
|
|
<script src="vendor/speakjs/speakClient.js"></script>
|
|
<script type="module" src="app.js"></script>
|
|
</body>
|
|
</html>
|