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

v1.0.0-beta

Browse Source
This commit is contained in:
Ayushya Amitabh
2020-04-22 11:17:06 -04:00
parent 4225ad7d3e
commit 9604d8c448
13 changed files with 439 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Api.js
+45 -36
View File
@@ -1,5 +1,4 @@
import firebase from 'firebase/app';
import 'firebase/auth';
/*global chrome*/
const API_HOST = window.location.href.startsWith('http://localhost')
? 'http://localhost:5001/watch-party-crx/us-central1/widgets'
@@ -26,70 +25,80 @@ export const getPlayerSource = () => {
if (HREF.startsWith(PLAYER_SOURCE.LOCAL)) return PLAYER_SOURCE.LOCAL;
};
export const isAuthed = () => true && firebase.auth().currentUser;
export const doAuth = () => firebase.auth().signInAnonymously();
export const fetcher = async ({ ENDPOINT, METHOD, ...args }) => {
const idToken = await firebase.auth().currentUser.getIdToken();
return fetch(`${API_HOST}/${ENDPOINT}`, {
method: METHOD,
headers: {
Authorization: `Token ${idToken}:${firebase.auth().currentUser.uid}`,
},
...args,
export const getUserUid = async () =>
new Promise((resolve, reject) => {
chrome.runtime.sendMessage(
{
type: 'GET_AUTH',
},
(response) => {
const { uid } = response;
window.localStorage.setItem('watchPartyUserUid', uid);
resolve(uid);
}
);
});
export const fetcher = async ({ endpoint, method, ...args }) => {
const url = `${API_HOST}/${endpoint}`;
return new Promise((resolve, reject) =>
chrome.runtime.sendMessage(
{
type: 'API_CALL',
url,
method,
...args,
},
(response) => {
if (response.status > 299) reject(response);
else resolve({ json: () => response });
}
)
);
};
export const CreateRoomApi = async (data) => {
if (!isAuthed()) await doAuth();
return fetcher({
ENDPOINT: 'create',
METHOD: 'POST',
endpoint: 'create',
method: 'POST',
body: JSON.stringify(data),
});
};
export const JoinRoomApi = async (data) => {
if (!isAuthed()) await doAuth();
return fetcher({
ENDPOINT: 'join',
METHOD: 'POST',
endpoint: 'join',
method: 'POST',
body: JSON.stringify(data),
});
};
export const SendMessageApi = async (data) => {
if (!isAuthed()) await doAuth();
return fetcher({
ENDPOINT: 'message',
METHOD: 'POST',
endpoint: 'message',
method: 'POST',
body: JSON.stringify(data),
});
};
export const LeaveRoomApi = async (data) => {
if (!isAuthed()) await doAuth();
return fetcher({
ENDPOINT: `leave/${data.roomId}/users/${data.uid}`,
METHOD: 'DELETE',
endpoint: `leave/${data.roomId}/users/${data.uid}`,
method: 'DELETE',
});
};
export const DeleteRoomApi = async (data) => {
if (!isAuthed()) await doAuth();
return fetcher({
ENDPOINT: `delete/${data.roomId}`,
METHOD: 'DELETE',
endpoint: `delete/${data.roomId}`,
method: 'DELETE',
});
};
export const UpdatePlayerApi = async (data) => {
if (isAuthed()) {
return fetcher({
ENDPOINT: 'updatePlayer',
METHOD: 'POST',
body: JSON.stringify(data),
});
}
return fetcher({
endpoint: 'updatePlayer',
method: 'POST',
body: JSON.stringify(data),
});
};
src/App.js
+2
View File
@@ -6,6 +6,7 @@ import Loading from './Loading';
import firebase from 'firebase/app';
import 'firebase/firestore';
import Inactive from './Inactive';
import { getUserUid } from './Api';
const darkTheme = createMuiTheme({
palette: {
@@ -32,6 +33,7 @@ const App = () => {
useEffect(() => {
setLoading(true);
getUserUid();
firebase
.firestore()
.collection('server')
src/Chat.js
+63 -62
View File
@@ -1,3 +1,4 @@
/*global chrome */
import React, { Component } from 'react';
import {
Typography,
@@ -7,16 +8,19 @@ import {
ButtonGroup,
Button,
} from '@material-ui/core';
import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';
import Thread from './Thread';
import Send from '@material-ui/icons/SendRounded';
import Sync from '@material-ui/icons/SyncOutlined';
import Exit from '@material-ui/icons/ExitToAppRounded';
import Share from '@material-ui/icons/ShareRounded';
import Delete from '@material-ui/icons/Delete';
import { SendMessageApi, LeaveRoomApi, DeleteRoomApi, UpdatePlayerApi } from './Api';
import {
SendMessageApi,
LeaveRoomApi,
DeleteRoomApi,
UpdatePlayerApi,
getPlayerSource,
PLAYER_STATUS,
} from './Api';
import { goTo } from 'route-lite';
import Create from './Create';
import VideoListener from './VideoListener';
@@ -28,7 +32,7 @@ export default class Chat extends Component {
name: '',
messages: [],
newMessage: '',
admin: false,
admin: null,
player: {},
localPlayer: {},
};
@@ -36,73 +40,74 @@ export default class Chat extends Component {
this.endParty = this.endParty.bind(this);
this.leaveParty = this.leaveParty.bind(this);
this.shareParty = this.shareParty.bind(this);
this.syncPlayer = this.syncPlayer.bind(this);
this.videoEventListener = this.videoEventListener.bind(this);
this.mVideoListener = new VideoListener(this.videoEventListener);
this.port = null;
}
componentDidMount() {
window.addEventListener('keyup', (ev) => {
window.onkeypress = (ev) => {
if (ev.code === 'Enter') {
if (ev.target === document.getElementById('chat-message-box-input')) {
if (ev.shiftKey === false) {
ev.preventDefault();
const trim = this.state.newMessage.replace(/^\s+|\s+$/g, '');
if (trim !== '') this.sendMessage(trim);
this.setState({ newMessage: '' });
}
}
}
};
this.port = chrome.runtime.connect({ name: window.localStorage.getItem('watchPartyRoomId') });
this.port.postMessage({
type: 'INIT',
roomId: window.localStorage.getItem('watchPartyRoomId'),
});
this.port.onMessage.addListener((response) => {
this.setState(response);
if (response.player && this.state.localPlayer.status !== response.player.status) {
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];
if (pcc) pcc.scrollTop = pcc.scrollHeight;
});
firebase
.firestore()
.collection('rooms')
.doc(window.localStorage.getItem('watchPartyRoomId'))
.onSnapshot(
(snap) => {
if (snap.data().player.status !== this.state.localPlayer.status) {
this.mVideoListener.doUpdate(snap.data().player);
}
this.setState(snap.data());
},
(err) => {}
);
firebase
.firestore()
.collection('rooms')
.doc(window.localStorage.getItem('watchPartyRoomId'))
.collection('users')
.onSnapshot((snap) => {
const isAdmin = snap.docs
.filter((user) => user.id === firebase.auth().currentUser.uid)[0]
.data().admin;
this.setState({ admin: isAdmin });
});
firebase
.firestore()
.collection('rooms')
.doc(window.localStorage.getItem('watchPartyRoomId'))
.collection('messages')
.orderBy('time')
.onSnapshot((snap) => {
this.setState({ messages: snap.docs.map((v) => ({ ...v.data(), id: v.id })) });
const pcc = document.getElementsByClassName('thread-container')[0];
if (pcc) pcc.scrollTop = pcc.scrollHeight;
});
this.mVideoListener.start();
this.props.updateLoading(false);
}
videoEventListener(video) {
const { status, url, time, source } = video;
if (this.state.player.status !== status) {
this.setState({ localPlayer: video });
if (
this.state.player.status !== video.status &&
video.showName &&
video.status !== PLAYER_STATUS.NOT_PLAYING
)
this.syncPlayer(video);
}
syncPlayer(video) {
const { status, showName, time, source, element } = video;
if (element) {
UpdatePlayerApi({
roomId: window.localStorage.getItem('watchPartyRoomId'),
showChanged: showName !== this.state.player.showName,
userName: window.localStorage.getItem('watchPartyUserName'),
player: {
status,
url,
status: showName !== this.state.player.showName ? PLAYER_STATUS.PAUSED : status,
showName,
time,
source,
},
});
} else {
this.mVideoListener.start();
}
this.setState({ localPlayer: video });
}
endParty() {
this.props.notify('Ending party...');
@@ -111,11 +116,10 @@ export default class Chat extends Component {
roomId: window.localStorage.getItem('watchPartyRoomId'),
};
DeleteRoomApi(data).then((res) => {
if (res.status === 200) {
this.props.notify('Ended party');
window.localStorage.removeItem('watchPartyRoomId');
goTo(Create, this.props);
}
this.props.notify('Ended party');
window.localStorage.removeItem('watchPartyRoomId');
goTo(Create, this.props);
this.props.updateLoading(false);
});
}
leaveParty() {
@@ -123,14 +127,13 @@ export default class Chat extends Component {
this.props.updateLoading(true);
const data = {
roomId: window.localStorage.getItem('watchPartyRoomId'),
uid: firebase.auth().currentUser.uid,
uid: window.localStorage.getItem('watchPartyUserUid'),
};
LeaveRoomApi(data).then((res) => {
if (res.status === 200) {
this.props.notify('Left party');
window.localStorage.removeItem('watchPartyRoomId');
goTo(Create, this.props);
}
this.props.notify('Left party');
window.localStorage.removeItem('watchPartyRoomId');
goTo(Create, this.props);
this.props.updateLoading(false);
});
}
shareParty() {
@@ -146,7 +149,7 @@ export default class Chat extends Component {
const data = {
roomId: window.localStorage.getItem('watchPartyRoomId'),
name: window.localStorage.getItem('watchPartyUserName'),
uid: firebase.auth().currentUser.uid,
uid: window.localStorage.getItem('watchPartyUserUid'),
text: message,
time: new Date().toISOString(),
};
@@ -166,7 +169,6 @@ export default class Chat extends Component {
<Button onClick={this.shareParty} startIcon={<Share />}>
Share
</Button>
<Button startIcon={<Sync />}>Sync</Button>
<Button onClick={this.leaveParty} startIcon={<Exit />}>
Leave
</Button>
@@ -180,13 +182,12 @@ export default class Chat extends Component {
<Thread messages={messages} />
</div>
<TextField
onSubmit={(e) => console.log(e)}
multiline
rowsMax="3"
size="small"
placeholder="New message... (<Enter> to send)"
variant="outlined"
className="chat-message-box"
className="chat-message-box addFocus"
value={newMessage}
onChange={(e) => this.setState({ newMessage: e.target.value })}
InputProps={{
src/Create.js
+23 -31
View File
@@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import React, { useState } from 'react';
import {
Button,
InputAdornment,
@@ -38,10 +38,10 @@ const joinRoom = async (data) => {
.then((res) => res.roomId)
.catch((err) => {
data.props.updateLoading(false);
data.props.notify('Something went wrong');
data.props.notify(err.statusText);
console.error('Join Room API error', err);
});
if (confirmedRoomId === apidata.roomId) {
if (confirmedRoomId && confirmedRoomId === apidata.roomId) {
saveName({
name: apidata.userName,
notify: data.props.notify,
@@ -73,21 +73,26 @@ const createRoom = async (data) => {
CreateRoomApi(apidata)
.then((res) => res.json())
.then((res) => {
saveName({
name: data.name,
notify: data.props.notify,
});
saveRoomId({
rid: res.roomId,
notify: data.props.notify,
});
data.props.notify('Started party');
goTo(Chat, data.props);
if (res.status <= 299) {
saveName({
name: data.name,
notify: data.props.notify,
});
saveRoomId({
rid: res.roomId,
notify: data.props.notify,
});
data.props.notify('Started party');
goTo(Chat, data.props);
} else {
data.props.updateLoading(false);
data.props.notify(res.statusText);
}
})
.catch((err) => {
data.props.updateLoading(false);
data.props.notify('Something went wrong');
console.error('Join Room API error', err);
data.props.notify(err.statusText);
console.error('Create Room API error', err);
});
};
@@ -95,20 +100,7 @@ const Create = (props) => {
const [name, setName] = useState(getName() || '');
const [createName, setCreateName] = useState('');
const [joinName, setJoinName] = useState(getRoomId() || '');
const { notify, updateLoading } = props;
const joinOnMount = () => {
updateLoading(false);
// NEEDS FIX - REPETITIVE API CALLS
// if (getName() && getRoomId()) {
// joinRoom({
// joinName,
// name,
// props,
// });
// }
};
useEffect(joinOnMount, []);
const { notify } = props;
return (
<div className="party-create-container">
@@ -140,7 +132,7 @@ const Create = (props) => {
<TextField
fullWidth
value={createName}
className="card-field"
className="card-field addFocus"
onChange={(e) => setCreateName(e.target.value)}
label="Party Name"
/>
@@ -162,7 +154,7 @@ const Create = (props) => {
color="secondary"
fullWidth
value={joinName}
className="card-field"
className="card-field addFocus"
onChange={(e) => setJoinName(e.target.value)}
label="Party Name"
/>
src/Thread.js
+2 -3
View File
@@ -1,18 +1,17 @@
import React from 'react';
import { Typography } from '@material-ui/core';
import './Thread.css';
import firebase from 'firebase/app';
import 'firebase/auth';
const Thread = (props) =>
props.messages.map((m, midx) => {
const userUid = window.localStorage.getItem('watchPartyUserUid');
if (m.uid === '<system>') {
return (
<Typography variant="body2" className="thread-item system-message" key={m.id} disabled>
{m.text}
</Typography>
);
} else if (m.uid === firebase.auth().currentUser.uid) {
} else if (m.uid === userUid) {
return (
<div
className={`thread-item ${
src/VideoListener.js
+75 -44
View File
@@ -7,7 +7,7 @@ export default class VideoListener {
this.video = {
status: PLAYER_STATUS.NOT_PLAYING,
time: 0,
url: '',
showName: '',
source: '',
element: null,
};
@@ -16,23 +16,57 @@ export default class VideoListener {
this.firstTimeSync = this.firstTimeSync.bind(this);
this.doUpdate = this.doUpdate.bind(this);
this.start = this.start.bind(this);
this.isUpdating = false;
}
updateStatus(newStatus) {
this.video = Object.assign({}, this.video, newStatus);
this.listener(this.video);
if (this.isUpdating === false && newStatus.status !== this.video.status) {
this.isUpdating = true;
this.video = Object.assign({}, this.video, newStatus);
this.listener(this.video);
this.isUpdating = false;
} else return;
}
doUpdate(serverPlayer) {
if (this.video.element) this.video.element.currentTime = serverPlayer.time;
switch (serverPlayer.status) {
case PLAYER_STATUS.PAUSED:
if (this.video.element) this.video.element.pause();
break;
case PLAYER_STATUS.NOT_PLAYING:
if (this.video.element) this.video.element.pause();
break;
case PLAYER_STATUS.PLAYING:
if (this.video.element) this.video.element.play();
if (this.video.element && this.video.status !== serverPlayer.status) {
switch (serverPlayer.status) {
case PLAYER_STATUS.PAUSED:
this.video.element.pause();
break;
case PLAYER_STATUS.NOT_PLAYING:
this.video.element.pause();
break;
case PLAYER_STATUS.PLAYING:
this.video.element.play();
break;
default:
break;
}
}
}
getShowName() {
switch (this.video.source) {
case PLAYER_SOURCE.NETFLIX:
const titleContainerParent = document.querySelector(
'.PlayerControls--control-element.text-control.video-title'
);
if (titleContainerParent) {
const titleContainer = titleContainerParent.firstChild;
const nshow = titleContainer.querySelector('h4').innerHTML;
let nepisode = '';
titleContainer.querySelectorAll('span').forEach((e) => {
if (e.innerHTML) nepisode += e.innerHTML + ' ';
});
return nshow + '\n' + nepisode;
}
break;
case PLAYER_SOURCE.AMAZON:
const ashow = document.querySelector('.f3w9jrr.ff48h02').firstChild.innerHTML;
const aepisode = document.querySelector('.f3w9jrr.ff48h02').lastChild.innerHTML;
return ashow !== '' && aepisode !== '' ? ashow + '\n' + aepisode : null;
case PLAYER_SOURCE.HULU:
const hshow = document.querySelector('.metadata-area__second-line').innerHTML;
const hepisode = document.querySelector('.metadata-area__third-line').innerHTML;
return hshow !== '' && hepisode !== '' ? hshow + '\n' + hepisode : null;
default:
break;
}
@@ -40,6 +74,7 @@ export default class VideoListener {
firstTimeSync(videoElement) {
this.updateStatus({
element: videoElement,
showName: this.getShowName(),
});
if (videoElement.paused) {
this.updateStatus({
@@ -54,17 +89,24 @@ export default class VideoListener {
});
}
videoElement.onplaying = (ev) => {
this.updateStatus({ status: PLAYER_STATUS.PLAYING, time: ev.timeStamp });
if (this.video.url === '') this.updateStatus({ url: window.location.href });
this.updateStatus({
status: PLAYER_STATUS.PLAYING,
time: videoElement.currentTime,
showName: this.getShowName(),
});
};
videoElement.onpause = (ev) =>
this.updateStatus({ status: PLAYER_STATUS.PAUSED, time: ev.timeStamp });
this.updateStatus({
status: PLAYER_STATUS.PAUSED,
time: videoElement.currentTime,
showName: this.getShowName(),
});
videoElement.onended = (ev) => {
this.updateStatus({ status: PLAYER_STATUS.NOT_PLAYING, url: '', time: 0 });
this.updateStatus({ status: PLAYER_STATUS.NOT_PLAYING, showName: '', time: 0 });
};
}
start() {
this.updateStatus({ source: getPlayerSource(), url: window.location.href });
this.updateStatus({ source: getPlayerSource(), showName: this.getShowName() });
switch (this.video.source) {
case PLAYER_SOURCE.NETFLIX:
if (document.getElementsByClassName('AkiraPlayer')[0]) {
@@ -75,25 +117,28 @@ export default class VideoListener {
this.firstTimeSync(videoElement);
}
} else {
document.body.addEventListener('DOMNodeInserted', (ev) => {
if (ev.target.tagName === 'VIDEO') {
document.body.removeEventListener('DOMNodeInserted');
this.start();
document.addEventListener('DOMNodeInserted', (e) => {
if (e.target) {
if (e.target.classList) {
if (
e.target.classList.contains('nfp') &&
e.target.classList.contains('AkiraPlayer')
) {
e.target.addEventListener('DOMNodeInserted', (ev) => {
if (ev.target.children[0].id) {
this.firstTimeSync(ev.target.children[0].firstChild);
}
});
}
}
}
});
}
break;
case PLAYER_SOURCE.HULU:
const videoElement = document.getElementsByClassName('video-player')[0];
const videoElement = document.getElementsByClassName('content-video-player')[0];
if (videoElement) {
this.firstTimeSync(videoElement);
} else {
document.body.addEventListener('DOMNodeInserted', (ev) => {
if (ev.target.tagName === 'VIDEO') {
document.body.removeEventListener('DOMNodeInserted');
this.start();
}
});
}
break;
case PLAYER_SOURCE.AMAZON:
@@ -104,26 +149,12 @@ export default class VideoListener {
if (videoElement) {
this.firstTimeSync(videoElement);
}
} else {
document.body.addEventListener('DOMNodeInserted', (ev) => {
if (ev.target.tagName === 'VIDEO') {
document.body.removeEventListener('DOMNodeInserted');
this.start();
}
});
}
break;
case PLAYER_SOURCE.LOCAL:
const localVideoElement = document.getElementsByTagName('video')[0];
if (localVideoElement) {
this.firstTimeSync(localVideoElement);
} else {
document.body.addEventListener('DOMNodeInserted', (ev) => {
if (ev.target.tagName === 'VIDEO') {
document.body.removeEventListener('DOMNodeInserted');
this.start();
}
});
}
break;
default:
src/index.css
+8 -3
View File
@@ -7,7 +7,8 @@ body.visible {
width: 65%;
}
body.visible .watch-party-fab {
right: calc(35% - 4rem) !important;
right: 35% !important;
transform: translateX(50%);
top: 1.5rem;
}
body.visible .party-notification-container {
@@ -15,13 +16,14 @@ body.visible .party-notification-container {
}
body.netflix.visible .AkiraPlayer, /* NETFLIX */
body.hulu.visible .Player__container.addFocus,/* HULU */
body.hulu.visible .Player__container,/* HULU */
body.amazon-prime.visible #dv-web-player.dv-player-fullscreen /* AMAZON PRIME */ {
max-width: 65% !important;
}
/* HULU MINIMIZED VIDEO */
body.hulu.visible #__player__.Player__container.Player__container--modal {
body.hulu.visible #__player__ .Player__container.Player__container--modal {
right: calc(35% + 2rem) !important;
z-index: 99999 !important;
}
/* HULU & AMAZON PRIME FIX */
body.hulu #party-routes-wrapper,
@@ -77,11 +79,13 @@ body.amazon-prime #party-routes-wrapper {
color: white;
display: flex;
flex-direction: column;
z-index: 9999;
}
#party-routes-wrapper.visible {
right: 0;
}
.party-notification-container {
z-index: 99999 !important;
display: none !important;
bottom: 0.8rem !important;
right: 1rem !important;
@@ -97,6 +101,7 @@ body.amazon-prime #party-routes-wrapper {
position: fixed !important;
bottom: 1rem !important;
right: -2rem !important;
border: 1px solid white;
background-color: black !important;
/* background-image: url('/logo192.png'); */
background-image: url('chrome-extension://__MSG_@@extension_id__/logo192.png');
src/index.js
+23
View File
@@ -27,11 +27,34 @@ switch (getPlayerSource()) {
document.body.classList.add('netflix');
break;
case PLAYER_SOURCE.HULU:
document.addEventListener(
'keydown',
(ev) => {
if (ev.target.tagName !== 'INPUT' || ev.target.tagName !== 'TEXTAREA') {
ev.stopImmediatePropagation();
ev.stopPropagation();
} else {
ev.target.focus();
}
},
{ capture: true }
);
document.body.classList.add('hulu');
break;
case PLAYER_SOURCE.AMAZON:
document.body.classList.add('amazon-prime');
break;
case PLAYER_SOURCE.LOCAL:
const VideoPlayer = document.createElement('video');
VideoPlayer.autoplay = true;
VideoPlayer.muted = true;
VideoPlayer.controls = true;
VideoPlayer.style.width = '300px';
VideoPlayer.src =
'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';
VideoPlayer.addEventListener('change', (e) => console.log(e));
document.body.appendChild(VideoPlayer);
break;
default:
break;
}