wip new mode switch

vocodes/src/App.scss

@@ -21,6 +21,11 @@ body {
   margin: auto;
 }
 
+.migrationComponentWrapper {
+  margin-top: 1em;
+  border-top: 4px solid #ccc;
+}
+
 canvas#spectrogram {
   margin: 0.5em 0;
   transform: scaleY(-1); /* Spectrograms are flipped */

vocodes/src/App.tsx

@@ -4,6 +4,7 @@ import './App.scss';
 import React from 'react';
 import { NewOldVocodesSwitch } from './migration/NewOldVocodesSwitch';
 import { OldVocodesContainer } from './migration/OldVocodesContainer';
+import { NewVocodesContainer } from './migration/NewVocodesContainer';
 
 enum MigrationMode {
   NEW_VOCODES,
@@ -50,6 +51,12 @@ class App extends React.Component<Props, State> {
 
     switch (this.state.migrationMode) {
       case MigrationMode.NEW_VOCODES:
+        innerComponent = (
+          <div>
+            <NewVocodesContainer
+              />
+          </div>
+        );
         break;
 
       case MigrationMode.OLD_VOCODES:
@@ -72,8 +79,9 @@ class App extends React.Component<Props, State> {
             setMigrationModeCallback={this.setMigrationMode}
             />
 
-        {innerComponent}
-
+        <div className="migrationComponentWrapper">
+          {innerComponent}
+        </div>
 
         </div>
       </div>

vocodes/src/migration/NewVocodesContainer.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { NewTopNav } from '../navigation/NewTopNav';
+
+
+enum NewMode {
+  LOGIN_MODE,
+  SIGNUP_MODE,
+  COMMUNITY_TTS_MODE,
+  COMMUNITY_W2L_MODE,
+  UPLOAD_MODE,
+  MY_DATA_MODE,
+  MY_PROFILE_MODE,
+  EDIT_MY_PROFILE_MODE,
+}
+
+interface Props {
+}
+
+interface State {
+  mode: NewMode,
+}
+
+class NewVocodesContainer extends React.Component<Props, State> {
+
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      mode: NewMode.SIGNUP_MODE,
+    }
+  }
+
+  switchMode = (mode: NewMode) => {
+    this.setState({mode: mode});
+  }
+
+  logout = () => {
+  }
+
+  public render() {
+    let innerComponent = <div />;
+
+    return (
+      <div id="main" className="mainwrap">
+        <div id="viewable">
+
+          <NewTopNav
+            mode={this.state.mode}
+            switchModeCallback={this.switchMode}
+            logoutHandler={this.logout}
+            />
+
+          {innerComponent}
+
+
+        </div>
+      </div>
+    )
+  }
+}
+
+export { NewVocodesContainer, NewMode }

vocodes/src/navigation/NewTopNav.tsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import { NewMode } from '../migration/NewVocodesContainer'
+import { SessionStateResponse } from '../api/SessionState';
+
+interface Props {
+  sessionState?: SessionStateResponse,
+  mode: NewMode,
+  ///historyBadgeCount: number,
+  //isHistoryCountBadgeVisible: boolean,
+  switchModeCallback: (mode: NewMode ) => void,
+  logoutHandler: () => void,
+}
+
+function NewTopNav(props: Props) {
+  let badge = <span />;
+
+  /*if (props.historyBadgeCount > 0) {
+    let className = "tag is-info is-light";
+
+    if (props.isHistoryCountBadgeVisible) {
+      className = "tag is-danger";
+    }
+
+    badge = <span className={className}>{props.historyBadgeCount}</span>;
+  }*/
+
+  let loggedIn = false;
+  let displayName = "My Account";
+
+  if (props.sessionState !== undefined) {
+    console.log('sessionstate', props.sessionState);
+    loggedIn = props.sessionState.logged_in;
+    if (props.sessionState.user !== undefined && 
+        props.sessionState.user !== null) {
+      displayName = props.sessionState.user.display_name;
+    }
+  }
+
+  // Vo.codes 2.0
+  let loginManagement = <span />;
+  let extendedFeatures = <span />;
+
+  if (true) {
+    if (loggedIn) {
+      loginManagement = (
+        <span>
+          <a href="#profile" onClick={() => props.switchModeCallback(NewMode.MY_PROFILE_MODE)}>{displayName}</a>
+          <a href="#logout" onClick={() => props.logoutHandler()}>Log Out</a>
+        </span>
+      );
+    } else {
+      loginManagement = (
+        <span>
+          <a href="#login" onClick={() => props.switchModeCallback(NewMode.LOGIN_MODE)}>Login</a>
+          <a href="#signup" onClick={() => props.switchModeCallback(NewMode.SIGNUP_MODE)} className="signup">Sign Up</a>
+        </span>
+      );
+    }
+
+    extendedFeatures = (
+      <div className="notification is-info is-light">
+          <strong>NEW Community Features let you use Your Own Voices and Video:</strong>
+          <br />
+          <br />
+          <a href="#community_tts" onClick={() => props.switchModeCallback(NewMode.COMMUNITY_TTS_MODE)}>TTS</a>
+          <a href="#community_video" onClick={() => props.switchModeCallback(NewMode.COMMUNITY_W2L_MODE)}>Video</a>
+          <a href="#upload" onClick={() => props.switchModeCallback(NewMode.UPLOAD_MODE)}>Upload</a>
+          <a href="#my_data" onClick={() => props.switchModeCallback(NewMode.MY_DATA_MODE)}>My Data</a>
+      </div>
+    );
+  }
+
+  return (
+    <nav>
+      {/*<span id="logo_text">
+        <a href="#speak" onClick={() => props.switchModeCallback(NewMode.SIGNUP_MODE)}><span 
+          className="vo">Vo</span><span className="codes">codes</span></a>
+        </span>*/}
+      <div className="columns">
+        <div className="column">
+          <button 
+            className="button is-link is-large is-inverted"
+            onClick={() => props.switchModeCallback(NewMode.COMMUNITY_TTS_MODE)}
+            >Sign Up</button>
+        </div>
+        <div className="column">
+          <button 
+            className="button is-link is-large is-inverted"
+            onClick={() => props.switchModeCallback(NewMode.COMMUNITY_TTS_MODE)}
+            >Login</button>
+        </div>
+        <div className="column">
+          <button 
+            className="button is-link is-large is-inverted"
+            onClick={() => props.switchModeCallback(NewMode.COMMUNITY_TTS_MODE)}
+            >Text to Speech 🗣️</button>
+        </div>
+        <div className="column">
+          <button 
+            className="button is-link is-large is-inverted"
+            onClick={() => props.switchModeCallback(NewMode.COMMUNITY_TTS_MODE)}
+            >Video 🎥</button>
+        </div>
+      </div>
+      <div className="columns">
+        <div className="column">
+          <button 
+            className="button is-link is-large is-inverted"
+            onClick={() => props.switchModeCallback(NewMode.COMMUNITY_TTS_MODE)}
+            >Upload TTS ⬆️</button>
+        </div>
+        <div className="column">
+          <button 
+            className="button is-link is-large is-inverted"
+            onClick={() => props.switchModeCallback(NewMode.COMMUNITY_TTS_MODE)}
+            >Upload Video ⬆️</button>
+        </div>
+        <div className="column">
+          <button 
+            className="button is-link is-large is-inverted"
+            onClick={() => props.switchModeCallback(NewMode.COMMUNITY_TTS_MODE)}
+            >My Data</button>
+        </div>
+      </div>
+      <hr />
+    </nav>
+  )
+}
+
+export { NewTopNav };