2020-09-13 06:30:07 +00:00
|
|
|
import React, { useEffect, useState } from 'react';
|
2021-01-05 02:26:34 +00:00
|
|
|
import styled, { createGlobalStyle } from 'styled-components';
|
2020-09-09 21:09:51 +00:00
|
|
|
import Navbar from 'components/Navbar';
|
2020-09-12 21:53:41 +00:00
|
|
|
import constants from 'utils/strings/constants';
|
2020-09-13 06:30:07 +00:00
|
|
|
import Button from 'react-bootstrap/Button';
|
2020-09-13 17:01:36 +00:00
|
|
|
import Spinner from 'react-bootstrap/Spinner';
|
2020-09-13 06:30:07 +00:00
|
|
|
import { clearKeys } from 'utils/storage/sessionStorage';
|
|
|
|
|
import { clearData, getData, LS_KEYS } from 'utils/storage/localStorage';
|
|
|
|
|
import { useRouter } from 'next/router';
|
2020-09-13 17:01:36 +00:00
|
|
|
import Container from 'components/Container';
|
|
|
|
|
import PowerSettings from 'components/power_settings';
|
2020-09-14 09:32:01 +00:00
|
|
|
import Head from 'next/head';
|
2020-09-20 15:18:35 +00:00
|
|
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
|
|
|
|
import 'react-photoswipe/lib/photoswipe.css';
|
2020-11-20 08:47:20 +00:00
|
|
|
import localForage from 'localforage';
|
2021-01-05 05:26:33 +00:00
|
|
|
import UploadButton from 'pages/gallery/components/UploadButton';
|
2021-01-06 07:14:46 +00:00
|
|
|
import FullScreenDropZone from 'components/FullScreenDropZone';
|
2020-11-20 08:47:20 +00:00
|
|
|
|
|
|
|
|
localForage.config({
|
2021-01-14 12:34:55 +00:00
|
|
|
driver: localForage.INDEXEDDB,
|
|
|
|
|
name: 'ente-files',
|
|
|
|
|
version: 1.0,
|
|
|
|
|
storeName: 'files',
|
2020-11-20 08:47:20 +00:00
|
|
|
});
|
2020-09-09 21:09:51 +00:00
|
|
|
|
|
|
|
|
const GlobalStyles = createGlobalStyle`
|
|
|
|
|
html, body {
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
|
|
|
height: 100%;
|
|
|
|
|
flex: 1;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
background-color: #303030;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#__next {
|
|
|
|
|
flex: 1;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.material-icons {
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
margin: 8px;
|
|
|
|
|
}
|
2020-11-26 15:57:20 +00:00
|
|
|
|
|
|
|
|
.pswp__item video {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.video-loading {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.video-loading > img {
|
|
|
|
|
object-fit: contain;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.video-loading > div {
|
|
|
|
|
position: relative;
|
|
|
|
|
top: -50vh;
|
|
|
|
|
left: 50vw;
|
|
|
|
|
}
|
2020-09-09 21:09:51 +00:00
|
|
|
|
|
|
|
|
:root {
|
|
|
|
|
--primary: #e26f99,
|
|
|
|
|
};
|
2020-09-13 17:01:36 +00:00
|
|
|
|
|
|
|
|
svg {
|
|
|
|
|
fill: currentColor;
|
|
|
|
|
}
|
2020-10-03 14:21:56 +00:00
|
|
|
|
|
|
|
|
.pswp__img {
|
|
|
|
|
object-fit: contain;
|
|
|
|
|
}
|
2021-01-14 12:34:55 +00:00
|
|
|
.modal-90w{
|
|
|
|
|
width:90vw;
|
|
|
|
|
max-width:880px!important;
|
|
|
|
|
}
|
2020-09-09 21:09:51 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const Image = styled.img`
|
2021-01-05 02:26:34 +00:00
|
|
|
max-height: 28px;
|
|
|
|
|
margin-right: 5px;
|
2020-09-09 21:09:51 +00:00
|
|
|
`;
|
|
|
|
|
|
2020-09-13 06:30:07 +00:00
|
|
|
const FlexContainer = styled.div`
|
2021-01-05 02:26:34 +00:00
|
|
|
flex: 1;
|
2020-09-13 06:30:07 +00:00
|
|
|
`;
|
2020-09-12 21:53:41 +00:00
|
|
|
|
2020-09-09 21:09:51 +00:00
|
|
|
export default function App({ Component, pageProps }) {
|
2021-01-14 12:34:55 +00:00
|
|
|
const router = useRouter();
|
|
|
|
|
const [user, setUser] = useState();
|
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
|
const [uploadButtonView, setUploadButtonView] = useState(false);
|
|
|
|
|
const [uploadModalView, setUploadModalView] = useState(false);
|
|
|
|
|
|
|
|
|
|
const closeUploadModal = () => setUploadModalView(false);
|
|
|
|
|
const showUploadModal = () => setUploadModalView(true);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
const user = getData(LS_KEYS.USER);
|
|
|
|
|
setUser(user);
|
|
|
|
|
console.log(
|
|
|
|
|
`%c${constants.CONSOLE_WARNING_STOP}`,
|
|
|
|
|
'color: red; font-size: 52px;'
|
|
|
|
|
);
|
|
|
|
|
console.log(`%c${constants.CONSOLE_WARNING_DESC}`, 'font-size: 20px;');
|
|
|
|
|
|
|
|
|
|
router.events.on('routeChangeStart', (url: string) => {
|
|
|
|
|
if (window.location.pathname !== url.split('?')[0]) {
|
|
|
|
|
setLoading(true);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
router.events.on('routeChangeComplete', () => {
|
|
|
|
|
const user = getData(LS_KEYS.USER);
|
|
|
|
|
setUser(user);
|
|
|
|
|
setLoading(false);
|
|
|
|
|
});
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
const logout = async () => {
|
|
|
|
|
clearKeys();
|
|
|
|
|
clearData();
|
|
|
|
|
setUploadButtonView(false);
|
|
|
|
|
localForage.clear();
|
|
|
|
|
const cache = await caches.delete('thumbs');
|
|
|
|
|
router.push('/');
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<FullScreenDropZone
|
|
|
|
|
noClick
|
|
|
|
|
closeModal={closeUploadModal}
|
|
|
|
|
showModal={showUploadModal}
|
|
|
|
|
>
|
|
|
|
|
<Head>
|
|
|
|
|
<title>ente.io | Privacy friendly alternative to Google Photos</title>
|
|
|
|
|
</Head>
|
|
|
|
|
<GlobalStyles />
|
|
|
|
|
<Navbar>
|
|
|
|
|
<FlexContainer>
|
|
|
|
|
<Image alt='logo' src='/icon.png' />
|
|
|
|
|
{constants.COMPANY_NAME}
|
|
|
|
|
</FlexContainer>
|
|
|
|
|
{uploadButtonView && <UploadButton showModal={showUploadModal} />}
|
|
|
|
|
{user &&
|
|
|
|
|
<Button variant='link' onClick={logout}>
|
|
|
|
|
<PowerSettings />
|
|
|
|
|
</Button>
|
|
|
|
|
}
|
|
|
|
|
</Navbar>
|
|
|
|
|
{loading ? (
|
|
|
|
|
<Container>
|
|
|
|
|
<Spinner animation='border' role='status' variant='primary'>
|
|
|
|
|
<span className='sr-only'>Loading...</span>
|
|
|
|
|
</Spinner>
|
|
|
|
|
</Container>
|
|
|
|
|
) : (
|
|
|
|
|
<Component uploadModalView={uploadModalView} closeUploadModal={closeUploadModal} setUploadButtonView={setUploadButtonView} />
|
|
|
|
|
)}
|
|
|
|
|
</FullScreenDropZone>
|
|
|
|
|
</>
|
2020-09-09 21:09:51 +00:00
|
|
|
);
|
2021-01-05 02:26:34 +00:00
|
|
|
}
|
