embedd video correctly

hide video when user clicks to home page again

package.json

@@ -7,12 +7,10 @@
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "bootstrap": "^4.5.0",
-    "plyr": "^3.6.2",
-    "plyr-react": "^2.2.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-plyr": "^2.2.0",
-    "react-scripts": "3.4.1"
+    "react-scripts": "3.4.1",
+    "plyr-react": "2.2.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -7,6 +7,9 @@ class App extends React.Component {
     constructor(props, context) {
         super(props, context);
         this.state = {page: "default"};
+
+        // bind this to the method for being able to call methods such as this.setstate
+        this.showVideo = this.showVideo.bind(this);
     }
 
     render() {
@@ -17,17 +20,17 @@ 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 page={this.state.page}/>
+                <MainBody showvideo={this.showVideo} page={this.state.page} videoelement={this.element}/>
             </div>
         );
     }
@@ -46,6 +49,14 @@ class App extends React.Component {
         console.log("click default");
         this.setState({page: "default"});
     }
+
+    showVideo(element) {
+        this.setState({
+            page: "video"
+        });
+
+        this.element = element;
+    }
 }
 
 export default App;

src/HomePage.js

@@ -43,7 +43,8 @@ class HomePage extends React.Component {
                 {this.state.loadeditems.map(elem => (
                     <Preview
                         name={elem.movie_name}
-                        movie_id={elem.movie_id}/>
+                        movie_id={elem.movie_id}
+                        showvideo={this.props.showvideo}/>
                 ))}
             </div>
         );

src/MainBody.js

@@ -10,8 +10,11 @@ class MainBody extends React.Component {
     render() {
         let page;
         if (this.props.page === "default") {
-            page = <HomePage/>;
-        }else {
+            page = <HomePage showvideo={this.props.showvideo}/>;
+        } else if (this.props.page === "video") {
+            // show videoelement if neccessary
+            page = this.props.videoelement;
+        } else {
             page = <div>unimplemented yet!</div>;
         }
         return (page);

src/Player.js

@@ -8,7 +8,17 @@ class Player extends React.Component {
         super(props, context);
 
         this.state = {
-            sources: null
+            sources: {
+                type: 'video',
+                sources: [
+                    {
+                        src: '',
+                        type: 'video/mp4',
+                        size: 1080,
+                    }
+                ],
+                poster: ''
+            }
         };
 
         this.props = props;
@@ -22,7 +32,6 @@ class Player extends React.Component {
         fetch('/php/videoload.php', {method: 'POST', body: updateRequest})
             .then((response) => response.json())
             .then((result) => {
-                console.log(result);
                 this.setState({
                     sources: {
                         type: 'video',
@@ -33,7 +42,7 @@ class Player extends React.Component {
                                 size: 1080,
                             }
                         ],
-                        poster: result["thumbnail"]
+                        poster: result.thumbnail
                     }
                 });
                 console.log(this.state);
@@ -43,8 +52,41 @@ class Player extends React.Component {
 
     render() {
         return (
-            <div className='myvideo'>
-                {this.state.sources ? <PlyrComponent sources={this.state.sources}/> : <div>loading</div>}
+            <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">
+
+
+                    </div>
+                    <div className="col-sm-2">
+                        <button id="likebtn">Like it!</button>
+                        <button id="tagbutton">Tag it!</button>
+
+                    </div>
+                    <div className="col-sm-5">
+
+
+                    </div>
+                </div>
             </div>
         );
     }

src/Preview.js

@@ -53,12 +53,7 @@ class Preview extends React.Component {
     itemClick() {
         console.log("item clicked!"+this.state.name);
 
-        ReactDOM.render(
-            <React.StrictMode>
-                <Player movie_id={this.props.movie_id}/>
-            </React.StrictMode>,
-            document.getElementById('root')
-        );
+        this.props.showvideo(<Player movie_id={this.props.movie_id}/>);
     }
 }