lukas/OpenMediaCenter
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

load previews correctly with fetch

Browse Source
This commit is contained in:
lukas 2020-05-31 20:24:35 +02:00
parent 1c2fe33cca
commit c7071491e3
19 changed files with 215 additions and 292 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
category.html
View File

@ -1,47 +0,0 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>hub</title>
<link rel="stylesheet" href="css/plyr.css"/>
<link rel="stylesheet" href="css/index.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<script src="js/plyr.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Lukis Tube</a>
<ul class="navbar-nav">
<li class="nav-item ">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="random.html">Random Video</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="category.html">Categories</a>
</li>
</ul>
</nav>
</body>
</html>

0
css/index.css
View File

1
css/plyr.css
View File

File diff suppressed because one or more lines are too long

0
css/random.css
View File

6
index.html
View File

@ -3,9 +3,9 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>hub</title> <title>hub</title>
<link rel="stylesheet" href="css/plyr.css"/> <link rel="stylesheet" href="src/css/plyr.css"/>
<link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="src/css/index.css">
<link rel="stylesheet" href="css/video.css"> <link rel="stylesheet" href="src/css/video.css">
<!-- Latest compiled and minified CSS --> <!-- Latest compiled and minified CSS -->

32
package-lock.json generated
View File

@ -4216,6 +4216,11 @@
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.10.tgz", "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.10.tgz",
"integrity": "sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==" "integrity": "sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w=="
}, },
"custom-event-polyfill": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz",
"integrity": "sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w=="
},
"cyclist": { "cyclist": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz", "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@ -7834,6 +7839,11 @@
} }
} }
}, },
"loadjs": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/loadjs/-/loadjs-4.2.0.tgz",
"integrity": "sha512-AgQGZisAlTPbTEzrHPb6q+NYBMD+DP9uvGSIjSUM5uG+0jG15cb8axWpxuOIqrmQjn6scaaH8JwloiP27b2KXA=="
},
"locate-path": { "locate-path": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
@ -9131,6 +9141,18 @@
"find-up": "^2.1.0" "find-up": "^2.1.0"
} }
}, },
"plyr": {
"version": "3.6.2",
"resolved": "https://registry.npmjs.org/plyr/-/plyr-3.6.2.tgz",
"integrity": "sha512-CjAhRDtzyGqMRte9Phj4FsZFegS9VxW60boOhQsAnZHuiFG3yVBRcodWsGZ79GuXHHelc4DxMHO+z0QggY+9qQ==",
"requires": {
"core-js": "^3.6.5",
"custom-event-polyfill": "^1.0.7",
"loadjs": "^4.2.0",
"rangetouch": "^2.0.1",
"url-polyfill": "^1.1.8"
}
},
"pn": { "pn": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/pn/-/pn-1.1.0.tgz", "resolved": "https://registry.npmjs.org/pn/-/pn-1.1.0.tgz",
@ -10326,6 +10348,11 @@
"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz", "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
"integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==" "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
}, },
"rangetouch": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/rangetouch/-/rangetouch-2.0.1.tgz",
"integrity": "sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA=="
},
"raw-body": { "raw-body": {
"version": "2.4.0", "version": "2.4.0",
"resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz", "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
@ -12810,6 +12837,11 @@
"requires-port": "^1.0.0" "requires-port": "^1.0.0"
} }
}, },
"url-polyfill": {
"version": "1.1.9",
"resolved": "https://registry.npmjs.org/url-polyfill/-/url-polyfill-1.1.9.tgz",
"integrity": "sha512-q/R5sowGuRfKHm497swkV+s9cPYtZRkHxzpDjRhqLO58FwdWTIkt6Y/fJlznUD/exaKx/XnDzCYXz0V16ND7ow=="
},
"use": { "use": {
"version": "3.1.1", "version": "3.1.1",
"resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz", "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",

2
package.json
View File

@ -7,6 +7,7 @@
"@testing-library/react": "^9.5.0", "@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1", "@testing-library/user-event": "^7.2.1",
"bootstrap": "^4.5.0", "bootstrap": "^4.5.0",
"plyr": "^3.6.2",
"react": "^16.13.1", "react": "^16.13.1",
"react-dom": "^16.13.1", "react-dom": "^16.13.1",
"react-scripts": "3.4.1" "react-scripts": "3.4.1"
@ -17,6 +18,7 @@
"test": "react-scripts test", "test": "react-scripts test",
"eject": "react-scripts eject" "eject": "react-scripts eject"
}, },
"proxy": "http://127.0.0.1:4000",
"eslintConfig": { "eslintConfig": {
"extends": "react-app" "extends": "react-app"
}, },

85
random.html
View File

@ -1,85 +0,0 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>hub</title>
<link rel="stylesheet" href="css/plyr.css"/>
<link rel="stylesheet" href="css/video.css">
<link rel="stylesheet" href="css/random.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<script src="js/plyr.js"></script>
<script src="js/random.js"></script>
</head>
<body>
<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Lukis Tube</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="random.html">Random Video</a>
</li>
<li class="nav-item">
<a class="nav-link" href="category.html">Categories</a>
</li>
</ul>
</nav>
<div class="videopagewrapper hideit">
<div class="row">
<div class="col-sm-2">
<div class="videoleftbanner">
<div class="likefield">Likes: 10</div>
</div>
</div>
<div class="col-sm-8">
<div class="videowrapper"></div>
</div>
<div class="col-sm-2">
<div class="closebutton">Close</div>
<div class="videorightbanner"></div>
</div>
</div>
<div class="row">
<div class="col-sm-5">
</div>
<div class="col-sm-2">
<button id="likebtn">Like it!</button>
<button id="tagbutton">Tag it!</button>
</div>
<div class="col-sm-5">
</div>
</div>
</div>
<div class="previewcontainer">
</div>
<div style="width: 100%"><button type="button" id="shufflebtn" class="btn btn-success">Shuffle</button></div>
</body>
</html>

11
src/AlternativeBody.js
View File

@ -1,11 +0,0 @@
import * as React from "react";
class AlternativeBody extends React.Component{
render() {
return (
<div>Second page!</div>
);
}
}
export default AlternativeBody;

1
src/App.css
View File

@ -1 +0,0 @@

59
src/App.js
View File

@ -1,29 +1,12 @@
import React from 'react'; import React from 'react';
import './App.css';
import MainBody from "./MainBody"; import MainBody from "./MainBody";
import AlternativeBody from "./AlternativeBody"
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
class App extends React.Component { class App extends React.Component {
page1click() { constructor(props, context) {
console.log("click page1"); super(props, context);
this.state = {page: "default"};
// rerender mainbody space here
ReactDOM.render(
<MainBody/>,
document.getElementById("mainbody")
);
}
page2click() {
console.log("click page2");
// rerender mainbody space here
ReactDOM.render(
<AlternativeBody/>,
document.getElementById("mainbody")
);
} }
render() { render() {
@ -34,36 +17,34 @@ class App extends React.Component {
<ul className="navbar-nav"> <ul className="navbar-nav">
<li className="nav-item"> <li className="nav-item">
<a className="nav-link" onClick={() => this.homePageClick()} href="!#">Home</a> <a className="nav-link" onClick={() => this.loadHomePage()} href="!#">Home</a>
</li> </li>
<li className="nav-item"> <li className="nav-item">
<a className="nav-link" onClick={() => this.homePageClick()} href="!#">Random Video</a> <a className="nav-link" onClick={() => this.loadRandomPage()} href="!#">Random Video</a>
</li> </li>
<li className="nav-item"> <li className="nav-item">
<a className="nav-link" onClick={() => this.homePageClick()} href="!#">Categories</a> <a className="nav-link" onClick={() => this.loadCategoriesPage()} href="!#">Categories</a>
</li> </li>
</ul> </ul>
</nav> </nav>
<div> <MainBody page={this.state.page}/>
<button onClick={() => this.page1click()}>Page1</button>
<button onClick={() => this.page2click()}>Page2</button>
</div>
<div id="mainbody">
mimimimimi
</div>
</div> </div>
); );
} }
homePageClick() { loadCategoriesPage() {
console.log("click page1"); console.log("click categories");
this.setState({page: "categories"});
}
// rerender mainbody space here loadRandomPage() {
ReactDOM.render( console.log("click random");
<MainBody/>, this.setState({page: "random"});
document.getElementById("mainbody") }
);
loadHomePage() {
console.log("click default");
this.setState({page: "default"});
} }
} }

58
src/HomePage.js Normal file
View File

@ -0,0 +1,58 @@
import React from "react";
import Preview from "./Preview";
import './css/video.css'
class HomePage extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
data: null
};
}
componentDidMount() {
// todo check if better here or in constructor
const updateRequest = new FormData();
updateRequest.append('action', 'getMovies');
// fetch all videos available
fetch('/php/videoload.php', {method: 'POST', body: updateRequest})
.then((response) => response.json())
.then((result) => {
this.setState({data: result});
});
}
componentWillUnmount() {
this.setState({});
}
render() {
return (
<div>
<div><h1>Home page</h1></div>
{this.state.data ? this.loadPreviewBlock(12) : <div>not loaded yet</div>}
</div>
);
}
loadPreview(index) {
return (
<Preview
key={index}
name={this.state.data[index].movie_name}
movie_id={this.state.data[index].movie_id}/>
);
}
loadPreviewBlock(nr) {
let ret = [];
for (let i = 0; i < nr; i++) {
ret.push(this.loadPreview(i));
}
return (ret);
}
}
export default HomePage;

26
src/MainBody.js
View File

@ -1,19 +1,21 @@
import React from "react"; import React from "react";
import HomePage from "./HomePage";
class MainBody extends React.Component { class MainBody extends React.Component {
constructor(props) {
super(props);
this.props = props;
}
render() { render() {
const requestOptions = { let page;
method: 'POST', if (this.props.page === "default") {
headers: { 'Content-Type': 'application/json' }, page = <HomePage/>;
body: JSON.stringify({ title: 'React POST Request Example' }) }else {
}; page = <div>unimplemented yet!</div>;
fetch('https://jsonplaceholder.typicode.com/posts', requestOptions) }
.then(response => response.json()) return (page);
.then(data => this.setState({ postId: data.id }));
return (
<div>Hey from other class</div>
);
} }
} }
export default MainBody; export default MainBody;

54
src/Preview.js Normal file
View File

@ -0,0 +1,54 @@
import React from "react";
import "./css/Preview.css"
class Preview extends React.Component {
constructor(props, context) {
super(props, context);
this.props = props;
this.state = {
previewpicture: null,
name: null,
url: null
};
}
componentWillUnmount() {
this.setState({});
}
componentDidMount() {
this.setState({
previewpicture: null,
name: this.props.name,
url: this.props.url
})
const updateRequest = new FormData();
updateRequest.append('action', 'readThumbnail');
updateRequest.append('movieid', this.props.movie_id);
fetch('/php/videoload.php', {method: 'POST', body: updateRequest})
.then((response) => response.text())
.then((result) => {
this.setState(prevState => ({
...prevState.previewpicture, previewpicture: result
}));
});
}
render() {
return (
<div className='videopreview'>
<div className='previewtitle'>{this.state.name}</div>
<div className='previewpic'>
<img className='previewimage'
src={this.state.previewpicture}
alt='no thumbnail found'/>
</div>
</div>
);
}
}
export default Preview;

65
src/Zwei.js
View File

@ -1,65 +0,0 @@
import React from 'react';
class TodoApp extends React.Component {
constructor(props) {
super(props);
this.state = {items: [], text: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
render() {
return (
<div>
<h3>TODO</h3>
<TodoList items={this.state.items}/>
<form onSubmit={this.handleSubmit}>
<label htmlFor="new-todo">
What needs to be done?
</label>
<input
id="new-todo"
onChange={this.handleChange}
value={this.state.text}
/>
<button>
Add #{this.state.items.length + 1}
</button>
</form>
</div>
);
}
handleChange(e) {
this.setState({text: e.target.value});
}
handleSubmit(e) {
e.preventDefault();
if (this.state.text.length === 0) {
return;
}
const newItem = {
text: this.state.text,
id: Date.now()
};
this.setState(state => ({
items: state.items.concat(newItem),
text: ''
}));
}
}
class TodoList extends React.Component {
render() {
return (
<ul>
{this.props.items.map(item => (
<li key={item.id}>{item.text}</li>
))}
</ul>
);
}
}
export default TodoApp;

31
src/css/Preview.css Normal file
View File

@ -0,0 +1,31 @@
.previewtitle {
height: 10%;
color: white;
text-align: center;
}
.previewpic {
height: 80%;
}
.previewimage{
width:100%;
height:100%;
}
.videopreview {
height: 300px;
width: 30%;
float: left;
margin: 1%;
background-color: #7F7F7F;
cursor: pointer;
opacity: 0.9;
border: 10px;
border-radius: 20px;
}
.videopreview:hover {
opacity: 1;
transition: opacity 0.5s;
}

0
src/index.css → src/css/index.css
View File

27
css/video.css → src/css/video.css
View File

@ -41,30 +41,3 @@
width: 80%; width: 80%;
margin-right: 10%; margin-right: 10%;
} }
.videopreview {
height: 300px;
width: 30%;
float: left;
margin: 1%;
background-color: #7F7F7F;
cursor: pointer;
opacity: 0.9;
border: 10px;
border-radius: 20px;
}
.videopreview:hover {
opacity: 1;
transition: opacity 0.5s;
}
.previewtitle {
height: 10%;
color: white;
text-align: center;
}
.previewpic {
height: 80%;
}

2
src/index.js
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import './index.css'; import './css/index.css';
import App from './App'; import App from './App';
import * as serviceWorker from './serviceWorker'; import * as serviceWorker from './serviceWorker';