add gravatars, template creator

vocodes/src/v2/NewVocodesContainer.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { FirehoseComponent } from './firehose/FirehoseComponent';
 import { LoginFc } from './login/LoginFc';
 import { NewTopNavFc } from './NewTopNavFc';
-import { ProfileComponent } from './profile/ProfileComponent';
 import { ProfileDataFc } from './profile_data/ProfileDataFc';
 import { SessionWrapper } from '../session/SessionWrapper';
 import { SignupComponent } from './signup/SignupComponent';

vocodes/src/v2/w2l_result_view/W2lResultViewFc.tsx

@@ -1,7 +1,8 @@
 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';
+import { useHistory, useParams, Link } from 'react-router-dom';
+import { GravatarFc } from '../common/GravatarFc';
 
 interface W2lInferenceResultResponsePayload {
   success: boolean,
@@ -15,9 +16,17 @@ interface W2lInferenceResult {
   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,
+  maybe_creator_gravatar_hash?: string,
+
+  maybe_template_creator_user_token?: string,
+  maybe_template_creator_username?: string,
+  maybe_template_creator_display_name?: string,
+  maybe_template_creator_gravatar_hash?: string,
+
   file_size_bytes: number,
   frame_width: number,
   frame_height: number,
@@ -68,7 +77,6 @@ function W2lResultViewFc(props: Props) {
   let videoLink = `https://storage.googleapis.com/dev-vocodes-public${w2lInferenceResult?.public_bucket_video_path}`; 
   let templateLink = `/w2l/${w2lInferenceResult.maybe_w2l_template_token}`;
 
-  let creatorDetails = <span>Anonymous user</span>;
   let durationSeconds = w2lInferenceResult?.duration_millis / 1000;
 
   let templateName = w2lInferenceResult.template_title;
@@ -77,6 +85,38 @@ function W2lResultViewFc(props: Props) {
     templateName = `Template: ${w2lInferenceResult.template_title}`;
   }
 
+  let creatorDetails = <span>Anonymous user</span>;
+  if (w2lInferenceResult.maybe_creator_user_token !== undefined) {
+    let creatorLink = `/profile/${w2lInferenceResult.maybe_creator_username}`;
+    creatorDetails = (
+      <span>
+        <GravatarFc 
+          size={15}
+          username={w2lInferenceResult.maybe_creator_display_name} 
+          email_hash={w2lInferenceResult.maybe_creator_gravatar_hash} 
+          />
+        &nbsp;
+        <Link to={creatorLink}>{w2lInferenceResult.maybe_creator_display_name}</Link>
+      </span>
+    );
+  }
+
+  let templateCreatorDetails = <span>Anonymous user</span>;
+  if (w2lInferenceResult.maybe_template_creator_user_token !== undefined) {
+    let templateCreatorLink = `/profile/${w2lInferenceResult.maybe_template_creator_username}`;
+    templateCreatorDetails = (
+      <span>
+        <GravatarFc 
+          size={15}
+          username={w2lInferenceResult.maybe_template_creator_display_name} 
+          email_hash={w2lInferenceResult.maybe_creator_gravatar_hash} 
+          />
+        &nbsp;
+        <Link to={templateCreatorLink}>{w2lInferenceResult.maybe_template_creator_display_name}</Link>
+      </span>
+    );
+  }
+
   return (
     <div>
       <h1 className="title is-1"> Lipsync Result </h1>
@@ -108,6 +148,12 @@ function W2lResultViewFc(props: Props) {
               </Link>
             </td>
           </tr>
+          <tr>
+            <th>Template creator</th>
+            <td>
+              {templateCreatorDetails}
+            </td>
+          </tr>
           <tr>
             <th>Dimensions</th>
             <td>{w2lInferenceResult?.frame_width} x {w2lInferenceResult?.frame_height}</td>