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);

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

@ -1,230 +1,243 @@
<html>
<head>
<meta charset="utf-8">
<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;}
.censored {
font-weight: normal;
font-variant: all-small-caps;
font-family: monospace, monospace;
background: black;
color: transparent;
padding: 1px;
cursor: default;
}
.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;}
<head>
<meta charset="utf-8">
<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: #f0f0f0;
padding: 3px;
overflow: hidden;
}
.comment:hover{
background-color: #333;
border-radius: 4px;
}
.censored {
font-weight: normal;
font-variant: all-small-caps;
font-family: monospace, monospace;
background: black;
color: transparent;
padding: 1px;
cursor: default;
}
.censored:hover {
color: revert;
}
.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.hex() }};
border-radius: 2px;
padding: 2px;
margin: -2px;
cursor: default;
}
sup {
margin-right: 0.125em;
font-size: 90%;
font-family: monospace;
}
.tripcode {
font-weight: normal;
margin-left: 0.5em;
padding: 0 5px;
border-radius: 6px;
font-size: 90%;
font-family: monospace;
vertical-align: middle;
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;
}
{% if include_user_list %}
#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 %}
.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 }};
border-radius: 2px;
padding: 2px;
margin: -2px;
cursor: default;
}
sup {margin-right: 0.125em;font-size: 90%;font-family:monospace;}
.tripcode {
font-weight: normal;
margin-left: 0.5em;
padding: 0 5px;
border-radius: 6px;
font-size: 90%;
font-family: monospace;
vertical-align: middle;
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;}
{% 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;}
{% endif %}
input[type="submit"] {padding:0 0.25em;margin-bottom:0.5em;}
.refresh {
color: white;
background-color: gray;
position: sticky;
/*top: 100vh;*/ /* (when upside down etc.) placement is correct with top when there is no scrollbar */
bottom: 0; /* (when upside down etc.) placement is correct with bottom when there is a scrollbar */
padding: 1em;
text-align: center;
font-weight: bold;
border-radius: 4px;
box-shadow: 0px 2px 4px black;
margin: 0;
}
.refresh::after {content: "Manual refresh required";}
input[type="checkbox"]{vertical-align:middle;}
.unhide {
animation: unhide 0s forwards 30s;
height: 0;
padding: 0;
visibility: hidden;
}
.unhide-margin {
animation: unhide-margin 0s forwards 30s;
height: 0;
padding: 0;
visibility: hidden;
}
@keyframes unhide {
to {
height: revert;
padding: 1em;
visibility: visible;
}
}
@keyframes unhide-margin {
to {
height: revert;
padding: 1em;
visibility: visible;
margin-bottom: 1.25em;
}
}
td{width:100vw;}
/* for text-based browsers */
.textonly {
display: none;
}
</style>
</head>
<body>
<div class="textonly">
<br>
<div><b>{{ stream_title }}</b></div>
<div>{{ stream_viewers }} viewer(s), {% if stream_uptime %}{{ stream_uptime }} uptime{% else %}offline{% endif %}</div>
<br>
<div>== Chat ==</div>
</div>
<div id="messages">
{% if broadcaster %}
<form action="{{ url_for('mod_chat') }}" method="post">
input[type="submit"] {
padding: 0 0.25em;
margin-bottom: 0.5em;
}
.refresh {
color: #f0f0f0;
background-color: gray;
position: sticky;
/*top: 100vh;*/ /* (when upside down etc.) placement is correct with top when there is no scrollbar */
bottom: 0; /* (when upside down etc.) placement is correct with bottom when there is a scrollbar */
padding: 1em;
text-align: center;
font-weight: bold;
border-radius: 4px;
box-shadow: 0px 2px 4px black;
margin: 0;
}
.refresh::after {
content: "Manual refresh required";
}
input[type="checkbox"] {
vertical-align: middle;
}
.unhide {
animation: unhide 0s forwards 30s;
height: 0;
padding: 0;
visibility: hidden;
}
.unhide-margin {
animation: unhide-margin 0s forwards 30s;
height: 0;
padding: 0;
visibility: hidden;
}
@keyframes unhide {
to {
height: revert;
padding: 1em;
visibility: visible;
}
}
@keyframes unhide-margin {
to {
height: revert;
padding: 1em;
visibility: visible;
margin-bottom: 1.25em;
}
}
td {
width: 100vw;
}
/* for text-based browsers */
.textonly {
display: none;
}
</style>
</head>
<body>
<div class="textonly">
<br>
<div><b>{{ stream_title }}</b></div>
<div>{{ stream_viewers }} viewer(s), {% if stream_uptime %}{{ stream_uptime }} uptime{% else %}offline{% endif %}</div>
<br>
<div>== Chat ==</div>
</div>
<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">
<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 %}
<!-- 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>
{% 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 %}
</td>
{% endif %}
</tr>
{% endfor %}
</tbody>
</table>
{% 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;">
<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>
</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>
{% 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>
{% else %}
<td class="comment rotate">
{% include 'comment.html' %}
</td>
{% endif %}
</tr>
{% endfor %}
</div>
<button>Unban</button>
</form>
{% endif %}
</div>
</div>
{% endif %}
</body>
</tbody>
</table>
{% 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;">
<div class="refresh unhide-margin" style="bottom:revert;top:0;"></div>
</a>
<div style="margin: 0.5em 1em;">
{% include 'users.html' %}
</div>
</div>
{% endif %}
</body>
</html>

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

@ -1,34 +1,34 @@
<html>
<head>
<style>
body {
margin-top: 0;
margin-bottom: 0;
color: #f0f0f0;
}
a, .pseudolink {
color: #a0a0a0;
text-decoration: none;
}
a:hover, .pseudolink:hover {
color: #00b6f0;
}
.pseudolink {
background: none;
border: none;
cursor: pointer;
padding: 0;
font-size: 100%;
}
</style>
</head>
<body>
<form method="post" target="_parent">
<input type="hidden" name="confirm" value="1">
<input type="hidden" name="token" value="{{ token }}">
<input type="hidden" name="nickname" value="{{ nickname }}">
<input type="hidden" name="remove-tripcode" value="1">
<div>The stream is in secret club mode. Changing your tripcode would kick you out of the secret club. <a href="{{ url_for('comment_iframe', token=token) }}">Click here</a> to stay in the secret club, or <input type="submit" class="pseudolink" value="click here"> to get kicked out.</div>
</form>
</body>
<head>
<style>
body {
margin-top: 0;
margin-bottom: 0;
color: #f0f0f0;
}
a, .pseudolink {
color: #a0a0a0;
text-decoration: none;
}
a:hover, .pseudolink:hover {
color: #00b6f0;
}
.pseudolink {
background: none;
border: none;
cursor: pointer;
padding: 0;
font-size: 100%;
}
</style>
</head>
<body>
<form method="post" target="_parent">
<input type="hidden" name="confirm" value="1">
<input type="hidden" name="token" value="{{ token }}">
<input type="hidden" name="nickname" value="{{ nickname }}">
<input type="hidden" name="remove-tripcode" value="1">
<div>The stream is in secret club mode. Changing your tripcode would kick you out of the secret club. <a href="{{ url_for('comment_iframe', token=token) }}">Click here</a> to stay in the secret club, or <input type="submit" class="pseudolink" value="click here"> to get kicked out.</div>
</form>
</body>
</html>

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

@ -1,260 +1,260 @@
<html>
<head>
<meta charset="utf-8">
<link href="/static/external/pure-min.css" rel="stylesheet">
<style>
body {
margin-left:0.5em;
color: white;
}
input {
background-color: inherit;
color: white;
}
input#message {
border: 1px solid #999 !important;
box-shadow: inset 0 1px 3px #555 !important;
width: calc(100% - 0.5em);
margin-bottom: 0.5em;
}
input#captcha {
width: calc(100% - 14em);
vertical-align: top;
padding: 0.375em;
display: inline-block;
box-shadow: none;
}
button {
position:absolute;
right:0.5em;
padding: 0.375em 1em !important;
}
form {
margin: 0;
}
input[type="image"] {
margin-top: 0.125em;
cursor: help;
}
.note-space {
display: inline-block;
}
input[type="checkbox"] {
display: none;
}
label[for="settings-toggle"] {
cursor: pointer;
font-size: 150%;
vertical-align: top;
margin-right: 0.125em;
display: inline;
}
{% with primary = 'settings' if show_settings else 'comment-box' %}
{% with secondary = 'comment-box' if show_settings else 'settings' %}
form#{{ secondary }} {
width:0;
height:0;
overflow:hidden;
}
form#{{ secondary }} button {
display: none;
}
input#settings-toggle:checked ~ form#{{ primary }} {
width:0;
height:0;
overflow:hidden;
}
input#settings-toggle:checked ~ form#{{ primary }} button {
display: none;
}
input#settings-toggle:checked ~ form#{{ secondary }} {
width:revert;
height:revert;
overflow:revert;
}
input#settings-toggle:checked ~ form#{{ secondary }} button {
display: revert;
}
{% endwith %}
{% endwith %}
input#nickname {
padding: 0.25em;
display: inline-block;
box-shadow: none;
border: 1px solid #999 !important;
margin-bottom: 0.5em;
}
{% if note %}
@keyframes hide {
to {
visibility: hidden;
overflow: hidden;
}
}
@keyframes unhide {
to {
visibility: visible;
}
}
#note {
font-weight: bold;
color: white;
animation: hide 0s forwards 2s;
position: absolute;
top: 2.75rem;
font-size: 110%;
}
.note-space {
<head>
<meta charset="utf-8">
<link href="/static/external/pure-min.css" rel="stylesheet">
<style>
body {
margin-left:0.5em;
color: #f0f0f0;
}
input {
background-color: inherit;
color: #f0f0f0;
}
input#message {
border: 1px solid #999 !important;
box-shadow: inset 0 1px 3px #555 !important;
width: calc(100% - 0.5em);
margin-bottom: 0.5em;
}
input#captcha {
width: calc(100% - 14em);
vertical-align: top;
padding: 0.375em;
display: inline-block;
box-shadow: none;
}
button {
position:absolute;
right:0.5em;
padding: 0.375em 1em !important;
}
form {
margin: 0;
}
input[type="image"] {
margin-top: 0.125em;
cursor: help;
}
.note-space {
display: inline-block;
}
input[type="checkbox"] {
display: none;
}
label[for="settings-toggle"] {
cursor: pointer;
font-size: 150%;
vertical-align: top;
margin-right: 0.125em;
display: inline;
}
{% with primary = 'settings' if show_settings else 'comment-box' %}
{% with secondary = 'comment-box' if show_settings else 'settings' %}
form#{{ secondary }} {
width:0;
height:0;
overflow:hidden;
}
form#{{ secondary }} button {
display: none;
}
input#settings-toggle:checked ~ form#{{ primary }} {
width:0;
height:0;
overflow:hidden;
}
input#settings-toggle:checked ~ form#{{ primary }} button {
display: none;
}
input#settings-toggle:checked ~ form#{{ secondary }} {
width:revert;
height:revert;
overflow:revert;
}
input#settings-toggle:checked ~ form#{{ secondary }} button {
display: revert;
}
{% endwith %}
{% endwith %}
input#nickname {
padding: 0.25em;
display: inline-block;
box-shadow: none;
border: 1px solid #999 !important;
margin-bottom: 0.5em;
}
{% if note %}
@keyframes hide {
to {
visibility: hidden;
animation: unhide 0s forwards 2s;
overflow: hidden;
}
}
@keyframes unhide {
to {
visibility: visible;
}
}
#note {
font-weight: bold;
color: #f0f0f0;
animation: hide 0s forwards 2s;
position: absolute;
top: 2.75rem;
font-size: 110%;
}
.note-space {
visibility: hidden;
animation: unhide 0s forwards 2s;
}
{% endif %}
.smalltext {
font-size: 85%;
}
#password, #cancel-password {
display: none;
}
#password-toggle:checked ~ #password {
display: revert;
}
#password-toggle:checked ~ label[for="password-toggle"] #cancel-password {
display: revert;
}
#password-toggle:checked ~ label[for="password-toggle"] #tripcode-container {
display: none;
}
#password-toggle:checked ~ label[for="password-toggle"] #remove-tripcode {
display: none;
}
#password-toggle:checked ~ label[for="blank-tripcode-toggle"] {
display: none;
}
#undo-remove-tripcode {
display: none;
}
#blank-tripcode {
display: none;
}
#blank-tripcode-toggle:checked ~ #blank-tripcode {
display: revert;
}
#blank-tripcode-toggle:checked ~ label[for="blank-tripcode-toggle"] #undo-remove-tripcode {
display: revert;
}
#blank-tripcode-toggle:checked ~ label[for="password-toggle"] {
display: none;
}
#blank-tripcode-toggle:checked ~ label[for="blank-tripcode-toggle"] #remove-tripcode {
display: none;
}
#to-settings::after {
content: "⚙️";
}
#to-chat::after {
content: "💬";
}
.empty-tripcode-container::after {
content: "(no tripcode)";
}
#cancel-password::after {
content: "×";
}
#remove-tripcode::after {
content: "×";
}
#blank-tripcode::after {
content: "(cleared)";
}
#undo-remove-tripcode::after {
content: "undo";
}
#tripcode {
font-weight: normal;
padding: 0 5px;
border-radius: 6px;
font-size: 90%;
font-family: monospace;
vertical-align: middle;
display: inline-block;
cursor: pointer;
}
.pseudolink {
color: #a0a0a0;
cursor: pointer;
}
.pseudolink:active, .pseudolink:hover {
color: #00b6f0;
}
/* for text-based browsers */
.textonly {
display: none;
}
</style>
</head>
<body>
<input type="checkbox" id="settings-toggle">
<form id="comment-box" class="pure-form" action="{{ url_for('comment') }}" method="post">
<input type="hidden" name="token" value="{{ token }}">
<input type="hidden" name="nonce" value="{{ nonce }}">
<div class="textonly">Send a message:</div>
<input id="message" class="pure-u-1 smalltext" name="message" maxlength="250" placeholder="Send a message" value="{{ message }}">
<button style="height:30px;font-weight:bold;bottom:1.8em;" class="pure-button pure-button-primary">Chat</button>
<div class="note-space">
<label for="settings-toggle" id="to-settings"></label>
{% if captcha %}
<input type="image" formaction="{{ url_for('comment_iframe') }}" title="Click for a new captcha" src="{{ captcha['src'] }}" alt="Your browser doesn't support the data URI scheme."></input>
<input name="captcha-ciphertext" type="hidden" value="{{ captcha['ciphertext'] }}">
<div class="textonly">Captcha:</div>
<input id="captcha" class="smalltext" style="height:30;" name="captcha" placeholder="Captcha">
{% endif %}
.smalltext {
font-size: 85%;
}
#password, #cancel-password {
display: none;
}
#password-toggle:checked ~ #password {
display: revert;
}
#password-toggle:checked ~ label[for="password-toggle"] #cancel-password {
display: revert;
}
#password-toggle:checked ~ label[for="password-toggle"] #tripcode-container {
display: none;
}
#password-toggle:checked ~ label[for="password-toggle"] #remove-tripcode {
display: none;
}
#password-toggle:checked ~ label[for="blank-tripcode-toggle"] {
display: none;
}
#undo-remove-tripcode {
display: none;
}
#blank-tripcode {
display: none;
}
#blank-tripcode-toggle:checked ~ #blank-tripcode {
display: revert;
}
#blank-tripcode-toggle:checked ~ label[for="blank-tripcode-toggle"] #undo-remove-tripcode {
display: revert;
}
#blank-tripcode-toggle:checked ~ label[for="password-toggle"] {
display: none;
}
#blank-tripcode-toggle:checked ~ label[for="blank-tripcode-toggle"] #remove-tripcode {
display: none;
}
#to-settings::after {
content: "⚙️";
}
#to-chat::after {
content: "💬";
}
.empty-tripcode-container::after {
content: "(no tripcode)";
}
#cancel-password::after {
content: "×";
}
#remove-tripcode::after {
content: "×";
}
#blank-tripcode::after {
content: "(cleared)";
}
#undo-remove-tripcode::after {
content: "undo";
}
#tripcode {
font-weight: normal;
padding: 0 5px;
border-radius: 6px;
font-size: 90%;
font-family: monospace;
vertical-align: middle;
display: inline-block;
cursor: pointer;
}
.pseudolink {
color: #a0a0a0;
cursor: pointer;
}
.pseudolink:active, .pseudolink:hover {
color: #00b6f0;
}
/* for text-based browsers */
.textonly {
display: none;
}
</style>
</head>
<body>
<input type="checkbox" id="settings-toggle">
<form id="comment-box" class="pure-form" action="{{ url_for('comment') }}" method="post">
<input type="hidden" name="token" value="{{ token }}">
<input type="hidden" name="nonce" value="{{ nonce }}">
<div class="textonly">Send a message:</div>
<input id="message" class="pure-u-1 smalltext" name="message" maxlength="250" placeholder="Send a message" value="{{ message }}">
<button style="height:30px;font-weight:bold;bottom:1.8em;" class="pure-button pure-button-primary">Chat</button>
<div class="note-space">
<label for="settings-toggle" id="to-settings"></label>
{% if captcha %}
<input type="image" formaction="{{ url_for('comment_iframe') }}" title="Click for a new captcha" src="{{ captcha['src'] }}" alt="Your browser doesn't support the data URI scheme."></input>
<input name="captcha-ciphertext" type="hidden" value="{{ captcha['ciphertext'] }}">
<div class="textonly">Captcha:</div>
<input id="captcha" class="smalltext" style="height:30;" name="captcha" placeholder="Captcha">
{% endif %}
</div>
</form>
<br class="textonly">
<form id="settings" action="{{ url_for('settings') }}" method="post">
<input type="hidden" name="token" value="{{ token }}">
<div class="textonly">Nickname:</div>
<input id="nickname" style="width:60%;font-weight:bold;color:#{{ viewer['colour'].hex() }};" name="nickname" maxlength="24" placeholder="{{ default }}" value="{{ '' if nickname == None else nickname }}">
<br class="textonly">
<span class="textonly">Set tripcode:</span>
<input type="checkbox" id="password-toggle" name="set-tripcode">
<br class="textonly">
<span class="textonly">Remove tripcode:</span>
<input type="checkbox" id="blank-tripcode-toggle" name="remove-tripcode">
<div class="textonly">Password (to set tripcode):</div>
<input id="password" type="password" style="width:30%;" name="password" maxlength="256" placeholder="Password">
{% if viewer['tripcode']['string'] %}
<label for="password-toggle">
<span id="tripcode-container">
<b class="textonly">&lt;</b><b id="tripcode" style="background-color:#{{ viewer['tripcode']['background_colour'].hex() }};color:#{{ viewer['tripcode']['foreground_colour'].hex() }};">{{ viewer['tripcode']['string'] }}</b><b class="textonly">&gt;</b>
</span>
</label>
<span id="blank-tripcode"></span>
<label for="blank-tripcode-toggle">
<span class="pseudolink" id="remove-tripcode"></span>
<span class="pseudolink" id="undo-remove-tripcode"></span>
</label>
<label for="password-toggle">
<span class="pseudolink" id="cancel-password"></span>
</label>
{% else %}
<label for="password-toggle">
<span class="pseudolink empty-tripcode-container" id="tripcode-container"></span>
<span class="pseudolink" id="cancel-password"></span>
</label>
{% endif %}
<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>
</div>
</div>
</form>
<div id="note">{{ note }}</div>
</body>
</div>
</form>
<br class="textonly">
<form id="settings" action="{{ url_for('settings') }}" method="post">
<input type="hidden" name="token" value="{{ token }}">
<div class="textonly">Nickname:</div>
<input id="nickname" style="width:60%;font-weight:bold;color:#{{ viewer['colour'].hex() }};" name="nickname" maxlength="24" placeholder="{{ default }}" value="{{ '' if nickname == None else nickname }}">
<br class="textonly">
<span class="textonly">Set tripcode:</span>
<input type="checkbox" id="password-toggle" name="set-tripcode">
<br class="textonly">
<span class="textonly">Remove tripcode:</span>
<input type="checkbox" id="blank-tripcode-toggle" name="remove-tripcode">
<div class="textonly">Password (to set tripcode):</div>
<input id="password" type="password" style="width:30%;" name="password" maxlength="256" placeholder="Password">
{% if viewer['tripcode']['string'] %}
<label for="password-toggle">
<span id="tripcode-container">
<b class="textonly">&lt;</b><b id="tripcode" style="background-color:#{{ viewer['tripcode']['background_colour'].hex() }};color:#{{ viewer['tripcode']['foreground_colour'].hex() }};">{{ viewer['tripcode']['string'] }}</b><b class="textonly">&gt;</b>
</span>
</label>
<span id="blank-tripcode"></span>
<label for="blank-tripcode-toggle">
<span class="pseudolink" id="remove-tripcode"></span>
<span class="pseudolink" id="undo-remove-tripcode"></span>
</label>
<label for="password-toggle">
<span class="pseudolink" id="cancel-password"></span>
</label>
{% else %}
<label for="password-toggle">
<span class="pseudolink empty-tripcode-container" id="tripcode-container"></span>
<span class="pseudolink" id="cancel-password"></span>
</label>
{% endif %}
<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>
</div>
</div>
</form>
<div id="note">{{ note }}</div>
</body>
</html>

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 %}

326
website/templates/index.html
ファイルの表示

@ -1,173 +1,173 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/static/platform.css" rel="stylesheet">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/static/platform.css" rel="stylesheet">
{% if use_videojs %}
<!-- https://unpkg.com/video.js@7.12.1/dist/video-js.min.css -->
<link href="/static/external/video-js.min.css" rel="stylesheet">
<!-- https://unpkg.com/video.js@7.12.1/dist/video.min.js -->
<script src="/static/external/video.min.js"></script>
<!-- https://unpkg.com/@videojs/http-streaming@2.7.1/dist/videojs-http-streaming.min.js -->
<script src="/static/external/videojs-http-streaming.min.js"></script>
{% endif %}
<!-- https://cdn.socket.io/4.0.1/socket.io.min.js -->
<!-- <script src="/static/external/socket.io.min.js"></script> -->
<style>
.two-thirds, .one-third {
width: 100%;
}
@media screen and (min-width:48em) {
.two-thirds {
width: 66.6667%;
}
.one-third {
width: 33.3333%;
}
}
</style>
<noscript>
<style>
{% if use_videojs %}
<!-- https://unpkg.com/video.js@7.12.1/dist/video-js.min.css -->
<link href="/static/external/video-js.min.css" rel="stylesheet">
<!-- https://unpkg.com/video.js@7.12.1/dist/video.min.js -->
<script src="/static/external/video.min.js"></script>
<!-- https://unpkg.com/@videojs/http-streaming@2.7.1/dist/videojs-http-streaming.min.js -->
<script src="/static/external/videojs-http-streaming.min.js"></script>
#videojs {
display: none;
}
{% endif %}
<!-- https://cdn.socket.io/4.0.1/socket.io.min.js -->
<!-- <script src="/static/external/socket.io.min.js"></script> -->
<style>
.two-thirds, .one-third {
width: 100%;
}
@media screen and (min-width:48em) {
.two-thirds {
width: 66.6667%;
}
.one-third {
width: 33.3333%;
}
}
</style>
<noscript>
<style>
{% if use_videojs %}
#videojs {
display: none;
}
{% endif %}
#users-container {
height: 0;
overflow: hidden;
}
#users-toggle:checked ~ #chat-window #users-container {
height: revert;
overflow: revert;
}
#users-toggle:checked ~ #chat-window #chat-container {
height: 0;
overflow: hidden;
}
#users-toggle:checked + .banner form[target="chat"] {
display: none;
}
#users-toggle:checked + .banner form[target="users"] {
display: revert;
}
/* noscript acting weird with svg */
#svg-container {
display: none;
}
</style>
</noscript>
</head>
<body class="dark-theme" style="margin:0;">
<div style="display:flex;flex-flow:row wrap;">
<div class="two-thirds">
<div id="stream">
#users-container {
height: 0;
overflow: hidden;
}
#users-toggle:checked ~ #chat-window #users-container {
height: revert;
overflow: revert;
}
#users-toggle:checked ~ #chat-window #chat-container {
height: 0;
overflow: hidden;
}
#users-toggle:checked + .banner form[target="chat"] {
display: none;
}
#users-toggle:checked + .banner form[target="users"] {
display: revert;
}
/* noscript acting weird with svg */
#svg-container {
display: none;
}
</style>
</noscript>
</head>
<body class="dark-theme" style="margin:0;">
<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 -->
<video id="videojs" class="video-js vjs-default-skin vjs-big-play-centered" data-setup='{"controls": true, "autoplay": true }'>
<source src="{{ url_for('playlist', token=token) }}" type="application/x-mpegURL">
</video>
<noscript>
<video controls autoplay src="{{ url_for('segments', segment=start_number, token=token) }}"></video>
</noscript>
{% else %}
<input id="videojs-enabled" type="hidden" value="0">
<video controls autoplay src="{{ url_for('segments', segment=start_number, token=token) }}"></video>
{% endif %}
{% 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 -->
<video id="videojs" class="video-js vjs-default-skin vjs-big-play-centered" data-setup='{"controls": true, "autoplay": true }'>
<source src="{{ url_for('playlist', token=token) }}" type="application/x-mpegURL">
</video>
<noscript>
<video controls autoplay src="{{ url_for('segments', segment=start_number, token=token) }}"></video>
</noscript>
{% else %}
<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>
<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>
</div>
<div class="one-third">
<div id="chat-border">
<!-- TODO: mobile tooltip -->
<input id="users-toggle" type="checkbox" style="display: none;">
<div class="banner">
<div class="chat-banner-left">
<label for="users-toggle" title="Users in chat">
<div id="svg-container">
<svg class="users-logo" version="1.1" viewBox="0 0 20 20" x="0px" y="0px"><g><path fill-rule="evenodd" d="M7 2a4 4 0 00-1.015 7.87c-.098.64-.651 1.13-1.318 1.13A2.667 2.667 0 002 13.667V18h2v-4.333c0-.368.298-.667.667-.667.908 0 1.732-.363 2.333-.953.601.59 1.425.953 2.333.953.369 0 .667.299.667.667V18h2v-4.333A2.667 2.667 0 009.333 11c-.667 0-1.22-.49-1.318-1.13A4.002 4.002 0 007 2zM5 6a2 2 0 104 0 2 2 0 00-4 0z" clip-rule="evenodd"></path><path d="M14 11.83V18h4v-3.75c0-.69-.56-1.25-1.25-1.25a.75.75 0 01-.75-.75v-.42a3.001 3.001 0 10-2 0z"></path></g>
</svg>
</div>
<noscript><div class="users-logo"><img src="/static/external/users.png"></div></noscript>
</label>
</div>
<span>Stream chat</span>
<form target="chat" action="{{ url_for('chat_iframe', token=token) }}" method="get" style="float: right;margin: 0;width: 1em;">
<input id="token" type="hidden" name="token" value="{{ token }}">
<noscript><input type="hidden" name="users" value="0"></noscript>
<input type="checkbox" style="display:none;" name="debug">
<button class="hue-rotate" title="Refresh chat window" style="font-weight: bold;background: none;border: none;margin: 0;padding: 0;cursor: pointer;font-size: 100%;" type="submit" class="">🔄</button>
</form>
<form target="users" action="{{ url_for('users', token=token) }}" method="get" style="float: right;margin: 0;width: 1em;">
<input id="token" type="hidden" name="token" value="{{ token }}">
<input type="checkbox" style="display:none;" name="debug">
<button title="Refresh chat window" style="font-weight: bold;background: none;border: none;margin: 0;padding: 0;cursor: pointer;font-size: 100%;" type="submit" class="">🔄</button>
</form>
</div>
<div id="chat-window">
<div id="chat-container"><noscript><iframe id="chat" name="chat" src="{{ url_for('chat_iframe', token=token, users=0) }}"></iframe></noscript></div>
<div id="users-container"><noscript><iframe name="users" src="{{ url_for('users', token=token) }}"></iframe></noscript></div>
</div>
<iframe id="comment-box" style="height:97px;border-top:1px solid #434343;padding-top:0.5em;" src="{{ url_for('comment_iframe', token=token) }}"></iframe>
</div>
</div>
</div>
<div class="textonly">
<br>
<div>== Quick links for text-based browsers ==</div>
<div>Livestream: <a href="{{ url_for('segments', token=token) }}">{{ url_for('segments', token=token) }}</a></div>
<div>Chat: <a href="{{ url_for('chat_iframe', token=token) }}">{{ url_for('chat_iframe', token=token) }}</a></div>
<div>Comment box: <a href="{{ url_for('comment_iframe', token=token) }}">{{ url_for('comment_iframe', token=token) }}</a></div>
<div>If the stream is in secret club mode, the <i>token</i> component is necessary.</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>
</div>
<div class="one-third">
<div id="chat-border">
<!-- TODO: mobile tooltip -->
<input id="users-toggle" type="checkbox" style="display: none;">
<div class="banner">
<div class="chat-banner-left">
<label for="users-toggle" title="Users in chat">
<div id="svg-container">
<svg class="users-logo" version="1.1" viewBox="0 0 20 20" x="0px" y="0px"><g><path fill-rule="evenodd" d="M7 2a4 4 0 00-1.015 7.87c-.098.64-.651 1.13-1.318 1.13A2.667 2.667 0 002 13.667V18h2v-4.333c0-.368.298-.667.667-.667.908 0 1.732-.363 2.333-.953.601.59 1.425.953 2.333.953.369 0 .667.299.667.667V18h2v-4.333A2.667 2.667 0 009.333 11c-.667 0-1.22-.49-1.318-1.13A4.002 4.002 0 007 2zM5 6a2 2 0 104 0 2 2 0 00-4 0z" clip-rule="evenodd"></path><path d="M14 11.83V18h4v-3.75c0-.69-.56-1.25-1.25-1.25a.75.75 0 01-.75-.75v-.42a3.001 3.001 0 10-2 0z"></path></g>
</svg>
</div>
<noscript><div class="users-logo"><img src="/static/external/users.png"></div></noscript>
</label>
</div>
<span>Stream chat</span>
<form target="chat" action="{{ url_for('chat_iframe', token=token) }}" method="get" style="float: right;margin: 0;width: 1em;">
<input id="token" type="hidden" name="token" value="{{ token }}">
<noscript><input type="hidden" name="users" value="0"></noscript>
<input type="checkbox" style="display:none;" name="debug">
<button class="hue-rotate" title="Refresh chat window" style="font-weight: bold;background: none;border: none;margin: 0;padding: 0;cursor: pointer;font-size: 100%;" type="submit" class="">🔄</button>
</form>
<form target="users" action="{{ url_for('users', token=token) }}" method="get" style="float: right;margin: 0;width: 1em;">
<input id="token" type="hidden" name="token" value="{{ token }}">
<input type="checkbox" style="display:none;" name="debug">
<button title="Refresh chat window" style="font-weight: bold;background: none;border: none;margin: 0;padding: 0;cursor: pointer;font-size: 100%;" type="submit" class="">🔄</button>
</form>
</div>
<div id="chat-window">
<div id="chat-container"><noscript><iframe id="chat" name="chat" src="{{ url_for('chat_iframe', token=token, users=0) }}"></iframe></noscript></div>
<div id="users-container"><noscript><iframe name="users" src="{{ url_for('users', token=token) }}"></iframe></noscript></div>
</div>
<iframe id="comment-box" style="height:97px;border-top:1px solid #434343;padding-top:0.5em;" src="{{ url_for('comment_iframe', token=token) }}"></iframe>
</div>
<script>
/* replace noscript frame URLs with with-script versions */
function replaceFrameURL(frameContainerId, newUrl, newId, newName) {
const frameContainer = document.getElementById(frameContainerId);
const oldFrame = frameContainer.querySelector("*");
const newFrame = document.createElement("iframe");
newFrame.id = newId;
newFrame.name = newName;
newFrame.src = newUrl;
frameContainer.replaceChild(newFrame, oldFrame);
}
replaceFrameURL("stream-info-container", "{{ url_for('stream_info', token=token) }}", "stream-info", "");
replaceFrameURL("chat-container", "{{ url_for('chat_iframe', token=token) }}", "chat", "chat");
</div>
</div>
<div class="textonly">
<br>
<div>== Quick links for text-based browsers ==</div>
<div>Livestream: <a href="{{ url_for('segments', token=token) }}">{{ url_for('segments', token=token) }}</a></div>
<div>Chat: <a href="{{ url_for('chat_iframe', token=token) }}">{{ url_for('chat_iframe', token=token) }}</a></div>
<div>Comment box: <a href="{{ url_for('comment_iframe', token=token) }}">{{ url_for('comment_iframe', token=token) }}</a></div>
<div>If the stream is in secret club mode, the <i>token</i> component is necessary.</div>
</div>
<script>
/* replace noscript frame URLs with with-script versions */
function replaceFrameURL(frameContainerId, newUrl, newId, newName) {
const frameContainer = document.getElementById(frameContainerId);
const oldFrame = frameContainer.querySelector("*");
const newFrame = document.createElement("iframe");
newFrame.id = newId;
newFrame.name = newName;
newFrame.src = newUrl;
frameContainer.replaceChild(newFrame, oldFrame);
}
replaceFrameURL("stream-info-container", "{{ url_for('stream_info', token=token) }}", "stream-info", "");
replaceFrameURL("chat-container", "{{ url_for('chat_iframe', token=token) }}", "chat", "chat");
/* make the people button change between users view and chat view */
const chat = document.getElementById("chat");
const usersToggle = document.getElementById("users-toggle");
usersToggle.onchange = function() {
const chatMessages = chat.contentDocument.getElementById("messages");
const chatUsers = chat.contentDocument.getElementById("users");
if ( chatUsers == null || chatMessages == null )
return;
/* using display: none; resets css animations, i.e. the manual refresh banner */
if ( usersToggle.checked ) {
chatMessages.style.overflow = "hidden";
chatMessages.style.height = "0";
chatUsers.style.height = "unset";
chatUsers.style.overflow = "unset";
chat.style.transform = "revert";
} else {
chatUsers.style.overflow = "hidden";
chatUsers.style.height = "0";
chatMessages.style.height = "unset";
chatMessages.style.overflow = "unset";
chat.style.transform = null;
}
}
chat.addEventListener("load", usersToggle.onchange);
</script>
<input type="hidden" id="hls-time" value="{{ hls_time }}">
<script src="/static/platform.js"></script>
</body>
/* make the people button change between users view and chat view */
const chat = document.getElementById("chat");
const usersToggle = document.getElementById("users-toggle");
usersToggle.onchange = function() {
const chatMessages = chat.contentDocument.getElementById("messages");
const chatUsers = chat.contentDocument.getElementById("users");
if ( chatUsers == null || chatMessages == null )
return;
/* using display: none; resets css animations, i.e. the manual refresh banner */
if ( usersToggle.checked ) {
chatMessages.style.overflow = "hidden";
chatMessages.style.height = "0";
chatUsers.style.height = "unset";
chatUsers.style.overflow = "unset";
chat.style.transform = "revert";
} else {
chatUsers.style.overflow = "hidden";
chatUsers.style.height = "0";
chatMessages.style.height = "unset";
chatMessages.style.overflow = "unset";
chat.style.transform = null;
}
}
chat.addEventListener("load", usersToggle.onchange);
</script>
<input type="hidden" id="hls-time" value="{{ hls_time }}">
<script src="/static/platform.js"></script>
</body>
</html>

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 %}

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

@ -1,24 +1,25 @@
<html style="display:table;width:100%;height:100%;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>.textonly{display:none;}</style>
</head>
<body style="display:table-cell;vertical-align:middle;background-color:#232323;color:#f0f0f0;padding-bottom:64px;">
<form method="post">
<input type="hidden" name="token" value="{{ token }}">
<div style="text-align:center;font-size:96px;font-weight:bold;margin:0 0 64px 0;padding:0;">SECRET CLUB</div>
<div style="margin:32px 0;text-align:center;font-size:24px;">
{% if tripcode['string'] %}
<div>Your tripcode: <b class="textonly">&lt;</b><b class="tripcode" style="font-weight:normal;padding:0 5px;border-radius:12px;font-size:90%;font-family:monospace;vertical-align:middle;display:inline-block;cursor:default;background-color:#{{ tripcode['background_colour'].hex() }};color:#{{ tripcode['foreground_colour'].hex() }};">{{ tripcode['string'] }}</b><b class="textonly">&gt;</b></div>
<div>This tripcode is not allowed in.</div>
{% else %}
<div>Your tripcode: (none)</div>
{% endif %}
</div>
<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>
</body>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>.textonly{display:none;}</style>
</head>
<body style="display:table-cell;vertical-align:middle;background-color:#232323;color:#f0f0f0;padding-bottom:64px;">
<form method="post">
<input type="hidden" name="token" value="{{ token }}">
<div style="text-align:center;font-size:96px;font-weight:bold;margin:0 0 64px 0;padding:0;">SECRET CLUB</div>
<div style="margin:32px 0;text-align:center;font-size:24px;">
{% if tripcode['string'] %}
<div>Your tripcode: <b class="textonly">&lt;</b><b class="tripcode" style="font-weight:normal;padding:0 5px;border-radius:12px;font-size:90%;font-family:monospace;vertical-align:middle;display:inline-block;cursor:default;background-color:#{{ tripcode['background_colour'].hex() }};color:#{{ tripcode['foreground_colour'].hex() }};">{{ tripcode['string'] }}</b><b class="textonly">&gt;</b></div>
<div>This tripcode is not allowed in.</div>
{% else %}
<div>Your tripcode: (none)</div>
{% endif %}
</div>
<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>
</body>
</html>

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

@ -1,223 +1,256 @@
<html>
<head>
{% if not embed_images %}<noscript><meta http-equiv="refresh" content="0;url={{ url_for('stream_info', token=token, embed=1) }}"></noscript>{% endif %}
<noscript><meta http-equiv="refresh" content="20"></noscript>
<link href="/static/external/pure-min.css" rel="stylesheet">
<style>
html {color: white;}
#stream-title {
display:inline-block;
width:calc(100% - 20px - 6.75em);
font-size:150%;
font-weight: bold;
margin-bottom: 0.375em;
word-wrap: break-word;
}
#stream-light {
height: 0.625em;
width: 0.625em;
border-radius: 50%;
display: inline-block;
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);}
.icon {
margin-top:-1pt;
}
<head>
{% if not embed_images %}<noscript><meta http-equiv="refresh" content="0;url={{ url_for('stream_info', token=token, embed=1) }}"></noscript>{% endif %}
<noscript><meta http-equiv="refresh" content="20"></noscript>
<link href="/static/external/pure-min.css" rel="stylesheet">
<style>
body {
color: #f0f0f0;
}
#stream-title {
display: inline-block;
width: calc(100% - 20px - 6.75em);
font-size: 150%;
font-weight: bold;
margin-bottom: 0.375em;
word-wrap: break-word;
}
#stream-light {
height: 0.625em;
width: 0.625em;
border-radius: 50%;
display: inline-block;
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);
}
.icon {
margin-top: -1pt;
}
{% if stream_uptime != None %}
.digit {overflow: hidden;display:inline-block;height:2em;}
.digit div {height:2em;}
{% if stream_uptime != None %}
.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;}
.minutes-ones {animation: count10 600s step-end -{{ stream_uptime }}s infinite;}
.minutes-tens {animation: count6 3600s step-end -{{ stream_uptime }}s infinite;}
.hours-ones {animation: count10 36000s step-end -{{ stream_uptime }}s infinite;}
.hours-tens {animation: count10 360000s step-end -{{ stream_uptime }}s infinite;}
.hours-hundreds {animation: count10 3600000s 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;}
.minutes-ones {animation: count10 600s step-end -{{ stream_uptime }}s infinite;}
.minutes-tens {animation: count6 3600s step-end -{{ stream_uptime }}s infinite;}
.hours-ones {animation: count10 36000s step-end -{{ stream_uptime }}s infinite;}
.hours-tens {animation: count10 360000s step-end -{{ stream_uptime }}s infinite;}
.hours-hundreds {animation: count10 3600000s step-end -{{ stream_uptime }}s infinite;}
.digit-hours-separator {width: 0;overflow: hidden;animation: unhide 0s forwards {{ 3600 - stream_uptime }}s;}
.digit-hours-ones {width: 0;overflow: hidden;animation: unhide 0s forwards {{ 3600 - 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-separator {width: 0;overflow: hidden;animation: unhide 0s forwards {{ 3600 - stream_uptime }}s;}
.digit-hours-ones {width: 0;overflow: hidden;animation: unhide 0s forwards {{ 3600 - 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;}
.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;}
}
@keyframes unhide {
to {width: revert;}
}
@keyframes count10 {
0% {margin-top: -0em;}
10% {margin-top: -2em;}
20% {margin-top: -4em;}
30% {margin-top: -6em;}
40% {margin-top: -8em;}
50% {margin-top: -10em;}
60% {margin-top: -12em;}
70% {margin-top: -14em;}
80% {margin-top: -16em;}
90% {margin-top: -18em;}
}
@keyframes count6 {
0.0000% {margin-top: -0em;}
16.6667% {margin-top: -2em;}
33.3333% {margin-top: -4em;}
50.0000% {margin-top: -6em;}
66.6667% {margin-top: -8em;}
83.3333% {margin-top: -10em;}
}
{% endif %}
.bottom-right {
position: absolute;
bottom: 10px;
right: 10px;
}
{% if not embed_images %}
#radial-loader {
transform: rotate(-90deg) scaleY(-1);
}
#radial-loader circle {
stroke: #3f3f3f;
fill: none;
stroke-dasharray: 32;
stroke-dashoffset: 0;
stroke-width: 10;
}
.radial-animation {
animation: radial 20s linear forwards;
}
.radial-animation-duration {
animation-duration: 20s;
}
@keyframes radial {
from {stroke-dashoffset: 0;}
to {stroke-dashoffset: 32;}
}
{% endif %}
</style>
</head>
<body>
<div style="margin: 0.5em;margin-bottom: 0;">
<div id="stream-title">{{ title }}</div>
<!-- TODO: make stream stats align vertically with stream title -->
<div id="stream-stats" style="display:inline;">
<div id="uptime" style="float:right;color:lightgray;">
{% if stream_uptime != None %}
<noscript>
<div class="timer">
<span class="digit digit-hours-tens">
<div class="hours-tens">0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</span
><span class="digit digit-hours-ones">
<div class="hours-ones">0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</span
><span class="digit digit-hours-separator">:</span
><span class="digit digit-minutes-tens">
<div class="minutes-tens">0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</span
><span class="digit">
<div class="minutes-ones">0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</span
><span class="digit">:</span
><span class="digit">
<div class="seconds-tens">0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</span
><span class="digit">
<div class="seconds-ones">0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</span>
</div>
<div class="timer-overflow">1000+ hours</div>
</noscript>
{% endif %}
</div>
<div style="float:right;color:#ff8280;margin-right:0.5em;">
{% if embed_images %}<img class="icon" src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAe1BMVEUAAAD/g3//goD/goD/goD/goD/gYD/goD/goD/goD/gID/g4H/g4D/goD/goD/goD/goD/goD/goD/goD/gYH/g4H/gX//g3//goD/gYH/hIT/goD/goD/gID/goD/goD/goD/goD/goD/gn//g4P/goD/hID/hID/goDBgARyAAAAKHRSTlMATr/198CIh/l2GndMvvPq8rl4vUF7hEbGSxuzsgaJ5u3l8awlrTo8jDgUwAAAAIZJREFUGNOVz9kWwTAQgOFpUJFQ+67aVPG//xO6aMsEF8zVnO/MKvJvJKbXHySxpQAwjOqwI+e8ZazQ4EVEPBOFGU5ExJEpnHY4Uzhv2hcsFa6w/mORrJuTNvGhWwO7/dtHhyOcnIL8XABlCYQ0Vz9Wl7q+VkDaYuDWNd0JbQavUc/8K/4WDwFjDHPCOfZuAAAAAElFTkSuQmCC">{% else %}<svg class="icon" style="display:none;fill:#{{ broadcaster_colour.hex() }};" width="20px" height="20px" version="1.1" viewBox="0 0 20 20" x="0px" y="0px"><g><path fill-rule="evenodd" d="M5 7a5 5 0 116.192 4.857A2 2 0 0013 13h1a3 3 0 013 3v2h-2v-2a1 1 0 00-1-1h-1a3.99 3.99 0 01-3-1.354A3.99 3.99 0 017 15H6a1 1 0 00-1 1v2H3v-2a3 3 0 013-3h1a2 2 0 001.808-1.143A5.002 5.002 0 015 7zm5 3a3 3 0 110-6 3 3 0 010 6z" clip-rule="evenodd"></path></g></svg>{% endif %}</span><span id="viewer-count" style="margin-left: 0.125em;vertical-align:top;">{{ viewer_count }}</span>
</div>
</div>
<div>
{% if not online %}
<span id="stream-light" style="background-color:red"></span>
<span id="stream-status">The stream has ended.</span>
{% elif video_was_corrupted %}
<span id="stream-light" style="background-color:yellow"></span>
<span id="stream-status">The stream is online but you're not receiving it. Try refreshing the page.</span>
{% else %}
<span id="stream-light" style="background-color:green"></span>
<span id="stream-status">The stream is online.</span>
{% endif %}
<a id="refresh-stream-button" class="refresh-button pure-button pure-button-primary" style="display: none;">Reload</a>
<a id="refresh-page-button" class="refresh-button hue-rotate pure-button pure-button-primary" style="display: none;">Refresh</a>
</div>
{% if embed_images %}
<!-- embedding this animated png messes with the animation -->
<img class="bottom-right" src="{{ url_for('_static', fn='radial.apng') }}">
{% else %}
<svg id="radial-loader" class="bottom-right" width="20px" height="20px" viewBox="0 0 20 20">
<circle class="radial-animation" cx="10" cy="10" r="5"></circle>
</svg>
{% endif %}
@keyframes hide {
to {
width: 0;
height: 0;
visibility: hidden;
}
}
@keyframes unhide {
to {
width: revert;
}
}
@keyframes count10 {
0% {margin-top: -0em;}
10% {margin-top: -2em;}
20% {margin-top: -4em;}
30% {margin-top: -6em;}
40% {margin-top: -8em;}
50% {margin-top: -10em;}
60% {margin-top: -12em;}
70% {margin-top: -14em;}
80% {margin-top: -16em;}
90% {margin-top: -18em;}
}
@keyframes count6 {
0.0000% {margin-top: -0em;}
16.6667% {margin-top: -2em;}
33.3333% {margin-top: -4em;}
50.0000% {margin-top: -6em;}
66.6667% {margin-top: -8em;}
83.3333% {margin-top: -10em;}
}
{% endif %}
.bottom-right {
position: absolute;
bottom: 10px;
right: 10px;
}
{% if not embed_images %}
#radial-loader {
transform: rotate(-90deg) scaleY(-1);
}
#radial-loader circle {
stroke: #3f3f3f;
fill: none;
stroke-dasharray: 32;
stroke-dashoffset: 0;
stroke-width: 10;
}
.radial-animation {
animation: radial 20s linear forwards;
}
.radial-animation-duration {
animation-duration: 20s;
}
@keyframes radial {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 32;
}
}
{% endif %}
</style>
</head>
<body>
<div style="margin: 0.5em;margin-bottom: 0;">
<div id="stream-title">{{ title }}</div>
<!-- TODO: make stream stats align vertically with stream title -->
<div id="stream-stats" style="display:inline;">
<div id="uptime" style="float:right;color:lightgray;">
{% if stream_uptime != None %}
<noscript>
<div class="timer">
<span class="digit digit-hours-tens">
<div class="hours-tens">0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</span
><span class="digit digit-hours-ones">
<div class="hours-ones">0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</span
><span class="digit digit-hours-separator">:</span
><span class="digit digit-minutes-tens">
<div class="minutes-tens">0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</span
><span class="digit">
<div class="minutes-ones">0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</span
><span class="digit">:</span
><span class="digit">
<div class="seconds-tens">0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</span
><span class="digit">
<div class="seconds-ones">0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</span>
</div>
<div class="timer-overflow">1000+ hours</div>
</noscript>
{% endif %}
</div>
<script>
{% if embed_images %}
// this doesn't work as intended; if the user switches javascript from off to on, the parent doesn't suddenly get javascript functionality unless the page is refreshed, so there's no point doing a redirect to the update-it-with-javascript version of this page atm
//window.location.replace("{{ url_for('stream_info', token=token) }}");
{% endif %}
<div style="float:right;color:#ff8280;margin-right:0.5em;">
{% if embed_images %}<img class="icon" src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAe1BMVEUAAAD/g3//goD/goD/goD/goD/gYD/goD/goD/goD/gID/g4H/g4D/goD/goD/goD/goD/goD/goD/goD/gYH/g4H/gX//g3//goD/gYH/hIT/goD/goD/gID/goD/goD/goD/goD/goD/gn//g4P/goD/hID/hID/goDBgARyAAAAKHRSTlMATr/198CIh/l2GndMvvPq8rl4vUF7hEbGSxuzsgaJ5u3l8awlrTo8jDgUwAAAAIZJREFUGNOVz9kWwTAQgOFpUJFQ+67aVPG//xO6aMsEF8zVnO/MKvJvJKbXHySxpQAwjOqwI+e8ZazQ4EVEPBOFGU5ExJEpnHY4Uzhv2hcsFa6w/mORrJuTNvGhWwO7/dtHhyOcnIL8XABlCYQ0Vz9Wl7q+VkDaYuDWNd0JbQavUc/8K/4WDwFjDHPCOfZuAAAAAElFTkSuQmCC">{% else %}<svg class="icon" style="display:none;fill:#{{ broadcaster_colour.hex() }};" width="20px" height="20px" version="1.1" viewBox="0 0 20 20" x="0px" y="0px"><g><path fill-rule="evenodd" d="M5 7a5 5 0 116.192 4.857A2 2 0 0013 13h1a3 3 0 013 3v2h-2v-2a1 1 0 00-1-1h-1a3.99 3.99 0 01-3-1.354A3.99 3.99 0 017 15H6a1 1 0 00-1 1v2H3v-2a3 3 0 013-3h1a2 2 0 001.808-1.143A5.002 5.002 0 015 7zm5 3a3 3 0 110-6 3 3 0 010 6z" clip-rule="evenodd"></path></g></svg>{% endif %}</span><span id="viewer-count" style="margin-left: 0.125em;vertical-align:top;">{{ viewer_count }}</span>
</div>
</div>
<div>
{% if not online %}
<span id="stream-light" style="background-color:red"></span>
<span id="stream-status">The stream has ended.</span>
{% elif video_was_corrupted %}
<span id="stream-light" style="background-color:yellow"></span>
<span id="stream-status">The stream is online but you're not receiving it. Try refreshing the page.</span>
{% else %}
<span id="stream-light" style="background-color:green"></span>
<span id="stream-status">The stream is online.</span>
{% endif %}
<a id="refresh-stream-button" class="refresh-button pure-button pure-button-primary" style="display: none;">Reload</a>
<a id="refresh-page-button" class="refresh-button hue-rotate pure-button pure-button-primary" style="display: none;">Refresh</a>
</div>
{% if embed_images %}
<!-- embedding this animated png messes with the animation -->
<img class="bottom-right" src="{{ url_for('_static', fn='radial.apng') }}">
{% else %}
<svg id="radial-loader" class="bottom-right" width="20px" height="20px" viewBox="0 0 20 20">
<circle class="radial-animation" cx="10" cy="10" r="5"></circle>
</svg>
{% endif %}
</div>
<script>
{% if embed_images %}
// this doesn't work as intended; if the user switches javascript from off to on, the parent doesn't suddenly get javascript functionality unless the page is refreshed, so there's no point doing a redirect to the update-it-with-javascript version of this page atm
//window.location.replace("{{ url_for('stream_info', token=token) }}");
{% endif %}
/* ensure that svg only appears when scripts are enabled */
for ( element of document.querySelectorAll("svg") ) {
element.style.display = null;
}
var streamAbsoluteStart = {{ stream_start_abs_json }};
var streamRelativeStart = {{ stream_start_rel_json }};
</script>
</body>
/* ensure that svg only appears when scripts are enabled */
for ( element of document.querySelectorAll("svg") ) {
element.style.display = null;
}
var streamAbsoluteStart = {{ stream_start_abs_json }};
var streamRelativeStart = {{ stream_start_rel_json }};
</script>
</body>
</html>

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

@ -1,128 +1,105 @@
<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;}
.name:hover{
background: 4px var(--name-bg-color);
text-shadow: 0 0 1px {{ background_colour }};
border-radius: 2px;
padding: 2px 4px;
margin: -2px -4px;
cursor: default;
}
sup {margin-right: 0.125em;font-size: 90%;font-family:monospace;}
.tripcode {
font-weight: normal;
margin-left: 0.5em;
padding: 0 5px;
border-radius: 6px;
font-size: 90%;
font-family: monospace;
vertical-align: middle;
display: inline-block;
cursor: default;
}
form {
margin: 0;
}
.refresh {
color: white;
background-color: gray;
position: sticky;
top: 0; /* (when upside down etc.) placement is correct with top when there is no scrollbar */
/*bottom: 0;*/ /* (when upside down etc.) placement is correct with bottom when there is a scrollbar */
padding: 1em;
text-align: center;
font-weight: bold;
border-radius: 4px;
box-shadow: 0px 2px 4px black;
margin: 0;
}
.unhide-margin {
animation: unhide-margin 0s forwards 30s;
height: 0;
padding: 0;
visibility: hidden;
}
@keyframes unhide-margin {
to {
height: revert;
padding: 1em;
visibility: visible;
margin-bottom: 1.25em;
}
}
/* for text-based browsers */
.textonly {
display: none;
<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.hex() }};
border-radius: 2px;
padding: 2px 4px;
margin: -2px -4px;
cursor: default;
}
sup {
margin-right: 0.125em;
font-size: 90%;
font-family:monospace;
}
.tripcode {
font-weight: normal;
margin-left: 0.5em;
padding: 0 5px;
border-radius: 6px;
font-size: 90%;
font-family: monospace;
vertical-align: middle;
display: inline-block;
cursor: default;
}
form {
margin: 0;
}
.refresh {
color: #f0f0f0;
background-color: gray;
position: sticky;
top: 0; /* (when upside down etc.) placement is correct with top when there is no scrollbar */
/*bottom: 0;*/ /* (when upside down etc.) placement is correct with bottom when there is a scrollbar */
padding: 1em;
text-align: center;
font-weight: bold;
border-radius: 4px;
box-shadow: 0px 2px 4px black;
margin: 0;
}
.unhide-margin {
animation: unhide-margin 0s forwards 30s;
height: 0;
padding: 0;
visibility: hidden;
}
@keyframes unhide-margin {
to {
height: revert;
padding: 1em;
visibility: visible;
margin-bottom: 1.25em;
}
</style>
</head>
<body>
}
/* for text-based browsers */
.textonly {
display: none;
}
</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 %}
</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 %}
{% include 'users.html' %}
</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 %}