From fcbfe7bc5039e72b0b7fa7cb125560b1461f3115 Mon Sep 17 00:00:00 2001
From: Ahmed-Ayman <ahmedayman055g@gmail.com>
Date: Tue, 11 Dec 2018 13:19:04 +0200
Subject: [PATCH] style the video player

---
 src/components/VideoPlayer.js     | 25 ++++++++++---------------
 src/stylesheets/style.scss        |  4 +++-
 src/stylesheets/video-player.scss | 19 +++++++++++++++++++
 3 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/src/components/VideoPlayer.js b/src/components/VideoPlayer.js
index 8bdab40..d382473 100644
--- a/src/components/VideoPlayer.js
+++ b/src/components/VideoPlayer.js
@@ -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 {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>
-        </section>
+      <section>
+        <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;
\ No newline at end of file
diff --git a/src/stylesheets/style.scss b/src/stylesheets/style.scss
index 9d1152a..4deedde 100644
--- a/src/stylesheets/style.scss
+++ b/src/stylesheets/style.scss
@@ -5,4 +5,6 @@
 @import "search";
 @import "random-item";
 @import "video-item";
-@import "footer";
\ No newline at end of file
+@import "video-player";
+@import "footer";
+@import "~video-react/styles/scss/video-react";
\ No newline at end of file
diff --git a/src/stylesheets/video-player.scss b/src/stylesheets/video-player.scss
index 9132fb6..3ad6d0a 100644
--- a/src/stylesheets/video-player.scss
+++ b/src/stylesheets/video-player.scss
@@ -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;
+}
\ No newline at end of file