added video details

frontend/src/classNotes/DropZone.js

@@ -10,7 +10,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import VideoFileOutlinedIcon from '@mui/icons-material/VideoFileOutlined';
 
 function DropZone(props) {
-    const { fileSelectedHandler } = props;
+    const { fileSelectedHandler,isFilePicked,file } = props;
     const diffWordsData = useSelector((state) => state.diffwords);
     const { acceptedFiles, getRootProps, getInputProps } = useDropzone({
         accept: {
@@ -47,12 +47,12 @@ function DropZone(props) {
                 {...getRootProps({ className: 'dropzone' })}
                 style={{
                     border: '3px dashed rgba(128, 128, 128, .3)',
-                    padding: ' 100px 150px 100px 150px',
+                    padding: !isFilePicked ? ' 100px 150px 100px 150px' :' 30px 150px 30px 150px' ,
                     backgroundColor: 'white'
                 }}
             >
                 <input {...getInputProps()} />
-                {/* {!diffWordsData.isFilePicked && ( */}
+                {!isFilePicked && (
                 <>
                     <center>
                         <AttachFileIcon sx={{ fontSize: '60px' }} style={{ color: 'grey', opacity: 0.3 }} />
@@ -62,14 +62,14 @@ function DropZone(props) {
                         Drag and drop  or click to select Videos
                     </Typography>
                 </>
-                {/* )} */}
+                 )} 
 
-                {/* <aside>
-                    {diffWordsData.isFilePicked && (
+                <aside>
+                    {isFilePicked && (
                         <div
                             style={{
                                 border: '3px dashed rgba(128, 128, 128, .3)',
-                                padding: ' 70px 110px 70px 110px',
+                                padding: ' 10px 150px 10px 150px',
                                 backgroundColor: 'white'
                             }}
                         >
@@ -78,14 +78,14 @@ function DropZone(props) {
                                     <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 variant="h4" sx={{ color: 'grey', opacity: 0.5 }}>
+                                        {file[0].name}- {formatBytes(file[0].size)}
                                     </Typography>
                                 </Grid>
                             </Grid>
                         </div>
                     )}
-                </aside> */}
+                </aside>
             </div>
         </section>
     );

frontend/src/classNotes/classNotes.js

@@ -6,10 +6,12 @@ import Grid from "@mui/material/Grid"
 
 const ClassNotes = () => {
     const [file, setFile] = useState([])
+    const [isFilePicked,setIsFilePicked] = useState(false)
 
     const fileSelectedHandler = (file) => {
         // console.log('diff data', diffWordsData);
         setFile(file);
+        setIsFilePicked(true)
         // dispatch({ type: SET_FILE_PICKED, file });
     };
     return (
@@ -17,7 +19,7 @@ const ClassNotes = () => {
             <Grid container direction="column" alignItems="center" spacing={2} style={{marginTop:"1rem"}}>
                 <Grid item xs={2}>
 
-                    <DropZone fileSelectedHandler={fileSelectedHandler} />
+                    <DropZone fileSelectedHandler={fileSelectedHandler} isFilePicked={isFilePicked} file={file}/>
                 </Grid>
                 <Grid item >
                     <LoadingButton