look cool when the stream is offline

website/routes.py

@@ -37,12 +37,14 @@ def index(token=None):
     except KeyError:
         pass
     use_videojs = bool(request.args.get('videojs', default=int(VIDEOJS_ENABLED_BY_DEFAULT), type=int))
+    online = stream.is_online()
     viewership.made_request(token)
 
     response = render_template('index.html',
                                token=token,
                                use_videojs=use_videojs,
-                               start_number=resolve_segment_offset() if stream.is_online() else 0,
+                               online=online,
+                               start_number=resolve_segment_offset() if online else 0,
                                hls_time=CONFIG['stream']['hls_time'])
     response = Response(response) # TODO: add a view of the chat only, either as an arg here or another route
     response.set_cookie('token', token)

website/static/platform.css

@@ -13,12 +13,38 @@
   position: relative;
   padding-bottom: calc(100% * 9 / 16);
 }
-#stream video, #videojs {
+#stream > video, #videojs, #offline {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
+  overflow: hidden;
+}
+#offline > div:last-child {
+  position: absolute;
+  top: calc(50% - 0.607em);
+  width: 100%;
+  text-align: center;
+  font-weight: bold;
+  font-size: 400%;
+  text-shadow: 0 0 8px #000,0 0 128px #000;
+}
+#offline > div:first-child {
+  background-image: url("/static/noise.png");
+  height: 100%;
+  width: 100%;
+  animation: noise-x 7s steps(14) infinite, noise-y 11s linear infinite;
+  background-size: cover;
+  filter: blur(2px) brightness(40%) contrast(70%);
+}
+@keyframes noise-x {
+  0%   {background-position-x:   0%;}
+  100% {background-position-x: 100%;}
+}
+@keyframes noise-y {
+  0%   {background-position-y:   0%;}
+  100% {background-position-y: 100%;}
 }
 
 #chat-border {

website/static/platform.js

@@ -12,7 +12,11 @@ const videojsEnabled = parseInt(document.getElementById("videojs-enabled").value
 let firstSegment;
 
 if ( !videojsEnabled ) {
-    firstSegment = parseInt(/segment=(\d+)/.exec(video.src)[1]);
+    try {
+        firstSegment = parseInt(/segment=(\d+)/.exec(video.src)[1]);
+    } catch ( error ) {
+        firstSegment = null; // happens when the stream is offline
+    }
 }
 
 let token, streamTitle, viewerCount, streamStatus, streamLight, refreshButton, radialLoader;

website/templates/index.html

@@ -62,6 +62,7 @@
         <div style="display:flex;flex-flow:row wrap;">
             <div class="two-thirds">
                 <div id="stream">
+                  {% if online %}
                     {% if use_videojs %}
                     <input id="videojs-enabled" type="hidden" value="1">
                     <!-- https://stackoverflow.com/questions/41014197/how-can-i-play-a-m3u8-file-video-using-the-html5-video-element -->
@@ -75,6 +76,11 @@
                     <input id="videojs-enabled" type="hidden" value="0">
                     <video controls autoplay src="{{ url_for('segments', segment=start_number, token=token) }}"></video>
                     {% endif %}
+                  {% else %}
+                    <input id="videojs-enabled" type="hidden" value="{{ '1' if use_videojs else '0' }}">
+                    <video controls autoplay></video>
+                    <div id="offline"><div></div><div>OFFLINE</div></div>
+                  {% endif %}
                 </div>
                 <div id="stream-info-container"><noscript><iframe id="stream-info" src="{{ url_for('stream_info', token=token, embed=1) }}"></iframe></noscript></div>
                 <div id="source" style="margin: -2.75em 0 1.5em 1.25em;"><a href="https://gitlab.com/ninya9k/onion-livestreaming" target="_blank">source code</a></div>