improvement

floki1250 · Mar 27, 2024 · 57e4b6e · 57e4b6e
1 parent f4a1763
commit 57e4b6e
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 25 deletions.
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -15,7 +15,9 @@
             <div class="flex justify-between p-4">
                 <div class="text-3xl font-bold">
                     <NuxtLink to="/">
-                        <h1 class="righteous dark:text-white text-black/70 ml-2 mt-1">MagicPing</h1>
+                        <h1 class="righteous dark:text-white text-black/70 ml-2 mt-1">
+                            <UChip text="beta" size="2xl">MagicPing</UChip>
+                        </h1>
                     </NuxtLink>
 
                 </div>
@@ -30,17 +32,17 @@
 
 
     </UContainer>
-    <footer class="fixed bottom-0 w-full ">
-
-        <div>
+    <footer
+        class="fixed bottom-0 w-fit  m-1 z-10 dark:bg-black/70  bg-white/50 border border-gray-100 dark:border-gray-900 hover:dark:border-gray-600 hover:border-gray-300 transition ease-in-out duration-500 rounded-full flex justify-center content-center p-1">
+        <div class=" w-full h-full pt-1">
             <NuxtLink to="https://github.com/floki1250" target="_blank">
-                <UIcon name="i-line-md-github-loop" class="w-5 h-5 m-2" />
+                <UIcon name="i-line-md-github-loop" class="w-5 h-5 m-1" />
             </NuxtLink>
             <NuxtLink to="https://twitter.com/Adem1250_Dr" target="_blank">
-                <UIcon name="i-line-md-twitter-x" class="w-5 h-5 m-2" />
+                <UIcon name="i-line-md-twitter-x-alt" class="w-5 h-5 m-1" />
             </NuxtLink>
             <NuxtLink to="https://adamdar.vercel.app/" target="_blank">
-                <UIcon name="i-solar-star-linear" class="w-5 h-5 m-2" />
+                <UIcon name="i-line-md-star" class="w-5 h-5 m-1" />
             </NuxtLink>
         </div>
     </footer>

diff --git a/pages/Receive.vue b/pages/Receive.vue
@@ -30,9 +30,12 @@
         </div>
       </div>
     </div>
-    <div v-show="true"
+    <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 ref="chatContainer" class="flex flex-col h-40 overflow-y-scroll p-4">
+      <div ref="chatContainer" class="flex flex-col min-h-80 overflow-y-scroll p-4">
+        <div class="text-center h-60 flex justify-center  items-center" v-if="messages.length === 0">
+          <UIcon name="i-line-md-chat" class="w-24 h-24 opacity-5"></UIcon>
+        </div>
         <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">
@@ -90,7 +93,7 @@ import { useQRCode } from "@vueuse/integrations/useQRCode";
 import { ref } from "vue";
 import Peer from "peerjs";
 import { uniqueNamesGenerator, starWars, adjectives } from "unique-names-generator";
-const colorMode = useColorMode();
+const toast = useToast();
 const chatContainer = ref(null);
 const characterName = uniqueNamesGenerator({
   dictionaries: [adjectives, starWars],
@@ -190,15 +193,26 @@ onMounted(() => {
   scrollToBottom();
 });
 async function handleFileDownload () {
-  const blob = new Blob(receivedFile.value.chunks, {
-    type: receivedFile.value.type,
-  });
+  try {
+    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
+    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
+  } catch (error) {
+    toast.add({
+      id: "error",
+      title: "Error",
+      description: "Error: " + error?.message,
+      icon: "i-heroicons-exclamation-circle",
+      timeout: 6000,
+      color: "rose",
+    });
+  }
 }
 </script>
diff --git a/pages/Send.vue b/pages/Send.vue
@@ -31,9 +31,13 @@
           Connect</UButton>
       </div>
     </div>
-    <div v-show="true"
+    <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 ref="chatContainer" class="flex flex-col h-40 overflow-y-scroll p-4">
+      <div ref="chatContainer" class="flex flex-col min-h-80 overflow-y-scroll p-4">
+        <div class="text-center h-60 flex justify-center  items-center" v-if="messages.length === 0">
+          <UIcon name="i-line-md-chat" class="w-24 h-24 opacity-5"></UIcon>
+        </div>
+
         <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">
@@ -104,6 +108,7 @@ import QrScanner from "qr-scanner";
 import { ref } from "vue";
 import Peer from "peerjs";
 import { uniqueNamesGenerator, starWars, adjectives } from "unique-names-generator";
+import { useIntervalFn } from '@vueuse/core'
 const toast = useToast();
 const loading = ref(false);
 const videoElement = ref(null);
@@ -181,10 +186,12 @@ async function scan () {
   }
 }
 function stopScan () {
-  if (qrScanner) {
-    qrScanner.stop();
-  }
-  isOpen.value = false;
+  useIntervalFn(() => {
+    if (qrScanner) {
+      qrScanner.stop();
+    }
+    isOpen.value = false;
+  })
 }
 
 const connect = () => {

diff --git a/public/hello.gif b/public/hello.gif