anonstream/website/templates/chat-iframe.html

177 行
9.3 KiB
HTML

<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:4px 0;margin-top:-4px;margin-bottom:calc(-4px + 0.375em);overflow:hidden;}
.name {font-weight: bold;unicode-bidi: isolate;}
sup {margin: 0 -0.25em 0 0.125em;font-size: 90%;font-family:monospace;}
.tripcode {
margin-left: 0.5em;
padding: 0 5px;
border-radius: 6px;
font-size: 90%;
font-family: monospace;
vertical-align: middle;
display: inline-block;
}
.message {margin-left: 0.5em;overflow-wrap: break-word;unicode-bidi: isolate;}
.camera {transform: scaleX(-1);text-shadow: 0px 0px 6px #{{ broadcaster_colour.hex() }};cursor: help;margin-right:0.25em;}
.time {font-size: 80%;color: gray;vertical-align:middle;margin-right:0.5em;}
{% if include_user_list %}
#users {color:white;}
.group {margin-bottom:1.5em;}
.group-name {margin-bottom:0.25em;}
.person {margin-left: 0.5em;}
{% endif %}
input[type="submit"] {padding: 0;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;
}
.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;
}
}
</style>
</head>
<body>
<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 %}
<!-- TODO: mobile tooltip / title -->
{% for message in messages %}
<div class="comment rotate">
{% if not message['hidden'] %}
{% if broadcaster %}
<input type="checkbox" name="message_id[]" value="{{ message['id'] }}">
{% endif %}
<span class="time" title="{{ message['date'] }}">{{ message['time'] }}</span
{% if message['viewer']['broadcaster'] %}
><span class="camera" title="Broadcaster">🎥</span
{% endif %}
><span class="name" style="color:#{{ message['viewer']['colour'].hex() }};">{{ 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 %}
><div class="tripcode" style="background-color:#{{ message['viewer']['tripcode']['background_colour'].hex() }};color:#{{ message['viewer']['tripcode']['foreground_colour'].hex() }};">{{ message['viewer']['tripcode']['string'] }}</div
{% endif %}{% endwith %}
><span class="message">{{ message['text'] }}</span>
{% endif %}
</div>
{% endfor %}
{% if broadcaster %}
</form>
{% endif %}
<a href="" style="text-decoration: none;"><div class="refresh unhide rotate">Manual refresh required</div></a>
</div>
{% if include_user_list %}
<div id="users" style="overflow: hidden;height:0;">
<a href="" style="text-decoration: none;">
<div class="refresh unhide-margin" style="bottom:revert;top:0;">Manual refresh required</div>
</a>
<div style="margin: 0.5em 1em 0 1em;">
{% with person = people['broadcaster'] %}
{% if person %}
<div class="group">
<div class="group-name">Broadcaster</div>
<div class="person">
<span class="camera" title="Broadcaster">🎥</span><span class="name" style="color:#{{ person['colour'].hex() }};">{{ person['nickname'] or default_nickname(person['token']) }}</span>{% if person['tripcode']['string'] %}<div class="tripcode" style="background-color:#{{ person['tripcode']['background_colour'].hex() }};color:#{{ person['tripcode']['foreground_colour'].hex() }};">{{ person['tripcode']['string'] }}</div>{% endif %}
</div>
</div>
{% 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="color:#{{ person['colour'].hex() }};">{{ person['nickname'] or default_nickname(person['token']) }}{% with tag = person['nickname'] == None %}{% if tag %}<sup>{{ person['tag'] }}</sup>{% endif %}</span>{% if person['tripcode']['string'] %}{% if tag %}<span style="margin-right:0.125em;"></span>{% endif %}<div class="tripcode" style="background-color:#{{ person['tripcode']['background_colour'].hex() }};color:#{{ person['tripcode']['foreground_colour'].hex() }};">{{ person['tripcode']['string'] }}</div>{% endif %}{% endwith %}{% if person['token'] == token %}<span style="margin-left:0.5em;color:white;">(You)</span>{% endif %}
</div>
{% endfor %}
</div>
<div class="group">
<div class="group-name">Users not watching ({{ len(people['not_watching']) }})</div>
{% for person in people['not_watching'] %}
<div class="person">
{% if broadcaster %}<input type="checkbox" name="token[]" value="{{ person['token'] }}">{% endif %}<span class="name" style="color:#{{ person['colour'].hex() }};">{{ person['nickname'] or default_nickname(person['token']) }}{% with tag = person['nickname'] == None %}{% if tag %}<sup>{{ person['tag'] }}</sup>{% endif %}</span>{% if person['tripcode']['string'] %}{% if tag %}<span style="margin-right:0.125em;"></span>{% endif %}<div class="tripcode" style="background-color:#{{ person['tripcode']['background_colour'].hex() }};color:#{{ person['tripcode']['foreground_colour'].hex() }};">{{ person['tripcode']['string'] }}</div>{% endif %}{% endwith %}{% if person['token'] == token %}<span style="margin-left:0.5em;color:white;">(You)</span>{% endif %}
</div>
{% endfor %}
</div>
{% 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="color:#{{ person['colour'].hex() }};">{{ person['nickname'] or default_nickname(person['token']) }}{% with tag = person['nickname'] == None %}{% if tag %}<sup>{{ person['tag'] }}</sup>{% endif %}</span>{% if person['tripcode']['string'] %}{% if tag %}<span style="margin-right:0.125em;"></span>{% endif %}<div class="tripcode" style="background-color:#{{ person['tripcode']['background_colour'].hex() }};color:#{{ person['tripcode']['foreground_colour'].hex() }};">{{ person['tripcode']['string'] }}</div>{% endif %}{% endwith %}
</div>
{% endfor %}
</div>
<button>Unban</button>
</form>
{% endif %}
</div>
</div>
{% endif %}
</body>
</html>