Commit 2b00bac0 authored by De Silva K.C.C.C's avatar De Silva K.C.C.C

FE changes

parent f530a77c
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -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",
......
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
......@@ -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>
......
......@@ -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%;
......
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
......@@ -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>
......
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