OpenMediaCenter/src/elements/Preview/Preview.tsx

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 {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faPhotoVideo} from '@fortawesome/free-solid-svg-icons';

interface PreviewProps {
    name: string;
    picLoader: (callback: (pic: string) => void) => void;
    linkPath?: string;
    onClick?: () => void;
}

interface PreviewState {
    picLoaded: boolean | null;
}

/**
 * Component for single preview tile
 * floating side by side
 */
class Preview extends React.Component<PreviewProps, PreviewState> {
    // store the picture to display
    pic?: string;

    constructor(props: PreviewProps) {
        super(props);

        this.state = {
            picLoaded: null
        };
    }

    componentDidMount(): void {
        this.props.picLoader((result) => {
            this.pic = result;
            this.setState({
                picLoaded: result !== ''
            });
        });
    }

    render(): JSX.Element {
        if (this.props.linkPath !== undefined) {
            return <Link to={this.props.linkPath}>{this.content()}</Link>;
        } else {
            return this.content();
        }
    }

    content(): JSX.Element {
        const themeStyle = GlobalInfos.getThemeStyle();
        return (
            <div
                className={style.videopreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}
                onClick={this.props.onClick}>
                <div className={style.previewtitle + ' ' + themeStyle.lighttextcolor}>{this.props.name}</div>
                <div className={style.previewpic}>
                    {this.state.picLoaded === false ? (
                        <FontAwesomeIcon
                            style={{
                                color: 'white',
                                marginTop: '55px'
                            }}
                            icon={faPhotoVideo}
                            size='5x'
                        />
                    ) : this.state.picLoaded === null ? (
                        <span className={style.loadAnimation}>
                            <Spinner animation='border' />
                        </span>
                    ) : (
                        <img className={style.previewimage} src={this.pic} alt='Pic loading.' />
                    )}
                </div>
                <div className={style.previewbottom} />
            </div>
        );
    }
}

/**
 * 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;