103 lines
2.8 KiB
JavaScript
103 lines
2.8 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import Router from 'route-lite';
|
|
import { Fab, createMuiTheme, ThemeProvider, Snackbar } from '@material-ui/core';
|
|
import Create from './Create';
|
|
import Loading from './Loading';
|
|
import firebase from 'firebase/app';
|
|
import 'firebase/firestore';
|
|
import Inactive from './Inactive';
|
|
import { getUserUid } from './Api';
|
|
|
|
const APP_VERSION = '1.3.3';
|
|
|
|
const darkTheme = createMuiTheme({
|
|
palette: {
|
|
type: 'dark',
|
|
primary: {
|
|
main: '#FF0000',
|
|
},
|
|
secondary: {
|
|
main: '#c0f300',
|
|
},
|
|
},
|
|
});
|
|
|
|
const Routes = (props) => (
|
|
<Router>
|
|
<Create {...props} />
|
|
</Router>
|
|
);
|
|
|
|
const wrongVersionStatus = {
|
|
message: `Looks like Watch Party needs to update.\nGo to chrome://extensions to manually update.`,
|
|
};
|
|
|
|
const App = () => {
|
|
const closedNotification = { open: false, message: '' };
|
|
|
|
const [status, setStatus] = useState({ active: false, message: '' });
|
|
const [visible, setVisible] = useState(false);
|
|
const [loading, setLoading] = useState(false);
|
|
const [notification, setNotification] = useState(closedNotification);
|
|
|
|
useEffect(() => {
|
|
setLoading(true);
|
|
getUserUid();
|
|
firebase
|
|
.firestore()
|
|
.collection('server')
|
|
.doc('status')
|
|
.onSnapshot((statusSnap) => {
|
|
setStatus(statusSnap.data());
|
|
setLoading(false);
|
|
});
|
|
}, []);
|
|
|
|
// HANDLE VISIBILITY STYLING
|
|
const PartyRoutesWrapper = document.getElementById('party-routes-wrapper');
|
|
if (visible) {
|
|
document.body.classList.add('visible');
|
|
PartyRoutesWrapper && PartyRoutesWrapper.classList.add('visible');
|
|
} else {
|
|
document.body.classList.remove('visible');
|
|
PartyRoutesWrapper && PartyRoutesWrapper.classList.remove('visible');
|
|
}
|
|
|
|
// HANDLE FULLSCREEN EVENT
|
|
document.onfullscreenchange = () => {
|
|
if (document.fullscreenElement) setVisible(false);
|
|
};
|
|
|
|
return (
|
|
<ThemeProvider theme={darkTheme}>
|
|
<Snackbar
|
|
className="party-notification-container"
|
|
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
|
|
open={notification.open}
|
|
onClose={() => setNotification(closedNotification)}
|
|
message={notification.message}
|
|
resumeHideDuration={1000}
|
|
autoHideDuration={3000}
|
|
/>
|
|
<div className="party-content-wrapper">
|
|
<div id="party-routes-wrapper">
|
|
{loading && <Loading />}
|
|
{status.active2 && status.version === APP_VERSION ? (
|
|
<Routes
|
|
updateLoading={setLoading}
|
|
notify={(message) => setNotification({ open: true, message })}
|
|
/>
|
|
) : (
|
|
<Inactive status={status.version !== APP_VERSION ? wrongVersionStatus : status} />
|
|
)}
|
|
</div>
|
|
<Fab onClick={() => setVisible(!visible)} className="watch-party-fab">
|
|
<span />
|
|
</Fab>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
};
|
|
|
|
export default App;
|