Merge branch 'popups' into 'master'

Popups

See merge request lukas/openmediacenter!2
This commit is contained in:
Lukas Heiligenbrunner 2020-06-06 11:48:13 +00:00
commit 75245a2cf6
7 changed files with 253 additions and 143 deletions

View File

@ -8,7 +8,7 @@ class Database
private string $servername = "192.168.0.30";
private string $username = "root";
private string $password = "1qayxsw2";
private string $dbname = "hub";
private string $dbname = "mediacenter";
// The db connection is established in the private constructor.
private function __construct()

View File

@ -55,7 +55,7 @@ if (isset($_POST['action'])) {
echo(json_encode($return));
break;
case "loadVideo":
$query = "SELECT movie_name,movie_url,thumbnail,poster,likes,quality,length FROM videos WHERE movie_id='" . $_POST['movieid'] . "'";
$query = "SELECT movie_name,movie_id,movie_url,thumbnail,poster,likes,quality,length FROM videos WHERE movie_id='" . $_POST['movieid'] . "'";
$result = $conn->query($query);
$row = $result->fetch_assoc();
@ -67,6 +67,7 @@ if (isset($_POST['action'])) {
$arr["thumbnail"] = $row["poster"];
}
$arr["movie_id"] = $row["movie_id"];
$arr["movie_name"] = $row["movie_name"];
$arr["movie_url"] = $row["movie_url"];
$arr["likes"] = $row["likes"];
@ -74,7 +75,7 @@ if (isset($_POST['action'])) {
$arr["length"] = $row["length"];
// load tags of this video
$arr['tags'] = Array();
$arr['tags'] = array();
$query = "SELECT t.tag_name FROM video_tags
INNER JOIN tags t on video_tags.tag_id = t.tag_id
WHERE video_tags.video_id=" . $_POST['movieid'] . "
@ -185,9 +186,32 @@ if (isset($_POST['action'])) {
echo(json_encode($arr));
break;
case "getAllTags":
$query = "SELECT tag_name,tag_id from tags";
$result = $conn->query($query);
$rows = array();
while ($r = mysqli_fetch_assoc($result)) {
array_push($rows, $r);
}
echo(json_encode($rows));
break;
case "addTag":
$movieid = $_POST['movieid'];
$tagid = $_POST['id'];
$query = "INSERT INTO video_tags(tag_id, video_id) VALUES ('$tagid','$movieid')";
if ($conn->query($query) === TRUE) {
echo('{"result":"success"}');
} else {
echo('{"result":"' . $conn->error . '"}');
}
break;
}
} else {
echo('{"data":"error"}');
echo('{data:"error"}');
}
return;

236
package-lock.json generated
View File

@ -1356,6 +1356,25 @@
"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
"integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw=="
},
"@popperjs/core": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.4.0.tgz",
"integrity": "sha512-NMrDy6EWh9TPdSRiHmHH2ye1v5U0gBD7pRYwSwJvomx7Bm4GG04vu63dYiVzebLOx2obPpJugew06xVP0Nk7hA=="
},
"@restart/context": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
"integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
},
"@restart/hooks": {
"version": "0.3.25",
"resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.25.tgz",
"integrity": "sha512-m2v3N5pxTsIiSH74/sb1yW8D9RxkJidGW+5Mfwn/lHb2QzhZNlaU1su7abSyT9EGf0xS/0waLjrf7/XxQHUk7w==",
"requires": {
"lodash": "^4.17.15",
"lodash-es": "^4.17.15"
}
},
"@sheerun/mutationobserver-shim": {
"version": "0.3.3",
"resolved": "https://registry.npmjs.org/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.3.tgz",
@ -1830,6 +1849,11 @@
}
}
},
"@types/warning": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
"integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI="
},
"@types/yargs": {
"version": "13.0.9",
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
@ -2192,12 +2216,6 @@
"resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz",
"integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM="
},
"amdefine": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
"integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
"optional": true
},
"ansi-colors": {
"version": "3.2.4",
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
@ -2387,58 +2405,6 @@
"resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
"integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c="
},
"ast-transform": {
"version": "0.0.0",
"resolved": "https://registry.npmjs.org/ast-transform/-/ast-transform-0.0.0.tgz",
"integrity": "sha1-dJRAWIh9goPhidlUYAlHvJj+AGI=",
"requires": {
"escodegen": "~1.2.0",
"esprima": "~1.0.4",
"through": "~2.3.4"
},
"dependencies": {
"escodegen": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.2.0.tgz",
"integrity": "sha1-Cd55Z3kcyVi3+Jot220jRRrzJ+E=",
"requires": {
"esprima": "~1.0.4",
"estraverse": "~1.5.0",
"esutils": "~1.0.0",
"source-map": "~0.1.30"
}
},
"esprima": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/esprima/-/esprima-1.0.4.tgz",
"integrity": "sha1-n1V+CPw7TSbs6d00+Pv0drYlha0="
},
"estraverse": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-1.5.1.tgz",
"integrity": "sha1-hno+jlip+EYYr7bC3bzZFrfLr3E="
},
"esutils": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/esutils/-/esutils-1.0.0.tgz",
"integrity": "sha1-gVHTWOIMisx/t0XnRywAJf5JZXA="
},
"source-map": {
"version": "0.1.43",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
"integrity": "sha1-wkvBRspRfBRx9drL4lcbK3+eM0Y=",
"optional": true,
"requires": {
"amdefine": ">=0.0.4"
}
}
}
},
"ast-types": {
"version": "0.7.8",
"resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.7.8.tgz",
"integrity": "sha1-kC0uDWDQcb3NRtwRXhgJ7RHBOKk="
},
"ast-types-flow": {
"version": "0.0.7",
"resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
@ -3211,16 +3177,6 @@
"safe-buffer": "^5.1.2"
}
},
"browserify-optional": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/browserify-optional/-/browserify-optional-1.0.1.tgz",
"integrity": "sha1-HhNyLP3g2F8SFnbCpyztUzoBiGk=",
"requires": {
"ast-transform": "0.0.0",
"ast-types": "^0.7.0",
"browser-resolve": "^1.8.1"
}
},
"browserify-rsa": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
@ -4111,11 +4067,6 @@
}
}
},
"css-mediaquery": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
"integrity": "sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA="
},
"css-prefers-color-scheme": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz",
@ -4620,6 +4571,15 @@
"utila": "~0.4"
}
},
"dom-helpers": {
"version": "5.1.4",
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.4.tgz",
"integrity": "sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A==",
"requires": {
"@babel/runtime": "^7.8.7",
"csstype": "^2.6.7"
}
},
"dom-serializer": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@ -5351,11 +5311,6 @@
"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
"integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
},
"eve": {
"version": "0.5.4",
"resolved": "https://registry.npmjs.org/eve/-/eve-0.5.4.tgz",
"integrity": "sha1-Z9CAuXJSkdfjieNMJoYN2X8d66o="
},
"eventemitter3": {
"version": "4.0.4",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.4.tgz",
@ -6538,11 +6493,6 @@
"resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
"integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM="
},
"hyphenate-style-name": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz",
"integrity": "sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ=="
},
"iconv-lite": {
"version": "0.4.24",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@ -7946,6 +7896,11 @@
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
},
"lodash-es": {
"version": "4.17.15",
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz",
"integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ=="
},
"lodash._reinterpolate": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
@ -8074,14 +8029,6 @@
"object-visit": "^1.0.0"
}
},
"matchmediaquery": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz",
"integrity": "sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==",
"requires": {
"css-mediaquery": "^0.1.2"
}
},
"md5.js": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@ -10314,6 +10261,15 @@
"react-is": "^16.8.1"
}
},
"prop-types-extra": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
"integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
"requires": {
"react-is": "^16.3.2",
"warning": "^4.0.0"
}
},
"proxy-addr": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
@ -10498,16 +10454,24 @@
"whatwg-fetch": "^3.0.0"
}
},
"react-burger-menu": {
"version": "2.6.14",
"resolved": "https://registry.npmjs.org/react-burger-menu/-/react-burger-menu-2.6.14.tgz",
"integrity": "sha512-lPdxd4JzDL+FQivFcdOaO2zKd3wa8u4831VaMPjVpQccIcPnA+iST7/YxZ3RTB2ngEplfdQ62inTItLVa3Av2A==",
"react-bootstrap": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.0.1.tgz",
"integrity": "sha512-xMHwsvDN7sIv26P9wWiosWjITZije2dRCjEJHVfV2KFoSJY+8uv2zttEw0XMB7xviQcW3zuIGLJXuj8vf6lYEg==",
"requires": {
"browserify-optional": "^1.0.0",
"@babel/runtime": "^7.4.2",
"@restart/context": "^2.1.4",
"@restart/hooks": "^0.3.21",
"@types/react": "^16.9.23",
"classnames": "^2.2.6",
"eve": "~0.5.1",
"dom-helpers": "^5.1.2",
"invariant": "^2.2.4",
"prop-types": "^15.7.2",
"snapsvg-cjs": "0.0.6"
"prop-types-extra": "^1.1.0",
"react-overlays": "^3.1.2",
"react-transition-group": "^4.0.0",
"uncontrollable": "^7.0.0",
"warning": "^4.0.3"
}
},
"react-dev-utils": {
@ -10777,15 +10741,24 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"react-responsive": {
"version": "8.0.3",
"resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-8.0.3.tgz",
"integrity": "sha512-F9VXyLao7O8XHXbLjQbIr4+mC6Zr0RDTwNjd7ixTmYEAyKyNanBkLkFchNaMZgszoSK6PgSs/3m/QDWw33/gpg==",
"react-lifecycles-compat": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
},
"react-overlays": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-3.2.0.tgz",
"integrity": "sha512-YTgCmw6l4uBOYylSnc3V8WLX+A0EoGnzDrqkYz0K7MUKbMBZFpaxLXH4EF9eZbspd+syZHQ5XAABI7n/zak1EA==",
"requires": {
"hyphenate-style-name": "^1.0.0",
"matchmediaquery": "^0.3.0",
"prop-types": "^15.6.1",
"shallow-equal": "^1.1.0"
"@babel/runtime": "^7.4.5",
"@popperjs/core": "^2.0.0",
"@restart/hooks": "^0.3.12",
"@types/warning": "^3.0.0",
"dom-helpers": "^5.1.0",
"prop-types": "^15.7.2",
"uncontrollable": "^7.0.0",
"warning": "^4.0.3"
}
},
"react-scripts": {
@ -10848,6 +10821,17 @@
"workbox-webpack-plugin": "4.3.1"
}
},
"react-transition-group": {
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
"integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
"requires": {
"@babel/runtime": "^7.5.5",
"dom-helpers": "^5.0.1",
"loose-envify": "^1.4.0",
"prop-types": "^15.6.2"
}
},
"read-pkg": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@ -11664,11 +11648,6 @@
}
}
},
"shallow-equal": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
"integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
},
"shebang-command": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@ -11853,22 +11832,6 @@
"kind-of": "^3.2.0"
}
},
"snapsvg": {
"version": "0.5.1",
"resolved": "https://registry.npmjs.org/snapsvg/-/snapsvg-0.5.1.tgz",
"integrity": "sha1-DK9Sx5GJopB0b8RGzF6GP2vd3+M=",
"requires": {
"eve": "~0.5.1"
}
},
"snapsvg-cjs": {
"version": "0.0.6",
"resolved": "https://registry.npmjs.org/snapsvg-cjs/-/snapsvg-cjs-0.0.6.tgz",
"integrity": "sha1-Oy9WryVz09Nkw+1b+IhXRfTS3eE=",
"requires": {
"snapsvg": "0.5.1"
}
},
"sockjs": {
"version": "0.3.19",
"resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.19.tgz",
@ -12820,6 +12783,17 @@
"resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
"integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
},
"uncontrollable": {
"version": "7.1.1",
"resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.1.1.tgz",
"integrity": "sha512-EcPYhot3uWTS3w00R32R2+vS8Vr53tttrvMj/yA1uYRhf8hbTG2GyugGqWDY0qIskxn0uTTojVd6wPYW9ZEf8Q==",
"requires": {
"@babel/runtime": "^7.6.3",
"@types/react": "^16.9.11",
"invariant": "^2.2.4",
"react-lifecycles-compat": "^3.0.4"
}
},
"unicode-canonical-property-names-ecmascript": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
@ -13111,6 +13085,14 @@
"makeerror": "1.0.x"
}
},
"warning": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
"requires": {
"loose-envify": "^1.0.0"
}
},
"watchpack": {
"version": "1.7.2",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.2.tgz",

View File

@ -10,7 +10,8 @@
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "^3.4.1",
"plyr-react": "^2.2.0"
"plyr-react": "^2.2.0",
"react-bootstrap": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
@ -18,7 +19,7 @@
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"proxy": "http://127.0.0.1:4000",
"proxy": "http://192.168.0.248",
"homepage": "/",
"eslintConfig": {
"extends": "react-app"

89
src/AddTagPopup.js Normal file
View File

@ -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;

View File

@ -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,

View File

@ -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;
}