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

adding time sync

Browse Source
This commit is contained in:
Ayushya Amitabh
2020-04-28 21:20:14 -04:00
parent bab143ace0
commit a169fde183
9 changed files with 97 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Api.js
+2
View File
@@ -14,6 +14,7 @@ export const PLAYER_SOURCE = {
NETFLIX: 'https://www.netflix.',
AMAZON: 'https://www.amazon.',
HULU: 'https://www.hulu.',
DISNEY: 'https://www.disneyplus.',
LOCAL: 'http://localhost',
};
@@ -22,6 +23,7 @@ export const getPlayerSource = () => {
if (HREF.startsWith(PLAYER_SOURCE.NETFLIX)) return PLAYER_SOURCE.NETFLIX;
if (HREF.startsWith(PLAYER_SOURCE.HULU)) return PLAYER_SOURCE.HULU;
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.LOCAL)) return PLAYER_SOURCE.LOCAL;
};
src/Chat.js
+5 -2
View File
@@ -115,6 +115,7 @@ export default class Chat extends Component {
showName,
time,
source,
updatedBy: window.localStorage.getItem('watchPartyUserUid'),
},
}).catch((err) => {
this.props.updateLoading(false);
@@ -235,13 +236,15 @@ export default class Chat extends Component {
</Button>
{admin && (
<Button onClick={this.endParty} startIcon={<Delete />}>
<span className="party-control-button-text">End Party</span>
{/* <span className="party-control-button-text">End Party</span> */}
</Button>
)}
</ButtonGroup>
</div>
<div className="thread-container">
<Thread messages={messages} />
<Thread
messages={messages.sort((a, b) => new Date(b).getTime() - new Date(a).getTime())}
/>
</div>
<TextField
multiline
src/Create.js
+2 -1
View File
@@ -157,7 +157,8 @@ const Create = (props) => {
value={joinName}
className="card-field addFocus"
onChange={(e) => setJoinName(e.target.value)}
label="Party Name"
label="Party Code"
helperText="Ask your party leader for this code"
/>
<Button
onClick={() => joinRoom({ joinName, name, props })}
src/VideoListener.js
+64
View File
@@ -16,6 +16,7 @@ export default class VideoListener {
this.firstTimeSync = this.firstTimeSync.bind(this);
this.doUpdate = this.doUpdate.bind(this);
this.start = this.start.bind(this);
this.getDisneyTitle = this.getDisneyTitle.bind(this);
this.isUpdating = false;
}
updateStatus(newStatus) {
@@ -27,6 +28,20 @@ export default class VideoListener {
} else return;
}
doUpdate(serverPlayer) {
if (this.video.element && this.video.time !== serverPlayer.time) {
switch (this.video.source) {
case PLAYER_SOURCE.NETFLIX:
window.postMessage({ type: 'SEEK', time: serverPlayer.time * 1000 }, '*');
break;
case PLAYER_SOURCE.AMAZON:
this.video.element.play();
this.video.element.currentTime = serverPlayer.time;
break;
default:
break;
}
}
if (this.video.element && this.video.status !== serverPlayer.status) {
switch (serverPlayer.status) {
case PLAYER_STATUS.PAUSED:
@@ -43,6 +58,19 @@ export default class VideoListener {
}
}
}
getDisneyTitle() {
return new Promise((resolve) => {
this.video.element.click();
setTimeout(
() =>
resolve([
document.getElementsByClassName('title-field')[0].innerHTML,
document.getElementsByClassName('subtitle-field')[0].innerHTML,
]),
50
);
});
}
getShowName() {
switch (this.video.source) {
case PLAYER_SOURCE.NETFLIX:
@@ -69,6 +97,13 @@ export default class VideoListener {
const hshow = document.querySelector('.metadata-area__second-line').innerHTML;
const hepisode = document.querySelector('.metadata-area__third-line').innerHTML;
return hshow === '' && hepisode === '' ? null : hshow + '\n' + hepisode;
case PLAYER_SOURCE.DISNEY:
this.getDisneyTitle().then((r) => {
const dshow = r[0];
const depisode = r[1];
return dshow === '' && depisode === '' ? null : dshow + '\n' + depisode;
});
break;
default:
break;
}
@@ -111,6 +146,10 @@ export default class VideoListener {
this.updateStatus({ source: getPlayerSource(), showName: 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().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 seekInjectScript = document.createElement('script');
seekInjectScript.text = seekInject;
document.head.appendChild(seekInjectScript);
if (document.getElementsByClassName('AkiraPlayer')[0]) {
const videoElement = document
.getElementsByClassName('AkiraPlayer')[0]
@@ -153,6 +192,31 @@ export default class VideoListener {
}
}
break;
case PLAYER_SOURCE.DISNEY:
const wrapper = document.getElementById('hudson-wrapper');
if (wrapper) {
const container = wrapper.querySelector('.hudson-container');
if (container) {
const videoElement = container.querySelector('video');
if (videoElement) {
this.firstTimeSync(videoElement);
}
}
} else {
document.addEventListener('DOMNodeInserted', () => {
const wrapper = document.getElementById('hudson-wrapper');
if (wrapper) {
const container = wrapper.querySelector('.hudson-container');
if (container) {
const videoElement = container.querySelector('video');
if (videoElement) {
if (!this.video.element) this.firstTimeSync(videoElement);
}
}
}
});
}
break;
case PLAYER_SOURCE.LOCAL:
const localVideoElement = document.getElementsByTagName('video')[0];
if (localVideoElement) {
src/index.css
+3 -2
View File
@@ -25,7 +25,8 @@ body.hulu.visible #__player__ .Player__container.Player__container--modal {
right: calc(25% + 2rem) !important;
z-index: 99999 !important;
}
/* HULU & AMAZON PRIME FIX */
/* HULU, DISNEY & AMAZON PRIME FIX */
body.disney #party-routes-wrapper,
body.hulu #party-routes-wrapper,
body.amazon-prime #party-routes-wrapper {
width: 25% !important;
@@ -204,7 +205,7 @@ body.amazon-prime textarea:focus {
}
.room-title,
.brand-title {
padding-left: 3.5rem !important;
padding-left: 1rem !important;
}
.thread-container::-webkit-scrollbar {
width: 5px;
src/index.js
+5
View File
@@ -18,6 +18,8 @@ const firebaseConfig = {
firebase.initializeApp(firebaseConfig);
if (window.netflix) console.log('Netflix found');
const PartyWrapper = document.createElement('div');
PartyWrapper.id = 'party_wrapper';
document.body.appendChild(PartyWrapper);
@@ -44,6 +46,9 @@ switch (getPlayerSource()) {
case PLAYER_SOURCE.AMAZON:
document.body.classList.add('amazon-prime');
break;
case PLAYER_SOURCE.DISNEY:
document.body.classList.add('disney');
break;
case PLAYER_SOURCE.LOCAL:
const VideoPlayer = document.createElement('video');
VideoPlayer.autoplay = true;