prerender preview size

apiGo/api/Video.go

@@ -73,12 +73,12 @@ func getVideoHandlers() {
 		var query string
 		// 1 is the id of the ALL tag
 		if args.Tag != 1 {
-			query = fmt.Sprintf(`SELECT movie_id,movie_name,t.tag_name FROM videos
+			query = fmt.Sprintf(`SELECT movie_id,movie_name,previewratio,t.tag_name FROM videos
 					INNER JOIN video_tags vt on videos.movie_id = vt.video_id
 					INNER JOIN tags t on vt.tag_id = t.tag_id
 					WHERE t.tag_id = %d %s`, args.Tag, SortClause)
 		} else {
-			query = fmt.Sprintf("SELECT movie_id,movie_name, (SELECT 'All' as tag_name) FROM videos %s", SortClause)
+			query = fmt.Sprintf("SELECT movie_id,movie_name,previewratio, (SELECT 'All' as tag_name) FROM videos %s", SortClause)
 		}
 
 		var result struct {
@@ -91,7 +91,7 @@ func getVideoHandlers() {
 		var name string
 		for rows.Next() {
 			var vid types.VideoUnloadedType
-			err := rows.Scan(&vid.MovieId, &vid.MovieName, &name)
+			err := rows.Scan(&vid.MovieId, &vid.MovieName, &vid.Ratio, &name)
 			if err != nil {
 				return
 			}

apiGo/api/types/Types.go

@@ -3,6 +3,7 @@ package types
 type VideoUnloadedType struct {
 	MovieId   int
 	MovieName string
+	Ratio     float32
 }
 
 type FullVideoType struct {

apiGo/database/migrations/20211001195845_width_height.sql

@@ -0,0 +1,11 @@
+-- +goose Up
+-- +goose StatementBegin
+alter table videos
+    add previewratio FLOAT default  -1.0 null;
+-- +goose StatementEnd
+
+-- +goose Down
+-- +goose StatementBegin
+alter table videos
+    drop previewratio;
+-- +goose StatementEnd

apiGo/videoparser/ReIndexVideos.go

@@ -119,12 +119,15 @@ func addVideo(videoName string, fileName string, year int) {
 
 	if ffmpegErr == nil {
 		if mSettings.TMDBGrabbing && tmdbData != nil {
-			query := `INSERT INTO videos(movie_name,movie_url,poster,thumbnail,quality,length,release_date) VALUES (?,?,?,?,?,?,?)`
+			// inesert fixed pic ratio what we get from tmdb
-			err, insertid = database.Insert(query, videoName, fileName, ppic, tmdbData.Thumbnail, vinfo.Width, vinfo.Length, tmdbData.ReleaseDate)
+			previewRatio := 2 / 3
+			query := `INSERT INTO videos(movie_name,movie_url,poster,thumbnail,quality,previewratio,length,release_date) VALUES (?,?,?,?,?,?,?,?)`
+			err, insertid = database.Insert(query, videoName, fileName, ppic, tmdbData.Thumbnail, vinfo.Width, previewRatio, vinfo.Length, tmdbData.ReleaseDate)
 		} else {
+			previewRatio := float32(vinfo.Height) / float32(vinfo.Width)
 			// insert without tmdb info
-			query := `INSERT INTO videos(movie_name,movie_url,poster,thumbnail,quality,length) VALUES (?,?,?,?,?,?)`
+			query := `INSERT INTO videos(movie_name,movie_url,poster,thumbnail,quality,previewratio,length) VALUES (?,?,?,?,?,?,?)`
-			err, insertid = database.Insert(query, videoName, fileName, ppic, ppic, vinfo.Width, vinfo.Length)
+			err, insertid = database.Insert(query, videoName, fileName, ppic, ppic, vinfo.Width, previewRatio, vinfo.Length)
 		}
 	} else {
 		fmt.Printf("FFmpeg error occured: %s\n", ffmpegErr.Error())

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
-                <div className={style.previewpic}>
+                    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');
     });

src/elements/VideoContainer/VideoContainer.tsx

@@ -15,6 +15,7 @@ const VideoContainer = (props: Props): JSX.Element => {
             renderElement={(el): JSX.Element => (
                 <Preview
                     key={el.MovieId}
+                    aspectRatio={el.Ratio > 0 ? el.Ratio : undefined}
                     picLoader={(callback: (pic: string) => void): void => {
                         callAPIPlain(
                             APINode.Video,

src/types/ApiTypes.ts

@@ -27,6 +27,7 @@ export namespace VideoTypes {
     export interface VideoUnloadedType {
         MovieId: number;
         MovieName: string;
+        Ratio: number;
     }
 }