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

v1.4.3/members and version handling

Browse Source
This commit is contained in:
ayushya
2020-07-19 03:27:05 -04:00
parent 21ac7e2f3f
commit c80121bf25
7 changed files with 64 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/App.js
+10 -7
View File
@@ -26,7 +26,8 @@ import 'firebase/firestore';
import Inactive from './Inactive';
import { getUserUid, getPlayerSource, PLAYER_SOURCE } from './Api';
const APP_VERSION = '1.4.0';
const APP_VERSION = '1.4.3';
const APP_VERSION_STRING = APP_VERSION.replace(/\./g, '');
const darkTheme = createMuiTheme({
palette: {
@@ -55,10 +56,6 @@ const Routes = (props) => (
</Router>
);
const wrongVersionStatus = {
message: `Looks like Watch Party needs to update.\nGo to chrome://extensions to manually update.\nExpected version v${APP_VERSION}`,
};
const App = () => {
const closedNotification = { open: false, message: '' };
@@ -129,13 +126,19 @@ const App = () => {
<div className="party-content-wrapper">
<div id="party-routes-wrapper">
{loading && <Loading />}
{status.active2 && status.version === APP_VERSION ? (
{status[APP_VERSION_STRING] && status[APP_VERSION_STRING].active === true ? (
<Routes
updateLoading={setLoading}
notify={(message) => setNotification({ open: true, message })}
/>
) : (
<Inactive status={status.version !== APP_VERSION ? wrongVersionStatus : status} />
<Inactive
status={
status[APP_VERSION_STRING]
? status[APP_VERSION_STRING].message
: 'Uh oh, looks like our servers are down right now.'
}
/>
)}
</div>
<Fab onClick={() => setVisible(!visible)} className="watch-party-fab">
app/src/CallManager.js
+7 -5
View File
@@ -35,13 +35,15 @@ export default class CallManager {
this.__admin = false;
}
toggleCall(onCall, conference, admin) {
this.listener({ callActionPending: true });
this.__admin = admin;
if (onCall === true) this.leaveCall();
else this.boot(conference);
}
toggleMute(muted) {
this.listener({ callActionPending: true });
VoxeetSDK.conference.mute(VoxeetSDK.session.participant, !muted);
this.listener({ muted: !muted });
this.listener({ muted: !muted, callActionPending: false });
}
async boot(conference) {
await this.initialize();
@@ -93,7 +95,7 @@ export default class CallManager {
async leaveCall() {
VoxeetSDK.conference.leave().then(() => {
VoxeetSDK.session.close();
this.listener({ onCall: false });
this.listener({ onCall: false, callActionPending: false });
});
}
async openSession() {
@@ -114,11 +116,11 @@ export default class CallManager {
}
async initialize() {
VoxeetSDK.conference.on('joined', () => {
this.listener({ onCall: true });
this.listener({ onCall: true, callActionPending: false, voxeet: VoxeetSDK });
});
VoxeetSDK.conference.on('left', () => {
this.listener({ onCall: false });
this.listener({ onCall: false, callActionPending: false, voxeet: null });
});
VoxeetSDK.conference.on('streamAdded', (participant, stream) => {
@@ -135,7 +137,7 @@ export default class CallManager {
});
VoxeetSDK.conference.on('streamRemoved', (participant, stream) => {
document.getElementById(participant.id).remove();
if (document.getElementById(participant.id)) document.getElementById(participant.id).remove();
});
if (
app/src/Chat.js
+28 -10
View File
@@ -33,6 +33,7 @@ import {
Tooltip,
Switch,
FormControlLabel,
Chip,
} from '@material-ui/core';
import Thread from './Thread';
import { Carousel } from '@giphy/react-components';
@@ -49,10 +50,6 @@ import {
emptyLocalData,
updateLocalData,
} from './Api';
import { goTo } from 'route-lite';
import Create from './Create';
import VideoListener from './VideoListener';
import CallManager from './CallManager';
import {
Send,
ExitToApp as Exit,
@@ -63,13 +60,17 @@ import {
MicOff,
Mic as MicOn,
Gif,
MoreVert,
KeyboardArrowDown,
PauseCircleFilled,
LinkOutlined,
PlayCircleFilled,
Cancel,
Error,
} from '@material-ui/icons';
import Create from './Create';
import { goTo } from 'route-lite';
import CallManager from './CallManager';
import VideoListener from './VideoListener';
const giphyFetch = new GiphyFetch('ojJbIMUN6XRMn4mHiFFav3rMCpXUg8sq');
const alerts = [
@@ -88,9 +89,11 @@ export default class Chat extends Component {
messages: [],
newMessage: '',
admin: null,
users: [],
gif: false,
onCall: false,
muted: false,
callActionPending: false,
menuPopover: true,
allowChatNotification:
LocalData().allowChatNotification !== undefined ? LocalData().allowChatNotification : true,
@@ -164,6 +167,7 @@ export default class Chat extends Component {
}
componentWillUnmount() {
this.mVideoListener.end();
this.leaveParty();
}
videoEventListener(video) {
this.syncPlayer(video);
@@ -304,6 +308,8 @@ export default class Chat extends Component {
muted,
player,
allowChatNotification,
users,
callActionPending,
} = this.state;
return (
<div className="party-chat-container">
@@ -316,7 +322,7 @@ export default class Chat extends Component {
title="Share, leave, and other controls"
aria-label="Share, leave, and other controls"
>
<MoreVert />
<KeyboardArrowDown />
</Tooltip>
}
>
@@ -381,9 +387,17 @@ export default class Chat extends Component {
color={allowChatNotification ? 'secondary' : 'primary'}
/>
}
label="Allow chat notification when hidden"
label="Allow chat notification when side panel is closed"
labelPlacement="end"
/>
<Typography className="party-controls-users-title" variant="overline">
PARTY MEMBERS
</Typography>
<div className="party-controls-users-container">
{users.map((user) => (
<Chip className="party-controls-users-chip" clickable size="small" label={user} />
))}
</div>
</ExpansionPanelDetails>
</ExpansionPanel>
{player ? (
@@ -444,7 +458,11 @@ export default class Chat extends Component {
</div>
<div className="text-phone-panel">
{gif || newMessage ? null : (
<IconButton onClick={this.handlePhoneCall} color={!onCall ? 'secondary' : 'primary'}>
<IconButton
disabled={callActionPending}
onClick={this.handlePhoneCall}
color={!onCall ? 'secondary' : 'primary'}
>
{onCall ? (
<Tooltip placement="top" title="Leave Call">
<PhoneDisable />
@@ -458,13 +476,13 @@ export default class Chat extends Component {
)}
{!gif && !newMessage && onCall && !muted ? (
<Tooltip title="Mute Mic" placement="top">
<IconButton onClick={this.handleMute} color="primary">
<IconButton disabled={callActionPending} onClick={this.handleMute} color="primary">
<MicOff />
</IconButton>
</Tooltip>
) : !gif && !newMessage && onCall && muted ? (
<Tooltip title="Unmute Mic" placement="top">
<IconButton onClick={this.handleMute} color="secondary">
<IconButton disabled={callActionPending} onClick={this.handleMute} color="secondary">
<MicOn />
</IconButton>
</Tooltip>
app/src/Create.js
+2 -11
View File
@@ -85,10 +85,10 @@ export default class Create extends Component {
if (userName && name && pin) {
switch (mode) {
case 'create':
this.createCall(userName, name.trim(), pin);
this.createCall(userName.trim(), name.trim(), pin);
break;
case 'join':
this.joinCall(userName, name.trim(), pin);
this.joinCall(userName.trim(), name.trim(), pin);
break;
default:
this.props.updateLoading(false);
@@ -241,15 +241,6 @@ export default class Create extends Component {
>
FAQ
</Button>
<Button
color="secondary"
target="_blank"
startIcon={<ContactSupportRounded />}
size="small"
href="mailto:admin@chromewatchparty.com?subject=User Feedback"
>
Feedback
</Button>
<Button
color="secondary"
target="_blank"
app/src/Inactive.js
+2 -2
View File
@@ -23,8 +23,8 @@ import { Warning } from '@material-ui/icons';
const Inactive = (props) => (
<div id="party-loading" className="inactive">
<Warning />
<Typography variant="overline">PARTY IS PAUSED FOR A LITTLE CLEANUP</Typography>
<Typography variant="caption">{props.status.message}</Typography>
<Typography variant="overline">SORRY, WATCH PARTY IS UNAVAILABLE RIGHT NOW</Typography>
<Typography variant="caption">{props.status}</Typography>
</div>
);
app/src/index.css
+13 -3
View File
@@ -124,19 +124,23 @@ body.amazon-prime textarea:focus {
justify-content: center;
box-sizing: content-box;
}
#party-loading.inactive .MuiSvgIcon-root {
font-size: 50px !important;
}
#party-loading.inactive {
flex-direction: column;
text-align: center;
padding: 2rem;
width: calc(100% - 4rem);
background: #424242;
height: calc(100% - 4rem);
white-space: break-spaces;
}
#party-loading.inactive .MuiTypography-overline {
font-size: 1.1rem !important;
font-size: 13px !important;
}
#party-loading.inactive .MuiTypography-caption {
font-size: 1rem !important;
font-size: 11px !important;
}
#party-routes-wrapper {
margin: 0;
@@ -342,7 +346,12 @@ textarea::-webkit-scrollbar {
.party-controls button:hover .MuiButton-startIcon {
margin-right: 8px !important;
}
.party-controls-users-chip {
font-size: 11px !important;
letter-spacing: 1.1px !important;
margin-bottom: 3.5px !important;
margin-right: 7px !important;
}
.media-info-card {
width: 100%;
border-top-left-radius: 0 !important;
@@ -354,6 +363,7 @@ textarea::-webkit-scrollbar {
.media-info-card .MuiCardContent-root {
padding: 0 !important;
}
.party-controls-users-title,
.media-info-at {
font-size: 10px !important;
padding-left: 3px !important;