summaryrefslogtreecommitdiff
path: root/frontend/app/views/tile/handles/tile.video.js
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/app/views/tile/handles/tile.video.js')
-rw-r--r--frontend/app/views/tile/handles/tile.video.js12
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(' ')