style the video player

This commit is contained in:
Ahmed-Ayman 2018-12-11 13:19:04 +02:00
parent 45da475ba6
commit fcbfe7bc50
3 changed files with 32 additions and 16 deletions

View File

@ -1,25 +1,19 @@
import React from 'react'; import React from 'react';
import Grid from 'react-css-grid';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import {getVideo} from '../utils/video'; import {getVideo} from '../utils/video';
import { Player } from 'video-react';
class VideoPlayer extends React.Component { class VideoPlayer extends React.Component {
render() { render() {
return ( return (
<Grid width={450}
gap={16}>
<section> <section>
<h2>{ this.props.title }</h2> <Player src={getVideo(this.props.id)} controls>
<video src={ getVideo(this.props.id) } controls> </Player>
</video> <h2 className='video-player-title'>{this.props.title}</h2>
<h3>date { this.props.date } </h3> <h3 className="video-player-date text-left">date {this.props.date} </h3>
</section> <p className="text-left">{this.props.description}</p>
<section className="text-left">
<p>{ this.props.description }</p>
</section> </section>
</Grid>
) )
} }
} }
@ -30,4 +24,5 @@ VideoPlayer.propTypes = {
description: PropTypes.string description: PropTypes.string
}; };
export default VideoPlayer; export default VideoPlayer;

View File

@ -5,4 +5,6 @@
@import "search"; @import "search";
@import "random-item"; @import "random-item";
@import "video-item"; @import "video-item";
@import "video-player";
@import "footer"; @import "footer";
@import "~video-react/styles/scss/video-react";

View File

@ -1 +1,20 @@
@import "variables"; @import "variables";
video{
margin-top: 3em;
}
.video-player-title
{
text-align: left;
padding: 1em 1em 0 1em;
background: $light-gray-color;
margin-top: 1em;
}
.video-player-date{
padding: 1em;
background: $light-gray-color;
text-align: left;
}
.video-react{
margin-top: 3em;
}