diff options
Diffstat (limited to 'frontend/app/views/tile/handles')
| -rw-r--r-- | frontend/app/views/tile/handles/tile.video.js | 23 |
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> |