2021-02-17 08:35:19 +00:00
|
|
|
import React, { useEffect, useRef, useState } from 'react';
|
2020-09-12 21:53:41 +00:00
|
|
|
import { useRouter } from 'next/router';
|
2020-09-19 21:20:10 +00:00
|
|
|
import { getKey, SESSION_KEYS } from 'utils/storage/sessionStorage';
|
2021-04-20 05:34:19 +00:00
|
|
|
import { file, syncData, localFiles } from 'services/fileService';
|
2020-09-19 21:20:10 +00:00
|
|
|
import PreviewCard from './components/PreviewCard';
|
2020-09-20 15:18:35 +00:00
|
|
|
import styled from 'styled-components';
|
2021-01-15 11:09:52 +00:00
|
|
|
import PhotoSwipe from 'components/PhotoSwipe/PhotoSwipe';
|
2020-11-20 17:24:21 +00:00
|
|
|
import AutoSizer from 'react-virtualized-auto-sizer';
|
2020-11-29 14:48:47 +00:00
|
|
|
import { VariableSizeList as List } from 'react-window';
|
2021-02-08 17:15:13 +00:00
|
|
|
import LoadingBar from 'react-top-loading-bar';
|
2020-11-28 18:11:24 +00:00
|
|
|
import Collections from './components/Collections';
|
2021-01-11 08:13:53 +00:00
|
|
|
import Upload from './components/Upload';
|
2021-02-17 08:06:20 +00:00
|
|
|
import DownloadManager from 'services/downloadManager';
|
2021-01-31 12:11:21 +00:00
|
|
|
import {
|
|
|
|
collection,
|
2021-02-08 16:15:21 +00:00
|
|
|
syncCollections,
|
2021-02-09 06:04:19 +00:00
|
|
|
CollectionAndItsLatestFile,
|
|
|
|
getCollectionAndItsLatestFile,
|
2021-01-31 12:11:21 +00:00
|
|
|
getFavItemIds,
|
2021-02-08 17:15:13 +00:00
|
|
|
getLocalCollections,
|
2021-03-15 17:30:49 +00:00
|
|
|
getNonEmptyCollections,
|
2021-01-31 12:11:21 +00:00
|
|
|
} from 'services/collectionService';
|
2021-01-24 20:59:58 +00:00
|
|
|
import constants from 'utils/strings/constants';
|
2021-04-20 05:34:19 +00:00
|
|
|
import { Alert, Button } from 'react-bootstrap';
|
2021-04-19 09:36:50 +00:00
|
|
|
import billingService, { Plan } from 'services/billingService';
|
2021-03-12 12:30:33 +00:00
|
|
|
import PlanSelector from './components/PlanSelector';
|
2021-04-19 09:36:50 +00:00
|
|
|
import {
|
2021-04-20 06:45:24 +00:00
|
|
|
activateSubscription,
|
|
|
|
updateSubscription,
|
2021-04-19 09:36:50 +00:00
|
|
|
cancelSubscription,
|
2021-04-19 17:29:30 +00:00
|
|
|
checkSubscriptionPurchase,
|
2021-04-19 10:15:05 +00:00
|
|
|
updatePaymentMethod,
|
2021-04-19 09:36:50 +00:00
|
|
|
} from 'utils/billingUtil';
|
2020-09-20 15:18:35 +00:00
|
|
|
|
2021-03-20 18:48:02 +00:00
|
|
|
import Delete from 'components/Delete';
|
2021-04-22 12:56:06 +00:00
|
|
|
import ConfirmDialog, {
|
|
|
|
ConfirmActionAttributes,
|
|
|
|
CONFIRM_ACTION,
|
|
|
|
} from 'components/ConfirmDialog';
|
2021-03-18 20:16:18 +00:00
|
|
|
import FullScreenDropZone from 'components/FullScreenDropZone';
|
2021-03-22 10:20:15 +00:00
|
|
|
import Sidebar from 'components/Sidebar';
|
|
|
|
import UploadButton from './components/UploadButton';
|
2021-04-19 10:15:05 +00:00
|
|
|
import { checkConnectivity, downloadApp } from 'utils/common';
|
2021-04-20 05:34:19 +00:00
|
|
|
import { isFirstLogin, justSignedUp, setIsFirstLogin } from 'utils/storage';
|
2021-03-29 10:30:20 +00:00
|
|
|
import { logoutUser } from 'services/userService';
|
2021-04-07 07:18:45 +00:00
|
|
|
import AlertBanner from './components/AlertBanner';
|
2021-04-07 09:22:59 +00:00
|
|
|
import MessageDialog, { MessageAttributes } from 'components/MessageDialog';
|
2021-04-19 09:44:51 +00:00
|
|
|
import { LoadingOverlay } from './components/CollectionSelector';
|
|
|
|
import EnteSpinner from 'components/EnteSpinner';
|
2021-04-19 10:15:05 +00:00
|
|
|
import { fileDelete } from 'utils/file';
|
2021-02-09 05:33:45 +00:00
|
|
|
const DATE_CONTAINER_HEIGHT = 45;
|
2021-02-08 17:15:13 +00:00
|
|
|
const IMAGE_CONTAINER_HEIGHT = 200;
|
2021-02-08 17:29:45 +00:00
|
|
|
const NO_OF_PAGES = 2;
|
2021-03-22 14:05:12 +00:00
|
|
|
const A_DAY = 24 * 60 * 60 * 1000;
|
2020-11-29 14:48:47 +00:00
|
|
|
enum ITEM_TYPE {
|
2021-01-13 05:31:02 +00:00
|
|
|
TIME = 'TIME',
|
|
|
|
TILE = 'TILE',
|
2020-11-29 14:48:47 +00:00
|
|
|
}
|
2021-01-12 07:01:00 +00:00
|
|
|
export enum FILE_TYPE {
|
|
|
|
IMAGE,
|
|
|
|
VIDEO,
|
2021-02-08 17:15:13 +00:00
|
|
|
OTHERS,
|
2021-01-12 07:01:00 +00:00
|
|
|
}
|
2020-11-29 14:48:47 +00:00
|
|
|
|
|
|
|
interface TimeStampListItem {
|
2021-01-13 05:31:02 +00:00
|
|
|
itemType: ITEM_TYPE;
|
|
|
|
items?: file[];
|
|
|
|
itemStartIndex?: number;
|
|
|
|
date?: string;
|
2020-11-29 14:48:47 +00:00
|
|
|
}
|
|
|
|
|
2020-09-20 15:18:35 +00:00
|
|
|
const Container = styled.div`
|
2021-01-24 20:22:12 +00:00
|
|
|
display: block;
|
|
|
|
flex: 1;
|
|
|
|
width: 100%;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
margin: 0 auto;
|
2021-04-11 10:14:32 +00:00
|
|
|
margin-bottom: 40px;
|
2020-09-20 15:18:35 +00:00
|
|
|
|
2021-01-24 20:22:12 +00:00
|
|
|
.pswp-thumbnail {
|
|
|
|
display: inline-block;
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
2020-09-20 15:18:35 +00:00
|
|
|
`;
|
2020-09-12 21:53:41 +00:00
|
|
|
|
2020-11-20 17:24:21 +00:00
|
|
|
const ListItem = styled.div`
|
2021-01-24 20:22:12 +00:00
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
2020-11-28 18:11:24 +00:00
|
|
|
`;
|
|
|
|
|
2021-04-19 08:29:12 +00:00
|
|
|
export const DeadCenter = styled.div`
|
2021-01-24 20:22:12 +00:00
|
|
|
flex: 1;
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
color: #fff;
|
|
|
|
text-align: center;
|
|
|
|
flex-direction: column;
|
2020-11-28 18:11:24 +00:00
|
|
|
`;
|
|
|
|
|
2021-02-08 17:15:13 +00:00
|
|
|
const ListContainer = styled.div<{ columns: number }>`
|
2020-12-19 16:23:35 +00:00
|
|
|
display: grid;
|
2021-02-08 17:15:13 +00:00
|
|
|
grid-template-columns: repeat(${(props) => props.columns}, 1fr);
|
2020-12-19 16:23:35 +00:00
|
|
|
grid-column-gap: 8px;
|
|
|
|
padding: 0 8px;
|
2021-01-24 20:22:12 +00:00
|
|
|
max-width: 100%;
|
|
|
|
color: #fff;
|
2020-11-28 18:16:56 +00:00
|
|
|
|
2021-01-24 20:22:12 +00:00
|
|
|
@media (min-width: 1000px) {
|
|
|
|
width: 1000px;
|
|
|
|
}
|
2020-11-28 18:11:24 +00:00
|
|
|
|
2021-01-24 20:22:12 +00:00
|
|
|
@media (min-width: 450px) and (max-width: 1000px) {
|
|
|
|
width: 600px;
|
|
|
|
}
|
2020-11-28 18:11:24 +00:00
|
|
|
|
2021-01-24 20:22:12 +00:00
|
|
|
@media (max-width: 450px) {
|
|
|
|
width: 100%;
|
|
|
|
}
|
2020-11-20 17:24:21 +00:00
|
|
|
`;
|
|
|
|
|
2020-11-29 14:55:07 +00:00
|
|
|
const DateContainer = styled.div`
|
2020-12-19 16:23:35 +00:00
|
|
|
padding-top: 15px;
|
2020-11-29 14:55:07 +00:00
|
|
|
`;
|
|
|
|
|
2021-03-16 07:06:33 +00:00
|
|
|
interface Props {
|
2021-03-18 20:16:18 +00:00
|
|
|
getRootProps;
|
|
|
|
getInputProps;
|
2021-03-16 07:06:33 +00:00
|
|
|
openFileUploader;
|
|
|
|
acceptedFiles;
|
2021-03-18 23:39:02 +00:00
|
|
|
collectionSelectorView;
|
|
|
|
closeCollectionSelector;
|
|
|
|
showCollectionSelector;
|
2021-03-16 07:06:33 +00:00
|
|
|
err;
|
|
|
|
}
|
2021-03-20 14:58:12 +00:00
|
|
|
|
|
|
|
const DeleteBtn = styled.button`
|
|
|
|
border: none;
|
|
|
|
background-color: #ff6666;
|
|
|
|
position: fixed;
|
|
|
|
z-index: 1;
|
2021-03-21 14:18:38 +00:00
|
|
|
bottom: 20px;
|
|
|
|
right: 20px;
|
|
|
|
width: 60px;
|
|
|
|
height: 60px;
|
2021-03-20 14:58:12 +00:00
|
|
|
border-radius: 50%;
|
|
|
|
color: #fff;
|
|
|
|
`;
|
|
|
|
|
2021-03-21 06:54:40 +00:00
|
|
|
export type selectedState = {
|
|
|
|
[k: number]: boolean;
|
2021-03-20 14:58:12 +00:00
|
|
|
count: number;
|
2021-03-21 06:54:40 +00:00
|
|
|
};
|
2021-03-20 14:58:12 +00:00
|
|
|
|
2021-03-16 07:06:33 +00:00
|
|
|
export default function Gallery(props: Props) {
|
2021-01-13 05:31:02 +00:00
|
|
|
const router = useRouter();
|
|
|
|
const [collections, setCollections] = useState<collection[]>([]);
|
2021-02-09 06:04:19 +00:00
|
|
|
const [
|
|
|
|
collectionAndItsLatestFile,
|
|
|
|
setCollectionAndItsLatestFile,
|
|
|
|
] = useState<CollectionAndItsLatestFile[]>([]);
|
2021-01-13 05:31:02 +00:00
|
|
|
const [data, setData] = useState<file[]>();
|
2021-01-20 12:05:04 +00:00
|
|
|
const [favItemIds, setFavItemIds] = useState<Set<number>>();
|
2021-01-13 05:31:02 +00:00
|
|
|
const [open, setOpen] = useState(false);
|
2021-02-17 08:35:19 +00:00
|
|
|
const [currentIndex, setCurrentIndex] = useState<number>(0);
|
2021-01-13 05:31:02 +00:00
|
|
|
const fetching: { [k: number]: boolean } = {};
|
2021-03-29 07:52:20 +00:00
|
|
|
const [bannerMessage, setBannerMessage] = useState<string>(null);
|
2020-12-19 16:23:35 +00:00
|
|
|
const [sinceTime, setSinceTime] = useState(0);
|
2021-02-17 09:47:26 +00:00
|
|
|
const [isFirstLoad, setIsFirstLoad] = useState(false);
|
2021-03-20 14:58:12 +00:00
|
|
|
const [selected, setSelected] = useState<selectedState>({ count: 0 });
|
2021-04-22 12:56:06 +00:00
|
|
|
const [
|
|
|
|
confirmAction,
|
|
|
|
setConfirmAction,
|
|
|
|
] = useState<ConfirmActionAttributes>();
|
2021-04-07 07:18:45 +00:00
|
|
|
const [dialogMessage, setDialogMessage] = useState<MessageAttributes>();
|
|
|
|
const [planModalView, setPlanModalView] = useState(false);
|
2021-04-19 09:36:50 +00:00
|
|
|
const [loading, setLoading] = useState(false);
|
2021-04-07 07:18:45 +00:00
|
|
|
|
2021-02-17 08:35:19 +00:00
|
|
|
const loadingBar = useRef(null);
|
2021-01-13 05:31:02 +00:00
|
|
|
useEffect(() => {
|
|
|
|
const key = getKey(SESSION_KEYS.ENCRYPTION_KEY);
|
|
|
|
if (!key) {
|
|
|
|
router.push('/');
|
2021-02-17 09:16:20 +00:00
|
|
|
return;
|
2021-01-13 05:31:02 +00:00
|
|
|
}
|
|
|
|
const main = async () => {
|
2021-04-03 04:22:57 +00:00
|
|
|
setIsFirstLoad(isFirstLogin());
|
2021-04-20 05:34:19 +00:00
|
|
|
if (justSignedUp()) {
|
2021-04-20 09:30:45 +00:00
|
|
|
setPlanModalView(true);
|
2021-04-20 05:34:19 +00:00
|
|
|
}
|
2021-04-03 04:22:57 +00:00
|
|
|
setIsFirstLogin(false);
|
2021-01-27 06:14:02 +00:00
|
|
|
const data = await localFiles();
|
2021-01-31 12:11:21 +00:00
|
|
|
const collections = await getLocalCollections();
|
2021-03-15 17:41:20 +00:00
|
|
|
const nonEmptyCollections = getNonEmptyCollections(
|
2021-02-09 06:04:19 +00:00
|
|
|
collections,
|
|
|
|
data
|
|
|
|
);
|
2021-03-15 17:41:20 +00:00
|
|
|
const collectionAndItsLatestFile = await getCollectionAndItsLatestFile(
|
|
|
|
nonEmptyCollections,
|
|
|
|
data
|
|
|
|
);
|
2021-01-13 05:31:02 +00:00
|
|
|
setData(data);
|
2021-03-15 17:41:20 +00:00
|
|
|
setCollections(nonEmptyCollections);
|
2021-02-09 06:04:19 +00:00
|
|
|
setCollectionAndItsLatestFile(collectionAndItsLatestFile);
|
2021-02-09 06:14:00 +00:00
|
|
|
const favItemIds = await getFavItemIds(data);
|
|
|
|
setFavItemIds(favItemIds);
|
2021-04-20 09:43:38 +00:00
|
|
|
await checkSubscriptionPurchase(setDialogMessage, router);
|
2021-02-05 17:09:26 +00:00
|
|
|
await syncWithRemote();
|
2021-02-17 09:47:26 +00:00
|
|
|
setIsFirstLoad(false);
|
2021-01-13 05:31:02 +00:00
|
|
|
};
|
|
|
|
main();
|
2021-01-27 06:14:02 +00:00
|
|
|
}, []);
|
2020-09-12 21:53:41 +00:00
|
|
|
|
2021-02-05 17:04:32 +00:00
|
|
|
const syncWithRemote = async () => {
|
2021-03-29 08:52:40 +00:00
|
|
|
try {
|
2021-03-29 09:33:28 +00:00
|
|
|
checkConnectivity();
|
2021-03-29 08:52:40 +00:00
|
|
|
loadingBar.current?.continuousStart();
|
|
|
|
const collections = await syncCollections();
|
|
|
|
const { data, isUpdated } = await syncData(collections);
|
2021-04-07 07:18:45 +00:00
|
|
|
await billingService.updatePlans();
|
|
|
|
await billingService.syncSubscription();
|
2021-03-29 08:52:40 +00:00
|
|
|
const nonEmptyCollections = getNonEmptyCollections(
|
|
|
|
collections,
|
|
|
|
data
|
|
|
|
);
|
|
|
|
const collectionAndItsLatestFile = await getCollectionAndItsLatestFile(
|
|
|
|
nonEmptyCollections,
|
|
|
|
data
|
|
|
|
);
|
|
|
|
const favItemIds = await getFavItemIds(data);
|
|
|
|
setCollections(nonEmptyCollections);
|
|
|
|
if (isUpdated) {
|
|
|
|
setData(data);
|
|
|
|
}
|
|
|
|
setCollectionAndItsLatestFile(collectionAndItsLatestFile);
|
|
|
|
setFavItemIds(favItemIds);
|
|
|
|
setSinceTime(new Date().getTime());
|
|
|
|
} catch (e) {
|
2021-03-29 09:00:35 +00:00
|
|
|
setBannerMessage(e.message);
|
2021-04-04 14:03:05 +00:00
|
|
|
if (e.message === constants.SESSION_EXPIRED_MESSAGE) {
|
2021-04-22 12:56:06 +00:00
|
|
|
setConfirmAction({
|
|
|
|
action: CONFIRM_ACTION.SESSION_EXPIRED,
|
|
|
|
callback: logoutUser,
|
|
|
|
});
|
2021-03-29 10:30:20 +00:00
|
|
|
}
|
2021-03-29 09:00:35 +00:00
|
|
|
} finally {
|
|
|
|
loadingBar.current?.complete();
|
2021-01-27 06:14:02 +00:00
|
|
|
}
|
2021-02-08 17:15:13 +00:00
|
|
|
};
|
2021-01-05 02:40:59 +00:00
|
|
|
|
2021-01-13 05:31:02 +00:00
|
|
|
const updateUrl = (index: number) => (url: string) => {
|
|
|
|
data[index] = {
|
|
|
|
...data[index],
|
|
|
|
msrc: url,
|
|
|
|
w: window.innerWidth,
|
|
|
|
h: window.innerHeight,
|
|
|
|
};
|
2021-02-08 17:15:13 +00:00
|
|
|
if (
|
|
|
|
data[index].metadata.fileType === FILE_TYPE.VIDEO &&
|
|
|
|
!data[index].html
|
|
|
|
) {
|
2021-01-13 05:31:02 +00:00
|
|
|
data[index].html = `
|
2020-11-26 15:57:20 +00:00
|
|
|
<div class="video-loading">
|
|
|
|
<img src="${url}" />
|
|
|
|
<div class="spinner-border text-light" role="status">
|
|
|
|
<span class="sr-only">Loading...</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
`;
|
2021-01-13 05:31:02 +00:00
|
|
|
delete data[index].src;
|
|
|
|
}
|
2021-02-08 17:15:13 +00:00
|
|
|
if (
|
|
|
|
data[index].metadata.fileType === FILE_TYPE.IMAGE &&
|
|
|
|
!data[index].src
|
|
|
|
) {
|
2021-01-13 05:31:02 +00:00
|
|
|
data[index].src = url;
|
|
|
|
}
|
|
|
|
setData(data);
|
2021-01-05 02:40:59 +00:00
|
|
|
};
|
2021-01-13 05:31:02 +00:00
|
|
|
|
|
|
|
const updateSrcUrl = (index: number, url: string) => {
|
|
|
|
data[index] = {
|
|
|
|
...data[index],
|
|
|
|
src: url,
|
|
|
|
w: window.innerWidth,
|
|
|
|
h: window.innerHeight,
|
|
|
|
};
|
|
|
|
if (data[index].metadata.fileType === FILE_TYPE.VIDEO) {
|
|
|
|
data[index].html = `
|
2020-11-26 15:57:20 +00:00
|
|
|
<video controls>
|
2020-11-26 17:35:26 +00:00
|
|
|
<source src="${url}" />
|
2020-11-26 15:57:20 +00:00
|
|
|
Your browser does not support the video tag.
|
|
|
|
</video>
|
|
|
|
`;
|
2021-01-13 05:31:02 +00:00
|
|
|
delete data[index].src;
|
|
|
|
}
|
|
|
|
setData(data);
|
|
|
|
};
|
2020-11-23 03:00:17 +00:00
|
|
|
|
2021-03-16 10:28:45 +00:00
|
|
|
const handleClose = (needUpdate) => {
|
2021-01-13 05:31:02 +00:00
|
|
|
setOpen(false);
|
2021-03-16 10:28:45 +00:00
|
|
|
needUpdate && syncWithRemote();
|
2021-01-13 05:31:02 +00:00
|
|
|
};
|
2020-11-23 03:00:17 +00:00
|
|
|
|
2021-01-13 05:31:02 +00:00
|
|
|
const onThumbnailClick = (index: number) => () => {
|
2021-02-17 08:35:19 +00:00
|
|
|
setCurrentIndex(index);
|
2021-01-13 05:31:02 +00:00
|
|
|
setOpen(true);
|
|
|
|
};
|
2020-11-23 03:00:17 +00:00
|
|
|
|
2021-03-20 14:58:12 +00:00
|
|
|
const handleSelect = (id: number) => (checked: boolean) => {
|
|
|
|
setSelected({
|
|
|
|
...selected,
|
|
|
|
[id]: checked,
|
2021-03-21 06:54:40 +00:00
|
|
|
count: checked ? selected.count + 1 : selected.count - 1,
|
2021-03-20 14:58:12 +00:00
|
|
|
});
|
2021-03-21 06:54:40 +00:00
|
|
|
};
|
2021-04-22 12:56:06 +00:00
|
|
|
const clearSelection = function () {
|
|
|
|
setSelected({ count: 0 });
|
|
|
|
};
|
2021-03-20 14:58:12 +00:00
|
|
|
|
2021-01-13 05:31:02 +00:00
|
|
|
const getThumbnail = (file: file[], index: number) => {
|
|
|
|
return (
|
|
|
|
<PreviewCard
|
|
|
|
key={`tile-${file[index].id}`}
|
|
|
|
data={file[index]}
|
|
|
|
updateUrl={updateUrl(file[index].dataIndex)}
|
|
|
|
onClick={onThumbnailClick(index)}
|
2021-03-20 14:58:12 +00:00
|
|
|
selectable
|
|
|
|
onSelect={handleSelect(file[index].id)}
|
|
|
|
selected={selected[file[index].id]}
|
|
|
|
selectOnClick={selected.count > 0}
|
2021-01-13 05:31:02 +00:00
|
|
|
/>
|
|
|
|
);
|
|
|
|
};
|
2020-09-20 15:18:35 +00:00
|
|
|
|
2021-01-13 05:31:02 +00:00
|
|
|
const getSlideData = async (instance: any, index: number, item: file) => {
|
|
|
|
if (!item.msrc) {
|
2021-02-17 05:02:01 +00:00
|
|
|
const url = await DownloadManager.getPreview(item);
|
2021-01-13 05:31:02 +00:00
|
|
|
updateUrl(item.dataIndex)(url);
|
|
|
|
item.msrc = url;
|
|
|
|
if (!item.src) {
|
|
|
|
item.src = url;
|
|
|
|
}
|
|
|
|
item.w = window.innerWidth;
|
|
|
|
item.h = window.innerHeight;
|
|
|
|
try {
|
|
|
|
instance.invalidateCurrItems();
|
|
|
|
instance.updateSize(true);
|
|
|
|
} catch (e) {
|
|
|
|
// ignore
|
|
|
|
}
|
|
|
|
}
|
2021-02-16 06:22:59 +00:00
|
|
|
if (!fetching[item.dataIndex]) {
|
2021-01-13 05:31:02 +00:00
|
|
|
fetching[item.dataIndex] = true;
|
2021-02-17 05:02:01 +00:00
|
|
|
const url = await DownloadManager.getFile(item);
|
2021-01-13 05:31:02 +00:00
|
|
|
updateSrcUrl(item.dataIndex, url);
|
|
|
|
if (item.metadata.fileType === FILE_TYPE.VIDEO) {
|
|
|
|
item.html = `
|
2020-11-26 15:57:20 +00:00
|
|
|
<video width="320" height="240" controls>
|
2020-11-26 17:35:26 +00:00
|
|
|
<source src="${url}" />
|
2020-11-26 15:57:20 +00:00
|
|
|
Your browser does not support the video tag.
|
|
|
|
</video>
|
|
|
|
`;
|
2021-01-13 05:31:02 +00:00
|
|
|
delete item.src;
|
|
|
|
item.w = window.innerWidth;
|
|
|
|
} else {
|
|
|
|
item.src = url;
|
|
|
|
}
|
|
|
|
item.h = window.innerHeight;
|
|
|
|
try {
|
|
|
|
instance.invalidateCurrItems();
|
|
|
|
instance.updateSize(true);
|
|
|
|
} catch (e) {
|
|
|
|
// ignore
|
|
|
|
}
|
2020-11-28 18:11:24 +00:00
|
|
|
}
|
2021-01-13 05:31:02 +00:00
|
|
|
};
|
2021-01-11 08:13:53 +00:00
|
|
|
|
2021-02-15 14:30:26 +00:00
|
|
|
if (!data) {
|
|
|
|
return <div />;
|
|
|
|
}
|
2020-12-19 16:23:35 +00:00
|
|
|
|
2021-02-08 09:20:27 +00:00
|
|
|
const selectCollection = (id?: number) => {
|
2021-01-13 05:31:02 +00:00
|
|
|
const href = `/gallery?collection=${id || ''}`;
|
|
|
|
router.push(href, undefined, { shallow: true });
|
|
|
|
};
|
2021-01-05 07:17:46 +00:00
|
|
|
|
2021-01-13 05:31:02 +00:00
|
|
|
let idSet = new Set();
|
|
|
|
const filteredData = data
|
|
|
|
.map((item, index) => ({
|
|
|
|
...item,
|
|
|
|
dataIndex: index,
|
|
|
|
}))
|
|
|
|
.filter((item) => {
|
|
|
|
if (!idSet.has(item.id)) {
|
2021-01-06 06:31:16 +00:00
|
|
|
if (
|
2021-01-13 05:31:02 +00:00
|
|
|
!router.query.collection ||
|
|
|
|
router.query.collection === item.collectionID.toString()
|
2021-01-06 06:31:16 +00:00
|
|
|
) {
|
2021-01-13 05:31:02 +00:00
|
|
|
idSet.add(item.id);
|
|
|
|
return true;
|
2021-01-06 06:31:16 +00:00
|
|
|
}
|
2021-01-13 05:31:02 +00:00
|
|
|
return false;
|
|
|
|
}
|
|
|
|
return false;
|
|
|
|
});
|
|
|
|
|
|
|
|
const isSameDay = (first, second) => {
|
|
|
|
return (
|
|
|
|
first.getFullYear() === second.getFullYear() &&
|
|
|
|
first.getMonth() === second.getMonth() &&
|
|
|
|
first.getDate() === second.getDate()
|
|
|
|
);
|
|
|
|
};
|
2021-04-19 09:36:50 +00:00
|
|
|
|
2021-01-13 05:31:02 +00:00
|
|
|
return (
|
2021-03-18 20:16:18 +00:00
|
|
|
<FullScreenDropZone
|
|
|
|
getRootProps={props.getRootProps}
|
|
|
|
getInputProps={props.getInputProps}
|
2021-03-22 09:42:35 +00:00
|
|
|
showCollectionSelector={props.showCollectionSelector}
|
2021-03-18 20:16:18 +00:00
|
|
|
>
|
2021-04-19 09:44:51 +00:00
|
|
|
{loading && (
|
|
|
|
<LoadingOverlay>
|
|
|
|
<EnteSpinner />
|
|
|
|
</LoadingOverlay>
|
|
|
|
)}
|
2021-02-17 09:47:26 +00:00
|
|
|
<LoadingBar color="#2dc262" ref={loadingBar} />
|
|
|
|
{isFirstLoad && (
|
2021-02-17 08:35:19 +00:00
|
|
|
<div className="text-center">
|
2021-03-09 10:36:23 +00:00
|
|
|
<Alert variant="success">
|
2021-02-17 08:35:19 +00:00
|
|
|
{constants.INITIAL_LOAD_DELAY_WARNING}
|
|
|
|
</Alert>
|
|
|
|
</div>
|
|
|
|
)}
|
2021-03-12 12:30:33 +00:00
|
|
|
<PlanSelector
|
2021-04-07 07:18:45 +00:00
|
|
|
modalView={planModalView}
|
|
|
|
closeModal={() => setPlanModalView(false)}
|
|
|
|
setDialogMessage={setDialogMessage}
|
2021-04-08 06:18:18 +00:00
|
|
|
setConfirmAction={setConfirmAction}
|
2021-04-19 11:02:00 +00:00
|
|
|
setLoading={setLoading}
|
2021-03-29 09:33:28 +00:00
|
|
|
/>
|
2021-04-07 07:18:45 +00:00
|
|
|
<AlertBanner bannerMessage={bannerMessage} />
|
2021-03-29 13:17:00 +00:00
|
|
|
<ConfirmDialog
|
|
|
|
show={confirmAction !== null}
|
|
|
|
onHide={() => setConfirmAction(null)}
|
2021-04-22 12:56:06 +00:00
|
|
|
attributes={confirmAction}
|
2021-03-29 13:17:00 +00:00
|
|
|
/>
|
2021-04-05 13:17:48 +00:00
|
|
|
<MessageDialog
|
2021-04-07 07:18:45 +00:00
|
|
|
show={dialogMessage != null}
|
|
|
|
onHide={() => setDialogMessage(null)}
|
|
|
|
attributes={dialogMessage}
|
2021-03-12 12:30:33 +00:00
|
|
|
/>
|
2021-01-13 05:31:02 +00:00
|
|
|
<Collections
|
|
|
|
collections={collections}
|
2021-02-17 08:06:20 +00:00
|
|
|
selected={Number(router.query.collection)}
|
2021-01-13 05:31:02 +00:00
|
|
|
selectCollection={selectCollection}
|
|
|
|
/>
|
|
|
|
<Upload
|
2021-03-18 23:39:02 +00:00
|
|
|
collectionSelectorView={props.collectionSelectorView}
|
|
|
|
closeCollectionSelector={props.closeCollectionSelector}
|
2021-02-09 06:04:19 +00:00
|
|
|
collectionAndItsLatestFile={collectionAndItsLatestFile}
|
2021-02-05 17:04:32 +00:00
|
|
|
refetchData={syncWithRemote}
|
2021-03-29 07:52:20 +00:00
|
|
|
setBannerMessage={setBannerMessage}
|
2021-03-10 15:24:31 +00:00
|
|
|
acceptedFiles={props.acceptedFiles}
|
2021-04-11 08:12:44 +00:00
|
|
|
existingFiles={data}
|
2021-01-24 20:22:12 +00:00
|
|
|
/>
|
2021-04-04 13:58:17 +00:00
|
|
|
<Sidebar
|
|
|
|
files={data}
|
|
|
|
collections={collections}
|
|
|
|
setConfirmAction={setConfirmAction}
|
2021-04-20 11:09:03 +00:00
|
|
|
setDialogMessage={setDialogMessage}
|
2021-04-07 07:18:45 +00:00
|
|
|
setPlanModalView={setPlanModalView}
|
2021-04-04 13:58:17 +00:00
|
|
|
/>
|
2021-03-22 10:20:15 +00:00
|
|
|
<UploadButton openFileUploader={props.openFileUploader} />
|
2021-03-09 07:59:45 +00:00
|
|
|
{!isFirstLoad && data.length == 0 ? (
|
2021-04-05 15:48:23 +00:00
|
|
|
<div
|
|
|
|
style={{
|
|
|
|
height: '60%',
|
|
|
|
display: 'grid',
|
|
|
|
placeItems: 'center',
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Button
|
|
|
|
variant="outline-success"
|
|
|
|
onClick={props.openFileUploader}
|
|
|
|
style={{
|
|
|
|
paddingLeft: '32px',
|
|
|
|
paddingRight: '32px',
|
|
|
|
paddingTop: '12px',
|
|
|
|
paddingBottom: '12px',
|
|
|
|
}}
|
|
|
|
>
|
2021-03-09 10:22:09 +00:00
|
|
|
{constants.UPLOAD_FIRST_PHOTO}
|
|
|
|
</Button>
|
2021-04-05 15:48:23 +00:00
|
|
|
</div>
|
2021-03-09 07:59:45 +00:00
|
|
|
) : filteredData.length ? (
|
2021-01-13 05:31:02 +00:00
|
|
|
<Container>
|
|
|
|
<AutoSizer>
|
|
|
|
{({ height, width }) => {
|
|
|
|
let columns;
|
|
|
|
if (width >= 1000) {
|
|
|
|
columns = 5;
|
|
|
|
} else if (width < 1000 && width >= 450) {
|
|
|
|
columns = 3;
|
|
|
|
} else if (width < 450 && width >= 300) {
|
|
|
|
columns = 2;
|
|
|
|
} else {
|
|
|
|
columns = 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
const timeStampList: TimeStampListItem[] = [];
|
|
|
|
let listItemIndex = 0;
|
|
|
|
let currentDate = -1;
|
|
|
|
filteredData.forEach((item, index) => {
|
|
|
|
if (
|
|
|
|
!isSameDay(
|
2021-02-08 17:15:13 +00:00
|
|
|
new Date(
|
|
|
|
item.metadata.creationTime / 1000
|
|
|
|
),
|
2021-01-13 05:31:02 +00:00
|
|
|
new Date(currentDate)
|
|
|
|
)
|
|
|
|
) {
|
2021-02-08 17:15:13 +00:00
|
|
|
currentDate =
|
|
|
|
item.metadata.creationTime / 1000;
|
|
|
|
const dateTimeFormat = new Intl.DateTimeFormat(
|
|
|
|
'en-IN',
|
|
|
|
{
|
|
|
|
weekday: 'short',
|
|
|
|
year: 'numeric',
|
|
|
|
month: 'long',
|
|
|
|
day: 'numeric',
|
|
|
|
}
|
|
|
|
);
|
2021-01-13 05:31:02 +00:00
|
|
|
timeStampList.push({
|
|
|
|
itemType: ITEM_TYPE.TIME,
|
2021-03-22 14:05:12 +00:00
|
|
|
date: isSameDay(
|
|
|
|
new Date(currentDate),
|
|
|
|
new Date()
|
|
|
|
)
|
|
|
|
? 'Today'
|
|
|
|
: isSameDay(
|
2021-04-05 15:48:23 +00:00
|
|
|
new Date(currentDate),
|
|
|
|
new Date(Date.now() - A_DAY)
|
|
|
|
)
|
|
|
|
? 'Yesterday'
|
|
|
|
: dateTimeFormat.format(
|
|
|
|
currentDate
|
|
|
|
),
|
2021-01-13 05:31:02 +00:00
|
|
|
});
|
|
|
|
timeStampList.push({
|
|
|
|
itemType: ITEM_TYPE.TILE,
|
|
|
|
items: [item],
|
|
|
|
itemStartIndex: index,
|
|
|
|
});
|
|
|
|
listItemIndex = 1;
|
|
|
|
} else {
|
|
|
|
if (listItemIndex < columns) {
|
2021-02-08 17:15:13 +00:00
|
|
|
timeStampList[
|
|
|
|
timeStampList.length - 1
|
|
|
|
].items.push(item);
|
2021-01-13 05:31:02 +00:00
|
|
|
listItemIndex++;
|
|
|
|
} else {
|
|
|
|
listItemIndex = 1;
|
|
|
|
timeStampList.push({
|
|
|
|
itemType: ITEM_TYPE.TILE,
|
|
|
|
items: [item],
|
|
|
|
itemStartIndex: index,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
2021-02-08 17:15:13 +00:00
|
|
|
const extraRowsToRender = Math.ceil(
|
2021-02-08 17:29:45 +00:00
|
|
|
(NO_OF_PAGES * height) / IMAGE_CONTAINER_HEIGHT
|
2021-02-08 17:15:13 +00:00
|
|
|
);
|
2021-01-13 05:31:02 +00:00
|
|
|
return (
|
|
|
|
<List
|
|
|
|
itemSize={(index) =>
|
2021-02-08 17:15:13 +00:00
|
|
|
timeStampList[index].itemType ===
|
2021-02-18 06:01:44 +00:00
|
|
|
ITEM_TYPE.TIME
|
2021-02-08 17:15:13 +00:00
|
|
|
? DATE_CONTAINER_HEIGHT
|
|
|
|
: IMAGE_CONTAINER_HEIGHT
|
2021-01-13 05:31:02 +00:00
|
|
|
}
|
|
|
|
height={height}
|
|
|
|
width={width}
|
|
|
|
itemCount={timeStampList.length}
|
2020-12-19 16:23:35 +00:00
|
|
|
key={`${router.query.collection}-${columns}-${sinceTime}`}
|
2021-02-08 09:08:15 +00:00
|
|
|
overscanCount={extraRowsToRender}
|
2021-01-13 05:31:02 +00:00
|
|
|
>
|
|
|
|
{({ index, style }) => {
|
|
|
|
return (
|
|
|
|
<ListItem style={style}>
|
2021-02-08 17:15:13 +00:00
|
|
|
<ListContainer
|
|
|
|
columns={
|
|
|
|
timeStampList[index]
|
|
|
|
.itemType ===
|
2021-02-18 06:01:44 +00:00
|
|
|
ITEM_TYPE.TIME
|
2021-02-08 17:15:13 +00:00
|
|
|
? 1
|
|
|
|
: columns
|
|
|
|
}
|
|
|
|
>
|
|
|
|
{timeStampList[index]
|
|
|
|
.itemType ===
|
2021-02-18 06:01:44 +00:00
|
|
|
ITEM_TYPE.TIME ? (
|
2021-02-08 17:15:13 +00:00
|
|
|
<DateContainer>
|
|
|
|
{
|
|
|
|
timeStampList[
|
|
|
|
index
|
|
|
|
].date
|
|
|
|
}
|
|
|
|
</DateContainer>
|
|
|
|
) : (
|
|
|
|
timeStampList[
|
|
|
|
index
|
|
|
|
].items.map(
|
|
|
|
(item, idx) => {
|
2021-01-13 05:31:02 +00:00
|
|
|
return getThumbnail(
|
|
|
|
filteredData,
|
2021-02-08 17:15:13 +00:00
|
|
|
timeStampList[
|
|
|
|
index
|
|
|
|
]
|
|
|
|
.itemStartIndex +
|
2021-02-18 06:01:44 +00:00
|
|
|
idx
|
2021-01-13 05:31:02 +00:00
|
|
|
);
|
2021-02-08 17:15:13 +00:00
|
|
|
}
|
|
|
|
)
|
|
|
|
)}
|
2021-01-13 05:31:02 +00:00
|
|
|
</ListContainer>
|
|
|
|
</ListItem>
|
|
|
|
);
|
|
|
|
}}
|
|
|
|
</List>
|
|
|
|
);
|
|
|
|
}}
|
|
|
|
</AutoSizer>
|
|
|
|
<PhotoSwipe
|
|
|
|
isOpen={open}
|
|
|
|
items={filteredData}
|
2021-02-17 08:35:19 +00:00
|
|
|
currentIndex={currentIndex}
|
2021-01-13 05:31:02 +00:00
|
|
|
onClose={handleClose}
|
|
|
|
gettingData={getSlideData}
|
2021-01-20 12:05:04 +00:00
|
|
|
favItemIds={favItemIds}
|
2021-02-17 08:45:28 +00:00
|
|
|
loadingBar={loadingBar}
|
2021-01-13 05:31:02 +00:00
|
|
|
/>
|
|
|
|
</Container>
|
|
|
|
) : (
|
2021-02-08 17:15:13 +00:00
|
|
|
<DeadCenter>
|
|
|
|
<div>{constants.NOTHING_HERE}</div>
|
|
|
|
</DeadCenter>
|
|
|
|
)}
|
2021-03-09 08:20:43 +00:00
|
|
|
{data.length < 30 && (
|
|
|
|
<Alert
|
2021-03-09 10:36:23 +00:00
|
|
|
variant="success"
|
2021-03-10 15:24:31 +00:00
|
|
|
style={{
|
|
|
|
position: 'fixed',
|
|
|
|
bottom: '1%',
|
|
|
|
width: '100%',
|
|
|
|
textAlign: 'center',
|
|
|
|
marginBottom: '0px',
|
|
|
|
}}
|
2021-03-09 08:20:43 +00:00
|
|
|
>
|
|
|
|
{constants.INSTALL_MOBILE_APP()}
|
|
|
|
</Alert>
|
|
|
|
)}
|
2021-03-21 06:54:40 +00:00
|
|
|
{selected.count && (
|
2021-03-29 10:30:20 +00:00
|
|
|
<DeleteBtn
|
2021-04-22 12:56:06 +00:00
|
|
|
onClick={() =>
|
|
|
|
setConfirmAction({
|
|
|
|
action: CONFIRM_ACTION.DELETE,
|
|
|
|
callback: fileDelete.bind(
|
|
|
|
null,
|
|
|
|
selected,
|
|
|
|
clearSelection,
|
|
|
|
syncWithRemote
|
|
|
|
),
|
|
|
|
})
|
|
|
|
}
|
2021-03-29 10:30:20 +00:00
|
|
|
>
|
2021-03-21 06:54:40 +00:00
|
|
|
<Delete />
|
|
|
|
</DeleteBtn>
|
|
|
|
)}
|
2021-03-18 20:16:18 +00:00
|
|
|
</FullScreenDropZone>
|
2021-01-13 05:31:02 +00:00
|
|
|
);
|
2020-09-12 21:53:41 +00:00
|
|
|
}
|