delete unused files

closebutton bindings work correct now.

src/App.js

@@ -10,6 +10,7 @@ class App extends React.Component {
 
         // bind this to the method for being able to call methods such as this.setstate
         this.showVideo = this.showVideo.bind(this);
+        this.hideVideo = this.hideVideo.bind(this);
     }
 
     render() {
@@ -20,17 +21,18 @@ class App extends React.Component {
 
                     <ul className="navbar-nav">
                         <li className="nav-item">
-                            <a className="nav-link" onClick={() => this.loadHomePage()} href="#">Home</a>
+                            <a className="nav-link" onClick={() => this.loadHomePage()} href='# '>Home</a>
                         </li>
                         <li className="nav-item">
-                            <a className="nav-link" onClick={() => this.loadRandomPage()} href="#">Random Video</a>
+                            <a className="nav-link" onClick={() => this.loadRandomPage()} href="# ">Random Video</a>
                         </li>
                         <li className="nav-item">
-                            <a className="nav-link" onClick={() => this.loadCategoriesPage()} href="#">Categories</a>
+                            <a className="nav-link" onClick={() => this.loadCategoriesPage()} href="# ">Categories</a>
                         </li>
                     </ul>
                 </nav>
-                <MainBody showvideo={this.showVideo} page={this.state.page} videoelement={this.element}/>
+                <MainBody viewbinding={{showVideo: this.showVideo, hideVideo: this.hideVideo}} page={this.state.page}
+                          videoelement={this.element}/>
             </div>
         );
     }
@@ -57,6 +59,13 @@ class App extends React.Component {
 
         this.element = element;
     }
+
+    hideVideo() {
+        this.setState({
+            page: "default"
+        });
+        this.element = null;
+    }
 }
 
 export default App;

src/HomePage.js

@@ -1,6 +1,6 @@
 import React from "react";
 import Preview from "./Preview";
-import './css/video.css'
+import "./css/HomePage.css"
 
 class HomePage extends React.Component {
     // stores all available movies
@@ -40,12 +40,22 @@ class HomePage extends React.Component {
         return (
             <div>
                 <div><h1>Home page</h1></div>
-                {this.state.loadeditems.map(elem => (
-                    <Preview
-                        name={elem.movie_name}
-                        movie_id={elem.movie_id}
-                        showvideo={this.props.showvideo}/>
-                ))}
+                <div className='sideinfo'>
+                    beep beep
+                </div>
+                <div className='maincontent'>
+                    {this.state.loadeditems.map(elem => (
+                        <Preview
+                            key={elem.movie_id}
+                            name={elem.movie_name}
+                            movie_id={elem.movie_id}
+                            viewbinding={this.props.viewbinding}/>
+                    ))}
+                </div>
+                <div className='rightinfo'>
+
+                </div>
+
             </div>
         );
     }

src/MainBody.js

@@ -10,7 +10,7 @@ class MainBody extends React.Component {
     render() {
         let page;
         if (this.props.page === "default") {
-            page = <HomePage showvideo={this.props.showvideo}/>;
+            page = <HomePage viewbinding={this.props.viewbinding}/>;
         } else if (this.props.page === "video") {
             // show videoelement if neccessary
             page = this.props.videoelement;

src/Player.js

@@ -7,24 +7,76 @@ class Player extends React.Component {
     constructor(props, context) {
         super(props, context);
 
-        this.state = {
-            sources: {
-                type: 'video',
-                sources: [
-                    {
-                        src: '',
-                        type: 'video/mp4',
-                        size: 1080,
-                    }
-                ],
-                poster: ''
-            }
-        };
+        this.state = {};
 
         this.props = props;
     }
 
+    options = {
+        controls: [
+            'play-large', // The large play button in the center
+            'play', // Play/pause playback
+            'progress', // The progress bar and scrubber for playback and buffering
+            'current-time', // The current time of playback
+            'duration', // The full duration of the media
+            'mute', // Toggle mute
+            'volume', // Volume control
+            'captions', // Toggle captions
+            'settings', // Settings menu
+            'airplay', // Airplay (currently Safari only)
+            'download', // Show a download button with a link to either the current source or a custom URL you specify in your options
+            'fullscreen', // Toggle fullscreen
+        ]
+    };
+
     componentDidMount() {
+        this.fetchMovieData();
+    }
+
+    render() {
+        return (
+            <div>
+                <div className="row">
+                    <div className="col-sm-2">
+                        <div className="videoleftbanner">
+                            <div className="likefield">Likes: {this.state.likes}</div>
+                        </div>
+                    </div>
+                    <div className="col-sm-8">
+                        <div className="videowrapper">
+                            <div className='myvideo'>
+                                {this.state.sources ? <PlyrComponent
+                                        sources={this.state.sources}
+                                        options={this.options}/> :
+                                    <div>not loaded yet</div>}
+                            </div>
+                        </div>
+                    </div>
+                    <div className="col-sm-2">
+                        <div className="closebutton" onClick={() => {this.closebtn()}}>Close</div>
+                        <div className="videorightbanner"></div>
+                    </div>
+                </div>
+                <div className="row">
+                    <div className="col-sm-5">
+
+
+                    </div>
+                    <div className="col-sm-2">
+                        <button className='btn btn-primary' onClick={() => {this.likebtn()}}>Like it!</button>
+                        <button className='btn btn-info' id="tagbutton">Tag it!</button>
+
+                    </div>
+                    <div className="col-sm-5">
+
+
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    fetchMovieData(){
         const updateRequest = new FormData();
         updateRequest.append('action', 'loadVideo');
         updateRequest.append('movieid', this.props.movie_id);
@@ -43,52 +95,33 @@ class Player extends React.Component {
                             }
                         ],
                         poster: result.thumbnail
-                    }
+                    },
+                    likes: result.likes
                 });
-                console.log(this.state);
             });
-
     }
 
-    render() {
-        return (
-            <div>
-                <div className="row">
-                    <div className="col-sm-2">
-                        <div className="videoleftbanner">
-                            <div className="likefield">Likes: 10</div>
-                        </div>
-                    </div>
-                    <div className="col-sm-8">
-                        <div className="videowrapper">
-                            <div className='myvideo'>
-                                {this.state.sources.sources[0].src ? <PlyrComponent sources={this.state.sources}/> :
-                                    <div>not loaded yet</div>}
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-sm-2">
-                        <div className="closebutton">Close</div>
-                        <div className="videorightbanner"></div>
-                    </div>
-                </div>
-                <div className="row">
-                    <div className="col-sm-5">
 
+    /* Click Listener */
+    likebtn() {
+        const updateRequest = new FormData();
+        updateRequest.append('action', 'addLike');
+        updateRequest.append('movieid', this.props.movie_id);
 
-                    </div>
-                    <div className="col-sm-2">
-                        <button id="likebtn">Like it!</button>
-                        <button id="tagbutton">Tag it!</button>
+        fetch('/php/videoload.php', {method: 'POST', body: updateRequest})
+            .then((response) => response.json())
+            .then((result) => {
+                if(result.result === "success"){
+                    this.fetchMovieData();
+                }else{
+                    console.log("an error occured while liking");
+                    console.log(result);
+                }
+            });
+    }
 
-                    </div>
-                    <div className="col-sm-5">
-
-
-                    </div>
-                </div>
-            </div>
-        );
+    closebtn() {
+        this.props.viewbinding.hideVideo();
     }
 }
 

src/Preview.js

@@ -1,6 +1,5 @@
 import React from "react";
 import "./css/Preview.css"
-import ReactDOM from "react-dom";
 import Player from "./Player";
 
 class Preview extends React.Component {
@@ -51,9 +50,9 @@ class Preview extends React.Component {
     }
 
     itemClick() {
-        console.log("item clicked!"+this.state.name);
+        console.log("item clicked!" + this.state.name);
 
-        this.props.showvideo(<Player movie_id={this.props.movie_id}/>);
+        this.props.viewbinding.showVideo(<Player viewbinding={this.props.viewbinding} movie_id={this.props.movie_id}/>);
     }
 }
 

src/css/HomePage.css

@@ -0,0 +1,14 @@
+.sideinfo{
+    width: 20%;
+    float: left;
+}
+
+.maincontent{
+    float: left;
+    width: 70%;
+}
+
+.rightinfo{
+    float: left;
+    width: 10%;
+}

src/css/Preview.css

@@ -29,3 +29,10 @@
     opacity: 1;
     transition: opacity 0.5s;
 }
+
+/* todo check if neccessary*/
+.previewcontainer {
+    margin-left: 10%;
+    width: 80%;
+    margin-right: 10%;
+}

src/css/video.css

@@ -1,11 +0,0 @@
-.hideit {
-    display: none;
-}
-
-
-
-.previewcontainer {
-    margin-left: 10%;
-    width: 80%;
-    margin-right: 10%;
-}