From d5c7d15878b2d71d18773965c1a76bfd2e258c99 Mon Sep 17 00:00:00 2001 From: WardPearce Date: Tue, 10 Sep 2024 17:10:25 +1200 Subject: [PATCH] Add download steps --- README.md | 3 +- docs/DOCKER.md | 59 +++++++++++++++++++ materialious/Dockerfile | 1 + materialious/replace_env_vars.sh | 1 + materialious/src/lib/Comment.svelte | 22 +++---- .../src/routes/(app)/watch/[slug]/+page.ts | 2 +- 6 files changed, 75 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 23a592de..67ed42fc 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,8 @@ - Sync your watch progress between Invidious sessions. - Watch sync parties! - Mini player. -- Silence skipper (Experimental) +- Silence skipper (Experimental.) +- ffmpeg integration for downloading videos with audio at any quality ([Configuration required](./docs/DOCKER.md#step-7-optional-enabling-downloads)). - Preview video on hover. - Sponsorblock built-in. - Return YouTube dislikes built-in. diff --git a/docs/DOCKER.md b/docs/DOCKER.md index 1d19fa0f..c3924769 100644 --- a/docs/DOCKER.md +++ b/docs/DOCKER.md @@ -148,6 +148,9 @@ services: # Look at "Overwriting Materialious defaults" for all the accepted values. VITE_DEFAULT_SETTINGS: '{"themeColor": "#2596be","region": "US"}' + + # Please look at step 7 about enabling this. + VITE_DEFAULT_DOWNLOAD_ENABLED: false ``` ### Overwriting Materialious defaults @@ -269,3 +272,59 @@ VITE_DEFAULT_PEERJS_HOST: "peerjs.example.com" VITE_DEFAULT_PEERJS_PATH: "/" VITE_DEFAULT_PEERJS_PORT: 443 ``` + + +## Step 7 (Optional): Enabling downloads + +### Step 1: Add the following to your reverse proxy + +#### Caddy + +```caddy +materialious.example.com { + reverse_proxy localhost:3001 + + header { + Cross-Origin-Opener-Policy "same-origin" + Cross-Origin-Embedder-Policy "require-corp" + } + +} +``` + +#### Nginx +```nginx +server { + listen 80; + server_name materialious.example.com; + + add_header Cross-Origin-Opener-Policy "same-origin" always; + add_header Cross-Origin-Embedder-Policy "require-corp" always; + + location / { + proxy_pass http://localhost:3001; + } +} +``` + +#### Traefik +Add the following to Materialious + +```yaml +http: + middlewares: + materialious-downloads: + headers: + customResponseHeaders: + Cross-Origin-Opener-Policy: "same-origin" + Cross-Origin-Embedder-Policy: "require-corp" +``` + + +### Step 2: Modify docker compose. + +Add this environment variable to Materialious. +```yaml +VITE_DEFAULT_DOWNLOAD_ENABLED: true +``` + diff --git a/materialious/Dockerfile b/materialious/Dockerfile index 0a25e0d5..8d3eb0b0 100644 --- a/materialious/Dockerfile +++ b/materialious/Dockerfile @@ -17,6 +17,7 @@ RUN echo "VITE_DEFAULT_INVIDIOUS_INSTANCE=VITE_DEFAULT_INVIDIOUS_INSTANCE_PLACEH echo "VITE_DEFAULT_PEERJS_HOST=VITE_DEFAULT_PEERJS_HOST_PLACEHOLDER" >> .env && \ echo "VITE_DEFAULT_PEERJS_PATH=VITE_DEFAULT_PEERJS_PATH_PLACEHOLDER" >> .env && \ echo "VITE_DEFAULT_PEERJS_PORT=VITE_DEFAULT_PEERJS_PORT_PLACEHOLDER" >> .env && \ + echo "VITE_DEFAULT_DOWNLOAD_ENABLED=VITE_DEFAULT_DOWNLOAD_ENABLED_PLACEHOLDER" >> .env && \ echo "VITE_DEFAULT_SYNCIOUS_INSTANCE=VITE_DEFAULT_SYNCIOUS_INSTANCE_PLACEHOLDER" >> .env && \ echo "VITE_DEFAULT_SETTINGS='\"VITE_DEFAULT_SETTINGS_PLACEHOLDER\"'" >> .env && \ echo "VITE_DEFAULT_RETURNYTDISLIKES_INSTANCE=VITE_DEFAULT_RETURNYTDISLIKES_INSTANCE_PLACEHOLDER" >> .env diff --git a/materialious/replace_env_vars.sh b/materialious/replace_env_vars.sh index ba74d461..8462fb3c 100644 --- a/materialious/replace_env_vars.sh +++ b/materialious/replace_env_vars.sh @@ -10,5 +10,6 @@ find "$ROOT_DIR" -type f \( -name "*.js" -o -name "*.html" \) -exec sed -i 's|VI find "$ROOT_DIR" -type f \( -name "*.js" -o -name "*.html" \) -exec sed -i 's|VITE_DEFAULT_PEERJS_HOST_PLACEHOLDER|'"$VITE_DEFAULT_PEERJS_HOST"'|g' {} + find "$ROOT_DIR" -type f \( -name "*.js" -o -name "*.html" \) -exec sed -i 's|VITE_DEFAULT_PEERJS_PATH_PLACEHOLDER|'"$VITE_DEFAULT_PEERJS_PATH"'|g' {} + find "$ROOT_DIR" -type f \( -name "*.js" -o -name "*.html" \) -exec sed -i 's|VITE_DEFAULT_PEERJS_PORT_PLACEHOLDER|'"$VITE_DEFAULT_PEERJS_PORT"'|g' {} + +find "$ROOT_DIR" -type f \( -name "*.js" -o -name "*.html" \) -exec sed -i 's|VITE_DEFAULT_DOWNLOAD_ENABLED_PLACEHOLDER|'"$VITE_DEFAULT_DOWNLOAD_ENABLED"'|g' {} + find "$ROOT_DIR" -type f \( -name "*.js" -o -name "*.html" \) -exec sed -i 's|VITE_DEFAULT_SYNCIOUS_INSTANCE_PLACEHOLDER|'"$VITE_DEFAULT_SYNCIOUS_INSTANCE"'|g' {} + find "$ROOT_DIR" -type f \( -name "*.js" -o -name "*.html" \) -exec sed -i 's|VITE_DEFAULT_SETTINGS_PLACEHOLDER|'"$VITE_DEFAULT_SETTINGS"'|g' {} + diff --git a/materialious/src/lib/Comment.svelte b/materialious/src/lib/Comment.svelte index 89c0bc82..271962f2 100644 --- a/materialious/src/lib/Comment.svelte +++ b/materialious/src/lib/Comment.svelte @@ -9,6 +9,11 @@ let replies: Comments | undefined = undefined; + async function loadPfp(url: string): Promise { + const resp = await fetch(url); + return URL.createObjectURL(await resp.blob()); + } + async function loadReplies(continuation: string) { try { replies = await getComments(videoId, { @@ -31,11 +36,9 @@
- comment profile + {#await loadPfp(proxyGoogleImage(getBestThumbnail(comment.authorThumbnails))) then pfp} + comment profile + {/await}
@@ -60,12 +63,9 @@

thumb_up {numberWithCommas(comment.likeCount)}

{#if comment.creatorHeart}
- Creator profile + {#await loadPfp(proxyGoogleImage(comment.creatorHeart.creatorThumbnail)) then pfp} + Creator profile + {/await} favorite diff --git a/materialious/src/routes/(app)/watch/[slug]/+page.ts b/materialious/src/routes/(app)/watch/[slug]/+page.ts index 6a189268..5ff39238 100644 --- a/materialious/src/routes/(app)/watch/[slug]/+page.ts +++ b/materialious/src/routes/(app)/watch/[slug]/+page.ts @@ -52,7 +52,7 @@ export async function load({ params, url }) { } let downloadQualitiesDash; - if (typeof video.hlsUrl === 'undefined' && get(playerDashStore)) { + if (import.meta.env.VITE_DEFAULT_DOWNLOAD_ENABLED.toString() === 'true' && typeof video.hlsUrl === 'undefined' && get(playerDashStore)) { downloadQualitiesDash = listCombinedQualities(video.dashUrl); }