diff options
Diffstat (limited to 'frontend/app/views/tile/handles/tile.video.js')
| -rw-r--r-- | frontend/app/views/tile/handles/tile.video.js | 12 |
1 files changed, 10 insertions, 2 deletions
diff --git a/frontend/app/views/tile/handles/tile.video.js b/frontend/app/views/tile/handles/tile.video.js index a9f0d09..271a671 100644 --- a/frontend/app/views/tile/handles/tile.video.js +++ b/frontend/app/views/tile/handles/tile.video.js @@ -10,27 +10,33 @@ export default class TileVideo extends Component { this.handleTimeUpdate = this.handleTimeUpdate.bind(this) this.handleEnded = this.handleEnded.bind(this) } + componentDidMount() { this.bind() } + componentDidUpdate() { this.unbind() this.bind() } + componentWillUnmount() { 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) { const loop_start = timestampToSeconds(this.props.tile.settings.loop_start) || 0 @@ -40,6 +46,7 @@ export default class TileVideo extends Component { } } } + handleEnded() { this.props.onPlaybackEnded(this.props.tile) if (this.props.tile.settings.loop && this.props.tile.settings.loop_section) { @@ -47,11 +54,12 @@ export default class TileVideo extends Component { this.videoRef.current.currentTime = loop_start } } + render() { - let { tile, bounds, box, viewing, onMouseDown, onDoubleClick } = this.props + let { tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick } = this.props // console.log(tile) const style = { - transform: generateTransform(tile, box), + transform: generateTransform(tile, box, videoBounds), opacity: tile.settings.opacity, } let className = ['tile', tile.type].join(' ') |
