v1.2.1-beta/fix gifs and add attribution

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 (
-      <Carousel
-        fetchGifs={this.state.newMessage === '' ? trendingFetch : searchFetch}
-        gifHeight={200}
-        gutter={6}
-        onGifClick={this.gifClick}
-        hideAttribution
-      />
-    );
+  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 {
             </Button>
             {admin && (
               <Button onClick={this.endParty} startIcon={<Delete />}>
-                {/* <span className="party-control-button-text">End Party</span> */}
+                <span className="party-control-button-text">End</span>
               </Button>
             )}
           </ButtonGroup>
@@ -246,34 +263,70 @@ export default class Chat extends Component {
         <div className="thread-container">
           <Thread messages={messages} />
         </div>
-        <TextField
-          multiline
-          rowsMax="3"
-          size="small"
-          placeholder="New message... (Enter to send)"
-          variant="outlined"
-          className="chat-message-box addFocus"
-          value={newMessage}
-          onChange={(e) => this.setState({ newMessage: e.target.value, gif: false })}
-          InputProps={{
-            id: 'chat-message-box-input',
-            endAdornment: (
-              <InputAdornment position="end">
-                <IconButton onClick={() => this.sendMessageInvoker(newMessage)} edge="end">
-                  <Send />
-                </IconButton>
-              </InputAdornment>
-            ),
-            startAdornment: (
-              <InputAdornment position="start">
-                <IconButton onClick={() => this.setState({ gif: !gif })} edge="start">
-                  <Gif />
-                </IconButton>
-              </InputAdornment>
-            ),
-          }}
-        />
-        {gif ? this.getCarousel() : null}
+        <div className="text-phone-panel">
+          <TextField
+            multiline
+            rowsMax="3"
+            size="small"
+            placeholder={this.state.gif ? 'Search something...' : 'Say something...'}
+            helperText={this.state.newMessage && !this.state.gif ? 'Enter to send' : null}
+            variant="outlined"
+            className="chat-message-box addFocus"
+            value={newMessage}
+            onChange={(e) => {
+              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: (
+                <InputAdornment position="end">
+                  <IconButton
+                    className={`${this.state.gif ? 'gif-active' : ''} ${
+                      this.state.newMessage ? 'message-active' : ''
+                    } message-send`}
+                    size="small"
+                    onClick={() => this.sendMessageInvoker(newMessage)}
+                    edge="end"
+                  >
+                    <Send />
+                  </IconButton>
+                </InputAdornment>
+              ),
+              startAdornment: (
+                <InputAdornment position="start">
+                  <IconButton onClick={() => this.setState({ gif: !gif })} edge="start">
+                    <Gif />
+                  </IconButton>
+                </InputAdornment>
+              ),
+            }}
+          />
+          <IconButton onClick={this.handlePhoneCall} color={onCall ? 'secondary' : 'primary'}>
+            {onCall ? <PhoneDisable /> : <PhoneEnable />}
+          </IconButton>
+          {onCall && !muted ? (
+            <IconButton color="secondary">
+              <MicOff />
+            </IconButton>
+          ) : onCall && muted ? (
+            <IconButton color="primary">
+              <MicOn />
+            </IconButton>
+          ) : null}
+        </div>
+        {gif ? (
+          <Carousel
+            fetchGifs={this.getCarousel}
+            gifHeight={200}
+            gutter={6}
+            onGifClick={this.gifClick}
+            hideAttribution
+          />
+        ) : null}
       </div>
     );
   }