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

Merge branch 'actors_page' into 'master'

Browse Source 
Actor Page and Tiles on Player page

Closes #50

See merge request lukas/openmediacenter!23
This commit is contained in:
Lukas Heiligenbrunner 2020-12-11 18:23:14 +00:00
commit c049aa345c
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
}
};
}