From a5edc770771479532f6e4af08e71b242744625d2 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Fri, 2 Apr 2021 15:54:30 +0200
Subject: mitigating some weird nav issues and FOUC

---
 frontend/app/views/graph/graph.container.js        |  8 +--
 frontend/app/views/tile/components/tile.form.js    | 10 ++-
 .../app/views/tile/forms/tile.form.element.text.js |  6 +-
 frontend/app/views/tile/handles/tile.video.js      | 10 ++-
 frontend/site/actions.js                           |  6 +-
 frontend/site/projects/museum/app.js               | 21 ++++--
 frontend/site/projects/museum/constants.js         | 17 +++--
 frontend/site/projects/museum/museum.actions.js    | 21 ++++++
 frontend/site/projects/museum/views/home.css       | 12 ++++
 frontend/site/projects/museum/views/home.js        | 24 +++++--
 frontend/site/projects/museum/views/nav.css        | 71 ++++++++++++++++++++-
 frontend/site/projects/museum/views/nav.overlay.js | 74 +++++++++++++++++-----
 frontend/site/site/site.actions.js                 |  9 ++-
 frontend/site/site/site.reducer.js                 |  7 ++
 frontend/site/types.js                             |  7 +-
 frontend/site/viewer/viewer.container.js           | 20 ++++--
 package.json                                       |  1 +
 webpack.config.site.dev.js                         |  4 +-
 yarn.lock                                          |  5 ++
 19 files changed, 271 insertions(+), 62 deletions(-)
 create mode 100644 frontend/site/projects/museum/museum.actions.js

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(' ')
diff --git a/frontend/site/actions.js b/frontend/site/actions.js
index dea882c..2e3d7a6 100644
--- a/frontend/site/actions.js
+++ b/frontend/site/actions.js
@@ -3,7 +3,7 @@ import { bindActionCreators } from 'redux'
 
 import * as siteActions from 'site/site/site.actions'
 
-import { store } from 'site/store'
+import { dispatch } from 'site/store'
 
 export default
     // Object.keys(crudActions)
@@ -12,8 +12,8 @@ export default
           [
             ['site', siteActions],
           ] //)
-          .map(p => [p[0], bindActionCreators(p[1], store.dispatch)])
+          .map(p => [p[0], bindActionCreators(p[1], dispatch)])
           .concat([
             // ['socket', socketActions],
           ])
-          .reduce((a,b) => (a[b[0]] = b[1])&&a,{})
\ No newline at end of file
+          .reduce((a,b) => (a[b[0]] = b[1])&&a,{})
diff --git a/frontend/site/projects/museum/app.js b/frontend/site/projects/museum/app.js
index 12dab41..44070b7 100644
--- a/frontend/site/projects/museum/app.js
+++ b/frontend/site/projects/museum/app.js
@@ -1,27 +1,30 @@
 import React, { Component } from 'react'
 import { ConnectedRouter } from 'connected-react-router'
 import { Route } from 'react-router'
+import { connect } from 'react-redux'
 
 import ViewerContainer from 'site/viewer/viewer.container'
 import Home from './views/home'
 import NavOverlay from './views/nav.overlay'
-import actions from 'site/actions'
 
-export default class App extends Component {
+import { loadMuseum } from './museum.actions'
+
+class App extends Component {
   componentDidMount() {
-    const path_partz = window.location.pathname.split('/')
-    const graph_name = path_partz[1]
-    actions.site.loadSite(graph_name)
+    loadMuseum()
   }
   
   render() {
+    if (!this.props.ready) {
+      return <div />
+    }
     return (
       <ConnectedRouter history={this.props.history}>
         <div className='app'>
           <Route path={'/last-museum/:page_name'} component={ViewerContainer} exact />
           <Route path={'/last-museum/start'} component={Home} exact />
           <Route path={'/last-museum/:page_name'} component={NavOverlay} exact />
-          <Route exact key='root' path='/last-museum/' render={() => {
+          <Route path='/last-museum/' exact render={() => {
             setTimeout(() => this.props.history.push('/last-museum/start'), 10)
             return null
           }} />
@@ -30,3 +33,9 @@ export default class App extends Component {
     )
   }
 }
+
+const mapStateToProps = state => ({
+  ready: state.site.ready,
+})
+
+export default connect(mapStateToProps)(App)
diff --git a/frontend/site/projects/museum/constants.js b/frontend/site/projects/museum/constants.js
index 0bb98ba..3676f2b 100644
--- a/frontend/site/projects/museum/constants.js
+++ b/frontend/site/projects/museum/constants.js
@@ -2,26 +2,35 @@ export const ARTISTS = {
   nora: {
     name: "Nora Al-Badri",
     location: "C-Base, Berlin, Germany",
+    start: "nora-1",
   },
   leite: {
     name: "Juliana Cerqueria Leite",
     location: "Santa Ifigênia, São Paolo, Brazil",
+    start: "leite-chapter-1",
   },
   foreshew: {
     name: "Nicole Foreshew",
     location: "Australia",
+    start: "foreshew-1",
   },
-  stankievich: {
-    name: "Charles Stankievich",
+  stankievech: {
+    name: "Charles Stankievech",
     location: "Canada",
+    start: "stankievech-1",
   },
   nilthamrong: {
     name: "Jakrawal Nilthamrong",
     location: "Thailand",
+    start: "nilthamrong-home",
   },
-  opoko: {
-    name: "Zohra Opoko",
+  opoku: {
+    name: "Zohra Opoku",
     location: "Mortuary (Unfinished), Accra, Ghana",
+    start: "opoku-1-hail-to-you",
   }
 }
 
+export const ARTIST_ORDER = [
+  "nora", "foreshew", "leite", "opoku", "nilthamrong", "stankievech",
+]
\ No newline at end of file
diff --git a/frontend/site/projects/museum/museum.actions.js b/frontend/site/projects/museum/museum.actions.js
new file mode 100644
index 0000000..7f9867a
--- /dev/null
+++ b/frontend/site/projects/museum/museum.actions.js
@@ -0,0 +1,21 @@
+import * as types from 'site/types'
+import FontFaceObserver from 'fontfaceobserver'
+import actions from 'site/actions'
+import { dispatch } from 'site/store'
+
+export const loadMuseum = () => {
+  Promise.all([
+    loadFonts,
+    actions.site.loadGraph('last-museum'),
+  ])
+  .then(() => dispatch({ type: types.site.load_site }))
+}
+
+const loadFonts = () => {
+  const fonts = [
+    new FontFaceObserver('Gruk'),
+    new FontFaceObserver('Gruk Wide', { style: 'italic' }),
+    new FontFaceObserver('Gruk Medium'),
+  ]
+  return Promise.all(fonts.map(font => font.load()))
+}
diff --git a/frontend/site/projects/museum/views/home.css b/frontend/site/projects/museum/views/home.css
index 597c66b..188840b 100644
--- a/frontend/site/projects/museum/views/home.css
+++ b/frontend/site/projects/museum/views/home.css
@@ -113,3 +113,15 @@ html {
 .home.open .home-byline {
   opacity: 0;
 }
+
+.curtain {
+  position: fixed;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+  background: #111111;
+  transition: opacity 0.2s;
+  opacity: 1.0;
+}
+.curtain.hidden {
+  opacity: 0;
+}
\ No newline at end of file
diff --git a/frontend/site/projects/museum/views/home.js b/frontend/site/projects/museum/views/home.js
index e3c44d5..1520c11 100644
--- a/frontend/site/projects/museum/views/home.js
+++ b/frontend/site/projects/museum/views/home.js
@@ -1,22 +1,27 @@
 import React, { Component } from 'react'
+import { connect } from 'react-redux'
 
 import actions from 'site/actions'
 
 import "./home.css"
 
-export default class Home extends Component {
-  state = {
-    open: false,
-  }
-
+class Home extends Component {
   constructor(props) {
     super(props)
     this.handleClick = this.handleClick.bind(this)
+    this.state = {
+      open: false,
+      hidden: this.props.interactive,
+      showCurtain: true,
+    }
   }
 
   componentDidMount() {
     const roadblock = document.querySelector('.roadblock')
     if (roadblock) roadblock.style.display = "none"
+    setTimeout(() => {
+      this.setState({ showCurtain: false })
+    }, 100)
   }
 
   handleClick(e) {
@@ -44,13 +49,20 @@ export default class Home extends Component {
         <div className="home-artists artists-right">
           CHARLES STANKIEVECH<br />
           JAKRAWAL NILTHAMRONG<br />
-          ZOHRA OPOKO
+          ZOHRA OPOKU
         </div>
         <div className="home-byline byline-bottom">CURATED BY NADIM SAMMAN</div>
         <div className="home-message">
           Lorem ipsum dolor sit amet, pro ea errem nonumes, gubergren deterruisset sit eu. Quo nostrud definitiones ex, sea dicant accommodare ei, te vix habeo minim voluptatum.
         </div>
+        <div className={this.state.showCurtain ? "curtain" : "curtain hidden"} />
       </div>
     )
   }
 }
+
+const mapStateToProps = state => ({
+  interactive: state.site.interactive,
+})
+
+export default connect(mapStateToProps)(Home)
diff --git a/frontend/site/projects/museum/views/nav.css b/frontend/site/projects/museum/views/nav.css
index 2b6d75a..a44758f 100644
--- a/frontend/site/projects/museum/views/nav.css
+++ b/frontend/site/projects/museum/views/nav.css
@@ -1,13 +1,80 @@
+.museum-nav .home-link {
+  position: fixed;
+  top: 0; left: 0;
+  padding: 1rem;
+  color: rgba(255, 121, 13, 1.0);
+  font-family: 'Helvetica', sans-serif;
+  font-size: 1.2rem;
+  cursor: pointer;
+}
+
+/* footer */
+
 .footer {
   position: fixed;
   bottom: 0;
   width: 100%;
-  background: linear-gradient(90deg, rgba(255, 121, 13, 0.0), rgba(255, 121, 13, 1.0));
+  height: 5rem;
+  color: black;
+}
+.footer-gradient {
+  position: absolute;
+  bottom: 0rem;
+  width: 100%;
+  height: 5rem;
+  background: linear-gradient(180deg, rgba(255, 121, 13, 0.0), rgba(255, 121, 13, 1.0) 70%);
+  transform: translateY(2rem);
+  transition: transform 0.15s;
+}
+.footer .arrow {
+  position: absolute;
+  bottom: 0;
+  height: 3rem;
+  width: 4rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: transform 0.15s;
+  transform: translateY(3rem);
+}
+.footer .arrow-left {
+  left: 0;
+}
+.footer .arrow-right {
+  right: 0;
+}
+.footer .artist-desc {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  white-space: nowrap;
+  text-align: center;
+  padding-bottom: 0.5rem;
+  transition: transform 0.15s;
+  transform: translateY(3rem);
 }
 .footer .artist-name {
   font-family: "Druk Wide";
   font-style: italic;
+  text-transform: uppercase;
+  margin-right: 1rem;
+  font-size: 28px;
+  line-height: 28px;
+  cursor: default;
 }
 .footer .artist-location {
   font-family: "Helvetica", sans-serif;
-}
\ No newline at end of file
+  font-size: 21px;
+  line-height: 21px;
+  cursor: default;
+}
+
+.footer.with-artist:hover .arrow,
+.footer.with-artist:hover .artist-desc {
+  transform: translateY(0);
+}
+.footer.with-artist:hover .footer-gradient {
+  transform: translateY(0);
+}
diff --git a/frontend/site/projects/museum/views/nav.overlay.js b/frontend/site/projects/museum/views/nav.overlay.js
index 36af7db..ed6a0f5 100644
--- a/frontend/site/projects/museum/views/nav.overlay.js
+++ b/frontend/site/projects/museum/views/nav.overlay.js
@@ -4,7 +4,9 @@ import actions from 'site/actions'
 
 import "./nav.css"
 
-import { ARTISTS } from "site/projects/museum/constants"
+import { ARTISTS, ARTIST_ORDER } from "site/projects/museum/constants"
+import { ArrowLeft, ArrowRight } from "site/projects/museum/icons"
+import { history } from "site/store"
 
 export default class NavOverlay extends Component {
   state = {
@@ -16,58 +18,98 @@ export default class NavOverlay extends Component {
 
   constructor(props) {
     super(props)
+    this.previousArtist = this.previousArtist.bind(this)
+    this.nextArtist = this.nextArtist.bind(this)
+    this.goHome = this.goHome.bind(this)
   }
 
   componentDidMount() {
     this.load()
   }
-  componentDidUpdate() {
+
+  componentDidUpdate(prevProps) {
+    // console.log(this.props.location.pathname, prevProps.location.pathname)
     if (this.props.location.pathname !== prevProps.location.pathname) {
       this.load()
     }
   }
 
   load() {
-    const { pathname } = this.props.location
-    const pathPartz = pathname.split("-")
+    const { page_name } = this.props.match.params
+    const pathPartz = page_name.split("-")
     const pathkey = pathPartz[0]
+    // console.log(pathkey)
     if (pathkey === 'start') {
       this.setState({
         showFooter: true,
         showArtist: false,
-        artist: {}
+        currentArtist: null,
+        artist: {},
       })
     } else if (pathkey in ARTISTS) {
       this.setState({
+        showHome: true,
         showFooter: true,
         showArtist: true,
-        artist: ARTISTS[pathkey]
+        currentArtist: pathkey,
+        artist: ARTISTS[pathkey],
       })
     } else {
       this.setState({
         showFooter: false,
         showArtist: false,
-        artist: {}
+        currentArtist: null,
+        artist: {},
       })
     }
   }
 
+  previousArtist() {
+    this.go(-1)
+  }
+
+  nextArtist() {
+    this.go(1)
+  }
+
+  go(step) {
+    if (!this.state.currentArtist) return
+    const index = ARTIST_ORDER.indexOf(this.state.currentArtist)
+    const nextIndex = (index + step + ARTIST_ORDER.length) % ARTIST_ORDER.length
+    const currentArtist = ARTIST_ORDER[nextIndex]
+    const artist = ARTISTS[currentArtist]
+    this.setState({ currentArtist, artist })
+    history.push(`/last-museum/${artist.start}`)
+  }
+
+  goHome() {
+    history.push(`/last-museum/`)
+  }
+
   render() {
-    const { showArtist, showHome, artist } = this.state
+    const { showArtist, showHome, showFooter, artist } = this.state
     return (
       <div className="museum-nav">
+        {showHome && (
+          <div className="home-link" onClick={this.goHome}>
+            Home
+          </div>
+        )}
         {showFooter && (
           showArtist ? (
-            <div className="footer">
-              <span className="arrow-left">{ArrowLeft}</span>
-              <span className="artist-name">{artist.name}</span>
-              <span className="artist-location">{artist.location}</span>
-              <span className="arrow-right">{ArrowRight}</span>
+            <div className="footer with-artist">
+              <div className="footer-gradient" />
+              <div className="artist-desc">
+                <span className="artist-name">{artist.name}</span>
+                <span className="artist-location">{artist.location}</span>
+              </div>
+              <div className="arrow arrow-left" onClick={this.previousArtist}>{ArrowLeft}</div>
+              <div className="arrow arrow-right" onClick={this.nextArtist}>{ArrowRight}</div>
             </div>
-          } : (
-            <div className="footer" />
+          ) : (
+            <div className="footer no-artist" />
           )
-        ))}
+        )}
       </div>
     )
   }
diff --git a/frontend/site/site/site.actions.js b/frontend/site/site/site.actions.js
index aab68e8..f0eeebc 100644
--- a/frontend/site/site/site.actions.js
+++ b/frontend/site/site/site.actions.js
@@ -6,7 +6,14 @@ export const setSiteTitle = title => dispatch => {
   dispatch({ type: types.site.set_site_title, payload: title })
 }
 
-export const loadSite = graph_name => dispatch => (
+export const loadSite = graph_name => dispatch => {
+  loadGraph(graph_name)
+  .then(() => {
+    dispatch({ type: types.site.load_site })
+  })
+}
+
+export const loadGraph = graph_name => dispatch => (
   api(dispatch, types.site, 'site', '/' + graph_name + '/index.json?t=' + (Date.now() / 3600000))
 )
 
diff --git a/frontend/site/site/site.reducer.js b/frontend/site/site/site.reducer.js
index 8b31786..8b7175c 100644
--- a/frontend/site/site/site.reducer.js
+++ b/frontend/site/site/site.reducer.js
@@ -2,6 +2,7 @@ import * as types from 'site/types'
 
 const initialState = {
   siteTitle: 'swimmer',
+  ready: false,
   interactive: false,
   graph: {
     loading: true,
@@ -25,6 +26,12 @@ export default function siteReducer(state = initialState, action) {
         cursors: buildCursors(action.data.graph),
       }
 
+    case types.site.load_site:
+      return {
+        ...state,
+        ready: true,
+      }
+
     case types.site.interact:
       return {
         ...state,
diff --git a/frontend/site/types.js b/frontend/site/types.js
index 4ab897f..a83febe 100644
--- a/frontend/site/types.js
+++ b/frontend/site/types.js
@@ -1,11 +1,8 @@
 import { with_type } from 'app/api/crud.types'
 
 export const site = with_type('site', [
-  'set_site_title', 'loading', 'loaded', 'error', 'interact'
-])
-
-export const system = with_type('system', [
-  'load_site',
+  'set_site_title', 'loading', 'loaded', 'error',
+  'load_site', 'interact',
 ])
 
 export const init = '@@INIT'
diff --git a/frontend/site/viewer/viewer.container.js b/frontend/site/viewer/viewer.container.js
index 09f04c3..4135586 100644
--- a/frontend/site/viewer/viewer.container.js
+++ b/frontend/site/viewer/viewer.container.js
@@ -32,13 +32,23 @@ class ViewerContainer extends Component {
     window.addEventListener('resize', this.handleResize)
   }
 
+  componentDidMount() {
+    if (this.props.graph && this.props.interactive) {
+      this.load()
+    }
+  }
+
   componentDidUpdate(prevProps) {
     // console.log('didUpdate', this.props.graph !== prevProps.graph, this.props.location.pathname !== prevProps.location.pathname)
-    // console.log(this.props.location.pathname, prevProps.location.pathname, this.props.interactive)
-    if (this.props.graph !== prevProps.graph || this.props.location.pathname !== prevProps.location.pathname) {
+    // console.log(this.props.location.pathname, prevProps.location.pathname, this.props.interactive, prevProps.interactive)
+    if (
+      this.props.graph !== prevProps.graph ||
+      this.props.location.pathname !== prevProps.location.pathname ||
+      this.props.interactive !== prevProps.interactive
+    ) {
       this.load()
     }
-    if (this.props.interactive && (this.props.interactive !== prevProps.interactive)) {
+    else if (this.props.interactive && (this.props.interactive !== prevProps.interactive)) {
       this.setState({ roadblock: false })
       this.props.audio.player.playPage(this.state.page)
       this.resetTimer(this.state.page)
@@ -52,6 +62,7 @@ class ViewerContainer extends Component {
 
   load() {
     const { page_name } = this.props.match.params
+    // console.log("load", page_name)
     const { pages, home_page, path: graph_name } = this.props.graph
     const page_path = ["", graph_name, page_name].join('/')
     // if ((!page_path in pages) || page_name === 'index.html') {
@@ -60,7 +71,8 @@ class ViewerContainer extends Component {
     // }
     // console.log(this.props.interactive)
     const page = pages[page_path] || pages[home_page]
-    console.log("show page", page.id)
+    // console.log(pages, page)
+    // console.log("show page", page.id)
     if (!this.props.interactive && hasAutoplay(page)) {
       this.setState({ page, popups: {}, hidden: {}, roadblock: true, unloaded: false })
     } else {
diff --git a/package.json b/package.json
index c9765a8..c2bd6d4 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "exifreader": "^3.8.0",
     "fetch-jsonp": "^1.1.3",
     "file-saver": "^2.0.2",
+    "fontfaceobserver": "^2.1.0",
     "history": "^4.10.1",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
diff --git a/webpack.config.site.dev.js b/webpack.config.site.dev.js
index a3e06fd..da71040 100644
--- a/webpack.config.site.dev.js
+++ b/webpack.config.site.dev.js
@@ -17,6 +17,7 @@ module.exports = function (env) {
       path: path.resolve(__dirname, "static/js/dist"),
       filename: "bundle.js",
     },
+    devtool: "cheap-module-eval-source-map",
     plugins: [
       new webpack.NormalModuleReplacementPlugin(
         /(.*)APP_TARGET(\.*)/,
@@ -58,7 +59,6 @@ module.exports = function (env) {
         // "react-dom": "preact/compat",
       },
     },
-    devtool: "cheap-module-source-map",
     module: {
       rules: [
         {
@@ -71,7 +71,7 @@ module.exports = function (env) {
           exclude: /(node_modules|bower_components|build)/,
           loader: "babel-loader",
           options: {
-            presets: ["@babel/preset-react"],
+            presets: ["@babel/preset-env"],
             plugins: ["@babel/plugin-transform-runtime"],
           },
         },
diff --git a/yarn.lock b/yarn.lock
index 8b7bf3b..e496256 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3420,6 +3420,11 @@ flux-standard-action@^0.6.1:
   dependencies:
     lodash.isplainobject "^3.2.0"
 
+fontfaceobserver@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fontfaceobserver/-/fontfaceobserver-2.1.0.tgz#e2705d293e2c585a6531c2a722905657317a2991"
+  integrity sha512-ReOsO2F66jUa0jmv2nlM/s1MiutJx/srhAe2+TE8dJCMi02ZZOcCTxTCQFr3Yet+uODUtnr4Mewg+tNQ+4V1Ng==
+
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
-- 
cgit v1.2.3-70-g09d2