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

v1.3.0-beta/voice call implemented

Browse Source
This commit is contained in:
ayushya
2020-05-31 18:14:19 -04:00
parent aa15c4eb30
commit 5428c1e299
12 changed files with 256 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/Chat.js
+51 -36
View File
@@ -12,6 +12,7 @@ import {
ExpansionPanelDetails,
Card,
CardContent,
Tooltip,
} from '@material-ui/core';
import Thread from './Thread';
import Send from '@material-ui/icons/Send';
@@ -34,18 +35,13 @@ import {
PLAYER_SOURCE,
LocalData,
PLAYER_STATUS,
emptyLocalData,
} from './Api';
import { goTo } from 'route-lite';
import Create from './Create';
import VideoListener from './VideoListener';
import CallManager from './CallManager';
import {
MoreVert,
FileCopyTwoTone,
PauseCircleFilled,
LinkOutlined,
PlayCircleFilled,
} from '@material-ui/icons';
import { MoreVert, PauseCircleFilled, LinkOutlined, PlayCircleFilled } from '@material-ui/icons';
const giphyFetch = new GiphyFetch('ojJbIMUN6XRMn4mHiFFav3rMCpXUg8sq');
const alertMessage = {
@@ -78,7 +74,7 @@ export default class Chat extends Component {
this.getCarousel = this.getCarousel.bind(this);
this.handlePhoneCall = this.handlePhoneCall.bind(this);
this.callEventListener = this.callEventListener.bind(this);
this.mCallManager = new CallManager(this.callEventListener);
this.mCallManager = new CallManager(this.callEventListener, this.props.notify);
this.sendMessageInvoker = this.sendMessageInvoker.bind(this);
this.videoEventListener = this.videoEventListener.bind(this);
this.mVideoListener = new VideoListener(this.videoEventListener);
@@ -129,7 +125,9 @@ export default class Chat extends Component {
videoEventListener(video) {
this.syncPlayer(video);
}
callEventListener(event) {}
callEventListener(event) {
this.setState(event);
}
syncPlayer(video) {
const { status, showName, time, source, element, showChanged } = video;
if (element) {
@@ -158,12 +156,12 @@ export default class Chat extends Component {
this.props.notify('Ending party...');
this.props.updateLoading(true);
const data = {
roomId: LocalData().partyName,
partyName: LocalData().partyName,
};
DeleteRoomApi(data)
.then((res) => {
this.props.notify('Ended party');
// window.localStorage.removeItem('watchPartyRoomId');
emptyLocalData();
goTo(Create, this.props);
this.props.updateLoading(false);
})
@@ -177,13 +175,13 @@ export default class Chat extends Component {
this.props.notify('Leaving party...');
this.props.updateLoading(true);
const data = {
roomId: LocalData().partyName,
uid: LocalData().userUid,
partyName: LocalData().partyName,
userUid: LocalData().userUid,
};
LeaveRoomApi(data)
.then((res) => {
this.props.notify('Left party');
// window.localStorage.removeItem('watchPartyRoomId');
emptyLocalData();
goTo(Create, this.props);
this.props.updateLoading(false);
})
@@ -206,9 +204,9 @@ export default class Chat extends Component {
}
sendMessage(message) {
const data = {
roomId: window.localStorage.getItem('watchPartyRoomId'),
name: window.localStorage.getItem('watchPartyUserName'),
uid: window.localStorage.getItem('watchPartyUserUid'),
roomId: LocalData().partyName,
name: LocalData().userName,
uid: LocalData().userUid,
text: message,
time: new Date(),
type: '',
@@ -236,12 +234,12 @@ export default class Chat extends Component {
? giphyFetch.trending({ offset, limit: 1 })
: giphyFetch.search(this.state.newMessage, { offset, limit: 1 });
}
async handlePhoneCall() {
this.setState({ onCall: !this.state.onCall });
handlePhoneCall() {
const { onCall, conference, admin } = this.state;
this.mCallManager.toggleCall(onCall, conference, admin);
}
handleMute() {
this.mCallManager.toggleMute();
this.setState({ muted: !this.state.muted });
this.mCallManager.toggleMute(this.state.muted);
}
getPrettyTime(t) {
return t > 3600
@@ -258,10 +256,13 @@ export default class Chat extends Component {
<ExpansionPanel elevation={0} className="expander">
<ExpansionPanelSummary
expandIcon={
<MoreVert
alt="Share, leave, and other controls"
<Tooltip
placement="bottom-end"
title="Share, leave, and other controls"
aria-label="Share, leave, and other controls"
/>
>
<MoreVert />
</Tooltip>
}
>
<div className="party-chat-header-text">
@@ -290,11 +291,13 @@ export default class Chat extends Component {
fullWidth
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={this.shareParty}>
<Share />
</IconButton>
</InputAdornment>
<Tooltip title="Share party" aria-label="Share party">
<InputAdornment position="end">
<IconButton onClick={this.shareParty}>
<Share />
</IconButton>
</InputAdornment>
</Tooltip>
),
}}
/>
@@ -359,17 +362,29 @@ export default class Chat extends Component {
<div className="text-phone-panel">
{gif || newMessage ? null : (
<IconButton onClick={this.handlePhoneCall} color={!onCall ? 'secondary' : 'primary'}>
{onCall ? <PhoneDisable /> : <PhoneEnable />}
{onCall ? (
<Tooltip placement="top" title="Leave Call">
<PhoneDisable />
</Tooltip>
) : (
<Tooltip placement="top" title="Join Call">
<PhoneEnable />
</Tooltip>
)}
</IconButton>
)}
{!gif && !newMessage && onCall && !muted ? (
<IconButton onClick={this.handleMute} color="primary">
<MicOff />
</IconButton>
<Tooltip title="Mute Mic" placement="top">
<IconButton onClick={this.handleMute} color="primary">
<MicOff />
</IconButton>
</Tooltip>
) : !gif && !newMessage && onCall && muted ? (
<IconButton onClick={this.handleMute} color="secondary">
<MicOn />
</IconButton>
<Tooltip title="Unmute Mic" placement="top">
<IconButton onClick={this.handleMute} color="secondary">
<MicOn />
</IconButton>
</Tooltip>
) : null}
<TextField
color="secondary"