* no unauthorized init

* more dynamic Preview element

src/elements/DynamicContentContainer/DynamicContentContainer.tsx

@@ -9,7 +9,6 @@ interface Props<T> {
 
 interface state<T> {
     loadeditems: T[];
-    selectionnr: number;
 }
 
 /**
@@ -24,8 +23,7 @@ class DynamicContentContainer<T> extends React.Component<Props<T>, state<T>> {
         super(props);
 
         this.state = {
-            loadeditems: [],
-            selectionnr: 0
+            loadeditems: []
         };
     }
 
@@ -35,6 +33,22 @@ class DynamicContentContainer<T> extends React.Component<Props<T>, state<T>> {
         this.loadPreviewBlock(this.props.initialLoadNr ? this.props.initialLoadNr : 16);
     }
 
+    componentDidUpdate(prevProps: Props<T>): void {
+        // when source props change force update!
+        if (prevProps.data.length !== this.props.data.length) {
+            this.clean();
+            this.loadPreviewBlock(this.props.initialLoadNr ? this.props.initialLoadNr : 16);
+        }
+    }
+
+    /**
+     * clear all elements rendered...
+     */
+    clean(): void {
+        this.loadindex = 0;
+        this.setState({loadeditems: []});
+    }
+
     render(): JSX.Element {
         return (
             <div className={style.maincontent}>

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>
         );
     }
 }

src/elements/VideoContainer/VideoContainer.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Preview from '../Preview/Preview';
 import {VideoTypes} from '../../types/ApiTypes';
 import DynamicContentContainer from '../DynamicContentContainer/DynamicContentContainer';
+import {APINode, callAPIPlain} from '../../utils/Api';
 
 interface Props {
     data: VideoTypes.VideoUnloadedType[];
@@ -11,7 +12,23 @@ interface Props {
 const VideoContainer = (props: Props): JSX.Element => {
     return (
         <DynamicContentContainer
-            renderElement={(el): JSX.Element => <Preview key={el.MovieId} name={el.MovieName} movieId={el.MovieId} />}
+            renderElement={(el): JSX.Element => (
+                <Preview
+                    key={el.MovieId}
+                    picLoader={(callback: (pic: string) => void): void => {
+                        callAPIPlain(
+                            APINode.Video,
+                            {
+                                action: 'readThumbnail',
+                                movieid: el.MovieId
+                            },
+                            (result) => callback(result)
+                        );
+                    }}
+                    name={el.MovieName}
+                    linkPath={'/player/' + el.MovieId}
+                />
+            )}
             data={props.data}>
             {props.children}
         </DynamicContentContainer>