From 15fda64ca8cec05cc666c02428e9292aab29f5ac Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Tue, 25 Apr 2023 03:57:25 -0700
Subject: [PATCH] inline results

---
 .../SessionVoiceConversionResultsList.tsx     | 242 ++++++++++++++++++
 .../vc/vc_model_list/VcModelListPage.tsx      |   7 +-
 2 files changed, 248 insertions(+), 1 deletion(-)
 create mode 100644 packages/fakeyou.com/src/v2/view/_common/SessionVoiceConversionResultsList.tsx

diff --git a/packages/fakeyou.com/src/v2/view/_common/SessionVoiceConversionResultsList.tsx b/packages/fakeyou.com/src/v2/view/_common/SessionVoiceConversionResultsList.tsx
new file mode 100644
index 0000000000..5545894b14
--- /dev/null
+++ b/packages/fakeyou.com/src/v2/view/_common/SessionVoiceConversionResultsList.tsx
@@ -0,0 +1,242 @@
+import React, { useEffect, useState } from "react";
+import { t } from "i18next";
+import { Trans } from "react-i18next";
+import { Link } from "react-router-dom";
+import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
+import { JobState } from "@storyteller/components/src/jobs/JobStates";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faClock,
+  faLink,
+  faHeadphonesSimple,
+} from "@fortawesome/free-solid-svg-icons";
+import { motion } from "framer-motion";
+import { container, sessionItem } from "../../../data/animation";
+import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper";
+import { Analytics } from "../../../common/Analytics";
+import { SessionTtsAudioPlayer } from "./SessionTtsAudioPlayer";
+import { WebUrl } from "../../../common/WebUrl";
+import {
+  GetPendingTtsJobCount,
+  GetPendingTtsJobCountIsOk,
+  GetPendingTtsJobCountSuccessResponse,
+} from "@storyteller/components/src/api/tts/GetPendingTtsJobCount";
+import { InferenceJob } from "@storyteller/components/src/jobs/InferenceJob";
+
+interface Props {
+  inferenceJobs: Array<InferenceJob>;
+  sessionSubscriptionsWrapper: SessionSubscriptionsWrapper;
+}
+
+// TODO: This is duplicated in SessionTtsInferenceResultsList !
+// Default to querying every 15 seconds, but make it configurable serverside
+const DEFAULT_QUEUE_REFRESH_INTERVAL_MILLIS = 15000;
+
+function SessionVoiceConversionResultsList(props: Props) {
+  const [pendingTtsJobs, setPendingTtsJobs] =
+    useState<GetPendingTtsJobCountSuccessResponse>({
+      success: true,
+      pending_job_count: 0,
+      cache_time: new Date(0), // NB: Epoch is used for vector clock's initial state
+      refresh_interval_millis: DEFAULT_QUEUE_REFRESH_INTERVAL_MILLIS,
+    });
+
+  useEffect(() => {
+    const fetch = async () => {
+      const response = await GetPendingTtsJobCount();
+      if (GetPendingTtsJobCountIsOk(response)) {
+        if (
+          response.cache_time.getTime() > pendingTtsJobs.cache_time.getTime()
+        ) {
+          setPendingTtsJobs(response);
+        }
+      }
+    };
+    // TODO: We're having an outage and need to lower this.
+    //const interval = setInterval(async () => fetch(), 15000);
+    const refreshInterval = Math.max(DEFAULT_QUEUE_REFRESH_INTERVAL_MILLIS, pendingTtsJobs.refresh_interval_millis);
+    const interval = setInterval(async () => fetch(), refreshInterval);
+    fetch();
+    return () => clearInterval(interval);
+  }, [pendingTtsJobs]);
+
+  let results: Array<JSX.Element> = [];
+
+  // TODO(bt,2023-04-08): Clean this utter garbage duplication up.
+
+  // ============================= GENERIC INFERENCE ============================= 
+
+  props.inferenceJobs.forEach((job) => {
+    if (!job.maybeResultToken) {
+      let cssStyle = "alert alert-secondary mb-0";
+      let stateDescription = "Pending...";
+
+      switch (job.jobState) {
+        case JobState.PENDING:
+        case JobState.UNKNOWN:
+          stateDescription =
+            job.maybeExtraStatusDescription == null
+              ? t("common.SessionTtsInferenceResults.progress.pending")
+              : job.maybeExtraStatusDescription;
+          break;
+        case JobState.STARTED:
+          cssStyle = "alert alert-success mb-0";
+          stateDescription =
+            job.maybeExtraStatusDescription == null
+              ? t("common.SessionTtsInferenceResults.progress.started")
+              : job.maybeExtraStatusDescription;
+          break;
+        case JobState.ATTEMPT_FAILED:
+          cssStyle = "alert alert-danger mb-0";
+          stateDescription = `Failed ${job.attemptCount} attempt(s). Will retry...`;
+          break;
+        case JobState.COMPLETE_FAILURE:
+        case JobState.DEAD:
+          cssStyle = "alert alert-danger mb-0";
+          // TODO(bt,2023-01-23): Translate when I can test it
+          stateDescription = t(
+            "common.SessionTtsInferenceResults.progress.dead"
+          );
+          break;
+        case JobState.COMPLETE_SUCCESS:
+          cssStyle = "message is-success mb-0";
+          // Not sure why we're here instead of other branch!
+          stateDescription = t(
+            "common.SessionTtsInferenceResults.progress.success"
+          );
+          break;
+      }
+
+      results.push(
+        <div key={job.jobToken}>
+          <div>
+            <div>
+              <motion.div className={cssStyle} variants={sessionItem}>
+                {stateDescription}
+              </motion.div>
+            </div>
+          </div>
+        </div>
+      );
+    } else {
+      let audioLink = new BucketConfig().getGcsUrl(
+        job.maybeResultPublicBucketMediaPath
+      );
+      let ttsPermalink = `/tts/result/${job.maybeResultToken}`;
+
+      let wavesurfers = <SessionTtsAudioPlayer filename={audioLink} />;
+
+      results.push(
+        <div key={job.jobToken}>
+          {/*<div className="message-header">
+              <p>{job.title}</p>
+              <button className="delete" aria-label="delete"></button>
+            </div>*/}
+          <div>
+            <motion.div
+              className="panel panel-tts-results p-4 gap-3 d-flex flex-column"
+              variants={sessionItem}
+            >
+              <div>
+                <h5 className="mb-2">{job.maybeModelTitle}</h5>
+                <p>{job.maybeRawInferenceText}</p>
+              </div>
+
+              {/* <audio
+                className="w-100"
+                controls
+                src={audioLink}
+                onClick={() => {
+                  Analytics.ttsClickResultInlinePlay();
+                }}
+              >
+                Your browser does not support the
+                <code>audio</code> element.
+              </audio> */}
+
+              {wavesurfers}
+
+              <div className="mt-2">
+                <Link
+                  to={ttsPermalink}
+                  onClick={() => {
+                    Analytics.ttsClickResultLink();
+                  }}
+                  className="fw-semibold"
+                >
+                  <FontAwesomeIcon icon={faLink} className="me-2" />
+                  {t("common.SessionTtsInferenceResults.result.shareDownload")}
+                </Link>
+              </div>
+            </motion.div>
+          </div>
+        </div>
+      );
+    }
+  });
+
+  let noResultsSection = (
+    <div className="panel panel-inner text-center p-5 rounded-5 h-100">
+      <div className="d-flex flex-column opacity-75 h-100 justify-content-center">
+        <FontAwesomeIcon icon={faHeadphonesSimple} className="fs-3 mb-3" />
+        <h5 className="fw-semibold">
+          {t("common.SessionTtsInferenceResults.noResults.title")}
+        </h5>
+        <p>{t("common.SessionTtsInferenceResults.noResults.subtitle")}</p>
+      </div>
+    </div>
+  );
+
+  if (results.length === 0) {
+    return <>{noResultsSection}</>;
+  }
+
+  let upgradeNotice = <></>;
+
+  // Ask non-premium users to upgrade
+  if (
+    results.length !== 0 &&
+    !props.sessionSubscriptionsWrapper.hasPaidFeatures()
+  ) {
+    upgradeNotice = (
+      <div className="d-flex flex-column gap-3 sticky-top zi-2">
+        <motion.div
+          className="alert alert-warning alert-cta mb-0"
+          variants={sessionItem}
+        >
+          <FontAwesomeIcon icon={faClock} className="me-2" />
+          <Trans i18nKey="common.SessionTtsInferenceResults.premium.ad">
+            Don't want to wait? Step to the back of the line with a{" "}
+            <Link
+              to={WebUrl.pricingPageWithReferer("nowait")}
+              onClick={() => {
+                Analytics.ttsTooSlowUpgradePremium();
+              }}
+              className="alert-link fw-semibold"
+            >
+              FakeYou membership.
+            </Link>
+          </Trans>{" "}
+          (TTS Queued:{" "}
+          <span className="text-red">~{pendingTtsJobs.pending_job_count}</span>)
+        </motion.div>
+      </div>
+    );
+  }
+
+  // Users have requested reverse chronological results
+  results.reverse();
+
+  return (
+    <motion.div initial="hidden" animate="visible" variants={container}>
+      <div>
+        <div className="d-flex flex-column gap-3">
+          {upgradeNotice}
+          <div className="d-flex flex-column gap-3">{results}</div>
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+export { SessionVoiceConversionResultsList };
diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx
index bdb98f8bc4..923be851fd 100644
--- a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx
@@ -25,6 +25,7 @@ import { VcModelListSearch } from "./components/VcModelListSearchComponent";
 import { EnqueueVoiceConversion, EnqueueVoiceConversionIsSuccess, EnqueueVoiceConversionRequest } from "@storyteller/components/src/api/voice_conversion/EnqueueVoiceConversion";
 import { Analytics } from "../../../../../common/Analytics";
 import { FrontendInferenceJobType, InferenceJob } from "@storyteller/components/src/jobs/InferenceJob";
+import { SessionVoiceConversionResultsList } from "../../../_common/SessionVoiceConversionResultsList";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -357,7 +358,11 @@ function VcModelListPage(props: Props) {
                       Session VC Results
                     </h4>
                     <div className="d-flex flex-column gap-3 session-tts-section">
-                      {noResultsSection}
+                      <SessionVoiceConversionResultsList 
+                        inferenceJobs={props.inferenceJobs}
+                        sessionSubscriptionsWrapper={props.sessionSubscriptionsWrapper}
+                      />
+                      {/*{noResultsSection}*/}
                       {/* <motion.div
                         className="panel panel-tts-results p-4 gap-3 d-flex flex-column"
                         variants={sessionItem}