From 8792e9fe1c7ab76c35f9a18d866880ba3da2c13e Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 15 Mar 2021 19:09:37 +0100 Subject: move frontend site folder. add video support --- frontend/app/views/page/components/tile.form.js | 103 +++++++++++++++++++++++- 1 file changed, 101 insertions(+), 2 deletions(-) (limited to 'frontend/app/views/page/components/tile.form.js') 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 ( +
+
+ +
+
+ + ) + } +} + +const mapStateToProps = state => ({ + graph: state.graph, +}) + +export default connect(mapStateToProps)(AudioSelect) diff --git a/frontend/app/views/graph/components/audio.list.js b/frontend/app/views/graph/components/audio.list.js index b7bf19a..011ab08 100644 --- a/frontend/app/views/graph/components/audio.list.js +++ b/frontend/app/views/graph/components/audio.list.js @@ -3,6 +3,7 @@ import { Link } from 'react-router-dom' import { connect } from 'react-redux' import { history } from 'app/store' +import { unslugify } from 'app/utils' import actions from 'app/actions' class AudioList extends Component { @@ -132,8 +133,6 @@ class AudioList extends Component { } } -const unslugify = fn => fn.replace(/-/g, ' ').replace(/_/g, ' ').replace('.mp3', '') - const mapStateToProps = state => ({ graph: state.graph.show.res, }) diff --git a/frontend/app/views/graph/components/page.form.js b/frontend/app/views/graph/components/page.form.js index 2c283aa..91a40a6 100644 --- a/frontend/app/views/graph/components/page.form.js +++ b/frontend/app/views/graph/components/page.form.js @@ -4,6 +4,7 @@ import { Link } from 'react-router-dom' import { session } from 'app/session' import { TextInput, ColorInput, Checkbox, LabelDescription, TextArea, SubmitButton, Loader } from 'app/common' +import { AudioSelect } from 'app/views/audio/components/audio.select' const newPage = (data) => ({ path: '', @@ -28,6 +29,16 @@ export default class PageForm extends Component { errorFields: new Set([]), } + 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.handleSubmit = this.handleSubmit.bind(this) + this.handleDelete = this.handleDelete.bind(this) + } + componentDidMount() { const { graph, data, isNew } = this.props const title = isNew ? 'new page' : 'editing ' + data.title @@ -130,14 +141,14 @@ export default class PageForm extends Component { return (

{title}

-
+ @@ -149,49 +160,48 @@ export default class PageForm extends Component { required data={data} error={errorFields.has('title')} - onChange={this.handleChange.bind(this)} + onChange={this.handleChange} autoComplete="off" />