split tile handles into individual files. add video subsection loop

1 files changed, 0 insertions, 209 deletions

diff --git a/frontend/app/views/page/components/tile.handle.js b/frontend/app/views/page/components/tile.handle.js
deleted file mode 100644
index d8184d3..0000000
--- a/frontend/app/views/page/components/tile.handle.js
+++ /dev/null
@@ -1,209 +0,0 @@
-import React, { Component } from 'react'
-
-export default class TileHandle extends Component {
-  constructor(props) {
-    super(props)
-    this.videoRef = React.createRef()
-    this.handleEnded = this.handleEnded.bind(this)
-  }
-  componentDidMount() {
-    if (this.props.tile.type === 'video') {
-      this.videoRef.current.addEventListener('ended', this.handleEnded)
-    }
-  }
-  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
-        }
-        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
-            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 '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>
-      )
-    }
-  }
-}
-
-const generateTransform = (tile, box) => {
-  let { x, y, align, rotation, scale, units, is_tiled } = tile.settings
-  if (is_tiled) {
-    return 'translateZ(0)'
-  }
-  if (box) {
-    x += box.dx
-    y += box.dy
-  }
-  units = units || 'px'
-  const [yalign, xalign] = align.split('_')
-  let transform = ['translateZ(0)']
-  if (yalign === 'center') {
-    transform.push('translateY(-50%)')
-  }
-  if (xalign === 'center') {
-    transform.push('translateX(-50%)')
-  }
-  // if (x % 2 == 1) x += 0.5
-  // if (y % 2 == 1) y += 0.5
-  transform.push('translateX(' + x + units + ')')
-  transform.push('translateY(' + y + units + ')')
-  if (scale !== 1) {
-    transform.push('scale(' + scale + ')')
-  }
-  if (rotation !== 0) {
-    transform.push('rotateZ(' + rotation + 'deg)')
-  }
-  return transform.join(' ')
-}
-
-const generateVideoStyle = (tile, bounds) => {
-  const style = {
-    pointerEvents: "none",
-  }
-  switch (tile.settings.video_style) {
-    case 'normal':
-      style.width = "auto"
-      style.height = "auto"
-      break
-    case 'cover':
-      if (tile.settings.width && (tile.settings.width / tile.settings.height) > (bounds.width / bounds.height)) {
-        style.width = Math.round((tile.settings.width / tile.settings.height) * bounds.height)
-        style.height = bounds.height
-      } else {
-        style.width = bounds.width
-        style.height = Math.round((tile.settings.height / tile.settings.width) * bounds.width)
-      }
-      break
-    case 'contain':
-      if (tile.settings.width && (tile.settings.width / tile.settings.height) > (bounds.width / bounds.height)) {
-        style.width = bounds.width
-        style.height = Math.round((tile.settings.height / tile.settings.width) * bounds.width)
-      } else {
-        style.width = Math.round((tile.settings.width / tile.settings.height) * bounds.height)
-        style.height = bounds.height
-      }
-      break
-  }
-  return style
-}
-
-const unitsDimension = (tile, dimension) => {
-  const value = tile.settings[dimension]
-  if (!value) return "auto"
-  if (tile.settings.units) return value + tile.settings.units
-  return value + "px"
-}