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

Merge branch 'main'

Browse source
This commit is contained in:
httpjamesm 2024-02-08 16:04:28 -05:00
parent d02a0611c7 e0ecbba2e7
commit 9852e3cf37
No known key found for this signature in database
86 changed files with 2310 additions and 1094 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
.deepsource.toml
View file

@ -1,11 +0,0 @@
version = 1
[[analyzers]]
name = "javascript"
enabled = true
[analyzers.meta]
plugins = ["react"]
environment = ["browser"]
style_guide = "standard"
dialect = "typescript"

1
.gitignore vendored
View file

@ -39,7 +39,6 @@ out_functions
out_publish
.env
.vscode/
.idea/
# workbox

3
.vscode/extensions.json vendored Normal file
View file

@ -0,0 +1,3 @@
{
"recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
}

17
.vscode/settings.json vendored Normal file
View file

@ -0,0 +1,17 @@
{
"eslint.validate": [
"typescript",
"typescriptreact",
"javascript",
"javascriptreact"
],
"prettier.singleQuote": true,
"typescript.tsdk": "node_modules/typescript/lib",
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnPaste": true,
"editor.codeActionsOnSave": {
"source.fixAll": "explicit"
},
"typescript.enablePromptUseWorkspaceTsdk": true
}

6
README.md
View file

@ -82,7 +82,9 @@ An important part of our journey is to build better software by consistently lis
<br/>
---
## 🙇 Attributions
Cross-browser testing provided by
- Cross-browser testing provided by
[<img src="https://d98b8t1nnulk5.cloudfront.net/production/images/layout/logo-header.png?1469004780" width="115" height="25">](https://www.browserstack.com/open-source)
- Location search powered by [Simple Maps](https://simplemaps.com/data/world-cities)

BIN
apps/auth/public/images/favicon.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 422 B

After

Width:  |  Height:  |  Size: 1.1 KiB

1
apps/auth/public/locales/en/translation.json
View file

@ -206,6 +206,7 @@
"SEARCH_TYPE": {
"COLLECTION": "Album",
"LOCATION": "Location",
"CITY": "Location",
"DATE": "Date",
"FILE_NAME": "File name",
"THING": "Content",

2
apps/auth/src/pages/auth/index.tsx
View file

@ -2,7 +2,7 @@ import React, { useContext, useEffect, useState } from 'react';
import OTPDisplay from 'components/OTPDisplay';
import { getAuthCodes } from 'services';
import { CustomError } from '@ente/shared/error';
import { PHOTOS_PAGES as PAGES } from '@ente/shared/constants/pages';
import { AUTH_PAGES as PAGES } from '@ente/shared/constants/pages';
import { useRouter } from 'next/router';
import { AuthFooter } from 'components/AuthFooter';
import { AppContext } from 'pages/_app';

98
apps/photos/.env.development Normal file
View file

@ -0,0 +1,98 @@
# Sample configuration file
#
# All variables are commented out by default. Copy paste this into a new file
# called `.env.local`, or create a new file with that name and add the
# environment variables you need into it. That `.env.local` file will be
# .gitignored, so you can freely customize how the app runs in your local setup.
#
# - `.env.local` is picked up by next when NODE_ENV is development
#
# - `.env` is picked up always
#
# You don't necessarily need to use these files, these variables can be provided
# as environment variables when running yarn dev too. e.g.
#
# NEXT_PUBLIC_ENTE_ENDPOINT=http://localhost:3000 yarn dev:photos
#
# Variables prefixed with NEXT_PUBLIC_ (in our case, all of them) are made
# available when next runs our code in the browser. For more details, see
# https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables
#
# By default, the app is configured to connect to the production instance etc.
# This is usually a good default, for example someone might want to run the
# client locally but still use their actual ente account.
#
# Even though it connects to the production instances, when invoked with `yarn
# dev:*`, next will behave as if NODE_ENV was set to 'development' (otherwise
# this is assumed to be 'production'). There are some other cases too when we
# assume we're in a dev environment (e.g. the NEXT_PUBLIC_APP_ENV env var below.
# For the full list of rules that decide what counts as a dev build, see the
# `isDevDeployment` function).
#
# We have some development related conveniences tied to the dev build:
# 1. Logs go to the browser console instead of the log file
# 2. Sentry crash reporting etc is disabled
#
# The variables below thus serve as ways to customize which API instance we
# connect to for various purposes. These variables are only honoured when we're
# in a development environment.
# The ente API endpoint
# NEXT_PUBLIC_ENTE_ENDPOINT=http://localhost:3000
# The ente API endpoint for payments related functionality
# NEXT_PUBLIC_ENTE_PAYMENT_ENDPOINT = http://localhost:3001
# The URL for the shared albums deployment
#
# Currently the shared albums code is intermixed with the photos app code; when
# deploying, we add an a CNAME alias from "albums.ente.io" -> "/shared-album".
#
# Enhancement: Consider splitting this into a separate app/ in this repository.
# NEXT_PUBLIC_ENTE_ALBUM_ENDPOINT = http://localhost:3002
# The URL of the family plans web app deployment
#
# Currently the source code for the family plan related pages is in a separate
# repository (https://github.com/ente-io/families). The mobile app also uses
# these pages.
#
# Enhancement: Consider moving that into the app/ folder in this repository.
# NEXT_PUBLIC_ENTE_FAMILY_PORTAL_ENDPOINT = http://localhost:3003
# This in not useful when running locally. It is used to provide us a way to
# mark certain deployments as "staging" by setting environment variables in the
# CI job that deploys them on a remote server. See the `isDevDeployment`
# function.
#
# By default, the photos web app gets deployed to "web.ente.io".
# NEXT_PUBLIC_ENTE_WEB_ENDPOINT = http://localhost:3000
# Set this to true to disable reporting of crashes to Sentry.
#
# Crash reporting is disabled if the user has opted out. This provides another
# way to disable crash reporting, say for local test branches.
# NEXT_PUBLIC_DISABLE_SENTRY=true
# Set this to disable the upload of files via CF Workers
#
# CF workers provide us with a way of make the file uploads faster. The why and
# how is explained here: https://ente.io/blog/tech/making-uploads-faster/
#
# By default, that's the route we take. This flag can be set to true to disable
# that route, and instead directly upload to the S3-compatible URLs provided by
# our API server.
#
# Note the double negative.
# NEXT_PUBLIC_DISABLE_CF_UPLOAD_PROXY = true
# This is an alternative to run as a development build.
#
# You likely don't need this if you're running on your machine, because when
# invoked with `next dev` (as is the case for `yarn dev:photos` etc), next will
# behave as if NODE_ENV was set to 'development'.
# NEXT_PUBLIC_APP_ENV = development
# The path of the JSON file which contains the expected results of our
# integration tests. See `upload.test.ts` for more details.
# NEXT_PUBLIC_EXPECTED_JSON_PATH = /path/to/dataset/expected.json

5
apps/photos/package.json
View file

@ -70,11 +70,6 @@
"transformation-matrix": "^2.15.0",
"uuid": "^9.0.0",
"vscode-uri": "^3.0.7",
"workbox-precaching": "^6.1.5",
"workbox-recipes": "^6.1.5",
"workbox-routing": "^6.1.5",
"workbox-strategies": "^6.1.5",
"workbox-window": "^6.1.5",
"xml-js": "^1.6.11",
"yup": "^0.29.3",
"zxcvbn": "^4.4.2"

BIN
apps/photos/public/images/favicon.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 422 B

After

Width:  |  Height:  |  Size: 1.1 KiB

8
apps/photos/public/locales/de/translation.json
View file

@ -210,6 +210,7 @@
"SEARCH_TYPE": {
"COLLECTION": "Album",
"LOCATION": "Standort",
"CITY": "",
"DATE": "Datum",
"FILE_NAME": "Dateiname",
"THING": "Inhalt",
@ -622,7 +623,10 @@
"PHOTO_EDITOR": "",
"FASTER_UPLOAD": "",
"FASTER_UPLOAD_DESCRIPTION": "",
"STATUS": "",
"MAGIC_SEARCH_STATUS": "",
"INDEXED_ITEMS": "",
"CACHE_DIRECTORY": ""
"CACHE_DIRECTORY": "",
"FREEHAND": "",
"APPLY_CROP": "",
"PHOTO_EDIT_REQUIRED_TO_SAVE": ""
}

24
apps/photos/public/locales/en/translation.json
View file

@ -210,6 +210,7 @@
"SEARCH_TYPE": {
"COLLECTION": "Album",
"LOCATION": "Location",
"CITY": "Location",
"DATE": "Date",
"FILE_NAME": "File name",
"THING": "Content",
@ -495,16 +496,16 @@
"ROOT_LEVEL_FILE_WITH_FOLDER_NOT_ALLOWED": "Cannot create albums from file/folder mix",
"ROOT_LEVEL_FILE_WITH_FOLDER_NOT_ALLOWED_MESSAGE": "<p>You have dragged and dropped a mixture of files and folders.</p><p>Please provide either only files, or only folders when selecting option to create separate albums</p>",
"CHOSE_THEME": "Choose theme",
"ML_SEARCH": "ML search (beta)",
"ML_SEARCH": "Face recognition",
"ENABLE_ML_SEARCH_DESCRIPTION": "<p>This will enable on-device machine learning and face search which will start analyzing your uploaded photos locally.</p><p>For the first run after login or enabling this feature, it will download all images on local device to analyze them. So please only enable this if you are ok with bandwidth and local processing of all images in your photo library.</p><p>If this is the first time you're enabling this, we'll also ask your permission to process face data.</p>",
"ML_MORE_DETAILS": "More details",
"ENABLE_FACE_SEARCH": "Enable face search",
"ENABLE_FACE_SEARCH_TITLE": "Enable face search?",
"ENABLE_FACE_SEARCH_DESCRIPTION": "<p>If you enable face search, ente will extract face geometry from your photos. This will happen on your device, and any generated biometric data will be end-to-encrypted.<p/><p><a>Please click here for more details about this feature in our privacy policy</a></p>",
"DISABLE_BETA": "Disable beta",
"DISABLE_FACE_SEARCH": "Disable face search",
"DISABLE_FACE_SEARCH_TITLE": "Disable face search?",
"DISABLE_FACE_SEARCH_DESCRIPTION": "<p>ente will stop processing face geometry, and will also disable ML search (beta)</p><p>You can reenable face search again if you wish, so this operation is safe.</p>",
"ENABLE_FACE_SEARCH": "Enable face recognition",
"ENABLE_FACE_SEARCH_TITLE": "Enable face recognition?",
"ENABLE_FACE_SEARCH_DESCRIPTION": "<p>If you enable face recognition, ente will extract face geometry from your photos. This will happen on your device, and any generated biometric data will be end-to-encrypted.<p/><p><a>Please click here for more details about this feature in our privacy policy</a></p>",
"DISABLE_BETA": "Pause recognition",
"DISABLE_FACE_SEARCH": "Disable face recognition",
"DISABLE_FACE_SEARCH_TITLE": "Disable face recognition?",
"DISABLE_FACE_SEARCH_DESCRIPTION": "<p>Ente will stop processing face geometry.</p><p>You can reenable face recognition again if you wish, so this operation is safe.</p>",
"ADVANCED": "Advanced",
"FACE_SEARCH_CONFIRMATION": "I understand, and wish to allow ente to process face geometry",
"LABS": "Labs",
@ -622,8 +623,11 @@
"PHOTO_EDITOR": "Photo Editor",
"FASTER_UPLOAD": "Faster uploads",
"FASTER_UPLOAD_DESCRIPTION": "Route uploads through nearby servers",
"STATUS": "Status",
"MAGIC_SEARCH_STATUS": "Magic Search Status",
"INDEXED_ITEMS": "Indexed items",
"CACHE_DIRECTORY": "Cache folder",
"PASSKEYS": "Passkeys"
"PASSKEYS": "Passkeys",
"FREEHAND": "Freehand",
"APPLY_CROP": "Apply Crop",
"PHOTO_EDIT_REQUIRED_TO_SAVE": "At least one transformation or color adjustment must be performed before saving."
}

38
apps/photos/public/locales/es/translation.json
View file

@ -210,6 +210,7 @@
"SEARCH_TYPE": {
"COLLECTION": "Álbum",
"LOCATION": "Localización",
"CITY": "",
"DATE": "Fecha",
"FILE_NAME": "Nombre del archivo",
"THING": "Contenido",
@ -384,11 +385,11 @@
"ADDED_AS": "",
"COLLABORATOR_RIGHTS": "",
"REMOVE_PARTICIPANT_HEAD": "",
"OWNER": "",
"COLLABORATORS": "",
"ADD_MORE": "",
"OWNER": "Propietario",
"COLLABORATORS": "Colaboradores",
"ADD_MORE": "Añadir más",
"VIEWERS": "",
"OR_ADD_EXISTING": "",
"OR_ADD_EXISTING": "O elige uno existente",
"REMOVE_PARTICIPANT_MESSAGE": "",
"NOT_FOUND": "404 - No Encontrado",
"LINK_EXPIRED": "Enlace expirado",
@ -399,7 +400,7 @@
"LINK_PASSWORD_LOCK": "Contraseña bloqueada",
"PUBLIC_COLLECT": "Permitir añadir fotos",
"LINK_DEVICE_LIMIT": "Límites del dispositivo",
"NO_DEVICE_LIMIT": "",
"NO_DEVICE_LIMIT": "Ninguno",
"LINK_EXPIRY": "Enlace vencio",
"NEVER": "Nunca",
"DISABLE_FILE_DOWNLOAD": "Deshabilitar descarga",
@ -408,7 +409,7 @@
"COPYRIGHT": "Infracciones sobre los derechos de autor de alguien que estoy autorizado a representar",
"SHARED_USING": "Compartido usando ",
"ENTE_IO": "ente.io",
"SHARING_REFERRAL_CODE": "",
"SHARING_REFERRAL_CODE": "Usa el código <strong>{{referralCode}}</strong> para obtener 10 GB gratis",
"LIVE": "VIVO",
"DISABLE_PASSWORD": "Desactivar contraseña",
"DISABLE_PASSWORD_MESSAGE": "Seguro que quieres cambiar la contrasena?",
@ -428,9 +429,9 @@
"STOP_ALL_UPLOADS_MESSAGE": "¿Está seguro que desea detener todas las subidas en curso?",
"STOP_UPLOADS_HEADER": "Detener las subidas?",
"YES_STOP_UPLOADS": "Sí, detener las subidas",
"STOP_DOWNLOADS_HEADER": "",
"YES_STOP_DOWNLOADS": "",
"STOP_ALL_DOWNLOADS_MESSAGE": "",
"STOP_DOWNLOADS_HEADER": "¿Detener las descargas?",
"YES_STOP_DOWNLOADS": "Sí, detener las descargas",
"STOP_ALL_DOWNLOADS_MESSAGE": "¿Estás seguro de que quieres detener todas las descargas en curso?",
"albums_one": "1 álbum",
"albums_other": "{{count}} álbumes",
"ALL_ALBUMS": "Todos los álbumes",
@ -575,9 +576,9 @@
"AUTH_NEXT": "siguiente",
"AUTH_DOWNLOAD_MOBILE_APP": "Descarga nuestra aplicación móvil para administrar tus secretos",
"HIDDEN": "",
"HIDE": "",
"UNHIDE": "",
"UNHIDE_TO_COLLECTION": "",
"HIDE": "Ocultar",
"UNHIDE": "Mostrar",
"UNHIDE_TO_COLLECTION": "Hacer visible al álbum",
"SORT_BY": "",
"NEWEST_FIRST": "",
"OLDEST_FIRST": "",
@ -595,7 +596,7 @@
"NEW_YEAR": "",
"NEW_YEAR_EVE": "",
"IMAGE": "",
"VIDEO": "",
"VIDEO": "Video",
"LIVE_PHOTO": "",
"CONVERT": "",
"CONFIRM_EDITOR_CLOSE_MESSAGE": "",
@ -614,15 +615,18 @@
"DOWNLOAD_EDITED": "",
"SAVE_A_COPY_TO_ENTE": "",
"RESTORE_ORIGINAL": "",
"TRANSFORM": "",
"COLORS": "",
"TRANSFORM": "Transformar",
"COLORS": "Colores",
"FLIP": "",
"ROTATION": "",
"RESET": "",
"PHOTO_EDITOR": "",
"FASTER_UPLOAD": "",
"FASTER_UPLOAD_DESCRIPTION": "",
"STATUS": "",
"MAGIC_SEARCH_STATUS": "",
"INDEXED_ITEMS": "",
"CACHE_DIRECTORY": ""
"CACHE_DIRECTORY": "",
"FREEHAND": "",
"APPLY_CROP": "",
"PHOTO_EDIT_REQUIRED_TO_SAVE": ""
}

8
apps/photos/public/locales/fa/translation.json
View file

@ -210,6 +210,7 @@
"SEARCH_TYPE": {
"COLLECTION": "",
"LOCATION": "",
"CITY": "",
"DATE": "",
"FILE_NAME": "",
"THING": "",
@ -622,7 +623,10 @@
"PHOTO_EDITOR": "",
"FASTER_UPLOAD": "",
"FASTER_UPLOAD_DESCRIPTION": "",
"STATUS": "",
"MAGIC_SEARCH_STATUS": "",
"INDEXED_ITEMS": "",
"CACHE_DIRECTORY": ""
"CACHE_DIRECTORY": "",
"FREEHAND": "",
"APPLY_CROP": "",
"PHOTO_EDIT_REQUIRED_TO_SAVE": ""
}

8
apps/photos/public/locales/fi/translation.json
View file

@ -210,6 +210,7 @@
"SEARCH_TYPE": {
"COLLECTION": "",
"LOCATION": "",
"CITY": "",
"DATE": "",
"FILE_NAME": "",
"THING": "",
@ -622,7 +623,10 @@
"PHOTO_EDITOR": "",
"FASTER_UPLOAD": "",
"FASTER_UPLOAD_DESCRIPTION": "",
"STATUS": "",
"MAGIC_SEARCH_STATUS": "",
"INDEXED_ITEMS": "",
"CACHE_DIRECTORY": ""
"CACHE_DIRECTORY": "",
"FREEHAND": "",
"APPLY_CROP": "",
"PHOTO_EDIT_REQUIRED_TO_SAVE": ""
}

8
apps/photos/public/locales/fr/translation.json
View file

@ -210,6 +210,7 @@
"SEARCH_TYPE": {
"COLLECTION": "l'album",
"LOCATION": "Emplacement",
"CITY": "",
"DATE": "Date",
"FILE_NAME": "Nom de fichier",
"THING": "Chose",
@ -622,7 +623,10 @@
"PHOTO_EDITOR": "Éditeur de photos",
"FASTER_UPLOAD": "Chargements plus rapides",
"FASTER_UPLOAD_DESCRIPTION": "Router les chargements vers les serveurs à proximité",
"STATUS": "État",
"MAGIC_SEARCH_STATUS": "",
"INDEXED_ITEMS": "Éléments indexés",
"CACHE_DIRECTORY": ""
"CACHE_DIRECTORY": "",
"FREEHAND": "",
"APPLY_CROP": "",
"PHOTO_EDIT_REQUIRED_TO_SAVE": ""
}

8
apps/photos/public/locales/it/translation.json
View file

@ -210,6 +210,7 @@
"SEARCH_TYPE": {
"COLLECTION": "Album",
"LOCATION": "Posizione",
"CITY": "",
"DATE": "Data",
"FILE_NAME": "Nome file",
"THING": "",
@ -622,7 +623,10 @@
"PHOTO_EDITOR": "",
"FASTER_UPLOAD": "",
"FASTER_UPLOAD_DESCRIPTION": "",
"STATUS": "",
"MAGIC_SEARCH_STATUS": "",
"INDEXED_ITEMS": "",
"CACHE_DIRECTORY": ""
"CACHE_DIRECTORY": "",
"FREEHAND": "",
"APPLY_CROP": "",
"PHOTO_EDIT_REQUIRED_TO_SAVE": ""
}

14
apps/photos/public/locales/nl/translation.json
View file

@ -85,9 +85,9 @@
"ZOOM_IN_OUT": "In/uitzoomen",
"PREVIOUS": "Vorige (←)",
"NEXT": "Volgende (→)",
"TITLE_PHOTOS": "",
"TITLE_ALBUMS": "",
"TITLE_AUTH": "",
"TITLE_PHOTOS": "Ente Foto's",
"TITLE_ALBUMS": "Ente Foto's",
"TITLE_AUTH": "Ente Auth",
"UPLOAD_FIRST_PHOTO": "Je eerste foto uploaden",
"IMPORT_YOUR_FOLDERS": "Importeer uw mappen",
"UPLOAD_DROPZONE_MESSAGE": "Sleep om een back-up van je bestanden te maken",
@ -210,6 +210,7 @@
"SEARCH_TYPE": {
"COLLECTION": "Album",
"LOCATION": "Locatie",
"CITY": "Locatie",
"DATE": "Datum",
"FILE_NAME": "Bestandsnaam",
"THING": "Inhoud",
@ -622,7 +623,10 @@
"PHOTO_EDITOR": "Fotobewerker",
"FASTER_UPLOAD": "Snellere uploads",
"FASTER_UPLOAD_DESCRIPTION": "Uploaden door nabije servers",
"STATUS": "Status",
"MAGIC_SEARCH_STATUS": "Magische Zoekfunctie Status",
"INDEXED_ITEMS": "Geïndexeerde bestanden",
"CACHE_DIRECTORY": "Cache map"
"CACHE_DIRECTORY": "Cache map",
"FREEHAND": "Losse hand",
"APPLY_CROP": "Bijsnijden toepassen",
"PHOTO_EDIT_REQUIRED_TO_SAVE": "Tenminste één transformatie of kleuraanpassing moet worden uitgevoerd voordat u opslaat."
}

8
apps/photos/public/locales/pt/translation.json
View file

@ -210,6 +210,7 @@
"SEARCH_TYPE": {
"COLLECTION": "",
"LOCATION": "",
"CITY": "",
"DATE": "",
"FILE_NAME": "",
"THING": "",
@ -622,7 +623,10 @@
"PHOTO_EDITOR": "",
"FASTER_UPLOAD": "",
"FASTER_UPLOAD_DESCRIPTION": "",
"STATUS": "",
"MAGIC_SEARCH_STATUS": "",
"INDEXED_ITEMS": "",
"CACHE_DIRECTORY": ""
"CACHE_DIRECTORY": "",
"FREEHAND": "",
"APPLY_CROP": "",
"PHOTO_EDIT_REQUIRED_TO_SAVE": ""
}

8
apps/photos/public/locales/ru/translation.json
View file

@ -210,6 +210,7 @@
"SEARCH_TYPE": {
"COLLECTION": "",
"LOCATION": "",
"CITY": "",
"DATE": "",
"FILE_NAME": "",
"THING": "",
@ -622,7 +623,10 @@
"PHOTO_EDITOR": "",
"FASTER_UPLOAD": "",
"FASTER_UPLOAD_DESCRIPTION": "",
"STATUS": "",
"MAGIC_SEARCH_STATUS": "",
"INDEXED_ITEMS": "",
"CACHE_DIRECTORY": ""
"CACHE_DIRECTORY": "",
"FREEHAND": "",
"APPLY_CROP": "",
"PHOTO_EDIT_REQUIRED_TO_SAVE": ""
}

8
apps/photos/public/locales/tr/translation.json
View file

@ -210,6 +210,7 @@
"SEARCH_TYPE": {
"COLLECTION": "",
"LOCATION": "",
"CITY": "",
"DATE": "",
"FILE_NAME": "",
"THING": "",
@ -622,7 +623,10 @@
"PHOTO_EDITOR": "",
"FASTER_UPLOAD": "",
"FASTER_UPLOAD_DESCRIPTION": "",
"STATUS": "",
"MAGIC_SEARCH_STATUS": "",
"INDEXED_ITEMS": "",
"CACHE_DIRECTORY": ""
"CACHE_DIRECTORY": "",
"FREEHAND": "",
"APPLY_CROP": "",
"PHOTO_EDIT_REQUIRED_TO_SAVE": ""
}

8
apps/photos/public/locales/zh/translation.json
View file

@ -210,6 +210,7 @@
"SEARCH_TYPE": {
"COLLECTION": "相册",
"LOCATION": "地理位置",
"CITY": "位置",
"DATE": "日期",
"FILE_NAME": "文件名",
"THING": "内容",
@ -622,7 +623,10 @@
"PHOTO_EDITOR": "照片编辑器",
"FASTER_UPLOAD": "更快上传",
"FASTER_UPLOAD_DESCRIPTION": "通过附近的服务器路由上传",
"STATUS": "状态",
"MAGIC_SEARCH_STATUS": "魔法搜索状态",
"INDEXED_ITEMS": "索引项目",
"CACHE_DIRECTORY": "缓存文件夹"
"CACHE_DIRECTORY": "缓存文件夹",
"FREEHAND": "手画",
"APPLY_CROP": "应用裁剪",
"PHOTO_EDIT_REQUIRED_TO_SAVE": "保存之前必须至少执行一项转换或颜色调整。"
}

66
apps/photos/public/manifest.json
View file

@ -1,66 +0,0 @@
{
"short_name": "Ente Photos",
"name": "Ente Photos | Safe home for your Photos",
"icons": [
{
"src": "/images/ente/192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/ente/256.png",
"type": "image/png",
"sizes": "256x256"
},
{
"src": "/images/ente/512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/",
"background_color": "#191919",
"display": "standalone",
"scope": "/",
"theme_color": "#111",
"description": "ente provides a simple way to back up your memories.",
"prefer_related_applications": true,
"related_applications": [
{
"platform": "play",
"url": "https://play.google.com/store/apps/details?id=io.ente.photos",
"id": "io.ente.photos"
},
{
"platform": "itunes",
"url": "https://apps.apple.com/in/app/ente-photos/id1542026904"
}
],
"screenshots": [
{
"src": "/pwa/slide-1.jpg",
"type": "image/jpeg",
"sizes": "417x760"
},
{
"src": "/pwa/slide-2.jpg",
"type": "image/jpeg",
"sizes": "378x690"
},
{
"src": "/pwa/slide-3.jpg",
"type": "image/jpeg",
"sizes": "378x690"
},
{
"src": "/pwa/slide-4.jpg",
"type": "image/jpeg",
"sizes": "378x690"
},
{
"src": "/pwa/slide-5.jpg",
"type": "image/jpeg",
"sizes": "378x690"
}
]
}

BIN
apps/photos/public/pwa/slide-1.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 203 KiB

BIN
apps/photos/public/pwa/slide-2.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 75 KiB

BIN
apps/photos/public/pwa/slide-3.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 159 KiB

BIN
apps/photos/public/pwa/slide-4.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 115 KiB

BIN
apps/photos/public/pwa/slide-5.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 112 KiB

160
apps/photos/src/components/Collections/CollectionDownloadProgress.tsx
View file

@ -1,160 +0,0 @@
import Notification from 'components/Notification';
import { t } from 'i18next';
import isElectron from 'is-electron';
import { AppContext } from 'pages/_app';
import { GalleryContext } from 'pages/gallery';
import { useContext } from 'react';
import ElectronAPIs from '@ente/shared/electron';
export interface CollectionDownloadProgressAttributes {
success: number;
failed: number;
total: number;
collectionName: string;
collectionID: number;
isHidden: boolean;
downloadDirPath: string;
canceller: AbortController;
}
interface CollectionDownloadProgressProps {
attributesList: CollectionDownloadProgressAttributes[];
setAttributesList: (value: CollectionDownloadProgressAttributes[]) => void;
}
export const isCollectionDownloadCompleted = (
attributes: CollectionDownloadProgressAttributes
) => {
return (
attributes &&
attributes.success + attributes.failed === attributes.total
);
};
export const isCollectionDownloadCompletedWithErrors = (
attributes: CollectionDownloadProgressAttributes
) => {
return (
attributes &&
attributes.failed > 0 &&
isCollectionDownloadCompleted(attributes)
);
};
export const isCollectionDownloadCancelled = (
attributes: CollectionDownloadProgressAttributes
) => {
return attributes && attributes.canceller?.signal?.aborted;
};
export const CollectionDownloadProgress: React.FC<CollectionDownloadProgressProps> =
({ attributesList, setAttributesList }) => {
const appContext = useContext(AppContext);
const galleryContext = useContext(GalleryContext);
if (!attributesList) {
return <></>;
}
const onClose = (collectionID: number) => {
setAttributesList(
attributesList.filter(
(attr) => attr.collectionID !== collectionID
)
);
};
const confirmCancelUpload = (
attributes: CollectionDownloadProgressAttributes
) => {
appContext.setDialogMessage({
title: t('STOP_DOWNLOADS_HEADER'),
content: t('STOP_ALL_DOWNLOADS_MESSAGE'),
proceed: {
text: t('YES_STOP_DOWNLOADS'),
variant: 'critical',
action: () => {
attributes?.canceller.abort();
onClose(attributes.collectionID);
},
},
close: {
text: t('NO'),
variant: 'secondary',
action: () => {},
},
});
};
const handleClose =
(attributes: CollectionDownloadProgressAttributes) => () => {
if (isCollectionDownloadCompleted(attributes)) {
onClose(attributes.collectionID);
} else {
confirmCancelUpload(attributes);
}
};
const handleOnClick = (collectionID: number) => () => {
const attributes = attributesList.find(
(attr) => attr.collectionID === collectionID
);
if (isElectron()) {
ElectronAPIs.openDirectory(attributes.downloadDirPath);
} else {
if (attributes.isHidden) {
galleryContext.openHiddenSection(() => {
galleryContext.setActiveCollectionID(
attributes.collectionID
);
});
} else {
galleryContext.setActiveCollectionID(
attributes.collectionID
);
}
}
};
return (
<>
{attributesList.map((attributes, index) => (
<Notification
key={attributes.collectionID}
horizontal="left"
sx={{ '&&': { bottom: `${index * 80 + 20}px` } }}
open
onClose={handleClose(attributes)}
keepOpenOnClick
attributes={{
variant: isCollectionDownloadCompletedWithErrors(
attributes
)
? 'critical'
: 'secondary',
title: isCollectionDownloadCompletedWithErrors(
attributes
)
? t('DOWNLOAD_FAILED')
: isCollectionDownloadCompleted(attributes)
? t(`DOWNLOAD_COMPLETE`)
: t('DOWNLOADING_COLLECTION', {
name: attributes.collectionName,
}),
caption: isCollectionDownloadCompleted(attributes)
? attributes.collectionName
: t('DOWNLOAD_PROGRESS', {
progress: {
current:
attributes.success +
attributes.failed,
total: attributes.total,
},
}),
onClick: handleOnClick(attributes.collectionID),
}}
/>
))}
</>
);
};

7
apps/photos/src/components/Collections/CollectionInfoWithOptions.tsx
View file

@ -1,5 +1,4 @@
import { CollectionInfo } from './CollectionInfo';
import React from 'react';
import { Collection, CollectionSummary } from 'types/collection';
import CollectionOptions from 'components/Collections/CollectionOptions';
import { SetCollectionNamerAttributes } from 'components/Collections/CollectionNamer';
@ -11,16 +10,14 @@ import Favorite from '@mui/icons-material/FavoriteRounded';
import ArchiveOutlined from '@mui/icons-material/ArchiveOutlined';
import PeopleIcon from '@mui/icons-material/People';
import LinkIcon from '@mui/icons-material/Link';
import { SetCollectionDownloadProgressAttributes } from 'types/gallery';
import { SetFilesDownloadProgressAttributesCreator } from 'types/gallery';
interface Iprops {
activeCollection: Collection;
collectionSummary: CollectionSummary;
setCollectionNamerAttributes: SetCollectionNamerAttributes;
showCollectionShareModal: () => void;
setCollectionDownloadProgressAttributesCreator: (
collectionID: number
) => SetCollectionDownloadProgressAttributes;
setFilesDownloadProgressAttributesCreator: SetFilesDownloadProgressAttributesCreator;
isActiveCollectionDownloadInProgress: () => boolean;
setActiveCollectionID: (collectionID: number) => void;
}

28
apps/photos/src/components/Collections/CollectionOptions/index.tsx
View file

@ -33,13 +33,11 @@ import { Trans } from 'react-i18next';
import { t } from 'i18next';
import { Box } from '@mui/material';
import CollectionSortOrderMenu from './CollectionSortOrderMenu';
import { SetCollectionDownloadProgressAttributes } from 'types/gallery';
import { SetFilesDownloadProgressAttributesCreator } from 'types/gallery';
interface CollectionOptionsProps {
setCollectionNamerAttributes: SetCollectionNamerAttributes;
setCollectionDownloadProgressAttributesCreator: (
collectionID: number
) => SetCollectionDownloadProgressAttributes;
setFilesDownloadProgressAttributesCreator: SetFilesDownloadProgressAttributesCreator;
isActiveCollectionDownloadInProgress: () => boolean;
activeCollection: Collection;
collectionSummaryType: CollectionSummaryType;
@ -76,7 +74,7 @@ const CollectionOptions = (props: CollectionOptionsProps) => {
setActiveCollectionID,
setCollectionNamerAttributes,
showCollectionShareModal,
setCollectionDownloadProgressAttributesCreator,
setFilesDownloadProgressAttributesCreator,
isActiveCollectionDownloadInProgress,
} = props;
@ -219,21 +217,25 @@ const CollectionOptions = (props: CollectionOptionsProps) => {
return;
}
if (collectionSummaryType === CollectionSummaryType.hiddenItems) {
const setCollectionDownloadProgressAttributes =
setCollectionDownloadProgressAttributesCreator(
HIDDEN_ITEMS_SECTION
const setFilesDownloadProgressAttributes =
setFilesDownloadProgressAttributesCreator(
activeCollection.name,
HIDDEN_ITEMS_SECTION,
true
);
downloadDefaultHiddenCollectionHelper(
setCollectionDownloadProgressAttributes
setFilesDownloadProgressAttributes
);
} else {
const setCollectionDownloadProgressAttributes =
setCollectionDownloadProgressAttributesCreator(
activeCollection.id
const setFilesDownloadProgressAttributes =
setFilesDownloadProgressAttributesCreator(
activeCollection.name,
activeCollection.id,
isHiddenCollection(activeCollection)
);
downloadCollectionHelper(
activeCollection.id,
setCollectionDownloadProgressAttributes
setFilesDownloadProgressAttributes
);
}
};

4
apps/photos/src/components/Collections/CollectionSelector/index.tsx
View file

@ -140,8 +140,8 @@ function CollectionSelector({
? t('UNHIDE_TO_COLLECTION')
: t('SELECT_COLLECTION')}
</DialogTitleWithCloseButton>
<DialogContent>
<FlexWrapper flexWrap="wrap" gap={0.5}>
<DialogContent sx={{ '&&&': { padding: 0 } }}>
<FlexWrapper flexWrap="wrap" gap={'4px'} padding={'16px'}>
<AddCollectionButton
showNextModal={attributes.showNextModal}
/>

52
apps/photos/src/components/Collections/CollectionShare/emailShare/AddParticipant.tsx
View file

@ -39,30 +39,38 @@ export default function AddParticipant({
[emailList, collection.sharees]
);
const collectionShare: AddParticipantFormProps['callback'] = async (
const collectionShare: AddParticipantFormProps['callback'] = async ({
email,
emails,
setFieldError,
resetForm
) => {
try {
for (const email of emails) {
if (email === user.email) {
setFieldError(t('SHARE_WITH_SELF'));
break;
} else if (
collection?.sharees?.find((value) => value.email === email)
) {
setFieldError(t('ALREADY_SHARED', { email }));
break;
} else {
await shareCollection(collection, email, type);
await syncWithRemote(false, true);
}
}) => {
// if email is provided, means user has custom entered email, so, will need to validate for self sharing
// and already shared
if (email) {
if (email === user.email) {
throw new Error(t('SHARE_WITH_SELF'));
} else if (
collection?.sharees?.find((value) => value.email === email)
) {
throw new Error(t('ALREADY_SHARED', { email: email }));
}
// set emails to array of one email
emails = [email];
}
for (const email of emails) {
if (
email === user.email ||
collection?.sharees?.find((value) => value.email === email)
) {
// can just skip this email
continue;
}
try {
await shareCollection(collection, email, type);
await syncWithRemote(false, true);
} catch (e) {
const errorMessage = handleSharingErrors(e);
throw new Error(errorMessage);
}
resetForm();
} catch (e) {
const errorMessage = handleSharingErrors(e);
setFieldError(errorMessage);
}
};

43
apps/photos/src/components/Collections/CollectionShare/emailShare/AddParticipantForm.tsx
View file

@ -1,5 +1,5 @@
import React, { useMemo, useState } from 'react';
import { Formik, FormikHelpers, FormikState } from 'formik';
import { Formik, FormikHelpers } from 'formik';
import * as Yup from 'yup';
import SubmitButton from '@ente/shared/components/SubmitButton';
import TextField from '@mui/material/TextField';
@ -18,11 +18,7 @@ interface formValues {
selectedOptions: string[];
}
export interface AddParticipantFormProps {
callback: (
emails: string[],
setFieldError: (errorMessage: string) => void,
resetForm: (nextState?: Partial<FormikState<formValues>>) => void
) => Promise<void>;
callback: (props: { email?: string; emails?: string[] }) => Promise<void>;
fieldType: 'text' | 'email' | 'password';
placeholder: string;
buttonText: string;
@ -43,7 +39,6 @@ export interface AddParticipantFormProps {
export default function AddParticipantForm(props: AddParticipantFormProps) {
const { submitButtonProps } = props;
const { sx: buttonSx, ...restSubmitButtonProps } = submitButtonProps ?? {};
const [disableInput, setDisableInput] = useState(false);
const [loading, SetLoading] = useState(false);
@ -51,26 +46,20 @@ export default function AddParticipantForm(props: AddParticipantFormProps) {
values: formValues,
{ setFieldError, resetForm }: FormikHelpers<formValues>
) => {
SetLoading(true);
if (values.inputValue !== '') {
await props.callback(
[values.inputValue],
(message) => setFieldError('inputValue', message),
resetForm
);
} else if (values.selectedOptions.length !== 0) {
await props.callback(
values.selectedOptions,
(message) => setFieldError('inputValue', message),
resetForm
);
try {
SetLoading(true);
if (values.inputValue !== '') {
await props.callback({ email: values.inputValue });
} else if (values.selectedOptions.length !== 0) {
await props.callback({ emails: values.selectedOptions });
}
SetLoading(false);
props.onClose();
resetForm();
} catch (e) {
setFieldError('inputValue', e?.message);
SetLoading(false);
}
setDisableInput(false);
SetLoading(false);
props.onClose();
};
const validationSchema = useMemo(() => {
@ -129,7 +118,7 @@ export default function AddParticipantForm(props: AddParticipantFormProps) {
error={Boolean(errors.inputValue)}
helperText={errors.inputValue}
value={values.inputValue}
disabled={loading || disableInput}
disabled={loading}
autoFocus={!props.disableAutoFocus}
autoComplete={props.autoComplete}
/>

58
apps/photos/src/components/Collections/index.tsx
View file

@ -16,12 +16,11 @@ import { useLocalState } from '@ente/shared/hooks/useLocalState';
import { sortCollectionSummaries } from 'services/collectionService';
import { LS_KEYS } from '@ente/shared/storage/localStorage';
import {
CollectionDownloadProgress,
CollectionDownloadProgressAttributes,
isCollectionDownloadCancelled,
isCollectionDownloadCompleted,
} from './CollectionDownloadProgress';
import { SetCollectionDownloadProgressAttributes } from 'types/gallery';
FilesDownloadProgressAttributes,
isFilesDownloadCancelled,
isFilesDownloadCompleted,
} from '../FilesDownloadProgress';
import { SetFilesDownloadProgressAttributesCreator } from 'types/gallery';
interface Iprops {
activeCollection: Collection;
@ -33,6 +32,8 @@ interface Iprops {
hiddenCollectionSummaries: CollectionSummaries;
setCollectionNamerAttributes: SetCollectionNamerAttributes;
setPhotoListHeader: (value: TimeStampListItem) => void;
filesDownloadProgressAttributesList: FilesDownloadProgressAttributes[];
setFilesDownloadProgressAttributesCreator: SetFilesDownloadProgressAttributesCreator;
}
export default function Collections(props: Iprops) {
@ -46,17 +47,14 @@ export default function Collections(props: Iprops) {
hiddenCollectionSummaries,
setCollectionNamerAttributes,
setPhotoListHeader,
filesDownloadProgressAttributesList,
setFilesDownloadProgressAttributesCreator,
} = props;
const [allCollectionView, setAllCollectionView] = useState(false);
const [collectionShareModalView, setCollectionShareModalView] =
useState(false);
const [
collectionDownloadProgressAttributesList,
setCollectionDownloadProgressAttributesList,
] = useState<CollectionDownloadProgressAttributes[]>([]);
const [collectionListSortBy, setCollectionListSortBy] =
useLocalState<COLLECTION_LIST_SORT_BY>(
LS_KEYS.COLLECTION_SORT_BY,
@ -86,38 +84,16 @@ export default function Collections(props: Iprops) {
[collectionListSortBy, toShowCollectionSummaries]
);
const setCollectionDownloadProgressAttributesCreator =
(collectionID: number): SetCollectionDownloadProgressAttributes =>
(value) => {
setCollectionDownloadProgressAttributesList((prev) => {
const attributes = prev?.find(
(attr) => attr.collectionID === collectionID
);
const updatedAttributes =
typeof value === 'function' ? value(attributes) : value;
const updatedAttributesList = attributes
? prev.map((attr) =>
attr.collectionID === collectionID
? updatedAttributes
: attr
)
: [...prev, updatedAttributes];
return updatedAttributesList;
});
};
const isActiveCollectionDownloadInProgress = useCallback(() => {
const attributes = collectionDownloadProgressAttributesList.find(
const attributes = filesDownloadProgressAttributesList.find(
(attr) => attr.collectionID === activeCollectionID
);
return (
attributes &&
!isCollectionDownloadCancelled(attributes) &&
!isCollectionDownloadCompleted(attributes)
!isFilesDownloadCancelled(attributes) &&
!isFilesDownloadCompleted(attributes)
);
}, [activeCollectionID, collectionDownloadProgressAttributesList]);
}, [activeCollectionID, filesDownloadProgressAttributesList]);
useEffect(() => {
if (isInSearchMode) {
@ -134,8 +110,8 @@ export default function Collections(props: Iprops) {
showCollectionShareModal={() =>
setCollectionShareModalView(true)
}
setCollectionDownloadProgressAttributesCreator={
setCollectionDownloadProgressAttributesCreator
setFilesDownloadProgressAttributesCreator={
setFilesDownloadProgressAttributesCreator
}
isActiveCollectionDownloadInProgress={
isActiveCollectionDownloadInProgress
@ -195,10 +171,6 @@ export default function Collections(props: Iprops) {
onClose={closeCollectionShare}
collection={activeCollection}
/>
<CollectionDownloadProgress
attributesList={collectionDownloadProgressAttributesList}
setAttributesList={setCollectionDownloadProgressAttributesList}
/>
</>
);
}

159
apps/photos/src/components/FilesDownloadProgress.tsx Normal file
View file

@ -0,0 +1,159 @@
import Notification from 'components/Notification';
import { t } from 'i18next';
import isElectron from 'is-electron';
import { AppContext } from 'pages/_app';
import { GalleryContext } from 'pages/gallery';
import { useContext } from 'react';
import ElectronAPIs from '@ente/shared/electron';
export interface FilesDownloadProgressAttributes {
id: number;
success: number;
failed: number;
total: number;
folderName: string;
collectionID: number;
isHidden: boolean;
downloadDirPath: string;
canceller: AbortController;
}
interface FilesDownloadProgressProps {
attributesList: FilesDownloadProgressAttributes[];
setAttributesList: (value: FilesDownloadProgressAttributes[]) => void;
}
export const isFilesDownloadStarted = (
attributes: FilesDownloadProgressAttributes
) => {
return attributes && attributes.total > 0;
};
export const isFilesDownloadCompleted = (
attributes: FilesDownloadProgressAttributes
) => {
return (
attributes &&
attributes.success + attributes.failed === attributes.total
);
};
export const isFilesDownloadCompletedWithErrors = (
attributes: FilesDownloadProgressAttributes
) => {
return (
attributes &&
attributes.failed > 0 &&
isFilesDownloadCompleted(attributes)
);
};
export const isFilesDownloadCancelled = (
attributes: FilesDownloadProgressAttributes
) => {
return attributes && attributes.canceller?.signal?.aborted;
};
export const FilesDownloadProgress: React.FC<FilesDownloadProgressProps> = ({
attributesList,
setAttributesList,
}) => {
const appContext = useContext(AppContext);
const galleryContext = useContext(GalleryContext);
if (!attributesList) {
return <></>;
}
const onClose = (id: number) => {
setAttributesList(attributesList.filter((attr) => attr.id !== id));
};
const confirmCancelUpload = (
attributes: FilesDownloadProgressAttributes
) => {
appContext.setDialogMessage({
title: t('STOP_DOWNLOADS_HEADER'),
content: t('STOP_ALL_DOWNLOADS_MESSAGE'),
proceed: {
text: t('YES_STOP_DOWNLOADS'),
variant: 'critical',
action: () => {
attributes?.canceller.abort();
onClose(attributes.id);
},
},
close: {
text: t('NO'),
variant: 'secondary',
action: () => {},
},
});
};
const handleClose = (attributes: FilesDownloadProgressAttributes) => () => {
if (isFilesDownloadCompleted(attributes)) {
onClose(attributes.id);
} else {
confirmCancelUpload(attributes);
}
};
const handleOnClick = (id: number) => () => {
const attributes = attributesList.find((attr) => attr.id === id);
if (isElectron()) {
ElectronAPIs.openDirectory(attributes.downloadDirPath);
} else {
if (attributes.isHidden) {
galleryContext.openHiddenSection(() => {
galleryContext.setActiveCollectionID(
attributes.collectionID
);
});
} else {
galleryContext.setActiveCollectionID(attributes.collectionID);
}
}
};
return (
<>
{attributesList.map((attributes, index) => (
<Notification
key={attributes.id}
horizontal="left"
sx={{
'&&': { bottom: `${index * 80 + 20}px` },
zIndex: 1600,
}}
open={isFilesDownloadStarted(attributes)}
onClose={handleClose(attributes)}
keepOpenOnClick
attributes={{
variant: isFilesDownloadCompletedWithErrors(attributes)
? 'critical'
: 'secondary',
title: isFilesDownloadCompletedWithErrors(attributes)
? t('DOWNLOAD_FAILED')
: isFilesDownloadCompleted(attributes)
? t(`DOWNLOAD_COMPLETE`)
: t('DOWNLOADING_COLLECTION', {
name: attributes.folderName,
}),
caption: isFilesDownloadCompleted(attributes)
? attributes.folderName
: t('DOWNLOAD_PROGRESS', {
progress: {
current:
attributes.success +
attributes.failed,
total: attributes.total,
},
}),
onClick: handleOnClick(attributes.id),
}}
/>
))}
</>
);
};

32
apps/photos/src/components/PhotoFrame.tsx
View file

@ -11,8 +11,10 @@ import AutoSizer from 'react-virtualized-auto-sizer';
import PhotoViewer from 'components/PhotoViewer';
import { TRASH_SECTION } from 'constants/collection';
import { updateFileMsrcProps, updateFileSrcProps } from 'utils/photoFrame';
import { SelectedState } from 'types/gallery';
import { PublicCollectionGalleryContext } from 'utils/publicCollectionGallery';
import {
SelectedState,
SetFilesDownloadProgressAttributesCreator,
} from 'types/gallery';
import { useRouter } from 'next/router';
import { logError } from '@ente/shared/sentry';
import { addLogLine } from '@ente/shared/logging';
@ -53,8 +55,8 @@ interface Props {
selected: SelectedState | ((selected: SelectedState) => SelectedState)
) => void;
selected: SelectedState;
deletedFileIds?: Set<number>;
setDeletedFileIds?: (value: Set<number>) => void;
tempDeletedFileIds?: Set<number>;
setTempDeletedFileIds?: (value: Set<number>) => void;
activeCollectionID: number;
enableDownload?: boolean;
fileToCollectionsMap: Map<number, number[]>;
@ -62,6 +64,7 @@ interface Props {
showAppDownloadBanner?: boolean;
setIsPhotoSwipeOpen?: (value: boolean) => void;
isInHiddenSection?: boolean;
setFilesDownloadProgressAttributesCreator?: SetFilesDownloadProgressAttributesCreator;
}
const PhotoFrame = ({
@ -72,8 +75,8 @@ const PhotoFrame = ({
favItemIds,
setSelected,
selected,
deletedFileIds,
setDeletedFileIds,
tempDeletedFileIds,
setTempDeletedFileIds,
activeCollectionID,
enableDownload,
fileToCollectionsMap,
@ -81,6 +84,7 @@ const PhotoFrame = ({
showAppDownloadBanner,
setIsPhotoSwipeOpen,
isInHiddenSection,
setFilesDownloadProgressAttributesCreator,
}: Props) => {
const [open, setOpen] = useState(false);
const [currentIndex, setCurrentIndex] = useState<number>(0);
@ -89,9 +93,6 @@ const PhotoFrame = ({
[k: number]: boolean;
}>({});
const galleryContext = useContext(GalleryContext);
const publicCollectionGalleryContext = useContext(
PublicCollectionGalleryContext
);
const [rangeStart, setRangeStart] = useState(null);
const [currentHover, setCurrentHover] = useState(null);
const [isShiftKeyPressed, setIsShiftKeyPressed] = useState(false);
@ -211,7 +212,7 @@ const PhotoFrame = ({
throw Error(CustomError.FILE_CONVERSION_FAILED);
}
await updateFileSrcProps(file, srcURLs);
await updateFileSrcProps(file, srcURLs, enableDownload);
};
const handleClose = (needUpdate) => {
@ -315,9 +316,7 @@ const PhotoFrame = ({
file={item}
updateURL={updateURL(index)}
onClick={onThumbnailClick(index)}
selectable={
!publicCollectionGalleryContext?.accessedThroughSharedURL
}
selectable={enableDownload}
onSelect={handleSelect(
item.id,
item.ownerID === galleryContext.user?.id,
@ -600,13 +599,16 @@ const PhotoFrame = ({
gettingData={getSlideData}
getConvertedItem={getConvertedItem}
favItemIds={favItemIds}
deletedFileIds={deletedFileIds}
setDeletedFileIds={setDeletedFileIds}
tempDeletedFileIds={tempDeletedFileIds}
setTempDeletedFileIds={setTempDeletedFileIds}
isTrashCollection={activeCollectionID === TRASH_SECTION}
isInHiddenSection={isInHiddenSection}
enableDownload={enableDownload}
fileToCollectionsMap={fileToCollectionsMap}
collectionNameMap={collectionNameMap}
setFilesDownloadProgressAttributesCreator={
setFilesDownloadProgressAttributesCreator
}
/>
</Container>
);

133
apps/photos/src/components/PhotoViewer/ImageEditorOverlay/CropMenu.tsx Normal file
View file

@ -0,0 +1,133 @@
import { EnteMenuItem } from 'components/Menu/EnteMenuItem';
import { MenuItemGroup } from 'components/Menu/MenuItemGroup';
import MenuSectionTitle from 'components/Menu/MenuSectionTitle';
import { useContext } from 'react';
import { ImageEditorOverlayContext } from './';
import { CropBoxProps } from './';
import type { MutableRefObject } from 'react';
import { t } from 'i18next';
import CropIcon from '@mui/icons-material/Crop';
interface IProps {
previewScale: number;
cropBoxProps: CropBoxProps;
cropBoxRef: MutableRefObject<HTMLDivElement>;
resetCropBox: () => void;
}
export const cropRegionOfCanvas = (
canvas: HTMLCanvasElement,
topLeftX: number,
topLeftY: number,
bottomRightX: number,
bottomRightY: number,
scale: number = 1
) => {
const context = canvas.getContext('2d');
if (!context || !canvas) return;
context.imageSmoothingEnabled = false;
const width = (bottomRightX - topLeftX) * scale;
const height = (bottomRightY - topLeftY) * scale;
const img = new Image();
img.src = canvas.toDataURL();
img.onload = () => {
context.clearRect(0, 0, canvas.width, canvas.height);
canvas.width = width;
canvas.height = height;
context.drawImage(
img,
topLeftX,
topLeftY,
width,
height,
0,
0,
width,
height
);
};
};
export const getCropRegionArgs = (
cropBoxEle: HTMLDivElement,
canvasEle: HTMLCanvasElement
) => {
// get the bounding rectangle of the crop box
const cropBoxRect = cropBoxEle.getBoundingClientRect();
// Get the bounding rectangle of the canvas
const canvasRect = canvasEle.getBoundingClientRect();
// calculate the scale of the canvas display relative to its actual dimensions
const displayScale = canvasEle.width / canvasRect.width;
// calculate the coordinates of the crop box relative to the canvas and adjust for any scrolling by adding scroll offsets
const x1 =
(cropBoxRect.left - canvasRect.left + window.scrollX) * displayScale;
const y1 =
(cropBoxRect.top - canvasRect.top + window.scrollY) * displayScale;
const x2 = x1 + cropBoxRect.width * displayScale;
const y2 = y1 + cropBoxRect.height * displayScale;
return {
x1,
x2,
y1,
y2,
};
};
const CropMenu = (props: IProps) => {
const {
canvasRef,
originalSizeCanvasRef,
canvasLoading,
setCanvasLoading,
setTransformationPerformed,
setCurrentTab,
} = useContext(ImageEditorOverlayContext);
return (
<>
<MenuSectionTitle title={t('FREEHAND')} />
<MenuItemGroup
style={{
marginBottom: '0.5rem',
}}>
<EnteMenuItem
disabled={canvasLoading}
startIcon={<CropIcon />}
onClick={() => {
if (!props.cropBoxRef.current || !canvasRef.current)
return;
const { x1, x2, y1, y2 } = getCropRegionArgs(
props.cropBoxRef.current,
canvasRef.current
);
setCanvasLoading(true);
setTransformationPerformed(true);
cropRegionOfCanvas(canvasRef.current, x1, y1, x2, y2);
cropRegionOfCanvas(
originalSizeCanvasRef.current,
x1 / props.previewScale,
y1 / props.previewScale,
x2 / props.previewScale,
y2 / props.previewScale
);
props.resetCropBox();
setCanvasLoading(false);
setCurrentTab('transform');
}}
label={t('APPLY_CROP')}
/>
</MenuItemGroup>
</>
);
};
export default CropMenu;

118
apps/photos/src/components/PhotoViewer/ImageEditorOverlay/FreehandCropRegion.tsx Normal file
View file

@ -0,0 +1,118 @@
import { CropBoxProps } from './';
import type { Ref, Dispatch, SetStateAction, CSSProperties } from 'react';
import { forwardRef } from 'react';
const handleStyle: CSSProperties = {
position: 'absolute',
height: '10px',
width: '10px',
backgroundColor: 'white',
border: '1px solid black',
};
const seHandleStyle: CSSProperties = {
...handleStyle,
right: '-5px',
bottom: '-5px',
cursor: 'se-resize',
};
interface IProps {
cropBox: CropBoxProps;
setIsDragging: Dispatch<SetStateAction<boolean>>;
}
const FreehandCropRegion = forwardRef(
(props: IProps, ref: Ref<HTMLDivElement>) => {
return (
<>
{/* Top overlay */}
<div
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
height: props.cropBox.y + 'px', // height up to the top of the crop box
backgroundColor: 'rgba(0,0,0,0.5)',
pointerEvents: 'none',
}}></div>
{/* Bottom overlay */}
<div
style={{
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
height: `calc(100% - ${
props.cropBox.y + props.cropBox.height
}px)`, // height from the bottom of the crop box to the bottom of the canvas
backgroundColor: 'rgba(0,0,0,0.5)',
pointerEvents: 'none',
}}></div>
{/* Left overlay */}
<div
style={{
position: 'absolute',
top: props.cropBox.y + 'px',
left: 0,
width: props.cropBox.x + 'px', // width up to the left side of the crop box
height: props.cropBox.height + 'px', // same height as the crop box
backgroundColor: 'rgba(0,0,0,0.5)',
pointerEvents: 'none',
}}></div>
{/* Right overlay */}
<div
style={{
position: 'absolute',
top: props.cropBox.y + 'px',
right: 0,
width: `calc(100% - ${
props.cropBox.x + props.cropBox.width
}px)`, // width from the right side of the crop box to the right side of the canvas
height: props.cropBox.height + 'px', // same height as the crop box
backgroundColor: 'rgba(0,0,0,0.5)',
pointerEvents: 'none',
}}></div>
<div
style={{
display: 'grid',
position: 'absolute',
left: props.cropBox.x + 'px',
top: props.cropBox.y + 'px',
width: props.cropBox.width + 'px',
height: props.cropBox.height + 'px',
border: '1px solid white',
gridTemplateColumns: '1fr 1fr 1fr',
gridTemplateRows: '1fr 1fr 1fr',
gap: '0px',
zIndex: 30, // make sure the crop box is above the overlays
}}
ref={ref}>
{Array.from({ length: 9 }).map((_, index) => (
<div
key={index}
style={{
border: '1px solid white',
boxSizing: 'border-box',
pointerEvents: 'none',
}}></div>
))}
<div
style={seHandleStyle}
onMouseDown={(e) => {
e.preventDefault();
props.setIsDragging(true);
}}></div>
</div>
</>
);
}
);
export default FreehandCropRegion;

1
apps/photos/src/components/PhotoViewer/ImageEditorOverlay/TransformMenu.tsx
View file

@ -89,6 +89,7 @@ const TransformMenu = () => {
);
};
};
const flipCanvas = (
canvas: HTMLCanvasElement,
direction: 'vertical' | 'horizontal'

364
apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx
View file

@ -29,6 +29,7 @@ import mime from 'mime-types';
import CloseIcon from '@mui/icons-material/Close';
import { HorizontalFlex } from '@ente/shared/components/Container';
import TransformMenu from './TransformMenu';
import CropMenu from './CropMenu';
import ColoursMenu from './ColoursMenu';
import { FileWithCollection } from 'types/upload';
import uploadManager from 'services/upload/uploadManager';
@ -44,6 +45,12 @@ import { getEditorCloseConfirmationMessage } from 'utils/ui';
import { logError } from '@ente/shared/sentry';
import { getFileType } from 'services/typeDetectionService';
import { downloadUsingAnchor } from '@ente/shared/utils';
import { CORNER_THRESHOLD, FILTER_DEFAULT_VALUES } from 'constants/photoEditor';
import FreehandCropRegion from './FreehandCropRegion';
import EnteButton from '@ente/shared/components/EnteButton';
import { CenteredFlex } from '@ente/shared/components/Container';
import CropIcon from '@mui/icons-material/Crop';
import { cropRegionOfCanvas, getCropRegionArgs } from './CropMenu';
interface IProps {
file: EnteFile;
@ -59,16 +66,11 @@ export const ImageEditorOverlayContext = createContext(
setTransformationPerformed: Dispatch<SetStateAction<boolean>>;
setCanvasLoading: Dispatch<SetStateAction<boolean>>;
canvasLoading: boolean;
setCurrentTab: Dispatch<SetStateAction<OperationTab>>;
}
);
const filterDefaultValues = {
brightness: 100,
contrast: 100,
blur: 0,
saturation: 100,
invert: false,
};
type OperationTab = 'crop' | 'transform' | 'colours';
const getEditedFileName = (fileName: string) => {
const fileNameParts = fileName.split('.');
@ -77,6 +79,13 @@ const getEditedFileName = (fileName: string) => {
return editedFileName;
};
export interface CropBoxProps {
x: number;
y: number;
width: number;
height: number;
}
const ImageEditorOverlay = (props: IProps) => {
const appContext = useContext(AppContext);
@ -88,19 +97,17 @@ const ImageEditorOverlay = (props: IProps) => {
const [currentRotationAngle, setCurrentRotationAngle] = useState(0);
const [currentTab, setCurrentTab] = useState<'transform' | 'colours'>(
'transform'
);
const [currentTab, setCurrentTab] = useState<OperationTab>('transform');
const [brightness, setBrightness] = useState(
filterDefaultValues.brightness
FILTER_DEFAULT_VALUES.brightness
);
const [contrast, setContrast] = useState(filterDefaultValues.contrast);
const [blur, setBlur] = useState(filterDefaultValues.blur);
const [contrast, setContrast] = useState(FILTER_DEFAULT_VALUES.contrast);
const [blur, setBlur] = useState(FILTER_DEFAULT_VALUES.blur);
const [saturation, setSaturation] = useState(
filterDefaultValues.saturation
FILTER_DEFAULT_VALUES.saturation
);
const [invert, setInvert] = useState(filterDefaultValues.invert);
const [invert, setInvert] = useState(FILTER_DEFAULT_VALUES.invert);
const [transformationPerformed, setTransformationPerformed] =
useState(false);
@ -110,6 +117,149 @@ const ImageEditorOverlay = (props: IProps) => {
const [showControlsDrawer, setShowControlsDrawer] = useState(true);
const [previewCanvasScale, setPreviewCanvasScale] = useState(0);
const [cropBox, setCropBox] = useState<CropBoxProps>({
x: 0,
y: 0,
width: 100,
height: 100,
});
const [startX, setStartX] = useState(0);
const [startY, setStartY] = useState(0);
const [beforeGrowthHeight, setBeforeGrowthHeight] = useState(0);
const [beforeGrowthWidth, setBeforeGrowthWidth] = useState(0);
const [isDragging, setIsDragging] = useState(false);
const [isGrowing, setIsGrowing] = useState(false);
const cropBoxRef = useRef<HTMLDivElement>(null);
const getCanvasBoundsOffsets = () => {
const canvasBounds = {
height: canvasRef.current.height,
width: canvasRef.current.width,
};
const parentBounds = parentRef.current.getBoundingClientRect();
// calculate the offset created by centering the canvas in its parent
const offsetX = (parentBounds.width - canvasBounds.width) / 2;
const offsetY = (parentBounds.height - canvasBounds.height) / 2;
return {
offsetY,
offsetX,
canvasBounds,
parentBounds,
};
};
const handleDragStart = (e) => {
if (currentTab !== 'crop') return;
const rect = cropBoxRef.current.getBoundingClientRect();
const offsetX = e.pageX - rect.left - rect.width / 2;
const offsetY = e.pageY - rect.top - rect.height / 2;
// check if the cursor is near the corners of the box
const isNearLeftOrRightEdge =
e.pageX < rect.left + CORNER_THRESHOLD ||
e.pageX > rect.right - CORNER_THRESHOLD;
const isNearTopOrBottomEdge =
e.pageY < rect.top + CORNER_THRESHOLD ||
e.pageY > rect.bottom - CORNER_THRESHOLD;
if (isNearLeftOrRightEdge && isNearTopOrBottomEdge) {
// cursor is near a corner, do not initiate dragging
setIsGrowing(true);
setStartX(e.pageX);
setStartY(e.pageY);
setBeforeGrowthWidth(cropBox.width);
setBeforeGrowthHeight(cropBox.height);
return;
}
setIsDragging(true);
setStartX(e.pageX - offsetX);
setStartY(e.pageY - offsetY);
};
const handleDrag = (e) => {
if (!isDragging && !isGrowing) return;
// d- variables are the delta change between start and now
const dx = e.pageX - startX;
const dy = e.pageY - startY;
const { offsetX, offsetY, canvasBounds } = getCanvasBoundsOffsets();
if (isGrowing) {
setCropBox((prev) => {
const newWidth = Math.min(
beforeGrowthWidth + dx,
canvasBounds.width - prev.x + offsetX
);
const newHeight = Math.min(
beforeGrowthHeight + dy,
canvasBounds.height - prev.y + offsetY
);
return {
...prev,
width: newWidth,
height: newHeight,
};
});
} else {
setCropBox((prev) => {
let newX = prev.x + dx;
let newY = prev.y + dy;
// constrain the new position to the canvas boundaries, accounting for the offset
newX = Math.max(
offsetX,
Math.min(newX, offsetX + canvasBounds.width - prev.width)
);
newY = Math.max(
offsetY,
Math.min(newY, offsetY + canvasBounds.height - prev.height)
);
return {
...prev,
x: newX,
y: newY,
};
});
setStartX(e.pageX);
setStartY(e.pageY);
}
};
const handleDragEnd = () => {
setStartX(0);
setStartY(0);
setIsGrowing(false);
setIsDragging(false);
};
const resetCropBox = () => {
setCropBox((prev) => {
const { offsetX, offsetY, canvasBounds } = getCanvasBoundsOffsets();
return {
...prev,
x: offsetX,
y: offsetY,
height: canvasBounds.height,
width: canvasBounds.width,
};
});
};
useEffect(() => {
if (!canvasRef.current) {
return;
@ -117,17 +267,23 @@ const ImageEditorOverlay = (props: IProps) => {
try {
applyFilters([canvasRef.current, originalSizeCanvasRef.current]);
setColoursAdjusted(
brightness !== filterDefaultValues.brightness ||
contrast !== filterDefaultValues.contrast ||
blur !== filterDefaultValues.blur ||
saturation !== filterDefaultValues.saturation ||
invert !== filterDefaultValues.invert
brightness !== FILTER_DEFAULT_VALUES.brightness ||
contrast !== FILTER_DEFAULT_VALUES.contrast ||
blur !== FILTER_DEFAULT_VALUES.blur ||
saturation !== FILTER_DEFAULT_VALUES.saturation ||
invert !== FILTER_DEFAULT_VALUES.invert
);
} catch (e) {
logError(e, 'Error applying filters');
}
}, [brightness, contrast, blur, saturation, invert, canvasRef, fileURL]);
useEffect(() => {
if (currentTab !== 'crop') return;
resetCropBox();
setShowControlsDrawer(false);
}, [currentTab]);
const applyFilters = async (canvases: HTMLCanvasElement[]) => {
try {
for (const canvas of canvases) {
@ -203,6 +359,7 @@ const ImageEditorOverlay = (props: IProps) => {
}
setCanvasLoading(true);
resetFilters();
setCurrentRotationAngle(0);
@ -226,6 +383,7 @@ const ImageEditorOverlay = (props: IProps) => {
parentRef.current.clientWidth / img.width,
parentRef.current.clientHeight / img.height
);
setPreviewCanvasScale(scale);
const width = img.width * scale;
const height = img.height * scale;
@ -246,6 +404,13 @@ const ImageEditorOverlay = (props: IProps) => {
setColoursAdjusted(false);
setCanvasLoading(false);
resetCropBox();
setStartX(0);
setStartY(0);
setIsDragging(false);
setIsGrowing(false);
resolve(true);
} catch (e) {
reject(e);
@ -387,35 +552,97 @@ const ImageEditorOverlay = (props: IProps) => {
boxSizing={'border-box'}
display="flex"
alignItems="center"
justifyContent="center">
justifyContent="center"
position="relative"
onMouseUp={handleDragEnd}
onMouseMove={isDragging ? handleDrag : null}
onMouseDown={handleDragStart}>
<Box
height="90%"
width="100%"
ref={parentRef}
display="flex"
alignItems="center"
justifyContent="center">
{(fileURL === null || canvasLoading) && (
<CircularProgress />
)}
style={{
position: 'relative',
width: '100%',
height: '100%',
}}>
<Box
height="90%"
width="100%"
ref={parentRef}
display="flex"
alignItems="center"
justifyContent="center"
position="relative">
{(fileURL === null || canvasLoading) && (
<CircularProgress />
)}
<canvas
ref={canvasRef}
style={{
objectFit: 'contain',
display:
fileURL === null || canvasLoading
? 'none'
: 'block',
position: 'absolute',
}}
/>
<canvas
ref={originalSizeCanvasRef}
style={{
display: 'none',
}}
/>
<canvas
ref={canvasRef}
style={{
objectFit: 'contain',
display:
fileURL === null || canvasLoading
? 'none'
: 'block',
position: 'absolute',
}}
/>
<canvas
ref={originalSizeCanvasRef}
style={{
display: 'none',
}}
/>
{currentTab === 'crop' && (
<FreehandCropRegion
cropBox={cropBox}
ref={cropBoxRef}
setIsDragging={setIsDragging}
/>
)}
</Box>
{currentTab === 'crop' && (
<CenteredFlex marginTop="1rem">
<EnteButton
color="accent"
startIcon={<CropIcon />}
onClick={() => {
if (
!cropBoxRef.current ||
!canvasRef.current
)
return;
const { x1, x2, y1, y2 } =
getCropRegionArgs(
cropBoxRef.current,
canvasRef.current
);
setCanvasLoading(true);
setTransformationPerformed(true);
cropRegionOfCanvas(
canvasRef.current,
x1,
y1,
x2,
y2
);
cropRegionOfCanvas(
originalSizeCanvasRef.current,
x1 / previewCanvasScale,
y1 / previewCanvasScale,
x2 / previewCanvasScale,
y2 / previewCanvasScale
);
resetCropBox();
setCanvasLoading(false);
setCurrentTab('transform');
}}>
{t('APPLY_CROP')}
</EnteButton>
</CenteredFlex>
)}
</Box>
</Box>
</Box>
@ -441,6 +668,7 @@ const ImageEditorOverlay = (props: IProps) => {
onChange={(_, value) => {
setCurrentTab(value);
}}>
<Tab label={t('CROP')} value="crop" />
<Tab label={t('TRANSFORM')} value="transform" />
<Tab
label={t('COLORS')}
@ -463,18 +691,25 @@ const ImageEditorOverlay = (props: IProps) => {
label={t('RESTORE_ORIGINAL')}
/>
</MenuItemGroup>
{currentTab === 'transform' && (
<ImageEditorOverlayContext.Provider
value={{
originalSizeCanvasRef,
canvasRef,
setCanvasLoading,
canvasLoading,
setTransformationPerformed,
}}>
<TransformMenu />
</ImageEditorOverlayContext.Provider>
)}
<ImageEditorOverlayContext.Provider
value={{
originalSizeCanvasRef,
canvasRef,
setCanvasLoading,
canvasLoading,
setTransformationPerformed,
setCurrentTab,
}}>
{currentTab === 'crop' && (
<CropMenu
previewScale={previewCanvasScale}
cropBoxProps={cropBox}
cropBoxRef={cropBoxRef}
resetCropBox={resetCropBox}
/>
)}
{currentTab === 'transform' && <TransformMenu />}
</ImageEditorOverlayContext.Provider>
{currentTab === 'colours' && (
<ColoursMenu
brightness={brightness}
@ -495,14 +730,25 @@ const ImageEditorOverlay = (props: IProps) => {
startIcon={<DownloadIcon />}
onClick={downloadEditedPhoto}
label={t('DOWNLOAD_EDITED')}
disabled={
!transformationPerformed && !coloursAdjusted
}
/>
<MenuItemDivider />
<EnteMenuItem
startIcon={<CloudUploadIcon />}
onClick={saveCopyToEnte}
label={t('SAVE_A_COPY_TO_ENTE')}
disabled={
!transformationPerformed && !coloursAdjusted
}
/>
</MenuItemGroup>
{!transformationPerformed && !coloursAdjusted && (
<MenuSectionTitle
title={t('PHOTO_EDIT_REQUIRED_TO_SAVE')}
/>
)}
</EnteDrawer>
</Backdrop>
</>

65
apps/photos/src/components/PhotoViewer/index.tsx
View file

@ -8,12 +8,12 @@ import {
} from 'services/collectionService';
import { EnteFile } from 'types/file';
import {
downloadFile,
copyFileToClipboard,
getFileExtension,
getFileFromURL,
isSupportedRawFormat,
isRawFile,
downloadSingleFile,
} from 'utils/file';
import { logError } from '@ente/shared/sentry';
@ -58,6 +58,7 @@ import isElectron from 'is-electron';
import ReplayIcon from '@mui/icons-material/Replay';
import ImageEditorOverlay from './ImageEditorOverlay';
import EditIcon from '@mui/icons-material/Edit';
import { SetFilesDownloadProgressAttributesCreator } from 'types/gallery';
interface PhotoswipeFullscreenAPI {
enter: () => void;
@ -85,13 +86,14 @@ interface Iprops {
id?: string;
className?: string;
favItemIds: Set<number>;
deletedFileIds: Set<number>;
setDeletedFileIds?: (value: Set<number>) => void;
tempDeletedFileIds: Set<number>;
setTempDeletedFileIds?: (value: Set<number>) => void;
isTrashCollection: boolean;
isInHiddenSection: boolean;
enableDownload: boolean;
fileToCollectionsMap: Map<number, number[]>;
collectionNameMap: Map<number, string>;
setFilesDownloadProgressAttributesCreator: SetFilesDownloadProgressAttributesCreator;
}
function PhotoViewer(props: Iprops) {
@ -192,6 +194,12 @@ function PhotoViewer(props: Iprops) {
case 'L':
onFavClick(photoSwipe?.currItem as EnteFile);
break;
case 'ArrowLeft':
handleArrowClick(event, 'left');
break;
case 'ArrowRight':
handleArrowClick(event, 'right');
break;
default:
break;
}
@ -259,7 +267,7 @@ function PhotoViewer(props: Iprops) {
`download-btn-${item.id}`
) as HTMLButtonElement;
const downloadFile = () => {
downloadFileHelper(photoSwipe.currItem);
downloadFileHelper(photoSwipe.currItem as unknown as EnteFile);
};
if (downloadLivePhotoBtn) {
@ -352,6 +360,7 @@ function PhotoViewer(props: Iprops) {
maxSpreadZoom: 5,
index: currentIndex,
showHideOpacity: true,
arrowKeys: false,
getDoubleTapZoom(isMouseClick, item) {
if (isMouseClick) {
return 2.5;
@ -484,13 +493,13 @@ function PhotoViewer(props: Iprops) {
};
const trashFile = async (file: EnteFile) => {
const { deletedFileIds, setDeletedFileIds } = props;
const { tempDeletedFileIds, setTempDeletedFileIds } = props;
try {
appContext.startLoading();
await trashFiles([file]);
appContext.finishLoading();
deletedFileIds.add(file.id);
setDeletedFileIds(new Set(deletedFileIds));
tempDeletedFileIds.add(file.id);
setTempDeletedFileIds(new Set(tempDeletedFileIds));
updateItems(props.items.filter((item) => item.id !== file.id));
needUpdate.current = true;
} catch (e) {
@ -505,6 +514,24 @@ function PhotoViewer(props: Iprops) {
appContext.setDialogMessage(getTrashFileMessage(() => trashFile(file)));
};
const handleArrowClick = (
e: KeyboardEvent,
direction: 'left' | 'right'
) => {
// ignore arrow clicks if the user is typing in a text field
if (
e.target instanceof HTMLInputElement ||
e.target instanceof HTMLTextAreaElement
) {
return;
}
if (direction === 'left') {
photoSwipe.prev();
} else {
photoSwipe.next();
}
};
const updateItems = (items: EnteFile[]) => {
try {
if (photoSwipe) {
@ -599,15 +626,21 @@ function PhotoViewer(props: Iprops) {
setShowImageEditorOverlay(false);
};
const downloadFileHelper = async (file) => {
if (file && props.enableDownload) {
appContext.startLoading();
const downloadFileHelper = async (file: EnteFile) => {
if (
file &&
props.enableDownload &&
props.setFilesDownloadProgressAttributesCreator
) {
try {
await downloadFile(file);
const setSingleFileDownloadProgress =
props.setFilesDownloadProgressAttributesCreator(
file.metadata.title
);
await downloadSingleFile(file, setSingleFileDownloadProgress);
} catch (e) {
// do nothing
}
appContext.finishLoading();
}
};
@ -702,7 +735,9 @@ function PhotoViewer(props: Iprops) {
onClose={() =>
setConversionFailedNotificationOpen(false)
}
onClick={() => downloadFileHelper(photoSwipe.currItem)}
onClick={() =>
downloadFileHelper(photoSwipe.currItem as EnteFile)
}
/>
<Box
@ -746,7 +781,9 @@ function PhotoViewer(props: Iprops) {
className="pswp__button pswp__button--custom"
title={t('DOWNLOAD_OPTION')}
onClick={() =>
downloadFileHelper(photoSwipe.currItem)
downloadFileHelper(
photoSwipe.currItem as EnteFile
)
}>
<DownloadIcon />
</button>

56
apps/photos/src/components/Search/SearchBar/searchInput/index.tsx
View file

@ -1,13 +1,7 @@
import { IconButton } from '@mui/material';
import pDebounce from 'p-debounce';
import { AppContext } from 'pages/_app';
import React, {
useCallback,
useContext,
useEffect,
useRef,
useState,
} from 'react';
import { useCallback, useContext, useEffect, useRef, useState } from 'react';
import {
getAutoCompleteSuggestions,
getDefaultOptions,
@ -34,6 +28,9 @@ import { t } from 'i18next';
import memoize from 'memoize-one';
import { LocationTagData } from 'types/entity';
import { FILE_TYPE } from 'constants/file';
import { InputActionMeta } from 'react-select/src/types';
import { components } from 'react-select';
import { City } from 'services/locationSearchService';
interface Iprops {
isOpen: boolean;
@ -43,20 +40,33 @@ interface Iprops {
collections: Collection[];
}
const createComponents = memoize((Option, ValueContainer, Menu) => ({
const createComponents = memoize((Option, ValueContainer, Menu, Input) => ({
Option,
ValueContainer,
Menu,
Input,
}));
const VisibleInput = (props) => (
<components.Input {...props} isHidden={false} />
);
export default function SearchInput(props: Iprops) {
const selectRef = useRef(null);
const [value, setValue] = useState<SearchOption>(null);
const appContext = useContext(AppContext);
const handleChange = (value: SearchOption) => {
setValue(value);
setQuery(value.label);
blur();
};
const handleInputChange = (value: string, actionMeta: InputActionMeta) => {
if (actionMeta.action === 'input-change') {
setQuery(value);
}
};
const [defaultOptions, setDefaultOptions] = useState([]);
const [query, setQuery] = useState('');
useEffect(() => {
search(value);
@ -64,10 +74,12 @@ export default function SearchInput(props: Iprops) {
useEffect(() => {
refreshDefaultOptions();
const t = setInterval(() => refreshDefaultOptions(), 2000);
return () => clearInterval(t);
}, []);
async function refreshDefaultOptions() {
const defaultOptions = await getDefaultOptions(props.files);
const defaultOptions = await getDefaultOptions();
setDefaultOptions(defaultOptions);
}
@ -80,14 +92,22 @@ export default function SearchInput(props: Iprops) {
}, 10);
props.setIsOpen(false);
setValue(null);
setQuery('');
}
};
const getOptions = pDebounce(
getAutoCompleteSuggestions(props.files, props.collections),
250
const getOptions = useCallback(
pDebounce(
getAutoCompleteSuggestions(props.files, props.collections),
250
),
[props.files, props.collections]
);
const blur = () => {
selectRef.current?.blur();
};
const search = (selectedOption: SearchOption) => {
if (!selectedOption) {
return;
@ -106,9 +126,16 @@ export default function SearchInput(props: Iprops) {
};
props.setIsOpen(true);
break;
case SuggestionType.CITY:
search = {
city: selectedOption.value as City,
};
props.setIsOpen(true);
break;
case SuggestionType.COLLECTION:
search = { collection: selectedOption.value as number };
setValue(null);
setQuery('');
break;
case SuggestionType.FILE_NAME:
search = { files: selectedOption.value as number[] };
@ -159,7 +186,8 @@ export default function SearchInput(props: Iprops) {
const components = createComponents(
OptionWithInfo,
ValueContainerWithIcon,
MemoizedMenuWithPeople
MemoizedMenuWithPeople,
VisibleInput
);
return (
@ -173,6 +201,8 @@ export default function SearchInput(props: Iprops) {
onChange={handleChange}
onFocus={handleOnFocus}
isClearable
inputValue={query}
onInputChange={handleInputChange}
escapeClearsValue
styles={SelectStyles}
defaultOptions={

1
apps/photos/src/components/Search/SearchBar/searchInput/valueContainerWithIcon.tsx
View file

@ -17,6 +17,7 @@ const getIconByType = (type: SuggestionType) => {
case SuggestionType.DATE:
return <CalendarIcon />;
case SuggestionType.LOCATION:
case SuggestionType.CITY:
return <LocationIcon />;
case SuggestionType.COLLECTION:
return <FolderIcon />;

16
apps/photos/src/components/Sidebar/AdvancedSettings.tsx
View file

@ -52,15 +52,13 @@ export default function AdvancedSettings({ open, onClose, onRootClose }) {
});
useEffect(() => {
ClipService.setOnUpdateHandler(setIndexingStatus);
const main = async () => {
setIndexingStatus(await ClipService.getIndexingStatus());
ClipService.setOnUpdateHandler(setIndexingStatus);
};
main();
}, []);
useEffect(() => {
if (open) {
ClipService.updateIndexStatus();
}
}, [open]);
return (
<EnteDrawer
transitionDuration={0}
@ -112,7 +110,9 @@ export default function AdvancedSettings({ open, onClose, onRootClose }) {
{isElectron() && (
<Box>
<MenuSectionTitle title={t('STATUS')} />
<MenuSectionTitle
title={t('MAGIC_SEARCH_STATUS')}
/>
<Stack py={'12px'} px={'12px'} spacing={'24px'}>
<VerticallyCenteredFlex
justifyContent="space-between"

12
apps/photos/src/components/Upload/UploadProgress/inProgressSection.tsx
View file

@ -12,6 +12,7 @@ import UploadProgressContext from 'contexts/uploadProgress';
import { t } from 'i18next';
import { UPLOAD_STAGES } from 'constants/upload';
import { CaptionedText } from 'components/CaptionedText';
export const InProgressSection = () => {
const { inProgressUploads, hasLivePhotos, uploadFileNames, uploadStage } =
@ -44,9 +45,14 @@ export const InProgressSection = () => {
return (
<UploadProgressSection>
<UploadProgressSectionTitle expandIcon={<ExpandMoreIcon />}>
{uploadStage === UPLOAD_STAGES.EXTRACTING_METADATA
? t('INPROGRESS_METADATA_EXTRACTION')
: t('INPROGRESS_UPLOADS')}
<CaptionedText
mainText={
uploadStage === UPLOAD_STAGES.EXTRACTING_METADATA
? t('INPROGRESS_METADATA_EXTRACTION')
: t('INPROGRESS_UPLOADS')
}
subText={String(inProgressUploads?.length ?? 0)}
/>
</UploadProgressSectionTitle>
<UploadProgressSectionContent>
{hasLivePhotos && (

9
apps/photos/src/components/Upload/UploadProgress/resultSection.tsx
View file

@ -1,6 +1,5 @@
import React, { useContext } from 'react';
import { useContext } from 'react';
import ItemList from 'components/ItemList';
import { Typography } from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { ResultItemContainer } from './styledComponents';
import { UPLOAD_RESULT } from 'constants/upload';
@ -11,6 +10,7 @@ import {
UploadProgressSectionTitle,
} from './section';
import UploadProgressContext from 'contexts/uploadProgress';
import { CaptionedText } from 'components/CaptionedText';
export interface ResultSectionProps {
uploadResult: UPLOAD_RESULT;
@ -46,7 +46,10 @@ export const ResultSection = (props: ResultSectionProps) => {
return (
<UploadProgressSection>
<UploadProgressSectionTitle expandIcon={<ExpandMoreIcon />}>
<Typography> {props.sectionTitle}</Typography>
<CaptionedText
mainText={props.sectionTitle}
subText={String(fileList?.length ?? 0)}
/>
</UploadProgressSectionTitle>
<UploadProgressSectionContent>
{props.sectionInfo && (

2
apps/photos/src/components/Upload/Uploader.tsx
View file

@ -391,7 +391,7 @@ export default function Uploader(props: Props) {
) => {
try {
addLogLine(
`upload file to an existing collection - "${collection.name}"`
`upload file to an existing collection name:${collection.name}, collectionID:${collection.id}`
);
await preCollectionCreationAction();
const filesWithCollectionToUpload: FileWithCollection[] =

33
apps/photos/src/components/pages/gallery/PreviewCard.tsx
View file

@ -1,6 +1,6 @@
import React, { useContext, useEffect, useRef, useState } from 'react';
import { EnteFile } from 'types/file';
import { styled } from '@mui/material';
import { Tooltip, styled } from '@mui/material';
import PlayCircleOutlineOutlinedIcon from '@mui/icons-material/PlayCircleOutlineOutlined';
import DownloadManager from 'services/download';
import useLongPress from '@ente/shared/hooks/useLongPress';
@ -218,6 +218,12 @@ export default function PreviewCard(props: IProps) {
const galleryContext = useContext(GalleryContext);
const deduplicateContext = useContext(DeduplicateContext);
const longPressCallback = () => {
onSelect(!selected);
};
const longPress = useLongPress(longPressCallback, 500);
const {
file,
onClick,
@ -289,22 +295,19 @@ export default function PreviewCard(props: IProps) {
}
};
const longPressCallback = () => {
onSelect(!selected);
};
const handleHover = () => {
if (isRangeSelectActive) {
onHover();
}
};
return (
const renderFn = () => (
<Cont
key={`thumb-${file.id}}`}
onClick={handleClick}
onMouseEnter={handleHover}
disabled={!file?.msrc && !imgSrc}
{...(selectable ? useLongPress(longPressCallback, 500) : {})}>
{...(selectable ? longPress : {})}>
{selectable && (
<Check
type="checkbox"
@ -360,4 +363,22 @@ export default function PreviewCard(props: IProps) {
)}
</Cont>
);
if (deduplicateContext.isOnDeduplicatePage) {
return (
<Tooltip
placement="bottom-start"
enterDelay={300}
enterNextDelay={100}
title={`${
file.metadata.title
} - ${deduplicateContext.collectionNameMap.get(
file.collectionID
)}`}>
{renderFn()}
</Tooltip>
);
} else {
return renderFn();
}
}

45
apps/photos/src/components/pages/sharedAlbum/SelectedFileOptions.tsx Normal file
View file

@ -0,0 +1,45 @@
import { useContext } from 'react';
import { FluidContainer } from '@ente/shared/components/Container';
import { SelectionBar } from '@ente/shared/components/Navbar/SelectionBar';
import { AppContext } from 'pages/_app';
import { Box, IconButton, Stack, Tooltip } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import DownloadIcon from '@mui/icons-material/Download';
import { t } from 'i18next';
import { formatNumber } from 'utils/number/format';
interface Props {
count: number;
clearSelection: () => void;
downloadFilesHelper: () => void;
}
const SelectedFileOptions = ({
downloadFilesHelper,
count,
clearSelection,
}: Props) => {
const { isMobile } = useContext(AppContext);
return (
<SelectionBar isMobile={isMobile}>
<FluidContainer>
<IconButton onClick={clearSelection}>
<CloseIcon />
</IconButton>
<Box ml={1.5}>
{formatNumber(count)} {t('SELECTED')}{' '}
</Box>
</FluidContainer>
<Stack spacing={2} direction="row" mr={2}>
<Tooltip title={t('DOWNLOAD')}>
<IconButton onClick={downloadFilesHelper}>
<DownloadIcon />
</IconButton>
</Tooltip>
</Stack>
</SelectionBar>
);
};
export default SelectedFileOptions;

10
apps/photos/src/constants/photoEditor.ts Normal file
View file

@ -0,0 +1,10 @@
export const FILTER_DEFAULT_VALUES = {
brightness: 100,
contrast: 100,
blur: 0,
saturation: 100,
invert: false,
};
// CORNER_THRESHOLD defines the threshold near the corners of the crop box in which dragging is assumed as not the intention
export const CORNER_THRESHOLD = 20;

10
apps/photos/src/pages/_app.tsx
View file

@ -62,6 +62,7 @@ import exportService from 'services/export';
import { REDIRECTS } from 'constants/redirects';
import {
getLocalMapEnabled,
getToken,
setLocalMapEnabled,
} from '@ente/shared/storage/localStorage/helpers';
import { isExportInProgress } from 'utils/export';
@ -76,6 +77,7 @@ import { useLocalState } from '@ente/shared/hooks/useLocalState';
import { PHOTOS_PAGES as PAGES } from '@ente/shared/constants/pages';
import { getTheme } from '@ente/shared/themes';
import { AppUpdateInfo } from '@ente/shared/electron/types';
import DownloadManager from 'services/download';
const redirectMap = new Map([
[REDIRECTS.ROADMAP, getRoadmapRedirectURL],
@ -232,6 +234,14 @@ export default function App(props: EnteAppProps) {
const initExport = async () => {
try {
addLogLine('init export');
const token = getToken();
if (!token) {
addLogLine(
'User not logged in, not starting export continuous sync job'
);
return;
}
await DownloadManager.init(APPS.PHOTOS, { token });
const exportSettings = exportService.getExportSettings();
if (!exportService.exportFolderExists(exportSettings?.folder)) {
return;

280
apps/photos/src/pages/gallery/index.tsx
View file

@ -97,6 +97,8 @@ import { EnteFile } from 'types/file';
import {
GalleryContextType,
SelectedState,
SetFilesDownloadProgressAttributes,
SetFilesDownloadProgressAttributesCreator,
UploadTypeSelectorIntent,
} from 'types/gallery';
import Collections from 'components/Collections';
@ -120,7 +122,6 @@ import GalleryEmptyState from 'components/GalleryEmptyState';
import AuthenticateUserModal from 'components/AuthenticateUserModal';
import useMemoSingleThreaded from '@ente/shared/hooks/useMemoSingleThreaded';
import { isArchivedFile } from 'utils/magicMetadata';
import { isSameDayAnyYear, isInsideLocationTag } from 'utils/search';
import { getSessionExpiredMessage } from 'utils/ui';
import { syncEntities } from 'services/entityService';
import { constructUserIDToEmailMap } from 'services/collectionService';
@ -131,6 +132,13 @@ import { ClipService } from 'services/clipService';
import isElectron from 'is-electron';
import downloadManager from 'services/download';
import { APPS } from '@ente/shared/apps/constants';
import {
FilesDownloadProgress,
FilesDownloadProgressAttributes,
} from 'components/FilesDownloadProgress';
import locationSearchService from 'services/locationSearchService';
import ComlinkSearchWorker from 'utils/comlink/ComlinkSearchWorker';
import useEffectSingleThreaded from '@ente/shared/hooks/useEffectSingleThreaded';
export const DeadCenter = styled('div')`
flex: 1;
@ -225,10 +233,11 @@ export default function Gallery() {
const syncInProgress = useRef(true);
const syncInterval = useRef<NodeJS.Timeout>();
const resync = useRef<{ force: boolean; silent: boolean }>();
const [deletedFileIds, setDeletedFileIds] = useState<Set<number>>(
// tempDeletedFileIds and tempHiddenFileIds are used to keep track of files that are deleted/hidden in the current session but not yet synced with the server.
const [tempDeletedFileIds, setTempDeletedFileIds] = useState<Set<number>>(
new Set<number>()
);
const [hiddenFileIds, setHiddenFileIds] = useState<Set<number>>(
const [tempHiddenFileIds, setTempHiddenFileIds] = useState<Set<number>>(
new Set<number>()
);
const { startLoading, finishLoading, setDialogMessage, ...appContext } =
@ -242,6 +251,9 @@ export default function Gallery() {
const [emailList, setEmailList] = useState<string[]>(null);
const [activeCollectionID, setActiveCollectionID] =
useState<number>(undefined);
const [hiddenFileIds, setHiddenFileIds] = useState<Set<number>>(
new Set<number>()
);
const [fixCreationTimeView, setFixCreationTimeView] = useState(false);
const [fixCreationTimeAttributes, setFixCreationTimeAttributes] =
useState<FixCreationTimeAttributes>(null);
@ -280,6 +292,11 @@ export default function Gallery() {
const [isInHiddenSection, setIsInHiddenSection] = useState(false);
const [
filesDownloadProgressAttributesList,
setFilesDownloadProgressAttributesList,
] = useState<FilesDownloadProgressAttributes[]>([]);
const openHiddenSection: GalleryContextType['openHiddenSection'] = (
callback
) => {
@ -341,6 +358,7 @@ export default function Gallery() {
setIsFirstLoad(false);
setJustSignedUp(false);
setIsFirstFetch(false);
locationSearchService.loadCities();
syncInterval.current = setInterval(() => {
syncWithRemote(false, true);
}, SYNC_INTERVAL_IN_MICROSECONDS);
@ -361,6 +379,14 @@ export default function Gallery() {
};
}, []);
useEffectSingleThreaded(
async ([files]: [files: EnteFile[]]) => {
const searchWorker = await ComlinkSearchWorker.getInstance();
await searchWorker.setFiles(files);
},
[files]
);
useEffect(() => {
if (!user || !files || !collections || !hiddenFiles || !trashedFiles) {
return;
@ -466,7 +492,9 @@ export default function Gallery() {
);
}, [collections, activeCollectionID]);
const filteredData = useMemoSingleThreaded((): EnteFile[] => {
const filteredData = useMemoSingleThreaded(async (): Promise<
EnteFile[]
> => {
if (
!files ||
!user ||
@ -480,117 +508,74 @@ export default function Gallery() {
if (activeCollectionID === TRASH_SECTION && !isInSearchMode) {
return getUniqueFiles([
...trashedFiles,
...files.filter((file) => deletedFileIds?.has(file.id)),
...files.filter((file) => tempDeletedFileIds?.has(file.id)),
]);
}
const filteredFiles = getUniqueFiles(
(isInHiddenSection ? hiddenFiles : files).filter((item) => {
if (deletedFileIds?.has(item.id)) {
return false;
}
const searchWorker = await ComlinkSearchWorker.getInstance();
if (!isInHiddenSection && hiddenFileIds?.has(item.id)) {
return false;
}
let filteredFiles: EnteFile[] = [];
if (isInSearchMode) {
filteredFiles = getUniqueFiles(await searchWorker.search(search));
} else {
filteredFiles = getUniqueFiles(
(isInHiddenSection ? hiddenFiles : files).filter((item) => {
if (tempDeletedFileIds?.has(item.id)) {
return false;
}
// SEARCH MODE
if (isInSearchMode) {
if (
search?.date &&
!isSameDayAnyYear(search.date)(
new Date(item.metadata.creationTime / 1000)
)
) {
if (!isInHiddenSection && tempHiddenFileIds?.has(item.id)) {
return false;
}
if (
search?.location &&
!isInsideLocationTag(
{
latitude: item.metadata.latitude,
longitude: item.metadata.longitude,
},
search.location
)
) {
return false;
}
if (
search?.person &&
search.person.files.indexOf(item.id) === -1
) {
return false;
}
if (
search?.thing &&
search.thing.files.indexOf(item.id) === -1
) {
return false;
}
if (
search?.text &&
search.text.files.indexOf(item.id) === -1
) {
return false;
}
if (search?.files && search.files.indexOf(item.id) === -1) {
return false;
}
if (
typeof search?.fileType !== 'undefined' &&
search.fileType !== item.metadata.fileType
) {
return false;
}
if (search?.clip && search.clip.has(item.id) === false) {
return false;
}
return true;
}
// archived collections files can only be seen in their respective collection
if (archivedCollections.has(item.collectionID)) {
// archived collections files can only be seen in their respective collection
if (archivedCollections.has(item.collectionID)) {
if (activeCollectionID === item.collectionID) {
return true;
} else {
return false;
}
}
// HIDDEN ITEMS SECTION - show all individual hidden files
if (
activeCollectionID === HIDDEN_ITEMS_SECTION &&
defaultHiddenCollectionIDs.has(item.collectionID)
) {
return true;
}
// Archived files can only be seen in archive section or their respective collection
if (isArchivedFile(item)) {
if (
activeCollectionID === ARCHIVE_SECTION ||
activeCollectionID === item.collectionID
) {
return true;
} else {
return false;
}
}
// ALL SECTION - show all files
if (activeCollectionID === ALL_SECTION) {
// show all files except the ones in hidden collections
if (hiddenFileIds.has(item.id)) {
return false;
} else {
return true;
}
}
// COLLECTION SECTION - show files in the active collection
if (activeCollectionID === item.collectionID) {
return true;
} else {
return false;
}
}
// HIDDEN ITEMS SECTION - show all individual hidden files
if (
activeCollectionID === HIDDEN_ITEMS_SECTION &&
defaultHiddenCollectionIDs.has(item.collectionID)
) {
return true;
}
// Archived files can only be seen in archive section or their respective collection
if (isArchivedFile(item)) {
if (
activeCollectionID === ARCHIVE_SECTION ||
activeCollectionID === item.collectionID
) {
return true;
} else {
return false;
}
}
// ALL SECTION - show all files
if (activeCollectionID === ALL_SECTION) {
return true;
}
// COLLECTION SECTION - show files in the active collection
if (activeCollectionID === item.collectionID) {
return true;
} else {
return false;
}
})
);
})
);
}
if (search?.clip) {
return filteredFiles.sort((a, b) => {
return search.clip.get(b.id) - search.clip.get(a.id);
@ -606,7 +591,8 @@ export default function Gallery() {
files,
trashedFiles,
hiddenFiles,
deletedFileIds,
tempDeletedFileIds,
tempHiddenFileIds,
hiddenFileIds,
search,
activeCollectionID,
@ -737,8 +723,8 @@ export default function Gallery() {
logError(e, 'syncWithRemote failed');
}
} finally {
setDeletedFileIds(new Set());
setHiddenFileIds(new Set());
setTempDeletedFileIds(new Set());
setTempHiddenFileIds(new Set());
!silent && finishLoading();
}
syncInProgress.current = false;
@ -783,6 +769,8 @@ export default function Gallery() {
const defaultHiddenCollectionIDs =
getDefaultHiddenCollectionIDs(hiddenCollections);
setDefaultHiddenCollectionIDs(defaultHiddenCollectionIDs);
const hiddenFileIds = new Set<number>(hiddenFiles.map((f) => f.id));
setHiddenFileIds(hiddenFileIds);
const collectionSummaries = getCollectionSummaries(
user,
collections,
@ -816,6 +804,39 @@ export default function Gallery() {
return <div />;
}
const setFilesDownloadProgressAttributesCreator: SetFilesDownloadProgressAttributesCreator =
(folderName, collectionID, isHidden) => {
const id = filesDownloadProgressAttributesList?.length ?? 0;
const updater: SetFilesDownloadProgressAttributes = (value) => {
setFilesDownloadProgressAttributesList((prev) => {
const attributes = prev?.find((attr) => attr.id === id);
const updatedAttributes =
typeof value === 'function'
? value(attributes)
: { ...attributes, ...value };
const updatedAttributesList = attributes
? prev.map((attr) =>
attr.id === id ? updatedAttributes : attr
)
: [...prev, updatedAttributes];
return updatedAttributesList;
});
};
updater({
id,
folderName,
collectionID,
isHidden,
canceller: null,
total: 0,
success: 0,
failed: 0,
downloadDirPath: null,
});
return updater;
};
const collectionOpsHelper =
(ops: COLLECTION_OPS_TYPE) => async (collection: Collection) => {
startLoading();
@ -836,13 +857,20 @@ export default function Gallery() {
selected.collectionID
);
}
if (selected?.ownCount === filteredData?.length) {
if (
ops === COLLECTION_OPS_TYPE.REMOVE ||
ops === COLLECTION_OPS_TYPE.RESTORE ||
ops === COLLECTION_OPS_TYPE.MOVE
) {
// redirect to all section when no items are left in the current collection.
setActiveCollectionID(ALL_SECTION);
} else if (ops === COLLECTION_OPS_TYPE.UNHIDE) {
exitHiddenSection();
}
}
clearSelection();
await syncWithRemote(false, true);
if (isInHiddenSection && ops === COLLECTION_OPS_TYPE.UNHIDE) {
exitHiddenSection();
}
setActiveCollectionID(collection.id);
} catch (e) {
logError(e, 'collection ops failed', { ops });
setDialogMessage({
@ -872,11 +900,20 @@ export default function Gallery() {
await handleFileOps(
ops,
toProcessFiles,
setDeletedFileIds,
setHiddenFileIds,
setFixCreationTimeAttributes
setTempDeletedFileIds,
setTempHiddenFileIds,
setFixCreationTimeAttributes,
setFilesDownloadProgressAttributesCreator
);
}
if (
selected?.ownCount === filteredData?.length &&
ops !== FILE_OPS_TYPE.ARCHIVE &&
ops !== FILE_OPS_TYPE.DOWNLOAD &&
ops !== FILE_OPS_TYPE.FIX_TIME
) {
setActiveCollectionID(ALL_SECTION);
}
clearSelection();
await syncWithRemote(false, true);
} catch (e) {
@ -1013,6 +1050,10 @@ export default function Gallery() {
attributes={collectionSelectorAttributes}
collections={collections}
/>
<FilesDownloadProgress
attributesList={filesDownloadProgressAttributesList}
setAttributesList={setFilesDownloadProgressAttributesList}
/>
<FixCreationTime
isOpen={fixCreationTimeView}
hide={() => setFixCreationTimeView(false)}
@ -1042,6 +1083,12 @@ export default function Gallery() {
hiddenCollectionSummaries={hiddenCollectionSummaries}
setCollectionNamerAttributes={setCollectionNamerAttributes}
setPhotoListHeader={setPhotoListHeader}
setFilesDownloadProgressAttributesCreator={
setFilesDownloadProgressAttributesCreator
}
filesDownloadProgressAttributesList={
filesDownloadProgressAttributesList
}
/>
<Uploader
@ -1098,8 +1145,8 @@ export default function Gallery() {
favItemIds={favItemIds}
setSelected={setSelected}
selected={selected}
deletedFileIds={deletedFileIds}
setDeletedFileIds={setDeletedFileIds}
tempDeletedFileIds={tempDeletedFileIds}
setTempDeletedFileIds={setTempDeletedFileIds}
setIsPhotoSwipeOpen={setIsPhotoSwipeOpen}
activeCollectionID={activeCollectionID}
enableDownload={true}
@ -1109,6 +1156,9 @@ export default function Gallery() {
files.length < 30 && !isInSearchMode
}
isInHiddenSection={isInHiddenSection}
setFilesDownloadProgressAttributesCreator={
setFilesDownloadProgressAttributesCreator
}
/>
)}
{selected.count > 0 &&

131
apps/photos/src/pages/shared-albums/index.tsx
View file

@ -16,7 +16,12 @@ import {
} from 'services/publicCollectionService';
import { Collection } from 'types/collection';
import { EnteFile } from 'types/file';
import { downloadFile, mergeMetadata, sortFiles } from 'utils/file';
import {
downloadSelectedFiles,
getSelectedFiles,
mergeMetadata,
sortFiles,
} from 'utils/file';
import { AppContext } from 'pages/_app';
import { PublicCollectionGalleryContext } from 'utils/publicCollectionGallery';
import { CustomError, parseSharingErrorCodes } from '@ente/shared/error';
@ -52,7 +57,12 @@ import UploadButton from 'components/Upload/UploadButton';
import bs58 from 'bs58';
import AddPhotoAlternateOutlined from '@mui/icons-material/AddPhotoAlternateOutlined';
import ComlinkCryptoWorker from '@ente/shared/crypto';
import { UploadTypeSelectorIntent } from 'types/gallery';
import {
SelectedState,
SetFilesDownloadProgressAttributes,
SetFilesDownloadProgressAttributesCreator,
UploadTypeSelectorIntent,
} from 'types/gallery';
import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';
import MoreHoriz from '@mui/icons-material/MoreHoriz';
import OverflowMenu from '@ente/shared/components/OverflowMenu/menu';
@ -60,6 +70,12 @@ import { OverflowMenuOption } from '@ente/shared/components/OverflowMenu/option'
import { ENTE_WEBSITE_LINK } from '@ente/shared/constants/urls';
import { APPS } from '@ente/shared/apps/constants';
import downloadManager from 'services/download';
import {
FilesDownloadProgress,
FilesDownloadProgressAttributes,
} from 'components/FilesDownloadProgress';
import { downloadCollectionFiles, isHiddenCollection } from 'utils/collection';
import SelectedFileOptions from 'components/pages/sharedAlbum/SelectedFileOptions';
export default function PublicCollectionGallery() {
const token = useRef<string>(null);
@ -86,6 +102,11 @@ export default function PublicCollectionGallery() {
const [uploadTypeSelectorView, setUploadTypeSelectorView] = useState(false);
const [blockingLoad, setBlockingLoad] = useState(false);
const [shouldDisableDropzone, setShouldDisableDropzone] = useState(false);
const [selected, setSelected] = useState<SelectedState>({
ownCount: 0,
count: 0,
collectionID: 0,
});
const {
getRootProps: getDragAndDropRootProps,
@ -111,6 +132,44 @@ export default function PublicCollectionGallery() {
directory: true,
});
const [
filesDownloadProgressAttributesList,
setFilesDownloadProgressAttributesList,
] = useState<FilesDownloadProgressAttributes[]>([]);
const setFilesDownloadProgressAttributesCreator: SetFilesDownloadProgressAttributesCreator =
(folderName, collectionID, isHidden) => {
const id = filesDownloadProgressAttributesList?.length ?? 0;
const updater: SetFilesDownloadProgressAttributes = (value) => {
setFilesDownloadProgressAttributesList((prev) => {
const attributes = prev?.find((attr) => attr.id === id);
const updatedAttributes =
typeof value === 'function'
? value(attributes)
: { ...attributes, ...value };
const updatedAttributesList = attributes
? prev.map((attr) =>
attr.id === id ? updatedAttributes : attr
)
: [...prev, updatedAttributes];
return updatedAttributesList;
});
};
updater({
id,
folderName,
collectionID,
isHidden,
canceller: null,
total: 0,
success: 0,
failed: 0,
downloadDirPath: null,
});
return updater;
};
const openUploader = () => {
setUploadTypeSelectorView(true);
};
@ -217,18 +276,24 @@ export default function PublicCollectionGallery() {
);
const downloadAllFiles = async () => {
if (!downloadEnabled) {
return;
}
appContext.startLoading();
for (const file of publicFiles) {
try {
await downloadFile(file);
} catch (e) {
// do nothing
try {
if (!downloadEnabled) {
return;
}
const setFilesDownloadProgressAttributes =
setFilesDownloadProgressAttributesCreator(
publicCollection.name,
publicCollection.id,
isHiddenCollection(publicCollection)
);
await downloadCollectionFiles(
publicCollection.name,
publicFiles,
setFilesDownloadProgressAttributes
);
} catch (e) {
logError(e, 'failed to downloads shared album all files');
}
appContext.finishLoading();
};
useEffect(() => {
@ -441,6 +506,30 @@ export default function PublicCollectionGallery() {
}
}
const clearSelection = () => {
if (!selected?.count) {
return;
}
setSelected({ ownCount: 0, count: 0, collectionID: 0 });
};
const downloadFilesHelper = async () => {
try {
const selectedFiles = getSelectedFiles(selected, publicFiles);
const setFilesDownloadProgressAttributes =
setFilesDownloadProgressAttributesCreator(
`${selectedFiles.length} ${t('FILES')}`
);
await downloadSelectedFiles(
selectedFiles,
setFilesDownloadProgressAttributes
);
clearSelection();
} catch (e) {
logError(e, 'failed to download selected files');
}
};
return (
<PublicCollectionGalleryContext.Provider
value={{
@ -468,12 +557,15 @@ export default function PublicCollectionGallery() {
page={PAGES.SHARED_ALBUMS}
files={publicFiles}
syncWithRemote={syncWithRemote}
setSelected={() => null}
selected={{ count: 0, collectionID: null, ownCount: 0 }}
setSelected={setSelected}
selected={selected}
activeCollectionID={ALL_SECTION}
enableDownload={downloadEnabled}
fileToCollectionsMap={null}
collectionNameMap={null}
setFilesDownloadProgressAttributesCreator={
setFilesDownloadProgressAttributesCreator
}
/>
{blockingLoad && (
<LoadingOverlay>
@ -498,6 +590,17 @@ export default function PublicCollectionGallery() {
UploadTypeSelectorIntent.collectPhotos
}
/>
<FilesDownloadProgress
attributesList={filesDownloadProgressAttributesList}
setAttributesList={setFilesDownloadProgressAttributesList}
/>
{selected.count > 0 && (
<SelectedFileOptions
downloadFilesHelper={downloadFilesHelper}
clearSelection={clearSelection}
count={selected.count}
/>
)}
</FullScreenDropZone>
</PublicCollectionGalleryContext.Provider>
);

128
apps/photos/src/services/clipService.ts
View file

@ -1,8 +1,4 @@
import {
putEmbedding,
getLatestEmbeddings,
getLocalEmbeddings,
} from './embeddingService';
import { putEmbedding, getLocalEmbeddings } from './embeddingService';
import { getAllLocalFiles, getLocalFiles } from './fileService';
import downloadManager from './download';
import { logError } from '@ente/shared/sentry';
@ -45,12 +41,22 @@ class ClipServiceImpl {
this.liveEmbeddingExtractionQueue = new PQueue({
concurrency: 1,
});
eventBus.on(Events.LOGOUT, this.logoutHandler, this);
}
isPlatformSupported = () => {
return isElectron() && !this.unsupportedPlatform;
};
private logoutHandler = async () => {
if (this.embeddingExtractionInProgress) {
this.embeddingExtractionInProgress.abort();
}
if (this.onFileUploadedHandler) {
await this.removeOnFileUploadListener();
}
};
setupOnFileUploadListener = async () => {
try {
if (this.unsupportedPlatform) {
@ -90,14 +96,18 @@ class ClipServiceImpl {
}
};
updateIndexStatus = async () => {
getIndexingStatus = async () => {
try {
addLogLine('loading local clip index status');
this.clipExtractionStatus = await getClipExtractionStatus();
this.onUpdateHandler(this.clipExtractionStatus);
addLogLine('loaded local clip index status');
if (
!this.clipExtractionStatus ||
(this.clipExtractionStatus.pending === 0 &&
this.clipExtractionStatus.indexed === 0)
) {
this.clipExtractionStatus = await getClipExtractionStatus();
}
return this.clipExtractionStatus;
} catch (e) {
logError(e, 'failed to load local clip index status');
logError(e, 'failed to get clip indexing status');
}
};
@ -106,7 +116,9 @@ class ClipServiceImpl {
handler(this.clipExtractionStatus);
};
scheduleImageEmbeddingExtraction = async () => {
scheduleImageEmbeddingExtraction = async (
model: Model = Model.ONNX_CLIP
) => {
try {
if (this.embeddingExtractionInProgress) {
addLogLine(
@ -122,7 +134,7 @@ class ClipServiceImpl {
const canceller = new AbortController();
this.embeddingExtractionInProgress = canceller;
try {
await this.runClipEmbeddingExtraction(canceller);
await this.runClipEmbeddingExtraction(canceller, model);
} finally {
this.embeddingExtractionInProgress = null;
if (!canceller.signal.aborted && this.reRunNeeded) {
@ -141,9 +153,12 @@ class ClipServiceImpl {
}
};
getTextEmbedding = async (text: string): Promise<Float32Array> => {
getTextEmbedding = async (
text: string,
model: Model = Model.ONNX_CLIP
): Promise<Float32Array> => {
try {
return ElectronAPIs.computeTextEmbedding(text);
return ElectronAPIs.computeTextEmbedding(model, text);
} catch (e) {
if (e?.message?.includes(CustomError.UNSUPPORTED_PLATFORM)) {
this.unsupportedPlatform = true;
@ -153,7 +168,10 @@ class ClipServiceImpl {
}
};
private runClipEmbeddingExtraction = async (canceller: AbortController) => {
private runClipEmbeddingExtraction = async (
canceller: AbortController,
model: Model
) => {
try {
if (this.unsupportedPlatform) {
addLogLine(
@ -166,7 +184,7 @@ class ClipServiceImpl {
return;
}
const localFiles = getPersonalFiles(await getAllLocalFiles(), user);
const existingEmbeddings = await getLatestClipImageEmbeddings();
const existingEmbeddings = await getLocalEmbeddings(model);
const pendingFiles = await getNonClipEmbeddingExtractedFiles(
localFiles,
existingEmbeddings
@ -191,11 +209,15 @@ class ClipServiceImpl {
throw Error(CustomError.REQUEST_CANCELLED);
}
const embeddingData =
await this.extractFileClipImageEmbedding(file);
await this.extractFileClipImageEmbedding(model, file);
addLogLine(
`successfully extracted clip embedding for file: ${file.metadata.title} fileID: ${file.id} embedding length: ${embeddingData?.length}`
);
await this.encryptAndUploadEmbedding(file, embeddingData);
await this.encryptAndUploadEmbedding(
model,
file,
embeddingData
);
this.onSuccessStatusUpdater();
addLogLine(
`successfully put clip embedding to server for file: ${file.metadata.title} fileID: ${file.id}`
@ -228,10 +250,13 @@ class ClipServiceImpl {
}
};
private async runLocalFileClipExtraction(arg: {
enteFile: EnteFile;
localFile: globalThis.File;
}) {
private async runLocalFileClipExtraction(
arg: {
enteFile: EnteFile;
localFile: globalThis.File;
},
model: Model = Model.ONNX_CLIP
) {
const { enteFile, localFile } = arg;
addLogLine(
`clip embedding extraction onFileUploadedHandler file: ${enteFile.metadata.title} fileID: ${enteFile.id}`,
@ -243,12 +268,27 @@ class ClipServiceImpl {
);
return;
}
const extension = enteFile.metadata.title.split('.').pop();
if (!extension || !['jpg', 'jpeg'].includes(extension)) {
addLogLine(
`skipping non jpg file for clip embedding extraction file: ${enteFile.metadata.title} fileID: ${enteFile.id}`
);
return;
}
addLogLine(
`queuing up for local clip embedding extraction for file: ${enteFile.metadata.title} fileID: ${enteFile.id}`
);
try {
await this.liveEmbeddingExtractionQueue.add(async () => {
const embedding = await this.extractLocalFileClipImageEmbedding(
model,
localFile
);
await this.encryptAndUploadEmbedding(enteFile, embedding);
await this.encryptAndUploadEmbedding(
model,
enteFile,
embedding
);
});
addLogLine(
`successfully extracted clip embedding for file: ${enteFile.metadata.title} fileID: ${enteFile.id}`
@ -258,15 +298,19 @@ class ClipServiceImpl {
}
}
private extractLocalFileClipImageEmbedding = async (localFile: File) => {
private extractLocalFileClipImageEmbedding = async (
model: Model,
localFile: File
) => {
const file = await localFile
.arrayBuffer()
.then((buffer) => new Uint8Array(buffer));
const embedding = await ElectronAPIs.computeImageEmbedding(file);
const embedding = await ElectronAPIs.computeImageEmbedding(model, file);
return embedding;
};
private encryptAndUploadEmbedding = async (
model: Model,
file: EnteFile,
embeddingData: Float32Array
) => {
@ -285,7 +329,7 @@ class ClipServiceImpl {
fileID: file.id,
encryptedEmbedding: encryptedEmbeddingData.encryptedData,
decryptionHeader: encryptedEmbeddingData.decryptionHeader,
model: Model.GGML_CLIP,
model,
});
};
@ -296,9 +340,15 @@ class ClipServiceImpl {
}
};
private extractFileClipImageEmbedding = async (file: EnteFile) => {
private extractFileClipImageEmbedding = async (
model: Model,
file: EnteFile
) => {
const thumb = await downloadManager.getThumbnail(file);
const embedding = await ElectronAPIs.computeImageEmbedding(thumb);
const embedding = await ElectronAPIs.computeImageEmbedding(
model,
thumb
);
return embedding;
};
@ -333,13 +383,6 @@ const getNonClipEmbeddingExtractedFiles = async (
});
};
export const getLocalClipImageEmbeddings = async () => {
const allEmbeddings = await getLocalEmbeddings();
return allEmbeddings.filter(
(embedding) => embedding.model === Model.GGML_CLIP
);
};
export const computeClipMatchScore = async (
imageEmbedding: Float32Array,
textEmbedding: Float32Array
@ -367,19 +410,14 @@ export const computeClipMatchScore = async (
return score;
};
const getLatestClipImageEmbeddings = async () => {
const allEmbeddings = await getLatestEmbeddings();
return allEmbeddings.filter(
(embedding) => embedding.model === Model.GGML_CLIP
);
};
const getClipExtractionStatus = async (): Promise<ClipExtractionStatus> => {
const getClipExtractionStatus = async (
model: Model = Model.ONNX_CLIP
): Promise<ClipExtractionStatus> => {
const user = getData(LS_KEYS.USER);
if (!user) {
return;
}
const allEmbeddings = await getLocalClipImageEmbeddings();
const allEmbeddings = await getLocalEmbeddings(model);
const localFiles = getPersonalFiles(await getLocalFiles(), user);
const pendingFiles = await getNonClipEmbeddingExtractedFiles(
localFiles,

8
apps/photos/src/services/deduplicationService.ts
View file

@ -26,7 +26,11 @@ export async function getDuplicates(
collectionNameMap: Map<number, string>
) {
try {
const dupes = await fetchDuplicateFileIDs();
const ascDupes = await fetchDuplicateFileIDs();
const descSortedDupes = ascDupes.sort((firstDupe, secondDupe) => {
return secondDupe.size - firstDupe.size;
});
const fileMap = new Map<number, EnteFile>();
for (const file of files) {
@ -35,7 +39,7 @@ export async function getDuplicates(
let result: Duplicate[] = [];
for (const dupe of dupes) {
for (const dupe of descSortedDupes) {
let duplicateFiles: EnteFile[] = [];
for (const fileID of dupe.fileIDs) {
if (fileMap.has(fileID)) {

19
apps/photos/src/services/download/index.ts
View file

@ -19,6 +19,7 @@ import { PhotosDownloadClient } from './clients/photos';
import { PublicAlbumsDownloadClient } from './clients/publicAlbums';
import isElectron from 'is-electron';
import { isInternalUser } from 'utils/user';
import { Events, eventBus } from '@ente/shared/events';
export type LivePhotoSourceURL = {
image: () => Promise<string>;
@ -89,12 +90,30 @@ class DownloadManagerImpl {
this.diskFileCache = isElectron() && (await openDiskFileCache());
this.cryptoWorker = await ComlinkCryptoWorker.getInstance();
this.ready = true;
eventBus.on(Events.LOGOUT, this.logoutHandler.bind(this), this);
} catch (e) {
logError(e, 'DownloadManager init failed');
throw e;
}
}
private async logoutHandler() {
try {
addLogLine('downloadManger logoutHandler started');
this.ready = false;
this.cryptoWorker = null;
this.downloadClient = null;
this.fileObjectURLPromises.clear();
this.fileConversionPromises.clear();
this.thumbnailObjectURLPromises.clear();
this.fileDownloadProgress.clear();
this.progressUpdater = () => {};
addLogLine('downloadManager logoutHandler completed');
} catch (e) {
logError(e, 'downloadManager logoutHandler failed');
}
}
updateToken(token: string, passwordToken?: string) {
this.downloadClient.updateTokens(token, passwordToken);
}

188
apps/photos/src/services/embeddingService.ts
View file

@ -2,6 +2,7 @@ import {
Embedding,
EncryptedEmbedding,
GetEmbeddingDiffResponse,
Model,
PutEmbeddingRequest,
} from 'types/embedding';
import ComlinkCryptoWorker from '@ente/shared/crypto';
@ -16,105 +17,135 @@ import { getLatestVersionEmbeddings } from 'utils/embedding';
import { getLocalTrashedFiles } from './trashService';
import { getLocalCollections } from './collectionService';
import { CustomError } from '@ente/shared/error';
import { EnteFile } from 'types/file';
const ENDPOINT = getEndpoint();
const DIFF_LIMIT = 500;
const EMBEDDINGS_TABLE = 'embeddings';
const EMBEDDINGS_TABLE_V1 = 'embeddings';
const EMBEDDINGS_TABLE = 'embeddings_v2';
const EMBEDDING_SYNC_TIME_TABLE = 'embedding_sync_time';
export const getLocalEmbeddings = async () => {
const embeddings: Array<Embedding> =
(await localForage.getItem<Embedding[]>(EMBEDDINGS_TABLE)) || [];
export const getAllLocalEmbeddings = async () => {
const embeddings: Array<Embedding> = await localForage.getItem<Embedding[]>(
EMBEDDINGS_TABLE
);
if (!embeddings) {
await localForage.removeItem(EMBEDDINGS_TABLE_V1);
await localForage.removeItem(EMBEDDING_SYNC_TIME_TABLE);
await localForage.setItem(EMBEDDINGS_TABLE, []);
return [];
}
return embeddings;
};
const getEmbeddingSyncTime = async () => {
return (await localForage.getItem<number>(EMBEDDING_SYNC_TIME_TABLE)) ?? 0;
export const getLocalEmbeddings = async (model: Model) => {
const embeddings = await getAllLocalEmbeddings();
return embeddings.filter((embedding) => embedding.model === model);
};
export const getLatestEmbeddings = async () => {
await syncEmbeddings();
const embeddings = await getLocalEmbeddings();
return embeddings;
const getModelEmbeddingSyncTime = async (model: Model) => {
return (
(await localForage.getItem<number>(
`${model}-${EMBEDDING_SYNC_TIME_TABLE}`
)) ?? 0
);
};
export const syncEmbeddings = async () => {
const setModelEmbeddingSyncTime = async (model: Model, time: number) => {
await localForage.setItem(`${model}-${EMBEDDING_SYNC_TIME_TABLE}`, time);
};
export const syncEmbeddings = async (models: Model[] = [Model.ONNX_CLIP]) => {
try {
let embeddings = await getLocalEmbeddings();
let allEmbeddings = await getAllLocalEmbeddings();
const localFiles = await getAllLocalFiles();
const hiddenAlbums = await getLocalCollections('hidden');
const localTrashFiles = await getLocalTrashedFiles();
const fileIdToKeyMap = new Map<number, string>();
[...localFiles, ...localTrashFiles].forEach((file) => {
const allLocalFiles = [...localFiles, ...localTrashFiles];
allLocalFiles.forEach((file) => {
fileIdToKeyMap.set(file.id, file.key);
});
addLogLine(`Syncing embeddings localCount: ${embeddings.length}`);
let sinceTime = await getEmbeddingSyncTime();
addLogLine(`Syncing embeddings sinceTime: ${sinceTime}`);
let response: GetEmbeddingDiffResponse;
do {
response = await getEmbeddingsDiff(sinceTime);
if (!response.diff?.length) {
return;
}
const newEmbeddings = await Promise.all(
response.diff.map(async (embedding) => {
try {
const {
encryptedEmbedding,
decryptionHeader,
...rest
} = embedding;
const worker = await ComlinkCryptoWorker.getInstance();
const fileKey = fileIdToKeyMap.get(embedding.fileID);
if (!fileKey) {
throw Error(CustomError.FILE_NOT_FOUND);
}
const decryptedData = await worker.decryptEmbedding(
encryptedEmbedding,
decryptionHeader,
fileIdToKeyMap.get(embedding.fileID)
);
return {
...rest,
embedding: decryptedData,
} as Embedding;
} catch (e) {
let info: Record<string, unknown>;
if (e.message === CustomError.FILE_NOT_FOUND) {
const hasHiddenAlbums = hiddenAlbums?.length > 0;
info = {
hasHiddenAlbums,
};
}
logError(e, 'decryptEmbedding failed for file', info);
}
})
);
embeddings = getLatestVersionEmbeddings([
...embeddings,
...newEmbeddings,
]);
if (response.diff.length) {
sinceTime = response.diff.slice(-1)[0].updatedAt;
}
await localForage.setItem(EMBEDDINGS_TABLE, embeddings);
await localForage.setItem(EMBEDDING_SYNC_TIME_TABLE, sinceTime);
await cleanupDeletedEmbeddings(allLocalFiles, allEmbeddings);
addLogLine(`Syncing embeddings localCount: ${allEmbeddings.length}`);
for (const model of models) {
let modelLastSinceTime = await getModelEmbeddingSyncTime(model);
addLogLine(
`Syncing embeddings syncedEmbeddingsCount: ${newEmbeddings.length}`
`Syncing ${model} model's embeddings sinceTime: ${modelLastSinceTime}`
);
} while (response.diff.length === DIFF_LIMIT);
void cleanupDeletedEmbeddings();
let response: GetEmbeddingDiffResponse;
do {
response = await getEmbeddingsDiff(modelLastSinceTime, model);
if (!response.diff?.length) {
return;
}
const newEmbeddings = await Promise.all(
response.diff.map(async (embedding) => {
try {
const {
encryptedEmbedding,
decryptionHeader,
...rest
} = embedding;
const worker =
await ComlinkCryptoWorker.getInstance();
const fileKey = fileIdToKeyMap.get(
embedding.fileID
);
if (!fileKey) {
throw Error(CustomError.FILE_NOT_FOUND);
}
const decryptedData = await worker.decryptEmbedding(
encryptedEmbedding,
decryptionHeader,
fileIdToKeyMap.get(embedding.fileID)
);
return {
...rest,
embedding: decryptedData,
} as Embedding;
} catch (e) {
let info: Record<string, unknown>;
if (e.message === CustomError.FILE_NOT_FOUND) {
const hasHiddenAlbums =
hiddenAlbums?.length > 0;
info = {
hasHiddenAlbums,
};
}
logError(
e,
'decryptEmbedding failed for file',
info
);
}
})
);
allEmbeddings = getLatestVersionEmbeddings([
...allEmbeddings,
...newEmbeddings,
]);
if (response.diff.length) {
modelLastSinceTime = response.diff.slice(-1)[0].updatedAt;
}
await localForage.setItem(EMBEDDINGS_TABLE, allEmbeddings);
await setModelEmbeddingSyncTime(model, modelLastSinceTime);
addLogLine(
`Syncing embeddings syncedEmbeddingsCount: ${allEmbeddings.length}`
);
} while (response.diff.length === DIFF_LIMIT);
}
} catch (e) {
logError(e, 'Sync embeddings failed');
}
};
export const getEmbeddingsDiff = async (
sinceTime: number
sinceTime: number,
model: Model
): Promise<GetEmbeddingDiffResponse> => {
try {
const token = getToken();
@ -126,6 +157,7 @@ export const getEmbeddingsDiff = async (
{
sinceTime,
limit: DIFF_LIMIT,
model,
},
{
'X-Auth-Token': token,
@ -161,21 +193,21 @@ export const putEmbedding = async (
}
};
export const cleanupDeletedEmbeddings = async () => {
const files = await getAllLocalFiles();
const trashedFiles = await getLocalTrashedFiles();
export const cleanupDeletedEmbeddings = async (
allLocalFiles: EnteFile[],
allLocalEmbeddings: Embedding[]
) => {
const activeFileIds = new Set<number>();
[...files, ...trashedFiles].forEach((file) => {
allLocalFiles.forEach((file) => {
activeFileIds.add(file.id);
});
const embeddings = await getLocalEmbeddings();
const remainingEmbeddings = embeddings.filter((embedding) =>
const remainingEmbeddings = allLocalEmbeddings.filter((embedding) =>
activeFileIds.has(embedding.fileID)
);
if (embeddings.length !== remainingEmbeddings.length) {
if (allLocalEmbeddings.length !== remainingEmbeddings.length) {
addLogLine(
`cleanupDeletedEmbeddings embeddingsCount: ${embeddings.length} remainingEmbeddingsCount: ${remainingEmbeddings.length}`
`cleanupDeletedEmbeddings embeddingsCount: ${allLocalEmbeddings.length} remainingEmbeddingsCount: ${remainingEmbeddings.length}`
);
await localForage.setItem(EMBEDDINGS_TABLE, remainingEmbeddings);
}

97
apps/photos/src/services/locationSearchService.ts Normal file
View file

@ -0,0 +1,97 @@
import { CITIES_URL } from '@ente/shared/constants/urls';
import { logError } from '@ente/shared/sentry';
import { LocationTagData } from 'types/entity';
import { Location } from 'types/upload';
export interface City {
city: string;
country: string;
lat: number;
lng: number;
}
const DEFAULT_CITY_RADIUS = 10;
const KMS_PER_DEGREE = 111.16;
class LocationSearchService {
private cities: Array<City> = [];
private citiesPromise: Promise<void>;
async loadCities() {
try {
if (this.citiesPromise) {
return;
}
this.citiesPromise = fetch(CITIES_URL).then((response) => {
return response.json().then((data) => {
this.cities = data['data'];
});
});
await this.citiesPromise;
} catch (e) {
logError(e, 'LocationSearchService loadCities failed');
this.citiesPromise = null;
}
}
async searchCities(searchTerm: string) {
try {
if (!this.citiesPromise) {
this.loadCities();
}
await this.citiesPromise;
return this.cities.filter((city) => {
return city.city
.toLowerCase()
.startsWith(searchTerm.toLowerCase());
});
} catch (e) {
logError(e, 'LocationSearchService searchCities failed');
throw e;
}
}
}
export default new LocationSearchService();
export function isInsideLocationTag(
location: Location,
locationTag: LocationTagData
) {
return isLocationCloseToPoint(
location,
locationTag.centerPoint,
locationTag.radius
);
}
export function isInsideCity(location: Location, city: City) {
return isLocationCloseToPoint(
{ latitude: city.lat, longitude: city.lng },
location,
DEFAULT_CITY_RADIUS
);
}
function isLocationCloseToPoint(
centerPoint: Location,
location: Location,
radius: number
) {
const a = (radius * _scaleFactor(centerPoint.latitude)) / KMS_PER_DEGREE;
const b = radius / KMS_PER_DEGREE;
const x = centerPoint.latitude - location.latitude;
const y = centerPoint.longitude - location.longitude;
if ((x * x) / (a * a) + (y * y) / (b * b) <= 1) {
return true;
}
return false;
}
///The area bounded by the location tag becomes more elliptical with increase
///in the magnitude of the latitude on the caritesian plane. When latitude is
///0 degrees, the ellipse is a circle with a = b = r. When latitude incrases,
///the major axis (a) has to be scaled by the secant of the latitude.
function _scaleFactor(lat: number) {
return 1 / Math.cos(lat * (Math.PI / 180));
}

195
apps/photos/src/services/searchService.ts
View file

@ -16,33 +16,29 @@ import {
ClipSearchScores,
} from 'types/search';
import ObjectService from './machineLearning/objectService';
import {
getFormattedDate,
isInsideLocationTag,
isSameDayAnyYear,
} from 'utils/search';
import { getFormattedDate } from 'utils/search';
import { Person, Thing } from 'types/machineLearning';
import { getUniqueFiles } from 'utils/file';
import { getLatestEntities } from './entityService';
import { LocationTag, LocationTagData, EntityType } from 'types/entity';
import { addLogLine } from '@ente/shared/logging';
import { FILE_TYPE } from 'constants/file';
import {
ClipService,
computeClipMatchScore,
getLocalClipImageEmbeddings,
} from './clipService';
import { ClipService, computeClipMatchScore } from './clipService';
import { CustomError } from '@ente/shared/error';
import { Model } from 'types/embedding';
import { getLocalEmbeddings } from './embeddingService';
import locationSearchService, { City } from './locationSearchService';
import ComlinkSearchWorker from 'utils/comlink/ComlinkSearchWorker';
const DIGITS = new Set(['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']);
const CLIP_SCORE_THRESHOLD = 0.23;
export const getDefaultOptions = async (files: EnteFile[]) => {
export const getDefaultOptions = async () => {
return [
await getIndexStatusSuggestion(),
...convertSuggestionsToOptions(await getAllPeopleSuggestion(), files),
];
...(await convertSuggestionsToOptions(await getAllPeopleSuggestion())),
].filter((t) => !!t);
};
export const getAutoCompleteSuggestions =
@ -62,47 +58,42 @@ export const getAutoCompleteSuggestions =
...getCollectionSuggestion(searchPhrase, collections),
getFileNameSuggestion(searchPhrase, files),
getFileCaptionSuggestion(searchPhrase, files),
...(await getLocationTagSuggestions(searchPhrase)),
...(await getLocationSuggestions(searchPhrase)),
...(await getThingSuggestion(searchPhrase)),
].filter((suggestion) => !!suggestion);
return convertSuggestionsToOptions(suggestions, files);
return convertSuggestionsToOptions(suggestions);
} catch (e) {
logError(e, 'getAutoCompleteSuggestions failed');
return [];
}
};
function convertSuggestionsToOptions(
suggestions: Suggestion[],
files: EnteFile[]
) {
const previewImageAppendedOptions: SearchOption[] = suggestions
.map((suggestion) => ({
suggestion,
searchQuery: convertSuggestionToSearchQuery(suggestion),
}))
.map(({ suggestion, searchQuery }) => {
const resultFiles = getUniqueFiles(
files.filter((file) => isSearchedFile(file, searchQuery))
);
if (searchQuery?.clip) {
resultFiles.sort((a, b) => {
const aScore = searchQuery.clip.get(a.id);
const bScore = searchQuery.clip.get(b.id);
return bScore - aScore;
});
}
return {
async function convertSuggestionsToOptions(
suggestions: Suggestion[]
): Promise<SearchOption[]> {
const searchWorker = await ComlinkSearchWorker.getInstance();
const previewImageAppendedOptions: SearchOption[] = [];
for (const suggestion of suggestions) {
const searchQuery = convertSuggestionToSearchQuery(suggestion);
const resultFiles = getUniqueFiles(
await searchWorker.search(searchQuery)
);
if (searchQuery?.clip) {
resultFiles.sort((a, b) => {
const aScore = searchQuery.clip.get(a.id);
const bScore = searchQuery.clip.get(b.id);
return bScore - aScore;
});
}
if (resultFiles.length) {
previewImageAppendedOptions.push({
...suggestion,
fileCount: resultFiles.length,
previewFiles: resultFiles.slice(0, 3),
};
})
.filter((option) => option.fileCount);
});
}
}
return previewImageAppendedOptions;
}
function getFileTypeSuggestion(searchPhrase: string): Suggestion[] {
@ -190,28 +181,32 @@ export async function getAllPeopleSuggestion(): Promise<Array<Suggestion>> {
}
export async function getIndexStatusSuggestion(): Promise<Suggestion> {
const config = await getMLSyncConfig();
const indexStatus = await mlIDbStorage.getIndexStatus(config.mlVersion);
try {
const config = await getMLSyncConfig();
const indexStatus = await mlIDbStorage.getIndexStatus(config.mlVersion);
let label;
if (!indexStatus.localFilesSynced) {
label = t('INDEXING_SCHEDULED');
} else if (indexStatus.outOfSyncFilesExists) {
label = t('ANALYZING_PHOTOS', {
indexStatus,
});
} else if (!indexStatus.peopleIndexSynced) {
label = t('INDEXING_PEOPLE', { indexStatus });
} else {
label = t('INDEXING_DONE', { indexStatus });
let label;
if (!indexStatus.localFilesSynced) {
label = t('INDEXING_SCHEDULED');
} else if (indexStatus.outOfSyncFilesExists) {
label = t('ANALYZING_PHOTOS', {
indexStatus,
});
} else if (!indexStatus.peopleIndexSynced) {
label = t('INDEXING_PEOPLE', { indexStatus });
} else {
label = t('INDEXING_DONE', { indexStatus });
}
return {
label,
type: SuggestionType.INDEX_STATUS,
value: indexStatus,
hide: true,
};
} catch (e) {
logError(e, 'getIndexStatusSuggestion failed');
}
return {
label,
type: SuggestionType.INDEX_STATUS,
value: indexStatus,
hide: true,
};
}
function getDateSuggestion(searchPhrase: string): Suggestion[] {
@ -264,10 +259,9 @@ function getFileCaptionSuggestion(
};
}
async function getLocationTagSuggestions(searchPhrase: string) {
const searchResults = await searchLocationTag(searchPhrase);
return searchResults.map(
async function getLocationSuggestions(searchPhrase: string) {
const locationTagResults = await searchLocationTag(searchPhrase);
const locationTagSuggestions = locationTagResults.map(
(locationTag) =>
({
type: SuggestionType.LOCATION,
@ -275,6 +269,28 @@ async function getLocationTagSuggestions(searchPhrase: string) {
label: locationTag.data.name,
} as Suggestion)
);
const locationTagNames = new Set(
locationTagSuggestions.map((result) => result.label)
);
const citySearchResults = await locationSearchService.searchCities(
searchPhrase
);
const nonConflictingCityResult = citySearchResults.filter(
(city) => !locationTagNames.has(city.city)
);
const citySearchSuggestions = nonConflictingCityResult.map(
(city) =>
({
type: SuggestionType.CITY,
value: city,
label: city.city,
} as Suggestion)
);
return [...locationTagSuggestions, ...citySearchSuggestions];
}
async function getThingSuggestion(searchPhrase: string): Promise<Suggestion[]> {
@ -383,7 +399,7 @@ async function searchThing(searchPhrase: string) {
}
async function searchClip(searchPhrase: string): Promise<ClipSearchScores> {
const imageEmbeddings = await getLocalClipImageEmbeddings();
const imageEmbeddings = await getLocalEmbeddings(Model.ONNX_CLIP);
const textEmbedding = await ClipService.getTextEmbedding(searchPhrase);
const clipSearchResult = new Map<number, number>(
(
@ -404,48 +420,6 @@ async function searchClip(searchPhrase: string): Promise<ClipSearchScores> {
return clipSearchResult;
}
function isSearchedFile(file: EnteFile, search: Search) {
if (search?.collection) {
return search.collection === file.collectionID;
}
if (search?.date) {
return isSameDayAnyYear(search.date)(
new Date(file.metadata.creationTime / 1000)
);
}
if (search?.location) {
return isInsideLocationTag(
{
latitude: file.metadata.latitude,
longitude: file.metadata.longitude,
},
search.location
);
}
if (search?.files) {
return search.files.indexOf(file.id) !== -1;
}
if (search?.person) {
return search.person.files.indexOf(file.id) !== -1;
}
if (search?.thing) {
return search.thing.files.indexOf(file.id) !== -1;
}
if (search?.text) {
return search.text.files.indexOf(file.id) !== -1;
}
if (typeof search?.fileType !== 'undefined') {
return search.fileType === file.metadata.fileType;
}
if (typeof search?.clip !== 'undefined') {
return search.clip.has(file.id);
}
return false;
}
function convertSuggestionToSearchQuery(option: Suggestion): Search {
switch (option.type) {
case SuggestionType.DATE:
@ -458,6 +432,9 @@ function convertSuggestionToSearchQuery(option: Suggestion): Search {
location: option.value as LocationTagData,
};
case SuggestionType.CITY:
return { city: option.value as City };
case SuggestionType.COLLECTION:
return { collection: option.value as number };

4
apps/photos/src/services/upload/uploadManager.ts
View file

@ -361,7 +361,9 @@ class UploadManager {
try {
eventBus.emit(Events.FILE_UPLOADED, {
enteFile: decryptedFile,
localFile: fileWithCollection.file,
localFile:
fileWithCollection.file ??
fileWithCollection.livePhotoAssets.image,
});
} catch (e) {
logError(e, 'Error in fileUploaded handlers');

3
apps/photos/src/styles/search.ts
View file

@ -49,11 +49,10 @@ export const SelectStyles = {
...style,
display: 'none',
}),
singleValue: (style, state) => ({
singleValue: (style) => ({
...style,
backgroundColor: 'transparent',
color: '#d1d1d1',
display: state.selectProps.menuIsOpen ? 'none' : 'block',
marginLeft: '36px',
}),
placeholder: (style) => ({

1
apps/photos/src/types/embedding.tsx
View file

@ -1,5 +1,6 @@
export enum Model {
GGML_CLIP = 'ggml-clip',
ONNX_CLIP = 'onnx-clip',
}
export interface EncryptedEmbedding {

18
apps/photos/src/types/gallery/index.ts
View file

@ -1,4 +1,4 @@
import { CollectionDownloadProgressAttributes } from 'components/Collections/CollectionDownloadProgress';
import { FilesDownloadProgressAttributes } from 'components/FilesDownloadProgress';
import { CollectionSelectorAttributes } from 'components/Collections/CollectionSelector';
import { TimeStampListItem } from 'components/PhotoList';
import { Collection } from 'types/collection';
@ -17,9 +17,19 @@ export type SetLoading = React.Dispatch<React.SetStateAction<boolean>>;
export type SetCollectionSelectorAttributes = React.Dispatch<
React.SetStateAction<CollectionSelectorAttributes>
>;
export type SetCollectionDownloadProgressAttributes = React.Dispatch<
React.SetStateAction<CollectionDownloadProgressAttributes>
>;
export type SetFilesDownloadProgressAttributes = (
value:
| Partial<FilesDownloadProgressAttributes>
| ((
prev: FilesDownloadProgressAttributes
) => FilesDownloadProgressAttributes)
) => void;
export type SetFilesDownloadProgressAttributesCreator = (
folderName: string,
collectionID?: number,
isHidden?: boolean
) => SetFilesDownloadProgressAttributes;
export type MergedSourceURL = {
original: string;

4
apps/photos/src/types/search/index.ts
View file

@ -3,6 +3,7 @@ import { IndexStatus } from 'types/machineLearning/ui';
import { EnteFile } from 'types/file';
import { LocationTagData } from 'types/entity';
import { FILE_TYPE } from 'constants/file';
import { City } from 'services/locationSearchService';
export enum SuggestionType {
DATE = 'DATE',
@ -16,6 +17,7 @@ export enum SuggestionType {
FILE_CAPTION = 'FILE_CAPTION',
FILE_TYPE = 'FILE_TYPE',
CLIP = 'CLIP',
CITY = 'CITY',
}
export interface DateValue {
@ -35,6 +37,7 @@ export interface Suggestion {
| Thing
| WordGroup
| LocationTagData
| City
| FILE_TYPE
| ClipSearchScores;
hide?: boolean;
@ -43,6 +46,7 @@ export interface Suggestion {
export type Search = {
date?: DateValue;
location?: LocationTagData;
city?: City;
collection?: number;
files?: number[];
person?: Person;

85
apps/photos/src/utils/collection/index.ts
View file

@ -12,7 +12,7 @@ import {
updatePublicCollectionMagicMetadata,
updateSharedCollectionMagicMetadata,
} from 'services/collectionService';
import { downloadFiles, downloadFilesDesktop } from 'utils/file';
import { downloadFilesWithProgress } from 'utils/file';
import { getAllLocalFiles, getLocalFiles } from 'services/fileService';
import { EnteFile } from 'types/file';
import { CustomError } from '@ente/shared/error';
@ -34,7 +34,6 @@ import {
SYSTEM_COLLECTION_TYPES,
MOVE_TO_NOT_ALLOWED_COLLECTION,
ADD_TO_NOT_ALLOWED_COLLECTION,
HIDDEN_ITEMS_SECTION,
DEFAULT_HIDDEN_COLLECTION_USER_FACING_NAME,
} from 'constants/collection';
import { getUnixTimeInMicroSecondsWithDelta } from '@ente/shared/time';
@ -44,14 +43,14 @@ import { getAlbumsURL } from '@ente/shared/network/api';
import bs58 from 'bs58';
import { t } from 'i18next';
import isElectron from 'is-electron';
import { SetCollectionDownloadProgressAttributes } from 'types/gallery';
import { SetFilesDownloadProgressAttributes } from 'types/gallery';
import ElectronAPIs from '@ente/shared/electron';
import {
getCollectionExportPath,
getUniqueCollectionExportName,
} from 'utils/export';
import exportService from 'services/export';
import { CollectionDownloadProgressAttributes } from 'components/Collections/CollectionDownloadProgress';
import { addLogLine } from '@ente/shared/logging';
export enum COLLECTION_OPS_TYPE {
ADD,
@ -100,7 +99,7 @@ export function getSelectedCollection(
export async function downloadCollectionHelper(
collectionID: number,
setCollectionDownloadProgressAttributes: SetCollectionDownloadProgressAttributes
setFilesDownloadProgressAttributes: SetFilesDownloadProgressAttributes
) {
try {
const allFiles = await getAllLocalFiles();
@ -116,10 +115,8 @@ export async function downloadCollectionHelper(
}
await downloadCollectionFiles(
collection.name,
collection.id,
isHiddenCollection(collection),
collectionFiles,
setCollectionDownloadProgressAttributes
setFilesDownloadProgressAttributes
);
} catch (e) {
logError(e, 'download collection failed ');
@ -127,7 +124,7 @@ export async function downloadCollectionHelper(
}
export async function downloadDefaultHiddenCollectionHelper(
setCollectionDownloadProgressAttributes: SetCollectionDownloadProgressAttributes
setFilesDownloadProgressAttributes: SetFilesDownloadProgressAttributes
) {
try {
const hiddenCollections = await getLocalCollections('hidden');
@ -139,78 +136,38 @@ export async function downloadDefaultHiddenCollectionHelper(
);
await downloadCollectionFiles(
DEFAULT_HIDDEN_COLLECTION_USER_FACING_NAME,
HIDDEN_ITEMS_SECTION,
true,
defaultHiddenCollectionFiles,
setCollectionDownloadProgressAttributes
setFilesDownloadProgressAttributes
);
} catch (e) {
logError(e, 'download hidden files failed ');
}
}
async function downloadCollectionFiles(
export async function downloadCollectionFiles(
collectionName: string,
collectionID: number,
isHidden: boolean,
collectionFiles: EnteFile[],
setCollectionDownloadProgressAttributes: SetCollectionDownloadProgressAttributes
setFilesDownloadProgressAttributes: SetFilesDownloadProgressAttributes
) {
if (!collectionFiles.length) {
return;
}
const canceller = new AbortController();
const increaseSuccess = () => {
if (canceller.signal.aborted) return;
setCollectionDownloadProgressAttributes((prev) => ({
...prev,
success: prev.success + 1,
}));
};
const increaseFailed = () => {
if (canceller.signal.aborted) return;
setCollectionDownloadProgressAttributes((prev) => ({
...prev,
failed: prev.failed + 1,
}));
};
const isCancelled = () => canceller.signal.aborted;
const initialProgressAttributes: CollectionDownloadProgressAttributes = {
collectionName,
collectionID,
isHidden,
canceller,
total: collectionFiles.length,
success: 0,
failed: 0,
downloadDirPath: null,
};
let downloadDirPath: string;
if (isElectron()) {
const selectedDir = await ElectronAPIs.selectDirectory();
if (!selectedDir) {
return;
}
const downloadDirPath = await createCollectionDownloadFolder(
downloadDirPath = await createCollectionDownloadFolder(
selectedDir,
collectionName
);
setCollectionDownloadProgressAttributes({
...initialProgressAttributes,
downloadDirPath,
});
await downloadFilesDesktop(
collectionFiles,
{ increaseSuccess, increaseFailed, isCancelled },
downloadDirPath
);
} else {
setCollectionDownloadProgressAttributes(initialProgressAttributes);
await downloadFiles(collectionFiles, {
increaseSuccess,
increaseFailed,
isCancelled,
});
}
await downloadFilesWithProgress(
collectionFiles,
downloadDirPath,
setFilesDownloadProgressAttributes
);
}
async function createCollectionDownloadFolder(
@ -521,7 +478,8 @@ export function isValidReplacementAlbum(
return (
collection.name === wantedCollectionName &&
(collection.type === CollectionType.album ||
collection.type === CollectionType.folder) &&
collection.type === CollectionType.folder ||
collection.type === CollectionType.uncategorized) &&
!isHiddenCollection(collection) &&
!isQuickLinkCollection(collection) &&
!isIncomingShare(collection, user)
@ -610,8 +568,13 @@ export const getOrCreateAlbum = async (
}
for (const collection of existingCollections) {
if (isValidReplacementAlbum(collection, user, albumName)) {
addLogLine(
`Found existing album ${albumName} with id ${collection.id}`
);
return collection;
}
}
return createAlbum(albumName);
const album = await createAlbum(albumName);
addLogLine(`Created new album ${albumName} with id ${album.id}`);
return album;
};

30
apps/photos/src/utils/comlink/ComlinkSearchWorker.ts Normal file
View file

@ -0,0 +1,30 @@
import { Remote } from 'comlink';
import { runningInBrowser } from 'utils/common';
import { ComlinkWorker } from '@ente/shared/worker/comlinkWorker';
import { DedicatedSearchWorker } from 'worker/search.worker';
class ComlinkSearchWorker {
private comlinkWorkerInstance: Remote<DedicatedSearchWorker>;
async getInstance() {
if (!this.comlinkWorkerInstance) {
this.comlinkWorkerInstance = await getDedicatedSearchWorker()
.remote;
}
return this.comlinkWorkerInstance;
}
}
export const getDedicatedSearchWorker = () => {
if (runningInBrowser()) {
const cryptoComlinkWorker = new ComlinkWorker<
typeof DedicatedSearchWorker
>(
'ente-search-worker',
new Worker(new URL('worker/search.worker.ts', import.meta.url))
);
return cryptoComlinkWorker;
}
};
export default new ComlinkSearchWorker();

141
apps/photos/src/utils/file/index.ts
View file

@ -1,4 +1,8 @@
import { SelectedState } from 'types/gallery';
import {
SelectedState,
SetFilesDownloadProgressAttributes,
SetFilesDownloadProgressAttributesCreator,
} from 'types/gallery';
import {
EnteFile,
EncryptedEnteFile,
@ -52,6 +56,7 @@ import { getFileExportPath, getUniqueFileExportName } from 'utils/export';
import imageProcessor from 'services/imageProcessor';
import ElectronAPIs from '@ente/shared/electron';
import { downloadUsingAnchor } from '@ente/shared/utils';
import { t } from 'i18next';
const WAIT_TIME_IMAGE_CONVERSION = 30 * 1000;
@ -625,9 +630,96 @@ export function getUniqueFiles(files: EnteFile[]) {
return uniqueFiles;
}
export async function downloadFilesWithProgress(
files: EnteFile[],
downloadDirPath: string,
setFilesDownloadProgressAttributes: SetFilesDownloadProgressAttributes
) {
if (!files.length) {
return;
}
const canceller = new AbortController();
const increaseSuccess = () => {
if (canceller.signal.aborted) return;
setFilesDownloadProgressAttributes((prev) => ({
...prev,
success: prev.success + 1,
}));
};
const increaseFailed = () => {
if (canceller.signal.aborted) return;
setFilesDownloadProgressAttributes((prev) => ({
...prev,
failed: prev.failed + 1,
}));
};
const isCancelled = () => canceller.signal.aborted;
setFilesDownloadProgressAttributes({
downloadDirPath,
success: 0,
failed: 0,
total: files.length,
canceller,
});
if (isElectron()) {
await downloadFilesDesktop(
files,
{ increaseSuccess, increaseFailed, isCancelled },
downloadDirPath
);
} else {
await downloadFiles(files, {
increaseSuccess,
increaseFailed,
isCancelled,
});
}
}
export async function downloadSelectedFiles(
files: EnteFile[],
setFilesDownloadProgressAttributes: SetFilesDownloadProgressAttributes
) {
if (!files.length) {
return;
}
let downloadDirPath: string;
if (isElectron()) {
downloadDirPath = await ElectronAPIs.selectDirectory();
if (!downloadDirPath) {
return;
}
}
await downloadFilesWithProgress(
files,
downloadDirPath,
setFilesDownloadProgressAttributes
);
}
export async function downloadSingleFile(
file: EnteFile,
setFilesDownloadProgressAttributes: SetFilesDownloadProgressAttributes
) {
let downloadDirPath: string;
if (isElectron()) {
downloadDirPath = await ElectronAPIs.selectDirectory();
if (!downloadDirPath) {
return;
}
}
await downloadFilesWithProgress(
[file],
downloadDirPath,
setFilesDownloadProgressAttributes
);
}
export async function downloadFiles(
files: EnteFile[],
progressBarUpdater?: {
progressBarUpdater: {
increaseSuccess: () => void;
increaseFailed: () => void;
isCancelled: () => boolean;
@ -857,11 +949,11 @@ export const shouldShowAvatar = (file: EnteFile, user: User) => {
export const handleFileOps = async (
ops: FILE_OPS_TYPE,
files: EnteFile[],
setDeletedFileIds: (
deletedFileIds: Set<number> | ((prev: Set<number>) => Set<number>)
setTempDeletedFileIds: (
tempDeletedFileIds: Set<number> | ((prev: Set<number>) => Set<number>)
) => void,
setHiddenFileIds: (
hiddenFileIds: Set<number> | ((prev: Set<number>) => Set<number>)
setTempHiddenFileIds: (
tempHiddenFileIds: Set<number> | ((prev: Set<number>) => Set<number>)
) => void,
setFixCreationTimeAttributes: (
fixCreationTimeAttributes:
@ -869,21 +961,30 @@ export const handleFileOps = async (
files: EnteFile[];
}
| ((prev: { files: EnteFile[] }) => { files: EnteFile[] })
) => void
) => void,
setFilesDownloadProgressAttributesCreator: SetFilesDownloadProgressAttributesCreator
) => {
switch (ops) {
case FILE_OPS_TYPE.TRASH:
await deleteFileHelper(files, false, setDeletedFileIds);
await deleteFileHelper(files, false, setTempDeletedFileIds);
break;
case FILE_OPS_TYPE.DELETE_PERMANENTLY:
await deleteFileHelper(files, true, setDeletedFileIds);
await deleteFileHelper(files, true, setTempDeletedFileIds);
break;
case FILE_OPS_TYPE.HIDE:
await hideFilesHelper(files, setHiddenFileIds);
await hideFilesHelper(files, setTempHiddenFileIds);
break;
case FILE_OPS_TYPE.DOWNLOAD:
await downloadFiles(files);
case FILE_OPS_TYPE.DOWNLOAD: {
const setSelectedFileDownloadProgressAttributes =
setFilesDownloadProgressAttributesCreator(
`${files.length} ${t('FILES')}`
);
await downloadSelectedFiles(
files,
setSelectedFileDownloadProgressAttributes
);
break;
}
case FILE_OPS_TYPE.FIX_TIME:
fixTimeHelper(files, setFixCreationTimeAttributes);
break;
@ -899,12 +1000,12 @@ export const handleFileOps = async (
const deleteFileHelper = async (
selectedFiles: EnteFile[],
permanent: boolean,
setDeletedFileIds: (
deletedFileIds: Set<number> | ((prev: Set<number>) => Set<number>)
setTempDeletedFileIds: (
tempDeletedFileIds: Set<number> | ((prev: Set<number>) => Set<number>)
) => void
) => {
try {
setDeletedFileIds((deletedFileIds) => {
setTempDeletedFileIds((deletedFileIds) => {
selectedFiles.forEach((file) => deletedFileIds.add(file.id));
return new Set(deletedFileIds);
});
@ -914,25 +1015,25 @@ const deleteFileHelper = async (
await trashFiles(selectedFiles);
}
} catch (e) {
setDeletedFileIds(new Set());
setTempDeletedFileIds(new Set());
throw e;
}
};
const hideFilesHelper = async (
selectedFiles: EnteFile[],
setHiddenFileIds: (
hiddenFileIds: Set<number> | ((prev: Set<number>) => Set<number>)
setTempHiddenFileIds: (
tempHiddenFileIds: Set<number> | ((prev: Set<number>) => Set<number>)
) => void
) => {
try {
setHiddenFileIds((hiddenFileIds) => {
setTempHiddenFileIds((hiddenFileIds) => {
selectedFiles.forEach((file) => hiddenFileIds.add(file.id));
return new Set(hiddenFileIds);
});
await moveToHiddenCollection(selectedFiles);
} catch (e) {
setHiddenFileIds(new Set());
setTempHiddenFileIds(new Set());
throw e;
}
};

10
apps/photos/src/utils/photoFrame/index.ts
View file

@ -69,7 +69,11 @@ export function updateFileMsrcProps(file: EnteFile, url: string) {
}
}
export async function updateFileSrcProps(file: EnteFile, srcURLs: SourceURLs) {
export async function updateFileSrcProps(
file: EnteFile,
srcURLs: SourceURLs,
enableDownload: boolean
) {
const { url, isRenderable, isOriginal } = srcURLs;
file.w = window.innerWidth;
file.h = window.innerHeight;
@ -87,7 +91,9 @@ export async function updateFileSrcProps(file: EnteFile, srcURLs: SourceURLs) {
if (file.metadata.fileType === FILE_TYPE.VIDEO) {
file.html = `
<video controls onContextMenu="return false;">
<video controls ${
!enableDownload && 'controlsList="nodownload"'
} onContextMenu="return false;">
<source src="${url}" />
Your browser does not support the video tag.
</video>

17
apps/photos/src/utils/search/index.ts
View file

@ -1,6 +1,4 @@
import { LocationTagData } from 'types/entity';
import { DateValue } from 'types/search';
import { Location } from 'types/upload';
export const isSameDayAnyYear =
(baseDate: DateValue) => (compareDate: Date) => {
@ -28,18 +26,3 @@ export function getFormattedDate(date: DateValue) {
new Date(date.year ?? 1, date.month ?? 1, date.date ?? 1)
);
}
export function isInsideLocationTag(
location: Location,
locationTag: LocationTagData
) {
const { centerPoint, aSquare, bSquare } = locationTag;
const { latitude, longitude } = location;
const x = Math.abs(centerPoint.latitude - latitude);
const y = Math.abs(centerPoint.longitude - longitude);
if ((x * x) / aSquare + (y * y) / bSquare <= 1) {
return true;
} else {
return false;
}
}

75
apps/photos/src/worker/search.worker.ts Normal file
View file

@ -0,0 +1,75 @@
import * as Comlink from 'comlink';
import {
isInsideLocationTag,
isInsideCity,
} from 'services/locationSearchService';
import { EnteFile } from 'types/file';
import { isSameDayAnyYear } from 'utils/search';
import { Search } from 'types/search';
export class DedicatedSearchWorker {
private files: EnteFile[] = [];
setFiles(files: EnteFile[]) {
this.files = files;
}
search(search: Search) {
return this.files.filter((file) => {
return isSearchedFile(file, search);
});
}
}
Comlink.expose(DedicatedSearchWorker, self);
function isSearchedFile(file: EnteFile, search: Search) {
if (search?.collection) {
return search.collection === file.collectionID;
}
if (search?.date) {
return isSameDayAnyYear(search.date)(
new Date(file.metadata.creationTime / 1000)
);
}
if (search?.location) {
return isInsideLocationTag(
{
latitude: file.metadata.latitude,
longitude: file.metadata.longitude,
},
search.location
);
}
if (search?.city) {
return isInsideCity(
{
latitude: file.metadata.latitude,
longitude: file.metadata.longitude,
},
search.city
);
}
if (search?.files) {
return search.files.indexOf(file.id) !== -1;
}
if (search?.person) {
return search.person.files.indexOf(file.id) !== -1;
}
if (search?.thing) {
return search.thing.files.indexOf(file.id) !== -1;
}
if (search?.text) {
return search.text.files.indexOf(file.id) !== -1;
}
if (typeof search?.fileType !== 'undefined') {
return search.fileType === file.metadata.fileType;
}
if (typeof search?.clip !== 'undefined') {
return search.clip.has(file.id);
}
return false;
}

14
apps/photos/tests/zip-file-reading.test.ts
View file

@ -1,11 +1,15 @@
import { DataStream } from 'types/upload';
import ImportService from 'services/importService';
import ElectronAPIs from '@ente/shared/electron';
import { FILE_READER_CHUNK_SIZE, PICKED_UPLOAD_TYPE } from 'constants/upload';
import { getFileStream, getElectronFileStream } from 'services/readerService';
import { getFileNameSize } from '@ente/shared/logging/web';
import isElectron from 'is-electron';
import { getImportSuggestion } from 'utils/upload';
// This was for used to verify that converting from the browser readable stream
// to the node readable stream correctly handles files that align on the 4 MB
// data boundary. This expects a zip file containing random files of various
// sizes starting from 1M to 20M.
export const testZipFileReading = async () => {
try {
if (!isElectron()) {
@ -17,12 +21,12 @@ export const testZipFileReading = async () => {
'upload test failed NEXT_PUBLIC_FILE_READING_TEST_ZIP_PATH missing'
);
}
const files = await ImportService.getElectronFilesFromGoogleZip(
const files = await ElectronAPIs.getElectronFilesFromGoogleZip(
process.env.NEXT_PUBLIC_FILE_READING_TEST_ZIP_PATH
);
if (!files?.length) {
throw Error(
`testZipFileReading Check failed ❌
`testZipFileReading Check failed ❌
No files selected`
);
}
@ -73,6 +77,8 @@ export const testZipFileReading = async () => {
}
};
// This was used when fixing a bug around handling a zip file that has a photo
// at the root.
export const testZipWithRootFileReadingTest = async () => {
try {
if (!isElectron()) {
@ -84,7 +90,7 @@ export const testZipWithRootFileReadingTest = async () => {
'upload test failed NEXT_PUBLIC_ZIP_WITH_ROOT_FILE_PATH missing'
);
}
const files = await ImportService.getElectronFilesFromGoogleZip(
const files = await ElectronAPIs.getElectronFilesFromGoogleZip(
process.env.NEXT_PUBLIC_ZIP_WITH_ROOT_FILE_PATH
);

2
packages/accounts/pages/credentials.tsx
View file

@ -243,7 +243,7 @@ export default function Credentials({
}
const redirectURL = InMemoryStore.get(MS_KEYS.REDIRECT_URL);
InMemoryStore.delete(MS_KEYS.REDIRECT_URL);
router.push(APP_HOMES.get(redirectURL ?? appName));
router.push(redirectURL ?? APP_HOMES.get(appName));
} catch (e) {
logError(e, 'useMasterPassword failed');
}

2
packages/shared/constants/urls.ts
View file

@ -17,3 +17,5 @@ export const WEB_ROADMAP_URL = 'https://github.com/ente-io/photos-web/issues';
export const DESKTOP_ROADMAP_URL =
'https://github.com/ente-io/photos-desktop/issues';
export const CITIES_URL = 'https://static.ente.io/world_cities.json';

5
packages/shared/electron/service.ts
View file

@ -16,6 +16,7 @@ export interface LimitedElectronAPIs
| 'deleteDiskCache'
| 'getSentryUserID'
| 'convertToJPEG'
| 'logToDisk'
> {}
class WorkerSafeElectronServiceImpl implements LimitedElectronAPIs {
@ -66,6 +67,10 @@ class WorkerSafeElectronServiceImpl implements LimitedElectronAPIs {
await this.ready;
return this.proxiedElectron.convertToJPEG(inputFileData, filename);
}
async logToDisk(message: string) {
await this.ready;
return this.proxiedElectron.logToDisk(message);
}
}
export const WorkerSafeElectronService = new WorkerSafeElectronServiceImpl();

12
packages/shared/electron/types.ts
View file

@ -7,6 +7,11 @@ export interface AppUpdateInfo {
version: string;
}
export enum Model {
GGML_CLIP = 'ggml-clip',
ONNX_CLIP = 'onnx-clip',
}
export interface ElectronAPIsType {
exists: (path: string) => boolean;
checkExistsAndCreateDir: (dirPath: string) => Promise<void>;
@ -97,8 +102,11 @@ export interface ElectronAPIsType {
deleteFile: (path: string) => void;
rename: (oldPath: string, newPath: string) => Promise<void>;
updateOptOutOfCrashReports: (optOut: boolean) => Promise<void>;
computeImageEmbedding: (imageData: Uint8Array) => Promise<Float32Array>;
computeTextEmbedding: (text: string) => Promise<Float32Array>;
computeImageEmbedding: (
model: Model,
imageData: Uint8Array
) => Promise<Float32Array>;
computeTextEmbedding: (model: Model, text: string) => Promise<Float32Array>;
getPlatform: () => Promise<'mac' | 'windows' | 'linux'>;
setCustomCacheDirectory: (directory: string) => Promise<void>;
getCacheDirectory: () => Promise<string>;

4
packages/shared/electron/worker/client.ts
View file

@ -14,6 +14,7 @@ export interface ProxiedLimitedElectronAPIs {
inputFileData: Uint8Array,
filename: string
) => Promise<Uint8Array>;
logToDisk: (message: string) => void;
}
export interface ProxiedWorkerLimitedCache {
match: (
@ -51,6 +52,9 @@ export class WorkerSafeElectronClient implements ProxiedLimitedElectronAPIs {
): Promise<Uint8Array> {
return await ElectronAPIs.convertToJPEG(inputFileData, filename);
}
logToDisk(message: string) {
return ElectronAPIs.logToDisk(message);
}
}
function transformMatch(

33
packages/shared/hooks/useEffectSingleThreaded.tsx Normal file
View file

@ -0,0 +1,33 @@
import { useEffect, useRef } from 'react';
import { isPromise } from '../utils';
// useEffectSingleThreaded is a useEffect that will only run one at a time, and will
// caches the latest deps of requests that come in while it is running, and will
// run that after the current run is complete.
export default function useEffectSingleThreaded(
fn: (deps) => void | Promise<void>,
deps: any[]
): void {
const updateInProgress = useRef(false);
const nextRequestDepsRef = useRef<any[]>(null);
useEffect(() => {
const main = async (deps) => {
if (updateInProgress.current) {
nextRequestDepsRef.current = deps;
return;
}
updateInProgress.current = true;
const result = fn(deps);
if (isPromise(result)) {
await result;
}
updateInProgress.current = false;
if (nextRequestDepsRef.current) {
const deps = nextRequestDepsRef.current;
nextRequestDepsRef.current = null;
setTimeout(() => main(deps), 0);
}
};
main(deps);
}, deps);
}

2
packages/shared/hooks/useLocalState.tsx
View file

@ -9,7 +9,7 @@ export function useLocalState<T>(
useEffect(() => {
const { value } = getData(key) ?? {};
if (value) {
if (typeof value !== 'undefined') {
setValue(value);
}
}, []);

4
packages/shared/logging/index.ts
View file

@ -1,9 +1,9 @@
import isElectron from 'is-electron';
import ElectronAPIs from '@ente/shared/electron';
import { logError } from '@ente/shared/sentry';
import { getAppEnv } from '../apps/env';
import { APP_ENV } from '../apps/constants';
import { formatLog, logWeb } from './web';
import { WorkerSafeElectronService } from '../electron/service';
export const MAX_LOG_SIZE = 5 * 1024 * 1024; // 5MB
export const MAX_LOG_LINES = 1000;
@ -18,7 +18,7 @@ export function addLogLine(
console.log(completeLog);
}
if (isElectron()) {
ElectronAPIs.logToDisk(completeLog);
WorkerSafeElectronService.logToDisk(completeLog);
} else {
logWeb(completeLog);
}

8
packages/shared/network/api.ts
View file

@ -1,11 +1,5 @@
import { getData, LS_KEYS } from '../storage/localStorage';
export const getEndpoint = () => {
let endpoint = getData(LS_KEYS.API_ENDPOINT);
if (endpoint) {
return endpoint;
}
endpoint = process.env.NEXT_PUBLIC_ENTE_ENDPOINT;
const endpoint = process.env.NEXT_PUBLIC_ENTE_ENDPOINT;
if (isDevDeployment() && endpoint) {
return endpoint;
}

4
packages/shared/utils/index.ts
View file

@ -22,3 +22,7 @@ export function downloadUsingAnchor(link: string, name: string) {
URL.revokeObjectURL(link);
a.remove();
}
export function isPromise<T>(obj: T | Promise<T>): obj is Promise<T> {
return obj && typeof (obj as any).then === 'function';
}

24
scripts/deploy.sh Executable file
View file

@ -0,0 +1,24 @@
#!/bin/sh
# This script is run by the Cloudflare Pages integration when deploying the apps
# in this repository. The app to build is decided based on the the value of the
# CF_PAGES_BRANCH environment variable.
#
# Ref: https://developers.cloudflare.com/pages/how-to/build-commands-branches/
#
# The CF Pages configuration is set to use `out/` as the build output directory,
# so once we're done building we copy the app specific output to `out/`.
set -o errexit
set -o xtrace
rm -rf out
if test "$CF_PAGES_BRANCH" = "auth-release"
then
yarn export:auth
cp -R apps/auth/out .
else
yarn export:photos
cp -R apps/photos/out .
fi

1
turbo.json
View file

@ -24,7 +24,6 @@
"NEXT_PUBLIC_ENTE_PAYMENT_ENDPOINT",
"NEXT_PUBLIC_ENTE_ALBUM_ENDPOINT",
"NEXT_PUBLIC_ENTE_FAMILY_PORTAL_ENDPOINT",
"NEXT_PUBLIC_ENTE_AUTH_ENDPOINT",
"NEXT_PUBLIC_ENTE_WEB_ENDPOINT",
"NEXT_PUBLIC_IS_TEST_APP",
"NODE_ENV",

79
yarn.lock
View file

@ -936,11 +936,6 @@
resolved "https://registry.npmjs.org/@types/semver/-/semver-7.3.13.tgz"
integrity sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==
"@types/trusted-types@^2.0.2":
version "2.0.2"
resolved "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz"
integrity sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==
"@types/uuid@^9.0.2":
version "9.0.2"
resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.2.tgz#ede1d1b1e451548d44919dc226253e32a6952c4b"
@ -2237,9 +2232,9 @@ fn-name@~3.0.0:
integrity sha512-eNMNr5exLoavuAMhIUVsOKF79SWd/zG104ef6sxBTSw+cZc6BXdQXDvYcGvp0VbxVVSp1XDUNoz7mg1xMtSznA==
follow-redirects@^1.15.0:
version "1.15.2"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
version "1.15.4"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.4.tgz#cdc7d308bf6493126b17ea2191ea0ccf3e535adf"
integrity sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==
for-each@^0.3.3:
version "0.3.3"
@ -2591,11 +2586,6 @@ i18next@^23.4.1:
dependencies:
"@babel/runtime" "^7.22.5"
idb@^6.0.0:
version "6.1.3"
resolved "https://registry.npmjs.org/idb/-/idb-6.1.3.tgz"
integrity sha512-oIRDpVcs5KXpI1hRnTJUwkY63RB/7iqu9nSNuzXN8TLHjs7oO20IoPFbBTsqxIL5IjzIUDi+FXlVcK4zm26J8A==
idb@^7.1.1:
version "7.1.1"
resolved "https://registry.yarnpkg.com/idb/-/idb-7.1.1.tgz#d910ded866d32c7ced9befc5bfdf36f572ced72b"
@ -4671,69 +4661,6 @@ word-wrap@^1.2.3:
resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.4.tgz#cb4b50ec9aca570abd1f52f33cd45b6c61739a9f"
integrity sha512-2V81OA4ugVo5pRo46hAoD2ivUJx8jXmWXfUkY4KFNw0hEptvN0QfH3K4nHiwzGeKl5rFKedV48QVoqYavy4YpA==
workbox-cacheable-response@6.3.0:
version "6.3.0"
resolved "https://registry.npmjs.org/workbox-cacheable-response/-/workbox-cacheable-response-6.3.0.tgz"
integrity sha512-oYCRGF6PFEmJJkktdxYw/tcrU8N5u/2ihxVSHd+9sNqjNMDiXLqsewcEG544f1yx7gq5/u6VcvUA5N62KzN1GQ==
dependencies:
workbox-core "6.3.0"
workbox-core@6.3.0:
version "6.3.0"
resolved "https://registry.npmjs.org/workbox-core/-/workbox-core-6.3.0.tgz"
integrity sha512-SufToEV3SOLwwz3j+P4pgkfpzLRUlR17sX3p/LrMHP/brYKvJQqjTwtSvaCkkAX0RPHX2TFHmN8xhPP1bpmomg==
workbox-expiration@6.3.0:
version "6.3.0"
resolved "https://registry.npmjs.org/workbox-expiration/-/workbox-expiration-6.3.0.tgz"
integrity sha512-teYuYfM3HFbwAD/nlZDw/dCMOrCKjsAiMRhz0uOy9IkfBb7vBynO3xf118lY62X6BfqjZdeahiHh10N0/aYICg==
dependencies:
idb "^6.0.0"
workbox-core "6.3.0"
workbox-precaching@6.3.0, workbox-precaching@^6.1.5:
version "6.3.0"
resolved "https://registry.npmjs.org/workbox-precaching/-/workbox-precaching-6.3.0.tgz"
integrity sha512-bND3rUxiuzFmDfeKywdvOqK0LQ5LLbOPk0eX22PlMQNOOduHRxzglMpgHo/MR6h+8cPJ3GpxT8hZ895/7bHMqQ==
dependencies:
workbox-core "6.3.0"
workbox-routing "6.3.0"
workbox-strategies "6.3.0"
workbox-recipes@^6.1.5:
version "6.3.0"
resolved "https://registry.npmjs.org/workbox-recipes/-/workbox-recipes-6.3.0.tgz"
integrity sha512-f0AZyxd48E4t+PV+ifgIf8WodfJqRj8/E0t+PwppDIdTPyD59cIh0HZBtgPKFdIMVnltodpMz4zioxym1H3GjQ==
dependencies:
workbox-cacheable-response "6.3.0"
workbox-core "6.3.0"
workbox-expiration "6.3.0"
workbox-precaching "6.3.0"
workbox-routing "6.3.0"
workbox-strategies "6.3.0"
workbox-routing@6.3.0, workbox-routing@^6.1.5:
version "6.3.0"
resolved "https://registry.npmjs.org/workbox-routing/-/workbox-routing-6.3.0.tgz"
integrity sha512-asajX5UPkaoU4PB9pEpxKWKkcpA+KJQUEeYU6NlK0rXTCpdWQ6iieMRDoBTZBjTzUdL3j3s1Zo2qCOSvtXSYGg==
dependencies:
workbox-core "6.3.0"
workbox-strategies@6.3.0, workbox-strategies@^6.1.5:
version "6.3.0"
resolved "https://registry.npmjs.org/workbox-strategies/-/workbox-strategies-6.3.0.tgz"
integrity sha512-SYZt40y+Iu5nA+UEPQOrAuAMMNTxtUBPLCIaMMb4lcADpBYrNP1CD+/s2QsrxzS651a8hfi06REKt+uTp1tqfw==
dependencies:
workbox-core "6.3.0"
workbox-window@^6.1.5:
version "6.3.0"
resolved "https://registry.npmjs.org/workbox-window/-/workbox-window-6.3.0.tgz"
integrity sha512-CFP84assX9srH/TOx4OD8z4EBPO/Cq4WKdV2YLcJIFJmVTS/cB63XKeidKl2KJk8qOOLVIKnaO7BLmb0MxGFtA==
dependencies:
"@types/trusted-types" "^2.0.2"
workbox-core "6.3.0"
wrap-ansi@^6.2.0:
version "6.2.0"
resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz"