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

View File

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

View File

@ -1 +1,20 @@
@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;
}