Compare commits
1 Commits
master
...
newPreview
Author | SHA1 | Date | |
---|---|---|---|
f264faff31 |
@ -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 {
|
||||
|
@ -42,9 +42,16 @@ 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 === '' ? (
|
||||
<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',
|
||||
@ -53,18 +60,16 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
|
||||
icon={faPhotoVideo}
|
||||
size='5x'
|
||||
/>
|
||||
) : this.state.previewpicture === null ? (
|
||||
);
|
||||
} else if (this.state.previewpicture === null) {
|
||||
return (
|
||||
<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>
|
||||
</Link>
|
||||
);
|
||||
} else {
|
||||
return <img className={style.previewimage} src={this.state.previewpicture} alt='Pic loading.' />;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user