improved tagging system

new settings page tab
2020-06-03 12:26:10 +02:00
parent a74cc17e54
commit 0171133d40
11 changed files with 172 additions and 77 deletions
--- 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()
--- 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,
--- 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 
--- 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)
-);
+);
--- a/src/App.js
+++ b/src/App.js
@@ -48,19 +48,25 @@ class App extends React.Component {
                        <li className="nav-item">
                            <div className="nav-link"
                                 style={this.state.page === "default" ? {color: "rgba(255,255,255,.75"} : {}}
-                                 onClick={() => this.loadHomePage()}>Home
+                                 onClick={() => this.setState({page: "default"})}>Home
                            </div>
                        </li>
                        <li className="nav-item">
                            <div className="nav-link"
                                 style={this.state.page === "random" ? {color: "rgba(255,255,255,.75"} : {}}
-                                 onClick={() => this.loadRandomPage()}>Random Video
+                                 onClick={() => this.setState({page: "random"})}>Random Video
                            </div>
                        </li>
                        <li className="nav-item">
                            <div className="nav-link"
                                 style={this.state.page === "categories" ? {color: "rgba(255,255,255,.75"} : {}}
-                                 onClick={() => this.loadCategoriesPage()}>Categories
+                                 onClick={() => this.setState({page: "categories"})}>Categories
+                            </div>
+                        </li>
+                        <li className="nav-item">
+                            <div className="nav-link"
+                                 style={this.state.page === "settings" ? {color: "rgba(255,255,255,.75"} : {}}
+                                 onClick={() => this.setState({page: "settings"})}>Settings
                            </div>
                        </li>
                    </ul>
@@ -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"
--- 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 {
            <div>
                <div className='pageheader'>
                    <span className='pageheadertitle'>Home Page</span>
-                    <span className='pageheadersubtitle'>All Videos - {this.state.sideinfo.videonr}</span>
+                    <span className='pageheadersubtitle'>{this.state.tag} Videos - {this.state.selectionnr}</span>
                    <hr/>
                </div>
                <SideBar>
@@ -99,10 +113,26 @@ class HomePage extends React.Component {
                    <div className='sidebarinfo'><b>{this.state.sideinfo.tagnr}</b> different Tags!</div>
                    <hr/>
                    <div className='sidebartitle'>Default Tags:</div>
-                    <button className='tagbtn' onClick={() => this.fetchVideoData("all")}>All</button>
-                    <button className='tagbtn' onClick={() => this.fetchVideoData("fullhd")}>FullHd</button>
-                    <button className='tagbtn' onClick={() => this.fetchVideoData("lowquality")}>LowQuality</button>
-                    <button className='tagbtn' onClick={() => this.fetchVideoData("hd")}>HD</button>
+                    <Tag onClick={() => {
+                        this.setState({tag: "All"});
+                        this.fetchVideoData("all");
+                    }}>All
+                    </Tag>
+                    <Tag onClick={() => {
+                        this.setState({tag: "Full HD"});
+                        this.fetchVideoData("fullhd");
+                    }}>FullHd
+                    </Tag>
+                    <Tag onClick={() => {
+                        this.setState({tag: "Low Quality"});
+                        this.fetchVideoData("lowquality");
+                    }}>LowQuality
+                    </Tag>
+                    <Tag onClick={() => {
+                        this.setState({tag: "HD"});
+                        this.fetchVideoData("hd");
+                    }}>HD
+                    </Tag>
                </SideBar>
                <div className='maincontent'>
                    {this.state.loadeditems.map(elem => (
--- 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 {
                    <div className='sidebarinfo'><b>{this.state.length}</b> Minutes of length!</div>
                    <hr/>
                    <div className='sidebartitle'>Tags:</div>
-                    <button className='tagbtn' onClick={() => this.fetchVideoData("all")}>All</button>
-                    <button className='tagbtn' onClick={() => this.fetchVideoData("fullhd")}>FullHd</button>
-                    <button className='tagbtn' onClick={() => this.fetchVideoData("lowquality")}>LowQuality</button>
-                    <button className='tagbtn' onClick={() => this.fetchVideoData("hd")}>HD</button>
+                    {this.state.tags.map((m) => (
+                        <Tag>{m.tag_name}</Tag>
+                    ))}
                </SideBar>

                <div className="videowrapper">
@@ -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
                });
            });
    }
--- 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 {
                </div>
                <SideBar>
                    <div className='sidebartitle'>Visible Tags:</div>
-                    <button className='tagbtn' onClick={() => this.fetchVideoData("all")}>All</button>
-                    <button className='tagbtn' onClick={() => this.fetchVideoData("fullhd")}>FullHd</button>
-                    <button className='tagbtn' onClick={() => this.fetchVideoData("lowquality")}>LowQuality</button>
-                    <button className='tagbtn' onClick={() => this.fetchVideoData("hd")}>HD</button>
+                    {this.state.tags.map((m) => (
+                        <Tag>{m.tag_name}</Tag>
+                    ))}
                </SideBar>

                <div className='maincontent'>
@@ -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");
--- a/src/Tag.js
+++ 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 (
+            <button className='tagbtn' onClick={this.props.onClick}>{this.props.children}</button>
+        );
+    }
+}
+
+export default Tag;
--- 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;
--- a/src/css/Tag.css
+++ 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;
+}