code.octet-stream.net Git - broadcaster/blob - templates/index.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3   <head>
   4     <meta charset="UTF-8">
   5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   6     <title>Broadcaster</title>
   7     <style type="text/css">
   8       table.radio-status, td.outer {
   9         border: 1px solid;
  10       }
  11       table.inner {
  12         border-collapse: collapse;
  13       }
  14       td.clear {
  15         width: 5em;
  16         height: 5em;
  17         text-align: center;
  18       }
  19       .time-table {
  20         font-size: 90%;
  21       }
  22       .playlist-field {
  23         text-align: right;
  24         padding-right: 1em;
  25         width: 5em;
  26       }
  27       .playlist-table {
  28         font-size: 90%;
  29         width: 30em;
  30       }
  31       .stop {
  32         text-align: center;
  33       }
  34       .head {
  35         text-align: center;
  36       }
  37     </style>
  38     <script type="text/javascript">
  39       function connectWebsocket() {
  40         console.log("Attempting to create websocket connection for radio status sync")
  41         const cookieValue = document.cookie
  42           .split("; ")
  43           .find((row) => row.startsWith("broadcast_session="))
  44           ?.split("=")[1];
  45         const socket = new WebSocket("/websync");
  46         socket.addEventListener("open", (event) => {
  47           socket.send(cookieValue);
  48         });
  49         socket.addEventListener("message", (event) => {
  50           console.log("Received a status update from server")
  51           const connected = document.getElementById('connected-radios');
  52           connected.innerHTML = event.data;
  53         });
  54         socket.addEventListener("close", (event) => {
  55           console.log("Websocket closed. Will retry in 10 seconds.")
  56           setTimeout(connectWebsocket, 10000);
  57         });
  58       }
  59       // initial connection on page load
  60       connectWebsocket();
  61     </script>
  62   </head>
  63   <body>
  64     <main>
  65       <h1>Welcome!</h1>
  66       {{if .LoggedIn}}
  67       <p>Your username is: {{.Username}}.</p>
  68       <p><a href="/logout">Log Out</a></p>
  69       {{else}}
  70       <p><a href="/login">Log In</a></p>
  71       {{end}}
  72       <p><a href="/file/">File Management</a></p>
  73       <p><a href="/playlist/">Playlist Management</a></p>
  74       <p><a href="/radio/">Radio Management</a></p>
  75       <h2>Connected Radios</h2>
  76       <div id="connected-radios">
  77         <i>Loading...</i>
  78       </div>
  79     </main>
  80   </body>
  81 </html>