diff --git a/app/src/Api.js b/app/src/Api.js index f7894f3..d33b65b 100644 --- a/app/src/Api.js +++ b/app/src/Api.js @@ -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', + }); +} diff --git a/app/src/Chat.js b/app/src/Chat.js index f442d4c..77c7e6a 100644 --- a/app/src/Chat.js +++ b/app/src/Chat.js @@ -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 (
@@ -497,6 +524,31 @@ export default class Chat extends Component { } labelPlacement="end" /> + { + admin ? + + } + label={ + + Admin Only Mode (can be changed later) +
+ + {adminOnly ? 'Only admin can update player right now' : 'All party members can update player right now'} + + + } + labelPlacement="end" + /> : null + } PARTY MEMBERS diff --git a/app/src/Create.js b/app/src/Create.js index 489da53..0358268 100644 --- a/app/src/Create.js +++ b/app/src/Create.js @@ -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 (
this.partyNameAutocompleteProcessor(v)} + onInputChange={(e, v, r) => this.partyNameAutocompleteProcessor(v)} onChange={(e, v) => this.partyNameAutocompleteProcessor(v)} - renderInput={(params) => + renderInput={(params) => } + />} /> this.partyPinChange(e.target.value)} helperText={pin ? `${pin.length}/${CONSTANTS.PIN_LENGTH} Digits` : null} /> + { + mode === 'create' ? + this.setState({ adminOnly: !adminOnly })} + name="adminOnly" + color={adminOnly ? 'secondary' : 'primary'} + /> + } + label={ + + Admin Only Mode (can be changed later) +
+ + {adminOnly ? 'Only admin will update currently playing' : 'All members will update currently playing'} + + + } + labelPlacement="end" + /> : null + }