Popups

src/AddTagPopup.js

@@ -0,0 +1,89 @@
+import React from "react";
+import Modal from 'react-bootstrap/Modal'
+import Dropdown from "react-bootstrap/Dropdown";
+import DropdownButton from "react-bootstrap/DropdownButton";
+
+class AddTagPopup extends React.Component {
+    constructor(props: P, context: any) {
+        super(props, context);
+
+        this.state = {
+            selection: {
+                name: "nothing selected",
+                id: -1
+            },
+            items: []
+        };
+
+        this.props = props;
+    }
+
+    componentDidMount() {
+        const updateRequest = new FormData();
+        updateRequest.append('action', 'getAllTags');
+
+        fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
+            .then((response) => response.json())
+            .then((result) => {
+                this.setState({
+                    items: result
+                });
+            });
+    }
+
+    render() {
+        return (
+            <>
+                <Modal
+                    show={this.props.show}
+                    onHide={this.props.onHide}
+                    size="lg"
+                    aria-labelledby="contained-modal-title-vcenter"
+                    centered>
+                    <Modal.Header closeButton>
+                        <Modal.Title id="contained-modal-title-vcenter">
+                            Add to Tag
+                        </Modal.Title>
+                    </Modal.Header>
+                    <Modal.Body>
+                        <h4>Select a Tag:</h4>
+                        <DropdownButton id="dropdown-basic-button" title={this.state.selection.name}>
+                            {this.state.items ?
+                                this.state.items.map((i) => (
+                                    <Dropdown.Item onClick={() => {
+                                        this.setState({selection: {name: i.tag_name, id: i.tag_id}})
+                                    }}>{i.tag_name}</Dropdown.Item>
+                                )) :
+                                <Dropdown.Item>loading tags...</Dropdown.Item>}
+                        </DropdownButton>
+                    </Modal.Body>
+                    <Modal.Footer>
+                        <button className='btn btn-primary' onClick={() => {
+                            this.storeselection();
+                            this.props.onHide();
+                        }}>Add
+                        </button>
+                    </Modal.Footer>
+                </Modal>
+            </>
+        );
+    }
+
+    storeselection() {
+        const updateRequest = new FormData();
+        updateRequest.append('action', 'addTag');
+        updateRequest.append('id', this.state.selection.id);
+        updateRequest.append('movieid', this.props.movie_id);
+
+        fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
+            .then((response) => response.json())
+            .then((result) => {
+                if (result.result !== "success") {
+                    console.log("error occured while writing to db -- todo error handling");
+                    console.log(result.result);
+                }
+            });
+    }
+}
+
+export default AddTagPopup;

src/Player.js

@@ -3,6 +3,7 @@ import "./css/Player.css"
 import {PlyrComponent} from 'plyr-react';
 import SideBar from "./SideBar";
 import Tag from "./Tag";
+import AddTagPopup from "./AddTagPopup";
 
 
 class Player extends React.Component {
@@ -11,11 +12,13 @@ class Player extends React.Component {
 
         this.state = {
             sources: null,
+            movie_id: null,
             movie_name: null,
             likes: null,
             quality: null,
             length: null,
-            tags: []
+            tags: [],
+            popupvisible: false
         };
 
         this.props = props;
@@ -54,10 +57,10 @@ class Player extends React.Component {
                     <div className='sidebartitle'>Infos:</div>
                     <hr/>
                     <div className='sidebarinfo'><b>{this.state.likes}</b> Likes!</div>
-                    {this.state.quality != 0 ?
+                    {this.state.quality !== 0 ?
                         <div className='sidebarinfo'><b>{this.state.quality}p</b> Quality!
                         </div> : null}
-                    {this.state.length != 0 ?
+                    {this.state.length !== 0 ?
                         <div className='sidebarinfo'><b>{Math.round(this.state.length / 60)}</b> Minutes of length!
                         </div> : null}
                     <hr/>
@@ -76,7 +79,16 @@ class Player extends React.Component {
                         <div>not loaded yet</div>}
                     <div className='videoactions'>
                         <button className='btn btn-primary' onClick={() => this.likebtn()}>Like this Video!</button>
-                        <button className='btn btn-info' id="tagbutton">Give this Video a Tag</button>
+                        <button className='btn btn-info' onClick={() => this.setState({popupvisible: true})}>Give this
+                            Video a Tag
+                        </button>
+                        {this.state.popupvisible ?
+                            <AddTagPopup show={this.state.popupvisible}
+                                         onHide={() => this.setState({popupvisible: false})}
+                                         movie_id={this.state.movie_id}/> :
+                            null
+                        }
+
                     </div>
                 </div>
                 <button className="closebutton" onClick={() => this.closebtn()}>Close</button>
@@ -104,6 +116,7 @@ class Player extends React.Component {
                         ],
                         poster: result.thumbnail
                     },
+                    movie_id: result.movie_id,
                     movie_name: result.movie_name,
                     likes: result.likes,
                     quality: result.quality,

src/css/SideBar.css

@@ -7,6 +7,7 @@
     background-color: #b4c7fe;
     border-radius: 20px;
     border: 2px #3574fe solid;
+    overflow: hidden;
 }
 
 .sidebartitle {
@@ -19,5 +20,5 @@
     background-color: #8ca3fc;
     border-radius: 5px;
     padding: 2px 10px 2px 15px;
-    width: 60%;
+    width: 220px;
 }