diff --git a/app/src/App.js b/app/src/App.js index 7dcdcc1..8b616b9 100644 --- a/app/src/App.js +++ b/app/src/App.js @@ -110,8 +110,7 @@ const App = () => { open={notification.open} onClose={() => setNotification(closedNotification)} message={notification.message} - resumeHideDuration={1000} - autoHideDuration={3000} + autoHideDuration={6000} />
diff --git a/app/src/Chat.js b/app/src/Chat.js index 4de54ec..db09b9f 100644 --- a/app/src/Chat.js +++ b/app/src/Chat.js @@ -34,6 +34,7 @@ import { Switch, FormControlLabel, Chip, + CircularProgress, } from '@material-ui/core'; import Thread from './Thread'; import { Carousel } from '@giphy/react-components'; @@ -104,6 +105,8 @@ export default class Chat extends Component { allowChatNotification: LocalData().allowChatNotification !== undefined ? LocalData().allowChatNotification : true, isFullscreen: document.fullscreen, + allowAutoRejoin: + LocalData().allowAutoRejoin !== undefined ? LocalData().allowAutoRejoin : true, }; this.port = null; this.gifClick = this.gifClick.bind(this); @@ -119,6 +122,7 @@ export default class Chat extends Component { this.sendMessageInvoker = this.sendMessageInvoker.bind(this); this.videoEventListener = this.videoEventListener.bind(this); this.mVideoListener = new VideoListener(this.videoEventListener); + this.updateAllowAutoRejoin = this.updateAllowAutoRejoin.bind(this); this.updateAllowChatNotification = this.updateAllowChatNotification.bind(this); this.mCallManager = new CallManager(this.callEventListener, this.props.notify); } @@ -142,9 +146,16 @@ export default class Chat extends Component { }); // ACTIVE TRACKER - updateLocalData({ lastActive: new Date().getTime() }); - setInterval(() => { + if (LocalData().allowAutoRejoin === undefined || LocalData().allowAutoRejoin === null) { + updateLocalData({ allowAutoRejoin: this.state.allowAutoRejoin }); + } + if (this.state.allowAutoRejoin === true) { updateLocalData({ lastActive: new Date().getTime() }); + } + setInterval(() => { + if (this.state.allowAutoRejoin === true) { + updateLocalData({ lastActive: new Date().getTime() }); + } }, 60000); // VIDEO LISTENER START @@ -301,7 +312,33 @@ export default class Chat extends Component { } handlePhoneCall() { const { onCall, conference, admin } = this.state; - this.mCallManager.toggleCall(onCall, conference, admin); + if (window.navigator && onCall === false) { + try { + const overlay = document.createElement('div'); + overlay.innerHTML = ` +
+

Grant Mic Permission

+ `; + overlay.id = 'mic-permission-overlay'; + document.body.appendChild(overlay); + window.navigator + .getUserMedia({ + audio: true, + }) + .then(() => { + document.getElementById('mic-permission-overlay').remove(); + this.mCallManager.toggleCall(onCall, conference, admin); + }) + .catch(() => { + document.getElementById('mic-permission-overlay').remove(); + this.props.notify( + 'Check your mic permission for this website. You can modify site permission by clicking on the lock icon in the top left.' + ); + }); + } catch (err) { + console.log(err); + } + } else this.mCallManager.toggleCall(onCall, conference, admin); } handleMute() { this.mCallManager.toggleMute(this.state.muted); @@ -315,6 +352,10 @@ export default class Chat extends Component { updateLocalData({ allowChatNotification: !this.state.allowChatNotification }); this.setState({ allowChatNotification: !this.state.allowChatNotification }); } + updateAllowAutoRejoin() { + updateLocalData({ allowAutoRejoin: !this.state.allowAutoRejoin }); + this.setState({ allowAutoRejoin: !this.state.allowAutoRejoin }); + } toggleFullscreen() { if (document.fullscreen) { document.exitFullscreen(); @@ -335,6 +376,7 @@ export default class Chat extends Component { allowChatNotification, users, callActionPending, + allowAutoRejoin, usersOnCall, isFullscreen, } = this.state; @@ -391,7 +433,14 @@ export default class Chat extends Component { ), }} /> - + ) : null} @@ -520,16 +590,19 @@ export default class Chat extends Component {
{gif || newMessage ? null : ( - + {isFullscreen ? : } )} - {gif || newMessage ? null : ( + {gif || newMessage ? null : callActionPending ? ( + + ) : ( {onCall ? ( @@ -544,13 +617,23 @@ export default class Chat extends Component { )} {!gif && !newMessage && onCall && !muted ? ( - + ) : !gif && !newMessage && onCall && muted ? ( - + @@ -565,7 +648,7 @@ export default class Chat extends Component { this.state.newMessage && !this.state.gif ? 'Enter to send / Shift+Enter for new line' : this.state.gif - ? 'Click on gif to send' + ? 'Click on gif to send / Scroll to load more' : null } variant="outlined" @@ -596,7 +679,11 @@ export default class Chat extends Component { ), startAdornment: ( - this.setState({ gif: !gif })} edge="start"> + this.setState({ gif: !gif })} + edge="start" + > {gif ? : } diff --git a/app/src/Create.js b/app/src/Create.js index 34f16c3..8076e1a 100644 --- a/app/src/Create.js +++ b/app/src/Create.js @@ -57,8 +57,8 @@ export default class Create extends Component { this.success = this.success.bind(this); } componentDidMount() { - const { lastActive, userName, partyName, partyPin } = LocalData(); - if (lastActive && userName && partyName && partyPin) { + const { lastActive, userName, partyName, partyPin, allowAutoRejoin } = LocalData(); + if (allowAutoRejoin === true && lastActive && userName && partyName && partyPin) { if (Math.abs(new Date(parseInt(lastActive)) - new Date().getTime()) <= 60000) { this.props.updateLoading(true); this.joinCall(userName, partyName, partyPin); diff --git a/app/src/VideoListener.js b/app/src/VideoListener.js index eadc593..314b35a 100644 --- a/app/src/VideoListener.js +++ b/app/src/VideoListener.js @@ -264,26 +264,40 @@ export default class VideoListener { const videoElement = document .getElementsByClassName('AkiraPlayer')[0] .getElementsByTagName('video')[0]; - if (videoElement) { + if (videoElement && !this.video.element) { this.firstTimeSync(videoElement); + } else { + setInterval( + this.video.element + ? null + : () => { + var nve = document + .getElementsByClassName('AkiraPlayer')[0] + .getElementsByTagName('video')[0]; + if ( + nve !== null && + (this.video.element !== nve || this.video.element === null) + ) { + this.firstTimeSync(nve); + } + }, + 1000 + ); } } else { - document.addEventListener('DOMNodeInserted', (e) => { - if (e.target) { - if (e.target.classList) { - if ( - e.target.classList.contains('nfp') && - e.target.classList.contains('AkiraPlayer') - ) { - e.target.addEventListener('DOMNodeInserted', (ev) => { - if (ev.target.children[0].id) { - this.firstTimeSync(ev.target.children[0].firstChild); - } - }); - } - } - } - }); + setInterval( + this.video.element + ? null + : () => { + var nve = document + .getElementsByClassName('AkiraPlayer')[0] + .getElementsByTagName('video')[0]; + if (nve !== null && (this.video.element !== nve || this.video.element === null)) { + this.firstTimeSync(nve); + } + }, + 1000 + ); } break; case PLAYER_SOURCE.HULU: diff --git a/app/src/index.css b/app/src/index.css index df1c9b6..40075d1 100644 --- a/app/src/index.css +++ b/app/src/index.css @@ -44,6 +44,7 @@ body.visible .watch-party-fab { } body.visible .party-notification-container { display: block !important; + max-width: var(--party-width); } body.netflix.visible .AkiraPlayer, /* NETFLIX */ @@ -247,6 +248,7 @@ body.amazon .fyysciv.f1lobqlo.fk0j80b { } .party-create-container .brand-title { padding: 36px; + letter-spacing: 3.5px !important; } .party-create-container .create-input-card { @@ -364,17 +366,11 @@ textarea::-webkit-scrollbar { margin-top: 18px; } .party-controls .MuiButton-startIcon { - margin-right: 0px !important; + margin-right: 8px !important; } .party-control-button-text { font-size: 10px !important; - display: none; -} -.party-controls button:hover .party-control-button-text { - display: initial; -} -.party-controls button:hover .MuiButton-startIcon { - margin-right: 8px !important; + transition: all ease-out 0.3s; } .party-controls-users-container { max-height: 100px; @@ -417,8 +413,8 @@ textarea::-webkit-scrollbar { flex-direction: row; } .media-info-icon { - width: 48px !important; - height: 48px !important; + width: 2em !important; + height: 2em !important; } .media-info-right { flex: 1; @@ -436,12 +432,14 @@ textarea::-webkit-scrollbar { .giphy-carousel::before { position: relative; - bottom: 40%; + bottom: 90px; + margin-left: 40px; content: url('./Giphy.png'); } .giphy-carousel { margin-top: 1rem; min-height: fit-content; + padding-bottom: 3rem; } .giphy-carousel img { border-radius: 1rem; @@ -456,14 +454,13 @@ textarea::-webkit-scrollbar { .giphy-carousel::-webkit-scrollbar { width: 5px; - height: 5px; + height: 12px; } .giphy-carousel::-webkit-scrollbar-track { background-color: rgb(90, 90, 90); - border-radius: 1rem; } .giphy-carousel::-webkit-scrollbar-thumb { - background-color: rgb(118, 182, 255); + background-color: #c0f300; border-radius: 13px; } .message-send svg { @@ -482,6 +479,26 @@ textarea::-webkit-scrollbar { margin: 0 15px 15px 15px; border-radius: 26px; } +.text-phone-panel .icon-button { + width: 15px !important; + height: 15px !important; + margin: 7.5px !important; +} +.text-phone-panel .gif-button.gif-close { + padding: 12px 0 !important; +} +.text-phone-panel .gif-button { + border-radius: 0 !important; + height: 1.75em !important; +} +.text-phone-panel .gif-button svg { + width: 1.75em !important; + height: 1.75em !important; +} +.text-phone-panel .gif-button.gif-close svg { + width: 0.75em !important; + height: 0.75em !important; +} .MuiTooltip-popper { z-index: 99999 !important; @@ -532,7 +549,7 @@ body.amazon-prime .notification-switch .MuiSwitch-thumb { text-transform: uppercase; } -.mic-permission-overlay { +#mic-permission-overlay { position: fixed; width: 100%; height: 100%; @@ -543,4 +560,24 @@ body.amazon-prime .notification-switch .MuiSwitch-thumb { z-index: 9999; color: white; font-size: 95px; + backdrop-filter: blur(10px); +} +#mic-highlight { + width: 320px; + height: 124px; + box-shadow: 0px 0px 520px #c0f300; + left: 107px; + position: absolute; + border: 2px solid #c0f300; +} +#mic-text { + width: 100%; + text-align: center; + font-size: 15px; + font-family: sans-serif; + text-transform: uppercase; + font-weight: 300; + letter-spacing: 1.5px; + position: absolute; + top: 50%; } diff --git a/functions/modules2/joinRoom.js b/functions/modules2/joinRoom.js index 03732f2..f1a356f 100644 --- a/functions/modules2/joinRoom.js +++ b/functions/modules2/joinRoom.js @@ -1,5 +1,4 @@ const admin = require('firebase-admin'); -const { firestore } = require('firebase-admin'); module.exports = async (req, res) => { const bodydata = JSON.parse(req.body); @@ -137,7 +136,7 @@ module.exports = async (req, res) => { .update({ player: { showName: null, - source: null, + source: roomSource, status: 'NOT_PLAYING', time: 0, updatedBy: bodydata.uid, diff --git a/functions/modules2/updatePlayer.js b/functions/modules2/updatePlayer.js index 777a155..121e14f 100644 --- a/functions/modules2/updatePlayer.js +++ b/functions/modules2/updatePlayer.js @@ -30,7 +30,7 @@ module.exports = async (req, res) => { .get() .then((userSnap) => userSnap.exists); if (userExists) { - if (showChanged === true) { + if (showChanged === true && player.showName) { await admin .firestore() .collection('rooms')