From 28b52d6c6eb6333700d45a0cf4190bf635c1c35f Mon Sep 17 00:00:00 2001
From: Lachlan Kermode <lachiekermode@gmail.com>
Date: Wed, 14 Aug 2019 16:11:55 +0100
Subject: [PATCH] in prep for translations

---
 src/components/Overlay/Media.js               | 38 +++++++++++--------
 .../presentational/covers/TemplateCover.js    | 23 ++++++-----
 src/scss/cover.scss                           |  6 ++-
 src/scss/overlay.scss                         | 27 +++++++++++--
 4 files changed, 66 insertions(+), 28 deletions(-)

diff --git a/src/components/Overlay/Media.js b/src/components/Overlay/Media.js
index bb036a1..dc6a8d8 100644
--- a/src/components/Overlay/Media.js
+++ b/src/components/Overlay/Media.js
@@ -33,6 +33,7 @@ class SourceOverlay extends React.Component {
       return this.renderError()
     }
     const { url, title, paths, date, type, desc, poster } = this.props.source
+    const { translations } = this.props
     const shortenedTitle = title.substring(0, 100)
 
     return (
@@ -42,9 +43,14 @@ class SourceOverlay extends React.Component {
             <i className='material-icons'>close</i>
           </div>
 
-          <div className='mo-banner-content'>
-            <h3>{shortenedTitle}</h3>
+          <h3 className='mo-banner-content'>{shortenedTitle}</h3>
+
+          <div className='mo-banner-trans'>
+            {translations ? translations.map(trans => (
+              <div className='mo-trans' onClick={() => alert("TODO:")}>{trans.code}</div>
+            )) : null}
           </div>
+
         </div>
 
         <div className='mo-container' onClick={e => e.stopPropagation()}>
@@ -62,20 +68,22 @@ class SourceOverlay extends React.Component {
               <div>{desc}</div>
             </div>
 
-            {(type || date || url) ? <div className='mo-box'>
-              <div>
-                {type ? <h4>Evidence type</h4> : null}
-                {type ? <p><i className='material-icons left'>perm_media</i>{type}</p> : null}
+            {(type || date || url) ? (
+              <div className='mo-box'>
+                <div>
+                  {type ? <h4>Evidence type</h4> : null}
+                  {type ? <p><i className='material-icons left'>perm_media</i>{type}</p> : null}
+                </div>
+                <div>
+                  {date ? <h4>Date Published</h4> : null}
+                  {date ? <p><i className='material-icons left'>today</i>{date}</p> : null}
+                </div>
+                <div>
+                  {url ? <h4>Link</h4> : null}
+                  {url ? <span><i className='material-icons left'>link</i><a href={url} target='_blank'>Link to original URL</a></span> : null}
+                </div>
               </div>
-              <div>
-                {date ? <h4>Date Published</h4> : null}
-                {date ? <p><i className='material-icons left'>today</i>{date}</p> : null}
-              </div>
-              <div>
-                {url ? <h4>Link</h4> : null}
-                {url ? <span><i className='material-icons left'>link</i><a href={url} target='_blank'>Link to original URL</a></span> : null}
-              </div>
-            </div> : null}
+            ) : null}
           </div>
         </div>
 
diff --git a/src/components/presentational/covers/TemplateCover.js b/src/components/presentational/covers/TemplateCover.js
index 9321476..ed18dc7 100644
--- a/src/components/presentational/covers/TemplateCover.js
+++ b/src/components/presentational/covers/TemplateCover.js
@@ -15,9 +15,9 @@ class TemplateCover extends React.Component {
     }
   }
 
-  getVideo(index) {
-    if(index == MEDIA_HOWTO) {
-      return this.props.cover.howToVideo
+  getVideo(index, headerEndIndex) {
+    if(index < headerEndIndex) {
+      return this.props.cover.headerVideos[index]
     } else if(index >= 0) {
       return this.props.cover.videos[index]
     } else {
@@ -26,7 +26,8 @@ class TemplateCover extends React.Component {
   }
 
   render () {
-    var video = this.getVideo(this.state.video)
+    const { headerVideos } = this.props.cover
+    var video = this.getVideo(this.state.video, headerVideos.length || 0)
     return (
       <div className='default-cover-container'>
         <div className="cover-content">
@@ -55,11 +56,13 @@ class TemplateCover extends React.Component {
           <hr />
           <div className='hero thin'>
           {
-            this.props.cover.howToVideo ? (
+            headerVideos ? (
               <div className='row'>
-                <div className='cell plain' onClick={() => this.setState({ video: -1 })}>
-                  How to Use the Platform
-                </div>
+                { headerVideos.slice(0,2).map( (media, index) => (
+                  <div className='cell plain' onClick={() => this.setState({ video: index })}>
+                    {media.buttonTitle}
+                  </div>
+                ) ) }
               </div>
             ) : null
           }
@@ -76,8 +79,9 @@ class TemplateCover extends React.Component {
             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.setState({ video: index })} >
+                    <div className='cell small' onClick={() => this.setState({ video: index + (headerVideos.length || 0)})} >
                       {media.buttonTitle}<br />{media.buttonSubtitle}
                     </div>
                   )) }
@@ -98,6 +102,7 @@ class TemplateCover extends React.Component {
               paths: [video.file],
               poster: video.poster
             }}
+            translations={video.translations}
             onCancel={() => this.setState({ video: MEDIA_HIDDEN })}
           />
         ) : null }
diff --git a/src/scss/cover.scss b/src/scss/cover.scss
index 4c86b19..0892d47 100644
--- a/src/scss/cover.scss
+++ b/src/scss/cover.scss
@@ -103,7 +103,8 @@
     max-width: 100%;
     min-height: 100px;
     &.thin {
-      min-width: 250px;
+      min-width: 350px;
+      width: 400px;
       max-width: 400px;
     }
     margin: auto;
@@ -119,6 +120,9 @@
         flex-direction: column;
       }
       justify-content: space-around;
+      &.vertical {
+          flex-direction: column;
+      }
       .cell {
         border: 1px solid white;
         display: flex;
diff --git a/src/scss/overlay.scss b/src/scss/overlay.scss
index 5428bc9..35e9942 100644
--- a/src/scss/overlay.scss
+++ b/src/scss/overlay.scss
@@ -48,7 +48,7 @@ $overlay-bg: rgba(239,239,239,0.9);
   top: 0;
   width: 100%;
   display: flex;
-  justify-content: flex-start;
+  justify-content: space-between;
   align-items: stretch;
   flex-direction: row;
 
@@ -57,6 +57,7 @@ $overlay-bg: rgba(239,239,239,0.9);
     justify-content: center;
     align-items: center;
     min-width: $banner-height;
+    width: $banner-height;
     .material-icons {
       font-size: 40pt;
       background-color: transparent;
@@ -75,12 +76,12 @@ $overlay-bg: rgba(239,239,239,0.9);
   }
 
   .mo-banner-content {
-    flex: 11;
     text-align: center;
     display: flex;
     justify-content: center;
     align-items: center;
-    h3 {
+    margin-left: $banner-height; // to offset the 2*$banner-height below
+    &.h3 {
       border-radius: 2px;
       padding: 10px 15px;
       background-color: transparent;
@@ -88,6 +89,26 @@ $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;
+      &:hover {
+        background-color: $darkwhite;
+        cursor: pointer;
+      }
+    }
+  }
 }
 
 .media-gallery-controls {