Merge pull request #101 from storytold/bflat-storyteller-tts-results

tts results styling fix

packages/storyteller-home/src/App.scss

@@ -249,6 +249,10 @@ p {
   }
 }
 
+.alert {
+  font-size: 16px;
+}
+
 .hero-title-container {
   position: relative;
 }
@@ -530,7 +534,7 @@ p {
   height: 100%;
   padding: 28px;
   border-radius: 12px;
-  border: 3px solid;
+  border: 2px solid;
   border-color: rgba(#4d4d66, 0.6);
   display: flex;
   align-items: center;
@@ -538,9 +542,9 @@ p {
   transition: 0.3s;
   font-size: 18px;
 
-  &:hover {
-    border-color: rgba(#4d4d66, 1);
-  }
+  // &:hover {
+  //   border-color: rgba(#4d4d66, 1);
+  // }
 }
 
 .shape-5-container {
@@ -938,7 +942,6 @@ $font: montserrat, sans-serif;
 
 .about-card {
   min-height: 185px;
-  border-width: 3px;
 
   &:hover > .about-icon {
     transform: translate(0, -4px);
@@ -955,7 +958,7 @@ $font: montserrat, sans-serif;
 
 .img-border {
   border-radius: 8px;
-  border: 3px solid;
+  border: 2px solid;
   border-color: rgba(#4d4d66, 0.6);
 }
 
@@ -1079,6 +1082,12 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active {
     right: 20%;
   }
 
+  .shape-5,
+  .shape-6,
+  .shape-7 {
+    display: none;
+  }
+
   .section-pb-extra {
     padding-top: 4rem;
   }
@@ -1153,8 +1162,12 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active {
     padding-top: 5rem;
   }
 
-  .tts-demo {
-    padding: 18px;
+  // .tts-demo {
+  //   padding: 18px;
+  // }
+
+  .alert {
+    font-size: 14px;
   }
 
   .btn {

packages/storyteller-home/src/pages/index/IndexPage.tsx

@@ -513,16 +513,23 @@ function IndexPage() {
                 </div>
               </div>
             </div>
-            <div className="mt-5 pt-4 text-center">
+            <div className="mt-5 pt-4 pb-5 text-center">
               <h2 className="text-center mt-5 fw-bold">
                 <FontAwesomeIcon icon={faMicrophone} className="me-3" />
                 Voice Changing Demo
               </h2>
-              <p className="mb-5">
+              <p className="mb-4">
                 This is still an early beta. Voice quality will change and
                 improve substantially over time.
               </p>
-              <div className="row gx-4 gy-4 text-center">
+              <p className="text-center my-4 pt-5">
+                <strong className="fw-semibold fs-5">Brandon</strong>
+                <FontAwesomeIcon icon={faArrowRight} className="mx-2" />
+                <strong className="fw-semibold fs-5">Donald Trump</strong>
+                <br />
+                Real time voice to voice conversion.
+              </p>
+              <div className="row gx-4 gy-4 text-center pb-5">
                 <div className="col-12 col-lg-6">
                   <div className="card bg-light-solid justify-content-start">
                     <AudioSample sampleUrl="/audio-samples/voice-conversion-1.mp3" />
@@ -549,13 +556,6 @@ function IndexPage() {
                     </p>
                   </div>
                 </div>
-                <p className="text-center my-5 pb-5">
-                  <strong className="fw-semibold fs-5">Brandon</strong>
-                  <FontAwesomeIcon icon={faArrowRight} className="mx-2" />
-                  <strong className="fw-semibold fs-5">Donald Trump</strong>
-                  <br />
-                  Real time voice to voice conversion.
-                </p>
               </div>
             </div>
             <div className="text-center position-relative">
@@ -627,9 +627,13 @@ function IndexPage() {
                 We have over 2,000 voices (with more added every day), but we've
                 selected a few to show off.
               </p>
-              <TtsComponent />
             </div>
           </div>
+
+          <div className="d-flex flex-column align-items-center container tts-demo pb-5">
+            <TtsComponent />
+          </div>
+
           <div className="container text-center position-relative">
             <div className="position-relative zi-2">
               <h2 className="text-center mt-5 fw-bold">Want to hear more?</h2>

packages/storyteller-home/src/pages/index/TtsComponent.tsx

@@ -154,8 +154,8 @@ function TtsComponent(props: Props) {
   });
 
   return (
-    <div className="d-flex justify-content-center pb-5">
-      <div className="card bg-dark-solid tts-demo w-100 mb-5">
+    <div className="w-100">
+      <div className="card bg-dark-solid w-100 mb-5 p-3 p-lg-4">
         <form onSubmit={handleFormSubmit} className="w-100">
           <div className="d-flex flex-column gap-3">
             <div className="field">
@@ -193,9 +193,8 @@ function TtsComponent(props: Props) {
             </div>
           </div>
         </form>
-
-        <TtsResultsList ttsInferenceJobs={jobs} />
       </div>
+      <TtsResultsList ttsInferenceJobs={jobs} />
     </div>
   );
 }

packages/storyteller-home/src/pages/index/TtsResultsList.tsx

@@ -1,18 +1,16 @@
-import React from 'react';
-import { BucketConfig } from '@storyteller/components/src/api/BucketConfig';
-import { JobState } from '@storyteller/components/src/jobs/JobStates';
-import { TtsInferenceJob } from '@storyteller/components/src/jobs/TtsInferenceJobs';
+import React from "react";
+import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
+import { JobState } from "@storyteller/components/src/jobs/JobStates";
+import { TtsInferenceJob } from "@storyteller/components/src/jobs/TtsInferenceJobs";
 
 interface Props {
-  ttsInferenceJobs: Array<TtsInferenceJob>,
+  ttsInferenceJobs: Array<TtsInferenceJob>;
 }
 
 function TtsResultsList(props: Props) {
+  let results: Array<JSX.Element> = [];
 
-  let results : Array<JSX.Element> = [];
-
-  props.ttsInferenceJobs.forEach(job => {
-
+  props.ttsInferenceJobs.forEach((job) => {
     if (!job.maybeResultToken) {
       let cssStyle = "message";
       let stateDescription = "Pending...";
@@ -20,11 +18,17 @@ function TtsResultsList(props: Props) {
       switch (job.jobState) {
         case JobState.PENDING:
         case JobState.UNKNOWN:
-          stateDescription = job.maybeExtraStatusDescription == null ? "Pending..." : job.maybeExtraStatusDescription;
+          stateDescription =
+            job.maybeExtraStatusDescription == null
+              ? "Pending..."
+              : job.maybeExtraStatusDescription;
           break;
         case JobState.STARTED:
           cssStyle = "message is-primary";
-          stateDescription = job.maybeExtraStatusDescription == null ? "Started..." : job.maybeExtraStatusDescription;
+          stateDescription =
+            job.maybeExtraStatusDescription == null
+              ? "Started..."
+              : job.maybeExtraStatusDescription;
           break;
         case JobState.ATTEMPT_FAILED:
           cssStyle = "message is-warning";
@@ -33,7 +37,8 @@ function TtsResultsList(props: Props) {
         case JobState.COMPLETE_FAILURE:
         case JobState.DEAD:
           cssStyle = "message is-danger";
-          stateDescription = "Failed Permanently. Please tell us in Discord so we can fix. :(";
+          stateDescription =
+            "Failed Permanently. Please tell us in Discord so we can fix. :(";
           break;
         case JobState.COMPLETE_SUCCESS:
           cssStyle = "message is-success";
@@ -43,45 +48,42 @@ function TtsResultsList(props: Props) {
 
       results.push(
         <div key={job.jobToken}>
-          <article className={cssStyle}>
+          <div className={cssStyle}>
             <div className="message-body">
-              <p>
-                {stateDescription}
-              </p>
+              <p>{stateDescription}</p>
             </div>
-          </article>
+          </div>
           &nbsp;
         </div>
       );
     } else {
-      let audioLink = new BucketConfig().getGcsUrl(job.maybePublicBucketWavAudioPath);
-      let ttsPermalink = `https://fakeyou.com/tts/result/${job.maybeResultToken}`
+      let audioLink = new BucketConfig().getGcsUrl(
+        job.maybePublicBucketWavAudioPath
+      );
+      let ttsPermalink = `https://fakeyou.com/tts/result/${job.maybeResultToken}`;
       results.push(
         <div key={job.jobToken}>
-          <article className="message is-dark">
-            {/*<div className="message-header">
+          {/*<div className="message-header">
               <p>{job.title}</p>
               <button className="delete" aria-label="delete"></button>
             </div>*/}
-            <div className="message-body">
-              <strong>{job.title}</strong>
-              <p>{job.rawInferenceText}</p>
-
-            <audio
-              controls
-              src={audioLink}>
-                Your browser does not support the
-                <code>audio</code> element.
+          <div className="card bg-dark-solid text-start align-items-start p-3 p-lg-4">
+            <strong className="fw-bold mb-1">{job.title}</strong>
+            <p className="fs-6">{job.rawInferenceText}</p>
+            <audio className="w-100" controls src={audioLink}>
+              Your browser does not support the
+              <code>audio</code> element.
             </audio>
             &nbsp;
-
             <a
+              rel="noreferrer"
+              target="_blank"
               href={ttsPermalink}
-              className="button is-normal is-outlined is-dark"
-              >Permalink &amp; download</a>
-              </div>
-          </article>
-          &nbsp;
+              className="btn btn-primary w-100"
+            >
+              Permalink &amp; Download
+            </a>
+          </div>
         </div>
       );
     }
@@ -92,25 +94,26 @@ function TtsResultsList(props: Props) {
   }
 
   let title = <span />;
-  if  (results.length !== 0) {
-      title = (
-        <>
-          <br /> {/* Vertical separation from above elements. */}
-          <h4 className="title is-4">TTS Results</h4>
-          <p>
-            Please note that we're currently recieving massive amounts of traffic.
-            Creating an account on FakeYou.com places you into a higher priority queue.
-            </p>
-          <br />
-        </>
-      );
+  if (results.length !== 0) {
+    title = (
+      <>
+        <div className="mt-5 mb-2 d-flex flex-column gap-3">
+          <h4 className="fw-bold">TTS Results</h4>
+          <div className="alert alert-warning fw-normal">
+            Please note that we're currently recieving massive amounts of
+            traffic. Creating an account on FakeYou.com places you into a higher
+            priority queue.
+          </div>
+        </div>
+      </>
+    );
   }
 
   // Users have requested reverse chronological results
   results.reverse();
 
   return (
-    <div>
+    <div className="mb-5">
       {title}
       {/*<div className="notification is-info is-light">
         <strong>Working on speeding this up</strong> 
@@ -118,7 +121,7 @@ function TtsResultsList(props: Props) {
           Sorry this is slow. I'm scaling the cluster and fixing the caching strategy.
         </p>
       </div>*/}
-      {results}
+      <div className="d-flex flex-column gap-3">{results}</div>
     </div>
   );
 }