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

10
src/App.tsx
View File

@@ -16,6 +16,7 @@ import {BrowserRouter as Router, NavLink, Route, Switch} from 'react-router-dom'
import Player from './pages/Player/Player';
import ActorOverviewPage from './pages/ActorOverviewPage/ActorOverviewPage';
import ActorPage from './pages/ActorPage/ActorPage';
import {SettingsTypes} from './types/ApiTypes';
interface state {
generalSettingsLoaded: boolean;
@@ -24,13 +25,6 @@ interface state {
onapierror: boolean;
}
interface initialApiCallData {
DarkMode: boolean;
passwordEnabled: boolean;
mediacenter_name: string;
}
/**
* The main App handles the main tabs and which content to show
*/
@@ -47,7 +41,7 @@ class App extends React.Component<{}, state> {
initialAPICall(): void {
// this is the first api call so if it fails we know there is no connection to backend
callAPI('settings.php', {action: 'loadInitialData'}, (result: initialApiCallData) => {
callAPI('settings.php', {action: 'loadInitialData'}, (result: SettingsTypes.initialApiCallData) => {
// set theme
GlobalInfos.enableDarkTheme(result.DarkMode);

31
src/api/VideoTypes.ts
View File

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

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

@@ -3,7 +3,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faUser} from '@fortawesome/free-solid-svg-icons';
import React from 'react';
import {Link} from 'react-router-dom';
import {ActorType} from '../../api/VideoTypes';
import {ActorType} from '../../types/VideoTypes';
interface props {
actor: ActorType;

15
src/elements/InfoHeaderItem/InfoHeaderItem.js → src/elements/InfoHeaderItem/InfoHeaderItem.tsx
View File

@@ -2,14 +2,23 @@ import React from 'react';
import style from './InfoHeaderItem.module.css';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
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
}
/**
* a component to display one of the short quickinfo tiles on dashboard
*/
class InfoHeaderItem extends React.Component {
render() {
class InfoHeaderItem extends React.Component<props> {
render(): JSX.Element {
return (
<div onClick={() => {
<div onClick={(): void => {
// call clicklistener if defined
if (this.props.onClick != null) this.props.onClick();
}} className={style.infoheaderitem} style={{backgroundColor: this.props.backColor}}>

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

@@ -4,8 +4,8 @@ import ActorTile from '../../ActorTile/ActorTile';
import style from './AddActorPopup.module.css';
import {NewActorPopupContent} from '../NewActorPopup/NewActorPopup';
import {callAPI} from '../../../utils/Api';
import {ActorType} from '../../../api/VideoTypes';
import {GeneralSuccess} from '../../../api/GeneralTypes';
import {ActorType} from '../../../types/VideoTypes';
import {GeneralSuccess} from '../../../types/GeneralTypes';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faFilter, faTimes} from '@fortawesome/free-solid-svg-icons';
import {Button} from '../../GPElements/Button';
@@ -26,6 +26,9 @@ interface state {
* Popup for Adding a new Actor to a Video
*/
class AddActorPopup extends React.Component<props, state> {
// filterfield anchor, needed to focus after filter btn click
private filterfield: HTMLInputElement | null | undefined;
constructor(props: props) {
super(props);
@@ -89,7 +92,8 @@ class AddActorPopup extends React.Component<props, state> {
type='text' placeholder='Filter' value={this.state.filter}
onChange={(e): void => {
this.setState({filter: e.target.value});
}}/>
}}
ref={(input): void => {this.filterfield = input;}}/>
<Button title={<FontAwesomeIcon style={{
verticalAlign: 'middle',
lineHeight: '130px'
@@ -101,7 +105,10 @@ class AddActorPopup extends React.Component<props, state> {
verticalAlign: 'middle',
lineHeight: '130px'
}} icon={faFilter} size='1x'/></span>} color={{backgroundColor: 'cornflowerblue', color: 'white'}} onClick={(): void => {
this.setState({filtervisible: true});
this.setState({filtervisible: true}, () => {
// focus filterfield after state update
this.filterfield?.focus();
});
}}/>
}
</div>

30
src/elements/Popups/AddTagPopup/AddTagPopup.js → src/elements/Popups/AddTagPopup/AddTagPopup.tsx
View File

@@ -2,19 +2,31 @@ import React from 'react';
import Tag from '../../Tag/Tag';
import PopupBase from '../PopupBase';
import {callAPI} from '../../../utils/Api';
import {TagType} from '../../../types/VideoTypes';
import {GeneralSuccess} from '../../../types/GeneralTypes';
interface props {
onHide: () => void;
submit: (tagId: number, tagName: string) => void;
movie_id: number;
}
interface state {
items: TagType[];
}
/**
* component creates overlay to add a new tag to a video
*/
class AddTagPopup extends React.Component {
constructor(props, context) {
super(props, context);
class AddTagPopup extends React.Component<props, state> {
constructor(props: props) {
super(props);
this.state = {items: []};
}
componentDidMount() {
callAPI('tags.php', {action: 'getAllTags'}, (result) => {
componentDidMount(): void {
callAPI('tags.php', {action: 'getAllTags'}, (result: TagType[]) => {
console.log(result);
this.setState({
items: result
@@ -22,13 +34,13 @@ class AddTagPopup extends React.Component {
});
}
render() {
render(): JSX.Element {
return (
<PopupBase title='Add a Tag to this Video:' onHide={this.props.onHide}>
{this.state.items ?
this.state.items.map((i) => (
<Tag tagInfo={i}
onclick={() => {
onclick={(): void => {
this.addTag(i.tag_id, i.tag_name);
}}/>
)) : null}
@@ -41,8 +53,8 @@ class AddTagPopup extends React.Component {
* @param tagid tag id to add
* @param tagname tag name to add
*/
addTag(tagid, tagname) {
callAPI('tags.php', {action: 'addTag', id: tagid, movieid: this.props.movie_id}, result => {
addTag(tagid: number, tagname: string): void {
callAPI('tags.php', {action: 'addTag', id: tagid, movieid: this.props.movie_id}, (result: GeneralSuccess) => {
if (result.result !== 'success') {
console.log('error occured while writing to db -- todo error handling');
console.log(result.result);

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

@@ -2,7 +2,7 @@ import React from 'react';
import PopupBase from '../PopupBase';
import style from './NewActorPopup.module.css';
import {callAPI} from '../../../utils/Api';
import {GeneralSuccess} from '../../../api/GeneralTypes';
import {GeneralSuccess} from '../../../types/GeneralTypes';
interface NewActorPopupProps {
onHide: () => void;

23
src/elements/Popups/NewTagPopup/NewTagPopup.js → src/elements/Popups/NewTagPopup/NewTagPopup.tsx
View File

@@ -2,24 +2,25 @@ import React from 'react';
import PopupBase from '../PopupBase';
import style from './NewTagPopup.module.css';
import {callAPI} from '../../../utils/Api';
import {GeneralSuccess} from '../../../types/GeneralTypes';
interface props {
onHide: () => void
}
/**
* creates modal overlay to define a new Tag
*/
class NewTagPopup extends React.Component {
constructor(props, context) {
super(props, context);
class NewTagPopup extends React.Component<props> {
private value: string = '';
this.props = props;
}
render() {
render(): JSX.Element {
return (
<PopupBase title='Add new Tag' onHide={this.props.onHide} height='200px' width='400px'>
<div><input type='text' placeholder='Tagname' onChange={(v) => {
<div><input type='text' placeholder='Tagname' onChange={(v): void => {
this.value = v.target.value;
}}/></div>
<button className={style.savebtn} onClick={() => this.storeselection()}>Save</button>
<button className={style.savebtn} onClick={(): void => this.storeselection()}>Save</button>
</PopupBase>
);
}
@@ -27,8 +28,8 @@ class NewTagPopup extends React.Component {
/**
* store the filled in form to the backend
*/
storeselection() {
callAPI('tags.php', {action: 'createTag', tagname: this.value}, result => {
storeselection(): void {
callAPI('tags.php', {action: 'createTag', tagname: this.value}, (result: GeneralSuccess) => {
if (result.result !== 'success') {
console.log('error occured while writing to db -- todo error handling');
console.log(result.result);

41
src/elements/Popups/PopupBase.js → src/elements/Popups/PopupBase.tsx
View File

@@ -1,13 +1,24 @@
import GlobalInfos from '../../utils/GlobalInfos';
import style from './PopupBase.module.css';
import {Line} from '../PageTitle/PageTitle';
import React from 'react';
import React, {RefObject} from 'react';
interface props {
width?: string;
height?: string;
banner?: JSX.Element;
title: string;
onHide: () => void
}
/**
* wrapper class for generic types of popups
*/
class PopupBase extends React.Component {
constructor(props) {
class PopupBase extends React.Component<props> {
private wrapperRef: RefObject<HTMLDivElement>;
private framedimensions: { minHeight: string | undefined; width: string | undefined; height: string | undefined };
constructor(props: props) {
super(props);
this.state = {items: []};
@@ -25,7 +36,7 @@ class PopupBase extends React.Component {
};
}
componentDidMount() {
componentDidMount(): void {
document.addEventListener('mousedown', this.handleClickOutside);
document.addEventListener('keyup', this.keypress);
@@ -35,13 +46,13 @@ class PopupBase extends React.Component {
}
}
componentWillUnmount() {
componentWillUnmount(): void {
// remove the appended listeners
document.removeEventListener('mousedown', this.handleClickOutside);
document.removeEventListener('keyup', this.keypress);
}
render() {
render(): JSX.Element {
const themeStyle = GlobalInfos.getThemeStyle();
return (
<div style={this.framedimensions} className={[style.popup, themeStyle.thirdbackground].join(' ')} ref={this.wrapperRef}>
@@ -61,8 +72,8 @@ class PopupBase extends React.Component {
/**
* Alert if clicked on outside of element
*/
handleClickOutside(event) {
if (this.wrapperRef && !this.wrapperRef.current.contains(event.target)) {
handleClickOutside(event: MouseEvent): void {
if (this.wrapperRef && this.wrapperRef.current && !this.wrapperRef.current.contains(event.target as Node)) {
this.props.onHide();
}
}
@@ -71,7 +82,7 @@ class PopupBase extends React.Component {
* key event handling
* @param event keyevent
*/
keypress(event) {
keypress(event: KeyboardEvent): void {
// hide if escape is pressed
if (event.key === 'Escape') {
this.props.onHide();
@@ -81,16 +92,17 @@ class PopupBase extends React.Component {
/**
* make the element drag and droppable
*/
dragElement() {
dragElement(): void {
let xOld = 0, yOld = 0;
const elmnt = this.wrapperRef.current;
if (elmnt === null) return;
if (elmnt.firstChild === null) return;
elmnt.firstChild.onmousedown = dragMouseDown;
(elmnt.firstChild as HTMLDivElement).onmousedown = dragMouseDown;
function dragMouseDown(e) {
function dragMouseDown(e: MouseEvent): void {
e.preventDefault();
// get the mouse cursor position at startup:
xOld = e.clientX;
@@ -100,7 +112,7 @@ class PopupBase extends React.Component {
document.onmousemove = elementDrag;
}
function elementDrag(e) {
function elementDrag(e: MouseEvent): void {
e.preventDefault();
// calculate the new cursor position:
const dx = xOld - e.clientX;
@@ -108,11 +120,12 @@ class PopupBase extends React.Component {
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';
}
function closeDragElement() {
function closeDragElement(): void {
// stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;

31
src/elements/Preview/Preview.js → src/elements/Preview/Preview.tsx
View File

@@ -5,35 +5,42 @@ import {Link} from 'react-router-dom';
import GlobalInfos from '../../utils/GlobalInfos';
import {callAPIPlain} from '../../utils/Api';
interface PreviewProps{
name: string;
movie_id: number;
}
interface PreviewState {
previewpicture: string | null;
}
/**
* Component for single preview tile
* floating side by side
*/
class Preview extends React.Component {
constructor(props, context) {
super(props, context);
class Preview extends React.Component<PreviewProps, PreviewState> {
constructor(props: PreviewProps) {
super(props);
this.state = {
previewpicture: null,
name: null
previewpicture: null
};
}
componentDidMount() {
componentDidMount(): void {
callAPIPlain('video.php', {action: 'readThumbnail', movieid: this.props.movie_id}, (result) => {
this.setState({
previewpicture: result,
name: this.props.name
previewpicture: result
});
});
}
render() {
render(): JSX.Element {
const themeStyle = GlobalInfos.getThemeStyle();
return (
<Link to={'/player/' + this.props.movie_id}>
<div className={style.videopreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}>
<div className={style.previewtitle + ' ' + themeStyle.lighttextcolor}>{this.state.name}</div>
<div className={style.previewtitle + ' ' + themeStyle.lighttextcolor}>{this.props.name}</div>
<div className={style.previewpic}>
{this.state.previewpicture !== null ?
<img className={style.previewimage}
@@ -55,8 +62,8 @@ class Preview extends React.Component {
/**
* Component for a Tag-name tile (used in category page)
*/
export class TagPreview extends React.Component {
render() {
export class TagPreview extends React.Component<{name: string}> {
render(): JSX.Element {
const themeStyle = GlobalInfos.getThemeStyle();
return (
<div

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

@@ -2,7 +2,7 @@ import React from 'react';
import styles from './Tag.module.css';
import {Link} from 'react-router-dom';
import {TagType} from '../../api/VideoTypes';
import {TagType} from '../../types/VideoTypes';
interface props {
onclick?: (_: string) => void

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

@@ -1,14 +1,14 @@
import React from 'react';
import Preview from '../Preview/Preview';
import style from './VideoContainer.module.css';
import {VideoUnloadedType} from '../../api/VideoTypes';
import {VideoTypes} from '../../types/ApiTypes';
interface props {
data: VideoUnloadedType[]
data: VideoTypes.VideoUnloadedType[]
}
interface state {
loadeditems: VideoUnloadedType[];
loadeditems: VideoTypes.VideoUnloadedType[];
selectionnr: number;
}

2
src/index.js → src/index.tsx
View File

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

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!']

66
src/types/ApiTypes.ts Normal file
View File

@@ -0,0 +1,66 @@
import {ActorType, TagType} from './VideoTypes';
export namespace VideoTypes{
export interface loadVideoType {
movie_url: string
thumbnail: string
movie_id: number
movie_name: string
likes: number
quality: number
length: number
tags: TagType[]
suggesttag: TagType[]
actors: ActorType[]
}
export interface startDataType{
total: number;
fullhd: number;
hd: number;
sd: number;
tags: number;
}
export interface VideoUnloadedType {
movie_id: number;
movie_name: string
}
}
export namespace SettingsTypes{
export interface initialApiCallData {
DarkMode: boolean;
passwordEnabled: boolean;
mediacenter_name: string;
}
export interface loadGeneralSettingsType{
video_path: string,
episode_path: string,
mediacenter_name: string,
password: string,
passwordEnabled: boolean,
TMDB_grabbing: boolean,
videonr: number,
dbsize: number,
difftagnr: number,
tagsadded: number
}
export interface getStatusMessageType{
contentAvailable: boolean;
message: string;
}
}
export namespace ActorTypes{
/**
* result of actor fetch
*/
export interface videofetchresult {
videos: VideoTypes.VideoUnloadedType[];
info: ActorType;
}
}

0
src/api/GeneralTypes.ts → src/types/GeneralTypes.ts
View File

15
src/types/VideoTypes.ts Normal file
View File

@@ -0,0 +1,15 @@
/**
* type accepted by Tag component
*/
export interface TagType {
tag_name: string
tag_id: number
}
export interface ActorType {
thumbnail: string;
name: string;
actor_id: number;
}

2
src/utils/Api.ts
View File

@@ -40,7 +40,7 @@ function getAPIDomain(): string {
interface ApiBaseRequest {
action: string | number,
[_: string]: string | number
[_: string]: string | number | boolean
}
/**