diff --git a/vocodes/src/v1/api/ApiConfig.ts b/vocodes/src/v1/api/ApiConfig.ts index 2c77241046..d8b1364219 100644 --- a/vocodes/src/v1/api/ApiConfig.ts +++ b/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`; } diff --git a/vocodes/src/v2/NewVocodesContainer.tsx b/vocodes/src/v2/NewVocodesContainer.tsx index 37d7f02ab2..a461f5ec1a 100644 --- a/vocodes/src/v2/NewVocodesContainer.tsx +++ b/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 { /> + + + + - + - {title} + {title} (custom audio) {duration_seconds} s {result.created_at} s diff --git a/vocodes/src/v2/profile_data/ProfileDataFc.tsx b/vocodes/src/v2/profile_data/ProfileDataFc.tsx index 1bf0cfe9fe..f90287acec 100644 --- a/vocodes/src/v2/profile_data/ProfileDataFc.tsx +++ b/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) {

Uploaded Templates

+ +
+
+ + {/* NB: This is outside of the directory hierachy. I should not build this twice! */} +

Lipsync Results

+ ) diff --git a/vocodes/src/v2/w2l_result_view/W2lResultViewFc.tsx b/vocodes/src/v2/w2l_result_view/W2lResultViewFc.tsx new file mode 100644 index 0000000000..802330cb32 --- /dev/null +++ b/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(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
; + } + + let videoLink = `https://storage.googleapis.com/dev-vocodes-public${w2lInferenceResult?.public_bucket_video_path}`; + + return ( +
+

Lipsync Result

+ + + +
+ ) +} + +export { W2lResultViewFc };