Merge branch 'preview-prerender' into 'master'

prerender preview size

See merge request lukas/openmediacenter!59
This commit is contained in:
Lukas Heiligenbrunner 2021-10-24 13:22:15 +00:00
commit be2b848f8e
9 changed files with 67 additions and 20 deletions

View File

@ -73,12 +73,12 @@ func getVideoHandlers() {
var query string var query string
// 1 is the id of the ALL tag // 1 is the id of the ALL tag
if args.Tag != 1 { 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 video_tags vt on videos.movie_id = vt.video_id
INNER JOIN tags t on vt.tag_id = t.tag_id INNER JOIN tags t on vt.tag_id = t.tag_id
WHERE t.tag_id = %d %s`, args.Tag, SortClause) WHERE t.tag_id = %d %s`, args.Tag, SortClause)
} else { } 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 { var result struct {
@ -91,7 +91,7 @@ func getVideoHandlers() {
var name string var name string
for rows.Next() { for rows.Next() {
var vid types.VideoUnloadedType 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 { if err != nil {
return return
} }

View File

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

View File

@ -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

View File

@ -119,12 +119,15 @@ func addVideo(videoName string, fileName string, year int) {
if ffmpegErr == nil { if ffmpegErr == nil {
if mSettings.TMDBGrabbing && tmdbData != 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 { } else {
previewRatio := float32(vinfo.Height) / float32(vinfo.Width)
// insert without tmdb info // 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 { } else {
fmt.Printf("FFmpeg error occured: %s\n", ffmpegErr.Error()) fmt.Printf("FFmpeg error occured: %s\n", ffmpegErr.Error())

View File

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

View File

@ -11,6 +11,7 @@ interface PreviewProps {
picLoader: (callback: (pic: string) => void) => void; picLoader: (callback: (pic: string) => void) => void;
linkPath?: string; linkPath?: string;
onClick?: () => void; onClick?: () => void;
aspectRatio?: number;
} }
interface PreviewState { interface PreviewState {
@ -25,6 +26,11 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
// store the picture to display // store the picture to display
pic?: string; pic?: string;
static readonly DefMinWidth = 266;
static readonly DefMaxWidth = 410;
static readonly DefMinHeight = 150;
static readonly DefMaxHeight = 400;
constructor(props: PreviewProps) { constructor(props: PreviewProps) {
super(props); super(props);
@ -43,7 +49,7 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
} }
render(): JSX.Element { render(): JSX.Element {
if (this.props.linkPath !== undefined) { if (this.props.linkPath != null) {
return <Link to={this.props.linkPath}>{this.content()}</Link>; return <Link to={this.props.linkPath}>{this.content()}</Link>;
} else { } else {
return this.content(); return this.content();
@ -52,12 +58,31 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
content(): JSX.Element { content(): JSX.Element {
const themeStyle = GlobalInfos.getThemeStyle(); 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 ( return (
<div <div
className={style.videopreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview} className={style.videopreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}
onClick={this.props.onClick}> 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 ? ( {this.state.picLoaded === false ? (
<FontAwesomeIcon <FontAwesomeIcon
style={{ style={{
@ -72,7 +97,20 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
<Spinner animation='border' /> <Spinner animation='border' />
</span> </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>
<div className={style.previewbottom} /> <div className={style.previewbottom} />

View File

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

View File

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

View File

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