beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Merge pull request #236 from ente-io/master

Browse source 
Mid Nov Release
This commit is contained in:
abhinavkgrd 2021-11-18 10:21:58 +05:30 committed by GitHub
parent 3a9152f927 e913615f57
commit f63fbcc680
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 639 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -20,6 +20,7 @@
"@typescript-eslint/eslint-plugin": "^4.25.0",
"@typescript-eslint/parser": "^4.25.0",
"axios": "^0.21.3",
"bip39": "^3.0.4",
"bootstrap": "^4.5.2",
"chrono-node": "^2.2.6",
"comlink": "^4.3.0",

4
src/components/EnteSpinner.tsx
View file

@ -2,16 +2,18 @@ import React from 'react';
import { Spinner } from 'react-bootstrap';
export default function EnteSpinner(props) {
const { style, ...others } = props ?? {};
return (
<Spinner
{...props}
animation="border"
style={{
width: '36px',
height: '36px',
borderWidth: '0.20em',
color: '#51cd7c',
...(style && style),
}}
{...others}
role="status"
/>
);

172
src/components/FixCreationTime.tsx Normal file
View file

@ -0,0 +1,172 @@
import constants from 'utils/strings/constants';
import MessageDialog from './MessageDialog';
import React, { useContext, useEffect, useState } from 'react';
import { ProgressBar, Button } from 'react-bootstrap';
import { ComfySpan } from './ExportInProgress';
import { updateCreationTimeWithExif } from 'services/updateCreationTimeWithExif';
import { GalleryContext } from 'pages/gallery';
import { File } from 'services/fileService';
export interface FixCreationTimeAttributes {
files: File[];
}
interface Props {
isOpen: boolean;
show: () => void;
hide: () => void;
attributes: FixCreationTimeAttributes;
}
export enum FIX_STATE {
NOT_STARTED,
RUNNING,
COMPLETED,
COMPLETED_WITH_ERRORS,
}
function Message(props: { fixState: FIX_STATE }) {
let message = null;
switch (props.fixState) {
case FIX_STATE.NOT_STARTED:
message = constants.UPDATE_CREATION_TIME_NOT_STARTED();
break;
case FIX_STATE.COMPLETED:
message = constants.UPDATE_CREATION_TIME_COMPLETED();
break;
case FIX_STATE.COMPLETED_WITH_ERRORS:
message = constants.UPDATE_CREATION_TIME_COMPLETED_WITH_ERROR();
break;
}
return message ? <div>{message}</div> : <></>;
}
export default function FixCreationTime(props: Props) {
const [fixState, setFixState] = useState(FIX_STATE.NOT_STARTED);
const [progressTracker, setProgressTracker] = useState({
current: 0,
total: 0,
});
const galleryContext = useContext(GalleryContext);
useEffect(() => {
if (
props.attributes &&
props.isOpen &&
fixState !== FIX_STATE.RUNNING
) {
setFixState(FIX_STATE.NOT_STARTED);
}
}, [props.isOpen]);
const startFix = async () => {
setFixState(FIX_STATE.RUNNING);
const completedWithoutError = await updateCreationTimeWithExif(
props.attributes.files,
setProgressTracker
);
if (!completedWithoutError) {
setFixState(FIX_STATE.COMPLETED);
} else {
setFixState(FIX_STATE.COMPLETED_WITH_ERRORS);
}
await galleryContext.syncWithRemote();
};
if (!props.attributes) {
return <></>;
}
return (
<MessageDialog
show={props.isOpen}
onHide={props.hide}
attributes={{
title:
fixState === FIX_STATE.RUNNING
? constants.FIX_CREATION_TIME_IN_PROGRESS
: constants.FIX_CREATION_TIME,
staticBackdrop: true,
nonClosable: true,
}}>
<div
style={{
marginBottom: '10px',
padding: '0 5%',
display: 'flex',
alignItems: 'center',
flexDirection: 'column',
}}>
<Message fixState={fixState} />
{fixState === FIX_STATE.RUNNING && (
<>
<div style={{ marginBottom: '10px' }}>
<ComfySpan>
{' '}
{progressTracker.current} /{' '}
{progressTracker.total}{' '}
</ComfySpan>{' '}
<span style={{ marginLeft: '10px' }}>
{' '}
{constants.CREATION_TIME_UPDATED}
</span>
</div>
<div
style={{
width: '100%',
marginTop: '10px',
marginBottom: '20px',
}}>
<ProgressBar
now={Math.round(
(progressTracker.current * 100) /
progressTracker.total
)}
animated={true}
variant="upload-progress-bar"
/>
</div>
</>
)}
{fixState !== FIX_STATE.RUNNING && (
<div
style={{
width: '100%',
display: 'flex',
marginTop: '30px',
justifyContent: 'space-around',
}}>
{(fixState === FIX_STATE.NOT_STARTED ||
fixState === FIX_STATE.COMPLETED_WITH_ERRORS) && (
<Button
block
variant={'outline-secondary'}
onClick={() => {
props.hide();
}}>
{constants.CANCEL}
</Button>
)}
{fixState === FIX_STATE.COMPLETED && (
<Button
block
variant={'outline-secondary'}
onClick={props.hide}>
{constants.CLOSE}
</Button>
)}
{(fixState === FIX_STATE.NOT_STARTED ||
fixState === FIX_STATE.COMPLETED_WITH_ERRORS) && (
<>
<div style={{ width: '30px' }} />
<Button
block
variant={'outline-success'}
onClick={startFix}>
{constants.FIX_CREATION_TIME}
</Button>
</>
)}
</div>
)}
</div>
</MessageDialog>
);
}

7
src/components/FixLargeThumbnail.tsx
View file

@ -189,7 +189,8 @@ export default function FixLargeThumbnails(props: Props) {
display: 'flex',
justifyContent: 'space-around',
}}>
{fixState === FIX_STATE.NOT_STARTED ? (
{fixState === FIX_STATE.NOT_STARTED ||
fixState === FIX_STATE.FIX_LATER ? (
<Button
block
variant={'outline-secondary'}
@ -197,7 +198,7 @@ export default function FixLargeThumbnails(props: Props) {
updateFixState(FIX_STATE.FIX_LATER);
props.hide();
}}>
{constants.FIX_LATER}
{constants.FIX_THUMBNAIL_LATER}
</Button>
) : (
<Button
@ -217,7 +218,7 @@ export default function FixLargeThumbnails(props: Props) {
block
variant={'outline-success'}
onClick={() => startFix()}>
{constants.FIX}
{constants.FIX_THUMBNAIL}
</Button>
</>
)}

194
src/components/PhotoSwipe/PhotoSwipe.tsx
View file

@ -10,6 +10,7 @@ import {
import {
ALL_TIME,
File,
MAX_EDITED_FILE_NAME_LENGTH,
MAX_EDITED_CREATION_TIME,
MIN_EDITED_CREATION_TIME,
updatePublicMagicMetadata,
@ -22,20 +23,32 @@ import styled from 'styled-components';
import events from './events';
import {
changeFileCreationTime,
changeFileName,
downloadFile,
formatDateTime,
splitFilenameAndExtension,
updateExistingFilePubMetadata,
} from 'utils/file';
import { FormCheck } from 'react-bootstrap';
import { Col, Form, FormCheck, FormControl } from 'react-bootstrap';
import { prettyPrintExif } from 'utils/exif';
import EditIcon from 'components/icons/EditIcon';
import { IconButton, Label, Row, Value } from 'components/Container';
import {
FlexWrapper,
IconButton,
Label,
Row,
Value,
} from 'components/Container';
import { logError } from 'utils/sentry';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import CloseIcon from 'components/icons/CloseIcon';
import TickIcon from 'components/icons/TickIcon';
import { FreeFlowText } from 'components/RecoveryKeyModal';
import { Formik } from 'formik';
import * as Yup from 'yup';
import EnteSpinner from 'components/EnteSpinner';
interface Iprops {
isOpen: boolean;
@ -86,7 +99,7 @@ function RenderCreationTime({
file: File;
scheduleUpdate: () => void;
}) {
const originalCreationTime = new Date(file.metadata.creationTime / 1000);
const originalCreationTime = new Date(file?.metadata.creationTime / 1000);
const [isInEditMode, setIsInEditMode] = useState(false);
const [pickedTime, setPickedTime] = useState(originalCreationTime);
@ -98,7 +111,8 @@ function RenderCreationTime({
try {
if (isInEditMode && file) {
const unixTimeInMicroSec = pickedTime.getTime() * 1000;
if (unixTimeInMicroSec === file.metadata.creationTime) {
if (unixTimeInMicroSec === file?.metadata.creationTime) {
closeEditMode();
return;
}
let updatedFile = await changeFileCreationTime(
@ -175,6 +189,170 @@ function RenderCreationTime({
</>
);
}
const getFileTitle = (filename, extension) => {
if (extension) {
return filename + '.' + extension;
} else {
return filename;
}
};
interface formValues {
filename: string;
}
const FileNameEditForm = ({ filename, saveEdits, discardEdits, extension }) => {
const [loading, setLoading] = useState(false);
const onSubmit = async (values: formValues) => {
try {
setLoading(true);
await saveEdits(values.filename);
} finally {
setLoading(false);
}
};
return (
<Formik<formValues>
initialValues={{ filename }}
validationSchema={Yup.object().shape({
filename: Yup.string()
.required(constants.REQUIRED)
.max(
MAX_EDITED_FILE_NAME_LENGTH,
constants.FILE_NAME_CHARACTER_LIMIT
),
})}
validateOnBlur={false}
onSubmit={onSubmit}>
{({ values, errors, handleChange, handleSubmit }) => (
<Form noValidate onSubmit={handleSubmit}>
<Form.Row>
<Form.Group
bsPrefix="ente-form-group"
as={Col}
xs={extension ? 7 : 8}>
<Form.Control
as="textarea"
placeholder={constants.FILE_NAME}
value={values.filename}
onChange={handleChange('filename')}
isInvalid={Boolean(errors.filename)}
autoFocus
disabled={loading}
/>
<FormControl.Feedback
type="invalid"
style={{ textAlign: 'center' }}>
{errors.filename}
</FormControl.Feedback>
</Form.Group>
{extension && (
<Form.Group
bsPrefix="ente-form-group"
as={Col}
xs={1}
controlId="formHorizontalFileName">
<FlexWrapper style={{ padding: '5px' }}>
{`.${extension}`}
</FlexWrapper>
</Form.Group>
)}
<Form.Group bsPrefix="ente-form-group" as={Col} xs={2}>
<Value width={'16.67%'}>
<IconButton type="submit" disabled={loading}>
{loading ? (
<EnteSpinner
style={{
width: '20px',
height: '20px',
}}
/>
) : (
<TickIcon />
)}
</IconButton>
<IconButton
onClick={discardEdits}
disabled={loading}>
<CloseIcon />
</IconButton>
</Value>
</Form.Group>
</Form.Row>
</Form>
)}
</Formik>
);
};
function RenderFileName({
file,
scheduleUpdate,
}: {
file: File;
scheduleUpdate: () => void;
}) {
const originalTitle = file?.metadata.title;
const [isInEditMode, setIsInEditMode] = useState(false);
const [originalFileName, extension] =
splitFilenameAndExtension(originalTitle);
const [filename, setFilename] = useState(originalFileName);
const openEditMode = () => setIsInEditMode(true);
const closeEditMode = () => setIsInEditMode(false);
const saveEdits = async (newFilename: string) => {
try {
if (file) {
if (filename === newFilename) {
closeEditMode();
return;
}
setFilename(newFilename);
const newTitle = getFileTitle(newFilename, extension);
let updatedFile = await changeFileName(file, newTitle);
updatedFile = (
await updatePublicMagicMetadata([updatedFile])
)[0];
updateExistingFilePubMetadata(file, updatedFile);
scheduleUpdate();
}
} catch (e) {
logError(e, 'failed to update file name');
} finally {
closeEditMode();
}
};
return (
<>
<Row>
<Label width="30%">{constants.FILE_NAME}</Label>
{!isInEditMode ? (
<>
<Value width="60%">
<FreeFlowText>
{getFileTitle(filename, extension)}
</FreeFlowText>
</Value>
<Value
width="10%"
style={{ cursor: 'pointer', marginLeft: '10px' }}>
<IconButton onClick={openEditMode}>
<EditIcon />
</IconButton>
</Value>
</>
) : (
<FileNameEditForm
extension={extension}
filename={filename}
saveEdits={saveEdits}
discardEdits={closeEditMode}
/>
)}
</Row>
</>
);
}
function ExifData(props: { exif: any }) {
const { exif } = props;
const [showAll, setShowAll] = useState(false);
@ -250,8 +428,12 @@ function InfoModal({
constants.FILE_ID,
items[photoSwipe?.getCurrentIndex()]?.id
)}
{metadata?.title &&
renderInfoItem(constants.FILE_NAME, metadata.title)}
{metadata?.title && (
<RenderFileName
file={items[photoSwipe?.getCurrentIndex()]}
scheduleUpdate={scheduleUpdate}
/>
)}
{metadata?.creationTime && (
<RenderCreationTime
file={items[photoSwipe?.getCurrentIndex()]}

7
src/components/RecoveryKeyModal.tsx
View file

@ -5,7 +5,9 @@ import constants from 'utils/strings/constants';
import MessageDialog from './MessageDialog';
import EnteSpinner from './EnteSpinner';
import styled from 'styled-components';
const bip39 = require('bip39');
// mobile client library only supports english.
bip39.setDefaultWordlist('english');
export const CodeBlock = styled.div<{ height: number }>`
display: flex;
align-items: center;
@ -23,6 +25,7 @@ export const FreeFlowText = styled.div`
word-wrap: break-word;
overflow-wrap: break-word;
min-width: 30%;
text-align: left;
`;
interface Props {
show: boolean;
@ -41,7 +44,7 @@ function RecoveryKeyModal({ somethingWentWrong, ...props }: Props) {
somethingWentWrong();
props.onHide();
}
setRecoveryKey(recoveryKey);
setRecoveryKey(bip39.entropyToMnemonic(recoveryKey));
};
main();
}, [props.show]);

20
src/components/icons/ClockIcon.tsx Normal file
View file

@ -0,0 +1,20 @@
import React from 'react';
export default function ClockIcon(props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
height={props.height}
viewBox={props.viewBox}
width={props.width}
{...props}>
<path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm1 12v-6h-2v8h7v-2h-5z" />
</svg>
);
}
ClockIcon.defaultProps = {
height: 20,
width: 20,
viewBox: '0 0 24 24',
};

31
src/components/pages/gallery/SelectedFileOptions.tsx
View file

@ -1,5 +1,5 @@
import { SetDialogMessage } from 'components/MessageDialog';
import React from 'react';
import React, { useEffect, useState } from 'react';
import { SetCollectionSelectorAttributes } from './CollectionSelector';
import styled from 'styled-components';
import Navbar from 'components/Navbar';
@ -17,6 +17,9 @@ import { OverlayTrigger } from 'react-bootstrap';
import { Collection } from 'services/collectionService';
import RemoveIcon from 'components/icons/RemoveIcon';
import RestoreIcon from 'components/icons/RestoreIcon';
import ClockIcon from 'components/icons/ClockIcon';
import { getData, LS_KEYS } from 'utils/storage/localStorage';
import { FIX_CREATION_TIME_USER_ID, User } from 'services/userService';
interface Props {
addToCollectionHelper: (collection: Collection) => void;
@ -27,6 +30,7 @@ interface Props {
setCollectionSelectorAttributes: SetCollectionSelectorAttributes;
deleteFileHelper: (permanent?: boolean) => void;
removeFromCollectionHelper: () => void;
fixTimeHelper: () => void;
count: number;
clearSelection: () => void;
archiveFilesHelper: () => void;
@ -68,6 +72,7 @@ const SelectedFileOptions = ({
restoreToCollectionHelper,
showCreateCollectionModal,
removeFromCollectionHelper,
fixTimeHelper,
setDialogMessage,
setCollectionSelectorAttributes,
deleteFileHelper,
@ -78,6 +83,12 @@ const SelectedFileOptions = ({
activeCollection,
isFavoriteCollection,
}: Props) => {
const [showFixCreationTime, setShowFixCreationTime] = useState(false);
useEffect(() => {
const user: User = getData(LS_KEYS.USER);
const showFixCreationTime = user?.id === FIX_CREATION_TIME_USER_ID;
setShowFixCreationTime(showFixCreationTime);
}, []);
const addToCollection = () =>
setCollectionSelectorAttributes({
callback: addToCollectionHelper,
@ -168,6 +179,18 @@ const SelectedFileOptions = ({
</>
) : (
<>
{showFixCreationTime && (
<IconWithMessage message={constants.FIX_CREATION_TIME}>
<IconButton onClick={fixTimeHelper}>
<ClockIcon />
</IconButton>
</IconWithMessage>
)}
<IconWithMessage message={constants.ADD}>
<IconButton onClick={addToCollection}>
<AddIcon />
</IconButton>
</IconWithMessage>
{activeCollection === ARCHIVE_SECTION && (
<IconWithMessage message={constants.UNARCHIVE}>
<IconButton onClick={unArchiveFilesHelper}>
@ -182,11 +205,7 @@ const SelectedFileOptions = ({
</IconButton>
</IconWithMessage>
)}
<IconWithMessage message={constants.ADD}>
<IconButton onClick={addToCollection}>
<AddIcon />
</IconButton>
</IconWithMessage>
{activeCollection !== ALL_SECTION &&
activeCollection !== ARCHIVE_SECTION &&
!isFavoriteCollection && (

3
src/pages/_app.tsx
View file

@ -446,6 +446,9 @@ const GlobalStyles = createGlobalStyle`
.react-datepicker__day--disabled:hover {
background-color: #202020;
}
.ente-form-group{
margin:0;
}
`;
export const LogoImage = styled.img`

38
src/pages/gallery/index.tsx
View file

@ -93,6 +93,9 @@ import {
Trash,
} from 'services/trashService';
import DeleteBtn from 'components/DeleteBtn';
import FixCreationTime, {
FixCreationTimeAttributes,
} from 'components/FixCreationTime';
export const DeadCenter = styled.div`
flex: 1;
@ -204,7 +207,9 @@ export default function Gallery() {
useState<Map<number, number>>();
const [activeCollection, setActiveCollection] = useState<number>(undefined);
const [trash, setTrash] = useState<Trash>([]);
const [fixCreationTimeView, setFixCreationTimeView] = useState(false);
const [fixCreationTimeAttributes, setFixCreationTimeAttributes] =
useState<FixCreationTimeAttributes>(null);
useEffect(() => {
const key = getKey(SESSION_KEYS.ENCRYPTION_KEY);
if (!key) {
@ -243,13 +248,19 @@ export default function Gallery() {
useEffect(() => setDialogView(true), [dialogMessage]);
useEffect(() => {
if (collectionSelectorAttributes) {
setCollectionSelectorView(true);
}
}, [collectionSelectorAttributes]);
useEffect(
() => collectionSelectorAttributes && setCollectionSelectorView(true),
[collectionSelectorAttributes]
);
useEffect(() => setCollectionNamerView(true), [collectionNamerAttributes]);
useEffect(
() => collectionNamerAttributes && setCollectionNamerView(true),
[collectionNamerAttributes]
);
useEffect(
() => fixCreationTimeAttributes && setFixCreationTimeView(true),
[fixCreationTimeAttributes]
);
useEffect(() => {
if (typeof activeCollection === 'undefined') {
@ -523,6 +534,12 @@ export default function Gallery() {
}
};
const fixTimeHelper = async () => {
const selectedFiles = getSelectedFiles(selected, files);
setFixCreationTimeAttributes({ files: selectedFiles });
clearSelection();
};
return (
<GalleryContext.Provider
value={{
@ -594,6 +611,12 @@ export default function Gallery() {
}
attributes={collectionSelectorAttributes}
/>
<FixCreationTime
isOpen={fixCreationTimeView}
hide={() => setFixCreationTimeView(false)}
show={() => setFixCreationTimeView(true)}
attributes={fixCreationTimeAttributes}
/>
<Upload
syncWithRemote={syncWithRemote}
setBannerMessage={setBannerMessage}
@ -685,6 +708,7 @@ export default function Gallery() {
)
)
}
fixTimeHelper={fixTimeHelper}
count={selected.count}
clearSelection={clearSelection}
activeCollection={activeCollection}

10
src/pages/recover/index.tsx
View file

@ -21,6 +21,9 @@ import LogoImg from 'components/LogoImg';
import { logError } from 'utils/sentry';
import { getKey, SESSION_KEYS } from 'utils/storage/sessionStorage';
import { User } from 'services/userService';
const bip39 = require('bip39');
// mobile client library only supports english.
bip39.setDefaultWordlist('english');
export default function Recover() {
const router = useRouter();
@ -51,6 +54,13 @@ export default function Recover() {
const recover = async (recoveryKey: string, setFieldError) => {
try {
// check if user is entering mnemonic recovery key
if (recoveryKey.trim().indexOf(' ') > 0) {
if (recoveryKey.trim().split(' ').length !== 24) {
throw new Error('recovery code should have 24 words');
}
recoveryKey = bip39.mnemonicToEntropy(recoveryKey);
}
const cryptoWorker = await new CryptoWorker();
const masterKey: string = await cryptoWorker.decryptB64(
keyAttributes.masterKeyEncryptedWithRecoveryKey,

10
src/pages/two-factor/recover/index.tsx
View file

@ -12,6 +12,9 @@ import { logError } from 'utils/sentry';
import { recoverTwoFactor, removeTwoFactor } from 'services/userService';
import { AppContext, FLASH_MESSAGE_TYPE } from 'pages/_app';
import { PAGES } from 'types';
const bip39 = require('bip39');
// mobile client library only supports english.
bip39.setDefaultWordlist('english');
export default function Recover() {
const router = useRouter();
@ -43,6 +46,13 @@ export default function Recover() {
const recover = async (recoveryKey: string, setFieldError) => {
try {
// check if user is entering mnemonic recovery key
if (recoveryKey.trim().indexOf(' ') > 0) {
if (recoveryKey.trim().split(' ').length !== 24) {
throw new Error('recovery code should have 24 words');
}
recoveryKey = bip39.mnemonicToEntropy(recoveryKey);
}
const cryptoWorker = await new CryptoWorker();
const twoFactorSecret: string = await cryptoWorker.decryptB64(
encryptedTwoFactorSecret.encryptedData,

15
src/services/ffmpegService.ts
View file

@ -33,12 +33,17 @@ class FFmpegService {
const response = this.generateThumbnailProcessor.queueUpRequest(
generateThumbnailHelper.bind(null, this.ffmpeg, file)
);
const thumbnail = await response.promise;
if (!thumbnail) {
throw Error(CustomError.THUMBNAIL_GENERATION_FAILED);
try {
return await response.promise;
} catch (e) {
if (e.message === CustomError.REQUEST_CANCELLED) {
// ignore
return null;
} else {
logError(e, 'ffmpeg thumbnail generation failed');
throw e;
}
}
return thumbnail;
}
}

9
src/services/fileService.ts
View file

@ -21,6 +21,8 @@ export const MIN_EDITED_CREATION_TIME = new Date(1800, 0, 1);
export const MAX_EDITED_CREATION_TIME = new Date();
export const ALL_TIME = new Date(1800, 0, 1, 23, 59, 59);
export const MAX_EDITED_FILE_NAME_LENGTH = 100;
export interface fileAttribute {
encryptedData?: DataStream | Uint8Array;
objectKey?: string;
@ -72,6 +74,7 @@ export interface MagicMetadata extends Omit<MagicMetadataCore, 'data'> {
export interface PublicMagicMetadataProps {
editedTime?: number;
editedName?: string;
}
export interface PublicMagicMetadata extends Omit<MagicMetadataCore, 'data'> {
@ -147,7 +150,7 @@ export const syncFiles = async (
let files = await removeDeletedCollectionFiles(collections, localFiles);
if (files.length !== localFiles.length) {
await setLocalFiles(files);
setFiles(sortFiles(mergeMetadata(files)));
setFiles([...sortFiles(mergeMetadata(files))]);
}
for (const collection of collections) {
if (!getToken()) {
@ -183,9 +186,9 @@ export const syncFiles = async (
`${collection.id}-time`,
collection.updationTime
);
setFiles(sortFiles(mergeMetadata(files)));
setFiles([...sortFiles(mergeMetadata(files))]);
}
return mergeMetadata(files);
return sortFiles(mergeMetadata(files));
};
export const getFiles = async (

62
src/services/updateCreationTimeWithExif.ts Normal file
View file

@ -0,0 +1,62 @@
import { SetProgressTracker } from 'components/FixLargeThumbnail';
import CryptoWorker from 'utils/crypto';
import {
changeFileCreationTime,
getFileFromURL,
updateExistingFilePubMetadata,
} from 'utils/file';
import { logError } from 'utils/sentry';
import downloadManager from './downloadManager';
import { File, FILE_TYPE, updatePublicMagicMetadata } from './fileService';
import { getExifData } from './upload/exifService';
import { getFileType } from './upload/readFileService';
export async function updateCreationTimeWithExif(
filesToBeUpdated: File[],
setProgressTracker: SetProgressTracker
) {
let completedWithError = false;
try {
if (filesToBeUpdated.length === 0) {
return completedWithError;
}
setProgressTracker({ current: 0, total: filesToBeUpdated.length });
for (const [index, file] of filesToBeUpdated.entries()) {
try {
if (file.metadata.fileType !== FILE_TYPE.IMAGE) {
continue;
}
const fileURL = await downloadManager.getFile(file);
const fileObject = await getFileFromURL(fileURL);
const worker = await new CryptoWorker();
const fileTypeInfo = await getFileType(worker, fileObject);
const exifData = await getExifData(fileObject, fileTypeInfo);
if (
exifData?.creationTime &&
exifData?.creationTime !== file.metadata.creationTime
) {
let updatedFile = await changeFileCreationTime(
file,
exifData.creationTime
);
updatedFile = (
await updatePublicMagicMetadata([updatedFile])
)[0];
updateExistingFilePubMetadata(file, updatedFile);
}
} catch (e) {
logError(e, 'failed to updated a CreationTime With Exif');
completedWithError = true;
} finally {
setProgressTracker({
current: index + 1,
total: filesToBeUpdated.length,
});
}
}
} catch (e) {
logError(e, 'update CreationTime With Exif failed');
completedWithError = true;
}
return completedWithError;
}

15
src/services/upload/exifService.ts
View file

@ -1,6 +1,8 @@
import exifr from 'exifr';
import { logError } from 'utils/sentry';
import { NULL_LOCATION, Location } from './metadataService';
import { FileTypeInfo } from './readFileService';
const EXIF_TAGS_NEEDED = [
'DateTimeOriginal',
@ -17,9 +19,18 @@ interface ParsedEXIFData {
}
export async function getExifData(
receivedFile: globalThis.File
receivedFile: globalThis.File,
fileTypeInfo: FileTypeInfo
): Promise<ParsedEXIFData> {
const exifData = await exifr.parse(receivedFile, EXIF_TAGS_NEEDED);
let exifData;
try {
exifData = await exifr.parse(receivedFile, EXIF_TAGS_NEEDED);
} catch (e) {
logError(e, 'file missing exif data ', {
fileType: fileTypeInfo.exactType,
});
// ignore exif parsing errors
}
if (!exifData) {
return { location: NULL_LOCATION, creationTime: null };
}

9
src/services/upload/metadataService.ts
View file

@ -34,14 +34,7 @@ export async function extractMetadata(
) {
let exifData = null;
if (fileTypeInfo.fileType === FILE_TYPE.IMAGE) {
try {
exifData = await getExifData(receivedFile);
} catch (e) {
logError(e, 'file missing exif data ', {
fileType: fileTypeInfo.exactType,
});
// ignore exif parsing errors
}
exifData = await getExifData(receivedFile, fileTypeInfo);
}
const extractedMetadata: MetadataObject = {

16
src/services/upload/queueProcessor.ts
View file

@ -1,6 +1,9 @@
import { CustomError } from 'utils/common/errorUtil';
interface RequestQueueItem {
request: (canceller?: RequestCanceller) => Promise<any>;
callback: (response) => void;
successCallback: (response: any) => void;
failureCallback: (error: Error) => void;
isCanceled: { status: boolean };
canceller: { exec: () => void };
}
@ -26,10 +29,11 @@ export default class QueueProcessor<T> {
},
};
const promise = new Promise<T>((resolve) => {
const promise = new Promise<T>((resolve, reject) => {
this.requestQueue.push({
request,
callback: resolve,
successCallback: resolve,
failureCallback: reject,
isCanceled,
canceller,
});
@ -53,15 +57,15 @@ export default class QueueProcessor<T> {
let response = null;
if (queueItem.isCanceled.status) {
response = null;
queueItem.failureCallback(Error(CustomError.REQUEST_CANCELLED));
} else {
try {
response = await queueItem.request(queueItem.canceller);
queueItem.successCallback(response);
} catch (e) {
response = null;
queueItem.failureCallback(e);
}
}
queueItem.callback(response);
}
}
}

2
src/services/upload/thumbnailService.ts
View file

@ -56,7 +56,7 @@ export async function generateThumbnail(
}
} catch (e) {
logError(e, 'uploading static thumbnail', {
type: fileTypeInfo.exactType,
fileFormat: fileTypeInfo.exactType,
});
thumbnail = Uint8Array.from(atob(BLACK_THUMBNAIL_BASE64), (c) =>
c.charCodeAt(0)

2
src/services/userService.ts
View file

@ -28,6 +28,8 @@ const ENDPOINT = getEndpoint();
const HAS_SET_KEYS = 'hasSetKeys';
export const FIX_CREATION_TIME_USER_ID = 341;
export interface User {
id: number;
name: string;

1
src/utils/common/errorUtil.ts
View file

@ -28,6 +28,7 @@ export enum CustomError {
FAV_COLLECTION_MISSING = 'favorite collection missing',
INVALID_COLLECTION_OPERATION = 'invalid collection operation',
WAIT_TIME_EXCEEDED = 'thumbnail generation wait time exceeded',
REQUEST_CANCELLED = 'request canceled',
}
function parseUploadError(error: AxiosResponse) {

30
src/utils/file/index.ts
View file

@ -240,6 +240,16 @@ export function fileExtensionWithDot(filename) {
else return filename.substr(lastDotPosition);
}
export function splitFilenameAndExtension(filename): [string, string] {
const lastDotPosition = filename.lastIndexOf('.');
if (lastDotPosition === -1) return [filename, null];
else
return [
filename.substr(0, lastDotPosition),
filename.substr(lastDotPosition + 1),
];
}
export function generateStreamFromArrayBuffer(data: Uint8Array) {
return new ReadableStream({
async start(controller: ReadableStreamDefaultController) {
@ -381,6 +391,17 @@ export async function changeFileCreationTime(file: File, editedTime: number) {
);
}
export async function changeFileName(file: File, editedName: string) {
const updatedPublicMagicMetadataProps: PublicMagicMetadataProps = {
editedName,
};
return await updatePublicMagicMetadataProps(
file,
updatedPublicMagicMetadataProps
);
}
export function isSharedFile(file: File) {
const user: User = getData(LS_KEYS.USER);
@ -400,6 +421,9 @@ export function mergeMetadata(files: File[]): File[] {
...(file.pubMagicMetadata?.data.editedTime && {
creationTime: file.pubMagicMetadata.data.editedTime,
}),
...(file.pubMagicMetadata?.data.editedName && {
title: file.pubMagicMetadata.data.editedName,
}),
}
: {}),
...(file.magicMetadata?.data ? file.magicMetadata.data : {}),
@ -414,3 +438,9 @@ export function updateExistingFilePubMetadata(
existingFile.pubMagicMetadata = updatedFile.pubMagicMetadata;
existingFile.metadata = mergeMetadata([existingFile])[0].metadata;
}
export async function getFileFromURL(fileURL: string) {
const fileBlob = await (await fetch(fileURL)).blob();
const fileFile = new globalThis.File([fileBlob], 'temp');
return fileFile;
}

17
src/utils/strings/englishConstants.tsx
View file

@ -579,8 +579,8 @@ const englishConstants = {
SORT_BY_COLLECTION_NAME: 'album name',
FIX_LARGE_THUMBNAILS: 'compress thumbnails',
THUMBNAIL_REPLACED: 'thumbnails compressed',
FIX: 'compress',
FIX_LATER: 'compress later',
FIX_THUMBNAIL: 'compress',
FIX_THUMBNAIL_LATER: 'compress later',
REPLACE_THUMBNAIL_NOT_STARTED: () => (
<>
some of your videos thumbnails can be compressed to save space.
@ -596,6 +596,19 @@ const englishConstants = {
REPLACE_THUMBNAIL_COMPLETED_WITH_ERROR: () => (
<>could not compress some of your thumbnails, please retry</>
),
FIX_CREATION_TIME: 'fix time',
FIX_CREATION_TIME_IN_PROGRESS: 'fixing time',
CREATION_TIME_UPDATED: `file time updated`,
UPDATE_CREATION_TIME_NOT_STARTED: () => (
<>do you want to fix time with the values found in EXIF</>
),
UPDATE_CREATION_TIME_COMPLETED: () => <>successfully updated all files</>,
UPDATE_CREATION_TIME_COMPLETED_WITH_ERROR: () => (
<>file time updation failed for some files, please retry</>
),
FILE_NAME_CHARACTER_LIMIT: '100 characters max',
};
export default englishConstants;

17
yarn.lock
View file

@ -1453,6 +1453,11 @@
resolved "https://registry.npmjs.org/@types/node/-/node-16.9.1.tgz"
integrity sha512-QpLcX9ZSsq3YYUUnD3nFDY8H7wctAhQj/TFKL8Ya8v5fMm3CFXxo8zStsLAl780ltoYoo1WvKUVGBQK+1ifr7g==
"@types/node@11.11.6":
version "11.11.6"
resolved "https://registry.yarnpkg.com/@types/node/-/node-11.11.6.tgz#df929d1bb2eee5afdda598a41930fe50b43eaa6a"
integrity sha512-Exw4yUWMBXM3X+8oqzJNRqZSwUAaS4+7NdvHqQuFi/d+synz++xmX3QIf+BFqneW8N31R8Ky+sikfZUXq07ggQ==
"@types/node@^14.6.4":
version "14.17.15"
resolved "https://registry.npmjs.org/@types/node/-/node-14.17.15.tgz"
@ -2085,6 +2090,16 @@ binary-extensions@^2.0.0:
resolved "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz"
integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
bip39@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/bip39/-/bip39-3.0.4.tgz#5b11fed966840b5e1b8539f0f54ab6392969b2a0"
integrity sha512-YZKQlb752TrUWqHWj7XAwCSjYEgGAk+/Aas3V7NyjQeZYsztO8JnQUaCWhcnL4T+jL8nvB8typ2jRPzTlgugNw==
dependencies:
"@types/node" "11.11.6"
create-hash "^1.1.0"
pbkdf2 "^3.0.9"
randombytes "^2.0.1"
bluebird@^3.5.5:
version "3.7.2"
resolved "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz"
@ -5016,7 +5031,7 @@ path-type@^4.0.0:
resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz"
integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
pbkdf2@^3.0.3:
pbkdf2@^3.0.3, pbkdf2@^3.0.9:
version "3.1.2"
resolved "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz"
integrity sha512-iuh7L6jA7JEGu2WxDwtQP1ddOpaJNC4KlDEFfdQajSGgGPNi4OyDc2R7QnbY2bR9QjBVGwgvTdNJZoE7RaxUMA==