363 lines
17 KiB
JavaScript
363 lines
17 KiB
JavaScript
|
document.addEventListener('DOMContentLoaded', (event) => {
|
||
|
const socket = io();
|
||
|
const md = window.markdownit();
|
||
|
socket.emit('join_group', { group_id: groupId });
|
||
|
|
||
|
document.title = `Group Chat: ${groupName}`;
|
||
|
|
||
|
const messagesList = document.getElementById('messages');
|
||
|
const imageOverlay = document.getElementById('image-overlay');
|
||
|
const overlayImage = document.getElementById('overlay-image');
|
||
|
const contextMenu = document.getElementById('context-menu');
|
||
|
const toast = document.getElementById('toast');
|
||
|
const toastMessage = document.getElementById('toast-message');
|
||
|
let currentMessageId = null;
|
||
|
let currentMessageText = null;
|
||
|
|
||
|
function showToast(message) {
|
||
|
toastMessage.textContent = message;
|
||
|
toast.classList.add('show');
|
||
|
setTimeout(() => {
|
||
|
toast.classList.remove('show');
|
||
|
}, 3000);
|
||
|
}
|
||
|
|
||
|
function scrollToBottom() {
|
||
|
messagesList.scrollTop = messagesList.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);
|
||
|
}
|
||
|
|
||
|
let previousSender = null;
|
||
|
let previousTimestamp = 0;
|
||
|
|
||
|
socket.on('new_group_message', function(data) {
|
||
|
const currentTimestamp = new Date(data.timestamp).getTime();
|
||
|
const showUsername = previousSender !== data.sender || shouldShowUsername(previousTimestamp, currentTimestamp);
|
||
|
previousSender = data.sender;
|
||
|
previousTimestamp = currentTimestamp;
|
||
|
|
||
|
const newMessage = document.createElement('div');
|
||
|
newMessage.classList.add('message');
|
||
|
|
||
|
newMessage.dataset.messageId = data.id;
|
||
|
newMessage.dataset.messageText = data.content;
|
||
|
|
||
|
if (showUsername) {
|
||
|
const usernameElement = document.createElement('div');
|
||
|
usernameElement.classList.add('message-sender');
|
||
|
usernameElement.innerHTML = `<strong>${data.sender}</strong>:<div class="message-sender-timestamp">${formatLocalTime(data.timestamp)}</div>`;
|
||
|
messagesList.appendChild(usernameElement);
|
||
|
}
|
||
|
|
||
|
if (data.content_type === 'text') {
|
||
|
if (isImageUrl(data.content)) {
|
||
|
newMessage.innerHTML = `<img src="${data.content}" alt="Image" class="enhanceable-image" style="max-width: 300px; max-height: 300px;" /><div class="timestamp">${formatLocalTime(data.timestamp)}</div>`;
|
||
|
} else {
|
||
|
newMessage.innerHTML = `${md.render(data.content)}<div class="timestamp">${formatLocalTime(data.timestamp)}</div>`;
|
||
|
}
|
||
|
} else if (data.content_type === 'file') {
|
||
|
const isImage = isImageUrl(data.content);
|
||
|
const isVideo = /\.(mp4|webm|ogg)$/i.test(data.content);
|
||
|
if (isImage) {
|
||
|
newMessage.innerHTML = `<img src="/cdn/${data.content}" alt="Image" class="enhanceable-image" style="max-width: 300px; max-height: 300px;" /><div class="timestamp">${formatLocalTime(data.timestamp)}</div>`;
|
||
|
} else if (isVideo) {
|
||
|
newMessage.innerHTML = `<video controls style="max-width: 300px; max-height: 300px;"><source src="/cdn/${data.content}" type="video/mp4"></video><div class="timestamp">${formatLocalTime(data.timestamp)}</div>`;
|
||
|
} else {
|
||
|
newMessage.innerHTML = `<a href="/cdn/${data.content}" target="_blank">Download File</a><div class="timestamp">${formatLocalTime(data.timestamp)}</div>`;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
messagesList.appendChild(newMessage);
|
||
|
scrollToBottom();
|
||
|
});
|
||
|
|
||
|
if (groupId) {
|
||
|
fetch(`/get_group_messages/${groupId}`)
|
||
|
.then(response => {
|
||
|
if (!response.ok) {
|
||
|
throw new Error(`HTTP error! Status: ${response.status}`);
|
||
|
}
|
||
|
return response.json();
|
||
|
})
|
||
|
.then(data => {
|
||
|
messagesList.innerHTML = '';
|
||
|
document.getElementById('chat-with').textContent = `Group Chat: ${groupName}`;
|
||
|
document.getElementById('send-message-form').dataset.receiver = groupId;
|
||
|
|
||
|
data.messages.forEach((msg, index, messages) => {
|
||
|
const currentTimestamp = new Date(msg.timestamp).getTime();
|
||
|
const previousMessage = messages[index - 1];
|
||
|
const previousTimestamp = previousMessage ? new Date(previousMessage.timestamp).getTime() : 0;
|
||
|
const showUsername = index === 0 || msg.sender !== previousMessage.sender || shouldShowUsername(previousTimestamp, currentTimestamp);
|
||
|
|
||
|
if (showUsername) {
|
||
|
const usernameElement = document.createElement('div');
|
||
|
usernameElement.classList.add('message-sender');
|
||
|
if (msg.sender === username) {
|
||
|
usernameElement.classList.add('message-myself-sender');
|
||
|
}
|
||
|
usernameElement.innerHTML = `<strong>${msg.sender}</strong><div class="message-sender-timestamp">${formatLocalTime(msg.timestamp)}</div>`;
|
||
|
messagesList.appendChild(usernameElement);
|
||
|
}
|
||
|
|
||
|
|
||
|
const messageElement = document.createElement('div');
|
||
|
messageElement.classList.add('message');
|
||
|
|
||
|
messageElement.dataset.messageId = msg.id;
|
||
|
messageElement.dataset.messageText = msg.content;
|
||
|
|
||
|
if (msg.content_type === 'text') {
|
||
|
messageElement.innerHTML = `${md.render(msg.content)}<div class="timestamp">${msg.timestamp}</div>`;
|
||
|
} else if (msg.content_type === 'file') {
|
||
|
const isImage = /\.(jpg|jpeg|png|gif|bmp|svg)$/i.test(msg.content);
|
||
|
const isVideo = /\.(mp4|webm|ogg)$/i.test(msg.content);
|
||
|
if (isImage) {
|
||
|
messageElement.innerHTML = `<img src="/cdn/${msg.content}" alt="Image" class="enhanceable-image" style="max-width: 200px; max-height: 200px;" /><div class="timestamp">${msg.timestamp}</div>`;
|
||
|
} else if (isVideo) {
|
||
|
messageElement.innerHTML = `<video controls style="max-width: 200px; max-height: 200px;"><source src="/cdn/${msg.content}" type="video/mp4"></video><div class="timestamp">${msg.timestamp}</div>`;
|
||
|
} else {
|
||
|
messageElement.innerHTML = `<a href="/cdn/${msg.content}" target="_blank">Download File</a><div class="timestamp">${msg.timestamp}</div>`;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
messagesList.appendChild(messageElement);
|
||
|
});
|
||
|
|
||
|
scrollToBottom();
|
||
|
})
|
||
|
.catch(error => {
|
||
|
console.error('Error fetching group messages:', error);
|
||
|
alert('Error fetching group messages: ' + error.message);
|
||
|
});
|
||
|
|
||
|
}
|
||
|
|
||
|
const sendMessageForm = document.querySelector('.send-message-form');
|
||
|
if (sendMessageForm) {
|
||
|
sendMessageForm.addEventListener('submit', function(event) {
|
||
|
event.preventDefault();
|
||
|
const receiver = this.dataset.receiver;
|
||
|
const contentInput = this.querySelector('input[name="content"]');
|
||
|
const fileInput = this.querySelector('input[name="file"]');
|
||
|
const content = contentInput.value;
|
||
|
const timestamp = new Date().toISOString().slice(0, 19).replace('T', ' ');
|
||
|
const imagePreview = document.querySelector('.file-preview-image');
|
||
|
const videoPreview = document.querySelector('.file-preview-video');
|
||
|
const filenamePreview = document.querySelector('.file-preview-filename');
|
||
|
|
||
|
if (content || fileInput.files.length > 0) {
|
||
|
const formData = new FormData();
|
||
|
formData.append('content', content);
|
||
|
formData.append('timestamp', timestamp);
|
||
|
if (fileInput.files[0]) {
|
||
|
formData.append('file', fileInput.files[0]);
|
||
|
}
|
||
|
|
||
|
fetch(`/send_group_message/${groupId}`, {
|
||
|
method: 'POST',
|
||
|
body: formData
|
||
|
}).then(response => response.json())
|
||
|
.then(data => {
|
||
|
if (data.status === 'Message sent') {
|
||
|
contentInput.value = '';
|
||
|
fileInput.value = '';
|
||
|
document.querySelector('.file-preview').style.display = 'none';
|
||
|
document.querySelector('.file-preview img').src = '';
|
||
|
document.querySelector('.file-preview video').style.display = 'none';
|
||
|
document.querySelector('.file-preview video').src = '';
|
||
|
document.querySelector('.file-preview .file-preview-filename').style.display = 'none';
|
||
|
document.querySelector('.file-preview .file-preview-filename').textContent = '';
|
||
|
|
||
|
// The message will be appended only when the server confirms it
|
||
|
socket.emit('new_group_message', {
|
||
|
group_id: groupId,
|
||
|
sender: username,
|
||
|
content: content,
|
||
|
content_type: 'text', // Adjust this as necessary
|
||
|
timestamp: timestamp,
|
||
|
id: data.message_id
|
||
|
});
|
||
|
} else {
|
||
|
showToast('Message sending failed');
|
||
|
}
|
||
|
}).catch(error => {
|
||
|
showToast('Message sending failed');
|
||
|
console.error('Error sending group message:', error);
|
||
|
});
|
||
|
}
|
||
|
});
|
||
|
|
||
|
// Handle Shift + Enter for new line
|
||
|
const messageInput = document.querySelector('input[name="content"]');
|
||
|
messageInput.addEventListener('keydown', function(event) {
|
||
|
if (event.key === 'Enter' && event.shiftKey) {
|
||
|
event.preventDefault();
|
||
|
const start = this.selectionStart;
|
||
|
const end = this.selectionEnd;
|
||
|
this.value = this.value.substring(0, start) + "\n" + this.value.substring(end);
|
||
|
this.selectionStart = this.selectionEnd = start + 1;
|
||
|
}
|
||
|
});
|
||
|
|
||
|
document.querySelector('input[name="file"]').addEventListener('change', function(event) {
|
||
|
const file = event.target.files[0];
|
||
|
if (file) {
|
||
|
const reader = new FileReader();
|
||
|
const imagePreview = document.querySelector('.file-preview-image');
|
||
|
const videoPreview = document.querySelector('.file-preview-video');
|
||
|
const filenamePreview = document.querySelector('.file-preview-filename');
|
||
|
reader.onload = function(e) {
|
||
|
document.querySelector('.file-preview').style.display = 'block';
|
||
|
if (file.type.startsWith('image/')) {
|
||
|
imagePreview.style.display = 'block';
|
||
|
videoPreview.style.display = 'none';
|
||
|
filenamePreview.style.display = 'none';
|
||
|
imagePreview.src = e.target.result;
|
||
|
} else if (file.type.startsWith('video/')) {
|
||
|
videoPreview.style.display = 'block';
|
||
|
imagePreview.style.display = 'none';
|
||
|
filenamePreview.style.display = 'none';
|
||
|
videoPreview.querySelector('source').src = e.target.result;
|
||
|
videoPreview.load();
|
||
|
} else {
|
||
|
filenamePreview.style.display = 'block';
|
||
|
imagePreview.style.display = 'none';
|
||
|
videoPreview.style.display = 'none';
|
||
|
filenamePreview.textContent = file.name;
|
||
|
}
|
||
|
};
|
||
|
reader.readAsDataURL(file);
|
||
|
}
|
||
|
});
|
||
|
|
||
|
document.querySelector('.remove-file').addEventListener('click', function() {
|
||
|
const fileInput = document.querySelector('input[name="file"]');
|
||
|
fileInput.value = '';
|
||
|
const filePreview = document.querySelector('.file-preview');
|
||
|
filePreview.style.display = 'none';
|
||
|
filePreview.querySelector('img').style.display = 'none';
|
||
|
filePreview.querySelector('img').src = '';
|
||
|
filePreview.querySelector('video').style.display = 'none';
|
||
|
filePreview.querySelector('video').src = '';
|
||
|
filePreview.querySelector('.file-preview-filename').style.display = 'none';
|
||
|
filePreview.querySelector('.file-preview-filename').textContent = '';
|
||
|
});
|
||
|
}
|
||
|
|
||
|
function checkFriendRequests() {
|
||
|
const friendRequestsList = document.getElementById('friend-requests');
|
||
|
const friendRequestsSection = document.getElementById('friend-requests-section');
|
||
|
if (friendRequestsList && friendRequestsSection) {
|
||
|
if (friendRequestsList.children.length === 0) {
|
||
|
friendRequestsSection.style.display = 'none';
|
||
|
} else {
|
||
|
friendRequestsSection.style.display = 'block';
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
checkFriendRequests();
|
||
|
|
||
|
// Image enhancer functionality
|
||
|
document.addEventListener('click', function(event) {
|
||
|
if (event.target.classList.contains('enhanceable-image')) {
|
||
|
overlayImage.src = event.target.src;
|
||
|
imageOverlay.style.display = 'flex';
|
||
|
}
|
||
|
});
|
||
|
|
||
|
imageOverlay.addEventListener('click', function() {
|
||
|
imageOverlay.style.display = 'none';
|
||
|
});
|
||
|
|
||
|
// Custom Context Menu Functionality
|
||
|
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';
|
||
|
});
|
||
|
|
||
|
// Handle user online/offline status
|
||
|
socket.on('user_online', function(data) {
|
||
|
const statusIndicator = document.getElementById(`status-${data.username}`);
|
||
|
if (statusIndicator) {
|
||
|
statusIndicator.classList.remove('offline');
|
||
|
statusIndicator.classList.add('online');
|
||
|
}
|
||
|
});
|
||
|
|
||
|
socket.on('user_offline', function(data) {
|
||
|
const statusIndicator = document.getElementById(`status-${data.username}`);
|
||
|
if (statusIndicator) {
|
||
|
statusIndicator.classList.remove('online');
|
||
|
statusIndicator.classList.add('offline');
|
||
|
}
|
||
|
});
|
||
|
});
|