added a loading animation to the video previews

This commit is contained in:
Lukas Heiligenbrunner 2020-06-18 21:53:48 +02:00
parent c4098a8d3d
commit 37e5a1a51e
2 changed files with 16 additions and 3 deletions

View File

@ -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 {

View File

@ -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'>
<img className='previewimage' {this.state.previewpicture != null ?
src={this.state.previewpicture} <img className='previewimage'
alt='Pic loading.'/> src={this.state.previewpicture}
alt='Pic loading.'/> :
<span className='loadAnimation'><Spinner animation="border"/></span>}
</div> </div>
<div className='previewbottom'> <div className='previewbottom'>