v1.2.0-beta/add youtube support

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "my-extension",
-  "version": "0.1.0",
+  "name": "watch-party-crx",
+  "version": "1.2.0",
   "private": true,
   "dependencies": {
     "@giphy/js-fetch-api": "^1.5.8",

public/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Watch Party",
   "short_name": "WP",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Watch streamed content together.",
   "background": {
     "page": "popup.html"
@@ -10,7 +10,8 @@
     "https://*.hulu.com/*",
     "https://*.netflix.com/*",
     "https://*.amazon.com/*",
-    "https://*.disneyplus.com/*"
+    "https://*.disneyplus.com/*",
+    "https://*.youtube.com/*"
   ],
   "content_security_policy": "script-src 'self' https://www.gstatic.com/ https://*.firebaseio.com https://www.googleapis.com; object-src 'self'",
   "content_scripts": [
@@ -37,6 +38,12 @@
       "run_at": "document_idle",
       "js": ["/static/js/content.js"],
       "css": ["/static/css/app.css"]
+    },
+    {
+      "matches": ["https://*.youtube.com/*"],
+      "run_at": "document_idle",
+      "js": ["/static/js/content.js"],
+      "css": ["/static/css/app.css"]
     }
   ],
   "web_accessible_resources": ["android-icon-192x192.png"],

src/Api.js

@@ -16,6 +16,7 @@ export const PLAYER_SOURCE = {
   AMAZON: 'https://www.amazon.',
   HULU: 'https://www.hulu.',
   DISNEY: 'https://www.disneyplus.',
+  YOUTUBE: 'https://www.youtube.',
   LOCAL: 'http://localhost',
 };
 
@@ -25,6 +26,7 @@ export const getPlayerSource = () => {
   if (HREF.startsWith(PLAYER_SOURCE.HULU)) return PLAYER_SOURCE.HULU;
   if (HREF.startsWith(PLAYER_SOURCE.AMAZON)) return PLAYER_SOURCE.AMAZON;
   if (HREF.startsWith(PLAYER_SOURCE.DISNEY)) return PLAYER_SOURCE.DISNEY;
+  if (HREF.startsWith(PLAYER_SOURCE.YOUTUBE)) return PLAYER_SOURCE.YOUTUBE;
   if (HREF.startsWith(PLAYER_SOURCE.LOCAL)) return PLAYER_SOURCE.LOCAL;
 };
 

src/VideoListener.js

@@ -29,6 +29,8 @@ export default class VideoListener {
       this.video.element !== null &&
       this.video.element !== undefined &&
       this.video.status !== PLAYER_STATUS.NOT_PLAYING &&
+      this.video.showName !== '' &&
+      this.video.showName !== null &&
       (this.video.status !== this.server.status ||
         Math.abs(this.video.element.currentTime - this.server.time) > 1.5)
     );
@@ -73,6 +75,9 @@ export default class VideoListener {
               this.video.element.currentTime = serverPlayer.time;
               await this.timeout(500);
               break;
+            case PLAYER_SOURCE.YOUTUBE:
+              this.video.element.currentTime = serverPlayer.time;
+              break;
             default:
               break;
           }
@@ -139,6 +144,10 @@ export default class VideoListener {
           ? document.querySelector('.subtitle-field').innerHTML
           : '';
         return dshow === '' && depisode === '' ? null : dshow + '\n' + depisode;
+      case PLAYER_SOURCE.YOUTUBE:
+        const yshow = document.querySelector('h1.title').innerText;
+        const yepisode = document.querySelector('yt-formatted-string.super-title').innerText;
+        return yshow === '' && yepisode === '' ? null : yshow + '\n' + yepisode;
       default:
         break;
     }
@@ -241,6 +250,23 @@ export default class VideoListener {
           );
         }
         break;
+      case PLAYER_SOURCE.YOUTUBE:
+        const youtubeVideoElement = document.querySelector('video.video-stream.html5-main-video');
+        if (youtubeVideoElement) this.firstTimeSync(youtubeVideoElement);
+        else {
+          setInterval(
+            this.video.element
+              ? null
+              : () => {
+                  var yve = document.querySelector('video.video-stream.html5-main-video');
+                  if (yve !== null && (this.video.element !== yve || this.video.element === null)) {
+                    this.firstTimeSync(yve);
+                  }
+                },
+            1000
+          );
+        }
+        break;
       case PLAYER_SOURCE.LOCAL:
         const localVideoElement = document.getElementsByTagName('video')[0];
         if (localVideoElement) {

src/index.css

@@ -23,7 +23,9 @@ body.visible .party-notification-container {
 body.netflix.visible .AkiraPlayer, /* NETFLIX */
 body.hulu.visible .Player__container,/* HULU */
 body.amazon-prime.visible #dv-web-player.dv-player-fullscreen, /* AMAZON PRIME */
-body.disney.visible #hudson-wrapper /* DISNEY */ {
+body.disney.visible #hudson-wrapper, /* DISNEY */
+body.youtube.visible #content.ytd-app, /* YOUTUBE */
+body.youtube.visible #masthead-container /* YOUTUBE HEADER */ {
   max-width: var(--body-width) !important;
 }
 /* HULU MINIMIZED VIDEO */
@@ -42,6 +44,25 @@ body.amazon-prime #party-routes-wrapper {
 body.disney #hudson-wrapper {
   left: 0;
 }
+/* YOUTUBE VIDEO SIZING FIX */
+body.youtube.visible video {
+  max-width: 100%;
+  height: auto !important;
+}
+body.youtube.visible .ytp-chrome-bottom {
+  max-width: 100% !important;
+  width: calc(100% - 24px) !important;
+}
+body.youtube.visible .ytp-chapter-hover-container {
+  max-width: 100% !important;
+}
+body.youtube.visible .ytp-tooltip.ytp-bottom.ytp-preview {
+  bottom: 100px !important;
+  top: unset !important;
+}
+body.youtube.visible td-two-column-browse-results-renderer.grid:not(.grid-disabled) {
+  max-width: calc(100% - 48px);
+}
 /* AMAZON STYLING FIX */
 body.amazon-prime input,
 body.amazon-prime textarea {

src/index.js

@@ -50,6 +50,9 @@ switch (getPlayerSource()) {
   case PLAYER_SOURCE.DISNEY:
     document.body.classList.add('disney');
     break;
+  case PLAYER_SOURCE.YOUTUBE:
+    document.body.classList.add('youtube');
+    break;
   case PLAYER_SOURCE.LOCAL:
     break;
   default: