FE changes

frontend/package.json

@@ -6,17 +6,19 @@
     "@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",
     "bootstrap": "^5.1.1",
+    "react": "^17.0.2",
     "react-bootstrap-validation": "^0.1.11",
+    "react-dom": "^17.0.2",
+    "react-hint": "^3.2.1",
+    "react-icons": "^4.3.1",
+    "react-player": "^2.11.0",
     "react-router-dom": "^5.3.0",
+    "react-scripts": "5.0.0",
     "react-select": "^5.0.0",
-    "react-icons": "^4.3.1",
-    "react-validation": "^3.0.7"
+    "react-validation": "^3.0.7",
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",

frontend/src/classNotes/classNotes.js

-import React, { Component } from 'react';
-import './style/classNotes.css';
-
-class ClassNotes extends Component {
-    render() {
-        return (
-            <div className="background-material">
-                <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">
-                            <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/components/navBar/navbar.js

@@ -29,7 +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, '#')} to="#">Digital human</Link></p>
-                        <p><Link style={isActive(history, '/class-notes')} to="/class-notes">Class notes</Link></p>
+                        <p><Link style={isActive(history, '/upload')} to="/upload">Video Indexer</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>
@@ -50,7 +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, '#')} to="#">Digital human</Link></p>
-                                <p><Link style={isActive(history, '/class-notes')} to="/class-notes">Class notes</Link></p>
+                                <p><Link style={isActive(history, '/upload')} to="/upload">Video Indexer</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/classNotes/style/classNotes.css → frontend/src/indexing/style/upload.css

@@ -112,7 +112,7 @@ p3 {
     right: 0;
     height: 56px;
     content: "";
-    background-image: url(https://image.flaticon.com/icons/png/128/109/109612.png);
+    /* background-image: url(https://image.flaticon.com/icons/png/128/109/109612.png); */
     display: block;
     margin: 0 auto;
     background-size: 100%;

frontend/src/indexing/upload.js

+import React, { Component } from 'react';
+import './style/upload.css';
+import { useEffect, useState } from 'react';
+import ReactPlayer from "react-player";
+import {render} from 'react-dom'
+import ReactHintFactory from 'react-hint'
+
+function Upload() {
+    const [isPlaying, setIsPlaying] = React.useState(true);
+  const [isReady, setIsReady] = React.useState(false);
+  const playerRef = React.useRef();
+
+    const [video, setVideo] = useState("");
+    const [indexingData, setIndexingData] = useState([])
+    // const [post, setPost] = React.useState(null);
+    const [videoFilePath, setVideoFilePath] = useState([]);
+    const [initialValue, setInitalValue] = useState(0);
+    const handleVideoUpload = (event) => {
+        setVideo(event.target.files[0]);
+        setVideoFilePath(URL.createObjectURL(event.target.files[0]));
+    };
+
+    const onReady = React.useCallback(() => {
+        console.log("here")
+        if (!isReady) {
+          playerRef.current.seekTo(initialValue, "seconds");
+          setIsReady(true);
+        }
+      }, [isReady]);
+    async function sendVideo() {
+        // console.log(video)
+        const formData = new FormData();
+        formData.append('video', video);
+        fetch("http://127.0.0.1:1100/topic", {
+            method: 'POST',
+            body: formData,
+        })
+            .then(response => response.json())
+            .then(response => {
+                              setIndexingData(response);
+
+                            //   setVideoFilePath('C:\Users\User\Desktop\Backup\MyDATA\SLIIT\Video Indexing\Indexing\upload
+            })
+            .catch(err => {
+                console.log(err);
+            });
+    }
+    // console.log(indexingData)
+
+    const buttonState = (event)=>{
+        // console.log(event.target.value)
+        const filterData = (event.target.value).split(" ");
+        setInitalValue(filterData[0]);
+        playerRef.current.seekTo(filterData[0], "seconds");
+
+        // setIsReady(false)
+    }
+
+    const selectOptions =  indexingData.map((x, id)=>{
+        // console.log(x)
+        return(
+            <>
+                <button onClick={buttonState} value={x.time_frame} className="btn btn-primary">{x.topic}</button>&nbsp;&nbsp;&nbsp;&nbsp;
+            </>
+        )
+    })
+
+
+    return (
+        <div>
+
+            <input type="file" className='forrm-control'  onChange={handleVideoUpload}></input>
+
+            <button onClick={sendVideo} className="btn btn-primary">Upload</button>
+            <ReactPlayer 
+                ref= {playerRef}
+
+            url={videoFilePath} 
+            playing={isPlaying}
+            width="50%"
+            height="50%"
+            controls={true}
+            onReady={onReady}
+             />
+                <br />
+             {/* <video controls>
+                <source src="C:\Users\User\Desktop\Backup\MyDATA\SLIIT\Video Indexing\Indexing\upload\IAS_Lec1_10min.mp4" />
+             </video> */}
+            <p>
+             {selectOptions}
+            </p>
+        </div>
+
+
+
+
+
+
+
+
+
+        // <div className="background-material">
+        //     <div className="container mt-4 shadow p-3 mb-5 bg-body rounded">
+        //         <div>
+        //             <h3>UPLOAD THE VIDEO</h3>
+        //             <div className="container mt-4 p-3 mb-5 bg-body rounded">
+        //                 <form
+        //                     className="row g-3">
+        //                     <div className="form-group files">
+        //                         <input
+        //                             type="file"
+        //                             className="form-control"
+        //                             onChange={(e)=>setVideo(e.target.files[0])}
+        //                             multiple=""
+        //                             required=""
+        //                         />
+
+        //                         <button onClick={sendVideo}>UPLOAD</button>
+        //                     </div>
+
+        //                     {/* <div className="row g-3">
+        //                         <button onClick={sendVideo} className="button2-submit button-submit">UPLOAD</button>
+        //                     </div> */}
+        //                 </form>
+        //             </div>
+        //         </div>
+        //     </div>
+        // </div>
+    );
+
+}
+
+export default Upload;
\ No newline at end of file

frontend/src/routes/pageRoutes.js

@@ -8,7 +8,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';
+import Upload from '../indexing/upload';
 
 function PageRoutes() {
     return (
@@ -22,7 +22,8 @@ function PageRoutes() {
                         <Route path="/contact-us" component={ContactUs}/>
                         <Route path="/register" component={SignUp}/>
                         <Route path="/login" component={Login}/>
-                        <Route path="/class-notes" component={ClassNotes}/>
+                        <Route path="/upload" component={Upload}/>
+                        <Route path="/upload" component={Upload}/>
                     </Switch>
                 </section>
             </Router>