v1.6.0/giphy ui overhaul

app/src/Chat.js

@@ -38,8 +38,6 @@ import {
   Paper,
 } from '@material-ui/core';
 import Thread from './Thread';
-import { Carousel } from '@giphy/react-components';
-import { GiphyFetch } from '@giphy/js-fetch-api';
 import {
   SendMessageApi,
   LeaveRoomApi,
@@ -77,8 +75,9 @@ import Create from './Create';
 import { goTo } from 'route-lite';
 import CallManager from './CallManager';
 import VideoListener from './VideoListener';
+import ReactGiphySearchbox from 'react-giphy-searchbox';
 
-const giphyFetch = new GiphyFetch('ojJbIMUN6XRMn4mHiFFav3rMCpXUg8sq');
+// const giphyFetch = new GiphyFetch('ojJbIMUN6XRMn4mHiFFav3rMCpXUg8sq');
 export default class Chat extends Component {
   constructor(props) {
     super(props);
@@ -112,7 +111,6 @@ export default class Chat extends Component {
     this.syncPlayer = this.syncPlayer.bind(this);
     this.setReplyTo = this.setReplyTo.bind(this);
     this.sendMessage = this.sendMessage.bind(this);
-    this.getCarousel = this.getCarousel.bind(this);
     this.updateAdminOnly = this.updateAdminOnly.bind(this);
     this.handlePhoneCall = this.handlePhoneCall.bind(this);
     this.getReplyToContent = this.getReplyToContent.bind(this);
@@ -194,6 +192,12 @@ export default class Chat extends Component {
       if (pcc) pcc.scrollTop = pcc.scrollHeight;
     });
 
+    // GIPHY IPC
+    const giphyInject = `var giphySearchInteraction=function(e){if(e.source===window){const{data}=e;if(data.watchPartyDirection==='TO_SCRIPT'){if(data.type==='WATCH_PARTY_SEARCH_GIF'){const giphyInput=document.querySelector('.giphy-search-form input');if(giphyInput){giphyInput.value=data.value;giphyInput.dispatchEvent(new Event('change',{bubbles:true}))}}}}};window.addEventListener("message",giphySearchInteraction);`;
+    const giphyInjectScript = document.createElement('script');
+    giphyInjectScript.text = giphyInject;
+    document.head.appendChild(giphyInjectScript);
+
     // DONE WITH MOUNTING TASKS
     this.props.updateLoading(false);
   }
@@ -323,15 +327,9 @@ export default class Chat extends Component {
     }
     this.setState({ newMessage: '' });
   }
-  gifClick(iGif, ev) {
-    ev.preventDefault();
+  gifClick(iGif) {
     this.sendMessageInvoker(iGif.images.original.url);
   }
-  getCarousel(offset) {
-    return this.state.newMessage === ''
-      ? giphyFetch.trending({ offset, limit: 1 })
-      : giphyFetch.search(this.state.newMessage, { offset, limit: 1 });
-  }
   handlePhoneCall() {
     const { onCall, conference, admin, adminOnly } = this.state;
     if (window.navigator && onCall === false) {
@@ -770,9 +768,12 @@ export default class Chat extends Component {
             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);
+              if (gif) {
+                window.postMessage({
+                  watchPartyDirection: 'TO_SCRIPT',
+                  type: 'WATCH_PARTY_SEARCH_GIF',
+                  value: e.target.value,
+                });
               }
             }}
             InputProps={{
@@ -806,12 +807,17 @@ export default class Chat extends Component {
           />
         </div>
         {gif ? (
-          <Carousel
-            fetchGifs={this.getCarousel}
-            gifHeight={200}
-            gutter={6}
-            onGifClick={this.gifClick}
-            hideAttribution
+          <ReactGiphySearchbox 
+            apiKey="ojJbIMUN6XRMn4mHiFFav3rMCpXUg8sq"
+            onSelect={this.gifClick}
+            masonryConfig={[
+              { columns: 2, imageWidth: '50%', gutter: 5 },
+            ]}
+            searchFormClassName="giphy-search-form"
+            wrapperClassName="giphy-wrapper"
+            listWrapperClassName="giphy-list-wrapper"
+            listItemClassName="giphy-list-item"
+            poweredByGiphy
           />
         ) : null}
       </div>