created settings page

set html title
poll infos about current reindex
better hover effect of preview tiles
hide non existing infos in Player
fixed wrong tagging of lq resolutions
This commit is contained in:
lukas 2020-06-04 22:19:18 +02:00
parent fd12f1eb56
commit 7b044f97b8
10 changed files with 152 additions and 16 deletions

View File

@ -12,7 +12,7 @@ For organizing videos tags are used.
Here you can see an example main page:
![Image of OpenMediaCenter](https://i.ibb.co/pZMj9GL/Screenshot-20200604-163448.png)
![Image of OpenMediaCenter](https://i.ibb.co/2PC3fmk/Screenshot-20200604-163448.png)
## Installation
First of all clone the repository.
@ -35,5 +35,5 @@ Now you can access your MediaCenter via the servers global ip (:
## Contact
Any contribution is appreciated.
Feel free to contact me (lukas.heiligenbrunner@gmail.com), open an issue or request a new featur.
Feel free to contact me (lukas.heiligenbrunner@gmail.com), open an issue or request a new feature.

View File

@ -8,7 +8,7 @@ class Database
private string $servername = "192.168.0.30";
private string $username = "root";
private string $password = "1qayxsw2";
private string $dbname = "mediacenter";
private string $dbname = "hub";
// The db connection is established in the private constructor.
private function __construct()

18
api/extractionData.php Normal file
View File

@ -0,0 +1,18 @@
<?php
$return = new stdClass();
if (file_exists("/tmp/output.log")) {
$out = file_get_contents("/tmp/output.log");
// clear log file
file_put_contents("/tmp/output.log", "");
$return->message = $out;
$return->contentAvailable = true;
if (substr($out, -strlen("-42")) == "-42") {
unlink("/tmp/output.log");
}
} else {
$return->contentAvailable = false;
}
echo json_encode($return);

View File

@ -2,6 +2,8 @@
require 'Database.php';
require 'TMDBMovie.php';
writeLog("starting extraction!\n");
$ffmpeg = 'ffmpeg'; //or: /usr/bin/ffmpeg , or /usr/local/bin/ffmpeg - depends on your installation (type which ffmpeg into a console to find the install path)
$tmdb = new TMDBMovie();
@ -35,6 +37,7 @@ foreach ($arr as $elem) {
$genres = $dta->genre_ids;
} else {
echo "nothing found with TMDB!\n";
writeLog("nothing found with TMDB!\n");
$pic = shell_exec("ffmpeg -hide_banner -loglevel panic -ss 00:04:00 -i \"../videos/prn/$elem\" -vframes 1 -q:v 2 -f singlejpeg pipe:1 2>/dev/null");
}
@ -78,6 +81,7 @@ foreach ($arr as $elem) {
if ($conn->query($query) === TRUE) {
echo('successfully added ' . $elem . " to video gravity\n");
writeLog('successfully added ' . $elem . " to video gravity\n");
$last_id = $conn->insert_id;
// full hd
@ -85,6 +89,7 @@ foreach ($arr as $elem) {
$query = "INSERT INTO video_tags(video_id,tag_id) VALUES ($last_id,2)";
if ($conn->query($query) !== TRUE) {
echo "failed to add default tag here.\n";
writeLog("failed to add default tag here.\n");
}
}
@ -92,21 +97,23 @@ foreach ($arr as $elem) {
$query = "INSERT INTO video_tags(video_id,tag_id) VALUES ($last_id,4)";
if ($conn->query($query) !== TRUE) {
echo "failed to add default tag here.\n";
writeLog("failed to add default tag here.\n");
}
}
if ($width < 1250) {
if ($width < 1250 && $width > 0) {
$query = "INSERT INTO video_tags(video_id,tag_id) VALUES ($last_id,3)";
if ($conn->query($query) !== TRUE) {
echo "failed to add default tag here.\n";
writeLog("failed to add default tag here.\n");
}
}
// handle tmdb genres here!
if($genres != -1){
if ($genres != -1) {
foreach ($genres as $genre) {
// check if genre is already a tag in db
echo $genre."\n\n";
// echo $genre."\n\n";
}
}
@ -115,7 +122,9 @@ foreach ($arr as $elem) {
$all++;
} else {
echo('errored item: ' . $elem . "\n");
writeLog('errored item: ' . $elem . "\n");
echo('{"data":"' . $conn->error . '"}\n');
writeLog('{"data":"' . $conn->error . '"}\n');
$failed++;
}
} else {
@ -123,6 +132,7 @@ foreach ($arr as $elem) {
}
} else {
echo($elem . " does not contain a .mp4 extension! - skipping \n");
writeLog($elem . " does not contain a .mp4 extension! - skipping \n");
}
}
}
@ -133,8 +143,11 @@ $r = mysqli_fetch_assoc($result);
if ($all < $r['count']) {
echo "should be in gravity: " . $all . "\n";
writeLog("should be in gravity: " . $all . "\n");
echo "really in gravity: " . $r['count'] . "\n";
writeLog("really in gravity: " . $r['count'] . "\n");
echo "cleaning up gravity\n";
writeLog("cleaning up gravity\n");
$query = "SELECT movie_id,movie_url FROM videos";
$result = $conn->query($query);
@ -144,9 +157,11 @@ if ($all < $r['count']) {
$query = "DELETE FROM videos WHERE movie_id='" . $r['movie_id'] . "'";
if ($conn->query($query) === TRUE) {
echo('successfully deleted ' . $r['movie_url'] . " from video gravity\n");
writeLog('successfully deleted ' . $r['movie_url'] . " from video gravity\n");
$deleted++;
} else {
echo "failed to delete " . $r['movie_url'] . " from gravity: " . $conn->error . "\n";
writeLog("failed to delete " . $r['movie_url'] . " from gravity: " . $conn->error . "\n");
}
}
}
@ -166,10 +181,16 @@ if ($result->num_rows == 1) {
}
echo "Total gravity: " . $all . "\n";
writeLog("Total gravity: " . $all . "\n");
echo "Size of Databse is: " . $size . "MB\n";
writeLog("Size of Databse is: " . $size . "MB\n");
echo "added in this run: " . $added . "\n";
writeLog("added in this run: " . $added . "\n");
echo "deleted in this run: " . $deleted . "\n";
writeLog("deleted in this run: " . $deleted . "\n");
echo "errored in this run: " . $failed . "\n";
writeLog("errored in this run: " . $failed . "\n");
writeLog("-42");
function _get_video_attributes($video)
{
@ -177,3 +198,9 @@ function _get_video_attributes($video)
$output = shell_exec($command);
return json_decode($output);
}
function writeLog(string $message)
{
file_put_contents("/tmp/output.log", $message, FILE_APPEND);
flush();
}

View File

@ -7,7 +7,7 @@
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
content="A Application to run a Mediacenter in your local network"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>OpenMediaCenter</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

View File

@ -5,6 +5,7 @@ import RandomPage from "./RandomPage";
// include bootstraps css
import 'bootstrap/dist/css/bootstrap.min.css';
import SettingsPage from "./SettingsPage";
class App extends React.Component {
constructor(props, context) {
@ -26,6 +27,9 @@ class App extends React.Component {
} else if (this.state.page === "random") {
page = <RandomPage viewbinding={{showVideo: this.showVideo, hideVideo: this.hideVideo}}/>;
this.mypage = page;
} else if (this.state.page === "settings") {
page = <SettingsPage/>;
this.mypage = page;
} else if (this.state.page === "video") {
// show videoelement if neccessary
page = this.videoelement;

View File

@ -54,8 +54,12 @@ class Player extends React.Component {
<div className='sidebartitle'>Infos:</div>
<hr/>
<div className='sidebarinfo'><b>{this.state.likes}</b> Likes!</div>
<div className='sidebarinfo'><b> {this.state.quality}p</b> Quality!</div>
<div className='sidebarinfo'><b>{this.state.length}</b> Minutes of length!</div>
{this.state.quality != 0 ?
<div className='sidebarinfo'><b>{this.state.quality}p</b> Quality!
</div> : null}
{this.state.length != 0 ?
<div className='sidebarinfo'><b>{Math.round(this.state.length / 60)}</b> Minutes of length!
</div> : null}
<hr/>
<div className='sidebartitle'>Tags:</div>
{this.state.tags.map((m) => (

View File

@ -23,7 +23,7 @@ class RandomPage extends React.Component {
<div>
<div className='pageheader'>
<span className='pageheadertitle'>Random Videos</span>
<span className='pageheadersubtitle'>6pc</span>
<span className='pageheadersubtitle'>4pc</span>
<hr/>
</div>
<SideBar>

84
src/SettingsPage.js Normal file
View File

@ -0,0 +1,84 @@
import React from "react";
import "./css/DefaultPage.css"
class SettingsPage extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
text: []
};
}
updateStatus = () => {
const updateRequest = new FormData();
fetch('/api/extractionData.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
if (result.contentAvailable === true) {
console.log(result);
this.setState({
text: [...result.message.split("\n"),
...this.state.text]
});
} else {
clearInterval(this.myinterval);
}
}))
.catch(() => {
console.log("no connection to backend");
});
};
componentDidMount() {
if(this.myinterval){
clearInterval(this.myinterval);
}
this.myinterval = setInterval(this.updateStatus, 1000);
}
componentWillUnmount() {
clearInterval(this.myinterval);
}
render() {
return (
<div>
<div className='pageheader'>
<span className='pageheadertitle'>Settings Page</span>
<span className='pageheadersubtitle'>todo</span>
<hr/>
</div>
<button onClick={() => {
this.startReindex()
}}>Reindex Movies
</button>
<div>{this.state.text.map(m => (
<div>{m}</div>
))}</div>
</div>
);
}
startReindex() {
console.log("starting");
const updateRequest = new FormData();
// fetch all videos available
fetch('/api/extractvideopreviews.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
console.log("returned");
}))
.catch(() => {
console.log("no connection to backend");
});
if(this.myinterval){
clearInterval(this.myinterval);
}
this.myinterval = setInterval(this.updateStatus, 1000);
console.log("sent");
}
}
export default SettingsPage;

View File

@ -18,24 +18,23 @@
max-width: 410px;
}
.previewbottom{
.previewbottom {
height: 20px;
}
.videopreview {
/*width: 250px;*/
float: left;
margin-left: 25px;
margin-top: 25px;
/*background-color: #7F7F7F;*/
background-color: #a8c3ff;
cursor: pointer;
opacity: 0.9;
border: 10px;
opacity: 0.85;
border-radius: 20px;
}
.videopreview:hover {
opacity: 1;
transition: opacity 0.5s;
box-shadow: rgba(2, 12, 27, 0.7) 0px 0px 0px 5px;
transition: all 300ms;
}