added unsupported format check

This commit is contained in:
Abhinav-grd 2021-06-01 21:22:34 +05:30
parent 272e2a33dc
commit 8d6de9b73e
3 changed files with 92 additions and 71 deletions

View file

@ -20,13 +20,13 @@ import CloudUpload from './CloudUpload';
import { isInsideBox, isSameDay as isSameDayAnyYear } from 'utils/search'; import { isInsideBox, isSameDay as isSameDayAnyYear } from 'utils/search';
import { SetDialogMessage } from './MessageDialog'; import { SetDialogMessage } from './MessageDialog';
import { VIDEO_PLAYBACK_FAILED } from 'utils/common/errorUtil'; import { VIDEO_PLAYBACK_FAILED } from 'utils/common/errorUtil';
import { checkFileFormatSupport } from 'utils/file';
const DATE_CONTAINER_HEIGHT = 45; const DATE_CONTAINER_HEIGHT = 45;
const IMAGE_CONTAINER_HEIGHT = 200; const IMAGE_CONTAINER_HEIGHT = 200;
const NO_OF_PAGES = 2; const NO_OF_PAGES = 2;
const A_DAY = 24 * 60 * 60 * 1000; const A_DAY = 24 * 60 * 60 * 1000;
const WAIT_FOR_VIDEO_PLAYBACK=1*1000; const WAIT_FOR_VIDEO_PLAYBACK = 1 * 1000;
interface TimeStampListItem { interface TimeStampListItem {
itemType: ITEM_TYPE; itemType: ITEM_TYPE;
items?: File[]; items?: File[];
@ -112,7 +112,7 @@ interface Props {
searchMode: boolean; searchMode: boolean;
search: Search; search: Search;
setSearchStats: setSearchStats; setSearchStats: setSearchStats;
setDialogMessage:SetDialogMessage setDialogMessage: SetDialogMessage
} }
const PhotoFrame = ({ const PhotoFrame = ({
@ -244,41 +244,60 @@ const PhotoFrame = ({
} }
if (!fetching[item.dataIndex]) { if (!fetching[item.dataIndex]) {
fetching[item.dataIndex] = true; fetching[item.dataIndex] = true;
const url = await DownloadManager.getFile(item); let url = null;
if (item.metadata.fileType === FILE_TYPE.VIDEO) { try {
try{ checkFileFormatSupport(item.metadata.title);
await new Promise(async (resolve, reject) => { url = await DownloadManager.getFile(item);
let video = document.createElement('video'); if (item.metadata.fileType === FILE_TYPE.VIDEO) {
video.addEventListener('timeupdate', function () {
clearTimeout(t) await new Promise(async (resolve, reject) => {
resolve(null) let video = document.createElement('video');
}); video.addEventListener('timeupdate', function () {
video.preload = 'metadata'; clearTimeout(t)
video.src = url; resolve(null)
video.currentTime = 3; });
const t=setTimeout( video.preload = 'metadata';
() =>{ video.src = url;
reject( video.currentTime = 3;
`${VIDEO_PLAYBACK_FAILED} err: const t = setTimeout(
() => {
reject(
`${VIDEO_PLAYBACK_FAILED} err:
wait time exceeded` wait time exceeded`
)}, )
},
WAIT_FOR_VIDEO_PLAYBACK WAIT_FOR_VIDEO_PLAYBACK
); );
}); });
item.html = ` item.html = `
<video width="320" height="240" controls> <video width="320" height="240" controls>
<source src="${url}" /> <source src="${url}" />
Your browser does not support the video tag. Your browser does not support the video tag.
</video> </video>
`; `;
delete item.src; delete item.src;
item.w = window.innerWidth; item.w = window.innerWidth;
}catch(e){
const downloadFile=()=>{ } 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'); const a = document.createElement('a');
a.style.display = 'none'; a.style.display = 'none';
url = url ?? await DownloadManager.getFile(item);
a.href = url; a.href = url;
a.download =item.metadata.title; a.download = item.metadata.title;
document.body.appendChild(a); document.body.appendChild(a);
a.click(); a.click();
a.remove(); a.remove();
@ -295,24 +314,13 @@ const PhotoFrame = ({
}, },
close: { close: {
text: constants.CLOSE, text: constants.CLOSE,
action:()=>setOpen(false) action: () => setOpen(false)
}, },
}); });
return; 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(); let idSet = new Set();
const filteredData = files const filteredData = files
@ -418,13 +426,13 @@ const PhotoFrame = ({
) )
? 'Today' ? 'Today'
: isSameDay( : isSameDay(
new Date(currentDate), new Date(currentDate),
new Date(Date.now() - A_DAY) new Date(Date.now() - A_DAY)
) )
? 'Yesterday' ? 'Yesterday'
: dateTimeFormat.format( : dateTimeFormat.format(
currentDate currentDate
), ),
}); });
timeStampList.push({ timeStampList.push({
itemType: ITEM_TYPE.TILE, itemType: ITEM_TYPE.TILE,
@ -473,7 +481,7 @@ const PhotoFrame = ({
<List <List
itemSize={(index) => itemSize={(index) =>
timeStampList[index].itemType === timeStampList[index].itemType ===
ITEM_TYPE.TILE ITEM_TYPE.TILE
? IMAGE_CONTAINER_HEIGHT ? IMAGE_CONTAINER_HEIGHT
: DATE_CONTAINER_HEIGHT : DATE_CONTAINER_HEIGHT
} }
@ -489,22 +497,22 @@ const PhotoFrame = ({
style={ style={
timeStampList[index] timeStampList[index]
.itemType === .itemType ===
ITEM_TYPE.BANNER ITEM_TYPE.BANNER
? { ? {
...style, ...style,
top: Math.max( top: Math.max(
Number( Number(
style.top style.top
), ),
height - 45 height - 45
), ),
height: height:
width < 450 width < 450
? Number( ? Number(
style.height style.height
) * 2 ) * 2
: style.height, : style.height,
} }
: style : style
} }
> >
@ -512,14 +520,14 @@ const PhotoFrame = ({
columns={ columns={
timeStampList[index] timeStampList[index]
.itemType === .itemType ===
ITEM_TYPE.TILE ITEM_TYPE.TILE
? columns ? columns
: 1 : 1
} }
> >
{timeStampList[index] {timeStampList[index]
.itemType === .itemType ===
ITEM_TYPE.TIME ? ( ITEM_TYPE.TIME ? (
<DateContainer> <DateContainer>
{ {
timeStampList[ timeStampList[
@ -528,8 +536,8 @@ const PhotoFrame = ({
} }
</DateContainer> </DateContainer>
) : timeStampList[index] ) : timeStampList[index]
.itemType === .itemType ===
ITEM_TYPE.BANNER ? ( ITEM_TYPE.BANNER ? (
<> <>
{ {
timeStampList[ timeStampList[
@ -548,7 +556,7 @@ const PhotoFrame = ({
index index
] ]
.itemStartIndex + .itemStartIndex +
idx idx
); );
} }
) )

View file

@ -17,6 +17,7 @@ import {
fileIsHEIC, fileIsHEIC,
convertHEIC2JPEG, convertHEIC2JPEG,
sortFilesIntoCollections, sortFilesIntoCollections,
checkFileFormatSupport,
} from 'utils/file'; } from 'utils/file';
const ENDPOINT = getEndpoint(); const ENDPOINT = getEndpoint();
@ -621,9 +622,11 @@ class UploadService {
file: globalThis.File file: globalThis.File
): Promise<Uint8Array> { ): Promise<Uint8Array> {
try { try {
checkFileFormatSupport(file.name)
let canvas = document.createElement('canvas'); let canvas = document.createElement('canvas');
let canvas_CTX = canvas.getContext('2d'); let canvas_CTX = canvas.getContext('2d');
let imageURL = null; let imageURL = null;
let timeout=null;
if (file.type.match(TYPE_IMAGE) || fileIsHEIC(file.name)) { if (file.type.match(TYPE_IMAGE) || fileIsHEIC(file.name)) {
if (fileIsHEIC(file.name)) { if (fileIsHEIC(file.name)) {
file = new globalThis.File( file = new globalThis.File(
@ -650,13 +653,14 @@ class UploadService {
THUMBNAIL_HEIGHT THUMBNAIL_HEIGHT
); );
image = undefined; image = undefined;
clearTimeout(timeout);
resolve(null); resolve(null);
} catch (e) { } catch (e) {
console.error(e); console.error(e);
reject(`${THUMBNAIL_GENERATION_FAILED} err: ${e}`); reject(`${THUMBNAIL_GENERATION_FAILED} err: ${e}`);
} }
}; };
setTimeout( timeout=setTimeout(
() => () =>
reject( reject(
`${THUMBNAIL_GENERATION_FAILED} err: `${THUMBNAIL_GENERATION_FAILED} err:

View file

@ -2,6 +2,7 @@ import { deleteFiles, File } from 'services/fileService';
import { runningInBrowser } from 'utils/common'; import { runningInBrowser } from 'utils/common';
const TYPE_HEIC = 'heic'; const TYPE_HEIC = 'heic';
const UNSUPPORTED_FORMATS = ['flv', "mkv", "3gp", "avi", "wmv"];
export function downloadAsFile(filename: string, content: string) { export function downloadAsFile(filename: string, content: string) {
const file = new Blob([content], { const file = new Blob([content], {
@ -62,3 +63,11 @@ export function getSelectedFiles(selectedFiles, files: File[]): File[] {
} }
return filesToDelete; return filesToDelete;
} }
export function checkFileFormatSupport(name :string){
for (let format of UNSUPPORTED_FORMATS){
if ( name.toLowerCase().endsWith(format)){
throw "un supported format";
}
}
}