Compare commits

...

1 Commits

Author SHA1 Message Date
f264faff31 new preview style 2021-04-27 22:22:41 +02:00
2 changed files with 42 additions and 24 deletions

View File

@ -1,9 +1,19 @@
.previewtitle { .previewText {
font-size: smaller; font-size: 15px;
font-weight: bold; font-weight: bold;
height: 20px; height: 42px;
max-width: 266px; width: 100%;
text-align: center; text-align: center;
position: absolute;
bottom: 0;
background-color: rgba(60, 61, 72, 0.7);
color: white;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-top-width: 1px;
border-top-color: #3c3d48;
border-top-style: solid;
} }
.previewpic { .previewpic {
@ -12,6 +22,8 @@
min-width: 266px; min-width: 266px;
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
border-radius: 20px;
} }
.loadAnimation { .loadAnimation {
@ -38,6 +50,7 @@
margin-left: 25px; margin-left: 25px;
margin-top: 25px; margin-top: 25px;
opacity: 0.85; opacity: 0.85;
position: relative;
} }
.videopreview:hover { .videopreview:hover {

View File

@ -42,30 +42,35 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
return ( return (
<Link to={'/player/' + this.props.movieId}> <Link to={'/player/' + this.props.movieId}>
<div className={style.videopreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}> <div className={style.videopreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}>
<div className={style.previewtitle + ' ' + themeStyle.lighttextcolor}>{this.props.name}</div> <div className={style.previewpic}>{this.renderPic()}</div>
<div className={style.previewpic}> <div className={style.previewText + ' ' + themeStyle.lighttextcolor}>{this.props.name}</div>
{this.state.previewpicture === '' ? (
<FontAwesomeIcon
style={{
color: 'white',
marginTop: '55px'
}}
icon={faPhotoVideo}
size='5x'
/>
) : this.state.previewpicture === null ? (
<span className={style.loadAnimation}>
<Spinner animation='border' />
</span>
) : (
<img className={style.previewimage} src={this.state.previewpicture} alt='Pic loading.' />
)}
</div>
<div className={style.previewbottom} />
</div> </div>
</Link> </Link>
); );
} }
private renderPic(): JSX.Element {
if (this.state.previewpicture === '') {
return (
<FontAwesomeIcon
style={{
color: 'white',
marginTop: '55px'
}}
icon={faPhotoVideo}
size='5x'
/>
);
} else if (this.state.previewpicture === null) {
return (
<span className={style.loadAnimation}>
<Spinner animation='border' />
</span>
);
} else {
return <img className={style.previewimage} src={this.state.previewpicture} alt='Pic loading.' />;
}
}
} }
/** /**