lukas/OpenMediaCenter
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

add style for actor tiles

Browse Source 
render actors got from backend
backend test code to get actors
This commit is contained in:
Lukas Heiligenbrunner 2020-12-11 18:23:13 +00:00
parent 707c54e5f5
commit c5d231d9f2
44 changed files with 1017 additions and 344 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
api/actor.php Normal file
View File

@ -0,0 +1,5 @@
<?php
include_once __DIR__ . '/src/handlers/Actor.php';
$actor = new Actor();
$actor->handleAction();

73
api/src/handlers/Actor.php Normal file
View File

@ -0,0 +1,73 @@
<?php
require_once __DIR__ . '/../SSettings.php';
require_once 'RequestBase.php';
class Actor extends RequestBase {
function initHandlers() {
$this->databaseAdds();
$this->databaseRequests();
}
function databaseAdds() {
$this->addActionHandler("createActor", function () {
// skip tag create if already existing
$actorname = $_POST["actorname"];
$query = "INSERT IGNORE INTO actors (name) VALUES ('$actorname')";
if ($this->conn->query($query) === TRUE) {
$this->commitMessage('{"result":"success"}');
} else {
$this->commitMessage('{"result":"' . $this->conn->error . '"}');
}
});
$this->addActionHandler("addActorToVideo", function () {
// skip tag create if already existing
$actorid = $_POST["actorid"];
$videoid = $_POST["videoid"];
$query = "INSERT IGNORE INTO actors_videos (actor_id, video_id) VALUES ($actorid,$videoid)";
if ($this->conn->query($query) === TRUE) {
$this->commitMessage('{"result":"success"}');
} else {
$this->commitMessage('{"result":"' . $this->conn->error . '"}');
}
});
}
function databaseRequests() {
$this->addActionHandler("getAllActors", function () {
// query the actors corresponding to video
$query = "SELECT * FROM actors";
$result = $this->conn->query($query);
$this->commitMessage(json_encode(mysqli_fetch_all($result, MYSQLI_ASSOC)));
});
$this->addActionHandler("getActorsOfVideo", function () {
// query the actors corresponding to video
$video_id = $_POST["videoid"];
$query = "SELECT actor_id, name, thumbnail FROM actors_videos
JOIN actors a on actors_videos.actor_id = a.id
WHERE actors_videos.video_id=$video_id";
$result = $this->conn->query($query);
$this->commitMessage(json_encode(mysqli_fetch_all($result, MYSQLI_ASSOC)));
});
$this->addActionHandler("getActorInfo", function (){
$actorid = $_POST["actorid"];
$query = "SELECT movie_id, movie_name FROM actors_videos
JOIN videos v on v.movie_id = actors_videos.video_id
WHERE actors_videos.actor_id=$actorid";
$result = $this->conn->query($query);
$reply = array("videos" => mysqli_fetch_all($result, MYSQLI_ASSOC));
$this->commitMessage(json_encode($reply));
});
}
}

2
api/src/handlers/RequestBase.php
View File

@ -30,7 +30,7 @@ abstract class RequestBase {
// call the right handler
$this->actions[$action]();
} else {
echo('{data:"error"}');
$this->commitMessage('{"data": "error"}');
}
}

8
api/src/handlers/Video.php
View File

@ -98,6 +98,7 @@ class Video extends RequestBase {
$this->addActionHandler("loadVideo", function () {
$video_id = $_POST['movieid'];
// todo join with actor db and add actors of movieid
$query = " SELECT movie_name,movie_id,movie_url,thumbnail,poster,likes,quality,length
FROM videos WHERE movie_id=$video_id";
@ -145,6 +146,13 @@ class Video extends RequestBase {
array_push($arr['suggesttag'], $r);
}
// query the actors corresponding to video
$query = "SELECT actor_id, name, thumbnail FROM actors_videos
JOIN actors a on actors_videos.actor_id = a.id
WHERE actors_videos.video_id=$video_id";
$result = $this->conn->query($query);
$arr['actors'] = mysqli_fetch_all($result, MYSQLI_ASSOC);
$this->commitMessage(json_encode($arr));
});

48
database.sql
View File

@ -1,3 +1,22 @@
create table if not exists actors
(
id int auto_increment
primary key,
name varchar(50) null,
thumbnail mediumblob null
)
comment 'informations about different actors';
create table if not exists settings
(
video_path varchar(255) null,
episode_path varchar(255) null,
password varchar(32) null,
mediacenter_name varchar(32) null,
TMDB_grabbing tinyint null,
DarkMode tinyint default 0 null
);
create table if not exists tags
(
tag_id int auto_increment
@ -12,13 +31,29 @@ create table if not exists videos
movie_name varchar(200) null,
movie_url varchar(250) null,
thumbnail mediumblob null,
poster mediumblob null,
likes int default 0 null,
create_date datetime default CURRENT_TIMESTAMP null,
quality int null,
length int null comment 'in seconds',
create_date datetime default CURRENT_TIMESTAMP null
poster mediumblob null
);
create table if not exists actors_videos
(
actor_id int null,
video_id int null,
constraint actors_videos_actors_id_fk
foreign key (actor_id) references actors (id),
constraint actors_videos_videos_movie_id_fk
foreign key (video_id) references videos (movie_id)
);
create index actors_videos_actor_id_index
on actors_videos (actor_id);
create index actors_videos_video_id_index
on actors_videos (video_id);
create table if not exists video_tags
(
tag_id int null,
@ -30,15 +65,6 @@ create table if not exists video_tags
on delete cascade
);
create table if not exists settings
(
video_path varchar(255) null,
episode_path varchar(255) null,
password varchar(32) default '-1' null,
mediacenter_name varchar(32) default 'OpenMediaCenter' null,
TMDB_grabbing tinyint null,
DarkMode tinyint default 0 null
);
INSERT IGNORE INTO tags (tag_id, tag_name)
VALUES (2, 'fullhd');

9
src/App.js
View File

@ -28,6 +28,9 @@ class App extends React.Component {
// bind this to the method for being able to call methods such as this.setstate
this.changeRootElement = this.changeRootElement.bind(this);
this.returnToLastElement = this.returnToLastElement.bind(this);
// set the main navigation viewbinding to the singleton
GlobalInfos.setViewBinding(this.constructViewBinding());
}
componentDidMount() {
@ -68,16 +71,16 @@ class App extends React.Component {
MainBody() {
let page;
if (this.state.page === 'default') {
page = <HomePage viewbinding={this.constructViewBinding()}/>;
page = <HomePage/>;
this.mypage = page;
} else if (this.state.page === 'random') {
page = <RandomPage viewbinding={this.constructViewBinding()}/>;
page = <RandomPage/>;
this.mypage = page;
} else if (this.state.page === 'settings') {
page = <SettingsPage/>;
this.mypage = page;
} else if (this.state.page === 'categories') {
page = <CategoryPage viewbinding={this.constructViewBinding()}/>;
page = <CategoryPage/>;
this.mypage = page;
} else if (this.state.page === 'video') {
// show videoelement if neccessary

17
src/GlobalInfos.js
View File

@ -7,6 +7,7 @@ import lighttheme from './AppLightTheme.module.css';
*/
class StaticInfos {
#darktheme = true;
#viewbinding = () => {console.warn("Viewbinding not set now!")}
/**
* check if the current theme is the dark theme
@ -31,6 +32,22 @@ class StaticInfos {
getThemeStyle() {
return this.isDarkTheme() ? darktheme : lighttheme;
}
/**
* set the global Viewbinding for the main Navigation
* @param cb
*/
setViewBinding(cb){
this.#viewbinding = cb;
}
/**
* return the Viewbinding for main navigation
* @returns {StaticInfos.viewbinding}
*/
getViewBinding(){
return this.#viewbinding;
}
}
const GlobalInfos = new StaticInfos();

43
src/elements/ActorTile/ActorTile.js Normal file
View File

@ -0,0 +1,43 @@
import style from './ActorTile.module.css';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faUser} from '@fortawesome/free-solid-svg-icons';
import React from 'react';
import GlobalInfos from '../../GlobalInfos';
import ActorPage from '../../pages/ActorPage/ActorPage';
class ActorTile extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div className={style.actortile} onClick={() => this.handleActorClick(this.props.actor)}>
<div className={style.actortile_thumbnail}>
{this.props.actor.thumbnail === null ? <FontAwesomeIcon style={{
lineHeight: '130px'
}} icon={faUser} size='5x'/> : 'dfdf' /* todo render picture provided here! */}
</div>
<div className={style.actortile_name}>{this.props.actor.name}</div>
</div>
);
}
/**
* event handling for actor tile click
*/
handleActorClick(actor) {
// if clicklistender is defined use this one
if (this.props.onClick) {
this.props.onClick(actor.id);
return;
}
// Redirect to actor page
GlobalInfos.getViewBinding().changeRootElement(<ActorPage actor={actor}/>);
}
}
export default ActorTile;

29
src/elements/ActorTile/ActorTile.module.css Normal file
View File

@ -0,0 +1,29 @@
.actortile {
background-color: #179017;
border-radius: 10px;
cursor: pointer;
float: left;
height: 200px;
margin: 3px;
width: 130px;
transition: opacity ease 0.5s;
}
.actortile:hover{
opacity: 0.7;
transition: opacity ease 0.5s;
}
.actortile_thumbnail {
color: #c6c6c6;
height: 160px;
margin-top: 10px;
text-align: center;
}
.actortile_name {
color: white;
text-align: center;
/*todo dynamic text coloring dependent on theme*/
}

21
src/elements/ActorTile/ActorTile.test.js Normal file
View File

@ -0,0 +1,21 @@
import {shallow} from 'enzyme';
import React from 'react';
import ActorTile from './ActorTile';
describe('<ActorTile/>', function () {
it('renders without crashing ', function () {
const wrapper = shallow(<ActorTile actor={{thumbnail: "-1", name: "testname", id: 3}}/>);
wrapper.unmount();
});
it('simulate click', function () {
const wrapper = shallow(<ActorTile actor={{thumbnail: "-1", name: "testname", id: 3}}/>);
const func = jest.fn();
prepareViewBinding(func);
wrapper.simulate('click');
expect(func).toBeCalledTimes(1);
});
});

157
src/elements/AddTagPopup/AddTagPopup.js
View File

@ -1,157 +0,0 @@
import React from 'react';
import ReactDom from 'react-dom';
import style from './AddTagPopup.module.css';
import Tag from '../Tag/Tag';
import {Line} from '../PageTitle/PageTitle';
import GlobalInfos from '../../GlobalInfos';
/**
* component creates overlay to add a new tag to a video
*/
class AddTagPopup extends React.Component {
/// instance of root element
element;
constructor(props, context) {
super(props, context);
this.state = {items: []};
this.handleClickOutside = this.handleClickOutside.bind(this);
this.keypress = this.keypress.bind(this);
this.props = props;
}
componentDidMount() {
document.addEventListener('click', this.handleClickOutside);
document.addEventListener('keyup', this.keypress);
// add element drag drop events
if (this.element != null) {
this.dragElement();
}
const updateRequest = new FormData();
updateRequest.append('action', 'getAllTags');
fetch('/api/tags.php', {method: 'POST', body: updateRequest})
.then((response) => response.json())
.then((result) => {
this.setState({
items: result
});
});
}
componentWillUnmount() {
// remove the appended listeners
document.removeEventListener('click', this.handleClickOutside);
document.removeEventListener('keyup', this.keypress);
}
render() {
const themeStyle = GlobalInfos.getThemeStyle();
return (
<div className={[style.popup, themeStyle.thirdbackground].join(' ')} ref={el => this.element = el}>
<div className={[style.header, themeStyle.textcolor].join(' ')}>Add a Tag to this Video:</div>
<Line/>
<div className={style.content}>
{this.state.items ?
this.state.items.map((i) => (
<Tag onclick={() => {
this.addTag(i.tag_id, i.tag_name);
}}>{i.tag_name}</Tag>
)) : null}
</div>
</div>
);
}
/**
* Alert if clicked on outside of element
*/
handleClickOutside(event) {
const domNode = ReactDom.findDOMNode(this);
if (!domNode || !domNode.contains(event.target)) {
this.props.onHide();
}
}
/**
* key event handling
* @param event keyevent
*/
keypress(event) {
// hide if escape is pressed
if (event.key === 'Escape') {
this.props.onHide();
}
}
/**
* add a new tag to this video
* @param tagid tag id to add
* @param tagname tag name to add
*/
addTag(tagid, tagname) {
console.log(this.props);
const updateRequest = new FormData();
updateRequest.append('action', 'addTag');
updateRequest.append('id', tagid);
updateRequest.append('movieid', this.props.movie_id);
fetch('/api/tags.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);
} else {
this.props.submit(tagid, tagname);
}
this.props.onHide();
}));
}
/**
* make the element drag and droppable
*/
dragElement() {
let xOld = 0, yOld = 0;
const elmnt = this.element;
elmnt.firstChild.onmousedown = dragMouseDown;
function dragMouseDown(e) {
e.preventDefault();
// get the mouse cursor position at startup:
xOld = e.clientX;
yOld = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e.preventDefault();
// calculate the new cursor position:
const dx = xOld - e.clientX;
const dy = yOld - e.clientY;
xOld = e.clientX;
yOld = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - dy) + 'px';
elmnt.style.left = (elmnt.offsetLeft - dx) + 'px';
}
function closeDragElement() {
// stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;
}
}
}
export default AddTagPopup;

71
src/elements/NewTagPopup/NewTagPopup.js
View File

@ -1,71 +0,0 @@
import React from 'react';
import Modal from 'react-bootstrap/Modal';
import {Form} from 'react-bootstrap';
/**
* creates modal overlay to define a new Tag
*/
class NewTagPopup extends React.Component {
constructor(props, context) {
super(props, context);
this.props = props;
}
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'>
Create a new Tag!
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form.Group>
<Form.Label>Tag Name:</Form.Label>
<Form.Control id='namefield' type='text' placeholder='Enter Tag name' onChange={(v) => {
this.value = v.target.value;
}}/>
<Form.Text className='text-muted'>
This Tag will automatically show up on category page.
</Form.Text>
</Form.Group>
</Modal.Body>
<Modal.Footer>
<button className='btn btn-primary' onClick={() => {
this.storeselection();
}}>Add
</button>
</Modal.Footer>
</Modal>
</>
);
}
/**
* store the filled in form to the backend
*/
storeselection() {
const updateRequest = new FormData();
updateRequest.append('action', 'createTag');
updateRequest.append('tagname', this.value);
fetch('/api/tags.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);
}
this.props.onHide();
});
}
}
export default NewTagPopup;

102
src/elements/Popups/AddActorPopup/AddActorPopup.js Normal file
View File

@ -0,0 +1,102 @@
import PopupBase from '../PopupBase';
import React from 'react';
import ActorTile from '../../ActorTile/ActorTile';
import style from './AddActorPopup.module.css';
import {NewActorPopupContent} from '../NewActorPopup/NewActorPopup';
/**
* Popup for Adding a new Actor to a Video
*/
class AddActorPopup extends React.Component {
constructor(props) {
super(props);
this.state = {
contentDefault: true,
actors: undefined
};
this.tileClickHandler = this.tileClickHandler.bind(this);
}
render() {
return (
<>
{/* todo render actor tiles here and add search field*/}
<PopupBase title='Add new Actor to Video' onHide={this.props.onHide} banner={
<button
className={style.newactorbutton}
onClick={() => {this.setState({contentDefault: false});}}>Create new Actor</button>}>
{this.resolvePage()}
</PopupBase>
</>
);
}
componentDidMount() {
// fetch the available actors
this.loadActors();
}
/**
* selector for current showing popup page
* @returns {JSX.Element}
*/
resolvePage() {
if (this.state.contentDefault) return (this.getContent());
else return (<NewActorPopupContent onHide={() => {
this.loadActors();
this.setState({contentDefault: true});
}}/>);
}
/**
* returns content for the newActor popup
* @returns {JSX.Element}
*/
getContent() {
if (this.state.actors) {
return (<div>
{this.state.actors.map((el) => (<ActorTile actor={el} onClick={this.tileClickHandler}/>))}
</div>);
} else {
return (<div>somekind of loading</div>);
}
}
/**
* event handling for ActorTile Click
*/
tileClickHandler(actorid) {
// fetch the available actors
const req = new FormData();
req.append('action', 'addActorToVideo');
req.append('actorid', actorid);
req.append('videoid', this.props.movie_id);
fetch('/api/actor.php', {method: 'POST', body: req})
.then((response) => response.json()
.then((result) => {
if (result.result === 'success') {
// return back to player page
this.props.onHide();
} else {
console.error('an error occured while fetching actors');
console.error(result);
}
}));
}
loadActors() {
const req = new FormData();
req.append('action', 'getAllActors');
fetch('/api/actor.php', {method: 'POST', body: req})
.then((response) => response.json()
.then((result) => {
this.setState({actors: result});
}));
}
}
export default AddActorPopup;

11
src/elements/Popups/AddActorPopup/AddActorPopup.module.css Normal file
View File

@ -0,0 +1,11 @@
.newactorbutton {
border-radius: 5px;
border-width: 0;
color: white;
margin-right: 15px;
margin-top: 12px;
padding: 6px;
background-color: green;
width: 140px;
width: 140px;
}

19
src/elements/Popups/AddActorPopup/AddActorPopup.test.js Normal file
View File

@ -0,0 +1,19 @@
import {shallow} from 'enzyme';
import React from 'react';
import AddActorPopup from './AddActorPopup';
describe('<AddActorPopup/>', function () {
it('renders without crashing ', function () {
const wrapper = shallow(<AddActorPopup/>);
wrapper.unmount();
});
// it('simulate change to other page', function () {
// const wrapper = shallow(<AddActorPopup/>);
//
// console.log(wrapper.find('PopupBase').dive().debug());
//
//
// console.log(wrapper.debug());
// });
});

67
src/elements/Popups/AddTagPopup/AddTagPopup.js Normal file
View File

@ -0,0 +1,67 @@
import React from 'react';
import Tag from '../../Tag/Tag';
import PopupBase from '../PopupBase';
/**
* component creates overlay to add a new tag to a video
*/
class AddTagPopup extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {items: []};
}
componentDidMount() {
const updateRequest = new FormData();
updateRequest.append('action', 'getAllTags');
fetch('/api/tags.php', {method: 'POST', body: updateRequest})
.then((response) => response.json())
.then((result) => {
this.setState({
items: result
});
});
}
render() {
return (
<PopupBase title='Add a Tag to this Video:' onHide={this.props.onHide}>
{this.state.items ?
this.state.items.map((i) => (
<Tag onclick={() => {
this.addTag(i.tag_id, i.tag_name);
}}>{i.tag_name}</Tag>
)) : null}
</PopupBase>
);
}
/**
* add a new tag to this video
* @param tagid tag id to add
* @param tagname tag name to add
*/
addTag(tagid, tagname) {
console.log(this.props);
const updateRequest = new FormData();
updateRequest.append('action', 'addTag');
updateRequest.append('id', tagid);
updateRequest.append('movieid', this.props.movie_id);
fetch('/api/tags.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);
} else {
this.props.submit(tagid, tagname);
}
this.props.onHide();
}));
}
}
export default AddTagPopup;

0
src/elements/AddTagPopup/AddTagPopup.module.css → src/elements/Popups/AddTagPopup/AddTagPopup.module.css
View File

0
src/elements/AddTagPopup/AddTagPopup.test.js → src/elements/Popups/AddTagPopup/AddTagPopup.test.js
View File

60
src/elements/Popups/NewActorPopup/NewActorPopup.js Normal file
View File

@ -0,0 +1,60 @@
import React from 'react';
import PopupBase from '../PopupBase';
import style from './NewActorPopup.module.css';
/**
* creates modal overlay to define a new Tag
*/
class NewActorPopup extends React.Component {
render() {
return (
<PopupBase title='Add new Tag' onHide={this.props.onHide} height='200px' width='400px'>
<NewActorPopupContent onHide={this.props.onHide}/>
</PopupBase>
);
}
}
export class NewActorPopupContent extends React.Component {
constructor(props, context) {
super(props, context);
this.props = props;
}
render() {
return (
<>
<div>
<input type='text' placeholder='Actor Name' onChange={(v) => {
this.value = v.target.value;
}}/></div>
<button className={style.savebtn} onClick={() => this.storeselection()}>Save</button>
</>
);
}
/**
* store the filled in form to the backend
*/
storeselection() {
// check if user typed in name
if (this.value === '' || this.value === undefined) return;
const req = new FormData();
req.append('action', 'createActor');
req.append('actorname', this.value);
fetch('/api/actor.php', {method: 'POST', body: req})
.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);
}
this.props.onHide();
});
}
}
export default NewActorPopup;

8
src/elements/Popups/NewActorPopup/NewActorPopup.module.css Normal file
View File

@ -0,0 +1,8 @@
.savebtn {
background-color: greenyellow;
border: 0;
border-radius: 4px;
float: right;
margin-top: 30px;
padding: 3px;
}

54
src/elements/Popups/NewActorPopup/NewActorPopup.test.js Normal file
View File

@ -0,0 +1,54 @@
import React from 'react';
import {shallow} from 'enzyme';
import '@testing-library/jest-dom';
import NewActorPopup, {NewActorPopupContent} from './NewActorPopup';
describe('<NewActorPopup/>', function () {
it('renders without crashing ', function () {
const wrapper = shallow(<NewActorPopup/>);
wrapper.unmount();
});
});
describe('<NewActorPopupContent/>', () => {
it('renders without crashing', function () {
const wrapper = shallow(<NewActorPopupContent/>);
wrapper.unmount();
});
it('simulate button click', function () {
const wrapper = shallow(<NewActorPopupContent/>);
// manually set typed in actorname
wrapper.instance().value = 'testactorname';
global.fetch = prepareFetchApi({});
expect(global.fetch).toBeCalledTimes(0);
wrapper.find('button').simulate('click');
// fetch should have been called once now
expect(global.fetch).toBeCalledTimes(1);
});
it('test not allowing request if textfield is empty', function () {
const wrapper = shallow(<NewActorPopupContent/>);
global.fetch = prepareFetchApi({});
expect(global.fetch).toBeCalledTimes(0);
wrapper.find('button').simulate('click');
// fetch should not be called now
expect(global.fetch).toBeCalledTimes(0);
});
it('test input change', function () {
const wrapper = shallow(<NewActorPopupContent/>);
wrapper.find('input').simulate('change', {target: {value: 'testinput'}});
expect(wrapper.instance().value).toBe('testinput');
});
});

46
src/elements/Popups/NewTagPopup/NewTagPopup.js Normal file
View File

@ -0,0 +1,46 @@
import React from 'react';
import PopupBase from '../PopupBase';
import style from './NewTagPopup.module.css';
/**
* creates modal overlay to define a new Tag
*/
class NewTagPopup extends React.Component {
constructor(props, context) {
super(props, context);
this.props = props;
}
render() {
return (
<PopupBase title='Add new Tag' onHide={this.props.onHide} height='200px' width='400px'>
<div><input type='text' placeholder='Tagname' onChange={(v) => {
this.value = v.target.value;
}}/></div>
<button className={style.savebtn} onClick={() => this.storeselection()}>Save</button>
</PopupBase>
);
}
/**
* store the filled in form to the backend
*/
storeselection() {
const updateRequest = new FormData();
updateRequest.append('action', 'createTag');
updateRequest.append('tagname', this.value);
fetch('/api/tags.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);
}
this.props.onHide();
});
}
}
export default NewTagPopup;

8
src/elements/Popups/NewTagPopup/NewTagPopup.module.css Normal file
View File

@ -0,0 +1,8 @@
.savebtn {
background-color: greenyellow;
border: 0;
border-radius: 4px;
float: right;
margin-top: 30px;
padding: 3px;
}

9
src/elements/NewTagPopup/NewTagPopup.test.js → src/elements/Popups/NewTagPopup/NewTagPopup.test.js
View File

@ -11,12 +11,7 @@ describe('<NewTagPopup/>', function () {
});
it('test storeseletion click event', done => {
const mockSuccessResponse = {};
const mockJsonPromise = Promise.resolve(mockSuccessResponse);
const mockFetchPromise = Promise.resolve({
json: () => mockJsonPromise
});
global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);
global.fetch = prepareFetchApi({});
const func = jest.fn();
@ -27,7 +22,7 @@ describe('<NewTagPopup/>', function () {
}
});
wrapper.find('ModalFooter').find('button').simulate('click');
wrapper.find('button').simulate('click');
expect(global.fetch).toHaveBeenCalledTimes(1);
process.nextTick(() => {

122
src/elements/Popups/PopupBase.js Normal file
View File

@ -0,0 +1,122 @@
import GlobalInfos from '../../GlobalInfos';
import style from './PopupBase.module.css';
import {Line} from '../PageTitle/PageTitle';
import React from 'react';
/**
* wrapper class for generic types of popups
*/
class PopupBase extends React.Component {
constructor(props) {
super(props);
this.state = {items: []};
this.wrapperRef = React.createRef();
this.handleClickOutside = this.handleClickOutside.bind(this);
this.keypress = this.keypress.bind(this);
// parse style props
this.framedimensions = {
width: (this.props.width ? this.props.width : undefined),
height: (this.props.height ? this.props.height : undefined)
};
}
componentDidMount() {
document.addEventListener('mousedown', this.handleClickOutside);
document.addEventListener('keyup', this.keypress);
// add element drag drop events
if (this.wrapperRef != null) {
this.dragElement();
}
}
componentWillUnmount() {
// remove the appended listeners
document.removeEventListener('mousedown', this.handleClickOutside);
document.removeEventListener('keyup', this.keypress);
}
render() {
const themeStyle = GlobalInfos.getThemeStyle();
return (
<div style={this.framedimensions} className={[style.popup, themeStyle.thirdbackground].join(' ')} ref={this.wrapperRef}>
<div className={style.header}>
<div className={[style.title, themeStyle.textcolor].join(' ')}>{this.props.title}</div>
<div className={style.banner}>{this.props.banner}</div>
</div>
<Line/>
<div className={style.content}>
{this.props.children}
</div>
</div>
);
}
/**
* Alert if clicked on outside of element
*/
handleClickOutside(event) {
if (this.wrapperRef && !this.wrapperRef.current.contains(event.target)) {
this.props.onHide();
}
}
/**
* key event handling
* @param event keyevent
*/
keypress(event) {
// hide if escape is pressed
if (event.key === 'Escape') {
this.props.onHide();
}
}
/**
* make the element drag and droppable
*/
dragElement() {
let xOld = 0, yOld = 0;
const elmnt = this.wrapperRef.current;
if(elmnt === null) return;
elmnt.firstChild.onmousedown = dragMouseDown;
function dragMouseDown(e) {
e.preventDefault();
// get the mouse cursor position at startup:
xOld = e.clientX;
yOld = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e.preventDefault();
// calculate the new cursor position:
const dx = xOld - e.clientX;
const dy = yOld - e.clientY;
xOld = e.clientX;
yOld = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - dy) + 'px';
elmnt.style.left = (elmnt.offsetLeft - dx) + 'px';
}
function closeDragElement() {
// stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;
}
}
}
export default PopupBase;

43
src/elements/Popups/PopupBase.module.css Normal file
View File

@ -0,0 +1,43 @@
.popup {
border: 3px #3574fe solid;
border-radius: 18px;
height: 80%;
left: 20%;
opacity: 0.95;
position: absolute;
top: 10%;
width: 60%;
z-index: 2;
}
.header{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.title {
cursor: move;
font-size: x-large;
margin-left: 15px;
margin-top: 10px;
opacity: 1;
float: left;
width: 60%;
}
.banner {
width: 40%;
float: left;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.content {
margin-left: 20px;
margin-right: 20px;
margin-top: 10px;
opacity: 1;
}

12
src/elements/Popups/PopupBase.test.js Normal file
View File

@ -0,0 +1,12 @@
import {shallow} from "enzyme";
import React from "react";
import PopupBase from "./PopupBase";
describe('<PopupBase/>', function () {
it('renders without crashing ', function () {
const wrapper = shallow(<PopupBase/>);
wrapper.unmount();
});
});

6
src/elements/Preview/Preview.js
View File

@ -64,10 +64,8 @@ class Preview extends React.Component {
itemClick() {
console.log('item clicked!' + this.state.name);
this.props.viewbinding.changeRootElement(
<Player
viewbinding={this.props.viewbinding}
movie_id={this.props.movie_id}/>);
GlobalInfos.getViewBinding().changeRootElement(
<Player movie_id={this.props.movie_id}/>);
}
}

8
src/elements/Preview/Previw.test.js
View File

@ -20,13 +20,7 @@ describe('<Preview/>', function () {
const func = jest.fn();
const wrapper = shallow(<Preview/>);
wrapper.setProps({
viewbinding: {
changeRootElement: () => {
func();
}
}
});
prepareViewBinding(func);
wrapper.find('.videopreview').simulate('click');

13
src/elements/Tag/Tag.js
View File

@ -2,6 +2,7 @@ import React from 'react';
import styles from './Tag.module.css';
import CategoryPage from '../../pages/CategoryPage/CategoryPage';
import GlobalInfos from '../../GlobalInfos';
/**
* A Component representing a single Category tag
@ -18,18 +19,16 @@ class Tag extends React.Component {
* click handling for a Tag
*/
TagClick() {
const tag = this.props.children.toString().toLowerCase();
if (this.props.onclick) {
this.props.onclick();
this.props.onclick(tag);
return;
}
const tag = this.props.children.toString().toLowerCase();
// call callback functin to switch to category page with specified tag
this.props.viewbinding.changeRootElement(
<CategoryPage
category={tag}
viewbinding={this.props.viewbinding}/>);
GlobalInfos.getViewBinding().changeRootElement(
<CategoryPage category={tag}/>);
}
}

9
src/elements/Tag/Tag.test.js
View File

@ -16,14 +16,11 @@ describe('<Tag/>', function () {
});
it('click event triggered and setvideo callback called', function () {
global.fetch = global.prepareFetchApi({});
global.fetch = prepareFetchApi({});
const func = jest.fn();
const elem = {
changeRootElement: () => func()
};
prepareViewBinding(func);
const wrapper = shallow(<Tag
viewbinding={elem}>test</Tag>);
const wrapper = shallow(<Tag>test</Tag>);
expect(func).toBeCalledTimes(0);

3
src/elements/VideoContainer/VideoContainer.js
View File

@ -34,8 +34,7 @@ class VideoContainer extends React.Component {
<Preview
key={elem.movie_id}
name={elem.movie_name}
movie_id={elem.movie_id}
viewbinding={this.props.viewbinding}/>
movie_id={elem.movie_id}/>
))}
{/*todo css for no items to show*/}
{this.state.loadeditems.length === 0 ?

4
src/index.js
View File

@ -2,6 +2,10 @@ import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
// don't allow console logs within production env
// don't allow console logs within production env
global.console.log = process.env.NODE_ENV !== "development" ? (s) => {} : global.console.log;
ReactDOM.render(
<React.StrictMode>
<App/>

57
src/pages/ActorPage/ActorPage.js Normal file
View File

@ -0,0 +1,57 @@
import React from 'react';
import PageTitle from '../../elements/PageTitle/PageTitle';
import SideBar, {SideBarTitle} from '../../elements/SideBar/SideBar';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faUser} from '@fortawesome/free-solid-svg-icons';
import style from './ActorPage.module.css';
import VideoContainer from '../../elements/VideoContainer/VideoContainer';
class ActorPage extends React.Component {
constructor(props) {
super(props);
this.state = {data: undefined};
}
render() {
return (
<>
<PageTitle title={this.props.actor.name} subtitle={this.state.data ? this.state.data.length + ' videos' : null}/>
<SideBar>
<div className={style.pic}>
<FontAwesomeIcon style={{color: 'white'}} icon={faUser} size='10x'/>
</div>
<SideBarTitle>Attention: This is an early preview!</SideBarTitle>
</SideBar>
{this.state.data ?
<VideoContainer
data={this.state.data}/> :
<div>No Data found!</div>}
</>
);
}
componentDidMount() {
this.getActorInfo();
}
/**
* request more actor info from backend
*/
getActorInfo() {
// todo 2020-12-4: fetch to db
const req = new FormData();
req.append('action', 'getActorInfo');
req.append('actorid', this.props.actor.actor_id);
fetch('/api/actor.php', {method: 'POST', body: req})
.then((response) => response.json()
.then((result) => {
console.log(result);
this.setState({data: result.videos ? result.videos : []});
}));
}
}
export default ActorPage;

4
src/pages/ActorPage/ActorPage.module.css Normal file
View File

@ -0,0 +1,4 @@
.pic {
text-align: center;
margin-bottom: 25px;
}

12
src/pages/ActorPage/ActorPage.test.js Normal file
View File

@ -0,0 +1,12 @@
import {shallow} from 'enzyme';
import React from 'react';
import ActorPage from './ActorPage';
describe('<ActorPage/>', function () {
it('renders without crashing ', function () {
const wrapper = shallow(<ActorPage actor={{id: 5, name: 'usr1'}}/>);
wrapper.unmount();
});
});

31
src/pages/CategoryPage/CategoryPage.js
View File

@ -4,7 +4,7 @@ import Tag from '../../elements/Tag/Tag';
import videocontainerstyle from '../../elements/VideoContainer/VideoContainer.module.css';
import {TagPreview} from '../../elements/Preview/Preview';
import NewTagPopup from '../../elements/NewTagPopup/NewTagPopup';
import NewTagPopup from '../../elements/Popups/NewTagPopup/NewTagPopup';
import PageTitle, {Line} from '../../elements/PageTitle/PageTitle';
import VideoContainer from '../../elements/VideoContainer/VideoContainer';
@ -44,26 +44,10 @@ class CategoryPage extends React.Component {
<SideBar>
<SideBarTitle>Default Tags:</SideBarTitle>
<Tag viewbinding={{
changeRootElement: (e) => {
this.loadTag(e.props.category);
}
}}>All</Tag>
<Tag viewbinding={{
changeRootElement: (e) => {
this.loadTag(e.props.category);
}
}}>FullHd</Tag>
<Tag viewbinding={{
changeRootElement: (e) => {
this.loadTag(e.props.category);
}
}}>LowQuality</Tag>
<Tag viewbinding={{
changeRootElement: (e) => {
this.loadTag(e.props.category);
}
}}>HD</Tag>
<Tag onclick={(tag) => {this.loadTag(tag);}}>All</Tag>
<Tag onclick={(tag) => {this.loadTag(tag);}}>FullHd</Tag>
<Tag onclick={(tag) => {this.loadTag(tag);}}>LowQuality</Tag>
<Tag onclick={(tag) => {this.loadTag(tag);}}>HD</Tag>
<Line/>
<button data-testid='btnaddtag' className='btn btn-success' onClick={() => {
this.setState({popupvisible: true});
@ -82,8 +66,7 @@ class CategoryPage extends React.Component {
<>
{this.videodata ?
<VideoContainer
data={this.videodata}
viewbinding={this.props.viewbinding}/> : null}
data={this.videodata}/> : null}
<button data-testid='backbtn' className='btn btn-success'
onClick={this.loadCategoryPageDefault}>Back
</button>
@ -95,7 +78,6 @@ class CategoryPage extends React.Component {
key={m.tag_name}
name={m.tag_name}
tag_id={m.tag_id}
viewbinding={this.props.viewbinding}
categorybinding={this.loadTag}/>
)) :
'loading'}
@ -105,6 +87,7 @@ class CategoryPage extends React.Component {
{this.state.popupvisible ?
<NewTagPopup show={this.state.popupvisible}
onHide={() => {
console.error("setstatecalled!");
this.setState({popupvisible: false});
this.loadTags();
}}/> :

3
src/pages/HomePage/HomePage.js
View File

@ -158,8 +158,7 @@ class HomePage extends React.Component {
</SideBar>
{this.state.data.length !== 0 ?
<VideoContainer
data={this.state.data}
viewbinding={this.props.viewbinding}/> :
data={this.state.data}/> :
<div>No Data found!</div>}
<div className={style.rightinfo}>

80
src/pages/Player/Player.js
View File

@ -6,8 +6,13 @@ import plyrstyle from 'plyr-react/dist/plyr.css'
import {Plyr} from 'plyr-react';
import SideBar, {SideBarItem, SideBarTitle} from '../../elements/SideBar/SideBar';
import Tag from '../../elements/Tag/Tag';
import AddTagPopup from '../../elements/AddTagPopup/AddTagPopup';
import AddTagPopup from '../../elements/Popups/AddTagPopup/AddTagPopup';
import PageTitle, {Line} from '../../elements/PageTitle/PageTitle';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faPlusCircle} from '@fortawesome/free-solid-svg-icons';
import AddActorPopup from '../../elements/Popups/AddActorPopup/AddActorPopup';
import ActorTile from '../../elements/ActorTile/ActorTile';
import GlobalInfos from '../../GlobalInfos';
/**
@ -44,13 +49,15 @@ class Player extends React.Component {
length: null,
tags: [],
suggesttag: [],
popupvisible: false
popupvisible: false,
actorpopupvisible: false
};
this.quickAddTag = this.quickAddTag.bind(this);
}
componentDidMount() {
// initial fetch of current movie data
this.fetchMovieData();
}
@ -111,14 +118,18 @@ class Player extends React.Component {
return (
<>
{this.state.popupvisible ?
<AddTagPopup show={this.state.popupvisible}
onHide={() => {
this.setState({popupvisible: false});
}}
<AddTagPopup onHide={() => {this.setState({popupvisible: false});}}
submit={this.quickAddTag}
movie_id={this.state.movie_id}/> :
null
}
{
this.state.actorpopupvisible ?
<AddActorPopup onHide={() => {
this.refetchActors();
this.setState({actorpopupvisible: false});
}} movie_id={this.state.movie_id}/> : null
}
</>
);
}
@ -135,14 +146,11 @@ class Player extends React.Component {
{this.state.quality !== 0 ?
<SideBarItem><b>{this.state.quality}p</b> Quality!</SideBarItem> : null}
{this.state.length !== 0 ?
<SideBarItem><b>{Math.round(this.state.length / 60)}</b> Minutes of
length!</SideBarItem> : null}
<SideBarItem><b>{Math.round(this.state.length / 60)}</b> Minutes of length!</SideBarItem> : null}
<Line/>
<SideBarTitle>Tags:</SideBarTitle>
{this.state.tags.map((m) => (
<Tag
key={m.tag_name}
viewbinding={this.props.viewbinding}>{m.tag_name}</Tag>
<Tag key={m.tag_name}>{m.tag_name}</Tag>
))}
<Line/>
<SideBarTitle>Tag Quickadd:</SideBarTitle>
@ -176,7 +184,9 @@ class Player extends React.Component {
options={this.options}/> :
<div>not loaded yet</div>}
<div className={style.videoactions}>
<button className={style.button} style={{backgroundColor: 'green'}} onClick={() => this.likebtn()}>Like this Video!</button>
<button className={style.button} style={{backgroundColor: 'green'}} onClick={() => this.likebtn()}>
Like this Video!
</button>
<button className={style.button} style={{backgroundColor: '#3574fe'}} onClick={() => this.setState({popupvisible: true})}>
Give this Video a Tag
</button>
@ -185,6 +195,24 @@ class Player extends React.Component {
}}>Delete Video
</button>
</div>
{/* rendering of actor tiles */}
<div className={style.actorcontainer}>
{this.state.actors ?
this.state.actors.map((actr) => (
<ActorTile actor={actr}/>
)) : <></>
}
<div className={style.actorAddTile} onClick={() => {
this.addActor();
}}>
<div className={style.actorAddTile_thumbnail}>
<FontAwesomeIcon style={{
lineHeight: '130px'
}} icon={faPlusCircle} size='5x'/>
</div>
<div className={style.actorAddTile_name}>Add Actor</div>
</div>
</div>
</div>
<button className={style.closebutton} onClick={() => this.closebtn()}>Close</button>
{
@ -224,7 +252,8 @@ class Player extends React.Component {
quality: result.quality,
length: result.length,
tags: result.tags,
suggesttag: result.suggesttag
suggesttag: result.suggesttag,
actors: result.actors
});
console.log(this.state);
});
@ -257,7 +286,7 @@ class Player extends React.Component {
* calls callback to viewbinding to show previous page agains
*/
closebtn() {
this.props.viewbinding.returnToLastElement();
GlobalInfos.getViewBinding().returnToLastElement();
}
/**
@ -273,13 +302,34 @@ class Player extends React.Component {
.then((result) => {
if (result.result === 'success') {
// return to last element if successful
this.props.viewbinding.returnToLastElement();
GlobalInfos.getViewBinding().returnToLastElement();
} else {
console.error('an error occured while liking');
console.error(result);
}
}));
}
/**
* show the actor add popup
*/
addActor() {
this.setState({actorpopupvisible: true});
}
refetchActors() {
const req = new FormData();
req.append('action', 'getActorsOfVideo');
req.append('videoid', this.props.movie_id);
console.log('refrething actors');
fetch('/api/actor.php', {method: 'POST', body: req})
.then((response) => response.json()
.then((result) => {
this.setState({actors: result});
}));
}
}
export default Player;

38
src/pages/Player/Player.module.css
View File

@ -20,10 +20,36 @@
margin-top: 15px;
}
.button {
padding: 6px;
border-radius: 5px;
margin-right: 15px;
color: white;
border-width: 0;
.actorcontainer {
margin-top: 13px;
}
.button {
border-radius: 5px;
border-width: 0;
color: white;
margin-right: 15px;
padding: 6px;
}
.actorAddTile {
float: left;
padding-left: 25px;
padding-top: 50px;
cursor: pointer;
color: white;
transition: opacity ease 0.5s;
}
.actorAddTile:hover{
opacity: 0.7;
transition: opacity ease 0.5s;
}
.actorAddTile_thumbnail {
height: 90px;
}
.actorAddTile_name {
bottom: 0;
}

20
src/pages/Player/Player.test.js
View File

@ -78,9 +78,11 @@ describe('<Player/>', function () {
});
it('test delete button', done => {
const wrapper = shallow(<Player viewbinding={{
returnToLastElement: jest.fn()
}}/>);
const wrapper = shallow(<Player/>);
const func = jest.fn();
prepareViewBinding(func)
global.fetch = prepareFetchApi({result: 'success'});
wrapper.find('.videoactions').find('button').at(2).simulate('click');
@ -88,7 +90,7 @@ describe('<Player/>', function () {
process.nextTick(() => {
// refetch is called so fetch called 3 times
expect(global.fetch).toHaveBeenCalledTimes(1);
expect(wrapper.instance().props.viewbinding.returnToLastElement).toHaveBeenCalledTimes(1);
expect(func).toHaveBeenCalledTimes(1);
global.fetch.mockClear();
done();
@ -97,15 +99,9 @@ describe('<Player/>', function () {
it('hide click ', function () {
const wrapper = shallow(<Player/>);
const func = jest.fn();
wrapper.setProps({
viewbinding: {
returnToLastElement: () => {
func();
}
}
});
const func = jest.fn();
prepareViewBinding(func);
expect(func).toHaveBeenCalledTimes(0);
wrapper.find('.closebutton').simulate('click');

7
src/pages/RandomPage/RandomPage.js
View File

@ -31,16 +31,13 @@ class RandomPage extends React.Component {
<SideBar>
<SideBarTitle>Visible Tags:</SideBarTitle>
{this.state.tags.map((m) => (
<Tag
key={m.tag_name}
viewbinding={this.props.viewbinding}>{m.tag_name}</Tag>
<Tag key={m.tag_name}>{m.tag_name}</Tag>
))}
</SideBar>
{this.state.videos.length !== 0 ?
<VideoContainer
data={this.state.videos}
viewbinding={this.props.viewbinding}>
data={this.state.videos}>
<div className={style.Shufflebutton}>
<button onClick={() => this.shuffleclick()} className={style.btnshuffle}>Shuffle</button>
</div>

8
src/pages/SettingsPage/GeneralSettings.module.css
View File

@ -13,13 +13,13 @@
flex-wrap: wrap;
}
.footer{
.footer {
bottom: 3px;
color: white;
opacity: 0.8;
position: fixed;
right: 0;
bottom: 3px;
width: 110px;
opacity: 0.8;
color: white;
}
/* On screens that are 722px wide or less, make the columns stack on top of each other instead of next to each other */

14
src/setupTests.js
View File

@ -6,6 +6,7 @@ import '@testing-library/jest-dom/extend-expect';
import {configure} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import GlobalInfos from './GlobalInfos';
configure({adapter: new Adapter()});
@ -31,3 +32,16 @@ global.prepareFailingFetchApi = () => {
const mockFetchPromise = Promise.reject('myreason');
return (jest.fn().mockImplementation(() => mockFetchPromise));
};
/**
* prepares a viewbinding instance
* @param func a mock function to be called
*/
global.prepareViewBinding = (func) => {
GlobalInfos.getViewBinding = () => {
return {
changeRootElement: func,
returnToLastElement: func
}
};
}