added a loading animation to the video previews
This commit is contained in:
parent
c4098a8d3d
commit
37e5a1a51e
@ -8,8 +8,17 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.previewpic {
|
.previewpic {
|
||||||
|
min-width: 266px;
|
||||||
|
min-height: 150px;
|
||||||
height: 80%;
|
height: 80%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loadAnimation {
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 150px;
|
||||||
|
vertical-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.previewimage {
|
.previewimage {
|
||||||
|
@ -2,6 +2,7 @@ import React from "react";
|
|||||||
import "./Preview.css";
|
import "./Preview.css";
|
||||||
import Player from "../../pages/Player/Player";
|
import Player from "../../pages/Player/Player";
|
||||||
import VideoContainer from "../VideoContainer/VideoContainer";
|
import VideoContainer from "../VideoContainer/VideoContainer";
|
||||||
|
import {Spinner} from "react-bootstrap";
|
||||||
|
|
||||||
class Preview extends React.Component {
|
class Preview extends React.Component {
|
||||||
constructor(props, context) {
|
constructor(props, context) {
|
||||||
@ -42,9 +43,12 @@ class Preview extends React.Component {
|
|||||||
<div className='videopreview' onClick={() => this.itemClick()}>
|
<div className='videopreview' onClick={() => this.itemClick()}>
|
||||||
<div className='previewtitle'>{this.state.name}</div>
|
<div className='previewtitle'>{this.state.name}</div>
|
||||||
<div className='previewpic'>
|
<div className='previewpic'>
|
||||||
|
{this.state.previewpicture != null ?
|
||||||
<img className='previewimage'
|
<img className='previewimage'
|
||||||
src={this.state.previewpicture}
|
src={this.state.previewpicture}
|
||||||
alt='Pic loading.'/>
|
alt='Pic loading.'/> :
|
||||||
|
<span className='loadAnimation'><Spinner animation="border"/></span>}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div className='previewbottom'>
|
<div className='previewbottom'>
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user