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

v1.6.0/admin only mode

Browse Source
This commit is contained in:
ayushya
2020-08-01 13:53:58 -04:00
parent 8d8cf6d276
commit 9c600f383d
15 changed files with 197 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/Api.js
+8 -1
View File
@@ -18,7 +18,7 @@ HBO Now and HBO Max logos are trademark and intellectual property of WarnerMedia
************************************************************************/
/*global chrome*/
const API_HOST = 'https://us-central1-watch-party-crx.cloudfunctions.net/widgets2';
const API_HOST = 'https://us-central1-watch-party-crx.cloudfunctions.net/widgets';
export const PLAYER_STATUS = {
PLAYING: 'PLAYING',
@@ -170,3 +170,10 @@ export const UpdateVoxeetApi = async (data) => {
body: JSON.stringify(data),
});
};
export const UpdateAdminOnly = async (data) => {
return fetcher({
endpoint: `updateAdminOnly/${data.partyName}/${data.adminOnly}`,
method: 'PUT',
});
}
app/src/Chat.js
+65 -13
View File
@@ -50,6 +50,7 @@ import {
PLAYER_STATUS,
emptyLocalData,
updateLocalData,
UpdateAdminOnly,
} from './Api';
import {
Send,
@@ -76,17 +77,6 @@ import CallManager from './CallManager';
import VideoListener from './VideoListener';
const giphyFetch = new GiphyFetch('ojJbIMUN6XRMn4mHiFFav3rMCpXUg8sq');
const alerts = [
{
condition: () =>
getPlayerSource() === PLAYER_SOURCE.HBOMAX || getPlayerSource() === PLAYER_SOURCE.HBONOW,
message: 'Functionality may be buggy, HBO has a horrible design.',
},
{
condition: () => getPlayerSource() === PLAYER_SOURCE.PEACOCK,
message: 'Functionality may be buggy, support on this site is in testing.',
},
];
export default class Chat extends Component {
constructor(props) {
super(props);
@@ -95,6 +85,8 @@ export default class Chat extends Component {
messages: [],
newMessage: '',
admin: null,
adminOnly: false,
adminModeUpdate: false,
users: [],
usersOnCall: {},
gif: false,
@@ -125,6 +117,7 @@ export default class Chat extends Component {
this.updateAllowAutoRejoin = this.updateAllowAutoRejoin.bind(this);
this.updateAllowChatNotification = this.updateAllowChatNotification.bind(this);
this.mCallManager = new CallManager(this.callEventListener, this.props.notify);
this.updateAdminOnly = this.updateAdminOnly.bind(this);
}
componentDidMount() {
// EVENT CAPTURE FOR ENTER TO SEND
@@ -186,6 +179,10 @@ export default class Chat extends Component {
this.props.notify(notificationMessage);
}
}
// ADMIN MODE UPDATE COMPLETE
if (response.adminOnly !== this.state.adminOnly) {
this.setState({ adminModeUpdate: false });
}
this.setState(response);
if (response.player) this.mVideoListener.doUpdate(response.player);
const pcc = document.querySelector('.thread-container');
@@ -200,7 +197,10 @@ export default class Chat extends Component {
this.leaveParty();
}
videoEventListener(video) {
this.syncPlayer(video);
const { adminOnly, admin } = this.state;
if (!adminOnly || (adminOnly && admin)) {
this.syncPlayer(video);
}
}
callEventListener(event) {
this.setState(event);
@@ -337,7 +337,7 @@ export default class Chat extends Component {
);
});
} catch (err) {
console.log(err);
console.error('Handle Phone Call Error', err);
}
} else this.mCallManager.toggleCall(onCall, conference, admin);
}
@@ -364,6 +364,16 @@ export default class Chat extends Component {
document.documentElement.requestFullscreen();
}
}
updateAdminOnly() {
this.setState({ adminModeUpdate: true });
UpdateAdminOnly({
partyName: this.state.name,
adminOnly: !this.state.adminOnly,
}).catch((err) => {
this.props.notify(err.message || err.statusText);
console.error('Update Admin Only API error', err);
});
}
render() {
const {
admin,
@@ -380,7 +390,24 @@ export default class Chat extends Component {
allowAutoRejoin,
usersOnCall,
isFullscreen,
adminModeUpdate,
adminOnly,
} = this.state;
const alerts = [
{
condition: () =>
getPlayerSource() === PLAYER_SOURCE.HBOMAX || getPlayerSource() === PLAYER_SOURCE.HBONOW,
message: 'Functionality may be buggy, HBO has a horrible design.',
},
{
condition: () => getPlayerSource() === PLAYER_SOURCE.PEACOCK,
message: 'Functionality may be buggy, support on this site is in testing.',
},
{
condition: () => adminOnly,
message: 'Party is currently in admin only mode.'
}
];
return (
<div className="party-chat-container">
<div className="party-chat-header">
@@ -497,6 +524,31 @@ export default class Chat extends Component {
}
labelPlacement="end"
/>
{
admin ?
<FormControlLabel
className="notification-switch"
control={
<Switch
checked={adminOnly}
onChange={this.updateAdminOnly}
name="adminOnly"
color={adminOnly ? 'secondary' : 'primary'}
disabled={adminModeUpdate}
/>
}
label={
<span>
Admin Only Mode (can be changed later)
<br />
<span style={{ color: '#8a8a8a' }}>
{adminOnly ? 'Only admin can update player right now' : 'All party members can update player right now'}
</span>
</span>
}
labelPlacement="end"
/> : null
}
<Typography className="party-controls-users-title" variant="overline">
PARTY MEMBERS
</Typography>
app/src/Create.js
+38 -12
View File
@@ -18,7 +18,7 @@ HBO Now and HBO Max logos are trademark and intellectual property of WarnerMedia
************************************************************************/
/*global chrome */
import React, { Component } from 'react';
import { Button, TextField, Typography, Paper, ButtonGroup } from '@material-ui/core';
import { Button, FormControlLabel, Switch, TextField, Typography, Paper, ButtonGroup } from '@material-ui/core';
import {
JoinRoomApi,
CreateRoomApi,
@@ -52,7 +52,8 @@ export default class Create extends Component {
name: '',
pin: '',
mode: defaultMode,
parties: []
parties: [],
adminOnly: false,
};
this.createCall = this.createCall.bind(this);
this.joinCall = this.joinCall.bind(this);
@@ -72,7 +73,7 @@ export default class Create extends Component {
type: 'GET_PARTIES'
},
(response) => {
this.setState({parties: response});
this.setState({ parties: response });
}
);
}
@@ -133,6 +134,7 @@ export default class Create extends Component {
time: 0,
url: window.location.href,
},
adminOnly: this.state.adminOnly,
};
CreateRoomApi(apidata)
.then((res) => res.json())
@@ -179,21 +181,21 @@ export default class Create extends Component {
this.props.updateLoading(false);
goTo(Chat, this.props);
}
partyNameAutocompleteProcessor (v) {
if (v !== null && v !== undefined && typeof(v) === 'object') {
partyNameAutocompleteProcessor(v) {
if (v !== null && v !== undefined && typeof (v) === 'object') {
if (v.name) this.partyNameChange(v.name);
else this.partyNameChange('');
if (v.pin) this.partyPinChange(v.pin);
else this.partyPinChange('');
} else if (typeof(v) === 'object' && (v === null || v === undefined)) {
} else if (typeof (v) === 'object' && (v === null || v === undefined)) {
this.partyNameChange('');
this.partyPinChange('');
} else if (v !== undefined && v !== null && typeof(v) === 'string') {
} else if (v !== undefined && v !== null && typeof (v) === 'string') {
this.partyNameChange(v);
}
}
}
render() {
const { mode, name, pin, userName, parties } = this.state;
const { mode, name, pin, userName, parties, adminOnly } = this.state;
return (
<div className="party-create-container">
<Typography
@@ -245,9 +247,9 @@ export default class Create extends Component {
autoComplete
freeSolo
inputValue={name}
onInputChange={(e,v,r) => this.partyNameAutocompleteProcessor(v)}
onInputChange={(e, v, r) => this.partyNameAutocompleteProcessor(v)}
onChange={(e, v) => this.partyNameAutocompleteProcessor(v)}
renderInput={(params) =>
renderInput={(params) =>
<TextField
color="secondary"
size="small"
@@ -256,7 +258,7 @@ export default class Create extends Component {
label="Party Name"
variant="outlined"
helperText={name ? `${name.length}/${CONSTANTS.NAME_LENGTH} Characters` : null}
/>}
/>}
/>
<TextField
color="secondary"
@@ -269,6 +271,30 @@ export default class Create extends Component {
onChange={(e) => this.partyPinChange(e.target.value)}
helperText={pin ? `${pin.length}/${CONSTANTS.PIN_LENGTH} Digits` : null}
/>
{
mode === 'create' ?
<FormControlLabel
className="notification-switch admin-only-switch"
control={
<Switch
checked={adminOnly}
onChange={() => this.setState({ adminOnly: !adminOnly })}
name="adminOnly"
color={adminOnly ? 'secondary' : 'primary'}
/>
}
label={
<span>
Admin Only Mode (can be changed later)
<br />
<span style={{ color: '#8a8a8a' }}>
{adminOnly ? 'Only admin will update currently playing' : 'All members will update currently playing'}
</span>
</span>
}
labelPlacement="end"
/> : null
}
<Button
size="small"
variant="contained"
app/src/index.css
+4
View File
@@ -614,4 +614,8 @@ body.amazon-prime .notification-switch .MuiSwitch-thumb {
.MuiAutocomplete-popper {
z-index: 99999 !important;
}
.admin-only-switch {
margin-bottom: 20px !important;
}