split tile handles into individual files. add video subsection loop

12 files changed, 1487 insertions, 0 deletions

diff --git a/frontend/app/views/tile/components/tile.edit.js b/frontend/app/views/tile/components/tile.edit.js
new file mode 100644
index 0000000..cae9f73
--- /dev/null
+++ b/frontend/app/views/tile/components/tile.edit.js
@@ -0,0 +1,86 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+// import { history } from 'app/store'
+import actions from 'app/actions'
+import * as pageActions from '../../page/page.actions'
+import * as tileActions from '../../tile/tile.actions'
+
+import { Loader } from 'app/common'
+
+import TileForm from '../components/tile.form'
+
+class TileEdit extends Component {
+  state = {
+    tile: null
+  }
+
+  componentDidMount() {
+    this.load()
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.page.editor.currentEditTileId !== this.props.page.editor.currentEditTileId) {
+      this.load()
+    }
+  }
+
+  load() {
+    const { currentEditTileId } = this.props.page.editor
+    const { tiles } = this.props.page.show.res
+    if (!tiles) return
+    const tile = tiles.filter(tile => tile.id === currentEditTileId)[0]
+    console.log('edit', currentEditTileId)
+    this.setState({ tile })
+  }
+
+  handleSubmit(data) {
+    actions.tile.update(data)
+      .then(response => {
+        // console.log(response)
+        if (response.status === 'ok') {
+          this.props.pageActions.updatePageTile(response.res)
+        }
+      })
+  }
+
+  handleClose() {
+    this.props.pageActions.hideEditTileForm()
+    this.props.tileActions.clearTemporaryTile()
+  }
+
+  render() {
+    const { tile } = this.state
+    if (!tile) {
+      return (
+        <div className='form'>
+          <Loader />
+        </div>
+      )
+    }
+    return (
+      <TileForm
+        initialData={tile}
+        graph={this.props.graph.show.res}
+        page={this.props.page.show.res}
+        onSubmit={this.handleSubmit.bind(this)}
+        onClose={this.handleClose.bind(this)}
+      />
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  graph: state.graph,
+  page: state.page,
+  tile: state.tile,
+})
+
+const mapDispatchToProps = dispatch => ({
+  pageActions: bindActionCreators({ ...pageActions }, dispatch),
+  tileActions: bindActionCreators({ ...tileActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(TileEdit)
diff --git a/frontend/app/views/tile/components/tile.form.js b/frontend/app/views/tile/components/tile.form.js
new file mode 100644
index 0000000..49b34b1
--- /dev/null
+++ b/frontend/app/views/tile/components/tile.form.js
@@ -0,0 +1,879 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import { Link } from 'react-router-dom'
+
+import actions from 'app/actions'
+import { session } from 'app/session'
+
+import {
+  TextInput, NumberInput, ColorInput, Slider,
+  Select, LabelDescription, TextArea, Checkbox,
+  SubmitButton, Loader } from 'app/common'
+import AudioSelect from 'app/views/audio/components/audio.select'
+import { preloadImage, preloadVideo } from 'app/utils'
+
+import * as tileActions from '../../tile/tile.actions'
+
+const SELECT_TYPES = [
+  "image", "text", "video", "link", "script",
+].map(s => ({ name: s, label: s }))
+
+const ALIGNMENTS = [
+  "top_left", "top_center", "top_right",
+  "center_left", "center_center", "center_right",
+  "bottom_left", "bottom_center", "bottom_right",
+].map(align => ({
+  name: align,
+  label: align === 'center_center'
+    ? 'center'
+    : align.replace('_', ' ')
+  }))
+
+const REQUIRED_KEYS = {
+  image: ['url'],
+  video: ['url'],
+  text: ['content'],
+  link: [],
+  script: [],
+}
+
+const IMAGE_TILE_STYLES = [
+  'tile', 'cover', 'contain', 'contain no-repeat'
+].map(style => ({ name: style, label: style }))
+
+const VIDEO_STYLES = [
+  'normal', 'cover', 'contain',
+].map(style => ({ name: style, label: style }))
+
+const TEXT_FONT_FAMILIES = [
+  'sans-serif', 'serif', 'fantasy', 'monospace', 'cursive',
+].map(style => ({ name: style, label: style }))
+
+const TEXT_FONT_STYLES = [
+  'normal', 'bold', 'italic', 'bold-italic',
+].map(style => ({ name: style, label: style }))
+
+const CURSORS = [
+  { name: 'none', label: 'None', },
+  { name: 'hand_up', label: 'Up', },
+  { name: 'hand_down', label: 'Down', },
+  { name: 'hand_left', label: 'Left', },
+  { name: 'hand_right', label: 'Right', },
+  { name: 'unclickable', label: 'Unclickable', },
+]
+
+const NO_LINK = 0
+const EXTERNAL_LINK = -1
+const PAGE_LIST_TOP_OPTIONS = [
+  { name: NO_LINK, label: 'No link' },
+  { name: EXTERNAL_LINK, label: 'External link' },
+  { name: -2, label: '──────────', disabled: true },
+]
+
+// target_page_id = Column(Integer, ForeignKey('page.id'), nullable=True)
+// https://s3.amazonaws.com/i.asdf.us/im/1c/gradient_gold1-SpringGreen1_1321159749.jpg
+
+const newImage = (data) => ({
+  settings: {
+    ...newPosition(),
+    is_tiled: false,
+    tile_style: 'tile',
+    url: "",
+    external_link_url: "",
+    cursor: 'hand_up',
+  },
+  type: 'image',
+  target_page_id: null,
+  ...data,
+})
+
+const newVideo = (data) => ({
+  settings: {
+    ...newPosition(),
+    video_style: 'cover',
+    url: "",
+    external_link_url: "",
+    cursor: 'none',
+    muted: false,
+    loop_style: false,
+    autoadvance: false,
+    loop_section: false,
+    loop_start: 0,
+    loop_end: 0,
+  },
+  type: 'video',
+  target_page_id: null,
+  ...data,
+})
+
+const newText = (data) => ({
+  settings: {
+    ...newPosition(),
+    content: "",
+    font_family: 'sans-serif',
+    font_size: 16,
+    font_style: 'normal',
+    font_color: '#dddddd',
+    background_color: 'transparent',
+    width: 0,
+    height: 0,
+    units: 'px',
+    external_link_url: "",
+    cursor: 'hand_up',
+  },
+  type: 'text',
+  target_page_id: null,
+  ...data,
+})
+
+const newLink = (data) => ({
+  settings: {
+    ...newPosition({ width: 100, height: 100, }),
+    external_link_url: "",
+    cursor: 'hand_up',
+    units: 'px',
+  },
+  type: 'link',
+  target_page_id: null,
+  ...data,
+})
+
+const newScript = (data) => ({
+  settings: {
+    ...newPosition({ width: 100, height: 100, }),
+  },
+  type: 'script',
+  ...data,
+})
+
+const newPosition = (data) => ({
+  x: 0, y: 0,
+  width: 0, height: 0,
+  rotation: 0, scale: 1,
+  opacity: 1,
+  units: false,
+  align: "center_center",
+  has_audio: false,
+  audio_on_click_id: 0,
+  audio_on_hover_id: 0,
+  navigate_when_audio_finishes: false,
+  ...data,
+})
+
+const TYPE_CONSTRUCTORS = {
+  image: newImage,
+  video: newVideo,
+  text: newText,
+  link: newLink,
+  script: newScript,
+}
+
+class TileForm extends Component {
+  state = {
+    title: "",
+    submitTitle: "",
+    errorFields: new Set([]),
+    modified: false,
+    pageList: [],
+  }
+
+  constructor(props){
+    super(props)
+    this.handleChange = this.handleChange.bind(this)
+    this.handleSelect = this.handleSelect.bind(this)
+    this.handleSettingsChange = this.handleSettingsChange.bind(this)
+    this.handleSettingsSelect = this.handleSettingsSelect.bind(this)
+    this.handleAlignment = this.handleAlignment.bind(this)
+    this.handleImageChange = this.handleImageChange.bind(this)
+    this.handleVideoChange = this.handleVideoChange.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
+    this.handleDelete = this.handleDelete.bind(this)
+  }
+
+  componentDidMount() {
+    const { graph, page, isNew, initialData, sortOrder } = this.props
+    const title = isNew ? 'new tile' : 'editing tile'
+    const submitTitle = isNew ? "Create Tile" : "Save Changes"
+    this.setState({
+      title,
+      submitTitle,
+      errorFields: new Set([]),
+    })
+    const { pages } = graph.show.res
+    const linkPages = initialData ? pages.filter(page => page.id !== initialData.id) : pages
+    let pageList = [
+      ...PAGE_LIST_TOP_OPTIONS,
+      ...linkPages.map(page => ({ name: page.id, label: page.path }))
+    ]
+    this.setState({ pageList })
+    if (isNew) {
+      const newTile = newImage({
+        id: "new",
+        graph_id: graph.show.res.id,
+        page_id: page.show.res.id,
+        sort_order: sortOrder,
+      })
+      this.props.tileActions.updateTemporaryTile(newTile)
+    } else {
+      this.props.tileActions.updateTemporaryTile({ ...initialData })
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!this.props.isNew && this.props.initialData !== prevProps.initialData) {
+      this.handleSubmit()
+      this.props.tileActions.updateTemporaryTile({ ...this.props.initialData })
+      this.setState({
+        errorFields: new Set([]),
+      })
+    }
+  }
+
+  componentWillUnmount() {
+    // if the item has changed, save before we close the form!
+    if (!this.props.isNew && this.state.modified) {
+      this.handleSubmit()
+    }
+  }
+
+  handleChange(e) {
+    const { name, value } = e.target
+    this.clearErrorField(name)
+    this.props.tileActions.updateTemporaryTile({
+      ...this.props.temporaryTile,
+      [name]: value,
+    })
+  }
+
+  handleTypeChange(type) {
+    const { graph, page, temporaryTile } = this.props
+    let newTile = TYPE_CONSTRUCTORS[type]({
+      id: temporaryTile.id,
+      graph_id: temporaryTile.graph_id,
+      page_id: temporaryTile.page_id,
+    })
+    newTile.settings.align = temporaryTile.settings.align
+    this.clearErrorField('type')
+    this.props.tileActions.updateTemporaryTile(newTile)
+  }
+
+  handleSettingsChange(e) {
+    const { name, value } = e.target
+    this.clearErrorField(name)
+    this.props.tileActions.updateTemporaryTile({
+      ...this.props.temporaryTile,
+      settings: {
+        ...this.props.temporaryTile.settings,
+        [name]: value,
+      }
+    })
+  }
+
+  handleSelect(name, value) {
+    this.clearErrorField(name)
+    if (name === 'type') {
+      return this.handleTypeChange(value)
+    }
+    if (name === 'target_page_id') {
+      value = parseInt(value)
+    }
+    this.props.tileActions.updateTemporaryTile({
+      ...this.props.temporaryTile,
+      [name]: value,
+    })
+  }
+
+  handleSettingsSelect(name, value) {
+    this.clearErrorField(name)
+    this.props.tileActions.updateTemporaryTile({
+      ...this.props.temporaryTile,
+      settings: {
+        ...this.props.temporaryTile.settings,
+        [name]: value,
+      }
+    })
+  }
+
+  handleAlignment(name, value) {
+    this.clearErrorField(name)
+    this.props.tileActions.updateTemporaryTile({
+      ...this.props.temporaryTile,
+      settings: {
+        ...this.props.temporaryTile.settings,
+        [name]: value,
+        x: 0, y: 0,
+      }
+    })
+  }
+
+  handleImageChange(e) {
+    const { name, value } = e.target
+    this.handleSettingsSelect(name, value)
+    preloadImage(value).then(img => {
+      // console.log(img)
+      this.props.tileActions.updateTemporaryTile({
+        ...this.props.temporaryTile,
+        settings: {
+          ...this.props.temporaryTile.settings,
+          [name]: value,
+          width: img.naturalWidth,
+          height: img.naturalHeight,
+          x: 0, y: 0,
+        }
+      })
+    })
+  }
+
+  handleVideoChange(e) {
+    const { name, value } = e.target
+    this.handleSettingsSelect(name, value)
+    preloadVideo(value).then(video => {
+      // console.log(img)
+      this.props.tileActions.updateTemporaryTile({
+        ...this.props.temporaryTile,
+        settings: {
+          ...this.props.temporaryTile.settings,
+          [name]: value,
+          width: video.videoWidth,
+          height: video.videoHeight,
+          x: 0, y: 0,
+        }
+      })
+    })
+  }
+
+  clearErrorField(name) {
+    const { errorFields } = this.state
+    if (errorFields.has(name)) {
+      errorFields.delete(name)
+      this.setState({
+        errorFields,
+        modified: true,
+      })
+    } else if (!this.state.modified) {
+      this.setState({
+        errorFields,
+        modified: true,
+      })
+    }
+  }
+
+  handleSubmit(e) {
+    if (e) e.preventDefault()
+    const { isNew, temporaryTile, onSubmit, onClose } = this.props
+    const requiredSettings = REQUIRED_KEYS[temporaryTile.type]
+    const validKeys = "id graph_id page_id target_page_id type settings".split(" ")
+    const validData = validKeys.reduce((a,b) => { a[b] = temporaryTile[b]; return a }, {})
+    const errorFields = requiredSettings.filter(key => !validData.settings[key])
+    if (errorFields.length) {
+      console.log('error', errorFields, validData)
+      if (e) {
+        this.setState({ errorFields: new Set(errorFields) })
+      }
+    } else {
+      if (isNew) {
+        // side effect: set username if we're creating a new tile
+        // session.set('username', data.username)
+        delete validData.id
+      } else {
+        validData.id = temporaryTile.id
+      }
+      this.setState({ modified: false })
+      console.log('submit', validData)
+      onSubmit(validData)
+      // if submitting after switching elements, don't close the form
+      if (e && onClose) {
+        onClose()
+      }
+    }
+  }
+
+  handleDelete() {
+    const { temporaryTile, isNew, onClose } = this.props
+    if (confirm('Really delete this tile?')) {
+      actions.tile.destroy(temporaryTile)
+      .then(() => {
+        onClose()
+      })
+    }
+  }
+
+  render() {
+    const { temporaryTile, isNew } = this.props
+    const { title, submitTitle, errorFields } = this.state
+    if (!temporaryTile || !temporaryTile.settings) return <div className='box' />
+    return (
+      <div className='box'>
+        <h1>{title}</h1>
+        <form onSubmit={this.handleSubmit}>
+          <div className="row selects">
+            <Select
+              name='type'
+              selected={temporaryTile.type}
+              options={SELECT_TYPES}
+              title=''
+              onChange={this.handleSelect}
+            />
+            <Select
+              name='align'
+              selected={temporaryTile.settings.align}
+              options={ALIGNMENTS}
+              title=''
+              onChange={this.handleAlignment}
+            />
+          </div>
+
+          {this.renderPositionInfo()}
+
+          {temporaryTile.type === 'image'
+            ? this.renderImageForm()
+          : temporaryTile.type === 'video'
+            ? this.renderVideoForm()
+          : temporaryTile.type === 'text'
+            ? this.renderTextForm()
+          : temporaryTile.type === 'link'
+            ? this.renderLinkForm()
+          : temporaryTile.type === 'script'
+            ? this.renderScriptForm()
+          : ""}
+
+          {this.renderHyperlinkForm()}
+          {this.renderMiscForm()}
+          {this.renderAudioForm()}
+
+          <div className='row buttons'>
+            <SubmitButton
+              title={submitTitle}
+              onClick={this.handleSubmit}
+            />
+            {!isNew && 
+              <SubmitButton
+                title={'Delete'}
+                className='destroy'
+                onClick={this.handleDelete}
+              />
+            }
+          </div>
+          {!!errorFields.size &&
+            <label>
+              <span></span>
+              <span>Please add the required fields =)</span>
+            </label>
+          }
+        </form>
+      </div>
+    )
+  }
+
+  renderPositionInfo() {
+    const { temporaryTile } = this.props
+    const { x, y, width, height, rotation, scale } = temporaryTile.settings
+    return (
+      <div className='position'>
+        {parseInt(x)}{', '}
+        {parseInt(y)}{' '}
+        {parseInt(width)}{'x'}{parseInt(height)}{' '}
+        {rotation === 0 || <span>{parseInt(rotation)}{'\u00B0 '}</span>}
+        {scale === 1 || <span>{'x'}{scale.toFixed(2)}</span>}
+      </div>
+    )
+  }
+
+  renderImageForm() {
+    // const { isNew } = this.props
+    const { temporaryTile } = this.props
+    const { errorFields } = this.state
+    // console.log(temporaryTile.settings)
+    return (
+      <div>
+        <div className='row imageUrl'>
+          {temporaryTile.settings.url && <div className='thumb'><img src={temporaryTile.settings.url} /></div>}
+          <TextInput
+            title=""
+            placeholder='http://'
+            name="url"
+            required
+            data={temporaryTile.settings}
+            error={errorFields.has('url')}
+            onChange={this.handleImageChange}
+            autoComplete="off"
+          />
+        </div>
+        <div className='row pair'>
+          <Checkbox
+            label="Tiled"
+            name="is_tiled"
+            checked={temporaryTile.settings.is_tiled}
+            onChange={this.handleSettingsSelect}
+            autoComplete="off"
+          />
+          {temporaryTile.settings.is_tiled &&
+            <Select
+              name='tile_style'
+              selected={temporaryTile.settings.tile_style || 'tile'}
+              options={IMAGE_TILE_STYLES}
+              title=''
+              onChange={this.handleSettingsSelect}
+            />
+          }
+        </div>
+      </div>
+    )
+  }
+
+  renderVideoForm() {
+    // const { isNew } = this.props
+    const { temporaryTile } = this.props
+    const { errorFields } = this.state
+    // console.log(temporaryTile.settings)
+    return (
+      <div>
+        <div className='row imageUrl'>
+          <TextInput
+            title=""
+            placeholder='http://'
+            name="url"
+            required
+            data={temporaryTile.settings}
+            error={errorFields.has('url')}
+            onChange={this.handleVideoChange}
+            autoComplete="off"
+          />
+        </div>
+        <div className='row pair'>
+          <Select
+            name='video_style'
+            selected={temporaryTile.settings.video_style || 'none'}
+            options={VIDEO_STYLES}
+            title=''
+            onChange={this.handleSettingsSelect}
+          />
+          <Checkbox
+            label="Loop"
+            name="loop"
+            checked={temporaryTile.settings.loop}
+            onChange={this.handleSettingsSelect}
+            autoComplete="off"
+          />
+        </div>
+        <div className='row pair'>
+          <Checkbox
+            label="Muted"
+            name="muted"
+            checked={temporaryTile.settings.muted}
+            onChange={this.handleSettingsSelect}
+          />
+          <Checkbox
+            label="Autoadvance"
+            name="autoadvance"
+            checked={temporaryTile.settings.autoadvance}
+            onChange={this.handleSettingsSelect}
+          />
+        </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>
+    )
+  }
+
+  renderTextForm() {
+    const { temporaryTile } = this.props
+    const { errorFields } = this.state
+    return (
+      <div>
+        <TextArea
+          title=""
+          name="content"
+          required
+          data={temporaryTile.settings}
+          error={errorFields.has('content')}
+          onChange={this.handleSettingsChange}
+          autoComplete="off"
+        />
+        <div className='row font'>
+          <Select
+            title="Font"
+            name='font_family'
+            selected={temporaryTile.settings.font_family || 'sans-serif'}
+            options={TEXT_FONT_FAMILIES}
+            title=''
+            onChange={this.handleSettingsSelect}
+          />
+          <NumberInput
+            title=''
+            name='font_size'
+            data={temporaryTile.settings}
+            min={1}
+            max={1200}
+            error={errorFields.has('font_size')}
+            onChange={this.handleSettingsChange}
+            autoComplete="off"
+          />
+          <Select
+            name='font_style'
+            selected={temporaryTile.settings.font_style || 'normal'}
+            options={TEXT_FONT_STYLES}
+            title=''
+            onChange={this.handleSettingsSelect}
+          />
+        </div>
+        <ColorInput
+          title='Text'
+          name='font_color'
+          data={temporaryTile.settings}
+          error={errorFields.has('font_color')}
+          onChange={this.handleSettingsChange}
+          autoComplete="off"
+        />
+        <ColorInput
+          title='BG'
+          name='background_color'
+          data={temporaryTile.settings}
+          error={errorFields.has('background_color')}
+          onChange={this.handleSettingsChange}
+          autoComplete="off"
+        />
+        <div className='row pair'>
+          <NumberInput
+            title="Width"
+            name="width"
+            data={temporaryTile.settings}
+            min={0}
+            max={1200}
+            error={errorFields.has('width')}
+            onChange={this.handleSettingsChange}
+            autoComplete="off"
+          />
+          <NumberInput
+            title="Height"
+            name="height"
+            data={temporaryTile.settings}
+            min={0}
+            max={1200}
+            error={errorFields.has('height')}
+            onChange={this.handleSettingsChange}
+            autoComplete="off"
+          />
+        </div>
+      </div>
+    )
+  }
+
+  renderLinkForm() {
+    const { temporaryTile } = this.props
+    const { errorFields } = this.state
+    return (
+      <div>
+        <div className='row pair'>
+          <NumberInput
+            title="Width"
+            name="width"
+            data={temporaryTile.settings}
+            min={0}
+            max={1200}
+            error={errorFields.has('width')}
+            onChange={this.handleSettingsChange}
+            autoComplete="off"
+          />
+          <NumberInput
+            title="Height"
+            name="height"
+            data={temporaryTile.settings}
+            min={0}
+            max={1200}
+            error={errorFields.has('height')}
+            onChange={this.handleSettingsChange}
+            autoComplete="off"
+          />
+        </div>
+        <div className='row pair'>
+          <TextInput
+            title="Units"
+            name="units"
+            data={temporaryTile.settings}
+            error={errorFields.has('units')}
+            onChange={this.handleSettingsChange}
+            autoComplete="off"
+          />
+        </div>
+      </div>
+    )
+  }
+
+  renderScriptForm() {
+    const { temporaryTile } = this.props
+    const { errorFields } = this.state
+    return (
+      <div>
+        <TextArea
+          title=""
+          name="content"
+          required
+          data={temporaryTile.settings}
+          error={errorFields.has('content')}
+          onChange={this.handleSettingsChange}
+          autoComplete="off"
+        />
+        <div>
+          Scripts will be run on the live site when this page loads.
+        </div>
+      </div>
+    )
+  }
+
+  renderHyperlinkForm() {
+    const { temporaryTile } = this.props
+    const { pageList } = this.state
+    const isExternalLink = temporaryTile.target_page_id === EXTERNAL_LINK
+    return (
+      <div>
+        <div className={'row selects'}>
+          <Select
+            title=''
+            name='target_page_id'
+            selected={temporaryTile.target_page_id || NO_LINK}
+            options={pageList}
+            onChange={this.handleSelect}
+          />
+          <Select
+            title=''
+            name='cursor'
+            selected={temporaryTile.settings.cursor}
+            options={CURSORS}
+            defaultOption="Cursor"
+            onChange={this.handleSettingsSelect}
+          />
+        </div>
+        <div>
+          {isExternalLink &&
+            <TextInput
+              title=""
+              placeholder='http://'
+              name="external_link_url"
+              data={temporaryTile.settings}
+              onChange={this.handleSettingsChange}
+              autoComplete="off"
+            />
+          }
+        </div>
+      </div>
+    )
+  }
+
+  renderAudioForm() {
+    const { temporaryTile } = this.props
+    return (
+      <div>
+        <Checkbox
+          label="Add audio events"
+          name="has_audio"
+          checked={temporaryTile.settings.has_audio}
+          onChange={this.handleSettingsSelect}
+        />
+        {temporaryTile.settings.has_audio && (
+          <div >
+            <AudioSelect
+              title="On click"
+              name="audio_on_click_id"
+              selected={temporaryTile.settings.audio_on_click_id}
+              onChange={this.handleSettingsSelect}
+            />
+
+            <Checkbox
+              label="Navigate when audio finishes"
+              name="navigate_when_audio_finishes"
+              checked={temporaryTile.settings.navigate_when_audio_finishes}
+              onChange={this.handleSettingsSelect}
+              autoComplete="off"
+            />
+
+            <AudioSelect
+              title="On hover"
+              name="audio_on_hover_id"
+              selected={temporaryTile.settings.audio_on_hover_id}
+              onChange={this.handleSettingsSelect}
+            />
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  renderMiscForm() {
+    const { temporaryTile } = this.props
+    return (
+      <div>
+        <Slider
+          title='Opacity'
+          name='opacity'
+          value={temporaryTile.settings.opacity}
+          onChange={this.handleSettingsSelect}
+          min={0.0}
+          max={1.0}
+          step={0.01}
+        />
+        <Slider
+          title='Scale'
+          name='scale'
+          value={temporaryTile.settings.scale}
+          onChange={this.handleSettingsSelect}
+          min={0.01}
+          max={10.0}
+          step={0.01}
+        />
+        <Slider
+          title='Rotation'
+          name='rotation'
+          value={temporaryTile.settings.rotation}
+          onChange={this.handleSettingsSelect}
+          min={-180.0}
+          max={180.0}
+          step={1}
+          type='int'
+        />
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  graph: state.graph,
+  page: state.page,
+  tile: state.tile,
+  temporaryTile: state.tile.temporaryTile,
+})
+
+const mapDispatchToProps = dispatch => ({
+  tileActions: bindActionCreators({ ...tileActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(TileForm)
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/tile/components/tile.list.js b/frontend/app/views/tile/components/tile.list.js
new file mode 100644
index 0000000..c455489
--- /dev/null
+++ b/frontend/app/views/tile/components/tile.list.js
@@ -0,0 +1,142 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { ReactSortable } from "react-sortablejs"
+
+// import actions from 'app/actions'
+import * as tileActions from '../../tile/tile.actions'
+import * as pageActions from '../../page/page.actions'
+
+const DOUBLE_CLICK_THRESHOLD = 250
+
+class TileList extends Component {
+  state = {
+    tiles: [],
+    lastTargetId: 0,
+    lastTimeStamp: 0,
+  }
+  
+  // store doubleclick state as a class property because ReactSortable calls setState promiscuously
+  didDoubleClick = false
+
+  componentDidMount(prevProps) {
+    const { tiles } = this.props.page.show.res
+    const { pages } = this.props.graph.show.res
+    const pageTitles = pages.reduce((a,b) => {
+      a[b.id] = b.title
+      return a
+    }, {})
+    this.setState({ tiles: tiles.slice(0).reverse(), pageTitles })
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (this.didDoubleClick) return
+    const { tiles } = this.state
+    if (prevState.tiles.length && !pageActions.isSameTileOrder(tiles, prevState.tiles)) {
+      this.props.pageActions.setTileSortOrder(tiles.slice(0).reverse())
+    }
+    // since we store the full tiles here (reversed!), they might change from under us
+    // potentially later refactor to only use a sort order / lookup
+    else if (prevProps.page.show.res.tiles !== this.props.page.show.res.tiles) {
+      const tileLookup = this.props.page.show.res.tiles.reduce((a,b) => {
+        a[b.id] = b
+        return a
+      }, {})
+      const newTiles = this.state.tiles.map(tile => {
+        return tileLookup[tile.id]
+      })
+      this.setState({ tiles: newTiles })
+    }
+  }
+
+  handleChoose(e) {
+    const { lastTargetId, lastTimeStamp } = this.state
+    if (lastTimeStamp
+      && parseInt(e.item.dataset.id) === lastTargetId
+      && (e.timeStamp - lastTimeStamp) < DOUBLE_CLICK_THRESHOLD
+      ) {
+      // console.log('selected', lastTargetId)
+      this.didDoubleClick = true
+      this.props.pageActions.showEditTileForm(lastTargetId)
+    } else {
+      this.setState({
+        lastTargetId: parseInt(e.item.dataset.id),
+        lastTimeStamp: e.timeStamp,
+      })
+    }
+  }
+
+  handleUpdate(newTiles) {
+    if (this.didDoubleClick) return
+    this.setState({ tiles: newTiles })
+  }
+
+  render() {
+    const { tiles, pageTitles } = this.state
+    return (
+      <div className='box tileList'>
+        <ReactSortable
+          list={tiles}
+          setList={newTiles => this.handleUpdate(newTiles)}
+          onChoose={e => this.handleChoose(e)}
+        >
+          {tiles.map(tile => (
+            tile.type === 'image'
+            ? <TileListImage key={tile.id} tile={tile} />
+            : tile.type === 'text'
+            ? <TileListText key={tile.id} tile={tile} />
+            : tile.type === 'link'
+            ? <TileListLink key={tile.id} tile={tile} pageTitles={pageTitles} />
+            : <TileListMisc key={tile.id} tile={tile} />
+          ))}
+        </ReactSortable>
+      </div>
+    )
+  }
+}
+
+const TileListImage = ({ tile }) => (
+  <div className='row' data-id={tile.id}>
+    <div className='thumb' style={{ backgroundImage: 'url(' + tile.settings.url + ')' }} />
+  </div>
+)
+
+const TileListText = ({ tile }) => (
+  <div className='row' data-id={tile.id}>
+    <span className='snippet'>{(tile.settings.content || "").substr(0, 100)}</span>
+  </div>
+)
+
+const TileListLink = ({ tile, pageTitles }) => (
+  <div className='row link' data-id={tile.id}>
+    <span className='snippet'>
+      {'Link: '}
+      {tile.target_page_id === -1
+        ? 'External'
+        : !tile.target_page_id
+        ? 'No link specified!'
+        : tile.target_page_id in pageTitles
+        ? pageTitles[tile.target_page_id]
+        : 'Error, broken link!'}
+    </span>
+  </div>
+)
+
+const TileListMisc = ({ tile }) => (
+  <div className='row' data-id={tile.id}>
+    <span className='snippet'>{"Tile: "}{tile.type}</span>
+  </div>
+)
+
+const mapStateToProps = state => ({
+  graph: state.graph,
+  page: state.page,
+})
+
+const mapDispatchToProps = dispatch => ({
+  tileActions: bindActionCreators({ ...tileActions }, dispatch),
+  pageActions: bindActionCreators({ ...pageActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(TileList)
diff --git a/frontend/app/views/tile/components/tile.new.js b/frontend/app/views/tile/components/tile.new.js
new file mode 100644
index 0000000..b491fdd
--- /dev/null
+++ b/frontend/app/views/tile/components/tile.new.js
@@ -0,0 +1,55 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import { history } from 'app/store'
+import actions from 'app/actions'
+import * as tileActions from '../../tile/tile.actions'
+import * as pageActions from '../../page/page.actions'
+
+import TileForm from '../components/tile.form'
+
+class TileNew extends Component {
+  handleSubmit(data) {
+    console.log(data)
+    actions.tile.create(data)
+      .then(res => {
+        console.log(res)
+        // const graph = this.props.graph.show.res
+        // if (res.res && res.res.id) {
+        //   history.push('/' + graph.path + '/' + res.res.path)
+        // }
+        this.props.pageActions.hideAddTileForm()
+        this.props.tileActions.clearTemporaryTile()
+      })
+      .catch(err => {
+        console.error('error')
+      })
+  }
+
+  render() {
+    return (
+      <TileForm
+        isNew
+        graph={this.props.graph.show.res}
+        page={this.props.page.show.res}
+        initialData={null}
+        sortOrder={this.props.page.show.res.tiles ? this.props.page.show.res.tiles.length : []}
+        onSubmit={this.handleSubmit.bind(this)}
+      />
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  graph: state.graph,
+  page: state.page,
+})
+
+const mapDispatchToProps = dispatch => ({
+  tileActions: bindActionCreators({ ...tileActions }, dispatch),
+  pageActions: bindActionCreators({ ...pageActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(TileNew)
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"
+}