138 lines
6.7 KiB
JavaScript
138 lines
6.7 KiB
JavaScript
document.addEventListener('DOMContentLoaded', (event) => {
|
|
const socket = io();
|
|
socket.emit('join', { username: username });
|
|
|
|
document.title = `${friendUsername}`;
|
|
|
|
const messagesList = document.getElementById('messages');
|
|
const imageOverlay = document.getElementById('image-overlay');
|
|
const overlayImage = document.getElementById('overlay-image');
|
|
let previousSender = null;
|
|
let previousTimestamp = 0;
|
|
|
|
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();
|
|
|
|
socket.on('new_message', function (data) {
|
|
const currentTimestamp = new Date(data.timestamp).getTime();
|
|
const showUsername = previousSender !== data.sender || shouldShowUsername(previousTimestamp, currentTimestamp);
|
|
previousSender = data.sender;
|
|
previousTimestamp = currentTimestamp;
|
|
|
|
const profilePicUrl = data.sender_profile_picture ? `${data.sender_profile_picture}` : 'default_profile_picture.png';
|
|
appendMessage(messagesList, data, showUsername, profilePicUrl);
|
|
});
|
|
|
|
if (friendId) {
|
|
fetch(`/get_messages/${friendId}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
messagesList.innerHTML = '';
|
|
document.getElementById('chat-with').textContent = `${friendUsername}`;
|
|
document.getElementById('send-message-form').dataset.receiver = friendId;
|
|
|
|
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);
|
|
|
|
const profilePicUrl = msg.sender_profile_picture ? `${msg.sender_profile_picture}` : 'default_profile_picture.png';
|
|
appendMessage(messagesList, msg, showUsername, profilePicUrl);
|
|
});
|
|
|
|
scrollToBottom(messagesList);
|
|
})
|
|
.catch(error => console.error('Error fetching messages:', error));
|
|
}
|
|
|
|
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_message/${receiver}`, {
|
|
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 = '';
|
|
|
|
// Append the message immediately for the sender
|
|
const profilePictureUrl = profilePicture ? `${profilePicture}` : 'default_profile_picture.png';
|
|
const messageData = {
|
|
sender: username,
|
|
content: content,
|
|
timestamp: timestamp,
|
|
sender_profile_picture: profilePictureUrl,
|
|
content_type: fileInput.files.length > 0 ? 'file' : 'text',
|
|
id: data.message_id
|
|
};
|
|
|
|
const currentTimestamp = new Date(messageData.timestamp).getTime();
|
|
const showUsername = previousSender !== username || shouldShowUsername(previousTimestamp, currentTimestamp);
|
|
previousSender = username;
|
|
previousTimestamp = currentTimestamp;
|
|
|
|
appendMessage(messagesList, messageData, showUsername, profilePictureUrl);
|
|
} else {
|
|
showToast('Message sending failed');
|
|
}
|
|
}).catch(error => {
|
|
showToast('Message sending failed');
|
|
console.error('Error sending message:', error);
|
|
});
|
|
}
|
|
});
|
|
|
|
document.querySelector('input[name="file"]').addEventListener('change', handleFileInputChange);
|
|
|
|
document.querySelector('.remove-file').addEventListener('click', handleRemoveFile);
|
|
}
|
|
|
|
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';
|
|
});
|
|
});
|