From 5c95c352c300614a6720cf222d4f1f1ef3ae5c83 Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Tue, 21 May 2019 14:03:48 -0400
Subject: [PATCH 01/11] Trying VideoStep component.

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

diff --git a/src/components/cards/cards.jsx b/src/components/cards/cards.jsx
index 83e40bf49..9c194d422 100644
--- a/src/components/cards/cards.jsx
+++ b/src/components/cards/cards.jsx
@@ -3,6 +3,7 @@ import React, {Fragment} from 'react';
 import classNames from 'classnames';
 import {FormattedMessage} from 'react-intl';
 import Draggable from 'react-draggable';
+import bindAll from 'lodash.bindall';
 
 import styles from './card.css';
 
@@ -109,6 +110,54 @@ const VideoStep = ({video, dragging}) => (
     </div>
 );
 
+/* class VideoStep extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'handleLoadIFrame'
+        ]);
+    }
+    componentDidMount () {
+        console.log('Video1 step did mount.');
+    }
+    handleLoadIFrame () {
+        console.log('iframe loaded!!!');
+        // window._wq = window._wq || [];
+        window._wq.push({
+            id: 'ir0j8ljsgm',
+            onReady: function (video) {
+                console.log('I got a handle to the video!', video);
+            }
+        });
+        // console.log('Wistia', document.getElementsByTagName('iframe')[0].contentWindow.location.href);
+    }
+    render () {
+        return (
+            <div className={styles.stepVideo}>
+                {this.props.dragging ? (
+                    <div className={styles.videoCover} />
+                ) : null}
+                <iframe
+                    allowFullScreen
+                    allowTransparency="true"
+                    frameBorder="0"
+                    height="257"
+                    scrolling="no"
+                    src={`https://fast.wistia.net/embed/iframe/${this.props.video}?seo=false&videoFoam=true`}
+                    title="📹"
+                    width="466"
+                    onLoad={this.handleLoadIFrame}
+                />
+                <script
+                    async
+                    src="https://fast.wistia.net/assets/external/E-v1.js"
+                />
+            </div>
+        );
+
+    }
+} */
+
 VideoStep.propTypes = {
     dragging: PropTypes.bool.isRequired,
     video: PropTypes.string.isRequired

From 555082bb1de9881c0f8eea86c346a83c786ac4f2 Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Tue, 21 May 2019 14:40:05 -0400
Subject: [PATCH 02/11] Change Wistia embed so video API is accessible from
 current window.

---
 src/components/cards/cards.jsx | 78 +++++++++++-----------------------
 1 file changed, 24 insertions(+), 54 deletions(-)

diff --git a/src/components/cards/cards.jsx b/src/components/cards/cards.jsx
index 9c194d422..024eac07e 100644
--- a/src/components/cards/cards.jsx
+++ b/src/components/cards/cards.jsx
@@ -88,75 +88,45 @@ const CardHeader = ({onCloseCards, onShrinkExpandCards, onShowAll, totalSteps, s
 
 // 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 {
+class VideoStep extends React.Component {
+    // eslint-disable-next-line no-useless-constructor
     constructor (props) {
         super(props);
-        bindAll(this, [
-            'handleLoadIFrame'
-        ]);
     }
     componentDidMount () {
         console.log('Video1 step did mount.');
-    }
-    handleLoadIFrame () {
-        console.log('iframe loaded!!!');
-        // window._wq = window._wq || [];
-        window._wq.push({
-            id: 'ir0j8ljsgm',
-            onReady: function (video) {
-                console.log('I got a handle to the video!', video);
-            }
-        });
-        // console.log('Wistia', document.getElementsByTagName('iframe')[0].contentWindow.location.href);
+        const script = document.createElement('script');
+
+        script.src = `https://fast.wistia.com/embed/medias/${this.props.video}.jsonp`;
+        script.async = true;
+    
+        document.body.appendChild(script);
+
+        const script2 = document.createElement('script');
+
+        script2.src = 'https://fast.wistia.com/assets/external/E-v1.js';
+        script2.async = true;
+    
+        document.body.appendChild(script2);
     }
     render () {
         return (
+            // var video1 = Wistia.api("ir0j8ljsgm");
+            // ir0j8ljsgm
             <div className={styles.stepVideo}>
                 {this.props.dragging ? (
                     <div className={styles.videoCover} />
                 ) : null}
-                <iframe
-                    allowFullScreen
-                    allowTransparency="true"
-                    frameBorder="0"
-                    height="257"
-                    scrolling="no"
-                    src={`https://fast.wistia.net/embed/iframe/${this.props.video}?seo=false&videoFoam=true`}
-                    title="📹"
-                    width="466"
-                    onLoad={this.handleLoadIFrame}
-                />
-                <script
-                    async
-                    src="https://fast.wistia.net/assets/external/E-v1.js"
-                />
+                <div
+                    className={`wistia_embed wistia_async_${this.props.video}`}
+                    style={{height: `257px`, width: `466px`}}
+                >
+                    &nbsp;
+                </div>
             </div>
         );
-
     }
-} */
+}
 
 VideoStep.propTypes = {
     dragging: PropTypes.bool.isRequired,

From 3e0d5b9ede1d17b2874fbe8cf4f030199c5cabff Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Tue, 21 May 2019 14:52:23 -0400
Subject: [PATCH 03/11] Clean up and get handle on video on load.

---
 src/components/cards/cards.jsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/components/cards/cards.jsx b/src/components/cards/cards.jsx
index 024eac07e..b88d6e6da 100644
--- a/src/components/cards/cards.jsx
+++ b/src/components/cards/cards.jsx
@@ -86,33 +86,35 @@ 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.
 class VideoStep extends React.Component {
     // eslint-disable-next-line no-useless-constructor
     constructor (props) {
         super(props);
     }
     componentDidMount () {
-        console.log('Video1 step did mount.');
         const script = document.createElement('script');
-
         script.src = `https://fast.wistia.com/embed/medias/${this.props.video}.jsonp`;
         script.async = true;
-    
         document.body.appendChild(script);
 
         const script2 = document.createElement('script');
-
+        script2.onload = () => {
+            window._wq = window._wq || [];
+            window._wq.push({
+                id: `${this.props.video}`,
+                onReady: function (video) {
+                    console.log('I got a handle to the video!', video);
+                }
+            });
+        };
         script2.src = 'https://fast.wistia.com/assets/external/E-v1.js';
         script2.async = true;
-    
         document.body.appendChild(script2);
     }
     render () {
         return (
-            // var video1 = Wistia.api("ir0j8ljsgm");
-            // ir0j8ljsgm
+            // 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.
             <div className={styles.stepVideo}>
                 {this.props.dragging ? (
                     <div className={styles.videoCover} />

From 98a007a17ec672ccaeb407301c3b073b3158af91 Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Tue, 21 May 2019 15:00:16 -0400
Subject: [PATCH 04/11] Pause video on component update if not expanded.

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

diff --git a/src/components/cards/cards.jsx b/src/components/cards/cards.jsx
index b88d6e6da..a44a5079c 100644
--- a/src/components/cards/cards.jsx
+++ b/src/components/cards/cards.jsx
@@ -111,6 +111,14 @@ class VideoStep extends React.Component {
         script2.async = true;
         document.body.appendChild(script2);
     }
+    componentDidUpdate () {
+        // if not expanded, pause video?
+        if (!this.props.expanded) {
+            // eslint-disable-next-line no-undef
+            const video = Wistia.api(`${this.props.video}`);
+            video.pause();
+        }
+    }
     render () {
         return (
             // Video step needs to know if the card is being dragged to cover the video
@@ -132,6 +140,7 @@ class VideoStep extends React.Component {
 
 VideoStep.propTypes = {
     dragging: PropTypes.bool.isRequired,
+    expanded: PropTypes.bool.isRequired,
     video: PropTypes.string.isRequired
 };
 

From f6c8feae6e2e33374245086119aef264cd5fe426 Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Tue, 21 May 2019 15:08:48 -0400
Subject: [PATCH 05/11] Video play/pause test on video step expand/shrink.

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

diff --git a/src/components/cards/cards.jsx b/src/components/cards/cards.jsx
index a44a5079c..dbada35db 100644
--- a/src/components/cards/cards.jsx
+++ b/src/components/cards/cards.jsx
@@ -98,24 +98,16 @@ class VideoStep extends React.Component {
         document.body.appendChild(script);
 
         const script2 = document.createElement('script');
-        script2.onload = () => {
-            window._wq = window._wq || [];
-            window._wq.push({
-                id: `${this.props.video}`,
-                onReady: function (video) {
-                    console.log('I got a handle to the video!', video);
-                }
-            });
-        };
         script2.src = 'https://fast.wistia.com/assets/external/E-v1.js';
         script2.async = true;
         document.body.appendChild(script2);
     }
     componentDidUpdate () {
-        // if not expanded, pause video?
-        if (!this.props.expanded) {
-            // eslint-disable-next-line no-undef
-            const video = Wistia.api(`${this.props.video}`);
+        // eslint-disable-next-line no-undef
+        const video = Wistia.api(`${this.props.video}`);
+        if (this.props.expanded) {
+            video.play();
+        } else {
             video.pause();
         }
     }
@@ -355,6 +347,7 @@ const Cards = props => {
                                 steps[step].video ? (
                                     <VideoStep
                                         dragging={dragging}
+                                        expanded={expanded}
                                         video={translateVideo(steps[step].video, locale)}
                                     />
                                 ) : (

From 3c3206d8e259d7b4a2dcdb84a0f3181c050be2a2 Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Tue, 21 May 2019 15:11:10 -0400
Subject: [PATCH 06/11] Remove bindAll import.

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

diff --git a/src/components/cards/cards.jsx b/src/components/cards/cards.jsx
index dbada35db..158c979b6 100644
--- a/src/components/cards/cards.jsx
+++ b/src/components/cards/cards.jsx
@@ -3,7 +3,6 @@ import React, {Fragment} from 'react';
 import classNames from 'classnames';
 import {FormattedMessage} from 'react-intl';
 import Draggable from 'react-draggable';
-import bindAll from 'lodash.bindall';
 
 import styles from './card.css';
 

From a63385343a25262580fe2891bbfd5032da2c5942 Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Tue, 21 May 2019 15:12:29 -0400
Subject: [PATCH 07/11] Remove useless props constructor.

---
 src/components/cards/cards.jsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/cards/cards.jsx b/src/components/cards/cards.jsx
index 158c979b6..20b757583 100644
--- a/src/components/cards/cards.jsx
+++ b/src/components/cards/cards.jsx
@@ -86,10 +86,6 @@ const CardHeader = ({onCloseCards, onShrinkExpandCards, onShowAll, totalSteps, s
 );
 
 class VideoStep extends React.Component {
-    // eslint-disable-next-line no-useless-constructor
-    constructor (props) {
-        super(props);
-    }
     componentDidMount () {
         const script = document.createElement('script');
         script.src = `https://fast.wistia.com/embed/medias/${this.props.video}.jsonp`;

From e17dc90983582923e87c54a1cd50031c40015d3e Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Tue, 21 May 2019 16:59:49 -0400
Subject: [PATCH 08/11] Fix Wistia access to use window.

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

diff --git a/src/components/cards/cards.jsx b/src/components/cards/cards.jsx
index 20b757583..a98aebb22 100644
--- a/src/components/cards/cards.jsx
+++ b/src/components/cards/cards.jsx
@@ -98,8 +98,7 @@ class VideoStep extends React.Component {
         document.body.appendChild(script2);
     }
     componentDidUpdate () {
-        // eslint-disable-next-line no-undef
-        const video = Wistia.api(`${this.props.video}`);
+        const video = window.Wistia.api(`${this.props.video}`);
         if (this.props.expanded) {
             video.play();
         } else {

From 376f5626a44f80d2278cb4e5558219b1a02af2ac Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Thu, 23 May 2019 10:44:40 -0400
Subject: [PATCH 09/11] Remove auto-play on expansion.

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

diff --git a/src/components/cards/cards.jsx b/src/components/cards/cards.jsx
index a98aebb22..41682cc8f 100644
--- a/src/components/cards/cards.jsx
+++ b/src/components/cards/cards.jsx
@@ -99,9 +99,7 @@ class VideoStep extends React.Component {
     }
     componentDidUpdate () {
         const video = window.Wistia.api(`${this.props.video}`);
-        if (this.props.expanded) {
-            video.play();
-        } else {
+        if (!this.props.expanded) {
             video.pause();
         }
     }

From fa4541e85c0ca17ba58a1096967b8775e50e4c78 Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Wed, 29 May 2019 08:27:20 -0400
Subject: [PATCH 10/11] Adding dynamic removal of dynamically loaded scripts.

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

diff --git a/src/components/cards/cards.jsx b/src/components/cards/cards.jsx
index 41682cc8f..7b84ee732 100644
--- a/src/components/cards/cards.jsx
+++ b/src/components/cards/cards.jsx
@@ -90,11 +90,13 @@ class VideoStep extends React.Component {
         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 () {
@@ -103,18 +105,26 @@ class VideoStep extends React.Component {
             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 (
             // 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.
             <div className={styles.stepVideo}>
-                {this.props.dragging ? (
-                    <div className={styles.videoCover} />
-                ) : null}
                 <div
                     className={`wistia_embed wistia_async_${this.props.video}`}
                     style={{height: `257px`, width: `466px`}}
                 >
+                    {//this.props.dragging ? (
+                        //<div className={styles.videoCover} />
+                        //) : null
+                    }
                     &nbsp;
                 </div>
             </div>

From b2486380fba1e56d0f88a8e01ad3af5f44c0c814 Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Wed, 29 May 2019 09:46:08 -0400
Subject: [PATCH 11/11] Disable dragging on video to allow for scrobbling.

---
 src/components/cards/card.css  | 8 --------
 src/components/cards/cards.jsx | 9 ++-------
 2 files changed, 2 insertions(+), 15 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 7b84ee732..9424d108d 100644
--- a/src/components/cards/cards.jsx
+++ b/src/components/cards/cards.jsx
@@ -114,17 +114,12 @@ class VideoStep extends React.Component {
     }
     render () {
         return (
-            // 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.
             <div className={styles.stepVideo}>
                 <div
                     className={`wistia_embed wistia_async_${this.props.video}`}
+                    id="video-div"
                     style={{height: `257px`, width: `466px`}}
                 >
-                    {//this.props.dragging ? (
-                        //<div className={styles.videoCover} />
-                        //) : null
-                    }
                     &nbsp;
                 </div>
             </div>
@@ -133,7 +128,6 @@ class VideoStep extends React.Component {
 }
 
 VideoStep.propTypes = {
-    dragging: PropTypes.bool.isRequired,
     expanded: PropTypes.bool.isRequired,
     video: PropTypes.string.isRequired
 };
@@ -322,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}