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

time sync

Browse Source
This commit is contained in:
Ayushya Amitabh
2020-05-03 16:02:04 -04:00
parent 2e6d943b9e
commit 8aef416eda
6 changed files with 100 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
functions/index.js
+2 -3
View File
@@ -461,10 +461,9 @@ exports.scheduledCleanUp = functions.pubsub.schedule('every 60 minutes').onRun(a
roomRef roomRef
.get() .get()
.then(async (roomSnap) => { .then(async (roomSnap) => {
const roomData = roomSnap.data();
if ( if (
timeDiff(roomData.createdAt, startedTime) >= 24 || timeDiff(roomSnap.createTime.toDate(), startedTime) >= 24 ||
timeDiff(roomData.updatedAt, startedTime) >= 12 timeDiff(roomSnap.updateTime.toDate(), startedTime) >= 12
) )
await cleanUpRoom(roomSnap.id); await cleanUpRoom(roomSnap.id);
console.info(`Deleted room ${roomSnap.id} from auto cleanup`); console.info(`Deleted room ${roomSnap.id} from auto cleanup`);
src/Api.js
+2 -2
View File
@@ -2,8 +2,8 @@
const API_HOST = window.location.href.startsWith('http://localhost') const API_HOST = window.location.href.startsWith('http://localhost')
? 'http://localhost:5001/watch-party-crx/us-central1/widgets' ? 'http://localhost:5001/watch-party-crx/us-central1/widgets'
: 'http://localhost:5001/watch-party-crx/us-central1/widgets'; : // : 'http://localhost:5001/watch-party-crx/us-central1/widgets';
// : 'https://us-central1-watch-party-crx.cloudfunctions.net/widgets'; 'https://us-central1-watch-party-crx.cloudfunctions.net/widgets';
export const PLAYER_STATUS = { export const PLAYER_STATUS = {
PLAYING: 'PLAYING', PLAYING: 'PLAYING',
src/App.js
+1 -2
View File
@@ -7,7 +7,6 @@ import firebase from 'firebase/app';
import 'firebase/firestore'; import 'firebase/firestore';
import Inactive from './Inactive'; import Inactive from './Inactive';
import { getUserUid } from './Api'; import { getUserUid } from './Api';
import Chat from './Chat';
const darkTheme = createMuiTheme({ const darkTheme = createMuiTheme({
palette: { palette: {
@@ -20,7 +19,7 @@ const darkTheme = createMuiTheme({
const Routes = (props) => ( const Routes = (props) => (
<Router> <Router>
<Chat {...props} /> <Create {...props} />
</Router> </Router>
); );
src/Chat.js
+12 -18
View File
@@ -54,6 +54,7 @@ export default class Chat extends Component {
this.gifClick = this.gifClick.bind(this); this.gifClick = this.gifClick.bind(this);
} }
componentDidMount() { componentDidMount() {
// EVENT CAPTURE FOR ENTER TO SEND
window.onkeypress = (ev) => { window.onkeypress = (ev) => {
if (ev.code === 'Enter') { if (ev.code === 'Enter') {
if (ev.target === document.getElementById('chat-message-box-input')) { if (ev.target === document.getElementById('chat-message-box-input')) {
@@ -65,11 +66,18 @@ export default class Chat extends Component {
} }
} }
}; };
// VIDEO LISTENER START
this.mVideoListener.start();
// CHROME FIREBASE FIRESTORE LISTENER
this.port = chrome.runtime.connect({ name: window.localStorage.getItem('watchPartyRoomId') }); this.port = chrome.runtime.connect({ name: window.localStorage.getItem('watchPartyRoomId') });
// Initialize listener
this.port.postMessage({ this.port.postMessage({
type: 'INIT', type: 'INIT',
roomId: window.localStorage.getItem('watchPartyRoomId'), roomId: window.localStorage.getItem('watchPartyRoomId'),
}); });
// Listener
this.port.onMessage.addListener((response) => { this.port.onMessage.addListener((response) => {
if (response.isError === true) { if (response.isError === true) {
this.props.notify('Uh oh. Got lost from the party.'); this.props.notify('Uh oh. Got lost from the party.');
@@ -77,30 +85,16 @@ export default class Chat extends Component {
return; return;
} }
this.setState(response); this.setState(response);
if (response.player && this.state.localPlayer.status !== response.player.status) { if (response.player) this.mVideoListener.doUpdate(response.player);
if (response.player.source !== getPlayerSource()) {
this.props.updateLoading(true);
this.props.notify('This party is for a different website');
goTo(Create, this.props);
this.props.updateLoading(false);
} else {
if (this.mVideoListener.isUpdating === false)
this.mVideoListener.doUpdate(response.player);
}
}
const pcc = document.getElementsByClassName('thread-container')[0]; const pcc = document.getElementsByClassName('thread-container')[0];
if (pcc) pcc.scrollTop = pcc.scrollHeight; if (pcc) pcc.scrollTop = pcc.scrollHeight;
}); });
this.mVideoListener.start();
// DONE WITH MOUNTING TASKS
this.props.updateLoading(false); this.props.updateLoading(false);
} }
videoEventListener(video) { videoEventListener(video) {
this.setState({ localPlayer: video }); this.setState({ localPlayer: video });
if (
this.state.player.status !== video.status &&
video.showName &&
video.status !== PLAYER_STATUS.NOT_PLAYING
)
this.syncPlayer(video); this.syncPlayer(video);
} }
syncPlayer(video) { syncPlayer(video) {
@@ -190,7 +184,7 @@ export default class Chat extends Component {
}); });
} }
sendMessageInvoker(overrideMessage) { sendMessageInvoker(overrideMessage) {
if (overrideMessage) console.log(overrideMessage); if (overrideMessage) this.sendMessage(overrideMessage);
else { else {
const trim = this.state.newMessage.replace(/^\s+|\s+$/g, ''); const trim = this.state.newMessage.replace(/^\s+|\s+$/g, '');
if (trim !== '') this.sendMessage(trim); if (trim !== '') this.sendMessage(trim);
src/VideoListener.js
+37 -47
View File
@@ -16,19 +16,17 @@ export default class VideoListener {
this.firstTimeSync = this.firstTimeSync.bind(this); this.firstTimeSync = this.firstTimeSync.bind(this);
this.doUpdate = this.doUpdate.bind(this); this.doUpdate = this.doUpdate.bind(this);
this.start = this.start.bind(this); this.start = this.start.bind(this);
this.getDisneyTitle = this.getDisneyTitle.bind(this);
this.isUpdating = false;
} }
updateStatus(newStatus) { updateStatus(newStatus) {
if (this.isUpdating === false && newStatus.status !== this.video.status) { const oldVideo = this.video;
this.isUpdating = true;
this.video = Object.assign({}, this.video, newStatus); this.video = Object.assign({}, this.video, newStatus);
if (oldVideo.status !== this.video.status || Math.abs(this.video.time - oldVideo.time) > 1)
this.listener(this.video); this.listener(this.video);
this.isUpdating = false;
} else return;
} }
doUpdate(serverPlayer) { doUpdate(serverPlayer) {
if (this.video.element && this.video.time !== serverPlayer.time) { // SEEK
if (serverPlayer.updatedBy !== window.localStorage.getItem('watchPartyUserUid')) {
if (this.video.element && Math.abs(this.video.time - serverPlayer.time) > 1) {
switch (this.video.source) { switch (this.video.source) {
case PLAYER_SOURCE.NETFLIX: case PLAYER_SOURCE.NETFLIX:
window.postMessage({ type: 'SEEK', time: serverPlayer.time * 1000 }, '*'); window.postMessage({ type: 'SEEK', time: serverPlayer.time * 1000 }, '*');
@@ -41,8 +39,8 @@ export default class VideoListener {
break; break;
} }
} }
// PLAY OR PAUSE
if (this.video.element && this.video.status !== serverPlayer.status) { if (this.video.element) {
switch (serverPlayer.status) { switch (serverPlayer.status) {
case PLAYER_STATUS.PAUSED: case PLAYER_STATUS.PAUSED:
this.video.element.pause(); this.video.element.pause();
@@ -58,20 +56,13 @@ export default class VideoListener {
} }
} }
} }
getDisneyTitle() { }
return new Promise((resolve) => { timeout(n) {
this.video.element.click(); return new Promise((resolve, reject) => {
setTimeout( setTimeout(resolve, n);
() =>
resolve([
document.getElementsByClassName('title-field')[0].innerHTML,
document.getElementsByClassName('subtitle-field')[0].innerHTML,
]),
50
);
}); });
} }
getShowName() { async getShowName() {
switch (this.video.source) { switch (this.video.source) {
case PLAYER_SOURCE.NETFLIX: case PLAYER_SOURCE.NETFLIX:
const titleContainerParent = document.querySelector( const titleContainerParent = document.querySelector(
@@ -98,20 +89,22 @@ export default class VideoListener {
const hepisode = document.querySelector('.metadata-area__third-line').innerHTML; const hepisode = document.querySelector('.metadata-area__third-line').innerHTML;
return hshow === '' && hepisode === '' ? null : hshow + '\n' + hepisode; return hshow === '' && hepisode === '' ? null : hshow + '\n' + hepisode;
case PLAYER_SOURCE.DISNEY: case PLAYER_SOURCE.DISNEY:
this.getDisneyTitle().then((r) => { this.video.element.click();
const dshow = r[0]; await this.timeout(200);
const depisode = r[1]; const dshow = document.querySelector('.title-field').innerHTML;
const depisode = document.querySelector('.subtitle-field').innerHTML;
return dshow === '' && depisode === '' ? null : dshow + '\n' + depisode; return dshow === '' && depisode === '' ? null : dshow + '\n' + depisode;
});
break;
default: default:
break; break;
} }
} }
firstTimeSync(videoElement) { async firstTimeSync(videoElement) {
console.log('INSIDE FIRST TIME SYNC', videoElement);
this.updateStatus({ this.updateStatus({
element: videoElement, element: videoElement,
showName: this.getShowName(), });
this.updateStatus({
showName: await this.getShowName(),
}); });
if (videoElement.paused) { if (videoElement.paused) {
this.updateStatus({ this.updateStatus({
@@ -125,18 +118,19 @@ export default class VideoListener {
status: PLAYER_STATUS.PLAYING, status: PLAYER_STATUS.PLAYING,
}); });
} }
videoElement.onplaying = (ev) => { videoElement.onplay = async (ev) => {
console.log(ev);
this.updateStatus({ this.updateStatus({
status: PLAYER_STATUS.PLAYING, status: PLAYER_STATUS.PLAYING,
time: videoElement.currentTime, time: videoElement.currentTime,
showName: this.getShowName(), showName: await this.getShowName(),
}); });
}; };
videoElement.onpause = (ev) => videoElement.onpause = async (ev) =>
this.updateStatus({ this.updateStatus({
status: PLAYER_STATUS.PAUSED, status: PLAYER_STATUS.PAUSED,
time: videoElement.currentTime, time: videoElement.currentTime,
showName: this.getShowName(), showName: await this.getShowName(),
}); });
videoElement.onended = (ev) => { videoElement.onended = (ev) => {
this.updateStatus({ status: PLAYER_STATUS.NOT_PLAYING, showName: '', time: 0 }); this.updateStatus({ status: PLAYER_STATUS.NOT_PLAYING, showName: '', time: 0 });
@@ -193,25 +187,21 @@ export default class VideoListener {
} }
break; break;
case PLAYER_SOURCE.DISNEY: case PLAYER_SOURCE.DISNEY:
const wrapper = document.getElementById('hudson-wrapper'); const disneyVideoElement = document.querySelector('video.btm-media-client-element');
if (wrapper) { if (disneyVideoElement) {
const container = wrapper.querySelector('.hudson-container'); this.firstTimeSync(disneyVideoElement);
if (container) { } else {
const videoElement = container.querySelector('video'); document.addEventListener('DOMNodeInserted', (e) => {
if (e.target && e.target.classList) {
if (e.target.classList.contains('btm-media-player')) {
const videoElement = document.querySelector('video.btm-media-client-element');
if (videoElement) { if (videoElement) {
console.log(videoElement, this.video.element);
if (!this.video.element || this.video.element !== videoElement) {
console.log('FIRST TIME SYNC', videoElement);
this.firstTimeSync(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);
}
} }
} }
}); });
src/index.css
+19 -9
View File
@@ -1,13 +1,18 @@
:root {
--party-width: 22rem;
--neg-party-width: -22rem;
--body-width: calc(100% - var(--party-width));
}
body { body {
margin: 0 !important; margin: 0 !important;
background-color: black; background-color: black;
transition: max-width ease-in-out 0.35s; transition: max-width ease-in-out 0.35s;
} }
body.visible { body.visible {
width: 75%; width: var(--body-width);
} }
body.visible .watch-party-fab { body.visible .watch-party-fab {
right: 25% !important; right: var(--party-width) !important;
transform: translateX(50%); transform: translateX(50%);
top: 1.5rem; top: 1.5rem;
} }
@@ -17,21 +22,26 @@ body.visible .party-notification-container {
body.netflix.visible .AkiraPlayer, /* NETFLIX */ body.netflix.visible .AkiraPlayer, /* NETFLIX */
body.hulu.visible .Player__container,/* HULU */ body.hulu.visible .Player__container,/* HULU */
body.amazon-prime.visible #dv-web-player.dv-player-fullscreen /* AMAZON PRIME */ { body.amazon-prime.visible #dv-web-player.dv-player-fullscreen, /* AMAZON PRIME */
max-width: 75% !important; body.disney.visible #hudson-wrapper /* DISNEY */ {
max-width: var(--body-width) !important;
} }
/* HULU MINIMIZED VIDEO */ /* HULU MINIMIZED VIDEO */
body.hulu.visible #__player__ .Player__container.Player__container--modal { body.hulu.visible #__player__ .Player__container.Player__container--modal {
right: calc(25% + 2rem) !important; right: calc(var(--party-width) + 2rem) !important;
z-index: 99999 !important; z-index: 99999 !important;
} }
/* HULU, DISNEY & AMAZON PRIME FIX */ /* HULU, DISNEY & AMAZON PRIME FIX */
body.disney #party-routes-wrapper, body.disney #party-routes-wrapper,
body.hulu #party-routes-wrapper, body.hulu #party-routes-wrapper,
body.amazon-prime #party-routes-wrapper { body.amazon-prime #party-routes-wrapper {
width: 25% !important; width: var(--party-width) !important;
height: 100% !important; height: 100% !important;
} }
/* DISNEY FULL SCREEN VIDEO FIX */
body.disney #hudson-wrapper {
left: 0;
}
/* AMAZON STYLING FIX */ /* AMAZON STYLING FIX */
body.amazon-prime input, body.amazon-prime input,
body.amazon-prime textarea { body.amazon-prime textarea {
@@ -94,8 +104,8 @@ body.amazon-prime textarea:focus {
position: fixed; position: fixed;
background-color: rgb(27, 27, 27); background-color: rgb(27, 27, 27);
bottom: 0; bottom: 0;
width: calc(25% - 2rem); width: calc(var(--party-width) - 2rem);
right: -25%; right: var(--neg-party-width);
transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s;
height: calc(100% - 2rem); height: calc(100% - 2rem);
padding: 1rem; padding: 1rem;
@@ -112,7 +122,7 @@ body.amazon-prime textarea:focus {
display: none !important; display: none !important;
bottom: 0.8rem !important; bottom: 0.8rem !important;
right: 1rem !important; right: 1rem !important;
width: calc(25% - 2rem) !important; width: calc(var(--party-width) - 2rem) !important;
} }
.party-notification-container .MuiPaper-root { .party-notification-container .MuiPaper-root {
border-radius: 26px !important; border-radius: 26px !important;