style the video player
This commit is contained in:
parent
45da475ba6
commit
fcbfe7bc50
|
@ -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;
|
|
@ -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";
|
|
@ -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;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user