v1.0.1 add giphy, add link to crx

src/Chat.js

@@ -9,10 +9,13 @@ import {
   Button,
 } from '@material-ui/core';
 import Thread from './Thread';
-import Send from '@material-ui/icons/SendRounded';
-import Exit from '@material-ui/icons/ExitToAppRounded';
-import Share from '@material-ui/icons/ShareRounded';
+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 Gif from '@material-ui/icons/Gif';
+import { Carousel } from '@giphy/react-components';
+import { GiphyFetch } from '@giphy/js-fetch-api';
 import {
   SendMessageApi,
   LeaveRoomApi,
@@ -25,6 +28,7 @@ import { goTo } from 'route-lite';
 import Create from './Create';
 import VideoListener from './VideoListener';
 
+const giphyFetch = new GiphyFetch('meKO7qbULHC9Q26DRGt2yZguIn3LB6z7');
 export default class Chat extends Component {
   constructor(props) {
     super(props);
@@ -35,8 +39,10 @@ export default class Chat extends Component {
       admin: null,
       player: {},
       localPlayer: {},
+      gif: false,
     };
     this.sendMessage = this.sendMessage.bind(this);
+    this.sendMessageInvoker = this.sendMessageInvoker.bind(this);
     this.endParty = this.endParty.bind(this);
     this.leaveParty = this.leaveParty.bind(this);
     this.shareParty = this.shareParty.bind(this);
@@ -44,16 +50,17 @@ export default class Chat extends Component {
     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() {
     window.onkeypress = (ev) => {
       if (ev.code === 'Enter') {
         if (ev.target === document.getElementById('chat-message-box-input')) {
-          if (ev.shiftKey === false) {
+          if (ev.shiftKey === false && this.state.gif === true) ev.preventDefault();
+          if (ev.shiftKey === false && this.state.gif === false) {
             ev.preventDefault();
-            const trim = this.state.newMessage.replace(/^\s+|\s+$/g, '');
-            if (trim !== '') this.sendMessage(trim);
-            this.setState({ newMessage: '' });
+            this.sendMessageInvoker();
           }
         }
       }
@@ -173,14 +180,41 @@ export default class Chat extends Component {
       uid: window.localStorage.getItem('watchPartyUserUid'),
       text: message,
       time: new Date().toISOString(),
+      type: '',
     };
+    if (this.state.gif === true) data.type = 'giphy';
     SendMessageApi(data).catch((err) => {
       this.props.notify(err.message || err.statusText);
       console.error('Send Message API error', err);
     });
   }
+  sendMessageInvoker(overrideMessage) {
+    if (overrideMessage !== null) this.sendMessage(overrideMessage);
+    else {
+      const trim = this.state.newMessage.replace(/^\s+|\s+$/g, '');
+      if (trim !== '') this.sendMessage(trim);
+    }
+    this.setState({ newMessage: '' });
+  }
+  gifClick(iGif, ev) {
+    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
+      />
+    );
+  }
   render() {
-    const { admin, name, messages, newMessage } = this.state;
+    const { admin, name, messages, newMessage, gif } = this.state;
     return (
       <div className="party-chat-container">
         <div className="party-chat-header">
@@ -217,18 +251,26 @@ export default class Chat extends Component {
           variant="outlined"
           className="chat-message-box addFocus"
           value={newMessage}
-          onChange={(e) => this.setState({ newMessage: e.target.value })}
+          onChange={(e) => this.setState({ newMessage: e.target.value, gif: false })}
           InputProps={{
             id: 'chat-message-box-input',
             endAdornment: (
               <InputAdornment position="end">
-                <IconButton edge="end">
+                <IconButton onClick={this.sendMessageInvoker} 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>
     );
   }