chat improvements

files/routes/chat.py

@@ -13,16 +13,18 @@ if SITE in ('pcmemes.net', 'localhost'):
 	socketio = SocketIO(app, async_mode='gevent')
 	typing = []
 	online = []
+	messages = []
 
 	@app.get("/chat")
 	@auth_required
 	def chat( v):
-		return render_template("chat.html", v=v)
+		return render_template("chat.html", v=v, messages=messages)
 
 	@socketio.on('speak')
 	@limiter.limit("5/second;30/minute")
 	@auth_required
 	def speak(data, v):
+		global messages
 		data = data[:1000].strip()
 		if not data: abort(403)
 
@@ -34,6 +36,8 @@ if SITE in ('pcmemes.net', 'localhost'):
 			"time": time.strftime("%d %b %Y at %H:%M:%S", time.gmtime(int(time.time())))
 		}
 
+		messages.append(data)
+		messages = messages[:20]
 		emit('speak', data, broadcast=True)
 		return '', 204
 

files/templates/chat.html

@@ -22,7 +22,7 @@
 			</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">
+					<img class="mobile-avatar profile-pic-30 mr-1 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>
@@ -33,9 +33,27 @@
 	</div>
 </div>
 
-<div class="container p-md-0 chat-container">
+<div class="container py-0 chat-container">
 	<div id="chat-window">
 		<div id="chat-text" class="fullchat">
+			{% for m in messages %}
+				<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" src="{{m['avatar']}}">
+						</span>
+						<div class="pl-md-3 text-muted">
+							<div>
+								<img src="{{m['avatar']}}" class="mobile-avatar profile-pic-30 mr-1 d-inline-block d-md-none" data-toggle="tooltip" data-placement="right">
+								<a class="font-weight-bold text-black userlink" style="color:#{{m['namecolor']}}" target="_blank" href="/@{{m['username']}}">{{m['username']}}</a>
+								<div style="overflow:hidden">
+									<span class="chat-message text-black text-break">{{m['text'] | safe}}</span>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>		
+			{% endfor %}
 		</div>
 		<div id="system-template">
 			<div class="system-line">
@@ -81,6 +99,14 @@
 		background-color: var(--primary55);
 		border-radius: 5px;
 	}
+
+	.profile-pic-30 {
+	width: 30px;
+	height: 30px;
+	border-radius: 50%;
+	text-align: center;
+	object-fit: cover;
+	}
 </style>
 
 <script>
@@ -95,6 +121,8 @@
 	let is_typing = false;
 	let alert=true;
 
+	box.scrollTo(0, box.scrollHeight)
+
 	function flash(){
 		let title = document.getElementsByTagName('title')[0]
 		if (notifs >= 1 && !focused){
@@ -134,6 +162,7 @@
 
 		scrolled_down = (box.scrollHeight - box.scrollTop <= window.innerHeight-109)
 		document.getElementsByClassName('desktop-avatar')[0].src = json['avatar']
+		document.getElementsByClassName('mobile-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']
@@ -149,6 +178,7 @@
 		{
 			socket.emit('speak', text);
 			textbox.value = ''
+			textbox.style.height = '40px'
 			is_typing = false
 			socket.emit('typing', false);
 		}

files/templates/default.html

@@ -234,19 +234,21 @@
 	{% if '@' not in request.path %}		
 		{% if v %}
 			
-			{% if sub %}
+			{% if request.path != '/chat' %}
-				<img alt="/h/{{sub.name}} banner" role="button" data-bs-toggle="modal" data-bs-target="#expandImageModal" onclick="expandDesktopImage('{{sub.banner_url}}')" loading="lazy" src="{{sub.banner_url}}" width=100% style="object-fit:cover;max-height:25vw">
+				{% if sub %}
-			{% elif SITE_NAME == 'Drama' %}
+					<img alt="/h/{{sub.name}} banner" role="button" data-bs-toggle="modal" data-bs-target="#expandImageModal" onclick="expandDesktopImage('{{sub.banner_url}}')" loading="lazy" src="{{sub.banner_url}}" width=100% style="object-fit:cover;max-height:25vw">
-				{% set path = "assets/images/" + SITE_NAME + "/banners" %}
+				{% elif SITE_NAME == 'Drama' %}
-				{% set image = "/static/" + path + "/" + listdir('files/' + path)|random() + '?v=23' %}
+					{% set path = "assets/images/" + SITE_NAME + "/banners" %}
+					{% set image = "/static/" + path + "/" + listdir('files/' + path)|random() + '?v=23' %}
 
-				<a href="https://secure.transequality.org/site/Donation2?df_id=1480">
+					<a href="https://secure.transequality.org/site/Donation2?df_id=1480">
-					<img alt="site banner" src="{{image}}" width="100%">
+						<img alt="site banner" src="{{image}}" width="100%">
-				</a>
+					</a>
-			{% elif request.path != '/chat' %}
+				{% else %}
-				<a href="/">
+					<a href="/">
-					<img alt="site banner" src="/static/assets/images/{{SITE_NAME}}/banner.webp?v=1042" width="100%">
+						<img alt="site banner" src="/static/assets/images/{{SITE_NAME}}/banner.webp?v=1042" width="100%">
-				</a>	
+					</a>	
+				{% endif %}
 			{% endif %}
 
 		{% else %}
@@ -268,7 +270,7 @@
 {% block postNav %}
 {% endblock %}
 
-<div class="container{% if request.path=='/' or '/post/' in request.path or '/comment/' in request.path %} transparent{% endif %}">
+<div class="container {% if request.path=='/' or '/post/' in request.path or '/comment/' in request.path %}transparent{% elif request.path == '/chat' %}pb-0{% endif %}">
 	<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">