Skip to content

2
2023-029
Commit f04ec589 authored by supundileepa00's avatar supundileepa00
Browse files
Options

fix : Image upload with preview & fixed UI issues

parent d9272568
Hide whitespace changes
Inline Side-by-side
Showing with 105 additions and 61 deletions
Project/Frontend/Web_App/src/pages/translate-page.tsx
View file @ f04ec589
......@@ -17,6 +17,10 @@ import {
Stack,
Tooltip,
Container,
TextareaAutosize,
Paper,
CircularProgress,
LinearProgress,
} from '@mui/material';
// layouts
import MainLayout from '../layouts/main';
......@@ -37,6 +41,7 @@ import { useSnackbar } from 'notistack';
import useCopyToClipboard from 'src/hooks/useCopyToClipboard';
import Iconify from 'src/components/iconify/Iconify';
import dynamic from 'next/dynamic';
const useReactMediaRecorder = () =>
// eslint-disable-next-line react-hooks/rules-of-hooks
import('react-media-recorder');
......@@ -50,8 +55,11 @@ AboutPage.getLayout = (page: React.ReactElement) => <MainLayout>{page}</MainLayo
export default function AboutPage() {
const [file, setFile] = useState<File | string | null>(null);
const [isUploadFile, setIsUploadFile] = useState<boolean | string | null>(true);
const [videoUrl, setVideoUrl] = useState('');
const [loading, setLoading] = useState(false);
const [value, setValue] = useState('ආආආආආආආආආආආආආආආආ');
const handleDropSingleFile = useCallback((acceptedFiles: File[]) => {
const handleDropSingleFile = useCallback(async (acceptedFiles: File[]) => {
const file = acceptedFiles[0];
if (file) {
setFile(
......@@ -59,6 +67,8 @@ export default function AboutPage() {
preview: URL.createObjectURL(file),
})
);
setVideoUrl(URL.createObjectURL(file));
}
}, []);
......@@ -82,8 +92,6 @@ export default function AboutPage() {
const { copy } = useCopyToClipboard();
const [value, setValue] = useState('ආආආආආආආආආආආආආආආආ');
const onCopy = (text: string) => {
if (text) {
enqueueSnackbar('Copied!');
......@@ -95,6 +103,8 @@ export default function AboutPage() {
setValue(event.target.value);
};
// Video Upload
return (
<>
<Head>
......@@ -135,37 +145,59 @@ export default function AboutPage() {
onDrop={handleDropSingleFile}
onDelete={() => setFile(null)}
/>
{file && (
<Paper style={{ padding: '20px' }}>
<Typography variant="h5" align="center" gutterBottom>
Preview
</Typography>
<div style={{ marginTop: '20px', textAlign: 'center' }}>
<video src={videoUrl} width="400" controls />
</div>
</Paper>
)}
</CardContent>
</Card>
</Grid>
<Grid item xs={12} md={6}>
<Card sx={{ p: 5 }}>
<Box
display="grid"
gridTemplateColumns={{ xs: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }}
gap={5}
>
<Card sx={{ p: 5, minHeight: 300 }}>
<Box display="grid" gap={5}>
<Stack spacing={2}>
<Typography variant="overline" sx={{ color: 'text.secondary' }}>
on Change
</Typography>
<TextField
fullWidth
value={value}
onChange={handleChange}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<Tooltip title="Copy">
<IconButton onClick={() => onCopy(value)}>
<Iconify icon="eva:copy-fill" width={24} />
</IconButton>
</Tooltip>
</InputAdornment>
),
}}
/>
{loading ? (
<Card>
<CardContent>
<LinearProgress />
<center>
<Typography variant="h5" component="div" sx={{ marginTop: 2 }}>
Loading...
</Typography>
</center>
</CardContent>
</Card>
) : (
<div>
<Typography variant="overline" sx={{ color: 'text.secondary' }}>
Translated Text
</Typography>
<TextField
fullWidth
value={value}
onChange={handleChange}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<Tooltip title="Copy">
<IconButton onClick={() => onCopy(value)}>
<Iconify icon="eva:copy-fill" width={24} />
</IconButton>
</Tooltip>
</InputAdornment>
),
}}
/>
</div>
)}
</Stack>
</Box>
</Card>
......@@ -178,6 +210,7 @@ export default function AboutPage() {
sx={{
mb: 3,
}}
disabled={loading}
>
Translate
</Button>
......@@ -201,33 +234,44 @@ export default function AboutPage() {
</Card>
</Grid>
<Grid item xs={12} md={6}>
<Card sx={{ p: 5 }}>
<Box
display="grid"
gridTemplateColumns={{ xs: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }}
gap={5}
>
<Card sx={{ p: 5, minHeight: 300 }}>
<Box display="grid" gap={5}>
<Stack spacing={2}>
<Typography variant="overline" sx={{ color: 'text.secondary' }}>
on Change
</Typography>
<TextField
fullWidth
value={value}
onChange={handleChange}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<Tooltip title="Copy">
<IconButton onClick={() => onCopy(value)}>
<Iconify icon="eva:copy-fill" width={24} />
</IconButton>
</Tooltip>
</InputAdornment>
),
}}
/>
{loading ? (
<Card>
<CardContent>
<LinearProgress />
<center>
<Typography variant="h5" component="div" sx={{ marginTop: 2 }}>
Loading...
</Typography>
</center>
</CardContent>
</Card>
) : (
<div>
<Typography variant="overline" sx={{ color: 'text.secondary' }}>
Translated Text
</Typography>
<TextField
fullWidth
value={value}
onChange={handleChange}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<Tooltip title="Copy">
<IconButton onClick={() => onCopy(value)}>
<Iconify icon="eva:copy-fill" width={24} />
</IconButton>
</Tooltip>
</InputAdornment>
),
}}
/>
</div>
)}
</Stack>
</Box>
</Card>
......@@ -240,6 +284,7 @@ export default function AboutPage() {
sx={{
mb: 3,
}}
disabled={loading}
>
Translate
</Button>
......
Project/Frontend/Web_App/src/sections/slToText/WebcamStreamCapture.tsx
View file @ f04ec589
......@@ -119,12 +119,11 @@ const WebcamStreamCapture = () => {
</center>
</Grid>
<Grid item xs={12}>
<center>
<video src={mediaBlobUrl} controls autoPlay />
</center>
{/* <div className={styles.videoContainer}>
<video className={styles.futuristicVideo} src={mediaBlobUrl} controls autoPlay />
</div> */}
{recordedChunks.length > 0 && (
<center>
<video src={mediaBlobUrl} controls autoPlay />
</center>
)}
</Grid>
</Grid>
</>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment