feat: integrated Web Share Target API for PWA

ui/angular.json

@@ -25,14 +25,18 @@
             "aot": true,
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/manifest.webmanifest",
+              "src/custom-service-worker.js"
             ],
             "styles": [
               "src/styles.sass"
             ],
             "scripts": [
               "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
-            ]
+            ],
+            "serviceWorker": true,
+            "ngswConfigPath": "ngsw-config.json"
           },
           "configurations": {
             "production": {
@@ -90,7 +94,9 @@
             "karmaConfig": "karma.conf.js",
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/manifest.webmanifest",
+              "src/custom-service-worker.js"
             ],
             "styles": [
               "src/styles.sass"

ui/ngsw-config.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
+  "index": "/index.html",
+  "assetGroups": [
+    {
+      "name": "app",
+      "installMode": "prefetch",
+      "resources": {
+        "files": [
+          "/favicon.ico",
+          "/index.html",
+          "/manifest.webmanifest",
+          "/*.css",
+          "/*.js"
+        ]
+      }
+    },
+    {
+      "name": "assets",
+      "installMode": "lazy",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": [
+          "/assets/**",
+          "/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
+        ]
+      }
+    }
+  ]
+}

ui/package-lock.json

@@ -17,6 +17,7 @@
         "@angular/platform-browser": "^15.0.0",
         "@angular/platform-browser-dynamic": "^15.0.0",
         "@angular/router": "^15.0.0",
+        "@angular/service-worker": "^15.0.0",
         "@fortawesome/angular-fontawesome": "~0.12.0",
         "@fortawesome/fontawesome-svg-core": "^6.4.0",
         "@fortawesome/free-regular-svg-icons": "^6.4.0",
@@ -642,6 +643,24 @@
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
+    "node_modules/@angular/service-worker": {
+      "version": "15.2.10",
+      "resolved": "https://registry.npmjs.org/@angular/service-worker/-/service-worker-15.2.10.tgz",
+      "integrity": "sha512-dTLLt02OwYVZ7U2sat8v/1jxtBNYnps+AZyRVXxpTPvgkljLHphhWuSPv6V8IRxxKF0SU7e6RVrcAMLIPUSVeg==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "bin": {
+        "ngsw-config": "ngsw-config.js"
+      },
+      "engines": {
+        "node": "^14.20.0 || ^16.13.0 || >=18.10.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "15.2.10",
+        "@angular/core": "15.2.10"
+      }
+    },
     "node_modules/@assemblyscript/loader": {
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/@assemblyscript/loader/-/loader-0.10.1.tgz",

ui/package.json

@@ -20,6 +20,7 @@
     "@angular/platform-browser": "^15.0.0",
     "@angular/platform-browser-dynamic": "^15.0.0",
     "@angular/router": "^15.0.0",
+    "@angular/service-worker": "^15.0.0",
     "@fortawesome/angular-fontawesome": "~0.12.0",
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-regular-svg-icons": "^6.4.0",

ui/src/app/app.module.ts

@@ -1,5 +1,5 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import { NgModule, isDevMode } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { HttpClientModule } from '@angular/common/http';
@@ -11,6 +11,7 @@ import { EtaPipe, SpeedPipe, EncodeURIComponent } from './downloads.pipe';
 import { MasterCheckboxComponent, SlaveCheckboxComponent } from './master-checkbox.component';
 import { MeTubeSocket } from './metube-socket';
 import { NgSelectModule } from '@ng-select/ng-select';
+import { ServiceWorkerModule } from '@angular/service-worker';
 
 @NgModule({
   declarations: [
@@ -27,7 +28,13 @@ import { NgSelectModule } from '@ng-select/ng-select';
     NgbModule,
     HttpClientModule,
     FontAwesomeModule,
-    NgSelectModule
+    NgSelectModule,
+    ServiceWorkerModule.register('custom-service-worker.js', {
+      enabled: !isDevMode(),
+      // Register the ServiceWorker as soon as the application is stable
+      // or after 30 seconds (whichever comes first).
+      registrationStrategy: 'registerWhenStable:30000'
+    })
   ],
   providers: [CookieService, MeTubeSocket],
   bootstrap: [AppComponent]

ui/src/app/metube-socket.ts

@@ -3,7 +3,9 @@ import { Socket } from 'ngx-socket-io';
 
 @Injectable()
 export class MeTubeSocket extends Socket {
-     constructor() {
-        super({ url: '', options: {path: document.location.pathname + 'socket.io'} });
-    }
+  constructor() {
+    const path =
+      document.location.pathname.replace(/share-target/, '') + 'socket.io';
+    super({ url: '', options: { path } });
+  }
 }

ui/src/custom-service-worker.js

@@ -0,0 +1,38 @@
+const URL_PATTERN =
+  /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/gi;
+
+self.addEventListener("fetch", (event) => {
+  if (event.request.method === "GET") {
+    const url = new URL(event.request.url);
+
+    if (url.pathname.endsWith("/share-target")) {
+      const urlRegExp = new RegExp(URL_PATTERN);
+      const sharedText = url.searchParams.get("text");
+      const matches = [...sharedText.matchAll(urlRegExp)].map((m) => m[0]);
+
+      event.respondWith(
+        (async () => {
+          await Promise.all(
+            matches.map((url) => {
+              return fetch("/add", {
+                method: "POST",
+                headers: {
+                  "Content-Type": "application/json",
+                },
+                body: JSON.stringify({
+                  url,
+                  quality: "best",
+                  format: "any",
+                  auto_start: true,
+                }),
+              });
+            })
+          );
+          return Response.redirect("/", 303);
+        })()
+      );
+    }
+  }
+});
+
+importScripts("./ngsw-worker.js");

ui/src/index.html

@@ -7,14 +7,15 @@
   <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
-  <link rel="manifest" href="favicon/site.webmanifest">
   <link rel="mask-icon" href="favicon/safari-pinned-tab.svg" color="#5bbad5">
   <link rel="shortcut icon" href="favicon/favicon.ico">
   <meta name="msapplication-TileColor" content="#da532c">
   <meta name="msapplication-config" content="favicon/browserconfig.xml">
-  <meta name="theme-color" content="#ffffff">
+  <link rel="manifest" href="manifest.webmanifest">
+  <meta name="theme-color" content="#212529">
 </head>
 <body>
   <app-root></app-root>
+  <noscript>Please enable JavaScript to continue using this application.</noscript>
 </body>
 </html>

ui/src/manifest.webmanifest

@@ -0,0 +1,28 @@
+{
+  "name": "MeTube",
+  "short_name": "MeTube",
+  "theme_color": "#212529",
+  "background_color": "#fafafa",
+  "display": "standalone",
+  "scope": "./",
+  "start_url": "/?utm_source=homescreen",
+  "icons": [
+    {
+      "src": "assets/icons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/android-chrome-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    }
+  ],
+  "share_target": {
+    "action": "/share-target",
+    "method": "GET",
+    "params": {
+      "text": "text"
+    }
+  }
+}