Fix toast notifications and add Webtorrent to project dependencies

package.json

@@ -14,7 +14,8 @@
     "primeicons": "^4.1.0",
     "primevue": "^3.1.1",
     "vue": "^3.0.0",
-    "vue-router": "^4.0.2"
+    "vue-router": "^4.0.2",
+    "webtorrent": "^0.112.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/App.vue

@@ -2,6 +2,7 @@
   <MenuBar :model="items">
   </MenuBar>
   <router-view />
+  <Toast position="top-right" />
 </template>
 
 <script>

src/components/Upload.vue

@@ -1,35 +1,45 @@
 <template>
-  <div class="p-card p-component" v-cloak @drop.prevent="droppedFile" @dragover.prevent>
-    <div class="p-card-body">
-      <div class="p-card-content">
-        Hello
-      </div>
-    </div>
+  <Card class="upload" v-cloak @drop.prevent="fileDropped" @dragover.prevent>
+    <template #content>
+      <div class="p-text-center">
+        <i class="pi pi-upload"></i>
+        <h2>Drag a H.264 encoded MP4 here to start a screen.</h2>
       </div>
+    </template>
+  </Card>
 </template>
 
 <script>
+import { useToast } from 'primevue/usetoast'
+
 export default {
   setup () {
-    function droppedFile (e) {
+    const toast = useToast()
+    function fileDropped (e) {
       if (e.dataTransfer.files.length !== 1) {
-        alert('You may only host a single video.')
+        toast.add({ severity: 'error', summary: 'Bad file', detail: 'Please select only a single file.', life: 3000 })
         return
       }
 
       const file = e.dataTransfer.files[0]
       if (!file.name.endsWith('.mp4') || !file.type === 'video/mp4') {
-        alert('You may only host an H.264 encoded MP4.')
+        toast.add({ severity: 'error', summary: 'Bad file', detail: 'File must be a H.264 encoded MP4.', life: 3000 })
       }
     }
 
     return {
-      droppedFile
+      fileDropped
     }
   }
 }
 </script>
 
 <style>
+.upload {
+  color:  rgba(0,0,0,0.4)
+}
 
+i.pi.pi-upload {
+  font-size: 5em;
+}
 </style>

src/main.js

@@ -12,6 +12,8 @@ import Card from 'primevue/card'
 import FileUpload from 'primevue/fileupload'
 import InputText from 'primevue/inputtext'
 import MenuBar from 'primevue/menubar'
+import Toast from 'primevue/toast'
+import ToastService from 'primevue/toastservice'
 import 'primeflex/primeflex.css'
 import 'primeicons/primeicons.css'
 import 'primevue/resources/primevue.min.css'
@@ -21,6 +23,7 @@ const app = createApp(App)
 
 app.use(Router)
 app.use(PrimeVue)
+app.use(ToastService)
 
 app.component('Button', Button)
 app.component('Card', Card)
@@ -28,6 +31,7 @@ app.component('FileUpload', FileUpload)
 app.component('InputText', InputText)
 app.component('MenuBar', MenuBar)
 app.component('Upload', Upload)
+app.component('Toast', Toast)
 
 // Render to DOM.
 app.mount('#app')