voice previews

.gitignore

@@ -17,3 +17,4 @@ yarn-error.log
 templates/storyteller-stream-green
 
 packages/fakeyou/.env
+packages/storyteller-stream/.env

packages/storyteller-stream/package.json

@@ -24,7 +24,9 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "5.0.0",
     "typescript": "^4.5.5",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "react-wavesurfer.js": "^0.0.5",
+    "wavesurfer.js": "^6.2.0"
   },
   "scripts": {
     "start": "craco start",

packages/storyteller-stream/src/App.scss

@@ -88,6 +88,10 @@ p {
   color: rgba(255, 255, 255, 0.8);
 }
 
+.fw-semibold {
+  font-weight: 500;
+}
+
 .pre-heading {
   font-size: 18px;
   color: #fc6b68;
@@ -291,7 +295,7 @@ span.word:after {
 .btn-secondary:focus,
 .btn-secondary:active {
   background-color: #fff;
-  color: #443a40;
+  color: #212529;
   border: 2.5px solid;
   border-color: #fff;
   transition: 0.2s;
@@ -299,7 +303,7 @@ span.word:after {
 
 .btn-secondary:hover {
   background-color: #ccc;
-  color: #443a40;
+  color: #212529;
   border: 2.5px solid;
   border-color: #ccc;
 }
@@ -418,7 +422,7 @@ span.word:after {
   opacity: 15%;
   width: 115%;
   min-height: 150px;
-  // background-image: url("assets/hero-audio-wave.png");
+  background-image: url("../public/assets/hero-audio-wave.png");
   background-repeat: repeat-x;
   animation: animatedBackground 20s linear infinite;
   mix-blend-mode: screen;
@@ -513,6 +517,13 @@ span.word:after {
   background-size: cover;
 }
 
+.voices-section {
+  width: 100%;
+  text-align: center;
+  margin-top: 50px;
+  margin-bottom: -60px;
+}
+
 .insights-section {
   max-width: 1000px;
 }
@@ -759,6 +770,18 @@ span.word:after {
   color: rgba(255, 255, 255, 0.4);
 }
 
+.voice-preview-text {
+  font-size: 14px;
+}
+
+.btn-voice-preview {
+  padding: 0;
+  margin: 0;
+  height: 30px;
+  width: 30px;
+  min-width: 30px;
+}
+
 @media (min-width: 992px) {
   .panel-title {
     position: absolute;

packages/storyteller-stream/src/pages/index/AudioSampleButton.tsx

@@ -0,0 +1,22 @@
+import React, { useState, useCallback, useEffect } from "react";
+
+interface Props {
+  filename: string;
+  title: string;
+}
+
+function AudioSampleButton(props: Props) {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [position, setPosition] = useState(0);
+
+  const handleTogglePlay = useCallback(() => {
+    setIsPlaying(false);
+  });
+
+  return (
+    <>
+      <button onClick={handleTogglePlay}></button>
+      <Wavesurfer />
+    </>
+  );
+}

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

@@ -1,7 +1,15 @@
-import React from "react";
+import React, { useState } from "react";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
-import { LoggedInIndex } from "./subpages/LoggedInIndex";
-import { LoggedOutIndex } from "./subpages/LoggedOutIndex";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faArrowRight,
+  faLongArrowAltRight,
+  faMicrophone,
+  faPlay,
+  faVolumeUp,
+} from "@fortawesome/free-solid-svg-icons";
+import { faDiscord } from "@fortawesome/free-brands-svg-icons";
+import VoicePreviewPlayer from "./VoicePreviewPlayer";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -23,15 +31,17 @@ function IndexPage(props: Props) {
             <div className="panel-ani mt-4 d-flex gap-3 flex-column flex-md-row">
               <button
                 type="button"
-                className="btn btn-primary btn-hero load-hidden"
+                className="btn btn-primary btn-hero d-flex align-items-center"
               >
-                Sign Up Now<i className="fa-solid fa-arrow-right-long ms-2"></i>
+                Sign Up Now
+                <FontAwesomeIcon icon={faArrowRight} className="ms-2" />
               </button>
               <button
                 type="button"
-                className="btn btn-secondary btn-hero load-hidden"
+                className="btn btn-secondary btn-hero d-flex align-items-center"
               >
-                <i className="fa-brands fa-discord me-2"></i>Join Discord
+                <FontAwesomeIcon icon={faDiscord} className="me-2" />
+                Join Discord
               </button>
             </div>
           </div>
@@ -138,6 +148,36 @@ function IndexPage(props: Props) {
         </div>
       </div>
 
+      <div className="voices-bg" id="voices">
+        <div className="container section d-flex flex-column align-items-center">
+          <div className="d-flex justify-content-center align-items-center gap-4">
+            <img className="rotateimg180" src="assets/title-shape.png" alt="" />
+            <h6 className="pre-heading text-center fw-bold pt-2">
+              Our TTS Voices
+            </h6>
+            <img src="assets/title-shape.png" alt="" />
+          </div>
+          <h1 className="display-5 fw-bold mt-3">
+            <span className="word">Voice Previews</span>
+          </h1>
+          <div className="voices-section">
+            <VoicePreviewPlayer />
+            <div className="mt-5 pt-4">
+              <a
+                className="btn btn-secondary"
+                href="https://fakeyou.com"
+                rel="noreferrer"
+                target="_blank"
+              >
+                <FontAwesomeIcon icon={faVolumeUp} className="me-3" />
+                Listen to all 2000+ usable voices on FakeYou
+                <FontAwesomeIcon icon={faLongArrowAltRight} className="ms-2" />
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div className="insights-bg">
         <div className="container section d-flex flex-column align-items-center">
           <div className="row insights-section align-items-center">
@@ -336,7 +376,12 @@ function IndexPage(props: Props) {
               <h1 className="display-5 fw-bold mb-5">
                 Get started with Storyteller Stream!
               </h1>
-              <button className="btn btn-secondary w-100">Sign Up</button>
+              <div className="d-flex gap-3">
+                <button className="btn btn-secondary w-100">Sign Up</button>
+                <button className="btn btn-secondary w-100">
+                  Join Discord
+                </button>
+              </div>
             </div>
           </div>
         </div>

packages/storyteller-stream/src/pages/index/VoicePreviewPlayer.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faMicrophone, faPlay } from "@fortawesome/free-solid-svg-icons";
+import Wavesurfer from "react-wavesurfer.js";
+import AudioSampleButton from "./AudioSampleButton";
+
+export default class MyComponent extends React.Component<any, any> {
+  constructor(props: any) {
+    super(props);
+
+    this.state = {
+      playing: false,
+      pos: 0,
+    };
+    this.handleTogglePlay = this.handleTogglePlay.bind(this);
+    this.handlePosChange = this.handlePosChange.bind(this);
+  }
+  handleTogglePlay() {
+    this.setState({
+      playing: !this.state.playing,
+    });
+  }
+  handlePosChange(e: any) {
+    this.setState({
+      pos: e.originalArgs[0],
+    });
+  }
+
+  render() {
+    let wavesurferConfigs = [
+      {
+        filename: "/assets/preview/tracer.wav",
+        title: "Tracer (Overwatch)",
+      },
+      {
+        filename: "/assets/preview/son-goku.wav",
+        title: "Son Goku (Sean Schemmel)",
+      },
+      {
+        filename: "/assets/preview/stan-lee.wav",
+        title: "Stan Lee",
+      },
+    ];
+
+    let wavesurfers = wavesurferConfigs.map((config) => {
+      let ws = (
+        <div className="col-12 col-lg-4">
+          <div className="panel p-3">
+            <div className="d-flex gap-3 align-items-center mb-4">
+              <button
+                className="btn btn-primary btn-voice-preview align-items-center justify-content-center"
+                onClick={() => this.handleTogglePlay()}
+              >
+                <FontAwesomeIcon icon={faPlay} />
+              </button>
+              <span className="fw-semibold voice-preview-text">
+                <FontAwesomeIcon icon={faMicrophone} className="me-2" />
+                {config.title}
+              </span>
+            </div>
+            <div className="w-100 h-100 my-2">
+              <Wavesurfer
+                src={config.filename}
+                barWidth={2}
+                barRadius={1}
+                barGap={2}
+                barMinHeight={1}
+                barHeight={2}
+                height={20}
+                progressColor="#fc8481"
+                waveColor="#b09e9e"
+                cursorColor="transparent"
+                playing={this.state.playing}
+                responsive={true}
+              />
+            </div>
+          </div>
+        </div>
+      );
+      return ws;
+    });
+    return <div className="row gx-4 gy-4">{wavesurfers}</div>;
+  }
+}

yarn.lock

@@ -11746,6 +11746,16 @@ react-scripts@5.0.0:
   optionalDependencies:
     fsevents "^2.3.2"
 
+react-wavesurfer.js@^0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/react-wavesurfer.js/-/react-wavesurfer.js-0.0.5.tgz#e2f4e1195f9b01c084ced1aa3e4ddda89de394ab"
+  integrity sha512-KLjNTKS25xfsTWrJd+knXF5wFH8CRu7repXSeDSjh4zhj27QbNL5jtcK8pNl82/kcoTeB0fZvtCcxPreEE8dQw==
+
+react-wavesurfer@^0.8.6:
+  version "0.8.6"
+  resolved "https://registry.yarnpkg.com/react-wavesurfer/-/react-wavesurfer-0.8.6.tgz#da05f3f501e566a63853f9babec45a5251111538"
+  integrity sha512-uHJxtFtb/NqM9DnQNGJNsukmutJ2EOUvLGFkg3GXUY779xYhU+hg1juwstBfky4xtGyZohdUCyQOJfRzzUwBpA==
+
 react@^16.13.1:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
@@ -14019,6 +14029,11 @@ wavesurfer.js@^5.2.0:
   resolved "https://registry.yarnpkg.com/wavesurfer.js/-/wavesurfer.js-5.2.0.tgz#efae107b5b561e9bfe3fffc50e6158136a17643e"
   integrity sha512-SkPlTXfvKy+ZnEA7f7g7jn6iQg5/8mAvWpVV5vRbIS/FF9TB2ak9J7VayQfzfshOLW/CqccTiN6DDR/fZA902g==
 
+wavesurfer.js@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/wavesurfer.js/-/wavesurfer.js-6.2.0.tgz#47b2c2006d8780749fd88ef372a1ec84f886ad5a"
+  integrity sha512-yuOteX+RKgJl4p5V+YNflm79QRNFWpNo0UHtKaGf1G05qMNChfbcJU0MZYL7+OJTHgYszYqN3dgUXjugYd/Iew==
+
 wbuf@^1.1.0, wbuf@^1.7.3:
   version "1.7.3"
   resolved "https://registry.yarnpkg.com/wbuf/-/wbuf-1.7.3.tgz#c1d8d149316d3ea852848895cb6a0bfe887b87df"