From 19e235d265d5c9198333489589e813492eabbd05 Mon Sep 17 00:00:00 2001 From: Alexey Safronov Date: Thu, 28 Apr 2022 22:05:43 +0300 Subject: [PATCH] Web: Files: Added creation of thumbnail on open Info Panel + hide loading Info Panel api share on Personal --- packages/asc-web-common/utils/index.js | 4 + .../pages/Home/InfoPanel/Body/SingleItem.js | 115 +++++++++++------- .../src/pages/Home/InfoPanel/Body/index.js | 8 ++ .../ASC.Files/Client/src/store/FilesStore.js | 6 + 4 files changed, 90 insertions(+), 43 deletions(-) diff --git a/packages/asc-web-common/utils/index.js b/packages/asc-web-common/utils/index.js index 2a902e13d9..61b49d22d4 100644 --- a/packages/asc-web-common/utils/index.js +++ b/packages/asc-web-common/utils/index.js @@ -343,3 +343,7 @@ export function getFolderOptions(folderId, filter) { return options; } + +export function sleep(ms) { + return new Promise((resolve) => setTimeout(resolve, ms)); +} diff --git a/products/ASC.Files/Client/src/pages/Home/InfoPanel/Body/SingleItem.js b/products/ASC.Files/Client/src/pages/Home/InfoPanel/Body/SingleItem.js index 9c0624f8a2..4d8ca2d67f 100644 --- a/products/ASC.Files/Client/src/pages/Home/InfoPanel/Body/SingleItem.js +++ b/products/ASC.Files/Client/src/pages/Home/InfoPanel/Body/SingleItem.js @@ -1,5 +1,6 @@ import { FileType } from "@appserver/common/constants"; import { LANGUAGE } from "@appserver/common/constants"; +import { sleep } from "@appserver/common/utils"; import Link from "@appserver/components/link"; import Text from "@appserver/components/text"; import Tooltip from "@appserver/components/tooltip"; @@ -31,6 +32,8 @@ const SingleItem = (props) => { dontShowLocation, dontShowAccess, personal, + createThumbnail, + getFileInfo, } = props; let updateSubscription = true; @@ -198,46 +201,70 @@ const SingleItem = (props) => { const loadAsyncData = async (displayedItem, selectedItem) => { if (!updateSubscription) return; - const updateLoadedItemProperties = async (displayedItem, selectedItem) => { - const parentFolderId = selectedItem.isFolder - ? selectedItem.parentId - : selectedItem.folderId; + if ( + !selectedItem.thumbnailUrl && + !selectedItem.isFolder && + selectedItem.thumbnailStatus === 0 && + (selectedItem.fileType === FileType.Image || + selectedItem.fileType === FileType.Spreadsheet || + selectedItem.fileType === FileType.Presentation || + selectedItem.fileType === FileType.Document) + ) { + await createThumbnail(selectedItem.id); - const noLocationProperties = [...displayedItem.properties].filter( - (dip) => dip.id !== "Location" - ); + await sleep(5000); - let result; - await getFolderInfo(parentFolderId) - .catch(() => { - result = noLocationProperties; - }) - .then((data) => { - if (!data) { - result = noLocationProperties; - return; - } - result = [...displayedItem.properties].map((dip) => - dip.id === "Location" - ? { - id: "Location", - title: t("Location"), - content: ( - - {data.title} - - ), - } - : dip - ); + const newFileInfo = await getFileInfo(selectedItem.id); + + if (newFileInfo.thumbnailUrl) { + displayedItem.thumbnailUrl = newFileInfo.thumbnailUrl; + + setItem({ + ...displayedItem, }); + } + } - return result; - }; + // const updateLoadedItemProperties = async (displayedItem, selectedItem) => { + // const parentFolderId = selectedItem.isFolder + // ? selectedItem.parentId + // : selectedItem.folderId; + + // const noLocationProperties = [...displayedItem.properties].filter( + // (dip) => dip.id !== "Location" + // ); + + // let result; + // await getFolderInfo(parentFolderId) + // .catch(() => { + // result = noLocationProperties; + // }) + // .then((data) => { + // if (!data) { + // result = noLocationProperties; + // return; + // } + // result = [...displayedItem.properties].map((dip) => + // dip.id === "Location" + // ? { + // id: "Location", + // title: t("Location"), + // content: ( + // + // {data.title} + // + // ), + // } + // : dip + // ); + // }); + + // return result; + // }; const updateLoadedItemAccess = async (selectedItem) => { const accesses = await getShareUsers( @@ -283,12 +310,14 @@ const SingleItem = (props) => { return; } - const access = await updateLoadedItemAccess(selectedItem); - setItem({ - ...displayedItem, - // properties: properties, - access: access, - }); + if (!personal) { + const access = await updateLoadedItemAccess(selectedItem); + setItem({ + ...displayedItem, + // properties: properties, + access: access, + }); + } }; const openSharingPanel = () => { @@ -310,7 +339,7 @@ const SingleItem = (props) => { {item.title} - {selectedItem.thumbnailUrl ? ( + {item.thumbnailUrl ? ( diff --git a/products/ASC.Files/Client/src/pages/Home/InfoPanel/Body/index.js b/products/ASC.Files/Client/src/pages/Home/InfoPanel/Body/index.js index 9dd5422e56..d820885185 100644 --- a/products/ASC.Files/Client/src/pages/Home/InfoPanel/Body/index.js +++ b/products/ASC.Files/Client/src/pages/Home/InfoPanel/Body/index.js @@ -25,6 +25,8 @@ const InfoPanelBodyContent = ({ isGallery, gallerySelected, personal, + createThumbnail, + getFileInfo, }) => { const singleItem = (item) => { const dontShowLocation = item.isFolder && item.parentId === 0; @@ -49,6 +51,8 @@ const InfoPanelBodyContent = ({ dontShowSize={dontShowSize} dontShowAccess={dontShowAccess} personal={personal} + createThumbnail={createThumbnail} + getFileInfo={getFileInfo} /> ); }; @@ -99,6 +103,8 @@ export default inject( getFolderInfo, getShareUsers, gallerySelected, + createThumbnail, + getFileInfo, } = filesStore; const { getIcon, getFolderIcon } = settingsStore; const { onSelectItem } = filesActionsStore; @@ -130,6 +136,8 @@ export default inject( isFavoritesFolder, gallerySelected, personal, + createThumbnail, + getFileInfo, }; } )( diff --git a/products/ASC.Files/Client/src/store/FilesStore.js b/products/ASC.Files/Client/src/store/FilesStore.js index fca35e896f..e335ae2660 100644 --- a/products/ASC.Files/Client/src/store/FilesStore.js +++ b/products/ASC.Files/Client/src/store/FilesStore.js @@ -1955,6 +1955,12 @@ class FilesStore { if (fileIds.length) return api.files.createThumbnails(fileIds); }; + createThumbnail = async (fileId) => { + if (!fileId) return; + + await api.files.createThumbnails([fileId]); + }; + setIsUpdatingRowItem = (updating) => { this.isUpdatingRowItem = updating; };