upload chat-iframe.html; group users by watching / not watching

website/routes.py

@@ -114,7 +114,7 @@ def segment_arbitrary(n):
 def segments():
     if not stream.is_online():
         return abort(404)
-    token = get_token()
+    token = get_token() or new_token()
     try:
         viewership.video_was_corrupted.remove(token)
     except KeyError:
@@ -127,6 +127,7 @@ def segments():
     file_wrapper = wrap_file(request.environ, concatenated_segments)
     response = Response(file_wrapper, mimetype='video/mp4')
     response.headers['Cache-Control'] = 'no-store'
+    response.set_cookie('token', token)
     return response
 
 # TODO: have a button like on Twitch that when you click it shows you a list of viewers / chatters that are currently watching / in chat
@@ -262,7 +263,7 @@ def stream_info():
 def users():
     token = get_token()
     viewership.made_request(token)
-    return render_template('users.html', token=token, people=viewership.get_people_list(), default_nickname=viewership.default_nickname, broadcaster_colour=BROADCASTER_COLOUR, len=len)
+    return render_template('users-iframe.html', token=token, people=viewership.get_people_list(), default_nickname=viewership.default_nickname, broadcaster_colour=BROADCASTER_COLOUR, len=len)
 
 @current_app.route('/static/radial.apng')
 def radial():
@@ -294,4 +295,4 @@ def add_header(response):
 
 @current_app.route('/teapot')
 def teapot():
-    return {'short': True, 'stout': True}, 418
+    return {'short': True, 'stout': True}, 418

website/templates/chat-iframe.html

@@ -27,8 +27,10 @@
           .camera {transform: scaleX(-1);text-shadow: 0px 0px 6px #{{ broadcaster_colour.hex() }};cursor: help;margin-right:0.25em;}
           .time {font-size: 80%;color: gray;vertical-align:middle;margin-right:0.5em;}
 
-          #users {margin-left:0.5em;}
-          .group-name {color:white;margin-bottom:0.125em;}
+          #users {color:white;margin-left:0.5em;}
+          .group {margin-bottom:1.5em;}
+          .group-name {margin-bottom:0.25em;}
+          .person {margin-left: 0.5em;}
 
           input[type="submit"] {padding: 0;margin-bottom: 0.5em;}
           div#refresh {
@@ -98,18 +100,30 @@
 <div id="users" style="display: none;">
     {% with broadcaster = people['broadcaster'] %}
         {% if broadcaster %}
-            <div style="margin-bottom:1em;">
+            <div class="group">
                 <div class="group-name">Broadcaster</div>
-                <span class="camera" title="Broadcaster">🎥</span><span class="name" style="color:#{{ broadcaster['colour'].hex() }};">{{ broadcaster['nickname'] or default_nickname(broadcaster['token']) }}</span>{% if broadcaster['tripcode']['string'] %}<div class="tripcode" style="background-color:#{{ person['tripcode']['background_colour'].hex() }};color:#{{ person['tripcode']['foreground_colour'].hex() }};">{{ broadcaster['tripcode']['string'] }}</div>{% endif %}
+                <div class="person">
+                    <span class="camera" title="Broadcaster">🎥</span><span class="name" style="color:#{{ broadcaster['colour'].hex() }};">{{ broadcaster['nickname'] or default_nickname(broadcaster['token']) }}</span>{% if broadcaster['tripcode']['string'] %}<div class="tripcode" style="background-color:#{{ person['tripcode']['background_colour'].hex() }};color:#{{ person['tripcode']['foreground_colour'].hex() }};">{{ broadcaster['tripcode']['string'] }}</div>{% endif %}
+                </div>
             </div>
         {% endif %}
     {% endwith %}
-    <div class="group-name">Users ({{ len(people['users']) }})</div>
-    {% for person in people['users'] %}
-        <div class="person">
-            <span class="name" style="color:#{{ person['colour'].hex() }};">{{ person['nickname'] or default_nickname(person['token']) }}{% with tag = person['nickname'] == None %}{% if tag %}<sup>{{ person['tag'] }}</sup>{% endif %}</span>{% if person['tripcode']['string'] %}{% if tag %}<span style="margin-right:0.125em;"></span>{% endif %}<div class="tripcode" style="background-color:#{{ person['tripcode']['background_colour'].hex() }};color:#{{ person['tripcode']['foreground_colour'].hex() }};">{{ person['tripcode']['string'] }}</div>{% endif %}{% endwith %}{% if person['token'] == token %}<span style="margin-left:0.5em;color:white;">(You)</span>{% endif %}
-        </div>
-    {% endfor %}
+    <div class="group">
+        <div class="group-name">Users watching ({{ len(people['watching']) }})</div>
+        {% for person in people['watching'] %}
+            <div class="person">
+                <span class="name" style="color:#{{ person['colour'].hex() }};">{{ person['nickname'] or default_nickname(person['token']) }}{% with tag = person['nickname'] == None %}{% if tag %}<sup>{{ person['tag'] }}</sup>{% endif %}</span>{% if person['tripcode']['string'] %}{% if tag %}<span style="margin-right:0.125em;"></span>{% endif %}<div class="tripcode" style="background-color:#{{ person['tripcode']['background_colour'].hex() }};color:#{{ person['tripcode']['foreground_colour'].hex() }};">{{ person['tripcode']['string'] }}</div>{% endif %}{% endwith %}{% if person['token'] == token %}<span style="margin-left:0.5em;color:white;">(You)</span>{% endif %}
+            </div>
+        {% endfor %}
+    </div>
+    <div class="group">
+        <div class="group-name">Users not watching ({{ len(people['not_watching']) }})</div>
+        {% for person in people['not_watching'] %}
+            <div class="person">
+                <span class="name" style="color:#{{ person['colour'].hex() }};">{{ person['nickname'] or default_nickname(person['token']) }}{% with tag = person['nickname'] == None %}{% if tag %}<sup>{{ person['tag'] }}</sup>{% endif %}</span>{% if person['tripcode']['string'] %}{% if tag %}<span style="margin-right:0.125em;"></span>{% endif %}<div class="tripcode" style="background-color:#{{ person['tripcode']['background_colour'].hex() }};color:#{{ person['tripcode']['foreground_colour'].hex() }};">{{ person['tripcode']['string'] }}</div>{% endif %}{% endwith %}{% if person['token'] == token %}<span style="margin-left:0.5em;color:white;">(You)</span>{% endif %}
+            </div>
+        {% endfor %}
+    </div>
 </div>
     </body>
-</html>
+</html>

website/templates/users-iframe.html

@@ -0,0 +1,51 @@
+<html>
+<head>
+<meta http-equiv="refresh" content="8">
+<style>
+          body {color:white;margin-left: 0.5em;}
+          .group {margin-bottom:1.5em;}
+          .group-name {margin-bottom:0.25em;}
+          .person {margin-left: 0.5em;}
+          .camera {transform: scaleX(-1);text-shadow: 0px 0px 6px #{{ broadcaster_colour.hex() }};cursor: help;margin-right:0.25em;}
+          .name {font-weight: bold;unicode-bidi: isolate;}
+          sup {margin: 0 -0.25em 0 0.125em;font-size: 90%;font-family:monospace;}
+          .tripcode {
+              margin-left: 0.5em;
+              padding: 0 5px;
+              border-radius: 6px;
+              font-size: 90%;
+              font-family: monospace;
+              vertical-align: middle;
+              display: inline-block;
+          }
+</style>
+</head>
+<body>
+    {% with broadcaster = people['broadcaster'] %}
+        {% if broadcaster %}
+            <div class="group">
+                <div class="group-name">Broadcaster</div>
+                <div class="person">
+                    <span class="camera" title="Broadcaster">🎥</span><span class="name" style="color:#{{ broadcaster['colour'].hex() }};">{{ broadcaster['nickname'] or default_nickname(broadcaster['token']) }}</span>{% if broadcaster['tripcode']['string'] %}<div class="tripcode" style="background-color:#{{ person['tripcode']['background_colour'].hex() }};color:#{{ person['tripcode']['foreground_colour'].hex() }};">{{ broadcaster['tripcode']['string'] }}</div>{% endif %}
+                </div>
+            </div>
+        {% endif %}
+    {% endwith %}
+    <div class="group">
+        <div class="group-name">Users watching ({{ len(people['watching']) }})</div>
+        {% for person in people['watching'] %}
+            <div class="person">
+                <span class="name" style="color:#{{ person['colour'].hex() }};">{{ person['nickname'] or default_nickname(person['token']) }}{% with tag = person['nickname'] == None %}{% if tag %}<sup>{{ person['tag'] }}</sup>{% endif %}</span>{% if person['tripcode']['string'] %}{% if tag %}<span style="margin-right:0.125em;"></span>{% endif %}<div class="tripcode" style="background-color:#{{ person['tripcode']['background_colour'].hex() }};color:#{{ person['tripcode']['foreground_colour'].hex() }};">{{ person['tripcode']['string'] }}</div>{% endif %}{% endwith %}{% if person['token'] == token %}<span style="margin-left:0.5em;color:white;">(You)</span>{% endif %}
+            </div>
+        {% endfor %}
+    </div>
+    <div class="group">
+        <div class="group-name">Users not watching ({{ len(people['not_watching']) }})</div>
+        {% for person in people['not_watching'] %}
+            <div class="person">
+                <span class="name" style="color:#{{ person['colour'].hex() }};">{{ person['nickname'] or default_nickname(person['token']) }}{% with tag = person['nickname'] == None %}{% if tag %}<sup>{{ person['tag'] }}</sup>{% endif %}</span>{% if person['tripcode']['string'] %}{% if tag %}<span style="margin-right:0.125em;"></span>{% endif %}<div class="tripcode" style="background-color:#{{ person['tripcode']['background_colour'].hex() }};color:#{{ person['tripcode']['foreground_colour'].hex() }};">{{ person['tripcode']['string'] }}</div>{% endif %}{% endwith %}{% if person['token'] == token %}<span style="margin-left:0.5em;color:white;">(You)</span>{% endif %}
+            </div>
+        {% endfor %}
+    </div>
+</body>
+</html>