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

v1.2.0-beta/full hulu support and improved netflix

Browse Source
This commit is contained in:
Ayushya Amitabh
2020-05-20 19:50:09 -04:00
parent 2f082d24b5
commit c5dc4d756f
6 changed files with 42 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/manifest.json
+8 -1
View File
@@ -11,7 +11,8 @@
"https://*.netflix.com/*",
"https://*.amazon.com/*",
"https://*.disneyplus.com/*",
"https://*.youtube.com/*"
"https://*.youtube.com/*",
"https://play.hbonow.com/*"
],
"content_security_policy": "script-src 'self' https://www.gstatic.com/ https://*.firebaseio.com https://www.googleapis.com; object-src 'self'",
"content_scripts": [
@@ -44,6 +45,12 @@
"run_at": "document_idle",
"js": ["/static/js/content.js"],
"css": ["/static/css/app.css"]
},
{
"matches": ["https://play.hbonow.com/*"],
"run_at": "document_idle",
"js": ["/static/js/content.js"],
"css": ["/static/css/app.css"]
}
],
"web_accessible_resources": ["android-icon-192x192.png"],
src/Api.js
+2
View File
@@ -17,6 +17,7 @@ export const PLAYER_SOURCE = {
HULU: 'https://www.hulu.',
DISNEY: 'https://www.disneyplus.',
YOUTUBE: 'https://www.youtube.',
HBONOW: 'https://play.hbonow.',
LOCAL: 'http://localhost',
};
@@ -27,6 +28,7 @@ export const getPlayerSource = () => {
if (HREF.startsWith(PLAYER_SOURCE.AMAZON)) return PLAYER_SOURCE.AMAZON;
if (HREF.startsWith(PLAYER_SOURCE.DISNEY)) return PLAYER_SOURCE.DISNEY;
if (HREF.startsWith(PLAYER_SOURCE.YOUTUBE)) return PLAYER_SOURCE.YOUTUBE;
if (HREF.startsWith(PLAYER_SOURCE.HBONOW)) return PLAYER_SOURCE.HBONOW;
if (HREF.startsWith(PLAYER_SOURCE.LOCAL)) return PLAYER_SOURCE.LOCAL;
};
src/Chat.js
+4 -4
View File
@@ -29,9 +29,9 @@ import Create from './Create';
import VideoListener from './VideoListener';
const giphyFetch = new GiphyFetch('ojJbIMUN6XRMn4mHiFFav3rMCpXUg8sq');
const huluAlert = {
const alertMessage = {
name: '<alert>',
text: 'Time sync is not available on Hulu yet.',
text: 'Functionality may be buggy, support on this site is in beta.',
time: '',
uid: '<system>',
};
@@ -216,8 +216,8 @@ export default class Chat extends Component {
}
render() {
const { admin, name, messages, newMessage, gif } = this.state;
if (getPlayerSource() === PLAYER_SOURCE.HULU && messages[0] !== huluAlert)
messages.unshift(huluAlert);
if (getPlayerSource() === PLAYER_SOURCE.HBONOW && messages[0] !== alertMessage)
messages.unshift(alertMessage);
return (
<div className="party-chat-container">
<div className="party-chat-header">
src/VideoListener.js
+23 -5
View File
@@ -78,6 +78,9 @@ export default class VideoListener {
case PLAYER_SOURCE.YOUTUBE:
this.video.element.currentTime = serverPlayer.time;
break;
case PLAYER_SOURCE.HULU:
window.postMessage({ type: 'SEEK', time: serverPlayer.time }, '*');
break;
default:
break;
}
@@ -85,12 +88,23 @@ export default class VideoListener {
// TOGGLE PLAYER STATUS
switch (serverPlayer.status) {
case PLAYER_STATUS.PAUSED:
await this.video.element.pause();
if (
PLAYER_SOURCE.HULU === this.video.source ||
PLAYER_SOURCE.NETFLIX === this.video.source
)
window.postMessage({ type: 'PAUSE', time: serverPlayer.time }, '*');
else await this.video.element.pause();
break;
case PLAYER_STATUS.PLAYING:
await this.video.element
.play()
.catch((err) => console.error('WatchParty erred when syncing play.'));
if (
PLAYER_SOURCE.HULU === this.video.source ||
PLAYER_SOURCE.NETFLIX === this.video.source
)
window.postMessage({ type: 'PLAY', time: serverPlayer.time }, '*');
else
await this.video.element
.play()
.catch((err) => console.error('WatchParty erred when syncing play.'));
break;
default:
break;
@@ -186,7 +200,7 @@ export default class VideoListener {
this.updateStatus({ source: getPlayerSource(), showName: await this.getShowName() });
switch (this.video.source) {
case PLAYER_SOURCE.NETFLIX:
const seekInject = `window.seekScriptLoaded=!0;var getVideoPlayer=function(){var e=window.netflix.appContext.state.playerApp.getAPI().videoPlayer,t=e.getAllPlayerSessionIds()[0];return e.getVideoPlayerBySessionId(t)},seekInteraction=function(e){if(e.source==window){if(e.data.type&&"SEEK"==e.data.type){getVideoPlayer().pause();getVideoPlayer().seek(e.data.time);}e.data.type&&"teardown"==e.data.type&&(window.removeEventListener("message",seekInteraction,!1),window.seekScriptLoaded=!1)}};window.addEventListener("message",seekInteraction,!1);`;
const seekInject = `window.seekScriptLoaded=!0;var getVideoPlayer=function(){var e=window.netflix.appContext.state.playerApp.getAPI().videoPlayer,t=e.getAllPlayerSessionIds()[0];return e.getVideoPlayerBySessionId(t)},seekInteraction=function(e){if(e.source==window){if(e.data.type&&"SEEK"==e.data.type){getVideoPlayer().pause();getVideoPlayer().seek(e.data.time);}if(e.data.type&&e.data.type==="PAUSE"){getVideoPlayer().pause();}if(e.data.type&&e.data.type==="PLAY"){getVideoPlayer().play();}e.data.type&&"teardown"==e.data.type&&(window.removeEventListener("message",seekInteraction,!1),window.seekScriptLoaded=!1)}};window.addEventListener("message",seekInteraction,!1);`;
const seekInjectScript = document.createElement('script');
seekInjectScript.text = seekInject;
document.head.appendChild(seekInjectScript);
@@ -217,6 +231,10 @@ export default class VideoListener {
}
break;
case PLAYER_SOURCE.HULU:
const huluSeekInject = `window.seekScriptLoaded=!0;var getVideoPlayer=function(){var e=document.getElementsByClassName('content-video-player')[0].__HuluDashPlayer__;return e;},seekInteraction=function(e){if(e.source==window){if(e.data.type&&"SEEK"==e.data.type){getVideoPlayer().seek(e.data.time,e.data.time);}if(e.data.type&&e.data.type==="PAUSE"){getVideoPlayer().pause();}if(e.data.type&&e.data.type==="PLAY"){getVideoPlayer().play();}e.data.type&&"teardown"==e.data.type&&(window.removeEventListener("message",seekInteraction,!1),window.seekScriptLoaded=!1)}};window.addEventListener("message",seekInteraction,!1);`;
const huluSeekInjectScript = document.createElement('script');
huluSeekInjectScript.text = huluSeekInject;
document.head.appendChild(huluSeekInjectScript);
const videoElement = document.getElementsByClassName('content-video-player')[0];
if (videoElement) {
this.firstTimeSync(videoElement);
src/index.css
+2 -1
View File
@@ -25,7 +25,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.hbo.visible video.default {
max-width: var(--body-width) !important;
}
/* HULU MINIMIZED VIDEO */
src/index.js
+3
View File
@@ -53,6 +53,9 @@ switch (getPlayerSource()) {
case PLAYER_SOURCE.YOUTUBE:
document.body.classList.add('youtube');
break;
case PLAYER_SOURCE.HBONOW:
document.body.classList.add('hbo');
break;
case PLAYER_SOURCE.LOCAL:
break;
default: