package.json

@@ -29,9 +29,7 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.0",
-    "eslint-plugin-vue": "^7.0.0-0",
+    "eslint-plugin-vue": "^7.0.0-0"
-    "node-sass": "^5.0.0",
-    "sass-loader": "^10.1.0"
   },
   "eslintConfig": {
     "root": true,

src/components/Upload.vue

@@ -1,46 +1,45 @@
 <template>
-  <Card class="dropZone" @dragover.prevent @drop.prevent @drop="selected" @click="$refs.fileInput.click()">
+  <Card class="upload" v-cloak @drop.prevent="fileDropped" @dragover.prevent>
     <template #content>
       <div class="p-text-center">
         <i class="pi pi-upload"></i>
-        <h2>{{ message }}</h2>
+        <h2>Drag a H.264 encoded MP4 here to start a screen.</h2>
       </div>
     </template>
   </Card>
-  <input type="file" hidden="true" ref="fileInput" @change="selected" />
 </template>
 
 <script>
+import { useToast } from 'primevue/usetoast'
+
 export default {
-  emits: [
+  setup () {
-    'selected'
+    const toast = useToast()
-  ],
+    function fileDropped (e) {
-  props: [
+      if (e.dataTransfer.files.length !== 1) {
-    'message'
+        toast.add({ severity: 'error', summary: 'Bad file', detail: 'Please select only a single file.', life: 3000 })
-  ],
+        return
-  setup (props, context) {
+      }
-    const selected = (event) => {
+
-      const files = event.dataTransfer ? event.dataTransfer.files : event.target.files
+      const file = e.dataTransfer.files[0]
-      context.emit('selected', files)
+      if (!file.name.endsWith('.mp4') || !file.type === 'video/mp4') {
+        toast.add({ severity: 'error', summary: 'Bad file', detail: 'File must be a H.264 encoded MP4.', life: 3000 })
+      }
     }
 
     return {
-      selected
+      fileDropped
     }
   }
 }
 </script>
 
-<style lang="scss">
+<style>
-.dropZone {
+.upload {
-  cursor: pointer;
+  color:  rgba(0,0,0,0.4)
-
-  i, h2 {
-    color:  #aaaaaa
-  }
 }
 
 i.pi.pi-upload {
-  font-size: 5em
+  font-size: 5em;
 }
 </style>

src/views/Host.vue

@@ -1,38 +1,14 @@
 <template>
   <div class="p-p-6">
     <h1 class="p-my-0">Host</h1>
-    <Upload v-if="!file" message="Drag a H.264 encoded MP4 here to start a screen." @selected="filesSelected" />
+    <Upload />
   </div>
 </template>
 
 <script>
-import { useToast } from 'primevue/usetoast'
-import { ref } from 'vue'
-
 export default {
   setup () {
-    const toast = useToast()
 
-    const file = ref()
-
-    const filesSelected = (files) => {
-      if (files?.length !== 1) {
-        toast.add({ severity: 'error', summary: 'Bad file input', detail: 'You must select only one file.', life: 3000 })
-        return
-      }
-
-      if (!files[0].name.endsWith('.mp4') || files[0].type !== 'video/mp4') {
-        toast.add({ severity: 'error', summary: 'Bad file input', detail: 'Only H.264 encoded MP4s are supported.', life: 3000 })
-        return
-      }
-
-      file.value = files[0]
-    }
-
-    return {
-      filesSelected,
-      file
-    }
   }
 }
 </script>