From a9585f1e8296b20bd124ca7fc94b3264fb388e59 Mon Sep 17 00:00:00 2001
From: Anatoly <akopyl@radner.ru>
Date: Tue, 4 Jan 2022 01:42:51 +0300
Subject: [PATCH] Direct file upload

---
 src/api/createRoom.ts      | 19 +++++++++--
 src/components/Spinner.vue | 39 +++++++++++++++++++++++
 src/interfaces.ts          |  2 +-
 src/scss/style.scss        | 14 ++++++--
 src/views/Home/Index.vue   | 65 ++++++++++++++++++++++++++++++++++----
 src/views/Room/Index.vue   |  6 ++--
 6 files changed, 130 insertions(+), 15 deletions(-)
 create mode 100644 src/components/Spinner.vue

diff --git a/src/api/createRoom.ts b/src/api/createRoom.ts
index 8af1542..eaa5f4f 100644
--- a/src/api/createRoom.ts
+++ b/src/api/createRoom.ts
@@ -1,5 +1,18 @@
 import api from '@/api/index';
 
-export default (magnet:String) => api.post('/room', {
-  magnet,
-}).then((response) => response.data);
+export default (movie: String | File) => {
+  if (typeof movie === 'string') {
+    return api.post('/roomMagnet', {
+      magnet: movie,
+    }).then((response) => response.data);
+  }
+
+  const formData = new FormData();
+  formData.append('file', movie as Blob);
+
+  return api.post('/roomFile', formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+  }).then((response) => response.data);
+};
diff --git a/src/components/Spinner.vue b/src/components/Spinner.vue
new file mode 100644
index 0000000..c305bc6
--- /dev/null
+++ b/src/components/Spinner.vue
@@ -0,0 +1,39 @@
+<template>
+<svg class="spinner" viewBox="0 0 50 50">
+  <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
+</svg>
+</template>
+
+<style lang="scss" scoped>
+.spinner {
+  animation: rotate 2s linear infinite;
+
+  & .path {
+    stroke: currentColor;
+    stroke-linecap: round;
+    animation: dash 1.5s ease-in-out infinite;
+  }
+
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}
+</style>
diff --git a/src/interfaces.ts b/src/interfaces.ts
index f0270e6..c7fbcc9 100644
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@@ -1,6 +1,6 @@
 export interface Room {
   id: string;
-  magnet: string;
+  magnet?: string;
   createdAt: Date;
   movie?: string;
   filename?: string;
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 21080eb..79437ee 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -12,13 +12,13 @@ html, body {
   height: 100%;
 }
 
-button, input[type="text"], textarea {
+button, input[type="text"], input[type="file"], textarea {
   padding: 8px 12px;
   background: none;
   border: 1px solid black;
 }
 
-button, a {
+button, a, input[type="file"] {
   cursor: pointer;
 }
 
@@ -28,4 +28,14 @@ h1 {
 
 h2 {
   font-size: 24px;
+}
+
+.secondary {
+  color: #818181;
+}
+
+::file-selector-button {
+  background: none;
+  border: 1px solid black;
+  font-family: 'EB Garamond', serif;
 }
\ No newline at end of file
diff --git a/src/views/Home/Index.vue b/src/views/Home/Index.vue
index afcfd80..3f1d62c 100644
--- a/src/views/Home/Index.vue
+++ b/src/views/Home/Index.vue
@@ -1,16 +1,29 @@
 <template>
   <div class="home">
     <form @submit.prevent>
+      <input
+        type="file"
+        placeholder="file"
+        @change="handleFile"
+        accept="video/mp4"
+      >
+
+      <div class="secondary">or</div>
+
       <input
         type="text"
         v-model="magnet"
         placeholder="magnet link"
       >
-      <button
-        @click="submit"
-      >
-        create room
-      </button>
+
+      <div class="submit">
+        <button
+          @click="submit"
+        >
+          create room
+        </button>
+        <Spinner v-if="waiting" class="spinner" />
+      </div>
     </form>
     <a href="https://nutbread.github.io/t2m/">convert .torrent file to a magnet link</a>
   </div>
@@ -19,21 +32,40 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import createRoom from '@/api/createRoom';
+import Spinner from '@/components/Spinner.vue';
 
 import { Room } from '@/interfaces';
 
 export default defineComponent({
   name: 'Home',
+  components: {
+    Spinner,
+  },
   data() {
     return {
       magnet: '',
+      file: undefined as File | undefined,
+      waiting: false,
     };
   },
   methods: {
     async submit() {
-      const room: Room = await createRoom(this.magnet);
+      this.waiting = true;
+      let room: Room;
+      if (this.file) {
+        room = await createRoom(this.file);
+      } else {
+        room = await createRoom(this.magnet);
+      }
+      this.waiting = false;
       this.$router.push({ name: 'Room', params: { id: room.id } });
     },
+    handleFile(event: Event) {
+      const element = (event.target as HTMLInputElement);
+      if (element.files) {
+        [this.file] = element.files;
+      }
+    },
   },
 });
 </script>
@@ -43,7 +75,26 @@ form {
   margin-bottom: 32px;
 
   > * {
-    margin: 0 8px;
+    display: block;
+    margin: 8px 0;
+    width: 100%;
+  }
+
+  .submit {
+    position: relative;
+    display: flex;
+    align-items: center;
+
+    button {
+      width: 100%;
+    }
+
+    .spinner {
+      position: absolute;
+      right: -48px;
+      width: 32px;
+      height: 32px;
+    }
   }
 }
 </style>
diff --git a/src/views/Room/Index.vue b/src/views/Room/Index.vue
index 74f35cf..efd9b1b 100644
--- a/src/views/Room/Index.vue
+++ b/src/views/Room/Index.vue
@@ -63,8 +63,10 @@ export default defineComponent({
     clearInterval(this.positionInterval);
   },
   methods: {
-    onDownloaded() {
-      this.room.downloaded = true;
+    async onDownloaded() {
+      if (!this.room.downloaded) {
+        this.room = await getRoom(this.id);
+      }
       this.$nextTick(() => {
         const element = this.$refs.video as HTMLVideoElement;
         this.positionInterval = setInterval(async () => {