v1.2.0-beta/fix file structure
This commit is contained in:
Ayushya Amitabh
+280
@@ -0,0 +1,280 @@
|
||||
/*global chrome */
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
Typography,
|
||||
TextField,
|
||||
InputAdornment,
|
||||
IconButton,
|
||||
ButtonGroup,
|
||||
Button,
|
||||
} from '@material-ui/core';
|
||||
import Thread from './Thread';
|
||||
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,
|
||||
DeleteRoomApi,
|
||||
UpdatePlayerApi,
|
||||
getPlayerSource,
|
||||
PLAYER_SOURCE,
|
||||
} from './Api';
|
||||
import { goTo } from 'route-lite';
|
||||
import Create from './Create';
|
||||
import VideoListener from './VideoListener';
|
||||
|
||||
const giphyFetch = new GiphyFetch('ojJbIMUN6XRMn4mHiFFav3rMCpXUg8sq');
|
||||
const alertMessage = {
|
||||
name: '<alert>',
|
||||
text: 'Functionality may be buggy, support on this site is in beta.',
|
||||
time: '',
|
||||
uid: '<system>',
|
||||
};
|
||||
export default class Chat extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
name: '',
|
||||
messages: [],
|
||||
newMessage: '',
|
||||
admin: null,
|
||||
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);
|
||||
this.syncPlayer = this.syncPlayer.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
|
||||
window.onkeypress = (ev) => {
|
||||
if (ev.code === 'Enter') {
|
||||
if (ev.target === document.getElementById('chat-message-box-input')) {
|
||||
if (ev.shiftKey === false && this.state.gif === true) ev.preventDefault();
|
||||
if (ev.shiftKey === false && this.state.gif === false) {
|
||||
ev.preventDefault();
|
||||
this.sendMessageInvoker();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// VIDEO LISTENER START
|
||||
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;
|
||||
});
|
||||
|
||||
// DONE WITH MOUNTING TASKS
|
||||
this.props.updateLoading(false);
|
||||
}
|
||||
componentWillUnmount() {
|
||||
this.mVideoListener.end();
|
||||
}
|
||||
videoEventListener(video) {
|
||||
this.syncPlayer(video);
|
||||
}
|
||||
syncPlayer(video) {
|
||||
const { status, showName, time, source, element, showChanged } = video;
|
||||
if (element) {
|
||||
UpdatePlayerApi({
|
||||
roomId: window.localStorage.getItem('watchPartyRoomId'),
|
||||
showChanged,
|
||||
userName: window.localStorage.getItem('watchPartyUserName'),
|
||||
player: {
|
||||
status,
|
||||
showName,
|
||||
time,
|
||||
source,
|
||||
updatedBy: window.localStorage.getItem('watchPartyUserUid'),
|
||||
},
|
||||
}).catch((err) => {
|
||||
this.props.updateLoading(false);
|
||||
this.props.notify(err.message || err.statusText);
|
||||
console.error('Sync Party API error', err);
|
||||
});
|
||||
} else {
|
||||
this.mVideoListener.start();
|
||||
}
|
||||
}
|
||||
endParty() {
|
||||
this.props.notify('Ending party...');
|
||||
this.props.updateLoading(true);
|
||||
const data = {
|
||||
roomId: window.localStorage.getItem('watchPartyRoomId'),
|
||||
};
|
||||
DeleteRoomApi(data)
|
||||
.then((res) => {
|
||||
this.props.notify('Ended party');
|
||||
window.localStorage.removeItem('watchPartyRoomId');
|
||||
goTo(Create, this.props);
|
||||
this.props.updateLoading(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
this.props.updateLoading(false);
|
||||
this.props.notify(err.message || err.statusText);
|
||||
console.error('End Party API error', err);
|
||||
});
|
||||
}
|
||||
leaveParty() {
|
||||
this.props.notify('Leaving party...');
|
||||
this.props.updateLoading(true);
|
||||
const data = {
|
||||
roomId: window.localStorage.getItem('watchPartyRoomId'),
|
||||
uid: window.localStorage.getItem('watchPartyUserUid'),
|
||||
};
|
||||
LeaveRoomApi(data)
|
||||
.then((res) => {
|
||||
this.props.notify('Left party');
|
||||
window.localStorage.removeItem('watchPartyRoomId');
|
||||
goTo(Create, this.props);
|
||||
this.props.updateLoading(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
this.props.updateLoading(false);
|
||||
this.props.notify(err.message || err.statusText);
|
||||
console.error('End Party API error', err);
|
||||
});
|
||||
}
|
||||
shareParty() {
|
||||
const el = document.createElement('textarea');
|
||||
el.value = window.localStorage.getItem('watchPartyRoomId');
|
||||
document.body.appendChild(el);
|
||||
el.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(el);
|
||||
this.props.notify('Copied room code');
|
||||
}
|
||||
sendMessage(message) {
|
||||
const data = {
|
||||
roomId: window.localStorage.getItem('watchPartyRoomId'),
|
||||
name: window.localStorage.getItem('watchPartyUserName'),
|
||||
uid: window.localStorage.getItem('watchPartyUserUid'),
|
||||
text: message,
|
||||
time: new Date(),
|
||||
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) 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, gif } = this.state;
|
||||
if (getPlayerSource() === PLAYER_SOURCE.HBONOW && messages[0] !== alertMessage)
|
||||
messages.unshift(alertMessage);
|
||||
return (
|
||||
<div className="party-chat-container">
|
||||
<div className="party-chat-header">
|
||||
<div className="party-chat-header-text">
|
||||
<Typography className="brand-title" variant="overline" display="block">
|
||||
WATCH PARTY
|
||||
</Typography>
|
||||
<Typography className="room-title" variant="h4" gutterBottom>
|
||||
{name}
|
||||
</Typography>
|
||||
</div>
|
||||
<ButtonGroup className="party-controls" size="small" color="secondary">
|
||||
<Button onClick={this.shareParty} startIcon={<Share />}>
|
||||
<span className="party-control-button-text">Share</span>
|
||||
</Button>
|
||||
<Button onClick={this.leaveParty} startIcon={<Exit />}>
|
||||
<span className="party-control-button-text">Leave</span>
|
||||
</Button>
|
||||
{admin && (
|
||||
<Button onClick={this.endParty} startIcon={<Delete />}>
|
||||
{/* <span className="party-control-button-text">End Party</span> */}
|
||||
</Button>
|
||||
)}
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user