lukas/OpenMediaCenter
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

added a loading animation to the video previews

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/elements/Preview/Preview.css
View File

@ -8,8 +8,17 @@
}
.previewpic {
min-width: 266px;
min-height: 150px;
height: 80%;
overflow: hidden;
text-align: center;
}
.loadAnimation {
display: inline-block;
line-height: 150px;
vertical-align: center;
}
.previewimage {

10
src/elements/Preview/Preview.js
View File

@ -2,6 +2,7 @@ import React from "react";
import "./Preview.css";
import Player from "../../pages/Player/Player";
import VideoContainer from "../VideoContainer/VideoContainer";
import {Spinner} from "react-bootstrap";
class Preview extends React.Component {
constructor(props, context) {
@ -42,9 +43,12 @@ class Preview extends React.Component {
<div className='videopreview' onClick={() => this.itemClick()}>
<div className='previewtitle'>{this.state.name}</div>
<div className='previewpic'>
<img className='previewimage'
src={this.state.previewpicture}
alt='Pic loading.'/>
{this.state.previewpicture != null ?
<img className='previewimage'
src={this.state.previewpicture}
alt='Pic loading.'/> :
<span className='loadAnimation'><Spinner animation="border"/></span>}
</div>
<div className='previewbottom'>