starting viewer standalone frontend

11 files changed, 146 insertions, 31 deletions

diff --git a/animism-align/frontend/app/common/index.js b/animism-align/frontend/app/common/index.js
index 1f0a61d..939e4e8 100644
--- a/animism-align/frontend/app/common/index.js
+++ b/animism-align/frontend/app/common/index.js
@@ -1,3 +1,12 @@
+
+import './fonts.css'
+import './app.css'
+import './form.css'
+import './table.css'
+import './modal.css'
+import './miscellaneous.css'
+import './upload.css'
+
 // export { default as Header } from 'app/common/header.component'
 export {
   MenuButton, SmallMenuButton, MenuRoute,
@@ -8,7 +17,7 @@ export {
   LabelDescription, ColorInput,
 } from 'app/common/form.component'
 export {
-  Loader, Swatch, Dot, Columns, Statistic, Detections, Progress
+  Swatch, Dot, Columns, Statistic, Detections, Progress
 } from 'app/common/miscellaneous.component'
 export { default as TableIndex } from 'app/common/tableIndex.component'
 export {
@@ -17,15 +26,7 @@ export {
 } from 'app/common/table.component'
 export { default as CopyToClipboardButton } from 'app/common/copyToClipboardButton.component'
 export { default as ImageCrop } from 'app/common/imageCrop.component'
+export { Loader } from 'app/common/loader.component'
 export { Modal } from 'app/common/modal.component'
 export { default as UploadImage } from 'app/common/uploadImage.component'
 export { default as Slider } from 'app/common/slider.component'
-
-import './fonts.css'
-import './app.css'
-import './form.css'
-import './loader.css'
-import './table.css'
-import './modal.css'
-import './miscellaneous.css'
-import './upload.css'
diff --git a/animism-align/frontend/app/common/loader.component.js b/animism-align/frontend/app/common/loader.component.js
new file mode 100644
index 0000000..846c9cc
--- /dev/null
+++ b/animism-align/frontend/app/common/loader.component.js
@@ -0,0 +1,14 @@
+import React from 'react'
+
+import './loader.css'
+
+export const Loader = () => (
+  <div>
+    <div className='circular-loader color'>
+      <div className="stroke">
+        <div className="stroke-left"></div>
+        <div className="stroke-right"></div>
+      </div>
+    </div>
+  </div>
+)
diff --git a/animism-align/frontend/app/common/miscellaneous.component.js b/animism-align/frontend/app/common/miscellaneous.component.js
index 8021c5d..bf2c266 100644
--- a/animism-align/frontend/app/common/miscellaneous.component.js
+++ b/animism-align/frontend/app/common/miscellaneous.component.js
@@ -2,17 +2,6 @@ import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
 import { clamp, percent } from 'app/utils'
 
-export const Loader = () => (
-  <div>
-    <div className='circular-loader color'>
-      <div className="stroke">
-        <div className="stroke-left"></div>
-        <div className="stroke-right"></div>
-      </div>
-    </div>
-  </div>
-)
-
 export const Swatch = ({ color }) => (
   <div
     className='swatch'
diff --git a/animism-align/frontend/app/constants.js b/animism-align/frontend/app/constants.js
index 711d979..75137b6 100644
--- a/animism-align/frontend/app/constants.js
+++ b/animism-align/frontend/app/constants.js
@@ -1,5 +1,9 @@
 import { capitalize } from 'app/utils'
 
+export const { NODE_ENV } = process.env
+export const ENV_DEVELOPMENT = NODE_ENV !== 'production'
+export const ENV_PRODUCTION = NODE_ENV === 'production'
+
 export const URLS = {
   audio: '/static/data_store/peaks/animism_episode_01_2810.mp3',
   peaks: '/static/data_store/peaks/peaks.json',
diff --git a/animism-align/frontend/app/views/audio/audio.reducer.js b/animism-align/frontend/app/views/audio/audio.reducer.js
index 46dc384..bd6bbae 100644
--- a/animism-align/frontend/app/views/audio/audio.reducer.js
+++ b/animism-align/frontend/app/views/audio/audio.reducer.js
@@ -1,5 +1,5 @@
 import * as types from 'app/types'
-import { session, getDefault, getDefaultInt } from 'app/session'
+// import { session, getDefault, getDefaultInt } from 'app/session'
 
 const initialState = {
   started: false,
diff --git a/animism-align/frontend/app/views/viewer/viewer.container.js b/animism-align/frontend/app/views/viewer/viewer.container.js
index 932729f..90787db 100644
--- a/animism-align/frontend/app/views/viewer/viewer.container.js
+++ b/animism-align/frontend/app/views/viewer/viewer.container.js
@@ -20,7 +20,8 @@ import './player/player.fullscreen.css'
 import './player/player.transcript.css'
 import './player/components.media/media.css'
 
-import { Loader } from 'app/common'
+import { Loader } from 'app/common/loader.component'
+import { ENV_DEVELOPMENT } from 'app/constants'
 
 import NavParent from './nav/nav.parent'
 import ViewerSections from './sections/viewer.sections'
@@ -69,7 +70,7 @@ class ViewerContainer extends Component {
             <ViewerSections />
             <Transcript />
             <Checklist />
-            <Route exact path='/viewer/:component/' component={ViewerRouter} />
+            {ENV_DEVELOPMENT && <Route exact path='/viewer/:component/' component={ViewerRouter} />}
           </div>
           <VitrineModal />
         </div>
diff --git a/animism-align/frontend/site/actions.js b/animism-align/frontend/site/actions.js
index 16297ce..f11ce13 100644
--- a/animism-align/frontend/site/actions.js
+++ b/animism-align/frontend/site/actions.js
@@ -1,7 +1,8 @@
 import { bindActionCreators } from 'redux'
 // import { actions as crudActions } from './api'
 
-// import * as siteActions from './site/site.actions'
+import * as audioActions from 'app/views/audio.actions'
+import * as viewerActions from 'app/views/viewer.actions'
 
 import { store } from './store'
 
@@ -10,7 +11,9 @@ export default
           // .map(a => [a, crudActions[a]])
           // .concat(
           [
-            ['site', siteActions],
+            // ['site', siteActions],
+            ['audio', audioActions],
+            ['viewer', viewerActions],
           ] //)
           .map(p => [p[0], bindActionCreators(p[1], store.dispatch)])
           .concat([
diff --git a/animism-align/frontend/site/index.js b/animism-align/frontend/site/index.js
index 6f1a0a5..838b012 100644
--- a/animism-align/frontend/site/index.js
+++ b/animism-align/frontend/site/index.js
@@ -2,9 +2,11 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import { Provider } from 'react-redux'
 
-import App from './app'
+import './site.css'
 
-import { store, history } from './store'
+import { store } from './store'
+
+import Viewer from 'app/views/viewer/viewer.container'
 
 const container = document.createElement('div')
 container.classList.add('container')
@@ -12,6 +14,6 @@ document.body.appendChild(container)
 
 ReactDOM.render(
   <Provider store={store}>
-    <App history={history} />
+    <Viewer />
   </Provider>, container
 )
diff --git a/animism-align/frontend/site/site.css b/animism-align/frontend/site/site.css
new file mode 100644
index 0000000..5a53028
--- /dev/null
+++ b/animism-align/frontend/site/site.css
@@ -0,0 +1,58 @@
+* { box-sizing: border-box; }
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+body {
+  background: #000;
+  color: #ddd;
+  font-family: 'Roboto', sans-serif;
+  font-size: 0.875rem;
+  height: 100%;
+  width: 100%;
+}
+.gray {
+  color: #888;
+}
+
+/* layout */
+
+.container {
+  height: 100%;
+  width: 100%;
+}
+.app {
+  /*display: flex;*/
+  height: 100%;
+  width: 100%;
+}
+.app > div {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+.app .body {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.row > div {
+  margin-right: 1.5rem;
+}
+.row > div:last-child {
+  margin-right: 0;
+}
diff --git a/animism-align/frontend/site/site/site.actions.js b/animism-align/frontend/site/site/site.actions.js
new file mode 100644
index 0000000..b66a9b9
--- /dev/null
+++ b/animism-align/frontend/site/site/site.actions.js
@@ -0,0 +1,31 @@
+import * as types from 'app/types'
+import actions from 'site/actions'
+import { URLS } from 'app/constants'
+import FontFaceObserver from 'fontfaceobserver'
+
+export const loadProject = () => dispatch => {
+  Promise.all([
+    // actions.site.loadText(),
+    // actions.site.loadPeaks(),
+    actions.audio.load(),
+    // actions.annotation.index(),
+    // actions.paragraph.index(),
+    // actions.media.index(),
+    // actions.episode.index(),
+    // actions.venue.index(),
+    loadFonts(),
+  ]).then(() => {
+    actions.viewer.loadSections()
+  }).catch(err => {
+    console.error(err)
+  })
+}
+
+const loadFonts = () => {
+  const fonts = [
+    new FontFaceObserver('Freight Text'),
+    new FontFaceObserver('Freight Text', { style: 'italic' }),
+    new FontFaceObserver('Neue Haas Unica'),
+  ]
+  return Promise.all(fonts.map(font => font.load()))
+}
diff --git a/animism-align/frontend/site/store.js b/animism-align/frontend/site/store.js
index a687a69..87a9a1f 100644
--- a/animism-align/frontend/site/store.js
+++ b/animism-align/frontend/site/store.js
@@ -1,3 +1,6 @@
+import * as types from 'app/types'
+import { crudState, crudReducer } from 'app/api/crud.reducer'
+
 import { applyMiddleware, compose, combineReducers, createStore } from 'redux'
 import { connectRouter, routerMiddleware } from 'connected-react-router'
 import { createBrowserHistory } from 'history'
@@ -6,10 +9,19 @@ import thunk from 'redux-thunk'
 // import siteReducer from './site/site.reducer'
 
 const createRootReducer = history => (
-  combineReducers({
+  combineReducers([
+    "media",
+    "upload",
+    "annotation",
+    "paragraph",
+    "episode",
+    "venue",
+  ].reduce((a, type) => {
+    a[type] = crudReducer(type)
+    return a
+  }, {
     auth: (state = {}) => state,
     router: connectRouter(history),
-    // site: siteReducer,
   })
 )