From cf9cbdf392b2d4e830a68cedb78d00a4eea7828f Mon Sep 17 00:00:00 2001
From: seotts <sotts@scratch.mit.edu>
Date: Mon, 16 Nov 2020 14:33:46 -0500
Subject: [PATCH] Hide iframe & show spinner until it begins playing

---
 .../video-preview/video-preview.scss          |  8 +++++++
 src/components/video/video.jsx                | 21 ++++++++++++++++---
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/components/video-preview/video-preview.scss b/src/components/video-preview/video-preview.scss
index f06363e60..21411f786 100644
--- a/src/components/video-preview/video-preview.scss
+++ b/src/components/video-preview/video-preview.scss
@@ -40,4 +40,12 @@
     width: 100%;
     height: 100%;
     position: relative;
+}
+
+.iframe-not-loaded {
+    visibility: hidden;
+}
+
+.iframe-loaded {
+    visibility: visible;
 }
\ No newline at end of file
diff --git a/src/components/video/video.jsx b/src/components/video/video.jsx
index d8619302c..67a40b7ac 100644
--- a/src/components/video/video.jsx
+++ b/src/components/video/video.jsx
@@ -7,12 +7,18 @@ const classNames = require('classnames');
 require('./video.scss');
 
 class Video extends React.Component {
+    constructor (props) {
+        super(props);
+
+        this.state = {
+            loaded: false
+        };
+    }
     componentDidMount () {
         /**
             uses code snippets from
             https://github.com/mrdavidjcole/wistia-player-react/blob/master/src/components/wistia_embed.js
         **/
-
         if (!document.getElementById('wistia_script')) {
             const wistiaScript = document.createElement('script');
             wistiaScript.id = 'wistia_script';
@@ -25,18 +31,27 @@ class Video extends React.Component {
         window._wq = window._wq || [];
         window._wq.push({
             id: this.props.videoId,
-            onReady: this.props.onLoad
+            onReady: video => {
+                video.bind('secondchange', s => {
+                    if (s >= 0) {
+                        this.setState({loaded: true});
+                        this.props.onLoad();
+                    }
+                });
+            }
         });
     }
 
     render () {
+        const loadedClass = this.state.loaded ? 'iframe-loaded' : 'iframe-not-loaded';
+
         return (
             <div className={classNames('video-player', this.props.className)}>
                 <iframe
                     allowFullScreen
                     // allowFullScreen is legacy, can we start using allow='fullscreen'?
                     // allow="fullscreen"
-                    className={classNames('wistia_embed', `wistia_async_${this.props.videoId}`)}
+                    className={classNames('wistia_embed', `wistia_async_${this.props.videoId}`, loadedClass)}
                     frameBorder="0" // deprecated attribute
                     height={this.props.height}
                     scrolling="no" // deprecated attribute