Skip to content

Commit

Permalink
Fix Receiver
Browse files Browse the repository at this point in the history
  • Loading branch information
@floki1250
floki1250 committed Mar 27, 2024
1 parent 5596c91 commit b1d0b50
Show file tree
Hide file tree
Showing 4 changed files with 170 additions and 351 deletions.
2 changes: 1 addition & 1 deletion layouts/default.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@


</UContainer>
<footer class="absolute bottom-0 ">
<footer class="fixed bottom-0 w-full ">

<div>
<NuxtLink to="https://github.com/floki1250" target="_blank">
Expand Down
4 changes: 0 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,12 @@
"@iconify-json/solar": "^1.1.9",
"@nuxtjs/color-mode": "^3.3.2",
"@vueuse/nuxt": "^10.9.0",
"downloadjs": "^1.4.7",
"peer": "^1.0.2",
"peerjs": "^1.5.2",
"peerjs-server": "^0.2.9",
"qr-scanner": "^1.4.2",
"qrcode": "^1",
"randombytes": "^2.1.0",
"simple-peer": "^9.11.1",
"unique-names-generator": "^4.7.1",
"vue-webrtc": "^3.0.1",
"webrtc": "^1.14.1"
}
}
196 changes: 169 additions & 27 deletions pages/Receive.vue
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,193 @@
<template>
<div>
<h2>
Receiver
<p>{{ characterName }}</p>
<img :src="qrcode" alt="QR Code" v-if="qrcode" />
<UButton @click="handleFileDownload" v-if="receivedFile">Download : {{ receivedFile.name }}</UButton>
<p class="text-gray-500 flex flex-wrap w-40">{{ receivedFile }}</p>
<hr />
<p v-if="messageReceived">{{ messageReceived }}</p>
</h2>
<hr />
<div
class="dark:bg-black/70 bg-white/50 transition-all ease-in-out duration-500 border border-gray-100 dark:border-gray-900 hover:dark:border-gray-600 hover:border-gray-300 h-full m-4 rounded-lg backdrop-blur-lg awesome-shadow dark:shadow-lg p-4">

<div class="flex justify-between">
<div>
<UBreadcrumb :links="[
{
label: 'Home',
icon: 'i-heroicons-home',
to: '/',
},
{
label: 'Receive',
icon: 'i-line-md-telegram',
},
]"> <template #divider>
<span class="w-8 h-1 rounded-full bg-gray-100 dark:bg-gray-700" />
</template></UBreadcrumb>
<br />
<h1 class="text-3xl text-bold reem-kufi dark:text-white text-black/70">sender</h1>
<p class="reem-kufi text-gray-500">I'm {{ characterName }}</p>
<UDivider class="my-4" />
<UInput color="white" variant="outline" type="text" v-model="sender" placeholder="Sender" />
</div>
<div>
<img :src="qrcode" alt="QR Code" v-if="qrcode"
:class="$colorMode.value === 'dark' ? 'filter invert' : 'filter '" />
</div>
</div>
</div>
<div v-show="true"
class="dark:bg-black/70 bg-white/50 transition-all ease-in-out duration-500 border border-gray-100 dark:border-gray-900 hover:dark:border-gray-600 hover:border-gray-300 h-full m-4 rounded-lg backdrop-blur-lg awesome-shadow dark:shadow-lg p-4">
<div ref="chatContainer" class="flex flex-col h-40 overflow-y-scroll p-4">
<div v-for=" message in messages " :key="message.id" class="m-1">
<div v-if="message.sender === 'me'" class="flex justify-end">
<div class="bg-teal-400 text-white px-4 py-2 rounded-full rounded-br-none">
{{ message.content }}
</div>
</div>
<div v-else class="flex justify-start">
<div class="bg-rose-400 text-white px-4 py-2 rounded-full rounded-bl-none">
{{ message.content }}
</div>
</div>
</div>
</div>
<div class="flex">
<UModal v-model="showFileTransfer">
<UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
<template #header>
<div class="flex items-center justify-between">
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
File Transfer
</h3>
</div>
</template>
<div class="flex justify-center flex-col">
<div class="p-2">
<UInput type="file" @change="handleFileChange" class="transition-all ease-in-out duration-500" />
</div>
<div>
<UButtonGroup size="sm" orientation="horizontal" class="w-full p-2">
<UButton @click="handleSendFile" icon="i-solar-paperclip-bold-duotone" color="primary" variant="solid"
:loading="sendingFile">Send File via P2P</UButton>
<UButton @click="handleSendFile" icon="i-solar-cloud-bold-duotone" color="violet" variant="solid"
:loading="sendingFile">Send File Via Cloud</UButton>
</UButtonGroup>
</div>
</div>
</UCard>
</UModal>
<UButtonGroup size="sm" orientation="horizontal" class="w-full">
<UButton icon="i-solar-paperclip-bold-duotone" color="primary" variant="soft"
@click="showFileTransfer = !showFileTransfer" />
<UInput color="white" variant="outline" type="text" v-model="messageToSend" class="flex-grow w-full"
placeholder="Type a message..." />
<UButton @click="sendMessage" icon="i-line-md-telegram" color="primary" variant="soft">
</UButton>
</UButtonGroup>
</div>
</div>

</div>
</template>

<script setup>
import { useQRCode } from "@vueuse/integrations/useQRCode";
import { ref, onMounted } from "vue";
import { ref } from "vue";
import Peer from "peerjs";
import { uniqueNamesGenerator, starWars, adjectives } from "unique-names-generator";
const colorMode = useColorMode();
const chatContainer = ref(null);
const characterName = uniqueNamesGenerator({
dictionaries: [adjectives, starWars],
}).replace(/\s/g, "");
let qrcode = useQRCode(characterName);
const messageReceived = ref("");
const myPeer = new Peer(characterName, {});
const messages = ref([]);
const messageToSend = ref("");
const receivedFile = ref(null);
const sender = ref("");
const myPeer = new Peer(characterName, {});
const chunkSize = 16 * 1024;
const showFileTransfer = ref(false);
const file = ref(null);
let qrcode = useQRCode(characterName);
const sendingFile = ref(false);
const handleFileChange = (event) => {
file.value = event.target.files[0];
};
const handleSendFile = async () => {
sendingFile.value = true;
if (!file.value) {
return;
}
const reader = new FileReader();
reader.readAsArrayBuffer(file.value);
reader.onload = () => {
const fileData = {
name: file.value.name, // Send file name for download
type: file.value.type, // Send file type for appropriate handling
size: file.value.size, // Send file size for progress tracking
chunks: [], // Array to store chunked data
};
for (let i = 0; i < reader.result.byteLength; i += chunkSize) {
const chunk = reader.result.slice(i, i + chunkSize);
fileData.chunks.push(chunk);
}
sendFile(fileData);
};
};
const sendMessage = () => {
const conn = myPeer.connect(sender.value);
conn.on("open", async () => {
conn.send({ dt: { id: characterName, message: messageToSend.value } });
await messages.value.push({
id: Math.random(),
sender: "me",
content: messageToSend.value,
});
messageToSend.value = "";
scrollToBottom();
});
};
const sendFile = (data) => {
console.log("Sending file", data);
const conn = myPeer.connect(sender.value);
conn.on("open", async () => {
conn.send({ dt: { id: characterName, message: data } });
await messages.value.push({
id: Math.random(),
sender: "me",
content: `📎 ${file.value.name} 📎`,
});
sendingFile.value = false;
scrollToBottom();
});
};
function scrollToBottom () {
chatContainer.value.scroll(0, chatContainer.value.scrollHeight + 50);
}
onMounted(() => {
myPeer.on("connection", (conn) => {
conn.on("data", (data) => {
if (typeof data === "string") {
messageReceived.value = data;
conn.on("data", async (data) => {
console.log("Received data", typeof data.dt.message, data);
sender.value = data.dt.id;
if (typeof data.dt.message === "string") {
await messages.value.push({ id: Math.random(), sender: "other", content: data.dt.message });
} else {
receivedFile.value = data;
}
if (
receivedFile.value.chunks.length ===
Math.ceil(receivedFile.value.size / chunkSize)
) {
handleFileDownload();
receivedFile.value = data.dt.message;
await messages.value.push({ id: Math.random(), sender: "other", content: data.dt.message.name });
if (
receivedFile.value.chunks.length ===
Math.ceil(receivedFile.value.size / chunkSize)
) {
handleFileDownload();
}
}
});
});
scrollToBottom();
});
async function handleFileDownload () {
const blob = new Blob(receivedFile.value.chunks, {
Expand Down
Loading

0 comments on commit b1d0b50

Please sign in to comment.