not yet working, but new components

vocodes/src/v2/profile/ProfileFc.tsx

@@ -2,6 +2,8 @@ import React, { useEffect, useState }  from 'react';
 import { ApiConfig } from '../../v1/api/ApiConfig';
 import { GravatarFc } from '../common/GravatarFc';
 import { Link } from 'react-router-dom';
+import { ProfileTtsInferenceResultsListFc } from './Profile_TtsInferenceResultListFc';
+import { ProfileTtsModelListFc } from './Profile_TtsModelListFc';
 import { ProfileW2lInferenceResultsListFc } from './Profile_W2lInferenceResultListFc';
 import { ProfileW2lTemplateListFc } from './Profile_W2lTemplateListFc';
 import { SessionWrapper } from '../../session/SessionWrapper';
@@ -97,8 +99,9 @@ function ProfileFc(props: Props) {
       <br />
       <br />
 
-      <h3 className="title is-3"> Uploaded Templates </h3>
-      <ProfileW2lTemplateListFc username={username} />
+      <h3 className="title is-3"> TTS Results </h3>
+      <ProfileTtsInferenceResultsListFc username={username} />
+
 
       <br />
       <br />
@@ -106,6 +109,24 @@ function ProfileFc(props: Props) {
       <h3 className="title is-3"> Lipsync Results </h3>
       <ProfileW2lInferenceResultsListFc username={username} />
 
+      <br />
+      <br />
+
+      <h3 className="title is-3"> Uploaded TTS Models </h3>
+      <ProfileTtsModelListFc username={username} />
+
+      <br />
+      <br />
+
+      <h3 className="title is-3"> Uploaded Templates </h3>
+      <ProfileW2lTemplateListFc username={username} />
+
+      <br />
+      <br />
+      <h3 className="title is-3"> Badges </h3>
+      EARLY USER ! ! 
+      <br />
+      <br />
     </div>
   )
 }

vocodes/src/v2/profile/Profile_TtsInferenceResultListFc.tsx

@@ -0,0 +1,103 @@
+import React, { useState, useEffect } from 'react';
+import { ApiConfig } from '../../v1/api/ApiConfig';
+import { Link } from "react-router-dom";
+
+interface TtsInferenceResultListResponsePayload {
+  success: boolean,
+  results: Array<TtsInferenceResult>,
+}
+
+interface TtsInferenceResult {
+  w2l_result_token: string,
+  maybe_w2l_template_token?: string,
+  maybe_tts_inference_result_token?: 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 {
+  username: string,
+}
+
+function ProfileTtsInferenceResultsListFc(props: Props) {
+  const [w2lResults, setW2lResults] = useState<Array<TtsInferenceResult>>([]);
+
+  useEffect(() => {
+    const api = new ApiConfig();
+    const endpointUrl = api.listW2lInferenceResultsForUser(props.username);
+
+    fetch(endpointUrl, {
+      method: 'GET',
+      headers: {
+        'Accept': 'application/json',
+      },
+      credentials: 'include',
+    })
+    .then(res => res.json())
+    .then(res => {
+      const templatesResponse : TtsInferenceResultListResponsePayload  = res;
+      if (!templatesResponse.success) {
+        return;
+      }
+
+      setW2lResults(templatesResponse.results)
+    })
+    .catch(e => {
+      //this.props.onSpeakErrorCallback();
+    });
+  }, [props.username]); // NB: Empty array dependency sets to run ONLY on mount
+
+  let rows : Array<JSX.Element> = [];
+  
+  w2lResults.forEach(result => {
+    let duration_seconds = result.duration_millis / 1000;
+    let templateTitle = result.template_title.length < 5 ? `Title: ${result.template_title}` : result.template_title;
+
+    let inferenceLink = `/w2l/result/${result.w2l_result_token}`;
+    let templateLink = `/w2l/${result.maybe_w2l_template_token}`;
+
+    rows.push(
+      <tr key={result.w2l_result_token}>
+          <th><Link to={inferenceLink}><span role="img" aria-label="result link">▶️</span> Result</Link></th>
+        <th><Link to={templateLink}>{templateTitle}</Link></th>
+        <td>(custom audio)</td>
+        <td>{duration_seconds} s</td>
+        <td>{result.created_at} s</td>
+      </tr>
+    );
+  });
+
+  return (
+    <div>
+      <table className="table">
+        <thead>
+          <tr>
+            <th><abbr title="Detail">Result Link</abbr></th>
+            <th><abbr title="Detail">Template</abbr></th>
+            <th><abbr title="Detail">Audio Source</abbr></th>
+            <th><abbr title="Detail">Duration</abbr></th>
+            <th><abbr title="Value">Creation Date (UTC)</abbr></th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export { ProfileTtsInferenceResultsListFc };

vocodes/src/v2/profile/Profile_TtsModelListFc.tsx

@@ -0,0 +1,136 @@
+import React, { useState, useEffect } from 'react';
+import { ApiConfig } from '../../v1/api/ApiConfig';
+import { Link } from "react-router-dom";
+import { getRandomInt } from '../../Utils';
+
+interface TtsModelListResponsePayload {
+  success: boolean,
+  templates: Array<TtsModel>,
+}
+
+interface TtsModel {
+  template_token: string,
+  template_type: string,
+  creator_user_token: string,
+  username: string,
+  display_name: string,
+  updatable_slug: string,
+  title: string,
+  frame_width: number,
+  frame_height: number,
+  duration_millis: number,
+  maybe_image_object_name: string,
+  maybe_video_object_name: string,
+  created_at: string,
+  updated_at: string,
+}
+
+interface Props {
+  username: string,
+}
+
+function ProfileTtsModelListFc(props: Props) {
+  const [w2lTemplates, setTtsModels] = useState<Array<TtsModel>>([]);
+
+  useEffect(() => {
+    const api = new ApiConfig();
+    const endpointUrl = api.listW2lTemplatesForUser(props.username);
+
+    fetch(endpointUrl, {
+      method: 'GET',
+      headers: {
+        'Accept': 'application/json',
+      },
+      credentials: 'include',
+    })
+    .then(res => res.json())
+    .then(res => {
+      const templatesResponse : TtsModelListResponsePayload  = res;
+      if (!templatesResponse.success) {
+        return;
+      }
+
+      setTtsModels(templatesResponse.templates)
+    })
+    .catch(e => {
+      //this.props.onSpeakErrorCallback();
+    });
+  }, [props.username]); // NB: Empty array dependency sets to run ONLY on mount
+
+  
+  let templateElements : Array<JSX.Element> = [];
+
+  w2lTemplates.forEach(t => {
+    let object = null;
+    
+    if (t.maybe_image_object_name !== undefined && t.maybe_image_object_name !== null) {
+      object = t.maybe_image_object_name;
+    } else if (t.maybe_video_object_name !== undefined && t.maybe_video_object_name !== null) {
+      object = t.maybe_video_object_name;
+    } else {
+      console.warn(`No image for template ${t.template_token}`);
+      return;
+    }
+
+    let url = `https://storage.googleapis.com/dev-vocodes-public${object}`;
+
+    let link = `/w2l/${t.updatable_slug}`;
+  
+    templateElements.push((
+      <div className="tile is-parent" key={t.template_token}>
+        <article className="tile is-child box">
+          {/*<p className="title">One</p>*/}
+          <Link to={link}><img src={url} alt="" /></Link>
+        </article>
+      </div>
+    ));
+  });
+
+  let allRowsOfTemplateElements : Array<JSX.Element> = [];
+  let rowOfTemplateElements : Array<JSX.Element> = [];
+
+  let nextRowSize = getRandomInt(3, 4);
+
+  // NB: To prevent React spamming about children having unique key props
+  let rowKey = "row0";
+  let rowIndex = 0;
+
+  templateElements.forEach(el => {
+    rowOfTemplateElements.push(el);
+
+    if (rowOfTemplateElements.length === nextRowSize) {
+      allRowsOfTemplateElements.push(
+        <div className="tile is-ancestor" key={rowKey}>
+          {rowOfTemplateElements.map(el => el)}
+        </div>
+      );
+      rowOfTemplateElements = [];
+      rowIndex += 1;
+      rowKey = `row${rowIndex}`;
+
+      // Don't have the same number on each row.
+      let lastRowSize = nextRowSize;
+      while (lastRowSize === nextRowSize) {
+        nextRowSize = getRandomInt(3, 6);
+      }
+    }
+  });
+
+  // Make sure last row is built.
+  if (rowOfTemplateElements.length !== 0) {
+    allRowsOfTemplateElements.push(
+      <div className="tile is-ancestor" key={rowKey}>
+        {rowOfTemplateElements.map(el => el)}
+      </div>
+    );
+    rowOfTemplateElements = [];
+  }
+
+  return (
+    <div>
+      {allRowsOfTemplateElements.map(el => el)}
+    </div>
+  )
+}
+
+export { ProfileTtsModelListFc };