feat: [dl-chrome-extension] add YouTube support

BelgianNoise · May 3, 2024 · 5e1e297 · 5e1e297
1 parent c2b60d2
commit 5e1e297
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -14,9 +14,9 @@ Currently supported content providers:
 | GoPlay               |    ✔️     |    ✔️   |         ✔️          |
 | VTM GO               |    ❌     |    ❌   |         ❌          |
 | Streamz              |    ❌     |    ❌   |         ❌          |
-| YouTube              |    ✔️     |    ✔️   |         ❌          |
-| Plain manifest url   |    ✔️     |    ✔️   |                      |
-| NPO Start            |    ❌     |    ❌   |         ❌           |
+| YouTube              |    ✔️     |    ✔️   |         ✔️          |
+| Plain manifest url   |    ✔️     |    ✔️   |         ❌          |
+| NPO Start            |    ❌     |    ❌   |         ❌          |
 
 ## [dl-downer](dl-downer/)
 

diff --git a/dl-chrome-extension/public/manifest.json b/dl-chrome-extension/public/manifest.json
@@ -19,7 +19,8 @@
     {
       "matches": [
         "*://*.vrt.be/vrtmax/*",
-        "*://*.goplay.be/*"
+        "*://*.goplay.be/*",
+        "*://*.youtube.com/*"
       ],
       "js": ["js/vendor.js", "js/content_script.js"],
       "css": ["css/variables.css","css/notifications.css"]
@@ -37,6 +38,7 @@
 
   "host_permissions": [
     "*://*.vrt.be/*",
-    "*://*.goplay.be/*"
+    "*://*.goplay.be/*",
+    "*://*.youtube.com/*"
   ]
 }
diff --git a/dl-chrome-extension/src/content_script.tsx b/dl-chrome-extension/src/content_script.tsx
@@ -68,6 +68,29 @@ function addButtonGoPlayMovie(): void {
   console.log('added button to GoPlay')
 }
 
+function addButtonYouTube(): void {
+  console.log('adding button to YouTube')
+  if (document.getElementById(buttonElementId)) return;
+  const el: HTMLDivElement = document.querySelector(
+    'div#above-the-fold div#title',
+  ) as HTMLDivElement;
+  if (!el) return;
+  const newDiv = document.createElement("div");
+  newDiv.id = buttonElementId;
+  el.style.display = 'flex';
+  el.style.justifyContent = 'space-between';
+  el.style.alignItems = 'center';
+  el.style.gap = '20px';
+  el.append(newDiv);
+  const root = createRoot(newDiv);
+  root.render(
+    <React.StrictMode>
+      <DownloadButton />
+    </React.StrictMode>
+  );
+  console.log('added button to YouTube')
+}
+
 function removeButton(): void {
   const el = document.getElementById(buttonElementId);
   if (el) {
@@ -87,6 +110,9 @@ function handleURLUpdated() {
   } else if (url.match(/\/video\/([\w-]+?\/[\w-]+?\/)?[\w-]+?(#autoplay)?$/)) {
     // GOPLAY MOVIE
     addButtonGoPlayMovie();
+  } else if (url.match(/youtube\.com\/watch/)) {
+    // YOUTUBE
+    addButtonYouTube();
   } else {
     removeButton();
   }