autoadvanc

1 files changed, 131 insertions, 109 deletions

diff --git a/frontend/app/views/page/components/tile.handle.js b/frontend/app/views/page/components/tile.handle.js
index d7b5d05..917be74 100644
--- a/frontend/app/views/page/components/tile.handle.js
+++ b/frontend/app/views/page/components/tile.handle.js
@@ -1,120 +1,144 @@
 import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
 
-const TileHandle = ({ tile, bounds, box, viewing, onMouseDown, onDoubleClick }) => {
-  // console.log(tile)
-  const { width, height } = tile.settings
-  const style = {
-    transform: generateTransform(tile, box),
-    opacity: tile.settings.opacity,
+export default class TileHandle extends Component {
+  constructor(props) {
+    super(props)
+    if (props.tile.type === 'video') {
+      this.videoRef = React.createRef()
+    }
+    this.handleEnded = this.handleEnded.bind(this)
   }
-  // console.log(generateTransform(tile))
-  let content;
-  let className = ['tile', tile.type].join(' ')
-  if (tile.target_page_id || (viewing && tile.href)) {
-    className += ' ' + (tile.settings.cursor || 'hand_up')
+  componentDidMount() {
+    if (this.props.tile.type === 'video') {
+      this.videoRef.current.addEventListener('ended', this.handleEnded)
+    }
   }
-  // console.log(tile.settings)
-  switch (tile.type) {
-    case 'image':
-      if (!tile.settings.url) {
-        return null
-      }
-      if (tile.settings.is_tiled) {
-        style.backgroundImage = 'url(' + tile.settings.url + ')'
-        style.backgroundPosition = tile.settings.align.replace('_', ' ')
-        switch (tile.settings.tile_style) {
-          default:
-          case 'tile':
-            break
-          case 'cover':
-            style.backgroundSize = 'cover'
-            break
-          case 'contain':
-            style.backgroundSize = 'contain'
-            break
-          case 'contain no-repeat':
-            style.backgroundSize = 'contain'
-            style.backgroundRepeat = 'no-repeat'
-            break
+  componentWillUnmount() {
+    if (this.props.tile.type === 'video') {
+      this.videoRef.current.removeEventListener('ended', this.handleEnded)
+    }
+  }
+  handleEnded() {
+    this.props.onPlaybackEnded(this.props.tile)
+  }
+  render() {
+    let { tile, bounds, box, viewing, onMouseDown, onDoubleClick } = this.props
+    // console.log(tile)
+    const { width, height } = tile.settings
+    const style = {
+      transform: generateTransform(tile, box),
+      opacity: tile.settings.opacity,
+    }
+    // console.log(generateTransform(tile))
+    let content;
+    let className = ['tile', tile.type].join(' ')
+    if (tile.target_page_id || (viewing && tile.href)) {
+      className += ' ' + (tile.settings.cursor || 'hand_up')
+    }
+    // console.log(tile.settings)
+    switch (tile.type) {
+      case 'image':
+        if (!tile.settings.url) {
+          return null
         }
-        className += ' is_tiled'
-      } else {
-        className += ' ' + tile.settings.align
-        content = <img src={tile.settings.url} />
-      }
-      break
+        if (tile.settings.is_tiled) {
+          style.backgroundImage = 'url(' + tile.settings.url + ')'
+          style.backgroundPosition = tile.settings.align.replace('_', ' ')
+          switch (tile.settings.tile_style) {
+            default:
+            case 'tile':
+              break
+            case 'cover':
+              style.backgroundSize = 'cover'
+              break
+            case 'contain':
+              style.backgroundSize = 'contain'
+              break
+            case 'contain no-repeat':
+              style.backgroundSize = 'contain'
+              style.backgroundRepeat = 'no-repeat'
+              break
+          }
+          className += ' is_tiled'
+        } else {
+          className += ' ' + tile.settings.align
+          content = <img src={tile.settings.url} />
+        }
+        break
 
-    case 'video':
-      if (!tile.settings.url) {
-        return null
-      }
-      className += ' ' + tile.settings.align
-      content = (
-        <video
-          src={tile.settings.url}
-          autoPlay={true}
-          controls={false}
-          loop={tile.settings.loop}
-          muted={tile.settings.muted}
-          style={generateVideoStyle(tile, bounds)}
-        />
-      )
-      break
+      case 'video':
+        if (!tile.settings.url) {
+          return null
+        }
+        className += ' ' + tile.settings.align
+        content = (
+          <video
+            ref={this.videoRef}
+            src={tile.settings.url}
+            autoPlay={true}
+            controls={false}
+            loop={tile.settings.loop}
+            muted={tile.settings.muted}
+            style={generateVideoStyle(tile, bounds)}
+          />
+        )
+        break
 
-    case 'text':
-      if (!tile.settings.content) {
-        return null
-      }
-      content = <span dangerouslySetInnerHTML={{ __html: tile.settings.content }} />
-      className += ' ' + tile.settings.align
-      style.width = unitsDimension(tile, 'width')
-      style.height = unitsDimension(tile, 'height')
-      style.fontFamily = tile.settings.font_family
-      style.fontSize = tile.settings.font_size + 'px'
-      style.lineHeight = 1.5
-      style.fontWeight = (tile.settings.font_style || "").indexOf('bold') !== -1 ? 'bold' : 'normal'
-      style.fontStyle = (tile.settings.font_style || "").indexOf('italic') !== -1 ? 'italic' : 'normal'
-      style.backgroundColor = tile.settings.background_color || 'transparent'
-      style.color = tile.settings.font_color || '#dddddd!important'
-      break
+      case 'text':
+        if (!tile.settings.content) {
+          return null
+        }
+        content = <span dangerouslySetInnerHTML={{ __html: tile.settings.content }} />
+        className += ' ' + tile.settings.align
+        style.width = unitsDimension(tile, 'width')
+        style.height = unitsDimension(tile, 'height')
+        style.fontFamily = tile.settings.font_family
+        style.fontSize = tile.settings.font_size + 'px'
+        style.lineHeight = 1.5
+        style.fontWeight = (tile.settings.font_style || "").indexOf('bold') !== -1 ? 'bold' : 'normal'
+        style.fontStyle = (tile.settings.font_style || "").indexOf('italic') !== -1 ? 'italic' : 'normal'
+        style.backgroundColor = tile.settings.background_color || 'transparent'
+        style.color = tile.settings.font_color || '#dddddd!important'
+        break
 
-    case 'link':
-      content = ""
-      className += ' ' + tile.settings.align
-      style.width = unitsDimension(tile, 'width')
-      style.height = unitsDimension(tile, 'height')
-      break
+      case 'link':
+        content = ""
+        className += ' ' + tile.settings.align
+        style.width = unitsDimension(tile, 'width')
+        style.height = unitsDimension(tile, 'height')
+        break
 
-    case 'script':
-      content = ""
-      if (viewing) {
-        eval(tile.settings.content)
-      } else {
-        content = "SCRIPT"
-      }
-  }
-  if (viewing) {
-    return (
-      <div
-        className={className}
-        onMouseDown={onMouseDown}
-        style={style}
-      >
-        {content}
-      </div>
-    )
-  } else {
-    return (
-      <div
-        className={className}
-        onMouseDown={onMouseDown}
-        onDoubleClick={onDoubleClick}
-        style={style}
-      >
-        {content}
-      </div>
-    )
+      case 'script':
+        content = ""
+        if (viewing) {
+          eval(tile.settings.content)
+        } else {
+          content = "SCRIPT"
+        }
+    }
+    if (viewing) {
+      return (
+        <div
+          className={className}
+          onMouseDown={onMouseDown}
+          style={style}
+        >
+          {content}
+        </div>
+      )
+    } else {
+      return (
+        <div
+          className={className}
+          onMouseDown={onMouseDown}
+          onDoubleClick={onDoubleClick}
+          style={style}
+        >
+          {content}
+        </div>
+      )
+    }
   }
 }
 
@@ -186,5 +210,3 @@ const unitsDimension = (tile, dimension) => {
   if (tile.settings.units) return value + tile.settings.units
   return value + "px"
 }
-
-export default TileHandle