forked from snxraven/LinkUp-P2P-Chat
Merge branch 'main' of https://git.ssh.surf/snxraven/LinkUp-P2P-Chat
This is automatic merge of FileUploading and Config commits.
This commit is contained in:
commit
c2e1242d8b
80
app.js
80
app.js
@ -51,6 +51,8 @@ async function initialize() {
|
|||||||
const messageForm = document.querySelector('#message-form');
|
const messageForm = document.querySelector('#message-form');
|
||||||
const toggleSetupBtn = document.querySelector('#toggle-setup-btn');
|
const toggleSetupBtn = document.querySelector('#toggle-setup-btn');
|
||||||
const removeRoomBtn = document.querySelector('#remove-room-btn');
|
const removeRoomBtn = document.querySelector('#remove-room-btn');
|
||||||
|
const attachFileButton = document.getElementById('attach-file');
|
||||||
|
const fileInput = document.getElementById('file-input');
|
||||||
|
|
||||||
if (registerForm) {
|
if (registerForm) {
|
||||||
registerForm.addEventListener('submit', registerUser);
|
registerForm.addEventListener('submit', registerUser);
|
||||||
@ -75,6 +77,25 @@ async function initialize() {
|
|||||||
if (removeRoomBtn) {
|
if (removeRoomBtn) {
|
||||||
removeRoomBtn.addEventListener('click', leaveRoom);
|
removeRoomBtn.addEventListener('click', leaveRoom);
|
||||||
}
|
}
|
||||||
|
if (attachFileButton) {
|
||||||
|
attachFileButton.addEventListener('click', () => fileInput.click());
|
||||||
|
}
|
||||||
|
if (fileInput) {
|
||||||
|
fileInput.addEventListener('change', async (event) => {
|
||||||
|
const file = event.target.files[0];
|
||||||
|
if (file) {
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onload = async (event) => {
|
||||||
|
const buffer = new Uint8Array(event.target.result);
|
||||||
|
const filePath = `/files/${file.name}`;
|
||||||
|
await drive.put(filePath, buffer);
|
||||||
|
const fileUrl = `http://localhost:${servePort}${filePath}`;
|
||||||
|
sendFileMessage(userName, fileUrl, file.type, userAvatar);
|
||||||
|
};
|
||||||
|
reader.readAsArrayBuffer(file);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
const registerDiv = document.querySelector('#register');
|
const registerDiv = document.querySelector('#register');
|
||||||
if (registerDiv) {
|
if (registerDiv) {
|
||||||
@ -87,6 +108,8 @@ async function initialize() {
|
|||||||
const avatarBuffer = Buffer.from(messageObj.avatar, 'base64');
|
const avatarBuffer = Buffer.from(messageObj.avatar, 'base64');
|
||||||
await drive.put(`/icons/${username}.png`, avatarBuffer);
|
await drive.put(`/icons/${username}.png`, avatarBuffer);
|
||||||
updateIcon(username, avatarBuffer);
|
updateIcon(username, avatarBuffer);
|
||||||
|
} else if (messageObj.type === 'file') {
|
||||||
|
addFileMessage(messageObj.name, messageObj.fileName, messageObj.fileUrl, messageObj.fileType, messageObj.avatar);
|
||||||
} else {
|
} else {
|
||||||
onMessageAdded(messageObj.name, messageObj.message, messageObj.avatar);
|
onMessageAdded(messageObj.name, messageObj.message, messageObj.avatar);
|
||||||
}
|
}
|
||||||
@ -265,6 +288,62 @@ function sendMessage(e) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function sendFileMessage(name, fileUrl, fileType, avatar) {
|
||||||
|
const fileName = fileUrl.split('/').pop();
|
||||||
|
const messageObj = JSON.stringify({
|
||||||
|
type: 'file',
|
||||||
|
name,
|
||||||
|
fileName,
|
||||||
|
fileUrl,
|
||||||
|
fileType,
|
||||||
|
avatar,
|
||||||
|
timestamp: Date.now(),
|
||||||
|
});
|
||||||
|
|
||||||
|
const peers = [...swarm.connections];
|
||||||
|
for (const peer of peers) {
|
||||||
|
peer.write(messageObj);
|
||||||
|
}
|
||||||
|
|
||||||
|
addFileMessage(name, fileName, fileUrl, fileType, avatar);
|
||||||
|
}
|
||||||
|
|
||||||
|
function addFileMessage(from, fileName, fileUrl, fileType, avatar) {
|
||||||
|
const $div = document.createElement('div');
|
||||||
|
$div.classList.add('message');
|
||||||
|
|
||||||
|
const $img = document.createElement('img');
|
||||||
|
$img.src = avatar || 'https://via.placeholder.com/40';
|
||||||
|
$img.classList.add('avatar');
|
||||||
|
$div.appendChild($img);
|
||||||
|
|
||||||
|
const $content = document.createElement('div');
|
||||||
|
$content.classList.add('message-content');
|
||||||
|
|
||||||
|
const $header = document.createElement('div');
|
||||||
|
$header.classList.add('message-header');
|
||||||
|
$header.textContent = from;
|
||||||
|
$content.appendChild($header);
|
||||||
|
|
||||||
|
if (fileType.startsWith('image/')) {
|
||||||
|
const $image = document.createElement('img');
|
||||||
|
$image.src = fileUrl;
|
||||||
|
$image.alt = fileName;
|
||||||
|
$image.classList.add('attached-image');
|
||||||
|
$content.appendChild($image);
|
||||||
|
} else {
|
||||||
|
const $fileLink = document.createElement('a');
|
||||||
|
$fileLink.href = fileUrl;
|
||||||
|
$fileLink.textContent = `File: ${fileName}`;
|
||||||
|
$fileLink.download = fileName;
|
||||||
|
$content.appendChild($fileLink);
|
||||||
|
}
|
||||||
|
|
||||||
|
$div.appendChild($content);
|
||||||
|
document.querySelector('#messages').appendChild($div);
|
||||||
|
scrollToBottom();
|
||||||
|
}
|
||||||
|
|
||||||
function updatePeerCount() {
|
function updatePeerCount() {
|
||||||
const peerCountElement = document.querySelector('#peers-count');
|
const peerCountElement = document.querySelector('#peers-count');
|
||||||
if (peerCountElement) {
|
if (peerCountElement) {
|
||||||
@ -283,6 +362,7 @@ function onMessageAdded(from, message, avatar) {
|
|||||||
|
|
||||||
const $img = document.createElement('img');
|
const $img = document.createElement('img');
|
||||||
$img.src = avatar || 'https://via.placeholder.com/40'; // Default to a placeholder image if avatar URL is not provided
|
$img.src = avatar || 'https://via.placeholder.com/40'; // Default to a placeholder image if avatar URL is not provided
|
||||||
|
$img.classList.add('avatar');
|
||||||
$div.appendChild($img);
|
$div.appendChild($img);
|
||||||
|
|
||||||
const $content = document.createElement('div');
|
const $content = document.createElement('div');
|
||||||
|
@ -60,6 +60,8 @@
|
|||||||
</div>
|
</div>
|
||||||
<form id="message-form">
|
<form id="message-form">
|
||||||
<textarea id="message" rows="4"></textarea>
|
<textarea id="message" rows="4"></textarea>
|
||||||
|
<input type="file" id="file-input" style="display:none;">
|
||||||
|
<button type="button" id="attach-file">Attach File</button>
|
||||||
<input type="submit" value="Send" />
|
<input type="submit" value="Send" />
|
||||||
</form>
|
</form>
|
||||||
<button id="remove-room-btn">Leave Room</button>
|
<button id="remove-room-btn">Leave Room</button>
|
||||||
|
22
style.css
22
style.css
@ -385,19 +385,16 @@ main {
|
|||||||
/* Message styles */
|
/* Message styles */
|
||||||
.message {
|
.message {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: flex-start;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
/* Reduced margin */
|
/* Reduced margin */
|
||||||
}
|
}
|
||||||
|
|
||||||
.message img {
|
.message img.avatar {
|
||||||
width: 32px;
|
width: 32px;
|
||||||
/* Reduced size */
|
|
||||||
height: 32px;
|
height: 32px;
|
||||||
/* Reduced size */
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin-right: 0.5rem;
|
margin-right: 0.5rem;
|
||||||
/* Reduced margin */
|
|
||||||
border: 2px solid #b0d944;
|
border: 2px solid #b0d944;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -418,8 +415,15 @@ main {
|
|||||||
/* Reduced font size */
|
/* Reduced font size */
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-time {
|
.message-text {
|
||||||
color: #a0a0a0;
|
color: #e0e0e0;
|
||||||
font-size: 0.75rem;
|
}
|
||||||
margin-left: 0.5rem;
|
|
||||||
|
.attached-image {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
/* Removed circular border */
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user