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

fix some tests

Browse Source 
fix merge issues
This commit is contained in:
Lukas Heiligenbrunner
2020-12-29 19:39:30 +00:00
parent e11f021efe
commit 80a04456e6
74 changed files with 8067 additions and 4481 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
src/App.js
View File

@@ -1,159 +0,0 @@
import React from 'react';
import HomePage from './pages/HomePage/HomePage';
import RandomPage from './pages/RandomPage/RandomPage';
import GlobalInfos from './utils/GlobalInfos';
// include bootstraps css
import 'bootstrap/dist/css/bootstrap.min.css';
import style from './App.module.css';
import SettingsPage from './pages/SettingsPage/SettingsPage';
import CategoryPage from './pages/CategoryPage/CategoryPage';
import {callAPI} from './utils/Api';
import {NoBackendConnectionPopup} from './elements/Popups/NoBackendConnectionPopup/NoBackendConnectionPopup';
/**
* The main App handles the main tabs and which content to show
*/
class App extends React.Component {
newElement = null;
constructor(props, context) {
super(props, context);
this.state = {
page: 'default',
generalSettingsLoaded: false,
passwordsupport: null,
mediacentername: 'OpenMediaCenter',
onapierror: false
};
// 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());
}
initialAPICall(){
// this is the first api call so if it fails we know there is no connection to backend
callAPI('settings.php', {action: 'loadInitialData'}, (result) =>{
// set theme
GlobalInfos.enableDarkTheme(result.DarkMode);
this.setState({
generalSettingsLoaded: true,
passwordsupport: result.passwordEnabled,
mediacentername: result.mediacenter_name,
onapierror: false
});
// set tab title to received mediacenter name
document.title = result.mediacenter_name;
}, error => {
this.setState({onapierror: true});
});
}
componentDidMount() {
this.initialAPICall();
}
/**
* create a viewbinding to call APP functions from child elements
* @returns a set of callback functions
*/
constructViewBinding() {
return {
changeRootElement: this.changeRootElement,
returnToLastElement: this.returnToLastElement
};
}
/**
* load the selected component into the main view
* @returns {JSX.Element} body element of selected page
*/
MainBody() {
let page;
if (this.state.page === 'default') {
page = <HomePage/>;
this.mypage = page;
} else if (this.state.page === 'random') {
page = <RandomPage/>;
this.mypage = page;
} else if (this.state.page === 'settings') {
page = <SettingsPage/>;
this.mypage = page;
} else if (this.state.page === 'categories') {
page = <CategoryPage/>;
this.mypage = page;
} else if (this.state.page === 'video') {
// show videoelement if neccessary
page = this.newElement;
console.log(page);
} else if (this.state.page === 'lastpage') {
// return back to last page
page = this.mypage;
} else {
page = <div>unimplemented yet!</div>;
}
return (page);
}
render() {
const themeStyle = GlobalInfos.getThemeStyle();
// add the main theme to the page body
document.body.className = themeStyle.backgroundcolor;
return (
<div className={style.app}>
<div className={[style.navcontainer, themeStyle.backgroundcolor, themeStyle.textcolor, themeStyle.hrcolor].join(' ')}>
<div className={style.navbrand}>{this.state.mediacentername}</div>
<div className={[style.navitem, themeStyle.navitem, this.state.page === 'default' ? style.navitemselected : {}].join(' ')}
onClick={() => this.setState({page: 'default'})}>Home
</div>
<div className={[style.navitem, themeStyle.navitem, this.state.page === 'random' ? style.navitemselected : {}].join(' ')}
onClick={() => this.setState({page: 'random'})}>Random Video
</div>
<div className={[style.navitem, themeStyle.navitem, this.state.page === 'categories' ? style.navitemselected : {}].join(' ')}
onClick={() => this.setState({page: 'categories'})}>Categories
</div>
<div className={[style.navitem, themeStyle.navitem, this.state.page === 'settings' ? style.navitemselected : {}].join(' ')}
onClick={() => this.setState({page: 'settings'})}>Settings
</div>
</div>
{this.state.generalSettingsLoaded ? this.MainBody() : 'loading'}
{this.state.onapierror ? this.ApiError() : null}
</div>
);
}
/**
* render a new root element into the main body
*/
changeRootElement(element) {
this.newElement = element;
this.setState({
page: 'video'
});
}
/**
* return from page to the previous page before a change
*/
returnToLastElement() {
this.setState({
page: 'lastpage'
});
}
ApiError() {
// on api error show popup and retry and show again if failing..
return (<NoBackendConnectionPopup onHide={() => this.initialAPICall()}/>);
}
}
export default App;

1
src/App.module.css
View File

@@ -16,6 +16,7 @@
.navitem:hover {
opacity: 1;
text-decoration: none;
transition: opacity .5s;
}

65
src/App.test.js
View File

@@ -18,71 +18,6 @@ describe('<App/>', function () {
expect(wrapper.find('.navitem')).toHaveLength(4);
});
it('simulate video view change ', function () {
const wrapper = shallow(<App/>);
wrapper.setState({generalSettingsLoaded: true}); // simulate fetch to have already finisheed
wrapper.instance().changeRootElement(<div id='testit'/>);
expect(wrapper.find('#testit')).toHaveLength(1);
});
it('test hide video again', function () {
const wrapper = shallow(<App/>);
wrapper.setState({generalSettingsLoaded: true}); // simulate fetch to have already finisheed
wrapper.instance().changeRootElement(<div id='testit'/>);
expect(wrapper.find('#testit')).toHaveLength(1);
wrapper.instance().returnToLastElement();
expect(wrapper.find('HomePage')).toHaveLength(1);
});
it('test fallback to last loaded page', function () {
const wrapper = shallow(<App/>);
wrapper.setState({generalSettingsLoaded: true}); // simulate fetch to have already finisheed
wrapper.find('.navitem').findWhere(t => t.text() === 'Random Video' && t.type() === 'div').simulate('click');
wrapper.instance().changeRootElement(<div id='testit'/>);
expect(wrapper.find('#testit')).toHaveLength(1);
wrapper.instance().returnToLastElement();
expect(wrapper.find('RandomPage')).toHaveLength(1);
});
it('test home click', function () {
const wrapper = shallow(<App/>);
wrapper.setState({generalSettingsLoaded: true}); // simulate fetch to have already finisheed
wrapper.setState({page: 'wrongvalue'});
expect(wrapper.find('HomePage')).toHaveLength(0);
wrapper.find('.navitem').findWhere(t => t.text() === 'Home' && t.type() === 'div').simulate('click');
expect(wrapper.find('HomePage')).toHaveLength(1);
});
it('test category click', function () {
const wrapper = shallow(<App/>);
wrapper.setState({generalSettingsLoaded: true}); // simulate fetch to have already finisheed
expect(wrapper.find('CategoryPage')).toHaveLength(0);
wrapper.find('.navitem').findWhere(t => t.text() === 'Categories' && t.type() === 'div').simulate('click');
expect(wrapper.find('CategoryPage')).toHaveLength(1);
});
it('test settings click', function () {
const wrapper = shallow(<App/>);
wrapper.setState({generalSettingsLoaded: true}); // simulate fetch to have already finisheed
expect(wrapper.find('SettingsPage')).toHaveLength(0);
wrapper.find('.navitem').findWhere(t => t.text() === 'Settings' && t.type() === 'div').simulate('click');
expect(wrapper.find('SettingsPage')).toHaveLength(1);
});
it('test initial fetch from api', done => {
global.fetch = global.prepareFetchApi({
generalSettingsLoaded: true,

130
src/App.tsx Normal file
View File

@@ -0,0 +1,130 @@
import React from 'react';
import HomePage from './pages/HomePage/HomePage';
import RandomPage from './pages/RandomPage/RandomPage';
import GlobalInfos from './utils/GlobalInfos';
// include bootstraps css
import 'bootstrap/dist/css/bootstrap.min.css';
import style from './App.module.css';
import SettingsPage from './pages/SettingsPage/SettingsPage';
import CategoryPage from './pages/CategoryPage/CategoryPage';
import {callAPI} from './utils/Api';
import {NoBackendConnectionPopup} from './elements/Popups/NoBackendConnectionPopup/NoBackendConnectionPopup';
import {BrowserRouter as Router, NavLink, Route, Switch} from 'react-router-dom';
import Player from './pages/Player/Player';
import ActorOverviewPage from './pages/ActorOverviewPage/ActorOverviewPage';
import ActorPage from './pages/ActorPage/ActorPage';
interface state {
generalSettingsLoaded: boolean;
passwordsupport: boolean;
mediacentername: string;
onapierror: boolean;
}
interface initialApiCallData {
DarkMode: boolean;
passwordEnabled: boolean;
mediacenter_name: string;
}
/**
* The main App handles the main tabs and which content to show
*/
class App extends React.Component<{}, state> {
constructor(props: {}) {
super(props);
this.state = {
generalSettingsLoaded: false,
passwordsupport: false,
mediacentername: 'OpenMediaCenter',
onapierror: false
};
}
initialAPICall(): void {
// this is the first api call so if it fails we know there is no connection to backend
callAPI('settings.php', {action: 'loadInitialData'}, (result: initialApiCallData) => {
// set theme
GlobalInfos.enableDarkTheme(result.DarkMode);
this.setState({
generalSettingsLoaded: true,
passwordsupport: result.passwordEnabled,
mediacentername: result.mediacenter_name,
onapierror: false
});
// set tab title to received mediacenter name
document.title = result.mediacenter_name;
}, error => {
this.setState({onapierror: true});
});
}
componentDidMount(): void {
this.initialAPICall();
}
render(): JSX.Element {
const themeStyle = GlobalInfos.getThemeStyle();
// add the main theme to the page body
document.body.className = themeStyle.backgroundcolor;
return (
<Router>
<div className={style.app}>
<div className={[style.navcontainer, themeStyle.backgroundcolor, themeStyle.textcolor, themeStyle.hrcolor].join(' ')}>
<div className={style.navbrand}>{this.state.mediacentername}</div>
<NavLink className={[style.navitem, themeStyle.navitem].join(' ')} to={'/'} activeStyle={{opacity: '0.85'}}>Home</NavLink>
<NavLink className={[style.navitem, themeStyle.navitem].join(' ')} to={'/random'} activeStyle={{opacity: '0.85'}}>Random
Video</NavLink>
<NavLink className={[style.navitem, themeStyle.navitem].join(' ')} to={'/categories'} activeStyle={{opacity: '0.85'}}>Categories</NavLink>
<NavLink className={[style.navitem, themeStyle.navitem].join(' ')} to={'/settings'} activeStyle={{opacity: '0.85'}}>Settings</NavLink>
</div>
{this.routing()}
</div>
{this.state.onapierror ? this.ApiError() : null}
</Router>
);
}
routing(): JSX.Element {
return (
<Switch>
<Route path="/random">
<RandomPage/>
</Route>
<Route path="/categories">
<CategoryPage/>
</Route>
<Route path="/settings">
<SettingsPage/>
</Route>
<Route exact path="/player/:id">
<Player/>
</Route>
<Route exact path="/actors">
<ActorOverviewPage/>
</Route>
<Route path="/actors/:id">
<ActorPage/>
</Route>
<Route path="/">
<HomePage/>
</Route>
</Switch>
);
}
ApiError(): JSX.Element {
// on api error show popup and retry and show again if failing..
return (<NoBackendConnectionPopup onHide={(): void => this.initialAPICall()}/>);
}
}
export default App;

8
src/AppDarkTheme.module.css
View File

@@ -22,6 +22,14 @@
background: white;
}
.navitem {
color: white;
}
.navitem:hover {
color: white;
}
.hrcolor {
border-color: rgba(255, 255, 255, .1);
}

8
src/AppLightTheme.module.css
View File

@@ -2,6 +2,14 @@
* The coloring elements for light theme
*/
.navitem {
color: black;
}
.navitem:hover {
color: black;
}
.navitem::after {
background: black;
}

16
src/api/GeneralTypes.ts Normal file
View File

@@ -0,0 +1,16 @@
import {TagType} from './VideoTypes';
export interface GeneralSuccess {
result: string
}
interface TagarrayType {
[_: string]: TagType
}
export const DefaultTags: TagarrayType = {
all: {tag_id: 1, tag_name: 'all'},
fullhd: {tag_id: 2, tag_name: 'fullhd'},
lowq: {tag_id: 3, tag_name: 'lowquality'},
hd: {tag_id: 4, tag_name: 'hd'}
};

31
src/api/VideoTypes.ts Normal file
View File

@@ -0,0 +1,31 @@
export interface loadVideoType {
movie_url: string
thumbnail: string
movie_id: number
movie_name: string
likes: number
quality: number
length: number
tags: TagType[]
suggesttag: TagType[]
actors: ActorType[]
}
export interface VideoUnloadedType {
movie_id: number;
movie_name: string
}
/**
* type accepted by Tag component
*/
export interface TagType {
tag_name: string
tag_id: number
}
export interface ActorType {
thumbnail: string;
name: string;
actor_id: number;
}

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

@@ -1,43 +0,0 @@
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 '../../utils/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;

6
src/elements/ActorTile/ActorTile.module.css
View File

@@ -5,12 +5,12 @@
float: left;
height: 200px;
margin: 3px;
width: 130px;
transition: opacity ease 0.5s;
width: 130px;
}
.actortile:hover{
.actortile:hover {
opacity: 0.7;
transition: opacity ease 0.5s;
}

15
src/elements/ActorTile/ActorTile.test.js
View File

@@ -4,24 +4,13 @@ import ActorTile from './ActorTile';
describe('<ActorTile/>', function () {
it('renders without crashing ', function () {
const wrapper = shallow(<ActorTile actor={{thumbnail: "-1", name: "testname", id: 3}}/>);
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);
});
it('simulate click with custom handler', function () {
const func = jest.fn((_) => {});
const wrapper = shallow(<ActorTile actor={{thumbnail: "-1", name: "testname", id: 3}} onClick={() => func()}/>);
const wrapper = shallow(<ActorTile actor={{thumbnail: '-1', name: 'testname', id: 3}} onClick={() => func()}/>);
const func1 = jest.fn();
prepareViewBinding(func1);

49
src/elements/ActorTile/ActorTile.tsx Normal file
View File

@@ -0,0 +1,49 @@
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 {Link} from 'react-router-dom';
import {ActorType} from '../../api/VideoTypes';
interface props {
actor: ActorType;
onClick?: (actor: ActorType) => void
}
class ActorTile extends React.Component<props> {
constructor(props: props) {
super(props);
this.state = {};
}
render(): JSX.Element {
if (this.props.onClick) {
return this.renderActorTile(this.props.onClick);
} else {
return (
<Link to={{pathname: '/actors/' + this.props.actor.actor_id}}>
{this.renderActorTile(() => {
})}
</Link>
);
}
}
renderActorTile(customclickhandler: (actor: ActorType) => void): JSX.Element {
console.log(this.props.actor);
return (
<div className={style.actortile} onClick={(): void => customclickhandler(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>
);
}
}
export default ActorTile;

8
src/elements/GPElements/Button.module.css Normal file
View File

@@ -0,0 +1,8 @@
.button {
background-color: green;
border-radius: 5px;
border-width: 0;
color: white;
margin-right: 15px;
padding: 6px;
}

32
src/elements/GPElements/Button.test.js Normal file
View File

@@ -0,0 +1,32 @@
import {shallow} from 'enzyme';
import React from 'react';
import {Button} from './Button';
function prepareFetchApi(response) {
const mockJsonPromise = Promise.resolve(response);
const mockFetchPromise = Promise.resolve({
json: () => mockJsonPromise
});
return (jest.fn().mockImplementation(() => mockFetchPromise));
}
describe('<Button/>', function () {
it('renders without crashing ', function () {
const wrapper = shallow(<Button onClick={() => {}} title='test'/>);
wrapper.unmount();
});
it('renders title', function () {
const wrapper = shallow(<Button onClick={() => {}} title='test1'/>);
expect(wrapper.text()).toBe('test1');
});
it('test onclick handling', () => {
const func = jest.fn();
const wrapper = shallow(<Button onClick={func} title='test1'/>);
wrapper.find('button').simulate('click');
expect(func).toHaveBeenCalledTimes(1);
});
});

16
src/elements/GPElements/Button.tsx Normal file
View File

@@ -0,0 +1,16 @@
import React from 'react';
import style from './Button.module.css';
interface ButtonProps {
title: string;
onClick?: () => void;
color?: React.CSSProperties;
}
export function Button(props: ButtonProps): JSX.Element {
return (
<button className={style.button} style={props.color} onClick={props.onClick}>
{props.title}
</button>
);
}

11
src/elements/PageTitle/PageTitle.js → src/elements/PageTitle/PageTitle.tsx
View File

@@ -2,11 +2,16 @@ import React from 'react';
import style from './PageTitle.module.css';
import GlobalInfos from '../../utils/GlobalInfos';
interface props {
title: string;
subtitle: string | null;
}
/**
* Component for generating PageTitle with bottom Line
*/
class PageTitle extends React.Component {
render() {
class PageTitle extends React.Component<props> {
render(): JSX.Element {
const themeStyle = GlobalInfos.getThemeStyle();
return (
<div className={style.pageheader + ' ' + themeStyle.backgroundcolor}>
@@ -26,7 +31,7 @@ class PageTitle extends React.Component {
* use this for horizontal lines to use the current active theming
*/
export class Line extends React.Component {
render() {
render(): JSX.Element {
const themeStyle = GlobalInfos.getThemeStyle();
return (
<>

2
src/elements/Popups/AddActorPopup/AddActorPopup.module.css
View File

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

18
src/elements/Popups/AddActorPopup/AddActorPopup.test.js
View File

@@ -40,12 +40,12 @@ describe('<AddActorPopup/>', function () {
it('simulate actortile click', function () {
const func = jest.fn();
const wrapper = shallow(<AddActorPopup onHide={() => {func()}}/>);
const wrapper = shallow(<AddActorPopup onHide={() => {func();}} movie_id={1}/>);
global.callAPIMock({result: 'success'});
wrapper.setState({actors: [{id: 1, actorname: 'test'}]}, () => {
wrapper.find('ActorTile').props().onClick();
wrapper.setState({actors: [{actor_id: 1, actorname: 'test'}]}, () => {
wrapper.find('ActorTile').dive().simulate('click');
expect(callAPI).toHaveBeenCalledTimes(1);
@@ -55,12 +55,12 @@ describe('<AddActorPopup/>', function () {
it('test failing actortile click', function () {
const func = jest.fn();
const wrapper = shallow(<AddActorPopup onHide={() => {func()}}/>);
const wrapper = shallow(<AddActorPopup onHide={() => {func();}}/>);
global.callAPIMock({result: 'nosuccess'});
wrapper.setState({actors: [{id: 1, actorname: 'test'}]}, () => {
wrapper.find('ActorTile').props().onClick();
wrapper.setState({actors: [{actor_id: 1, actorname: 'test'}]}, () => {
wrapper.find('ActorTile').dive().simulate('click');
expect(callAPI).toHaveBeenCalledTimes(1);
@@ -68,4 +68,10 @@ describe('<AddActorPopup/>', function () {
expect(func).toHaveBeenCalledTimes(0);
});
});
it('test no actor on loading', function () {
const wrapper = shallow(<AddActorPopup/>);
expect(wrapper.find('PopupBase').find('ActorTile')).toHaveLength(0);
});
});

46
src/elements/Popups/AddActorPopup/AddActorPopup.js → src/elements/Popups/AddActorPopup/AddActorPopup.tsx
View File

@@ -4,37 +4,51 @@ import ActorTile from '../../ActorTile/ActorTile';
import style from './AddActorPopup.module.css';
import {NewActorPopupContent} from '../NewActorPopup/NewActorPopup';
import {callAPI} from '../../../utils/Api';
import {ActorType} from '../../../api/VideoTypes';
import {GeneralSuccess} from '../../../api/GeneralTypes';
interface props {
onHide: () => void;
movie_id: number;
}
interface state {
contentDefault: boolean;
actors: ActorType[];
}
/**
* Popup for Adding a new Actor to a Video
*/
class AddActorPopup extends React.Component {
constructor(props) {
class AddActorPopup extends React.Component<props, state> {
constructor(props: props) {
super(props);
this.state = {
contentDefault: true,
actors: undefined
actors: []
};
this.tileClickHandler = this.tileClickHandler.bind(this);
}
render() {
render(): JSX.Element {
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>}>
onClick={(): void => {
this.setState({contentDefault: false});
}}>Create new Actor</button>}>
{this.resolvePage()}
</PopupBase>
</>
);
}
componentDidMount() {
componentDidMount(): void {
// fetch the available actors
this.loadActors();
}
@@ -43,9 +57,9 @@ class AddActorPopup extends React.Component {
* selector for current showing popup page
* @returns {JSX.Element}
*/
resolvePage() {
resolvePage(): JSX.Element {
if (this.state.contentDefault) return (this.getContent());
else return (<NewActorPopupContent onHide={() => {
else return (<NewActorPopupContent onHide={(): void => {
this.loadActors();
this.setState({contentDefault: true});
}}/>);
@@ -55,8 +69,8 @@ class AddActorPopup extends React.Component {
* returns content for the newActor popup
* @returns {JSX.Element}
*/
getContent() {
if (this.state.actors) {
getContent(): JSX.Element {
if (this.state.actors.length !== 0) {
return (<div>
{this.state.actors.map((el) => (<ActorTile actor={el} onClick={this.tileClickHandler}/>))}
</div>);
@@ -68,9 +82,13 @@ class AddActorPopup extends React.Component {
/**
* event handling for ActorTile Click
*/
tileClickHandler(actorid) {
tileClickHandler(actor: ActorType): void {
// fetch the available actors
callAPI('actor.php', {action: 'addActorToVideo', actorid: actorid, videoid: this.props.movie_id}, result => {
callAPI<GeneralSuccess>('actor.php', {
action: 'addActorToVideo',
actorid: actor.actor_id,
videoid: this.props.movie_id
}, result => {
if (result.result === 'success') {
// return back to player page
this.props.onHide();
@@ -81,8 +99,8 @@ class AddActorPopup extends React.Component {
});
}
loadActors() {
callAPI('actor.php', {action: 'getAllActors'}, result => {
loadActors(): void {
callAPI<ActorType[]>('actor.php', {action: 'getAllActors'}, result => {
this.setState({actors: result});
});
}

8
src/elements/Popups/AddTagPopup/AddTagPopup.js
View File

@@ -15,6 +15,7 @@ class AddTagPopup extends React.Component {
componentDidMount() {
callAPI('tags.php', {action: 'getAllTags'}, (result) => {
console.log(result);
this.setState({
items: result
});
@@ -26,9 +27,10 @@ class AddTagPopup extends React.Component {
<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>
<Tag tagInfo={i}
onclick={() => {
this.addTag(i.tag_id, i.tag_name);
}}/>
)) : null}
</PopupBase>
);

4
src/elements/Popups/AddTagPopup/AddTagPopup.test.js
View File

@@ -34,7 +34,7 @@ describe('<AddTagPopup/>', function () {
});
it('test addtag', done => {
const wrapper = shallow(<AddTagPopup/>);
const wrapper = shallow(<AddTagPopup movie_id={1}/>);
global.fetch = prepareFetchApi({result: 'success'});
@@ -57,7 +57,7 @@ describe('<AddTagPopup/>', function () {
});
it('test failing addTag', done => {
const wrapper = shallow(<AddTagPopup/>);
const wrapper = shallow(<AddTagPopup movie_id={1}/>);
global.fetch = prepareFetchApi({result: 'fail'});

2
src/elements/Popups/NewActorPopup/NewActorPopup.test.js
View File

@@ -22,7 +22,7 @@ describe('<NewActorPopupContent/>', () => {
global.callAPIMock({});
const func = jest.fn();
const wrapper = shallow(<NewActorPopupContent onHide={() => {func()}}/>);
const wrapper = shallow(<NewActorPopupContent onHide={() => {func();}}/>);
// manually set typed in actorname
wrapper.instance().value = 'testactorname';

27
src/elements/Popups/NewActorPopup/NewActorPopup.js → src/elements/Popups/NewActorPopup/NewActorPopup.tsx
View File

@@ -2,12 +2,17 @@ import React from 'react';
import PopupBase from '../PopupBase';
import style from './NewActorPopup.module.css';
import {callAPI} from '../../../utils/Api';
import {GeneralSuccess} from '../../../api/GeneralTypes';
interface NewActorPopupProps {
onHide: () => void;
}
/**
* creates modal overlay to define a new Tag
*/
class NewActorPopup extends React.Component {
render() {
class NewActorPopup extends React.Component<NewActorPopupProps> {
render(): JSX.Element {
return (
<PopupBase title='Add new Tag' onHide={this.props.onHide} height='200px' width='400px'>
<NewActorPopupContent onHide={this.props.onHide}/>
@@ -16,21 +21,17 @@ class NewActorPopup extends React.Component {
}
}
export class NewActorPopupContent extends React.Component {
constructor(props, context) {
super(props, context);
export class NewActorPopupContent extends React.Component<NewActorPopupProps> {
value: string | undefined;
this.props = props;
}
render() {
render(): JSX.Element {
return (
<>
<div>
<input type='text' placeholder='Actor Name' onChange={(v) => {
<input type='text' placeholder='Actor Name' onChange={(v): void => {
this.value = v.target.value;
}}/></div>
<button className={style.savebtn} onClick={() => this.storeselection()}>Save</button>
<button className={style.savebtn} onClick={(): void => this.storeselection()}>Save</button>
</>
);
}
@@ -38,11 +39,11 @@ export class NewActorPopupContent extends React.Component {
/**
* store the filled in form to the backend
*/
storeselection() {
storeselection(): void {
// check if user typed in name
if (this.value === '' || this.value === undefined) return;
callAPI('actor.php', {action: 'createActor', actorname: this.value}, (result) => {
callAPI('actor.php', {action: 'createActor', actorname: this.value}, (result: GeneralSuccess) => {
if (result.result !== 'success') {
console.log('error occured while writing to db -- todo error handling');
console.log(result.result);

4
src/elements/Popups/NewTagPopup/NewTagPopup.test.js
View File

@@ -3,8 +3,6 @@ import React from 'react';
import {shallow} from 'enzyme';
import '@testing-library/jest-dom';
import NewTagPopup from './NewTagPopup';
import {NoBackendConnectionPopup} from '../NoBackendConnectionPopup/NoBackendConnectionPopup';
import {getBackendDomain} from '../../../utils/Api';
describe('<NewTagPopup/>', function () {
it('renders without crashing ', function () {
@@ -24,6 +22,8 @@ describe('<NewTagPopup/>', function () {
}
});
wrapper.instance().value = 'testvalue';
wrapper.find('button').simulate('click');
expect(global.fetch).toHaveBeenCalledTimes(1);

12
src/elements/Popups/NoBackendConnectionPopup/NoBackendConnectionPopup.tsx
View File

@@ -1,7 +1,7 @@
import React from "react";
import PopupBase from "../PopupBase";
import style from "../NewActorPopup/NewActorPopup.module.css";
import {setCustomBackendDomain} from "../../../utils/Api";
import React from 'react';
import PopupBase from '../PopupBase';
import style from '../NewActorPopup/NewActorPopup.module.css';
import {setCustomBackendDomain} from '../../../utils/Api';
interface NBCProps {
onHide: (_: void) => void
@@ -11,10 +11,10 @@ export function NoBackendConnectionPopup(props: NBCProps): JSX.Element {
return (
<PopupBase title='No connection to backend API!' onHide={props.onHide} height='200px' width='600px'>
<div>
<input type='text' placeholder='http://192.168.0.2' onChange={(v) => {
<input type='text' placeholder='http://192.168.0.2' onChange={(v): void => {
setCustomBackendDomain(v.target.value);
}}/></div>
<button className={style.savebtn} onClick={() => props.onHide()}>Refresh</button>
<button className={style.savebtn} onClick={(): void => props.onHide()}>Refresh</button>
</PopupBase>
);
}

2
src/elements/Popups/PopupBase.js
View File

@@ -85,7 +85,7 @@ class PopupBase extends React.Component {
let xOld = 0, yOld = 0;
const elmnt = this.wrapperRef.current;
if(elmnt === null) return;
if (elmnt === null) return;
elmnt.firstChild.onmousedown = dragMouseDown;

10
src/elements/Popups/PopupBase.module.css
View File

@@ -1,9 +1,9 @@
.popup {
border: 3px #3574fe solid;
border-radius: 18px;
min-height: 80%;
height: fit-content;
left: 20%;
min-height: 80%;
opacity: 0.95;
position: absolute;
top: 10%;
@@ -11,7 +11,7 @@
z-index: 2;
}
.header{
.header {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
@@ -20,20 +20,20 @@
.title {
cursor: move;
float: left;
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;
float: left;
justify-content: flex-end;
width: 40%;
}
.content {

6
src/elements/Popups/PopupBase.test.js
View File

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

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

@@ -1,7 +1,7 @@
import React from 'react';
import style from './Preview.module.css';
import Player from '../../pages/Player/Player';
import {Spinner} from 'react-bootstrap';
import {Link} from 'react-router-dom';
import GlobalInfos from '../../utils/GlobalInfos';
import {callAPIPlain} from '../../utils/Api';
@@ -31,33 +31,25 @@ class Preview extends React.Component {
render() {
const themeStyle = GlobalInfos.getThemeStyle();
return (
<div className={style.videopreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}
onClick={() => this.itemClick()}>
<div className={style.previewtitle + ' ' + themeStyle.lighttextcolor}>{this.state.name}</div>
<div className={style.previewpic}>
{this.state.previewpicture !== null ?
<img className={style.previewimage}
src={this.state.previewpicture}
alt='Pic loading.'/> :
<span className={style.loadAnimation}><Spinner animation='border'/></span>}
<Link to={'/player/' + this.props.movie_id}>
<div className={style.videopreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}>
<div className={style.previewtitle + ' ' + themeStyle.lighttextcolor}>{this.state.name}</div>
<div className={style.previewpic}>
{this.state.previewpicture !== null ?
<img className={style.previewimage}
src={this.state.previewpicture}
alt='Pic loading.'/> :
<span className={style.loadAnimation}><Spinner animation='border'/></span>}
</div>
<div className={style.previewbottom}>
</div>
<div className={style.previewbottom}>
</div>
</div>
</div>
</Link>
);
}
/**
* handle the click event of a tile
*/
itemClick() {
console.log('item clicked!' + this.state.name);
GlobalInfos.getViewBinding().changeRootElement(
<Player movie_id={this.props.movie_id}/>);
}
}
/**
@@ -68,21 +60,13 @@ export class TagPreview extends React.Component {
const themeStyle = GlobalInfos.getThemeStyle();
return (
<div
className={style.videopreview + ' ' + style.tagpreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}
onClick={() => this.itemClick()}>
className={style.videopreview + ' ' + style.tagpreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}>
<div className={style.tagpreviewtitle + ' ' + themeStyle.lighttextcolor}>
{this.props.name}
</div>
</div>
);
}
/**
* handle the click event of a Tag tile
*/
itemClick() {
this.props.categorybinding(this.props.name);
}
}
export default Preview;

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

@@ -5,23 +5,10 @@ import Preview, {TagPreview} from './Preview';
describe('<Preview/>', function () {
it('renders without crashing ', function () {
const wrapper = shallow(<Preview/>);
const wrapper = shallow(<Preview movie_id={1}/>);
wrapper.unmount();
});
it('click event triggered', () => {
const func = jest.fn();
const wrapper = shallow(<Preview/>);
prepareViewBinding(func);
wrapper.find('.videopreview').simulate('click');
//callback to open player should have called
expect(func).toHaveBeenCalledTimes(1);
});
it('picture rendered correctly', done => {
const mockSuccessResponse = 'testsrc';
const mockJsonPromise = Promise.resolve(mockSuccessResponse);
@@ -30,7 +17,7 @@ describe('<Preview/>', function () {
});
global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);
const wrapper = shallow(<Preview name='test'/>);
const wrapper = shallow(<Preview name='test' movie_id={1}/>);
// now called 1 times
expect(global.fetch).toHaveBeenCalledTimes(1);
@@ -48,7 +35,7 @@ describe('<Preview/>', function () {
});
it('spinner loads correctly', function () {
const wrapper = shallow(<Preview/>);
const wrapper = shallow(<Preview movie_id={1}/>);
// expect load animation to be visible
expect(wrapper.find('.loadAnimation')).toHaveLength(1);
@@ -66,24 +53,5 @@ describe('<TagPreview/>', function () {
const wrapper = shallow(<TagPreview name='test'/>);
expect(wrapper.find('.tagpreviewtitle').text()).toBe('test');
});
it('click event triggered', function () {
const func = jest.fn();
const wrapper = shallow(<TagPreview/>);
wrapper.setProps({
categorybinding: () => {
func();
}
});
// first call of fetch is getting of available tags
expect(func).toHaveBeenCalledTimes(0);
wrapper.find('.videopreview').simulate('click');
// now called 1 times
expect(func).toHaveBeenCalledTimes(1);
});
});

3
src/elements/SideBar/SideBar.module.css
View File

@@ -1,6 +1,9 @@
.sideinfo {
border: 2px #3574fe solid;
border-radius: 20px;
}
.sideinfogeometry {
float: left;
margin-left: 15px;
margin-top: 25px;

17
src/elements/SideBar/SideBar.js → src/elements/SideBar/SideBar.tsx
View File

@@ -2,13 +2,20 @@ import React from 'react';
import style from './SideBar.module.css';
import GlobalInfos from '../../utils/GlobalInfos';
interface SideBarProps {
hiddenFrame?: boolean;
width?: string;
}
/**
* component for sidebar-info
*/
class SideBar extends React.Component {
render() {
class SideBar extends React.Component<SideBarProps> {
render(): JSX.Element {
const themeStyle = GlobalInfos.getThemeStyle();
return (<div className={style.sideinfo + ' ' + themeStyle.secbackground}>
const classnn = style.sideinfogeometry + ' ' + (this.props.hiddenFrame === undefined ? style.sideinfo + ' ' + themeStyle.secbackground : '');
return (<div className={classnn} style={{width: this.props.width}}>
{this.props.children}
</div>);
}
@@ -18,7 +25,7 @@ class SideBar extends React.Component {
* The title of the sidebar
*/
export class SideBarTitle extends React.Component {
render() {
render(): JSX.Element {
const themeStyle = GlobalInfos.getThemeStyle();
return (
<div className={style.sidebartitle + ' ' + themeStyle.subtextcolor}>{this.props.children}</div>
@@ -30,7 +37,7 @@ export class SideBarTitle extends React.Component {
* An item of the sidebar
*/
export class SideBarItem extends React.Component {
render() {
render(): JSX.Element {
const themeStyle = GlobalInfos.getThemeStyle();
return (
<div

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

@@ -1,35 +0,0 @@
import React from 'react';
import styles from './Tag.module.css';
import CategoryPage from '../../pages/CategoryPage/CategoryPage';
import GlobalInfos from '../../utils/GlobalInfos';
/**
* A Component representing a single Category tag
*/
class Tag extends React.Component {
render() {
return (
<button className={styles.tagbtn} onClick={() => this.TagClick()}
data-testid='Test-Tag'>{this.props.children}</button>
);
}
/**
* click handling for a Tag
*/
TagClick() {
const tag = this.props.children.toString().toLowerCase();
if (this.props.onclick) {
this.props.onclick(tag);
return;
}
// call callback functin to switch to category page with specified tag
GlobalInfos.getViewBinding().changeRootElement(
<CategoryPage category={tag}/>);
}
}
export default Tag;

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

@@ -6,33 +6,20 @@ import {shallow} from 'enzyme';
describe('<Tag/>', function () {
it('renders without crashing ', function () {
const wrapper = shallow(<Tag>test</Tag>);
const wrapper = shallow(<Tag tagInfo={{tag_name: 'testname', tag_id: 1}}/>);
wrapper.unmount();
});
it('renders childs correctly', function () {
const wrapper = shallow(<Tag>test</Tag>);
const wrapper = shallow(<Tag tagInfo={{tag_name: 'test', tag_id: 1}}/>);
expect(wrapper.children().text()).toBe('test');
});
it('click event triggered and setvideo callback called', function () {
global.fetch = prepareFetchApi({});
const func = jest.fn();
prepareViewBinding(func);
const wrapper = shallow(<Tag>test</Tag>);
expect(func).toBeCalledTimes(0);
wrapper.simulate('click');
expect(func).toBeCalledTimes(1);
});
it('test custom onclick function', function () {
const func = jest.fn();
const wrapper = shallow(<Tag
tagInfo={{tag_name: 'test', tag_id: 1}}
onclick={() => {func();}}>test</Tag>);
expect(func).toBeCalledTimes(0);

47
src/elements/Tag/Tag.tsx Normal file
View File

@@ -0,0 +1,47 @@
import React from 'react';
import styles from './Tag.module.css';
import {Link} from 'react-router-dom';
import {TagType} from '../../api/VideoTypes';
interface props {
onclick?: (_: string) => void
tagInfo: TagType
}
/**
* A Component representing a single Category tag
*/
class Tag extends React.Component<props> {
render(): JSX.Element {
if (this.props.onclick) {
return this.renderButton();
} else {
return (
<Link to={'/categories/' + this.props.tagInfo.tag_id}>
{this.renderButton()}
</Link>
);
}
}
renderButton(): JSX.Element {
return (
<button className={styles.tagbtn} onClick={(): void => this.TagClick()}
data-testid='Test-Tag'>{this.props.tagInfo.tag_name}</button>
);
}
/**
* click handling for a Tag
*/
TagClick(): void {
if (this.props.onclick) {
// call custom onclick handling
this.props.onclick(this.props.tagInfo.tag_name); // todo check if param is neccessary
return;
}
}
}
export default Tag;

36
src/elements/VideoContainer/VideoContainer.js → src/elements/VideoContainer/VideoContainer.tsx
View File

@@ -1,33 +1,41 @@
import React from 'react';
import Preview from '../Preview/Preview';
import style from './VideoContainer.module.css';
import {VideoUnloadedType} from '../../api/VideoTypes';
interface props {
data: VideoUnloadedType[]
}
interface state {
loadeditems: VideoUnloadedType[];
selectionnr: number;
}
/**
* A videocontainer storing lots of Preview elements
* includes scroll handling and loading of preview infos
*/
class VideoContainer extends React.Component {
class VideoContainer extends React.Component<props, state> {
// stores current index of loaded elements
loadindex = 0;
loadindex: number = 0;
constructor(props, context) {
super(props, context);
this.data = props.data;
constructor(props: props) {
super(props);
this.state = {
loadeditems: [],
selectionnr: null
selectionnr: 0
};
}
componentDidMount() {
componentDidMount(): void {
document.addEventListener('scroll', this.trackScrolling);
this.loadPreviewBlock(16);
}
render() {
render(): JSX.Element {
return (
<div className={style.maincontent}>
{this.state.loadeditems.map(elem => (
@@ -44,7 +52,7 @@ class VideoContainer extends React.Component {
);
}
componentWillUnmount() {
componentWillUnmount(): void {
this.setState({});
// unbind scroll listener when unmounting component
document.removeEventListener('scroll', this.trackScrolling);
@@ -54,13 +62,13 @@ class VideoContainer extends React.Component {
* load previews to the container
* @param nr number of previews to load
*/
loadPreviewBlock(nr) {
loadPreviewBlock(nr: number): void {
console.log('loadpreviewblock called ...');
let ret = [];
for (let i = 0; i < nr; i++) {
// only add if not end
if (this.data.length > this.loadindex + i) {
ret.push(this.data[this.loadindex + i]);
if (this.props.data.length > this.loadindex + i) {
ret.push(this.props.data[this.loadindex + i]);
}
}
@@ -78,7 +86,7 @@ class VideoContainer extends React.Component {
/**
* scroll event handler -> load new previews if on bottom
*/
trackScrolling = () => {
trackScrolling = (): void => {
// comparison if current scroll position is on bottom --> 200 is bottom offset to trigger load
if (window.innerHeight + document.documentElement.scrollTop + 200 >= document.documentElement.offsetHeight) {
this.loadPreviewBlock(8);

2
src/index.js
View File

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

6
src/pages/ActorOverviewPage/ActorOverviewPage.module.css Normal file
View File

@@ -0,0 +1,6 @@
.container {
float: left;
margin-right: 20px;
padding-left: 20px;
width: 70%;
}

43
src/pages/ActorOverviewPage/ActorOverviewPage.test.js Normal file
View File

@@ -0,0 +1,43 @@
import {shallow} from 'enzyme';
import React from 'react';
import ActorOverviewPage from './ActorOverviewPage';
describe('<ActorOverviewPage/>', function () {
it('renders without crashing ', function () {
const wrapper = shallow(<ActorOverviewPage/>);
wrapper.unmount();
});
it('test inerstion of actor tiles', function () {
const wrapper = shallow(<ActorOverviewPage/>);
wrapper.setState({
actors: [{
thumbnail: '',
name: 'testname',
actor_id: 42
}]
});
expect(wrapper.find('ActorTile')).toHaveLength(1);
});
it('test newtagpopup visibility', function () {
const wrapper = shallow(<ActorOverviewPage/>);
expect(wrapper.find('NewActorPopup')).toHaveLength(0);
wrapper.find('SideBar').find('Button').simulate('click');
expect(wrapper.find('NewActorPopup')).toHaveLength(1);
});
it('test popup hiding', function () {
const wrapper = shallow(<ActorOverviewPage/>);
wrapper.setState({NActorPopupVisible: true});
wrapper.find('NewActorPopup').props().onHide();
expect(wrapper.find('NewActorPopup')).toHaveLength(0);
});
});

57
src/pages/ActorOverviewPage/ActorOverviewPage.tsx Normal file
View File

@@ -0,0 +1,57 @@
import React from 'react';
import {callAPI} from '../../utils/Api';
import {ActorType} from '../../api/VideoTypes';
import ActorTile from '../../elements/ActorTile/ActorTile';
import PageTitle from '../../elements/PageTitle/PageTitle';
import SideBar from '../../elements/SideBar/SideBar';
import style from './ActorOverviewPage.module.css';
import {Button} from '../../elements/GPElements/Button';
import NewActorPopup from '../../elements/Popups/NewActorPopup/NewActorPopup';
interface props {
}
interface state {
actors: ActorType[];
NActorPopupVisible: boolean
}
class ActorOverviewPage extends React.Component<props, state> {
constructor(props: props) {
super(props);
this.state = {
actors: [],
NActorPopupVisible: false
};
this.fetchAvailableActors();
}
render(): JSX.Element {
return (
<>
<PageTitle title='Actors' subtitle={this.state.actors.length + ' Actors'}/>
<SideBar>
<Button title='Add Actor' onClick={(): void => this.setState({NActorPopupVisible: true})}/>
</SideBar>
<div className={style.container}>
{this.state.actors.map((el) => (<ActorTile actor={el}/>))}
</div>
{this.state.NActorPopupVisible ?
<NewActorPopup onHide={(): void => {
this.setState({NActorPopupVisible: false});
this.fetchAvailableActors(); // refetch actors
}}/> : null}
</>
);
}
fetchAvailableActors(): void {
callAPI<ActorType[]>('actor.php', {action: 'getAllActors'}, result => {
this.setState({actors: result});
});
}
}
export default ActorOverviewPage;

51
src/pages/ActorPage/ActorPage.js
View File

@@ -1,51 +0,0 @@
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';
import {callAPI} from '../../utils/Api';
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
callAPI('actor.php', {action: 'getActorInfo', actorid: this.props.actor.actor_id}, result => {
console.log(result);
this.setState({data: result.videos ? result.videos : []});
});
}
}
export default ActorPage;

7
src/pages/ActorPage/ActorPage.module.css
View File

@@ -1,4 +1,9 @@
.pic {
text-align: center;
margin-bottom: 25px;
text-align: center;
}
.overviewbutton {
float: right;
margin-top: 25px;
}

19
src/pages/ActorPage/ActorPage.test.js
View File

@@ -1,12 +1,27 @@
import {shallow} from 'enzyme';
import React from 'react';
import ActorPage from './ActorPage';
import {ActorPage} from './ActorPage';
describe('<ActorPage/>', function () {
it('renders without crashing ', function () {
const wrapper = shallow(<ActorPage actor={{id: 5, name: 'usr1'}}/>);
const wrapper = shallow(<ActorPage match={{params: {id: 10}}}/>);
wrapper.unmount();
});
it('fetch infos', function () {
callAPIMock({
videos: [{
movie_id: 0,
movie_name: 'test'
}], info: {
thumbnail: '',
name: '',
actor_id: 0
}
});
const wrapper = shallow(<ActorPage match={{params: {id: 10}}}/>);
expect(wrapper.find('VideoContainer')).toHaveLength(1);
});
});

87
src/pages/ActorPage/ActorPage.tsx Normal file
View File

@@ -0,0 +1,87 @@
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';
import {callAPI} from '../../utils/Api';
import {ActorType, VideoUnloadedType} from '../../api/VideoTypes';
import {Link, withRouter} from 'react-router-dom';
import {RouteComponentProps} from 'react-router';
import {Button} from '../../elements/GPElements/Button';
interface state {
data: VideoUnloadedType[],
actor: ActorType
}
/**
* empty default props with id in url
*/
interface props extends RouteComponentProps<{ id: string }> {
}
/**
* result of actor fetch
*/
interface videofetchresult {
videos: VideoUnloadedType[];
info: ActorType;
}
/**
* info page about a specific actor and a list of all its videos
*/
export class ActorPage extends React.Component<props, state> {
constructor(props: props) {
super(props);
this.state = {data: [], actor: {actor_id: 0, name: '', thumbnail: ''}};
}
render(): JSX.Element {
return (
<>
<PageTitle title={this.state.actor.name} subtitle={this.state.data ? this.state.data.length + ' videos' : null}>
<span className={style.overviewbutton}>
<Link to='/actors'>
<Button onClick={(): void => {}} title='Go to Actor overview'/>
</Link>
</span>
</PageTitle>
<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.length !== 0 ?
<VideoContainer
data={this.state.data}/> :
<div>No Data found!</div>}
</>
);
}
componentDidMount(): void {
this.getActorInfo();
}
/**
* request more actor info from backend
*/
getActorInfo(): void {
callAPI('actor.php', {
action: 'getActorInfo',
actorid: this.props.match.params.id
}, (result: videofetchresult) => {
this.setState({
data: result.videos ? result.videos : [],
actor: result.info
});
});
}
}
export default withRouter(ActorPage);

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

@@ -1,140 +0,0 @@
import React from 'react';
import SideBar, {SideBarTitle} from '../../elements/SideBar/SideBar';
import Tag from '../../elements/Tag/Tag';
import videocontainerstyle from '../../elements/VideoContainer/VideoContainer.module.css';
import {TagPreview} from '../../elements/Preview/Preview';
import NewTagPopup from '../../elements/Popups/NewTagPopup/NewTagPopup';
import PageTitle, {Line} from '../../elements/PageTitle/PageTitle';
import VideoContainer from '../../elements/VideoContainer/VideoContainer';
import {callAPI} from '../../utils/Api';
/**
* Component for Category Page
* Contains a Tag Overview and loads specific Tag videos in VideoContainer
*/
class CategoryPage extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
loadedtags: [],
selected: null
};
}
componentDidMount() {
// check if predefined category is set
if (this.props.category) {
this.fetchVideoData(this.props.category);
} else {
this.loadTags();
}
}
/**
* render the Title and SideBar component for the Category page
* @returns {JSX.Element} corresponding jsx element for Title and Sidebar
*/
renderSideBarATitle() {
return (
<>
<PageTitle
title='Categories'
subtitle={!this.state.selected ? this.state.loadedtags.length + ' different Tags' : this.state.selected}/>
<SideBar>
<SideBarTitle>Default Tags:</SideBarTitle>
<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});
}}>Add a new Tag!
</button>
</SideBar></>
);
}
render() {
return (
<>
{this.renderSideBarATitle()}
{this.state.selected ?
<>
{this.videodata ?
<VideoContainer
data={this.videodata}/> : null}
<button data-testid='backbtn' className='btn btn-success'
onClick={this.loadCategoryPageDefault}>Back
</button>
</> :
<div className={videocontainerstyle.maincontent}>
{this.state.loadedtags ?
this.state.loadedtags.map((m) => (
<TagPreview
key={m.tag_name}
name={m.tag_name}
tag_id={m.tag_id}
categorybinding={this.loadTag}/>
)) :
'loading'}
</div>
}
{this.state.popupvisible ?
<NewTagPopup show={this.state.popupvisible}
onHide={() => {
console.error("setstatecalled!");
this.setState({popupvisible: false});
this.loadTags();
}}/> :
null
}
</>
);
}
/**
* load a specific tag into a new previewcontainer
* @param tagname
*/
loadTag = (tagname) => {
this.fetchVideoData(tagname);
};
/**
* fetch data for a specific tag from backend
* @param tag tagname
*/
fetchVideoData(tag) {
callAPI('video.php', {action: 'getMovies', tag: tag}, result => {
this.videodata = result;
this.setState({selected: null}); // needed to trigger the state reload correctly
this.setState({selected: tag});
});
}
/**
* go back to the default category overview
*/
loadCategoryPageDefault = () => {
this.setState({selected: null});
this.loadTags();
};
/**
* load all available tags from db.
*/
loadTags() {
callAPI('tags.php', {action: 'getAllTags'}, result => {
this.setState({loadedtags: result});
});
}
}
export default CategoryPage;

86
src/pages/CategoryPage/CategoryPage.test.js
View File

@@ -1,4 +1,4 @@
import {mount, shallow} from 'enzyme';
import {shallow} from 'enzyme';
import React from 'react';
import CategoryPage from './CategoryPage';
@@ -8,22 +8,6 @@ describe('<CategoryPage/>', function () {
wrapper.unmount();
});
it('test tag fetch call', done => {
global.fetch = global.prepareFetchApi(['first', 'second']);
const wrapper = shallow(<CategoryPage/>);
expect(global.fetch).toHaveBeenCalledTimes(1);
process.nextTick(() => {
//callback to close window should have called
expect(wrapper.state().loadedtags.length).toBe(2);
global.fetch.mockClear();
done();
});
});
it('test new tag popup', function () {
const wrapper = shallow(<CategoryPage/>);
@@ -33,63 +17,31 @@ describe('<CategoryPage/>', function () {
expect(wrapper.find('NewTagPopup')).toHaveLength(1);
});
it('test setpage callback', done => {
global.fetch = global.prepareFetchApi([{}, {}]);
it('test add popup', function () {
const wrapper = shallow(<CategoryPage/>);
wrapper.setState({
loadedtags: [
{
tag_name: 'testname',
tag_id: 42
}
]
});
wrapper.find('TagPreview').dive().find('div').first().simulate('click');
process.nextTick(() => {
// expect callback to have loaded correct tag
expect(wrapper.state().selected).toBe('testname');
global.fetch.mockClear();
done();
});
expect(wrapper.find('NewTagPopup')).toHaveLength(0);
wrapper.setState({popupvisible: true});
expect(wrapper.find('NewTagPopup')).toHaveLength(1);
});
it('test back to category view callback', function () {
it('test hiding of popup', function () {
const wrapper = shallow(<CategoryPage/>);
wrapper.setState({popupvisible: true});
wrapper.find('NewTagPopup').props().onHide();
expect(wrapper.find('NewTagPopup')).toHaveLength(0);
});
it('test setting of subtitle', function () {
const wrapper = shallow(<CategoryPage/>);
wrapper.setState({
selected: 'test'
});
expect(wrapper.state().selected).not.toBeNull();
wrapper.find('[data-testid="backbtn"]').simulate('click');
expect(wrapper.state().selected).toBeNull();
});
expect(wrapper.find('PageTitle').props().subtitle).not.toBe('testtitle');
it('load categorypage with predefined tag', function () {
const func = jest.fn();
CategoryPage.prototype.fetchVideoData = func;
shallow(<CategoryPage category='fullhd'/>);
expect(func).toBeCalledTimes(1);
});
it('test sidebar tag clicks', function () {
const func = jest.fn();
const wrapper = shallow(<CategoryPage category='fullhd'/>);
wrapper.instance().loadTag = func;
expect(func).toBeCalledTimes(0);
wrapper.find('SideBar').find('Tag').forEach(e => {
e.dive().simulate('click');
});
expect(func).toBeCalledTimes(4);
wrapper.instance().setSubTitle('testtitle');
// test if prop of title is set correctly
expect(wrapper.find('PageTitle').props().subtitle).toBe('testtitle');
});
});

83
src/pages/CategoryPage/CategoryPage.tsx Normal file
View File

@@ -0,0 +1,83 @@
import React from 'react';
import SideBar, {SideBarTitle} from '../../elements/SideBar/SideBar';
import Tag from '../../elements/Tag/Tag';
import NewTagPopup from '../../elements/Popups/NewTagPopup/NewTagPopup';
import PageTitle, {Line} from '../../elements/PageTitle/PageTitle';
import {Route, Switch} from 'react-router-dom';
import {DefaultTags} from '../../api/GeneralTypes';
import {CategoryViewWR} from './CategoryView';
import TagView from './TagView';
interface CategoryPageState {
popupvisible: boolean;
subtitle: string;
}
/**
* Component for Category Page
* Contains a Tag Overview and loads specific Tag videos in VideoContainer
*/
class CategoryPage extends React.Component<{}, CategoryPageState> {
constructor(props: {}) {
super(props);
this.state = {
popupvisible: false,
subtitle: ''
};
this.setSubTitle = this.setSubTitle.bind(this);
}
render(): JSX.Element {
return (
<>
<PageTitle
title='Categories'
subtitle={this.state.subtitle}/>
<SideBar>
<SideBarTitle>Default Tags:</SideBarTitle>
<Tag tagInfo={DefaultTags.all}/>
<Tag tagInfo={DefaultTags.fullhd}/>
<Tag tagInfo={DefaultTags.hd}/>
<Tag tagInfo={DefaultTags.lowq}/>
<Line/>
<button data-testid='btnaddtag' className='btn btn-success' onClick={(): void => {
this.setState({popupvisible: true});
}}>Add a new Tag!
</button>
</SideBar>
<Switch>
<Route path='/categories/:id'>
<CategoryViewWR setSubTitle={this.setSubTitle}/>
</Route>
<Route path='/categories'>
<TagView setSubTitle={this.setSubTitle}/>
</Route>
</Switch>
{this.state.popupvisible ?
<NewTagPopup show={this.state.popupvisible}
onHide={(): void => {
this.setState({popupvisible: false});
// this.loadTags();
}}/> :
null
}
</>
);
}
/**
* set the subtitle of this page
* @param subtitle string as subtitle
*/
setSubTitle(subtitle: string): void {
this.setState({subtitle: subtitle});
}
}
export default CategoryPage;

24
src/pages/CategoryPage/CategoryView.test.js Normal file
View File

@@ -0,0 +1,24 @@
import {shallow} from 'enzyme';
import React from 'react';
import {CategoryView} from './CategoryView';
describe('<CategoryView/>', function () {
function instance() {
return shallow(<CategoryView match={{params: {id: 10}}}/>);
}
it('renders without crashing ', function () {
const wrapper = instance();
wrapper.unmount();
});
it('test backbutton', function () {
const wrapper = instance();
const func = jest.fn();
wrapper.setProps({history: {push: func}});
expect(func).toHaveBeenCalledTimes(0);
wrapper.find('button').simulate('click');
expect(func).toHaveBeenCalledTimes(1);
});
});

75
src/pages/CategoryPage/CategoryView.tsx Normal file
View File

@@ -0,0 +1,75 @@
import {RouteComponentProps} from 'react-router';
import React from 'react';
import {VideoUnloadedType} from '../../api/VideoTypes';
import VideoContainer from '../../elements/VideoContainer/VideoContainer';
import {callAPI} from '../../utils/Api';
import {withRouter} from 'react-router-dom';
interface CategoryViewProps extends RouteComponentProps<{ id: string }> {
setSubTitle: (title: string) => void
}
interface CategoryViewState {
loaded: boolean
}
/**
* plain class (for unit testing only)
*/
export class CategoryView extends React.Component<CategoryViewProps, CategoryViewState> {
private videodata: VideoUnloadedType[] = [];
constructor(props: CategoryViewProps) {
super(props);
this.state = {
loaded: false
};
}
componentDidMount(): void {
this.fetchVideoData(parseInt(this.props.match.params.id));
}
componentDidUpdate(prevProps: Readonly<CategoryViewProps>, prevState: Readonly<CategoryViewState>): void {
// trigger video refresh if id changed
if (prevProps.match.params.id !== this.props.match.params.id) {
this.setState({loaded: false});
this.fetchVideoData(parseInt(this.props.match.params.id));
}
}
render(): JSX.Element {
return (
<>
{this.state.loaded ?
<VideoContainer
data={this.videodata}/> : null}
<button data-testid='backbtn' className='btn btn-success'
onClick={(): void => {
this.props.history.push('/categories');
}}>Back to Categories
</button>
</>
);
}
/**
* fetch data for a specific tag from backend
* @param id tagid
*/
fetchVideoData(id: number): void {
callAPI<VideoUnloadedType[]>('video.php', {action: 'getMovies', tag: id}, result => {
this.videodata = result;
this.setState({loaded: true});
this.props.setSubTitle(this.videodata.length + ' Videos');
});
}
}
/**
* export with react Router wrapped (default use)
*/
export const CategoryViewWR = withRouter(CategoryView);

17
src/pages/CategoryPage/TagView.test.js Normal file
View File

@@ -0,0 +1,17 @@
import {shallow} from 'enzyme';
import React from 'react';
import TagView from './TagView';
describe('<TagView/>', function () {
it('renders without crashing ', function () {
const wrapper = shallow(<TagView/>);
wrapper.unmount();
});
it('test Tag insertion', function () {
const wrapper = shallow(<TagView/>);
wrapper.setState({loadedtags: [{tag_name: 'test', tag_id: 42}]});
expect(wrapper.find('TagPreview')).toHaveLength(1);
});
});

55
src/pages/CategoryPage/TagView.tsx Normal file
View File

@@ -0,0 +1,55 @@
import {TagType} from '../../api/VideoTypes';
import React from 'react';
import videocontainerstyle from '../../elements/VideoContainer/VideoContainer.module.css';
import {Link} from 'react-router-dom';
import {TagPreview} from '../../elements/Preview/Preview';
import {callAPI} from '../../utils/Api';
interface TagViewState {
loadedtags: TagType[];
}
interface props {
setSubTitle: (title: string) => void
}
class TagView extends React.Component<props, TagViewState> {
constructor(props: props) {
super(props);
this.state = {loadedtags: []};
}
componentDidMount(): void {
this.loadTags();
}
render(): JSX.Element {
return (
<>
<div className={videocontainerstyle.maincontent}>
{this.state.loadedtags ?
this.state.loadedtags.map((m) => (
<Link to={'/categories/' + m.tag_id}><TagPreview
key={m.tag_id}
name={m.tag_name}
tag_id={m.tag_id}/></Link>
)) :
'loading'}
</div>
</>
);
}
/**
* load all available tags from db.
*/
loadTags(): void {
callAPI<TagType[]>('tags.php', {action: 'getAllTags'}, result => {
this.setState({loadedtags: result});
this.props.setSubTitle(result.length + ' different Tags');
});
}
}
export default TagView;

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

@@ -1,142 +0,0 @@
import React from 'react';
import SideBar, {SideBarItem, SideBarTitle} from '../../elements/SideBar/SideBar';
import Tag from '../../elements/Tag/Tag';
import VideoContainer from '../../elements/VideoContainer/VideoContainer';
import style from './HomePage.module.css';
import PageTitle, {Line} from '../../elements/PageTitle/PageTitle';
import {callAPI} from '../../utils/Api';
/**
* The home page component showing on the initial pageload
*/
class HomePage extends React.Component {
/** keyword variable needed temporary store search keyword */
keyword = '';
constructor(props, context) {
super(props, context);
this.state = {
sideinfo: {
videonr: null,
fullhdvideonr: null,
hdvideonr: null,
sdvideonr: null,
tagnr: null
},
subtitle: 'All Videos',
data: [],
selectionnr: 0
};
}
componentDidMount() {
// initial get of all videos
this.fetchVideoData('All');
this.fetchStartData();
}
/**
* fetch available videos for specified tag
* this function clears all preview elements an reloads gravity with tag
*
* @param tag tag to fetch videos
*/
fetchVideoData(tag) {
callAPI('video.php', {action: 'getMovies', tag: tag}, (result) => {
this.setState({
data: []
});
this.setState({
data: result,
selectionnr: result.length,
tag: tag + ' Videos'
});
});
}
/**
* fetch the necessary data for left info box
*/
fetchStartData() {
callAPI('video.php', {action: 'getStartData'}, (result) => {
this.setState({
sideinfo: {
videonr: result['total'],
fullhdvideonr: result['fullhd'],
hdvideonr: result['hd'],
sdvideonr: result['sd'],
tagnr: result['tags']
}
});
});
}
/**
* search for a keyword in db and update previews
*
* @param keyword The keyword to search for
*/
searchVideos(keyword) {
console.log('search called');
callAPI('video.php', {action: 'getSearchKeyWord', keyword: keyword}, (result) => {
this.setState({
data: []
});
this.setState({
data: result,
selectionnr: result.length,
tag: 'Search result: ' + keyword
});
});
}
render() {
return (
<>
<PageTitle
title='Home Page'
subtitle={this.state.subtitle + ' - ' + this.state.selectionnr}>
<form className={'form-inline ' + style.searchform} onSubmit={(e) => {
e.preventDefault();
this.searchVideos(this.keyword);
}}>
<input data-testid='searchtextfield' className='form-control mr-sm-2'
type='text' placeholder='Search'
onChange={(e) => {
this.keyword = e.target.value;
}}/>
<button data-testid='searchbtnsubmit' className='btn btn-success' type='submit'>Search</button>
</form>
</PageTitle>
<SideBar>
<SideBarTitle>Infos:</SideBarTitle>
<Line/>
<SideBarItem><b>{this.state.sideinfo.videonr}</b> Videos Total!</SideBarItem>
<SideBarItem><b>{this.state.sideinfo.fullhdvideonr}</b> FULL-HD Videos!</SideBarItem>
<SideBarItem><b>{this.state.sideinfo.hdvideonr}</b> HD Videos!</SideBarItem>
<SideBarItem><b>{this.state.sideinfo.sdvideonr}</b> SD Videos!</SideBarItem>
<SideBarItem><b>{this.state.sideinfo.tagnr}</b> different Tags!</SideBarItem>
<Line/>
<SideBarTitle>Default Tags:</SideBarTitle>
<Tag onclick={() => this.fetchVideoData('All')}>All</Tag>
<Tag onclick={() => this.fetchVideoData('FullHd')}>FullHd</Tag>
<Tag onclick={() => this.fetchVideoData('LowQuality')}>LowQuality</Tag>
<Tag onclick={() => this.fetchVideoData('HD')}>HD</Tag>
</SideBar>
{this.state.data.length !== 0 ?
<VideoContainer
data={this.state.data}/> :
<div>No Data found!</div>}
<div className={style.rightinfo}>
</div>
</>
);
}
}
export default HomePage;

40
src/pages/HomePage/HomePage.test.js
View File

@@ -1,7 +1,8 @@
import {shallow} from 'enzyme';
import React from 'react';
import HomePage from './HomePage';
import {HomePage} from './HomePage';
import VideoContainer from '../../elements/VideoContainer/VideoContainer';
import {SearchHandling} from './SearchHandling';
describe('<HomePage/>', function () {
it('renders without crashing ', function () {
@@ -54,23 +55,15 @@ describe('<HomePage/>', function () {
});
});
it('test form submit', done => {
global.fetch = global.prepareFetchApi([{}, {}]);
it('test form submit', () => {
const func = jest.fn();
const wrapper = shallow(<HomePage/>);
wrapper.setProps({history: {push: () => func()}});
const fakeEvent = {preventDefault: () => console.log('preventDefault')};
wrapper.find('.searchform').simulate('submit', fakeEvent);
expect(wrapper.state().selectionnr).toBe(0);
process.nextTick(() => {
// state to be set correctly with response
expect(wrapper.state().selectionnr).toBe(2);
global.fetch.mockClear();
done();
});
expect(func).toHaveBeenCalledTimes(1);
});
it('test no backend connection behaviour', done => {
@@ -123,3 +116,24 @@ describe('<HomePage/>', function () {
testBtn(tags.first());
});
});
describe('<SearchHandling/>', () => {
it('renders without crashing', function () {
const wrapper = shallow(<SearchHandling match={{params: {name: 'testname'}}}/>);
wrapper.unmount();
});
it('renders videos correctly into container', function () {
const wrapper = shallow(<SearchHandling match={{params: {name: 'testname'}}}/>);
wrapper.setState({
data: [{
movie_id: 42,
movie_name: 'testname'
}]
});
// expect video container to be visible
expect(wrapper.find('VideoContainer')).toHaveLength(1);
});
});

156
src/pages/HomePage/HomePage.tsx Normal file
View File

@@ -0,0 +1,156 @@
import React from 'react';
import SideBar, {SideBarItem, SideBarTitle} from '../../elements/SideBar/SideBar';
import Tag from '../../elements/Tag/Tag';
import VideoContainer from '../../elements/VideoContainer/VideoContainer';
import style from './HomePage.module.css';
import PageTitle, {Line} from '../../elements/PageTitle/PageTitle';
import {callAPI} from '../../utils/Api';
import {Route, Switch, withRouter} from 'react-router-dom';
import {VideoUnloadedType} from '../../api/VideoTypes';
import {RouteComponentProps} from 'react-router';
import SearchHandling from './SearchHandling';
interface props extends RouteComponentProps {}
interface state {
sideinfo: {
videonr: number,
fullhdvideonr: number,
hdvideonr: number,
sdvideonr: number,
tagnr: number
},
subtitle: string,
data: VideoUnloadedType[],
selectionnr: number
}
interface startDataData {
total: number;
fullhd: number;
hd: number;
sd: number;
tags: number;
}
/**
* The home page component showing on the initial pageload
*/
export class HomePage extends React.Component<props, state> {
/** keyword variable needed temporary store search keyword */
keyword = '';
constructor(props: props) {
super(props);
this.state = {
sideinfo: {
videonr: 0,
fullhdvideonr: 0,
hdvideonr: 0,
sdvideonr: 0,
tagnr: 0
},
subtitle: 'All Videos',
data: [],
selectionnr: 0
};
}
componentDidMount(): void {
// initial get of all videos
this.fetchVideoData('All');
this.fetchStartData();
}
/**
* fetch available videos for specified tag
* this function clears all preview elements an reloads gravity with tag
*
* @param tag tag to fetch videos
*/
fetchVideoData(tag: string): void {
callAPI('video.php', {action: 'getMovies', tag: tag}, (result: VideoUnloadedType[]) => {
this.setState({
data: []
});
this.setState({
data: result,
selectionnr: result.length,
subtitle: `${tag} Videos`
});
});
}
/**
* fetch the necessary data for left info box
*/
fetchStartData(): void {
callAPI('video.php', {action: 'getStartData'}, (result: startDataData) => {
this.setState({
sideinfo: {
videonr: result['total'],
fullhdvideonr: result['fullhd'],
hdvideonr: result['hd'],
sdvideonr: result['sd'],
tagnr: result['tags']
}
});
});
}
render(): JSX.Element {
return (
<>
<Switch>
<Route path='/search/:name'>
<SearchHandling/>
</Route>
<Route path='/'>
<PageTitle
title='Home Page'
subtitle={this.state.subtitle + ' - ' + this.state.selectionnr}>
<form className={'form-inline ' + style.searchform} onSubmit={(e): void => {
e.preventDefault();
this.props.history.push('/search/' + this.keyword);
}}>
<input data-testid='searchtextfield' className='form-control mr-sm-2'
type='text' placeholder='Search'
onChange={(e): void => {
this.keyword = e.target.value;
}}/>
<button data-testid='searchbtnsubmit' className='btn btn-success' type='submit'>Search</button>
</form>
</PageTitle>
<SideBar>
<SideBarTitle>Infos:</SideBarTitle>
<Line/>
<SideBarItem><b>{this.state.sideinfo.videonr}</b> Videos Total!</SideBarItem>
<SideBarItem><b>{this.state.sideinfo.fullhdvideonr}</b> FULL-HD Videos!</SideBarItem>
<SideBarItem><b>{this.state.sideinfo.hdvideonr}</b> HD Videos!</SideBarItem>
<SideBarItem><b>{this.state.sideinfo.sdvideonr}</b> SD Videos!</SideBarItem>
<SideBarItem><b>{this.state.sideinfo.tagnr}</b> different Tags!</SideBarItem>
<Line/>
<SideBarTitle>Default Tags:</SideBarTitle>
<Tag tagInfo={{tag_name: 'All', tag_id: -1}} onclick={(): void => this.fetchVideoData('All')}/>
<Tag tagInfo={{tag_name: 'FullHd', tag_id: -1}} onclick={(): void => this.fetchVideoData('FullHd')}/>
<Tag tagInfo={{tag_name: 'LowQuality', tag_id: -1}} onclick={(): void => this.fetchVideoData('LowQuality')}/>
<Tag tagInfo={{tag_name: 'HD', tag_id: -1}} onclick={(): void => this.fetchVideoData('HD')}/>
</SideBar>
{this.state.data.length !== 0 ?
<VideoContainer
data={this.state.data}/> :
<div>No Data found!</div>}
<div className={style.rightinfo}>
</div>
</Route>
</Switch>
</>
);
}
}
export default withRouter(HomePage);

70
src/pages/HomePage/SearchHandling.tsx Normal file
View File

@@ -0,0 +1,70 @@
import {RouteComponentProps} from 'react-router';
import React from 'react';
import {withRouter} from 'react-router-dom';
import {callAPI} from '../../utils/Api';
import {VideoUnloadedType} from '../../api/VideoTypes';
import VideoContainer from '../../elements/VideoContainer/VideoContainer';
import PageTitle from '../../elements/PageTitle/PageTitle';
import SideBar from '../../elements/SideBar/SideBar';
interface params {
name: string;
}
interface props extends RouteComponentProps<params> {}
interface state {
data: VideoUnloadedType[];
}
export class SearchHandling extends React.Component<props, state> {
constructor(props: props) {
super(props);
this.state = {
data: []
};
}
componentDidMount(): void {
this.searchVideos(this.props.match.params.name);
}
render(): JSX.Element {
return (
<>
<PageTitle title='Search' subtitle={this.props.match.params.name + ': ' + this.state.data.length}/>
<SideBar hiddenFrame/>
{this.getVideoData()}
</>
);
}
/**
* get videocontainer if data loaded
*/
getVideoData(): JSX.Element {
if (this.state.data.length !== 0) {
return (
<VideoContainer data={this.state.data}/>
);
} else {
return (<div>No Data found!</div>);
}
}
/**
* search for a keyword in db and update previews
*
* @param keyword The keyword to search for
*/
searchVideos(keyword: string): void {
callAPI('video.php', {action: 'getSearchKeyWord', keyword: keyword}, (result: VideoUnloadedType[]) => {
this.setState({
data: result
});
});
}
}
export default withRouter(SearchHandling);

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

@@ -24,24 +24,16 @@
margin-top: 13px;
}
.button {
border-radius: 5px;
border-width: 0;
color: white;
margin-right: 15px;
padding: 6px;
}
.actorAddTile {
color: white;
cursor: pointer;
float: left;
padding-left: 25px;
padding-top: 50px;
cursor: pointer;
color: white;
transition: opacity ease 0.5s;
}
.actorAddTile:hover{
.actorAddTile:hover {
opacity: 0.7;
transition: opacity ease 0.5s;
}

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

@@ -1,16 +1,22 @@
import {shallow} from 'enzyme';
import React from 'react';
import Player from './Player';
import {Player} from './Player';
import {callAPI} from '../../utils/Api';
describe('<Player/>', function () {
// help simulating id passed by url
function instance() {
return shallow(<Player match={{params: {id: 10}}}/>);
}
it('renders without crashing ', function () {
const wrapper = shallow(<Player/>);
const wrapper = instance();
wrapper.unmount();
});
it('plyr insertion', function () {
const wrapper = shallow(<Player/>);
const wrapper = instance();
wrapper.setState({
sources: [
@@ -26,11 +32,11 @@ describe('<Player/>', function () {
});
function simulateLikeButtonClick() {
const wrapper = shallow(<Player/>);
const wrapper = instance();
// initial fetch for getting movie data
expect(global.fetch).toHaveBeenCalledTimes(1);
wrapper.find('.videoactions').find('button').first().simulate('click');
wrapper.find('.videoactions').find('Button').first().simulate('click');
// fetch for liking
expect(global.fetch).toHaveBeenCalledTimes(2);
@@ -70,28 +76,28 @@ describe('<Player/>', function () {
});
it('show tag popup', function () {
const wrapper = shallow(<Player/>);
const wrapper = instance();
expect(wrapper.find('AddTagPopup')).toHaveLength(0);
// todo dynamic button find without index
wrapper.find('.videoactions').find('button').at(1).simulate('click');
wrapper.find('.videoactions').find('Button').at(1).simulate('click');
// addtagpopup should be showing now
expect(wrapper.find('AddTagPopup')).toHaveLength(1);
});
it('test delete button', done => {
const wrapper = shallow(<Player/>);
const wrapper = instance();
const func = jest.fn();
prepareViewBinding(func);
wrapper.setProps({history: {goBack: jest.fn()}});
global.fetch = prepareFetchApi({result: 'success'});
wrapper.find('.videoactions').find('button').at(2).simulate('click');
wrapper.find('.videoactions').find('Button').at(2).simulate('click');
process.nextTick(() => {
// refetch is called so fetch called 3 times
expect(global.fetch).toHaveBeenCalledTimes(1);
expect(func).toHaveBeenCalledTimes(1);
expect(wrapper.instance().props.history.goBack).toHaveBeenCalledTimes(1);
global.fetch.mockClear();
done();
@@ -99,19 +105,20 @@ describe('<Player/>', function () {
});
it('hide click ', function () {
const wrapper = shallow(<Player/>);
const wrapper = instance();
const func = jest.fn();
prepareViewBinding(func);
wrapper.setProps({history: {goBack: func}});
expect(func).toHaveBeenCalledTimes(0);
wrapper.find('.closebutton').simulate('click');
// addtagpopup should be showing now
// backstack should be popped once
expect(func).toHaveBeenCalledTimes(1);
});
it('inserts Tags correctly', function () {
const wrapper = shallow(<Player/>);
const wrapper = instance();
expect(wrapper.find('Tag')).toHaveLength(0);
@@ -165,7 +172,7 @@ describe('<Player/>', function () {
});
it('showspopups correctly', function () {
const wrapper = shallow(<Player/>);
const wrapper = instance();
wrapper.setState({popupvisible: true}, () => {
// is the AddTagpopu rendered?
@@ -180,13 +187,13 @@ describe('<Player/>', function () {
it('quickadd tag correctly', function () {
const wrapper = shallow(<Player/>);
const wrapper = instance();
global.callAPIMock({result: 'success'});
wrapper.setState({suggesttag: [{tag_name: 'test', tag_id: 1}]}, () => {
// mock funtion should have not been called
expect(callAPI).toBeCalledTimes(0);
wrapper.find('Tag').findWhere(p => p.text() === 'test').parent().dive().simulate('click');
wrapper.find('Tag').findWhere(p => p.props().tagInfo.tag_name === 'test').dive().simulate('click');
// mock function should have been called once
expect(callAPI).toBeCalledTimes(1);
@@ -198,13 +205,13 @@ describe('<Player/>', function () {
});
it('test adding of already existing tag', function () {
const wrapper = shallow(<Player/>);
const wrapper = instance();
global.callAPIMock({result: 'success'});
wrapper.setState({suggesttag: [{tag_name: 'test', tag_id: 1}], tags: [{tag_name: 'test', tag_id: 1}]}, () => {
// mock funtion should have not been called
expect(callAPI).toBeCalledTimes(0);
wrapper.find('Tag').findWhere(p => p.text() === 'test').last().parent().dive().simulate('click');
wrapper.find('Tag').findWhere(p => p.props().tagInfo.tag_name === 'test').last().dive().simulate('click');
// mock function should have been called once
expect(callAPI).toBeCalledTimes(1);
@@ -217,7 +224,7 @@ describe('<Player/>', function () {
});
function generatetag() {
const wrapper = shallow(<Player/>);
const wrapper = instance();
expect(wrapper.find('Tag')).toHaveLength(0);
@@ -233,7 +240,7 @@ describe('<Player/>', function () {
}
it('test addactor popup showing', function () {
const wrapper = shallow(<Player/>);
const wrapper = instance();
expect(wrapper.find('AddActorPopup')).toHaveLength(0);
@@ -244,7 +251,7 @@ describe('<Player/>', function () {
});
it('test hiding of addactor popup', function () {
const wrapper = shallow(<Player/>);
const wrapper = instance();
wrapper.instance().addActor();
expect(wrapper.find('AddActorPopup')).toHaveLength(1);
@@ -253,4 +260,36 @@ describe('<Player/>', function () {
expect(wrapper.find('AddActorPopup')).toHaveLength(0);
});
it('test addtagpopup hiding', function () {
const wrapper = instance();
wrapper.setState({popupvisible: true});
expect(wrapper.find('AddTagPopup')).toHaveLength(1);
wrapper.find('AddTagPopup').props().onHide();
expect(wrapper.find('AddTagPopup')).toHaveLength(0);
});
it('test insertion of actor tiles', function () {
const wrapper = instance();
wrapper.setState({
actors: [{
thumbnail: '',
name: 'testname',
actor_id: 42
}]
});
expect(wrapper.find('ActorTile')).toHaveLength(1);
});
it('test Addactor button', function () {
const wrapper = instance();
expect(wrapper.state().actorpopupvisible).toBe(false);
wrapper.find('.actorAddTile').simulate('click');
expect(wrapper.state().actorpopupvisible).toBe(true);
});
});

301
src/pages/Player/Player.js → src/pages/Player/Player.tsx
View File

@@ -12,16 +12,36 @@ 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 '../../utils/GlobalInfos';
import {withRouter} from 'react-router-dom';
import {callAPI, getBackendDomain} from '../../utils/Api';
import {RouteComponentProps} from 'react-router';
import {GeneralSuccess} from '../../api/GeneralTypes';
import {ActorType, loadVideoType, TagType} from '../../api/VideoTypes';
import PlyrJS from 'plyr';
import {Button} from '../../elements/GPElements/Button';
interface myprops extends RouteComponentProps<{ id: string }> {}
interface mystate {
sources?: PlyrJS.SourceInfo,
movie_id: number,
movie_name: string,
likes: number,
quality: number,
length: number,
tags: TagType[],
suggesttag: TagType[],
popupvisible: boolean,
actorpopupvisible: boolean,
actors: ActorType[]
}
/**
* Player page loads when a video is selected to play and handles the video view
* and actions such as tag adding and liking
*/
class Player extends React.Component {
options = {
export class Player extends React.Component<myprops, mystate> {
options: PlyrJS.Options = {
controls: [
'play-large', // The large play button in the center
'play', // Play/pause playback
@@ -38,130 +58,31 @@ class Player extends React.Component {
]
};
constructor(props, context) {
super(props, context);
constructor(props: myprops) {
super(props);
this.state = {
sources: null,
movie_id: null,
movie_name: null,
likes: null,
quality: null,
length: null,
movie_id: -1,
movie_name: '',
likes: 0,
quality: 0,
length: 0,
tags: [],
suggesttag: [],
popupvisible: false,
actorpopupvisible: false
actorpopupvisible: false,
actors: []
};
this.quickAddTag = this.quickAddTag.bind(this);
}
componentDidMount() {
componentDidMount(): void {
// initial fetch of current movie data
this.fetchMovieData();
}
/**
* quick add callback to add tag to db and change gui correctly
* @param tagId id of tag to add
* @param tagName name of tag to add
*/
quickAddTag(tagId, tagName) {
callAPI('tags.php', {action: 'addTag', id: tagId, movieid: this.props.movie_id}, (result) => {
if (result.result !== 'success') {
console.error('error occured while writing to db -- todo error handling');
console.error(result.result);
} else {
// check if tag has already been added
const tagIndex = this.state.tags.map(function (e) {
return e.tag_name;
}).indexOf(tagName);
// only add tag if it isn't already there
if (tagIndex === -1) {
// update tags if successful
let array = [...this.state.suggesttag]; // make a separate copy of the array (because of setState)
const quickaddindex = this.state.suggesttag.map(function (e) {
return e.tag_id;
}).indexOf(tagId);
// check if tag is available in quickadds
if (quickaddindex !== -1) {
array.splice(quickaddindex, 1);
this.setState({
tags: [...this.state.tags, {tag_name: tagName}],
suggesttag: array
});
} else {
this.setState({
tags: [...this.state.tags, {tag_name: tagName}]
});
}
}
}
});
}
/**
* handle the popovers generated according to state changes
* @returns {JSX.Element}
*/
handlePopOvers() {
return (
<>
{this.state.popupvisible ?
<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
}
</>
);
}
/**
* generate sidebar with all items
*/
assembleSideBar() {
return (
<SideBar>
<SideBarTitle>Infos:</SideBarTitle>
<Line/>
<SideBarItem><b>{this.state.likes}</b> Likes!</SideBarItem>
{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}
<Line/>
<SideBarTitle>Tags:</SideBarTitle>
{this.state.tags.map((m) => (
<Tag key={m.tag_name}>{m.tag_name}</Tag>
))}
<Line/>
<SideBarTitle>Tag Quickadd:</SideBarTitle>
{this.state.suggesttag.map((m) => (
<Tag
key={m.tag_name}
onclick={() => {
this.quickAddTag(m.tag_id, m.tag_name);
}}>
{m.tag_name}
</Tag>
))}
</SideBar>
);
}
render() {
render(): JSX.Element {
return (
<div id='videocontainer'>
<PageTitle
@@ -178,25 +99,18 @@ 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: '#3574fe'}} onClick={() => this.setState({popupvisible: true})}>
Give this Video a Tag
</button>
<button className={style.button} style={{backgroundColor: 'red'}} onClick={() => {
this.deleteVideo();
}}>Delete Video
</button>
<Button onClick={(): void => this.likebtn()} title='Like this Video!' color={{backgroundColor: 'green'}}/>
<Button onClick={(): void => this.setState({popupvisible: true})} title='Give this Video a Tag' color={{backgroundColor: '#3574fe'}}/>
<Button title='Delete Video' onClick={(): void => {this.deleteVideo();}} color={{backgroundColor: 'red'}}/>
</div>
{/* rendering of actor tiles */}
<div className={style.actorcontainer}>
{this.state.actors ?
this.state.actors.map((actr) => (
this.state.actors.map((actr: ActorType) => (
<ActorTile actor={actr}/>
)) : <></>
}
<div className={style.actorAddTile} onClick={() => {
<div className={style.actorAddTile} onClick={(): void => {
this.addActor();
}}>
<div className={style.actorAddTile_thumbnail}>
@@ -208,7 +122,7 @@ class Player extends React.Component {
</div>
</div>
</div>
<button className={style.closebutton} onClick={() => this.closebtn()}>Close</button>
<button className={style.closebutton} onClick={(): void => this.closebtn()}>Close</button>
{
// handle the popovers switched on and off according to state changes
this.handlePopOvers()
@@ -217,11 +131,115 @@ class Player extends React.Component {
);
}
/**
* generate sidebar with all items
*/
assembleSideBar(): JSX.Element {
return (
<SideBar>
<SideBarTitle>Infos:</SideBarTitle>
<Line/>
<SideBarItem><b>{this.state.likes}</b> Likes!</SideBarItem>
{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}
<Line/>
<SideBarTitle>Tags:</SideBarTitle>
{this.state.tags.map((m: TagType) => (
<Tag tagInfo={m}/>
))}
<Line/>
<SideBarTitle>Tag Quickadd:</SideBarTitle>
{this.state.suggesttag.map((m: TagType) => (
<Tag
tagInfo={m}
key={m.tag_name}
onclick={(): void => {
this.quickAddTag(m.tag_id, m.tag_name);
}}/>
))}
</SideBar>
);
}
/**
* quick add callback to add tag to db and change gui correctly
* @param tagId id of tag to add
* @param tagName name of tag to add
*/
quickAddTag(tagId: number, tagName: string): void {
callAPI('tags.php', {
action: 'addTag',
id: tagId,
movieid: this.props.match.params.id
}, (result: GeneralSuccess) => {
if (result.result !== 'success') {
console.error('error occured while writing to db -- todo error handling');
console.error(result.result);
} else {
// check if tag has already been added
const tagIndex = this.state.tags.map(function (e: TagType) {
return e.tag_name;
}).indexOf(tagName);
// only add tag if it isn't already there
if (tagIndex === -1) {
// update tags if successful
let array = [...this.state.suggesttag]; // make a separate copy of the array (because of setState)
const quickaddindex = this.state.suggesttag.map(function (e: TagType) {
return e.tag_id;
}).indexOf(tagId);
// check if tag is available in quickadds
if (quickaddindex !== -1) {
array.splice(quickaddindex, 1);
this.setState({
tags: [...this.state.tags, {tag_name: tagName, tag_id: tagId}],
suggesttag: array
});
} else {
this.setState({
tags: [...this.state.tags, {tag_name: tagName, tag_id: tagId}]
});
}
}
}
});
}
/**
* handle the popovers generated according to state changes
* @returns {JSX.Element}
*/
handlePopOvers(): JSX.Element {
return (
<>
{this.state.popupvisible ?
<AddTagPopup onHide={(): void => {
this.setState({popupvisible: false});
}}
submit={this.quickAddTag}
movie_id={this.state.movie_id}/> :
null
}
{
this.state.actorpopupvisible ?
<AddActorPopup onHide={(): void => {
this.refetchActors();
this.setState({actorpopupvisible: false});
}} movie_id={this.state.movie_id}/> : null
}
</>
);
}
/**
* fetch all the required infos of a video from backend
*/
fetchMovieData() {
callAPI('video.php', {action: 'loadVideo', movieid: this.props.movie_id}, result => {
fetchMovieData(): void {
callAPI('video.php', {action: 'loadVideo', movieid: this.props.match.params.id}, (result: loadVideoType) => {
this.setState({
sources: {
type: 'video',
@@ -243,7 +261,6 @@ class Player extends React.Component {
suggesttag: result.suggesttag,
actors: result.actors
});
console.log(this.state);
});
}
@@ -251,8 +268,8 @@ class Player extends React.Component {
/**
* click handler for the like btn
*/
likebtn() {
callAPI('video.php', {action: 'addLike', movieid: this.props.movie_id}, result => {
likebtn(): void {
callAPI('video.php', {action: 'addLike', movieid: this.props.match.params.id}, (result: GeneralSuccess) => {
if (result.result === 'success') {
// likes +1 --> avoid reload of all data
this.setState({likes: this.state.likes + 1});
@@ -267,18 +284,18 @@ class Player extends React.Component {
* closebtn click handler
* calls callback to viewbinding to show previous page agains
*/
closebtn() {
GlobalInfos.getViewBinding().returnToLastElement();
closebtn(): void {
this.props.history.goBack();
}
/**
* delete the current video and return to last page
*/
deleteVideo() {
callAPI('video.php', {action: 'deleteVideo', movieid: this.props.movie_id}, result => {
deleteVideo(): void {
callAPI('video.php', {action: 'deleteVideo', movieid: this.props.match.params.id}, (result: GeneralSuccess) => {
if (result.result === 'success') {
// return to last element if successful
GlobalInfos.getViewBinding().returnToLastElement();
this.props.history.goBack();
} else {
console.error('an error occured while liking');
console.error(result);
@@ -289,15 +306,19 @@ class Player extends React.Component {
/**
* show the actor add popup
*/
addActor() {
addActor(): void {
this.setState({actorpopupvisible: true});
}
refetchActors() {
callAPI('actor.php', {action: 'getActorsOfVideo', videoid: this.props.movie_id}, result => {
/**
* fetch the available video actors again
*/
refetchActors(): void {
callAPI<ActorType[]>('actor.php', {action: 'getActorsOfVideo', videoid: this.props.match.params.id}, result => {
this.setState({actors: result});
});
}
}
export default Player;
export default withRouter(Player);

31
src/pages/RandomPage/RandomPage.js → src/pages/RandomPage/RandomPage.tsx
View File

@@ -5,13 +5,24 @@ import Tag from '../../elements/Tag/Tag';
import PageTitle from '../../elements/PageTitle/PageTitle';
import VideoContainer from '../../elements/VideoContainer/VideoContainer';
import {callAPI} from '../../utils/Api';
import {TagType, VideoUnloadedType} from '../../api/VideoTypes';
interface state {
videos: VideoUnloadedType[];
tags: TagType[];
}
interface GetRandomMoviesType {
rows: VideoUnloadedType[];
tags: TagType[];
}
/**
* Randompage shuffles random viedeopreviews and provides a shuffle btn
*/
class RandomPage extends React.Component {
constructor(props, context) {
super(props, context);
class RandomPage extends React.Component<{}, state> {
constructor(props: {}) {
super(props);
this.state = {
videos: [],
@@ -19,11 +30,11 @@ class RandomPage extends React.Component {
};
}
componentDidMount() {
componentDidMount(): void {
this.loadShuffledvideos(4);
}
render() {
render(): JSX.Element {
return (
<div>
<PageTitle title='Random Videos'
@@ -32,7 +43,7 @@ class RandomPage extends React.Component {
<SideBar>
<SideBarTitle>Visible Tags:</SideBarTitle>
{this.state.tags.map((m) => (
<Tag key={m.tag_name}>{m.tag_name}</Tag>
<Tag key={m.tag_id} tagInfo={m}/>
))}
</SideBar>
@@ -40,7 +51,7 @@ class RandomPage extends React.Component {
<VideoContainer
data={this.state.videos}>
<div className={style.Shufflebutton}>
<button onClick={() => this.shuffleclick()} className={style.btnshuffle}>Shuffle</button>
<button onClick={(): void => this.shuffleclick()} className={style.btnshuffle}>Shuffle</button>
</div>
</VideoContainer>
:
@@ -53,7 +64,7 @@ class RandomPage extends React.Component {
/**
* click handler for shuffle btn
*/
shuffleclick() {
shuffleclick(): void {
this.loadShuffledvideos(4);
}
@@ -61,8 +72,8 @@ class RandomPage extends React.Component {
* load random videos from backend
* @param nr number of videos to load
*/
loadShuffledvideos(nr) {
callAPI('video.php', {action: 'getRandomMovies', number: nr}, result => {
loadShuffledvideos(nr: number): void {
callAPI<GetRandomMoviesType>('video.php', {action: 'getRandomMovies', number: nr}, result => {
console.log(result);
this.setState({videos: []}); // needed to trigger rerender of main videoview

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

@@ -8,7 +8,7 @@
width: 40%;
}
.customapiform{
.customapiform {
margin-top: 15px;
width: 40%;
}

14
src/pages/SettingsPage/GeneralSettings.test.js
View File

@@ -29,6 +29,13 @@ describe('<GeneralSettings/>', function () {
it('test savesettings', done => {
const wrapper = shallow(<GeneralSettings/>);
wrapper.setState({
passwordsupport: true,
videopath: '',
tvshowpath: '',
mediacentername: '',
tmdbsupport: true
});
global.fetch = global.prepareFetchApi({success: true});
@@ -47,6 +54,13 @@ describe('<GeneralSettings/>', function () {
it('test failing savesettings', done => {
const wrapper = shallow(<GeneralSettings/>);
wrapper.setState({
passwordsupport: true,
videopath: '',
tvshowpath: '',
mediacentername: '',
tmdbsupport: true
});
global.fetch = global.prepareFetchApi({success: false});

1
src/pages/SettingsPage/SettingsPage.module.css
View File

@@ -26,6 +26,7 @@
.SettingSidebarElement {
background-color: #919fd9;
border-radius: 7px;
color: black;
font-weight: bold;
margin: 10px 5px 5px;
padding: 5px;

30
src/pages/SettingsPage/SettingsPage.test.js
View File

@@ -7,34 +7,4 @@ describe('<RandomPage/>', function () {
const wrapper = shallow(<SettingsPage/>);
wrapper.unmount();
});
it('simulate topic clicka', function () {
const wrapper = shallow(<SettingsPage/>);
simulateSideBarClick('General', wrapper);
expect(wrapper.state().currentpage).toBe('general');
expect(wrapper.find('.SettingsContent').find('GeneralSettings')).toHaveLength(1);
simulateSideBarClick('Movies', wrapper);
expect(wrapper.state().currentpage).toBe('movies');
expect(wrapper.find('.SettingsContent').find('MovieSettings')).toHaveLength(1);
simulateSideBarClick('TV Shows', wrapper);
expect(wrapper.state().currentpage).toBe('tv');
expect(wrapper.find('.SettingsContent').find('span')).toHaveLength(1);
});
function simulateSideBarClick(name, wrapper) {
wrapper.find('.SettingSidebarElement').findWhere(it =>
it.text() === name &&
it.type() === 'div').simulate('click');
}
it('simulate unknown topic', function () {
const wrapper = shallow(<SettingsPage/>);
wrapper.setState({currentpage: 'unknown'});
expect(wrapper.find('.SettingsContent').text()).toBe('unknown button clicked');
});
});

67
src/pages/SettingsPage/SettingsPage.tsx
View File

@@ -3,59 +3,44 @@ import MovieSettings from './MovieSettings';
import GeneralSettings from './GeneralSettings';
import style from './SettingsPage.module.css';
import GlobalInfos from '../../utils/GlobalInfos';
type SettingsPageState = {
currentpage: string
}
import {NavLink, Redirect, Route, Switch} from 'react-router-dom';
/**
* The Settingspage handles all kinds of settings for the mediacenter
* and is basically a wrapper for child-tabs
*/
class SettingsPage extends React.Component<{}, SettingsPageState> {
constructor(props: Readonly<{}> | {}, context?: any) {
super(props, context);
this.state = {
currentpage: 'general'
};
}
/**
* load the selected tab
* @returns {JSX.Element|string} the jsx element of the selected tab
*/
getContent(): JSX.Element | string {
switch (this.state.currentpage) {
case 'general':
return <GeneralSettings/>;
case 'movies':
return <MovieSettings/>;
case 'tv':
return <span/>; // todo this page
default:
return 'unknown button clicked';
}
}
render() : JSX.Element {
class SettingsPage extends React.Component {
render(): JSX.Element {
const themestyle = GlobalInfos.getThemeStyle();
return (
<div>
<div className={style.SettingsSidebar + ' ' + themestyle.secbackground}>
<div className={style.SettingsSidebarTitle + ' ' + themestyle.lighttextcolor}>Settings</div>
<div onClick={() => this.setState({currentpage: 'general'})}
className={style.SettingSidebarElement}>General
</div>
<div onClick={() => this.setState({currentpage: 'movies'})}
className={style.SettingSidebarElement}>Movies
</div>
<div onClick={() => this.setState({currentpage: 'tv'})}
className={style.SettingSidebarElement}>TV Shows
</div>
<NavLink to='/settings/general'>
<div className={style.SettingSidebarElement}>General</div>
</NavLink>
<NavLink to='/settings/movies'>
<div className={style.SettingSidebarElement}>Movies</div>
</NavLink>
<NavLink to='/settings/tv'>
<div className={style.SettingSidebarElement}>TV Shows</div>
</NavLink>
</div>
<div className={style.SettingsContent}>
{this.getContent()}
<Switch>
<Route path="/settings/general">
<GeneralSettings/>
</Route>
<Route path="/settings/movies">
<MovieSettings/>
</Route>
<Route path="/settings/tv">
<span/>
</Route>
<Route path="/settings">
<Redirect to='/settings/general'/>
</Route>
</Switch>
</div>
</div>
);

14
src/setupTests.js
View File

@@ -42,24 +42,24 @@ global.prepareViewBinding = (func) => {
return {
changeRootElement: func,
returnToLastElement: func
}
};
};
}
};
global.callAPIMock = (resonse) => {
const helpers = require("./utils/Api");
helpers.callAPI = jest.fn().mockImplementation((_, __, func1) => {func1(resonse)});
}
const helpers = require('./utils/Api');
helpers.callAPI = jest.fn().mockImplementation((_, __, func1) => {func1(resonse);});
};
// code to run before each test
global.beforeEach(() => {
// empty fetch response implementation for each test
global.fetch = prepareFetchApi({});
// todo with callAPIMock
})
});
global.afterEach(() => {
// clear all mocks after each test
jest.resetAllMocks();
})
});

13
src/utils/Api.ts
View File

@@ -23,7 +23,7 @@ export function getBackendDomain(): string {
* set a custom backend domain
* @param domain a url in format [http://x.x.x.x/somanode]
*/
export function setCustomBackendDomain(domain: string) {
export function setCustomBackendDomain(domain: string): void {
customBackendURL = domain;
}
@@ -38,9 +38,9 @@ function getAPIDomain(): string {
* interface how an api request should look like
*/
interface ApiBaseRequest {
action: string,
action: string | number,
[_: string]: string
[_: string]: string | number
}
/**
@@ -51,7 +51,7 @@ function buildFormData(args: ApiBaseRequest): FormData {
const req = new FormData();
for (const i in args) {
req.append(i, args[i]);
req.append(i, (args[i].toString()));
}
return req;
}
@@ -63,8 +63,7 @@ function buildFormData(args: ApiBaseRequest): FormData {
* @param callback the callback with json reply from backend
* @param errorcallback a optional callback if an error occured
*/
export function callAPI(apinode: string, fd: ApiBaseRequest, callback: (_: object) => void, errorcallback: (_: object) => void = (_: object) => {
}): void {
export function callAPI<T>(apinode: string, fd: ApiBaseRequest, callback: (_: T) => void, errorcallback: (_: string) => void = (_: string): void => {}): void {
fetch(getAPIDomain() + apinode, {method: 'POST', body: buildFormData(fd)})
.then((response) => response.json()
.then((result) => {
@@ -78,7 +77,7 @@ export function callAPI(apinode: string, fd: ApiBaseRequest, callback: (_: objec
* @param fd the object to send to backend
* @param callback the callback with PLAIN text reply from backend
*/
export function callAPIPlain(apinode: string, fd: ApiBaseRequest, callback: (_: any) => void): void {
export function callAPIPlain(apinode: string, fd: ApiBaseRequest, callback: (_: string) => void): void {
fetch(getAPIDomain() + apinode, {method: 'POST', body: buildFormData(fd)})
.then((response) => response.text()
.then((result) => {

17
src/utils/GlobalInfos.js
View File

@@ -7,7 +7,6 @@ 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
@@ -32,22 +31,6 @@ 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();