<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"></meta>
<script type="module" src=./host.js></script>
<style>
/* Fixing default stupid margin */
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
margin: 0;
}
/* Fixing default stupid behaviour with padding */
*, *::before, *::after {
box-sizing: border-box;
}
/* Fixing default font size increases on mobile */
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
/* Inherit fonts for inputs and buttons */
input, button, textarea, select {
font: inherit;
}
/* Default style for elements, mimics what I see in firefox on macos right now */
body {
background-color: #fff;
color: #000;
font-size: 17px;
font-family: sans-serif;
}
@media (min-width: 1010px) {
body {
width: 1000px;
margin: auto;
}
.adaptive-direction {
flex-direction: row;
justify-content: space-between;
}
.adaptive-60pc {
width: 58%;
}
.adaptive-40pc {
width: 30%;
}
}
@media (max-width: 1010px) {
body {
width: 100%;
padding-left: 5px;
padding-right: 5px;
}
.adaptive-direction {
flex-direction: column;
}
}
</style>
</head>
<body style="display: flex; flex-direction: column; padding: 40px">
<div style="text-align: center" onclick="copyRoom()">
Комната:
<span style="border: 1px solid #cccccc; padding: 5px">
<span id="roomName"> недоступна </span>
<span id="roomNameCopyStatus"> [копировать] </span>
</span>
</div>
<!-- padding -->
<div style="height: 40px"></div>
<div style="display: flex" class="adaptive-direction">
<!-- video and its controls -->
<div style="display: flex; flex-direction: column" class="adaptive-60pc">
<video id=video autoplay playsinline muted style="border: 1px solid #000"></video>
<div style="height: 20px"></div><!-- padding -->
<!-- video controls -->
<div style="display: flex; padding: 10px", class="adaptive-direction">
<button onclick="makeCall()" class="adaptive-40pc">Начать</button>
<select class="adaptive-40pc" onchange="changeQuality(this.value)">
<option value="max"> без сжатия </option>
<option value="1440p"> 1440p </option>
<option value="1080p60"> 1080p60 </option>
<option selected="selected" value="1080p30"> 1080p30 </option>
<option value="720p"> 720p </option>
<option value="360p"> 360p </option>
</select>
</div>
</div>
<!-- viewer list -->
<div style="display: flex; flex-direction: column" class="adaptive-40pc" id="viewerList">
Зрители:
<!-- padding -->
<div style="height: 20px"></div>
</div>
</div>
<!-- padding -->
<div style="height: 40px"></div>
<div style="border-radius: 20px; padding: 15px; background-color: #ffaaaa; border: 1px solid #7f5555" id="statusMessage">
Ошибка при загрузке скрипта, работа невозможна
</div>
</body>
</html>