Commit b0b111f3 authored by ThushanSandeepa's avatar ThushanSandeepa

dropzoned added

parent 013c27bf
This diff is collapsed.
...@@ -3,28 +3,34 @@ ...@@ -3,28 +3,34 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@mui/icons-material": "^5.10.14",
"@mui/material": "^5.10.14",
"@testing-library/jest-dom": "^5.16.3", "@testing-library/jest-dom": "^5.16.3",
"@testing-library/react": "^12.1.4", "@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4",
"axios": "^0.21.4",
"antd": "^3.26.5", "antd": "^3.26.5",
"prop-types": "^15.7.2", "axios": "^0.21.4",
"bootstrap": "^5.1.1", "bootstrap": "^5.1.1",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-bootstrap-validation": "^0.1.11", "react-bootstrap-validation": "^0.1.11",
"react-router-dom": "^5.3.0", "react-dom": "^17.0.2",
"react-dropzone": "^14.2.2",
"react-icons": "^4.3.1",
"react-redux": "^7.1.3", "react-redux": "^7.1.3",
"react-router-dom": "^5.3.0",
"react-scripts": "5.0.0",
"react-select": "^5.0.0", "react-select": "^5.0.0",
"react-speech-recognition": "^3.9.0", "react-speech-recognition": "^3.9.0",
"react-validation": "^3.0.7",
"redux": "^4.0.5", "redux": "^4.0.5",
"redux-promise": "^0.6.0", "redux-promise": "^0.6.0",
"redux-thunk": "^2.3.0", "redux-thunk": "^2.3.0",
"uuid": "^3.3.2", "uuid": "^3.3.2",
"react-icons": "^4.3.1", "web-vitals": "^2.1.4",
"react-validation": "^3.0.7" "@mui/lab": "^5.0.0-alpha.50"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",
......
import React from 'react';
import { useDropzone } from 'react-dropzone';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import AttachFileIcon from '@mui/icons-material/AttachFile';
import { useDispatch, useSelector } from 'react-redux';
import VideoFileOutlinedIcon from '@mui/icons-material/VideoFileOutlined';
function DropZone(props) {
const { fileSelectedHandler } = props;
const diffWordsData = useSelector((state) => state.diffwords);
const { acceptedFiles, getRootProps, getInputProps } = useDropzone({
accept: {
'video/*': ['mp4']
},
maxFiles: 1,
onDrop: (files) => fileSelectedHandler(files)
});
const formatBytes = (bytes, decimals = 2) => {
if (bytes === 0) return '0 Bytes';
const k = 1024;
const dm = decimals < 0 ? 0 : decimals;
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / k ** i).toFixed(dm)) + sizes[i];
};
// const files = acceptedFiles.map((file) => {
// fileSelectedHandler(file);
// // dispatch({ type: SET_FILE_PICKED, file });
// // console.log('Hello');
// return (
// <li key={file.path}>
// {file.path} - {formatBytes(file.size)}
// </li>
// );
// });
return (
<section className="container" >
<div
{...getRootProps({ className: 'dropzone' })}
style={{
border: '3px dashed rgba(128, 128, 128, .3)',
padding: ' 100px 150px 100px 150px',
backgroundColor: 'white'
}}
>
<input {...getInputProps()} />
{/* {!diffWordsData.isFilePicked && ( */}
<>
<center>
<AttachFileIcon sx={{ fontSize: '60px' }} style={{ color: 'grey', opacity: 0.3 }} />
</center>
<Typography textAlign="center" variant="h4" style={{ color: 'grey', opacity: 0.3 }}>
Drag and drop or click to select Videos
</Typography>
</>
{/* )} */}
{/* <aside>
{diffWordsData.isFilePicked && (
<div
style={{
border: '3px dashed rgba(128, 128, 128, .3)',
padding: ' 70px 110px 70px 110px',
backgroundColor: 'white'
}}
>
<Grid container direction="column" justifyContent="center" alignItems="center">
<Grid item>
<VideoFileOutlinedIcon color="primary" sx={{ fontSize: '150px' }} />
</Grid>
<Grid item>
<Typography variant="h3" sx={{ color: 'grey', opacity: 0.5 }}>
{diffWordsData.file[0].name}- {formatBytes(diffWordsData.file[0].size)}
</Typography>
</Grid>
</Grid>
</div>
)}
</aside> */}
</div>
</section>
);
}
export default DropZone;
import React, { useState } from 'react';
import './style/classNotes.css';
import DropZone from './DropZone';
import LoadingButton from '@mui/lab/LoadingButton'
import Grid from "@mui/material/Grid"
const ClassNotes = () => {
const [file, setFile] = useState([])
const fileSelectedHandler = (file) => {
// console.log('diff data', diffWordsData);
setFile(file);
// dispatch({ type: SET_FILE_PICKED, file });
};
return (
<div className="background-material">
<Grid container direction="column" alignItems="center" spacing={2} style={{marginTop:"1rem"}}>
<Grid item xs={2}>
<DropZone fileSelectedHandler={fileSelectedHandler} />
</Grid>
<Grid item >
<LoadingButton
size="large"
color="primary"
// onClick={() => fileUploadHandler()}
// onClick={handleClick}
// loading={isProcess}
loadingPosition="start"
variant="contained"
fullWidth
>
Process Video
</LoadingButton>
</Grid>
</Grid>
{/* <div className="container mt-4 shadow p-3 mb-5 bg-body rounded">
<div>
<p3>UPLOAD THE VIDEO</p3>
<div className="container mt-4 p-3 mb-5 bg-body rounded color input">
<form
className="row g-3">
<div className="form-group files">
<input
type="file"
className="form-control"
id="lessonURL"
name="lessonURL"
multiple=""
required
/>
</div>
<div className="row g-3">
<button className="button2-submit button-submit">UPLOAD</button>
</div>
</form>
</div>
</div>
</div> */}
</div>
);
}
export default ClassNotes;
\ No newline at end of file
p3 {
font-size: xx-large;
padding-left: 10px;
color: #793179;
font-family: bold;
}
.background-material .h2 {
font-family: bold;
font-weight: normal;
text-align: left;
padding-top: 5px;
}
.background-material .h5{
font-family: bold;
font-weight: bold;
padding-top: 10px;
}
.background-material .h6{
font-family: bold;
font-weight: bold;
padding-top: 10px;
}
.label{
color: #793179;
}
.form{
padding-top: 10px;
}
.background-material .label{
color: black;
}
.background-material .form{
padding-top: 0px;
padding-left: 50px;
padding-right: 50px;
}
.background-material .card-body{
color: #3F71AE;
}
.background-material li {
font-weight: bold;
font-family: inter;
}
.background-material .button {
background-color: #7a067a;
}
.background-material img{
position: absolute;
right: 100px;
width: 180px;
}
.background-material card{
color: #8f9296;
}
.background-view--material .top{
position: absolute;
right: 0px;
width: 190px;
}
.background h1{
color: #793179;
font-weight: bold;
}
.background h5{
color: #803480;
font-weight: bold;
}
.background i{
color: #7a067a;
}
.background label{
color: #6b556b;
}
.files input {
outline: 2px dashed #92b0b3;
outline-offset: -10px;
-webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
transition: outline-offset .15s ease-in-out, background-color .15s linear;
padding: 120px 0px 85px 35%;
text-align: center !important;
margin: 0;
width: 100% !important;
}
.files input:focus{ outline: 2px dashed #92b0b3; outline-offset: -10px;
-webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
transition: outline-offset .15s ease-in-out, background-color .15s linear; border:1px solid #92b0b3;
}
.files{ position:relative}
.files:after { pointer-events: none;
position: absolute;
top: 60px;
left: 0;
width: 50px;
right: 0;
height: 56px;
content: "";
background-image: url(https://image.flaticon.com/icons/png/128/109/109612.png);
display: block;
margin: 0 auto;
background-size: 100%;
background-repeat: no-repeat;
}
.color input{ background-color:#f1f1f1;}
.files:before {
position: absolute;
bottom: 10px;
left: 0; pointer-events: none;
width: 100%;
right: 0;
height: 57px;
content: " or drag it here. ";
display: block;
margin: 0 auto;
color: #2ea591;
font-weight: 600;
text-transform: capitalize;
text-align: center;
}
.button-submit{
border: none;
padding: 6px 30px;
text-align: center;
display: inline-block;
font-size: 16px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
font-size: 17px;
}
.button2-submit {
background-color: rgba(0, 40, 83, 1);
color: white;
font-weight: bold;
border: 2px solid rgba(0, 40, 83, 1);
}
.button2-submit:hover {
background-color: rgb(2, 54, 110);
color: #ffffff;
border: 2px solid rgb(1, 58, 119);
transform: scale(1.01);
}
...@@ -29,6 +29,7 @@ const Navbar = () => { ...@@ -29,6 +29,7 @@ const Navbar = () => {
<p><Link style={isActive(history, '/')} to="/">Home</Link></p> <p><Link style={isActive(history, '/')} to="/">Home</Link></p>
<p><Link style={isActive(history, '#')} to="#">Video summarizer</Link></p> <p><Link style={isActive(history, '#')} to="#">Video summarizer</Link></p>
<p><Link style={isActive(history, '/digital-human')} to="/digital-human">Digital human</Link></p> <p><Link style={isActive(history, '/digital-human')} to="/digital-human">Digital human</Link></p>
<p><Link style={isActive(history, '/class-notes')} to="/class-notes">Class notes</Link></p>
<p><Link style={isActive(history, '/about-us')} to="/about-us">About us</Link></p> <p><Link style={isActive(history, '/about-us')} to="/about-us">About us</Link></p>
<p><Link style={isActive(history, '/contact-us')} to="/contact-us">Contact us</Link></p> <p><Link style={isActive(history, '/contact-us')} to="/contact-us">Contact us</Link></p>
</div> </div>
...@@ -49,6 +50,7 @@ const Navbar = () => { ...@@ -49,6 +50,7 @@ const Navbar = () => {
<p><Link style={isActive(history, '/')} to="/">Home</Link></p> <p><Link style={isActive(history, '/')} to="/">Home</Link></p>
<p><Link style={isActive(history, '#')} to="#">Video summarizer</Link></p> <p><Link style={isActive(history, '#')} to="#">Video summarizer</Link></p>
<p><Link style={isActive(history, '/digital-human')} to="/digital-human">Digital human</Link></p> <p><Link style={isActive(history, '/digital-human')} to="/digital-human">Digital human</Link></p>
<p><Link style={isActive(history, '/class-notes')} to="/class-notes">Class notes</Link></p>
<p><Link style={isActive(history, '/about-us')} to="/about-us">About us</Link></p> <p><Link style={isActive(history, '/about-us')} to="/about-us">About us</Link></p>
<p><Link style={isActive(history, '/contact-us')} to="/contact-us">Contact us</Link></p> <p><Link style={isActive(history, '/contact-us')} to="/contact-us">Contact us</Link></p>
</div> </div>
......
...@@ -9,6 +9,7 @@ import AboutUs from '../main/AboutUs/aboutUs'; ...@@ -9,6 +9,7 @@ import AboutUs from '../main/AboutUs/aboutUs';
import SignUp from '../main/SignUp/signUp'; import SignUp from '../main/SignUp/signUp';
import Login from '../main/Login/login'; import Login from '../main/Login/login';
import ContactUs from '../main/ContactUs/contactUs'; import ContactUs from '../main/ContactUs/contactUs';
import ClassNotes from '../classNotes/classNotes';
function PageRoutes() { function PageRoutes() {
return ( return (
...@@ -23,6 +24,7 @@ function PageRoutes() { ...@@ -23,6 +24,7 @@ function PageRoutes() {
<Route path="/contact-us" component={ContactUs}/> <Route path="/contact-us" component={ContactUs}/>
<Route path="/register" component={SignUp}/> <Route path="/register" component={SignUp}/>
<Route path="/login" component={Login}/> <Route path="/login" component={Login}/>
<Route path="/class-notes" component={ClassNotes}/>
</Switch> </Switch>
</section> </section>
</Router> </Router>
......
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