| <html data-bs-theme="dark"> |
| |
| <head> |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" |
| integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> |
| </head> |
| |
| <body> |
| <nav class="navbar navbar-dark bg-primary"> |
| <div class="container"> |
| <span class="navbar-brand mb-0 h1">Bumble LEA Media Control Client</span> |
| </div> |
| </nav> |
| <br> |
| |
| <div class="container"> |
| |
| <label class="form-label">Server Port</label> |
| <div class="input-group mb-3"> |
| <input type="text" class="form-control" aria-label="Port Number" value="8989" id="port"> |
| <button class="btn btn-primary" type="button" onclick="connect()">Connect</button> |
| </div> |
| |
| <button class="btn btn-primary" onclick="send_opcode(0x01)">Play</button> |
| <button class="btn btn-primary" onclick="send_opcode(0x02)">Pause</button> |
| <button class="btn btn-primary" onclick="send_opcode(0x03)">Fast Rewind</button> |
| <button class="btn btn-primary" onclick="send_opcode(0x04)">Fast Forward</button> |
| <button class="btn btn-primary" onclick="send_opcode(0x05)">Stop</button> |
| |
| </br></br> |
| |
| <button class="btn btn-primary" onclick="send_opcode(0x30)">Previous Track</button> |
| <button class="btn btn-primary" onclick="send_opcode(0x31)">Next Track</button> |
| |
| <hr> |
| |
| <div id="socketStateContainer" class="bg-body-tertiary p-3 rounded-2"> |
| <h3>Log</h3> |
| <code id="log" style="white-space: pre-line;"></code> |
| </div> |
| </div> |
| |
| |
| <script> |
| let portInput = document.getElementById("port") |
| let log = document.getElementById("log") |
| let socket |
| |
| function connect() { |
| socket = new WebSocket(`ws://localhost:${portInput.value}`); |
| socket.onopen = _ => { |
| log.textContent += 'OPEN\n' |
| } |
| socket.onclose = _ => { |
| log.textContent += 'CLOSED\n' |
| } |
| socket.onerror = (error) => { |
| log.textContent += 'ERROR\n' |
| console.log(`ERROR: ${error}`) |
| } |
| socket.onmessage = (event) => { |
| log.textContent += `<-- ${event.data}\n` |
| } |
| } |
| |
| function send(message) { |
| if (socket && socket.readyState == WebSocket.OPEN) { |
| let jsonMessage = JSON.stringify(message) |
| log.textContent += `--> ${jsonMessage}\n` |
| socket.send(jsonMessage) |
| } else { |
| log.textContent += 'NOT CONNECTED\n' |
| } |
| } |
| |
| function send_opcode(opcode) { |
| send({ 'opcode': opcode }) |
| } |
| </script> |
| </div> |
| </body> |
| |
| </html> |
