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>

app/src/Create.js

@@ -27,6 +27,7 @@ import {
   LocalData,
   updateLocalData,
   getUserUid,
+  emptyLocalData,
 } from './Api';
 import { goTo } from 'route-lite';
 import Chat from './Chat';
@@ -171,6 +172,7 @@ export default class Create extends Component {
         }
       })
       .catch((err) => {
+        emptyLocalData();
         console.error('Join Party API Error', err);
         this.props.notify(err.message || 'Something went wrong');
         this.props.updateLoading(false);

app/src/index.css

@@ -155,6 +155,7 @@ body.peacock.visible .playback-header__container {
 /* GOOGLE PLAY STYLING */
 body.googleplay.visible {
   overflow: hidden;
+  -webkit-font-smoothing: initial !important;
 }
 body.googleplay.visible div.llhEMd.bYEzqc.LAhoGb.iWO5td > div.mjANdc.eEPege {
   padding: 0 !important;
@@ -511,40 +512,6 @@ textarea::-webkit-scrollbar {
   color: inherit !important;
   font-size: 10px !important;
 }
-
-.giphy-carousel::before {
-  position: relative;
-  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;
-  transform: scale(0.85);
-  transition: all ease-in-out 0.2s;
-  opacity: 0.7;
-}
-.giphy-carousel img:hover {
-  opacity: 1;
-  transform: scale(0.9);
-}
-
-.giphy-carousel::-webkit-scrollbar {
-  width: 5px;
-  height: 12px;
-}
-.giphy-carousel::-webkit-scrollbar-track {
-  background-color: rgb(90, 90, 90);
-}
-.giphy-carousel::-webkit-scrollbar-thumb {
-  background-color: #c0f300;
-  border-radius: 13px;
-}
 .message-send svg {
   transform: scale(0.55);
   transition: all ease 0.5s !important;
@@ -568,18 +535,24 @@ textarea::-webkit-scrollbar {
 }
 .text-phone-panel .gif-button.gif-close {
   padding: 12px 0 !important;
+  max-height: 100%;
+  margin-left: -5px;
 }
 .text-phone-panel .gif-button {
   border-radius: 0 !important;
   height: 1.75em !important;
+  padding: 0 6px;
+  border-radius: 26px !important;
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
 }
 .text-phone-panel .gif-button svg {
-  width: 1.75em !important;
-  height: 1.75em !important;
+  width: 32px !important;
+  height: 32px !important;
 }
 .text-phone-panel .gif-button.gif-close svg {
-  width: 2em !important;
-  height: 1.5em !important;
+  height: 25px !important;
+  width: 25px !important;
 }
 
 .MuiTooltip-popper {
@@ -732,3 +705,59 @@ body.amazon-prime .notification-switch .MuiSwitch-thumb {
 .replying-to-card button {
   align-self: flex-start;
 }
+.giphy-list-wrapper {
+  max-height: 350px !important;
+  overflow-y: auto !important;
+  overflow-x: hidden;
+  padding: 15px;
+}
+
+.giphy-search-form {
+  height: 0;
+  width: 0;
+  overflow: hidden;
+}
+
+button.giphy-list-item {
+  display: inline-block;
+  position: relative !important;
+  max-width: 49%;
+  height: fit-content;
+  vertical-align: top;
+  width: 50%;
+  top: unset !important;
+  overflow: hidden;
+  background: unset !important;
+  left: unset !important;
+  cursor: pointer;
+  outline: none !important;
+  border: none !important;
+}
+
+.giphy-list-item img {
+  height: 100%;
+  margin: 5px;
+  width: 100%;
+  max-width: 100%;
+}
+
+.giphy-wrapper > div:nth-child(3) {
+  position: absolute;
+  bottom: 0;
+  color: black;
+  background: #1b1b1b;
+  padding: 5px 15px;
+  padding-right: 25px;
+  border-top-right-radius: 26px;
+  padding-top: 15px;
+}
+.giphy-wrapper > div:nth-child(3) > img {
+  filter: invert(1);
+  mix-blend-mode: screen;
+  vertical-align: unset;
+  max-height: 20px;
+}
+
+.giphy-wrapper > .giphy-list-wrapper > div > div:nth-child(1) {
+  width: 100% !important;
+}