Commit c9d83712 authored by tandin2000's avatar tandin2000

tans FE

parent 03f7f066
This diff is collapsed.
......@@ -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": {
......
......@@ -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>
......
......@@ -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
......
......@@ -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>
......
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
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