From e0e07929e833f9d428f95b3baf0dc62d232450e3 Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Thu, 30 May 2019 17:10:58 -0400
Subject: [PATCH 1/3] Revert "Revert "Pause video on tutorial window shrink""

---
 src/components/cards/card.css  |  8 ----
 src/components/cards/cards.jsx | 68 ++++++++++++++++++++++------------
 2 files changed, 44 insertions(+), 32 deletions(-)

diff --git a/src/components/cards/card.css b/src/components/cards/card.css
index a0a8b88d5..5a160c455 100644
--- a/src/components/cards/card.css
+++ b/src/components/cards/card.css
@@ -275,14 +275,6 @@
     margin-right: 0.5rem;
 }
 
-.video-cover {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
 .steps-list {
     display: flex;
     flex-direction: row;
diff --git a/src/components/cards/cards.jsx b/src/components/cards/cards.jsx
index 83e40bf49..9424d108d 100644
--- a/src/components/cards/cards.jsx
+++ b/src/components/cards/cards.jsx
@@ -85,32 +85,50 @@ const CardHeader = ({onCloseCards, onShrinkExpandCards, onShowAll, totalSteps, s
     </div>
 );
 
-// Video step needs to know if the card is being dragged to cover the video
-// so that the mouseup is not swallowed by the iframe.
-const VideoStep = ({video, dragging}) => (
-    <div className={styles.stepVideo}>
-        {dragging ? (
-            <div className={styles.videoCover} />
-        ) : null}
-        <iframe
-            allowFullScreen
-            allowTransparency="true"
-            frameBorder="0"
-            height="257"
-            scrolling="no"
-            src={`https://fast.wistia.net/embed/iframe/${video}?seo=false&videoFoam=true`}
-            title="📹"
-            width="466"
-        />
-        <script
-            async
-            src="https://fast.wistia.net/assets/external/E-v1.js"
-        />
-    </div>
-);
+class VideoStep extends React.Component {
+    componentDidMount () {
+        const script = document.createElement('script');
+        script.src = `https://fast.wistia.com/embed/medias/${this.props.video}.jsonp`;
+        script.async = true;
+        script.setAttribute('id', 'wistia-video-content');
+        document.body.appendChild(script);
+
+        const script2 = document.createElement('script');
+        script2.src = 'https://fast.wistia.com/assets/external/E-v1.js';
+        script2.async = true;
+        script2.setAttribute('id', 'wistia-video-api');
+        document.body.appendChild(script2);
+    }
+    componentDidUpdate () {
+        const video = window.Wistia.api(`${this.props.video}`);
+        if (!this.props.expanded) {
+            video.pause();
+        }
+    }
+    componentWillUnmount () {
+        const script = document.getElementById('wistia-video-content');
+        script.parentNode.removeChild(script);
+
+        const script2 = document.getElementById('wistia-video-api');
+        script2.parentNode.removeChild(script2);
+    }
+    render () {
+        return (
+            <div className={styles.stepVideo}>
+                <div
+                    className={`wistia_embed wistia_async_${this.props.video}`}
+                    id="video-div"
+                    style={{height: `257px`, width: `466px`}}
+                >
+                    &nbsp;
+                </div>
+            </div>
+        );
+    }
+}
 
 VideoStep.propTypes = {
-    dragging: PropTypes.bool.isRequired,
+    expanded: PropTypes.bool.isRequired,
     video: PropTypes.string.isRequired
 };
 
@@ -298,6 +316,7 @@ const Cards = props => {
         >
             <Draggable
                 bounds="parent"
+                cancel="#video-div" // disable dragging on video div
                 position={{x: x, y: y}}
                 onDrag={onDrag}
                 onStart={onStartDrag}
@@ -325,6 +344,7 @@ const Cards = props => {
                                 steps[step].video ? (
                                     <VideoStep
                                         dragging={dragging}
+                                        expanded={expanded}
                                         video={translateVideo(steps[step].video, locale)}
                                     />
                                 ) : (

From b350049ca7cdd8b6a0016afb906c2897e4773d3b Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Thu, 30 May 2019 17:17:01 -0400
Subject: [PATCH 2/3] Testing a commit onto upstream branch for revert PR.

---
 src/components/cards/cards.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/cards/cards.jsx b/src/components/cards/cards.jsx
index 9424d108d..5cf021c53 100644
--- a/src/components/cards/cards.jsx
+++ b/src/components/cards/cards.jsx
@@ -86,6 +86,7 @@ const CardHeader = ({onCloseCards, onShrinkExpandCards, onShowAll, totalSteps, s
 );
 
 class VideoStep extends React.Component {
+    // test comment
     componentDidMount () {
         const script = document.createElement('script');
         script.src = `https://fast.wistia.com/embed/medias/${this.props.video}.jsonp`;

From 550849c93fee14bec22003808339578e2f497fbc Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Thu, 30 May 2019 22:03:56 -0400
Subject: [PATCH 3/3] Reset video if a new one has been chosen.  Added some
 comments.

---
 src/components/cards/cards.jsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/cards/cards.jsx b/src/components/cards/cards.jsx
index 5cf021c53..d439b5cf8 100644
--- a/src/components/cards/cards.jsx
+++ b/src/components/cards/cards.jsx
@@ -86,7 +86,7 @@ const CardHeader = ({onCloseCards, onShrinkExpandCards, onShowAll, totalSteps, s
 );
 
 class VideoStep extends React.Component {
-    // test comment
+
     componentDidMount () {
         const script = document.createElement('script');
         script.src = `https://fast.wistia.com/embed/medias/${this.props.video}.jsonp`;
@@ -100,12 +100,24 @@ class VideoStep extends React.Component {
         script2.setAttribute('id', 'wistia-video-api');
         document.body.appendChild(script2);
     }
-    componentDidUpdate () {
-        const video = window.Wistia.api(`${this.props.video}`);
+
+    // We use the Wistia API here to update or pause the video dynamically:
+    // https://wistia.com/support/developers/player-api
+    componentDidUpdate (prevProps) {
+        // Get a handle on the currently loaded video
+        const video = window.Wistia.api(prevProps.video);
+
+        // Reset the video source if a new video has been chosen from the library
+        if (prevProps.video !== this.props.video) {
+            video.replaceWith(this.props.video);
+        }
+
+        // Pause the video if the modal is being shrunken
         if (!this.props.expanded) {
             video.pause();
         }
     }
+
     componentWillUnmount () {
         const script = document.getElementById('wistia-video-content');
         script.parentNode.removeChild(script);
@@ -113,6 +125,7 @@ class VideoStep extends React.Component {
         const script2 = document.getElementById('wistia-video-api');
         script2.parentNode.removeChild(script2);
     }
+
     render () {
         return (
             <div className={styles.stepVideo}>