added unsupported format check
This commit is contained in:
parent
272e2a33dc
commit
8d6de9b73e
|
@ -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
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
|
@ -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:
|
||||||
|
|
|
@ -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";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue