<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>WebSocket</title>
  <link rel="stylesheet" type="text/css" href="style2.css" />
</head>
<body>
  <header class="header">
    <div class="config">
      <button disabled>sanic</button>
      <button>Config</button>
    </div>
    <div class="playback-controls">
      <div>
        <button>⏮️</button>
        <button>⏯️</button>
        <button>⏹️</button>
        <button>⏭️</button>
      </div>
      <label for="progress"></label>
      <input type="range" id="progress" name="progress" min="0" max="100" />
    </div>
    <div class="playlist-controls">
      <div>
        <label for="repeat">repeat</label>
        <input type="checkbox" id="repeat" name="repeat" />
        <label for="shuffle">shuffle</label>
        <input type="checkbox" id="shuffle" name="shuffle" />
      </div>
      <div>
        <label for="fade">fade</label>
        <button>-</button>
        <input type="number" id="fade" name="fade" min="0" />
        <button>+</button>
      </div>
      <label for="volume"></label>
      <input id="volume" name="volume" type="range" min="1" max="100" />
    </div>
    <div class="track-info">
      <p>Now playing: 00:00:00/100:00:00</p>

      <label for="track">track</label>
      <input type="text" id="track" name="track" disabled />
    </div>
  </header>
  <div class="playlist">
    <table>
      <thead>
        <tr>
          <th>Position</th>
          <th>Title</th>
          <th>Artist</th>
          <th>Genre</th>
          <th>Album</th>
          <th>Time</th>
          <th>Disc</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Chakra</td>
          <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
          <td>undefined</td>
          <td>undefined</td>
          <td>undefined</td>
          <td>9:29</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Chakra</td>
          <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
          <td>undefined</td>
          <td>undefined</td>
          <td>undefined</td>
          <td>9:29</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Chakra</td>
          <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
          <td>undefined</td>
          <td>undefined</td>
          <td>undefined</td>
          <td>9:29</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Chakra</td>
          <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
          <td>undefined</td>
          <td>undefined</td>
          <td>undefined</td>
          <td>9:29</td>
        </tr>
        <tr>
          <td>5</td>
          <td>Chakra</td>
          <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
          <td>undefined</td>
          <td>undefined</td>
          <td>undefined</td>
          <td>9:29</td>
        </tr>
        <tr>
          <td>6</td>
          <td>Chakra</td>
          <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
          <td>undefined</td>
          <td>undefined</td>
          <td>undefined</td>
          <td>9:29</td>
        </tr>
        <tr>
          <td>7</td>
          <td>Chakra</td>
          <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
          <td>undefined</td>
          <td>undefined</td>
          <td>undefined</td>
          <td>9:29</td>
        </tr>
      </tbody>
    </table>
  </div>
  <section class="db">
    <div class="tabs"></div>
    <div class="result"></div>
  </section>
  <footer class="footer">
    <p id="console"></p>
  </footer>
  <script>
    const loc = window.location;
    const proto = loc.protocol === "https:" ? "wss:" : "ws:"
    const ws = new WebSocket(proto + "//" + loc.host + "/ws")

    ws.onopen = function() {
      console.log("Connected")
    }

    ws.onmessage = function(evt) {
      const out = document.getElementById("console");
      out.innerHTML += evt.data + "<br>";
      // TODO: react on MPD communication here
      // TODO: react on yt-dlp communication here
    }
  </script>
</body>
</html>