lukas/OpenMediaCenter
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

prerender preview size

Browse Source
This commit is contained in:
Lukas Heiligenbrunner 2021-10-24 13:22:14 +00:00
parent 3d1671d6b5
commit 08310f78bb
9 changed files with 67 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apiGo/api/Video.go
View File

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

1
apiGo/api/types/Types.go
View File

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

11
apiGo/database/migrations/20211001195845_width_height.sql Normal file
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

11
apiGo/videoparser/ReIndexVideos.go
View File

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

8
src/elements/Preview/Preview.module.css
View File

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

46
src/elements/Preview/Preview.tsx
View File

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

2
src/elements/Preview/Previw.test.js
View File

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

1
src/elements/VideoContainer/VideoContainer.tsx
View File

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

1
src/types/ApiTypes.ts
View File

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