diff --git a/functions/index.js b/functions/index.js index ff97443..36afdad 100644 --- a/functions/index.js +++ b/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); diff --git a/package-lock.json b/package-lock.json index bdb2a2a..2edd3fb 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 33e7fb9..63eaa87 100644 --- a/package.json +++ b/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", diff --git a/public/index.html b/public/index.html index 22744a7..149ea04 100644 --- a/public/index.html +++ b/public/index.html @@ -3,5 +3,6 @@
+
diff --git a/src/Chat.js b/src/Chat.js index ee1f037..f14569b 100644 --- a/src/Chat.js +++ b/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 ( + + ); + } render() { - const { admin, name, messages, newMessage } = this.state; + const { admin, name, messages, newMessage, gif } = this.state; return (
@@ -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: ( - + ), + startAdornment: ( + + this.setState({ gif: !gif })} edge="start"> + + + + ), }} /> + {gif ? this.getCarousel() : null}
); } diff --git a/src/Thread.css b/src/Thread.css index cd5dfe8..54fe1b5 100644 --- a/src/Thread.css +++ b/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; diff --git a/src/Thread.js b/src/Thread.js index 22c8545..18dcbd3 100644 --- a/src/Thread.js +++ b/src/Thread.js @@ -19,9 +19,13 @@ const Thread = (props) => }`} key={m.id} > - - {m.text} - + {m.type === 'giphy' ? ( + giphy gif + ) : ( + + {m.text} + + )} {new Date(m.time).toLocaleTimeString()}
); @@ -36,9 +40,13 @@ const Thread = (props) => {midx > 0 ? (props.messages[midx - 1].uid !== m.uid ? m.name : '') : m.name} - - {m.text} - + {m.type === 'giphy' ? ( + giphy gif + ) : ( + + {m.text} + + )} {new Date(m.time).toLocaleTimeString()} ); diff --git a/src/index.css b/src/index.css index 6a574c5..489269c 100644 --- a/src/index.css +++ b/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; +} diff --git a/website/index.html b/website/index.html index 246b280..a169ecf 100644 --- a/website/index.html +++ b/website/index.html @@ -41,20 +41,23 @@
- + Get Chrome Extension. It's Free. - + WATCH PARTY - + Support Watch Party @@ -139,13 +142,15 @@
- + Get Chrome Extension Help keep Watch Party free - - + Support Watch Party