general tag system

extract video quality with ffmpeg

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>
@@ -76,7 +84,7 @@ class Player extends React.Component {
         );
     }
 
-    fetchMovieData(){
+    fetchMovieData() {
         const updateRequest = new FormData();
         updateRequest.append('action', 'loadVideo');
         updateRequest.append('movieid', this.props.movie_id);
@@ -96,7 +104,9 @@ class Player extends React.Component {
                         ],
                         poster: result.thumbnail
                     },
-                    likes: result.likes
+                    likes: result.likes,
+                    quality: result.quality,
+                    length: result.length
                 });
             });
     }
@@ -111,9 +121,9 @@ class Player extends React.Component {
         fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
             .then((response) => response.json())
             .then((result) => {
-                if(result.result === "success"){
+                if (result.result === "success") {
                     this.fetchMovieData();
-                }else{
+                } else {
                     console.log("an error occured while liking");
                     console.log(result);
                 }

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 {