From 335c7a32380420166c6754883b103f53e49ad692 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 13 Nov 2020 16:37:38 +0100 Subject: starting viewer standalone frontend --- animism-align/frontend/app/common/index.js | 21 ++++---- .../frontend/app/common/loader.component.js | 14 ++++++ .../frontend/app/common/miscellaneous.component.js | 11 ---- animism-align/frontend/app/constants.js | 4 ++ .../frontend/app/views/audio/audio.reducer.js | 2 +- .../frontend/app/views/viewer/viewer.container.js | 5 +- animism-align/frontend/site/actions.js | 7 ++- animism-align/frontend/site/index.js | 8 +-- animism-align/frontend/site/site.css | 58 ++++++++++++++++++++++ animism-align/frontend/site/site/site.actions.js | 31 ++++++++++++ animism-align/frontend/site/store.js | 16 +++++- 11 files changed, 146 insertions(+), 31 deletions(-) create mode 100644 animism-align/frontend/app/common/loader.component.js create mode 100644 animism-align/frontend/site/site.css create mode 100644 animism-align/frontend/site/site/site.actions.js 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 = () => ( +
+
+
+
+
+
+
+
+) 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 = () => ( -
-
-
-
-
-
-
-
-) - export const Swatch = ({ color }) => (
- + {ENV_DEVELOPMENT && }
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( - + , 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, }) ) -- cgit v1.2.3-70-g09d2