ayushya/watchparty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.0.1 add giphy, add link to crx

Browse Source
This commit is contained in:
Ayushya Amitabh
2020-04-24 13:52:16 -04:00
parent fd6b8275b0
commit e6ea70e134
9 changed files with 359 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
functions/index.js
+2 -1
View File
@@ -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
Generated
+238
View File
@@ -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
+2
View File
@@ -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
+1
View File
@@ -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
+52 -10
View File
@@ -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
+12
View File
@@ -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
+8
View File
@@ -19,9 +19,13 @@ const Thread = (props) =>
}`}
key={m.id}
>
{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>
{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
+25
View File
@@ -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
+13 -8
View File
@@ -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
class="cta-container support"
href="https://chrome.google.com/webstore/category/extensions"
>
<a class="cta-container support" href="https://www.paypal.me/Ayushya">
<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>