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 Inactive from './Inactive';
import { getUserUid } from './Api';
import Chat from './Chat';
const darkTheme = createMuiTheme({
palette: {
@@ -19,7 +20,7 @@ const darkTheme = createMuiTheme({
const Routes = (props) => (
<Router>
<Create {...props} />
<Chat {...props} />
</Router>
);
@@ -33,7 +34,7 @@ const App = () => {
useEffect(() => {
setLoading(true);
getUserUid();
// getUserUid();
firebase
.firestore()
.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 Share from '@material-ui/icons/Share';
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 { Carousel } from '@giphy/react-components';
import { GiphyFetch } from '@giphy/js-fetch-api';
@@ -44,18 +48,21 @@ export default class Chat extends Component {
newMessage: '',
admin: null,
gif: false,
onCall: false,
muted: false,
};
this.sendMessage = this.sendMessage.bind(this);
this.sendMessageInvoker = this.sendMessageInvoker.bind(this);
this.port = null;
this.gifClick = this.gifClick.bind(this);
this.endParty = this.endParty.bind(this);
this.leaveParty = this.leaveParty.bind(this);
this.shareParty = this.shareParty.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.mVideoListener = new VideoListener(this.videoEventListener);
this.port = null;
this.getCarousel = this.getCarousel.bind(this);
this.gifClick = this.gifClick.bind(this);
}
componentDidMount() {
// EVENT CAPTURE FOR ENTER TO SEND
@@ -75,24 +82,24 @@ export default class Chat extends Component {
this.mVideoListener.start();
// CHROME FIREBASE FIRESTORE LISTENER
this.port = chrome.runtime.connect({ name: window.localStorage.getItem('watchPartyRoomId') });
// Initialize listener
this.port.postMessage({
type: 'INIT',
roomId: window.localStorage.getItem('watchPartyRoomId'),
});
// Listener
this.port.onMessage.addListener((response) => {
if (response.isError === true) {
this.props.notify('Uh oh. Got lost from the party.');
goTo(Create, this.props);
return;
}
this.setState(response);
if (response.player) this.mVideoListener.doUpdate(response.player);
const pcc = document.getElementsByClassName('thread-container')[0];
if (pcc) pcc.scrollTop = pcc.scrollHeight;
});
// this.port = chrome.runtime.connect({ name: window.localStorage.getItem('watchPartyRoomId') });
// // Initialize listener
// this.port.postMessage({
// type: 'INIT',
// roomId: window.localStorage.getItem('watchPartyRoomId'),
// });
// // Listener
// this.port.onMessage.addListener((response) => {
// if (response.isError === true) {
// this.props.notify('Uh oh. Got lost from the party.');
// goTo(Create, this.props);
// return;
// }
// this.setState(response);
// if (response.player) this.mVideoListener.doUpdate(response.player);
// const pcc = document.getElementsByClassName('thread-container')[0];
// if (pcc) pcc.scrollTop = pcc.scrollHeight;
// });
// DONE WITH MOUNTING TASKS
this.props.updateLoading(false);
@@ -201,21 +208,31 @@ export default class Chat extends Component {
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
/>
);
getCarousel(offset) {
return this.state.newMessage === ''
? giphyFetch.trending({ offset, limit: 1 })
: giphyFetch.search(this.state.newMessage, { offset, limit: 1 });
}
handlePhoneCall() {
if (!this.state.onCall) {
navigator.mediaDevices
.getUserMedia({
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() {
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)
messages.unshift(alertMessage);
return (
@@ -238,7 +255,7 @@ export default class Chat extends Component {
</Button>
{admin && (
<Button onClick={this.endParty} startIcon={<Delete />}>
{/* <span className="party-control-button-text">End Party</span> */}
<span className="party-control-button-text">End</span>
</Button>
)}
</ButtonGroup>
@@ -246,34 +263,70 @@ export default class Chat extends Component {
<div className="thread-container">
<Thread messages={messages} />
</div>
<TextField
multiline
rowsMax="3"
size="small"
placeholder="New message... (Enter to send)"
variant="outlined"
className="chat-message-box addFocus"
value={newMessage}
onChange={(e) => this.setState({ newMessage: e.target.value, gif: false })}
InputProps={{
id: 'chat-message-box-input',
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={() => this.sendMessageInvoker(newMessage)} 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 className="text-phone-panel">
<TextField
multiline
rowsMax="3"
size="small"
placeholder={this.state.gif ? 'Search something...' : 'Say something...'}
helperText={this.state.newMessage && !this.state.gif ? 'Enter to send' : null}
variant="outlined"
className="chat-message-box addFocus"
value={newMessage}
onChange={(e) => {
this.setState({ newMessage: e.target.value });
if (this.state.gif) {
const carousel = document.querySelector('.giphy-carousel');
setTimeout(() => carousel.scroll(carousel.scrollWidth, carousel.scrollHeight), 250);
}
}}
InputProps={{
id: 'chat-message-box-input',
endAdornment: (
<InputAdornment position="end">
<IconButton
className={`${this.state.gif ? 'gif-active' : ''} ${
this.state.newMessage ? 'message-active' : ''
} message-send`}
size="small"
onClick={() => this.sendMessageInvoker(newMessage)}
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>
);
}
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 { Typography } from '@material-ui/core';
import './Thread.css';
import firebase from 'firebase/app';
import 'firebase/firestore';
const Thread = (props) =>
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 {
margin-right: 8px !important;
}
.giphy-carousel::before {
position: relative;
bottom: 40%;
content: url('./Giphy.png');
}
.giphy-carousel {
margin-top: 1rem;
min-height: fit-content;
@@ -283,9 +288,11 @@ textarea::-webkit-scrollbar {
border-radius: 1rem;
transform: scale(0.85);
transition: all ease-in-out 0.2s;
opacity: 0.7;
}
.giphy-carousel img:hover {
transform: scale(0.95);
opacity: 1;
transform: scale(0.9);
}
.giphy-carousel::-webkit-scrollbar {
@@ -300,3 +307,17 @@ textarea::-webkit-scrollbar {
background-color: rgb(118, 182, 255);
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;
}