move frontend site folder. add video support

1 files changed, 101 insertions, 2 deletions

diff --git a/frontend/app/views/page/components/tile.form.js b/frontend/app/views/page/components/tile.form.js
index 3f43dd0..a9f34a7 100644
--- a/frontend/app/views/page/components/tile.form.js
+++ b/frontend/app/views/page/components/tile.form.js
@@ -10,12 +10,12 @@ import {
   TextInput, NumberInput, ColorInput, Slider,
   Select, LabelDescription, TextArea, Checkbox,
   SubmitButton, Loader } from 'app/common'
-import { preloadImage } from 'app/utils'
+import { preloadImage, preloadVideo } from 'app/utils'
 
 import * as tileActions from '../../tile/tile.actions'
 
 const SELECT_TYPES = [
-  "image", "text", "link", "script",
+  "image", "text", "video", "link", "script",
 ].map(s => ({ name: s, label: s }))
 
 const ALIGNMENTS = [
@@ -31,6 +31,7 @@ const ALIGNMENTS = [
 
 const REQUIRED_KEYS = {
   image: ['url'],
+  video: ['url'],
   text: ['content'],
   link: [],
   script: [],
@@ -40,6 +41,10 @@ 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 }))
@@ -49,6 +54,7 @@ const TEXT_FONT_STYLES = [
 ].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', },
@@ -80,6 +86,22 @@ const newImage = (data) => ({
   ...data,
 })
 
+const newVideo = (data) => ({
+  settings: {
+    ...newPosition(),
+    video_style: 'cover',
+    url: "",
+    external_link_url: "",
+    cursor: 'none',
+    muted: false,
+    loop: false,
+    autoadvance: false,
+  },
+  type: 'video',
+  target_page_id: null,
+  ...data,
+})
+
 const newText = (data) => ({
   settings: {
     ...newPosition(),
@@ -123,12 +145,14 @@ const newPosition = (data) => ({
   width: 0, height: 0,
   rotation: 0, scale: 1,
   opacity: 1,
+  units: false,
   align: "center_center",
   ...data,
 })
 
 const TYPE_CONSTRUCTORS = {
   image: newImage,
+  video: newVideo,
   text: newText,
   link: newLink,
   script: newScript,
@@ -277,6 +301,24 @@ class TileForm extends Component {
     })
   }
 
+  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)) {
@@ -362,6 +404,8 @@ class TileForm extends Component {
 
           {temporaryTile.type === 'image'
             ? this.renderImageForm()
+          : temporaryTile.type === 'video'
+            ? this.renderVideoForm()
           : temporaryTile.type === 'text'
             ? this.renderTextForm()
           : temporaryTile.type === 'link'
@@ -453,6 +497,61 @@ class TileForm extends Component {
     )
   }
 
+  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.bind(this)}
+            autoComplete="off"
+          />
+        </div>
+        <div className='row pair'>
+          <Select
+            name='video_style'
+            selected={temporaryTile.settings.video_style || 'none'}
+            options={VIDEO_STYLES}
+            title=''
+            onChange={this.handleSettingsSelect.bind(this)}
+          />
+          <Checkbox
+            label="Loop"
+            name="loop"
+            checked={temporaryTile.settings.loop}
+            onChange={this.handleSettingsSelect.bind(this)}
+            autoComplete="off"
+          />
+        </div>
+        <div className='row pair'>
+          <Checkbox
+            label="Muted"
+            name="muted"
+            checked={temporaryTile.settings.muted}
+            onChange={this.handleSettingsSelect.bind(this)}
+            autoComplete="off"
+          />
+          <Checkbox
+            label="Autoadvance"
+            name="autoadvance"
+            checked={temporaryTile.settings.autoadvance}
+            onChange={this.handleSettingsSelect.bind(this)}
+            autoComplete="off"
+          />
+        </div>
+      </div>
+    )
+  }
+
   renderTextForm() {
     const { temporaryTile } = this.props
     const { errorFields } = this.state