From 048a697037c864d6c378503b6d3a1eb4d585bc49 Mon Sep 17 00:00:00 2001
From: Dominic Masters <dominic@domsplace.com>
Date: Sun, 18 Mar 2018 14:15:12 +1100
Subject: [PATCH] Added video-title

---
 public/components/title/VideoTitle.jsx  | 49 +++++++++++++++++++++++++
 public/styles/objects/_video-title.scss | 47 ++++++++++++++++++++++++
 2 files changed, 96 insertions(+)
 create mode 100644 public/components/title/VideoTitle.jsx
 create mode 100644 public/styles/objects/_video-title.scss

diff --git a/public/components/title/VideoTitle.jsx b/public/components/title/VideoTitle.jsx
new file mode 100644
index 0000000..f9b2fc0
--- /dev/null
+++ b/public/components/title/VideoTitle.jsx
@@ -0,0 +1,49 @@
+/*
+ *  Video Title
+ *    Video title.
+ *
+ *  Dependencies:
+ *    styles/components/_video-title.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/03/18
+ */
+import React from 'react';
+import { connect } from 'react-redux';
+import { Link, NavLink } from 'react-router-dom';
+
+import Language from './../../language/Language';
+
+const VideoTitle = function(props) {
+  let children = ([
+    <video autoPlay className="o-video-title__video" loop key="video">
+      <source src={ props.mp4 } type="video/mp4" />
+    </video>,
+    <h2 className="o-video-title__heading" key="title">
+      { Language.get(props.title) }
+    </h2>
+  ]);
+
+  let clazz = "o-video-title";
+
+  if(props.to) {
+    return (
+      <NavLink to={props.to} exact activeClassName="active" className={clazz}>
+        {children}
+      </NavLink>
+    );
+  }
+
+  return (
+    <div className={clazz}>
+      {children}
+    </div>
+  );
+}
+
+const mapStateToProps = function(state) {
+  return {
+    code: state.language.code
+  }
+}
+export default connect(mapStateToProps)(VideoTitle);
diff --git a/public/styles/objects/_video-title.scss b/public/styles/objects/_video-title.scss
new file mode 100644
index 0000000..3be8953
--- /dev/null
+++ b/public/styles/objects/_video-title.scss
@@ -0,0 +1,47 @@
+/*
+ *  Video Title
+ *    Video title.
+ *
+ *  Dependencies:
+ *    styles/settings/responsive.scss
+ *    styles/tools/_responsive.scss
+ *    styles/tools/_mixin.absolute-centering.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/03/18
+ */
+.o-video-title {
+  width: 100%;
+  position: relative;
+  line-height: 0;
+  display: block;
+}
+
+.o-video-title__video {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position:  center;
+}
+
+.o-video-title__heading {
+  color: white;
+  z-index: 10;
+  position: relative;
+  margin: 0;
+  padding: 2em 0.5em;
+  font-size: 2em;
+}
+
+@include t-media-query($s-xsmall-up) {
+  .o-video-title__video {
+    position: relative;
+  }
+
+  .o-video-title__heading {
+    @include t-absolute-center-y();
+    left: 5%;
+    padding: 0;
+  }
+}