From db83c77e55c063e204a9395165a1346f9c20f47c Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Fri, 16 Aug 2019 15:47:21 +0100 Subject: [PATCH] allow feature video --- src/components/Overlay/Media.js | 6 +-- src/components/TemplateCover.js | 65 ++++++++++++++++++++++++++------- src/scss/_variables.scss | 1 - src/scss/cover.scss | 10 ++--- src/scss/overlay.scss | 42 ++++++++++++++------- 5 files changed, 87 insertions(+), 37 deletions(-) diff --git a/src/components/Overlay/Media.js b/src/components/Overlay/Media.js index 4d6b258..b467970 100644 --- a/src/components/Overlay/Media.js +++ b/src/components/Overlay/Media.js @@ -49,12 +49,12 @@ class SourceOverlay extends React.Component {

{shortenedTitle}

-
+
{this.props.translations ? this.props.translations.map((trans, idx) => ( this.state.langIdx !== idx + 1 ? ( -
this.switchLanguage(idx + 1)}>{trans.code}
+
this.switchLanguage(idx + 1)}>{trans.code}
) : ( -
this.switchLanguage(0)}>EN
+
this.switchLanguage(0)}>EN
) )) : null}
diff --git a/src/components/TemplateCover.js b/src/components/TemplateCover.js index 17614c6..ae360a3 100644 --- a/src/components/TemplateCover.js +++ b/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 ( +
+
+ {featureVideo.translations && featureVideo.translations.map((trans, idx) => { + const langIdx = idx + 1 // default lang idx is 0 + if (featureLang !== langIdx) { + return
this.setState({ featureLang: langIdx })} className='trans-button'>{trans.code}
+ } else { + return
this.setState({ featureLang: 0 })} className='trans-button'>ENG
+ } + })} +
+ + +
+ ) + } + renderHeaderVideos () { const { headerVideos } = this.props.cover return ( @@ -78,6 +107,7 @@ class TemplateCover extends React.Component { ) } + const { videos } = this.props.cover return (
@@ -104,6 +134,8 @@ class TemplateCover extends React.Component { ) : null }
+ + {this.props.cover.featureVideo ? this.renderFeature() : null}
{ this.props.cover.headerVideos ? this.renderHeaderVideos() : null @@ -117,20 +149,25 @@ class TemplateCover extends React.Component {
- { - this.props.cover.videos ? ( -
-
- {/* NOTE: only take first four videos, drop any others for style reasons */} - { this.props.cover.videos.slice(0, 4).map((media, index) => ( -
- {media.buttonTitle}
{media.buttonSubtitle} -
- )) } -
+ {videos ? ( +
+
+ {/* NOTE: only take first four videos, drop any others for style reasons */} + { videos && videos.slice(0, 2).map((media, index) => ( +
+ {media.buttonTitle}
{media.buttonSubtitle} +
+ )) }
- ) : null - } +
+ { videos.length > 2 && this.props.cover.videos.slice(2, 4).map((media, index) => ( +
+ {media.buttonTitle}
{media.buttonSubtitle} +
+ )) } +
+
+ ) : null}
{ diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 57b86c1..45d08aa 100644 --- a/src/scss/_variables.scss +++ b/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); diff --git a/src/scss/cover.scss b/src/scss/cover.scss index 087b656..0be6784 100644 --- a/src/scss/cover.scss +++ b/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%; diff --git a/src/scss/overlay.scss b/src/scss/overlay.scss index e9491c0..0c6dc30 100644 --- a/src/scss/overlay.scss +++ b/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; } } }