organise html/css; token in concatenate.py error messages; fix margins around dates in chat

このコミットが含まれているのは:
n9k 2021-07-19 06:28:00 +00:00
コミット c30e2c16ae
14個のファイルの変更1140行の追加1046行の削除

ファイルの表示

@ -18,9 +18,9 @@ def resolve_segment_offset(segment_offset=1):
return 0 return 0
return _segment_number(segment) return _segment_number(segment)
def get_next_segment(after, start_segment): def get_next_segment(after, start_segment, token=None):
if not is_online(): if not is_online():
raise SegmentUnavailable(f'stream went offline') raise SegmentUnavailable(f'stream went offline', token)
start = time.time() start = time.time()
while True: while True:
time.sleep(0.5) time.sleep(0.5)
@ -43,33 +43,36 @@ def get_next_segment(after, start_segment):
if time.time() - start >= STREAM_TIMEOUT(): if time.time() - start >= STREAM_TIMEOUT():
if after == None: if after == None:
raise SegmentUnavailable(f'timeout waiting for initial segment {SEGMENT_INIT}') raise SegmentUnavailable(f'timeout waiting for initial segment {SEGMENT_INIT}', token)
elif after == SEGMENT_INIT: elif after == SEGMENT_INIT:
raise SegmentUnavailable(f'timeout waiting for start segment {start_segment}') raise SegmentUnavailable(f'timeout waiting for start segment {start_segment}', token)
else: else:
raise SegmentUnavailable(f'timeout searching after {after}') raise SegmentUnavailable(f'timeout searching after {after}', token)
class SegmentUnavailable(Exception): class SegmentUnavailable(Exception):
pass pass
class SegmentsIterator: class SegmentsIterator:
def __init__(self, start_segment, skip_init_segment=False): def __init__(self, start_segment, token=None, skip_init_segment=False):
self.start_segment = start_segment self.start_segment = start_segment
self.token = token
self.segment = SEGMENT_INIT if skip_init_segment else None self.segment = SEGMENT_INIT if skip_init_segment else None
def __iter__(self): def __iter__(self):
return self return self
def __next__(self): def __next__(self):
self.segment = get_next_segment(self.segment, self.start_segment) self.segment = get_next_segment(self.segment, self.start_segment, token=self.token)
return self.segment return self.segment
class ConcatenatedSegments: class ConcatenatedSegments:
def __init__(self, start_number, segment_hook=None, corrupt_hook=None, should_close_connection=None): def __init__(self, start_number, token=None, segment_hook=None, corrupt_hook=None, should_close_connection=None):
# start at this segment, after SEGMENT_INIT # start at this segment, after SEGMENT_INIT
self.start_number = start_number self.start_number = start_number
# the token of the viewer the stream is being sent to
self.token = token
# run this function before sending each segment (if we do it after then if someone gets the most of a segment but then stops, that wouldn't be counted, before = 0 viewers means nobody is retrieving the stream, after = slightly more accurate viewer count but 0 viewers doesn't necessarily mean nobody is retrieving the stream) # run this function before sending each segment (if we do it after then if someone gets the most of a segment but then stops, that wouldn't be counted, before = 0 viewers means nobody is retrieving the stream, after = slightly more accurate viewer count but 0 viewers doesn't necessarily mean nobody is retrieving the stream)
self.segment_hook = segment_hook or (lambda n: None) self.segment_hook = segment_hook or (lambda n: None)
# run this function when we send the corrupting segment # run this function when we send the corrupting segment
@ -78,7 +81,7 @@ class ConcatenatedSegments:
self.should_close_connection = should_close_connection or (lambda: None) self.should_close_connection = should_close_connection or (lambda: None)
start_segment = SEGMENT.format(number=start_number) start_segment = SEGMENT.format(number=start_number)
self.segments = SegmentsIterator(start_segment=start_segment) self.segments = SegmentsIterator(start_segment=start_segment, token=self.token)
self._closed = False self._closed = False
self.segment_read_offset = 0 self.segment_read_offset = 0
@ -89,14 +92,14 @@ class ConcatenatedSegments:
chunk = b'' chunk = b''
while True: while True:
if self.should_close_connection(): if self.should_close_connection():
raise SegmentUnavailable(f'told to close while reading {self.segment}') raise SegmentUnavailable(f'told to close while reading {self.segment}', self.token)
try: try:
with open(os.path.join(SEGMENTS_DIR, self.segment), 'rb') as fp: with open(os.path.join(SEGMENTS_DIR, self.segment), 'rb') as fp:
fp.seek(self.segment_read_offset) fp.seek(self.segment_read_offset)
chunk_chunk = fp.read(n - len(chunk)) chunk_chunk = fp.read(n - len(chunk))
except FileNotFoundError: except FileNotFoundError:
raise SegmentUnavailable(f'deleted while reading {self.segment}') raise SegmentUnavailable(f'deleted while reading {self.segment}', self.token)
self.segment_read_offset += len(chunk_chunk) self.segment_read_offset += len(chunk_chunk)
chunk += chunk_chunk chunk += chunk_chunk
@ -137,7 +140,7 @@ class ConcatenatedSegments:
def _corrupt(self, n): def _corrupt(self, n):
# TODO: make this corrupt more reliably (maybe it has to follow a full segment?) # TODO: make this corrupt more reliably (maybe it has to follow a full segment?)
# Doesn't corrupt when directly after init.mp4 # Doesn't corrupt when directly after init.mp4
print('ConcatenatedSegments._corrupt') print('ConcatenatedSegments._corrupt', self.token)
self.corrupt_hook() self.corrupt_hook()
self.close() self.close()
try: try:

ファイルの表示

@ -17,7 +17,6 @@ CONFIG_FILE = os.path.join(ROOT, 'config.toml')
with open(CONFIG_FILE) as fp: with open(CONFIG_FILE) as fp:
CONFIG = toml.load(fp) CONFIG = toml.load(fp)
# these two are accessed through `CONFIG`; they're just here for completeness
# TODO: always read hls_time from stream.m3u8 # TODO: always read hls_time from stream.m3u8
VIEW_COUNTING_PERIOD = 30 # count views from the last x seconds VIEW_COUNTING_PERIOD = 30 # count views from the last x seconds

ファイルの表示

@ -150,6 +150,7 @@ def segments():
start_number = resolve_segment_offset() start_number = resolve_segment_offset()
try: try:
concatenated_segments = ConcatenatedSegments(start_number=start_number, concatenated_segments = ConcatenatedSegments(start_number=start_number,
token=token,
segment_hook=lambda n: viewership.view_segment(n, token, check_exists=False), segment_hook=lambda n: viewership.view_segment(n, token, check_exists=False),
corrupt_hook=lambda: viewership.video_was_corrupted.add(token), # lock? corrupt_hook=lambda: viewership.video_was_corrupted.add(token), # lock?
should_close_connection=should_close_connection) should_close_connection=should_close_connection)
@ -401,7 +402,7 @@ def add_header(response):
def debug(): def debug():
import copy import copy
# necessary because we store colours as bytes and json can't bytes; # necessary because we store colours as bytes and json can't bytes
class JSONEncoder(json.encoder.JSONEncoder): class JSONEncoder(json.encoder.JSONEncoder):
def default(self, obj): def default(self, obj):
if isinstance(obj, bytes): if isinstance(obj, bytes):

ファイルの表示

@ -3,7 +3,7 @@
margin: 0 0.5em 0.5em 0.5em; margin: 0 0.5em 0.5em 0.5em;
padding: 0.5em 0; padding: 0.5em 0;
border-bottom:1px solid gray; border-bottom:1px solid gray;
font-size:125%; font-size: 125%;
} }
.hue-rotate { .hue-rotate {
filter: hue-rotate(144deg); filter: hue-rotate(144deg);

ファイルの表示

@ -4,15 +4,34 @@
<meta http-equiv="conent-security-policy" content="default-src 'none'"> <meta http-equiv="conent-security-policy" content="default-src 'none'">
{% if not debug %}<meta http-equiv="refresh" content="8">{% endif %} {% if not debug %}<meta http-equiv="refresh" content="8">{% endif %}
<style> <style>
body {margin: 0 0.5em;min-height: calc(100vh - 1em);} body {
#messages {transform: scaleX(-1);} margin: 0 0.5em;
form {margin: 0;} min-height: calc(100vh - 1em);
.inline-block {display: inline-block;} }
.rotate {transform: rotate(-180deg);} #messages {
.reverse {direction: rtl;} transform: scaleX(-1);
}
.comment {color:white;padding:3px 2px;overflow:hidden;} form {
.comment:hover{background-color:#333;border-radius:4px;} margin: 0;
}
.inline-block {
display: inline-block;
}
.rotate {
transform: rotate(-180deg);
}
.reverse {
direction: rtl;
}
.comment {
color: #f0f0f0;
padding: 3px;
overflow: hidden;
}
.comment:hover{
background-color: #333;
border-radius: 4px;
}
.censored { .censored {
font-weight: normal; font-weight: normal;
font-variant: all-small-caps; font-variant: all-small-caps;
@ -25,18 +44,35 @@
.censored:hover { .censored:hover {
color: revert; color: revert;
} }
.date {color:gray;font-size:75%;text-align:center;border-bottom:1px solid #333;margin:0.5em 0 0.75em 0;cursor:default;} .date {
color: gray;
.name {color:var(--name-color);font-weight:bold;unicode-bidi:isolate;} font-size: 75%;
text-align: center;
cursor: default;
}
.date > i {
padding: 0.25em 0 0.5em 0;
display: block;
border-bottom: 1px solid #333;
}
.name {
color: var(--name-color);
font-weight: bold;
unicode-bidi: isolate;
}
.name:hover{ .name:hover{
background-color: var(--name-bg-color); background-color: var(--name-bg-color);
text-shadow: 0 0 1px {{ background_colour }}; text-shadow: 0 0 1px #{{ background_colour.hex() }};
border-radius: 2px; border-radius: 2px;
padding: 2px; padding: 2px;
margin: -2px; margin: -2px;
cursor: default; cursor: default;
} }
sup {margin-right: 0.125em;font-size: 90%;font-family:monospace;} sup {
margin-right: 0.125em;
font-size: 90%;
font-family: monospace;
}
.tripcode { .tripcode {
font-weight: normal; font-weight: normal;
margin-left: 0.5em; margin-left: 0.5em;
@ -48,21 +84,54 @@
display: inline-block; display: inline-block;
cursor: default; cursor: default;
} }
.barrier {display:inline-block;margin-right:0.5em;} .barrier {
.message {overflow-wrap:break-word;unicode-bidi:isolate;} display: inline-block;
.camera {font-style: normal;transform: scaleX(-1);text-shadow: 0px 0px 6px #{{ broadcaster_colour.hex() }};cursor: help;margin-right:0.25em;word-break: keep-all;} margin-right: 0.5em;
.time {font-size: 80%;color: gray;vertical-align:middle;cursor:default;} }
.message {
overflow-wrap: break-word;
unicode-bidi: isolate;
}
.camera {
font-style: normal;
transform: scaleX(-1);
text-shadow: 0px 0px 6px #{{ broadcaster_colour.hex() }};
cursor: help;
margin-right: 0.25em;
word-break: keep-all;
}
.time {
font-size: 80%;
color: gray;
vertical-align: middle;
cursor: default;
}
{% if include_user_list %} {% if include_user_list %}
#users {color:white;} #users {
.group {margin-bottom:1.5em;} color: #f0f0f0;
.group-name {margin-bottom:0.25em;} }
.person {margin: 0 0 2px 0.5em;} .group {
margin-bottom: 1.5em;
}
.group-name {
margin-bottom: 0.25em;
}
.person {
margin: 0 0 2px 0.5em;
}
.you {
font-style: normal;
margin-left: 0.5em;
color: #f0f0f0;
}
{% endif %} {% endif %}
input[type="submit"] {padding:0 0.25em;margin-bottom:0.5em;} input[type="submit"] {
padding: 0 0.25em;
margin-bottom: 0.5em;
}
.refresh { .refresh {
color: white; color: #f0f0f0;
background-color: gray; background-color: gray;
position: sticky; position: sticky;
/*top: 100vh;*/ /* (when upside down etc.) placement is correct with top when there is no scrollbar */ /*top: 100vh;*/ /* (when upside down etc.) placement is correct with top when there is no scrollbar */
@ -74,8 +143,12 @@
box-shadow: 0px 2px 4px black; box-shadow: 0px 2px 4px black;
margin: 0; margin: 0;
} }
.refresh::after {content: "Manual refresh required";} .refresh::after {
input[type="checkbox"]{vertical-align:middle;} content: "Manual refresh required";
}
input[type="checkbox"] {
vertical-align: middle;
}
.unhide { .unhide {
animation: unhide 0s forwards 30s; animation: unhide 0s forwards 30s;
height: 0; height: 0;
@ -103,8 +176,9 @@
margin-bottom: 1.25em; margin-bottom: 1.25em;
} }
} }
td{width:100vw;} td {
width: 100vw;
}
/* for text-based browsers */ /* for text-based browsers */
.textonly { .textonly {
display: none; display: none;
@ -119,112 +193,51 @@
<br> <br>
<div>== Chat ==</div> <div>== Chat ==</div>
</div> </div>
<div id="messages"> <div id="messages">
{% if broadcaster %} {% if broadcaster %}
<form action="{{ url_for('mod_chat') }}" method="post"> <form action="{{ url_for('mod_chat') }}" method="post">
<div class="reverse"> <div class="reverse">
<input class="rotate" type="submit" name="ban" value="Ban"> <input class="rotate" type="submit" name="ban" value="Ban">
<input class="rotate" type="submit" name="hide" value="Hide"> <input class="rotate" type="submit" name="hide" value="Hide">
<input class="rotate" type="submit" name="ban_purge" value="Ban and hide all"> <input class="rotate" type="submit" name="ban_purge" value="Ban and hide all">
</div> </div>
{% endif %} {% endif %}
<!-- TODO: mobile tooltip / title --> <!-- TODO: mobile tooltip / title -->
<table border="1" frame="void" rules="rows" style="border-collapse:separate;border-spacing:0 2px;"> <table border="1" frame="void" rules="rows" style="border-collapse:separate;border-spacing:0 2px;">
<tbody> <tbody>
{% for message in messages %} {% for message in messages %}
<tr> <tr>
{% if message.get('special') == 'date' %} {% if message.get('special') == 'date' %}
<td class="date rotate"><i style="font-style:normal;">{{ message['content'] }}</i></td> <td class="date rotate">
<i style="font-style:normal;">{{ message['content'] }}
</i>
</td>
{% else %} {% else %}
<td class="comment rotate"> <td class="comment rotate">
{% if not message['hidden'] %} {% include 'comment.html' %}
{% if broadcaster %}
<input type="checkbox" name="message_id[]" value="{{ message['id'] }}">
{% endif %}
<span class="time" title="{{ message['timestamp'] }}">{{ message['time'] }}</span><span class="barrier"></span><span class="textonly"> </span
{% if message['viewer']['broadcaster'] %}
><i class="camera" title="Broadcaster">🎥</i
{% endif %}
><span class="name" style="--name-color:#{{ message['viewer']['colour'].hex() }};--name-bg-color:#{{ message['viewer']['colour'].hex() }}20;">{{ RE_WHITESPACE.sub(chr(160), message['viewer']['nickname'] or default_nickname(message['viewer']['token'])) }}{% with tag = message['viewer']['nickname'] == None and not message['viewer']['broadcaster'] %}{% if tag %}<sup>{{ message['viewer']['tag'] }}</sup>{% endif %}</span
{% if message['viewer']['tripcode']['string'] %}{% if tag %}><span style="margin-right:0.125em;"></span{% endif %}
><span class="barrier" style="margin:0;"></span><b class="textonly"> &lt;</b><b class="tripcode" style="background-color:#{{ message['viewer']['tripcode']['background_colour'].hex() }};color:#{{ message['viewer']['tripcode']['foreground_colour'].hex() }};">{{ message['viewer']['tripcode']['string'] }}</b><b class="textonly">&gt;</b
{% endif %}{% endwith %}
><span class="barrier"></span><br class="textonly"><span class="message">{{ message['markup'] }}</span>
{% endif %}
</td> </td>
{% endif %} {% endif %}
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
{% if broadcaster %}
{% if broadcaster %}
</form> </form>
{% endif %} {% endif %}
<a href="" style="text-decoration:none;">
<a href="" style="text-decoration: none;"><div class="refresh unhide rotate"></div></a> <div class="refresh unhide rotate"></div>
</div> </a>
{% if include_user_list %} </div>
<div class="textonly">== List of users ==</div> {% if include_user_list %}
<div id="users" style="overflow: hidden;height:0;"> <div class="textonly">== List of users ==</div>
<a href="" style="text-decoration: none;"> <div id="users" style="overflow:hidden;height:0;">
<a href="" style="text-decoration:none;">
<div class="refresh unhide-margin" style="bottom:revert;top:0;"></div> <div class="refresh unhide-margin" style="bottom:revert;top:0;"></div>
</a> </a>
<div style="margin: 0.25em 1em;"> <div style="margin: 0.5em 1em;">
{% with person = people['broadcaster'] %} {% include 'users.html' %}
{% if person %}
<div class="group">
<div class="group-name">Broadcaster</div>
<div class="person">
<i class="camera" title="Broadcaster">🎥</i><span class="name" style="--name-color:#{{ person['colour'].hex() }};--name-bg-color:#{{ person['colour'].hex() }}20;">{{ person['nickname'] or default_nickname(person['token']) }}</span>{% if person['tripcode']['string'] %}<b class="textonly"> &lt;</b><b class="tripcode" style="background-color:#{{ person['tripcode']['background_colour'].hex() }};color:#{{ person['tripcode']['foreground_colour'].hex() }};">{{ person['tripcode']['string'] }}</b><b class="textonly">&gt;</b>{% endif %}
</div> </div>
</div> </div>
<br class="textonly">
{% endif %} {% endif %}
{% endwith %}
{% if broadcaster %}
<form action="{{ url_for('mod_users') }}" method="post">
<input type="hidden" name="noscript" value="0">
<input type="hidden" name="banned" value="1">
{% endif %}
<div class="group">
<div class="group-name">Users watching ({{ len(people['watching']) }})</div>
{% for person in people['watching'] %}
<div class="person">
{% if broadcaster %}<input type="checkbox" name="token[]" value="{{ person['token'] }}">{% endif %}<span class="name" style="--name-color:#{{ person['colour'].hex() }};--name-bg-color:#{{ person['colour'].hex() }}20;">{{ 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 %}<b class="textonly"> &lt;</b><b class="tripcode" style="background-color:#{{ person['tripcode']['background_colour'].hex() }};color:#{{ person['tripcode']['foreground_colour'].hex() }};">{{ person['tripcode']['string'] }}</b><b class="textonly">&gt;</b>{% endif %}{% endwith %}{% if person['token'] == token %}<span class="textonly"> </span><span style="margin-left:0.5em;color:white;">(You)</span>{% endif %}
</div>
{% endfor %}
</div>
<br class="textonly">
<div class="group">
<div class="group-name">Users not watching ({{ len(people['not_watching']) }})</div>
{% for person in people['not_watching'] %}
<div class="person">
{% if broadcaster %}<input type="checkbox" name="token[]" value="{{ person['token'] }}">{% endif %}<span class="name" style="--name-color:#{{ person['colour'].hex() }};--name-bg-color:#{{ person['colour'].hex() }}20;">{{ 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 %}<b class="textonly"> &lt;</b><b class="tripcode" style="background-color:#{{ person['tripcode']['background_colour'].hex() }};color:#{{ person['tripcode']['foreground_colour'].hex() }};">{{ person['tripcode']['string'] }}</b><b class="textonly">&gt;</b>{% endif %}{% endwith %}{% if person['token'] == token %}<span class="textonly"> </span><span style="margin-left:0.5em;color:white;">(You)</span>{% endif %}
</div>
{% endfor %}
</div>
<br class="textonly">
{% if broadcaster %}
<button>Ban</button>
</form>
<div style="margin:1.75em 0 1.5em 0;border-bottom:1px solid #3f3f3f;"></div>
<form action="{{ url_for('mod_users') }}" method="post">
<input type="hidden" name="noscript" value="0">
<input type="hidden" name="banned" value="0">
<div class="group-name">Banned ({{ len(people['banned']) }})</div>
<div class="group">
{% for person in people['banned'] %}
<div class="person">
<input type="checkbox" name="token[]" value="{{ person['token'] }}"><span class="name" style="--name-color:#{{ person['colour'].hex() }};--name-bg-color:#{{ person['colour'].hex() }}20;">{{ 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 %}<b class="textonly"> &lt;</b><b class="tripcode" style="background-color:#{{ person['tripcode']['background_colour'].hex() }};color:#{{ person['tripcode']['foreground_colour'].hex() }};">{{ person['tripcode']['string'] }}</b><b class="textonly">&gt;</b>{% endif %}{% endwith %}
</div>
{% endfor %}
</div>
<button>Unban</button>
</form>
{% endif %}
</div>
</div>
{% endif %}
</body> </body>
</html> </html>

ファイルの表示

@ -5,11 +5,11 @@
<style> <style>
body { body {
margin-left:0.5em; margin-left:0.5em;
color: white; color: #f0f0f0;
} }
input { input {
background-color: inherit; background-color: inherit;
color: white; color: #f0f0f0;
} }
input#message { input#message {
border: 1px solid #999 !important; border: 1px solid #999 !important;
@ -98,7 +98,7 @@
} }
#note { #note {
font-weight: bold; font-weight: bold;
color: white; color: #f0f0f0;
animation: hide 0s forwards 2s; animation: hide 0s forwards 2s;
position: absolute; position: absolute;
top: 2.75rem; top: 2.75rem;
@ -251,7 +251,7 @@
<div> <div>
<div class="note-space"> <div class="note-space">
<label for="settings-toggle" id="to-chat"></label> <label for="settings-toggle" id="to-chat"></label>
<button style="padding: 0.5em;float:right;" class="pure-button pure-button-primary smalltext">Change appearance</button> <button style="padding:0.5em;float:right;" class="pure-button pure-button-primary smalltext">Change appearance</button>
</div> </div>
</div> </div>
</form> </form>

14
website/templates/comment.html ノーマルファイル
ファイルの表示

@ -0,0 +1,14 @@
{% if not message['hidden'] %}
{% if broadcaster %}
<input type="checkbox" name="message_id[]" value="{{ message['id'] }}">
{% endif %}
<span class="time" title="{{ message['timestamp'] }}">{{ message['time'] }}</span><span class="barrier"></span><span class="textonly"> </span
{% if message['viewer']['broadcaster'] %}
><i class="camera" title="Broadcaster">🎥</i
{% endif %}
><span class="name" style="--name-color:#{{ message['viewer']['colour'].hex() }};--name-bg-color:#{{ message['viewer']['colour'].hex() }}20;">{{ RE_WHITESPACE.sub(chr(160), message['viewer']['nickname'] or default_nickname(message['viewer']['token'])) }}{% with tag = message['viewer']['nickname'] == None and not message['viewer']['broadcaster'] %}{% if tag %}<sup>{{ message['viewer']['tag'] }}</sup>{% endif %}</span
{% if message['viewer']['tripcode']['string'] %}{% if tag %}><span style="margin-right:0.125em;"></span{% endif %}
><span class="barrier" style="margin:0;"></span><b class="textonly"> &lt;</b><b class="tripcode" style="background-color:#{{ message['viewer']['tripcode']['background_colour'].hex() }};color:#{{ message['viewer']['tripcode']['foreground_colour'].hex() }};">{{ message['viewer']['tripcode']['string'] }}</b><b class="textonly">&gt;</b
{% endif %}{% endwith %}
><span class="barrier"></span><br class="textonly"><span class="message">{{ message['markup'] }}</span>
{% endif %}

1
website/templates/person.html ノーマルファイル
ファイルの表示

@ -0,0 +1 @@
{% if person['broadcaster'] %}<i class="camera" title="Broadcaster">🎥</i>{% elif broadcaster %}<input type="checkbox" name="token[]" value="{{ person['token'] }}">{% endif %}<span class="name" style="--name-color:#{{ person['colour'].hex() }};--name-bg-color:#{{ person['colour'].hex() }}20;">{{ 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 %}<b class="textonly"> &lt;</b><b class="tripcode" style="background-color:#{{ person['tripcode']['background_colour'].hex() }};color:#{{ person['tripcode']['foreground_colour'].hex() }};">{{ person['tripcode']['string'] }}</b><b class="textonly">&gt;</b>{% endif %}{% endwith %}{% if person['token'] == token %}<span class="textonly"> </span><i class="you">(You)</i>{% endif %}

ファイルの表示

@ -19,6 +19,7 @@
<div style="text-align:center;width:100vw;"> <div style="text-align:center;width:100vw;">
<input placeholder="Password" type="password" name="password" maxlength="256" style="background:#333;border:1px solid black;border-radius:4px;color:#f0f0f0;padding:6px;text-align:center;font-size:32px;width:min(1024px, 90%);"> <input placeholder="Password" type="password" name="password" maxlength="256" style="background:#333;border:1px solid black;border-radius:4px;color:#f0f0f0;padding:6px;text-align:center;font-size:32px;width:min(1024px, 90%);">
</div> </div>
<input type="image" width="160" height="106" style="margin:32px auto;display:block;padding:8px;border:1px outset #2b2b2b;" src="{{ url_for('_static', fn='eye.png') }}" alt="Submit"></form> <input type="image" width="160" height="106" style="margin:32px auto;display:block;padding:8px;border:1px outset #2b2b2b;" src="{{ url_for('_static', fn='eye.png') }}" alt="Submit">
</form>
</body> </body>
</html> </html>

ファイルの表示

@ -4,11 +4,13 @@
<noscript><meta http-equiv="refresh" content="20"></noscript> <noscript><meta http-equiv="refresh" content="20"></noscript>
<link href="/static/external/pure-min.css" rel="stylesheet"> <link href="/static/external/pure-min.css" rel="stylesheet">
<style> <style>
html {color: white;} body {
color: #f0f0f0;
}
#stream-title { #stream-title {
display:inline-block; display: inline-block;
width:calc(100% - 20px - 6.75em); width: calc(100% - 20px - 6.75em);
font-size:150%; font-size: 150%;
font-weight: bold; font-weight: bold;
margin-bottom: 0.375em; margin-bottom: 0.375em;
word-wrap: break-word; word-wrap: break-word;
@ -18,18 +20,33 @@
width: 0.625em; width: 0.625em;
border-radius: 50%; border-radius: 50%;
display: inline-block; display: inline-block;
margin-right:0.125em; margin-right: 0.125em;
}
#stream-status {
vertical-align: text-bottom;
}
.refresh-button {
font-weight: bold;
margin-left: 0.25em;
padding: 0.25em 0.375em 0.25em 0.375em;
color: white;
}
.hue-rotate {
filter: hue-rotate(136deg);
} }
#stream-status {vertical-align: text-bottom;}
.refresh-button {font-weight:bold;margin-left:0.25em;padding: 0.25em 0.375em 0.25em 0.375em;color: white;}
.hue-rotate {filter: hue-rotate(136deg);}
.icon { .icon {
margin-top:-1pt; margin-top: -1pt;
} }
{% if stream_uptime != None %} {% if stream_uptime != None %}
.digit {overflow: hidden;display:inline-block;height:2em;} .digit {
.digit div {height:2em;} overflow: hidden;
display: inline-block;
height: 2em;
}
.digit div {
height:2em;
}
.seconds-ones {animation: count10 10s step-end -{{ stream_uptime }}s infinite;} .seconds-ones {animation: count10 10s step-end -{{ stream_uptime }}s infinite;}
.seconds-tens {animation: count6 60s step-end -{{ stream_uptime }}s infinite;} .seconds-tens {animation: count6 60s step-end -{{ stream_uptime }}s infinite;}
@ -44,14 +61,26 @@
.digit-hours-tens {width: 0;overflow: hidden;animation: unhide 0s forwards {{ 36000 - stream_uptime }}s;} .digit-hours-tens {width: 0;overflow: hidden;animation: unhide 0s forwards {{ 36000 - stream_uptime }}s;}
.digit-hours-hundreds {width: 0;overflow: hidden;animation: unhide 0s forwards {{ 360000 - stream_uptime }}s;} .digit-hours-hundreds {width: 0;overflow: hidden;animation: unhide 0s forwards {{ 360000 - stream_uptime }}s;}
.timer {animation: hide 0s forwards {{ 3600000 - stream_uptime }}s;} .timer {
.timer-overflow {width: 0; overflow: hidden; animation: unhide 0s forwards {{ 3600000 - stream_uptime }}s;} animation: hide 0s forwards {{ 3600000 - stream_uptime }}s;
}
.timer-overflow {
width: 0;
overflow: hidden;
animation: unhide 0s forwards {{ 3600000 - stream_uptime }}s;
}
@keyframes hide { @keyframes hide {
to {width: 0;height:0;visibility:hidden;} to {
width: 0;
height: 0;
visibility: hidden;
}
} }
@keyframes unhide { @keyframes unhide {
to {width: revert;} to {
width: revert;
}
} }
@keyframes count10 { @keyframes count10 {
0% {margin-top: -0em;} 0% {margin-top: -0em;}
@ -97,8 +126,12 @@
animation-duration: 20s; animation-duration: 20s;
} }
@keyframes radial { @keyframes radial {
from {stroke-dashoffset: 0;} from {
to {stroke-dashoffset: 32;} stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 32;
}
} }
{% endif %} {% endif %}
</style> </style>

ファイルの表示

@ -1,22 +1,51 @@
<html> <html>
<head> <head>
{% if not debug %}<meta http-equiv="refresh" content="8">{% endif %} {% if not debug %}<meta http-equiv="refresh" content="8">{% endif %}
<style> <style>
body {color:white;margin-top: 0;margin-bottom: 0;} body {
.group {margin-bottom:1.5em;} color: #f0f0f0;
.group-name {margin-bottom:0.25em;} margin-top: 0;
.person {margin: 0 0 2px 0.5em;} margin-bottom: 0;
.camera {font-style: normal;transform: scaleX(-1);text-shadow: 0px 0px 6px #{{ broadcaster_colour.hex() }};cursor: help;margin-right:0.25em;} }
.name {color:var(--name-color);font-weight: bold;unicode-bidi: isolate;} .group {
margin-bottom: 1.5em;
}
.group-name {
margin-bottom: 0.25em;
}
.person {
margin: 0 0 2px 0.5em;
}
.you {
font-style: normal;
margin-left: 0.5em;
color: #f0f0f0;
}
.camera {
font-style: normal;
transform: scaleX(-1);
text-shadow: 0px 0px 6px #{{ broadcaster_colour.hex() }};
cursor: help;
margin-right: 0.25em;
}
.name {
color: var(--name-color);
font-weight: bold;
unicode-bidi: isolate;
}
.name:hover{ .name:hover{
background: 4px var(--name-bg-color); background: 4px var(--name-bg-color);
text-shadow: 0 0 1px {{ background_colour }}; text-shadow: 0 0 1px #{{ background_colour.hex() }};
border-radius: 2px; border-radius: 2px;
padding: 2px 4px; padding: 2px 4px;
margin: -2px -4px; margin: -2px -4px;
cursor: default; cursor: default;
} }
sup {margin-right: 0.125em;font-size: 90%;font-family:monospace;} sup {
margin-right: 0.125em;
font-size: 90%;
font-family:monospace;
}
.tripcode { .tripcode {
font-weight: normal; font-weight: normal;
margin-left: 0.5em; margin-left: 0.5em;
@ -32,7 +61,7 @@
margin: 0; margin: 0;
} }
.refresh { .refresh {
color: white; color: #f0f0f0;
background-color: gray; background-color: gray;
position: sticky; position: sticky;
top: 0; /* (when upside down etc.) placement is correct with top when there is no scrollbar */ top: 0; /* (when upside down etc.) placement is correct with top when there is no scrollbar */
@ -44,7 +73,6 @@
box-shadow: 0px 2px 4px black; box-shadow: 0px 2px 4px black;
margin: 0; margin: 0;
} }
.unhide-margin { .unhide-margin {
animation: unhide-margin 0s forwards 30s; animation: unhide-margin 0s forwards 30s;
height: 0; height: 0;
@ -59,70 +87,19 @@
margin-bottom: 1.25em; margin-bottom: 1.25em;
} }
} }
/* for text-based browsers */ /* for text-based browsers */
.textonly { .textonly {
display: none; display: none;
} }
</style> </style>
</head> </head>
<body> <body>
<a href="" style="text-decoration: none;"> <a href="" style="text-decoration: none;">
<div class="refresh unhide-margin" style="bottom:revert;top:0;"></div> <div class="refresh unhide-margin" style="bottom:revert;top:0;">
</div>
</a> </a>
<div style="margin: 0.5em 1em;"> <div style="margin: 0.5em 1em;">
{% with person = people['broadcaster'] %} {% include 'users.html' %}
{% if person %}
<div class="group">
<div class="group-name">Broadcaster</div>
<div class="person">
<i class="camera" title="Broadcaster">🎥</i><span class="name" style="--name-color:#{{ person['colour'].hex() }};--name-bg-color:#{{ person['colour'].hex() }}20;">{{ person['nickname'] or default_nickname(person['token']) }}</span>{% if person['tripcode']['string'] %}<b class="textonly"> &lt;</b><b class="tripcode" style="background-color:#{{ person['tripcode']['background_colour'].hex() }};color:#{{ person['tripcode']['foreground_colour'].hex() }};">{{ person['tripcode']['string'] }}</b><b class="textonly">&gt;</b>{% endif %}
</div> </div>
</div> </body>
<br class="textonly">
{% endif %}
{% endwith %}
{% if broadcaster %}
<form action="{{ url_for('mod_users') }}" method="post">
<input type="hidden" name="noscript" value="1">
<input type="hidden" name="banned" value="1">
{% endif %}
<div class="group">
<div class="group-name">Users watching ({{ len(people['watching']) }})</div>
{% for person in people['watching'] %}
<div class="person">
{% if broadcaster %}<input type="checkbox" name="token[]" value="{{ person['token'] }}">{% endif %}<span class="name" style="--name-color:#{{ person['colour'].hex() }};--name-bg-color:#{{ person['colour'].hex() }}20;">{{ 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 %}<b class="textonly"> &lt;</b><b class="tripcode" style="background-color:#{{ person['tripcode']['background_colour'].hex() }};color:#{{ person['tripcode']['foreground_colour'].hex() }};">{{ person['tripcode']['string'] }}</b><b class="textonly">&gt;</b>{% endif %}{% endwith %}{% if person['token'] == token %}<span class="textonly"> </span><span class="textonly"> </span><span style="margin-left:0.5em;color:white;">(You)</span>{% endif %}
</div>
{% endfor %}
</div>
<br class="textonly">
<div class="group">
<div class="group-name">Users not watching ({{ len(people['not_watching']) }})</div>
{% for person in people['not_watching'] %}
<div class="person">
{% if broadcaster %}<input type="checkbox" name="token[]" value="{{ person['token'] }}">{% endif %}<span class="name" style="--name-color:#{{ person['colour'].hex() }};--name-bg-color:#{{ person['colour'].hex() }}20;">{{ 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 %}<b class="textonly"> &lt;</b><b class="tripcode" style="background-color:#{{ person['tripcode']['background_colour'].hex() }};color:#{{ person['tripcode']['foreground_colour'].hex() }};">{{ person['tripcode']['string'] }}</b><b class="textonly">&gt;</b>{% endif %}{% endwith %}{% if person['token'] == token %}<span class="textonly"> </span><span style="margin-left:0.5em;color:white;">(You)</span>{% endif %}
</div>
{% endfor %}
</div>
<br class="textonly">
{% if broadcaster %}
<button>Ban</button>
</form>
<div style="margin:1.75em 0 1.5em 0;border-bottom:1px solid #3f3f3f;"></div>
<form action="{{ url_for('mod_users') }}" method="post">
<input type="hidden" name="noscript" value="1">
<input type="hidden" name="banned" value="0">
<div class="group-name">Banned ({{ len(people['banned']) }})</div>
<div class="group">
{% for person in people['banned'] %}
<div class="person">
<input type="checkbox" name="token[]" value="{{ person['token'] }}"><span class="name" style="--name-color:#{{ person['colour'].hex() }};--name-bg-color:#{{ person['colour'].hex() }}20;">{{ 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 %}<b class="textonly"> &lt;</b><b class="tripcode" style="background-color:#{{ person['tripcode']['background_colour'].hex() }};color:#{{ person['tripcode']['foreground_colour'].hex() }};">{{ person['tripcode']['string'] }}</b><b class="textonly">&gt;</b>{% endif %}{% endwith %}
</div>
{% endfor %}
</div>
<button>Unban</button>
</form>
{% endif %}
</div>
</body>
</html> </html>

52
website/templates/users.html ノーマルファイル
ファイルの表示

@ -0,0 +1,52 @@
{% with person = people['broadcaster'] %}
{% if person %}
<div class="group">
<div class="group-name">Broadcaster</div>
<div class="person">
{% include 'person.html' %}
</div>
</div>
<br class="textonly">
{% endif %}
{% endwith %}
{% if broadcaster %}
<form action="{{ url_for('mod_users') }}" method="post">
<input type="hidden" name="noscript" value="0">
<input type="hidden" name="banned" value="1">
{% endif %}
<div class="group">
<div class="group-name">Users watching ({{ len(people['watching']) }})</div>
{% for person in people['watching'] %}
<div class="person">
{% include 'person.html' %}
</div>
{% endfor %}
</div>
<br class="textonly">
<div class="group">
<div class="group-name">Users not watching ({{ len(people['not_watching']) }})</div>
{% for person in people['not_watching'] %}
<div class="person">
{% include 'person.html' %}
</div>
{% endfor %}
</div>
<br class="textonly">
{% if broadcaster %}
<button>Ban</button>
</form>
<div style="margin:1.75em 0 1.5em 0;border-bottom:1px solid #3f3f3f;"></div>
<form action="{{ url_for('mod_users') }}" method="post">
<input type="hidden" name="noscript" value="0">
<input type="hidden" name="banned" value="0">
<div class="group-name">Banned ({{ len(people['banned']) }})</div>
<div class="group">
{% for person in people['banned'] %}
<div class="person">
{% include 'person.html' %}
</div>
{% endfor %}
</div>
<button>Unban</button>
</form>
{% endif %}