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

typescriptify Popupbase

Browse Source 
focus textfield on filterclick
This commit is contained in:
Lukas Heiligenbrunner
2021-01-22 21:05:21 +00:00
parent 66eb72d7fb
commit 6c7cc11038
29 changed files with 303 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
import React from 'react';
import {callAPI} from '../../utils/Api';
import {ActorType} from '../../api/VideoTypes';
import {ActorType} from '../../types/VideoTypes';
import ActorTile from '../../elements/ActorTile/ActorTile';
import PageTitle from '../../elements/PageTitle/PageTitle';
import SideBar from '../../elements/SideBar/SideBar';

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

@ -6,13 +6,14 @@ import {faUser} from '@fortawesome/free-solid-svg-icons';
import style from './ActorPage.module.css';
import VideoContainer from '../../elements/VideoContainer/VideoContainer';
import {callAPI} from '../../utils/Api';
import {ActorType, VideoUnloadedType} from '../../api/VideoTypes';
import {ActorType} from '../../types/VideoTypes';
import {Link, withRouter} from 'react-router-dom';
import {RouteComponentProps} from 'react-router';
import {Button} from '../../elements/GPElements/Button';
import {ActorTypes, VideoTypes} from '../../types/ApiTypes';
interface state {
data: VideoUnloadedType[],
data: VideoTypes.VideoUnloadedType[],
actor: ActorType
}
@ -22,13 +23,6 @@ interface state {
interface props extends RouteComponentProps<{ id: string }> {
}
/**
* result of actor fetch
*/
interface videofetchresult {
videos: VideoUnloadedType[];
info: ActorType;
}
/**
* info page about a specific actor and a list of all its videos
@ -75,7 +69,7 @@ export class ActorPage extends React.Component<props, state> {
callAPI('actor.php', {
action: 'getActorInfo',
actorid: this.props.match.params.id
}, (result: videofetchresult) => {
}, (result: ActorTypes.videofetchresult) => {
this.setState({
data: result.videos ? result.videos : [],
actor: result.info

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

@ -4,7 +4,7 @@ import Tag from '../../elements/Tag/Tag';
import NewTagPopup from '../../elements/Popups/NewTagPopup/NewTagPopup';
import PageTitle, {Line} from '../../elements/PageTitle/PageTitle';
import {Route, Switch} from 'react-router-dom';
import {DefaultTags} from '../../api/GeneralTypes';
import {DefaultTags} from '../../types/GeneralTypes';
import {CategoryViewWR} from './CategoryView';
import TagView from './TagView';
@ -60,11 +60,10 @@ class CategoryPage extends React.Component<{}, CategoryPageState> {
</Switch>
{this.state.popupvisible ?
<NewTagPopup show={this.state.popupvisible}
onHide={(): void => {
this.setState({popupvisible: false});
// this.loadTags();
}}/> :
<NewTagPopup onHide={(): void => {
this.setState({popupvisible: false});
// this.loadTags();
}}/> :
null
}
</>

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

@ -1,9 +1,9 @@
import {RouteComponentProps} from 'react-router';
import React from 'react';
import {VideoUnloadedType} from '../../api/VideoTypes';
import VideoContainer from '../../elements/VideoContainer/VideoContainer';
import {callAPI} from '../../utils/Api';
import {withRouter} from 'react-router-dom';
import {VideoTypes} from '../../types/ApiTypes';
interface CategoryViewProps extends RouteComponentProps<{ id: string }> {
setSubTitle: (title: string) => void
@ -17,7 +17,7 @@ interface CategoryViewState {
* plain class (for unit testing only)
*/
export class CategoryView extends React.Component<CategoryViewProps, CategoryViewState> {
private videodata: VideoUnloadedType[] = [];
private videodata: VideoTypes.VideoUnloadedType[] = [];
constructor(props: CategoryViewProps) {
super(props);
@ -60,7 +60,7 @@ export class CategoryView extends React.Component<CategoryViewProps, CategoryVie
* @param id tagid
*/
fetchVideoData(id: number): void {
callAPI<VideoUnloadedType[]>('video.php', {action: 'getMovies', tag: id}, result => {
callAPI<VideoTypes.VideoUnloadedType[]>('video.php', {action: 'getMovies', tag: id}, result => {
this.videodata = result;
this.setState({loaded: true});
this.props.setSubTitle(this.videodata.length + ' Videos');

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

@ -1,4 +1,4 @@
import {TagType} from '../../api/VideoTypes';
import {TagType} from '../../types/VideoTypes';
import React from 'react';
import videocontainerstyle from '../../elements/VideoContainer/VideoContainer.module.css';
import {Link} from 'react-router-dom';
@ -32,8 +32,7 @@ class TagView extends React.Component<props, TagViewState> {
this.state.loadedtags.map((m) => (
<Link to={'/categories/' + m.tag_id}><TagPreview
key={m.tag_id}
name={m.tag_name}
tag_id={m.tag_id}/></Link>
name={m.tag_name}/></Link>
)) :
'loading'}
</div>

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

@ -7,9 +7,9 @@ import style from './HomePage.module.css';
import PageTitle, {Line} from '../../elements/PageTitle/PageTitle';
import {callAPI} from '../../utils/Api';
import {Route, Switch, withRouter} from 'react-router-dom';
import {VideoUnloadedType} from '../../api/VideoTypes';
import {RouteComponentProps} from 'react-router';
import SearchHandling from './SearchHandling';
import {VideoTypes} from '../../types/ApiTypes';
interface props extends RouteComponentProps {}
@ -22,18 +22,10 @@ interface state {
tagnr: number
},
subtitle: string,
data: VideoUnloadedType[],
data: VideoTypes.VideoUnloadedType[],
selectionnr: number
}
interface startDataData {
total: number;
fullhd: number;
hd: number;
sd: number;
tags: number;
}
/**
* The home page component showing on the initial pageload
*/
@ -71,7 +63,7 @@ export class HomePage extends React.Component<props, state> {
* @param tag tag to fetch videos
*/
fetchVideoData(tag: string): void {
callAPI('video.php', {action: 'getMovies', tag: tag}, (result: VideoUnloadedType[]) => {
callAPI('video.php', {action: 'getMovies', tag: tag}, (result: VideoTypes.VideoUnloadedType[]) => {
this.setState({
data: []
});
@ -87,7 +79,7 @@ export class HomePage extends React.Component<props, state> {
* fetch the necessary data for left info box
*/
fetchStartData(): void {
callAPI('video.php', {action: 'getStartData'}, (result: startDataData) => {
callAPI('video.php', {action: 'getStartData'}, (result: VideoTypes.startDataType) => {
this.setState({
sideinfo: {
videonr: result['total'],

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

@ -2,10 +2,10 @@ import {RouteComponentProps} from 'react-router';
import React from 'react';
import {withRouter} from 'react-router-dom';
import {callAPI} from '../../utils/Api';
import {VideoUnloadedType} from '../../api/VideoTypes';
import VideoContainer from '../../elements/VideoContainer/VideoContainer';
import PageTitle from '../../elements/PageTitle/PageTitle';
import SideBar from '../../elements/SideBar/SideBar';
import {VideoTypes} from '../../types/ApiTypes';
interface params {
name: string;
@ -14,7 +14,7 @@ interface params {
interface props extends RouteComponentProps<params> {}
interface state {
data: VideoUnloadedType[];
data: VideoTypes.VideoUnloadedType[];
}
export class SearchHandling extends React.Component<props, state> {
@ -59,7 +59,7 @@ export class SearchHandling extends React.Component<props, state> {
* @param keyword The keyword to search for
*/
searchVideos(keyword: string): void {
callAPI('video.php', {action: 'getSearchKeyWord', keyword: keyword}, (result: VideoUnloadedType[]) => {
callAPI('video.php', {action: 'getSearchKeyWord', keyword: keyword}, (result: VideoTypes.VideoUnloadedType[]) => {
this.setState({
data: result
});

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

@ -15,10 +15,11 @@ import ActorTile from '../../elements/ActorTile/ActorTile';
import {withRouter} from 'react-router-dom';
import {callAPI, getBackendDomain} from '../../utils/Api';
import {RouteComponentProps} from 'react-router';
import {GeneralSuccess} from '../../api/GeneralTypes';
import {ActorType, loadVideoType, TagType} from '../../api/VideoTypes';
import {GeneralSuccess} from '../../types/GeneralTypes';
import {ActorType, TagType} from '../../types/VideoTypes';
import PlyrJS from 'plyr';
import {Button} from '../../elements/GPElements/Button';
import {VideoTypes} from '../../types/ApiTypes';
interface myprops extends RouteComponentProps<{ id: string }> {}
@ -239,7 +240,7 @@ export class Player extends React.Component<myprops, mystate> {
* fetch all the required infos of a video from backend
*/
fetchMovieData(): void {
callAPI('video.php', {action: 'loadVideo', movieid: this.props.match.params.id}, (result: loadVideoType) => {
callAPI('video.php', {action: 'loadVideo', movieid: this.props.match.params.id}, (result: VideoTypes.loadVideoType) => {
this.setState({
sources: {
type: 'video',

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

@ -5,15 +5,16 @@ import Tag from '../../elements/Tag/Tag';
import PageTitle from '../../elements/PageTitle/PageTitle';
import VideoContainer from '../../elements/VideoContainer/VideoContainer';
import {callAPI} from '../../utils/Api';
import {TagType, VideoUnloadedType} from '../../api/VideoTypes';
import {TagType} from '../../types/VideoTypes';
import {VideoTypes} from '../../types/ApiTypes';
interface state {
videos: VideoUnloadedType[];
videos: VideoTypes.VideoUnloadedType[];
tags: TagType[];
}
interface GetRandomMoviesType {
rows: VideoUnloadedType[];
rows: VideoTypes.VideoUnloadedType[];
tags: TagType[];
}

72
src/pages/SettingsPage/GeneralSettings.js → src/pages/SettingsPage/GeneralSettings.tsx
View File

@ -7,37 +7,59 @@ import {faArchive, faBalanceScaleLeft, faRulerVertical} from '@fortawesome/free-
import {faAddressCard} from '@fortawesome/free-regular-svg-icons';
import {version} from '../../../package.json';
import {callAPI, setCustomBackendDomain} from '../../utils/Api';
import {SettingsTypes} from '../../types/ApiTypes';
import {GeneralSuccess} from '../../types/GeneralTypes';
interface state {
passwordsupport: boolean,
tmdbsupport: boolean,
customapi: boolean,
videopath: string,
tvshowpath: string,
mediacentername: string,
password: string,
apipath: string,
videonr: number,
dbsize: number,
difftagnr: number,
tagsadded: number
}
interface props {}
/**
* Component for Generalsettings tag on Settingspage
* handles general settings of mediacenter which concerns to all pages
*/
class GeneralSettings extends React.Component {
constructor(props) {
class GeneralSettings extends React.Component<props, state> {
constructor(props: props) {
super(props);
this.state = {
passwordsupport: false,
tmdbsupport: null,
tmdbsupport: false,
customapi: false,
videopath: '',
tvshowpath: '',
mediacentername: '',
password: '',
apipath: '',
videonr: null,
dbsize: null,
difftagnr: null,
tagsadded: null
videonr: 0,
dbsize: 0,
difftagnr: 0,
tagsadded: 0
};
}
componentDidMount() {
componentDidMount(): void {
this.loadSettings();
}
render() {
render(): JSX.Element {
const themeStyle = GlobalInfos.getThemeStyle();
return (
<>
@ -47,7 +69,7 @@ class GeneralSettings extends React.Component {
subtext='Videos in Gravity'
icon={faArchive}/>
<InfoHeaderItem backColor='yellow'
text={this.state.dbsize !== undefined ? this.state.dbsize + ' MB' : undefined}
text={this.state.dbsize !== undefined ? this.state.dbsize + ' MB' : ''}
subtext='Database size'
icon={faRulerVertical}/>
<InfoHeaderItem backColor='green'
@ -60,7 +82,7 @@ class GeneralSettings extends React.Component {
icon={faBalanceScaleLeft}/>
</div>
<div className={style.GeneralForm + ' ' + themeStyle.subtextcolor}>
<Form data-testid='mainformsettings' onSubmit={(e) => {
<Form data-testid='mainformsettings' onSubmit={(e): void => {
e.preventDefault();
this.saveSettings();
}}>
@ -68,14 +90,14 @@ class GeneralSettings extends React.Component {
<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.videopath}
onChange={(ee) => this.setState({videopath: ee.target.value})}/>
onChange={(ee): void => this.setState({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.tvshowpath}
onChange={(e) => this.setState({tvshowpath: e.target.value})}/>
onChange={(e): void => this.setState({tvshowpath: e.target.value})}/>
</Form.Group>
</Form.Row>
@ -84,7 +106,7 @@ class GeneralSettings extends React.Component {
id='custom-switch-api'
label='Use custom API url'
checked={this.state.customapi}
onChange={() => {
onChange={(): void => {
if (this.state.customapi) {
setCustomBackendDomain('');
}
@ -97,7 +119,7 @@ class GeneralSettings extends React.Component {
<Form.Label>API Backend url</Form.Label>
<Form.Control type='text' placeholder='https://127.0.0.1'
value={this.state.apipath}
onChange={(e) => {
onChange={(e): void => {
this.setState({apipath: e.target.value});
setCustomBackendDomain(e.target.value);
}}/>
@ -110,7 +132,7 @@ class GeneralSettings extends React.Component {
data-testid='passwordswitch'
label='Enable Password support'
checked={this.state.passwordsupport}
onChange={() => {
onChange={(): void => {
this.setState({passwordsupport: !this.state.passwordsupport});
}}
/>
@ -119,7 +141,7 @@ class GeneralSettings extends React.Component {
<Form.Group data-testid='passwordfield'>
<Form.Label>Password</Form.Label>
<Form.Control type='password' placeholder='**********' value={this.state.password}
onChange={(e) => this.setState({password: e.target.value})}/>
onChange={(e): void => this.setState({password: e.target.value})}/>
</Form.Group> : null
}
@ -129,7 +151,7 @@ class GeneralSettings extends React.Component {
data-testid='tmdb-switch'
label='Enable TMDB video grabbing support'
checked={this.state.tmdbsupport}
onChange={() => {
onChange={(): void => {
this.setState({tmdbsupport: !this.state.tmdbsupport});
}}
/>
@ -140,7 +162,7 @@ class GeneralSettings extends React.Component {
data-testid='darktheme-switch'
label='Enable Dark-Theme'
checked={GlobalInfos.isDarkTheme()}
onChange={() => {
onChange={(): void => {
GlobalInfos.enableDarkTheme(!GlobalInfos.isDarkTheme());
this.forceUpdate();
// todo initiate rerender
@ -150,7 +172,7 @@ class GeneralSettings extends React.Component {
<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.mediacentername}
onChange={(e) => this.setState({mediacentername: e.target.value})}/>
onChange={(e): void => this.setState({mediacentername: e.target.value})}/>
</Form.Group>
<Button variant='primary' type='submit'>
@ -168,8 +190,8 @@ class GeneralSettings extends React.Component {
/**
* inital load of already specified settings from backend
*/
loadSettings() {
callAPI('settings.php', {action: 'loadGeneralSettings'}, (result) => {
loadSettings(): void {
callAPI('settings.php', {action: 'loadGeneralSettings'}, (result: SettingsTypes.loadGeneralSettingsType) => {
this.setState({
videopath: result.video_path,
tvshowpath: result.episode_path,
@ -189,7 +211,7 @@ class GeneralSettings extends React.Component {
/**
* save the selected and typed settings to the backend
*/
saveSettings() {
saveSettings(): void {
callAPI('settings.php', {
action: 'saveGeneralSettings',
password: this.state.passwordsupport ? this.state.password : '-1',
@ -198,8 +220,8 @@ class GeneralSettings extends React.Component {
mediacentername: this.state.mediacentername,
tmdbsupport: this.state.tmdbsupport,
darkmodeenabled: GlobalInfos.isDarkTheme().toString()
}, (result) => {
if (result.success) {
}, (result: GeneralSuccess) => {
if (result.result) {
console.log('successfully saved settings');
// todo 2020-07-10: popup success
} else {

46
src/pages/SettingsPage/MovieSettings.js → src/pages/SettingsPage/MovieSettings.tsx
View File

@ -1,13 +1,24 @@
import React from 'react';
import style from './MovieSettings.module.css';
import {callAPI} from '../../utils/Api';
import {GeneralSuccess} from '../../types/GeneralTypes';
import {SettingsTypes} from '../../types/ApiTypes';
interface state {
text: string[]
startbtnDisabled: boolean
}
interface props {}
/**
* Component for MovieSettings on Settingspage
* handles settings concerning to movies in general
*/
class MovieSettings extends React.Component {
constructor(props) {
class MovieSettings extends React.Component<props, state> {
myinterval: number = -1;
constructor(props: props) {
super(props);
this.state = {
@ -16,23 +27,24 @@ class MovieSettings extends React.Component {
};
}
componentDidMount() {
this.myinterval = setInterval(this.updateStatus, 1000);
componentDidMount(): void {
this.myinterval = window.setInterval(this.updateStatus, 1000);
}
componentWillUnmount() {
clearInterval(this.myinterval);
componentWillUnmount(): void {
if (this.myinterval !== -1)
clearInterval(this.myinterval);
}
render() {
render(): JSX.Element {
return (
<>
<button disabled={this.state.startbtnDisabled}
className='btn btn-success'
onClick={() => {this.startReindex();}}>Reindex Movie
onClick={(): void => {this.startReindex();}}>Reindex Movie
</button>
<button className='btn btn-warning'
onClick={() => {this.cleanupGravity();}}>Cleanup Gravity
onClick={(): void => {this.cleanupGravity();}}>Cleanup Gravity
</button>
<div className={style.indextextarea}>{this.state.text.map(m => (
<div className='textarea-element'>{m}</div>
@ -44,7 +56,7 @@ class MovieSettings extends React.Component {
/**
* starts the reindex process of the videos in the specified folder
*/
startReindex() {
startReindex(): void {
// clear output text before start
this.setState({text: []});
@ -52,9 +64,9 @@ class MovieSettings extends React.Component {
console.log('starting');
callAPI('settings.php', {action: 'startReindex'}, (result) => {
callAPI('settings.php', {action: 'startReindex'}, (result: GeneralSuccess): void => {
console.log(result);
if (result.success) {
if (result.result === 'success') {
console.log('started successfully');
} else {
console.log('error, reindex already running');
@ -62,17 +74,17 @@ class MovieSettings extends React.Component {
}
});
if (this.myinterval) {
if (this.myinterval !== -1) {
clearInterval(this.myinterval);
}
this.myinterval = setInterval(this.updateStatus, 1000);
this.myinterval = window.setInterval(this.updateStatus, 1000);
}
/**
* This interval function reloads the current status of reindexing from backend
*/
updateStatus = () => {
callAPI('settings.php', {action: 'getStatusMessage'}, (result) => {
updateStatus = (): void => {
callAPI('settings.php', {action: 'getStatusMessage'}, (result: SettingsTypes.getStatusMessageType) => {
if (result.contentAvailable === true) {
console.log(result);
// todo 2020-07-4: scroll to bottom of div here
@ -93,7 +105,7 @@ class MovieSettings extends React.Component {
/**
* send request to cleanup db gravity
*/
cleanupGravity() {
cleanupGravity(): void {
callAPI('settings.php', {action: 'cleanupGravity'}, (result) => {
this.setState({
text: ['successfully cleaned up gravity!']