mitigating some weird nav issues and FOUC

4 files changed, 21 insertions, 13 deletions

diff --git a/frontend/app/views/graph/graph.container.js b/frontend/app/views/graph/graph.container.js
index 57ea205..7d2baf9 100644
--- a/frontend/app/views/graph/graph.container.js
+++ b/frontend/app/views/graph/graph.container.js
@@ -1,6 +1,4 @@
 import React, { Component } from 'react'
-import { Route } from 'react-router-dom'
-import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
 import './graph.css'
@@ -79,8 +77,4 @@ const mapStateToProps = state => ({
   graph: state.graph,
 })
 
-const mapDispatchToProps = dispatch => ({
-  // uploadActions: bindActionCreators({ ...uploadActions }, dispatch),
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(GraphContainer)
+export default connect(mapStateToProps)(GraphContainer)
diff --git a/frontend/app/views/tile/components/tile.form.js b/frontend/app/views/tile/components/tile.form.js
index c258c5e..54b736e 100644
--- a/frontend/app/views/tile/components/tile.form.js
+++ b/frontend/app/views/tile/components/tile.form.js
@@ -55,6 +55,7 @@ class TileForm extends Component {
     pageList: [],
     popupList: [],
     cursors: {},
+    fontFamilies: [],
   }
 
   constructor(props){
@@ -95,7 +96,12 @@ class TileForm extends Component {
         a[b.id] = b
         return a
       }, {})
-    this.setState({ pageList, popupList, cursors })
+    let customFonts = (this.props.graph.show.res.settings.custom_fonts || "").split("\n").map(name => ({
+      name,
+      label: name.split(",")[0].replace(/\"/g, "")
+    }))
+    let fontFamilies = TEXT_FONT_FAMILIES.concat(customFonts)
+    this.setState({ pageList, popupList, cursors, fontFamilies })
     if (isNew) {
       const newTile = TILE_CONSTRUCTORS.image({
         id: "new",
@@ -317,7 +323,7 @@ class TileForm extends Component {
           : temporaryTile.type === 'video'
             ? <TileVideoForm tile={temporaryTile} errorFields={errorFields} parent={this} />
           : temporaryTile.type === 'text'
-            ? <TileTextForm tile={temporaryTile} errorFields={errorFields} parent={this} />
+            ? <TileTextForm tile={temporaryTile} errorFields={errorFields} parent={this} fontFamilies={this.state.fontFamilies} />
           : temporaryTile.type === 'link'
             ? <TileLinkForm tile={temporaryTile} errorFields={errorFields} parent={this} />
           : temporaryTile.type === 'gradient'
diff --git a/frontend/app/views/tile/forms/tile.form.element.text.js b/frontend/app/views/tile/forms/tile.form.element.text.js
index 425a605..7fd625a 100644
--- a/frontend/app/views/tile/forms/tile.form.element.text.js
+++ b/frontend/app/views/tile/forms/tile.form.element.text.js
@@ -5,9 +5,9 @@ import {
   Select, TextArea, Checkbox
 } from 'app/common'
 
-import { TEXT_FONT_FAMILIES, TEXT_FONT_STYLES, MARQUEE_DIRECTIONS } from './tile.constants'
+import { TEXT_FONT_STYLES, MARQUEE_DIRECTIONS } from './tile.constants'
 
-export default function TileTextForm({ tile, errorFields, parent }) {
+export default function TileTextForm({ tile, errorFields, parent, fontFamilies }) {
   return (
     <div>
       <TextArea
@@ -24,7 +24,7 @@ export default function TileTextForm({ tile, errorFields, parent }) {
           title="Font"
           name='font_family'
           selected={tile.settings.font_family || 'sans-serif'}
-          options={TEXT_FONT_FAMILIES}
+          options={fontFamilies}
           onChange={parent.handleSettingsSelect}
         />
         <NumberInput
diff --git a/frontend/app/views/tile/handles/tile.video.js b/frontend/app/views/tile/handles/tile.video.js
index dbcc856..760aabf 100644
--- a/frontend/app/views/tile/handles/tile.video.js
+++ b/frontend/app/views/tile/handles/tile.video.js
@@ -4,6 +4,10 @@ import { generateTransform, generateVideoStyle, pickCursor } from 'app/views/til
 import { timestampToSeconds } from 'app/utils'
 
 export default class TileVideo extends Component {
+  state = {
+    ready: false,
+  }
+
   constructor(props) {
     super(props)
     this.videoRef = React.createRef()
@@ -13,6 +17,9 @@ export default class TileVideo extends Component {
   
   componentDidMount() {
     this.bind()
+    setTimeout(() => {
+      this.setState({ ready: true })
+    }, 1)
   }
 
   componentDidUpdate() {
@@ -74,7 +81,8 @@ export default class TileVideo extends Component {
     // console.log(tile)
     const style = {
       transform: generateTransform(tile, box, bounds, videoBounds),
-      opacity: tile.settings.opacity,
+      opacity: !this.state.ready ? 0 : tile.settings.opacity,
+      transition: "opacity 0.2s",
     }
 
     let className = ['tile', tile.type].join(' ')