Add download steps

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.

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
+```
+

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

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' {} +

materialious/src/lib/Comment.svelte

@@ -9,6 +9,11 @@
 
 	let replies: Comments | undefined = undefined;
 
+	async function loadPfp(url: string): Promise<string> {
+		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 @@
 </script>
 
 <div class="comment">
-	<img
-		class="circle small"
-		src={proxyGoogleImage(getBestThumbnail(comment.authorThumbnails))}
-		alt="comment profile"
-	/>
+	{#await loadPfp(proxyGoogleImage(getBestThumbnail(comment.authorThumbnails))) then pfp}
+		<img class="circle small" src={pfp} alt="comment profile" />
+	{/await}
 	<div>
 		<div class="row">
 			<a href={`/channel/${comment.authorId}`}>
@@ -60,12 +63,9 @@
 			<p><i>thumb_up</i> {numberWithCommas(comment.likeCount)}</p>
 			{#if comment.creatorHeart}
 				<div>
-					<img
-						class="circle"
-						style="width: 25px; height: 25px"
-						src={proxyGoogleImage(comment.creatorHeart.creatorThumbnail)}
-						alt="Creator profile"
-					/>
+					{#await loadPfp(proxyGoogleImage(comment.creatorHeart.creatorThumbnail)) then pfp}
+						<img class="circle" style="width: 25px; height: 25px" src={pfp} alt="Creator profile" />
+					{/await}
 					<i style="font-size: 20px;margin-left: 5px;" class="absolute left red-text bottom fill"
 						>favorite</i
 					>

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