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 --- README.md | 20 +- cli/app/settings/app_cfg.py | 2 + cli/app/site/export.py | 125 + cli/commands/site/export.py | 123 +- frontend/app/site/actions.js | 19 - frontend/app/site/app.js | 35 - frontend/app/site/index.js | 17 - frontend/app/site/site/site.actions.js | 11 - frontend/app/site/site/site.reducer.js | 36 - frontend/app/site/store.js | 37 - frontend/app/site/types.js | 11 - frontend/app/site/viewer/viewer.container.js | 96 - frontend/app/utils/index.js | 29 + frontend/app/views/page/components/page.editor.js | 1 + frontend/app/views/page/components/tile.form.js | 103 +- frontend/app/views/page/components/tile.handle.js | 52 + frontend/app/views/page/cursors.css | 3 + frontend/app/views/page/page.css | 3 + frontend/site/actions.js | 19 + frontend/site/app.js | 35 + frontend/site/index.js | 17 + frontend/site/site/site.actions.js | 11 + frontend/site/site/site.reducer.js | 36 + frontend/site/store.js | 37 + frontend/site/types.js | 11 + frontend/site/viewer/viewer.container.js | 96 + package-lock.json | 83 +- package.json | 6 +- static/media | 1 + webpack.config.site.js | 54 +- yarn.lock | 7012 +++++++++++++++++++++ 31 files changed, 7694 insertions(+), 447 deletions(-) create mode 100644 cli/app/site/export.py delete mode 100644 frontend/app/site/actions.js delete mode 100644 frontend/app/site/app.js delete mode 100644 frontend/app/site/index.js delete mode 100644 frontend/app/site/site/site.actions.js delete mode 100644 frontend/app/site/site/site.reducer.js delete mode 100644 frontend/app/site/store.js delete mode 100644 frontend/app/site/types.js delete mode 100644 frontend/app/site/viewer/viewer.container.js create mode 100644 frontend/site/actions.js create mode 100644 frontend/site/app.js create mode 100644 frontend/site/index.js create mode 100644 frontend/site/site/site.actions.js create mode 100644 frontend/site/site/site.reducer.js create mode 100644 frontend/site/store.js create mode 100644 frontend/site/types.js create mode 100644 frontend/site/viewer/viewer.container.js create mode 120000 static/media create mode 100644 yarn.lock diff --git a/README.md b/README.md index 0daf5db..dcfa219 100644 --- a/README.md +++ b/README.md @@ -1,19 +1,19 @@ -# swimmer +# Swimmer Network-based tile tool. -## installation +## Installation First, install miniconda and node. ``` conda create env -f environment.yml -npm install +yarn install ``` (this should work on Linux as well but let me know if it doesn't) -## running the site +## Running the site Before running the commands, enter the client directory, load the Conda environment, and make sure the database is current: @@ -26,19 +26,18 @@ conda activate swimmer Then build the frontend and run the Flask server: ``` -npm run build:dev -./cli.py flask run +yarn build:dev +yarn server ``` The server will be running on http://0.0.0.0:5000/ - -## development +## Development Monitor the Javascript for changes (run in another window): ``` -npm run watch +yarn watch ``` Generate a new migration if you've modified the database: @@ -48,10 +47,9 @@ Generate a new migration if you've modified the database: ./cli.py db upgrade head ``` -## building the site +## Building the site ``` npm run build:production ./cli.py site export --graph swimmer ``` - diff --git a/cli/app/settings/app_cfg.py b/cli/app/settings/app_cfg.py index 5fc4982..3865abd 100644 --- a/cli/app/settings/app_cfg.py +++ b/cli/app/settings/app_cfg.py @@ -63,6 +63,8 @@ DIR_STATIC = join(DIR_APP, 'static') HASH_TREE_DEPTH = 3 # for sha256 subdirs HASH_BRANCH_SIZE = 3 # for sha256 subdirs +DIR_PUBLIC_EXPORTS = os.getenv('DIR_PUBLIC_EXPORTS') or DIR_EXPORTS + # ----------------------------------------------------------------------------- # S3 storage diff --git a/cli/app/site/export.py b/cli/app/site/export.py new file mode 100644 index 0000000..d513286 --- /dev/null +++ b/cli/app/site/export.py @@ -0,0 +1,125 @@ +import click + +from app.settings import app_cfg +from app.utils.file_utils import load_text, write_json, write_text +from os.path import join +import os + +from app.sql.common import db, Session, Graph, Page, Tile +from distutils.dir_util import copy_tree + +def export_site(ctx, opt_graph_path, opt_output_dir): + """Export a graph""" + + # ------------------------------------------------ + # generate HTML for index and all pages + + session = Session() + graph = session.query(Graph).filter(Graph.path == opt_graph_path).first() + if graph is None: + print(f"Not a graph: {opt_graph_path}") + return + + # build everything here + graph_dir = os.path.abspath(join(opt_output_dir, graph.path)) + + # load site index + index_html = load_text(join(app_cfg.DIR_STATIC, 'site.html'), split=False) + index_html = index_html.replace('SITE_PATH', '/' + graph.path) + + # write site JSON data + site_data = { 'graph': sanitize_graph(graph.toSiteJSON()) } + write_json(site_data, join(graph_dir, 'index.json'), default=str, minify=False) + + # import custom css + site_css = load_text(join(app_cfg.DIR_STATIC, 'site.css'), split=False) + site_css = site_css.replace('SITE_PATH', '/' + graph.path) + write_text(site_css, join(graph_dir, 'site.css')) + copy_tree(join(app_cfg.DIR_STATIC, 'fonts'), join(graph_dir, 'static/fonts')) + copy_tree(join(app_cfg.DIR_STATIC, 'img'), join(graph_dir, 'static/img')) + + # write index file, redirects to homepage + home_page = site_data['graph']['home_page'] + if home_page is None: + print("Homepage not set! Shift-click a page on the graph to make it the homepage.") + return + write_text(f'', join(graph_dir, 'index.html')) + + index_path = "" + for page in graph.pages: + page_path = f'{graph.path}/{page.path}' + if page.id == graph.home_page_id: + index_path = page_path + print(f'/{page_path} [index]') + else: + print(f'/{page_path}') + write_index(graph, page, index_html, join(graph_dir, page.path, 'index.html')) + + build_javascript(graph_dir) + + print("Site export complete!") + print(f"Graph exported to: {graph_dir}") + +def build_javascript(graph_dir): + print("Building javascript...") + print(f'NODE_ENV=production node ./node_modules/webpack-cli/bin/cli.js --config ./webpack.config.site.js -o {graph_dir}/bundle.js') + os.chdir(app_cfg.DIR_PROJECT_ROOT) + os.system(f'NODE_ENV=production node ./node_modules/webpack-cli/bin/cli.js --config ./webpack.config.site.js -o {graph_dir}/bundle.js') + +def write_index(graph, page, index_html, fp_out): + if page is None: + page_title = graph.title + else: + page_title = page.title + index_html = index_html.replace('BUNDLE_PATH', join('/', graph.path, 'bundle.js')) + index_html = index_html.replace('PAGE_TITLE', page_title) + write_text(index_html, fp_out) + +def sanitize_graph(graph): + page_path_lookup = {} + page_lookup = {} + for page in graph['pages']: + page_path = join('/', graph['path'], page['path']) + if page_path in page_path_lookup: + print(f"/!\\ WARNING! Duplicate found of {page_path}") + else: + page_path_lookup[page['id']] = page_path + for page in graph['pages']: + sanitize_page(page) + if page['id'] == 12: + print(page) + for tile in page['tiles']: + if tile['target_page_id']: + if tile['target_page_id'] == -1: + tile['href'] = tile['settings']['external_link_url'] + elif tile['target_page_id'] > 0: + tile['href'] = page_path_lookup[tile['target_page_id']] + sanitize_tile(tile) + page_path = page_path_lookup[page['id']] + page_lookup[page_path] = page + # print(page_lookup['/asdf/testttt']) + graph['pages'] = page_lookup + graph['home_page'] = page_path_lookup[graph['home_page_id']] + return graph + +def sanitize_page(data): + if 'created_at' in data: + del data['created_at'] + if 'updated_at' in data: + del data['updated_at'] + if 'graph_id' in data: + del data['graph_id'] + +def sanitize_tile(data): + if 'created_at' in data: + del data['created_at'] + if 'updated_at' in data: + del data['updated_at'] + if 'username' in data: + del data['username'] + if 'graph_id' in data: + del data['graph_id'] + if 'page_id' in data: + del data['page_id'] + if 'target_page_id' in data: + del data['target_page_id'] diff --git a/cli/commands/site/export.py b/cli/commands/site/export.py index 0ba6a62..68773e9 100644 --- a/cli/commands/site/export.py +++ b/cli/commands/site/export.py @@ -1,9 +1,7 @@ import click from app.settings import app_cfg -from app.utils.file_utils import load_text, write_json, write_text -from os.path import join -import os +from app.site.export import export_site @click.command('info') @click.option('-g', '--graph', 'opt_graph_path', required=True, @@ -14,121 +12,4 @@ import os def cli(ctx, opt_graph_path, opt_output_dir): """Export a graph""" - # ------------------------------------------------ - # imports - - from app.sql.common import db, Session, Graph, Page, Tile - from distutils.dir_util import copy_tree - - # ------------------------------------------------ - # generate HTML for index and all pages - - session = Session() - graph = session.query(Graph).filter(Graph.path == opt_graph_path).first() - if graph is None: - print(f"Not a graph: {opt_graph_path}") - return - - # build everything here - graph_dir = os.path.abspath(join(opt_output_dir, graph.path)) - - # load site index - index_html = load_text(join(app_cfg.DIR_STATIC, 'site.html'), split=False) - index_html = index_html.replace('SITE_PATH', '/' + graph.path) - - # write site JSON data - site_data = { 'graph': sanitize_graph(graph.toSiteJSON()) } - write_json(site_data, join(graph_dir, 'index.json'), default=str, minify=False) - - # import custom css - site_css = load_text(join(app_cfg.DIR_STATIC, 'site.css'), split=False) - site_css = site_css.replace('SITE_PATH', '/' + graph.path) - write_text(site_css, join(graph_dir, 'site.css')) - copy_tree(join(app_cfg.DIR_STATIC, 'fonts'), join(graph_dir, 'static/fonts')) - copy_tree(join(app_cfg.DIR_STATIC, 'img'), join(graph_dir, 'static/img')) - - # write index file, redirects to homepage - home_page = site_data['graph']['home_page'] - if home_page is None: - print("Homepage not set! Shift-click a page on the graph to make it the homepage.") - return - write_text(f'', join(graph_dir, 'index.html')) - - index_path = "" - for page in graph.pages: - page_path = f'{graph.path}/{page.path}' - if page.id == graph.home_page_id: - index_path = page_path - print(f'/{page_path} [index]') - else: - print(f'/{page_path}') - write_index(graph, page, index_html, join(graph_dir, page.path, 'index.html')) - - # ------------------------------------------------ - # build javascript - - print("Building javascript...") - print(f'NODE_ENV=production node ./node_modules/webpack-cli/bin/cli.js --config ./webpack.config.site.js -o {graph_dir}/bundle.js') - os.chdir(app_cfg.DIR_PROJECT_ROOT) - os.system(f'NODE_ENV=production node ./node_modules/webpack-cli/bin/cli.js --config ./webpack.config.site.js -o {graph_dir}/bundle.js') - - print("Site export complete!") - print(f"Graph exported to: {graph_dir}") - -def write_index(graph, page, index_html, fp_out): - if page is None: - page_title = graph.title - else: - page_title = page.title - index_html = index_html.replace('BUNDLE_PATH', join('/', graph.path, 'bundle.js')) - index_html = index_html.replace('PAGE_TITLE', page_title) - write_text(index_html, fp_out) - -def sanitize_graph(graph): - page_path_lookup = {} - page_lookup = {} - for page in graph['pages']: - page_path = join('/', graph['path'], page['path']) - if page_path in page_path_lookup: - print(f"/!\\ WARNING! Duplicate found of {page_path}") - else: - page_path_lookup[page['id']] = page_path - for page in graph['pages']: - sanitize_page(page) - if page['id'] == 12: - print(page) - for tile in page['tiles']: - if tile['target_page_id']: - if tile['target_page_id'] == -1: - tile['href'] = tile['settings']['external_link_url'] - elif tile['target_page_id'] > 0: - tile['href'] = page_path_lookup[tile['target_page_id']] - sanitize_tile(tile) - page_path = page_path_lookup[page['id']] - page_lookup[page_path] = page - # print(page_lookup['/asdf/testttt']) - graph['pages'] = page_lookup - graph['home_page'] = page_path_lookup[graph['home_page_id']] - return graph - -def sanitize_page(data): - if 'created_at' in data: - del data['created_at'] - if 'updated_at' in data: - del data['updated_at'] - if 'graph_id' in data: - del data['graph_id'] - -def sanitize_tile(data): - if 'created_at' in data: - del data['created_at'] - if 'updated_at' in data: - del data['updated_at'] - if 'username' in data: - del data['username'] - if 'graph_id' in data: - del data['graph_id'] - if 'page_id' in data: - del data['page_id'] - if 'target_page_id' in data: - del data['target_page_id'] + export_site(opt_graph_path, opt_output_dir) \ No newline at end of file diff --git a/frontend/app/site/actions.js b/frontend/app/site/actions.js deleted file mode 100644 index e672028..0000000 --- a/frontend/app/site/actions.js +++ /dev/null @@ -1,19 +0,0 @@ -import { bindActionCreators } from 'redux' -// import { actions as crudActions } from './api' - -import * as siteActions from './site/site.actions' - -import { store } from './store' - -export default - // Object.keys(crudActions) - // .map(a => [a, crudActions[a]]) - // .concat( - [ - ['site', siteActions], - ] //) - .map(p => [p[0], bindActionCreators(p[1], store.dispatch)]) - .concat([ - // ['socket', socketActions], - ]) - .reduce((a,b) => (a[b[0]] = b[1])&&a,{}) \ No newline at end of file diff --git a/frontend/app/site/app.js b/frontend/app/site/app.js deleted file mode 100644 index 389e5b5..0000000 --- a/frontend/app/site/app.js +++ /dev/null @@ -1,35 +0,0 @@ -import React, { Component } from 'react' -import { ConnectedRouter } from 'connected-react-router' -import { Route } from 'react-router' - -import ViewerContainer from './viewer/viewer.container' -import actions from './actions' - -export default class App extends Component { - componentDidMount() { - const path_partz = window.location.pathname.split('/') - const graph_name = path_partz[1] - let path_name = null - if (path_partz.length > 2) { - path_name = path_partz[2] - } - // console.log('loading', graph_name, path_name) - actions.site.loadSite(graph_name, path_name) - } - - render() { - return ( - -
- - { - // setTimeout(() => this.props.history.push('/'), 10) - return null - }} /> -
- - ) - } -} -/* -*/ diff --git a/frontend/app/site/index.js b/frontend/app/site/index.js deleted file mode 100644 index 6f1a0a5..0000000 --- a/frontend/app/site/index.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react' -import ReactDOM from 'react-dom' -import { Provider } from 'react-redux' - -import App from './app' - -import { store, history } from './store' - -const container = document.createElement('div') -container.classList.add('container') -document.body.appendChild(container) - -ReactDOM.render( - - - , container -) diff --git a/frontend/app/site/site/site.actions.js b/frontend/app/site/site/site.actions.js deleted file mode 100644 index 79e4573..0000000 --- a/frontend/app/site/site/site.actions.js +++ /dev/null @@ -1,11 +0,0 @@ -import * as types from '../types' -import { api } from 'app/utils' - -export const setSiteTitle = title => dispatch => { - document.querySelector('title').innerText = title - dispatch({ type: types.site.set_site_title, payload: title }) -} - -export const loadSite = (graph_name, path_name) => dispatch => ( - api(dispatch, types.site, 'site', '/' + graph_name + '/index.json') -) diff --git a/frontend/app/site/site/site.reducer.js b/frontend/app/site/site/site.reducer.js deleted file mode 100644 index 85c3486..0000000 --- a/frontend/app/site/site/site.reducer.js +++ /dev/null @@ -1,36 +0,0 @@ -import * as types from '../types' - -const initialState = { - siteTitle: 'swimmer', - graph: { - loading: true, - } -} - -export default function siteReducer(state = initialState, action) { - console.log(action.type, action) - switch (action.type) { - case types.site.set_site_title: - return { - ...state, - siteTitle: action.payload, - } - - case types.site.loaded: - return { - ...state, - graph: action.data.graph, - } - - case '@@router/LOCATION_CHANGE': - return { - ...state, - graph: { - ...state.graph, - } - } - - default: - return state - } -} diff --git a/frontend/app/site/store.js b/frontend/app/site/store.js deleted file mode 100644 index a228e2b..0000000 --- a/frontend/app/site/store.js +++ /dev/null @@ -1,37 +0,0 @@ -import { applyMiddleware, compose, combineReducers, createStore } from 'redux' -import { connectRouter, routerMiddleware } from 'connected-react-router' -import { createBrowserHistory } from 'history' -import thunk from 'redux-thunk' - -import siteReducer from './site/site.reducer' - -const createRootReducer = history => ( - combineReducers({ - auth: (state = {}) => state, - router: connectRouter(history), - site: siteReducer, - }) -) - -const configureStore = (initialState = {}, history) => { - const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose - - const store = createStore( - createRootReducer(history), - initialState, - composeEnhancers( - applyMiddleware( - thunk, - routerMiddleware(history) - ), - ), - ) - - return store -} - -const history = createBrowserHistory() -const store = configureStore({}, history) -const { dispatch } = store - -export { store, history, dispatch } diff --git a/frontend/app/site/types.js b/frontend/app/site/types.js deleted file mode 100644 index 23bed98..0000000 --- a/frontend/app/site/types.js +++ /dev/null @@ -1,11 +0,0 @@ -import { with_type, crud_type } from 'app/api/crud.types' - -export const site = with_type('site', [ - 'set_site_title', 'loading', 'loaded', 'error', -]) - -export const system = with_type('system', [ - 'load_site', -]) - -export const init = '@@INIT' diff --git a/frontend/app/site/viewer/viewer.container.js b/frontend/app/site/viewer/viewer.container.js deleted file mode 100644 index 42ce6c2..0000000 --- a/frontend/app/site/viewer/viewer.container.js +++ /dev/null @@ -1,96 +0,0 @@ -import React, { Component } from 'react' -import { Route } from 'react-router-dom' -import { bindActionCreators } from 'redux' -import { connect } from 'react-redux' - -import actions from '../actions' -import { Loader } from 'app/common/loader.component' -import TileHandle from 'app/views/page/components/tile.handle' - -import '../../views/page/page.css' - -class ViewerContainer extends Component { - state = { - page: {}, - } - - constructor(props) { - super(props) - this.pageRef = React.createRef() - this.handleMouseDown = this.handleMouseDown.bind(this) - } - - componentDidUpdate(prevProps) { - // console.log('didUpdate', this.props.graph !== prevProps.graph, this.props.location.pathname !== prevProps.location.pathname) - if (this.props.graph !== prevProps.graph || this.props.location.pathname !== prevProps.location.pathname) { - this.load() - } - } - - load() { - const { graph_name, page_name } = this.props.match.params - const page_path = ["", graph_name, page_name].join('/') - const { pages, home_page } = this.props.graph - const page = pages[page_path] - if (!page) { - // console.log('-> home page') - console.log(page_path) - const { home_page } = this.props.graph - this.setState({ page: pages[home_page] }) - } else { - // console.log(page) - console.log(page_path) - this.setState({ page }) - } - } - - handleMouseDown(e, tile) { - // console.log(tile) - } - - render() { - const { page } = this.state - if (this.props.graph.loading || !page.id) { - return ( -
-
-
- -
-
-
- ) - } - const { settings } = page - const pageStyle = { backgroundColor: settings ? settings.background_color : '#000000' } - // console.log(page) - return ( -
-
- {page.tiles.map(tile => { - return ( - this.handleMouseDown(e, tile)} - onDoubleClick={e => {}} - /> - ) - })} -
-
- ) - } -} - -const mapStateToProps = state => ({ - site: state.site, - graph: state.site.graph, -}) - -const mapDispatchToProps = dispatch => ({ -}) - -export default connect(mapStateToProps, mapDispatchToProps)(ViewerContainer) diff --git a/frontend/app/utils/index.js b/frontend/app/utils/index.js index bb5e01d..ce8d75c 100644 --- a/frontend/app/utils/index.js +++ b/frontend/app/utils/index.js @@ -120,6 +120,35 @@ export const preloadImage = url => ( }) ) +export const preloadVideo = url => ( + new Promise((resolve, reject) => { + const video = document.createElement('video') + let loaded = false + const bind = () => { + video.addEventListener('loadedmetadata', onload) + video.addEventListener('error', onerror) + } + const unbind = () => { + video.removeEventListener('loadedmetadata', onload) + video.removeEventListener('error', onerror) + } + const onload = () => { + if (loaded) return + loaded = true + unbind() + resolve(video) + } + const onerror = (error) => { + if (loaded) return + loaded = true + unbind() + reject(error) + } + bind() + video.src = url + }) +) + export const cropImage = (url, crop) => { return new Promise((resolve, reject) => { let { x, y, w, h } = crop diff --git a/frontend/app/views/page/components/page.editor.js b/frontend/app/views/page/components/page.editor.js index d324874..25342d2 100644 --- a/frontend/app/views/page/components/page.editor.js +++ b/frontend/app/views/page/components/page.editor.js @@ -73,6 +73,7 @@ class PageEditor extends Component { } handleMouseDown(e, tile) { + if (e.metaKey || e.ctrlKey || e.altKey || e.button !== 0) return const bounds = this.getBoundingClientRect() const mouseX = e.pageX const mouseY = e.pageY 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 ( +
+
+ +
+
+