Skip to content

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

feat : added video recording component

parent ca4046fa
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1083 additions and 48 deletions
Project/Frontend/Web_App/package-lock.json
View file @ db63f5e8
This diff is collapsed.
Project/Frontend/Web_App/package.json
View file @ db63f5e8
...@@ -68,10 +68,12 @@ ...@@ -68,10 +68,12 @@
"react-lazy-load-image-component": "^1.5.5", "react-lazy-load-image-component": "^1.5.5",
"react-map-gl": "^7.0.19", "react-map-gl": "^7.0.19",
"react-markdown": "^8.0.3", "react-markdown": "^8.0.3",
"react-media-recorder": "^1.6.6",
"react-organizational-chart": "^2.2.0", "react-organizational-chart": "^2.2.0",
"react-quill": "^2.0.0", "react-quill": "^2.0.0",
"react-redux": "^8.0.4", "react-redux": "^8.0.4",
"react-slick": "^0.29.0", "react-slick": "^0.29.0",
"react-webcam": "^7.0.1",
"redux": "^4.2.0", "redux": "^4.2.0",
"redux-persist": "^6.0.0", "redux-persist": "^6.0.0",
"rehype-raw": "^6.1.1", "rehype-raw": "^6.1.1",
......
Project/Frontend/Web_App/src/pages/translate-page.tsx
View file @ db63f5e8
...@@ -10,6 +10,12 @@ import { ...@@ -10,6 +10,12 @@ import {
CardHeader, CardHeader,
Divider, Divider,
Grid, Grid,
TextField,
IconButton,
Typography,
InputAdornment,
Stack,
Tooltip,
} from '@mui/material'; } from '@mui/material';
// layouts // layouts
import MainLayout from '../layouts/main'; import MainLayout from '../layouts/main';
...@@ -22,9 +28,14 @@ import { ...@@ -22,9 +28,14 @@ import {
AboutTestimonials, AboutTestimonials,
} from '../sections/slToText'; } from '../sections/slToText';
import { Upload } from 'src/components/upload'; import { Upload } from 'src/components/upload';
import { useCallback, useState } from 'react'; import { useCallback, useRef, useState } from 'react';
import UploadIcon from '@mui/icons-material/Upload'; import UploadIcon from '@mui/icons-material/Upload';
import EmergencyRecordingIcon from '@mui/icons-material/EmergencyRecording'; import EmergencyRecordingIcon from '@mui/icons-material/EmergencyRecording';
import { useSnackbar } from 'notistack';
import useCopyToClipboard from 'src/hooks/useCopyToClipboard';
import Iconify from 'src/components/iconify/Iconify';
import { useReactMediaRecorder } from 'react-media-recorder';
import dynamic from 'next/dynamic';
// ---------------------------------------------------------------------- // ----------------------------------------------------------------------
...@@ -34,6 +45,7 @@ AboutPage.getLayout = (page: React.ReactElement) => <MainLayout>{page}</MainLayo ...@@ -34,6 +45,7 @@ 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 handleDropSingleFile = useCallback((acceptedFiles: File[]) => { const handleDropSingleFile = useCallback((acceptedFiles: File[]) => {
const file = acceptedFiles[0]; const file = acceptedFiles[0];
...@@ -45,32 +57,72 @@ export default function AboutPage() { ...@@ -45,32 +57,72 @@ export default function AboutPage() {
); );
} }
}, []); }, []);
const checkTranalationTypeForUpload = () => {
if (isUploadFile) {
return 'contained';
} else {
return 'outlined';
}
};
const checkTranalationTypeForRecord = () => {
if (!isUploadFile) {
return 'contained';
} else {
return 'outlined';
}
};
const { enqueueSnackbar } = useSnackbar();
const { copy } = useCopyToClipboard();
const [value, setValue] = useState('ආආආආආආආආආආආආආආආආ');
const onCopy = (text: string) => {
if (text) {
enqueueSnackbar('Copied!');
copy(text);
}
};
const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
setValue(event.target.value);
};
return ( return (
<> <>
<Head> <Head>
<title>Translate SSL to Text</title> <title>Translate SSL to Text</title>
</Head> </Head>
<Box sx={{ flexGrow: 1 }}>
<ButtonGroup disableElevation variant="contained" aria-label="Disabled elevation buttons"> <ButtonGroup disableElevation variant="contained" aria-label="Disabled elevation buttons">
<Button variant="outlined" startIcon={<UploadIcon />}> <Button
variant={checkTranalationTypeForUpload()}
startIcon={<UploadIcon />}
onClick={() => {
setIsUploadFile(true);
}}
>
Upload Upload
</Button> </Button>
<Button variant="contained" endIcon={<EmergencyRecordingIcon />}> <Button
Send variant={checkTranalationTypeForRecord()}
endIcon={<EmergencyRecordingIcon />}
onClick={() => {
setIsUploadFile(false);
}}
>
Record
</Button> </Button>
</ButtonGroup> </ButtonGroup>
{isUploadFile ? (
<Box sx={{ flexGrow: 1 }}>
<Card> <Card>
<Grid <CardHeader title="Upload a video containing Sign Language" />
container <Grid container spacing={2}>
spacing={2}
sx={{
mt: '3%',
px: '1%',
}}
>
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Card> <Card>
<CardHeader title="Upload a video containing Sign Language" />
<CardContent> <CardContent>
<Upload <Upload
file={file} file={file}
...@@ -81,20 +133,60 @@ export default function AboutPage() { ...@@ -81,20 +133,60 @@ export default function AboutPage() {
</Card> </Card>
</Grid> </Grid>
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Card> <Card sx={{ p: 5 }}>
<CardHeader title="Upload a video containing Sign Language" /> <Box
<CardContent> display="grid"
<Upload gridTemplateColumns={{ xs: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }}
file={file} gap={5}
onDrop={handleDropSingleFile} >
onDelete={() => setFile(null)} <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>
),
}}
/> />
</CardContent> </Stack>
</Box>
</Card> </Card>
</Grid> </Grid>
</Grid> </Grid>
</Card> </Card>
</Box> </Box>
) : (
// Video Capture
// <RecordView />
<div>sdsd</div>
)}
</> </>
); );
} }
const RecordView = () => {
const { status, startRecording, stopRecording, mediaBlobUrl } = useReactMediaRecorder({
video: true,
});
return (
<div>
<p>{status}</p>
<button onClick={startRecording}>Start Recording</button>
<button onClick={stopRecording}>Stop Recording</button>
<video src={mediaBlobUrl} controls autoPlay loop />
</div>
);
};
Project/Frontend/Web_App/yarn.lock
View file @ db63f5e8
This diff is collapsed.
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