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 { ...@@ -17,6 +17,10 @@ import {
Stack, Stack,
Tooltip, Tooltip,
Container, Container,
TextareaAutosize,
Paper,
CircularProgress,
LinearProgress,
} from '@mui/material'; } from '@mui/material';
// layouts // layouts
import MainLayout from '../layouts/main'; import MainLayout from '../layouts/main';
...@@ -37,6 +41,7 @@ import { useSnackbar } from 'notistack'; ...@@ -37,6 +41,7 @@ import { useSnackbar } from 'notistack';
import useCopyToClipboard from 'src/hooks/useCopyToClipboard'; import useCopyToClipboard from 'src/hooks/useCopyToClipboard';
import Iconify from 'src/components/iconify/Iconify'; import Iconify from 'src/components/iconify/Iconify';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
const useReactMediaRecorder = () => const useReactMediaRecorder = () =>
// eslint-disable-next-line react-hooks/rules-of-hooks // eslint-disable-next-line react-hooks/rules-of-hooks
import('react-media-recorder'); import('react-media-recorder');
...@@ -50,8 +55,11 @@ AboutPage.getLayout = (page: React.ReactElement) => <MainLayout>{page}</MainLayo ...@@ -50,8 +55,11 @@ AboutPage.getLayout = (page: React.ReactElement) => <MainLayout>{page}</MainLayo
export default function AboutPage() { export default function AboutPage() {
const [file, setFile] = useState<File | string | null>(null); const [file, setFile] = useState<File | string | null>(null);
const [isUploadFile, setIsUploadFile] = useState<boolean | string | null>(true); 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]; const file = acceptedFiles[0];
if (file) { if (file) {
setFile( setFile(
...@@ -59,6 +67,8 @@ export default function AboutPage() { ...@@ -59,6 +67,8 @@ export default function AboutPage() {
preview: URL.createObjectURL(file), preview: URL.createObjectURL(file),
}) })
); );
setVideoUrl(URL.createObjectURL(file));
} }
}, []); }, []);
...@@ -82,8 +92,6 @@ export default function AboutPage() { ...@@ -82,8 +92,6 @@ export default function AboutPage() {
const { copy } = useCopyToClipboard(); const { copy } = useCopyToClipboard();
const [value, setValue] = useState('ආආආආආආආආආආආආආආආආ');
const onCopy = (text: string) => { const onCopy = (text: string) => {
if (text) { if (text) {
enqueueSnackbar('Copied!'); enqueueSnackbar('Copied!');
...@@ -95,6 +103,8 @@ export default function AboutPage() { ...@@ -95,6 +103,8 @@ export default function AboutPage() {
setValue(event.target.value); setValue(event.target.value);
}; };
// Video Upload
return ( return (
<> <>
<Head> <Head>
...@@ -135,37 +145,59 @@ export default function AboutPage() { ...@@ -135,37 +145,59 @@ export default function AboutPage() {
onDrop={handleDropSingleFile} onDrop={handleDropSingleFile}
onDelete={() => setFile(null)} 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> </CardContent>
</Card> </Card>
</Grid> </Grid>
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Card sx={{ p: 5 }}> <Card sx={{ p: 5, minHeight: 300 }}>
<Box <Box display="grid" gap={5}>
display="grid"
gridTemplateColumns={{ xs: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }}
gap={5}
>
<Stack spacing={2}> <Stack spacing={2}>
<Typography variant="overline" sx={{ color: 'text.secondary' }}> {loading ? (
on Change <Card>
</Typography> <CardContent>
<LinearProgress />
<TextField <center>
fullWidth <Typography variant="h5" component="div" sx={{ marginTop: 2 }}>
value={value} Loading...
onChange={handleChange} </Typography>
InputProps={{ </center>
endAdornment: ( </CardContent>
<InputAdornment position="end"> </Card>
<Tooltip title="Copy"> ) : (
<IconButton onClick={() => onCopy(value)}> <div>
<Iconify icon="eva:copy-fill" width={24} /> <Typography variant="overline" sx={{ color: 'text.secondary' }}>
</IconButton> Translated Text
</Tooltip> </Typography>
</InputAdornment>
), <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> </Stack>
</Box> </Box>
</Card> </Card>
...@@ -178,6 +210,7 @@ export default function AboutPage() { ...@@ -178,6 +210,7 @@ export default function AboutPage() {
sx={{ sx={{
mb: 3, mb: 3,
}} }}
disabled={loading}
> >
Translate Translate
</Button> </Button>
...@@ -201,33 +234,44 @@ export default function AboutPage() { ...@@ -201,33 +234,44 @@ export default function AboutPage() {
</Card> </Card>
</Grid> </Grid>
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Card sx={{ p: 5 }}> <Card sx={{ p: 5, minHeight: 300 }}>
<Box <Box display="grid" gap={5}>
display="grid"
gridTemplateColumns={{ xs: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }}
gap={5}
>
<Stack spacing={2}> <Stack spacing={2}>
<Typography variant="overline" sx={{ color: 'text.secondary' }}> {loading ? (
on Change <Card>
</Typography> <CardContent>
<LinearProgress />
<TextField <center>
fullWidth <Typography variant="h5" component="div" sx={{ marginTop: 2 }}>
value={value} Loading...
onChange={handleChange} </Typography>
InputProps={{ </center>
endAdornment: ( </CardContent>
<InputAdornment position="end"> </Card>
<Tooltip title="Copy"> ) : (
<IconButton onClick={() => onCopy(value)}> <div>
<Iconify icon="eva:copy-fill" width={24} /> <Typography variant="overline" sx={{ color: 'text.secondary' }}>
</IconButton> Translated Text
</Tooltip> </Typography>
</InputAdornment>
), <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> </Stack>
</Box> </Box>
</Card> </Card>
...@@ -240,6 +284,7 @@ export default function AboutPage() { ...@@ -240,6 +284,7 @@ export default function AboutPage() {
sx={{ sx={{
mb: 3, mb: 3,
}} }}
disabled={loading}
> >
Translate Translate
</Button> </Button>
......
Project/Frontend/Web_App/src/sections/slToText/WebcamStreamCapture.tsx
View file @ f04ec589
...@@ -119,12 +119,11 @@ const WebcamStreamCapture = () => { ...@@ -119,12 +119,11 @@ const WebcamStreamCapture = () => {
</center> </center>
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
<center> {recordedChunks.length > 0 && (
<video src={mediaBlobUrl} controls autoPlay /> <center>
</center> <video src={mediaBlobUrl} controls autoPlay />
{/* <div className={styles.videoContainer}> </center>
<video className={styles.futuristicVideo} src={mediaBlobUrl} controls autoPlay /> )}
</div> */}
</Grid> </Grid>
</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