2023-11-06 22:38:39 +01:00
|
|
|
<!DOCTYPE html>
|
2023-11-07 21:17:20 +01:00
|
|
|
<html lang="en">
|
2023-11-06 22:38:39 +01:00
|
|
|
<head>
|
2023-11-07 21:20:50 +01:00
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
2023-11-07 21:17:20 +01:00
|
|
|
<title>WebSocket</title>
|
2023-11-07 21:34:11 +01:00
|
|
|
<link rel="stylesheet" type="text/css" href="style2.css" />
|
2023-11-06 22:38:39 +01:00
|
|
|
</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>
|
|
|
|
|
<section class="playlist">
|
|
|
|
|
<table>
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Artist</td>
|
|
|
|
|
<td>Album</td>
|
|
|
|
|
<td>Track</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>The Beatles</td>
|
|
|
|
|
<td>Some Album</td>
|
|
|
|
|
<td>Yellow Submarine</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</section>
|
|
|
|
|
<section class="db">
|
|
|
|
|
<div class="tabs"></div>
|
|
|
|
|
<div class="result"></div>
|
|
|
|
|
</section>
|
2023-11-07 21:17:20 +01:00
|
|
|
<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>
|
2023-11-06 22:38:39 +01:00
|
|
|
</body>
|
|
|
|
|
</html>
|
