1<html data-bs-theme="dark">
2
3<head>
4    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
5        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
6</head>
7
8<body>
9    <nav class="navbar navbar-dark bg-primary">
10        <div class="container">
11            <span class="navbar-brand mb-0 h1">Bumble LEA Media Control Client</span>
12        </div>
13    </nav>
14    <br>
15
16    <div class="container">
17
18        <label class="form-label">Server Port</label>
19        <div class="input-group mb-3">
20            <input type="text" class="form-control" aria-label="Port Number" value="8989" id="port">
21            <button class="btn btn-primary" type="button" onclick="connect()">Connect</button>
22        </div>
23
24        <button class="btn btn-primary" onclick="send_opcode(0x01)">Play</button>
25        <button class="btn btn-primary" onclick="send_opcode(0x02)">Pause</button>
26        <button class="btn btn-primary" onclick="send_opcode(0x03)">Fast Rewind</button>
27        <button class="btn btn-primary" onclick="send_opcode(0x04)">Fast Forward</button>
28        <button class="btn btn-primary" onclick="send_opcode(0x05)">Stop</button>
29
30        </br></br>
31
32        <button class="btn btn-primary" onclick="send_opcode(0x30)">Previous Track</button>
33        <button class="btn btn-primary" onclick="send_opcode(0x31)">Next Track</button>
34
35        <hr>
36
37        <div id="socketStateContainer" class="bg-body-tertiary p-3 rounded-2">
38            <h3>Log</h3>
39            <code id="log" style="white-space: pre-line;"></code>
40        </div>
41    </div>
42
43
44    <script>
45        let portInput = document.getElementById("port")
46        let log = document.getElementById("log")
47        let socket
48
49        function connect() {
50            socket = new WebSocket(`ws://localhost:${portInput.value}`);
51            socket.onopen = _ => {
52                log.textContent += 'OPEN\n'
53            }
54            socket.onclose = _ => {
55                log.textContent += 'CLOSED\n'
56            }
57            socket.onerror = (error) => {
58                log.textContent += 'ERROR\n'
59                console.log(`ERROR: ${error}`)
60            }
61            socket.onmessage = (event) => {
62                log.textContent += `<-- ${event.data}\n`
63            }
64        }
65
66        function send(message) {
67            if (socket && socket.readyState == WebSocket.OPEN) {
68                let jsonMessage = JSON.stringify(message)
69                log.textContent += `--> ${jsonMessage}\n`
70                socket.send(jsonMessage)
71            } else {
72                log.textContent += 'NOT CONNECTED\n'
73            }
74        }
75
76        function send_opcode(opcode) {
77            send({ 'opcode': opcode })
78        }
79    </script>
80    </div>
81</body>
82
83</html>