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

v1.6.0/volume manager, styling fixes

Browse Source
This commit is contained in:
ayushya
2020-08-05 21:31:35 -04:00
parent 9d1fe04bda
commit 9d4a9ca0ad
4 changed files with 102 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/Chat.js
+90 -75
View File
@@ -106,7 +106,8 @@ export default class Chat extends Component {
allowAutoRejoin:
LocalData().allowAutoRejoin !== undefined ? LocalData().allowAutoRejoin : true,
replyTo: null,
sendingMessages: [],
sendingMessages: [],
volumes: {},
};
this.port = null;
this.gifClick = this.gifClick.bind(this);
@@ -179,13 +180,20 @@ export default class Chat extends Component {
return;
}
if (response.messages) {
scrollThread();
}
// IF CHAT IS HIDDEN AND ALLOWS NOTIFICATION
if (!document.querySelector('body.visible') && this.state.allowChatNotification === true) {
if (response.messages && response.messages.length !== this.state.messages.length) {
scrollThread();
const lastMessage = response.messages[response.messages.length - 1];
if (lastMessage.uid !== '<system>') {
this.props.notify(`${lastMessage.name}${lastMessage.type === 'giphy' ? ' sent a gif.' : ': ' + lastMessage.text}`);
this.props.notify(
`${lastMessage.name}${
lastMessage.type === 'giphy' ? ' sent a gif.' : ': ' + lastMessage.text
}`
);
}
}
}
@@ -318,31 +326,31 @@ export default class Chat extends Component {
uid: LocalData().userUid,
text: message,
time: new Date(),
type: ''
type: '',
};
if (this.state.gif === true) data.type = 'giphy';
if (this.state.replyTo !== null) data.replyTo = this.state.replyTo.id;
sendingMessages.push(data);
this.setState({
sendingMessages
sendingMessages,
});
SendMessageApi(data)
.then(() => {
const { sendingMessages: sm } = this.state;
const rmi = sm.indexOf(data);
sm.splice(rmi,1);
this.setState({ sendingMessages: sm });
scrollThread();
})
.catch((err) => {
const { sendingMessages: sm } = this.state;
const rmi = sm.indexOf(data);
sm.splice(rmi,1);
this.setState({ sendingMessages: sm });
scrollThread();
this.props.notify(err.message || err.statusText);
console.error('Send Message API error', err);
});
.then(() => {
const { sendingMessages: sm } = this.state;
const rmi = sm.indexOf(data);
sm.splice(rmi, 1);
this.setState({ sendingMessages: sm });
scrollThread();
})
.catch((err) => {
const { sendingMessages: sm } = this.state;
const rmi = sm.indexOf(data);
sm.splice(rmi, 1);
this.setState({ sendingMessages: sm });
scrollThread();
this.props.notify(err.message || err.statusText);
console.error('Send Message API error', err);
});
this.setState({ replyTo: null });
scrollThread();
}
@@ -440,21 +448,17 @@ export default class Chat extends Component {
}
return null;
}
getVideoVolume (id) {
console.log('GET VIDEO VOLUME FOR USER', id);
if (document.getElementById(id)) {
return document.getElementById(id).volume * 10;
} else {
console.log('VIDEO NOT FOUND FOR USER', id);
}
return 0;
}
setVideoVolume (v,id) {
console.log('SET VIDEO VOLUME FOR USER', v, id);
if (document.getElementById(id)) {
return document.getElementById(id).volume = (v/10);
} else {
console.log('VIDEO NOT FOUND FOR USER', id);
setVideoVolume(v, id) {
const audioOuts = document.querySelectorAll('audio.vxt-audio');
if (audioOuts.length > 0) {
audioOuts.forEach((el) => {
if (el.id === `audio-${id}`) {
el.volume = v * 0.1;
const { volumes } = this.state;
volumes[id] = v;
this.setState({ volumes });
}
});
}
}
render() {
@@ -476,7 +480,8 @@ export default class Chat extends Component {
adminModeUpdate,
adminOnly,
replyTo,
sendingMessages
sendingMessages,
volumes,
} = this.state;
const alerts = [
{
@@ -657,33 +662,41 @@ export default class Chat extends Component {
{Object.keys(usersOnCall).map((id) => {
return usersOnCall[id].status === 'Connected' ||
usersOnCall[id].status === 'Connecting' ? (
<Tooltip interactive
title={
<Grid className="party-controls-users-volume" container spacing={2}>
<Grid item>
<VolumeDown />
</Grid>
<Grid item xs>
<Slider max={10} min={0} step={1} color="secondary" value={this.getVideoVolume(id)} onChangeCommitted={(e,v) => this.setVideoVolume(v, id)} />
</Grid>
<Grid item>
<VolumeUp />
</Grid>
<Tooltip
interactive
title={
<Grid className="party-controls-users-volume" container spacing={2}>
<Grid item>
<VolumeDown />
</Grid>
<Grid item xs>
<Slider
max={10}
min={0}
step={1}
color="secondary"
value={volumes[id] || 10}
onChangeCommitted={(e, v) => this.setVideoVolume(v, id)}
/>
</Grid>
<Grid item>
<VolumeUp />
</Grid>
</Grid>
}
>
<Chip
color={
usersOnCall[id].info.externalId === LocalData().userUid
? 'secondary'
: 'default'
}
>
<Chip
color={
usersOnCall[id].info.externalId === LocalData().userUid
? 'secondary'
: 'default'
}
className="party-controls-users-chip"
clickable
size="small"
label={usersOnCall[id].info.name || ' '}
/>
</Tooltip>
className="party-controls-users-chip"
clickable
size="small"
label={usersOnCall[id].info.name || ' '}
/>
</Tooltip>
) : null;
})}
</div>
@@ -744,7 +757,11 @@ export default class Chat extends Component {
} else return null;
})}
</div>
<Thread setReplyTo={this.setReplyTo} sendingMessages={sendingMessages} sentMessages={messages} />
<Thread
setReplyTo={this.setReplyTo}
sendingMessages={sendingMessages}
sentMessages={messages}
/>
</div>
<Paper
square
@@ -879,18 +896,16 @@ export default class Chat extends Component {
}}
/>
</div>
<ReactGiphySearchbox
apiKey="ojJbIMUN6XRMn4mHiFFav3rMCpXUg8sq"
onSelect={this.gifClick}
masonryConfig={[
{ columns: 2, imageWidth: '50%', gutter: 5 },
]}
searchFormClassName="giphy-search-form"
wrapperClassName={`giphy-wrapper ${gif ? '' : 'giphy-wrapper-down' }`}
listWrapperClassName="giphy-list-wrapper"
listItemClassName="giphy-list-item"
poweredByGiphy
/>
<ReactGiphySearchbox
apiKey="ojJbIMUN6XRMn4mHiFFav3rMCpXUg8sq"
onSelect={this.gifClick}
masonryConfig={[{ columns: 2, imageWidth: '50%', gutter: 5 }]}
searchFormClassName="giphy-search-form"
wrapperClassName={`giphy-wrapper ${gif ? '' : 'giphy-wrapper-down'}`}
listWrapperClassName="giphy-list-wrapper"
listItemClassName="giphy-list-item"
poweredByGiphy
/>
</div>
);
}