140 lines
4.3 KiB
HTML
140 lines
4.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>
|
|
</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>
|
|
</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>
|
|
</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>Participant</span>
|
|
</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
|
|
/>
|
|
<button id="name-dialog-submit" type="submit">Join call</button>
|
|
</form>
|
|
</dialog>
|
|
|
|
<div id="audio" hidden></div>
|
|
<script src="/vendor/speakjs/speakClient.js"></script>
|
|
<script type="module" src="/app.js"></script>
|
|
</body>
|
|
</html>
|