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>
     );
   }

src/Thread.css

@@ -30,6 +30,14 @@
   word-wrap: break-word;
   background-color: rgb(49, 49, 49);
 }
+img.my-message {
+  margin-right: 0 !important;
+  padding-right: 0 !important;
+  border-radius: 1rem;
+  max-width: 60%;
+  background: none;
+  border-radius: 2rem;
+}
 .party-message {
   font-size: 0.75rem !important;
   display: block;
@@ -41,6 +49,10 @@
   border-radius: 13px;
   background-color: rgb(88, 88, 88);
 }
+img.party-message {
+  margin-left: 0 !important;
+  padding-left: 0 !important;
+}
 .thread-item .name {
   color: rgb(149, 149, 149);
   font-size: 10px !important;

src/Thread.js

@@ -19,9 +19,13 @@ const Thread = (props) =>
           }`}
           key={m.id}
         >
-          <Typography variant="body1" className="my-message">
-            {m.text}
-          </Typography>
+          {m.type === 'giphy' ? (
+            <img className="my-message" alt="giphy gif" src={m.text} />
+          ) : (
+            <Typography variant="body1" className="my-message">
+              {m.text}
+            </Typography>
+          )}
           <span className="time">{new Date(m.time).toLocaleTimeString()}</span>
         </div>
       );
@@ -36,9 +40,13 @@ const Thread = (props) =>
           <Typography variant="caption" className="name">
             {midx > 0 ? (props.messages[midx - 1].uid !== m.uid ? m.name : '') : m.name}
           </Typography>
-          <Typography variant="body1" className="party-message">
-            {m.text}
-          </Typography>
+          {m.type === 'giphy' ? (
+            <img className="party-message" alt="giphy gif" src={m.text} />
+          ) : (
+            <Typography variant="body1" className="party-message">
+              {m.text}
+            </Typography>
+          )}
           <span className="time">{new Date(m.time).toLocaleTimeString()}</span>
         </div>
       );

src/index.css

@@ -236,3 +236,28 @@ textarea::-webkit-scrollbar {
 .party-controls button:hover .party-control-button-text {
   display: initial;
 }
+.giphy-carousel {
+  margin-top: 1rem;
+  min-height: fit-content;
+}
+.giphy-carousel img {
+  border-radius: 1rem;
+  transform: scale(0.85);
+  transition: all ease-in-out 0.2s;
+}
+.giphy-carousel img:hover {
+  transform: scale(0.95);
+}
+
+.giphy-carousel::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+.giphy-carousel::-webkit-scrollbar-track {
+  background-color: rgb(90, 90, 90);
+  border-radius: 1rem;
+}
+.giphy-carousel::-webkit-scrollbar-thumb {
+  background-color: rgb(118, 182, 255);
+  border-radius: 13px;
+}