added a loading animation to the video previews
This commit is contained in:
		| @@ -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'> | ||||||
|                     <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'> | ||||||
|  |  | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user