From 527037857939cc4c06e91d7c9b470f8ed86854c0 Mon Sep 17 00:00:00 2001
From: jorge-vitrubio <jorge@vitrubio.net>
Date: Thu, 18 Feb 2021 14:37:10 +0100
Subject: [PATCH] added the live + chat html index

---
 index-live-chat.html | 122 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 122 insertions(+)
 create mode 100644 index-live-chat.html
diff --git a/index-live-chat.html b/index-live-chat.html
new file mode 100644
index 0000000..7a76b0b
--- /dev/null
+++ b/index-live-chat.html
@@ -0,0 +1,122 @@
+<!doctype html>
+<html class="no-js" lang="en" dir="ltr">
+<head>
+  <!--
+    version: 0.2
+    date: 2020 12 16
+    author: jorge@hangar.org
+  -->
+  <meta charset="utf-8">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>live - hangar.org</title>
+  <link rel="stylesheet" href="https://grafica.hangar.org/assets/vendor/fontawesome-free-5.15.1-web/css/all.min.css">
+  <link rel="stylesheet" href="https://grafica.hangar.org/assets/css/foundation.min.css">
+  <link rel="stylesheet" href="./assets/css/video-js.min.css">
+  <link rel="stylesheet" href="https://grafica.hangar.org/assets/css/hangar-static-app.css">
+  <!-- header icons anf favicons -->
+  <link rel="apple-touch-icon" sizes="57x57" href="https://grafica.hangar.org/assets/favicons/apple-icon-57x57.png">
+  <link rel="apple-touch-icon" sizes="60x60" href="https://grafica.hangar.org/assets/favicons/apple-icon-60x60.png">
+  <link rel="apple-touch-icon" sizes="72x72" href="https://grafica.hangar.org/assets/favicons/apple-icon-72x72.png">
+  <link rel="apple-touch-icon" sizes="76x76" href="https://grafica.hangar.org/assets/favicons/apple-icon-76x76.png">
+  <link rel="apple-touch-icon" sizes="114x114" href="https://grafica.hangar.org/assets/favicons/apple-icon-114x114.png">
+  <link rel="apple-touch-icon" sizes="120x120" href="https://grafica.hangar.org/assets/favicons/apple-icon-120x120.png">
+  <link rel="apple-touch-icon" sizes="144x144" href="https://grafica.hangar.org/assets/favicons/apple-icon-144x144.png">
+  <link rel="apple-touch-icon" sizes="152x152" href="https://grafica.hangar.org/assets/favicons/apple-icon-152x152.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="https://grafica.hangar.org/assets/favicons/apple-icon-180x180.png">
+  <link rel="icon" type="image/png" sizes="192x192"  href="https://grafica.hangar.org/assets/favicons/android-icon-192x192.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="https://grafica.hangar.org/assets/favicons/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="96x96" href="https://grafica.hangar.org/assets/favicons/favicon-96x96.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="https://grafica.hangar.org/assets/favicons/favicon-16x16.png">
+  <link rel="manifest" href="https://grafica.hangar.org/assets/favicons/manifest.json">
+  <meta name="msapplication-TileColor" content="#ffffff">
+  <meta name="msapplication-TileImage" content="https://grafica.hangar.org/assets/img/ms-icon-144x144.png">
+  <meta name="theme-color" content="#ffffff">
+  <!-- end header icons anf favicons -->
+  <style type="text/css">
+  </style>
+</head>
+<body class="live-streaming">
+  <!-- change color switcher -->
+  <input type="checkbox" id=changecolor class="colorswitch">
+  <label for=changecolor class="colorswitch">
+    <span class="slider"></span>
+  </label>
+  <!-- change view switcher-->
+  <input type="checkbox" id=changeview class="viewswitch">
+    <label for=changeview class="viewswitch">
+      <span class="slider"></span>
+    </label>
+  <div id="wrapper" class="colorswitch-invert viewswitch-change">
+    <a name="top"></a>
+    <header class="grid-container">
+      <div class="grid-x grid-padding-x">
+        <div class="cell small-12 flex-container flex-dir-column">
+          <div class="primary flex-child-shrink">
+            <h2 class="logo"><a href="https://hangar.org" title="Hangar, centre de producció, recerca i arts visuals." class="hangar-logo">Hangar</a></h2>
+            <h1>live streaming</h1>
+          </div>
+        </div>
+      </div>
+    </header>
+    <main class="grid-container viewswitch-container">
+      <div class="grid-x grid-padding-x">
+        <div class="cell small-12 flex-container flex-dir-column">
+          <div class="primary flex-child-auto">
+            <content class="video-webchat">
+              <video id="video" class="video-js" controls preload="auto" data-setup="{}"></video>
+              <div id="webchat" class="embedchat">
+                <iframe id="chatframe" src="https://live.hangar.org/chat/#live-hangar"></iframe>
+              </div>
+            </content>
+
+            <aside id="instructions" style="display:none;">
+              <p>
+                To create a new stream, pick a unique name for it, and set your broadcast
+                software to stream to <code>rtmp://live.hangar.org/input-hangar/</code> with stream key <code>stream_name</code>.
+              </p>
+              <p>
+                You will then be able to watch the live stream at
+                <code>https://live.hangar.org/#<b>stream_name</b></code>.
+              </p>
+              <p>
+                You can also point your favourite video player directly to
+                <code>https://live.hangar.org/hls/<b>stream_name</b>.m3u8</code>.
+                Use this url also for html embedding.
+              </p>
+            </aside>
+          </div>
+        </div>
+      </div>
+    </main>
+    <footer class="grid-container">
+      <div class="grid-x grid-padding-x">
+        <div class="cell small-12 flex-container flex-dir-column">
+          <div class="text-center flex-child-shrink">
+            <p>
+              another <a href="https://hangar.org" title="Hangar, centre de producció, recerca i arts visuals." class="hangar-logo small icon">Hangar</a> website.
+            </p>
+          </div>
+        </div>
+      </div>
+    </footer>
+  </div>
+  <script src="./assets/js/jquery-slim.min.js"></script>
+  <script src="./assets/js/video.min.js"></script>
+  <script>
+    $(function() {
+      if (window.location.hash) {
+        var name = window.location.hash.substr(1);
+        console.log('playing "' + name + '"');
+        $('#title').text('live.hangar.org - ' + name);
+        var v = videojs('video');
+        v.src({type: 'application/x-mpegURL', src: '/hls/' + name + '.m3u8'});
+      } else {
+        $('#v-ideo').hide();
+        $('#w-ebchat').hide();
+        $('#instructions').show();
+      }
+    });
+  </script>
+</body>
+</html>
