From 462006ab0af8f4663cdec1775a48d1889943207c Mon Sep 17 00:00:00 2001
From: Dom Masters <dom@processcreative.com.au>
Date: Mon, 7 May 2018 08:34:48 +1000
Subject: [PATCH] Improving Video Section

---
 public/section/video/VideoSection.jsx |  3 ++-
 public/styles/index.scss              |  1 +
 public/styles/objects/_video.scss     | 18 ++++++++++++++++++
 public/video/Video.jsx                | 21 ++++++++++++++++++---
 4 files changed, 39 insertions(+), 4 deletions(-)
 create mode 100644 public/styles/objects/_video.scss

diff --git a/public/section/video/VideoSection.jsx b/public/section/video/VideoSection.jsx
index f90be92..e0c0d02 100644
--- a/public/section/video/VideoSection.jsx
+++ b/public/section/video/VideoSection.jsx
@@ -35,7 +35,8 @@ class VideoSection extends React.Component {
       <Section full={this.props.full} className="c-video-section">
         <Video
           className="c-video-section__video"
-          sources={ this.props.sources ? this.props.sources : this.props }
+          autoPlay
+          loop
         />
 
         { this.props.children }
diff --git a/public/styles/index.scss b/public/styles/index.scss
index c73fd10..a544849 100644
--- a/public/styles/index.scss
+++ b/public/styles/index.scss
@@ -52,6 +52,7 @@
 
 @import './objects/_app.scss';
 @import './objects/_navbar.scss';
+@import './objects/_video.scss';
 
 //Components
 @import './components/_page.scss';
diff --git a/public/styles/objects/_video.scss b/public/styles/objects/_video.scss
new file mode 100644
index 0000000..fc10eb8
--- /dev/null
+++ b/public/styles/objects/_video.scss
@@ -0,0 +1,18 @@
+/*
+ *  Video
+ *    Video Object, with general fallbacks and smarter controls for better
+ *    cross-browser compatibility.
+ *    
+ *    Also allows for better and more styled controls.
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.0 - 2018/05/07
+ */
+.o-video {
+
+  &__video {
+
+  }
+}
diff --git a/public/video/Video.jsx b/public/video/Video.jsx
index ceec3da..0f402e6 100644
--- a/public/video/Video.jsx
+++ b/public/video/Video.jsx
@@ -36,6 +36,7 @@ class Video extends React.Component {
 
   render() {
     //TODO: Add image fallback support.
+    //TODO: Add state support, as well as functional controls.
     let sources = [];
     let sourceProps = this.props.sources ? this.props.sources : this.props;
 
@@ -47,11 +48,25 @@ class Video extends React.Component {
 
     let clazz = "o-video";
     if(this.props.className) clazz += " " + this.props.className;
+    if(sourceProps.image) clazz += " has-image";
+    if(sourceProps.gif) clazz += " has-gif";
+    if(this.props.autoplay) clazz += " is-autoplaying";
+    if(this.props.loop) clazz += " is-looping";
 
     return (
-      <video className={clazz}>
-        { sources }
-      </video>
+      <div class={clazz}>
+        { /* Video Element (And sources) */ }
+        <video className="o-video__video" autoPlay={this.props.autoPlay} loop={this.props.loop} >
+          { sources }
+        </video>
+
+        { /* Fallback Picture */ }
+        {
+          if(sourceProps.image) {
+            <img src={sourceProps.image} className="o-video__image" />
+          }
+        }
+      </div>
     );
   }
 }