Fix Cloud Transfer

app.vue

@@ -4,31 +4,5 @@
   <NuxtLayout>
     <NuxtPage />
   </NuxtLayout>
+  <UNotifications />
 </template>
-
-<script setup>
-import { Peer } from "peerjs";
-const peer = new Peer("1250");
-const received = ref('');
-function connect () {
-  console.log("Connecting...")
-  const conn = peer.connect("1251");
-  conn.on("open", () => {
-    conn.send("hi!");
-  });
-}
-function receive () {
-  received.value = 'loading...'
-  peer.on("connection", (conn) => {
-    conn.on("data", (data) => {
-      // Will print 'hi!'
-      console.log(data);
-      received.value = data
-    });
-    conn.on("open", () => {
-      conn.send("hello!");
-    });
-  });
-}
-
-</script>

components/Cloud.vue

@@ -1,54 +1,36 @@
 <template>
   <div class="p-4 bg-japonica-500 dark:bg-japonica-700">
     <h2>
-      <button
-        class="flex items-center justify-between w-full"
-        @click.prevent="accordionOpen = !accordionOpen"
-        :aria-expanded="accordionOpen"
-        aria-controls="accordion-text-01"
-      >
+      <button class="flex items-center justify-between w-full" @click.prevent="accordionOpen = !accordionOpen"
+        :aria-expanded="accordionOpen" aria-controls="accordion-text-01">
         <div>
           <div class="flex flex-col">
             <h1 class="font-bold text-2xl text-black">CLOUD TRANSFER</h1>
           </div>
         </div>
         <div>
-          <UIcon
-            :name="
-              accordionOpen
-                ? 'i-solar-alt-arrow-down-line-duotone'
-                : 'i-solar-alt-arrow-right-line-duotone'
-            "
-            class="w-5 h-5"
-          >
+          <UIcon :name="accordionOpen
+            ? 'i-solar-alt-arrow-down-line-duotone'
+            : 'i-solar-alt-arrow-right-line-duotone'
+          " class="w-5 h-5">
           </UIcon>
         </div>
       </button>
     </h2>
-    <div
-      id="accordion-text-01"
-      role="region"
-      aria-labelledby="accordion-title-01"
+    <div id="accordion-text-01" role="region" aria-labelledby="accordion-title-01"
       class="grid text-sm text-white overflow-hidden transition-all duration-300 ease-in-out"
-      :class="accordionOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
-    >
+      :class="accordionOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'">
       <div class="overflow-hidden">
         <br />
         <UButtonGroup size="md" orientation="horizontal" class="w-full">
           <UInput type="file" class="w-full" @change="handleFileChange" />
-          <UButton
-            icon="i-solar-upload-bold"
-            color="white"
-            variant="solid"
-            @click="uploadFile"
-          />
+          <UButton icon="i-solar-upload-bold" color="white" variant="solid" @click="uploadFile" :loading="loading" />
         </UButtonGroup>
         <br />
         <div class="pt-4">
           <div class="pb-4">
-            <UBadge color="black" variant="solid" :ui="{ rounded: 'rounded-full' }">
+            <UBadge color="black" variant="solid" :ui="{ rounded: 'rounded-full' }" v-if="url">
               <NuxtLink :to="url" target="_blank">
-                <span class="text-xl font-bold">Download Link</span>
                 <UIcon name="i-solar-link-bold" class="w-5 h-5" />
               </NuxtLink>
             </UBadge>
@@ -62,17 +44,21 @@
 
 <script setup>
 import { useQRCode } from "@vueuse/integrations/useQRCode";
+const toast = useToast();
 const props = defineProps(["characterName"]);
 const file = ref(null);
+const loading = ref(false);
 const accordionOpen = ref(false);
 const handleFileChange = (event) => {
   file.value = event.target.files[0];
 };
 const url = ref(null);
-
+let qrcode = useQRCode("");
 const uploadFile = async () => {
+  loading.value = true;
   if (!file.value) {
     console.error("File is null or undefined");
+    loading.value = false;
     return;
   }
   const currentDate = new Date().toISOString().slice(0, 10).replace(/-/g, ""); // Format: yyyyMMdd
@@ -82,16 +68,33 @@ const uploadFile = async () => {
   const formData = new FormData();
   formData.append(fileName, file.value);
   url.value = `https://filebin.net/${binName}/${fileName}`;
-  const qrcode = useQRCode(url.value);
+  qrcode = useQRCode(url.value);
   try {
     const response = await $fetch(url.value, {
       method: "POST",
-
       body: formData,
     });
     console.log("File uploaded:", response);
+    toast.add({
+      id: "success",
+      title: "success",
+      description: "File uploaded successfully" + response.file.filename,
+      icon: "i-heroicons-check-circle",
+      timeout: 6000,
+      color: "green",
+    });
   } catch (error) {
+    toast.add({
+      id: "errors",
+      title: "Error",
+      description: "Error uploading file: " + error?.message,
+      icon: "i-heroicons-exclamation-circle",
+      timeout: 6000,
+      color: "rose",
+    });
     console.error("Error uploading file:", error?.message);
+  } finally {
+    loading.value = false;
   }
 };
 </script>

package.json

@@ -22,8 +22,10 @@
     "peerjs": "^1.5.2",
     "peerjs-server": "^0.2.9",
     "qrcode": "^1",
+    "randombytes": "^2.1.0",
     "simple-peer": "^9.11.1",
     "unique-names-generator": "^4.7.1",
-    "vue-webrtc": "^3.0.1"
+    "vue-webrtc": "^3.0.1",
+    "webrtc": "^1.14.1"
   }
 }

pages/Receive.vue

@@ -0,0 +1,24 @@
+<template>
+    <div>
+        <h2>Receiver Component {{ peerid }}</h2>
+        <p v-if="fileReceived">{{ fileReceived.name }} received successfully!</p>
+        <b v-if="messageReceived">{{ messageReceived }}</b>
+    </div>
+</template>
+<script setup>
+import { ref, onMounted } from "vue";
+
+const fileReceived = ref(null);
+const messageReceived = ref("");
+
+const peer = useNuxtApp().$peer;
+const peerid = useNuxtApp().$peerid;
+
+onMounted(() => {
+    peer.on("connection", (conn) => {
+        conn.on("data", (data) => {
+            messageReceived.value = data;
+        });
+    });
+});
+</script>

pages/Send.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <h2>Simple Peer Messenger</h2>
+    <p v-if="messageReceived">{{ messageReceived }}</p>
+
+    <input v-model="messageToSend" />
+    <button @click="sendMessage">Send Message</button>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import SimplePeer from "simple-peer";
+
+const messageReceived = ref(null);
+const messageToSend = ref("");
+let peer;
+
+onMounted(() => {
+  peer = new SimplePeer({ initiator: true, trickle: false });
+
+  peer.on("data", (data) => {
+    // Handle received data
+    if (typeof data === "string") {
+      messageReceived.value = data;
+    } else {
+      // Handle other types of data if needed
+    }
+  });
+});
+
+const sendMessage = () => {
+  if (peer) {
+    peer.send(messageToSend.value);
+  } else {
+    // Create a new peer if it doesn't exist
+    peer = new SimplePeer({ trickle: false });
+    peer.on("data", (data) => {
+      // Handle received data
+      if (typeof data === "string") {
+        messageReceived.value = data;
+      } else {
+        // Handle other types of data if needed
+      }
+    });
+  }
+};
+</script>

pages/index.vue

@@ -63,7 +63,6 @@ const options = {
 };
 myPeer = new Peer(characterName, options); // Connect to server
 const colorMode = useColorMode();
-
 function switchColorMode () {
   colorMode.value = colorMode.value === "dark" ? "light" : "dark";
 }

plugins/peer.client.js

@@ -0,0 +1,16 @@
+import Peer from "peerjs";
+import {
+  uniqueNamesGenerator,
+  starWars,
+  adjectives,
+} from "unique-names-generator";
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const peerid = uniqueNamesGenerator({
+    dictionaries: [adjectives, starWars],
+  }).replace(/\s/g, "");
+  const peer = new Peer(peerid, {});
+  console.log(peer, peerid);
+  nuxtApp.provide("peer", peer);
+  nuxtApp.provide("peerid", peerid);
+});