Skip to content

2
2022-066
Commit 2b00bac0 authored by De Silva K.C.C.C's avatar De Silva K.C.C.C
Browse files
Options

FE changes

parent f530a77c
Hide whitespace changes
Inline Side-by-side
Showing with 16953 additions and 96 deletions
frontend/package-lock.json
View file @ 2b00bac0
This source diff could not be displayed because it is too large. You can view the blob instead.
frontend/package.json
View file @ 2b00bac0
......@@ -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 deleted 100644 → 0
View file @ f530a77c
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
View file @ 2b00bac0
......@@ -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
View file @ 2b00bac0
......@@ -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 0 → 100644
View file @ 2b00bac0
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
View file @ 2b00bac0
......@@ -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