v1.6.4/appleTV

app/public/manifest.json

@@ -19,7 +19,8 @@
     "https://play.hbomax.com/*",
     "https://*.peacocktv.com/*",
     "https://play.google.com/movies/*",
-    "https://*.crunchyroll.com/*"
+    "https://*.crunchyroll.com/*",
+    "https://tv.apple.com/*"
   ],
   "content_security_policy": "script-src 'self' https://unpkg.com/ https://www.gstatic.com/ https://*.firebaseio.com https://www.googleapis.com; object-src 'self'",
   "content_scripts": [
@@ -34,7 +35,8 @@
         "https://play.hbomax.com/*",
         "https://*.peacocktv.com/*",
         "https://play.google.com/*",
-        "https://*.crunchyroll.com/*"
+        "https://*.crunchyroll.com/*",
+        "https://tv.apple.com/*"
       ],
       "run_at": "document_idle",
       "js": ["/static/js/content.js"],

app/src/Api.js

@@ -30,6 +30,7 @@ export const PLAYER_SOURCE = {
   PEACOCK: 'peacocktv.',
   GOOGLEPLAY: 'play.google.',
   CRUNCHYROLL: 'crunchyroll.',
+  APPLE: 'tv.apple.',
   LOCAL: 'localhost',
 };
 
@@ -45,6 +46,7 @@ export const getPlayerSource = () => {
   if (HREF.includes(PLAYER_SOURCE.PEACOCK)) return PLAYER_SOURCE.PEACOCK;
   if (HREF.includes(PLAYER_SOURCE.GOOGLEPLAY)) return PLAYER_SOURCE.GOOGLEPLAY;
   if (HREF.includes(PLAYER_SOURCE.CRUNCHYROLL)) return PLAYER_SOURCE.CRUNCHYROLL;
+  if (HREF.includes(PLAYER_SOURCE.APPLE)) return PLAYER_SOURCE.APPLE;
   if (HREF.includes(PLAYER_SOURCE.LOCAL)) return PLAYER_SOURCE.LOCAL;
 };
 

app/src/Chat.js

@@ -75,7 +75,6 @@ import CallManager from './CallManager';
 import VideoListener from './VideoListener';
 import ReactGiphySearchbox from 'react-giphy-searchbox';
 
-// const giphyFetch = new GiphyFetch('ojJbIMUN6XRMn4mHiFFav3rMCpXUg8sq');
 export default class Chat extends Component {
   constructor(props) {
     super(props);

app/src/VideoListener.js

@@ -76,6 +76,7 @@ export default class VideoListener {
           default:
             this.video.element.removeEventListener('playing', this.onplay);
             this.video.element.removeEventListener('pause', this.onpause);
+            break;
         }
         await this.timeout(250);
         // SEEK
@@ -130,6 +131,9 @@ export default class VideoListener {
                 })
               );
               break;
+            case PLAYER_SOURCE.APPLE:
+              this.video.element.currentTime = serverPlayer.time;
+              break;
             default:
               break;
           }
@@ -194,9 +198,11 @@ export default class VideoListener {
         switch (this.video.source) {
           case PLAYER_SOURCE.CRUNCHYROLL:
             window.addEventListener('watchParty', this.crunchyRollListener);
+            break;
           default:
             this.video.element.addEventListener('playing', this.onplay);
             this.video.element.addEventListener('pause', this.onpause);
+            break;
         }
       }
       this.isUpdating = false;
@@ -266,6 +272,15 @@ export default class VideoListener {
         const crunchyrollTitle = document.querySelector(nS.show);
         const crunchyrollshow = crunchyrollTitle ? crunchyrollTitle.innerText : '';
         return crunchyrollshow === '' ? null : crunchyrollshow;
+      case PLAYER_SOURCE.APPLE:
+        const appleTvPlayer = document.querySelector('apple-tv-plus-player');
+        const appleTvInternal = appleTvPlayer.shadowRoot.querySelector('amp-video-player-internal');
+        const appleTvVideoContainer = appleTvInternal.shadowRoot.querySelector('amp-video-player');
+        const appleTvShow = appleTvVideoContainer.querySelector(nS.show).innerText || '';
+        const appleTvEpisode = appleTvVideoContainer.querySelector(nS.episode).innerText || '';
+        return appleTvShow === '' && appleTvEpisode === ''
+          ? null
+          : appleTvShow + '\n' + appleTvEpisode;
       default:
         break;
     }
@@ -316,6 +331,7 @@ export default class VideoListener {
       default:
         videoElement.addEventListener('playing', this.onplay);
         videoElement.addEventListener('pause', this.onpause);
+        break;
     }
   }
   async start() {
@@ -538,6 +554,7 @@ export default class VideoListener {
             1000
           );
         }
+        break;
       case PLAYER_SOURCE.CRUNCHYROLL:
         const crunchyRollInject = `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) { if (window.VILOS_PLAYERJS) { window.VILOS_PLAYERJS.getCurrentTime(function(pT) { sendToWatchPartyApp(pS, pT); }); } }, watchPartySendPlaying = function() { watchPartyGetTimeAndSend('PLAYING'); }, watchPartySendPaused = function() { watchPartyGetTimeAndSend('PAUSED'); }, watchPartyInteraction = function(e) { if (e.source === window) { const data = JSON.parse(e.data); if (data.watchPartyDirection === 'TO_SCRIPT') { if (data.type === 'WATCH_PARTY_ADD_LISTENERS') { if (window.VILOS_PLAYERJS) { window.VILOS_PLAYERJS.on('play', watchPartySendPlaying, 'player.js'); window.VILOS_PLAYERJS.on('pause', watchPartySendPaused, 'player.js'); } } else if (data.type === 'WATCH_PARTY_SEEK') { if (window.VILOS_PLAYERJS) { window.VILOS_PLAYERJS.setCurrentTime(data.time); } } else if (data.type === 'WATCH_PARTY_STATUS') { if (window.VILOS_PLAYERJS) { if (data.status === 'PAUSED') window.VILOS_PLAYERJS.pause(); if (data.status === 'PLAYING') window.VILOS_PLAYERJS.play(); } } } } }; window.addEventListener("message", watchPartyInteraction);`;
         const crunchyRollInjectScript = document.createElement('script');
@@ -560,6 +577,38 @@ export default class VideoListener {
           );
         }
         break;
+      case PLAYER_SOURCE.APPLE:
+        const appleTvPlayer = document.querySelector('apple-tv-plus-player');
+        const appleTvInternal = appleTvPlayer.shadowRoot.querySelector('amp-video-player-internal');
+        const appleTvVideoContainer = appleTvInternal.shadowRoot.querySelector('amp-video-player');
+        const appleVideoElement = appleTvVideoContainer.shadowRoot.querySelector(
+          this.selectors[PLAYER_SOURCE.APPLE]
+        );
+        if (appleVideoElement) {
+          const takeoverContainer = appleTvPlayer.shadowRoot.querySelector(
+            '.takeover.container.show'
+          );
+          if (takeoverContainer) takeoverContainer.style.maxWidth = 'var(--body-width)';
+          this.firstTimeSync(appleVideoElement);
+        } else {
+          setInterval(
+            this.video.element
+              ? null
+              : () => {
+                  const atp = document.querySelector('apple-tv-plus-player');
+                  const ati = atp.shadowRoot.querySelector('amp-video-player-internal');
+                  const atv = ati.shadowRoot.querySelector('amp-video-player');
+                  const atve = atv.shadowRoot.querySelector(this.selectors[PLAYER_SOURCE.APPLE]);
+                  if (atve) {
+                    const tc = atp.shadowRoot.querySelector('.takeover.container.show');
+                    if (tc) tc.style.maxWidth = 'var(--body-width)';
+                    this.firstTimeSync(atve);
+                  }
+                },
+            1000
+          );
+        }
+        break;
       case PLAYER_SOURCE.LOCAL:
         const localVideoElement = document.getElementsByTagName('video')[0];
         if (localVideoElement) {

app/src/index.css

@@ -76,7 +76,8 @@ body.amazon-prime.visible #dv-web-player.dv-player-fullscreen, /* AMAZON PRIME *
 body.disney.visible #hudson-wrapper, /* DISNEY */
 body.youtube.visible #content.ytd-app, /* YOUTUBE */
 body.youtube.visible #masthead-container, /* YOUTUBE HEADER */
-body.googleplay.visible div.llhEMd.bYEzqc.LAhoGb.iWO5td /* GOOGLE PLAY MOVIES */ {
+body.googleplay.visible div.llhEMd.bYEzqc.LAhoGb.iWO5td, /* GOOGLE PLAY MOVIES */
+body.apple.visible .container.takeover.show /* APPLE TV */ {
   max-width: var(--body-width) !important;
 }
 /* HULU MINIMIZED VIDEO */
@@ -223,9 +224,14 @@ body.crunchyroll.visible #vilos-player {
   max-height: 42vw !important;
 }
 
+body.apple .thread-wrapper .ReactVirtualized__Grid__innerScrollContainer {
+  box-sizing: initial !important;
+}
+
 body.hulu #party_wrapper *,
 body.peacock #party_wrapper *,
-body.disney #party_wrapper * {
+body.disney #party_wrapper *,
+body.apple #party_wrapper * {
   box-sizing: inherit;
 }
 
@@ -915,7 +921,7 @@ button.giphy-list-item {
 }
 .watch-party-tutorial .MuiPaper-root.MuiPopover-paper {
   padding: 20px;
-  max-width: 400px;
+  max-width: min-content;
   max-height: none;
 }
 .tutorial-stepper {

app/src/index.js

@@ -94,6 +94,9 @@ switch (getPlayerSource()) {
   case PLAYER_SOURCE.CRUNCHYROLL:
     document.body.classList.add('crunchyroll');
     break;
+  case PLAYER_SOURCE.APPLE:
+    document.body.classList.add('apple');
+    break;
   case PLAYER_SOURCE.LOCAL:
     document.body.classList.add('local');
     break;