tans FE

frontend/package.json

@@ -12,27 +12,28 @@
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
     "antd": "^3.26.5",
-    "prop-types": "^15.7.2",
-    "react-dropzone": "^14.2.2",
-    "react-pdf": "^6.0.3",
-    "react-redux": "^7.1.3",
-    "react-speech-recognition": "^3.9.0",
-    "redux": "^4.0.5",
-    "redux-promise": "^0.6.0",
-    "redux-thunk": "^2.3.0",
-    "uuid": "^3.3.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-dom": "^17.0.2",
+    "react-dropzone": "^14.2.2",
     "react-hint": "^3.2.1",
     "react-icons": "^4.3.1",
+    "react-js-loader": "^0.1.0",
+    "react-pdf": "^6.0.3",
     "react-player": "^2.11.0",
+    "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",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

frontend/src/components/navBar/navbar.js

@@ -27,7 +27,7 @@ const Navbar = () => {
                     </div>
                     <div className="navbar-links_container">
                         <p><Link style={isActive(history, '/')} to="/">Home</Link></p>
-                        <p><Link style={isActive(history, '#')} to="#">Video summarizer</Link></p>
+                        <p><Link style={isActive(history, '/videoSummerier')} to="/videoSummerier">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, '/upload')} to="/upload">Video Indexer</Link></p>
@@ -43,7 +43,7 @@ const Navbar = () => {
                         <div className="navbar-menu_container scale-up-center">
                             <div className="navbar-menu_container-links">
                                 <p><Link style={isActive(history, '/')} to="/">Home</Link></p>
-                                <p><Link style={isActive(history, '#')} to="#">Video summarizer</Link></p>
+                                <p><Link style={isActive(history, '/videoSummerier')} to="/videoSummerier">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, '/upload')} to="/upload">Video Indexer</Link></p>

frontend/src/indexing/upload.js

@@ -2,8 +2,8 @@ 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'
+import Loader from "react-js-loader";
+
 
 function Upload() {
     const [isPlaying, setIsPlaying] = React.useState(true);
@@ -14,6 +14,7 @@ function Upload() {
     const [indexingData, setIndexingData] = useState([])
     // const [post, setPost] = React.useState(null);
     const [buttonStatus, setButtonStatus] = useState(false);
+    const [loadingStatus, setLoadingStatus] = useState(false);
     const [videoFilePath, setVideoFilePath] = useState([]);
     const [initialValue, setInitalValue] = useState(0);
     const handleVideoUpload = (event) => {
@@ -30,6 +31,7 @@ function Upload() {
       }, [isReady]);
     async function sendVideo() {
         // console.log(video)
+        setLoadingStatus(true)
         const formData = new FormData();
         formData.append('video', video);
         fetch("http://127.0.0.1:1100/topic", {
@@ -40,9 +42,11 @@ function Upload() {
             .then(response => {
                               setIndexingData(response);
                               setButtonStatus(true);
+                              setLoadingStatus(false)
             })
             .catch(err => {
                 console.log(err);
+                setLoadingStatus(false);
             });
     }
     // console.log(indexingData)
@@ -68,12 +72,20 @@ function Upload() {
 
     return (
         <>
+        {loadingStatus === true ? (
+            <div className={"item"}>
+                <Loader type="spinner-default" bgColor={"#FFFFFF"} title={"Processing..."} color={'#FFFFFF'} size={100} />
+            </div>
+        ):
+        ""}
+
+            
         <center>
         <div style={{"background-color":"White", width:"60%", "border-radius": "15px", "margin-top":"50px"}}>
             <center>
             <input type="file" className='forrm-control'  style={{"margin-top": "100px","margin-bottom": "50px" }}  onChange={handleVideoUpload}></input>
 
-            <button onClick={sendVideo} className="btn btn-primary">Upload</button>
+            <button disabled={loadingStatus} onClick={sendVideo} className="btn btn-primary">Upload</button>
             {buttonStatus === true ? (
                 <div>
                  <ReactPlayer 

frontend/src/routes/pageRoutes.js

@@ -11,6 +11,7 @@ import Login from '../main/Login/login';
 import ContactUs from '../main/ContactUs/contactUs';
 import ClassNotes from '../classNotes/classNotes';
 import Upload from '../indexing/upload';
+import VideoSum from "../videoSumm/sumerzier";
 
 function PageRoutes() {
     return (
@@ -27,6 +28,7 @@ function PageRoutes() {
                         <Route path="/login" component={Login}/>
                         <Route path="/class-notes" component={ClassNotes}/>
                         <Route path="/upload" component={Upload}/>
+                        <Route path="/videoSummerier" component={VideoSum}/>
                     </Switch>
                 </section>
             </Router>

frontend/src/videoSumm/sumerzier.js

+import React, { Component } from 'react';
+import '../indexing/style/upload.css';
+import { useEffect, useState } from 'react';
+import ReactPlayer from "react-player";
+import Loader from "react-js-loader";
+
+
+function VideoSum() {
+    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 [buttonStatus, setButtonStatus] = useState(false);
+    const [loadingStatus, setLoadingStatus] = useState(false);
+    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)
+        setLoadingStatus(true)
+        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);
+                              setButtonStatus(true);
+                              setLoadingStatus(false)
+            })
+            .catch(err => {
+                console.log(err);
+                setLoadingStatus(false);
+            });
+    }
+    // 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 (
+        <>
+        {loadingStatus === true ? (
+            <div className={"item"}>
+                <Loader type="spinner-default" bgColor={"#FFFFFF"} title={"Processing..."} color={'#FFFFFF'} size={100} />
+            </div>
+        ):
+        ""}
+
+            
+        <center>
+        <div style={{"background-color":"White", width:"60%", "border-radius": "15px", "margin-top":"50px"}}>
+            <center>
+            <input type="file" className='forrm-control'  style={{"margin-top": "100px","margin-bottom": "50px" }}  onChange={handleVideoUpload}></input>
+
+            <button disabled={loadingStatus} onClick={sendVideo} className="btn btn-primary">Upload</button>
+            {buttonStatus === true ? (
+                <div>
+                 <ReactPlayer 
+                    ref= {playerRef}
+
+                url={videoFilePath} 
+                playing={isPlaying}
+                width="50%"
+                height="50%"
+                controls={true}
+                onReady={onReady}
+                />
+                    <br />
+                <p>
+                {selectOptions}
+                </p>
+                
+                </div>
+            ): ""}
+            </center>
+           
+        </div>
+        </center>
+        </>
+    
+    );
+
+}
+
+export default VideoSum;
\ No newline at end of file