fix(webext): ensure that content script correctly returns the video i…

…nfos
AXeL-dev · Jul 10, 2022 · 330c0a2 · 330c0a2
1 parent 8aa6462
commit 330c0a2
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 10 deletions.
diff --git a/public/content.js b/public/content.js
@@ -2,13 +2,40 @@
 
 (function () {
   function getMeta(name) {
-    return document.querySelector('meta[itemprop="' + name + '"]').content;
+    const query = document.querySelector('meta[itemprop="' + name + '"]');
+    return query ? query.content : undefined;
+  }
+
+  function getVideoId(url) {
+    let videoId = null;
+    if (url.indexOf('v=') !== -1) {
+      /**
+       * Example:
+       *    https://www.youtube.com/watch?v=aZ-dSpfdHok
+       *    https://www.youtube.com/watch?v=aZ-dSpfdHok&feature=feedrec_grec_index
+       */
+      videoId = url.split('v=')[1];
+      const index = videoId.indexOf('&');
+      if (index !== -1) {
+        videoId = videoId.substring(0, index);
+      }
+    } else if (url.indexOf('/') !== -1) {
+      /**
+       * Example:
+       *    https://youtu.be/aZ-dSpfdHok
+       *    https://youtu.be/PqkaBUmJpq8?list=PLmmPGQQTKzSZSPd3pa6q9UQ-PkeCx1fam
+       */
+      const link = url.split('?')[0];
+      const params = link.split('/');
+      videoId = params[params.length - 1];
+    }
+    return videoId;
   }
 
   function handleMessage(request, sender) {
     switch (request.message) {
       case 'getVideoInfos': {
-        const videoId = getMeta('videoId');
+        const videoId = getMeta('videoId') || getVideoId(window.location.href);
         const channelId = getMeta('channelId');
         const datePublished = getMeta('datePublished');
         port.postMessage({
@@ -34,6 +61,6 @@
     }
   })();
 
-  const port = browserAPI.runtime.connect({ name: 'cs-port' });
+  const port = browserAPI.runtime.connect({ name: 'youtube-viewer-cs' });
   port.onMessage.addListener(handleMessage);
 })();
diff --git a/src/helpers/utils.ts b/src/helpers/utils.ts
@@ -396,28 +396,28 @@ export function humanInterval(
 /**
  * Returns video id from youtube video link
  *
- * @param videoLink
+ * @param url
  */
-export function getVideoId(videoLink: string) {
+export function getVideoId(url: string) {
   let videoId = null;
-  if (videoLink.indexOf('v=') !== -1) {
+  if (url.indexOf('v=') !== -1) {
     /**
      * Example:
      *    https://www.youtube.com/watch?v=aZ-dSpfdHok
      *    https://www.youtube.com/watch?v=aZ-dSpfdHok&feature=feedrec_grec_index
      */
-    videoId = videoLink.split('v=')[1];
+    videoId = url.split('v=')[1];
     const index = videoId.indexOf('&');
     if (index !== -1) {
       videoId = videoId.substring(0, index);
     }
-  } else if (videoLink.indexOf('/') !== -1) {
+  } else if (url.indexOf('/') !== -1) {
     /**
      * Example:
      *    https://youtu.be/aZ-dSpfdHok
      *    https://youtu.be/PqkaBUmJpq8?list=PLmmPGQQTKzSZSPd3pa6q9UQ-PkeCx1fam
      */
-    const link = videoLink.split('?')[0];
+    const link = url.split('?')[0];
     const params = link.split('/');
     videoId = params[params.length - 1];
   }

diff --git a/src/ui/components/webext/Background/ContextMenus.tsx b/src/ui/components/webext/Background/ContextMenus.tsx
@@ -123,7 +123,7 @@ export default function ContextMenus(props: ContextMenusProps) {
       isYoutubeVideo: false,
       videoId: null,
     };
-    if (url?.includes('youtube.com/watch?v=')) {
+    if (url?.includes('youtube.com/watch?v=') || url?.includes('youtu.be/')) {
       data.isYoutubeVideo = true;
       data.videoId = getVideoId(url);
     }