create and use video-preview component

src/components/video-preview/video-preview.jsx

+const bindAll = require('lodash.bindall');
+const PropTypes = require('prop-types');
+const React = require('react');
+
+const FlexRow = require('../flex-row/flex-row.jsx');
+const Video = require('../video/video.jsx');
+
+require('./video-preview.scss');
+
+class VideoPreview extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'handleShowVideo'
+        ]);
+
+        this.state = {
+            videoOpen: false
+        };
+    }
+
+    handleShowVideo () {
+        this.setState({videoOpen: true});
+    }
+
+    render () {
+        //console.log(this.props.videoHeight);
+        return (
+            <div className="video-preview">
+                {this.state.videoOpen ?
+                    (
+                        <Video
+                            className="video"
+                            height={this.props.videoHeight}
+                            videoId={this.props.videoId}
+                            width={this.props.videoWidth}
+                        />
+                    ) : (
+                        <div
+                            className="video-thumbnail"
+                            onClick={this.handleShowVideo}
+                        >
+                            <img
+                                src={this.props.thumbnail}
+                                style={{
+                                    width: `${this.props.thumbnailWidth}px` || 'auto',
+                                    height: `${this.props.thumbnailHeight}px` || 'auto'
+                                }}
+                            />
+                            <a
+                                onClick={this.handleShowVideo}
+                            >
+                                <div className="button">
+                                    {this.props.buttonMessage}
+                                </div>
+                            </a>
+                        </div>
+                    )
+                }
+            </div>
+        );
+    }
+}
+
+VideoPreview.propTypes = {
+    buttonMessage: PropTypes.string.isRequired,
+    thumbnail: PropTypes.string.isRequired,
+    thumbnailHeight: PropTypes.string,
+    thumbnailWidth: PropTypes.string,
+    videoHeight: PropTypes.string,
+    videoId: PropTypes.string.isRequired,
+    videoWidth: PropTypes.string
+};
+
+module.exports = VideoPreview;

src/components/video-preview/video-preview.scss

+.video-preview {
+	display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .video-player {
+    	height: auto;
+    	border: none;
+    	border-radius: .75rem;
+    }
+}
+
+.video-thumbnail {
+	display: flex;
+	flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .button {
+    	margin-top: 20px;
+    }
+}
\ No newline at end of file

src/views/annual-report/annual-report.jsx

@@ -21,7 +21,7 @@ const CountryUsage = require('./country-usage.json');
 const PeopleGrid = require('../../components/people-grid/people-grid.jsx');
 const People = require('./people.json');
 const BLMProjects = require('./blm-projects.json');
-const Video = require('../../components/Video/video.jsx');
+const VideoPreview = require('../../components/video-preview/video-preview.jsx');
 
 require('./annual-report.scss');
 
@@ -1028,29 +1028,16 @@ class AnnualReport extends React.Component {
                                             </p>
                                         </div>
                                     </div>
-                                    <FlexRow className="blm-video-container">
-                                        {this.state.videoOpen ?
-                                            (
-                                                <Video
-                                                    className="intro-video"
-                                                    videoId="joal01i8b1"
-                                                />
-                                            ) : (
-                                                <div
-                                                    className="video-image"
-                                                >
-                                                    <img src="/images/annual-report/initiatives/BLM Video Thumbnail.png" />
-                                                    <a
-                                                        href="#"
-                                                    >
-                                                        <div className="watch-button button">
-                                                            {'Watch Video'}
-                                                        </div>
-                                                    </a>
-                                                </div>
-                                            )
-                                        }
-                                    </FlexRow>
+                                    <div className="video-container blm">
+                                        <VideoPreview
+                                            buttonMessage={this.props.intl.formatMessage({id: 'annualReport.watchVideo'})}
+                                            thumbnail="/images/annual-report/initiatives/BLM Video Thumbnail.png"
+                                            thumbnailWidth="580"
+                                            videoHeight="320"
+                                            videoId="joal01i8b1"
+                                            videoWidth="568"
+                                        />
+                                    </div>
                                 </div>
                             </div>
                             <div className="initiatives-subsection-header schools">

src/views/annual-report/annual-report.scss

@@ -682,19 +682,22 @@ p {
                 width: 380px;
             }
         }
+    }
 
-        .blm-video-container {
-            background-image: url("/images/annual-report/initiatives/BLM Video Splash.svg");
-            width: 1020px;
-            height: 500px;
+    .video-container {
+        width: 1020px;
+        height: 500px;
 
-            background-size: 100% auto;
-            background-repeat: no-repeat;
-            background-position: 50% 50%;
+        background-size: 100% auto;
+        background-repeat: no-repeat;
+        background-position: 50% 50%;
 
-            img {
-                width: 576px;
-            }
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &.blm {
+            background-image: url("/images/annual-report/initiatives/BLM Video Splash.svg");
         }
     }
 

src/views/annual-report/l10n.json

@@ -97,6 +97,7 @@
     "annualReport.communityArtwork": "Artwork by the Scratcher OnionDipAnimations",
     "annualReport.communityChangeTitle": "We see young people as agents of change.",
     "annualReport.communityChangeInfo": "We are committed to working with them, and with the educators and families who support them, to ensure that they develop the skills, the motivation, and the confidence they’ll need to lead fulfilling lives and bring about meaningful change in society.",
+    "annualReport.watchVideo": "Watch Video", 
 
     "annualReport.financialsTitle": "Financials - 2019",
     "annualReport.financialsRevenue": "Revenues",