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

v1.2.1-beta/fix gifs and add attribution

Browse Source
This commit is contained in:
Ayushya Amitabh
2020-05-26 18:27:55 -04:00
parent ab13a67d08
commit 7769a2fd73
5 changed files with 143 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/App.js
+3 -2
View File
@@ -7,6 +7,7 @@ import firebase from 'firebase/app';
import 'firebase/firestore'; import 'firebase/firestore';
import Inactive from './Inactive'; import Inactive from './Inactive';
import { getUserUid } from './Api'; import { getUserUid } from './Api';
import Chat from './Chat';
const darkTheme = createMuiTheme({ const darkTheme = createMuiTheme({
palette: { palette: {
@@ -19,7 +20,7 @@ const darkTheme = createMuiTheme({
const Routes = (props) => ( const Routes = (props) => (
<Router> <Router>
<Create {...props} /> <Chat {...props} />
</Router> </Router>
); );
@@ -33,7 +34,7 @@ const App = () => {
useEffect(() => { useEffect(() => {
setLoading(true); setLoading(true);
getUserUid(); // getUserUid();
firebase firebase
.firestore() .firestore()
.collection('server') .collection('server')
app/src/Chat.js
+118 -65
View File
@@ -13,6 +13,10 @@ import Send from '@material-ui/icons/Send';
import Exit from '@material-ui/icons/ExitToApp'; import Exit from '@material-ui/icons/ExitToApp';
import Share from '@material-ui/icons/Share'; import Share from '@material-ui/icons/Share';
import Delete from '@material-ui/icons/Delete'; import Delete from '@material-ui/icons/Delete';
import PhoneEnable from '@material-ui/icons/CallRounded';
import PhoneDisable from '@material-ui/icons/CallEndRounded';
import MicOff from '@material-ui/icons/MicOff';
import MicOn from '@material-ui/icons/Mic';
import Gif from '@material-ui/icons/Gif'; import Gif from '@material-ui/icons/Gif';
import { Carousel } from '@giphy/react-components'; import { Carousel } from '@giphy/react-components';
import { GiphyFetch } from '@giphy/js-fetch-api'; import { GiphyFetch } from '@giphy/js-fetch-api';
@@ -44,18 +48,21 @@ export default class Chat extends Component {
newMessage: '', newMessage: '',
admin: null, admin: null,
gif: false, gif: false,
onCall: false,
muted: false,
}; };
this.sendMessage = this.sendMessage.bind(this); this.port = null;
this.sendMessageInvoker = this.sendMessageInvoker.bind(this); this.gifClick = this.gifClick.bind(this);
this.endParty = this.endParty.bind(this); this.endParty = this.endParty.bind(this);
this.leaveParty = this.leaveParty.bind(this); this.leaveParty = this.leaveParty.bind(this);
this.shareParty = this.shareParty.bind(this); this.shareParty = this.shareParty.bind(this);
this.syncPlayer = this.syncPlayer.bind(this); this.syncPlayer = this.syncPlayer.bind(this);
this.sendMessage = this.sendMessage.bind(this);
this.getCarousel = this.getCarousel.bind(this);
this.handlePhoneCall = this.handlePhoneCall.bind(this);
this.sendMessageInvoker = this.sendMessageInvoker.bind(this);
this.videoEventListener = this.videoEventListener.bind(this); this.videoEventListener = this.videoEventListener.bind(this);
this.mVideoListener = new VideoListener(this.videoEventListener); this.mVideoListener = new VideoListener(this.videoEventListener);
this.port = null;
this.getCarousel = this.getCarousel.bind(this);
this.gifClick = this.gifClick.bind(this);
} }
componentDidMount() { componentDidMount() {
// EVENT CAPTURE FOR ENTER TO SEND // EVENT CAPTURE FOR ENTER TO SEND
@@ -75,24 +82,24 @@ export default class Chat extends Component {
this.mVideoListener.start(); this.mVideoListener.start();
// CHROME FIREBASE FIRESTORE LISTENER // CHROME FIREBASE FIRESTORE LISTENER
this.port = chrome.runtime.connect({ name: window.localStorage.getItem('watchPartyRoomId') }); // this.port = chrome.runtime.connect({ name: window.localStorage.getItem('watchPartyRoomId') });
// Initialize listener // // Initialize listener
this.port.postMessage({ // this.port.postMessage({
type: 'INIT', // type: 'INIT',
roomId: window.localStorage.getItem('watchPartyRoomId'), // roomId: window.localStorage.getItem('watchPartyRoomId'),
}); // });
// Listener // // Listener
this.port.onMessage.addListener((response) => { // this.port.onMessage.addListener((response) => {
if (response.isError === true) { // if (response.isError === true) {
this.props.notify('Uh oh. Got lost from the party.'); // this.props.notify('Uh oh. Got lost from the party.');
goTo(Create, this.props); // goTo(Create, this.props);
return; // return;
} // }
this.setState(response); // this.setState(response);
if (response.player) this.mVideoListener.doUpdate(response.player); // if (response.player) this.mVideoListener.doUpdate(response.player);
const pcc = document.getElementsByClassName('thread-container')[0]; // const pcc = document.getElementsByClassName('thread-container')[0];
if (pcc) pcc.scrollTop = pcc.scrollHeight; // if (pcc) pcc.scrollTop = pcc.scrollHeight;
}); // });
// DONE WITH MOUNTING TASKS // DONE WITH MOUNTING TASKS
this.props.updateLoading(false); this.props.updateLoading(false);
@@ -201,21 +208,31 @@ export default class Chat extends Component {
ev.preventDefault(); ev.preventDefault();
this.sendMessageInvoker(iGif.images.original.url); this.sendMessageInvoker(iGif.images.original.url);
} }
getCarousel() { getCarousel(offset) {
const trendingFetch = (offset) => giphyFetch.trending({ offset, limit: 5 }); return this.state.newMessage === ''
const searchFetch = (offset) => giphyFetch.search(this.state.newMessage, { offset, limit: 5 }); ? giphyFetch.trending({ offset, limit: 1 })
return ( : giphyFetch.search(this.state.newMessage, { offset, limit: 1 });
<Carousel }
fetchGifs={this.state.newMessage === '' ? trendingFetch : searchFetch} handlePhoneCall() {
gifHeight={200} if (!this.state.onCall) {
gutter={6} navigator.mediaDevices
onGifClick={this.gifClick} .getUserMedia({
hideAttribution video: false,
/> audio: true,
); })
.then((mediaStream) => {
this.setState({ onCall: true, muted: false });
console.log('GOT DEVICE');
})
.catch((err) => {
console.error(err);
});
} else {
this.setState({ onCall: false });
}
} }
render() { render() {
const { admin, name, messages, newMessage, gif } = this.state; const { admin, name, messages, newMessage, gif, onCall, muted } = this.state;
if (getPlayerSource() === PLAYER_SOURCE.HBONOW && messages[0] !== alertMessage) if (getPlayerSource() === PLAYER_SOURCE.HBONOW && messages[0] !== alertMessage)
messages.unshift(alertMessage); messages.unshift(alertMessage);
return ( return (
@@ -238,7 +255,7 @@ export default class Chat extends Component {
</Button> </Button>
{admin && ( {admin && (
<Button onClick={this.endParty} startIcon={<Delete />}> <Button onClick={this.endParty} startIcon={<Delete />}>
{/* <span className="party-control-button-text">End Party</span> */} <span className="party-control-button-text">End</span>
</Button> </Button>
)} )}
</ButtonGroup> </ButtonGroup>
@@ -246,34 +263,70 @@ export default class Chat extends Component {
<div className="thread-container"> <div className="thread-container">
<Thread messages={messages} /> <Thread messages={messages} />
</div> </div>
<TextField <div className="text-phone-panel">
multiline <TextField
rowsMax="3" multiline
size="small" rowsMax="3"
placeholder="New message... (Enter to send)" size="small"
variant="outlined" placeholder={this.state.gif ? 'Search something...' : 'Say something...'}
className="chat-message-box addFocus" helperText={this.state.newMessage && !this.state.gif ? 'Enter to send' : null}
value={newMessage} variant="outlined"
onChange={(e) => this.setState({ newMessage: e.target.value, gif: false })} className="chat-message-box addFocus"
InputProps={{ value={newMessage}
id: 'chat-message-box-input', onChange={(e) => {
endAdornment: ( this.setState({ newMessage: e.target.value });
<InputAdornment position="end"> if (this.state.gif) {
<IconButton onClick={() => this.sendMessageInvoker(newMessage)} edge="end"> const carousel = document.querySelector('.giphy-carousel');
<Send /> setTimeout(() => carousel.scroll(carousel.scrollWidth, carousel.scrollHeight), 250);
</IconButton> }
</InputAdornment> }}
), InputProps={{
startAdornment: ( id: 'chat-message-box-input',
<InputAdornment position="start"> endAdornment: (
<IconButton onClick={() => this.setState({ gif: !gif })} edge="start"> <InputAdornment position="end">
<Gif /> <IconButton
</IconButton> className={`${this.state.gif ? 'gif-active' : ''} ${
</InputAdornment> this.state.newMessage ? 'message-active' : ''
), } message-send`}
}} size="small"
/> onClick={() => this.sendMessageInvoker(newMessage)}
{gif ? this.getCarousel() : null} edge="end"
>
<Send />
</IconButton>
</InputAdornment>
),
startAdornment: (
<InputAdornment position="start">
<IconButton onClick={() => this.setState({ gif: !gif })} edge="start">
<Gif />
</IconButton>
</InputAdornment>
),
}}
/>
<IconButton onClick={this.handlePhoneCall} color={onCall ? 'secondary' : 'primary'}>
{onCall ? <PhoneDisable /> : <PhoneEnable />}
</IconButton>
{onCall && !muted ? (
<IconButton color="secondary">
<MicOff />
</IconButton>
) : onCall && muted ? (
<IconButton color="primary">
<MicOn />
</IconButton>
) : null}
</div>
{gif ? (
<Carousel
fetchGifs={this.getCarousel}
gifHeight={200}
gutter={6}
onGifClick={this.gifClick}
hideAttribution
/>
) : null}
</div> </div>
); );
} }
app/src/Giphy.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

app/src/Thread.js
-2
View File
@@ -1,8 +1,6 @@
import React from 'react'; import React from 'react';
import { Typography } from '@material-ui/core'; import { Typography } from '@material-ui/core';
import './Thread.css'; import './Thread.css';
import firebase from 'firebase/app';
import 'firebase/firestore';
const Thread = (props) => const Thread = (props) =>
props.messages.map((m, midx) => { props.messages.map((m, midx) => {
app/src/index.css
+22 -1
View File
@@ -275,6 +275,11 @@ textarea::-webkit-scrollbar {
.party-controls button:hover .MuiButton-startIcon { .party-controls button:hover .MuiButton-startIcon {
margin-right: 8px !important; margin-right: 8px !important;
} }
.giphy-carousel::before {
position: relative;
bottom: 40%;
content: url('./Giphy.png');
}
.giphy-carousel { .giphy-carousel {
margin-top: 1rem; margin-top: 1rem;
min-height: fit-content; min-height: fit-content;
@@ -283,9 +288,11 @@ textarea::-webkit-scrollbar {
border-radius: 1rem; border-radius: 1rem;
transform: scale(0.85); transform: scale(0.85);
transition: all ease-in-out 0.2s; transition: all ease-in-out 0.2s;
opacity: 0.7;
} }
.giphy-carousel img:hover { .giphy-carousel img:hover {
transform: scale(0.95); opacity: 1;
transform: scale(0.9);
} }
.giphy-carousel::-webkit-scrollbar { .giphy-carousel::-webkit-scrollbar {
@@ -300,3 +307,17 @@ textarea::-webkit-scrollbar {
background-color: rgb(118, 182, 255); background-color: rgb(118, 182, 255);
border-radius: 13px; border-radius: 13px;
} }
.message-send svg {
transform: scale(0.55);
transition: all ease 0.5s !important;
}
.message-active svg {
transform: rotate(-90deg) scale(0.75);
}
.message-send.gif-active {
display: none !important;
}
.text-phone-panel {
display: flex;
align-items: center;
}