Improvement

floki1250 · Mar 23, 2024 · e68df36 · e68df36
1 parent c386806
commit e68df36
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 145 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,4 +1,4 @@
 {
   "nuxt.isNuxtApp": false,
-  "vue3snippets.enable-compile-vue-file-on-did-save-code": true
+  "vue3snippets.enable-compile-vue-file-on-did-save-code": false
 }
diff --git a/assets/main.scss b/assets/main.scss
@@ -20,36 +20,29 @@ html {
 }
 
 html.light {
-    background: radial-gradient(farthest-corner at 40px 40px, #5fd6d0 2%, #ffffff);
+    background: #ffffff
 }
 
 html.dark {
-    background: radial-gradient(farthest-corner at 40px 40px, #5fd6d0 0%, #000000 100%);
+    background: #1f1f1f
 }
 
 
 
 .blur-blob {
-    background-color: #5fd6d0;
     border-radius: 9999px;
-    filter: blur(64px);
-    height: 12rem;
-    mix-blend-mode: hard-light;
-    opacity: .6;
-    position: absolute;
+    filter: blur(60px);
+    height: 30%;
     transition-duration: 2s;
-    transition-property: top, left, bottom, right, opacity, background;
     transition-timing-function: cubic-bezier(.075, .82, .165, 1);
-    width: 12rem;
+    width: 30%;
     z-index: -10
 }
 
-.dark .blur-blob {
-    opacity: .3
-}
+
 
 .awesome-shadow {
-    box-shadow: inset 0 0 100px 20px rgba(255, 255, 255, 0.8);
+    box-shadow: inset 0 0 100px 20px rgba(255, 255, 255, 0.6);
 }
 
 

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,7 +1,7 @@
 <template>
     <UContainer as="div">
         <header
-            class="dark:bg-black/70  bg-white/50 border border-gray-200 dark:border-gray-500  h-full m-4 rounded-lg backdrop-blur-lg awesome-shadow dark:shadow-lg">
+            class="dark:bg-black/70  bg-white/50 border border-gray-50 dark:border-gray-500  h-full m-4 rounded-lg backdrop-blur-lg awesome-shadow dark:shadow-lg">
             <div class="flex justify-between p-4">
                 <div class="text-3xl font-bold">
                     <NuxtLink to="/">

diff --git a/pages/Receive.vue b/pages/Receive.vue
@@ -4,9 +4,7 @@
       Receiver
       <p>{{ characterName }}</p>
       <img :src="qrcode" alt="QR Code" v-if="qrcode" />
-      <UButton @click="handleFileDownload" v-if="receivedFile"
-        >Download : {{ receivedFile.name }}</UButton
-      >
+      <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>
@@ -17,7 +15,7 @@
 
 <script setup>
 import { useQRCode } from "@vueuse/integrations/useQRCode";
-import { download } from "downloadjs";
+
 import { ref, onMounted } from "vue";
 import Peer from "peerjs";
 import { uniqueNamesGenerator, starWars, adjectives } from "unique-names-generator";
@@ -49,7 +47,7 @@ onMounted(() => {
     });
   });
 });
-async function handleFileDownload() {
+async function handleFileDownload () {
   const blob = new Blob(receivedFile.value.chunks, {
     type: receivedFile.value.type,
   });

diff --git a/pages/Send.vue b/pages/Send.vue
@@ -1,21 +1,18 @@
 <template>
   <div>
     <div
-      class="dark:bg-black/70 bg-white/50 border border-gray-200 dark:border-gray-500 h-full m-4 rounded-lg backdrop-blur-lg awesome-shadow dark:shadow-lg p-4"
-    >
-      <UBreadcrumb
-        :links="[
-          {
-            label: 'Home',
-            icon: 'i-heroicons-home',
-            to: '/',
-          },
-          {
-            label: 'Send',
-            icon: 'i-line-md-telegram',
-          },
-        ]"
-      />
+      class="dark:bg-black/70 bg-white/50 border border-gray-200 dark:border-gray-500 h-full m-4 rounded-lg backdrop-blur-lg awesome-shadow dark:shadow-lg p-4">
+      <UBreadcrumb :links="[
+        {
+          label: 'Home',
+          icon: 'i-heroicons-home',
+          to: '/',
+        },
+        {
+          label: 'Send',
+          icon: 'i-line-md-telegram',
+        },
+      ]" />
       <br />
 
       <h1 class="text-3xl text-bold reem-kufi dark:text-white text-black/70">Sender</h1>
@@ -25,32 +22,14 @@
       <UDivider class="my-4" />
       <div class="flex justify-between">
         <UButtonGroup size="sm" orientation="horizontal" class="pr-2">
-          <UInput
-            color="primary"
-            variant="outline"
-            type="text"
-            v-model="receiver"
-            placeholder="Enter receiver"
-          />
-          <UButton
-            icon="i-solar-qr-code-bold-duotone"
-            color="primary"
-            variant="solid"
-            @click="isOpen = true"
-          />
+          <UInput color="primary" variant="outline" type="text" v-model="receiver" placeholder="Enter receiver" />
+          <UButton icon="i-solar-qr-code-bold-duotone" color="primary" variant="solid" @click="isOpen = true" />
         </UButtonGroup>
-        <UButton
-          @click="connect"
-          variant="solid"
-          icon="i-solar-link-line-duotone"
-          :loading="loading"
-          >Connect</UButton
-        >
+        <UButton @click="connect" variant="solid" icon="i-solar-link-line-duotone" :loading="loading">Connect</UButton>
       </div>
     </div>
-    <div
-      class="dark:bg-black/70 bg-white/50 border border-gray-200 dark:border-gray-500 h-full m-4 rounded-lg backdrop-blur-lg awesome-shadow dark:shadow-lg p-4"
-    >
+    <div v-show="connected"
+      class="dark:bg-black/70 bg-white/50 border border-gray-200 dark:border-gray-500 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">
@@ -67,100 +46,50 @@
       </div>
       <div class="flex">
         <UModal v-model="showFileTransfer">
-          <UCard
-            :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }"
-          >
+          <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"
-                >
+                <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"
-                />
+                <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
-                  >
+                  <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="solid"
-            @click="showFileTransfer = !showFileTransfer"
-          />
-          <UInput
-            color="primary"
-            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="solid"
-          >
+          <UButton icon="i-solar-paperclip-bold-duotone" color="primary" variant="solid"
+            @click="showFileTransfer = !showFileTransfer" />
+          <UInput color="primary" 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="solid">
           </UButton>
         </UButtonGroup>
       </div>
     </div>
     <UModal v-model="isOpen" fullscreen>
-      <UCard
-        class="h-full"
-        :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }"
-      >
+      <UCard class="h-full" :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">
               Qr Scanner
             </h3>
-            <UButton
-              color="gray"
-              variant="ghost"
-              icon="i-heroicons-x-mark-20-solid"
-              class="-my-1"
-              @click="stopScan"
-            />
+            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="stopScan" />
           </div>
         </template>
-        <UButton
-          icon="i-solar-qr-code-bold-duotone"
-          color="primary"
-          variant="solid"
-          @click="scan"
-          label="Scan"
-        />
+        <UButton icon="i-solar-qr-code-bold-duotone" color="primary" variant="solid" @click="scan" label="Scan" />
         <video ref="videoElement" class="w-full rounded-lg" v-show="qrscannerEl"></video>
       </UCard>
     </UModal>
@@ -179,9 +108,10 @@ const chatContainer = ref(null);
 const characterName = uniqueNamesGenerator({
   dictionaries: [adjectives, starWars],
 }).replace(/\s/g, "");
-const messageReceived = ref([]);
+const connected = ref(false);
 const messages = ref([]);
 const messageToSend = ref("");
+const receivedFile = ref(null);
 const receiver = ref("");
 const myPeer = new Peer(characterName, {});
 let qrScanner;
@@ -217,12 +147,11 @@ const handleSendFile = async () => {
       const chunk = reader.result.slice(i, i + chunkSize);
       fileData.chunks.push(chunk);
     }
-
     sendFile(fileData);
   };
 };
 
-async function scan() {
+async function scan () {
   qrscannerEl.value = true;
   try {
     qrScanner = new QrScanner(
@@ -248,7 +177,7 @@ async function scan() {
     qrscannerEl.value = false;
   }
 }
-function stopScan() {
+function stopScan () {
   if (qrScanner) {
     qrScanner.stop();
   }
@@ -260,6 +189,7 @@ const connect = () => {
   const conn = myPeer.connect(receiver.value);
   conn.on("open", () => {
     loading.value = false;
+    connected.value = true;
     toast.add({
       id: "Connected",
       title: "Connected",
@@ -269,8 +199,17 @@ const connect = () => {
       color: "green",
     });
     console.log("Connected to peer");
-    conn.on("data", (data) => {
-      messageReceived.value = data;
+  });
+  conn.on("error", () => {
+    connected.value = false;
+    loading.value = false;
+    toast.add({
+      id: "Error",
+      title: "Error Connection",
+      description: "Error connecting to peer",
+      icon: "i-solar-close-circle-broken",
+      timeout: 6000,
+      color: "red",
     });
   });
 };
@@ -303,15 +242,41 @@ const sendFile = (data) => {
     scrollToBottom();
   });
 };
-function scrollToBottom() {
+function scrollToBottom () {
   chatContainer.value.scroll(0, chatContainer.value.scrollHeight + 50);
 }
 onMounted(() => {
   myPeer.on("connection", (conn) => {
     conn.on("data", (data) => {
-      messages.value.push({ id: Math.random(), sender: "other", content: data });
+      if (typeof data === "string") {
+        conn.on("data", (data) => {
+          messages.value.push({ id: Math.random(), sender: "other", content: data });
+        });
+      } else {
+        receivedFile.value = data;
+        messages.value.push({ id: Math.random(), sender: "other", content: data });
+      }
+
+      if (
+        receivedFile.value.chunks.length ===
+        Math.ceil(receivedFile.value.size / chunkSize)
+      ) {
+        handleFileDownload();
+      }
     });
   });
   scrollToBottom();
 });
+async function handleFileDownload () {
+  const blob = new Blob(receivedFile.value.chunks, {
+    type: receivedFile.value.type,
+  });
+
+  const url = window.URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = receivedFile.value.name;
+  link.click();
+  window.URL.revokeObjectURL(url); // Clean up memory leak
+}
 </script>