From 0171133d402460af9320118d2822af1bc1f7b84d Mon Sep 17 00:00:00 2001 From: lukas Date: Wed, 3 Jun 2020 12:26:10 +0200 Subject: [PATCH] improved tagging system new settings page tab --- api/Database.php | 2 +- api/extractvideopreviews.php | 29 ++++++++++++++-------- api/videoload.php | 38 +++++++++++++++++++++++++--- database.sql | 8 +++--- src/App.js | 27 +++++++------------- src/HomePage.js | 48 +++++++++++++++++++++++++++++------- src/Player.js | 20 ++++++++++----- src/RandomPage.js | 17 ++++++++----- src/Tag.js | 21 ++++++++++++++++ src/css/SideBar.css | 20 --------------- src/css/Tag.css | 19 ++++++++++++++ 11 files changed, 172 insertions(+), 77 deletions(-) create mode 100644 src/Tag.js create mode 100644 src/css/Tag.css diff --git a/api/Database.php b/api/Database.php index 11c563d..578cc2e 100644 --- a/api/Database.php +++ b/api/Database.php @@ -8,7 +8,7 @@ class Database private $servername = "192.168.0.30"; private $username = "root"; private $password = "1qayxsw2"; - private $dbname = "hub"; + private $dbname = "mediacenter"; // The db connection is established in the private constructor. private function __construct() diff --git a/api/extractvideopreviews.php b/api/extractvideopreviews.php index cc23ed9..6bdfea0 100755 --- a/api/extractvideopreviews.php +++ b/api/extractvideopreviews.php @@ -44,21 +44,21 @@ foreach ($arr as $elem) { if ($video_attributes['height'] >= 1080) { $query = "INSERT INTO video_tags(video_id,tag_id) VALUES ($last_id,2)"; if ($conn->query($query) !== TRUE) { - echo "failed to add tag here.\n"; + echo "failed to add default tag here.\n"; } } if ($video_attributes['height'] >= 720 && $video_attributes['height'] < 1080) { $query = "INSERT INTO video_tags(video_id,tag_id) VALUES ($last_id,4)"; if ($conn->query($query) !== TRUE) { - echo "failed to add tag here.\n"; + echo "failed to add default tag here.\n"; } } if ($video_attributes['height'] < 720) { $query = "INSERT INTO video_tags(video_id,tag_id) VALUES ($last_id,3)"; if ($conn->query($query) !== TRUE) { - echo "failed to add tag here.\n"; + echo "failed to add default tag here.\n"; } } $added++; @@ -125,19 +125,28 @@ function _get_video_attributes($video) $command = "$ffmpeg -i \"../videos/prn/$video\" -vstats 2>&1"; $output = shell_exec($command); + $codec = "null"; + $width = 0; + $height = 0; + $regex_sizes = "/Video: ([^,]*), ([^,]*), ([0-9]{1,4})x([0-9]{1,4})/"; // or : $regex_sizes = "/Video: ([^\r\n]*), ([^,]*), ([0-9]{1,4})x([0-9]{1,4})/"; (code from @1owk3y) if (preg_match($regex_sizes, $output, $regs)) { - $codec = $regs [1] ? $regs [1] : null; - $width = $regs [3] ? $regs [3] : null; - $height = $regs [4] ? $regs [4] : null; + $codec = $regs [1] ? $regs [1] : "null"; + $width = $regs [3] ? $regs [3] : 0; + $height = $regs [4] ? $regs [4] : 0; } + $hours = 0; + $mins = 0; + $secs = 0; + $ms = 0; + $regex_duration = "/Duration: ([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2}).([0-9]{1,2})/"; if (preg_match($regex_duration, $output, $regs)) { - $hours = $regs [1] ? $regs [1] : null; - $mins = $regs [2] ? $regs [2] : null; - $secs = $regs [3] ? $regs [3] : null; - $ms = $regs [4] ? $regs [4] : null; + $hours = $regs [1] ? $regs [1] : 0; + $mins = $regs [2] ? $regs [2] : 0; + $secs = $regs [3] ? $regs [3] : 0; + $ms = $regs [4] ? $regs [4] : 0; } return array('codec' => $codec, diff --git a/api/videoload.php b/api/videoload.php index fced3d9..916478e 100755 --- a/api/videoload.php +++ b/api/videoload.php @@ -3,7 +3,7 @@ require 'Database.php'; $conn = Database::getInstance()->getConnection(); - +//$_POST['action'] = "getRandomMovies";$_POST['number'] =6; if (isset($_POST['action'])) { $action = $_POST['action']; switch ($action) { @@ -28,14 +28,31 @@ if (isset($_POST['action'])) { echo(json_encode($rows)); break; case "getRandomMovies": + $return = new stdClass(); $query = "SELECT movie_id,movie_name FROM videos ORDER BY RAND() LIMIT " . $_POST['number']; $result = $conn->query($query); - $rows = array(); + $return->rows = array(); + + // get tags of random videos + $ids = []; while ($r = mysqli_fetch_assoc($result)) { - array_push($rows, $r); + array_push($return->rows, $r); + array_push($ids,"video_tags.video_id=".$r['movie_id']); } - echo(json_encode($rows)); + $idstring = implode(" OR ",$ids); + + $return->tags = array(); + $query = "SELECT t.tag_name FROM video_tags + INNER JOIN tags t on video_tags.tag_id = t.tag_id + WHERE $idstring + GROUP BY t.tag_name"; + $result = $conn->query($query); + while ($r = mysqli_fetch_assoc($result)) { + array_push($return->tags, $r); + } + + echo(json_encode($return)); break; case "loadVideo": $query = "SELECT movie_name,movie_url,thumbnail,likes,quality,length FROM videos WHERE movie_id='" . $_POST['movieid'] . "'"; @@ -50,6 +67,18 @@ if (isset($_POST['action'])) { $arr["likes"] = $row["likes"]; $arr["quality"] = $row["quality"]; $arr["length"] = $row["length"]; + + // load tags of this video + $arr['tags'] = Array(); + $query = "SELECT t.tag_name FROM video_tags + INNER JOIN tags t on video_tags.tag_id = t.tag_id + WHERE video_tags.video_id=".$_POST['movieid']." + GROUP BY t.tag_name"; + $result = $conn->query($query); + while ($r = mysqli_fetch_assoc($result)) { + array_push($arr['tags'], $r); + } + echo(json_encode($arr)); break; @@ -77,6 +106,7 @@ if (isset($_POST['action'])) { break; case "getTags": + // todo add this to loadVideo maybe $movieid = $_POST['movieid']; $query = "SELECT tag_name FROM video_tags diff --git a/database.sql b/database.sql index 33f364f..8eadc74 100644 --- a/database.sql +++ b/database.sql @@ -10,10 +10,12 @@ create table if not exists videos movie_id int auto_increment primary key, movie_name varchar(200) null, - movie_url varchar(200) null, + movie_url varchar(250) null, thumbnail mediumblob null, likes int default 0 null, - create_date datetime default CURRENT_TIMESTAMP null + create_date datetime default CURRENT_TIMESTAMP null, + quality int null, + length int null comment 'in seconds' ); create table if not exists video_tags @@ -24,4 +26,4 @@ create table if not exists video_tags foreign key (tag_id) references tags (tag_id), constraint video_tags_videos_movie_id_fk foreign key (video_id) references videos (movie_id) -); \ No newline at end of file +); diff --git a/src/App.js b/src/App.js index ec1eb14..7212793 100644 --- a/src/App.js +++ b/src/App.js @@ -48,19 +48,25 @@ class App extends React.Component {
  • this.loadHomePage()}>Home + onClick={() => this.setState({page: "default"})}>Home
  • this.loadRandomPage()}>Random Video + onClick={() => this.setState({page: "random"})}>Random Video
  • this.loadCategoriesPage()}>Categories + onClick={() => this.setState({page: "categories"})}>Categories +
    +
    • +
  • +
    this.setState({page: "settings"})}>Settings
    • @@ -70,21 +76,6 @@ class App extends React.Component { ); } - loadCategoriesPage() { - console.log("click categories"); - this.setState({page: "categories"}); - } - - loadRandomPage() { - console.log("click random"); - this.setState({page: "random"}); - } - - loadHomePage() { - console.log("click default"); - this.setState({page: "default"}); - } - showVideo(element) { this.setState({ page: "video" diff --git a/src/HomePage.js b/src/HomePage.js index 56f222c..8910973 100644 --- a/src/HomePage.js +++ b/src/HomePage.js @@ -4,6 +4,7 @@ import SideBar from "./SideBar"; import "./css/HomePage.css" import "./css/DefaultPage.css" +import Tag from "./Tag"; class HomePage extends React.Component { // stores all available movies @@ -23,7 +24,8 @@ class HomePage extends React.Component { sdvideonr: null, tagnr: null }, - tag: "all" + tag: "All", + selectionnr: null }; } @@ -34,7 +36,12 @@ class HomePage extends React.Component { this.fetchStartData(); } - // this function clears all preview elements an reloads gravity with tag + /** + * fetch available videos for specified tag + * this function clears all preview elements an reloads gravity with tag + * + * @param tag tag to fetch videos + */ fetchVideoData(tag) { const updateRequest = new FormData(); updateRequest.append('action', 'getMovies'); @@ -45,7 +52,10 @@ class HomePage extends React.Component { .then((response) => response.json() .then((result) => { this.data = result; - this.setState({loadeditems: []}); + this.setState({ + loadeditems: [], + selectionnr: this.data.length + }); this.loadindex = 0; this.loadPreviewBlock(12); })) @@ -54,6 +64,9 @@ class HomePage extends React.Component { }); } + /** + * fetch the necessary data for left info box + */ fetchStartData() { const updateRequest = new FormData(); updateRequest.append('action', 'getStartData'); @@ -69,7 +82,8 @@ class HomePage extends React.Component { hdvideonr: result['hd'], sdvideonr: result['sd'], tagnr: result['tags'] - }}); + } + }); })) .catch(() => { console.log("no connection to backend"); @@ -86,7 +100,7 @@ class HomePage extends React.Component {
    Home Page - All Videos - {this.state.sideinfo.videonr} + {this.state.tag} Videos - {this.state.selectionnr}
    @@ -99,10 +113,26 @@ class HomePage extends React.Component {
    {this.state.sideinfo.tagnr} different Tags!
    Default Tags:
    - - - - + { + this.setState({tag: "All"}); + this.fetchVideoData("all"); + }}>All + + { + this.setState({tag: "Full HD"}); + this.fetchVideoData("fullhd"); + }}>FullHd + + { + this.setState({tag: "Low Quality"}); + this.fetchVideoData("lowquality"); + }}>LowQuality + + { + this.setState({tag: "HD"}); + this.fetchVideoData("hd"); + }}>HD +
    {this.state.loadeditems.map(elem => ( diff --git a/src/Player.js b/src/Player.js index 20c61a0..b954f8c 100644 --- a/src/Player.js +++ b/src/Player.js @@ -2,13 +2,21 @@ import React from "react"; import "./css/Player.css" import {PlyrComponent} from 'plyr-react'; import SideBar from "./SideBar"; +import Tag from "./Tag"; class Player extends React.Component { constructor(props, context) { super(props, context); - this.state = {}; + this.state = { + sources: null, + movie_name: null, + likes: null, + quality: null, + length: null, + tags: [] + }; this.props = props; } @@ -50,10 +58,9 @@ class Player extends React.Component {
    {this.state.length} Minutes of length!
    Tags:
    - - - - + {this.state.tags.map((m) => ( + {m.tag_name} + ))}
    @@ -96,7 +103,8 @@ class Player extends React.Component { movie_name: result.movie_name, likes: result.likes, quality: result.quality, - length: result.length + length: result.length, + tags: result.tags }); }); } diff --git a/src/RandomPage.js b/src/RandomPage.js index 7412280..082574f 100644 --- a/src/RandomPage.js +++ b/src/RandomPage.js @@ -2,13 +2,15 @@ import React from "react"; import Preview from "./Preview"; import "./css/RandomPage.css" import SideBar from "./SideBar"; +import Tag from "./Tag"; class RandomPage extends React.Component { constructor(props, context) { super(props, context); this.state = { - videos: [] + videos: [], + tags: [] }; } @@ -26,10 +28,9 @@ class RandomPage extends React.Component {
    Visible Tags:
    - - - - + {this.state.tags.map((m) => ( + {m.tag_name} + ))}
    @@ -61,7 +62,11 @@ class RandomPage extends React.Component { fetch('/api/videoload.php', {method: 'POST', body: updateRequest}) .then((response) => response.json() .then((result) => { - this.setState({videos: result}); + console.log(result); + this.setState({ + videos: result.rows, + tags: result.tags + }); })) .catch(() => { console.log("no connection to backend"); diff --git a/src/Tag.js b/src/Tag.js new file mode 100644 index 0000000..c567a30 --- /dev/null +++ b/src/Tag.js @@ -0,0 +1,21 @@ +import React from "react"; + +import "./css/Tag.css" + +class Tag extends React.Component { + + constructor(props, context) { + super(props, context); + + this.props = props; + } + + render() { + // todo onclick events correctly + return ( + + ); + } +} + +export default Tag; diff --git a/src/css/SideBar.css b/src/css/SideBar.css index 3083984..e4a5874 100644 --- a/src/css/SideBar.css +++ b/src/css/SideBar.css @@ -9,26 +9,6 @@ border: 2px #3574fe solid; } -.tagbtn { - color: white; - margin: 10px; - background-color: #3574fe; - border: none; - border-radius: 10px; - padding: 5px 15px 5px 15px; - /*font-weight: bold;*/ - display: block; -} - -.tagbtn:focus { - background-color: #004eff; - outline: none; -} - -.tagbtn:hover { - background-color: #004eff; -} - .sidebartitle { font-weight: bold; font-size: larger; diff --git a/src/css/Tag.css b/src/css/Tag.css new file mode 100644 index 0000000..8af1b1f --- /dev/null +++ b/src/css/Tag.css @@ -0,0 +1,19 @@ +.tagbtn { + color: white; + margin: 10px; + background-color: #3574fe; + border: none; + border-radius: 10px; + padding: 5px 15px 5px 15px; + /*font-weight: bold;*/ + display: block; +} + +.tagbtn:focus { + background-color: #004eff; + outline: none; +} + +.tagbtn:hover { + background-color: #004eff; +}