another chat rework

files/assets/css/chat.css

@@ -26,7 +26,7 @@
 }
 
 .chat-mention {
-	background-color: #{{v.themecolor}}55;
+	background-color: #ffffff44;
 	border-radius: 3px;
 }
 
@@ -68,7 +68,7 @@ p {
 	width: 100%;
 }
 
-.cdiv {
+.chat-line {
 	overflow: hidden;
 	margin-left: 27px;
 }

files/assets/js/chat.js

@@ -26,7 +26,8 @@ socket=io()
 const chatline = document.getElementsByClassName('chat-line')[0]
 const box = document.getElementById('chat-window')
 const textbox = document.getElementById('input-text')
-const icon = document.getElementById('icon')
+const icon = document.querySelector("link[rel~='icon']")
+
 const vid = document.getElementById('vid').value
 const vusername = document.getElementById('vusername').value
 const site_name = document.getElementById('site_name').value
@@ -42,17 +43,17 @@ function flash(){
 	if (notifs >= 1 && !focused){
 		title.innerHTML = `[+${notifs}] Chat`;
 		if (alert) {
-			icon.href = escapeHTML(`/assets/images/${site_name}/alert.webp?v=3`)
+			icon.href = `/i/${site_name}/alert.ico?v=3009`
 			alert=false;
 		}
 		else {
-			icon.href = escapeHTML(`/assets/images/${site_name}/icon.webp?v=3009`)
+			icon.href = `/i/${site_name}/icon.webp?v=3009`
 			alert=true;
 		}
 		setTimeout(flash, 500)
 	}
 	else {
-		icon.href = escapeHTML(`/assets/images/${site_name}/icon.webp?v=3009`)
+		icon.href = `/i/${site_name}/icon.webp?v=3009`
 		notifs = 0
 		title.innerHTML = 'Chat';
 	}
@@ -64,11 +65,11 @@ function flash(){
 }
 
 
-function handle_message(json) {
+socket.on('speak', function(json) {
 	let text = json['text']
 	let text_html
 
-	if (slurreplacer == 'True') text_html = json['text_censored']
+	if (slurreplacer != '0') text_html = json['text_censored']
 	else text_html = json['text_html']
 
 	if (text_html.includes(`<a href="/id/${vid}">`)){
@@ -87,15 +88,9 @@ function handle_message(json) {
 	const last_user = users[users.length-1].innerHTML;
 	const scrolled_down = (box.scrollHeight - box.scrollTop <= window.innerHeight)
 
-	if (last_user == json['username']) {
-		document.getElementsByClassName('userlink')[0].classList.add('d-none')
-		document.getElementsByClassName('avatar')[0].classList.add('d-none')
-		document.getElementsByClassName('time')[0].classList.add('d-none')
-	}
-	else {
-		document.getElementsByClassName('userlink')[0].classList.remove('d-none')
-		document.getElementsByClassName('avatar')[0].classList.remove('d-none')
+	if (last_user != json['username']) {
 		document.getElementsByClassName('avatar-pic')[0].src = '/pp/' + json["user_id"]
+
 		if (json['hat'])
 			document.getElementsByClassName('avatar-hat')[0].src = json['hat'] + "?h=7"
 		else
@@ -103,7 +98,8 @@ function handle_message(json) {
 
 		document.getElementsByClassName('userlink')[0].href = '/@' + json['username']
 		document.getElementsByClassName('userlink')[0].style.color = '#' + json['namecolor']
-		document.getElementsByClassName('time')[0].classList.remove('d-none')
+		document.getElementsByClassName('userlink')[0].innerHTML = json['username']
+
 		if (Date.now() - json['time']*1000 > 5000)
 			document.getElementsByClassName('time')[0].innerHTML = timeSince(json['time']*1000) + ' ago'
 		else
@@ -111,7 +107,6 @@ function handle_message(json) {
 	}
 
 	document.getElementsByClassName('chat-line')[0].id = json['id']
-	document.getElementsByClassName('userlink')[0].innerHTML = json['username']
 	document.getElementsByClassName('text')[0].innerHTML = escapeHTML(text)
 	document.getElementsByClassName('chat-message')[0].innerHTML = text_html.replace(/data-src/g, 'src').replace(/data-cfsrc/g, 'src').replace(/style="display:none;visibility:hidden;"/g, '')
 
@@ -121,7 +116,7 @@ function handle_message(json) {
 		if (quoted) {
 			document.getElementsByClassName('quotes')[0].classList.remove("d-none")
 			document.getElementsByClassName('QuotedMessageLink')[0].href = '#' + json['quotes']
-			document.getElementsByClassName('QuotedUser')[0].innerHTML = quoted.querySelector('.userlink').innerHTML
+			document.getElementsByClassName('QuotedUser')[0].innerHTML = quoted.parentElement.querySelector('.userlink').innerHTML
 			document.getElementsByClassName('QuotedMessage')[0].innerHTML = quoted.querySelector('.text').innerHTML
 		}
 	}
@@ -133,26 +128,13 @@ function handle_message(json) {
 		box.querySelector('.chat-group:last-child').append(line)
 	}
 	else {
-		const chatgroup = document.createElement("div");
-		chatgroup.className = "chat-group";
+		const chatgroup = document.getElementsByClassName('chat-group')[0].cloneNode(true)
 		chatgroup.append(line)
 		box.append(chatgroup)
 	}
 
 	if (scrolled_down || json['username'] == vusername)
 		box.scrollTo(0, box.scrollHeight)
-}
-
-socket.on('speak', function(json) {
-	handle_message(json)
-})
-
-socket.on('catchup', function(json) {
-	for (const message of json) {
-		const existing = document.getElementById(message['id'])
-		if (existing) break
-		handle_message(message)
-	}
 })
 
 function send() {
@@ -190,10 +172,10 @@ function quote(t) {
 	const text = t.parentElement.getElementsByClassName("text")[0].innerHTML.replace(/\*/g,"\\*").split('\n').pop()
 	document.getElementById('QuotedMessage').innerHTML = text
 
-	const username = t.parentElement.parentElement.getElementsByClassName('userlink')[0].innerHTML
+	const username = t.parentElement.parentElement.parentElement.parentElement.getElementsByClassName('userlink')[0].innerHTML
 	document.getElementById('QuotedUser').innerHTML = username
 
-	const id = t.parentElement.parentElement.parentElement.parentElement.id
+	const id = t.parentElement.parentElement.parentElement.id
 	document.getElementById('quotes_id').value = id
 	document.getElementById('QuotedMessageLink').href = `#${id}`
 

files/routes/chat.py

@@ -31,8 +31,8 @@ muted = cache.get(f'muted') or {
 	f'{SITE_FULL}/admin/chat': {}
 }
 messages = cache.get(f'messages') or {
-	f'{SITE_FULL}/chat': [],
-	f'{SITE_FULL}/admin/chat': []
+	f'{SITE_FULL}/chat': {},
+	f'{SITE_FULL}/admin/chat': {}
 }
 
 @app.get("/chat")
@@ -41,12 +41,12 @@ messages = cache.get(f'messages') or {
 def chat(v):
 	if not v.admin_level and TRUESCORE_CHAT_MINIMUM and v.truescore < TRUESCORE_CHAT_MINIMUM:
 		abort(403, f"Need at least {TRUESCORE_CHAT_MINIMUM} truescore for access to chat.")
-	return render_template("chat.html", v=v)
+	return render_template("chat.html", v=v, messages=messages[request.url])
 
 @app.get("/admin/chat")
 @admin_level_required(2)
 def admin_chat(v):
-	return render_template("chat.html", v=v)
+	return render_template("chat.html", v=v, messages=messages[request.url])
 
 @socketio.on('speak')
 @limiter.limit("3/second;10/minute")
@@ -78,8 +78,8 @@ def speak(data, v):
 
 	text_html = sanitize(text, count_marseys=True)
 	quotes = data['quotes']
+	id = str(uuid.uuid4())
 	data = {
-		"id": str(uuid.uuid4()),
 		"quotes": quotes,
 		"hat": v.hat_active(v)[0],
 		"user_id": v.id,
@@ -95,7 +95,7 @@ def speak(data, v):
 		emit('speak', data)
 	else:
 		emit('speak', data, room=request.referrer, broadcast=True)
-		messages[request.referrer].append(data)
+		messages[request.referrer][id] = data
 		messages[request.referrer] = messages[request.referrer][-500:]
 
 	if v.admin_level >= PERMS['USER_BAN']:
@@ -136,7 +136,6 @@ def connect(v):
 		online.append(v.username)
 		refresh_online()
 
-	emit('catchup', messages[request.referrer], room=request.referrer)
 	emit('typing', typing[request.referrer], room=request.referrer)
 	return '', 204
 
@@ -174,9 +173,9 @@ def typing_indicator(data, v):
 @limiter.limit(DEFAULT_RATELIMIT, key_func=get_ID)
 @admin_level_required(PERMS['POST_COMMENT_MODERATION'])
 def delete(id, v):
-	for message in messages[request.referrer]:
-		if message['id'] == id:
-			messages[request.referrer].remove(message)
+	for k, val in messages[request.referrer].items():
+		if k == id:
+			del messages[request.referrer][k]
 			break
 
 	emit('delete', id, room=request.referrer, broadcast=True)

files/templates/chat.html

@@ -22,37 +22,79 @@
 				</span>
 			</div>
 
-			<div id="chat-line-template" class="d-none">
-				<div class="chat-line">
-					<div class="d-flex align-items-center">
-						<div class="pl-md-3 text-muted chat-line-content">
-							<div class="avatar profile-pic-20-wrapper">
-								<img class="avatar-pic pp20 mr-1">
-								<img class="avatar-hat profile-pic-20-hat hat" loading="lazy">
-							</div>
-							<a href="" class="font-weight-bold text-black userlink" target="_blank"></a>
-							<span class="text-black time ml-1 mb-3 d-none text-center">just now</span>
-							<div class="cdiv">
-								<div class="d-none quotes" style="font-size:12px">
-									<a class="QuotedMessageLink">
-										<i class="fas fa-reply"></i> <span class="text-primary">@<span class="QuotedUser"></span></span>: <em class="QuotedMessage"></em>
-									</a>
-								</div>
+			{% macro chat_group_template(id, m) %}
+				<div class="chat-group">
+					<div class="avatar profile-pic-20-wrapper">
+						<img class="avatar-pic pp20 mr-1" {% if m %}src="/pp/{{m['user_id']}}"{% endif %}>
+						<img class="avatar-hat profile-pic-20-hat hat" loading="lazy" {% if m %}src="{{m['hat']}}"{% endif %}>
+					</div>
+					<a class="font-weight-bold text-black userlink" target="_blank" {% if m %}style="color:#{{m['namecolor']}}" href="/@{{m['username']}}" {% endif %}>
+						{% if m %}{{m['username']}}{% endif %}
+					</a>
+					<span class="text-black time ml-1 mb-3 text-center">{% if m %}{{m['time'] | timestamp}}{% else %}just now{% endif %}</span>
+			{% endmacro %}
 
-								<span class="chat-message text-black text-break"></span>
-								<span class="text d-none"></span>
-								{% if v.admin_level > 1 %}
-									<i class="btn del fas fa-trash-alt"></i>
-									<i class="btn d-none del delmsg fas fa-trash-alt text-danger" data-nonce="{{g.nonce}}" data-onclick="del(this)"></i>
-								{% endif %}
-								<i class="quote btn fas fa-reply" data-nonce="{{g.nonce}}" data-onclick="quote(this)"></i>
+			{% macro chat_line_template(id, m) %}
+				<div class="chat-line" {% if m %}id="{{id}}"{% endif %}>
+					<div class="d-flex align-items-center">
+						<div class="text-muted chat-line-content">
+							<div class="{% if not (m and m['quotes']) %}d-none{% endif %} quotes" style="font-size:12px">
+								<a class="QuotedMessageLink" {% if m and m['quotes'] %}href="#{{m['quotes']}}"{% endif %}>
+									<i class="fas fa-reply"></i> 
+									<span class="text-primary">@
+										<span class="QuotedUser">
+											{% if m and m['quotes'] %}{{messages[m['quotes']]['username']}}{% endif %}
+										</span>
+									</span>: 
+									<em class="QuotedMessage">
+										{% if m and m['quotes'] %}{{messages[m['quotes']]['text']}}{% endif %}
+									</em>
+								</a>
 							</div>
+
+							<span class="chat-message text-black text-break">
+								{% if m %}
+									{% if v.slurreplacer %}
+										{{m['text_censored'] | safe}}
+									{% else %}
+										{{m['text_html'] | safe}}
+									{% endif %}
+								{% endif %}
+							</span>
+							<span class="text d-none">{% if m %}{{m['text']}}{% endif %}</span>
+							{% if v.admin_level > 1 %}
+								<i class="btn del fas fa-trash-alt"></i>
+								<i class="btn d-none del delmsg fas fa-trash-alt text-danger" data-nonce="{{g.nonce}}" data-onclick="del(this)"></i>
+							{% endif %}
+							<i class="quote btn fas fa-reply" data-nonce="{{g.nonce}}" data-onclick="quote(this)"></i>
 						</div>
 					</div>
 				</div>
+			{% endmacro %}
+
+
+			<div id="chat-group-template" class="d-none">
+				{{chat_group_template()}}
+				</div>
 			</div>
+
+			<div id="chat-line-template" class="d-none">
+				{{chat_line_template()}}
+			</div>
+
 			<div id="shrink">
 				<div id="chat-window" class="container pl-0 py-0">
+					{% for id, m in messages.items() %}
+						{% set previous = m %}
+						{% if not (loop.index > 1 and m['user_id'] == previous['user_id']) %}
+							{% if loop.index > 1 %}
+								</div>
+							{% endif %}
+							{{chat_group_template(id, m)}}
+						{% endif %}
+						{{chat_line_template(id, m)}}
+					{% endfor %}
+					</div>
 				</div>
 
 				<div class="mt-3"></div>
@@ -80,7 +122,7 @@
 						</label>
 					</span>
 
-					<textarea data-nonce="{{g.nonce}}" data-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>
+					<textarea id="input-text" minlength="1" maxlength="{% if SITE == 'rdrama.net' %}200{% else %}1000{% endif %}" {% if g.browser == "apple" %}style="font-size:16px!important"{% endif %} class="form-control" placeholder="Message" autocomplete="off" autofocus rows="1"></textarea>
 
 					<i id="chatsend" data-nonce="{{g.nonce}}" data-onclick="send()" class="btn btn-secondary fas fa-reply ml-3 my-auto" type="submit" data-nonce="{{g.nonce}}" data-onclick="disable(this)" style="transform:rotateY(180deg);font-size:1.3rem!important"></i>
 				</div>

files/templates/util/html_head.html

@@ -59,7 +59,7 @@
 		'/h/'+sub.name, sub.sidebar if sub.sidebar %}
 	{% endif %}
 
-	<link rel="icon" id="icon" type="image/webp" href="/icon.webp?v=1">
+	<link rel="icon" type="image/webp" href="/icon.webp?v=1">
 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 	<meta name="thumbnail" content="{{'site_preview.webp' | asset_siteimg}}">
 	<meta name="description" content="{{DESCRIPTION}}">