thomas/metube
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: integrated Web Share Target API for PWA

Browse Source
This commit is contained in:
Philipp Hutterer
2023-12-30 04:15:44 +01:00
parent f0247415bf
commit 48657c1c12
11 changed files with 142 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
ui/src/app/app.module.ts
View File

@@ -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]

8
ui/src/app/metube-socket.ts
View File

@@ -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 } });
}
}

BIN
ui/src/assets/icons/android-chrome-192x192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
ui/src/assets/icons/android-chrome-384x384.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

38
ui/src/custom-service-worker.js Normal file
View File

@@ -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");

5
ui/src/index.html
View File

@@ -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>

28
ui/src/manifest.webmanifest Normal file
View File

@@ -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"
}
}
}