From a5a5e677cdcc0e426469c692d507fc8548ae52c7 Mon Sep 17 00:00:00 2001 From: Ayushya Amitabh Date: Sat, 5 Sep 2020 21:14:06 -0400 Subject: [PATCH] v1.7.0/add rooster teeth, start vrv --- admin/src/Dashboard.jsx | 2 + app/public/manifest.json | 8 ++- app/src/Api.js | 4 ++ app/src/VideoListener.js | 109 +++++++++++++++++++++++++++++++++++++-- app/src/index.css | 44 +++++++++++++++- app/src/index.js | 12 +++-- 6 files changed, 169 insertions(+), 10 deletions(-) diff --git a/admin/src/Dashboard.jsx b/admin/src/Dashboard.jsx index a79f06c..2dfb88f 100644 --- a/admin/src/Dashboard.jsx +++ b/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 = [ diff --git a/app/public/manifest.json b/app/public/manifest.json index 55daeac..f622b42 100644 --- a/app/public/manifest.json +++ b/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"], diff --git a/app/src/Api.js b/app/src/Api.js index 076afd0..210d610 100644 --- a/app/src/Api.js +++ b/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; }; diff --git a/app/src/VideoListener.js b/app/src/VideoListener.js index 7d99900..ce05f9a 100644 --- a/app/src/VideoListener.js +++ b/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) { diff --git a/app/src/index.css b/app/src/index.css index 2c594f0..d0d6ab9 100644 --- a/app/src/index.css +++ b/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; diff --git a/app/src/index.js b/app/src/index.js index 2bbca99..8c85c7f 100644 --- a/app/src/index.js +++ b/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;