prerender preview size

src/elements/Preview/Preview.module.css

@@ -2,7 +2,6 @@
     font-size: smaller;
     font-weight: bold;
     height: 20px;
-    max-width: 266px;
     text-align: center;
 }
 
@@ -20,13 +19,6 @@
     vertical-align: middle;
 }
 
-.previewimage {
-    max-height: 400px;
-    max-width: 410px;
-    min-height: 150px;
-    min-width: 266px;
-}
-
 .previewbottom {
     height: 20px;
 }

src/elements/Preview/Preview.tsx

@@ -11,6 +11,7 @@ interface PreviewProps {
     picLoader: (callback: (pic: string) => void) => void;
     linkPath?: string;
     onClick?: () => void;
+    aspectRatio?: number;
 }
 
 interface PreviewState {
@@ -25,6 +26,11 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
     // store the picture to display
     pic?: string;
 
+    static readonly DefMinWidth = 266;
+    static readonly DefMaxWidth = 410;
+    static readonly DefMinHeight = 150;
+    static readonly DefMaxHeight = 400;
+
     constructor(props: PreviewProps) {
         super(props);
 
@@ -43,7 +49,7 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
     }
 
     render(): JSX.Element {
-        if (this.props.linkPath !== undefined) {
+        if (this.props.linkPath != null) {
             return <Link to={this.props.linkPath}>{this.content()}</Link>;
         } else {
             return this.content();
@@ -52,12 +58,31 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
 
     content(): JSX.Element {
         const themeStyle = GlobalInfos.getThemeStyle();
+        const ratio = this.props.aspectRatio;
+        let dimstyle = null;
+
+        // check if aspect ratio is passed
+        if (ratio != null) {
+            // if ratio is <1 we need to calc height
+            if (ratio < 1) {
+                const height = Preview.DefMaxWidth * ratio;
+                dimstyle = {height: height, width: Preview.DefMaxWidth};
+            } else {
+                const width = Preview.DefMaxHeight * ratio;
+                dimstyle = {width: width, height: Preview.DefMaxHeight};
+            }
+        }
+
         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}>
+                <div
+                    style={{maxWidth: dimstyle !== null ? dimstyle.width : Preview.DefMaxWidth}}
+                    className={style.previewtitle + ' ' + themeStyle.lighttextcolor}>
+                    {this.props.name}
+                </div>
+                <div style={dimstyle !== null ? dimstyle : undefined} className={style.previewpic}>
                     {this.state.picLoaded === false ? (
                         <FontAwesomeIcon
                             style={{
@@ -72,7 +97,20 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
                             <Spinner animation='border' />
                         </span>
                     ) : (
-                        <img className={style.previewimage} src={this.pic} alt='Pic loading.' />
+                        <img
+                            style={
+                                dimstyle !== null
+                                    ? dimstyle
+                                    : {
+                                          minWidth: Preview.DefMinWidth,
+                                          maxWidth: Preview.DefMaxWidth,
+                                          minHeight: Preview.DefMinHeight,
+                                          maxHeight: Preview.DefMaxHeight
+                                      }
+                            }
+                            src={this.pic}
+                            alt='Pic loading.'
+                        />
                     )}
                 </div>
                 <div className={style.previewbottom} />

src/elements/Preview/Previw.test.js

@@ -20,7 +20,7 @@ describe('<Preview/>', function () {
         expect(func).toHaveBeenCalledTimes(1)
 
         // received picture should be rendered into wrapper
-        expect(wrapper.find('.previewimage').props().src).toBe('42');
+        expect(wrapper.find('img').props().src).toBe('42');
         // check if preview title renders correctly
         expect(wrapper.find('.previewtitle').text()).toBe('test');
     });