v1.7.0/add rooster teeth, start vrv

admin/src/Dashboard.jsx

@@ -59,6 +59,8 @@ const PLAYER_SOURCES = [
   { text: 'Apple TV+', value: 'tv.apple.' },
   { text: 'Viki', value: 'viki.' },
   { text: 'Funimation', value: 'funimation.' },
+  { text: 'Rooster Teeth', value: 'roosterteeth.' },
+  { text: 'VRV', value: 'vrv.' },
 ];
 
 const MESSAGE_TYPES = [

app/public/manifest.json

@@ -22,7 +22,9 @@
     "https://*.crunchyroll.com/*",
     "https://tv.apple.com/*",
     "https://*.viki.com/*",
-    "https://*.funimation.com/*"
+    "https://*.funimation.com/*",
+    "https://roosterteeth.com/*",
+    "https://vrv.co/*"
   ],
   "content_scripts": [
     {
@@ -39,7 +41,9 @@
         "https://*.crunchyroll.com/*",
         "https://tv.apple.com/*",
         "https://*.viki.com/*",
-        "https://*.funimation.com/*"
+        "https://*.funimation.com/*",
+        "https://roosterteeth.com/*",
+        "https://vrv.co/*"
       ],
       "run_at": "document_idle",
       "js": ["/static/js/content.js"],

app/src/Api.js

@@ -33,6 +33,8 @@ export const PLAYER_SOURCE = {
   APPLE: 'tv.apple.',
   VIKI: 'viki.',
   FUNIMATION: 'funimation.',
+  ROOSTERTEETH: 'roosterteeth.',
+  VRV: 'vrv.',
   LOCAL: 'localhost',
 };
 
@@ -51,6 +53,8 @@ export const getPlayerSource = () => {
   if (HREF.includes(PLAYER_SOURCE.APPLE)) return PLAYER_SOURCE.APPLE;
   if (HREF.includes(PLAYER_SOURCE.VIKI)) return PLAYER_SOURCE.VIKI;
   if (HREF.includes(PLAYER_SOURCE.FUNIMATION)) return PLAYER_SOURCE.FUNIMATION;
+  if (HREF.includes(PLAYER_SOURCE.ROOSTERTEETH)) return PLAYER_SOURCE.ROOSTERTEETH;
+  if (HREF.includes(PLAYER_SOURCE.VRV)) return PLAYER_SOURCE.VRV;
   if (HREF.includes(PLAYER_SOURCE.LOCAL)) return PLAYER_SOURCE.LOCAL;
 };
 

app/src/VideoListener.js

@@ -72,6 +72,7 @@ export default class VideoListener {
         switch (this.video.source) {
           case PLAYER_SOURCE.CRUNCHYROLL:
           case PLAYER_SOURCE.FUNIMATION:
+          case PLAYER_SOURCE.VRV:
             window.removeEventListener('watchParty', this.crunchyRollListener);
             break;
           default:
@@ -152,6 +153,25 @@ export default class VideoListener {
             case PLAYER_SOURCE.VIKI:
               this.video.element.currentTime = serverPlayer.time;
               break;
+            case PLAYER_SOURCE.ROOSTERTEETH:
+              window.postMessage(
+                JSON.stringify({
+                  watchPartyDirection: 'TO_SCRIPT',
+                  type: 'WATCH_PARTY_SEEK',
+                  status: serverPlayer.status,
+                  time: serverPlayer.time,
+                })
+              );
+            case PLAYER_SOURCE.VRV:
+              window.postMessage(
+                JSON.stringify({
+                  watchPartyDirection: 'TO_SCRIPT',
+                  type: 'WATCH_PARTY_SEEK',
+                  status: serverPlayer.status,
+                  time: serverPlayer.time,
+                })
+              );
+              break;
             default:
               break;
           }
@@ -169,7 +189,9 @@ export default class VideoListener {
             } else if (
               PLAYER_SOURCE.CRUNCHYROLL === this.video.source ||
               PLAYER_SOURCE.PEACOCK === this.video.source ||
-              PLAYER_SOURCE.FUNIMATION === this.video.source
+              PLAYER_SOURCE.FUNIMATION === this.video.source ||
+              PLAYER_SOURCE.ROOSTERTEETH === this.video.source ||
+              PLAYER_SOURCE.VRV === this.video.source
             ) {
               window.postMessage(
                 JSON.stringify({
@@ -194,7 +216,9 @@ export default class VideoListener {
             } else if (
               PLAYER_SOURCE.CRUNCHYROLL === this.video.source ||
               PLAYER_SOURCE.PEACOCK === this.video.source ||
-              PLAYER_SOURCE.FUNIMATION === this.video.source
+              PLAYER_SOURCE.FUNIMATION === this.video.source ||
+              PLAYER_SOURCE.ROOSTERTEETH === this.video.source ||
+              PLAYER_SOURCE.VRV === this.video.source
             ) {
               window.postMessage(
                 JSON.stringify({
@@ -218,6 +242,7 @@ export default class VideoListener {
         switch (this.video.source) {
           case PLAYER_SOURCE.CRUNCHYROLL:
           case PLAYER_SOURCE.FUNIMATION:
+          case PLAYER_SOURCE.VRV:
             window.addEventListener('watchParty', this.crunchyRollListener);
             break;
           default:
@@ -320,6 +345,24 @@ export default class VideoListener {
         return funimationShow === '' && funimationEpisode === ''
           ? null
           : funimationShow + '\n' + funimationEpisode;
+      case PLAYER_SOURCE.ROOSTERTEETH:
+        const roosterTeethShowContainer = document.querySelector(nS.show);
+        const roosterTeethEpisodeContainer = document.querySelector(nS.episode);
+        const roosterTeethShow = roosterTeethShowContainer
+          ? roosterTeethShowContainer.innerText
+          : '';
+        const roosterTeethEpisode = roosterTeethEpisodeContainer
+          ? roosterTeethEpisodeContainer.innerText
+          : '';
+        return roosterTeethShow === '' && roosterTeethEpisode === ''
+          ? null
+          : roosterTeethShow + '\n' + roosterTeethEpisode;
+      case PLAYER_SOURCE.VRV:
+        const vrvShowContainer = document.querySelector(nS.show);
+        const vrvEpisodeContainer = document.querySelector(nS.episode);
+        const vrvShow = vrvShowContainer ? vrvShowContainer.innerText : '';
+        const vrvEpisode = vrvEpisodeContainer ? vrvEpisodeContainer.innerText : '';
+        return vrvShow === '' && vrvEpisode === '' ? null : vrvShow + ' ' + vrvEpisode;
       default:
         break;
     }
@@ -360,6 +403,7 @@ export default class VideoListener {
     switch (this.video.source) {
       case PLAYER_SOURCE.CRUNCHYROLL:
       case PLAYER_SOURCE.FUNIMATION:
+      case PLAYER_SOURCE.VRV:
         window.postMessage(
           JSON.stringify({
             watchPartyDirection: 'TO_SCRIPT',
@@ -673,7 +717,11 @@ export default class VideoListener {
         }
         break;
       case PLAYER_SOURCE.FUNIMATION:
-        const funimationInject = `var sendToWatchPartyApp=function(pS,pT){var customWatchPartyEvent=new CustomEvent('watchParty',{detail:{watchPartyDirection:'TO_APP',type:'WATCH_PARTY_PLAYER_UPDATE',status:pS,time:pT}});window.dispatchEvent(customWatchPartyEvent)},watchPartyGetTimeAndSend=function(pS){const playerIframe=document.querySelector('.video-player-container iframe#player');if(playerIframe){const player=playerIframe.contentWindow.document.querySelector('video');if(player){sendToWatchPartyApp(pS,player.currentTime)}}},watchPartySendPlaying=function(){watchPartyGetTimeAndSend('PLAYING')},watchPartySendPaused=function(){watchPartyGetTimeAndSend('PAUSED')},watchPartyInteraction=function(e){const data=JSON.parse(e.data);const playerIframe=document.querySelector('.video-player-container iframe#player');if(playerIframe){const player=playerIframe.contentWindow.document.querySelector('video');if(player){if(data.watchPartyDirection==='TO_SCRIPT'){if(data.type==='WATCH_PARTY_ADD_LISTENERS'){player.addEventListener('playing',watchPartySendPlaying);player.addEventListener('pause',watchPartySendPaused)}else if(data.type==='WATCH_PARTY_SEEK'){const playerNode=playerIframe.contentWindow.document.querySelector('#brightcove-player');if(playerNode){playerNode.player.currentTime(data.time)}}else if(data.type==='WATCH_PARTY_STATUS'){if(data.status==='PAUSED')player.pause();if(data.status==='PLAYING')player.play()}}}}};window.addEventListener("message",watchPartyInteraction);`;
+        const funimationInject = `var sendToWatchPartyApp=function(pS,pT){var customWatchPartyEvent=new CustomEvent('watchParty',{detail:{watchPartyDirection:'TO_APP',type:'WATCH_PARTY_PLAYER_UPDATE',status:pS,time:pT}});window.dispatchEvent(customWatchPartyEvent)},watchPartyGetTimeAndSend=function(pS){const playerIframe=document.querySelector('${
+          this.selectors[PLAYER_SOURCE.FUNIMATION]
+        }');if(playerIframe){const player=playerIframe.contentWindow.document.querySelector('video');if(player){sendToWatchPartyApp(pS,player.currentTime)}}},watchPartySendPlaying=function(){watchPartyGetTimeAndSend('PLAYING')},watchPartySendPaused=function(){watchPartyGetTimeAndSend('PAUSED')},watchPartyInteraction=function(e){const data=JSON.parse(e.data);const playerIframe=document.querySelector('${
+          this.selectors[PLAYER_SOURCE.FUNIMATION]
+        }');if(playerIframe){const player=playerIframe.contentWindow.document.querySelector('video');if(player){if(data.watchPartyDirection==='TO_SCRIPT'){if(data.type==='WATCH_PARTY_ADD_LISTENERS'){player.addEventListener('playing',watchPartySendPlaying);player.addEventListener('pause',watchPartySendPaused)}else if(data.type==='WATCH_PARTY_SEEK'){const playerNode=playerIframe.contentWindow.document.querySelector('#brightcove-player');if(playerNode){playerNode.player.currentTime(data.time)}}else if(data.type==='WATCH_PARTY_STATUS'){if(data.status==='PAUSED')player.pause();if(data.status==='PLAYING')player.play()}}}}};window.addEventListener("message",watchPartyInteraction);`;
         const funimationInjectScript = document.createElement('script');
         funimationInjectScript.text = funimationInject;
         document.head.appendChild(funimationInjectScript);
@@ -694,6 +742,61 @@ export default class VideoListener {
           );
         }
         break;
+      case PLAYER_SOURCE.ROOSTERTEETH:
+        const roosterTeethInject = `var watchPartyInteraction=function(e){const data=JSON.parse(e.data);const player=document.querySelector('${
+          this.selectors[PLAYER_SOURCE.ROOSTERTEETH]
+        }');if(player){const playerNode=player.parentNode;if(playerNode.player){if(data.watchPartyDirection==='TO_SCRIPT'){if(data.type==='WATCH_PARTY_SEEK'){playerNode.player.currentTime(data.time);}else if(data.type==='WATCH_PARTY_STATUS'){if(data.status==='PAUSED')player.pause();if(data.status==='PLAYING')player.play()}}}}};window.addEventListener("message",watchPartyInteraction);`;
+        const roosterTeethInjectScript = document.createElement('script');
+        roosterTeethInjectScript.text = roosterTeethInject;
+        document.head.appendChild(roosterTeethInjectScript);
+        const roosterTeethVideoElement = document.querySelector(
+          this.selectors[PLAYER_SOURCE.ROOSTERTEETH]
+        );
+        if (roosterTeethVideoElement) {
+          this.firstTimeSync(roosterTeethVideoElement);
+        } else {
+          setInterval(
+            this.video.element
+              ? null
+              : () => {
+                  var rtve = document.querySelector(this.selectors[PLAYER_SOURCE.ROOSTERTEETH]);
+                  if (
+                    rtve !== null &&
+                    (this.video.element !== rtve || this.video.element === null)
+                  ) {
+                    this.firstTimeSync(rtve);
+                  }
+                },
+            1000
+          );
+        }
+        break;
+      case PLAYER_SOURCE.VRV:
+        const vrvInject = `var sendToWatchPartyApp=function(pS,pT){var customWatchPartyEvent=new CustomEvent('watchParty',{detail:{watchPartyDirection:'TO_APP',type:'WATCH_PARTY_PLAYER_UPDATE',status:pS,time:pT}});window.dispatchEvent(customWatchPartyEvent)},watchPartyGetTimeAndSend=function(pS){const playerIframe=document.querySelector('${
+          this.selectors[PLAYER_SOURCE.VRV]
+        }');if(playerIframe){const player=playerIframe.contentWindow.document.querySelector('video');if(player){sendToWatchPartyApp(pS,player.currentTime)}}},watchPartySendPlaying=function(){watchPartyGetTimeAndSend('PLAYING')},watchPartySendPaused=function(){watchPartyGetTimeAndSend('PAUSED')},watchPartyInteraction=function(e){const data=JSON.parse(e.data);const playerIframe=document.querySelector('${
+          this.selectors[PLAYER_SOURCE.VRV]
+        }');if(playerIframe){const player=playerIframe.contentWindow.document.querySelector('video');if(player){if(data.watchPartyDirection==='TO_SCRIPT'){if(data.type==='WATCH_PARTY_ADD_LISTENERS'){player.addEventListener('playing',watchPartySendPlaying);player.addEventListener('pause',watchPartySendPaused)}else if(data.type==='WATCH_PARTY_SEEK'){const playerNode=player.parentNode;if(playerNode&&playerNode.player){playerNode.player.currentTime(data.time)}}else if(data.type==='WATCH_PARTY_STATUS'){if(data.status==='PAUSED')player.pause();if(data.status==='PLAYING')player.play()}}}}};window.addEventListener("message",watchPartyInteraction);`;
+        const vrvInjectScript = document.createElement('script');
+        vrvInjectScript.text = vrvInject;
+        document.head.appendChild(vrvInjectScript);
+        const vrvIframe = document.querySelector(this.selectors[PLAYER_SOURCE.VRV]);
+        if (vrvIframe) {
+          this.firstTimeSync(vrvIframe);
+        } else {
+          setInterval(
+            this.video.element
+              ? null
+              : () => {
+                  const vrvif = document.querySelector(this.selectors[PLAYER_SOURCE.VRV]);
+                  if (vrvif) {
+                    this.firstTimeSync(vrvif);
+                  }
+                },
+            1000
+          );
+        }
+        break;
       case PLAYER_SOURCE.LOCAL:
         const localVideoElement = document.getElementsByTagName('video')[0];
         if (localVideoElement) {

app/src/index.css

@@ -234,14 +234,54 @@ body.crunchyroll.visible #showmedia_video_player {
 body.crunchyroll.visible #vilos-player {
   max-height: 42vw !important;
 }
-
+/* APPLE TV STYLING */
 body.apple .thread-wrapper .ReactVirtualized__Grid__innerScrollContainer {
   box-sizing: initial !important;
 }
-
+/* FUNIMATION STYLING */
 body.funimation.visible header {
   z-index: 99 !important;
 }
+/* ROOSTER TEETH STYLING */
+body.roosterteeth.visible header.top-nav.top-nav--opaque {
+  max-width: var(--body-width);
+}
+body.roosterteeth.visible .persistent-player.video-minimized {
+  right: calc(var(--party-width) + 25px) !important;
+}
+body.roosterteeth.visible .video-details.card-panel {
+  white-space: break-spaces;
+}
+body.roosterteeth.visible .party-content-wrapper .MuiSwitch-thumb {
+  position: revert;
+  padding-left: revert;
+  cursor: revert;
+  display: revert;
+  height: 20px;
+}
+body.roosterteeth.visible .party-content-wrapper .MuiSwitch-thumb::before {
+  content: unset !important;
+}
+body.roosterteeth.visible .party-content-wrapper .MuiSwitch-thumb::after {
+  content: unset !important;
+}
+body.roosterteeth.visible .party-content-wrapper input {
+  border-bottom: none;
+  height: 1.1876em;
+  margin: 0;
+  padding: 18.5px 14px;
+  padding-top: 10.5px;
+  padding-bottom: 10.5px;
+}
+body.roosterteeth.visible .party-content-wrapper input:focus,
+body.roosterteeth.visible .party-content-wrapper textarea:focus {
+  border-bottom: none !important;
+  box-shadow: none !important;
+}
+/* VRV STYLING */
+body.vrv.visible .header-content {
+  max-width: var(--body-width);
+}
 
 #party-loading {
   position: absolute;

app/src/index.js

@@ -101,14 +101,14 @@ switch (getPlayerSource()) {
     window.addEventListener(
       'keydown',
       (ev) => {
-        if (ev.target.tagName==='INPUT'||ev.target.tagName==='TEXTAREA') {
+        if (ev.target.tagName === 'INPUT' || ev.target.tagName === 'TEXTAREA') {
           ev.target.focus();
         }
         ev.stopImmediatePropagation();
         ev.stopPropagation();
       },
-      {capture: true}
+      { capture: true }
-    )
+    );
     break;
   case PLAYER_SOURCE.PEACOCK:
     document.body.classList.add('peacock');
@@ -128,6 +128,12 @@ switch (getPlayerSource()) {
   case PLAYER_SOURCE.FUNIMATION:
     document.body.classList.add('funimation');
     break;
+  case PLAYER_SOURCE.ROOSTERTEETH:
+    document.body.classList.add('roosterteeth');
+    break;
+  case PLAYER_SOURCE.VRV:
+    document.body.classList.add('vrv');
+    break;
   case PLAYER_SOURCE.LOCAL:
     document.body.classList.add('local');
     break;