split tile handles into individual files. add video subsection loop

18 files changed, 390 insertions, 234 deletions

diff --git a/cli/commands/site/populate.py b/cli/commands/site/populate.py
index 4b5bb73..03914b2 100644
--- a/cli/commands/site/populate.py
+++ b/cli/commands/site/populate.py
@@ -1,13 +1,12 @@
 import click
 
-# lines = """/static/media/last-museum/zohra-opoku/.mp4
-# /static/media/last-museum/zohra-opoku/MVI_4388.mp4
-# /static/media/last-museum/zohra-opoku/MVI_4390.mp4
-# /static/media/last-museum/zohra-opoku/.mp4""".split("\n")
-
-lines = [
-"/static/media/last-museum/zohra-opoku/MVI_4367.mp4",
-]
+lines = """/static/media/last-museum/juliana-cerqueira-leite/01_JCL_AndyCbs_v1.mp4
+/static/media/last-museum/juliana-cerqueira-leite/02_JCL_Containers_v1.mp4
+/static/media/last-museum/juliana-cerqueira-leite/04_JCL_Repshp_v1.mp4
+/static/media/last-museum/juliana-cerqueira-leite/07_JCL_GmShp_v1.mp4
+/static/media/last-museum/juliana-cerqueira-leite/10_JCL_StreetPrtSftwr_v1.mp4
+/static/media/last-museum/juliana-cerqueira-leite/11_JCL_Oscilloscopes_v1.mp4
+""".split("\n")
 
 letters = ['a','b','c','d','e','f','g','h','i','j']
 
@@ -23,19 +22,19 @@ def cli(ctx):
     return None if resp.status_code != 200 else resp.json()
 
   graph_id = 3
-  name = "Zohra Opoku. Chapter 9: To Me Belongs Yesterday"
+  name = "Juliana Cerqueira Leite. Stalfigenia, Chapter "
   index = 0
 
   for url in lines:
-    slug = url.split("/")[5].replace(".mp4", "").lower()
-    slug = "opoku-" + "9-to-me-belongs-yesterday" # + letters[index]
+    # slug = url.split("/")[5].replace(".mp4", "").lower()
+    slug = "leite-" + letters[index]
     print(slug)
     index += 1
 
     page_data = {
       "graph_id": graph_id,
       "path": slug,
-      "title": name,
+      "title": name + str(index),
       "username": "jules",
       "description":"",
       "settings": {
diff --git a/frontend/app/utils/index.js b/frontend/app/utils/index.js
index 6e5a909..d67d89a 100644
--- a/frontend/app/utils/index.js
+++ b/frontend/app/utils/index.js
@@ -63,6 +63,16 @@ export const timestamp = (n = 0, fps = 25) => {
   }
   return (n % 60) + ':' + s
 }
+export const timestampToSeconds = time_str => {
+  const time_str_parts = (time_str || "").trim().split(":").map(s => parseFloat(s))
+  if (time_str_parts.length === 3) {
+    return (time_str_parts[0] * 60 + time_str_parts[1]) * 60 + time_str_parts[2]
+  }
+  if (time_str_parts.length === 2) {
+    return time_str_parts[0] * 60 + time_str_parts[1]
+  }
+  return time_str_parts[0]
+}
 
 export const percent = n => (n * 100).toFixed(1) + '%'
 
diff --git a/frontend/app/views/page/components/page.editor.js b/frontend/app/views/page/components/page.editor.js
index 7f6182d..2f14ffb 100644
--- a/frontend/app/views/page/components/page.editor.js
+++ b/frontend/app/views/page/components/page.editor.js
@@ -5,13 +5,13 @@ import { connect } from 'react-redux'
 
 import { session } from 'app/session'
 import actions from 'app/actions'
-import * as pageActions from '../page.actions'
-import * as tileActions from '../../tile/tile.actions'
+import * as pageActions from 'app/views/page/page.actions'
+import * as tileActions from 'app/views/tile/tile.actions'
 
 import { Loader } from 'app/common'
 import { clamp, dist } from 'app/utils'
 
-import TileHandle from './tile.handle'
+import TileHandle from 'app/views/tile/components/tile.handle'
 
 const defaultState = {
   dragging: false,
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"
-}
diff --git a/frontend/app/views/page/page.container.js b/frontend/app/views/page/page.container.js
index dc85f5e..68347b7 100644
--- a/frontend/app/views/page/page.container.js
+++ b/frontend/app/views/page/page.container.js
@@ -9,13 +9,13 @@ import './cursors.css'
 import actions from 'app/actions'
 import { Loader } from 'app/common'
 
-import * as graphActions from '../graph/graph.actions'
+import * as graphActions from 'app/views/graph/graph.actions'
 import * as pageActions from './page.actions'
 
-import PageEdit from '../graph/components/page.edit'
-import TileNew from './components/tile.new'
-import TileEdit from './components/tile.edit'
-import TileList from './components/tile.list'
+import PageEdit from 'app/views/graph/components/page.edit'
+import TileNew from 'app/views/tile/components/tile.new'
+import TileEdit from 'app/views/tile/components/tile.edit'
+import TileList from 'app/views/tile/components/tile.list'
 
 import PageHeader from './components/page.header'
 import PageEditor from './components/page.editor'
diff --git a/frontend/app/views/page/components/tile.edit.js b/frontend/app/views/tile/components/tile.edit.js
index cae9f73..cae9f73 100644
--- a/frontend/app/views/page/components/tile.edit.js
+++ b/frontend/app/views/tile/components/tile.edit.js
diff --git a/frontend/app/views/page/components/tile.form.js b/frontend/app/views/tile/components/tile.form.js
index aefecf1..49b34b1 100644
--- a/frontend/app/views/page/components/tile.form.js
+++ b/frontend/app/views/tile/components/tile.form.js
@@ -96,8 +96,11 @@ const newVideo = (data) => ({
     external_link_url: "",
     cursor: 'none',
     muted: false,
-    loop: false,
+    loop_style: false,
     autoadvance: false,
+    loop_section: false,
+    loop_start: 0,
+    loop_end: 0,
   },
   type: 'video',
   target_page_id: null,
@@ -560,16 +563,44 @@ class TileForm extends Component {
             name="muted"
             checked={temporaryTile.settings.muted}
             onChange={this.handleSettingsSelect}
-            autoComplete="off"
           />
           <Checkbox
             label="Autoadvance"
             name="autoadvance"
             checked={temporaryTile.settings.autoadvance}
             onChange={this.handleSettingsSelect}
-            autoComplete="off"
           />
         </div>
+        {temporaryTile.settings.loop && (
+          <div className='row'>
+            <Checkbox
+              label="Loop section?"
+              name="loop_section"
+              checked={temporaryTile.settings.loop_section}
+              onChange={this.handleSettingsSelect}
+            />
+          </div>
+        )}
+        {temporaryTile.settings.loop && temporaryTile.settings.loop_section && (
+          <div className='row pair'>
+            <TextInput
+              title="From"
+              placeholder='0:00'
+              name="loop_start"
+              data={temporaryTile.settings}
+              onChange={this.handleSettingsChange}
+              autoComplete="off"
+            />
+            <TextInput
+              title="To"
+              placeholder='0:00'
+              name="loop_end"
+              data={temporaryTile.settings}
+              onChange={this.handleSettingsChange}
+              autoComplete="off"
+            />
+          </div>
+        )}
       </div>
     )
   }
@@ -763,7 +794,7 @@ class TileForm extends Component {
     return (
       <div>
         <Checkbox
-          label="Play audio"
+          label="Add audio events"
           name="has_audio"
           checked={temporaryTile.settings.has_audio}
           onChange={this.handleSettingsSelect}
diff --git a/frontend/app/views/tile/components/tile.handle.js b/frontend/app/views/tile/components/tile.handle.js
new file mode 100644
index 0000000..03b9f88
--- /dev/null
+++ b/frontend/app/views/tile/components/tile.handle.js
@@ -0,0 +1,8 @@
+import React from 'react'
+
+import handles from 'app/views/tile/handles'
+
+export default function TileHandle (props) {
+  const Tile = handles[props.tile.type]
+  return <Tile {...props} />
+}
diff --git a/frontend/app/views/page/components/tile.list.js b/frontend/app/views/tile/components/tile.list.js
index c455489..c455489 100644
--- a/frontend/app/views/page/components/tile.list.js
+++ b/frontend/app/views/tile/components/tile.list.js
diff --git a/frontend/app/views/page/components/tile.new.js b/frontend/app/views/tile/components/tile.new.js
index b491fdd..b491fdd 100644
--- a/frontend/app/views/page/components/tile.new.js
+++ b/frontend/app/views/tile/components/tile.new.js
diff --git a/frontend/app/views/tile/handles/index.js b/frontend/app/views/tile/handles/index.js
new file mode 100644
index 0000000..8aaeb06
--- /dev/null
+++ b/frontend/app/views/tile/handles/index.js
@@ -0,0 +1,14 @@
+
+import TileImage from './tile.image'
+import TileVideo from './tile.video'
+import TileLink from './tile.link'
+import TileText from './tile.text'
+import TileScript from './tile.script'
+
+export default {
+  image: TileImage,
+  video: TileVideo,
+  link: TileLink,
+  text: TileText,
+  script: TileScript,
+}
diff --git a/frontend/app/views/tile/handles/tile.image.js b/frontend/app/views/tile/handles/tile.image.js
new file mode 100644
index 0000000..fd34876
--- /dev/null
+++ b/frontend/app/views/tile/handles/tile.image.js
@@ -0,0 +1,54 @@
+import React from 'react'
+import { generateTransform } from 'app/views/tile/tile.utils'
+
+export default function TileImage({ tile, box, viewing, onMouseDown, onDoubleClick }) {
+  // console.log(tile)
+  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')
+  }
+
+  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} />
+  }
+
+  return (
+    <div
+      className={className}
+      onMouseDown={onMouseDown}
+      onDoubleClick={onDoubleClick}
+      style={style}
+    >
+      {content}
+    </div>
+  )
+}
diff --git a/frontend/app/views/tile/handles/tile.link.js b/frontend/app/views/tile/handles/tile.link.js
new file mode 100644
index 0000000..839c18c
--- /dev/null
+++ b/frontend/app/views/tile/handles/tile.link.js
@@ -0,0 +1,34 @@
+import React from 'react'
+import { generateTransform, unitsDimension } from 'app/views/tile/tile.utils'
+
+export default function TileScript({ tile, box, viewing, onMouseDown, onDoubleClick }) {
+  // console.log(tile)
+  const style = {
+    transform: generateTransform(tile, box),
+    opacity: tile.settings.opacity,
+  }
+  // console.log(generateTransform(tile))
+  let className = ['tile', tile.type].join(' ')
+  if (tile.target_page_id || (viewing && tile.href)) {
+    className += ' ' + (tile.settings.cursor || 'hand_up')
+  }
+
+  if (!tile.settings.content) {
+    return null
+  }
+  let content = ""
+  className += ' ' + tile.settings.align
+  style.width = unitsDimension(tile, 'width')
+  style.height = unitsDimension(tile, 'height')
+
+  return (
+    <div
+      className={className}
+      onMouseDown={onMouseDown}
+      onDoubleClick={onDoubleClick}
+      style={style}
+    >
+      {content}
+    </div>
+  )
+}
diff --git a/frontend/app/views/tile/handles/tile.script.js b/frontend/app/views/tile/handles/tile.script.js
new file mode 100644
index 0000000..6996cc0
--- /dev/null
+++ b/frontend/app/views/tile/handles/tile.script.js
@@ -0,0 +1,34 @@
+import React from 'react'
+import { generateTransform } from 'app/views/tile/tile.utils'
+
+export default function TileScript({ tile, box, viewing, onMouseDown, onDoubleClick }) {
+  // console.log(tile)
+  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')
+  }
+
+  content = ""
+  if (viewing) {
+    eval(tile.settings.content)
+  } else {
+    content = "SCRIPT"
+  }
+
+  return (
+    <div
+      className={className}
+      onMouseDown={onMouseDown}
+      onDoubleClick={onDoubleClick}
+      style={style}
+    >
+      {content}
+    </div>
+  )
+}
diff --git a/frontend/app/views/tile/handles/tile.text.js b/frontend/app/views/tile/handles/tile.text.js
new file mode 100644
index 0000000..5d38c85
--- /dev/null
+++ b/frontend/app/views/tile/handles/tile.text.js
@@ -0,0 +1,41 @@
+import React from 'react'
+import { generateTransform, unitsDimension } from 'app/views/tile/tile.utils'
+
+export default function TileScript({ tile, box, viewing, onMouseDown, onDoubleClick }) {
+  // console.log(tile)
+  const style = {
+    transform: generateTransform(tile, box),
+    opacity: tile.settings.opacity,
+  }
+  // console.log(generateTransform(tile))
+  let className = ['tile', tile.type].join(' ')
+  if (tile.target_page_id || (viewing && tile.href)) {
+    className += ' ' + (tile.settings.cursor || 'hand_up')
+  }
+
+  if (!tile.settings.content) {
+    return null
+  }
+  let 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'
+
+  return (
+    <div
+      className={className}
+      onMouseDown={onMouseDown}
+      onDoubleClick={onDoubleClick}
+      style={style}
+    >
+      {content}
+    </div>
+  )
+}
diff --git a/frontend/app/views/tile/handles/tile.video.js b/frontend/app/views/tile/handles/tile.video.js
new file mode 100644
index 0000000..001cce2
--- /dev/null
+++ b/frontend/app/views/tile/handles/tile.video.js
@@ -0,0 +1,72 @@
+import React, { Component } from 'react'
+
+import { generateTransform, generateVideoStyle } from 'app/views/tile/tile.utils'
+import { timestampToSeconds } from 'app/utils'
+
+export default class TileVideo extends Component {
+  constructor(props) {
+    super(props)
+    this.videoRef = React.createRef()
+    this.handleTimeUpdate = this.handleTimeUpdate.bind(this)
+    this.handleEnded = this.handleEnded.bind(this)
+  }
+  componentDidMount() {
+    this.videoRef.current.addEventListener('ended', this.handleEnded)
+    this.videoRef.current.addEventListener('timeupdate', this.handleTimeUpdate)
+  }
+  componentWillUnmount() {
+    this.videoRef.current.removeEventListener('timeupdate', this.handleTimeUpdate)
+    this.videoRef.current.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
+      const loop_end = timestampToSeconds(this.props.tile.settings.loop_end) || this.videoRef.current.duration
+      if (this.videoRef.current.currentTime > loop_end) {
+        this.videoRef.current.currentTime = loop_start
+      }
+    }
+  }
+  handleEnded() {
+    this.props.onPlaybackEnded(this.props.tile)
+    if (this.props.tile.settings.loop && this.props.tile.settings.loop_section) {
+      const loop_start = timestampToSeconds(this.props.tile.settings.loop_start) || 0
+      this.videoRef.current.currentTime = loop_start
+    }
+  }
+  render() {
+    let { tile, bounds, box, viewing, onMouseDown, onDoubleClick } = this.props
+    // console.log(tile)
+    const style = {
+      transform: generateTransform(tile, box),
+      opacity: tile.settings.opacity,
+    }
+    let className = ['tile', tile.type].join(' ')
+    if (tile.target_page_id || (viewing && tile.href)) {
+      className += ' ' + (tile.settings.cursor || 'hand_up')
+    }
+    // console.log(tile.settings)
+    if (!tile.settings.url) {
+      return null
+    }
+    className += ' ' + tile.settings.align
+    return (
+      <div
+        className={className}
+        onMouseDown={onMouseDown}
+        onDoubleClick={onDoubleClick}
+        style={style}
+      >
+        <video
+          ref={this.videoRef}
+          src={tile.settings.url}
+          autoPlay={true}
+          controls={false}
+          loop={tile.settings.loop}
+          muted={tile.settings.muted}
+          style={generateVideoStyle(tile, bounds)}
+        />
+      </div>
+    )
+  }
+}
diff --git a/frontend/app/views/tile/tile.utils.js b/frontend/app/views/tile/tile.utils.js
new file mode 100644
index 0000000..8782f85
--- /dev/null
+++ b/frontend/app/views/tile/tile.utils.js
@@ -0,0 +1,68 @@
+export 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(' ')
+}
+
+export 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
+}
+
+export 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"
+}
diff --git a/frontend/site/viewer/viewer.container.js b/frontend/site/viewer/viewer.container.js
index fa90b1f..6f6b850 100644
--- a/frontend/site/viewer/viewer.container.js
+++ b/frontend/site/viewer/viewer.container.js
@@ -6,7 +6,7 @@ import { connect } from 'react-redux'
 import { history } from 'site/store'
 import actions from 'site/actions'
 import { Loader } from 'app/common/loader.component'
-import TileHandle from 'app/views/page/components/tile.handle'
+import TileHandle from 'app/views/tile/components/tile.handle'
 
 import 'app/views/page/page.css'