Add front-end & gif-folder creation as well as mock-gif-creation

embiem · Oct 14, 2017 · 859d9c1 · 859d9c1
1 parent e86f655
commit 859d9c1
Show file tree

Hide file tree

Showing 41 changed files with 9,923 additions and 18 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,2 @@
 node_modules
-public
+gifs
diff --git a/app/.eslintrc b/app/.eslintrc
@@ -0,0 +1,3 @@
+{
+  "extends": "react-app"
+}
diff --git a/app/.gitignore b/app/.gitignore
@@ -0,0 +1,21 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/app/README.md b/app/README.md
diff --git a/app/package.json b/app/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "material-ui": "next",
+    "material-ui-icons": "^1.0.0-beta.14",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "react-redux": "^5.0.6",
+    "react-scripts": "1.0.13",
+    "redux": "^3.7.2",
+    "redux-thunk": "^2.2.0",
+    "typeface-roboto": "^0.0.35"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/app/public/favicon.ico b/app/public/favicon.ico
diff --git a/app/public/index.html b/app/public/index.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>GIFBox</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/app/public/manifest.json b/app/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "GIFbox",
+  "name": "GIF-Box UI",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/app/src/App.css b/app/src/App.css
@@ -0,0 +1,3 @@
+.App {
+  text-align: center;
+}
diff --git a/app/src/App.js b/app/src/App.js
@@ -0,0 +1,105 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import Grid from 'material-ui/Grid';
+import Typography from 'material-ui/Typography';
+import { LinearProgress } from 'material-ui/Progress';
+import { withStyles } from 'material-ui/styles';
+
+import './App.css';
+import { PHASES, PHASE_NAMES } from './constants';
+import AppBar from './components/appBar/AppBar';
+import Home from './components/home';
+import Recording from './components/recording';
+import Processing from './components/processing';
+import Result from './components/result';
+import ErrorComponent from './components/error/Error';
+
+import { generalActions } from './redux/actions';
+
+const styles = theme => ({
+  subheader: {
+    marginLeft: theme.spacing.unit
+  },
+  contentGrid: {
+    flexGrow: 1,
+    marginTop: theme.spacing.unit,
+    height: '100%',
+    width: '100%'
+  }
+});
+
+class App extends Component {
+  // returns the appropriate component for the current state
+  renderContent = () => {
+    switch (this.props.phase) {
+      case PHASES.HOME:
+        return <Home />;
+      case PHASES.RECORDING:
+        return <Recording />;
+      case PHASES.PROCESSING:
+        return <Processing />;
+      case PHASES.RESULT:
+        return <Result />;
+      default:
+        return (
+          <ErrorComponent
+            message="Unknown phase!"
+            onAckClick={() => this.props.setPhase(PHASES.HOME)}
+          />
+        );
+    }
+  };
+
+  // return true if process indicator should be shown, otherwise return false
+  shouldShowProgress = () => {
+    if (
+      this.props.phase === PHASES.RECORDING ||
+      this.props.phase === PHASES.PROCESSING
+    ) {
+      return true;
+    }
+    return false;
+  };
+
+  render() {
+    return (
+      <div className="App">
+        <AppBar title="GIFBox">
+          <Typography
+            className={this.props.classes.subheader}
+            type="title"
+            color="secondary"
+          >
+            > {PHASE_NAMES[this.props.phase]}
+          </Typography>
+        </AppBar>
+        {this.shouldShowProgress() ? <LinearProgress /> : null}
+        <Grid
+          className={this.props.classes.contentGrid}
+          container
+          direction="row"
+          justify="center"
+          align="center"
+        >
+          {this.renderContent()}
+        </Grid>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = state => {
+  return {
+    phase: state.general.phase
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    setPhase: phase => dispatch(generalActions.setPhase(phase))
+  };
+};
+
+export default withStyles(styles)(
+  connect(mapStateToProps, mapDispatchToProps)(App)
+);
diff --git a/app/src/App.test.js b/app/src/App.test.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+});
diff --git a/app/src/client.js b/app/src/client.js
@@ -0,0 +1,35 @@
+function checkStatus(response) {
+  if (response.status >= 200 && response.status < 300) {
+    return response;
+  } else {
+    const error = new Error(`HTTP Error ${response.statusText}`);
+    error.status = response.statusText;
+    error.response = response;
+    console.log(error);
+    throw error;
+  }
+}
+
+function parseJSON(response) {
+  return response.json();
+}
+
+function getUrl() {
+  if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
+    return 'http://localhost:3001';
+} else {
+    return '';
+}
+}
+
+export const startRecording = () =>
+  fetch(getUrl() + '/start').then(checkStatus);
+
+export const getStatus = () =>
+  fetch(getUrl() + '/status', {
+    headers: {
+      Accept: 'application/json'
+    }
+  })
+    .then(checkStatus)
+    .then(parseJSON);
diff --git a/app/src/components/appBar/AppBar.js b/app/src/components/appBar/AppBar.js
@@ -0,0 +1,37 @@
+// @flow weak
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import AppBar from 'material-ui/AppBar';
+import Toolbar from 'material-ui/Toolbar';
+import Typography from 'material-ui/Typography';
+
+const styles = theme => ({
+  root: {
+    marginTop: theme.spacing.unit * 3,
+    width: '100%',
+  },
+});
+
+function SimpleAppBar(props) {
+  const classes = props.classes;
+  return (
+    <div className={classes.root}>
+      <AppBar position="static" color="default">
+        <Toolbar>
+          <Typography type="title" color="inherit">
+            {props.title}
+          </Typography>
+          {props.children}
+        </Toolbar>
+      </AppBar>
+    </div>
+  );
+}
+
+SimpleAppBar.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(SimpleAppBar);
diff --git a/app/src/components/error/Error.js b/app/src/components/error/Error.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import Grid from 'material-ui/Grid';
+import Button from 'material-ui/Button';
+
+const ErrorComponent = props => (
+  <Grid item>
+    <p>Sorry! An Error occured.</p>
+    {props.message ? <p>{props.message}</p> : null}
+    <Button raised color="primary" onClick={props.onAckClick}>
+      RETRY
+    </Button>
+  </Grid>
+);
+
+export default ErrorComponent;
diff --git a/app/src/components/home/Home.js b/app/src/components/home/Home.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import Grid from 'material-ui/Grid';
+import Button from 'material-ui/Button';
+
+class Home extends React.Component {
+  render() {
+    return (
+      <Grid item>
+        <Button raised color="primary" onClick={this.props.onStartClick}>
+          START
+        </Button>
+      </Grid>
+    );
+  }
+}
+
+export default Home;
diff --git a/app/src/components/home/HomeContainer.js b/app/src/components/home/HomeContainer.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import Home from './Home';
+import { generalActions } from '../../redux/actions';
+import { PHASES } from '../../constants';
+
+const HomeContainer = props => <Home {...props} />;
+
+const mapStateToProps = state => {
+  return {};
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onStartClick: () => dispatch(generalActions.setPhase(PHASES.RECORDING))
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(HomeContainer);
diff --git a/app/src/components/home/index.js b/app/src/components/home/index.js
@@ -0,0 +1,3 @@
+import HomeContainer from './HomeContainer';
+
+export default HomeContainer;
diff --git a/app/src/components/processing/Processing.js b/app/src/components/processing/Processing.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import Grid from 'material-ui/Grid';
+import Typography from 'material-ui/Typography';
+
+import { getStatus } from '../../client';
+
+class Processing extends React.Component {
+  static inval = null;
+  componentDidMount() {
+    Processing.inval = setInterval(this.checkProcessingStatus, 500);
+  }
+
+  checkProcessingStatus = () => {
+    getStatus().then(res => {
+      if (res.phase > 2) {
+        clearInterval(Processing.inval);
+        this.props.onProcessingFinish(res.gifPath);
+      }
+    });
+  }
+
+  render() {
+    return (
+      <Grid item>
+        <Typography type="display2" gutterBottom>
+          Processing...
+        </Typography>
+      </Grid>
+    );
+  }
+}
+
+export default Processing;