use eslint to lint project
drop code quality job
This commit is contained in:
@ -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});
|
||||
});
|
||||
}
|
||||
|
||||
@ -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
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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});
|
||||
}
|
||||
}
|
||||
});
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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 <></>;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
|
||||
@ -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>;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
});
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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!']
|
||||
});
|
||||
|
||||
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user