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

v1.6.2/cleanup

Browse Source 
- remove api v2
- linting
This commit is contained in:
ayushya
2020-08-14 10:57:38 -04:00
parent aaf2506f78
commit 56cd151a04
32 changed files with 476 additions and 1437 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/Chat.js
+113 -190
View File
@@ -10,7 +10,7 @@ CITED ARE THE SOLE INTELECTUAL PROPERTY OF AYUSHYA AMITABH, AND MAY NOT BE
COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
************************************************************************/
/*global chrome */
import React, { Component } from "react";
import React, { Component } from 'react';
import {
Typography,
TextField,
@@ -31,8 +31,8 @@ import {
Paper,
Grid,
Slider,
} from "@material-ui/core";
import Thread from "./Thread";
} from '@material-ui/core';
import Thread from './Thread';
import {
SendMessageApi,
LeaveRoomApi,
@@ -46,7 +46,7 @@ import {
UpdateAdminOnly,
scrollThread,
removeLocalData,
} from "./Api";
} from './Api';
import {
Send,
ExitToApp as Exit,
@@ -68,21 +68,21 @@ import {
VolumeDown,
VolumeUp,
CancelRounded,
} from "@material-ui/icons";
import Create from "./Create";
import { goTo } from "route-lite";
import CallManager from "./CallManager";
import VideoListener from "./VideoListener";
import ReactGiphySearchbox from "react-giphy-searchbox";
} from '@material-ui/icons';
import Create from './Create';
import { goTo } from 'route-lite';
import CallManager from './CallManager';
import VideoListener from './VideoListener';
import ReactGiphySearchbox from 'react-giphy-searchbox';
// const giphyFetch = new GiphyFetch('ojJbIMUN6XRMn4mHiFFav3rMCpXUg8sq');
export default class Chat extends Component {
constructor(props) {
super(props);
this.state = {
name: "",
name: '',
messages: [],
newMessage: "",
newMessage: '',
admin: null,
adminOnly: false,
adminModeUpdate: false,
@@ -94,14 +94,10 @@ export default class Chat extends Component {
callActionPending: false,
menuPopover: true,
allowChatNotification:
LocalData().allowChatNotification !== undefined
? LocalData().allowChatNotification
: true,
LocalData().allowChatNotification !== undefined ? LocalData().allowChatNotification : true,
isFullscreen: document.fullscreen,
allowAutoRejoin:
LocalData().allowAutoRejoin !== undefined
? LocalData().allowAutoRejoin
: true,
LocalData().allowAutoRejoin !== undefined ? LocalData().allowAutoRejoin : true,
replyTo: null,
sendingMessages: [],
volumes: {},
@@ -127,21 +123,15 @@ export default class Chat extends Component {
props.nameSelectors
);
this.updateAllowAutoRejoin = this.updateAllowAutoRejoin.bind(this);
this.updateAllowChatNotification = this.updateAllowChatNotification.bind(
this
);
this.mCallManager = new CallManager(
this.callEventListener,
this.props.notify
);
this.updateAllowChatNotification = this.updateAllowChatNotification.bind(this);
this.mCallManager = new CallManager(this.callEventListener, this.props.notify);
}
componentDidMount() {
// EVENT CAPTURE FOR ENTER TO SEND
window.onkeypress = (ev) => {
if (ev.code === "Enter") {
if (ev.target === document.getElementById("chat-message-box-input")) {
if (ev.shiftKey === false && this.state.gif === true)
ev.preventDefault();
if (ev.code === 'Enter') {
if (ev.target === document.getElementById('chat-message-box-input')) {
if (ev.shiftKey === false && this.state.gif === true) ev.preventDefault();
if (ev.shiftKey === false && this.state.gif === false) {
ev.preventDefault();
this.sendMessageInvoker();
@@ -151,15 +141,12 @@ export default class Chat extends Component {
};
// FULLSCREEN LISTENER
document.addEventListener("fullscreenchange", (ev) => {
document.addEventListener('fullscreenchange', (ev) => {
this.setState({ isFullscreen: document.fullscreen });
});
// ACTIVE TRACKER
if (
LocalData().allowAutoRejoin === undefined ||
LocalData().allowAutoRejoin === null
) {
if (LocalData().allowAutoRejoin === undefined || LocalData().allowAutoRejoin === null) {
updateLocalData({ allowAutoRejoin: this.state.allowAutoRejoin });
}
if (this.state.allowAutoRejoin === true) {
@@ -178,14 +165,14 @@ export default class Chat extends Component {
this.port = chrome.runtime.connect({ name: LocalData().partyName });
// Initialize listener
this.port.postMessage({
type: "INIT",
type: 'INIT',
roomId: LocalData().partyName,
roomPin: LocalData().partyPin,
});
// Listener
this.port.onMessage.addListener((response) => {
if (response.isError === true) {
this.props.notify("Uh oh. Got lost from the party.");
this.props.notify('Uh oh. Got lost from the party.');
goTo(Create, this.props);
return;
}
@@ -195,21 +182,13 @@ export default class Chat extends Component {
}
// IF CHAT IS HIDDEN AND ALLOWS NOTIFICATION
if (
!document.querySelector("body.visible") &&
this.state.allowChatNotification === true
) {
if (
response.messages &&
response.messages.length !== this.state.messages.length
) {
if (!document.querySelector('body.visible') && this.state.allowChatNotification === true) {
if (response.messages && response.messages.length !== this.state.messages.length) {
const lastMessage = response.messages[response.messages.length - 1];
if (lastMessage.uid !== "<system>") {
if (lastMessage.uid !== '<system>') {
this.props.notify(
`${lastMessage.name}${
lastMessage.type === "giphy"
? " sent a gif."
: ": " + lastMessage.text
lastMessage.type === 'giphy' ? ' sent a gif.' : ': ' + lastMessage.text
}`
);
}
@@ -225,7 +204,7 @@ export default class Chat extends Component {
// GIPHY IPC
const giphyInject = `var giphySearchInteraction=function(e){if(e.source===window){const{data}=e;if(data.watchPartyDirection==='TO_SCRIPT'){if(data.type==='WATCH_PARTY_SEARCH_GIF'){const giphyInput=document.querySelector('.giphy-search-form input');if(giphyInput){giphyInput.value=data.value;giphyInput.dispatchEvent(new Event('change',{bubbles:true}))}}}}};window.addEventListener("message",giphySearchInteraction);`;
const giphyInjectScript = document.createElement("script");
const giphyInjectScript = document.createElement('script');
giphyInjectScript.text = giphyInject;
document.head.appendChild(giphyInjectScript);
@@ -277,14 +256,14 @@ export default class Chat extends Component {
}).catch((err) => {
this.props.updateLoading(false);
this.props.notify(err.message || err.statusText);
console.error("Sync Party API error", err);
console.error('Sync Party API error', err);
});
} else {
this.mVideoListener.start();
}
}
endParty() {
this.props.notify("Ending party...");
this.props.notify('Ending party...');
this.props.updateLoading(true);
const data = {
partyName: LocalData().partyName,
@@ -298,20 +277,20 @@ export default class Chat extends Component {
);
DeleteRoomApi(data)
.then((res) => {
this.props.notify("Ended party");
removeLocalData("partyPin");
removeLocalData("partyName");
this.props.notify('Ended party');
removeLocalData('partyPin');
removeLocalData('partyName');
goTo(Create, this.props);
this.props.updateLoading(false);
})
.catch((err) => {
this.props.updateLoading(false);
this.props.notify(err.message || err.statusText);
console.error("End Party API error", err);
console.error('End Party API error', err);
});
}
leaveParty() {
this.props.notify("Leaving party...");
this.props.notify('Leaving party...');
this.props.updateLoading(true);
const data = {
partyName: LocalData().partyName,
@@ -326,30 +305,28 @@ export default class Chat extends Component {
);
LeaveRoomApi(data)
.then((res) => {
this.props.notify("Left party");
removeLocalData("partyPin");
removeLocalData("partyName");
this.props.notify('Left party');
removeLocalData('partyPin');
removeLocalData('partyName');
goTo(Create, this.props);
this.props.updateLoading(false);
})
.catch((err) => {
this.props.updateLoading(false);
this.props.notify(err.message || err.statusText);
console.error("End Party API error", err);
console.error('End Party API error', err);
});
}
shareParty() {
const el = document.createElement("textarea");
el.value = `Join my party on Watch Party!\nParty Name: ${
LocalData().partyName
}\nParty Pin: ${LocalData().partyPin}\n${
window.location.href
}\n---\nGet Watch Party at https:\\\\get.chromewatchparty.com`;
const el = document.createElement('textarea');
el.value = `Join my party on Watch Party!\nParty Name: ${LocalData().partyName}\nParty Pin: ${
LocalData().partyPin
}\n${window.location.href}\n---\nGet Watch Party at https:\\\\get.chromewatchparty.com`;
document.body.appendChild(el);
el.select();
document.execCommand("copy");
document.execCommand('copy');
document.body.removeChild(el);
this.props.notify("Copied party invitation");
this.props.notify('Copied party invitation');
}
sendMessage(message) {
const { sendingMessages } = this.state;
@@ -360,9 +337,9 @@ export default class Chat extends Component {
uid: LocalData().userUid,
text: message,
time: new Date(),
type: "",
type: '',
};
if (this.state.gif === true) data.type = "giphy";
if (this.state.gif === true) data.type = 'giphy';
if (this.state.replyTo !== null) data.replyTo = this.state.replyTo.id;
sendingMessages.push(data);
this.setState({
@@ -383,7 +360,7 @@ export default class Chat extends Component {
this.setState({ sendingMessages: sm });
scrollThread();
this.props.notify(err.message || err.statusText);
console.error("Send Message API error", err);
console.error('Send Message API error', err);
});
this.setState({ replyTo: null });
scrollThread();
@@ -391,10 +368,10 @@ export default class Chat extends Component {
sendMessageInvoker(overrideMessage) {
if (overrideMessage) this.sendMessage(overrideMessage);
else {
const trim = this.state.newMessage.replace(/^\s+|\s+$/g, "");
if (trim !== "") this.sendMessage(trim);
const trim = this.state.newMessage.replace(/^\s+|\s+$/g, '');
if (trim !== '') this.sendMessage(trim);
}
this.setState({ newMessage: "" });
this.setState({ newMessage: '' });
}
gifClick(iGif) {
this.sendMessageInvoker(iGif.images.original.url);
@@ -403,29 +380,29 @@ export default class Chat extends Component {
const { onCall, conference, admin, adminOnly } = this.state;
if (window.navigator && onCall === false) {
try {
const overlay = document.createElement("div");
const overlay = document.createElement('div');
overlay.innerHTML = `
<div id="mic-highlight"></div>
<h4 id="mic-text">Grant Mic Permission</h4>
`;
overlay.id = "mic-permission-overlay";
overlay.id = 'mic-permission-overlay';
document.body.appendChild(overlay);
window.navigator
.getUserMedia({
audio: true,
})
.then(() => {
document.getElementById("mic-permission-overlay").remove();
document.getElementById('mic-permission-overlay').remove();
this.mCallManager.toggleCall(onCall, conference, admin, adminOnly);
})
.catch(() => {
document.getElementById("mic-permission-overlay").remove();
document.getElementById('mic-permission-overlay').remove();
this.props.notify(
"Check your mic permission for this website. You can modify site permission by clicking on the lock icon in the top left."
'Check your mic permission for this website. You can modify site permission by clicking on the lock icon in the top left.'
);
});
} catch (err) {
console.error("Handle Phone Call Error", err);
console.error('Handle Phone Call Error', err);
}
} else this.mCallManager.toggleCall(onCall, conference, admin, adminOnly);
}
@@ -461,7 +438,7 @@ export default class Chat extends Component {
adminOnly: !this.state.adminOnly,
}).catch((err) => {
this.props.notify(err.message || err.statusText);
console.error("Update Admin Only API error", err);
console.error('Update Admin Only API error', err);
});
}
setReplyTo(message) {
@@ -473,7 +450,7 @@ export default class Chat extends Component {
getReplyToContent() {
const { replyTo } = this.state;
if (replyTo) {
if (replyTo.type === "giphy") {
if (replyTo.type === 'giphy') {
return <img alt="gif" src={replyTo.text} />;
}
return (
@@ -485,7 +462,7 @@ export default class Chat extends Component {
return null;
}
setVideoVolume(v, id) {
const audioOuts = document.querySelectorAll("audio.vxt-audio");
const audioOuts = document.querySelectorAll('audio.vxt-audio');
if (audioOuts.length > 0) {
audioOuts.forEach((el) => {
if (el.id === `audio-${id}`) {
@@ -522,23 +499,20 @@ export default class Chat extends Component {
const alerts = [
{
condition: () =>
getPlayerSource() === PLAYER_SOURCE.HBOMAX ||
getPlayerSource() === PLAYER_SOURCE.HBONOW,
message: "Functionality may be buggy, HBO has a horrible design.",
getPlayerSource() === PLAYER_SOURCE.HBOMAX || getPlayerSource() === PLAYER_SOURCE.HBONOW,
message: 'Functionality may be buggy, HBO has a horrible design.',
},
{
condition: () => getPlayerSource() === PLAYER_SOURCE.GOOGLEPLAY,
message:
"Functionality may be buggy, support on this site is in testing.",
message: 'Functionality may be buggy, support on this site is in testing.',
},
{
condition: () => getPlayerSource() === PLAYER_SOURCE.CRUNCHYROLL,
message:
"Functionality may be buggy, support on this site is in testing.",
message: 'Functionality may be buggy, support on this site is in testing.',
},
{
condition: () => adminOnly,
message: "Party is currently in admin only mode.",
message: 'Party is currently in admin only mode.',
},
];
return (
@@ -565,12 +539,7 @@ export default class Chat extends Component {
>
WATCH PARTY
</Typography>
<Typography
color="textPrimary"
className="room-title"
variant="h4"
gutterBottom
>
<Typography color="textPrimary" className="room-title" variant="h4" gutterBottom>
{name}
</Typography>
</div>
@@ -579,9 +548,9 @@ export default class Chat extends Component {
<TextField
className="share-textbox"
label="Party Details"
value={`Party Name: ${LocalData().partyName}\nParty Pin: ${
LocalData().partyPin
}\n${window.location.href}`}
value={`Party Name: ${LocalData().partyName}\nParty Pin: ${LocalData().partyPin}\n${
window.location.href
}`}
multiline
rowsMax={2}
variant="outlined"
@@ -608,19 +577,13 @@ export default class Chat extends Component {
color="secondary"
>
<Button onClick={this.leaveParty} startIcon={<Exit />}>
<Typography
variant="caption"
className="party-control-button-text"
>
<Typography variant="caption" className="party-control-button-text">
Leave
</Typography>
</Button>
{admin && (
<Button onClick={this.endParty} startIcon={<Delete />}>
<Typography
variant="caption"
className="party-control-button-text"
>
<Typography variant="caption" className="party-control-button-text">
End
</Typography>
</Button>
@@ -633,17 +596,15 @@ export default class Chat extends Component {
checked={allowChatNotification}
onChange={this.updateAllowChatNotification}
name="allowChatNotification"
color={allowChatNotification ? "secondary" : "primary"}
color={allowChatNotification ? 'secondary' : 'primary'}
/>
}
label={
<span>
Allow chat notification when side panel is closed
<br />
<span style={{ color: "#8a8a8a" }}>
{allowChatNotification
? "Notifications Enabled"
: "Notifications Disabled"}
<span style={{ color: '#8a8a8a' }}>
{allowChatNotification ? 'Notifications Enabled' : 'Notifications Disabled'}
</span>
</span>
}
@@ -656,17 +617,15 @@ export default class Chat extends Component {
checked={allowAutoRejoin}
onChange={this.updateAllowAutoRejoin}
name="allowAutoRejoin"
color={allowAutoRejoin ? "secondary" : "primary"}
color={allowAutoRejoin ? 'secondary' : 'primary'}
/>
}
label={
<span>
Allow Watch Party to auto rejoin (within 1 minute)
<br />
<span style={{ color: "#8a8a8a" }}>
{allowAutoRejoin
? "Auto Rejoin Enabled"
: "Auto Rejoin Disabled"}
<span style={{ color: '#8a8a8a' }}>
{allowAutoRejoin ? 'Auto Rejoin Enabled' : 'Auto Rejoin Disabled'}
</span>
</span>
}
@@ -680,7 +639,7 @@ export default class Chat extends Component {
checked={adminOnly}
onChange={this.updateAdminOnly}
name="adminOnly"
color={adminOnly ? "secondary" : "primary"}
color={adminOnly ? 'secondary' : 'primary'}
disabled={adminModeUpdate}
/>
}
@@ -688,53 +647,38 @@ export default class Chat extends Component {
<span>
Admin Only Mode
<br />
<span style={{ color: "#8a8a8a" }}>
<span style={{ color: '#8a8a8a' }}>
{adminOnly
? "Only admin can update player and start calls right now"
: "All party members can update player and start calls right now"}
? 'Only admin can update player and start calls right now'
: 'All party members can update player and start calls right now'}
</span>
</span>
}
labelPlacement="end"
/>
) : null}
<Typography
className="party-controls-users-title"
variant="overline"
>
<Typography className="party-controls-users-title" variant="overline">
PARTY MEMBERS
</Typography>
<div className="party-controls-users-container">
{users.map((user) => (
<Chip
className="party-controls-users-chip"
clickable
size="small"
label={user}
/>
<Chip className="party-controls-users-chip" clickable size="small" label={user} />
))}
</div>
{Object.keys(usersOnCall).length > 0 ? (
<Typography
className="party-controls-users-title"
variant="overline"
>
<Typography className="party-controls-users-title" variant="overline">
MEMBERS IN CALL
</Typography>
) : null}
{Object.keys(usersOnCall).length > 0 ? (
<div className="party-controls-users-container">
{Object.keys(usersOnCall).map((id) => {
return usersOnCall[id].status === "Connected" ||
usersOnCall[id].status === "Connecting" ? (
return usersOnCall[id].status === 'Connected' ||
usersOnCall[id].status === 'Connecting' ? (
<Tooltip
interactive
title={
<Grid
className="party-controls-users-volume"
container
spacing={2}
>
<Grid className="party-controls-users-volume" container spacing={2}>
<Grid item>
<VolumeDown />
</Grid>
@@ -745,9 +689,7 @@ export default class Chat extends Component {
step={1}
color="secondary"
value={volumes[id] || 10}
onChangeCommitted={(e, v) =>
this.setVideoVolume(v, id)
}
onChangeCommitted={(e, v) => this.setVideoVolume(v, id)}
/>
</Grid>
<Grid item>
@@ -758,15 +700,14 @@ export default class Chat extends Component {
>
<Chip
color={
usersOnCall[id].info.externalId ===
LocalData().userUid
? "secondary"
: "default"
usersOnCall[id].info.externalId === LocalData().userUid
? 'secondary'
: 'default'
}
className="party-controls-users-chip"
clickable
size="small"
label={usersOnCall[id].info.name || " "}
label={usersOnCall[id].info.name || ' '}
/>
</Tooltip>
) : null;
@@ -777,8 +718,7 @@ export default class Chat extends Component {
</ExpansionPanel>
{player ? (
<Card elevation={0} className="media-info-card">
{player.showName &&
player.status !== PLAYER_STATUS.NOT_PLAYING ? (
{player.showName && player.status !== PLAYER_STATUS.NOT_PLAYING ? (
<CardContent>
<Typography className="media-info-at" variant="overline">
{player.status === PLAYER_STATUS.PAUSED
@@ -803,17 +743,13 @@ export default class Chat extends Component {
) : (
<CardContent>
<Typography className="media-info-at" variant="caption">
Nothing playing right now, pause or play once after starting
a show to start sync.
Nothing playing right now, pause or play once after starting a show to start
sync.
</Typography>
</CardContent>
)}
{player && player.showName && player.status ? (
<Button
className="media-info-link"
href={player.url}
startIcon={<LinkOutlined />}
>
<Button className="media-info-link" href={player.url} startIcon={<LinkOutlined />}>
Link to currently playing
</Button>
) : null}
@@ -844,9 +780,7 @@ export default class Chat extends Component {
<Paper
square
variant="outlined"
className={`replying-to-card ${
replyTo !== null ? "replying-to-card-up" : ""
}`}
className={`replying-to-card ${replyTo !== null ? 'replying-to-card-up' : ''}`}
>
<div className="replying-to-content">
<Typography variant="overline" display="block" gutterBottom>
@@ -860,15 +794,8 @@ export default class Chat extends Component {
</Paper>
<div className="text-phone-panel">
{gif || newMessage ? null : (
<Tooltip
title="Fullscreen with Watch Party"
aria-label="Fullscreen"
>
<IconButton
className="icon-button"
color="secondary"
onClick={this.toggleFullscreen}
>
<Tooltip title="Fullscreen with Watch Party" aria-label="Fullscreen">
<IconButton className="icon-button" color="secondary" onClick={this.toggleFullscreen}>
{isFullscreen ? <FullscreenExit /> : <Fullscreen />}
</IconButton>
</Tooltip>
@@ -879,7 +806,7 @@ export default class Chat extends Component {
<IconButton
disabled={callActionPending}
onClick={this.handlePhoneCall}
color={!onCall ? "secondary" : "primary"}
color={!onCall ? 'secondary' : 'primary'}
className="icon-button"
>
{onCall ? (
@@ -921,14 +848,12 @@ export default class Chat extends Component {
multiline
rowsMax="3"
size="small"
placeholder={
this.state.gif ? "Search something..." : "Say something..."
}
placeholder={this.state.gif ? 'Search something...' : 'Say something...'}
helperText={
this.state.newMessage && !this.state.gif
? "Enter to send / Shift+Enter for new line"
? 'Enter to send / Shift+Enter for new line'
: this.state.gif
? "Click on gif to send / Scroll to load more"
? 'Click on gif to send / Scroll to load more'
: null
}
variant="outlined"
@@ -939,19 +864,19 @@ export default class Chat extends Component {
scrollThread();
if (gif) {
window.postMessage({
watchPartyDirection: "TO_SCRIPT",
type: "WATCH_PARTY_SEARCH_GIF",
watchPartyDirection: 'TO_SCRIPT',
type: 'WATCH_PARTY_SEARCH_GIF',
value: e.target.value,
});
}
}}
InputProps={{
id: "chat-message-box-input",
id: 'chat-message-box-input',
endAdornment: (
<InputAdornment position="end">
<IconButton
className={`${this.state.gif ? "gif-active" : ""} ${
this.state.newMessage ? "message-active" : ""
className={`${this.state.gif ? 'gif-active' : ''} ${
this.state.newMessage ? 'message-active' : ''
} message-send`}
size="small"
onClick={() => this.sendMessageInvoker(newMessage)}
@@ -964,15 +889,13 @@ export default class Chat extends Component {
startAdornment: (
<InputAdornment position="start">
<IconButton
className={`gif-button ${
this.state.gif ? "gif-close" : ""
}`}
className={`gif-button ${this.state.gif ? 'gif-close' : ''}`}
onClick={() => {
this.setState({ gif: !gif });
if (!gif) {
window.postMessage({
watchPartyDirection: "TO_SCRIPT",
type: "WATCH_PARTY_SEARCH_GIF",
watchPartyDirection: 'TO_SCRIPT',
type: 'WATCH_PARTY_SEARCH_GIF',
value: newMessage,
});
scrollThread();
@@ -990,9 +913,9 @@ export default class Chat extends Component {
<ReactGiphySearchbox
apiKey="ojJbIMUN6XRMn4mHiFFav3rMCpXUg8sq"
onSelect={this.gifClick}
masonryConfig={[{ columns: 2, imageWidth: "50%", gutter: 5 }]}
masonryConfig={[{ columns: 2, imageWidth: '50%', gutter: 5 }]}
searchFormClassName="giphy-search-form"
wrapperClassName={`giphy-wrapper ${gif ? "" : "giphy-wrapper-down"}`}
wrapperClassName={`giphy-wrapper ${gif ? '' : 'giphy-wrapper-down'}`}
listWrapperClassName="giphy-list-wrapper"
listItemClassName="giphy-list-item"
poweredByGiphy