1 files changed, 101 insertions, 0 deletions
diff --git a/frontend/app/views/tile/forms/tile.form.element.video.js b/frontend/app/views/tile/forms/tile.form.element.video.js
new file mode 100644
index 0000000..7220aa9
--- /dev/null
+++ b/frontend/app/views/tile/forms/tile.form.element.video.js
@@ -0,0 +1,101 @@
+import React from 'react'
+
+import {
+  TextInput, Slider,
+  Select, Checkbox,
+} from 'app/common'
+
+import { VIDEO_STYLES } from './tile.constants'
+
+export default function TileVideoForm({ tile, errorFields, parent }) {
+  return (
+    <div>
+      <div className='row imageUrl'>
+        <TextInput
+          title=""
+          placeholder='http://'
+          name="url"
+          required
+          data={tile.settings}
+          error={errorFields.has('url')}
+          onChange={parent.handleVideoChange}
+          autoComplete="off"
+        />
+      </div>
+      <div className='row pair with_checkbox'>
+        <Select
+          name='video_style'
+          selected={tile.settings.video_style || 'none'}
+          options={VIDEO_STYLES}
+          title=''
+          onChange={parent.handleSettingsSelect}
+        />
+        <Checkbox
+          label="Loop"
+          name="loop"
+          checked={tile.settings.loop}
+          onChange={parent.handleSettingsSelect}
+          autoComplete="off"
+        />
+      </div>
+      <div className='row pair'>
+        <Checkbox
+          label="Muted"
+          name="muted"
+          className='short'
+          checked={tile.settings.muted}
+          onChange={parent.handleSettingsSelect}
+        />
+        <Checkbox
+          label="Autoadvance"
+          name="autoadvance"
+          className='short'
+          checked={tile.settings.autoadvance}
+          onChange={parent.handleSettingsSelect}
+        />
+      </div>
+      {!tile.settings.muted && (
+        <Slider
+          title='Volume'
+          name='volume'
+          value={('volume' in tile.settings) ? tile.settings.volume : 1.0}
+          onChange={parent.handleSettingsSelect}
+          min={0.0}
+          max={1.0}
+          step={0.01}
+        />
+      )}
+      {tile.settings.loop && (
+        <div className='row'>
+          <Checkbox
+            label="Loop section?"
+            className='short'
+            name="loop_section"
+            checked={tile.settings.loop_section}
+            onChange={parent.handleSettingsSelect}
+          />
+        </div>
+      )}
+      {tile.settings.loop && tile.settings.loop_section && (
+        <div className='row pair'>
+          <TextInput
+            title="From"
+            placeholder='0:00'
+            name="loop_start"
+            data={tile.settings}
+            onChange={parent.handleSettingsChange}
+            autoComplete="off"
+          />
+          <TextInput
+            title="To"
+            placeholder='0:00'
+            name="loop_end"
+            data={tile.settings}
+            onChange={parent.handleSettingsChange}
+            autoComplete="off"
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+\ No newline at end of file