1 files changed, 96 insertions, 0 deletions
diff --git a/web/index.html b/web/index.html
new file mode 100644
index 0000000..fe5cfaf
--- /dev/null
+++ b/web/index.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+
+    <title>stream.spacekookie.de</title>
+    <link href="/static/main.css" rel="stylesheet">
+    <script src="/static/ajax.min.js" charset="utf-8"></script>
+
+    <link rel="stylesheet" type="text/css" media="screen" href="https://cdn.conversejs.org/6.0.0/dist/converse.min.css">
+    <script src="https://cdn.conversejs.org/6.0.0/dist/converse.min.js" charset="utf-8"></script>
+    <script src="https://cdn.dashjs.org/latest/dash.mediaplayer.min.js" charset="utf-8"></script>
+  </head>
+
+  <!-- Main site body -->
+  <body>
+    <header>
+      <h1>stream.spacekookie.de</h1>
+      <p class="stream-status">OFFLINE</p>
+      <!-- <p class="stream-status">LIVE</p> -->
+    </header>
+
+
+    <div class="block">
+      <h2>Welcome to the stream! ✨</h2>
+      <p>
+        The stream chat is backed by an XMPP
+        room: <a href="xmpp:stream@rooms.spacekookie.de?join"><em><code>stream@rooms.spacekookie.de</code></em></a> — Feel free to join
+        it from your favourite XMPP client to say hello!
+      </p>
+    </div>
+    
+    <div class="content">
+      <video class="stream" autoplay id="stream" controls>
+          Your browser does not support the video tag!
+      </video>
+
+      <div class="chat">
+        <div id="conversejs"></div>
+      </div>
+    </div>
+
+    <div class="block">
+      <p id="view-count">Viewers: ?</p>
+    </div>
+
+  </body>
+
+  <!-- Initialise converse.js here -->
+  <script>
+    converse.initialize({
+        bosh_service_url: 'https://stream.spacekookie.de/xmpp-bosh',
+        authentication: 'anonymous',
+        auto_login: true,
+        auto_reconnect: true,
+        muc_disable_slash_commands: true,
+        auto_join_rooms: ['stream@rooms.spacekookie.de'],
+        singleton: true,
+        view_mode: 'embedded',
+        theme: 'concord',
+        jid: 'guest-xmpp.spacekookie.de',
+        show_controlbox_by_default: true,
+    });
+    
+    var client_id;
+    var url = "https://stream.spacekookie.de/dash/app.mpd";
+    var player = dashjs.MediaPlayer().create();
+    var stream = document.getElementById("stream");
+    player.initialize(stream, url, true);
+    player.on(dashjs.MediaPlayer.events['PLAYBACK_ENDED'], function() {
+        clearInterval(metricPoller);
+        clearInterval(currentPoller);
+    });
+
+    var eventPoller = setInterval(function() {
+        console.log("Letting the backend know we're watching");
+
+        console.log("We are id: " + client_id);
+        Ajax.post('https://stream.spacekookie.de/metrics/update',
+                  { id: client_id })
+            .then(function(response) {
+                console.log("We were assigned ID: " + response.id);
+                client_id = response.id;
+            })
+    }, 5000);
+
+    var currentPoller = setInterval(function() {
+        Ajax.get('https://stream.spacekookie.de/metrics/current')
+            .then(function(resp) {
+                document.getElementById("view-count").innerHTML = "Viewers: " + resp.num;
+            });
+                 
+    }, 10000);
+    
+  </script>
+</html>