plateforme-tfjm2/chat/static/chat.js

(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) {
    console.log(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.innerText = 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.innerText = 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 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()
})