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

v1.6.0/brand new chat ui

Browse Source
This commit is contained in:
ayushya
2020-08-03 18:05:08 -04:00
parent 3e7494aef4
commit 9d0cb56cda
6 changed files with 1486 additions and 436 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/Chat.js
+69 -14
View File
@@ -35,6 +35,7 @@ import {
FormControlLabel,
Chip,
CircularProgress,
Paper,
} from '@material-ui/core';
import Thread from './Thread';
import { Carousel } from '@giphy/react-components';
@@ -70,6 +71,7 @@ import {
Error,
FullscreenExit,
Fullscreen,
CancelRounded,
} from '@material-ui/icons';
import Create from './Create';
import { goTo } from 'route-lite';
@@ -99,6 +101,7 @@ export default class Chat extends Component {
isFullscreen: document.fullscreen,
allowAutoRejoin:
LocalData().allowAutoRejoin !== undefined ? LocalData().allowAutoRejoin : true,
replyTo: null,
};
this.port = null;
this.gifClick = this.gifClick.bind(this);
@@ -107,9 +110,12 @@ export default class Chat extends Component {
this.leaveParty = this.leaveParty.bind(this);
this.shareParty = this.shareParty.bind(this);
this.syncPlayer = this.syncPlayer.bind(this);
this.setReplyTo = this.setReplyTo.bind(this);
this.sendMessage = this.sendMessage.bind(this);
this.getCarousel = this.getCarousel.bind(this);
this.updateAdminOnly = this.updateAdminOnly.bind(this);
this.handlePhoneCall = this.handlePhoneCall.bind(this);
this.getReplyToContent = this.getReplyToContent.bind(this);
this.callEventListener = this.callEventListener.bind(this);
this.sendMessageInvoker = this.sendMessageInvoker.bind(this);
this.videoEventListener = this.videoEventListener.bind(this);
@@ -117,7 +123,6 @@ 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
@@ -160,7 +165,7 @@ export default class Chat extends Component {
this.port.postMessage({
type: 'INIT',
roomId: LocalData().partyName,
roomPin: LocalData().partyPin
roomPin: LocalData().partyPin,
});
// Listener
this.port.onMessage.addListener((response) => {
@@ -185,7 +190,7 @@ export default class Chat extends Component {
}
this.setState(response);
if (response.player) this.mVideoListener.doUpdate(response.player);
const pcc = document.querySelector('.thread-container');
const pcc = document.querySelector('.thread-wrapper');
if (pcc) pcc.scrollTop = pcc.scrollHeight;
});
@@ -235,7 +240,13 @@ export default class Chat extends Component {
const data = {
partyName: LocalData().partyName,
};
if (this.state.onCall) this.mCallManager.toggleCall(this.state.onCall, this.state.conference, this.state.admin, this.state.adminOnly);
if (this.state.onCall)
this.mCallManager.toggleCall(
this.state.onCall,
this.state.conference,
this.state.admin,
this.state.adminOnly
);
DeleteRoomApi(data)
.then((res) => {
this.props.notify('Ended party');
@@ -256,7 +267,13 @@ export default class Chat extends Component {
partyName: LocalData().partyName,
userUid: LocalData().userUid,
};
if (this.state.onCall) this.mCallManager.toggleCall(this.state.onCall, this.state.conference, this.state.admin, this.state.adminOnly);
if (this.state.onCall)
this.mCallManager.toggleCall(
this.state.onCall,
this.state.conference,
this.state.admin,
this.state.adminOnly
);
LeaveRoomApi(data)
.then((res) => {
this.props.notify('Left party');
@@ -291,10 +308,12 @@ export default class Chat extends Component {
type: '',
};
if (this.state.gif === true) data.type = 'giphy';
if (this.state.replyTo !== null) data.replyTo = this.state.replyTo.id;
SendMessageApi(data).catch((err) => {
this.props.notify(err.message || err.statusText);
console.error('Send Message API error', err);
});
this.setState({ replyTo: null });
}
sendMessageInvoker(overrideMessage) {
if (overrideMessage) this.sendMessage(overrideMessage);
@@ -376,6 +395,25 @@ export default class Chat extends Component {
console.error('Update Admin Only API error', err);
});
}
setReplyTo(message) {
this.setState({
replyTo: message,
});
}
getReplyToContent() {
const { replyTo } = this.state;
if (replyTo) {
if (replyTo.type === 'giphy') {
return <img alt="gif" src={replyTo.text} />;
}
return (
<Typography variant="body2" gutterBottom>
{replyTo.text}
</Typography>
);
}
return null;
}
render() {
const {
admin,
@@ -394,6 +432,7 @@ export default class Chat extends Component {
isFullscreen,
adminModeUpdate,
adminOnly,
replyTo,
} = this.state;
const alerts = [
{
@@ -411,8 +450,8 @@ export default class Chat extends Component {
},
{
condition: () => adminOnly,
message: 'Party is currently in admin only mode.'
}
message: 'Party is currently in admin only mode.',
},
];
return (
<div className="party-chat-container">
@@ -530,8 +569,7 @@ export default class Chat extends Component {
}
labelPlacement="end"
/>
{
admin ?
{admin ? (
<FormControlLabel
className="notification-switch"
control={
@@ -548,13 +586,15 @@ export default class Chat extends Component {
Admin Only Mode (can be changed later)
<br />
<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'}
{adminOnly
? '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
}
/>
) : null}
<Typography className="party-controls-users-title" variant="overline">
PARTY MEMBERS
</Typography>
@@ -629,7 +669,7 @@ export default class Chat extends Component {
</Card>
) : null}
</div>
<div className="thread-container">
<div className="thread-wrapper">
<div className="alerts-container">
{alerts.map((a) => {
if (a.condition() === true) {
@@ -644,8 +684,23 @@ export default class Chat extends Component {
} else return null;
})}
</div>
<Thread messages={messages} />
<Thread setReplyTo={this.setReplyTo} messages={messages} />
</div>
<Paper
square
variant="outlined"
className={`replying-to-card ${replyTo !== null ? 'replying-to-card-up' : ''}`}
>
<div className="replying-to-content">
<Typography variant="overline" display="block" gutterBottom>
REPLYING TO
</Typography>
{this.getReplyToContent()}
</div>
<IconButton onClick={() => this.setReplyTo(null)}>
<CancelRounded />
</IconButton>
</Paper>
<div className="text-phone-panel">
{gif || newMessage ? null : (
<Tooltip title="Fullscreen with Watch Party" aria-label="Fullscreen">