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

use eslint to lint project

Browse Source 
drop code quality job
This commit is contained in:
Lukas Heiligenbrunner
2021-03-14 14:51:53 +00:00
parent ba2704b285
commit 1fc67365f0
42 changed files with 1614 additions and 843 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
src/App.tsx
View File

@ -17,7 +17,7 @@ import Player from './pages/Player/Player';
import ActorOverviewPage from './pages/ActorOverviewPage/ActorOverviewPage';
import ActorPage from './pages/ActorPage/ActorPage';
import {SettingsTypes} from './types/ApiTypes';
import AuthenticationPage from "./pages/AuthenticationPage/AuthenticationPage";
import AuthenticationPage from './pages/AuthenticationPage/AuthenticationPage';
interface state {
password: boolean | null; // null if uninitialized - true if pwd needed false if not needed
@ -39,13 +39,13 @@ class App extends React.Component<{}, state> {
} else {
refreshAPIToken((err) => {
if (err === 'invalid_client') {
this.setState({password: true})
this.setState({password: true});
} else if (err === '') {
this.setState({password: false})
this.setState({password: false});
} else {
console.log("unimplemented token error: " + err)
console.log('unimplemented token error: ' + err);
}
})
});
}
this.state = {
@ -56,33 +56,37 @@ class App extends React.Component<{}, state> {
GlobalInfos.onThemeChange(() => {
this.forceUpdate();
})
});
}
initialAPICall(): void {
// this is the first api call so if it fails we know there is no connection to backend
callApiUnsafe(APINode.Init, {action: 'loadInitialData'}, (result: SettingsTypes.initialApiCallData) => {
// set theme
GlobalInfos.enableDarkTheme(result.DarkMode);
callApiUnsafe(
APINode.Init,
{action: 'loadInitialData'},
(result: SettingsTypes.initialApiCallData) => {
// set theme
GlobalInfos.enableDarkTheme(result.DarkMode);
GlobalInfos.setVideoPath(result.VideoPath);
GlobalInfos.setVideoPath(result.VideoPath);
this.setState({
mediacentername: result.MediacenterName,
onapierror: false
});
// set tab title to received mediacenter name
document.title = result.MediacenterName;
}, error => {
this.setState({onapierror: true});
});
this.setState({
mediacentername: result.MediacenterName,
onapierror: false
});
// set tab title to received mediacenter name
document.title = result.MediacenterName;
},
() => {
this.setState({onapierror: true});
}
);
}
componentDidMount(): void {
this.initialAPICall();
}
render(): JSX.Element {
const themeStyle = GlobalInfos.getThemeStyle();
// add the main theme to the page body
@ -90,33 +94,52 @@ class App extends React.Component<{}, state> {
if (this.state.password === true) {
return (
<AuthenticationPage submit={(password): void => {
refreshAPIToken((error) => {
if (error !== '') {
console.log("wrong password!!!");
} else {
this.setState({password: false});
}
}, password);
}}/>
<AuthenticationPage
submit={(password): void => {
refreshAPIToken((error) => {
if (error !== '') {
console.log('wrong password!!!');
} else {
this.setState({password: false});
}
}, password);
}}
/>
);
} else if (this.state.password === false) {
return (
<Router>
<div className={style.app}>
<div
className={[style.navcontainer, themeStyle.backgroundcolor, themeStyle.textcolor, themeStyle.hrcolor].join(' ')}>
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={'/'}
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>
<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>
@ -124,33 +147,33 @@ class App extends React.Component<{}, state> {
</Router>
);
} else {
return (<>still loading...</>);
return <>still loading...</>;
}
}
routing(): JSX.Element {
return (
<Switch>
<Route path="/random">
<RandomPage/>
<Route path='/random'>
<RandomPage />
</Route>
<Route path="/categories">
<CategoryPage/>
<Route path='/categories'>
<CategoryPage />
</Route>
<Route path="/settings">
<SettingsPage/>
<Route path='/settings'>
<SettingsPage />
</Route>
<Route exact path="/player/:id">
<Player/>
<Route exact path='/player/:id'>
<Player />
</Route>
<Route exact path="/actors">
<ActorOverviewPage/>
<Route exact path='/actors'>
<ActorOverviewPage />
</Route>
<Route path="/actors/:id">
<ActorPage/>
<Route path='/actors/:id'>
<ActorPage />
</Route>
<Route path="/">
<HomePage/>
<Route path='/'>
<HomePage />
</Route>
</Switch>
);
@ -158,7 +181,7 @@ class App extends React.Component<{}, state> {
ApiError(): JSX.Element {
// on api error show popup and retry and show again if failing..
return (<NoBackendConnectionPopup onHide={(): void => this.initialAPICall()}/>);
return <NoBackendConnectionPopup onHide={(): void => this.initialAPICall()} />;
}
}

31
src/elements/ActorTile/ActorTile.tsx
View File

@ -5,13 +5,13 @@ import React from 'react';
import {Link} from 'react-router-dom';
import {ActorType} from '../../types/VideoTypes';
interface props {
interface Props {
actor: ActorType;
onClick?: (actor: ActorType) => void
onClick?: (actor: ActorType) => void;
}
class ActorTile extends React.Component<props> {
constructor(props: props) {
class ActorTile extends React.Component<Props> {
constructor(props: Props) {
super(props);
this.state = {};
@ -21,12 +21,7 @@ class ActorTile extends React.Component<props> {
if (this.props.onClick) {
return this.renderActorTile(this.props.onClick);
} else {
return (
<Link to={{pathname: '/actors/' + this.props.actor.ActorId}}>
{this.renderActorTile(() => {
})}
</Link>
);
return <Link to={{pathname: '/actors/' + this.props.actor.ActorId}}>{this.renderActorTile(() => {})}</Link>;
}
}
@ -34,9 +29,19 @@ class ActorTile extends React.Component<props> {
return (
<div className={style.actortile} onClick={(): void => customclickhandler(this.props.actor)}>
<div className={style.actortile_thumbnail}>
{this.props.actor.Thumbnail === '' ? <FontAwesomeIcon style={{
lineHeight: '130px'
}} icon={faUser} size='5x'/> : 'dfdf' /* todo render picture provided here! */}
{
this.props.actor.Thumbnail === '' ? (
<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>

98
src/elements/FilterButton/FilterButton.tsx
View File

@ -1,12 +1,12 @@
import React from "react";
import style from "../Popups/AddActorPopup/AddActorPopup.module.css";
import {Button} from "../GPElements/Button";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faFilter, faTimes} from "@fortawesome/free-solid-svg-icons";
import {addKeyHandler, removeKeyHandler} from "../../utils/ShortkeyHandler";
import React from 'react';
import style from '../Popups/AddActorPopup/AddActorPopup.module.css';
import {Button} from '../GPElements/Button';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faFilter, faTimes} from '@fortawesome/free-solid-svg-icons';
import {addKeyHandler, removeKeyHandler} from '../../utils/ShortkeyHandler';
interface props {
onFilterChange: (filter: string) => void
interface Props {
onFilterChange: (filter: string) => void;
}
interface state {
@ -14,18 +14,17 @@ interface state {
filter: string;
}
class FilterButton extends React.Component<props, state> {
class FilterButton extends React.Component<Props, state> {
// filterfield anchor, needed to focus after filter btn click
private filterfield: HTMLInputElement | null | undefined;
constructor(props: props) {
constructor(props: Props) {
super(props);
this.state = {
filtervisible: false,
filter: ''
}
};
this.keypress = this.keypress.bind(this);
this.enableFilterField = this.enableFilterField.bind(this);
@ -43,34 +42,57 @@ class FilterButton extends React.Component<props, state> {
if (this.state.filtervisible) {
return (
<>
<input className={'form-control mr-sm-2 ' + style.searchinput}
type='text' placeholder='Filter' value={this.state.filter}
onChange={(e): void => {
this.props.onFilterChange(e.target.value);
this.setState({filter: e.target.value});
}}
ref={(input): void => {
this.filterfield = input;
}}/>
<Button title={<FontAwesomeIcon style={{
verticalAlign: 'middle',
lineHeight: '130px'
}} icon={faTimes} size='1x'/>} color={{backgroundColor: 'red'}} onClick={(): void => {
this.setState({filter: '', filtervisible: false});
}}/>
<input
className={'form-control mr-sm-2 ' + style.searchinput}
type='text'
placeholder='Filter'
value={this.state.filter}
onChange={(e): void => {
this.props.onFilterChange(e.target.value);
this.setState({filter: e.target.value});
}}
ref={(input): void => {
this.filterfield = input;
}}
/>
<Button
title={
<FontAwesomeIcon
style={{
verticalAlign: 'middle',
lineHeight: '130px'
}}
icon={faTimes}
size='1x'
/>
}
color={{backgroundColor: 'red'}}
onClick={(): void => {
this.setState({filter: '', filtervisible: false});
}}
/>
</>
);
} else {
return (<Button
title={<span>Filter <FontAwesomeIcon
style={{
verticalAlign: 'middle',
lineHeight: '130px'
}}
icon={faFilter}
size='1x'/></span>}
color={{backgroundColor: 'cornflowerblue', color: 'white'}}
onClick={this.enableFilterField}/>)
return (
<Button
title={
<span>
Filter{' '}
<FontAwesomeIcon
style={{
verticalAlign: 'middle',
lineHeight: '130px'
}}
icon={faFilter}
size='1x'
/>
</span>
}
color={{backgroundColor: 'cornflowerblue', color: 'white'}}
onClick={this.enableFilterField}
/>
);
}
}
@ -96,4 +118,4 @@ class FilterButton extends React.Component<props, state> {
}
}
export default FilterButton;
export default FilterButton;

44
src/elements/InfoHeaderItem/InfoHeaderItem.tsx
View File

@ -5,11 +5,11 @@ import {Spinner} from 'react-bootstrap';
import {IconDefinition} from '@fortawesome/fontawesome-common-types';
interface props {
onClick?: () => void
backColor: string
icon: IconDefinition
text: string | number
subtext: string | number
onClick?: () => void;
backColor: string;
icon: IconDefinition;
text: string | number;
subtext: string | number;
}
/**
@ -18,23 +18,35 @@ interface props {
class InfoHeaderItem extends React.Component<props> {
render(): JSX.Element {
return (
<div onClick={(): void => {
// call clicklistener if defined
if (this.props.onClick != null) this.props.onClick();
}} className={style.infoheaderitem} style={{backgroundColor: this.props.backColor}}>
<div
onClick={(): void => {
// call clicklistener if defined
if (this.props.onClick != null) {
this.props.onClick();
}
}}
className={style.infoheaderitem}
style={{backgroundColor: this.props.backColor}}>
<div className={style.icon}>
<FontAwesomeIcon style={{
verticalAlign: 'middle',
lineHeight: '130px'
}} icon={this.props.icon} size='5x'/>
<FontAwesomeIcon
style={{
verticalAlign: 'middle',
lineHeight: '130px'
}}
icon={this.props.icon}
size='5x'
/>
</div>
{this.props.text !== null && this.props.text !== undefined ?
{this.props.text !== null && this.props.text !== undefined ? (
<>
<div className={style.maintext}>{this.props.text}</div>
<div className={style.subtext}>{this.props.subtext}</div>
</>
: <span className={style.loadAnimation}><Spinner animation='border'/></span>
}
) : (
<span className={style.loadAnimation}>
<Spinner animation='border' />
</span>
)}
</div>
);
}

8
src/elements/PageTitle/PageTitle.tsx
View File

@ -17,10 +17,8 @@ class PageTitle extends React.Component<props> {
<div className={style.pageheader + ' ' + themeStyle.backgroundcolor}>
<span className={style.pageheadertitle + ' ' + themeStyle.textcolor}>{this.props.title}</span>
<span className={style.pageheadersubtitle + ' ' + themeStyle.textcolor}>{this.props.subtitle}</span>
<>
{this.props.children}
</>
<Line/>
<>{this.props.children}</>
<Line />
</div>
);
}
@ -35,7 +33,7 @@ export class Line extends React.Component {
const themeStyle = GlobalInfos.getThemeStyle();
return (
<>
<hr className={themeStyle.hrcolor}/>
<hr className={themeStyle.hrcolor} />
</>
);
}

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

@ -40,7 +40,7 @@ describe('<AddActorPopup/>', function () {
it('simulate actortile click', function () {
const func = jest.fn();
const wrapper = shallow(<AddActorPopup onHide={() => {func();}} movie_id={1}/>);
const wrapper = shallow(<AddActorPopup onHide={() => {func();}} movieId={1}/>);
global.callAPIMock({result: 'success'});

88
src/elements/Popups/AddActorPopup/AddActorPopup.tsx
View File

@ -6,11 +6,11 @@ import {NewActorPopupContent} from '../NewActorPopup/NewActorPopup';
import {APINode, callAPI} from '../../../utils/Api';
import {ActorType} from '../../../types/VideoTypes';
import {GeneralSuccess} from '../../../types/GeneralTypes';
import FilterButton from "../../FilterButton/FilterButton";
import FilterButton from '../../FilterButton/FilterButton';
interface props {
interface Props {
onHide: () => void;
movie_id: number;
movieId: number;
}
interface state {
@ -22,11 +22,11 @@ interface state {
/**
* Popup for Adding a new Actor to a Video
*/
class AddActorPopup extends React.Component<props, state> {
class AddActorPopup extends React.Component<Props, state> {
// filterfield anchor, needed to focus after filter btn click
private filterfield: HTMLInputElement | null | undefined;
constructor(props: props) {
constructor(props: Props) {
super(props);
this.state = {
@ -48,12 +48,19 @@ class AddActorPopup extends React.Component<props, state> {
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={(): void => {
this.setState({contentDefault: false});
}}>Create new Actor</button>} ParentSubmit={this.parentSubmit}>
<PopupBase
title='Add new Actor to Video'
onHide={this.props.onHide}
banner={
<button
className={style.newactorbutton}
onClick={(): void => {
this.setState({contentDefault: false});
}}>
Create new Actor
</button>
}
ParentSubmit={this.parentSubmit}>
{this.resolvePage()}
</PopupBase>
</>
@ -65,11 +72,18 @@ class AddActorPopup extends React.Component<props, state> {
* @returns {JSX.Element}
*/
resolvePage(): JSX.Element {
if (this.state.contentDefault) return (this.getContent());
else return (<NewActorPopupContent onHide={(): void => {
this.loadActors();
this.setState({contentDefault: true});
}}/>);
if (this.state.contentDefault) {
return this.getContent();
} else {
return (
<NewActorPopupContent
onHide={(): void => {
this.loadActors();
this.setState({contentDefault: true});
}}
/>
);
}
}
/**
@ -81,15 +95,19 @@ class AddActorPopup extends React.Component<props, state> {
return (
<>
<div className={style.searchbar}>
<FilterButton onFilterChange={(filter): void => {
this.setState({filter: filter})
}}/>
<FilterButton
onFilterChange={(filter): void => {
this.setState({filter: filter});
}}
/>
</div>
{this.state.actors.filter(this.filterSearch).map((el) => (<ActorTile actor={el} onClick={this.tileClickHandler}/>))}
{this.state.actors.filter(this.filterSearch).map((el) => (
<ActorTile actor={el} onClick={this.tileClickHandler} />
))}
</>
);
} else {
return (<div>somekind of loading</div>);
return <div>somekind of loading</div>;
}
}
@ -98,25 +116,29 @@ class AddActorPopup extends React.Component<props, state> {
*/
tileClickHandler(actor: ActorType): void {
// fetch the available actors
callAPI<GeneralSuccess>(APINode.Actor, {
action: 'addActorToVideo',
ActorId: actor.ActorId,
MovieId: this.props.movie_id
}, result => {
if (result.result === 'success') {
// return back to player page
this.props.onHide();
} else {
console.error('an error occured while fetching actors: ' + result);
callAPI<GeneralSuccess>(
APINode.Actor,
{
action: 'addActorToVideo',
ActorId: actor.ActorId,
MovieId: this.props.movieId
},
(result) => {
if (result.result === 'success') {
// return back to player page
this.props.onHide();
} else {
console.error('an error occured while fetching actors: ' + result);
}
}
});
);
}
/**
* load the actors from backend and set state
*/
loadActors(): void {
callAPI<ActorType[]>(APINode.Actor, {action: 'getAllActors'}, result => {
callAPI<ActorType[]>(APINode.Actor, {action: 'getAllActors'}, (result) => {
this.setState({actors: result});
});
}

20
src/elements/Popups/AddTagPopup/AddTagPopup.tsx
View File

@ -3,10 +3,10 @@ import Tag from '../../Tag/Tag';
import PopupBase from '../PopupBase';
import {APINode, callAPI} from '../../../utils/Api';
import {TagType} from '../../../types/VideoTypes';
import FilterButton from "../../FilterButton/FilterButton";
import styles from './AddTagPopup.module.css'
import FilterButton from '../../FilterButton/FilterButton';
import styles from './AddTagPopup.module.css';
interface props {
interface Props {
onHide: () => void;
submit: (tagId: number, tagName: string) => void;
}
@ -19,8 +19,8 @@ interface state {
/**
* component creates overlay to add a new tag to a video
*/
class AddTagPopup extends React.Component<props, state> {
constructor(props: props) {
class AddTagPopup extends React.Component<Props, state> {
constructor(props: Props) {
super(props);
this.state = {items: [], filter: ''};
@ -42,13 +42,11 @@ class AddTagPopup extends React.Component<props, state> {
return (
<PopupBase title='Add a Tag to this Video:' onHide={this.props.onHide} ParentSubmit={this.parentSubmit}>
<div className={styles.actionbar}>
<FilterButton onFilterChange={(filter): void => this.setState({filter: filter})}/>
<FilterButton onFilterChange={(filter): void => this.setState({filter: filter})} />
</div>
{this.state.items ?
this.state.items.filter(this.tagFilter).map((i) => (
<Tag tagInfo={i}
onclick={(): void => this.onItemClick(i)}/>
)) : null}
{this.state.items
? this.state.items.filter(this.tagFilter).map((i) => <Tag tagInfo={i} onclick={(): void => this.onItemClick(i)} />)
: null}
</PopupBase>
);
}

21
src/elements/Popups/NewActorPopup/NewActorPopup.tsx
View File

@ -15,7 +15,7 @@ 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}/>
<NewActorPopupContent onHide={this.props.onHide} />
</PopupBase>
);
}
@ -28,10 +28,17 @@ export class NewActorPopupContent extends React.Component<NewActorPopupProps> {
return (
<>
<div>
<input type='text' placeholder='Actor Name' onChange={(v): void => {
this.value = v.target.value;
}}/></div>
<button className={style.savebtn} onClick={(): void => this.storeselection()}>Save</button>
<input
type='text'
placeholder='Actor Name'
onChange={(v): void => {
this.value = v.target.value;
}}
/>
</div>
<button className={style.savebtn} onClick={(): void => this.storeselection()}>
Save
</button>
</>
);
}
@ -41,7 +48,9 @@ export class NewActorPopupContent extends React.Component<NewActorPopupProps> {
*/
storeselection(): void {
// check if user typed in name
if (this.value === '' || this.value === undefined) return;
if (this.value === '' || this.value === undefined) {
return;
}
callAPI(APINode.Actor, {action: 'createActor', actorname: this.value}, (result: GeneralSuccess) => {
if (result.result !== 'success') {

25
src/elements/Popups/NewTagPopup/NewTagPopup.tsx
View File

@ -5,7 +5,7 @@ import {APINode, callAPI} from '../../../utils/Api';
import {GeneralSuccess} from '../../../types/GeneralTypes';
interface props {
onHide: () => void
onHide: () => void;
}
/**
@ -16,11 +16,24 @@ class NewTagPopup extends React.Component<props> {
render(): JSX.Element {
return (
<PopupBase title='Add new Tag' onHide={this.props.onHide} height='200px' width='400px' ParentSubmit={(): void => this.storeselection()}>
<div><input type='text' placeholder='Tagname' onChange={(v): void => {
this.value = v.target.value;
}}/></div>
<button className={style.savebtn} onClick={(): void => this.storeselection()}>Save</button>
<PopupBase
title='Add new Tag'
onHide={this.props.onHide}
height='200px'
width='400px'
ParentSubmit={(): void => this.storeselection()}>
<div>
<input
type='text'
placeholder='Tagname'
onChange={(v): void => {
this.value = v.target.value;
}}
/>
</div>
<button className={style.savebtn} onClick={(): void => this.storeselection()}>
Save
</button>
</PopupBase>
);
}

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

@ -4,17 +4,24 @@ import style from '../NewActorPopup/NewActorPopup.module.css';
import {setCustomBackendDomain} from '../../../utils/Api';
interface NBCProps {
onHide: (_: void) => void
onHide: (_: void) => void;
}
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): void => {
setCustomBackendDomain(v.target.value);
}}/></div>
<button className={style.savebtn} onClick={(): void => props.onHide()}>Refresh</button>
<input
type='text'
placeholder='http://192.168.0.2'
onChange={(v): void => {
setCustomBackendDomain(v.target.value);
}}
/>
</div>
<button className={style.savebtn} onClick={(): void => props.onHide()}>
Refresh
</button>
</PopupBase>
);
}

44
src/elements/Popups/PopupBase.tsx
View File

@ -4,7 +4,7 @@ import {Line} from '../PageTitle/PageTitle';
import React, {RefObject} from 'react';
import {addKeyHandler, removeKeyHandler} from '../../utils/ShortkeyHandler';
interface props {
interface Props {
width?: string;
height?: string;
banner?: JSX.Element;
@ -16,11 +16,11 @@ interface props {
/**
* wrapper class for generic types of popups
*/
class PopupBase extends React.Component<props> {
class PopupBase extends React.Component<Props> {
private wrapperRef: RefObject<HTMLDivElement>;
private framedimensions: { minHeight: string | undefined; width: string | undefined; height: string | undefined };
private framedimensions: {minHeight: string | undefined; width: string | undefined; height: string | undefined};
constructor(props: props) {
constructor(props: Props) {
super(props);
this.state = {items: []};
@ -32,9 +32,9 @@ class PopupBase extends React.Component<props> {
// parse style props
this.framedimensions = {
width: (this.props.width ? this.props.width : undefined),
height: (this.props.height ? this.props.height : undefined),
minHeight: (this.props.height ? this.props.height : undefined)
width: this.props.width ? this.props.width : undefined,
height: this.props.height ? this.props.height : undefined,
minHeight: this.props.height ? this.props.height : undefined
};
}
@ -63,10 +63,8 @@ class PopupBase extends React.Component<props> {
<div className={style.banner}>{this.props.banner}</div>
</div>
<Line/>
<div className={style.content}>
{this.props.children}
</div>
<Line />
<div className={style.content}>{this.props.children}</div>
</div>
);
}
@ -90,7 +88,9 @@ class PopupBase extends React.Component<props> {
this.props.onHide();
} else if (event.key === 'Enter') {
// call a parentsubmit if defined
if (this.props.ParentSubmit) this.props.ParentSubmit();
if (this.props.ParentSubmit) {
this.props.ParentSubmit();
}
}
}
@ -98,15 +98,19 @@ class PopupBase extends React.Component<props> {
* make the element drag and droppable
*/
dragElement(): void {
let xOld = 0, yOld = 0;
let xOld = 0,
yOld = 0;
const elmnt = this.wrapperRef.current;
if (elmnt === null) return;
if (elmnt.firstChild === null) return;
if (elmnt === null) {
return;
}
if (elmnt.firstChild === null) {
return;
}
(elmnt.firstChild as HTMLDivElement).onmousedown = dragMouseDown;
function dragMouseDown(e: MouseEvent): void {
e.preventDefault();
// get the mouse cursor position at startup:
@ -125,9 +129,11 @@ class PopupBase extends React.Component<props> {
xOld = e.clientX;
yOld = e.clientY;
// set the element's new position:
if (elmnt === null) return;
elmnt.style.top = (elmnt.offsetTop - dy) + 'px';
elmnt.style.left = (elmnt.offsetLeft - dx) + 'px';
if (elmnt === null) {
return;
}
elmnt.style.top = elmnt.offsetTop - dy + 'px';
elmnt.style.left = elmnt.offsetLeft - dx + 'px';
}
function closeDragElement(): void {

9
src/elements/Popups/SubmitPopup/SubmitPopup.tsx
View File

@ -2,17 +2,16 @@ import React from 'react';
import PopupBase from '../PopupBase';
import {Button} from '../../GPElements/Button';
interface props {
interface Props {
onHide: (_: void) => void;
submit: (_: void) => void;
}
export default function SubmitPopup(props: props): JSX.Element {
export default function SubmitPopup(props: Props): JSX.Element {
return (
<PopupBase title='Are you sure?' onHide={props.onHide} height='160px' width='300px'>
<Button title='Submit' color={{backgroundColor: 'green'}} onClick={(): void => props.submit()}/>
<Button title='Cancel' color={{backgroundColor: 'red'}} onClick={(): void => props.onHide()}/>
<Button title='Submit' color={{backgroundColor: 'green'}} onClick={(): void => props.submit()} />
<Button title='Cancel' color={{backgroundColor: 'red'}} onClick={(): void => props.onHide()} />
</PopupBase>
);
}

33
src/elements/Preview/Preview.tsx
View File

@ -7,7 +7,7 @@ import {APINode, callAPIPlain} from '../../utils/Api';
interface PreviewProps {
name: string;
movie_id: number;
movieId: number;
}
interface PreviewState {
@ -28,7 +28,7 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
}
componentDidMount(): void {
callAPIPlain(APINode.Video, {action: 'readThumbnail', movieid: this.props.movie_id}, (result) => {
callAPIPlain(APINode.Video, {action: 'readThumbnail', movieid: this.props.movieId}, (result) => {
this.setState({
previewpicture: result
});
@ -38,23 +38,21 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
render(): JSX.Element {
const themeStyle = GlobalInfos.getThemeStyle();
return (
<Link to={'/player/' + this.props.movie_id}>
<Link to={'/player/' + this.props.movieId}>
<div className={style.videopreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}>
<div className={style.previewtitle + ' ' + themeStyle.lighttextcolor}>{this.props.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}>
{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>
</Link>
);
}
}
@ -62,15 +60,12 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
/**
* Component for a Tag-name tile (used in category page)
*/
export class TagPreview extends React.Component<{ name: string }> {
export class TagPreview extends React.Component<{name: string}> {
render(): JSX.Element {
const themeStyle = GlobalInfos.getThemeStyle();
return (
<div
className={style.videopreview + ' ' + style.tagpreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}>
<div className={style.tagpreviewtitle + ' ' + themeStyle.lighttextcolor}>
{this.props.name}
</div>
<div className={style.videopreview + ' ' + style.tagpreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}>
<div className={style.tagpreviewtitle + ' ' + themeStyle.lighttextcolor}>{this.props.name}</div>
</div>
);
}

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

@ -5,7 +5,7 @@ import Preview, {TagPreview} from './Preview';
describe('<Preview/>', function () {
it('renders without crashing ', function () {
const wrapper = shallow(<Preview movie_id={1}/>);
const wrapper = shallow(<Preview movieId={1}/>);
wrapper.unmount();
});
@ -17,7 +17,7 @@ describe('<Preview/>', function () {
});
global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);
const wrapper = shallow(<Preview name='test' movie_id={1}/>);
const wrapper = shallow(<Preview name='test' movieId={1}/>);
// now called 1 times
expect(global.fetch).toHaveBeenCalledTimes(1);
@ -35,7 +35,7 @@ describe('<Preview/>', function () {
});
it('spinner loads correctly', function () {
const wrapper = shallow(<Preview movie_id={1}/>);
const wrapper = shallow(<Preview movieId={1}/>);
// expect load animation to be visible
expect(wrapper.find('.loadAnimation')).toHaveLength(1);

22
src/elements/SideBar/SideBar.tsx
View File

@ -13,11 +13,16 @@ interface SideBarProps {
class SideBar extends React.Component<SideBarProps> {
render(): JSX.Element {
const themeStyle = GlobalInfos.getThemeStyle();
const classnn = style.sideinfogeometry + ' ' + (this.props.hiddenFrame === undefined ? 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>);
return (
<div className={classnn} style={{width: this.props.width}}>
{this.props.children}
</div>
);
}
}
@ -27,9 +32,7 @@ class SideBar extends React.Component<SideBarProps> {
export class SideBarTitle extends React.Component {
render(): JSX.Element {
const themeStyle = GlobalInfos.getThemeStyle();
return (
<div className={style.sidebartitle + ' ' + themeStyle.subtextcolor}>{this.props.children}</div>
);
return <div className={style.sidebartitle + ' ' + themeStyle.subtextcolor}>{this.props.children}</div>;
}
}
@ -40,8 +43,9 @@ export class SideBarItem extends React.Component {
render(): JSX.Element {
const themeStyle = GlobalInfos.getThemeStyle();
return (
<div
className={style.sidebarinfo + ' ' + themeStyle.thirdbackground + ' ' + themeStyle.lighttextcolor}>{this.props.children}</div>
<div className={style.sidebarinfo + ' ' + themeStyle.thirdbackground + ' ' + themeStyle.lighttextcolor}>
{this.props.children}
</div>
);
}
}

15
src/elements/Tag/Tag.tsx
View File

@ -5,8 +5,8 @@ import {Link} from 'react-router-dom';
import {TagType} from '../../types/VideoTypes';
interface props {
onclick?: (_: string) => void
tagInfo: TagType
onclick?: (_: string) => void;
tagInfo: TagType;
}
/**
@ -17,18 +17,15 @@ class Tag extends React.Component<props> {
if (this.props.onclick) {
return this.renderButton();
} else {
return (
<Link to={'/categories/' + this.props.tagInfo.TagId}>
{this.renderButton()}
</Link>
);
return <Link to={'/categories/' + this.props.tagInfo.TagId}>{this.renderButton()}</Link>;
}
}
renderButton(): JSX.Element {
return (
<button className={styles.tagbtn} onClick={(): void => this.TagClick()}
data-testid='Test-Tag'>{this.props.tagInfo.TagName}</button>
<button className={styles.tagbtn} onClick={(): void => this.TagClick()} data-testid='Test-Tag'>
{this.props.tagInfo.TagName}
</button>
);
}

24
src/elements/VideoContainer/VideoContainer.tsx
View File

@ -3,8 +3,8 @@ import Preview from '../Preview/Preview';
import style from './VideoContainer.module.css';
import {VideoTypes} from '../../types/ApiTypes';
interface props {
data: VideoTypes.VideoUnloadedType[]
interface Props {
data: VideoTypes.VideoUnloadedType[];
}
interface state {
@ -16,11 +16,11 @@ interface state {
* A videocontainer storing lots of Preview elements
* includes scroll handling and loading of preview infos
*/
class VideoContainer extends React.Component<props, state> {
class VideoContainer extends React.Component<Props, state> {
// stores current index of loaded elements
loadindex: number = 0;
constructor(props: props) {
constructor(props: Props) {
super(props);
this.state = {
@ -38,15 +38,11 @@ class VideoContainer extends React.Component<props, state> {
render(): JSX.Element {
return (
<div className={style.maincontent}>
{this.state.loadeditems.map(elem => (
<Preview
key={elem.MovieId}
name={elem.MovieName}
movie_id={elem.MovieId}/>
{this.state.loadeditems.map((elem) => (
<Preview key={elem.MovieId} name={elem.MovieName} movieId={elem.MovieId} />
))}
{/*todo css for no items to show*/}
{this.state.loadeditems.length === 0 ?
'no items to show!' : null}
{this.state.loadeditems.length === 0 ? 'no items to show!' : null}
{this.props.children}
</div>
);
@ -73,13 +69,9 @@ class VideoContainer extends React.Component<props, state> {
}
this.setState({
loadeditems: [
...this.state.loadeditems,
...ret
]
loadeditems: [...this.state.loadeditems, ...ret]
});
this.loadindex += nr;
}

4
src/index.tsx
View File

@ -3,11 +3,11 @@ 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: string | number | boolean): void => {} : global.console.log;
global.console.log = process.env.NODE_ENV !== 'development' ? (_: string | number | boolean): void => {} : global.console.log;
ReactDOM.render(
<React.StrictMode>
<App/>
<App />
</React.StrictMode>,
document.getElementById('root')
);

32
src/pages/ActorOverviewPage/ActorOverviewPage.tsx
View File

@ -8,16 +8,15 @@ import style from './ActorOverviewPage.module.css';
import {Button} from '../../elements/GPElements/Button';
import NewActorPopup from '../../elements/Popups/NewActorPopup/NewActorPopup';
interface props {
}
interface Props {}
interface state {
actors: ActorType[];
NActorPopupVisible: boolean
NActorPopupVisible: boolean;
}
class ActorOverviewPage extends React.Component<props, state> {
constructor(props: props) {
class ActorOverviewPage extends React.Component<Props, state> {
constructor(props: Props) {
super(props);
this.state = {
@ -33,24 +32,29 @@ class ActorOverviewPage extends React.Component<props, state> {
render(): JSX.Element {
return (
<>
<PageTitle title='Actors' subtitle={this.state.actors.length + ' Actors'}/>
<PageTitle title='Actors' subtitle={this.state.actors.length + ' Actors'} />
<SideBar>
<Button title='Add Actor' onClick={(): void => this.setState({NActorPopupVisible: true})}/>
<Button title='Add Actor' onClick={(): void => this.setState({NActorPopupVisible: true})} />
</SideBar>
<div className={style.container}>
{this.state.actors.map((el) => (<ActorTile key={el.ActorId} actor={el}/>))}
{this.state.actors.map((el) => (
<ActorTile key={el.ActorId} actor={el} />
))}
</div>
{this.state.NActorPopupVisible ?
<NewActorPopup onHide={(): void => {
this.setState({NActorPopupVisible: false});
this.fetchAvailableActors(); // refetch actors
}}/> : null}
{this.state.NActorPopupVisible ? (
<NewActorPopup
onHide={(): void => {
this.setState({NActorPopupVisible: false});
this.fetchAvailableActors(); // refetch actors
}}
/>
) : null}
</>
);
}
fetchAvailableActors(): void {
callAPI<ActorType[]>(APINode.Actor, {action: 'getAllActors'}, result => {
callAPI<ActorType[]>(APINode.Actor, {action: 'getAllActors'}, (result) => {
this.setState({actors: result});
});
}

43
src/pages/ActorPage/ActorPage.tsx
View File

@ -13,22 +13,20 @@ import {Button} from '../../elements/GPElements/Button';
import {ActorTypes, VideoTypes} from '../../types/ApiTypes';
interface state {
data: VideoTypes.VideoUnloadedType[],
actor: ActorType
data: VideoTypes.VideoUnloadedType[];
actor: ActorType;
}
/**
* empty default props with id in url
*/
interface props extends RouteComponentProps<{ id: string }> {
}
interface Props extends RouteComponentProps<{id: string}> {}
/**
* info page about a specific actor and a list of all its videos
*/
export class ActorPage extends React.Component<props, state> {
constructor(props: props) {
export class ActorPage extends React.Component<Props, state> {
constructor(props: Props) {
super(props);
this.state = {data: [], actor: {ActorId: 0, Name: '', Thumbnail: ''}};
@ -40,20 +38,17 @@ export class ActorPage extends React.Component<props, state> {
<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'/>
<Button onClick={(): void => {}} title='Go to Actor overview' />
</Link>
</span>
</PageTitle>
<SideBar>
<div className={style.pic}>
<FontAwesomeIcon style={{color: 'white'}} icon={faUser} size='10x'/>
<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>}
{this.state.data.length !== 0 ? <VideoContainer data={this.state.data} /> : <div>No Data found!</div>}
</>
);
}
@ -66,15 +61,19 @@ export class ActorPage extends React.Component<props, state> {
* request more actor info from backend
*/
getActorInfo(): void {
callAPI(APINode.Actor, {
action: 'getActorInfo',
ActorId: parseInt(this.props.match.params.id)
}, (result: ActorTypes.videofetchresult) => {
this.setState({
data: result.Videos ? result.Videos : [],
actor: result.Info
});
});
callAPI(
APINode.Actor,
{
action: 'getActorInfo',
ActorId: parseInt(this.props.match.params.id, 10)
},
(result: ActorTypes.videofetchresult) => {
this.setState({
data: result.Videos ? result.Videos : [],
actor: result.Info
});
}
);
}
}

41
src/pages/AuthenticationPage/AuthenticationPage.tsx
View File

@ -1,22 +1,22 @@
import React from "react";
import {Button} from "../../elements/GPElements/Button";
import style from './AuthenticationPage.module.css'
import React from 'react';
import {Button} from '../../elements/GPElements/Button';
import style from './AuthenticationPage.module.css';
interface state {
pwdText: string
pwdText: string;
}
interface props {
submit: (password: string) => void
interface Props {
submit: (password: string) => void;
}
class AuthenticationPage extends React.Component<props, state> {
constructor(props: props) {
class AuthenticationPage extends React.Component<Props, state> {
constructor(props: Props) {
super(props);
this.state = {
pwdText: ''
}
};
}
render(): JSX.Element {
@ -26,16 +26,21 @@ class AuthenticationPage extends React.Component<props, state> {
<div className={style.main}>
<div className={style.loginText}>Login</div>
<div>
<input className={style.input}
placeholder='Password'
type='password'
onChange={(ch): void => this.setState({pwdText: ch.target.value})}
value={this.state.pwdText}/>
<input
className={style.input}
placeholder='Password'
type='password'
onChange={(ch): void => this.setState({pwdText: ch.target.value})}
value={this.state.pwdText}
/>
</div>
<div>
<Button title='Submit' onClick={(): void => {
this.props.submit(this.state.pwdText);
}}/>
<Button
title='Submit'
onClick={(): void => {
this.props.submit(this.state.pwdText);
}}
/>
</div>
</div>
</>
@ -43,4 +48,4 @@ class AuthenticationPage extends React.Component<props, state> {
}
}
export default AuthenticationPage;
export default AuthenticationPage;

4
src/pages/CategoryPage/CategoryPage.tsx
View File

@ -12,10 +12,10 @@ class CategoryPage extends React.Component {
return (
<Switch>
<Route path='/categories/:id'>
<CategoryViewWR/>
<CategoryViewWR />
</Route>
<Route path='/categories'>
<TagView/>
<TagView />
</Route>
</Switch>
);

94
src/pages/CategoryPage/CategoryView.tsx
View File

@ -11,7 +11,7 @@ import {DefaultTags, GeneralSuccess} from '../../types/GeneralTypes';
import {Button} from '../../elements/GPElements/Button';
import SubmitPopup from '../../elements/Popups/SubmitPopup/SubmitPopup';
interface CategoryViewProps extends RouteComponentProps<{ id: string }> {}
interface CategoryViewProps extends RouteComponentProps<{id: string}> {}
interface CategoryViewState {
loaded: boolean;
@ -34,42 +34,51 @@ export class CategoryView extends React.Component<CategoryViewProps, CategoryVie
}
componentDidMount(): void {
this.fetchVideoData(parseInt(this.props.match.params.id));
this.fetchVideoData(parseInt(this.props.match.params.id, 10));
}
componentDidUpdate(prevProps: Readonly<CategoryViewProps>, prevState: Readonly<CategoryViewState>): void {
componentDidUpdate(prevProps: Readonly<CategoryViewProps>): 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));
this.reloadVideoData();
}
}
reloadVideoData(): void {
this.setState({loaded: false});
this.fetchVideoData(parseInt(this.props.match.params.id, 10));
}
render(): JSX.Element {
return (
<>
<PageTitle
title='Categories'
subtitle={this.videodata.length + ' Videos'}/>
<PageTitle title='Categories' subtitle={this.videodata.length + ' Videos'} />
<SideBar>
<SideBarTitle>Default Tags:</SideBarTitle>
<Tag tagInfo={DefaultTags.all}/>
<Tag tagInfo={DefaultTags.fullhd}/>
<Tag tagInfo={DefaultTags.hd}/>
<Tag tagInfo={DefaultTags.lowq}/>
<Tag tagInfo={DefaultTags.all} />
<Tag tagInfo={DefaultTags.fullhd} />
<Tag tagInfo={DefaultTags.hd} />
<Tag tagInfo={DefaultTags.lowq} />
<Line/>
<Button title='Delete Tag' onClick={(): void => {this.deleteTag(false);}} color={{backgroundColor: 'red'}}/>
</SideBar>
{this.state.loaded ?
<VideoContainer
data={this.videodata}/> : null}
<button data-testid='backbtn' className='btn btn-success'
<Line />
<Button
title='Delete Tag'
onClick={(): void => {
this.props.history.push('/categories');
}}>Back to Categories
this.deleteTag(false);
}}
color={{backgroundColor: 'red'}}
/>
</SideBar>
{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>
{this.handlePopups()}
</>
@ -78,9 +87,14 @@ export class CategoryView extends React.Component<CategoryViewProps, CategoryVie
private handlePopups(): JSX.Element {
if (this.state.submitForceDelete) {
return (<SubmitPopup
onHide={(): void => this.setState({submitForceDelete: false})}
submit={(): void => {this.deleteTag(true);}}/>);
return (
<SubmitPopup
onHide={(): void => this.setState({submitForceDelete: false})}
submit={(): void => {
this.deleteTag(true);
}}
/>
);
} else {
return <></>;
}
@ -91,7 +105,7 @@ export class CategoryView extends React.Component<CategoryViewProps, CategoryVie
* @param id tagid
*/
private fetchVideoData(id: number): void {
callAPI<VideoTypes.VideoUnloadedType[]>(APINode.Video, {action: 'getMovies', tag: id}, result => {
callAPI<VideoTypes.VideoUnloadedType[]>(APINode.Video, {action: 'getMovies', tag: id}, (result) => {
this.videodata = result;
this.setState({loaded: true});
});
@ -101,19 +115,23 @@ export class CategoryView extends React.Component<CategoryViewProps, CategoryVie
* delete the current tag
*/
private deleteTag(force: boolean): void {
callAPI<GeneralSuccess>(APINode.Tags, {
action: 'deleteTag',
TagId: parseInt(this.props.match.params.id),
Force: force
}, result => {
console.log(result.result);
if (result.result === 'success') {
this.props.history.push('/categories');
} else if (result.result === 'not empty tag') {
// show submisison tag to ask if really delete
this.setState({submitForceDelete: true});
callAPI<GeneralSuccess>(
APINode.Tags,
{
action: 'deleteTag',
TagId: parseInt(this.props.match.params.id, 10),
Force: force
},
(result) => {
console.log(result.result);
if (result.result === 'success') {
this.props.history.push('/categories');
} else if (result.result === 'not empty tag') {
// show submisison tag to ask if really delete
this.setState({submitForceDelete: true});
}
}
});
);
}
}

57
src/pages/CategoryPage/TagView.tsx
View File

@ -15,10 +15,10 @@ interface TagViewState {
popupvisible: boolean;
}
interface props {}
interface Props {}
class TagView extends React.Component<props, TagViewState> {
constructor(props: props) {
class TagView extends React.Component<Props, TagViewState> {
constructor(props: Props) {
super(props);
this.state = {
@ -34,30 +34,33 @@ class TagView extends React.Component<props, TagViewState> {
render(): JSX.Element {
return (
<>
<PageTitle
title='Categories'
subtitle={this.state.loadedtags.length + ' different Tags'}/>
<PageTitle title='Categories' subtitle={this.state.loadedtags.length + ' different Tags'} />
<SideBar>
<SideBarTitle>Default Tags:</SideBarTitle>
<Tag tagInfo={DefaultTags.all}/>
<Tag tagInfo={DefaultTags.fullhd}/>
<Tag tagInfo={DefaultTags.hd}/>
<Tag tagInfo={DefaultTags.lowq}/>
<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!
<Line />
<button
data-testid='btnaddtag'
className='btn btn-success'
onClick={(): void => {
this.setState({popupvisible: true});
}}>
Add a new Tag!
</button>
</SideBar>
<div className={videocontainerstyle.maincontent}>
{this.state.loadedtags ?
this.state.loadedtags.map((m) => (
<Link to={'/categories/' + m.TagId} key={m.TagId}>
<TagPreview name={m.TagName}/></Link>
)) :
'loading'}
{this.state.loadedtags
? this.state.loadedtags.map((m) => (
<Link to={'/categories/' + m.TagId} key={m.TagId}>
<TagPreview name={m.TagName} />
</Link>
))
: 'loading'}
</div>
{this.handlePopups()}
</>
@ -68,7 +71,7 @@ class TagView extends React.Component<props, TagViewState> {
* load all available tags from db.
*/
loadTags(): void {
callAPI<TagType[]>(APINode.Tags, {action: 'getAllTags'}, result => {
callAPI<TagType[]>(APINode.Tags, {action: 'getAllTags'}, (result) => {
this.setState({loadedtags: result});
});
}
@ -76,13 +79,15 @@ class TagView extends React.Component<props, TagViewState> {
private handlePopups(): JSX.Element {
if (this.state.popupvisible) {
return (
<NewTagPopup onHide={(): void => {
this.setState({popupvisible: false});
this.loadTags();
}}/>
<NewTagPopup
onHide={(): void => {
this.setState({popupvisible: false});
this.loadTags();
}}
/>
);
} else {
return (<></>);
return <></>;
}
}
}

133
src/pages/HomePage/HomePage.tsx
View File

@ -10,25 +10,25 @@ import {Route, Switch, withRouter} from 'react-router-dom';
import {RouteComponentProps} from 'react-router';
import SearchHandling from './SearchHandling';
import {VideoTypes} from '../../types/ApiTypes';
import {DefaultTags} from "../../types/GeneralTypes";
import {DefaultTags} from '../../types/GeneralTypes';
interface props extends RouteComponentProps {}
interface Props extends RouteComponentProps {}
interface state {
sideinfo: VideoTypes.startDataType
subtitle: string,
data: VideoTypes.VideoUnloadedType[],
selectionnr: number
sideinfo: VideoTypes.startDataType;
subtitle: string;
data: VideoTypes.VideoUnloadedType[];
selectionnr: number;
}
/**
* The home page component showing on the initial pageload
*/
export class HomePage extends React.Component<props, state> {
export class HomePage extends React.Component<Props, state> {
/** keyword variable needed temporary store search keyword */
keyword = '';
constructor(props: props) {
constructor(props: Props) {
super(props);
this.state = {
@ -38,7 +38,7 @@ export class HomePage extends React.Component<props, state> {
HDNr: 0,
SDNr: 0,
DifferentTags: 0,
Tagged: 0,
Tagged: 0
},
subtitle: 'All Videos',
data: [],
@ -65,7 +65,7 @@ export class HomePage extends React.Component<props, state> {
});
this.setState({
data: result,
selectionnr: result.length,
selectionnr: result.length
});
});
}
@ -79,65 +79,86 @@ export class HomePage extends React.Component<props, state> {
});
}
render(): JSX.Element {
return (
<>
<Switch>
<Route path='/search/:name'>
<SearchHandling/>
<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>
<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.FullHdNr}</b> FULL-HD Videos!</SideBarItem>
<SideBarItem><b>{this.state.sideinfo.HDNr}</b> HD Videos!</SideBarItem>
<SideBarItem><b>{this.state.sideinfo.SDNr}</b> SD Videos!</SideBarItem>
<SideBarItem><b>{this.state.sideinfo.DifferentTags}</b> different Tags!</SideBarItem>
<Line/>
<Line />
<SideBarItem>
<b>{this.state.sideinfo.VideoNr}</b> Videos Total!
</SideBarItem>
<SideBarItem>
<b>{this.state.sideinfo.FullHdNr}</b> FULL-HD Videos!
</SideBarItem>
<SideBarItem>
<b>{this.state.sideinfo.HDNr}</b> HD Videos!
</SideBarItem>
<SideBarItem>
<b>{this.state.sideinfo.SDNr}</b> SD Videos!
</SideBarItem>
<SideBarItem>
<b>{this.state.sideinfo.DifferentTags}</b> different Tags!
</SideBarItem>
<Line />
<SideBarTitle>Default Tags:</SideBarTitle>
<Tag tagInfo={{TagName: 'All', TagId: DefaultTags.all.TagId}} onclick={(): void => {
this.fetchVideoData(DefaultTags.all.TagId);
this.setState({subtitle: `All Videos`});
}}/>
<Tag tagInfo={{TagName: 'Full Hd', TagId: DefaultTags.fullhd.TagId}} onclick={(): void => {
this.fetchVideoData(DefaultTags.fullhd.TagId);
this.setState({subtitle: `Full Hd Videos`});
}}/>
<Tag tagInfo={{TagName: 'Low Quality', TagId: DefaultTags.lowq.TagId}}
onclick={(): void => {
this.fetchVideoData(DefaultTags.lowq.TagId);
this.setState({subtitle: `Low Quality Videos`});
}}/>
<Tag tagInfo={{TagName: 'HD', TagId: DefaultTags.hd.TagId}} onclick={(): void => {
this.fetchVideoData(DefaultTags.hd.TagId);
this.setState({subtitle: `HD Videos`});
}}/>
<Tag
tagInfo={{TagName: 'All', TagId: DefaultTags.all.TagId}}
onclick={(): void => {
this.fetchVideoData(DefaultTags.all.TagId);
this.setState({subtitle: 'All Videos'});
}}
/>
<Tag
tagInfo={{TagName: 'Full Hd', TagId: DefaultTags.fullhd.TagId}}
onclick={(): void => {
this.fetchVideoData(DefaultTags.fullhd.TagId);
this.setState({subtitle: 'Full Hd Videos'});
}}
/>
<Tag
tagInfo={{TagName: 'Low Quality', TagId: DefaultTags.lowq.TagId}}
onclick={(): void => {
this.fetchVideoData(DefaultTags.lowq.TagId);
this.setState({subtitle: 'Low Quality Videos'});
}}
/>
<Tag
tagInfo={{TagName: 'HD', TagId: DefaultTags.hd.TagId}}
onclick={(): void => {
this.fetchVideoData(DefaultTags.hd.TagId);
this.setState({subtitle: 'HD Videos'});
}}
/>
</SideBar>
{this.state.data.length !== 0 ?
<VideoContainer
data={this.state.data}/> :
<div>No Data found!</div>}
<div className={style.rightinfo}>
</div>
{this.state.data.length !== 0 ? <VideoContainer data={this.state.data} /> : <div>No Data found!</div>}
<div className={style.rightinfo} />
</Route>
</Switch>
</>

16
src/pages/HomePage/SearchHandling.tsx
View File

@ -11,14 +11,14 @@ interface params {
name: string;
}
interface props extends RouteComponentProps<params> {}
interface Props extends RouteComponentProps<params> {}
interface state {
data: VideoTypes.VideoUnloadedType[];
}
export class SearchHandling extends React.Component<props, state> {
constructor(props: props) {
export class SearchHandling extends React.Component<Props, state> {
constructor(props: Props) {
super(props);
this.state = {
@ -33,8 +33,8 @@ export class SearchHandling extends React.Component<props, state> {
render(): JSX.Element {
return (
<>
<PageTitle title='Search' subtitle={this.props.match.params.name + ': ' + this.state.data.length}/>
<SideBar hiddenFrame/>
<PageTitle title='Search' subtitle={this.props.match.params.name + ': ' + this.state.data.length} />
<SideBar hiddenFrame />
{this.getVideoData()}
</>
);
@ -45,11 +45,9 @@ export class SearchHandling extends React.Component<props, state> {
*/
getVideoData(): JSX.Element {
if (this.state.data.length !== 0) {
return (
<VideoContainer data={this.state.data}/>
);
return <VideoContainer data={this.state.data} />;
} else {
return (<div>No Data found!</div>);
return <div>No Data found!</div>;
}
}

296
src/pages/Player/Player.tsx
View File

@ -20,22 +20,22 @@ import {ActorType, TagType} from '../../types/VideoTypes';
import PlyrJS from 'plyr';
import {Button} from '../../elements/GPElements/Button';
import {VideoTypes} from '../../types/ApiTypes';
import GlobalInfos from "../../utils/GlobalInfos";
import GlobalInfos from '../../utils/GlobalInfos';
interface myprops extends RouteComponentProps<{ id: string }> {}
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[]
sources?: PlyrJS.SourceInfo;
movieId: number;
movieName: string;
likes: number;
quality: number;
length: number;
tags: TagType[];
suggesttag: TagType[];
popupvisible: boolean;
actorpopupvisible: boolean;
actors: ActorType[];
}
/**
@ -64,8 +64,8 @@ export class Player extends React.Component<myprops, mystate> {
super(props);
this.state = {
movie_id: -1,
movie_name: '',
movieId: -1,
movieName: '',
likes: 0,
quality: 0,
length: 0,
@ -87,27 +87,37 @@ export class Player extends React.Component<myprops, mystate> {
render(): JSX.Element {
return (
<div id='videocontainer'>
<PageTitle
title='Watch'
subtitle={this.state.movie_name}/>
<PageTitle title='Watch' subtitle={this.state.movieName} />
{this.assembleSideBar()}
<div className={style.videowrapper}>
{/* video component is added here */}
{this.state.sources ? <Plyr
style={plyrstyle}
source={this.state.sources}
options={this.options}/> :
<div>not loaded yet</div>}
{this.state.sources ? (
<Plyr style={plyrstyle} source={this.state.sources} options={this.options} />
) : (
<div>not loaded yet</div>
)}
<div className={style.videoactions}>
<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'}}/>
<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>
{this.assembleActorTiles()}
</div>
<button className={style.closebutton} onClick={(): void => 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()
@ -123,18 +133,26 @@ export class Player extends React.Component<myprops, mystate> {
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/>
<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 key={m.TagId} tagInfo={m}/>
<Tag key={m.TagId} tagInfo={m} />
))}
<Line/>
<Line />
<SideBarTitle>Tag Quickadd:</SideBarTitle>
{this.state.suggesttag.map((m: TagType) => (
<Tag
@ -142,7 +160,8 @@ export class Player extends React.Component<myprops, mystate> {
key={m.TagName}
onclick={(): void => {
this.quickAddTag(m.TagId, m.TagName);
}}/>
}}
/>
))}
</SideBar>
);
@ -154,18 +173,20 @@ export class Player extends React.Component<myprops, mystate> {
private assembleActorTiles(): JSX.Element {
return (
<div className={style.actorcontainer}>
{this.state.actors ?
this.state.actors.map((actr: ActorType) => (
<ActorTile key={actr.ActorId} actor={actr}/>
)) : <></>
}
<div className={style.actorAddTile} onClick={(): void => {
this.addActor();
}}>
{this.state.actors ? this.state.actors.map((actr: ActorType) => <ActorTile key={actr.ActorId} actor={actr} />) : <></>}
<div
className={style.actorAddTile}
onClick={(): void => {
this.addActor();
}}>
<div className={style.actorAddTile_thumbnail}>
<FontAwesomeIcon style={{
lineHeight: '130px'
}} icon={faPlusCircle} size='5x'/>
<FontAwesomeIcon
style={{
lineHeight: '130px'
}}
icon={faPlusCircle}
size='5x'
/>
</div>
<div className={style.actorAddTile_name}>Add Actor</div>
</div>
@ -173,7 +194,6 @@ export class Player extends React.Component<myprops, mystate> {
);
}
/**
* handle the popovers generated according to state changes
* @returns {JSX.Element}
@ -181,18 +201,18 @@ export class Player extends React.Component<myprops, mystate> {
handlePopOvers(): JSX.Element {
return (
<>
{
this.state.popupvisible ?
<AddTagPopup onHide={(): void => this.setState({popupvisible: false})}
submit={this.quickAddTag}/> : null
}
{
this.state.actorpopupvisible ?
<AddActorPopup onHide={(): void => {
{this.state.popupvisible ? (
<AddTagPopup onHide={(): void => this.setState({popupvisible: false})} submit={this.quickAddTag} />
) : null}
{this.state.actorpopupvisible ? (
<AddActorPopup
onHide={(): void => {
this.refetchActors();
this.setState({actorpopupvisible: false});
}} movie_id={this.state.movie_id}/> : null
}
}}
movieId={this.state.movieId}
/>
) : null}
</>
);
}
@ -203,82 +223,93 @@ export class Player extends React.Component<myprops, mystate> {
* @param tagName name of tag to add
*/
quickAddTag(tagId: number, tagName: string): void {
callAPI(APINode.Tags, {
action: 'addTag',
TagId: tagId,
MovieId: parseInt(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.TagName;
}).indexOf(tagName);
callAPI(
APINode.Tags,
{
action: 'addTag',
TagId: tagId,
MovieId: parseInt(this.props.match.params.id, 10)
},
(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.TagName;
})
.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.TagId;
}).indexOf(tagId);
// 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.TagId;
})
.indexOf(tagId);
// check if tag is available in quickadds
if (quickaddindex !== -1) {
array.splice(quickaddindex, 1);
// check if tag is available in quickadds
if (quickaddindex !== -1) {
array.splice(quickaddindex, 1);
this.setState({
tags: [...this.state.tags, {TagName: tagName, TagId: tagId}],
suggesttag: array
});
} else {
this.setState({
tags: [...this.state.tags, {TagName: tagName, TagId: tagId}]
});
this.setState({
tags: [...this.state.tags, {TagName: tagName, TagId: tagId}],
suggesttag: array
});
} else {
this.setState({
tags: [...this.state.tags, {TagName: tagName, TagId: tagId}]
});
}
}
}
}
});
);
}
/**
* fetch all the required infos of a video from backend
*/
fetchMovieData(): void {
callAPI(APINode.Video, {action: 'loadVideo', MovieId: parseInt(this.props.match.params.id)}, (result: VideoTypes.loadVideoType) => {
console.log(result)
this.setState({
sources: {
type: 'video',
sources: [
{
src: getBackendDomain() + GlobalInfos.getVideoPath() + result.MovieUrl,
type: 'video/mp4',
size: 1080
}
],
poster: result.Poster
},
movie_id: result.MovieId,
movie_name: result.MovieName,
likes: result.Likes,
quality: result.Quality,
length: result.Length,
tags: result.Tags,
suggesttag: result.SuggestedTag,
actors: result.Actors
});
});
callAPI(
APINode.Video,
{action: 'loadVideo', MovieId: parseInt(this.props.match.params.id, 10)},
(result: VideoTypes.loadVideoType) => {
console.log(result);
this.setState({
sources: {
type: 'video',
sources: [
{
src: getBackendDomain() + GlobalInfos.getVideoPath() + result.MovieUrl,
type: 'video/mp4',
size: 1080
}
],
poster: result.Poster
},
movieId: result.MovieId,
movieName: result.MovieName,
likes: result.Likes,
quality: result.Quality,
length: result.Length,
tags: result.Tags,
suggesttag: result.SuggestedTag,
actors: result.Actors
});
}
);
}
/**
* click handler for the like btn
*/
likebtn(): void {
callAPI(APINode.Video, {action: 'addLike', MovieId: parseInt(this.props.match.params.id)}, (result: GeneralSuccess) => {
callAPI(APINode.Video, {action: 'addLike', MovieId: parseInt(this.props.match.params.id, 10)}, (result: GeneralSuccess) => {
if (result.result === 'success') {
// likes +1 --> avoid reload of all data
this.setState({likes: this.state.likes + 1});
@ -301,15 +332,19 @@ export class Player extends React.Component<myprops, mystate> {
* delete the current video and return to last page
*/
deleteVideo(): void {
callAPI(APINode.Video, {action: 'deleteVideo', MovieId: parseInt(this.props.match.params.id)}, (result: GeneralSuccess) => {
if (result.result === 'success') {
// return to last element if successful
this.props.history.goBack();
} else {
console.error('an error occured while liking');
console.error(result);
callAPI(
APINode.Video,
{action: 'deleteVideo', MovieId: parseInt(this.props.match.params.id, 10)},
(result: GeneralSuccess) => {
if (result.result === 'success') {
// return to last element if successful
this.props.history.goBack();
} else {
console.error('an error occured while liking');
console.error(result);
}
}
});
);
}
/**
@ -323,11 +358,14 @@ export class Player extends React.Component<myprops, mystate> {
* fetch the available video actors again
*/
refetchActors(): void {
callAPI<ActorType[]>(APINode.Actor, {action: 'getActorsOfVideo', MovieId: parseInt(this.props.match.params.id)}, result => {
this.setState({actors: result});
});
callAPI<ActorType[]>(
APINode.Actor,
{action: 'getActorsOfVideo', MovieId: parseInt(this.props.match.params.id, 10)},
(result) => {
this.setState({actors: result});
}
);
}
}
export default withRouter(Player);

24
src/pages/RandomPage/RandomPage.tsx
View File

@ -47,26 +47,26 @@ class RandomPage extends React.Component<{}, state> {
render(): JSX.Element {
return (
<div>
<PageTitle title='Random Videos'
subtitle='4pc'/>
<PageTitle title='Random Videos' subtitle='4pc' />
<SideBar>
<SideBarTitle>Visible Tags:</SideBarTitle>
{this.state.tags.map((m) => (
<Tag key={m.TagId} tagInfo={m}/>
<Tag key={m.TagId} tagInfo={m} />
))}
</SideBar>
{this.state.videos.length !== 0 ?
<VideoContainer
data={this.state.videos}>
{this.state.videos.length !== 0 ? (
<VideoContainer data={this.state.videos}>
<div className={style.Shufflebutton}>
<button onClick={(): void => this.shuffleclick()} className={style.btnshuffle}>Shuffle</button>
<button onClick={(): void => this.shuffleclick()} className={style.btnshuffle}>
Shuffle
</button>
</div>
</VideoContainer>
:
<div>No Data found!</div>}
) : (
<div>No Data found!</div>
)}
</div>
);
}
@ -83,8 +83,8 @@ class RandomPage extends React.Component<{}, state> {
* @param nr number of videos to load
*/
loadShuffledvideos(nr: number): void {
callAPI<GetRandomMoviesType>(APINode.Video, {action: 'getRandomMovies', number: nr}, result => {
console.log(result)
callAPI<GetRandomMoviesType>(APINode.Video, {action: 'getRandomMovies', number: nr}, (result) => {
console.log(result);
this.setState({videos: []}); // needed to trigger rerender of main videoview
this.setState({
videos: result.Videos,

216
src/pages/SettingsPage/GeneralSettings.tsx
View File

@ -11,20 +11,19 @@ import {SettingsTypes} from '../../types/ApiTypes';
import {GeneralSuccess} from '../../types/GeneralTypes';
interface state {
customapi: boolean
apipath: string
generalSettings: SettingsTypes.loadGeneralSettingsType
customapi: boolean;
apipath: string;
generalSettings: SettingsTypes.loadGeneralSettingsType;
}
interface props {
}
interface Props {}
/**
* Component for Generalsettings tag on Settingspage
* handles general settings of mediacenter which concerns to all pages
*/
class GeneralSettings extends React.Component<props, state> {
constructor(props: props) {
class GeneralSettings extends React.Component<Props, state> {
constructor(props: Props) {
super(props);
this.state = {
@ -34,14 +33,14 @@ class GeneralSettings extends React.Component<props, state> {
DarkMode: true,
DBSize: 0,
DifferentTags: 0,
EpisodePath: "",
MediacenterName: "",
Password: "",
EpisodePath: '',
MediacenterName: '',
Password: '',
PasswordEnabled: false,
TagsAdded: 0,
TMDBGrabbing: false,
VideoNr: 0,
VideoPath: ""
VideoPath: ''
}
};
}
@ -55,51 +54,71 @@ class GeneralSettings extends React.Component<props, state> {
return (
<>
<div className={style.infoheader}>
<InfoHeaderItem backColor='lightblue'
text={this.state.generalSettings.VideoNr}
subtext='Videos in Gravity'
icon={faArchive}/>
<InfoHeaderItem backColor='yellow'
text={this.state.generalSettings.DBSize + ' MB'}
subtext='Database size'
icon={faRulerVertical}/>
<InfoHeaderItem backColor='green'
text={this.state.generalSettings.DifferentTags}
subtext='different Tags'
icon={faAddressCard}/>
<InfoHeaderItem backColor='orange'
text={this.state.generalSettings.TagsAdded}
subtext='tags added'
icon={faBalanceScaleLeft}/>
<InfoHeaderItem
backColor='lightblue'
text={this.state.generalSettings.VideoNr}
subtext='Videos in Gravity'
icon={faArchive}
/>
<InfoHeaderItem
backColor='yellow'
text={this.state.generalSettings.DBSize + ' MB'}
subtext='Database size'
icon={faRulerVertical}
/>
<InfoHeaderItem
backColor='green'
text={this.state.generalSettings.DifferentTags}
subtext='different Tags'
icon={faAddressCard}
/>
<InfoHeaderItem
backColor='orange'
text={this.state.generalSettings.TagsAdded}
subtext='tags added'
icon={faBalanceScaleLeft}
/>
</div>
<div className={style.GeneralForm + ' ' + themeStyle.subtextcolor}>
<Form data-testid='mainformsettings' onSubmit={(e): void => {
e.preventDefault();
this.saveSettings();
}}>
<Form
data-testid='mainformsettings'
onSubmit={(e): void => {
e.preventDefault();
this.saveSettings();
}}>
<Form.Row>
<Form.Group as={Col} data-testid='videpathform'>
<Form.Label>Video Path</Form.Label>
<Form.Control type='text' placeholder='/var/www/html/video'
value={this.state.generalSettings.VideoPath}
onChange={(ee): void => this.setState({
generalSettings: {
...this.state.generalSettings,
VideoPath: ee.target.value
}
})}/>
<Form.Control
type='text'
placeholder='/var/www/html/video'
value={this.state.generalSettings.VideoPath}
onChange={(ee): void =>
this.setState({
generalSettings: {
...this.state.generalSettings,
VideoPath: ee.target.value
}
})
}
/>
</Form.Group>
<Form.Group as={Col} data-testid='tvshowpath'>
<Form.Label>TV Show Path</Form.Label>
<Form.Control type='text' placeholder='/var/www/html/tvshow'
value={this.state.generalSettings.EpisodePath}
onChange={(e): void => this.setState({
generalSettings: {
...this.state.generalSettings,
EpisodePath: e.target.value
}
})}/>
<Form.Control
type='text'
placeholder='/var/www/html/tvshow'
value={this.state.generalSettings.EpisodePath}
onChange={(e): void =>
this.setState({
generalSettings: {
...this.state.generalSettings,
EpisodePath: e.target.value
}
})
}
/>
</Form.Group>
</Form.Row>
@ -116,17 +135,20 @@ class GeneralSettings extends React.Component<props, state> {
this.setState({customapi: !this.state.customapi});
}}
/>
{this.state.customapi ?
{this.state.customapi ? (
<Form.Group className={style.customapiform} data-testid='apipath'>
<Form.Label>API Backend url</Form.Label>
<Form.Control type='text' placeholder='https://127.0.0.1'
value={this.state.apipath}
onChange={(e): void => {
this.setState({apipath: e.target.value});
setCustomBackendDomain(e.target.value);
}}/>
</Form.Group> : null}
<Form.Control
type='text'
placeholder='https://127.0.0.1'
value={this.state.apipath}
onChange={(e): void => {
this.setState({apipath: e.target.value});
setCustomBackendDomain(e.target.value);
}}
/>
</Form.Group>
) : null}
<Form.Check
type='switch'
@ -144,19 +166,24 @@ class GeneralSettings extends React.Component<props, state> {
}}
/>
{this.state.generalSettings.PasswordEnabled ?
{this.state.generalSettings.PasswordEnabled ? (
<Form.Group data-testid='passwordfield'>
<Form.Label>Password</Form.Label>
<Form.Control type='password' placeholder='**********'
value={this.state.generalSettings.Password}
onChange={(e): void => this.setState({
generalSettings: {
...this.state.generalSettings,
Password: e.target.value
}
})}/>
</Form.Group> : null
}
<Form.Control
type='password'
placeholder='**********'
value={this.state.generalSettings.Password}
onChange={(e): void =>
this.setState({
generalSettings: {
...this.state.generalSettings,
Password: e.target.value
}
})
}
/>
</Form.Group>
) : null}
<Form.Check
type='switch'
@ -189,14 +216,19 @@ class GeneralSettings extends React.Component<props, state> {
<Form.Group className={style.mediacenternameform} data-testid='nameform'>
<Form.Label>The name of the Mediacenter</Form.Label>
<Form.Control type='text' placeholder='Mediacentername'
value={this.state.generalSettings.MediacenterName}
onChange={(e): void => this.setState({
generalSettings: {
...this.state.generalSettings,
MediacenterName: e.target.value
}
})}/>
<Form.Control
type='text'
placeholder='Mediacentername'
value={this.state.generalSettings.MediacenterName}
onChange={(e): void =>
this.setState({
generalSettings: {
...this.state.generalSettings,
MediacenterName: e.target.value
}
})
}
/>
</Form.Group>
<Button variant='primary' type='submit'>
@ -204,9 +236,7 @@ class GeneralSettings extends React.Component<props, state> {
</Button>
</Form>
</div>
<div className={style.footer}>
Version: {version}
</div>
<div className={style.footer}>Version: {version}</div>
</>
);
}
@ -225,23 +255,27 @@ class GeneralSettings extends React.Component<props, state> {
*/
saveSettings(): void {
let settings = this.state.generalSettings;
if(!this.state.generalSettings.PasswordEnabled){
if (!this.state.generalSettings.PasswordEnabled) {
settings.Password = '-1';
}
settings.DarkMode = GlobalInfos.isDarkTheme()
settings.DarkMode = GlobalInfos.isDarkTheme();
callAPI(APINode.Settings, {
action: 'saveGeneralSettings',
Settings: settings
}, (result: GeneralSuccess) => {
if (result.result) {
console.log('successfully saved settings');
// todo 2020-07-10: popup success
} else {
console.log('failed to save settings');
// todo 2020-07-10: popup error
callAPI(
APINode.Settings,
{
action: 'saveGeneralSettings',
Settings: settings
},
(result: GeneralSuccess) => {
if (result.result) {
console.log('successfully saved settings');
// todo 2020-07-10: popup success
} else {
console.log('failed to save settings');
// todo 2020-07-10: popup error
}
}
});
);
}
}

43
src/pages/SettingsPage/MovieSettings.tsx
View File

@ -5,20 +5,20 @@ import {GeneralSuccess} from '../../types/GeneralTypes';
import {SettingsTypes} from '../../types/ApiTypes';
interface state {
text: string[]
startbtnDisabled: boolean
text: string[];
startbtnDisabled: boolean;
}
interface props {}
interface Props {}
/**
* Component for MovieSettings on Settingspage
* handles settings concerning to movies in general
*/
class MovieSettings extends React.Component<props, state> {
class MovieSettings extends React.Component<Props, state> {
myinterval: number = -1;
constructor(props: props) {
constructor(props: Props) {
super(props);
this.state = {
@ -32,23 +32,36 @@ class MovieSettings extends React.Component<props, state> {
}
componentWillUnmount(): void {
if (this.myinterval !== -1)
if (this.myinterval !== -1) {
clearInterval(this.myinterval);
}
}
render(): JSX.Element {
return (
<>
<button disabled={this.state.startbtnDisabled}
className='btn btn-success'
onClick={(): void => {this.startReindex();}}>Reindex Movie
<button
disabled={this.state.startbtnDisabled}
className='btn btn-success'
onClick={(): void => {
this.startReindex();
}}>
Reindex Movie
</button>
<button className='btn btn-warning'
onClick={(): void => {this.cleanupGravity();}}>Cleanup Gravity
<button
className='btn btn-warning'
onClick={(): void => {
this.cleanupGravity();
}}>
Cleanup Gravity
</button>
<div className={style.indextextarea}>{this.state.text.map(m => (
<div key={m} className='textarea-element'>{m}</div>
))}</div>
<div className={style.indextextarea}>
{this.state.text.map((m) => (
<div key={m} className='textarea-element'>
{m}
</div>
))}
</div>
</>
);
}
@ -99,7 +112,7 @@ class MovieSettings extends React.Component<props, state> {
* send request to cleanup db gravity
*/
cleanupGravity(): void {
callAPI(APINode.Settings, {action: 'cleanupGravity'}, (result) => {
callAPI(APINode.Settings, {action: 'cleanupGravity'}, () => {
this.setState({
text: ['successfully cleaned up gravity!']
});

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

@ -28,17 +28,17 @@ class SettingsPage extends React.Component {
</div>
<div className={style.SettingsContent}>
<Switch>
<Route path="/settings/general">
<GeneralSettings/>
<Route path='/settings/general'>
<GeneralSettings />
</Route>
<Route path="/settings/movies">
<MovieSettings/>
<Route path='/settings/movies'>
<MovieSettings />
</Route>
<Route path="/settings/tv">
<span/>
<Route path='/settings/tv'>
<span />
</Route>
<Route path="/settings">
<Redirect to='/settings/general'/>
<Route path='/settings'>
<Redirect to='/settings/general' />
</Route>
</Switch>
</div>

44
src/types/ApiTypes.ts
View File

@ -2,16 +2,16 @@ import {ActorType, TagType} from './VideoTypes';
export namespace VideoTypes {
export interface loadVideoType {
MovieUrl: string
Poster: string
MovieId: number
MovieName: string
Likes: number
Quality: number
Length: number
Tags: TagType[]
SuggestedTag: TagType[]
Actors: ActorType[]
MovieUrl: string;
Poster: string;
MovieId: number;
MovieName: string;
Likes: number;
Quality: number;
Length: number;
Tags: TagType[];
SuggestedTag: TagType[];
Actors: ActorType[];
}
export interface startDataType {
@ -25,7 +25,7 @@ export namespace VideoTypes {
export interface VideoUnloadedType {
MovieId: number;
MovieName: string
MovieName: string;
}
}
@ -38,18 +38,18 @@ export namespace SettingsTypes {
}
export interface loadGeneralSettingsType {
VideoPath: string,
EpisodePath: string,
MediacenterName: string,
Password: string,
PasswordEnabled: boolean,
TMDBGrabbing: boolean,
DarkMode: boolean,
VideoPath: string;
EpisodePath: string;
MediacenterName: string;
Password: string;
PasswordEnabled: boolean;
TMDBGrabbing: boolean;
DarkMode: boolean;
VideoNr: number,
DBSize: number,
DifferentTags: number,
TagsAdded: number
VideoNr: number;
DBSize: number;
DifferentTags: number;
TagsAdded: number;
}
export interface getStatusMessageType {

4
src/types/GeneralTypes.ts
View File

@ -1,11 +1,11 @@
import {TagType} from './VideoTypes';
export interface GeneralSuccess {
result: string
result: string;
}
interface TagarrayType {
[_: string]: TagType
[_: string]: TagType;
}
export const DefaultTags: TagarrayType = {

4
src/types/VideoTypes.ts
View File

@ -2,8 +2,8 @@
* type accepted by Tag component
*/
export interface TagType {
TagName: string
TagId: number
TagName: string;
TagId: number;
}
export interface ActorType {

197
src/utils/Api.ts
View File

@ -8,13 +8,13 @@ export function getBackendDomain(): string {
let userAgent = navigator.userAgent.toLowerCase();
if (userAgent.indexOf(' electron/') > -1) {
// Electron-specific code - force a custom backendurl
return (customBackendURL);
return customBackendURL;
} else {
// use custom only if defined
if (customBackendURL) {
return (customBackendURL);
return customBackendURL;
} else {
return (window.location.origin);
return window.location.origin;
}
}
}
@ -38,29 +38,21 @@ function getAPIDomain(): string {
* interface how an api request should look like
*/
interface ApiBaseRequest {
action: string | number,
action: string | number;
[_: string]: string | number | boolean | object
[_: string]: string | number | boolean | object;
}
// store api token - empty if not set
let apiToken = ''
let apiToken = '';
// a callback que to be called after api token refresh
let callQue: ((error: string) => void)[] = []
let callQue: ((error: string) => void)[] = [];
// flag to check wheter a api refresh is currently pending
let refreshInProcess = false;
// store the expire seconds of token
let expireSeconds = -1;
interface APIToken {
error?: string;
access_token: string;
expires_in: number;
scope: string;
token_type: string;
}
/**
* refresh the api token or use that one in cookie if still valid
* @param callback to be called after successful refresh
@ -79,34 +71,44 @@ export function refreshAPIToken(callback: (error: string) => void, password?: st
}
if (apiTokenValid()) {
console.log("token still valid...")
console.log('token still valid...');
callFuncQue('');
return;
}
const formData = new FormData();
formData.append("grant_type", "client_credentials");
formData.append("client_id", "openmediacenter");
formData.append("client_secret", password ? password : 'openmediacenter');
formData.append("scope", 'all');
formData.append('grant_type', 'client_credentials');
formData.append('client_id', 'openmediacenter');
formData.append('client_secret', password ? password : 'openmediacenter');
formData.append('scope', 'all');
interface APIToken {
error?: string;
// eslint-disable-next-line camelcase
access_token: string; // no camel case allowed because of backendlib
// eslint-disable-next-line camelcase
expires_in: number; // no camel case allowed because of backendlib
scope: string;
// eslint-disable-next-line camelcase
token_type: string; // no camel case allowed because of backendlib
}
fetch(getBackendDomain() + '/token', {method: 'POST', body: formData})
.then((response) => response.json()
.then((result: APIToken) => {
if (result.error) {
callFuncQue(result.error);
return;
}
console.log(result)
// set api token
apiToken = result.access_token;
// set expire time
expireSeconds = (new Date().getTime() / 1000) + result.expires_in;
setTokenCookie(apiToken, expireSeconds);
// call all handlers and release flag
callFuncQue('');
}));
fetch(getBackendDomain() + '/token', {method: 'POST', body: formData}).then((response) =>
response.json().then((result: APIToken) => {
if (result.error) {
callFuncQue(result.error);
return;
}
console.log(result);
// set api token
apiToken = result.access_token;
// set expire time
expireSeconds = new Date().getTime() / 1000 + result.expires_in;
setTokenCookie(apiToken, expireSeconds);
// call all handlers and release flag
callFuncQue('');
})
);
}
export function apiTokenValid(): boolean {
@ -114,7 +116,7 @@ export function apiTokenValid(): boolean {
const token = getTokenCookie();
if (token !== null) {
// check if token is at least valid for the next minute
if (token.expire > (new Date().getTime() / 1000) + 60) {
if (token.expire > new Date().getTime() / 1000 + 60) {
apiToken = token.token;
expireSeconds = token.expire;
@ -129,11 +131,11 @@ export function apiTokenValid(): boolean {
*/
function callFuncQue(error: string): void {
// call all pending handlers
callQue.map(func => {
callQue.map((func) => {
return func(error);
})
});
// reset pending que
callQue = []
callQue = [];
// release flag to be able to start new refresh
refreshInProcess = false;
}
@ -146,24 +148,24 @@ function callFuncQue(error: string): void {
function setTokenCookie(token: string, validSec: number): void {
let d = new Date();
d.setTime(validSec * 1000);
console.log("token set" + d.toUTCString())
let expires = "expires=" + d.toUTCString();
document.cookie = "token=" + token + ";" + expires + ";path=/";
document.cookie = "token_expire=" + validSec + ";" + expires + ";path=/";
console.log('token set' + d.toUTCString());
let expires = 'expires=' + d.toUTCString();
document.cookie = 'token=' + token + ';' + expires + ';path=/';
document.cookie = 'token_expire=' + validSec + ';' + expires + ';path=/';
}
/**
* get all required cookies for the token
*/
function getTokenCookie(): { token: string, expire: number } | null {
function getTokenCookie(): {token: string; expire: number} | null {
const token = decodeCookie('token');
const expireInString = decodeCookie('token_expire');
const expireIn = parseInt(expireInString, 10) | 0;
const expireIn = parseInt(expireInString, 10);
if (expireIn !== 0 && token !== '') {
return {token: token, expire: expireIn};
} else {
return null
return null;
}
}
@ -172,7 +174,7 @@ function getTokenCookie(): { token: string, expire: number } | null {
* @param key cookie key
*/
function decodeCookie(key: string): string {
let name = key + "=";
let name = key + '=';
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for (let i = 0; i < ca.length; i++) {
@ -184,7 +186,7 @@ function decodeCookie(key: string): string {
return c.substring(name.length, c.length);
}
}
return "";
return '';
}
/**
@ -196,10 +198,10 @@ function checkAPITokenValid(callback: () => void): void {
// check if token is valid and set
if (apiToken === '' || expireSeconds <= new Date().getTime() / 1000) {
refreshAPIToken(() => {
callback()
})
callback();
});
} else {
callback()
callback();
}
}
@ -210,28 +212,34 @@ function checkAPITokenValid(callback: () => void): void {
* @param callback the callback with json reply from backend
* @param errorcallback a optional callback if an error occured
*/
export function callAPI<T>(apinode: APINode,
fd: ApiBaseRequest,
callback: (_: T) => void,
errorcallback: (_: string) => void = (_: string): void => {
}): void {
export function callAPI<T>(
apinode: APINode,
fd: ApiBaseRequest,
callback: (_: T) => void,
errorcallback: (_: string) => void = (_: string): void => {}
): void {
checkAPITokenValid(() => {
console.log(apiToken);
fetch(getAPIDomain() + apinode, {
method: 'POST', body: JSON.stringify(fd), headers: new Headers({
method: 'POST',
body: JSON.stringify(fd),
headers: new Headers({
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + apiToken,
}),
}).then((response) => {
if (response.status !== 200) {
console.log('Error: ' + response.statusText);
// todo place error popup here
} else {
response.json().then((result: T) => {
callback(result);
})
}
}).catch(reason => errorcallback(reason));
})
Authorization: 'Bearer ' + apiToken
})
})
.then((response) => {
if (response.status !== 200) {
console.log('Error: ' + response.statusText);
// todo place error popup here
} else {
response.json().then((result: T) => {
callback(result);
});
}
})
.catch((reason) => errorcallback(reason));
});
}
/**
@ -239,18 +247,26 @@ export function callAPI<T>(apinode: APINode,
* @param apinode
* @param fd
* @param callback
* @param errorcallback
*/
export function callApiUnsafe<T>(apinode: APINode, fd: ApiBaseRequest, callback: (_: T) => void, errorcallback?: (_: string) => void): void {
fetch(getAPIDomain() + apinode, {method: 'POST', body: JSON.stringify(fd),}).then((response) => {
if (response.status !== 200) {
console.log('Error: ' + response.statusText);
// todo place error popup here
} else {
response.json().then((result: T) => {
callback(result);
})
}
}).catch(reason => errorcallback ? errorcallback(reason) : {})
export function callApiUnsafe<T>(
apinode: APINode,
fd: ApiBaseRequest,
callback: (_: T) => void,
errorcallback?: (_: string) => void
): void {
fetch(getAPIDomain() + apinode, {method: 'POST', body: JSON.stringify(fd)})
.then((response) => {
if (response.status !== 200) {
console.log('Error: ' + response.statusText);
// todo place error popup here
} else {
response.json().then((result: T) => {
callback(result);
});
}
})
.catch((reason) => (errorcallback ? errorcallback(reason) : {}));
}
/**
@ -262,21 +278,24 @@ export function callApiUnsafe<T>(apinode: APINode, fd: ApiBaseRequest, callback:
export function callAPIPlain(apinode: APINode, fd: ApiBaseRequest, callback: (_: string) => void): void {
checkAPITokenValid(() => {
fetch(getAPIDomain() + apinode, {
method: 'POST', body: JSON.stringify(fd), headers: new Headers({
method: 'POST',
body: JSON.stringify(fd),
headers: new Headers({
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + apiToken,
Authorization: 'Bearer ' + apiToken
})
})
.then((response) => response.text()
.then((result) => {
callback(result);
}));
}).then((response) =>
response.text().then((result) => {
callback(result);
})
);
});
}
/**
* API nodes definitions
*/
// eslint-disable-next-line no-shadow
export enum APINode {
Settings = 'settings',
Tags = 'tags',

10
src/utils/GlobalInfos.ts
View File

@ -7,7 +7,7 @@ import lighttheme from '../AppLightTheme.module.css';
*/
class StaticInfos {
private darktheme: boolean = true;
private videopath: string = ""
private videopath: string = '';
/**
* check if the current theme is the dark theme
@ -15,7 +15,7 @@ class StaticInfos {
*/
isDarkTheme(): boolean {
return this.darktheme;
};
}
/**
* setter to enable or disable the dark or light theme
@ -23,16 +23,16 @@ class StaticInfos {
*/
enableDarkTheme(enable = true): void {
this.darktheme = enable;
this.handlers.map(func => {
this.handlers.map((func) => {
return func();
})
});
}
/**
* get the currently selected theme stylesheet
* @returns {*} the style object of the current active theme
*/
getThemeStyle(): { [_: string]: string } {
getThemeStyle(): {[_: string]: string} {
return this.isDarkTheme() ? darktheme : lighttheme;
}