2021-03-10 15:23:10 +00:00
|
|
|
import React, { useCallback, 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 17:01:36 +00:00
|
|
|
import Spinner from 'react-bootstrap/Spinner';
|
2021-03-12 03:31:19 +00:00
|
|
|
import { getData, LS_KEYS } from 'utils/storage/localStorage';
|
2020-09-13 06:30:07 +00:00
|
|
|
import { useRouter } from 'next/router';
|
2020-09-13 17:01:36 +00:00
|
|
|
import Container from 'components/Container';
|
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';
|
2021-02-26 08:13:46 +00:00
|
|
|
import 'photoswipe/dist/photoswipe.css';
|
2021-03-12 06:58:27 +00:00
|
|
|
|
2021-01-05 05:26:33 +00:00
|
|
|
import UploadButton from 'pages/gallery/components/UploadButton';
|
2021-03-08 12:44:07 +00:00
|
|
|
import { sentryInit } from '../utils/sentry';
|
2021-03-10 15:23:10 +00:00
|
|
|
import { useDropzone } from 'react-dropzone';
|
2021-03-12 12:16:58 +00:00
|
|
|
import Sidebar from 'components/Sidebar';
|
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;
|
2021-02-15 12:42:03 +00:00
|
|
|
background-color: #191919;
|
2020-09-09 21:09:51 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
#__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;
|
2021-02-15 13:19:59 +00:00
|
|
|
max-width:960px!important;
|
2021-01-24 20:22:12 +00:00
|
|
|
}
|
2021-03-13 07:25:18 +00:00
|
|
|
.modal {
|
|
|
|
z-index: 2000;
|
|
|
|
}
|
|
|
|
.modal .modal-header, .modal .modal-footer {
|
2021-01-24 20:22:12 +00:00
|
|
|
border-color: #444 !important;
|
|
|
|
}
|
|
|
|
.modal .modal-header .close {
|
|
|
|
color: #aaa;
|
|
|
|
text-shadow: none;
|
|
|
|
}
|
|
|
|
.modal .card {
|
2021-02-15 13:19:59 +00:00
|
|
|
background-color: #202020;
|
2021-01-24 20:22:12 +00:00
|
|
|
border: none;
|
|
|
|
color: #aaa;
|
|
|
|
}
|
|
|
|
.modal .card > div {
|
|
|
|
border-radius: 30px;
|
|
|
|
overflow: hidden;
|
|
|
|
margin: 0 0 5px 0;
|
2021-01-14 14:07:26 +00:00
|
|
|
}
|
2021-02-15 10:46:16 +00:00
|
|
|
.modal-content {
|
2021-02-15 13:19:59 +00:00
|
|
|
background-color:#202020 !important;
|
2021-01-24 20:22:12 +00:00
|
|
|
color:#aaa;
|
2021-01-14 12:34:55 +00:00
|
|
|
}
|
2021-02-15 08:14:33 +00:00
|
|
|
.download-btn{
|
|
|
|
margin-top:10px;
|
|
|
|
width: 25px;
|
|
|
|
height: 25px;
|
|
|
|
float: right;
|
|
|
|
background: url('/download_icon.png') no-repeat;
|
|
|
|
cursor: pointer;
|
|
|
|
background-size: cover;
|
|
|
|
border: none;
|
2021-02-17 09:09:43 +00:00
|
|
|
}
|
2021-03-11 16:04:34 +00:00
|
|
|
.btn-primary {
|
2021-02-15 10:46:16 +00:00
|
|
|
background: #2dc262;
|
2021-02-15 11:34:11 +00:00
|
|
|
border-color: #29a354;
|
2021-02-15 10:46:16 +00:00
|
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
|
|
background-color: #29a354;
|
2021-02-15 11:34:11 +00:00
|
|
|
border-color: #2dc262;
|
2021-02-15 10:46:16 +00:00
|
|
|
}
|
|
|
|
.btn-primary:disabled {
|
|
|
|
background-color: #69b383;
|
|
|
|
}
|
2021-03-22 13:02:16 +00:00
|
|
|
.btn-outline-success {
|
|
|
|
color: #2dc262;
|
|
|
|
border-color: #2dc262;
|
|
|
|
}
|
|
|
|
.btn-outline-success:hover {
|
|
|
|
background: #2dc262;
|
|
|
|
}
|
2021-02-15 12:42:03 +00:00
|
|
|
.card {
|
|
|
|
background-color: #242424;
|
|
|
|
color: #fff;
|
|
|
|
border-radius: 12px;
|
2021-02-15 08:14:33 +00:00
|
|
|
}
|
2021-03-09 07:41:52 +00:00
|
|
|
.jumbotron{
|
2021-03-09 10:36:23 +00:00
|
|
|
background-color: #191919;
|
2021-03-09 07:41:52 +00:00
|
|
|
color: #fff;
|
2021-03-09 10:36:23 +00:00
|
|
|
text-align: center;
|
|
|
|
margin-top: 50px;
|
|
|
|
}
|
|
|
|
.alert-success {
|
|
|
|
background-color: #c4ffd6;
|
|
|
|
}
|
|
|
|
.alert-primary {
|
|
|
|
background-color: #c4ffd6;
|
2021-03-09 07:41:52 +00:00
|
|
|
}
|
2021-03-11 14:13:36 +00:00
|
|
|
.ente-modal{
|
2021-03-11 13:36:54 +00:00
|
|
|
width: 500px;
|
2021-03-11 04:46:18 +00:00
|
|
|
max-width:100%;
|
|
|
|
}
|
2021-03-11 16:04:34 +00:00
|
|
|
.bm-burger-button {
|
|
|
|
position: fixed;
|
2021-03-20 18:48:02 +00:00
|
|
|
width: 26px;
|
|
|
|
height: 22px;
|
|
|
|
left: 16px;
|
|
|
|
top: 22px;
|
2021-03-13 05:18:16 +00:00
|
|
|
}
|
2021-03-11 16:04:34 +00:00
|
|
|
.bm-burger-bars {
|
2021-03-13 05:18:16 +00:00
|
|
|
background: #bdbdbd;
|
|
|
|
}
|
|
|
|
.bm-menu {
|
2021-03-13 07:00:40 +00:00
|
|
|
background: #131313;
|
2021-03-11 16:04:34 +00:00
|
|
|
padding: 2.5em 1.5em 0;
|
|
|
|
font-size: 1.15em;
|
|
|
|
color:#fff
|
2021-03-13 05:18:16 +00:00
|
|
|
}
|
|
|
|
.bm-cross {
|
2021-03-11 16:04:34 +00:00
|
|
|
background: #fff;
|
2021-03-13 05:18:16 +00:00
|
|
|
}
|
2021-03-22 12:22:15 +00:00
|
|
|
.bg-upload-progress-bar {
|
|
|
|
background-color: #2dc262;
|
|
|
|
}
|
2020-09-09 21:09:51 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
const Image = styled.img`
|
2021-02-09 09:33:54 +00:00
|
|
|
max-height: 28px;
|
|
|
|
margin-right: 5px;
|
2020-09-09 21:09:51 +00:00
|
|
|
`;
|
|
|
|
|
2021-03-24 10:40:05 +00:00
|
|
|
const FlexContainer = styled.div<{ sideMargin: boolean }>`
|
2021-02-09 09:33:54 +00:00
|
|
|
flex: 1;
|
2021-02-15 09:21:52 +00:00
|
|
|
text-align: center;
|
2021-03-24 10:40:05 +00:00
|
|
|
${(props) => props.sideMargin && 'margin-left: 48px;'}
|
2020-09-13 06:30:07 +00:00
|
|
|
`;
|
2020-09-12 21:53:41 +00:00
|
|
|
|
2021-03-08 12:44:07 +00:00
|
|
|
sentryInit();
|
2021-03-08 11:59:14 +00:00
|
|
|
export default function App({ Component, pageProps, err }) {
|
2021-01-14 12:34:55 +00:00
|
|
|
const router = useRouter();
|
|
|
|
const [user, setUser] = useState();
|
|
|
|
const [loading, setLoading] = useState(false);
|
2021-03-12 04:24:01 +00:00
|
|
|
const [navbarIconView, setNavbarIconView] = useState(false);
|
2021-03-18 23:39:02 +00:00
|
|
|
const [collectionSelectorView, setCollectionSelectorView] = useState(false);
|
2021-01-14 12:34:55 +00:00
|
|
|
|
2021-03-18 23:39:02 +00:00
|
|
|
function closeCollectionSelector() {
|
|
|
|
setCollectionSelectorView(false);
|
2021-02-27 11:01:25 +00:00
|
|
|
}
|
2021-03-18 23:39:02 +00:00
|
|
|
function showCollectionSelector() {
|
|
|
|
setCollectionSelectorView(true);
|
2021-02-27 11:01:25 +00:00
|
|
|
}
|
2021-01-14 12:34:55 +00:00
|
|
|
|
|
|
|
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);
|
|
|
|
});
|
|
|
|
}, []);
|
2021-03-24 10:40:05 +00:00
|
|
|
const onDropAccepted = useCallback(() => {
|
|
|
|
if (acceptedFiles != null && !collectionSelectorView) {
|
|
|
|
showCollectionSelector();
|
|
|
|
}
|
|
|
|
}, []);
|
2021-03-11 13:29:55 +00:00
|
|
|
const { getRootProps, getInputProps, open, acceptedFiles } = useDropzone({
|
2021-03-10 15:23:10 +00:00
|
|
|
noClick: true,
|
|
|
|
noKeyboard: true,
|
2021-03-12 06:08:56 +00:00
|
|
|
accept: 'image/*, video/*, application/json, ',
|
2021-03-24 10:40:05 +00:00
|
|
|
onDropAccepted,
|
2021-03-10 15:23:10 +00:00
|
|
|
});
|
2021-01-14 12:34:55 +00:00
|
|
|
return (
|
2021-03-18 20:16:18 +00:00
|
|
|
<>
|
2021-01-19 03:41:56 +00:00
|
|
|
<Head>
|
2021-02-27 11:01:25 +00:00
|
|
|
<title>{constants.TITLE}</title>
|
2021-03-10 15:23:10 +00:00
|
|
|
<script async src={`https://sa.ente.io/latest.js`} />
|
2021-01-19 03:41:56 +00:00
|
|
|
</Head>
|
|
|
|
<GlobalStyles />
|
2021-03-12 12:16:58 +00:00
|
|
|
<div style={{ display: navbarIconView ? 'block' : 'none' }}>
|
|
|
|
<Sidebar setNavbarIconView={setNavbarIconView} />
|
|
|
|
</div>
|
2021-01-19 03:41:56 +00:00
|
|
|
<Navbar>
|
2021-03-20 18:48:02 +00:00
|
|
|
<FlexContainer sideMargin={navbarIconView}>
|
2021-03-09 07:41:52 +00:00
|
|
|
<Image
|
|
|
|
style={{ height: '24px' }}
|
|
|
|
alt="logo"
|
|
|
|
src="/icon.svg"
|
|
|
|
/>
|
2021-01-19 03:41:56 +00:00
|
|
|
</FlexContainer>
|
2021-03-12 04:24:01 +00:00
|
|
|
{navbarIconView && <UploadButton openFileUploader={open} />}
|
2021-01-19 03:41:56 +00:00
|
|
|
</Navbar>
|
|
|
|
{loading ? (
|
|
|
|
<Container>
|
2021-02-09 09:33:54 +00:00
|
|
|
<Spinner animation="border" role="status" variant="primary">
|
|
|
|
<span className="sr-only">Loading...</span>
|
2021-01-19 03:41:56 +00:00
|
|
|
</Spinner>
|
|
|
|
</Container>
|
|
|
|
) : (
|
2021-02-09 09:33:54 +00:00
|
|
|
<Component
|
2021-03-18 20:16:18 +00:00
|
|
|
getRootProps={getRootProps}
|
|
|
|
getInputProps={getInputProps}
|
2021-03-10 15:23:10 +00:00
|
|
|
openFileUploader={open}
|
|
|
|
acceptedFiles={acceptedFiles}
|
2021-03-18 23:39:02 +00:00
|
|
|
collectionSelectorView={collectionSelectorView}
|
|
|
|
showCollectionSelector={showCollectionSelector}
|
|
|
|
closeCollectionSelector={closeCollectionSelector}
|
2021-03-16 07:06:33 +00:00
|
|
|
setNavbarIconView={setNavbarIconView}
|
2021-03-08 11:59:14 +00:00
|
|
|
err={err}
|
2021-02-09 09:33:54 +00:00
|
|
|
/>
|
|
|
|
)}
|
2021-03-18 20:16:18 +00:00
|
|
|
</>
|
2020-09-09 21:09:51 +00:00
|
|
|
);
|
2021-01-05 02:26:34 +00:00
|
|
|
}
|