From c96f86e0564ace0fc85a84850b2a1bc051be95e2 Mon Sep 17 00:00:00 2001
From: Aevann1 <randomname42029@gmail.com>
Date: Tue, 22 Mar 2022 04:35:12 +0200
Subject: [PATCH] chat

---
 files/routes/chat.py         |  24 +++-
 files/templates/chat.html    | 240 ++++++++++++++++++++++++++---------
 files/templates/default.html |   2 +-
 requirements.txt             |   1 +
 supervisord.conf             |   2 +-
 5 files changed, 207 insertions(+), 62 deletions(-)

diff --git a/files/routes/chat.py b/files/routes/chat.py
index 57892b816..3d4eaa752 100644
--- a/files/routes/chat.py
+++ b/files/routes/chat.py
@@ -13,6 +13,7 @@ if SITE in ('pcmemes.net', 'localhost'):
 	import sys
 
 	socketio = SocketIO(app, async_mode='gevent')
+	typing = []
 
 	@app.get("/chat")
 	@auth_required
@@ -38,10 +39,27 @@ if SITE in ('pcmemes.net', 'localhost'):
 	def connect():
 		global count
 		count += 1
-		emit("count", count)
+		emit("count", count, broadcast=True)
+
+		emit('typing', typing)
+		return '', 204
 
 	@socketio.on('disconnect')
-	def disconnect():
+	@auth_required
+	def disconnect(v):
 		global count
 		count -= 1
-		emit("count", count)
\ No newline at end of file
+		emit("count", count, broadcast=True)
+		if v.username in typing: typing.remove(v.username)
+		emit('typing', typing, broadcast=True)
+		return '', 204
+
+	@socketio.on('typing')
+	@auth_required
+	def typing_indicator(data, v):
+
+		if data and v.username not in typing: typing.append(v.username)
+		elif not data and v.username in typing: typing.remove(v.username)
+
+		emit('typing', typing, broadcast=True)
+		return '', 204
\ No newline at end of file
diff --git a/files/templates/chat.html b/files/templates/chat.html
index d8284de51..17f148a3f 100644
--- a/files/templates/chat.html
+++ b/files/templates/chat.html
@@ -1,83 +1,209 @@
 {% extends "default.html" %}
 
 {% block title %}
-  <title>Chat</title>
-  <meta name="description" content="Chat">
+	<title>Chat</title>
+	<meta name="description" content="Chat">
 {% endblock %}
 
 {% block content %}
 
 <div class="border-right py-3 px-3">
-  <span data-toggle="tooltip" data-placement="bottom" title="people online right now" class="text-muted">
-    <i class="far fa-user fa-sm mr-1"></i>
-    <span class="board-chat-count">0</span>
-  </span>
+	<span data-toggle="tooltip" data-placement="bottom" title="people online right now" class="text-muted">
+		<i class="far fa-user fa-sm mr-1"></i>
+		<span class="board-chat-count">0</span>
+	</span>
 </div>
 
 <div id="chat-line-template" class="d-none">
-  <div class="chat-line my-2">
-    <div class="d-flex align-items-center">
-      <span class="rounded mb-auto d-none d-md-block chat-profile">
-        <img class="desktop-avatar rounded-circle w-100">
-      </span>
-      <div class="pl-md-3 text-muted">
-        <div>
-          <img class="mobile-avatar profile-pic-30 mr-2 d-inline-block d-md-none" data-toggle="tooltip" data-placement="right">
-          <a href="" class="font-weight-bold text-black userlink" target="_blank"></a>
-          <div style="overflow:hidden">
-            <span class="chat-message text-black text-break"></span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+	<div class="chat-line my-2">
+		<div class="d-flex align-items-center">
+			<span class="rounded mb-auto d-none d-md-block chat-profile">
+				<img class="desktop-avatar rounded-circle w-100">
+			</span>
+			<div class="pl-md-3 text-muted">
+				<div>
+					<img class="mobile-avatar profile-pic-30 mr-2 d-inline-block d-md-none" data-toggle="tooltip" data-placement="right">
+					<a href="" class="font-weight-bold text-black userlink" target="_blank"></a>
+					<div style="overflow:hidden">
+						<span class="chat-message text-black text-break"></span>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
 </div>
 
 <div class="container p-md-0 chat-container">
-  <div id="chat-window">
-    <div id="chat-text" class="fullchat">
-    </div>
-    <div id="system-template">
-      <div class="system-line">
-        <p class="message text-muted"></p>
-      </div>
-    </div>
-  </div>
-  <div class="position-relative form-group d-flex pb-3">
-    <div class="position-absolute text-muted text-small" style="bottom: -1.5rem; line-height: 1;">
-      <span id="typing-indicator"></span>
-      <span id="loading-indicator" class="d-none"></span>
-    </div>
-    <input id="input-text" type="text" class="form-control" placeholder="Message" autocomplete="off" autofocus />
-    <button id="chatsend" onclick="send()" class="btn btn-primary ml-3" type="submit">Send</button>
-  </div>
+	<div id="chat-window">
+		<div id="chat-text" class="fullchat">
+		</div>
+		<div id="system-template">
+			<div class="system-line">
+				<p class="message text-muted"></p>
+			</div>
+		</div>
+	</div>
+	<div class="position-relative form-group d-flex pb-3">
+		<div class="position-absolute text-muted text-small" style="bottom: -1.5rem; line-height: 1;">
+			<span id="typing-indicator"></span>
+			<span id="loading-indicator" class="d-none"></span>
+		</div>
+		<input id="input-text" type="text" class="form-control" placeholder="Message" autocomplete="off" autofocus />
+		<button id="chatsend" onclick="send()" class="btn btn-primary ml-3" type="submit">Send</button>
+	</div>
 </div>
 
 <script src="/assets/js/socketio.js"></script>
-<script src="/assets/js/chat.js?v=13"></script>
 
 <style>
+	#chat-window {
+		max-height:calc(100vh - 300px);
+		overflow-y: scroll;
+	}
 
-#chat-window {
-  max-height:calc(100vh - 300px);
-  overflow-y: scroll;
-}
+	.fullchat .chat-profile {
+		min-width: 42px;
+		width: 42px;
+		height: 42px;
+	}
 
-.fullchat .chat-profile {
-  min-width: 42px;
-  width: 42px;
-  height: 42px;
-}
+	#chat-window::-webkit-scrollbar {
+		display: none;
+	}
 
-#chat-window::-webkit-scrollbar {
-  display: none;
-}
-
-#chat-window {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
+	#chat-window {
+		-ms-overflow-style: none;
+		scrollbar-width: none;
+	}
 
+	.chat-mention {
+		background-color: rgba(128, 90, 213, 0.3);
+	}
 </style>
 
+<script>
+	let socket=io()
+	let chatline = document.getElementsByClassName('chat-line')[0]
+	let box = document.getElementById('chat-window')
+	let textbox = document.getElementById('input-text')
+	let icon = document.getElementById('favicon')
+	let notifs = 0;
+	let scrolled_down = true;
+	let focused = true;
+	let is_typing = false;
+	let alert=true;
+
+	function flash(){
+		let title = document.getElementsByTagName('title')[0]
+		if (notifs >= 1 && !focused){
+			title.innerHTML = `[+${notifs}] Chat`;
+			if (alert) {
+				icon.href = '/static/assets/images/{{SITE_NAME}}/alert.webp'
+				alert=false;
+			}
+			else {
+				icon.href = '/assets/images/{{SITE_NAME}}/icon.webp'
+				alert=true;
+			}
+			setTimeout(flash, 500)
+		}
+		else {
+			icon.href = '/assets/images/{{SITE_NAME}}/icon.webp'
+			notifs = 0
+			title.innerHTML = 'Chat';
+		}
+	}
+
+
+	socket.on('speak', function(json) {
+		let text = json['text']
+
+		if (text.includes('<a href="/id/{{v.id}}">')){
+			chatline.classList.add('chat-mention');
+		}
+		else {
+			chatline.classList.remove('chat-mention');
+		};
+
+		notifs = notifs + 1;
+		if (notifs == 1) {
+			setTimeout(flash, 500);
+		}
+
+		scrolled_down = (box.scrollHeight - box.scrollTop <= window.innerHeight-109)
+		document.getElementsByClassName('desktop-avatar')[0].src = json['avatar']
+		document.getElementsByClassName('userlink')[0].href = '/@' + json['username']
+		document.getElementsByClassName('userlink')[0].innerHTML = json['username']
+		document.getElementsByClassName('userlink')[0].style.color = '#' + json['namecolor']
+		document.getElementsByClassName('chat-message')[0].innerHTML = text
+		document.getElementById('chat-text').append(document.getElementsByClassName('chat-line')[0].cloneNode(true))
+		if (scrolled_down) box.scrollTo(0,box.scrollHeight)
+	})
+
+
+	function send() {
+		socket.emit('speak', textbox.value);
+		textbox.value = ''
+		is_typing = false
+		socket.emit('typing', false);
+	}
+
+
+	textbox.addEventListener("keyup", function(event) {
+		if (event.key === 'Enter') {
+			event.preventDefault();
+			send()
+		}
+	})
+
+	socket.on('count', function(data){
+		document.getElementsByClassName('board-chat-count')[0].innerHTML = data
+	})
+
+	window.addEventListener('blur', function(){
+		focused=false
+	})
+	window.addEventListener('focus', function(){
+		focused=true
+	})
+
+
+	textbox.addEventListener("input", function() {
+		text = textbox.value
+		if (!text && is_typing==true){
+			is_typing=false;
+			socket.emit('typing', false);
+		}
+		else if (text && is_typing==false) {
+			is_typing=true;
+			socket.emit('typing', true);
+		}
+	})
+
+
+	socket.on('typing', function (users){
+		if (users.length==0){
+			document.getElementById('typing-indicator').innerHTML = '';
+			document.getElementById('loading-indicator').classList.add('d-none');
+		}
+		else if (users.length==1){
+			document.getElementById('typing-indicator').innerHTML = '<b>'+users[0]+"</b> is typing...";
+			document.getElementById('loading-indicator').classList.remove('d-none');
+		}
+		else if (users.length==2){
+			document.getElementById('typing-indicator').innerHTML = '<b>'+users[0]+"</b> and <b>"+users[1]+"</b> are typing...";
+			document.getElementById('loading-indicator').classList.remove('d-none');
+		}
+		else if (users.length==3){
+			document.getElementById('typing-indicator').innerHTML = '<b>'+users[0]+"</b>, <b>"+users[1]+"</b>, and <b>"+users[2]+"</b> are typing...";
+			document.getElementById('loading-indicator').classList.remove('d-none');
+		}
+		else if (users.length>=4){
+			more=users.length-3
+			document.getElementById('typing-indicator').innerHTML = '<b>'+users[0]+"</b>, <b>"+users[1]+"</b>, <b>"+users[2]+"</b> and "+more.toString()+" more are typing...";
+			document.getElementById('loading-indicator').classList.remove('d-none');
+		}
+	})
+</script>
+
 {% endblock %}
\ No newline at end of file
diff --git a/files/templates/default.html b/files/templates/default.html
index af0a86fb6..46c9b082f 100644
--- a/files/templates/default.html
+++ b/files/templates/default.html
@@ -83,7 +83,7 @@
 	<link rel="apple-touch-icon" sizes="180x180" href="/static/assets/images/{{SITE_NAME}}/icon.webp?v=1012">
 		<link rel="manifest" href="/static/assets/manifest.json?v=1">
 		<link rel="mask-icon" href="/static/assets/images/{{SITE_NAME}}/icon.webp?v=1012">
-		<link rel="shortcut icon" href="/static/assets/images/{{SITE_NAME}}/icon.webp?v=1012">
+		<link id="favicon" rel="shortcut icon" href="/static/assets/images/{{SITE_NAME}}/icon.webp?v=1012">
 		<meta name="apple-mobile-web-app-title" content="{{SITE_NAME}}">
 		<meta name="application-name" content="{{SITE_NAME}}">
 		<meta name="msapplication-TileColor" content="#{{config('DEFAULT_COLOR')}}">
diff --git a/requirements.txt b/requirements.txt
index 11f442799..a0093943e 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -7,6 +7,7 @@ Flask-Limiter
 Flask-Mail
 Flask-Socketio
 gevent
+gevent-websocket
 greenlet
 gunicorn
 lxml
diff --git a/supervisord.conf b/supervisord.conf
index 7e2992d02..64b74eb6a 100644
--- a/supervisord.conf
+++ b/supervisord.conf
@@ -5,7 +5,7 @@ logfile=/tmp/supervisord.log
 
 [program:service]
 directory=/service
-command=gunicorn files.__main__:app -k gevent -w 1 --reload -b 0.0.0.0:80 --max-requests 1000 --max-requests-jitter 500
+command=gunicorn files.__main__:app -k geventwebsocket.gunicorn.workers.GeventWebSocketWorker -w 1 --reload -b 0.0.0.0:80 --max-requests 1000 --max-requests-jitter 500
 stdout_logfile=/dev/stdout
 stdout_logfile_maxbytes=0
 stderr_logfile=/dev/stderr