New video mode - wip

vocodes/src/App.scss

@@ -161,6 +161,11 @@ nav {
   min-height: 1.5em;
 }
 
+.video-thumbnail {
+  max-width: 250px;
+  padding: 1em;
+}
+
 #usage,
 #updates,
 #help-wanted,

vocodes/src/App.tsx

@@ -13,6 +13,7 @@ import { Spectrogram } from './modes/speak/extras/Spectrogram';
 import { TermsComponent } from './modes/terms/TermsComponent';
 import { TopNav } from './navigation/TopNav';
 import { Utterance } from './model/utterance';
+import { VideoComponent } from './modes/video/VideoComponent';
 
 interface Props {
   // Certan browsers (iPhone) have pitiful support for drawing APIs. Worse yet,
@@ -239,6 +240,10 @@ class App extends React.Component<Props, State> {
           setTextCallback={this.setText}
           />;
         break;
+      case Mode.VIDEO_MODE:
+        component = <VideoComponent
+          />
+        break;
       case Mode.HISTORY_MODE:
         component = <HistoryComponent 
           utterances={this.state.utterances} 

vocodes/src/AppMode.ts

@@ -1,5 +1,6 @@
 enum Mode {
   SPEAK_MODE,
+  VIDEO_MODE,
   HISTORY_MODE,
   ABOUT_MODE,
   TERMS_MODE,

vocodes/src/modes/video/VideoComponent.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { VIDEO_TEMPLATES } from './Videos';
+
+interface Props {
+}
+
+interface State {
+}
+
+class VideoComponent extends React.Component<Props, State> {
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+    };
+  }
+
+  public render() {
+    let thumbnails : any[] = [];
+
+    VIDEO_TEMPLATES.forEach(videoTemplate => {
+      
+      const thumbnail = <img
+        className="video-thumbnail"
+        src={videoTemplate.getThumbnailUrl()}
+        />
+
+      thumbnails.push(thumbnail);
+
+    });
+
+    return (
+      <div className="content is-4 is-size-5">
+        <h1 className="title is-3"> Deep Fake Video Beta </h1>
+
+        <div className="content is-size-4">
+          <p>
+            Upload audio from vo.codes or any other source and pick a video template 
+            below.
+          </p>
+        </div>
+
+        <form action="#">
+
+          <div className="upload-box">
+            <div className="file has-name is-boxed is-large">
+              <label className="file-label">
+                <input className="file-input" type="file" name="audio" />
+                <span className="file-cta">
+                  <span className="file-icon">
+                    <i className="fas fa-upload"></i>
+                  </span>
+                  <span className="file-label">
+                    Choose a file…
+                  </span>
+                </span>
+                <span className="file-name">
+                  Screen Shot 2017-07-29 at 15.54.25.png
+                </span>
+              </label>
+            </div>
+          </div>
+
+          <div className="video-template-selector">
+            {thumbnails.map(v => v)}
+          </div>
+
+          <div className="content is-size-4">
+            <p>
+              Hundreds of additional templates will be added in the future. 
+              Feel free to send some to us. As always, check Discord or 
+              like/subscribe Twitter for updates.
+            </p>
+          </div>
+
+          <button className="button is-large is-success">Submit</button>
+
+        </form>
+
+        <h1 className="title is-4"> Notes </h1>
+
+        <div className="content is-size-4">
+          <p>
+            This is a brand new, beta feature. It might break. 
+            I need to reach out to Google Cloud sales engineers to get more GPUs as I'm 
+            currently on a limited trial account (I was previously on Digital Ocean).
+            Expect this to lag during peak traffic until I get more GPUs.
+          </p>
+        </div>
+      </div>
+    )
+  }
+}
+
+
+export { VideoComponent };

vocodes/src/modes/video/Videos.ts

@@ -0,0 +1,44 @@
+
+class VideoTemplate {
+  name: string;
+  slug: string;
+  thumbnail: string;
+
+  constructor(
+    name: string,
+    slug: string,
+    thumbnail: string,
+  ) {
+    this.name = name;
+    this.slug = slug;
+    this.thumbnail = thumbnail;
+  }
+
+  static fromJson(json: any) : VideoTemplate {
+    return new VideoTemplate(
+      json.name,
+      json.slug,
+      json.thumbnail,
+    );
+  }
+
+  getThumbnailUrl() : string {
+    return `/video-thumbnails/${this.thumbnail}`;
+  }
+}
+
+
+const VIDEO_TEMPLATES : VideoTemplate[] = [
+  VideoTemplate.fromJson({
+    name: "Donald Trump",
+    slug: "trump-election-night.mp4",
+    thumbnail: "donald-trump.webp",
+  }),
+  VideoTemplate.fromJson({
+    name: "Dr. Phil",
+    slug: "dr-phil-bubble.mp4",
+    thumbnail: "dr-phil.webp",
+  }),
+];
+
+export { VideoTemplate, VIDEO_TEMPLATES }

vocodes/src/navigation/TopNav.tsx

@@ -13,6 +13,7 @@ function TopNav(props: Props) {
         <a href="#speak" onClick={() => props.switchModeCallback(Mode.SPEAK_MODE)}><span 
           className="vo">Vo</span><span className="codes">codes</span></a>
       </span>
+      <a href="#video" onClick={() => props.switchModeCallback(Mode.VIDEO_MODE)}>Video</a>
       <a href="#history" onClick={() => props.switchModeCallback(Mode.HISTORY_MODE)}>Replay &amp; Download</a>
       <a href="#use" onClick={() => props.switchModeCallback(Mode.ABOUT_MODE)}>About</a>
       <hr />