general tag system

extract video quality with ffmpeg

api/extractvideopreviews.php

@@ -1,5 +1,6 @@
 <?php
 require 'Database.php';
+$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)
 
 $conn = Database::getInstance()->getConnection();
 
@@ -23,12 +24,43 @@ foreach ($arr as $elem) {
             $image_base64 = base64_encode($pic);
 
             $image = 'data:image/jpeg;base64,' . $image_base64;
-            $conn = Database::getInstance()->getConnection();
 
-            $query = "INSERT INTO videos(movie_name,movie_url,thumbnail) VALUES ('" . mysqli_real_escape_string($conn, $elem) . "','" . mysqli_real_escape_string($conn, 'videos/prn/' . $elem) . "','$image')";
+            $video_attributes = _get_video_attributes($elem);
+
+            $duration = 60 * $video_attributes['hours'] + $video_attributes['mins'];
+
+            $query = "INSERT INTO videos(movie_name,movie_url,thumbnail,quality,length) 
+                            VALUES ('" . mysqli_real_escape_string($conn, $elem) . "',
+                            '" . mysqli_real_escape_string($conn, 'videos/prn/' . $elem) . "',
+                            '$image',
+                            '" . $video_attributes['height'] . "',
+                            '$duration')";
 
             if ($conn->query($query) === TRUE) {
                 echo('successfully added ' . $elem . " to video gravity\n");
+                $last_id = $conn->insert_id;
+
+                // full hd
+                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";
+                    }
+                }
+
+                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";
+                    }
+                }
+
+                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";
+                    }
+                }
                 $added++;
                 $all++;
             } else {
@@ -85,3 +117,35 @@ echo "Size of Databse is: " . $size . "MB\n";
 echo "added in this run: " . $added . "\n";
 echo "deleted in this run: " . $deleted . "\n";
 echo "errored in this run: " . $failed . "\n";
+
+function _get_video_attributes($video)
+{
+    global $ffmpeg;
+
+    $command = "$ffmpeg -i \"../videos/prn/$video\" -vstats 2>&1";
+    $output = shell_exec($command);
+
+    $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;
+    }
+
+    $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;
+    }
+
+    return array('codec' => $codec,
+        'width' => $width,
+        'height' => $height,
+        'hours' => $hours,
+        'mins' => $mins,
+        'secs' => $secs,
+        'ms' => $ms
+    );
+}

api/videoload.php

@@ -9,6 +9,16 @@ if (isset($_POST['action'])) {
     switch ($action) {
         case "getMovies":
             $query = "SELECT movie_id,movie_name FROM videos ORDER BY likes DESC, create_date ASC, movie_name ASC";
+            if (isset($_POST['tag'])) {
+                $tag = $_POST['tag'];
+                if($_POST['tag'] != "all"){
+                    $query = "SELECT movie_id,movie_name FROM videos 
+                            INNER JOIN video_tags vt on videos.movie_id = vt.video_id
+                            INNER JOIN tags t on vt.tag_id = t.tag_id
+                            WHERE t.tag_name = '$tag'
+                            ORDER BY likes DESC, create_date ASC, movie_name ASC";
+                }
+            }
             $result = $conn->query($query);
             $rows = array();
             while ($r = mysqli_fetch_assoc($result)) {
@@ -28,7 +38,7 @@ if (isset($_POST['action'])) {
             echo(json_encode($rows));
             break;
         case "loadVideo":
-            $query = "SELECT movie_url,thumbnail,likes FROM videos WHERE movie_id='" . $_POST['movieid'] . "'";
+            $query = "SELECT movie_url,thumbnail,likes,quality,length FROM videos WHERE movie_id='" . $_POST['movieid'] . "'";
 
             $result = $conn->query($query);
             $row = $result->fetch_assoc();
@@ -37,6 +47,8 @@ if (isset($_POST['action'])) {
             $arr["thumbnail"] = $row["thumbnail"];
             $arr["movie_url"] = $row["movie_url"];
             $arr["likes"] = $row["likes"];
+            $arr["quality"] = $row["quality"];
+            $arr["length"] = $row["length"];
             echo(json_encode($arr));
 
             break;

package-lock.json

@@ -2192,6 +2192,12 @@
       "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz",
       "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM="
     },
+    "amdefine": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
+      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
+      "optional": true
+    },
     "ansi-colors": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
@@ -2381,6 +2387,58 @@
       "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
       "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c="
     },
+    "ast-transform": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/ast-transform/-/ast-transform-0.0.0.tgz",
+      "integrity": "sha1-dJRAWIh9goPhidlUYAlHvJj+AGI=",
+      "requires": {
+        "escodegen": "~1.2.0",
+        "esprima": "~1.0.4",
+        "through": "~2.3.4"
+      },
+      "dependencies": {
+        "escodegen": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.2.0.tgz",
+          "integrity": "sha1-Cd55Z3kcyVi3+Jot220jRRrzJ+E=",
+          "requires": {
+            "esprima": "~1.0.4",
+            "estraverse": "~1.5.0",
+            "esutils": "~1.0.0",
+            "source-map": "~0.1.30"
+          }
+        },
+        "esprima": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/esprima/-/esprima-1.0.4.tgz",
+          "integrity": "sha1-n1V+CPw7TSbs6d00+Pv0drYlha0="
+        },
+        "estraverse": {
+          "version": "1.5.1",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-1.5.1.tgz",
+          "integrity": "sha1-hno+jlip+EYYr7bC3bzZFrfLr3E="
+        },
+        "esutils": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/esutils/-/esutils-1.0.0.tgz",
+          "integrity": "sha1-gVHTWOIMisx/t0XnRywAJf5JZXA="
+        },
+        "source-map": {
+          "version": "0.1.43",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
+          "integrity": "sha1-wkvBRspRfBRx9drL4lcbK3+eM0Y=",
+          "optional": true,
+          "requires": {
+            "amdefine": ">=0.0.4"
+          }
+        }
+      }
+    },
+    "ast-types": {
+      "version": "0.7.8",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.7.8.tgz",
+      "integrity": "sha1-kC0uDWDQcb3NRtwRXhgJ7RHBOKk="
+    },
     "ast-types-flow": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
@@ -3153,6 +3211,16 @@
         "safe-buffer": "^5.1.2"
       }
     },
+    "browserify-optional": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/browserify-optional/-/browserify-optional-1.0.1.tgz",
+      "integrity": "sha1-HhNyLP3g2F8SFnbCpyztUzoBiGk=",
+      "requires": {
+        "ast-transform": "0.0.0",
+        "ast-types": "^0.7.0",
+        "browser-resolve": "^1.8.1"
+      }
+    },
     "browserify-rsa": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
@@ -3502,6 +3570,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -4038,6 +4111,11 @@
         }
       }
     },
+    "css-mediaquery": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
+      "integrity": "sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA="
+    },
     "css-prefers-color-scheme": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz",
@@ -5273,6 +5351,11 @@
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
       "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
     },
+    "eve": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/eve/-/eve-0.5.4.tgz",
+      "integrity": "sha1-Z9CAuXJSkdfjieNMJoYN2X8d66o="
+    },
     "eventemitter3": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.4.tgz",
@@ -6455,6 +6538,11 @@
       "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
       "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM="
     },
+    "hyphenate-style-name": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz",
+      "integrity": "sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ=="
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -7986,6 +8074,14 @@
         "object-visit": "^1.0.0"
       }
     },
+    "matchmediaquery": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz",
+      "integrity": "sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==",
+      "requires": {
+        "css-mediaquery": "^0.1.2"
+      }
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -10402,6 +10498,18 @@
         "whatwg-fetch": "^3.0.0"
       }
     },
+    "react-burger-menu": {
+      "version": "2.6.14",
+      "resolved": "https://registry.npmjs.org/react-burger-menu/-/react-burger-menu-2.6.14.tgz",
+      "integrity": "sha512-lPdxd4JzDL+FQivFcdOaO2zKd3wa8u4831VaMPjVpQccIcPnA+iST7/YxZ3RTB2ngEplfdQ62inTItLVa3Av2A==",
+      "requires": {
+        "browserify-optional": "^1.0.0",
+        "classnames": "^2.2.6",
+        "eve": "~0.5.1",
+        "prop-types": "^15.7.2",
+        "snapsvg-cjs": "0.0.6"
+      }
+    },
     "react-dev-utils": {
       "version": "10.2.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.1.tgz",
@@ -10669,13 +10777,15 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
-    "react-plyr": {
+    "react-responsive": {
-      "version": "2.2.0",
+      "version": "8.0.3",
-      "resolved": "https://registry.npmjs.org/react-plyr/-/react-plyr-2.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-8.0.3.tgz",
-      "integrity": "sha512-05oBKvCC9F2VMP7BNhh3x7xeK6PNUMYBPPWIip5sDRuey4HmpghfLQyOfsbNKTssR6kkxRSi2X9neYmfr91NuA==",
+      "integrity": "sha512-F9VXyLao7O8XHXbLjQbIr4+mC6Zr0RDTwNjd7ixTmYEAyKyNanBkLkFchNaMZgszoSK6PgSs/3m/QDWw33/gpg==",
       "requires": {
-        "plyr": "^3.5.2",
+        "hyphenate-style-name": "^1.0.0",
-        "prop-types": "^15.7.2"
+        "matchmediaquery": "^0.3.0",
+        "prop-types": "^15.6.1",
+        "shallow-equal": "^1.1.0"
       }
     },
     "react-scripts": {
@@ -11554,6 +11664,11 @@
         }
       }
     },
+    "shallow-equal": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
+      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -11738,6 +11853,22 @@
         "kind-of": "^3.2.0"
       }
     },
+    "snapsvg": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/snapsvg/-/snapsvg-0.5.1.tgz",
+      "integrity": "sha1-DK9Sx5GJopB0b8RGzF6GP2vd3+M=",
+      "requires": {
+        "eve": "~0.5.1"
+      }
+    },
+    "snapsvg-cjs": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/snapsvg-cjs/-/snapsvg-cjs-0.0.6.tgz",
+      "integrity": "sha1-Oy9WryVz09Nkw+1b+IhXRfTS3eE=",
+      "requires": {
+        "snapsvg": "0.5.1"
+      }
+    },
     "sockjs": {
       "version": "0.3.19",
       "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.19.tgz",

package.json

@@ -9,8 +9,8 @@
     "bootstrap": "^4.5.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1",
+    "react-scripts": "^3.4.1",
-    "plyr-react": "2.2.0"
+    "plyr-react": "^2.2.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -73,7 +73,7 @@ class App extends React.Component {
 
     hideVideo() {
         this.setState({
-            page: "default"
+            page: "lastpage"
         });
         this.element = null;
     }

src/HomePage.js

@@ -1,4 +1,4 @@
-import React, {useState} from "react";
+import React from "react";
 import Preview from "./Preview";
 import "./css/HomePage.css"
 
@@ -18,28 +18,35 @@ class HomePage extends React.Component {
                 hdvideonr: null,
                 sdvideonr: null,
                 categorynr: null
-            }
+            },
+            tag: "all"
         };
     }
 
     componentDidMount() {
         document.addEventListener('scroll', this.trackScrolling);
+        // initial get of all videos
+        this.fetchVideoData("all");
+    }
 
+    // this function clears all preview elements an reloads gravity with tag
+    fetchVideoData(tag) {
         const updateRequest = new FormData();
         updateRequest.append('action', 'getMovies');
+        updateRequest.append('tag', tag);
 
         // fetch all videos available
         fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
             .then((response) => response.json()
                 .then((result) => {
                     this.data = result;
+                    this.setState({loadeditems: []});
+                    this.loadindex=0;
                     this.loadPreviewBlock(12);
                 }))
             .catch(() => {
                 console.log("no connection to backend");
             });
-
-
     }
 
     componentWillUnmount() {
@@ -57,6 +64,24 @@ class HomePage extends React.Component {
                     <div>HD Videos: {this.state.sideinfo.hdvideonr}</div>
                     <div>SD Videos: {this.state.sideinfo.sdvideonr}</div>
                     <div>Total Number of Categories: {this.state.sideinfo.categorynr}</div>
+
+                    <div>default tags:</div>
+                    <button className='btn btn-primary' onClick={() => {
+                        this.fetchVideoData("fullhd");
+                    }}>FullHd
+                    </button>
+                    <button className='btn btn-primary' onClick={() => {
+                        this.fetchVideoData("all");
+                    }}>All
+                    </button>
+                    <button className='btn btn-primary' onClick={() => {
+                        this.fetchVideoData("lowquality");
+                    }}>LowQuality
+                    </button>
+                    <button className='btn btn-primary' onClick={() => {
+                        this.fetchVideoData("hd");
+                    }}>HD
+                    </button>
                 </div>
                 <div className='maincontent'>
                     {this.state.loadeditems.map(elem => (
@@ -96,7 +121,7 @@ class HomePage extends React.Component {
         this.loadindex += nr;
     }
 
-    trackScrolling = (e) => {
+    trackScrolling = () => {
         if (window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight) {
             this.loadPreviewBlock(6);
         }

src/MainBody.js

@@ -12,11 +12,16 @@ class MainBody extends React.Component {
         let page;
         if (this.props.page === "default") {
             page = <HomePage viewbinding={this.props.viewbinding}/>;
+            this.mypage = page;
         } else if (this.props.page === "random"){
             page = <RandomPage viewbinding={this.props.viewbinding}/>;
+            this.mypage = page;
         }else if (this.props.page === "video") {
             // show videoelement if neccessary
             page = this.props.videoelement;
+        }else if (this.props.page === "lastpage") {
+            // return back to last page
+            page = this.mypage;
         } else {
             page = <div>unimplemented yet!</div>;
         }

src/Player.js

@@ -40,6 +40,8 @@ class Player extends React.Component {
                     <div className="col-sm-2">
                         <div className="videoleftbanner">
                             <div className="likefield">Likes: {this.state.likes}</div>
+                            <div className="likefield">Quality: {this.state.quality}p</div>
+                            <div className="likefield">Length in Minutes: {this.state.length}</div>
                         </div>
                     </div>
                     <div className="col-sm-8">
@@ -53,7 +55,10 @@ class Player extends React.Component {
                         </div>
                     </div>
                     <div className="col-sm-2">
-                        <div className="closebutton" onClick={() => {this.closebtn()}}>Close</div>
+                        <div className="closebutton" onClick={() => {
+                            this.closebtn()
+                        }}>Close
+                        </div>
                         <div className="videorightbanner"></div>
                     </div>
                 </div>
@@ -63,7 +68,10 @@ class Player extends React.Component {
 
                     </div>
                     <div className="col-sm-2">
-                        <button className='btn btn-primary' onClick={() => {this.likebtn()}}>Like it!</button>
+                        <button className='btn btn-primary' onClick={() => {
+                            this.likebtn()
+                        }}>Like it!
+                        </button>
                         <button className='btn btn-info' id="tagbutton">Tag it!</button>
 
                     </div>
@@ -96,7 +104,9 @@ class Player extends React.Component {
                         ],
                         poster: result.thumbnail
                     },
-                    likes: result.likes
+                    likes: result.likes,
+                    quality: result.quality,
+                    length: result.length
                 });
             });
     }

src/Preview.js

@@ -1,5 +1,5 @@
 import React from "react";
-import "./css/Preview.css"
+import "./css/Preview.css";
 import Player from "./Player";
 
 class Preview extends React.Component {