allow feature video

src/components/Overlay/Media.js

@@ -49,12 +49,12 @@ class SourceOverlay extends React.Component {
 
           <h3 className='mo-banner-content'>{shortenedTitle}</h3>
 
-          <div className='mo-banner-trans'>
+          <div className='banner-trans'>
             {this.props.translations ? this.props.translations.map((trans, idx) => (
               this.state.langIdx !== idx + 1 ? (
-                <div className='mo-trans' onClick={() => this.switchLanguage(idx + 1)}>{trans.code}</div>
+                <div className='trans-button' onClick={() => this.switchLanguage(idx + 1)}>{trans.code}</div>
               ) : (
-                <div className='mo-trans' onClick={() => this.switchLanguage(0)}>EN</div>
+                <div className='trans-button' onClick={() => this.switchLanguage(0)}>EN</div>
               )
             )) : null}
           </div>

src/components/TemplateCover.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import { connect } from 'react-redux'
+import { Player } from 'video-react'
 import marked from 'marked'
 import MediaOverlay from './Overlay/Media'
 
@@ -15,7 +16,8 @@ class TemplateCover extends React.Component {
   constructor (props) {
     super(props)
     this.state = {
-      video: MEDIA_HIDDEN
+      video: MEDIA_HIDDEN,
+      featureLang: 0
     }
   }
 
@@ -38,6 +40,33 @@ class TemplateCover extends React.Component {
     }
   }
 
+  renderFeature () {
+    const { featureVideo } = this.props.cover
+    const { featureLang } = this.state
+    const source = featureLang === 0 ? featureVideo : featureVideo.translations[featureLang - 1]
+    return (
+      <div>
+        <div className='banner-trans right-overlay'>
+          {featureVideo.translations && featureVideo.translations.map((trans, idx) => {
+            const langIdx = idx + 1 // default lang idx is 0
+            if (featureLang !== langIdx) {
+              return <div onClick={() => this.setState({ featureLang: langIdx })} className='trans-button'>{trans.code}</div>
+            } else {
+              return <div onClick={() => this.setState({ featureLang: 0 })} className='trans-button'>ENG</div>
+            }
+          })}
+        </div>
+
+        <Player
+          className='source-video'
+          poster={source.poster}
+          playsInline
+          src={source.file}
+        />
+      </div>
+    )
+  }
+
   renderHeaderVideos () {
     const { headerVideos } = this.props.cover
     return (
@@ -78,6 +107,7 @@ class TemplateCover extends React.Component {
       )
     }
 
+    const { videos } = this.props.cover
     return (
       <div className='default-cover-container'>
         <div className='cover-content'>
@@ -104,6 +134,8 @@ class TemplateCover extends React.Component {
             ) : null
           }
           <hr />
+
+          {this.props.cover.featureVideo ? this.renderFeature() : null}
           <div className='hero thin'>
             {
               this.props.cover.headerVideos ? this.renderHeaderVideos() : null
@@ -117,20 +149,25 @@ class TemplateCover extends React.Component {
 
           <div className='md-container' dangerouslySetInnerHTML={{ __html: marked(this.props.cover.description) }} />
 
-          {
-            this.props.cover.videos ? (
-              <div className='hero'>
-                <div className='row'>
-                  {/* NOTE: only take first four videos, drop any others for style reasons */}
-                  { this.props.cover.videos.slice(0, 4).map((media, index) => (
-                    <div className='cell small' onClick={this.onVideoClickHandler(index)} >
-                      {media.buttonTitle}<br />{media.buttonSubtitle}
-                    </div>
-                  )) }
-                </div>
+          {videos ? (
+            <div className='hero'>
+              <div className='row'>
+                {/* NOTE: only take first four videos, drop any others for style reasons */}
+                { videos && videos.slice(0, 2).map((media, index) => (
+                  <div className='cell small' onClick={this.onVideoClickHandler(index)} >
+                    {media.buttonTitle}<br />{media.buttonSubtitle}
+                  </div>
+                )) }
               </div>
-            ) : null
-          }
+              <div className='row'>
+                { videos.length > 2 && this.props.cover.videos.slice(2, 4).map((media, index) => (
+                  <div className='cell small' onClick={this.onVideoClickHandler(index + 2)} >
+                    {media.buttonTitle}<br />{media.buttonSubtitle}
+                  </div>
+                )) }
+              </div>
+            </div>
+          ) : null}
         </div>
 
         {

src/scss/_variables.scss

@@ -5,7 +5,6 @@ $lightwhite: #dfdfdf;
 $midwhite: #a0a0a0;
 $darkwhite: darken($midwhite, 15%);
 $yellow: #ffd800;
-// $yellow: rgb(240, 255, 0);
 $red: rgb(233, 0, 19);
 $green: rgb(61, 241, 79);
 $midgrey: rgb(44, 44, 44);

src/scss/cover.scss

@@ -100,9 +100,9 @@
     max-width: 100%;
     min-height: 100px;
     &.thin {
-      min-width: 350px;
-      width: 400px;
-      max-width: 400px;
+      // min-width: 250px;
+      // width: 250px;
+      // max-width: 400px;
     }
     margin: auto;
     display: flex;
@@ -157,8 +157,8 @@
   .cover-content {
     display: flex;
     flex-direction: column;
-    // min-width: 100%;
-    padding: 20px 40px 0px 40px;
+    max-width: 600px;
+    // padding: 20px 40px 0px 40px;
 
     @media only screen and (min-width: 992px) {
       padding: 20px 30% 0px 30%;

src/scss/overlay.scss

@@ -83,23 +83,37 @@ $overlay-bg: rgba(239,239,239,0.9);
       margin-left: -$banner-height;
     }
   }
+}
 
-  .mo-banner-trans {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    min-width: 2 * $banner-height;
-    width: 2 * $banner-height;
-    // width: $banner-height;
-    .mo-trans {
-      padding: 15px;
-      margin: 10px;
-      border: 1px solid $darkwhite;
-      transition: 0.3s all ease;
+.banner-trans {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  min-width: 2 * $banner-height;
+  width: 2 * $banner-height;
+
+  .trans-button {
+    padding: 15px;
+    margin: 10px;
+    border: 1px solid $darkwhite;
+    transition: 0.1s all ease;
+    &:hover {
+      background-color: $darkwhite;
+      cursor: pointer;
+    }
+  }
+
+  &.right-overlay {
+    position: relative;
+    width: 25%;
+    float: right;
+    justify-content: flex-end;
+    z-index: $map;
+    .trans-button {
+      background-color: $black;
       &:hover {
         background-color: $darkwhite;
-        cursor: pointer;
       }
     }
   }