diff --git a/src/components/PhotoFrame.tsx b/src/components/PhotoFrame.tsx index 8a7a9e1c8..10c2a7fca 100644 --- a/src/components/PhotoFrame.tsx +++ b/src/components/PhotoFrame.tsx @@ -20,13 +20,13 @@ import CloudUpload from './CloudUpload'; import { isInsideBox, isSameDay as isSameDayAnyYear } from 'utils/search'; import { SetDialogMessage } from './MessageDialog'; import { VIDEO_PLAYBACK_FAILED } from 'utils/common/errorUtil'; +import { checkFileFormatSupport } from 'utils/file'; const DATE_CONTAINER_HEIGHT = 45; const IMAGE_CONTAINER_HEIGHT = 200; const NO_OF_PAGES = 2; const A_DAY = 24 * 60 * 60 * 1000; -const WAIT_FOR_VIDEO_PLAYBACK=1*1000; - +const WAIT_FOR_VIDEO_PLAYBACK = 1 * 1000; interface TimeStampListItem { itemType: ITEM_TYPE; items?: File[]; @@ -112,7 +112,7 @@ interface Props { searchMode: boolean; search: Search; setSearchStats: setSearchStats; - setDialogMessage:SetDialogMessage + setDialogMessage: SetDialogMessage } const PhotoFrame = ({ @@ -244,41 +244,60 @@ const PhotoFrame = ({ } if (!fetching[item.dataIndex]) { fetching[item.dataIndex] = true; - const url = await DownloadManager.getFile(item); - if (item.metadata.fileType === FILE_TYPE.VIDEO) { - try{ - await new Promise(async (resolve, reject) => { - let video = document.createElement('video'); - video.addEventListener('timeupdate', function () { - clearTimeout(t) - resolve(null) - }); - video.preload = 'metadata'; - video.src = url; - video.currentTime = 3; - const t=setTimeout( - () =>{ - reject( - `${VIDEO_PLAYBACK_FAILED} err: + let url = null; + try { + checkFileFormatSupport(item.metadata.title); + url = await DownloadManager.getFile(item); + if (item.metadata.fileType === FILE_TYPE.VIDEO) { + + await new Promise(async (resolve, reject) => { + let video = document.createElement('video'); + video.addEventListener('timeupdate', function () { + clearTimeout(t) + resolve(null) + }); + video.preload = 'metadata'; + video.src = url; + video.currentTime = 3; + const t = setTimeout( + () => { + reject( + `${VIDEO_PLAYBACK_FAILED} err: wait time exceeded` - )}, + ) + }, WAIT_FOR_VIDEO_PLAYBACK - ); - }); - item.html = ` + ); + }); + item.html = ` `; - delete item.src; - item.w = window.innerWidth; - }catch(e){ - const downloadFile=()=>{ + delete item.src; + item.w = window.innerWidth; + + } else { + item.src = url; + } + updateSrcUrl(item.dataIndex, url); + item.h = window.innerHeight; + try { + instance.invalidateCurrItems(); + instance.updateSize(true); + } catch (e) { + // ignore + } + } + catch (e) { + + const downloadFile = async () => { const a = document.createElement('a'); a.style.display = 'none'; + url = url ?? await DownloadManager.getFile(item); a.href = url; - a.download =item.metadata.title; + a.download = item.metadata.title; document.body.appendChild(a); a.click(); a.remove(); @@ -295,24 +314,13 @@ const PhotoFrame = ({ }, close: { text: constants.CLOSE, - action:()=>setOpen(false) + action: () => setOpen(false) }, }); return; - } - } else { - item.src = url; - } - updateSrcUrl(item.dataIndex, url); - item.h = window.innerHeight; - try { - instance.invalidateCurrItems(); - instance.updateSize(true); - } catch (e) { - // ignore - } + }; } - }; + } let idSet = new Set(); const filteredData = files @@ -418,13 +426,13 @@ const PhotoFrame = ({ ) ? 'Today' : isSameDay( - new Date(currentDate), - new Date(Date.now() - A_DAY) - ) - ? 'Yesterday' - : dateTimeFormat.format( - currentDate - ), + new Date(currentDate), + new Date(Date.now() - A_DAY) + ) + ? 'Yesterday' + : dateTimeFormat.format( + currentDate + ), }); timeStampList.push({ itemType: ITEM_TYPE.TILE, @@ -473,7 +481,7 @@ const PhotoFrame = ({ timeStampList[index].itemType === - ITEM_TYPE.TILE + ITEM_TYPE.TILE ? IMAGE_CONTAINER_HEIGHT : DATE_CONTAINER_HEIGHT } @@ -489,22 +497,22 @@ const PhotoFrame = ({ style={ timeStampList[index] .itemType === - ITEM_TYPE.BANNER + ITEM_TYPE.BANNER ? { - ...style, - top: Math.max( - Number( - style.top - ), - height - 45 - ), - height: - width < 450 - ? Number( - style.height - ) * 2 - : style.height, - } + ...style, + top: Math.max( + Number( + style.top + ), + height - 45 + ), + height: + width < 450 + ? Number( + style.height + ) * 2 + : style.height, + } : style } > @@ -512,14 +520,14 @@ const PhotoFrame = ({ columns={ timeStampList[index] .itemType === - ITEM_TYPE.TILE + ITEM_TYPE.TILE ? columns : 1 } > {timeStampList[index] .itemType === - ITEM_TYPE.TIME ? ( + ITEM_TYPE.TIME ? ( { timeStampList[ @@ -528,8 +536,8 @@ const PhotoFrame = ({ } ) : timeStampList[index] - .itemType === - ITEM_TYPE.BANNER ? ( + .itemType === + ITEM_TYPE.BANNER ? ( <> { timeStampList[ @@ -548,7 +556,7 @@ const PhotoFrame = ({ index ] .itemStartIndex + - idx + idx ); } ) diff --git a/src/services/uploadService.ts b/src/services/uploadService.ts index ff9d6f179..e5e4fe6bf 100644 --- a/src/services/uploadService.ts +++ b/src/services/uploadService.ts @@ -17,6 +17,7 @@ import { fileIsHEIC, convertHEIC2JPEG, sortFilesIntoCollections, + checkFileFormatSupport, } from 'utils/file'; const ENDPOINT = getEndpoint(); @@ -621,9 +622,11 @@ class UploadService { file: globalThis.File ): Promise { try { + checkFileFormatSupport(file.name) let canvas = document.createElement('canvas'); let canvas_CTX = canvas.getContext('2d'); let imageURL = null; + let timeout=null; if (file.type.match(TYPE_IMAGE) || fileIsHEIC(file.name)) { if (fileIsHEIC(file.name)) { file = new globalThis.File( @@ -650,13 +653,14 @@ class UploadService { THUMBNAIL_HEIGHT ); image = undefined; + clearTimeout(timeout); resolve(null); } catch (e) { console.error(e); reject(`${THUMBNAIL_GENERATION_FAILED} err: ${e}`); } }; - setTimeout( + timeout=setTimeout( () => reject( `${THUMBNAIL_GENERATION_FAILED} err: diff --git a/src/utils/file/index.ts b/src/utils/file/index.ts index 3f2e73774..b535c0b6b 100644 --- a/src/utils/file/index.ts +++ b/src/utils/file/index.ts @@ -2,6 +2,7 @@ import { deleteFiles, File } from 'services/fileService'; import { runningInBrowser } from 'utils/common'; const TYPE_HEIC = 'heic'; +const UNSUPPORTED_FORMATS = ['flv', "mkv", "3gp", "avi", "wmv"]; export function downloadAsFile(filename: string, content: string) { const file = new Blob([content], { @@ -62,3 +63,11 @@ export function getSelectedFiles(selectedFiles, files: File[]): File[] { } return filesToDelete; } + +export function checkFileFormatSupport(name :string){ + for (let format of UNSUPPORTED_FORMATS){ + if ( name.toLowerCase().endsWith(format)){ + throw "un supported format"; + } + } +}