speakmore-2.0/static/js/common.js

// common.js
const md = window.markdownit();

const contextMenu = document.getElementById('context-menu');
let currentMessageId = null;
let currentMessageText = null;

function showToast(message) {
    const toast = document.getElementById('toast');
    const toastMessage = document.getElementById('toast-message');
    toastMessage.textContent = message;
    toast.classList.add('show');
    setTimeout(() => {
        toast.classList.remove('show');
    }, 3000);
}

function scrollToBottom(element) {
    element.scrollTop = element.scrollHeight;
}

function shouldShowUsername(previousTimestamp, currentTimestamp) {
    const tenMinutes = 10 * 60 * 1000;
    return (currentTimestamp - previousTimestamp) > tenMinutes;
}

function formatLocalTime(utcTimestamp) {
    const date = new Date(utcTimestamp);
    const localDate = new Date(date.getTime() - date.getTimezoneOffset() * 60000);

    const now = new Date();
    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
    const yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);

    const timeFormatter = { hour: '2-digit', minute: '2-digit' };
    const dateFormatter = { year: 'numeric', month: '2-digit', day: '2-digit' };

    let formattedTime;
    if (localDate >= today) {
        formattedTime = `Today at ${localDate.toLocaleTimeString(undefined, timeFormatter)}`;
    } else if (localDate >= yesterday) {
        formattedTime = `Yesterday at ${localDate.toLocaleTimeString(undefined, timeFormatter)}`;
    } else {
        formattedTime = `${localDate.toLocaleDateString(undefined, dateFormatter)} at ${localDate.toLocaleTimeString(undefined, timeFormatter)}`;
    }
    return formattedTime;
}

function isImageUrl(url) {
    return /\.(jpg|jpeg|png|gif|bmp|svg)$/i.test(url);
}

function appendMessage(messagesList, msg, showUsername, senderProfilePicture) {
    const currentTimestamp = new Date(msg.timestamp).getTime();

    const newMessage = document.createElement('div');
    newMessage.classList.add('message');
    newMessage.dataset.messageId = msg.id;
    newMessage.dataset.messageText = msg.content;

    if (showUsername) {
        const usernameElement = document.createElement('div');
        usernameElement.classList.add('message-sender');
        if (msg.sender === username) {
            usernameElement.classList.add('message-myself-sender');
        }
        const profilePicUrl = senderProfilePicture ? `/cdn/${senderProfilePicture}` : '/cdn/default_profile_picture.png';
        usernameElement.innerHTML = `
            <img src="${profilePicUrl}" alt="${msg.sender}" class="profile-picture">
            <strong>${msg.sender}</strong>
            <div class="message-sender-timestamp">${formatLocalTime(msg.timestamp)}</div>`;
        messagesList.appendChild(usernameElement);
    }

    if (msg.content_type === 'text') {
        if (isImageUrl(msg.content)) {
            newMessage.innerHTML = `<img src="${msg.content}" alt="Image" class="enhanceable-image" style="max-width: 200px; max-height: 200px;" /><div class="timestamp">${formatLocalTime(msg.timestamp)}</div>`;
        } else {
            newMessage.innerHTML = `${md.render(msg.content)}<div class="timestamp">${formatLocalTime(msg.timestamp)}</div>`;
        }
    } else if (msg.content_type === 'file') {
        const isImage = isImageUrl(msg.content);
        const isVideo = /\.(mp4|webm|ogg)$/i.test(msg.content);
        if (isImage) {
            newMessage.innerHTML = `<img src="/cdn/${msg.content}" alt="Image" class="enhanceable-image" style="max-width: 200px; max-height: 200px;" /><div class="timestamp">${formatLocalTime(msg.timestamp)}</div>`;
        } else if (isVideo) {
            newMessage.innerHTML = `<video controls style="max-width: 200px; max-height: 200px;"><source src="/cdn/${msg.content}" type="video/mp4"></video><div class="timestamp">${formatLocalTime(msg.timestamp)}</div>`;
        } else {
            newMessage.innerHTML = `<a href="/cdn/${msg.content}" target="_blank">Download File</a><div class="timestamp">${formatLocalTime(msg.timestamp)}</div>`;
        }
    }

    messagesList.appendChild(newMessage);
    scrollToBottom(messagesList);
}

document.addEventListener('contextmenu', function (event) {
    const messageElement = event.target.closest('.message');
    if (messageElement) {
        event.preventDefault();
        currentMessageId = messageElement.dataset.messageId;
        currentMessageText = messageElement.dataset.messageText;

        contextMenu.style.top = `${event.clientY}px`;
        contextMenu.style.left = `${event.clientX}px`;
        contextMenu.style.display = 'block';
    } else {
        contextMenu.style.display = 'none';
    }
});

document.getElementById('copy-text').addEventListener('click', function () {
    if (currentMessageText) {
        navigator.clipboard.writeText(currentMessageText).then(() => {
            showToast('Text copied to clipboard');
        });
    }
    contextMenu.style.display = 'none';
});

document.getElementById('copy-id').addEventListener('click', function () {
    if (currentMessageId) {
        navigator.clipboard.writeText(currentMessageId).then(() => {
            showToast('Message ID copied to clipboard');
        });
    }
    contextMenu.style.display = 'none';
});

contextMenu.addEventListener('contextmenu', function (event) {
    event.preventDefault();
});

document.addEventListener('click', function () {
    contextMenu.style.display = 'none';
});