rDrama/files/assets/js/chat.js

function formatDate(d) {
	return d.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})
}

for (const e of timestamps) {
	e.innerHTML = formatDate(new Date(e.dataset.time*1000));
};

const ua = window.navigator.userAgent

const socket = io()

const chatline = document.getElementsByClassName('chat-line')[0]
const box = document.getElementById('chat-window')
const ta = document.getElementById('input-text-chat')

const vid = document.getElementById('vid').value
const slurreplacer = document.getElementById('slurreplacer').value

let is_typing = false;

const blocked_user_ids = document.getElementById('blocked_user_ids').value.split(', ')

socket.on('speak', function(json) {
	if (blocked_user_ids.includes(json.user_id.toString())) {
		return
	}

	let text
	let text_html

	if (slurreplacer != '0') {
		text = json.text_censored
		text_html = json.text_html_censored
	}
	else {
		text = json.text
		text_html = json.text_html
	}

	chatline.classList.remove('chat-mention');
	if (text_html.includes(`<a href="/id/${vid}"`)){
		chatline.classList.add('chat-mention');
	}

	notifs = notifs + 1;
	if (notifs == 1) {
		flash();
	}

	const users = document.getElementsByClassName('user_id');
	const last_user = users[users.length-1].value;
	const scrolled_down = (box.scrollHeight - box.scrollTop <= innerHeight)

	if (last_user != json.user_id) {
		document.getElementsByClassName('avatar-pic')[0].src = '/pp/' + json.user_id

		if (json.hat)
			document.getElementsByClassName('avatar-hat')[0].src = json.hat + "?h=7"
		else
			document.getElementsByClassName('avatar-hat')[0].removeAttribute("src")

		const userlink = document.getElementsByClassName('userlink')[0]

		userlink.href = '/@' + json.username
		userlink.style.color = '#' + json.namecolor

		const username = document.getElementsByClassName('username')[0]
		username.textContent = json.username
		if (json.patron) {
			username.classList.add('patron')
			username.style.backgroundColor = '#' + json.namecolor
		}
		else {
			username.classList.remove('patron')
			username.style.backgroundColor = null
		}

		if (json.pride_username)
			username.setAttribute("pride_username", "")
		else
			username.removeAttribute("pride_username")

		document.getElementsByClassName('user_id')[0].value = json.user_id

		document.getElementsByClassName('time')[0].innerHTML = formatDate(new Date(json.time*1000))
	}

	document.getElementsByClassName('chat-line')[0].id = json.id
	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, '').replace(/ loading="lazy"/g, '')

	document.getElementsByClassName('quotes')[0].classList.add("d-none")
	if (json.quotes) {
		const quoted = document.getElementById(json.quotes)
		if (quoted) {
			const quoted_user = quoted.parentElement.querySelector('.user_id').value
			if (quoted_user == vid){
				chatline.classList.add('chat-mention');
			}
			document.getElementsByClassName('quotes')[0].classList.remove("d-none")
			document.getElementsByClassName('QuotedMessageLink')[0].href = '#' + json.quotes
			document.getElementsByClassName('QuotedUser')[0].innerHTML = quoted.parentElement.querySelector('.userlink').textContent.trim()
			document.getElementsByClassName('QuotedMessage')[0].innerHTML = quoted.querySelector('.text').innerHTML
		}
	}

	let line = document.getElementsByClassName('chat-line')[0].cloneNode(true)
	register_new_elements(line);
	bs_trigger(line)
	if (last_user == json.user_id) {
		box.querySelector('.chat-group:last-child').append(line)
	}
	else {
		const chatgroup = document.getElementsByClassName('chat-group')[0].cloneNode(true)
		chatgroup.append(line)
		box.append(chatgroup)
	}

	const line2 = document.getElementById(json.id)
	register_new_elements(line2);
	bs_trigger(line2)

	if (scrolled_down || json.user_id == vid) {
		box.scrollTo(0, box.scrollHeight)
		setTimeout(function () {
			box.scrollTo(0, box.scrollHeight)
		}, 200);
		setTimeout(function () {
			box.scrollTo(0, box.scrollHeight)
		}, 500);
		setTimeout(function () {
			box.scrollTo(0, box.scrollHeight)
		}, 1000);		
	}
})

function send() {
	const text = ta.value.trim();
	const input = document.getElementById('file');
	const files = input.files;
	if (text || files)
	{
		let sending;
		if (files[0]) sending = files[0]
		else sending = ''
		socket.emit('speak', {
			"message": text,
			"quotes": document.getElementById('quotes_id').value,
			"file": sending,
		});
		ta.value = ''
		is_typing = false
		socket.emit('typing', false);
		autoExpand(ta);
		document.getElementById("quotes").classList.add("d-none")
		document.getElementById('quotes_id').value = null;
		oldfiles[ta.id] = new DataTransfer();
		input.value = null;

		input.previousElementSibling.className  = "fas fa-image";
		input.previousElementSibling.textContent = "";
	
		box.scrollTo(0, box.scrollHeight);
		setTimeout(function () {
			box.scrollTo(0, box.scrollHeight)
		}, 200);
		setTimeout(function () {
			box.scrollTo(0, box.scrollHeight)
		}, 500);
		setTimeout(function () {
			box.scrollTo(0, box.scrollHeight)
		}, 1000);		
	}
}


function quote(t) {
	document.getElementById("quotes").classList.remove("d-none")

	const text = t.parentElement.parentElement.getElementsByClassName("text")[0].innerHTML.replace(/\*/g,"\\*").split('\n').pop()
	document.getElementById('QuotedMessage').innerHTML = text

	const username = t.parentElement.parentElement.parentElement.parentElement.parentElement.getElementsByClassName('userlink')[0].textContent
	document.getElementById('QuotedUser').innerHTML = username.trim()

	const id = t.parentElement.parentElement.parentElement.parentElement.id
	document.getElementById('quotes_id').value = id
	document.getElementById('QuotedMessageLink').href = `#${id}`

	ta.focus()
}

ta.addEventListener("keydown", function(e) {
	if (e.key === 'Enter' && !e.shiftKey && !current_word) {
		e.preventDefault();
		send();
	}
})

socket.on('online', function(data){
	const online_li = data[0]
	const muted_li = Object.keys(data[1])

	document.getElementsByClassName('board-chat-count')[0].innerHTML = online_li.length
	document.getElementById('chat-count-header-bar').innerHTML = online_li.length
	const admin_level = parseInt(document.getElementById('admin_level').value)
	let online = ''
	let online2 = '<b>Users Online</b>'
	for (const u of online_li)
	{
		let patron = ''
		if (u[3])
			patron += ` class="patron chat-patron" style="background-color:#${u[2]}"`
		if (u[5])
			patron += " pride_username"

		online += `<li>`
		if (admin_level && muted_li.includes(u[1].toLowerCase()))
			online += '<b class="text-danger muted" data-bs-toggle="tooltip" title="Muted">X</b> '
		online += `<a class="font-weight-bold" target="_blank" href="/@${u[1]}" style="color:#${u[2]}"><img loading="lazy" class="mr-1" src="/pp/${u[4]}"><span${patron}>${u[1]}</span></a></li>`
		online2 += `<br>@${u[1]}`
	}

	const online_el = document.getElementById('online')
	if (online_el) {
		online_el.innerHTML = online
		bs_trigger(online_el)
	}

	document.getElementById('online2').setAttribute("data-bs-original-title", online2);
	document.getElementById('online3').innerHTML = online
	bs_trigger(document.getElementById('online3'))
})


let timer_id;
function remove_typing() {
	is_typing = false;
	socket.emit('typing', false);
}

ta.addEventListener("input", function() {
	text = ta.value
	if (!text && is_typing){
		is_typing = false;
		socket.emit('typing', false);
	}
	else if (text && !is_typing) {
		is_typing = true;
		socket.emit('typing', true);
		clearTimeout(timer_id)
		timer_id = setTimeout(remove_typing, 2000);
	}
})


socket.on('typing', function (users){
	if (users.length==0){
		document.getElementById('typing-indicator').innerHTML = '';
	}
	else if (users.length==1){
		document.getElementById('typing-indicator').innerHTML = '<b>'+users[0]+"</b> is typing...";
	}
	else if (users.length==2){
		document.getElementById('typing-indicator').innerHTML = '<b>'+users[0]+"</b> and <b>"+users[1]+"</b> are typing...";
	}
	else {
		document.getElementById('typing-indicator').innerHTML = '<b>'+users[0]+"</b>, <b>"+users[1]+"</b>, and <b>"+users[2]+"</b> are typing...";
	}
})


function del(t) {
	const chatline = t.parentElement.parentElement.parentElement.parentElement
	socket.emit('delete', chatline.id);
	chatline.remove()
}

socket.on('delete', function(text) {
	const text_spans = document.getElementsByClassName('text')
	for (const span of text_spans) {
		if (span.innerHTML == text)
		{
			span.parentElement.parentElement.parentElement.parentElement.parentElement.remove()
		}
	}
})

socket.on('refresh_chat', () => {
	location.reload()
})

document.addEventListener('click', function (e) {
	if (e.target.classList.contains('delconfirm')) {
		e.target.nextElementSibling.classList.remove('d-none');
		e.target.classList.add('d-none');
	}
	else {
		for (const btn of document.querySelectorAll('.delmsg:not(.d-none)')) {
			btn.classList.add('d-none');
			btn.previousElementSibling.classList.remove('d-none');
		}
	}

	if (e.target.id == "cancel") {
		document.getElementById("quotes").classList.add("d-none");
		document.getElementById('quotes_id').value = null;
	}
});


const input = document.getElementById('file')
function handle_files() {
	if (!input.files.length) return
	const char_limit = screen_width >= 768 ? 50 : 5;
	input.previousElementSibling.className  = "";
	input.previousElementSibling.textContent = input.files[0].name.substr(0, char_limit);
}

input.onchange = handle_files

document.onpaste = function(event) {
	input.files = structuredClone(event.clipboardData.files);
	handle_files()
}

function send_hearbeat() {
	socket.emit('heartbeat')
}
send_hearbeat()
setInterval(send_hearbeat, 20000);

box.scrollTo(0, box.scrollHeight)
setTimeout(function () {
	box.scrollTo(0, box.scrollHeight)
}, 200);
setTimeout(function () {
	box.scrollTo(0, box.scrollHeight)
}, 500);
setTimeout(function () {
	box.scrollTo(0, box.scrollHeight)
}, 1000);
setTimeout(function () {
	box.scrollTo(0, box.scrollHeight)
}, 1500);
document.addEventListener('DOMContentLoaded', function () {
	box.scrollTo(0, box.scrollHeight)
});