result view

vocodes/src/v1/api/ApiConfig.ts

@@ -57,6 +57,10 @@ class ApiConfig {
     return `${this.getScheme()}://${this.getNewApiHost()}/w2l/template/${templateSlug}`;
   }
 
+  viewW2lInferenceResult(token: string) : string {
+    return `${this.getScheme()}://${this.getNewApiHost()}/w2l/result/${token}`;
+  }
+
   inferW2l() : string {
     return `${this.getScheme()}://${this.getNewApiHost()}/w2l/inference`;
   }

vocodes/src/v2/NewVocodesContainer.tsx

@@ -17,6 +17,7 @@ import { UploadW2lVideoFc } from './upload/UploadW2lVideoFc';
 import { W2lTemplateListFc } from './w2l_template_list/W2lTemplateListFc';
 import { W2lTemplateViewFc } from './w2l_template_view/W2lTemplateViewFc';
 import { ProfileFc } from './profile/ProfileFc';
+import { W2lResultViewFc } from './w2l_result_view/W2lResultViewFc';
 
 interface Props {
   sessionWrapper: SessionWrapper,
@@ -94,12 +95,18 @@ class NewVocodesContainer extends React.Component<Props, State> {
               />
             </Route>
 
+            <Route path="/w2l/result/:token">
+              <W2lResultViewFc
+                sessionWrapper={this.props.sessionWrapper}
+              />
+            </Route>
+
             <Route path="/w2l/:templateSlug">
               <W2lTemplateViewFc
                 sessionWrapper={this.props.sessionWrapper}
               />
-
             </Route>
+
             <Route path="/video">
               <W2lTemplateListFc
                 sessionWrapper={this.props.sessionWrapper}

vocodes/src/v2/profile/Profile_W2lInferenceResultListFc.tsx

@@ -67,9 +67,11 @@ function Profile_W2lInferenceResultsListFc(props: Props) {
     let duration_seconds = result.duration_millis / 1000;
     let title = result.template_title.length < 5 ? `Title: ${result.template_title}` : result.template_title;
 
+    let inferenceLink = `/w2l/result/${result.w2l_result_token}`;
+
     rows.push(
       <tr>
-        <th><Link to="/">{title}</Link></th>
+        <th><Link to={inferenceLink}>{title}</Link></th>
         <td>(custom audio)</td>
         <td>{duration_seconds} s</td>
         <td>{result.created_at} s</td>

vocodes/src/v2/profile_data/ProfileDataFc.tsx

@@ -2,6 +2,7 @@ import React  from 'react';
 import { ProfileData_W2lTemplateListFc } from './ProfileData_W2lTemplateListFc';
 import { SessionWrapper } from '../../session/SessionWrapper';
 import { useParams } from 'react-router-dom';
+import { Profile_W2lInferenceResultsListFc } from '../profile/Profile_W2lInferenceResultListFc';
 
 interface Props {
   sessionWrapper: SessionWrapper,
@@ -17,6 +18,13 @@ function ProfileDataFc(props: Props) {
       <h3 className="title is-3"> Uploaded Templates </h3>
 
       <ProfileData_W2lTemplateListFc username={username} />
+
+      <br />
+      <br />
+
+      {/* NB: This is outside of the directory hierachy. I should not build this twice! */}
+      <h3 className="title is-3"> Lipsync Results </h3>
+      <Profile_W2lInferenceResultsListFc username={username} />
       
     </div>
   )

vocodes/src/v2/w2l_result_view/W2lResultViewFc.tsx

@@ -0,0 +1,83 @@
+import React, { useState, useEffect } from 'react';
+import { ApiConfig } from '../../v1/api/ApiConfig';
+import { useHistory, useParams, Link } from 'react-router-dom';
+import { SessionWrapper } from '../../session/SessionWrapper';
+
+interface W2lInferenceResultResponsePayload {
+  success: boolean,
+  result: W2lInferenceResult,
+}
+
+interface W2lInferenceResult {
+  w2l_result_token: string,
+  maybe_w2l_template_token?: string,
+  maybe_tts_inference_result_token?: string,
+  public_bucket_video_path: string,
+  template_type: string,
+  template_title: string,
+  maybe_creator_user_token?: string,
+  maybe_creator_username?: string,
+  maybe_creator_display_name?: string,
+  file_size_bytes: number,
+  frame_width: number,
+  frame_height: number,
+  duration_millis: number,
+  created_at: string,
+  updated_at: string,
+}
+
+interface Props {
+  sessionWrapper: SessionWrapper,
+}
+
+function W2lResultViewFc(props: Props) {
+  let history = useHistory();
+  let { token } = useParams();
+
+  const [w2lInferenceResult, setW2lInferenceResult] = useState<W2lInferenceResult|undefined>(undefined);
+
+  useEffect(() => {
+    const api = new ApiConfig();
+    const endpointUrl = api.viewW2lInferenceResult(token);
+
+    fetch(endpointUrl, {
+      method: 'GET',
+      headers: {
+        'Accept': 'application/json',
+      },
+      credentials: 'include',
+    })
+    .then(res => res.json())
+    .then(res => {
+      const templatesResponse : W2lInferenceResultResponsePayload = res;
+      if (!templatesResponse.success) {
+        return;
+      }
+
+      setW2lInferenceResult(templatesResponse.result)
+    })
+    .catch(e => {
+      //this.props.onSpeakErrorCallback();
+    });
+  }, []); // NB: Empty array dependency sets to run ONLY on mount
+
+  if (w2lInferenceResult === undefined) {
+    return <div />;
+  }
+
+  let videoLink = `https://storage.googleapis.com/dev-vocodes-public${w2lInferenceResult?.public_bucket_video_path}`; 
+
+  return (
+    <div>
+      <h1 className="title is-1"> Lipsync Result </h1>
+
+      <video width="80%" height="auto" controls={true}>
+        <source src={videoLink} />
+        Your device doesn't support video.
+      </video> 
+
+    </div>
+  )
+}
+
+export { W2lResultViewFc };