ayushya/watchparty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.6.0/added support, cleanup webhook

Browse Source
This commit is contained in:
ayushya
2020-08-02 20:41:52 -04:00
parent 86ee168045
commit e388dbf283
14 changed files with 247 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/Api.js
+4
View File
@@ -35,6 +35,8 @@ export const PLAYER_SOURCE = {
HBONOW: 'hbonow.',
HBOMAX: 'hbomax.',
PEACOCK: 'peacocktv.',
GOOGLEPLAY: 'play.google.',
CRUNCHYROLL: 'crunchyroll.',
LOCAL: 'localhost',
};
@@ -48,6 +50,8 @@ export const getPlayerSource = () => {
if (HREF.includes(PLAYER_SOURCE.HBONOW)) return PLAYER_SOURCE.HBONOW;
if (HREF.includes(PLAYER_SOURCE.HBOMAX)) return PLAYER_SOURCE.HBOMAX;
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.LOCAL)) return PLAYER_SOURCE.LOCAL;
};
app/src/VideoListener.js
+125 -10
View File
@@ -39,6 +39,7 @@ export default class VideoListener {
this.onpause = this.onpause.bind(this);
this.onplay = this.onplay.bind(this);
this.shouldPushSync = this.shouldPushSync.bind(this);
this.crunchyRollListener = this.crunchyRollListener.bind(this);
}
shouldPushSync() {
return (
@@ -73,8 +74,13 @@ export default class VideoListener {
this.isUpdating = true;
if (this.video.element) {
// REMOVE LISTENER BEFORE SYNCING
this.video.element.removeEventListener('playing', this.onplay);
this.video.element.removeEventListener('pause', this.onpause);
switch(this.video.source) {
case PLAYER_SOURCE.CRUNCHYROLL:
window.removeEventListener('watchParty', this.crunchyRollListener);
default:
this.video.element.removeEventListener('playing', this.onplay);
this.video.element.removeEventListener('pause', this.onpause);
}
await this.timeout(250);
// SEEK
if (Math.abs(serverPlayer.time - this.video.element.currentTime) > 1.5) {
@@ -114,6 +120,17 @@ export default class VideoListener {
simulate(sliderHead, 'mouseup');
await this.timeout(500);
break;
case PLAYER_SOURCE.GOOGLEPLAY:
this.video.element.currentTime = serverPlayer.time;
break;
case PLAYER_SOURCE.CRUNCHYROLL:
window.postMessage(JSON.stringify({
watchPartyDirection: 'TO_SCRIPT',
type: 'WATCH_PARTY_SEEK',
status: serverPlayer.status,
time: serverPlayer.time
}));
break;
default:
break;
}
@@ -126,9 +143,18 @@ export default class VideoListener {
PLAYER_SOURCE.NETFLIX === this.video.source ||
PLAYER_SOURCE.HBOMAX === this.video.source ||
PLAYER_SOURCE.HBONOW === this.video.source
)
) {
window.postMessage({ type: 'PAUSE', time: serverPlayer.time }, '*');
else await this.video.element.pause();
} else if (PLAYER_SOURCE.CRUNCHYROLL === this.video.source) {
window.postMessage(JSON.stringify({
watchPartyDirection: 'TO_SCRIPT',
type: 'WATCH_PARTY_STATUS',
status: serverPlayer.status,
time: serverPlayer.time
}));
} else {
await this.video.element.pause();
}
break;
case PLAYER_STATUS.PLAYING:
if (
@@ -136,20 +162,33 @@ export default class VideoListener {
PLAYER_SOURCE.NETFLIX === this.video.source ||
PLAYER_SOURCE.HBOMAX === this.video.source ||
PLAYER_SOURCE.HBONOW === this.video.source
)
) {
window.postMessage({ type: 'PLAY', time: serverPlayer.time }, '*');
else
} else if (PLAYER_SOURCE.CRUNCHYROLL === this.video.source) {
window.postMessage(JSON.stringify({
watchPartyDirection: 'TO_SCRIPT',
type: 'WATCH_PARTY_STATUS',
status: serverPlayer.status,
time: serverPlayer.time
}));
} else {
await this.video.element
.play()
.catch((err) => console.error('WatchParty erred when syncing play.'));
}
break;
default:
break;
}
await this.timeout(500);
// RE-ADD LISTENERS FOR FUTURE SYNC
this.video.element.addEventListener('playing', this.onplay);
this.video.element.addEventListener('pause', this.onpause);
switch(this.video.source) {
case PLAYER_SOURCE.CRUNCHYROLL:
window.addEventListener('watchParty', this.crunchyRollListener);
default:
this.video.element.addEventListener('playing', this.onplay);
this.video.element.addEventListener('pause', this.onpause);
}
}
this.isUpdating = false;
}
@@ -218,6 +257,18 @@ export default class VideoListener {
return peacockshow === '' && peacockepisode === ''
? null
: peacockshow + '\n' + peacockepisode;
case PLAYER_SOURCE.GOOGLEPLAY:
const playerIframe = document.querySelector('#yDmH0d > div.llhEMd.bYEzqc.LAhoGb.iWO5td > div > div.LhXUod.XL54pf.J9Nfi.iWO5td > span > div > div > iframe');
var googleplayshow = '';
if (playerIframe) {
const titleElement = playerIframe.contentWindow.document.querySelector('.playing-title');
googleplayshow = titleElement ? titleElement.innerText : '';
}
return googleplayshow === '' ? null : googleplayshow;
case PLAYER_SOURCE.CRUNCHYROLL:
const crunchyrollTitle = document.querySelector('#template_body > div:nth-child(4) > div.showmedia-trail.cf > div > h1');
const crunchyrollshow = crunchyrollTitle ? crunchyrollTitle.innerText : '';
return crunchyrollshow === '' ? null : crunchyrollshow;
default:
break;
}
@@ -236,6 +287,15 @@ export default class VideoListener {
showName: await this.getShowName(),
});
}
async crunchyRollListener(ev) {
if (ev.detail.watchPartyDirection === 'TO_APP' && ev.detail.type === 'WATCH_PARTY_PLAYER_UPDATE') {
this.updateStatus({
status: ev.detail.status,
time: ev.detail.time,
showName: await this.getShowName()
});
}
}
async firstTimeSync(videoElement) {
this.updateStatus({
element: videoElement,
@@ -249,8 +309,18 @@ export default class VideoListener {
this.updateStatus({
showName: await this.getShowName(),
});
videoElement.addEventListener('playing', this.onplay);
videoElement.addEventListener('pause', this.onpause);
switch (this.video.source) {
case PLAYER_SOURCE.CRUNCHYROLL:
window.postMessage(JSON.stringify({
watchPartyDirection: 'TO_SCRIPT',
type: 'WATCH_PARTY_ADD_LISTENERS'
}));
window.addEventListener('watchParty', this.crunchyRollListener);
break;
default:
videoElement.addEventListener('playing', this.onplay);
videoElement.addEventListener('pause', this.onpause);
}
}
async start() {
this.updateStatus({ source: getPlayerSource(), showName: await this.getShowName() });
@@ -454,6 +524,51 @@ export default class VideoListener {
);
}
break;
case PLAYER_SOURCE.GOOGLEPLAY:
const playerIframe = document.querySelector('#yDmH0d > div.llhEMd.bYEzqc.LAhoGb.iWO5td > div > div.LhXUod.XL54pf.J9Nfi.iWO5td > span > div > div > iframe');
if (playerIframe) {
const googlePlayVideoElement = playerIframe.contentWindow.document.querySelector('video');
if (googlePlayVideoElement) {
this.firstTimeSync(googlePlayVideoElement);
}
} else {
setInterval(
this.video.element
? null
: () => {
const pif = document.querySelector('#yDmH0d > div.llhEMd.bYEzqc.LAhoGb.iWO5td > div > div.LhXUod.XL54pf.J9Nfi.iWO5td > span > div > div > iframe');
if (pif) {
const gpve = pif.contentWindow.document.querySelector('video');
if (gpve) {
this.firstTimeSync(gpve);
}
}
},
1000
);
}
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');
crunchyRollInjectScript.text = crunchyRollInject;
document.head.appendChild(crunchyRollInjectScript);
const crunchyrollIframe = document.getElementById('vilos-player');
if (crunchyrollIframe) {
this.firstTimeSync(crunchyrollIframe);
} else {
setInterval(
this.video.element
? null
: () => {
const cif = document.getElementById('vilos-player');
if (cif) {
this.firstTimeSync(cif);
}
},
1000
);
}
break;
case PLAYER_SOURCE.LOCAL:
const localVideoElement = document.getElementsByTagName('video')[0];
if (localVideoElement) {
app/src/index.css
+44 -1
View File
@@ -73,7 +73,8 @@ 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.youtube.visible #content.ytd-app, /* YOUTUBE */
body.youtube.visible #masthead-container /* YOUTUBE HEADER */ {
body.youtube.visible #masthead-container, /* YOUTUBE HEADER */
body.googleplay.visible div.llhEMd.bYEzqc.LAhoGb.iWO5td /* GOOGLE PLAY MOVIES */ {
max-width: var(--body-width) !important;
}
/* HULU MINIMIZED VIDEO */
@@ -151,6 +152,48 @@ body.peacock.visible .playback-header__container {
position: relative;
max-width: 100%;
}
/* GOOGLE PLAY STYLING */
body.googleplay.visible {
overflow: hidden;
}
body.googleplay.visible div.llhEMd.bYEzqc.LAhoGb.iWO5td > div.mjANdc.eEPege {
padding: 0 !important;
}
body.googleplay.visible div.llhEMd.bYEzqc.LAhoGb.iWO5td > div.mjANdc.eEPege > div.LhXUod.XL54pf.J9Nfi.iWO5td,
body.googleplay.visible div.llhEMd.bYEzqc.LAhoGb.iWO5td > div > div.LhXUod.XL54pf.J9Nfi.iWO5td > span > div > div > iframe {
min-height: 100%;
width: 100% !important;
height: 100% !important;
}
body.googleplay.visible div.llhEMd.bYEzqc.LAhoGb.iWO5td > div > div.LhXUod.XL54pf.J9Nfi.iWO5td > span > div,
body.googleplay.visible div.llhEMd.bYEzqc.LAhoGb.iWO5td > div > div.LhXUod.XL54pf.J9Nfi.iWO5td > span > div > div {
height: 100%;
}
/* CRUNCHYROLL STYLING */
body.crunchyroll.visible #showmedia_video {
position: fixed;
z-index: 99999;
width: calc(100% - var(--party-width));
background: black;
top: 0;
left: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
body.crunchyroll.visible #showmedia_video_box {
width: 100% !important;
height: 100% !important;
}
body.crunchyroll.visible #showmedia_video_player {
display: flex !important;
align-items: center !important;
}
body.crunchyroll.visible #vilos-player {
max-height: 42vw !important;
}
/*
FULL SCREEN BUTTON REMOVER
app/src/index.js
+6
View File
@@ -95,6 +95,12 @@ switch (getPlayerSource()) {
case PLAYER_SOURCE.PEACOCK:
document.body.classList.add('peacock');
break;
case PLAYER_SOURCE.GOOGLEPLAY:
document.body.classList.add('googleplay');
break;
case PLAYER_SOURCE.CRUNCHYROLL:
document.body.classList.add('crunchyroll');
break;
case PLAYER_SOURCE.LOCAL:
document.body.classList.add('local');
break;