diff --git a/Dockerfile b/Dockerfile index 2985481..a5f8f00 100644 --- a/Dockerfile +++ b/Dockerfile @@ -25,7 +25,6 @@ RUN sed -i 's/\r$//g' docker-entrypoint.sh && \ rm -rf /var/cache/apk/* && \ mkdir /.cache && chmod 777 /.cache -COPY favicon ./favicon COPY app ./app COPY --from=builder /metube/dist/metube ./ui/dist/metube diff --git a/app/main.py b/app/main.py index 1c1cbf6..f77181c 100644 --- a/app/main.py +++ b/app/main.py @@ -207,7 +207,6 @@ if config.URL_PREFIX != '/': def index_redirect_dir(request): return web.HTTPFound(config.URL_PREFIX) -routes.static(config.URL_PREFIX + 'favicon/', os.path.join(config.BASE_DIR, 'favicon')) routes.static(config.URL_PREFIX + 'download/', config.DOWNLOAD_DIR, show_index=config.DOWNLOAD_DIRS_INDEXABLE) routes.static(config.URL_PREFIX + 'audio_download/', config.AUDIO_DOWNLOAD_DIR, show_index=config.DOWNLOAD_DIRS_INDEXABLE) routes.static(config.URL_PREFIX, os.path.join(config.BASE_DIR, 'ui/dist/metube')) diff --git a/favicon/README.md b/favicon/README.md deleted file mode 100644 index 439e228..0000000 --- a/favicon/README.md +++ /dev/null @@ -1,23 +0,0 @@ -# Your Favicon Package - -This package was generated with [RealFaviconGenerator](https://realfavicongenerator.net/) [v0.16](https://realfavicongenerator.net/change_log#v0.16) - -## Install instructions - -To install this package: - -Extract this package in <web site>/favicon/. If your site is http://www.example.com, you should be able to access a file named http://www.example.com/favicon/favicon.ico. - -Insert the following code in the `head` section of your pages: - - - - - - - - - - - -*Optional* - Check your favicon with the [favicon checker](https://realfavicongenerator.net/favicon_checker) \ No newline at end of file diff --git a/favicon/html_code.html b/favicon/html_code.html deleted file mode 100644 index 411b55b..0000000 --- a/favicon/html_code.html +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - \ No newline at end of file diff --git a/favicon/site.webmanifest b/favicon/site.webmanifest deleted file mode 100644 index a476f60..0000000 --- a/favicon/site.webmanifest +++ /dev/null @@ -1,19 +0,0 @@ -{ - "name": "", - "short_name": "", - "icons": [ - { - "src": "android-chrome-192x192.png", - "sizes": "192x192", - "type": "image/png" - }, - { - "src": "android-chrome-384x384.png", - "sizes": "384x384", - "type": "image/png" - } - ], - "theme_color": "#ffffff", - "background_color": "#ffffff", - "display": "standalone" -} diff --git a/ui/angular.json b/ui/angular.json index 65b1d1e..801cf09 100644 --- a/ui/angular.json +++ b/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" diff --git a/ui/ngsw-config.json b/ui/ngsw-config.json new file mode 100644 index 0000000..f8bf210 --- /dev/null +++ b/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)" + ] + } + } + ] +} diff --git a/ui/package-lock.json b/ui/package-lock.json index f0f62aa..16335a9 100644 --- a/ui/package-lock.json +++ b/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", diff --git a/ui/package.json b/ui/package.json index 76ea0f0..fffb2fd 100644 --- a/ui/package.json +++ b/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", diff --git a/ui/src/app/app.module.ts b/ui/src/app/app.module.ts index 8eddbca..35e0621 100644 --- a/ui/src/app/app.module.ts +++ b/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] diff --git a/ui/src/app/metube-socket.ts b/ui/src/app/metube-socket.ts index cfc8fea..65629ae 100644 --- a/ui/src/app/metube-socket.ts +++ b/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 } }); + } } diff --git a/favicon/android-chrome-192x192.png b/ui/src/assets/icons/android-chrome-192x192.png similarity index 100% rename from favicon/android-chrome-192x192.png rename to ui/src/assets/icons/android-chrome-192x192.png diff --git a/favicon/android-chrome-384x384.png b/ui/src/assets/icons/android-chrome-384x384.png similarity index 100% rename from favicon/android-chrome-384x384.png rename to ui/src/assets/icons/android-chrome-384x384.png diff --git a/favicon/apple-touch-icon.png b/ui/src/assets/icons/apple-touch-icon.png similarity index 100% rename from favicon/apple-touch-icon.png rename to ui/src/assets/icons/apple-touch-icon.png diff --git a/favicon/browserconfig.xml b/ui/src/assets/icons/browserconfig.xml similarity index 100% rename from favicon/browserconfig.xml rename to ui/src/assets/icons/browserconfig.xml diff --git a/favicon/favicon-16x16.png b/ui/src/assets/icons/favicon-16x16.png similarity index 100% rename from favicon/favicon-16x16.png rename to ui/src/assets/icons/favicon-16x16.png diff --git a/favicon/favicon-32x32.png b/ui/src/assets/icons/favicon-32x32.png similarity index 100% rename from favicon/favicon-32x32.png rename to ui/src/assets/icons/favicon-32x32.png diff --git a/favicon/favicon.ico b/ui/src/assets/icons/favicon.ico similarity index 100% rename from favicon/favicon.ico rename to ui/src/assets/icons/favicon.ico diff --git a/favicon/mstile-150x150.png b/ui/src/assets/icons/mstile-150x150.png similarity index 100% rename from favicon/mstile-150x150.png rename to ui/src/assets/icons/mstile-150x150.png diff --git a/favicon/safari-pinned-tab.svg b/ui/src/assets/icons/safari-pinned-tab.svg similarity index 100% rename from favicon/safari-pinned-tab.svg rename to ui/src/assets/icons/safari-pinned-tab.svg diff --git a/ui/src/custom-service-worker.js b/ui/src/custom-service-worker.js new file mode 100644 index 0000000..5ff616f --- /dev/null +++ b/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"); diff --git a/ui/src/favicon.ico b/ui/src/favicon.ico index 997406a..82ba7a5 100644 Binary files a/ui/src/favicon.ico and b/ui/src/favicon.ico differ diff --git a/ui/src/index.html b/ui/src/index.html index d57a30b..4e03924 100644 --- a/ui/src/index.html +++ b/ui/src/index.html @@ -4,17 +4,18 @@ MeTube - - - - - - + + + + + + - - + + + diff --git a/ui/src/manifest.webmanifest b/ui/src/manifest.webmanifest new file mode 100644 index 0000000..88183ee --- /dev/null +++ b/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" + } + } +}