structured project with folders

better min preview height
correct sort by creation date

src/elements/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/elements/Preview.js

@@ -0,0 +1,64 @@
+import React from "react";
+import "../css/Preview.css";
+import Player from "../pages/Player";
+
+class Preview extends React.Component {
+    constructor(props, context) {
+        super(props, context);
+        this.props = props;
+
+        this.state = {
+            previewpicture: null,
+            name: null
+        };
+    }
+
+    componentWillUnmount() {
+        this.setState({});
+    }
+
+    componentDidMount() {
+        this.setState({
+            previewpicture: null,
+            name: this.props.name
+        });
+
+        const updateRequest = new FormData();
+        updateRequest.append('action', 'readThumbnail');
+        updateRequest.append('movieid', this.props.movie_id);
+
+        fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
+            .then((response) => response.text())
+            .then((result) => {
+                this.setState(prevState => ({
+                    ...prevState.previewpicture, previewpicture: result
+                }));
+            });
+    }
+
+    render() {
+        return (
+            <div className='videopreview' onClick={() => this.itemClick()}>
+                <div className='previewtitle'>{this.state.name}</div>
+                <div className='previewpic'>
+                    <img className='previewimage'
+                         src={this.state.previewpicture}
+                         alt='Pic loading.'/>
+                </div>
+                <div className='previewbottom'>
+
+                </div>
+            </div>
+        );
+    }
+
+    itemClick() {
+        console.log("item clicked!" + this.state.name);
+
+        this.props.viewbinding.showVideo(<Player
+            viewbinding={this.props.viewbinding}
+            movie_id={this.props.movie_id}/>);
+    }
+}
+
+export default Preview;

src/elements/SideBar.js

@@ -0,0 +1,12 @@
+import React from "react";
+import "../css/SideBar.css"
+
+class SideBar extends React.Component {
+    render() {
+        return (<div className='sideinfo'>
+            {this.props.children}
+        </div>);
+    }
+}
+
+export default SideBar;

src/elements/Tag.js

@@ -0,0 +1,21 @@
+import React from "react";
+
+import "../css/Tag.css"
+
+class Tag extends React.Component {
+
+    constructor(props, context) {
+        super(props, context);
+
+        this.props = props;
+    }
+
+    render() {
+        // todo onclick events correctlyy
+        return (
+            <button className='tagbtn' onClick={this.props.onClick}>{this.props.children}</button>
+        );
+    }
+}
+
+export default Tag;