v1.0.1 add giphy, add link to crx

functions/index.js

@@ -222,7 +222,7 @@ const joinRoom = async (req, res) => {
 };
 
 const sendMessage = async (req, res) => {
-  const { name, text, time, uid, roomId } = JSON.parse(req.body);
+  const { name, text, time, uid, roomId, type } = JSON.parse(req.body);
 
   const roomExists = await admin
     .firestore()
@@ -241,6 +241,7 @@ const sendMessage = async (req, res) => {
         text,
         time,
         uid,
+        type,
       })
       .catch((err) => {
         console.error(`Failed to send message to party : \n\t Room: ${roomId} \n\t ${uid}`, err);

package-lock.json

@@ -1169,11 +1169,64 @@
         }
       }
     },
+    "@emotion/cache": {
+      "version": "10.0.29",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",
+      "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==",
+      "requires": {
+        "@emotion/sheet": "0.9.4",
+        "@emotion/stylis": "0.8.5",
+        "@emotion/utils": "0.11.3",
+        "@emotion/weak-memoize": "0.2.5"
+      }
+    },
     "@emotion/hash": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
       "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
     },
+    "@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+    },
+    "@emotion/serialize": {
+      "version": "0.11.16",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
+      "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
+      "requires": {
+        "@emotion/hash": "0.8.0",
+        "@emotion/memoize": "0.7.4",
+        "@emotion/unitless": "0.7.5",
+        "@emotion/utils": "0.11.3",
+        "csstype": "^2.5.7"
+      }
+    },
+    "@emotion/sheet": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz",
+      "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA=="
+    },
+    "@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
+    "@emotion/utils": {
+      "version": "0.11.3",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
+      "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw=="
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+    },
     "@firebase/analytics": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.3.2.tgz",
@@ -1424,6 +1477,89 @@
       "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.2.38.tgz",
       "integrity": "sha512-mp1XmAJsuqaSWm5WQYo7R0zfZWe9EmwMCxsxkKr+ubLOumyNy4NG5aV45hEpFTosQv4myXpiCiS4GFE9mNqLZQ=="
     },
+    "@giphy/js-analytics": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@giphy/js-analytics/-/js-analytics-1.7.3.tgz",
+      "integrity": "sha512-Nx3KGT50qVUEArFAUj61Oj+UAXG4nEkTB1SNl0SIO7XqrVZaN9kN0BqtoST4wOu0T644TG9ATeWK8oJQfWmHqQ==",
+      "requires": {
+        "@giphy/js-types": "^2.0.2",
+        "@giphy/js-util": "^1.9.0",
+        "@types/uuid": "^7.0.0",
+        "append-query": "^2.1.0",
+        "cookie": "0.4.0",
+        "throttle-debounce": "^2.1.0",
+        "uuid": "^7.0.1"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
+          "integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg=="
+        }
+      }
+    },
+    "@giphy/js-brand": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@giphy/js-brand/-/js-brand-1.1.7.tgz",
+      "integrity": "sha512-7EN66ckZRr598gdO4sUBNONvbgC5CXdu6mJU+3kdO9hFhV4Ue7m7y/8jcKjnk1+KJ0uDx2pHRrdvq0emMzr90w==",
+      "requires": {
+        "emotion": "10.0.9"
+      }
+    },
+    "@giphy/js-fetch-api": {
+      "version": "1.5.8",
+      "resolved": "https://registry.npmjs.org/@giphy/js-fetch-api/-/js-fetch-api-1.5.8.tgz",
+      "integrity": "sha512-DpJ111n8BHgLlI6g6FeLEj1KWM7rMwaWNGC/An4YkAFVHv74/oGccdl5NH3OvkbgaQHi1tAjZQ7D1/Es0jrVAA==",
+      "requires": {
+        "@giphy/js-types": "^2.0.2",
+        "@giphy/js-util": "^1.9.0",
+        "cookie": "0.4.0",
+        "qs": "^6.7.0"
+      },
+      "dependencies": {
+        "qs": {
+          "version": "6.9.3",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.3.tgz",
+          "integrity": "sha512-EbZYNarm6138UKKq46tdx08Yo/q9ZhFoAXAI1meAFd2GtbRDhbZY2WQSICskT0c5q99aFzLG1D4nvTk9tqfXIw=="
+        }
+      }
+    },
+    "@giphy/js-types": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@giphy/js-types/-/js-types-2.0.2.tgz",
+      "integrity": "sha512-wPKdGoiAWtA7UoFGeae0y/Z5YSQPbWr8C5K4CUumNtA78sh0SWFvrhMq4OWmGJGAOTcMybsXXIclKp1bvwM1PA=="
+    },
+    "@giphy/js-util": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@giphy/js-util/-/js-util-1.9.0.tgz",
+      "integrity": "sha512-LoUrJe3/KX3AUWtf0N8ZzeDxoPeQbX/Yucfx38TxgptTzYToWtYFn+kIhZ09Xfgwm1x5XSCQHVUqKIxhq6uCzg==",
+      "requires": {
+        "@giphy/js-types": "^2.0.2",
+        "dompurify": "^2.0.8"
+      }
+    },
+    "@giphy/moat-loader": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@giphy/moat-loader/-/moat-loader-1.3.0.tgz",
+      "integrity": "sha512-76PGwwB2z+rzlVJ3fceUGoVTvu9z5uNyuergMNSR2N7QvqLq8UUJx+VCwwKk9ts9xkt50XFrU5+lnKMgSQ04Fw=="
+    },
+    "@giphy/react-components": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@giphy/react-components/-/react-components-1.0.4.tgz",
+      "integrity": "sha512-UhKpiBjZyZ+v9mfX9zX2GAbTuIrTKmPdLr7jTs2WAT9/thQaBFW6Cx248Nqi3qDyy+3VkY8ai1JlvnijzTZNkQ==",
+      "requires": {
+        "@giphy/js-analytics": "^1.7.3",
+        "@giphy/js-brand": "^1.1.7",
+        "@giphy/js-fetch-api": "^1.5.8",
+        "@giphy/js-types": "^2.0.2",
+        "@giphy/js-util": "^1.9.0",
+        "@giphy/moat-loader": "1.3.0",
+        "bricks.js": "^1.8.0",
+        "emotion": "10.0.9",
+        "intersection-observer": "^0.7.0",
+        "throttle-debounce": "^2.1.0"
+      }
+    },
     "@grpc/grpc-js": {
       "version": "0.7.5",
       "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-0.7.5.tgz",
@@ -1665,6 +1801,11 @@
         "@types/react": "*"
       }
     },
+    "@types/uuid": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-7.0.3.tgz",
+      "integrity": "sha512-PUdqTZVrNYTNcIhLHkiaYzoOIaUi5LFg/XLerAdgvwQrUCx+oSbtoBze1AMyvYbcwzUSNC+Isl58SM4Sm/6COw=="
+    },
     "@typescript-eslint/eslint-plugin": {
       "version": "2.25.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.25.0.tgz",
@@ -2114,6 +2255,21 @@
         "normalize-path": "^2.0.0"
       }
     },
+    "append-query": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/append-query/-/append-query-2.1.0.tgz",
+      "integrity": "sha512-v9YXX6No91QkRA31IvTjl+1kFU+A0DaOzZpCNR7Q/ZoPSXlo5a4W2eS0qos6AKvCKL4MnNna78xgqIG8NRvQwg==",
+      "requires": {
+        "extend": "^2.0.0"
+      },
+      "dependencies": {
+        "extend": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/extend/-/extend-2.0.2.tgz",
+          "integrity": "sha512-AgFD4VU+lVLP6vjnlNfF7OeInLTyeyckCNPEsuxz1vi786UuK/nk6ynPuhn/h+Ju9++TQyr5EpLRI14fc1QtTQ=="
+        }
+      }
+    },
     "append-transform": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/append-transform/-/append-transform-0.4.0.tgz",
@@ -2564,6 +2720,30 @@
         "object.assign": "^4.1.0"
       }
     },
+    "babel-plugin-emotion": {
+      "version": "10.0.33",
+      "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz",
+      "integrity": "sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@emotion/hash": "0.8.0",
+        "@emotion/memoize": "0.7.4",
+        "@emotion/serialize": "^0.11.16",
+        "babel-plugin-macros": "^2.0.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^1.0.5",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+        }
+      }
+    },
     "babel-plugin-istanbul": {
       "version": "4.1.6",
       "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz",
@@ -2600,6 +2780,11 @@
         }
       }
     },
+    "babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
+    },
     "babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
@@ -2946,6 +3131,14 @@
         "repeat-element": "^1.1.2"
       }
     },
+    "bricks.js": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/bricks.js/-/bricks.js-1.8.0.tgz",
+      "integrity": "sha1-j96zwCJq8lH01XJ6fff5rACStLI=",
+      "requires": {
+        "knot.js": "^1.1.5"
+      }
+    },
     "brorand": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
@@ -4076,6 +4269,17 @@
         "elliptic": "^6.0.0"
       }
     },
+    "create-emotion": {
+      "version": "10.0.27",
+      "resolved": "https://registry.npmjs.org/create-emotion/-/create-emotion-10.0.27.tgz",
+      "integrity": "sha512-fIK73w82HPPn/RsAij7+Zt8eCE8SptcJ3WoRMfxMtjteYxud8GDTKKld7MYwAX2TVhrw29uR1N/bVGxeStHILg==",
+      "requires": {
+        "@emotion/cache": "^10.0.27",
+        "@emotion/serialize": "^0.11.15",
+        "@emotion/sheet": "0.9.4",
+        "@emotion/utils": "0.11.3"
+      }
+    },
     "create-error-class": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/create-error-class/-/create-error-class-3.0.2.tgz",
@@ -4760,6 +4964,11 @@
         "domelementtype": "1"
       }
     },
+    "dompurify": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.0.10.tgz",
+      "integrity": "sha512-ok1dcSztsIuVxWG6Cx0ujyDIzNclz9W9OIU0cOb0IT+VAtSLrOelZF4miUvSm1U4PoCw8D7sIOLCnCQOaVpr3w=="
+    },
     "domutils": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
@@ -4888,6 +5097,15 @@
       "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
       "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q=="
     },
+    "emotion": {
+      "version": "10.0.9",
+      "resolved": "https://registry.npmjs.org/emotion/-/emotion-10.0.9.tgz",
+      "integrity": "sha512-IMFwwWlU2TDt7eh4v6dm58E8VHAYOitqRbVoazQdxIu9/0CAH4a3UrTMnZSlWQAo09MrRRlKfgQFHswnj40meQ==",
+      "requires": {
+        "babel-plugin-emotion": "^10.0.9",
+        "create-emotion": "^10.0.9"
+      }
+    },
     "encodeurl": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
@@ -6065,6 +6283,11 @@
         "pkg-dir": "^1.0.0"
       }
     },
+    "find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "find-up": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
@@ -8142,6 +8365,11 @@
       "integrity": "sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==",
       "dev": true
     },
+    "intersection-observer": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.7.0.tgz",
+      "integrity": "sha512-Id0Fij0HsB/vKWGeBe9PxeY45ttRiBmhFyyt/geBdDHBYNctMRTE3dC1U3ujzz3lap+hVXlEcVaB56kZP/eEUg=="
+    },
     "invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -9120,6 +9348,11 @@
         "is-buffer": "^1.1.5"
       }
     },
+    "knot.js": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/knot.js/-/knot.js-1.1.5.tgz",
+      "integrity": "sha1-KOclIvcD9Q/piBL94iTdcnKP710="
+    },
     "latest-version": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-3.1.0.tgz",
@@ -14268,6 +14501,11 @@
       "resolved": "https://registry.npmjs.org/throat/-/throat-3.2.0.tgz",
       "integrity": "sha512-/EY8VpvlqJ+sFtLPeOgc8Pl7kQVOWv0woD87KTXVHPIAE842FGT+rokxIhe8xIUP1cfgrkt0as0vDLjDiMtr8w=="
     },
+    "throttle-debounce": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.1.0.tgz",
+      "integrity": "sha512-AOvyNahXQuU7NN+VVvOOX+uW6FPaWdAOdRP5HfwYxAfCzXTFKRMoIMk+n+po318+ktcChx+F1Dd91G3YHeMKyg=="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",

package.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@giphy/js-fetch-api": "^1.5.8",
+    "@giphy/react-components": "^1.0.4",
     "@material-ui/core": "^4.9.10",
     "@material-ui/icons": "^4.9.1",
     "autoprefixer": "7.1.6",

public/index.html

@@ -3,5 +3,6 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <div id="giphyroot"></div>
   </body>
 </html>

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 Send from '@material-ui/icons/Send';
-import Exit from '@material-ui/icons/ExitToAppRounded';
+import Exit from '@material-ui/icons/ExitToApp';
-import Share from '@material-ui/icons/ShareRounded';
+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, '');
+            this.sendMessageInvoker();
-            if (trim !== '') this.sendMessage(trim);
-            this.setState({ newMessage: '' });
           }
         }
       }
@@ -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.type === 'giphy' ? (
-            {m.text}
+            <img className="my-message" alt="giphy gif" src={m.text} />
-          </Typography>
+          ) : (
+            <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.type === 'giphy' ? (
-            {m.text}
+            <img className="party-message" alt="giphy gif" src={m.text} />
-          </Typography>
+          ) : (
+            <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;
+}

website/index.html

@@ -41,20 +41,23 @@
     </script>
     <section>
       <div class="page">
-        <a class="cta-container" href="https://chrome.google.com/webstore/category/extensions">
+        <a
+          class="cta-container"
+          href="https://chrome.google.com/webstore/detail/aelhknjjifbfkdclbekleabcokipdicf/publish-accepted-testers?authuser=0&hl=en"
+        >
           <mark class="cta">
             Get Chrome Extension. It's Free.
           </mark>
         </a>
-        <a href="https://chrome.google.com/webstore/category/extensions" class="title">
+        <a
+          href="https://chrome.google.com/webstore/detail/aelhknjjifbfkdclbekleabcokipdicf/publish-accepted-testers?authuser=0&hl=en"
+          class="title"
+        >
           <span>
             WATCH PARTY
           </span>
         </a>
-        <a
+        <a class="cta-container support" href="https://www.paypal.me/Ayushya">
-          class="cta-container support"
-          href="https://chrome.google.com/webstore/category/extensions"
-        >
           <mark class="cta">
             Support Watch Party
           </mark>
@@ -139,13 +142,15 @@
       </div>
       <div>
         <span class="full">
-          <a>
+          <a
+            href="https://chrome.google.com/webstore/detail/aelhknjjifbfkdclbekleabcokipdicf/publish-accepted-testers?authuser=0&hl=en"
+          >
             <mark>Get Chrome Extension</mark>
           </a>
         </span>
         <span>
           Help keep Watch Party free -
-          <a>
+          <a href="https://www.paypal.me/Ayushya">
             <mark>Support Watch Party</mark>
           </a>
         </span>