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

v1.7.8/release

Browse Source 
- Video Listener Optimizations
- Auto Leave Fix
- Edge support
- Admin Dashboard Update
- Vimeo & Dailymotion
This commit is contained in:
ayushya
2020-11-16 23:06:44 -05:00
parent cfe42bd4aa
commit 16a11f7163
66 changed files with 2559 additions and 1114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/Create.js
+159 -83
View File
@@ -10,7 +10,7 @@ CITED ARE THE SOLE INTELLECTUAL 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 {
Button,
FormControlLabel,
@@ -27,7 +27,7 @@ import {
Card,
CardContent,
CardActions,
} from '@material-ui/core';
} from "@material-ui/core";
import {
JoinRoomApi,
CreateRoomApi,
@@ -38,9 +38,9 @@ import {
getUserUid,
emptyLocalData,
setTutorialStatus,
} from './Api';
import { goTo } from 'route-lite';
import Chat from './Chat';
} from "./Api";
import { goTo } from "route-lite";
import Chat from "./Chat";
import {
ChevronRight,
InfoRounded,
@@ -51,8 +51,8 @@ import {
KeyboardArrowLeft,
KeyboardArrowRight,
Notifications,
} from '@material-ui/icons';
import { Autocomplete } from '@material-ui/lab';
} from "@material-ui/icons";
import { Autocomplete } from "@material-ui/lab";
const CONSTANTS = {
USER_NAME_LENGTH: 12,
@@ -62,37 +62,52 @@ const CONSTANTS = {
export default class Create extends Component {
constructor(props) {
super(props);
const defaultMode = LocalData().partyName ? 'join' : 'create';
const defaultMode = LocalData().partyName ? "join" : "create";
this.state = {
userName: LocalData().userName || '',
name: LocalData().partyName || '',
pin: LocalData().partyPin || '',
userName: LocalData().userName || "",
name: LocalData().partyName || "",
pin: LocalData().partyPin || "",
mode: defaultMode,
parties: [],
adminOnly: false,
publicParty: false,
alertStep:
this.props.status && this.props.status.importantAlert
? this.props.status.importantAlert
: 0,
allowAutoRejoin:
LocalData().allowAutoRejoin !== undefined ? LocalData().allowAutoRejoin : true,
LocalData().allowAutoRejoin !== undefined
? LocalData().allowAutoRejoin
: true,
allowChatNotification:
LocalData().allowChatNotification !== undefined ? LocalData().allowChatNotification : true,
LocalData().allowChatNotification !== undefined
? LocalData().allowChatNotification
: true,
allowAutoFollow: LocalData().allowAutoFollow || false,
expanded: 'alerts',
expanded: "alerts",
};
this.createCall = this.createCall.bind(this);
this.joinCall = this.joinCall.bind(this);
this.success = this.success.bind(this);
this.partyNameAutocompleteProcessor = this.partyNameAutocompleteProcessor.bind(this);
this.partyNameAutocompleteProcessor = this.partyNameAutocompleteProcessor.bind(
this
);
this.updateAllowAutoRejoin = this.updateAllowAutoRejoin.bind(this);
this.updateAllowAutoFollow = this.updateAllowAutoFollow.bind(this);
this.updateAllowChatNotification = this.updateAllowChatNotification.bind(this);
this.updateAllowChatNotification = this.updateAllowChatNotification.bind(
this
);
this.clearPartyHistory = this.clearPartyHistory.bind(this);
this.handleSteps = this.handleSteps.bind(this);
}
componentDidMount() {
const { lastActive, userName, partyName, partyPin, allowAutoRejoin } = LocalData();
const {
lastActive,
userName,
partyName,
partyPin,
allowAutoRejoin,
} = LocalData();
// CONTINUE TUTORIAL
if (this.props.tutorialComplete === false) {
this.props.resetTutorial();
@@ -105,7 +120,9 @@ export default class Create extends Component {
partyName &&
partyPin
) {
if (Math.abs(new Date(parseInt(lastActive)) - new Date().getTime()) <= 60000) {
if (
Math.abs(new Date(parseInt(lastActive)) - new Date().getTime()) <= 60000
) {
this.props.updateLoading(true);
this.props.setVisible(true);
this.joinCall(userName, partyName, partyPin);
@@ -113,7 +130,7 @@ export default class Create extends Component {
}
chrome.runtime.sendMessage(
{
type: 'GET_PARTIES',
type: "GET_PARTIES",
},
(response) => {
this.setState({ parties: response });
@@ -127,33 +144,34 @@ export default class Create extends Component {
if (value.length <= CONSTANTS.PIN_LENGTH) this.setState({ pin: value });
}
userNameChange(value) {
if (value.length <= CONSTANTS.USER_NAME_LENGTH) this.setState({ userName: value });
if (value.length <= CONSTANTS.USER_NAME_LENGTH)
this.setState({ userName: value });
}
createOrJoin() {
this.props.updateLoading(true);
getUserUid();
const { userName, name, pin, mode } = this.state;
if (!userName.replace(/\s+/g, '')) {
this.props.notify('Missing user name');
if (!userName.replace(/\s+/g, "")) {
this.props.notify("Missing user name");
this.props.updateLoading(false);
return;
}
if (!name.replace(/\s+/g, '')) {
this.props.notify('Missing party name');
if (!name.replace(/\s+/g, "")) {
this.props.notify("Missing party name");
this.props.updateLoading(false);
return;
}
if (!pin.replace(/\s+/g, '')) {
this.props.notify('Missing party pin');
if (!pin.replace(/\s+/g, "")) {
this.props.notify("Missing party pin");
this.props.updateLoading(false);
return;
}
if (userName && name && pin) {
switch (mode) {
case 'create':
case "create":
this.createCall(userName.trim(), name.trim(), pin);
break;
case 'join':
case "join":
this.joinCall(userName.trim(), name.trim(), pin);
break;
default:
@@ -161,7 +179,7 @@ export default class Create extends Component {
break;
}
} else {
this.props.notify('Double check your inputs');
this.props.notify("Double check your inputs");
}
}
createCall(userName, partyName, partyPin) {
@@ -177,7 +195,8 @@ export default class Create extends Component {
time: 0,
url: window.location.href,
},
adminOnly: this.state.adminOnly,
adminOnly: this.state.adminOnly || this.state.publicParty,
publicParty: this.state.publicParty,
};
CreateRoomApi(apidata)
.then((res) => res.json())
@@ -190,8 +209,8 @@ export default class Create extends Component {
}
})
.catch((err) => {
console.error('Create Party API Error', err);
this.props.notify(err.message || 'Something went wrong');
console.error("Create Party API Error", err);
this.props.notify(err.message || "Something went wrong");
this.props.updateLoading(false);
});
}
@@ -215,8 +234,8 @@ export default class Create extends Component {
})
.catch((err) => {
emptyLocalData();
console.error('Join Party API Error', err);
this.props.notify(err.message || 'Something went wrong');
console.error("Join Party API Error", err);
this.props.notify(err.message || "Something went wrong");
this.props.updateLoading(false);
});
}
@@ -226,20 +245,22 @@ export default class Create extends Component {
goTo(Chat, this.props);
}
partyNameAutocompleteProcessor(v) {
if (v !== null && v !== undefined && typeof v === 'object') {
if (v !== null && v !== undefined && typeof v === "object") {
if (v.name) this.partyNameChange(v.name);
else this.partyNameChange('');
else this.partyNameChange("");
if (v.pin) this.partyPinChange(v.pin);
else this.partyPinChange('');
} else if (typeof v === 'object' && (v === null || v === undefined)) {
this.partyNameChange('');
this.partyPinChange('');
} else if (v !== undefined && v !== null && typeof v === 'string') {
else this.partyPinChange("");
} else if (typeof v === "object" && (v === null || v === undefined)) {
this.partyNameChange("");
this.partyPinChange("");
} else if (v !== undefined && v !== null && typeof v === "string") {
this.partyNameChange(v);
}
}
updateAllowChatNotification() {
updateLocalData({ allowChatNotification: !this.state.allowChatNotification });
updateLocalData({
allowChatNotification: !this.state.allowChatNotification,
});
this.setState({ allowChatNotification: !this.state.allowChatNotification });
}
updateAllowAutoRejoin() {
@@ -254,7 +275,7 @@ export default class Create extends Component {
this.setState({
parties: [],
});
chrome.runtime.sendMessage({ type: 'EMPTY_PARTIES' });
chrome.runtime.sendMessage({ type: "EMPTY_PARTIES" });
}
handleSteps(direction) {
const { alertStep } = this.state;
@@ -264,7 +285,7 @@ export default class Create extends Component {
}
handleExpanders(e) {
const { expanded } = this.state;
if (e === expanded) this.setState({ expanded: '' });
if (e === expanded) this.setState({ expanded: "" });
else this.setState({ expanded: e });
}
render() {
@@ -275,6 +296,7 @@ export default class Create extends Component {
userName,
parties,
adminOnly,
publicParty,
allowAutoRejoin,
allowAutoFollow,
allowChatNotification,
@@ -297,19 +319,19 @@ export default class Create extends Component {
<ButtonGroup className="create-mode-select" size="small" fullWidth>
<Button
id="mode-select-left"
variant={mode === 'create' ? 'contained' : null}
color={mode === 'create' ? 'secondary' : null}
disableElevation={mode === 'create'}
onClick={() => this.setState({ mode: 'create' })}
variant={mode === "create" ? "contained" : null}
color={mode === "create" ? "secondary" : null}
disableElevation={mode === "create"}
onClick={() => this.setState({ mode: "create" })}
>
Create
</Button>
<Button
id="mode-select-right"
variant={mode === 'join' ? 'contained' : null}
color={mode === 'join' ? 'secondary' : null}
disableElevation={mode === 'join'}
onClick={() => this.setState({ mode: 'join' })}
variant={mode === "join" ? "contained" : null}
color={mode === "join" ? "secondary" : null}
disableElevation={mode === "join"}
onClick={() => this.setState({ mode: "join" })}
>
Join
</Button>
@@ -323,7 +345,9 @@ export default class Create extends Component {
value={userName}
onChange={(e) => this.userNameChange(e.target.value)}
helperText={
userName ? `${userName.length}/${CONSTANTS.USER_NAME_LENGTH} Characters` : null
userName
? `${userName.length}/${CONSTANTS.USER_NAME_LENGTH} Characters`
: null
}
/>
<Autocomplete
@@ -333,7 +357,9 @@ export default class Create extends Component {
autoComplete
freeSolo
value={{ name: name, pin: pin }}
onInputChange={(e, v, r) => this.partyNameAutocompleteProcessor({ name: v, pin: pin })}
onInputChange={(e, v, r) =>
this.partyNameAutocompleteProcessor({ name: v, pin: pin })
}
onChange={(e, v) => this.partyNameAutocompleteProcessor(v)}
renderInput={(params) => (
<TextField
@@ -343,7 +369,11 @@ export default class Create extends Component {
className="create-name addFocus"
label="Party Name"
variant="outlined"
helperText={name ? `${name.length}/${CONSTANTS.NAME_LENGTH} Characters` : null}
helperText={
name
? `${name.length}/${CONSTANTS.NAME_LENGTH} Characters`
: null
}
/>
)}
/>
@@ -356,48 +386,76 @@ export default class Create extends Component {
type="number"
value={pin}
onChange={(e) => this.partyPinChange(e.target.value)}
helperText={pin ? `${pin.length}/${CONSTANTS.PIN_LENGTH} Digits` : null}
helperText={
pin ? `${pin.length}/${CONSTANTS.PIN_LENGTH} Digits` : null
}
/>
<FormControlLabel
className={`notification-switch admin-only-switch ${
mode !== 'create' ? 'admin-only-switch-hidden' : ''
mode !== "create" ? "admin-only-switch-hidden" : ""
}`}
control={
<Switch
checked={adminOnly}
checked={adminOnly || publicParty}
onChange={() => this.setState({ adminOnly: !adminOnly })}
name="adminOnly"
color={adminOnly ? 'secondary' : 'primary'}
color={adminOnly || publicParty ? "secondary" : "primary"}
/>
}
label={
<span>
Admin Only Mode (can be changed later)
<br />
<span style={{ color: '#8a8a8a' }}>
{adminOnly
? 'Only admin will update currently playing and start calls'
: 'All members will update currently playing and start calls'}
<span style={{ color: "#8a8a8a" }}>
{adminOnly || publicParty
? "Only admin will update currently playing and start calls"
: "All members will update currently playing and start calls"}
</span>
</span>
}
labelPlacement="end"
/>
{/* <FormControlLabel
className={`notification-switch admin-only-switch ${
mode !== "create" ? "admin-only-switch-hidden" : ""
}`}
control={
<Switch
checked={publicParty}
onChange={() => this.setState({ publicParty: !publicParty })}
name="publicParty"
color={publicParty ? "secondary" : "primary"}
/>
}
label={
<span>
Public Party (can be changed later)
<br />
<span style={{ color: "#8a8a8a" }}>
{publicParty
? "Party will be listed and available to join from Watch Party website"
: "Only people you share with can join"}
</span>
</span>
}
labelPlacement="end"
/> */}
<Button
size="small"
variant="contained"
color="secondary"
onClick={() => this.createOrJoin()}
>
<span>{mode === 'create' ? 'Start Party' : 'Join Party'}</span> <ChevronRight />
<span>{mode === "create" ? "Start Party" : "Join Party"}</span>{" "}
<ChevronRight />
</Button>
</Paper>
<ExpansionPanel
expanded={expanded === 'alerts'}
expanded={expanded === "alerts"}
className="create-settings-card create-alerts-card"
>
<ExpansionPanelSummary
onClick={() => this.handleExpanders('alerts')}
onClick={() => this.handleExpanders("alerts")}
expandIcon={<ExpandLess />}
>
<Notifications />
@@ -410,20 +468,29 @@ export default class Create extends Component {
<div className="alerts-stepper-container">
<Card className="alerts-stepper-card" elevation={10}>
<CardContent>
<Typography color="textSecondary" gutterBottom variant="overline">
<Typography
color="textSecondary"
gutterBottom
variant="overline"
>
{status.alerts[alertStep].title}
</Typography>
<Typography variant="body2" component="p">
{status.alerts[alertStep].description}
</Typography>
</CardContent>
{status.alerts[alertStep].link && status.alerts[alertStep].linkText && (
<CardActions>
<Button href={status.alerts[alertStep].link} target="_blank" size="small">
{status.alerts[alertStep].linkText}
</Button>
</CardActions>
)}
{status.alerts[alertStep].link &&
status.alerts[alertStep].linkText && (
<CardActions>
<Button
href={status.alerts[alertStep].link}
target="_blank"
size="small"
>
{status.alerts[alertStep].linkText}
</Button>
</CardActions>
)}
</Card>
<MobileStepper
className="alerts-stepper-controls"
@@ -431,7 +498,10 @@ export default class Create extends Component {
color="secondary"
activeStep={alertStep}
backButton={
<IconButton disabled={alertStep === 0} onClick={() => this.handleSteps(-1)}>
<IconButton
disabled={alertStep === 0}
onClick={() => this.handleSteps(-1)}
>
<KeyboardArrowLeft />
</IconButton>
}
@@ -454,11 +524,11 @@ export default class Create extends Component {
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel
expanded={expanded === 'settings'}
expanded={expanded === "settings"}
className="create-settings-card create-settings-expander"
>
<ExpansionPanelSummary
onClick={() => this.handleExpanders('settings')}
onClick={() => this.handleExpanders("settings")}
expandIcon={<ExpandLess />}
>
<Settings />
@@ -480,8 +550,10 @@ export default class Create extends Component {
<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>
}
@@ -500,8 +572,10 @@ export default class Create extends Component {
<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>
}
@@ -520,8 +594,10 @@ export default class Create extends Component {
<span>
Allow Watch Party to change to the currently playing show
<br />
<span style={{ color: '#8a8a8a' }}>
{allowAutoFollow ? 'Auto Follow Enabled' : 'Auto Follow Disabled'}
<span style={{ color: "#8a8a8a" }}>
{allowAutoFollow
? "Auto Follow Enabled"
: "Auto Follow Disabled"}
</span>
</span>
}