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 {
font-size: smaller;
.previewText {
font-size: 15px;
font-weight: bold;
height: 20px;
max-width: 266px;
height: 42px;
width: 100%;
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 {
@ -12,6 +22,8 @@
min-width: 266px;
overflow: hidden;
text-align: center;
border-radius: 20px;
}
.loadAnimation {
@ -38,6 +50,7 @@
margin-left: 25px;
margin-top: 25px;
opacity: 0.85;
position: relative;
}
.videopreview:hover {

View File

@ -42,30 +42,35 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
return (
<Link to={'/player/' + this.props.movieId}>
<div className={style.videopreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}>
<div className={style.previewtitle + ' ' + themeStyle.lighttextcolor}>{this.props.name}</div>
<div className={style.previewpic}>
{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 className={style.previewpic}>{this.renderPic()}</div>
<div className={style.previewText + ' ' + themeStyle.lighttextcolor}>{this.props.name}</div>
</div>
</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.' />;
}
}
}
/**