From 08310f78bbd70b6259db80df6995e16387ca4873 Mon Sep 17 00:00:00 2001 From: Lukas Heiligenbrunner Date: Sun, 24 Oct 2021 13:22:14 +0000 Subject: [PATCH] prerender preview size --- apiGo/api/Video.go | 6 +-- apiGo/api/types/Types.go | 1 + .../20211001195845_width_height.sql | 11 +++++ apiGo/videoparser/ReIndexVideos.go | 11 +++-- src/elements/Preview/Preview.module.css | 8 ---- src/elements/Preview/Preview.tsx | 46 +++++++++++++++++-- src/elements/Preview/Previw.test.js | 2 +- .../VideoContainer/VideoContainer.tsx | 1 + src/types/ApiTypes.ts | 1 + 9 files changed, 67 insertions(+), 20 deletions(-) create mode 100644 apiGo/database/migrations/20211001195845_width_height.sql diff --git a/apiGo/api/Video.go b/apiGo/api/Video.go index fa76621..69a25fa 100644 --- a/apiGo/api/Video.go +++ b/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 } diff --git a/apiGo/api/types/Types.go b/apiGo/api/types/Types.go index 680617f..4e96f1b 100644 --- a/apiGo/api/types/Types.go +++ b/apiGo/api/types/Types.go @@ -3,6 +3,7 @@ package types type VideoUnloadedType struct { MovieId int MovieName string + Ratio float32 } type FullVideoType struct { diff --git a/apiGo/database/migrations/20211001195845_width_height.sql b/apiGo/database/migrations/20211001195845_width_height.sql new file mode 100644 index 0000000..79d6703 --- /dev/null +++ b/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 diff --git a/apiGo/videoparser/ReIndexVideos.go b/apiGo/videoparser/ReIndexVideos.go index 14fa757..97fec47 100644 --- a/apiGo/videoparser/ReIndexVideos.go +++ b/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 (?,?,?,?,?,?,?)` - err, insertid = database.Insert(query, videoName, fileName, ppic, tmdbData.Thumbnail, vinfo.Width, vinfo.Length, tmdbData.ReleaseDate) + // inesert fixed pic ratio what we get from tmdb + 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 (?,?,?,?,?,?)` - err, insertid = database.Insert(query, videoName, fileName, ppic, ppic, vinfo.Width, vinfo.Length) + 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, previewRatio, vinfo.Length) } } else { fmt.Printf("FFmpeg error occured: %s\n", ffmpegErr.Error()) diff --git a/src/elements/Preview/Preview.module.css b/src/elements/Preview/Preview.module.css index 1fd5289..66762d8 100644 --- a/src/elements/Preview/Preview.module.css +++ b/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; } diff --git a/src/elements/Preview/Preview.tsx b/src/elements/Preview/Preview.tsx index 93abc7c..2904418 100644 --- a/src/elements/Preview/Preview.tsx +++ b/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 { // 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 { } render(): JSX.Element { - if (this.props.linkPath !== undefined) { + if (this.props.linkPath != null) { return {this.content()}; } else { return this.content(); @@ -52,12 +58,31 @@ class Preview extends React.Component { 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 (
-
{this.props.name}
-
+
+ {this.props.name} +
+
{this.state.picLoaded === false ? ( { ) : ( - Pic loading. + Pic loading. )}
diff --git a/src/elements/Preview/Previw.test.js b/src/elements/Preview/Previw.test.js index ee84fdc..98fb633 100644 --- a/src/elements/Preview/Previw.test.js +++ b/src/elements/Preview/Previw.test.js @@ -20,7 +20,7 @@ describe('', 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'); }); diff --git a/src/elements/VideoContainer/VideoContainer.tsx b/src/elements/VideoContainer/VideoContainer.tsx index e06c525..8698f12 100644 --- a/src/elements/VideoContainer/VideoContainer.tsx +++ b/src/elements/VideoContainer/VideoContainer.tsx @@ -15,6 +15,7 @@ const VideoContainer = (props: Props): JSX.Element => { renderElement={(el): JSX.Element => ( 0 ? el.Ratio : undefined} picLoader={(callback: (pic: string) => void): void => { callAPIPlain( APINode.Video, diff --git a/src/types/ApiTypes.ts b/src/types/ApiTypes.ts index 389c196..538c52a 100644 --- a/src/types/ApiTypes.ts +++ b/src/types/ApiTypes.ts @@ -27,6 +27,7 @@ export namespace VideoTypes { export interface VideoUnloadedType { MovieId: number; MovieName: string; + Ratio: number; } }