Support paste url to add task

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app>
+  <v-app ref="app">
     <v-navigation-drawer
       app
       :clipped="$vuetify.breakpoint.lgAndUp"
@@ -32,7 +32,7 @@
       <torrents />
     </v-content>
 
-    <add-form v-if="preferences" />
+    <add-form v-if="preferences" :url="pasteUrl" @input="pasteUrl = null"/>
     <login-form v-if="needAuth" v-model="needAuth" />
     <logs-dialog v-if="drawerOptions.showLogs" v-model="drawerOptions.showLogs" />
 
@@ -61,6 +61,8 @@ import { mapActions, mapGetters, mapState, mapMutations } from 'vuex';
 import Axios, { AxiosError } from 'axios';
 import { sleep } from './utils';
 
+let appWrapEl = null;
+
 export default Vue.extend({
   name: 'app',
   components: {
@@ -79,16 +81,20 @@ export default Vue.extend({
       drawerOptions: {
         showLogs: false,
       },
+      pasteUrl: null,
       task: 0,
     };
   },
   async created() {
     await this.getInitData();
+    appWrapEl = this.$refs.app.$el.querySelector('.application--wrap')
+    appWrapEl.addEventListener('paste', this.onPaste);
   },
   beforeDestroy() {
     if (this.task) {
       clearTimeout(this.task);
     }
+    appWrapEl.removeEventListener('paste', this.onPaste);
   },
   computed: {
     ...mapState([
@@ -141,6 +147,12 @@ export default Vue.extend({
         behavior: 'smooth',
       });
     },
+    onPaste(e: ClipboardEvent) {
+      const text = e.clipboardData.getData('text');
+      if (text) {
+        this.pasteUrl = text;
+      }
+    },
   },
   watch: {
     async needAuth(v) {

src/components/AddForm.vue

@@ -103,6 +103,10 @@ const defaultParams = {
 };
 
 export default Vue.extend({
+  props: {
+    url: String,
+  },
+
   data() {
     return {
       dialog: false,
@@ -157,6 +161,21 @@ export default Vue.extend({
       this.userParams.urls = null;
     },
   },
+
+  watch: {
+    url(v) {
+      if (!v) {
+        return;
+      }
+
+      if (!this.dialog) {
+        Vue.set(this.userParams, 'urls', v);
+        this.dialog = true;
+      }
+
+      this.$emit('input', null);
+    },
+  },
 });
 </script>
 

src/filters.ts

@@ -81,7 +81,7 @@ export function formatDuration(value: number, options?: DurationOptions) {
   // }
 
   return parts.join(' ');
-};
+}
 
 Vue.filter('formatDuration', formatDuration);