From 9a2babd82388f0cffd14766c80104f3d97b4d492 Mon Sep 17 00:00:00 2001 From: Michael Yankelev Date: Thu, 7 Oct 2021 01:02:31 +0200 Subject: [PATCH 01/23] add support for heic --- packages/files-ui/package.json | 1 + .../Modules/FileBrowsers/CSFFileBrowser.tsx | 1 + .../Components/Modules/FilePreviewModal.tsx | 20 +++++++------ .../Modules/PreviewRenderers/ImagePreview.tsx | 21 +++++++++++--- .../files-ui/src/Utils/contentTypeGuesser.ts | 5 ++-- packages/files-ui/src/types.d.ts | 1 + yarn.lock | 28 ++++++++++++++++++- 7 files changed, 61 insertions(+), 16 deletions(-) create mode 100644 packages/files-ui/src/types.d.ts diff --git a/packages/files-ui/package.json b/packages/files-ui/package.json index 17823c8d9a..d8ba7d74c8 100644 --- a/packages/files-ui/package.json +++ b/packages/files-ui/package.json @@ -31,6 +31,7 @@ "ethers": "^5.4.3", "fflate": "^0.7.1", "formik": "^2.2.5", + "heic-convert": "^1.2.4", "mime-matcher": "^1.0.5", "posthog-js": "^1.13.10", "react": "^16.14.0", diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx index a046c64454..0b7339a49e 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx @@ -155,6 +155,7 @@ const CSFFileBrowser: React.FC = () => { const handleUploadOnDrop = useCallback(async (files: File[], fileItems: DataTransferItemList, path: string) => { if (!bucket) return const flattenedFiles = await getFilesFromDataTransferItems(fileItems) + console.log(flattenedFiles) const paths = [...new Set(flattenedFiles.map(f => f.filepath))] paths.forEach(p => { uploadFiles(bucket, flattenedFiles.filter(f => f.filepath === p), getPathWithFile(path, p)) diff --git a/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx b/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx index cf8fac1a96..1f05d4bab0 100644 --- a/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx +++ b/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx @@ -30,6 +30,7 @@ import Menu from "../../UI-components/Menu" export interface IPreviewRendererProps { contents: Blob + contentType?: string } const SUPPORTED_FILE_TYPES: Record> = { @@ -196,6 +197,13 @@ const FilePreviewModal = ({ file, nextFile, previousFile, closePreview, filePath delta: 20 }) + const validRendererMimeType = content_type && + Object.keys(SUPPORTED_FILE_TYPES).find((type) => { + const matcher = new MimeMatcher(type) + + return matcher.match(content_type) + }) + useEffect(() => { let bucketId // Handle preview in Search where a Bucket is not available, but can be assumed to be a `CSF` bucket @@ -205,18 +213,12 @@ const FilePreviewModal = ({ file, nextFile, previousFile, closePreview, filePath } else { bucketId = bucket.id } - getFile({ file, filePath, bucketId }) + !!validRendererMimeType && getFile({ file, filePath, bucketId }) .then(setFileContent) .catch(console.error) - }, [file, filePath, getFile, bucket, buckets]) + }, [file, filePath, getFile, bucket, buckets, validRendererMimeType]) - const validRendererMimeType = - content_type && - Object.keys(SUPPORTED_FILE_TYPES).find((type) => { - const matcher = new MimeMatcher(type) - return matcher.match(content_type) - }) const PreviewComponent = content_type && @@ -389,7 +391,7 @@ const FilePreviewModal = ({ file, nextFile, previousFile, closePreview, filePath !error && compatibleFilesMatcher.match(content_type) && fileContent && - PreviewComponent && } + PreviewComponent && } {desktop && ( diff --git a/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx b/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx index 997a693218..9be5ad81a0 100644 --- a/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx +++ b/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx @@ -1,6 +1,8 @@ import React, { useEffect, useState } from "react" import { IPreviewRendererProps } from "../FilePreviewModal" import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch" +import heicConvert from 'heic-convert' + import { makeStyles, ITheme, @@ -41,17 +43,28 @@ const useStyles = makeStyles( }) ) -const ImagePreview: React.FC = ({ contents }) => { +const ImagePreview: React.FC = ({ contents, contentType }) => { const [imageUrl, setImageUrl] = useState() - useEffect(() => { - setImageUrl(URL.createObjectURL(contents)) + const handleCreateImageUrl = async () => { + if (contentType !== 'image/heic') { + setImageUrl(URL.createObjectURL(contents)) + } else { + const convertedImage = await heicConvert({ + buffer: Buffer.from(await contents.arrayBuffer()), + format: 'PNG', + }) + setImageUrl(URL.createObjectURL(new Blob([convertedImage]))) + } + + } + handleCreateImageUrl() return () => { imageUrl && URL.revokeObjectURL(imageUrl) } // eslint-disable-next-line - }, [contents]) + }, [contents, contentType]) const classes = useStyles() const { desktop } = useThemeSwitcher() diff --git a/packages/files-ui/src/Utils/contentTypeGuesser.ts b/packages/files-ui/src/Utils/contentTypeGuesser.ts index ae7b19cdd3..49ccbe92f7 100644 --- a/packages/files-ui/src/Utils/contentTypeGuesser.ts +++ b/packages/files-ui/src/Utils/contentTypeGuesser.ts @@ -1,7 +1,7 @@ const guessContentType = (fileName: string) => { const { length, [length - 1]: ext } = fileName.split(".") - switch (ext) { + switch (ext.toLowerCase()) { case "pdf": return "application/pdf" case "jpg": @@ -9,7 +9,8 @@ const guessContentType = (fileName: string) => { case "png": case "gif": case "bmp": - return `image/${ext}` + case "heic": + return `image/${ext.toLowerCase()}` case "mp3": case "m4a": return `audio/${ext}` diff --git a/packages/files-ui/src/types.d.ts b/packages/files-ui/src/types.d.ts new file mode 100644 index 0000000000..cbd0277d9a --- /dev/null +++ b/packages/files-ui/src/types.d.ts @@ -0,0 +1 @@ +declare module 'heic-convert'; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 1a899e480e..7e54cf6b50 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14273,6 +14273,22 @@ he@^1.1.0, he@^1.2.0: resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f" integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw== +heic-convert@^1.2.4: + version "1.2.4" + resolved "https://registry.yarnpkg.com/heic-convert/-/heic-convert-1.2.4.tgz#605820f98ace3949a40fc7b263ee0bc573a0176b" + integrity sha512-klJHyv+BqbgKiCQvCqI9IKIvweCcohDuDl0Jphearj8+16+v8eff2piVevHqq4dW9TK0r1onTR6PKHP1I4hdbA== + dependencies: + heic-decode "^1.1.2" + jpeg-js "^0.4.1" + pngjs "^3.4.0" + +heic-decode@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/heic-decode/-/heic-decode-1.1.2.tgz#974701666432e31ed64b2263a1ece7cff5218209" + integrity sha512-UF8teegxvzQPdSTcx5frIUhitNDliz/9Pui0JFdIqVRE00spVE33DcCYtZqaLNyd4y5RP/QQWZFIc1YWVKKm2A== + dependencies: + libheif-js "^1.10.0" + hex-color-regex@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e" @@ -15993,6 +16009,11 @@ jest@24.9.0: import-local "^2.0.0" jest-cli "^24.9.0" +jpeg-js@^0.4.1: + version "0.4.3" + resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.4.3.tgz#6158e09f1983ad773813704be80680550eff977b" + integrity sha512-ru1HWKek8octvUHFHvE5ZzQ1yAsJmIvRdGWvSoKV52XKyuyYA437QWDttXT8eZXDSbuMpHlLzPDZUPd6idIz+Q== + js-levenshtein@^1.1.6: version "1.1.6" resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d" @@ -16641,6 +16662,11 @@ levn@^0.3.0, levn@~0.3.0: prelude-ls "~1.1.2" type-check "~0.3.2" +libheif-js@^1.10.0: + version "1.12.0" + resolved "https://registry.yarnpkg.com/libheif-js/-/libheif-js-1.12.0.tgz#9ad1ed16a8e6412b4d3d83565d285465a00e7305" + integrity sha512-hDs6xQ7028VOwAFwEtM0Q+B2x2NW69Jb2MhQFUbk3rUrHzz4qo5mqS8VrqNgYnSc8TiUGnR691LnO4uIfEE23w== + lines-and-columns@^1.1.6: version "1.1.6" resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00" @@ -19052,7 +19078,7 @@ pn@^1.1.0: resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb" integrity sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA== -pngjs@^3.3.0: +pngjs@^3.3.0, pngjs@^3.4.0: version "3.4.0" resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.4.0.tgz#99ca7d725965fb655814eaf65f38f12bbdbf555f" integrity sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w== From 4fc3b36cd9c734dc2da1963a7f5a48b31f0f5ba5 Mon Sep 17 00:00:00 2001 From: Michael Yankelev <12774278+FSM1@users.noreply.github.com> Date: Thu, 7 Oct 2021 12:54:33 +0200 Subject: [PATCH 02/23] Update packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> --- .../src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx index 0b7339a49e..a046c64454 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx @@ -155,7 +155,6 @@ const CSFFileBrowser: React.FC = () => { const handleUploadOnDrop = useCallback(async (files: File[], fileItems: DataTransferItemList, path: string) => { if (!bucket) return const flattenedFiles = await getFilesFromDataTransferItems(fileItems) - console.log(flattenedFiles) const paths = [...new Set(flattenedFiles.map(f => f.filepath))] paths.forEach(p => { uploadFiles(bucket, flattenedFiles.filter(f => f.filepath === p), getPathWithFile(path, p)) From bf534397fd6a875de86a101cc7d1f2acd1270a15 Mon Sep 17 00:00:00 2001 From: Michael Yankelev Date: Thu, 7 Oct 2021 12:59:11 +0200 Subject: [PATCH 03/23] fix lint, useMemo --- .../files-ui/src/Components/Modules/FilePreviewModal.tsx | 7 ++++--- .../Components/Modules/PreviewRenderers/ImagePreview.tsx | 6 +++--- packages/files-ui/src/types.d.ts | 2 +- 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx b/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx index 1f05d4bab0..69eddd96b7 100644 --- a/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx +++ b/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx @@ -197,12 +197,12 @@ const FilePreviewModal = ({ file, nextFile, previousFile, closePreview, filePath delta: 20 }) - const validRendererMimeType = content_type && + const validRendererMimeType = useMemo(() => content_type && Object.keys(SUPPORTED_FILE_TYPES).find((type) => { const matcher = new MimeMatcher(type) return matcher.match(content_type) - }) + }), [content_type]) useEffect(() => { let bucketId @@ -391,7 +391,8 @@ const FilePreviewModal = ({ file, nextFile, previousFile, closePreview, filePath !error && compatibleFilesMatcher.match(content_type) && fileContent && - PreviewComponent && } + PreviewComponent && } {desktop && ( diff --git a/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx b/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx index 9be5ad81a0..6e7af394cc 100644 --- a/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx +++ b/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from "react" import { IPreviewRendererProps } from "../FilePreviewModal" import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch" -import heicConvert from 'heic-convert' +import heicConvert from "heic-convert" import { makeStyles, @@ -47,12 +47,12 @@ const ImagePreview: React.FC = ({ contents, contentType } const [imageUrl, setImageUrl] = useState() useEffect(() => { const handleCreateImageUrl = async () => { - if (contentType !== 'image/heic') { + if (contentType !== "image/heic") { setImageUrl(URL.createObjectURL(contents)) } else { const convertedImage = await heicConvert({ buffer: Buffer.from(await contents.arrayBuffer()), - format: 'PNG', + format: "PNG" }) setImageUrl(URL.createObjectURL(new Blob([convertedImage]))) } diff --git a/packages/files-ui/src/types.d.ts b/packages/files-ui/src/types.d.ts index cbd0277d9a..86a0e1233b 100644 --- a/packages/files-ui/src/types.d.ts +++ b/packages/files-ui/src/types.d.ts @@ -1 +1 @@ -declare module 'heic-convert'; \ No newline at end of file +declare module "heic-convert"; \ No newline at end of file From 1ac0a7e29473bca1b2ad26a9406aac7dda311e94 Mon Sep 17 00:00:00 2001 From: Michael Yankelev Date: Thu, 7 Oct 2021 13:18:34 +0200 Subject: [PATCH 04/23] use thenable instead of async/await --- .../Modules/PreviewRenderers/ImagePreview.tsx | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx b/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx index 6e7af394cc..b4917fb717 100644 --- a/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx +++ b/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx @@ -46,20 +46,18 @@ const useStyles = makeStyles( const ImagePreview: React.FC = ({ contents, contentType }) => { const [imageUrl, setImageUrl] = useState() useEffect(() => { - const handleCreateImageUrl = async () => { - if (contentType !== "image/heic") { - setImageUrl(URL.createObjectURL(contents)) - } else { - const convertedImage = await heicConvert({ - buffer: Buffer.from(await contents.arrayBuffer()), + if (contentType !== "image/heic") { + setImageUrl(URL.createObjectURL(contents)) + } else { + contents.arrayBuffer() + .then(b => heicConvert({ + buffer: Buffer.from(b), format: "PNG" - }) - setImageUrl(URL.createObjectURL(new Blob([convertedImage]))) - } - + })) + .catch(console.error) + .then(c => setImageUrl(URL.createObjectURL(new Blob([c])))) } - handleCreateImageUrl() return () => { imageUrl && URL.revokeObjectURL(imageUrl) } From b9cef2c466f3e559da9e8f1e3244bc2f9e454b32 Mon Sep 17 00:00:00 2001 From: Michael Yankelev Date: Thu, 7 Oct 2021 14:48:13 +0200 Subject: [PATCH 05/23] fix preview tests --- packages/files-ui/cypress/tests/file-preview-spec.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/files-ui/cypress/tests/file-preview-spec.ts b/packages/files-ui/cypress/tests/file-preview-spec.ts index 0003413416..83c67047ce 100644 --- a/packages/files-ui/cypress/tests/file-preview-spec.ts +++ b/packages/files-ui/cypress/tests/file-preview-spec.ts @@ -72,9 +72,11 @@ describe("File Preview", () => { homePage.fileItemName().dblclick() previewModal.unsupportedFileLabel().should("exist") previewModal.downloadUnsupportedFileButton().should("be.visible") - + // ensure that the file download does not start until the download button is clicked + cy.get("@downloadRequest").should('be.null') + previewModal.downloadUnsupportedFileButton().click() // ensure the download request contains the correct file - cy.get("@downloadRequest").its("request.body").should("contain", { + cy.get("@downloadRequest").should('not.be.null').its("request.body").should("contain", { path: "/file.zip" }) }) From 2d3f12a424fdad9576688ed3a43c36196115d467 Mon Sep 17 00:00:00 2001 From: Michael Yankelev Date: Thu, 7 Oct 2021 15:20:18 +0200 Subject: [PATCH 06/23] rename variable --- .../src/Components/Modules/FilePreviewModal.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx b/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx index 69eddd96b7..31ecb9fa67 100644 --- a/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx +++ b/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx @@ -197,7 +197,7 @@ const FilePreviewModal = ({ file, nextFile, previousFile, closePreview, filePath delta: 20 }) - const validRendererMimeType = useMemo(() => content_type && + const previewRendererKey = useMemo(() => content_type && Object.keys(SUPPORTED_FILE_TYPES).find((type) => { const matcher = new MimeMatcher(type) @@ -213,18 +213,18 @@ const FilePreviewModal = ({ file, nextFile, previousFile, closePreview, filePath } else { bucketId = bucket.id } - !!validRendererMimeType && getFile({ file, filePath, bucketId }) + !!previewRendererKey && getFile({ file, filePath, bucketId }) .then(setFileContent) .catch(console.error) - }, [file, filePath, getFile, bucket, buckets, validRendererMimeType]) + }, [file, filePath, getFile, bucket, buckets, previewRendererKey]) const PreviewComponent = content_type && fileContent && - validRendererMimeType && - SUPPORTED_FILE_TYPES[validRendererMimeType] + previewRendererKey && + SUPPORTED_FILE_TYPES[previewRendererKey] useHotkeys("Esc,Escape", () => { if (file) { From cbda122be3b94486402400d3e83778781d507eed Mon Sep 17 00:00:00 2001 From: Michael Yankelev Date: Thu, 7 Oct 2021 18:00:03 +0200 Subject: [PATCH 07/23] remove not null check in test --- packages/files-ui/cypress/tests/file-preview-spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/files-ui/cypress/tests/file-preview-spec.ts b/packages/files-ui/cypress/tests/file-preview-spec.ts index 83c67047ce..991c351464 100644 --- a/packages/files-ui/cypress/tests/file-preview-spec.ts +++ b/packages/files-ui/cypress/tests/file-preview-spec.ts @@ -76,7 +76,7 @@ describe("File Preview", () => { cy.get("@downloadRequest").should('be.null') previewModal.downloadUnsupportedFileButton().click() // ensure the download request contains the correct file - cy.get("@downloadRequest").should('not.be.null').its("request.body").should("contain", { + cy.get("@downloadRequest").its("request.body").should("contain", { path: "/file.zip" }) }) From 228cacfa40d02cbe5223b555a99a87c038bd5d30 Mon Sep 17 00:00:00 2001 From: Michael Yankelev Date: Thu, 7 Oct 2021 23:10:58 +0200 Subject: [PATCH 08/23] resolve test issue, add loader --- .../FileBrowsers/SearchFileBrowser.tsx | 2 +- .../Modules/FileBrowsers/hooks/useGetFile.tsx | 3 --- .../Modules/FileBrowsers/views/FilesList.tsx | 3 +-- .../Components/Modules/FilePreviewModal.tsx | 3 ++- .../Modules/PreviewRenderers/ImagePreview.tsx | 24 +++++++++++++------ 5 files changed, 21 insertions(+), 14 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/SearchFileBrowser.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/SearchFileBrowser.tsx index 3fc8cd8c90..1b487a469a 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/SearchFileBrowser.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/SearchFileBrowser.tsx @@ -84,7 +84,7 @@ const SearchFileBrowser: React.FC = ({ controls = false const getPath = useCallback((cid: string): string => { const searchEntry = getSearchEntry(cid) // Set like this as look ups should always be using available cids - return searchEntry ? searchEntry.path : "" + return searchEntry ? searchEntry.path.replace(searchEntry.content.name, '') : "" }, [getSearchEntry]) const pathContents: FileSystemItem[] = useMemo(() => diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/hooks/useGetFile.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/hooks/useGetFile.tsx index 83890133eb..4f3b9363de 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/hooks/useGetFile.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/hooks/useGetFile.tsx @@ -40,7 +40,6 @@ export const useGetFile = () => { setError("") try { - const content = await getFileContent( id, { @@ -69,8 +68,6 @@ export const useGetFile = () => { setError(t`There was an error getting the preview.`) } } - - }, [bucket, getFileContent]) return { getFile, isDownloading, error, downloadProgress } diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx index e90732029b..980115d243 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx @@ -43,7 +43,6 @@ import { CONTENT_TYPES } from "../../../../Utils/Constants" import { CSFTheme } from "../../../../Themes/types" import MimeMatcher from "../../../../Utils/MimeMatcher" import { useLanguageContext } from "../../../../Contexts/LanguageContext" -import { getPathWithFile } from "../../../../Utils/pathUtils" import SurveyBanner from "../../../SurveyBanner" import { DragPreviewLayer } from "./DragPreviewLayer" import { useFileBrowser } from "../../../../Contexts/FileBrowserContext" @@ -1072,7 +1071,7 @@ const FilesList = ({ isShared = false }: Props) => { closePreview={closePreview} nextFile={fileIndex < files.length - 1 ? setNextPreview : undefined} previousFile={fileIndex > 0 ? setPreviousPreview : undefined} - filePath={isSearch && getPath ? getPath(files[fileIndex].cid) : getPathWithFile(currentPath, files[fileIndex].name)} + filePath={isSearch && getPath ? getPath(files[fileIndex].cid) : currentPath} /> )} { filePath && isReportFileModalOpen && diff --git a/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx b/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx index 31ecb9fa67..7d08c4120c 100644 --- a/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx +++ b/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx @@ -27,6 +27,7 @@ import { useFileBrowser } from "../../Contexts/FileBrowserContext" import { useGetFile } from "./FileBrowsers/hooks/useGetFile" import { useMemo } from "react" import Menu from "../../UI-components/Menu" +import {getPathWithFile} from "../../Utils/pathUtils" export interface IPreviewRendererProps { contents: Blob @@ -213,7 +214,7 @@ const FilePreviewModal = ({ file, nextFile, previousFile, closePreview, filePath } else { bucketId = bucket.id } - !!previewRendererKey && getFile({ file, filePath, bucketId }) + !!previewRendererKey && getFile({ file, filePath: getPathWithFile(filePath, file.name), bucketId }) .then(setFileContent) .catch(console.error) }, [file, filePath, getFile, bucket, buckets, previewRendererKey]) diff --git a/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx b/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx index b4917fb717..2118ea243e 100644 --- a/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx +++ b/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx @@ -13,7 +13,8 @@ import { Button, ZoomInIcon, ZoomOutIcon, - FullscreenIcon + FullscreenIcon, + Loading } from "@chainsafe/common-components" const useStyles = makeStyles( @@ -45,10 +46,13 @@ const useStyles = makeStyles( const ImagePreview: React.FC = ({ contents, contentType }) => { const [imageUrl, setImageUrl] = useState() + const [loading, setLoading] = useState(false) + useEffect(() => { if (contentType !== "image/heic") { setImageUrl(URL.createObjectURL(contents)) } else { + setLoading(true) contents.arrayBuffer() .then(b => heicConvert({ buffer: Buffer.from(b), @@ -56,6 +60,7 @@ const ImagePreview: React.FC = ({ contents, contentType } })) .catch(console.error) .then(c => setImageUrl(URL.createObjectURL(new Blob([c])))) + .finally(() => setLoading(false)) } return () => { @@ -102,13 +107,18 @@ const ImagePreview: React.FC = ({ contents, contentType } )} - - - + : + + } ) } From fd756e1c6dec2e8abeeb3ea068ee582e69dfee42 Mon Sep 17 00:00:00 2001 From: Michael Yankelev Date: Fri, 8 Oct 2021 12:54:48 +0200 Subject: [PATCH 09/23] fix lint --- .../src/Components/Modules/FileBrowsers/SearchFileBrowser.tsx | 2 +- packages/files-ui/src/Components/Modules/FilePreviewModal.tsx | 2 +- .../src/Components/Modules/PreviewRenderers/ImagePreview.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/SearchFileBrowser.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/SearchFileBrowser.tsx index 1b487a469a..392ecc47e3 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/SearchFileBrowser.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/SearchFileBrowser.tsx @@ -84,7 +84,7 @@ const SearchFileBrowser: React.FC = ({ controls = false const getPath = useCallback((cid: string): string => { const searchEntry = getSearchEntry(cid) // Set like this as look ups should always be using available cids - return searchEntry ? searchEntry.path.replace(searchEntry.content.name, '') : "" + return searchEntry ? searchEntry.path.replace(searchEntry.content.name, "") : "" }, [getSearchEntry]) const pathContents: FileSystemItem[] = useMemo(() => diff --git a/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx b/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx index 7d08c4120c..7e95fdfbba 100644 --- a/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx +++ b/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx @@ -27,7 +27,7 @@ import { useFileBrowser } from "../../Contexts/FileBrowserContext" import { useGetFile } from "./FileBrowsers/hooks/useGetFile" import { useMemo } from "react" import Menu from "../../UI-components/Menu" -import {getPathWithFile} from "../../Utils/pathUtils" +import { getPathWithFile } from "../../Utils/pathUtils" export interface IPreviewRendererProps { contents: Blob diff --git a/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx b/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx index 2118ea243e..de3e1c25c6 100644 --- a/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx +++ b/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx @@ -110,7 +110,7 @@ const ImagePreview: React.FC = ({ contents, contentType } {loading ? : Date: Fri, 8 Oct 2021 16:09:40 -0700 Subject: [PATCH 10/23] update image preview test --- .../files-ui/cypress/tests/file-preview-spec.ts | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/files-ui/cypress/tests/file-preview-spec.ts b/packages/files-ui/cypress/tests/file-preview-spec.ts index 991c351464..df6f553821 100644 --- a/packages/files-ui/cypress/tests/file-preview-spec.ts +++ b/packages/files-ui/cypress/tests/file-preview-spec.ts @@ -72,16 +72,23 @@ describe("File Preview", () => { homePage.fileItemName().dblclick() previewModal.unsupportedFileLabel().should("exist") previewModal.downloadUnsupportedFileButton().should("be.visible") + // ensure that the file download does not start until the download button is clicked - cy.get("@downloadRequest").should('be.null') + cy.get("@downloadRequest").then(($request) => { + // retrieving the alias (spy) should yield null because posts should not have been made yet + expect($request).to.be.null + }) + + // begin the file download previewModal.downloadUnsupportedFileButton().click() + // ensure the download request contains the correct file - cy.get("@downloadRequest").its("request.body").should("contain", { + cy.wait("@downloadRequest").its("request.body").should("contain", { path: "/file.zip" }) }) - // return to the home and ensure preview menu option is not shown for unsupported file + // return to home, ensure the preview menu option is not shown for an unsupported file previewModal.closeButton().click() homePage.fileItemKebabButton().click() homePage.previewMenuOption().should("not.exist") From 323928af35734007fa808f6e140c5663276719ec Mon Sep 17 00:00:00 2001 From: Michael Yankelev Date: Mon, 11 Oct 2021 14:43:48 +0200 Subject: [PATCH 11/23] use jpg instead of png --- .../src/Components/Modules/PreviewRenderers/ImagePreview.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx b/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx index de3e1c25c6..22e75953a3 100644 --- a/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx +++ b/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx @@ -56,7 +56,8 @@ const ImagePreview: React.FC = ({ contents, contentType } contents.arrayBuffer() .then(b => heicConvert({ buffer: Buffer.from(b), - format: "PNG" + format: "JPEG", + quality: 0.5 })) .catch(console.error) .then(c => setImageUrl(URL.createObjectURL(new Blob([c])))) @@ -110,7 +111,7 @@ const ImagePreview: React.FC = ({ contents, contentType } {loading ? : Date: Tue, 12 Oct 2021 14:29:21 +0000 Subject: [PATCH 12/23] lingui extract --- packages/files-ui/src/locales/fr/messages.po | 213 ++++--------------- 1 file changed, 47 insertions(+), 166 deletions(-) diff --git a/packages/files-ui/src/locales/fr/messages.po b/packages/files-ui/src/locales/fr/messages.po index 2735f943cd..37ced9a601 100644 --- a/packages/files-ui/src/locales/fr/messages.po +++ b/packages/files-ui/src/locales/fr/messages.po @@ -5,8 +5,7 @@ msgstr "" "POT-Creation-Date: 2021-04-23 11:05+0200\n" "PO-Revision-Date: 2021-10-09 17:23+0000\n" "Last-Translator: J. Lavoie \n" -"Language-Team: French \n" +"Language-Team: French \n" "Language: fr\n" "MIME-Version: 1.0\n" "Content-Type: text/plain; charset=utf-8\n" @@ -15,14 +14,8 @@ msgstr "" "X-Generator: Weblate 4.9-dev\n" "Mime-Version: 1.0\n" -msgid "" -"A backup secret phrase will be generated and used for your account.<0/>We do " -"not store it and <1>it can only be displayed once. Save it somewhere " -"safe!" -msgstr "" -"Une phrase secrète de sauvegarde sera générée et utilisé pour ce compte.<0/" -">Nous ne la sauvergardons pas <1>elle ne peut être affichée qu’une seule " -"fois. Gardez-la dans un endroit sûr !" +msgid "A backup secret phrase will be generated and used for your account.<0/>We do not store it and <1>it can only be displayed once. Save it somewhere safe!" +msgstr "Une phrase secrète de sauvegarde sera générée et utilisé pour ce compte.<0/>Nous ne la sauvergardons pas <1>elle ne peut être affichée qu’une seule fois. Gardez-la dans un endroit sûr !" msgid "A better sharing experience is coming soon." msgstr "Une meilleure expérience de partage sera bientôt disponible." @@ -39,25 +32,17 @@ msgstr "Compte" msgid "Add a username" msgstr "Ajouter un nom d’utilisateur" -msgid "" -"Add at least one more authentication method to protect your account. You’d " -"only need any two to sign in to Files from any device." -msgstr "" -"Ajoutez au moins une méthode d’authentification pour protéger ce compte. " -"Vous avez besoin de deux méthode pour accéder à Files depuis n’importe quel " -"appareil." +msgid "Add at least one more authentication method to protect your account. You’d only need any two to sign in to Files from any device." +msgstr "Ajoutez au moins une méthode d’authentification pour protéger ce compte. Vous avez besoin de deux méthode pour accéder à Files depuis n’importe quel appareil." msgid "Add by sharing address, username or wallet address" -msgstr "" -"Ajouter par adresse de partage, nom d'utilisateur ou adresse de portefeuille" +msgstr "Ajouter par adresse de partage, nom d'utilisateur ou adresse de portefeuille" msgid "Add more files" msgstr "Ajouter d’autres fichiers" msgid "Add viewers and editors by username, sharing id or Ethereum address." -msgstr "" -"Ajoutez des personnes pouvant visualiser ou afficher par nom d'utilisateur, " -"identifiant de partage ou adresse Ethereum." +msgstr "Ajoutez des personnes pouvant visualiser ou afficher par nom d'utilisateur, identifiant de partage ou adresse Ethereum." msgid "An error occurred:" msgstr "Une erreur s'est produite :" @@ -68,12 +53,8 @@ msgstr "Accepter" msgid "Backup secret phrase" msgstr "Phrase secrète de sauvegarde" -msgid "" -"Backup secret phrase does not match user account, please double-check and " -"try again." -msgstr "" -"La phrase secrète de sauvegarde est incorrecte, merci de vérifier et " -"réessayer." +msgid "Backup secret phrase does not match user account, please double-check and try again." +msgstr "La phrase secrète de sauvegarde est incorrecte, merci de vérifier et réessayer." msgid "Bin" msgstr "Corbeille" @@ -84,19 +65,11 @@ msgstr "Explorateur :" msgid "Bucket id" msgstr "Identifiant du seau" -msgid "" -"By connecting your wallet, you agree to our <0>Terms of Service and " -"<1>Privacy Policy" -msgstr "" -"En connectant votre portefeuille, vous acceptez nos <0>conditions de " -"service et notre <1>politique de confidentialité" +msgid "By connecting your wallet, you agree to our <0>Terms of Service and <1>Privacy Policy" +msgstr "En connectant votre portefeuille, vous acceptez nos <0>conditions de service et notre <1>politique de confidentialité" -msgid "" -"By forgetting this browser, you will not be able to use its associated " -"recovery key to sign-in." -msgstr "" -"En oubliant ce navigateur, vous ne pourrez pas utiliser la clé de " -"récupération qui lui est associée pour vous connecter." +msgid "By forgetting this browser, you will not be able to use its associated recovery key to sign-in." +msgstr "En oubliant ce navigateur, vous ne pourrez pas utiliser la clé de récupération qui lui est associée pour vous connecter." msgid "CID (Content Identifier)" msgstr "CID (Identifiant de contenu)" @@ -111,8 +84,7 @@ msgid "Change password" msgstr "Changer le mot de passe" msgid "Check your inbox! We've sent another email." -msgstr "" -"Vérifiez votre boîte de réception ! Nous avons envoyé un autre courriel." +msgstr "Vérifiez votre boîte de réception ! Nous avons envoyé un autre courriel." msgid "Click or drag to upload files" msgstr "Cliquer ou faire glisser un ficher pour le téléverser" @@ -321,12 +293,8 @@ msgstr "Le téléversement de dossiers n'est pas actuellement pris en charge" msgid "Folders" msgstr "Dossiers" -msgid "" -"For security reasons, each time you sign in we’ll ask you for one of the " -"following to confirm your identity." -msgstr "" -"Pour des raisons de sécurité, chaque fois que vous vous connectez, nous vous " -"demanderons l’une des informations suivantes pour confirmer votre identité." +msgid "For security reasons, each time you sign in we’ll ask you for one of the following to confirm your identity." +msgstr "Pour des raisons de sécurité, chaque fois que vous vous connectez, nous vous demanderons l’une des informations suivantes pour confirmer votre identité." msgid "Forget this browser" msgstr "Oublier ce navigateur" @@ -361,13 +329,8 @@ msgstr "Compris" msgid "Hello again!" msgstr "Ravis de vous revoir !" -msgid "" -"Hey! You only have two sign-in methods. If you lose that and have only one " -"left, you will be locked out of your account forever." -msgstr "" -"Hé ! Vous n’avez que deux méthodes de connexion. Si vous en perdez une et " -"qu’il ne vous en reste qu’une, vous ne pourrez plus jamais vous connecter à " -"votre compte." +msgid "Hey! You only have two sign-in methods. If you lose that and have only one left, you will be locked out of your account forever." +msgstr "Hé ! Vous n’avez que deux méthodes de connexion. Si vous en perdez une et qu’il ne vous en reste qu’une, vous ne pourrez plus jamais vous connecter à votre compte." msgid "Hold on, we are logging you in…" msgstr "Un instant, nous te connectons…" @@ -375,17 +338,8 @@ msgstr "Un instant, nous te connectons…" msgid "Home" msgstr "Accueil" -msgid "" -"If you think this file does not comply with our <0>Terms of Service, " -"please send the following information to report@files.chainsafe.io. Beware " -"that by sending the file's decryption key, an admin can then decrypt any " -"file in this shared folder." -msgstr "" -"Si vous pensez que ce fichier n'est pas conforme à nos <0>Conditions de " -"service, veuillez envoyer les informations suivantes à report@files." -"chainsafe.io. Attention, en envoyant la clé de déchiffrement du fichier, un " -"administrateur peut ensuite déchiffrer n'importe quel fichier de ce dossier " -"partagé." +msgid "If you think this file does not comply with our <0>Terms of Service, please send the following information to report@files.chainsafe.io. Beware that by sending the file's decryption key, an admin can then decrypt any file in this shared folder." +msgstr "Si vous pensez que ce fichier n'est pas conforme à nos <0>Conditions de service, veuillez envoyer les informations suivantes à report@files.chainsafe.io. Attention, en envoyant la clé de déchiffrement du fichier, un administrateur peut ensuite déchiffrer n'importe quel fichier de ce dossier partagé." msgid "Info" msgstr "Infos" @@ -429,19 +383,11 @@ msgstr "Chargement de vos dossiers partagés…" msgid "Loading..." msgstr "Chargement…" -msgid "" -"Looks like you’re signing in from a new browser. Please choose one of the " -"following to continue:" -msgstr "" -"Il semble que vous vous connectiez à partir d’un nouveau navigateur. " -"Veuillez choisir une des options suivantes pour continuer :" +msgid "Looks like you’re signing in from a new browser. Please choose one of the following to continue:" +msgstr "Il semble que vous vous connectiez à partir d’un nouveau navigateur. Veuillez choisir une des options suivantes pour continuer :" -msgid "" -"Lorem ipsum aenean et rutrum magna. Morbi nec placerat erat. Nunc elementum " -"sed libero sit amet convallis. Quisque non arcu vitae ex fringilla molestie." -msgstr "" -"Lorem ipsum aenean et rutrum magna. Morbi nec placerat erat. Nunc elementum " -"sed libero sit amet convallis. Quisque non arcu vitae ex fringilla molestie." +msgid "Lorem ipsum aenean et rutrum magna. Morbi nec placerat erat. Nunc elementum sed libero sit amet convallis. Quisque non arcu vitae ex fringilla molestie." +msgstr "Lorem ipsum aenean et rutrum magna. Morbi nec placerat erat. Nunc elementum sed libero sit amet convallis. Quisque non arcu vitae ex fringilla molestie." msgid "Manage Access" msgstr "Gérer l’accès" @@ -515,11 +461,8 @@ msgstr "Vous seul(e) pouvez voir ceci." msgid "Operating system:" msgstr "Système d’exploitation :" -msgid "" -"Or confirm by signing into your Files on any browser you’ve used before." -msgstr "" -"Ou accepte la requête de connexion depuis n’importe quel appareil ou " -"navigateur utilisé auparavant." +msgid "Or confirm by signing into your Files on any browser you’ve used before." +msgstr "Ou accepte la requête de connexion depuis n’importe quel appareil ou navigateur utilisé auparavant." msgid "Or using one of the following:" msgstr "Ou en utilisant l’un des moyens suivants :" @@ -533,10 +476,8 @@ msgstr "Mot de passe" msgid "Password confirmation is required" msgstr "La confirmation du mot de passe est requise" -msgid "" -"Password does not match user account, please double-check and try again." -msgstr "" -"Le mot de passe ne correspond pas au compte, merci de vérifier et réessayer." +msgid "Password does not match user account, please double-check and try again." +msgstr "Le mot de passe ne correspond pas au compte, merci de vérifier et réessayer." msgid "Password needs to be more complex" msgstr "Le mot de passe doit être plus complexe" @@ -728,9 +669,7 @@ msgid "Social Sign-in Wallet" msgstr "Connecté avec un réseau social ou wallet" msgid "Something went wrong with email login! Please try again." -msgstr "" -"Un problème est survenu lors de la connexion avec courriel ! Veuillez " -"réessayer." +msgstr "Un problème est survenu lors de la connexion avec courriel ! Veuillez réessayer." msgid "Something went wrong!" msgstr "Quelque chose a mal tourné !" @@ -784,8 +723,7 @@ msgid "There was an error deleting your data" msgstr "Une erreur s'est produite lors de la suppression de vos données" msgid "There was an error getting search results" -msgstr "" -"Une erreur s’est produite lors de l’obtention des résultats de recherche" +msgstr "Une erreur s’est produite lors de l’obtention des résultats de recherche" msgid "There was an error getting the preview." msgstr "Une erreur s’est produite lors de la génération de l’aperçu." @@ -808,17 +746,8 @@ msgstr "Ce nom d’utilisateur est public" msgid "This website uses cookies" msgstr "Ce site web utilise des cookies" -msgid "" -"This website uses cookies that help the website function and track " -"interactions for analytics purposes. You have the right to decline our use " -"of cookies. For us to provide a customizable user experience to you, please " -"click on the Accept button below.<0>Learn more" -msgstr "" -"Ce site web utilise des cookies qui l'aident à fonctionner et à suivre les " -"interactions à des fins d'analyse. Vous avez le droit de refuser notre " -"utilisation des cookies. Pour que nous puissions vous offrir une expérience " -"utilisateur personnalisable, veuillez cliquer sur le bouton Accepter ci-" -"dessous.<0>En savoir plus" +msgid "This website uses cookies that help the website function and track interactions for analytics purposes. You have the right to decline our use of cookies. For us to provide a customizable user experience to you, please click on the Accept button below.<0>Learn more" +msgstr "Ce site web utilise des cookies qui l'aident à fonctionner et à suivre les interactions à des fins d'analyse. Vous avez le droit de refuser notre utilisation des cookies. Pour que nous puissions vous offrir une expérience utilisateur personnalisable, veuillez cliquer sur le bouton Accepter ci-dessous.<0>En savoir plus" msgid "Try again" msgstr "Essayer de nouveau" @@ -857,9 +786,7 @@ msgid "Username set successfully" msgstr "Nom d’utilisateur défini avec succès" msgid "Usernames are public and can't be changed after creation." -msgstr "" -"Les noms d’utilisateur sont publics et ne peuvent pas être modifiés après " -"leur création." +msgstr "Les noms d’utilisateur sont publics et ne peuvent pas être modifiés après leur création." msgid "Using an email:" msgstr "En utilisant un courriel :" @@ -883,27 +810,16 @@ msgid "Want to help shape this product?" msgstr "Vous voulez participer à l'élaboration de ce produit ?" msgid "We can't encrypt files larger than 2GB. Some items will not be uploaded" -msgstr "" -"Nous ne pouvons pas chiffrer les fichiers de plus de 2 Go. Certains éléments " -"ne pourront pas être téléversés" +msgstr "Nous ne pouvons pas chiffrer les fichiers de plus de 2 Go. Certains éléments ne pourront pas être téléversés" msgid "Web3: {0}" msgstr "Web3 : {0}" -msgid "" -"We’ve got a new authentication system in place. All you need to do is enter " -"your password again to migrate your credentials over to the new system." -msgstr "" -"Nous avons mis en place un nouveau système d’authentification. Tout ce que " -"vous avez à faire est de saisir à nouveau votre mot de passe pour migrer vos " -"informations d’identification vers le nouveau système." +msgid "We’ve got a new authentication system in place. All you need to do is enter your password again to migrate your credentials over to the new system." +msgstr "Nous avons mis en place un nouveau système d’authentification. Tout ce que vous avez à faire est de saisir à nouveau votre mot de passe pour migrer vos informations d’identification vers le nouveau système." -msgid "" -"We’ve sent an email to {email}. It contains a verification code that’ll sign " -"you in super quickly!" -msgstr "" -"Nous avons envoyé un courriel à {email}. Il contient un code de vérification " -"pour vous connecter !" +msgid "We’ve sent an email to {email}. It contains a verification code that’ll sign you in super quickly!" +msgstr "Nous avons envoyé un courriel à {email}. Il contient un code de vérification pour vous connecter !" msgid "What a fine day it is." msgstr "Quelle belle journée." @@ -918,8 +834,7 @@ msgid "You can change this later." msgstr "Vous pouvez en changer plus tard." msgid "You can now create shared folders to share a file." -msgstr "" -"Vous pouvez maintenant créer des dossiers partagés pour partager un fichier." +msgstr "Vous pouvez maintenant créer des dossiers partagés pour partager un fichier." msgid "You can't move folders to this path" msgstr "Vous ne pouvez pas déplacer les dossiers vers ce chemin" @@ -928,16 +843,10 @@ msgid "You haven't set a username yet." msgstr "Vous n’avez pas encore défini de nom d’utilisateur." msgid "You will need to sign a message in your wallet to complete sign in." -msgstr "" -"Vous devrez signer un message avec votre wallet pour terminer la procédure " -"connexion." +msgstr "Vous devrez signer un message avec votre wallet pour terminer la procédure connexion." -msgid "" -"Your recovery key can be used to restore your account in place of your " -"backup secret phrase." -msgstr "" -"Votre clé de récupération peut être utilisée pour restaurer votre compte à " -"la place de votre phrase de sauvegarde secrète." +msgid "Your recovery key can be used to restore your account in place of your backup secret phrase." +msgstr "Votre clé de récupération peut être utilisée pour restaurer votre compte à la place de votre phrase de sauvegarde secrète." msgid "me" msgstr "moi" @@ -949,23 +858,13 @@ msgid "unknown" msgstr "inconnu" msgid "{0, plural, one {Downloading {1} file} other {Downloading {2} files}}" -msgstr "" -"{0, plural, one {Téléchargement de {1} fichier} other {Téléchargement de {2} " -"fichiers}}" +msgstr "{0, plural, one {Téléchargement de {1} fichier} other {Téléchargement de {2} fichiers}}" -msgid "" -"{0, plural, one {Encrypting and uploading {1} file} other {Encrypting and " -"uploading {2} files}}" -msgstr "" -"{0, plural, one {Chiffrement et téléversement de {1} fichier} other " -"{Chiffrement et téléversements {2} fichiers}}" +msgid "{0, plural, one {Encrypting and uploading {1} file} other {Encrypting and uploading {2} files}}" +msgstr "{0, plural, one {Chiffrement et téléversement de {1} fichier} other {Chiffrement et téléversements {2} fichiers}}" -msgid "" -"{0, plural, one {You are about to delete {1} item.} other {You are about to " -"delete {2} items.}}" -msgstr "" -"{0, plural, one {Vous êtes sur le point de supprimer {1} élément.} other " -"{Vous êtes sur le point de supprimer {2} éléments.}}" +msgid "{0, plural, one {You are about to delete {1} item.} other {You are about to delete {2} items.}}" +msgstr "{0, plural, one {Vous êtes sur le point de supprimer {1} élément.} other {Vous êtes sur le point de supprimer {2} éléments.}}" msgid "{0} cancelled" msgstr "{0} annulé(s)" @@ -984,21 +883,3 @@ msgstr "{0} {fileProgress} – {1}" msgid "{successCount} files transferred successfully, {0} failed" msgstr "{successCount} fichiers transférés avec succès, {0} échec(s)" - -msgid "An error occurred while downloading the file" -msgstr "Une erreur s'est produite lors du téléchargement du fichier" - -msgid "Encrypting & uploading" -msgstr "Chiffrement et téléversement" - -msgid "Keep original file" -msgstr "Conserver le fichier original" - -msgid "Sharing cancelled" -msgstr "Partage annulé" - -msgid "Sharing your file (Downloading)" -msgstr "Partager votre fichier (Téléchargement)" - -msgid "Transfer complete" -msgstr "Transfert terminé" From 29ac42c0332043adfa2598bc08c7fa9bc4552a57 Mon Sep 17 00:00:00 2001 From: Michael Yankelev Date: Fri, 15 Oct 2021 12:47:03 +0200 Subject: [PATCH 13/23] update image preview markup --- .../Modules/PreviewRenderers/ImagePreview.tsx | 87 ++++++++++--------- 1 file changed, 44 insertions(+), 43 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx b/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx index 22e75953a3..3cd34ecf07 100644 --- a/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx +++ b/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx @@ -74,56 +74,57 @@ const ImagePreview: React.FC = ({ contents, contentType } return (
- - { + {loading + ? + : + { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore - ({ zoomIn, zoomOut, resetTransform }) => ( - <> - {desktop && ( -
- - - -
- )} - {loading - ? - : + ({ zoomIn, zoomOut, resetTransform }) => ( + <> + {desktop && ( +
+ + + +
+ )} + - } - - ) - } - + + + ) + } + + }
) } From 1f19ad7cd332fb18c2616a11ac5a02e26a1f799c Mon Sep 17 00:00:00 2001 From: Michael Yankelev Date: Fri, 15 Oct 2021 12:54:01 +0200 Subject: [PATCH 14/23] fix lint --- .../Modules/PreviewRenderers/ImagePreview.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx b/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx index 3cd34ecf07..1810d79165 100644 --- a/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx +++ b/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx @@ -80,12 +80,12 @@ const ImagePreview: React.FC = ({ contents, contentType } type='inherit' /> : + options={{ + limitToBounds: true, + limitToWrapper: true, + minScale: 0.2 + }} + > { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore From 89d05bb7277634db7f45ebb9f94b9850a969bbd4 Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Thu, 21 Oct 2021 10:47:45 +0000 Subject: [PATCH 15/23] lingui extract --- packages/files-ui/src/locales/fr/messages.po | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/files-ui/src/locales/fr/messages.po b/packages/files-ui/src/locales/fr/messages.po index e669bfcfb5..461b228c09 100644 --- a/packages/files-ui/src/locales/fr/messages.po +++ b/packages/files-ui/src/locales/fr/messages.po @@ -5,8 +5,7 @@ msgstr "" "POT-Creation-Date: 2021-04-23 11:05+0200\n" "PO-Revision-Date: 2021-10-20 00:49+0000\n" "Last-Translator: J. Lavoie \n" -"Language-Team: French \n" +"Language-Team: French \n" "Language: fr\n" "MIME-Version: 1.0\n" "Content-Type: text/plain; charset=utf-8\n" From 1073dcd1aee94c594b7bb15661f7c021726b5876 Mon Sep 17 00:00:00 2001 From: Michael Yankelev Date: Thu, 21 Oct 2021 21:27:53 +0200 Subject: [PATCH 16/23] fix revocation --- .../src/Components/Modules/FilePreviewModal.tsx | 10 +++------- .../Modules/PreviewRenderers/ImagePreview.tsx | 16 ++++++++-------- 2 files changed, 11 insertions(+), 15 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx b/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx index 7e95fdfbba..4444357263 100644 --- a/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx +++ b/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx @@ -233,16 +233,12 @@ const FilePreviewModal = ({ file, nextFile, previousFile, closePreview, filePath } }) - useHotkeys("Left,ArrowLeft", () => { - if (file && previousFile) { - previousFile() - } + useHotkeys("Left,ArrowLeft", () => { + previousFile && previousFile() }) useHotkeys("Right,ArrowRight", () => { - if (file && nextFile) { - nextFile() - } + nextFile && nextFile() }) const handleDownload = useCallback(() => { diff --git a/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx b/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx index 1810d79165..9413fd57f0 100644 --- a/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx +++ b/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react" +import React, { useEffect, useRef, useState } from "react" import { IPreviewRendererProps } from "../FilePreviewModal" import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch" import heicConvert from "heic-convert" @@ -47,8 +47,8 @@ const useStyles = makeStyles( const ImagePreview: React.FC = ({ contents, contentType }) => { const [imageUrl, setImageUrl] = useState() const [loading, setLoading] = useState(false) - useEffect(() => { + console.log('creating new link') if (contentType !== "image/heic") { setImageUrl(URL.createObjectURL(contents)) } else { @@ -61,14 +61,10 @@ const ImagePreview: React.FC = ({ contents, contentType } })) .catch(console.error) .then(c => setImageUrl(URL.createObjectURL(new Blob([c])))) + .then(() => console.log('created new link')) .finally(() => setLoading(false)) } - - return () => { - imageUrl && URL.revokeObjectURL(imageUrl) - } - // eslint-disable-next-line - }, [contents, contentType]) + }, []) const classes = useStyles() const { desktop } = useThemeSwitcher() @@ -118,6 +114,10 @@ const ImagePreview: React.FC = ({ contents, contentType } src={imageUrl} alt="" className={classes.root} + onLoad={() => { + console.log('revoking') + imageUrl && URL.revokeObjectURL(imageUrl) + }} /> From 27b6162ccadfb4f1bbb30f49dc972031c3e9190d Mon Sep 17 00:00:00 2001 From: Michael Yankelev Date: Thu, 21 Oct 2021 22:59:25 +0200 Subject: [PATCH 17/23] fix wrong image --- .../Components/Modules/FilePreviewModal.tsx | 23 +++++++++++++------ .../Modules/PreviewRenderers/ImagePreview.tsx | 9 +++----- 2 files changed, 19 insertions(+), 13 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx b/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx index 4444357263..b32b2ad50a 100644 --- a/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx +++ b/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx @@ -214,17 +214,23 @@ const FilePreviewModal = ({ file, nextFile, previousFile, closePreview, filePath } else { bucketId = bucket.id } - !!previewRendererKey && getFile({ file, filePath: getPathWithFile(filePath, file.name), bucketId }) - .then(setFileContent) + + if (!!previewRendererKey) { + setFileContent(undefined) + getFile({ file, filePath: getPathWithFile(filePath, file.name), bucketId }) + .then((content) => { + setFileContent(content) + }) .catch(console.error) + } }, [file, filePath, getFile, bucket, buckets, previewRendererKey]) const PreviewComponent = - content_type && - fileContent && - previewRendererKey && + !!content_type && + !!fileContent && + !!previewRendererKey && SUPPORTED_FILE_TYPES[previewRendererKey] useHotkeys("Esc,Escape", () => { @@ -388,8 +394,11 @@ const FilePreviewModal = ({ file, nextFile, previousFile, closePreview, filePath !error && compatibleFilesMatcher.match(content_type) && fileContent && - PreviewComponent && } + PreviewComponent && + + } {desktop && ( diff --git a/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx b/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx index 9413fd57f0..07b2a87bd9 100644 --- a/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx +++ b/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx @@ -64,7 +64,8 @@ const ImagePreview: React.FC = ({ contents, contentType } .then(() => console.log('created new link')) .finally(() => setLoading(false)) } - }, []) + }, [contents, contentType]) + const classes = useStyles() const { desktop } = useThemeSwitcher() @@ -114,11 +115,7 @@ const ImagePreview: React.FC = ({ contents, contentType } src={imageUrl} alt="" className={classes.root} - onLoad={() => { - console.log('revoking') - imageUrl && URL.revokeObjectURL(imageUrl) - }} - /> + onLoad={() => imageUrl && URL.revokeObjectURL(imageUrl)} /> ) From daed9717b134f7cbb8f9af9b036229148728c822 Mon Sep 17 00:00:00 2001 From: Michael Yankelev Date: Thu, 21 Oct 2021 22:59:51 +0200 Subject: [PATCH 18/23] remove unused ref --- .../src/Components/Modules/PreviewRenderers/ImagePreview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx b/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx index 07b2a87bd9..d1594d6b20 100644 --- a/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx +++ b/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, useState } from "react" +import React, { useEffect, useState } from "react" import { IPreviewRendererProps } from "../FilePreviewModal" import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch" import heicConvert from "heic-convert" From 5b69e05ce5b9f5689b4ad093bf99c9a867ebe945 Mon Sep 17 00:00:00 2001 From: Michael Yankelev Date: Thu, 21 Oct 2021 23:03:30 +0200 Subject: [PATCH 19/23] fix lint --- .../Components/Modules/FilePreviewModal.tsx | 20 +++++++++---------- .../Modules/PreviewRenderers/ImagePreview.tsx | 6 +++--- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx b/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx index b32b2ad50a..708a6c1493 100644 --- a/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx +++ b/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx @@ -214,15 +214,15 @@ const FilePreviewModal = ({ file, nextFile, previousFile, closePreview, filePath } else { bucketId = bucket.id } - - if (!!previewRendererKey) { + + if (previewRendererKey) { setFileContent(undefined) getFile({ file, filePath: getPathWithFile(filePath, file.name), bucketId }) - .then((content) => { - setFileContent(content) - }) - .catch(console.error) - } + .then((content) => { + setFileContent(content) + }) + .catch(console.error) + } }, [file, filePath, getFile, bucket, buckets, previewRendererKey]) @@ -239,7 +239,7 @@ const FilePreviewModal = ({ file, nextFile, previousFile, closePreview, filePath } }) - useHotkeys("Left,ArrowLeft", () => { + useHotkeys("Left,ArrowLeft", () => { previousFile && previousFile() }) @@ -394,8 +394,8 @@ const FilePreviewModal = ({ file, nextFile, previousFile, closePreview, filePath !error && compatibleFilesMatcher.match(content_type) && fileContent && - PreviewComponent && - } diff --git a/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx b/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx index d1594d6b20..44fc758c49 100644 --- a/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx +++ b/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx @@ -48,7 +48,7 @@ const ImagePreview: React.FC = ({ contents, contentType } const [imageUrl, setImageUrl] = useState() const [loading, setLoading] = useState(false) useEffect(() => { - console.log('creating new link') + console.log("creating new link") if (contentType !== "image/heic") { setImageUrl(URL.createObjectURL(contents)) } else { @@ -61,11 +61,11 @@ const ImagePreview: React.FC = ({ contents, contentType } })) .catch(console.error) .then(c => setImageUrl(URL.createObjectURL(new Blob([c])))) - .then(() => console.log('created new link')) + .then(() => console.log("created new link")) .finally(() => setLoading(false)) } }, [contents, contentType]) - + const classes = useStyles() const { desktop } = useThemeSwitcher() From 19d101cc45e43e2f9ecf63587acc311a81421c2f Mon Sep 17 00:00:00 2001 From: Michael Yankelev <12774278+FSM1@users.noreply.github.com> Date: Fri, 22 Oct 2021 12:09:27 +0200 Subject: [PATCH 20/23] Update packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx Co-authored-by: Tanmoy Basak Anjan --- .../src/Components/Modules/PreviewRenderers/ImagePreview.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx b/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx index 44fc758c49..740c82d1e2 100644 --- a/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx +++ b/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx @@ -48,7 +48,6 @@ const ImagePreview: React.FC = ({ contents, contentType } const [imageUrl, setImageUrl] = useState() const [loading, setLoading] = useState(false) useEffect(() => { - console.log("creating new link") if (contentType !== "image/heic") { setImageUrl(URL.createObjectURL(contents)) } else { From 9215fcbd4f2dfe9e52854f2f422070471126c780 Mon Sep 17 00:00:00 2001 From: Michael Yankelev <12774278+FSM1@users.noreply.github.com> Date: Fri, 22 Oct 2021 12:10:13 +0200 Subject: [PATCH 21/23] Update packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx --- .../src/Components/Modules/PreviewRenderers/ImagePreview.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx b/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx index 740c82d1e2..a2217961b1 100644 --- a/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx +++ b/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx @@ -60,7 +60,6 @@ const ImagePreview: React.FC = ({ contents, contentType } })) .catch(console.error) .then(c => setImageUrl(URL.createObjectURL(new Blob([c])))) - .then(() => console.log("created new link")) .finally(() => setLoading(false)) } }, [contents, contentType]) From f1e4ddc89d52dbf8a6f4bc6210af11b57fb510e5 Mon Sep 17 00:00:00 2001 From: Michael Yankelev Date: Fri, 22 Oct 2021 12:56:22 +0200 Subject: [PATCH 22/23] resolve openssl issue --- packages/files-ui/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/files-ui/package.json b/packages/files-ui/package.json index c90047ff7c..bcaa1044e7 100644 --- a/packages/files-ui/package.json +++ b/packages/files-ui/package.json @@ -78,7 +78,7 @@ "scripts": { "postinstall": "yarn compile", "start": "yarn compile && craco --max_old_space_size=4096 start", - "build": "craco --max_old_space_size=4096 build", + "build": "craco --max_old_space_size=4096 --openssl-legacy-provider build ", "sentry": "(export REACT_APP_SENTRY_RELEASE=$(sentry-cli releases propose-version); node scripts/sentry.js)", "release": "(export REACT_APP_SENTRY_RELEASE=$(sentry-cli releases propose-version); yarn compile && yarn build && node scripts/sentry.js)", "test": "cypress open", From 0e434e306bedea458e9027c43faa7ae2f81205cf Mon Sep 17 00:00:00 2001 From: Michael Yankelev Date: Fri, 22 Oct 2021 13:12:16 +0200 Subject: [PATCH 23/23] update remaining build commands --- packages/gaming-ui/package.json | 2 +- packages/storage-ui/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/gaming-ui/package.json b/packages/gaming-ui/package.json index e3029a6be3..275518b256 100644 --- a/packages/gaming-ui/package.json +++ b/packages/gaming-ui/package.json @@ -63,7 +63,7 @@ "scripts": { "postinstall": "yarn compile", "start": "yarn compile && craco --max_old_space_size=4096 start", - "build": "craco --max_old_space_size=4096 build", + "build": "craco --max_old_space_size=4096 --openssl-legacy-provider build ", "sentry": "(export REACT_APP_SENTRY_RELEASE=$(sentry-cli releases propose-version); node scripts/sentry.js)", "release": "(export REACT_APP_SENTRY_RELEASE=$(sentry-cli releases propose-version); yarn compile && yarn build && node scripts/sentry.js)", "test": "cypress open", diff --git a/packages/storage-ui/package.json b/packages/storage-ui/package.json index b36126a35b..d55c71882d 100644 --- a/packages/storage-ui/package.json +++ b/packages/storage-ui/package.json @@ -71,7 +71,7 @@ "scripts": { "postinstall": "yarn compile", "start": "yarn compile && craco --max_old_space_size=4096 start", - "build": "craco --max_old_space_size=4096 build", + "build": "craco --max_old_space_size=4096 --openssl-legacy-provider build ", "sentry": "(export REACT_APP_SENTRY_RELEASE=$(sentry-cli releases propose-version); node scripts/sentry.js)", "release": "(export REACT_APP_SENTRY_RELEASE=$(sentry-cli releases propose-version); yarn compile && yarn build && node scripts/sentry.js)", "test": "cypress open",