new preview style

This commit is contained in:
lukas 2021-04-27 22:22:41 +02:00
parent 4465840657
commit f264faff31
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,9 +42,16 @@ 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 === '' ? ( </div>
</Link>
);
}
private renderPic(): JSX.Element {
if (this.state.previewpicture === '') {
return (
<FontAwesomeIcon <FontAwesomeIcon
style={{ style={{
color: 'white', color: 'white',
@ -53,18 +60,16 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
icon={faPhotoVideo} icon={faPhotoVideo}
size='5x' size='5x'
/> />
) : this.state.previewpicture === null ? ( );
} else if (this.state.previewpicture === null) {
return (
<span className={style.loadAnimation}> <span className={style.loadAnimation}>
<Spinner animation='border' /> <Spinner animation='border' />
</span> </span>
) : (
<img className={style.previewimage} src={this.state.previewpicture} alt='Pic loading.' />
)}
</div>
<div className={style.previewbottom} />
</div>
</Link>
); );
} else {
return <img className={style.previewimage} src={this.state.previewpicture} alt='Pic loading.' />;
}
} }
} }