pokesz/morj/client/host.html/

Viewing at
<!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="callClicked(this)" 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>