From 99fb2b3dadc4aec736841ed5b2ba8bc44afc4583 Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Thu, 27 May 2021 20:38:21 -0400
Subject: [PATCH] non-functional form on video lipsync

---
 vocodes/src/v2/tts_model/TtsModelFormFc.tsx   | 14 +++-
 .../w2l_template_view/W2lTemplateViewFc.tsx   | 74 ++++++++++++++++++-
 2 files changed, 81 insertions(+), 7 deletions(-)

diff --git a/vocodes/src/v2/tts_model/TtsModelFormFc.tsx b/vocodes/src/v2/tts_model/TtsModelFormFc.tsx
index b4c9c40f93..d353d078a5 100644
--- a/vocodes/src/v2/tts_model/TtsModelFormFc.tsx
+++ b/vocodes/src/v2/tts_model/TtsModelFormFc.tsx
@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
 import { ApiConfig } from '../../v1/api/ApiConfig';
 import { SessionWrapper } from '../../session/SessionWrapper';
 import { useHistory, Link } from "react-router-dom";
-import { getRandomInt } from '../../Utils';
 
 interface TtsModelListResponsePayload {
   success: boolean,
@@ -106,7 +105,16 @@ function TtsModelFormFc(props: Props) {
   }
 
   let remainingCharactersButtonDisabled = false;
-  let handleCancelClick = (a: any) => { return false; };
+
+  const handleFormSubmit = (ev: React.FormEvent<HTMLFormElement>) => { 
+    ev.preventDefault();
+    return false;
+  };
+
+  const handleCancelClick = (ev: React.FormEvent<HTMLButtonElement>) => { 
+    ev.preventDefault();
+    return false;
+  };
 
   return (
     <div>
@@ -116,7 +124,7 @@ function TtsModelFormFc(props: Props) {
 
       <br />
 
-      <form>
+      <form onSubmit={handleFormSubmit}>
         <div className={selectClasses}>
           <select>
             {listItems}
diff --git a/vocodes/src/v2/w2l_template_view/W2lTemplateViewFc.tsx b/vocodes/src/v2/w2l_template_view/W2lTemplateViewFc.tsx
index 444b72a899..9aef87a14a 100644
--- a/vocodes/src/v2/w2l_template_view/W2lTemplateViewFc.tsx
+++ b/vocodes/src/v2/w2l_template_view/W2lTemplateViewFc.tsx
@@ -12,8 +12,8 @@ interface W2lTemplate {
   template_token: string,
   template_type: string,
   creator_user_token: string,
-  username: string,
-  display_name: string,
+  creator_username: string,
+  creator_display_name: string,
   updatable_slug: string,
   title: string,
   frame_width: number,
@@ -61,7 +61,7 @@ function W2lTemplateViewFc(props: Props) {
     });
   }, []); // NB: Empty array dependency sets to run ONLY on mount
 
-  let creatorLink=`/profile/${w2lTemplate?.display_name}`;
+  let creatorLink=`/profile/${w2lTemplate?.creator_username}`;
 
   let object : string|undefined = undefined;
   
@@ -74,10 +74,76 @@ function W2lTemplateViewFc(props: Props) {
 
   let url = `https://storage.googleapis.com/dev-vocodes-public${object}`;
 
+  const handleAudioFileChange = (fileList: FileList|null) => {
+    if (fileList === null 
+        || fileList === undefined
+        || fileList.length < 1) {
+      //this.setState({
+      //  audioFile: undefined,
+      //});
+    }
+
+    let file = fileList![0];
+
+    //this.setState({
+    //  audioFile: file,
+    //});
+  };
+
+  const handleFormSubmit = (ev: React.FormEvent<HTMLFormElement>) : boolean => {
+    ev.preventDefault();
+    return false;
+  };
+
+  const audioFilename = 'filename.todo';
+
+
   return (
     <div>
       <h1 className="title is-1"> Video lip sync template </h1>
 
+      <div className="content is-size-4">
+        <p>
+          Upload audio from vo.codes or any other source (music, other websites), 
+          then pick a template below. The audio shouldn't be too long or it will
+          fail.
+        </p>
+      </div>
+
+      <form onSubmit={handleFormSubmit}>
+
+        <div className="upload-box">
+          <div className="file has-name is-large">
+            <label className="file-label">
+              <input 
+                type="file" 
+                name="audio" 
+                className="file-input" 
+                onChange={ (e) => handleAudioFileChange(e.target.files) }
+                />
+              <span className="file-cta">
+                <span className="file-icon">
+                  <i className="fas fa-upload"></i>
+                </span>
+                <span className="file-label">
+                  Choose audio file&hellip;
+                </span>
+              </span>
+              <span className="file-name">
+                {audioFilename}
+              </span>
+            </label>
+          </div>
+        </div>
+
+        <button className="button is-large is-fullwidth is-success">Submit</button>
+
+      </form>
+
+      <br />
+
+      <h3 className="title is-3"> Template Details </h3>
+
       <img src={url} alt="template preview" />
 
       <table className="table">
@@ -91,7 +157,7 @@ function W2lTemplateViewFc(props: Props) {
           <tr>
             <th>Creator</th>
             <td>
-              <Link to={creatorLink}>{w2lTemplate?.display_name}</Link>
+              <Link to={creatorLink}>{w2lTemplate?.creator_display_name}</Link>
             </td>
           </tr>
           <tr>