diff --git a/src/components/PhotoSwipe/PhotoSwipe.tsx b/src/components/PhotoSwipe/PhotoSwipe.tsx index 3c4d44f2b..511d472d8 100644 --- a/src/components/PhotoSwipe/PhotoSwipe.tsx +++ b/src/components/PhotoSwipe/PhotoSwipe.tsx @@ -10,6 +10,7 @@ import { } from 'services/collectionService'; import { file } from 'services/fileService'; import constants from 'utils/strings/constants'; +import DownloadManger from 'services/downloadManager'; interface Iprops { isOpen: boolean; @@ -123,10 +124,10 @@ function PhotoSwipe(props: Iprops) { setFavItemIds(favItemIds); } }; - const downloadFile = (file) => { + const downloadFile = async (file) => { const a = document.createElement('a'); a.style.display = 'none'; - a.href = file.msrc; + a.href = await DownloadManger.getFile(file); a.download = file.metadata['title']; document.body.appendChild(a); a.click(); diff --git a/src/pages/gallery/components/PreviewCard.tsx b/src/pages/gallery/components/PreviewCard.tsx index ab6db985c..f0d30782f 100644 --- a/src/pages/gallery/components/PreviewCard.tsx +++ b/src/pages/gallery/components/PreviewCard.tsx @@ -1,8 +1,9 @@ import React, { useEffect, useState } from 'react'; -import { file, getPreview } from 'services/fileService'; +import { file } from 'services/fileService'; import { getData, LS_KEYS } from 'utils/storage/localStorage'; import styled from 'styled-components'; import PlayCircleOutline from 'components/PlayCircleOutline'; +import DownloadManager from 'services/downloadManager'; interface IProps { data: file; @@ -48,7 +49,7 @@ export default function PreviewCard(props: IProps) { if (data && !data.msrc) { const main = async () => { const token = getData(LS_KEYS.USER).token; - const url = await getPreview(token, data); + const url = await DownloadManager.getPreview(data); setImgSrc(url); data.msrc = url; updateUrl(url); diff --git a/src/pages/gallery/index.tsx b/src/pages/gallery/index.tsx index abbda419e..60f65d893 100644 --- a/src/pages/gallery/index.tsx +++ b/src/pages/gallery/index.tsx @@ -1,14 +1,7 @@ import React, { useEffect, useState } from 'react'; import { useRouter } from 'next/router'; -import Spinner from 'react-bootstrap/Spinner'; import { getKey, SESSION_KEYS } from 'utils/storage/sessionStorage'; -import { - file, - getFile, - getPreview, - syncData, - localFiles, -} from 'services/fileService'; +import { file, syncData, localFiles } from 'services/fileService'; import { getData, LS_KEYS } from 'utils/storage/localStorage'; import PreviewCard from './components/PreviewCard'; import { getActualKey, getToken } from 'utils/common/key'; @@ -20,6 +13,7 @@ import { VariableSizeList as List } from 'react-window'; import LoadingBar from 'react-top-loading-bar'; import Collections from './components/Collections'; import Upload from './components/Upload'; +import DownloadManager from '../../services/downloadManager'; import { collection, syncCollections, @@ -247,9 +241,8 @@ export default function Gallery(props) { }; const getSlideData = async (instance: any, index: number, item: file) => { - const token = getData(LS_KEYS.USER).token; if (!item.msrc) { - const url = await getPreview(token, item); + const url = await DownloadManager.getPreview(item); updateUrl(item.dataIndex)(url); item.msrc = url; if (!item.src) { @@ -266,7 +259,7 @@ export default function Gallery(props) { } if (!fetching[item.dataIndex]) { fetching[item.dataIndex] = true; - const url = await getFile(token, item); + const url = await DownloadManager.getFile(item); updateSrcUrl(item.dataIndex, url); if (item.metadata.fileType === FILE_TYPE.VIDEO) { item.html = ` diff --git a/src/services/fileService.ts b/src/services/fileService.ts index 11ae3bc57..8dc12cd66 100644 --- a/src/services/fileService.ts +++ b/src/services/fileService.ts @@ -154,58 +154,6 @@ export const getFiles = async ( console.log('Get files failed' + e); } }; -export const getPreview = async (token: string, file: file) => { - try { - const cache = await caches.open('thumbs'); - const cacheResp: Response = await cache.match(file.id.toString()); - if (cacheResp) { - return URL.createObjectURL(await cacheResp.blob()); - } - const resp = await HTTPService.get( - `${ENDPOINT}/files/preview/${file.id}`, - null, - { 'X-Auth-Token': token }, - { responseType: 'arraybuffer' } - ); - const worker = await new CryptoWorker(); - const decrypted: any = await worker.decryptThumbnail( - new Uint8Array(resp.data), - await worker.fromB64(file.thumbnail.decryptionHeader), - file.key - ); - try { - await cache.put( - file.id.toString(), - new Response(new Blob([decrypted])) - ); - } catch (e) { - // TODO: handle storage full exception. - } - return URL.createObjectURL(new Blob([decrypted])); - } catch (e) { - console.log('get preview Failed' + e); - } -}; - -export const getFile = async (token: string, file: file) => { - try { - const resp = await HTTPService.get( - `${ENDPOINT}/files/download/${file.id}`, - null, - { 'X-Auth-Token': token }, - { responseType: 'arraybuffer' } - ); - const worker = await new CryptoWorker(); - const decrypted: any = await worker.decryptFile( - new Uint8Array(resp.data), - await worker.fromB64(file.file.decryptionHeader), - file.key - ); - return URL.createObjectURL(new Blob([decrypted])); - } catch (e) { - console.log('get file failed ' + e); - } -}; const removeDeletedCollectionFiles = async ( collections: collection[],