feat(PWA): Add *.torrent file handler (#1754)

README.md

@@ -21,20 +21,27 @@ The sleekest looking WebUI for qBittorrent made with Vue.js!
 - Desktop
 
 <p>
-  <img src="readme_assets/screenshot-desktop.png" width="800" alt="Screenshot Desktop (Light Mode)" />
+  <img src="public/screenshots/screenshot-desktop.jpeg" width="800" alt="Screenshot Desktop (Light Mode)" />
 </p>
 
 - Desktop Dark Mode
 
 <p>
-  <img src="readme_assets/screenshot-desktop-dark-mode.png" width="800" alt="Screenshot Desktop (Dark Mode)" />
+  <img src="public/screenshots/screenshot-desktop-dark-mode.jpeg" width="800" alt="Screenshot Desktop (Dark Mode)" />
 </p>
 
-- Mobile
+- Mobile Light Mode
 
 <p>
-  <img src="readme_assets/screenshot-mobile-dark-mode.png" width="400" alt="Screenshot Mobile Dashboard (Dark Mode)" />
+  <img src="public/screenshots/screenshot-mobile.jpeg" width="400" alt="Screenshot Mobile Dashboard (Light Mode)" />
-  <img src="readme_assets/screenshot-mobile-navbar-dark-mode.png" width="400" alt="Screenshot Mobile Dashboard (Light Mode)" /> 
+  <img src="public/screenshots/screenshot-mobile-navbar.jpeg" width="400" alt="Screenshot Mobile Navbar (Light Mode)" /> 
+</p>
+
+- Mobile Dark Mode
+
+<p>
+  <img src="public/screenshots/screenshot-mobile-dark-mode.jpeg" width="400" alt="Screenshot Mobile Dashboard (Dark Mode)" />
+  <img src="public/screenshots/screenshot-mobile-navbar-dark-mode.jpeg" width="400" alt="Screenshot Mobile Navbar (Dark Mode)" /> 
 </p>
 
 ## Demo

public/manifest.webmanifest

@@ -1,22 +1,115 @@
 {
-  "name": "VueTorrent",
-  "short_name": "VueTorrent",
-  "start_url": ".",
-  "display": "standalone",
   "background_color": "#000",
-  "lang": "en",
+  "categories": [
-  "scope": "./",
+    "utilities"
-  "theme_color": "#597566",
+  ],
+  "description": "The sleekest looking WEBUI for qBittorrent made with Vuejs!",
+  "display": "standalone",
+  "file_handlers": [
+    {
+      "action": ".",
+      "accept": {
+        "application/x-bittorrent": [
+          ".torrent"
+        ],
+        "text/magnet": [
+          ".magnet"
+        ]
+      }
+    }
+  ],
   "icons": [
     {
-      "src": "./icon-192.png",
+      "src": "icon-192.png",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "./icon-512.png",
+      "src": "icon-512.png",
       "type": "image/png",
       "sizes": "512x512"
     }
-  ]
+  ],
+  "lang": "en",
+  "launch_handler": {
+    "client_mode": "focus-existing"
+  },
+  "name": "VueTorrent",
+  "orientation": "any",
+  "protocol_handlers": [
+    {
+      "protocol": "magnet",
+      "url": "#/magnet/%s"
+    }
+  ],
+  "scope": "./",
+  "screenshots": [
+    {
+      "src": "screenshots/screenshot-desktop.jpeg",
+      "sizes": "1788x909",
+      "type": "image/jpeg",
+      "form_factor": "wide",
+      "label": "Screenshot Desktop (Light Mode)"
+    },
+    {
+      "src": "screenshots/screenshot-desktop-dark-mode.jpeg",
+      "sizes": "1788x909",
+      "type": "image/jpeg",
+      "form_factor": "wide",
+      "label": "Screenshot Desktop (Dark Mode)"
+    },
+    {
+      "src": "screenshots/screenshot-mobile.jpeg",
+      "sizes": "425x885",
+      "type": "image/jpeg",
+      "form_factor": "narrow",
+      "label": "Screenshot Mobile Dashboard (Light Mode)"
+    },
+    {
+      "src": "screenshots/screenshot-mobile-navbar.jpeg",
+      "sizes": "425x885",
+      "type": "image/jpeg",
+      "form_factor": "narrow",
+      "label": "Screenshot Mobile Navbar (Light Mode)"
+    },
+    {
+      "src": "screenshots/screenshot-mobile-dark-mode.jpeg",
+      "sizes": "425x885",
+      "type": "image/jpeg",
+      "form_factor": "narrow",
+      "label": "Screenshot Mobile Dashboard (Dark Mode)"
+    },
+    {
+      "src": "screenshots/screenshot-mobile-navbar-dark-mode.jpeg",
+      "sizes": "425x885",
+      "type": "image/jpeg",
+      "form_factor": "narrow",
+      "label": "Screenshot Mobile Navbar (Dark Mode)"
+    }
+  ],
+  "short_name": "VueTorrent",
+  "shortcuts": [
+    {
+      "name": "Dashboard",
+      "url": "#/"
+    },
+    {
+      "name": "Settings",
+      "url": "#/settings"
+    },
+    {
+      "name": "RSS Feeds",
+      "url": "#/rss"
+    },
+    {
+      "name": "Search Engine",
+      "url": "#/search"
+    },
+    {
+      "name": "Logs",
+      "url": "#/logs"
+    }
+  ],
+  "start_url": ".",
+  "theme_color": "#64CEAA"
 }

src/App.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import AddPanel from '@/components/AddPanel.vue'
+import AddTorrentDialog from '@/components/Dialogs/AddTorrentDialog.vue'
 import DnDZone from '@/components/DnDZone.vue'
 import Navbar from '@/components/Navbar/Navbar.vue'
 import { TitleOptions } from '@/constants/vuetorrent'
@@ -40,6 +41,17 @@ const blockContextMenu = () => {
   })
 }
 
+function addLaunchQueueConsumer() {
+  const win = window as { launchQueue?: { setConsumer: (callback: (launchParams: { files: Readonly<FileSystemFileHandle[]>, targetURL: string }) => void) => void } }
+  win.launchQueue?.setConsumer(async (launchParams) => {
+    if (launchParams.files && launchParams.files.length) {
+      addTorrentStore.isFirstInit = false
+      await Promise.all(launchParams.files.map(async file => addTorrentStore.pushTorrentToQueue(await file.getFile())))
+      dialogStore.createDialog(AddTorrentDialog)
+    }
+  });
+}
+
 onBeforeMount(() => {
   backend.init(vuetorrentStore.backendUrl)
   backend.ping()
@@ -47,6 +59,7 @@ onBeforeMount(() => {
   vuetorrentStore.setLanguage(language.value)
   checkAuthentication()
   blockContextMenu()
+  addLaunchQueueConsumer()
 })
 
 watch(