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 @@
"react-lazy-load-image-component": "^1.5.5",
"react-map-gl": "^7.0.19",
"react-markdown": "^8.0.3",
"react-media-recorder": "^1.6.6",
"react-organizational-chart": "^2.2.0",
"react-quill": "^2.0.0",
"react-redux": "^8.0.4",
"react-slick": "^0.29.0",
"react-webcam": "^7.0.1",
"redux": "^4.2.0",
"redux-persist": "^6.0.0",
"rehype-raw": "^6.1.1",
......
Project/Frontend/Web_App/src/pages/translate-page.tsx
View file @ db63f5e8
......@@ -10,6 +10,12 @@ import {
CardHeader,
Divider,
Grid,
TextField,
IconButton,
Typography,
InputAdornment,
Stack,
Tooltip,
} from '@mui/material';
// layouts
import MainLayout from '../layouts/main';
......@@ -22,9 +28,14 @@ import {
AboutTestimonials,
} from '../sections/slToText';
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 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
export default function AboutPage() {
const [file, setFile] = useState<File | string | null>(null);
const [isUploadFile, setIsUploadFile] = useState<boolean | string | null>(true);
const handleDropSingleFile = useCallback((acceptedFiles: File[]) => {
const file = acceptedFiles[0];
......@@ -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 (
<>
<Head>
<title>Translate SSL to Text</title>
</Head>
<Box sx={{ flexGrow: 1 }}>
<ButtonGroup disableElevation variant="contained" aria-label="Disabled elevation buttons">
<Button variant="outlined" startIcon={<UploadIcon />}>
<Button
variant={checkTranalationTypeForUpload()}
startIcon={<UploadIcon />}
onClick={() => {
setIsUploadFile(true);
}}
>
Upload
</Button>
<Button variant="contained" endIcon={<EmergencyRecordingIcon />}>
Send
<Button
variant={checkTranalationTypeForRecord()}
endIcon={<EmergencyRecordingIcon />}
onClick={() => {
setIsUploadFile(false);
}}
>
Record
</Button>
</ButtonGroup>
{isUploadFile ? (
<Box sx={{ flexGrow: 1 }}>
<Card>
<Grid
container
spacing={2}
sx={{
mt: '3%',
px: '1%',
}}
>
<CardHeader title="Upload a video containing Sign Language" />
<Grid container spacing={2}>
<Grid item xs={12} md={6}>
<Card>
<CardHeader title="Upload a video containing Sign Language" />
<CardContent>
<Upload
file={file}
......@@ -81,20 +133,60 @@ export default function AboutPage() {
</Card>
</Grid>
<Grid item xs={12} md={6}>
<Card>
<CardHeader title="Upload a video containing Sign Language" />
<CardContent>
<Upload
file={file}
onDrop={handleDropSingleFile}
onDelete={() => setFile(null)}
<Card sx={{ p: 5 }}>
<Box
display="grid"
gridTemplateColumns={{ xs: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }}
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>
),
}}
/>
</CardContent>
</Stack>
</Box>
</Card>
</Grid>
</Grid>
</Card>
</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