* no unauthorized init

* more dynamic Preview element

src/elements/Preview/Preview.tsx

@@ -3,17 +3,18 @@ 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';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faPhotoVideo} from '@fortawesome/free-solid-svg-icons';
 
 interface PreviewProps {
     name: string;
-    movieId: number;
+    picLoader: (callback: (pic: string) => void) => void;
+    linkPath?: string;
+    onClick?: () => void;
 }
 
 interface PreviewState {
-    previewpicture: string | null;
+    picLoaded: boolean | null;
 }
 
 /**
@@ -21,49 +22,61 @@ interface PreviewState {
  * 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 = {
-            previewpicture: null
+            picLoaded: null
         };
     }
 
     componentDidMount(): void {
-        callAPIPlain(APINode.Video, {action: 'readThumbnail', movieid: this.props.movieId}, (result) => {
+        this.props.picLoader((result) => {
+            this.pic = result;
             this.setState({
-                previewpicture: result
+                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 (
-            <Link to={'/player/' + this.props.movieId}>
-                <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 === '' ? (
-                            <FontAwesomeIcon
-                                style={{
-                                    color: 'white',
-                                    marginTop: '55px'
-                                }}
-                                icon={faPhotoVideo}
-                                size='5x'
-                            />
-                        ) : this.state.previewpicture === null ? (
-                            <span className={style.loadAnimation}>
-                                <Spinner animation='border' />
-                            </span>
-                        ) : (
-                            <img className={style.previewimage} src={this.state.previewpicture} alt='Pic loading.' />
-                        )}
-                    </div>
-                    <div className={style.previewbottom} />
+            <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>
-            </Link>
+                <div className={style.previewbottom} />
+            </div>
         );
     }
 }