From f779c1fc906dfe064f665b76ab8bfb20a7ed1a64 Mon Sep 17 00:00:00 2001 From: Ayushya Amitabh Date: Fri, 28 Aug 2020 00:42:59 -0400 Subject: [PATCH] v1.6.4/appleTV --- app/public/manifest.json | 6 +++-- app/src/Api.js | 2 ++ app/src/Chat.js | 1 - app/src/VideoListener.js | 49 ++++++++++++++++++++++++++++++++++++++++ app/src/index.css | 12 +++++++--- app/src/index.js | 3 +++ 6 files changed, 67 insertions(+), 6 deletions(-) diff --git a/app/public/manifest.json b/app/public/manifest.json index 0850bcb..c41c830 100644 --- a/app/public/manifest.json +++ b/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"], diff --git a/app/src/Api.js b/app/src/Api.js index 2adc1d0..e2b5787 100644 --- a/app/src/Api.js +++ b/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; }; diff --git a/app/src/Chat.js b/app/src/Chat.js index 740e423..c31dbfc 100644 --- a/app/src/Chat.js +++ b/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); diff --git a/app/src/VideoListener.js b/app/src/VideoListener.js index d038680..16fc2a0 100644 --- a/app/src/VideoListener.js +++ b/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) { diff --git a/app/src/index.css b/app/src/index.css index a61487b..99f4ce4 100644 --- a/app/src/index.css +++ b/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 { diff --git a/app/src/index.js b/app/src/index.js index 40bfd64..3838291 100644 --- a/app/src/index.js +++ b/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;