From 7769a2fd7333a76b959b86544161ec0fa1e621f8 Mon Sep 17 00:00:00 2001 From: Ayushya Amitabh Date: Tue, 26 May 2020 18:27:55 -0400 Subject: [PATCH] v1.2.1-beta/fix gifs and add attribution --- app/src/App.js | 5 +- app/src/Chat.js | 183 ++++++++++++++++++++++++++++++---------------- app/src/Giphy.png | Bin 0 -> 1516 bytes app/src/Thread.js | 2 - app/src/index.css | 23 +++++- 5 files changed, 143 insertions(+), 70 deletions(-) create mode 100644 app/src/Giphy.png diff --git a/app/src/App.js b/app/src/App.js index 793af17..772ef5c 100644 --- a/app/src/App.js +++ b/app/src/App.js @@ -7,6 +7,7 @@ import firebase from 'firebase/app'; import 'firebase/firestore'; import Inactive from './Inactive'; import { getUserUid } from './Api'; +import Chat from './Chat'; const darkTheme = createMuiTheme({ palette: { @@ -19,7 +20,7 @@ const darkTheme = createMuiTheme({ const Routes = (props) => ( - + ); @@ -33,7 +34,7 @@ const App = () => { useEffect(() => { setLoading(true); - getUserUid(); + // getUserUid(); firebase .firestore() .collection('server') diff --git a/app/src/Chat.js b/app/src/Chat.js index c34842b..e1892d9 100644 --- a/app/src/Chat.js +++ b/app/src/Chat.js @@ -13,6 +13,10 @@ import Send from '@material-ui/icons/Send'; import Exit from '@material-ui/icons/ExitToApp'; import Share from '@material-ui/icons/Share'; import Delete from '@material-ui/icons/Delete'; +import PhoneEnable from '@material-ui/icons/CallRounded'; +import PhoneDisable from '@material-ui/icons/CallEndRounded'; +import MicOff from '@material-ui/icons/MicOff'; +import MicOn from '@material-ui/icons/Mic'; import Gif from '@material-ui/icons/Gif'; import { Carousel } from '@giphy/react-components'; import { GiphyFetch } from '@giphy/js-fetch-api'; @@ -44,18 +48,21 @@ export default class Chat extends Component { newMessage: '', admin: null, gif: false, + onCall: false, + muted: false, }; - this.sendMessage = this.sendMessage.bind(this); - this.sendMessageInvoker = this.sendMessageInvoker.bind(this); + this.port = null; + this.gifClick = this.gifClick.bind(this); this.endParty = this.endParty.bind(this); this.leaveParty = this.leaveParty.bind(this); this.shareParty = this.shareParty.bind(this); this.syncPlayer = this.syncPlayer.bind(this); + this.sendMessage = this.sendMessage.bind(this); + this.getCarousel = this.getCarousel.bind(this); + this.handlePhoneCall = this.handlePhoneCall.bind(this); + this.sendMessageInvoker = this.sendMessageInvoker.bind(this); this.videoEventListener = this.videoEventListener.bind(this); this.mVideoListener = new VideoListener(this.videoEventListener); - this.port = null; - this.getCarousel = this.getCarousel.bind(this); - this.gifClick = this.gifClick.bind(this); } componentDidMount() { // EVENT CAPTURE FOR ENTER TO SEND @@ -75,24 +82,24 @@ export default class Chat extends Component { this.mVideoListener.start(); // CHROME FIREBASE FIRESTORE LISTENER - this.port = chrome.runtime.connect({ name: window.localStorage.getItem('watchPartyRoomId') }); - // Initialize listener - this.port.postMessage({ - type: 'INIT', - roomId: window.localStorage.getItem('watchPartyRoomId'), - }); - // Listener - this.port.onMessage.addListener((response) => { - if (response.isError === true) { - this.props.notify('Uh oh. Got lost from the party.'); - goTo(Create, this.props); - return; - } - this.setState(response); - if (response.player) this.mVideoListener.doUpdate(response.player); - const pcc = document.getElementsByClassName('thread-container')[0]; - if (pcc) pcc.scrollTop = pcc.scrollHeight; - }); + // this.port = chrome.runtime.connect({ name: window.localStorage.getItem('watchPartyRoomId') }); + // // Initialize listener + // this.port.postMessage({ + // type: 'INIT', + // roomId: window.localStorage.getItem('watchPartyRoomId'), + // }); + // // Listener + // this.port.onMessage.addListener((response) => { + // if (response.isError === true) { + // this.props.notify('Uh oh. Got lost from the party.'); + // goTo(Create, this.props); + // return; + // } + // this.setState(response); + // if (response.player) this.mVideoListener.doUpdate(response.player); + // const pcc = document.getElementsByClassName('thread-container')[0]; + // if (pcc) pcc.scrollTop = pcc.scrollHeight; + // }); // DONE WITH MOUNTING TASKS this.props.updateLoading(false); @@ -201,21 +208,31 @@ export default class Chat extends Component { ev.preventDefault(); this.sendMessageInvoker(iGif.images.original.url); } - getCarousel() { - const trendingFetch = (offset) => giphyFetch.trending({ offset, limit: 5 }); - const searchFetch = (offset) => giphyFetch.search(this.state.newMessage, { offset, limit: 5 }); - return ( - - ); + getCarousel(offset) { + return this.state.newMessage === '' + ? giphyFetch.trending({ offset, limit: 1 }) + : giphyFetch.search(this.state.newMessage, { offset, limit: 1 }); + } + handlePhoneCall() { + if (!this.state.onCall) { + navigator.mediaDevices + .getUserMedia({ + video: false, + audio: true, + }) + .then((mediaStream) => { + this.setState({ onCall: true, muted: false }); + console.log('GOT DEVICE'); + }) + .catch((err) => { + console.error(err); + }); + } else { + this.setState({ onCall: false }); + } } render() { - const { admin, name, messages, newMessage, gif } = this.state; + const { admin, name, messages, newMessage, gif, onCall, muted } = this.state; if (getPlayerSource() === PLAYER_SOURCE.HBONOW && messages[0] !== alertMessage) messages.unshift(alertMessage); return ( @@ -238,7 +255,7 @@ export default class Chat extends Component { {admin && ( )} @@ -246,34 +263,70 @@ export default class Chat extends Component {
- this.setState({ newMessage: e.target.value, gif: false })} - InputProps={{ - id: 'chat-message-box-input', - endAdornment: ( - - this.sendMessageInvoker(newMessage)} edge="end"> - - - - ), - startAdornment: ( - - this.setState({ gif: !gif })} edge="start"> - - - - ), - }} - /> - {gif ? this.getCarousel() : null} +
+ { + this.setState({ newMessage: e.target.value }); + if (this.state.gif) { + const carousel = document.querySelector('.giphy-carousel'); + setTimeout(() => carousel.scroll(carousel.scrollWidth, carousel.scrollHeight), 250); + } + }} + InputProps={{ + id: 'chat-message-box-input', + endAdornment: ( + + this.sendMessageInvoker(newMessage)} + edge="end" + > + + + + ), + startAdornment: ( + + this.setState({ gif: !gif })} edge="start"> + + + + ), + }} + /> + + {onCall ? : } + + {onCall && !muted ? ( + + + + ) : onCall && muted ? ( + + + + ) : null} +
+ {gif ? ( + + ) : null} ); } diff --git a/app/src/Giphy.png b/app/src/Giphy.png new file mode 100644 index 0000000000000000000000000000000000000000..c42e09e143c3b92404a090f7d3eeec382137a3bd GIT binary patch literal 1516 zcmV|8O78$}eIO9D6%;H5!ENZ54S*@yy@CX19J6=%A1XDD)1+)*IW<)|sn5fX}1 zIUOCo&RzDpYa;D+MmmW-QLqKY9!khU6wFR|3qPN~-d%fr=a_lY$ljTqo!OcH{(pbY z$=YNxQ3eJEGA@`UI4#_93*CP7;AQpo4-as)t@?e>tf3*uD&tC_yZ?M9vRh{P3_(^J zpDA^$Kd&kkei)a`4v(H_QZ#YZRhyem{OQJ##5JpF2(ohcMyWbJ2NQK;C$q!1PYH1k zR~w|o5X2C~AO#IXlCWS-(v3?eF6%W-#AnvCw{za-V7@I@ zKSaIC@eB{+8G@`BHcX=A-L<)?bsR%I@vuUGQ_p=2jLhc==`l^7R%pmvtC#S#Uu*j)6dgst_@A&&5QL z<%RZyU(t#$_TS(9<@d<4UcB`7Zg&5HU>q7JkQgo2ewbHw%!n(9B7>5i*TouD*%%!V zK$4Uvg4{9$c`niK>&<^Ang98%{?^Ikpz`?18?WXto~B?N9hN&dBx*P+&*@q^?lR-w z77VmgB0)mD=l4R?@TTM=;i3p~EiN@ycMz8`(R=isF*YNJ%XLg_#3t(!&DcWG>~9NW z1?Vq%fMgyu%s~lBSs=9eDaoevu0EdAVf`xP{f3L=%quUv{_w)Nm#mBDs}D17?Fe;_ zkOaF}b8Aj=NNbtwZ9OB;m zig#Z7=qUbpGcHFNw>pAxcvDVwvQCrc@$&VY_x1#mHgfda#`{(oN#>GPvq~)LCA8Q6 z62@-htolO1!1h7$W6Ot)nylxKf&f7v5DJ7f7$VC^MwzWyL2!ze$a-@Pf8(w-u zlHp*91X@*ypjjtFWqNrlMdnRIbH=d}DY}~>Im6Q+h_sLq42&Cdgvnblo{$m5$7b0u zJid`F=0O4`(GpMJChb%rMdW&v@(u^M*A@)ChJ~%*yHDmfB%U}>=8tz8H&L=A(IU`; z!;*-FMiRleTkyyckxe#9;yq&6A^MCNVYnbQ|wC7vuD3r3pQOPMx!Vvq^EOE>Mi%ctlA_N)bh%Q;4Vl2p+VZpHmf-w)Kw5yzLMc$Rlyk&$B$+9b) zZf)e~YXF$vVy!N86uDKf&&P%!h9LhZ=)XgKp#J{#?= props.messages.map((m, midx) => { diff --git a/app/src/index.css b/app/src/index.css index ea36fe5..cb0085c 100644 --- a/app/src/index.css +++ b/app/src/index.css @@ -275,6 +275,11 @@ textarea::-webkit-scrollbar { .party-controls button:hover .MuiButton-startIcon { margin-right: 8px !important; } +.giphy-carousel::before { + position: relative; + bottom: 40%; + content: url('./Giphy.png'); +} .giphy-carousel { margin-top: 1rem; min-height: fit-content; @@ -283,9 +288,11 @@ textarea::-webkit-scrollbar { border-radius: 1rem; transform: scale(0.85); transition: all ease-in-out 0.2s; + opacity: 0.7; } .giphy-carousel img:hover { - transform: scale(0.95); + opacity: 1; + transform: scale(0.9); } .giphy-carousel::-webkit-scrollbar { @@ -300,3 +307,17 @@ textarea::-webkit-scrollbar { background-color: rgb(118, 182, 255); border-radius: 13px; } +.message-send svg { + transform: scale(0.55); + transition: all ease 0.5s !important; +} +.message-active svg { + transform: rotate(-90deg) scale(0.75); +} +.message-send.gif-active { + display: none !important; +} +.text-phone-panel { + display: flex; + align-items: center; +}