MarseyWorld/files/templates/chat.html

232 lines
7.2 KiB
HTML
Raw Normal View History

{%- from 'util/assetcache.html' import asset, asset_siteimg with context -%}
{%- import 'util/helpers.html' as help -%}
2022-03-24 19:44:12 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
2022-09-08 17:12:46 +00:00
<script defer src="{{asset('js/bootstrap.js')}}"></script>
<meta name="description" content="{{DESCRIPTION}}">
2022-03-24 19:44:12 +00:00
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'; connect-src 'self'; object-src 'none';">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="author" content="">
<link id="favicon" rel="icon" type="image/webp" href="{{asset_siteimg('icon.webp')}}">
2022-03-19 21:20:23 +00:00
2022-03-22 02:35:12 +00:00
<title>Chat</title>
2022-03-19 21:20:23 +00:00
2022-03-24 19:44:12 +00:00
<style>:root{--primary:#{{v.themecolor}}}</style>
<link rel="stylesheet" href="{{asset('css/main.css')}}">
<link rel="stylesheet" href="{{asset('css/' + v.theme + '.css')}}">
2022-03-24 19:44:12 +00:00
{% if v.css %}
<style>
{{v.css | safe}}
</style>
2022-03-24 19:44:12 +00:00
{% endif %}
<style>
2022-08-15 06:54:32 +00:00
#chat-window {
2022-08-15 06:51:35 +00:00
max-height: calc(100vh - 220px);
overflow-y: auto;
2022-03-25 01:17:36 +00:00
background-color: transparent !important;
2022-03-24 19:44:12 +00:00
}
2022-03-19 21:20:23 +00:00
2022-08-15 06:54:32 +00:00
#online {
2022-09-12 05:38:02 +00:00
max-height: calc(100vh - 200px);
overflow-y: auto;
2022-09-12 05:38:02 +00:00
background-color: var(--background) !important;
2022-08-15 06:54:32 +00:00
}
2022-03-24 19:44:12 +00:00
#chat-window .chat-profile {
min-width: 42px;
width: 42px;
height: 42px;
}
2022-03-22 00:56:41 +00:00
2022-03-24 19:44:12 +00:00
#chat-window::-webkit-scrollbar {
display: none;
}
#chat-window {
-ms-overflow-style: none;
scrollbar-width: none;
}
.chat-mention {
2022-03-24 20:22:04 +00:00
background-color: #{{v.themecolor}}55;
2022-03-24 20:28:49 +00:00
border-radius: 3px;
2022-03-24 19:44:12 +00:00
}
2022-08-26 15:00:58 +00:00
p, h1, h2, h3, h4, h5 {
2022-08-13 09:01:22 +00:00
display: inherit;
}
blockquote + :not(blockquote) {
display: inline-block;
2022-08-26 15:00:19 +00:00
margin-top: 0.5rem;
}
2022-08-26 15:00:19 +00:00
blockquote {
margin-top: 0.5rem;
2022-08-26 14:53:56 +00:00
}
2022-03-24 19:44:12 +00:00
.diff {
margin-top: 1rem;
}
@media (max-width: 768px) {
#shrink * {
2022-03-26 12:27:01 +00:00
font-size: 10px !important;
2022-03-24 19:44:12 +00:00
}
.fa-reply:before {
font-size: 9px;
}
.diff {
margin-top: 0.5rem;
}
2022-08-15 05:35:07 +00:00
#chat-window {
max-height: 62vh;
2022-08-15 05:35:07 +00:00
}
2022-03-24 19:44:12 +00:00
}
2022-03-24 20:04:52 +00:00
p {
2022-06-30 23:01:01 +00:00
margin: 0;
2022-03-24 19:44:12 +00:00
}
2022-03-24 20:04:52 +00:00
2022-03-25 01:17:36 +00:00
.chat-line .btn {
background-color: transparent !important;
}
2022-03-25 22:30:15 +00:00
.cdiv {
overflow: hidden;
margin-left: 27px;
}
2022-03-26 10:52:14 +00:00
.quote {
display: inline-block !important;
padding: 0 0.5rem !important;
margin-bottom: 0.25rem !important;
2022-08-11 07:18:17 +00:00
border-color: transparent !important;
2022-03-26 10:52:14 +00:00
}
2022-05-23 17:57:08 +00:00
lite-youtube {
min-width: min(80vw,500px);
}
2022-03-24 19:44:12 +00:00
</style>
</head>
2022-04-13 20:20:57 +00:00
<body>
2022-03-24 19:44:12 +00:00
{% include "header.html" %}
2022-03-25 22:30:15 +00:00
<div class="container pb-4">
2022-03-24 19:44:12 +00:00
<div class="row justify-content-around" id="main-content-row">
<div class="col h-100 {% block customPadding %}{% if request.path.startswith('/@') %}user-gutters{% else %}custom-gutters{% endif %}{% endblock %}" id="main-content-col">
2022-04-07 00:21:38 +00:00
<div class="border-right pb-1 pt-2 px-3">
2022-08-13 11:07:57 +00:00
<span id="online2" data-bs-html="true" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Users in chat right now" class="text-muted">
2022-09-08 17:24:00 +00:00
<i class="far fa-user fa-sm mr-1"></i>
2022-03-24 19:44:12 +00:00
<span class="board-chat-count">0</span>
</span>
2022-09-13 03:14:55 +00:00
{% include "casino/roulette_screen.html" %}
2022-03-22 02:35:12 +00:00
</div>
2022-03-19 21:20:23 +00:00
2022-03-24 19:44:12 +00:00
<div id="chat-line-template" class="d-none">
<div class="chat-line">
2022-03-22 05:19:56 +00:00
<div class="d-flex align-items-center">
<div class="pl-md-3 text-muted">
<div>
2022-09-05 03:14:03 +00:00
<div class="avatar profile-pic-20-wrapper">
<img class="avatar-pic pp20 mr-1">
2022-09-05 03:16:42 +00:00
<img class="avatar-hat profile-pic-20-hat hat" loading="lazy">
2022-09-05 03:14:03 +00:00
</div>
2022-03-24 19:44:12 +00:00
<a href="" class="font-weight-bold text-black userlink" target="_blank"></a>
2022-08-26 14:53:56 +00:00
<span class="text-black time ml-2 d-none">just now</span>
2022-03-25 22:30:15 +00:00
<div class="cdiv">
2022-03-24 19:44:12 +00:00
<span class="chat-message text-black text-break"></span>
<span class="text d-none"></span>
2022-03-26 10:52:14 +00:00
<button class="quote btn" onclick="quote(this)"><i class="fas fa-reply" aria-hidden="true"></i></button>
2022-09-10 09:31:51 +00:00
{% if v.admin_level > 1 %}
2022-09-10 09:44:06 +00:00
<button class="quote btn" onclick="del(this)"><i class="fas fa-trash-alt" aria-hidden="true"></i></button>
2022-09-10 09:31:51 +00:00
{% endif %}
2022-03-22 05:19:56 +00:00
</div>
</div>
</div>
</div>
2022-03-24 19:44:12 +00:00
</div>
</div>
<div id="shrink">
2022-03-25 22:30:15 +00:00
<div id="chat-window" class="container pl-0 py-0">
2022-03-24 19:44:12 +00:00
{% for m in messages %}
{% set text_html = m['text_censored'] if v.slurreplacer else m['text_html'] %}
{% set link = '<a href="/id/' + v.id|string + '">' %}
2022-03-24 22:42:49 +00:00
{% set same = loop.index > 1 and m['username'] == messages[loop.index-2]['username'] %}
2022-03-24 19:44:12 +00:00
<div class="chat-line {% if link in text_html %}chat-mention{% endif %} {% if not same %}diff{% endif %}">
<div class="d-flex align-items-center">
<div class="pl-md-3 text-muted">
<div>
2022-03-24 23:58:07 +00:00
{% if not same %}
2022-09-05 03:04:48 +00:00
<div class="profile-pic-20-wrapper">
2022-09-05 03:14:03 +00:00
<img src="{{m['avatar']}}" class="pp20 mr-1">
2022-09-05 03:04:48 +00:00
{% if m.get('hat') -%}
2022-09-10 09:34:48 +00:00
<img class="profile-pic-20-hat hat" loading="lazy" src="{{m['hat']}}?h=5">
2022-09-05 03:04:48 +00:00
{%- endif %}
</div>
2022-03-24 23:58:07 +00:00
{% endif %}
2022-03-24 19:44:12 +00:00
<a class="{% if same %}d-none{% endif %} font-weight-bold text-black userlink" style="color:#{{m['namecolor']}}" target="_blank" href="/@{{m['username']}}">{{m['username']}}</a>
2022-04-06 22:54:09 +00:00
{% if not same %}
2022-08-25 23:27:11 +00:00
<span class="text-black time ml-2">{{m['time'] | timestamp}}</span>
2022-04-06 22:54:09 +00:00
{% endif %}
2022-03-25 22:30:15 +00:00
<div class="cdiv">
2022-03-24 19:44:12 +00:00
<span class="chat-message text-black text-break">{{text_html | safe}}</span>
2022-09-10 09:31:51 +00:00
<span class="text d-none">{{m['text']}}</span>
2022-03-26 10:52:14 +00:00
<button class="quote btn" onclick="quote(this)"><i class="fas fa-reply" aria-hidden="true"></i></button>
2022-09-10 09:31:51 +00:00
{% if v.admin_level > 1 %}
2022-09-10 09:44:06 +00:00
<button class="quote btn" onclick="del(this)"><i class="fas fa-trash-alt" aria-hidden="true"></i></button>
2022-09-10 09:31:51 +00:00
{% endif %}
2022-03-24 19:44:12 +00:00
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
2022-03-26 14:36:37 +00:00
<div id='message' class="d-none position-relative form-group d-flex mt-3">
2022-04-02 15:48:57 +00:00
<div class="position-absolute text-muted text-small ml-1" style="bottom: -1.5rem; line-height: 1;">
2022-03-24 19:44:12 +00:00
<span id="typing-indicator"></span>
<span id="loading-indicator" class="d-none"></span>
</div>
2022-09-09 23:52:52 +00:00
<i class="btn btn-secondary mr-2 fas fa-smile-beam" style="padding-top:0.65rem" onclick="loadEmojis('input-text')" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#emojiModal" data-bs-placement="bottom" title="Add Emoji"></i>
2022-08-26 19:22:40 +00:00
<textarea onclick="scroll_chat()" id="input-text" minlength="1" maxlength="{% if SITE == 'rdrama.net' %}200{% else %}1000{% endif %}" style="font-size:16px!important" class="form-control" placeholder="Message" autocomplete="off" autofocus rows="1"></textarea>
2022-08-26 19:31:46 +00:00
<button id="chatsend" onclick="send()" class="btn btn-primary ml-3" type="submit" onclick="disable(this)">Send</button>
2022-03-24 19:44:12 +00:00
</div>
2022-03-22 02:35:12 +00:00
</div>
</div>
2022-03-24 19:44:12 +00:00
2022-09-09 09:28:59 +00:00
<div class="col text-left d-none d-lg-block pt-3" style="max-width:300px">
2022-08-14 13:38:08 +00:00
<h4>Users in chat right now</h4>
2022-08-15 06:53:04 +00:00
<div id="online" class="mt-3"></div>
2022-03-24 19:44:12 +00:00
2022-03-22 02:35:12 +00:00
</div>
2022-03-24 19:44:12 +00:00
2022-03-19 21:20:23 +00:00
</div>
2022-03-23 16:15:59 +00:00
<input id="vid" type="hidden" value="{{v.id}}">
2022-08-27 00:48:28 +00:00
<input id="vusername" type="hidden" value="{{v.username}}">
2022-03-23 16:15:59 +00:00
<input id="site_name" type="hidden" value="{{SITE_NAME}}">
2022-03-24 19:44:12 +00:00
<input id="slurreplacer" type="hidden" value="{{v.slurreplacer}}">
2022-03-22 02:35:12 +00:00
2022-03-22 03:08:00 +00:00
{% include "emoji_modal.html" %}
2022-03-24 02:13:01 +00:00
{% include "expanded_image_modal.html" %}
2022-03-22 03:08:00 +00:00
2022-09-08 17:12:46 +00:00
<script defer src="{{asset('js/lozad.js')}}"></script>
<script defer src="/assets/js/lite-youtube.js?v=4000"></script>
2022-09-10 09:34:48 +00:00
<script defer src="/chat.js?h=5"></script>
2022-08-19 13:58:29 +00:00
2022-03-24 19:44:12 +00:00
</body>