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/Api.js
+5 -3
View File
@@ -76,9 +76,11 @@ export const emptyLocalData = () => {
}; };
export const scrollThread = () => { export const scrollThread = () => {
const pcc = document.querySelector('.thread-wrapper'); setTimeout(function () {
if (pcc) pcc.scrollTop = pcc.scrollHeight; const pcc = document.querySelector('.thread-wrapper');
} if (pcc) pcc.scrollTop = pcc.scrollHeight;
}, 500);
};
export const getUserUid = async () => export const getUserUid = async () =>
new Promise((resolve, reject) => { new Promise((resolve, reject) => {
app/src/CallManager.js
+1 -12
View File
@@ -105,7 +105,7 @@ export default class CallManager {
const joined = await VoxeetSDK.conference const joined = await VoxeetSDK.conference
.join(conference, { constraints: { audio: true, video: false } }) .join(conference, { constraints: { audio: true, video: false } })
.then(() => true) .then(() => true)
.catch(e => { .catch((e) => {
this.listener({ onCall: false, muted: false, callActionPending: false }); this.listener({ onCall: false, muted: false, callActionPending: false });
this.notify('Unable to join call. Try again in a moment.'); this.notify('Unable to join call. Try again in a moment.');
console.error('Error joining call', e); console.error('Error joining call', e);
@@ -157,21 +157,10 @@ export default class CallManager {
}); });
VoxeetSDK.conference.on('streamAdded', (participant, stream) => { VoxeetSDK.conference.on('streamAdded', (participant, stream) => {
if (participant !== VoxeetSDK.session.participant) {
const voiceNode = document.createElement('video');
voiceNode.srcObject = stream;
voiceNode.id = participant.id;
voiceNode.width = 0;
voiceNode.height = 0;
voiceNode.autoplay = true;
voiceNode.classList.add('voxeetAudioOut');
document.body.appendChild(voiceNode);
}
this.listener({ callActionPending: false }); this.listener({ callActionPending: false });
}); });
VoxeetSDK.conference.on('streamRemoved', (participant, stream) => { VoxeetSDK.conference.on('streamRemoved', (participant, stream) => {
if (document.getElementById(participant.id)) document.getElementById(participant.id).remove();
this.listener({ callActionPending: false }); this.listener({ callActionPending: false });
}); });
app/src/Chat.js
+90 -75
View File
@@ -106,7 +106,8 @@ export default class Chat extends Component {
allowAutoRejoin: allowAutoRejoin:
LocalData().allowAutoRejoin !== undefined ? LocalData().allowAutoRejoin : true, LocalData().allowAutoRejoin !== undefined ? LocalData().allowAutoRejoin : true,
replyTo: null, replyTo: null,
sendingMessages: [], sendingMessages: [],
volumes: {},
}; };
this.port = null; this.port = null;
this.gifClick = this.gifClick.bind(this); this.gifClick = this.gifClick.bind(this);
@@ -179,13 +180,20 @@ export default class Chat extends Component {
return; return;
} }
if (response.messages) {
scrollThread();
}
// IF CHAT IS HIDDEN AND ALLOWS NOTIFICATION // IF CHAT IS HIDDEN AND ALLOWS NOTIFICATION
if (!document.querySelector('body.visible') && this.state.allowChatNotification === true) { if (!document.querySelector('body.visible') && this.state.allowChatNotification === true) {
if (response.messages && response.messages.length !== this.state.messages.length) { if (response.messages && response.messages.length !== this.state.messages.length) {
scrollThread();
const lastMessage = response.messages[response.messages.length - 1]; const lastMessage = response.messages[response.messages.length - 1];
if (lastMessage.uid !== '<system>') { 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, uid: LocalData().userUid,
text: message, text: message,
time: new Date(), time: new Date(),
type: '' type: '',
}; };
if (this.state.gif === true) data.type = 'giphy'; if (this.state.gif === true) data.type = 'giphy';
if (this.state.replyTo !== null) data.replyTo = this.state.replyTo.id; if (this.state.replyTo !== null) data.replyTo = this.state.replyTo.id;
sendingMessages.push(data); sendingMessages.push(data);
this.setState({ this.setState({
sendingMessages sendingMessages,
}); });
SendMessageApi(data) SendMessageApi(data)
.then(() => { .then(() => {
const { sendingMessages: sm } = this.state; const { sendingMessages: sm } = this.state;
const rmi = sm.indexOf(data); const rmi = sm.indexOf(data);
sm.splice(rmi,1); sm.splice(rmi, 1);
this.setState({ sendingMessages: sm }); this.setState({ sendingMessages: sm });
scrollThread(); scrollThread();
}) })
.catch((err) => { .catch((err) => {
const { sendingMessages: sm } = this.state; const { sendingMessages: sm } = this.state;
const rmi = sm.indexOf(data); const rmi = sm.indexOf(data);
sm.splice(rmi,1); sm.splice(rmi, 1);
this.setState({ sendingMessages: sm }); this.setState({ sendingMessages: sm });
scrollThread(); scrollThread();
this.props.notify(err.message || err.statusText); this.props.notify(err.message || err.statusText);
console.error('Send Message API error', err); console.error('Send Message API error', err);
}); });
this.setState({ replyTo: null }); this.setState({ replyTo: null });
scrollThread(); scrollThread();
} }
@@ -440,21 +448,17 @@ export default class Chat extends Component {
} }
return null; return null;
} }
getVideoVolume (id) { setVideoVolume(v, id) {
console.log('GET VIDEO VOLUME FOR USER', id); const audioOuts = document.querySelectorAll('audio.vxt-audio');
if (document.getElementById(id)) { if (audioOuts.length > 0) {
return document.getElementById(id).volume * 10; audioOuts.forEach((el) => {
} else { if (el.id === `audio-${id}`) {
console.log('VIDEO NOT FOUND FOR USER', id); el.volume = v * 0.1;
} const { volumes } = this.state;
return 0; volumes[id] = v;
} this.setState({ volumes });
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);
} }
} }
render() { render() {
@@ -476,7 +480,8 @@ export default class Chat extends Component {
adminModeUpdate, adminModeUpdate,
adminOnly, adminOnly,
replyTo, replyTo,
sendingMessages sendingMessages,
volumes,
} = this.state; } = this.state;
const alerts = [ const alerts = [
{ {
@@ -657,33 +662,41 @@ export default class Chat extends Component {
{Object.keys(usersOnCall).map((id) => { {Object.keys(usersOnCall).map((id) => {
return usersOnCall[id].status === 'Connected' || return usersOnCall[id].status === 'Connected' ||
usersOnCall[id].status === 'Connecting' ? ( usersOnCall[id].status === 'Connecting' ? (
<Tooltip interactive <Tooltip
title={ interactive
<Grid className="party-controls-users-volume" container spacing={2}> title={
<Grid item> <Grid className="party-controls-users-volume" container spacing={2}>
<VolumeDown /> <Grid item>
</Grid> <VolumeDown />
<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>
</Grid> </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'
} }
> className="party-controls-users-chip"
<Chip clickable
color={ size="small"
usersOnCall[id].info.externalId === LocalData().userUid label={usersOnCall[id].info.name || ' '}
? 'secondary' />
: 'default' </Tooltip>
}
className="party-controls-users-chip"
clickable
size="small"
label={usersOnCall[id].info.name || ' '}
/>
</Tooltip>
) : null; ) : null;
})} })}
</div> </div>
@@ -744,7 +757,11 @@ export default class Chat extends Component {
} else return null; } else return null;
})} })}
</div> </div>
<Thread setReplyTo={this.setReplyTo} sendingMessages={sendingMessages} sentMessages={messages} /> <Thread
setReplyTo={this.setReplyTo}
sendingMessages={sendingMessages}
sentMessages={messages}
/>
</div> </div>
<Paper <Paper
square square
@@ -879,18 +896,16 @@ export default class Chat extends Component {
}} }}
/> />
</div> </div>
<ReactGiphySearchbox <ReactGiphySearchbox
apiKey="ojJbIMUN6XRMn4mHiFFav3rMCpXUg8sq" apiKey="ojJbIMUN6XRMn4mHiFFav3rMCpXUg8sq"
onSelect={this.gifClick} onSelect={this.gifClick}
masonryConfig={[ masonryConfig={[{ columns: 2, imageWidth: '50%', gutter: 5 }]}
{ columns: 2, imageWidth: '50%', gutter: 5 }, searchFormClassName="giphy-search-form"
]} wrapperClassName={`giphy-wrapper ${gif ? '' : 'giphy-wrapper-down'}`}
searchFormClassName="giphy-search-form" listWrapperClassName="giphy-list-wrapper"
wrapperClassName={`giphy-wrapper ${gif ? '' : 'giphy-wrapper-down' }`} listItemClassName="giphy-list-item"
listWrapperClassName="giphy-list-wrapper" poweredByGiphy
listItemClassName="giphy-list-item" />
poweredByGiphy
/>
</div> </div>
); );
} }
app/src/index.css
+6 -4
View File
@@ -192,7 +192,7 @@ body.googleplay.visible
height: 100%; height: 100%;
} }
/* CRUNCHYROLL STYLING */ /* CRUNCHYROLL STYLING */
body.crunchyroll.visible #party-routes-wrapper input{ body.crunchyroll.visible #party-routes-wrapper input {
border: initial !important; border: initial !important;
} }
body.crunchyroll.visible header { body.crunchyroll.visible header {
@@ -705,7 +705,8 @@ body.amazon-prime .notification-switch .MuiSwitch-thumb {
} }
.giphy-wrapper.giphy-wrapper-down { .giphy-wrapper.giphy-wrapper-down {
margin-bottom: -320px; padding-top: 30px;
margin-bottom: -350px;
} }
.giphy-wrapper.giphy-wrapper-down .giphy-list-wrapper { .giphy-wrapper.giphy-wrapper-down .giphy-list-wrapper {
@@ -713,6 +714,7 @@ body.amazon-prime .notification-switch .MuiSwitch-thumb {
} }
.giphy-wrapper { .giphy-wrapper {
padding-top: 0px;
transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s;
position: relative; position: relative;
} }
@@ -746,7 +748,7 @@ body.amazon-prime .notification-switch .MuiSwitch-thumb {
.thread-wrapper::-webkit-scrollbar-thumb:hover, .thread-wrapper::-webkit-scrollbar-thumb:hover,
.giphy-list-wrapper::-webkit-scrollbar-thumb:hover { .giphy-list-wrapper::-webkit-scrollbar-thumb:hover {
background-color: #c0f300; background-color: #c0f300;
} }
.giphy-search-form { .giphy-search-form {
height: 0; height: 0;
@@ -796,7 +798,7 @@ button.giphy-list-item {
border-top: 1px solid gray; border-top: 1px solid gray;
border-right: 1px solid gray; border-right: 1px solid gray;
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
background-color: rgba(255,255,255,0.2); background-color: rgba(255, 255, 255, 0.2);
transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s;
} }