ninya9k
/
anonstream
1
1
フォーク 0
コード イシュー プルリクエスト プロジェクト リリース アクティビティ

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

このコミットが含まれているのは:
n9k 2021-07-19 06:28:00 +00:00
親 ab0356d0ab
コミット c30e2c16ae
14個のファイルの変更、1140行の追加、1046行の削除
統計情報を表示 Patchファイルをダウンロード Diffファイルをダウンロード すべてのファイルを展開 すべてのファイルを折り畳む

27
website/concatenate.py
ファイルの表示

@ -18,9 +18,9 @@ def resolve_segment_offset(segment_offset=1):
return 0
return _segment_number(segment)
def get_next_segment(after, start_segment):
def get_next_segment(after, start_segment, token=None):
if not is_online():
raise SegmentUnavailable(f'stream went offline')
raise SegmentUnavailable(f'stream went offline', token)
start = time.time()
while True:
time.sleep(0.5)
@ -43,33 +43,36 @@ def get_next_segment(after, start_segment):
if time.time() - start >= STREAM_TIMEOUT():
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:
raise SegmentUnavailable(f'timeout waiting for start segment {start_segment}')
raise SegmentUnavailable(f'timeout waiting for start segment {start_segment}', token)
else:
raise SegmentUnavailable(f'timeout searching after {after}')
raise SegmentUnavailable(f'timeout searching after {after}', token)
class SegmentUnavailable(Exception):
pass
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.token = token
self.segment = SEGMENT_INIT if skip_init_segment else None
def __iter__(self):
return 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
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
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)
self.segment_hook = segment_hook or (lambda n: None)
# 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)
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.segment_read_offset = 0
@ -89,14 +92,14 @@ class ConcatenatedSegments:
chunk = b''
while True:
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:
with open(os.path.join(SEGMENTS_DIR, self.segment), 'rb') as fp:
fp.seek(self.segment_read_offset)
chunk_chunk = fp.read(n - len(chunk))
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)
chunk += chunk_chunk
@ -137,7 +140,7 @@ class ConcatenatedSegments:
def _corrupt(self, n):
# TODO: make this corrupt more reliably (maybe it has to follow a full segment?)
# Doesn't corrupt when directly after init.mp4
print('ConcatenatedSegments._corrupt')
print('ConcatenatedSegments._corrupt', self.token)
self.corrupt_hook()
self.close()
try:

1
website/constants.py
ファイルの表示

@ -17,7 +17,6 @@ CONFIG_FILE = os.path.join(ROOT, 'config.toml')
with open(CONFIG_FILE) as 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
VIEW_COUNTING_PERIOD = 30 # count views from the last x seconds

3
website/routes.py
ファイルの表示

@ -150,6 +150,7 @@ def segments():
start_number = resolve_segment_offset()
try:
concatenated_segments = ConcatenatedSegments(start_number=start_number,
token=token,
segment_hook=lambda n: viewership.view_segment(n, token, check_exists=False),
corrupt_hook=lambda: viewership.video_was_corrupted.add(token), # lock?
should_close_connection=should_close_connection)
@ -401,7 +402,7 @@ def add_header(response):
def debug():
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):
def default(self, obj):
if isinstance(obj, bytes):

2
website/static/platform.css
ファイルの表示

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

233
website/templates/chat-iframe.html
ファイルの表示

@ -4,15 +4,34 @@
<meta http-equiv="conent-security-policy" content="default-src 'none'">
{% if not debug %}<meta http-equiv="refresh" content="8">{% endif %}
<style>
body {margin: 0 0.5em;min-height: calc(100vh - 1em);}
#messages {transform: scaleX(-1);}
form {margin: 0;}
.inline-block {display: inline-block;}
.rotate {transform: rotate(-180deg);}
.reverse {direction: rtl;}
.comment {color:white;padding:3px 2px;overflow:hidden;}
.comment:hover{background-color:#333;border-radius:4px;}
body {
margin: 0 0.5em;
min-height: calc(100vh - 1em);
}
#messages {
transform: scaleX(-1);
}
form {
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 {
font-weight: normal;
font-variant: all-small-caps;
@ -25,18 +44,35 @@
.censored:hover {
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;}
.name {color:var(--name-color);font-weight:bold;unicode-bidi:isolate;}
.date {
color: gray;
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{
background-color: var(--name-bg-color);
text-shadow: 0 0 1px {{ background_colour }};
text-shadow: 0 0 1px #{{ background_colour.hex() }};
border-radius: 2px;
padding: 2px;
margin: -2px;
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 {
font-weight: normal;
margin-left: 0.5em;
@ -48,21 +84,54 @@
display: inline-block;
cursor: default;
}
.barrier {display:inline-block;margin-right:0.5em;}
.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;}
.barrier {
display: inline-block;
margin-right: 0.5em;
}
.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 %}
#users {color:white;}
.group {margin-bottom:1.5em;}
.group-name {margin-bottom:0.25em;}
.person {margin: 0 0 2px 0.5em;}
#users {
color: #f0f0f0;
}
.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 %}
input[type="submit"] {padding:0 0.25em;margin-bottom:0.5em;}
input[type="submit"] {
padding: 0 0.25em;
margin-bottom: 0.5em;
}
.refresh {
color: white;
color: #f0f0f0;
background-color: gray;
position: sticky;
/*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;
margin: 0;
}
.refresh::after {content: "Manual refresh required";}
input[type="checkbox"]{vertical-align:middle;}
.refresh::after {
content: "Manual refresh required";
}
input[type="checkbox"] {
vertical-align: middle;
}
.unhide {
animation: unhide 0s forwards 30s;
height: 0;
@ -103,8 +176,9 @@
margin-bottom: 1.25em;
}
}
td{width:100vw;}
td {
width: 100vw;
}
/* for text-based browsers */
.textonly {
display: none;
@ -119,112 +193,51 @@
<br>
<div>== Chat ==</div>
</div>
<div id="messages">
{% if broadcaster %}
<div id="messages">
{% if broadcaster %}
<form action="{{ url_for('mod_chat') }}" method="post">
<div class="reverse">
<input class="rotate" type="submit" name="ban" value="Ban">
<input class="rotate" type="submit" name="hide" value="Hide">
<input class="rotate" type="submit" name="ban_purge" value="Ban and hide all">
</div>
{% endif %}
{% endif %}
<!-- TODO: mobile tooltip / title -->
<table border="1" frame="void" rules="rows" style="border-collapse:separate;border-spacing:0 2px;">
<tbody>
{% for message in messages %}
<tr>
{% 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 %}
<td class="comment rotate">
{% 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 %}
{% include 'comment.html' %}
</td>
{% endif %}
</tr>
{% endfor %}
</tbody>
</table>
{% if broadcaster %}
{% if broadcaster %}
</form>
{% endif %}
<a href="" style="text-decoration: none;"><div class="refresh unhide rotate"></div></a>
</div>
{% if include_user_list %}
<div class="textonly">== List of users ==</div>
<div id="users" style="overflow: hidden;height:0;">
<a href="" style="text-decoration: none;">
{% endif %}
<a href="" style="text-decoration:none;">
<div class="refresh unhide rotate"></div>
</a>
</div>
{% if include_user_list %}
<div class="textonly">== List of users ==</div>
<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>
</a>
<div style="margin: 0.25em 1em;">
{% with person = people['broadcaster'] %}
{% 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 style="margin: 0.5em 1em;">
{% include 'users.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">
{% 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>
</html>

8
website/templates/comment-iframe.html
ファイルの表示

@ -5,11 +5,11 @@
<style>
body {
margin-left:0.5em;
color: white;
color: #f0f0f0;
}
input {
background-color: inherit;
color: white;
color: #f0f0f0;
}
input#message {
border: 1px solid #999 !important;
@ -98,7 +98,7 @@
}
#note {
font-weight: bold;
color: white;
color: #f0f0f0;
animation: hide 0s forwards 2s;
position: absolute;
top: 2.75rem;
@ -251,7 +251,7 @@
<div>
<div class="note-space">
<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>
</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 %}

3
website/templates/secret-club.html
ファイルの表示

@ -19,6 +19,7 @@
<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%);">
</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>
</html>

67
website/templates/stream-info-iframe.html
ファイルの表示

@ -4,11 +4,13 @@
<noscript><meta http-equiv="refresh" content="20"></noscript>
<link href="/static/external/pure-min.css" rel="stylesheet">
<style>
html {color: white;}
body {
color: #f0f0f0;
}
#stream-title {
display:inline-block;
width:calc(100% - 20px - 6.75em);
font-size:150%;
display: inline-block;
width: calc(100% - 20px - 6.75em);
font-size: 150%;
font-weight: bold;
margin-bottom: 0.375em;
word-wrap: break-word;
@ -18,18 +20,33 @@
width: 0.625em;
border-radius: 50%;
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 {
margin-top:-1pt;
margin-top: -1pt;
}
{% if stream_uptime != None %}
.digit {overflow: hidden;display:inline-block;height:2em;}
.digit div {height:2em;}
.digit {
overflow: hidden;
display: inline-block;
height: 2em;
}
.digit div {
height:2em;
}
.seconds-ones {animation: count10 10s 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-hundreds {width: 0;overflow: hidden;animation: unhide 0s forwards {{ 360000 - stream_uptime }}s;}
.timer {animation: hide 0s forwards {{ 3600000 - stream_uptime }}s;}
.timer-overflow {width: 0; overflow: hidden; animation: unhide 0s forwards {{ 3600000 - stream_uptime }}s;}
.timer {
animation: hide 0s forwards {{ 3600000 - stream_uptime }}s;
}
.timer-overflow {
width: 0;
overflow: hidden;
animation: unhide 0s forwards {{ 3600000 - stream_uptime }}s;
}
@keyframes hide {
to {width: 0;height:0;visibility:hidden;}
to {
width: 0;
height: 0;
visibility: hidden;
}
}
@keyframes unhide {
to {width: revert;}
to {
width: revert;
}
}
@keyframes count10 {
0% {margin-top: -0em;}
@ -97,8 +126,12 @@
animation-duration: 20s;
}
@keyframes radial {
from {stroke-dashoffset: 0;}
to {stroke-dashoffset: 32;}
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 32;
}
}
{% endif %}
</style>

119
website/templates/users-iframe.html
ファイルの表示

@ -1,22 +1,51 @@
<html>
<head>
{% if not debug %}<meta http-equiv="refresh" content="8">{% endif %}
<style>
body {color:white;margin-top: 0;margin-bottom: 0;}
.group {margin-bottom:1.5em;}
.group-name {margin-bottom:0.25em;}
.person {margin: 0 0 2px 0.5em;}
.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;}
<head>
{% if not debug %}<meta http-equiv="refresh" content="8">{% endif %}
<style>
body {
color: #f0f0f0;
margin-top: 0;
margin-bottom: 0;
}
.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{
background: 4px var(--name-bg-color);
text-shadow: 0 0 1px {{ background_colour }};
text-shadow: 0 0 1px #{{ background_colour.hex() }};
border-radius: 2px;
padding: 2px 4px;
margin: -2px -4px;
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 {
font-weight: normal;
margin-left: 0.5em;
@ -32,7 +61,7 @@
margin: 0;
}
.refresh {
color: white;
color: #f0f0f0;
background-color: gray;
position: sticky;
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;
margin: 0;
}
.unhide-margin {
animation: unhide-margin 0s forwards 30s;
height: 0;
@ -59,70 +87,19 @@
margin-bottom: 1.25em;
}
}
/* for text-based browsers */
.textonly {
display: none;
}
</style>
</head>
<body>
</style>
</head>
<body>
<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>
<div style="margin: 0.5em 1em;">
{% with person = people['broadcaster'] %}
{% 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 %}
{% include 'users.html' %}
</div>
</div>
<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>
</body>
</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 %}