596 lines
21 KiB
JavaScript
596 lines
21 KiB
JavaScript
(async () => {
|
|
// check notification permission
|
|
// This is useful to alert people that they should do something
|
|
await Notification.requestPermission()
|
|
})()
|
|
|
|
const MAX_MESSAGES = 50
|
|
|
|
const channel_categories = ['general', 'tournament', 'team', 'private']
|
|
let channels = {}
|
|
let messages = {}
|
|
let selected_channel_id = null
|
|
|
|
/**
|
|
* Display a new notification with the given title and the given body.
|
|
* @param title The title of the notification
|
|
* @param body The body of the notification
|
|
* @param timeout The time (in milliseconds) after that the notification automatically closes. 0 to make indefinite. Default to 5000 ms.
|
|
* @return Notification
|
|
*/
|
|
function showNotification(title, body, timeout = 5000) {
|
|
Notification.requestPermission().then((status) => {
|
|
if (status === 'granted')
|
|
new Notification(title, {'body': body, 'icon': "/static/tfjm-192.png"})
|
|
})
|
|
}
|
|
|
|
function selectChannel(channel_id) {
|
|
let channel = channels[channel_id]
|
|
if (!channel) {
|
|
console.error('Channel not found:', channel_id)
|
|
return
|
|
}
|
|
|
|
selected_channel_id = channel_id
|
|
localStorage.setItem('chat.last-channel-id', channel_id)
|
|
|
|
let channelTitle = document.getElementById('channel-title')
|
|
channelTitle.innerText = channel['name']
|
|
|
|
let messageInput = document.getElementById('input-message')
|
|
messageInput.disabled = !channel['write_access']
|
|
|
|
redrawMessages()
|
|
}
|
|
|
|
function sendMessage() {
|
|
let messageInput = document.getElementById('input-message')
|
|
let message = messageInput.value
|
|
messageInput.value = ''
|
|
|
|
if (!message) {
|
|
return
|
|
}
|
|
|
|
socket.send(JSON.stringify({
|
|
'type': 'send_message',
|
|
'channel_id': selected_channel_id,
|
|
'content': message,
|
|
}))
|
|
}
|
|
|
|
function setChannels(new_channels) {
|
|
channels = {}
|
|
let categoryLists = {}
|
|
for (let category of channel_categories) {
|
|
categoryLists[category] = document.getElementById(`nav-${category}-channels-tab`)
|
|
categoryLists[category].innerHTML = ''
|
|
categoryLists[category].parentElement.classList.add('d-none')
|
|
}
|
|
|
|
for (let channel of new_channels)
|
|
addChannel(channel, categoryLists)
|
|
|
|
if (new_channels && (!selected_channel_id || !channels[selected_channel_id])) {
|
|
let last_channel_id = parseInt(localStorage.getItem('chat.last-channel-id'))
|
|
if (last_channel_id && channels[last_channel_id])
|
|
selectChannel(last_channel_id)
|
|
else
|
|
selectChannel(Object.keys(channels)[0])
|
|
}
|
|
}
|
|
|
|
async function addChannel(channel, categoryLists) {
|
|
channels[channel['id']] = channel
|
|
if (!messages[channel['id']])
|
|
messages[channel['id']] = new Map()
|
|
|
|
let categoryList = categoryLists[channel['category']]
|
|
categoryList.parentElement.classList.remove('d-none')
|
|
|
|
let navItem = document.createElement('li')
|
|
navItem.classList.add('list-group-item', 'tab-channel')
|
|
navItem.id = `tab-channel-${channel['id']}`
|
|
navItem.setAttribute('data-bs-dismiss', 'offcanvas')
|
|
navItem.onclick = () => selectChannel(channel['id'])
|
|
categoryList.appendChild(navItem)
|
|
|
|
let channelButton = document.createElement('button')
|
|
channelButton.classList.add('nav-link')
|
|
channelButton.type = 'button'
|
|
channelButton.innerText = channel['name']
|
|
navItem.appendChild(channelButton)
|
|
|
|
let unreadBadge = document.createElement('span')
|
|
unreadBadge.classList.add('badge', 'rounded-pill', 'text-bg-light', 'ms-2')
|
|
unreadBadge.id = `unread-messages-${channel['id']}`
|
|
unreadBadge.innerText = channel.unread_messages || 0
|
|
if (!channel.unread_messages)
|
|
unreadBadge.classList.add('d-none')
|
|
channelButton.appendChild(unreadBadge)
|
|
|
|
if (document.getElementById('sort-by-unread-switch').checked)
|
|
navItem.style.order = `${-channel.unread_messages}`
|
|
|
|
fetchMessages(channel['id'])
|
|
}
|
|
|
|
function receiveMessage(message) {
|
|
let scrollableContent = document.getElementById('chat-messages')
|
|
let isScrolledToBottom = scrollableContent.scrollHeight - scrollableContent.clientHeight <= scrollableContent.scrollTop + 1
|
|
|
|
messages[message['channel_id']].set(message['id'], message)
|
|
redrawMessages()
|
|
|
|
// Scroll to bottom if the user was already at the bottom
|
|
if (isScrolledToBottom)
|
|
scrollableContent.scrollTop = scrollableContent.scrollHeight - scrollableContent.clientHeight
|
|
|
|
if (message['content'].includes("@everyone"))
|
|
showNotification(channels[message['channel_id']]['name'], `${message['author']} : ${message['content']}`)
|
|
}
|
|
|
|
function editMessage(data) {
|
|
messages[data['channel_id']].get(data['id'])['content'] = data['content']
|
|
redrawMessages()
|
|
}
|
|
|
|
function deleteMessage(data) {
|
|
messages[data['channel_id']].delete(data['id'])
|
|
redrawMessages()
|
|
}
|
|
|
|
function fetchMessages(channel_id, offset = 0, limit = MAX_MESSAGES) {
|
|
socket.send(JSON.stringify({
|
|
'type': 'fetch_messages',
|
|
'channel_id': channel_id,
|
|
'offset': offset,
|
|
'limit': limit,
|
|
}))
|
|
}
|
|
|
|
function fetchPreviousMessages() {
|
|
let channel_id = selected_channel_id
|
|
let offset = messages[channel_id].size
|
|
fetchMessages(channel_id, offset, MAX_MESSAGES)
|
|
}
|
|
|
|
function receiveFetchedMessages(data) {
|
|
let channel_id = data['channel_id']
|
|
let new_messages = data['messages']
|
|
|
|
if (!messages[channel_id])
|
|
messages[channel_id] = new Map()
|
|
|
|
for (let message of new_messages)
|
|
messages[channel_id].set(message['id'], message)
|
|
|
|
// Sort messages by timestamp
|
|
messages[channel_id] = new Map([...messages[channel_id].values()]
|
|
.sort((a, b) => new Date(a['timestamp']) - new Date(b['timestamp']))
|
|
.map(message => [message['id'], message]))
|
|
|
|
redrawMessages()
|
|
}
|
|
|
|
function markMessageAsRead(data) {
|
|
for (let message of data['messages']) {
|
|
let stored_message = messages[message['channel_id']].get(message['id'])
|
|
if (stored_message)
|
|
stored_message['read'] = true
|
|
}
|
|
redrawMessages()
|
|
updateUnreadBadges(data['unread_messages'])
|
|
}
|
|
|
|
function updateUnreadBadges(unreadMessages) {
|
|
const sortByUnread = document.getElementById('sort-by-unread-switch').checked
|
|
|
|
for (let channel of Object.values(channels)) {
|
|
let unreadMessagesChannel = unreadMessages[channel['id']] || 0
|
|
channel.unread_messages = unreadMessagesChannel
|
|
|
|
let unreadBadge = document.getElementById(`unread-messages-${channel['id']}`)
|
|
unreadBadge.innerText = unreadMessagesChannel
|
|
if (unreadMessagesChannel)
|
|
unreadBadge.classList.remove('d-none')
|
|
else
|
|
unreadBadge.classList.add('d-none')
|
|
|
|
if (sortByUnread)
|
|
document.getElementById(`tab-channel-${channel['id']}`).style.order = `${-unreadMessagesChannel}`
|
|
}
|
|
}
|
|
|
|
function startPrivateChat(data) {
|
|
let channel = data['channel']
|
|
if (!channel) {
|
|
console.error('Private chat not found:', data)
|
|
return
|
|
}
|
|
|
|
if (!channels[channel['id']]) {
|
|
channels[channel['id']] = channel
|
|
messages[channel['id']] = new Map()
|
|
setChannels(Object.values(channels))
|
|
}
|
|
|
|
selectChannel(channel['id'])
|
|
}
|
|
|
|
function redrawMessages() {
|
|
let messageList = document.getElementById('message-list')
|
|
messageList.innerHTML = ''
|
|
|
|
let lastMessage = null
|
|
let lastContentDiv = null
|
|
|
|
for (let message of messages[selected_channel_id].values()) {
|
|
if (lastMessage && lastMessage['author'] === message['author']) {
|
|
let lastTimestamp = new Date(lastMessage['timestamp'])
|
|
let newTimestamp = new Date(message['timestamp'])
|
|
if ((newTimestamp - lastTimestamp) / 1000 < 60 * 10) {
|
|
let messageContentDiv = document.createElement('div')
|
|
messageContentDiv.classList.add('message')
|
|
messageContentDiv.setAttribute('data-message-id', message['id'])
|
|
lastContentDiv.appendChild(messageContentDiv)
|
|
let messageContentSpan = document.createElement('span')
|
|
messageContentSpan.innerHTML = markdownToHTML(message['content'])
|
|
messageContentDiv.appendChild(messageContentSpan)
|
|
|
|
registerMessageContextMenu(message, messageContentDiv, messageContentSpan)
|
|
continue
|
|
}
|
|
}
|
|
|
|
let messageElement = document.createElement('li')
|
|
messageElement.classList.add('list-group-item')
|
|
messageList.appendChild(messageElement)
|
|
|
|
let authorDiv = document.createElement('div')
|
|
messageElement.appendChild(authorDiv)
|
|
|
|
let authorSpan = document.createElement('span')
|
|
authorSpan.classList.add('text-muted', 'fw-bold')
|
|
authorSpan.innerText = message['author']
|
|
authorDiv.appendChild(authorSpan)
|
|
|
|
registerSendPrivateMessageContextMenu(message, authorDiv, authorSpan)
|
|
|
|
let dateSpan = document.createElement('span')
|
|
dateSpan.classList.add('text-muted', 'float-end')
|
|
dateSpan.innerText = new Date(message['timestamp']).toLocaleString()
|
|
authorDiv.appendChild(dateSpan)
|
|
|
|
let contentDiv = document.createElement('div')
|
|
messageElement.appendChild(contentDiv)
|
|
|
|
let messageContentDiv = document.createElement('div')
|
|
messageContentDiv.classList.add('message')
|
|
messageContentDiv.setAttribute('data-message-id', message['id'])
|
|
contentDiv.appendChild(messageContentDiv)
|
|
let messageContentSpan = document.createElement('span')
|
|
messageContentSpan.innerHTML = markdownToHTML(message['content'])
|
|
messageContentDiv.appendChild(messageContentSpan)
|
|
|
|
registerMessageContextMenu(message, messageContentDiv, messageContentSpan)
|
|
|
|
lastMessage = message
|
|
lastContentDiv = contentDiv
|
|
}
|
|
|
|
let fetchMoreButton = document.getElementById('fetch-previous-messages')
|
|
if (!messages[selected_channel_id].size || messages[selected_channel_id].size % MAX_MESSAGES !== 0)
|
|
fetchMoreButton.classList.add('d-none')
|
|
else
|
|
fetchMoreButton.classList.remove('d-none')
|
|
|
|
messageList.dispatchEvent(new CustomEvent('updatemessages'))
|
|
}
|
|
|
|
function markdownToHTML(text) {
|
|
let safeText = text.replace(/&/g, "&")
|
|
.replace(/</g, "<")
|
|
.replace(/>/g, ">")
|
|
.replace(/"/g, """)
|
|
.replace(/'/g, "'")
|
|
let lines = safeText.split('\n')
|
|
let htmlLines = []
|
|
for (let line of lines) {
|
|
let htmlLine = line
|
|
.replaceAll(/_(.*)_/gim, '<span class="text-decoration-underline">$1</span>') // Underline
|
|
.replaceAll(/\*\*(.*)\*\*/gim, '<span class="fw-bold">$1</span>') // Bold
|
|
.replaceAll(/\*(.*)\*/gim, '<span class="fst-italic">$1</span>') // Italic
|
|
.replaceAll(/`(.*)`/gim, '<pre>$1</pre>') // Code
|
|
.replaceAll(/(https?:\/\/\S+)/g, '<a href="$1" target="_blank">$1</a>') // Links
|
|
htmlLines.push(htmlLine)
|
|
}
|
|
return htmlLines.join('<br>')
|
|
}
|
|
|
|
function removeAllPopovers() {
|
|
for (let popover of document.querySelectorAll('*[aria-describedby*="popover"]')) {
|
|
let instance = bootstrap.Popover.getInstance(popover)
|
|
if (instance)
|
|
instance.dispose()
|
|
}
|
|
}
|
|
|
|
function registerSendPrivateMessageContextMenu(message, div, span) {
|
|
div.addEventListener('contextmenu', (menu_event) => {
|
|
menu_event.preventDefault()
|
|
removeAllPopovers()
|
|
const popover = bootstrap.Popover.getOrCreateInstance(span, {
|
|
'title': message['author'],
|
|
'content': `<a id="send-private-message-link-${message['id']}" class="nav-link" href="#" tabindex="0">Envoyer un message privé</a>`,
|
|
'html': true,
|
|
})
|
|
popover.show()
|
|
|
|
document.getElementById('send-private-message-link-' + message['id']).addEventListener('click', event => {
|
|
event.preventDefault()
|
|
popover.dispose()
|
|
socket.send(JSON.stringify({
|
|
'type': 'start_private_chat',
|
|
'user_id': message['author_id'],
|
|
}))
|
|
})
|
|
})
|
|
}
|
|
|
|
function registerMessageContextMenu(message, div, span) {
|
|
div.addEventListener('contextmenu', (menu_event) => {
|
|
menu_event.preventDefault()
|
|
removeAllPopovers()
|
|
let content = `<a id="send-private-message-link-msg-${message['id']}" class="nav-link" href="#" tabindex="0">Envoyer un message privé</a>`
|
|
|
|
let has_right_to_edit = message['author_id'] === USER_ID || IS_ADMIN
|
|
if (has_right_to_edit) {
|
|
content += `<hr class="my-1">`
|
|
content += `<a id="edit-message-${message['id']}" class="nav-link" href="#" tabindex="0">Modifier</a>`
|
|
content += `<a id="delete-message-${message['id']}" class="nav-link" href="#" tabindex="0">Supprimer</a>`
|
|
}
|
|
|
|
const popover = bootstrap.Popover.getOrCreateInstance(span, {
|
|
'content': content,
|
|
'html': true,
|
|
'placement': 'bottom',
|
|
})
|
|
popover.show()
|
|
|
|
document.getElementById('send-private-message-link-msg-' + message['id']).addEventListener('click', event => {
|
|
event.preventDefault()
|
|
popover.dispose()
|
|
socket.send(JSON.stringify({
|
|
'type': 'start_private_chat',
|
|
'user_id': message['author_id'],
|
|
}))
|
|
})
|
|
|
|
if (has_right_to_edit) {
|
|
document.getElementById('edit-message-' + message['id']).addEventListener('click', event => {
|
|
event.preventDefault()
|
|
popover.dispose()
|
|
let new_message = prompt("Modifier le message", message['content'])
|
|
if (new_message) {
|
|
socket.send(JSON.stringify({
|
|
'type': 'edit_message',
|
|
'message_id': message['id'],
|
|
'content': new_message,
|
|
}))
|
|
}
|
|
})
|
|
|
|
document.getElementById('delete-message-' + message['id']).addEventListener('click', event => {
|
|
event.preventDefault()
|
|
popover.dispose()
|
|
if (confirm(`Supprimer le message ?\n${message['content']}`)) {
|
|
socket.send(JSON.stringify({
|
|
'type': 'delete_message',
|
|
'message_id': message['id'],
|
|
}))
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
function toggleFullscreen() {
|
|
let chatContainer = document.getElementById('chat-container')
|
|
if (!chatContainer.getAttribute('data-fullscreen')) {
|
|
chatContainer.setAttribute('data-fullscreen', 'true')
|
|
chatContainer.classList.add('position-absolute', 'top-0', 'start-0', 'vh-100', 'z-3')
|
|
window.history.replaceState({}, null, `?fullscreen=1`)
|
|
}
|
|
else {
|
|
chatContainer.removeAttribute('data-fullscreen')
|
|
chatContainer.classList.remove('position-absolute', 'top-0', 'start-0', 'vh-100', 'z-3')
|
|
window.history.replaceState({}, null, `?fullscreen=0`)
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
document.addEventListener('click', removeAllPopovers)
|
|
|
|
document.getElementById('sort-by-unread-switch').addEventListener('change', event => {
|
|
const sortByUnread = event.target.checked
|
|
for (let channel of Object.values(channels)) {
|
|
let item = document.getElementById(`tab-channel-${channel['id']}`)
|
|
if (sortByUnread)
|
|
item.style.order = `${-channel.unread_messages}`
|
|
else
|
|
item.style.removeProperty('order')
|
|
}
|
|
|
|
localStorage.setItem('chat.sort-by-unread', sortByUnread)
|
|
})
|
|
|
|
if (localStorage.getItem('chat.sort-by-unread') === 'true') {
|
|
document.getElementById('sort-by-unread-switch').checked = true
|
|
document.getElementById('sort-by-unread-switch').dispatchEvent(new Event('change'))
|
|
}
|
|
|
|
/**
|
|
* Process the received data from the server.
|
|
* @param data The received message
|
|
*/
|
|
function processMessage(data) {
|
|
switch (data['type']) {
|
|
case 'fetch_channels':
|
|
setChannels(data['channels'])
|
|
break
|
|
case 'send_message':
|
|
receiveMessage(data)
|
|
break
|
|
case 'edit_message':
|
|
editMessage(data)
|
|
break
|
|
case 'delete_message':
|
|
deleteMessage(data)
|
|
break
|
|
case 'fetch_messages':
|
|
receiveFetchedMessages(data)
|
|
break
|
|
case 'mark_read':
|
|
markMessageAsRead(data)
|
|
break
|
|
case 'start_private_chat':
|
|
startPrivateChat(data)
|
|
break
|
|
default:
|
|
console.log(data)
|
|
console.error('Unknown message type:', data['type'])
|
|
break
|
|
}
|
|
}
|
|
|
|
function setupSocket(nextDelay = 1000) {
|
|
// Open a global websocket
|
|
socket = new WebSocket(
|
|
(document.location.protocol === 'https:' ? 'wss' : 'ws') + '://' + window.location.host + '/ws/chat/'
|
|
)
|
|
let socketOpen = false
|
|
|
|
// Listen on websockets and process messages from the server
|
|
socket.addEventListener('message', e => {
|
|
// Parse received data as JSON
|
|
const data = JSON.parse(e.data)
|
|
|
|
processMessage(data)
|
|
})
|
|
|
|
// Manage errors
|
|
socket.addEventListener('close', e => {
|
|
console.error('Chat socket closed unexpectedly, restarting…')
|
|
setTimeout(() => setupSocket(socketOpen ? 1000 : 2 * nextDelay), nextDelay)
|
|
})
|
|
|
|
socket.addEventListener('open', e => {
|
|
socketOpen = true
|
|
socket.send(JSON.stringify({
|
|
'type': 'fetch_channels',
|
|
}))
|
|
})
|
|
}
|
|
|
|
function setupSwipeOffscreen() {
|
|
const offcanvas = new bootstrap.Offcanvas(document.getElementById('channelSelector'))
|
|
|
|
let lastX = null
|
|
document.addEventListener('touchstart', (event) => {
|
|
if (event.touches.length === 1)
|
|
lastX = event.touches[0].clientX
|
|
})
|
|
document.addEventListener('touchmove', (event) => {
|
|
if (event.touches.length === 1 && lastX !== null) {
|
|
const diff = event.touches[0].clientX - lastX
|
|
if (diff > window.innerWidth / 10 && lastX < window.innerWidth / 4) {
|
|
offcanvas.show()
|
|
lastX = null
|
|
}
|
|
else if (diff < -window.innerWidth / 10) {
|
|
offcanvas.hide()
|
|
lastX = null
|
|
}
|
|
}
|
|
})
|
|
document.addEventListener('touchend', () => {
|
|
lastX = null
|
|
})
|
|
}
|
|
|
|
function setupReadTracker() {
|
|
const scrollableContent = document.getElementById('chat-messages')
|
|
const messagesList = document.getElementById('message-list')
|
|
let markReadBuffer = []
|
|
let markReadTimeout = null
|
|
|
|
scrollableContent.addEventListener('scroll', () => {
|
|
if (scrollableContent.clientHeight - scrollableContent.scrollTop === scrollableContent.scrollHeight
|
|
&& !document.getElementById('fetch-previous-messages').classList.contains('d-none')) {
|
|
// If the user is at the top of the chat, fetch previous messages
|
|
fetchPreviousMessages()}
|
|
|
|
markVisibleMessagesAsRead()
|
|
})
|
|
|
|
messagesList.addEventListener('updatemessages', () => markVisibleMessagesAsRead())
|
|
|
|
function markVisibleMessagesAsRead() {
|
|
let viewport = scrollableContent.getBoundingClientRect()
|
|
|
|
for (let item of messagesList.querySelectorAll('.message')) {
|
|
let message = messages[selected_channel_id].get(parseInt(item.getAttribute('data-message-id')))
|
|
if (!message.read) {
|
|
let rect = item.getBoundingClientRect()
|
|
if (rect.top >= viewport.top && rect.bottom <= viewport.bottom) {
|
|
message.read = true
|
|
markReadBuffer.push(message['id'])
|
|
if (markReadTimeout)
|
|
clearTimeout(markReadTimeout)
|
|
markReadTimeout = setTimeout(() => {
|
|
socket.send(JSON.stringify({
|
|
'type': 'mark_read',
|
|
'message_ids': markReadBuffer,
|
|
}))
|
|
markReadBuffer = []
|
|
markReadTimeout = null
|
|
}, 3000)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
markVisibleMessagesAsRead()
|
|
}
|
|
|
|
function setupPWAPrompt() {
|
|
let deferredPrompt = null
|
|
|
|
window.addEventListener("beforeinstallprompt", (e) => {
|
|
e.preventDefault()
|
|
deferredPrompt = e
|
|
let btn = document.getElementById('install-app-home-screen')
|
|
let alert = document.getElementById('alert-download-chat-app')
|
|
btn.classList.remove('d-none')
|
|
alert.classList.remove('d-none')
|
|
btn.onclick = function () {
|
|
deferredPrompt.prompt()
|
|
deferredPrompt.userChoice.then((choiceResult) => {
|
|
if (choiceResult.outcome === 'accepted') {
|
|
deferredPrompt = null
|
|
btn.classList.add('d-none')
|
|
alert.classList.add('d-none')
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
setupSocket()
|
|
setupSwipeOffscreen()
|
|
setupReadTracker()
|
|
setupPWAPrompt()
|
|
})
|