diff options
Diffstat (limited to 'index.html')
-rw-r--r-- | index.html | 97 |
1 files changed, 97 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..5eb8fac --- /dev/null +++ b/index.html @@ -0,0 +1,97 @@ +<!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" id="stream" controls> + <!-- <source src="/static/test-video.webm" type="video/webm"> --> + 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> |