80 lines
2.4 KiB
TypeScript
80 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
import style from './Preview.module.css';
|
|
import {Spinner} from 'react-bootstrap';
|
|
import {Link} from 'react-router-dom';
|
|
import GlobalInfos from '../../utils/GlobalInfos';
|
|
import {APINode, 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<PreviewProps, PreviewState> {
|
|
constructor(props: PreviewProps) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
previewpicture: null
|
|
};
|
|
}
|
|
|
|
componentDidMount(): void {
|
|
callAPIPlain(APINode.Video, {action: 'readThumbnail', movieid: this.props.movie_id}, (result) => {
|
|
this.setState({
|
|
previewpicture: result
|
|
});
|
|
});
|
|
}
|
|
|
|
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.props.name}</div>
|
|
<div className={style.previewpic}>
|
|
{this.state.previewpicture !== null ?
|
|
<img className={style.previewimage}
|
|
src={this.state.previewpicture}
|
|
alt='Pic loading.'/> :
|
|
<span className={style.loadAnimation}><Spinner animation='border'/></span>}
|
|
|
|
</div>
|
|
<div className={style.previewbottom}>
|
|
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
|
|
);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Component for a Tag-name tile (used in category page)
|
|
*/
|
|
export class TagPreview extends React.Component<{ name: string }> {
|
|
render(): JSX.Element {
|
|
const themeStyle = GlobalInfos.getThemeStyle();
|
|
return (
|
|
<div
|
|
className={style.videopreview + ' ' + style.tagpreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}>
|
|
<div className={style.tagpreviewtitle + ' ' + themeStyle.lighttextcolor}>
|
|
{this.props.name}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Preview;
|