toggle side of sidebar. popup form. wait to appear form.

1 files changed, 18 insertions, 5 deletions

diff --git a/frontend/app/views/tile/handles/tile.video.js b/frontend/app/views/tile/handles/tile.video.js
index 001cce2..a9f0d09 100644
--- a/frontend/app/views/tile/handles/tile.video.js
+++ b/frontend/app/views/tile/handles/tile.video.js
@@ -11,12 +11,25 @@ export default class TileVideo extends Component {
     this.handleEnded = this.handleEnded.bind(this)
   }
   componentDidMount() {
-    this.videoRef.current.addEventListener('ended', this.handleEnded)
-    this.videoRef.current.addEventListener('timeupdate', this.handleTimeUpdate)
+    this.bind()
+  }
+  componentDidUpdate() {
+    this.unbind()
+    this.bind()
   }
   componentWillUnmount() {
-    this.videoRef.current.removeEventListener('timeupdate', this.handleTimeUpdate)
-    this.videoRef.current.removeEventListener('ended', this.handleEnded)
+    this.unbind()
+  }
+  bind() {
+    if (!this.videoRef.current) return
+    this.el = this.videoRef.current
+    this.el.addEventListener('ended', this.handleEnded)
+    this.el.addEventListener('timeupdate', this.handleTimeUpdate)
+  }
+  unbind() {
+    if (!this.el) return
+    this.el.removeEventListener('timeupdate', this.handleTimeUpdate)
+    this.el.removeEventListener('ended', this.handleEnded)
   }
   handleTimeUpdate() {
     if (this.props.tile.settings.loop && this.props.tile.settings.loop_section) {
@@ -63,7 +76,7 @@ export default class TileVideo extends Component {
           autoPlay={true}
           controls={false}
           loop={tile.settings.loop}
-          muted={tile.settings.muted}
+          muted={viewing ? tile.settings.muted : true}
           style={generateVideoStyle(tile, bounds)}
         />
       </div>