From 9d4a9ca0ad04981e9a7bf3929e7965e8b1b48f02 Mon Sep 17 00:00:00 2001 From: Ayushya Amitabh Date: Wed, 5 Aug 2020 21:31:35 -0400 Subject: [PATCH] v1.6.0/volume manager, styling fixes --- app/src/Api.js | 8 +- app/src/CallManager.js | 13 +--- app/src/Chat.js | 165 ++++++++++++++++++++++------------------- app/src/index.css | 10 ++- 4 files changed, 102 insertions(+), 94 deletions(-) diff --git a/app/src/Api.js b/app/src/Api.js index c48f18e..e9d5471 100644 --- a/app/src/Api.js +++ b/app/src/Api.js @@ -76,9 +76,11 @@ export const emptyLocalData = () => { }; export const scrollThread = () => { - const pcc = document.querySelector('.thread-wrapper'); - if (pcc) pcc.scrollTop = pcc.scrollHeight; -} + setTimeout(function () { + const pcc = document.querySelector('.thread-wrapper'); + if (pcc) pcc.scrollTop = pcc.scrollHeight; + }, 500); +}; export const getUserUid = async () => new Promise((resolve, reject) => { diff --git a/app/src/CallManager.js b/app/src/CallManager.js index be96e4f..f01c89a 100644 --- a/app/src/CallManager.js +++ b/app/src/CallManager.js @@ -105,7 +105,7 @@ export default class CallManager { const joined = await VoxeetSDK.conference .join(conference, { constraints: { audio: true, video: false } }) .then(() => true) - .catch(e => { + .catch((e) => { this.listener({ onCall: false, muted: false, callActionPending: false }); this.notify('Unable to join call. Try again in a moment.'); console.error('Error joining call', e); @@ -157,21 +157,10 @@ export default class CallManager { }); 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 }); }); VoxeetSDK.conference.on('streamRemoved', (participant, stream) => { - if (document.getElementById(participant.id)) document.getElementById(participant.id).remove(); this.listener({ callActionPending: false }); }); diff --git a/app/src/Chat.js b/app/src/Chat.js index fe4710f..36fb955 100644 --- a/app/src/Chat.js +++ b/app/src/Chat.js @@ -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 !== '') { - 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' ? ( - - - - - - this.setVideoVolume(v, id)} /> - - - - + + + + + this.setVideoVolume(v, id)} + /> + + + + + + } + > + - - + className="party-controls-users-chip" + clickable + size="small" + label={usersOnCall[id].info.name || ' '} + /> + ) : null; })} @@ -744,7 +757,11 @@ export default class Chat extends Component { } else return null; })} - + - + ); } diff --git a/app/src/index.css b/app/src/index.css index bbed4cd..ac746d2 100644 --- a/app/src/index.css +++ b/app/src/index.css @@ -192,7 +192,7 @@ body.googleplay.visible height: 100%; } /* CRUNCHYROLL STYLING */ -body.crunchyroll.visible #party-routes-wrapper input{ +body.crunchyroll.visible #party-routes-wrapper input { border: initial !important; } body.crunchyroll.visible header { @@ -705,7 +705,8 @@ body.amazon-prime .notification-switch .MuiSwitch-thumb { } .giphy-wrapper.giphy-wrapper-down { - margin-bottom: -320px; + padding-top: 30px; + margin-bottom: -350px; } .giphy-wrapper.giphy-wrapper-down .giphy-list-wrapper { @@ -713,6 +714,7 @@ body.amazon-prime .notification-switch .MuiSwitch-thumb { } .giphy-wrapper { + padding-top: 0px; transition: all ease-in-out 0.3s; position: relative; } @@ -746,7 +748,7 @@ body.amazon-prime .notification-switch .MuiSwitch-thumb { .thread-wrapper::-webkit-scrollbar-thumb:hover, .giphy-list-wrapper::-webkit-scrollbar-thumb:hover { background-color: #c0f300; -} +} .giphy-search-form { height: 0; @@ -796,7 +798,7 @@ button.giphy-list-item { border-top: 1px solid gray; border-right: 1px solid gray; 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; }