marcel/omni-tools
1
0
Fork 0
mirror of https://github.com/iib0011/omni-tools.git synced 2025-09-20 06:29:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: background removal

Browse Source
This commit is contained in:
Ibrahima G. Coulibaly
2025-03-26 04:14:19 +00:00
parent a7c3e47ba1
commit c0297a187d
3 changed files with 75 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/components/result/ToolFileResult.tsx
View File

@@ -1,4 +1,4 @@
import { Box } from '@mui/material';
import { Box, CircularProgress, Typography } from '@mui/material';
import React, { useContext } from 'react';
import InputHeader from '../InputHeader';
import greyPattern from '@assets/grey-pattern.png';
@@ -9,11 +9,15 @@ import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
export default function ToolFileResult({
title = 'Result',
value,
extension
extension,
loading,
loadingText
}: {
title?: string;
value: File | null;
extension: string;
loading?: boolean;
loadingText?: string;
}) {
const [preview, setPreview] = React.useState<string | null>(null);
const { showSnackBar } = useContext(CustomSnackBarContext);
@@ -83,44 +87,62 @@ export default function ToolFileResult({
bgcolor: 'white'
}}
>
{preview && (
{loading ? (
<Box
width={'100%'}
height={'100%'}
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
backgroundImage: `url(${greyPattern})`
height: '100%'
}}
>
{fileType === 'image' && (
<img
src={preview}
alt="Result"
style={{ maxWidth: '100%', maxHeight: globalInputHeight }}
/>
)}
{fileType === 'video' && (
<video
src={preview}
controls
style={{ maxWidth: '100%', maxHeight: globalInputHeight }}
/>
)}
{fileType === 'audio' && (
<audio
src={preview}
controls
style={{ width: '100%', maxWidth: '500px' }}
/>
)}
{fileType === 'unknown' && (
<Box sx={{ padding: 2, textAlign: 'center' }}>
File processed successfully. Click download to save the result.
</Box>
)}
<CircularProgress />
<Typography variant="body2" sx={{ mt: 2 }}>
{loadingText}... This may take a moment.
</Typography>
</Box>
) : (
preview && (
<Box
width={'100%'}
height={'100%'}
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
backgroundImage: `url(${greyPattern})`
}}
>
{fileType === 'image' && (
<img
src={preview}
alt="Result"
style={{ maxWidth: '100%', maxHeight: globalInputHeight }}
/>
)}
{fileType === 'video' && (
<video
src={preview}
controls
style={{ maxWidth: '100%', maxHeight: globalInputHeight }}
/>
)}
{fileType === 'audio' && (
<audio
src={preview}
controls
style={{ width: '100%', maxWidth: '500px' }}
/>
)}
{fileType === 'unknown' && (
<Box sx={{ padding: 2, textAlign: 'center' }}>
File processed successfully. Click download to save the
result.
</Box>
)}
</Box>
)
)}
</Box>
<ResultFooter