dropzoned added

frontend/package.json

@@ -3,28 +3,34 @@
   "version": "0.1.0",
   "private": true,
   "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/react": "^12.1.4",
     "@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",
-    "prop-types": "^15.7.2",
+    "axios": "^0.21.4",
     "bootstrap": "^5.1.1",
+    "prop-types": "^15.7.2",
+    "react": "^17.0.2",
     "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-router-dom": "^5.3.0",
+    "react-scripts": "5.0.0",
     "react-select": "^5.0.0",
     "react-speech-recognition": "^3.9.0",
+    "react-validation": "^3.0.7",
     "redux": "^4.0.5",
     "redux-promise": "^0.6.0",
     "redux-thunk": "^2.3.0",
     "uuid": "^3.3.2",
-    "react-icons": "^4.3.1",
-    "react-validation": "^3.0.7"
+    "web-vitals": "^2.1.4",
+    "@mui/lab": "^5.0.0-alpha.50"
   },
   "scripts": {
     "start": "react-scripts start",

frontend/src/classNotes/DropZone.js

+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;

frontend/src/classNotes/classNotes.js

+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

frontend/src/classNotes/style/classNotes.css

+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);
+}

frontend/src/components/navBar/navbar.js

@@ -29,6 +29,7 @@ const Navbar = () => {
                         <p><Link style={isActive(history, '/')} to="/">Home</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, '/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, '/contact-us')} to="/contact-us">Contact us</Link></p>
                     </div>
@@ -49,6 +50,7 @@ const Navbar = () => {
                                 <p><Link style={isActive(history, '/')} to="/">Home</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, '/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, '/contact-us')} to="/contact-us">Contact us</Link></p>
                             </div>

frontend/src/routes/pageRoutes.js

@@ -9,6 +9,7 @@ import AboutUs from '../main/AboutUs/aboutUs';
 import SignUp from '../main/SignUp/signUp';
 import Login from '../main/Login/login';
 import ContactUs from '../main/ContactUs/contactUs';
+import ClassNotes from '../classNotes/classNotes';
 
 function PageRoutes() {
     return (
@@ -23,6 +24,7 @@ function PageRoutes() {
                         <Route path="/contact-us" component={ContactUs}/>
                         <Route path="/register" component={SignUp}/>
                         <Route path="/login" component={Login}/>
+                        <Route path="/class-notes" component={ClassNotes}/>
                     </Switch>
                 </section>
             </Router>