pokesh/morj/client/watcher.html

Viewing at
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8"></meta>
    <script type="module" src=./watcher.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;
        }
      }

      .hover-gray:hover {
        color: #999;
        stroke: #999;
      }
      .hover-gray {
        color: #fff;
        stroke: #fff;
      }

      /* Make fullscreen objects take all screen vertical space instead of inherited */
      :fullscreen {
        height: 100vh;
      }

    </style>
  </head>
  <body style="display: flex; flex-direction: column; padding: 40px;">

    <div style="text-align: center">
      Комната:
      <span style="border: 1px solid #cccccc; padding: 5px">
        <span id="roomName"> недоступна </span>
      </span>
    </div>

    <div style="height: 20px"></div><!-- padding -->

    <div id="videoPlayer" style="display: flex; flex-direction: column" onfullscreenchange="onVideoFullscreen(this)">
      <video id=video autoplay playsinline style="
        border: 1px solid #000;
        object-fit: contain;
        width: 100%;
        height: 100%;
      "></video>
      <!-- controls -->
      <div style="
        display: flex; flex-direction: row; justify-content: space-between;
        color: #fff; background-color: #000;
        padding-left: 5px; padding-right: 5px;
        cursor: default;
        /* To compensate for video player border adding to height */
        border-bottom: 1px solid #000;
        align-items: center;
        ">
        <span id="liveIndicator"> <span style="color: #f00">●</span> Прямой эфир </span>
        <svg
          class="hover-gray" onclick="enterFullscreen()"
          width="20px" height="20px"
          viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.00002 3.99998H4.00004L4 9M20 8.99999V4L15 3.99997M15 20H20L20 15M4 15L4 20L9.00002 20" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
        /></svg>
      </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>