power stream update

packages/power.stream/public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

packages/power.stream/public/index.html

@@ -23,7 +23,7 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#209cee" />
-    <meta name="description" content="Storyteller supercharges your stream" />
+    <meta name="description" content="PowerStream supercharges your stream" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -51,7 +51,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>PowerStream - Stream TTS</title>
+    <title>PowerStream - AI Power for Your Stream</title>
 
     <!-- Twitter, Discord, etc. -->
     <meta property="og:title" content="Storyteller, tech for your stream." />

packages/power.stream/public/safari-pinned-tab.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="1000.000000pt" height="1000.000000pt" viewBox="0 0 1000.000000 1000.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,1000.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M4825 9920 c-106 -16 -133 -21 -224 -46 -177 -48 -352 -134 -507
+-250 -80 -60 -3175 -3150 -3265 -3260 -166 -204 -298 -445 -380 -696 -16 -48
+-31 -98 -33 -110 -11 -50 -15 -70 -21 -88 -6 -20 -9 -34 -20 -100 -4 -25 -9
+-54 -12 -65 -24 -113 -23 -493 2 -630 78 -433 210 -731 462 -1042 64 -79 1386
+-1413 1400 -1413 10 0 2533 2527 2533 2536 -1 5 -385 392 -854 859 l-853 850
+1509 1511 1509 1510 -38 37 c-134 128 -298 232 -485 306 -71 28 -241 74 -323
+86 -61 10 -344 13 -400 5z"/>
+<path d="M6516 6511 c-696 -696 -1266 -1269 -1266 -1273 0 -3 383 -389 850
+-856 467 -468 850 -853 850 -857 0 -4 -669 -676 -1487 -1495 -819 -818 -1496
+-1497 -1506 -1508 -18 -20 -18 -21 28 -63 25 -23 72 -62 103 -86 31 -23 62
+-46 67 -51 6 -4 51 -31 100 -60 141 -81 315 -146 450 -168 17 -3 37 -7 45 -10
+72 -25 412 -24 520 1 14 3 47 10 73 15 180 36 405 141 576 271 50 37 660 640
+1618 1598 1574 1574 1580 1580 1648 1666 22 28 43 52 46 55 10 8 121 178 154
+235 59 102 168 347 179 403 1 9 6 24 9 32 15 39 40 145 63 266 37 194 39 514
+4 714 -5 30 -12 70 -15 89 -3 19 -8 37 -10 41 -2 3 -6 19 -9 34 -19 105 -98
+322 -163 450 -20 39 -43 85 -51 101 -20 39 -95 155 -146 225 -76 104 -167 198
+-814 846 l-650 651 -1266 -1266z"/>
+</g>
+</svg>

packages/power.stream/public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+  "name": "PowerStream",
+  "short_name": "PowerStream",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#209cee",
+  "background_color": "#2f2f4a",
+  "display": "standalone"
+}

packages/power.stream/src/App.scss

@@ -656,6 +656,15 @@ span.word:after {
   box-shadow: 0 0 0 0.1rem #fc6b68;
 }
 
+footer {
+  background-color: transparent;
+
+  li {
+    text-decoration: none;
+    list-style: none;
+  }
+}
+
 .footer-link {
   color: #fc6b68;
   font-weight: 400;

packages/power.stream/src/App.tsx

@@ -3,7 +3,6 @@ import "./App.scss";
 
 import React from "react";
 import { BrowserRouter, Route, Switch } from "react-router-dom";
-import { GitSha } from "@storyteller/components/src/elements/GitSha";
 import {
   ListTtsModels,
   TtsModelListItem,
@@ -28,6 +27,7 @@ import { TtsConfigsDeleteRulePage } from "./pages/tts_configs/TtsConfigsDeleteRu
 import { TtsConfigsEditRulePage } from "./pages/tts_configs/TtsConfigsEditRulePage";
 import { TtsConfigsReorderPage } from "./pages/tts_configs/TtsConfigsReorderPage";
 import { ObsConfigsPage } from "./pages/obs_configs/ObsConfigsPage";
+import { FooterNav } from "./layout/FooterNav";
 
 i18n
   .use(initReactI18next) // passes i18n down to react-i18next
@@ -186,11 +186,7 @@ class App extends React.Component<Props, State> {
               </Route>
             </Switch>
 
-            <div className="container">
-              <hr />
-            </div>
-
-            <footer className="d-flex flex-column container py-5 gap-4">
+            {/* <footer className="d-flex flex-column container py-5 gap-4">
               <div className="d-flex text-center align-items-center justify-content-center gap-2 flex-wrap">
                 <a className="footer-link" href="#features">
                   Features
@@ -233,9 +229,10 @@ class App extends React.Component<Props, State> {
 
               <div className="d-flex flex-column text-center gap-4 mt-4">
                 © 2022 PowerStream.
-                <GitSha />
               </div>
-            </footer>
+            </footer> */}
+
+            <FooterNav />
           </div>
         </div>
       </BrowserRouter>

packages/power.stream/src/layout/FooterNav.tsx

@@ -0,0 +1,136 @@
+import { GitSha } from "@storyteller/components/src/elements/GitSha";
+import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
+import { Link } from "react-router-dom";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faTwitch,
+  faDiscord,
+  faTwitter,
+  faTiktok,
+} from "@fortawesome/free-brands-svg-icons";
+import { ThirdPartyLinks } from "@storyteller/components/src/constants/ThirdPartyLinks";
+
+interface Props {}
+
+function FooterNav(props: Props) {
+  return (
+    <div>
+      <footer id="footer">
+        <hr />
+        <div className="container py-5">
+          <div className="row gx-5 gy-5">
+            <div className="col-12 col-lg-3 d-flex flex-column gap-4 align-items-center align-items-lg-start">
+              <Link to="/">
+                <img
+                  src="/assets/powerstream-logo.png"
+                  alt="PowerStream Logo"
+                  height="32"
+                />
+              </Link>
+              <div className="d-flex gap-3">
+                <a
+                  className="social-icon"
+                  href={ThirdPartyLinks.FAKEYOU_DISCORD}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  title="Join our Discord Server"
+                >
+                  <FontAwesomeIcon icon={faDiscord} className="me-2" />
+                </a>
+                <a
+                  className="social-icon"
+                  href={ThirdPartyLinks.FAKEYOU_TWITTER_WITH_FOLLOW_INTENT}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  title="Follow us on Twitter"
+                >
+                  <FontAwesomeIcon icon={faTwitter} className="me-2" />
+                </a>
+                <a
+                  className="social-icon"
+                  href={ThirdPartyLinks.FAKEYOU_TIKTOK}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  title="Support us by becoming a patreon"
+                >
+                  <FontAwesomeIcon icon={faTiktok} className="me-2" />
+                </a>
+                <a
+                  className="social-icon"
+                  href={ThirdPartyLinks.FAKEYOU_TWITCH}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  title="Subscribe to our Twitch Channel"
+                >
+                  <FontAwesomeIcon icon={faTwitch} className="me-2" />
+                </a>
+              </div>
+            </div>
+            {/* <div className="py-2 col-12 col-lg-3 d-flex flex-column gap-2 gap-lg-3 align-items-center align-items-lg-start">
+              <p className="fw-bold">AI Tools</p>
+              <li>
+                <Link to="/">Text to Speech</Link>
+              </li>
+
+              <li>
+                <Link to="/video">Video Lipsync</Link>
+              </li>
+            </div> */}
+            <div className="py-2 col-12 col-lg-3 d-flex flex-column gap-2 gap-lg-3 align-items-center align-items-lg-start">
+              <p className="fw-bold">Links</p>
+              <li>
+                <a href="https://fakeyou.com">FakeYou</a>
+              </li>
+              <li>
+                <a href="https://storyteller.ai">Storyteller AI</a>
+              </li>
+            </div>
+            <div className="py-2 col-12 col-lg-3 d-flex flex-column gap-2 gap-lg-3 align-items-center align-items-lg-start">
+              <p className="fw-bold">Info</p>
+              <li>
+                <a className="footer-link" href="#features">
+                  Features
+                </a>
+              </li>
+
+              <li>
+                <a className="footer-link" href="#voices">
+                  Voice Previews
+                </a>
+              </li>
+
+              <li>
+                <a className="footer-link" href="#insights">
+                  Insights
+                </a>
+              </li>
+
+              <li>
+                <a className="footer-link" href="#community">
+                  Community
+                </a>
+              </li>
+            </div>
+          </div>
+
+          <div className="pt-4">
+            <hr />
+          </div>
+
+          <div className="d-flex flex-column flex-lg-row pt-2 align-items-center gap-4">
+            <span className="flex-grow-1">
+              © 2023 PowerStream by{" "}
+              <a href="https://storyteller.ai">Storyteller.ai</a>
+            </span>
+
+            <div className="d-flex flex-column flex-lg-row align-items-center ">
+              <GitSha prefix="FE: " />
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}
+
+export { FooterNav };

packages/power.stream/src/pages/index/IndexPage.tsx

@@ -28,7 +28,7 @@ function IndexPage(props: Props) {
         <div className="hero-section d-flex flex-column align-items-center">
           <div className="hero-inner container-fluid d-flex flex-column align-items-center justify-content-center">
             <h1 className="display-3 fw-bold mb-3 parent">
-              Power for <br className="d-sm-none" />
+              AI Power for <br className="d-sm-none" />
               <span className="word">Your Stream</span>
             </h1>
             <p className="hero-text lead mb-4 px-3 px-lg-5">
@@ -110,8 +110,10 @@ function IndexPage(props: Props) {
                   />
                   <h4 className="features-title mb-3">Channel Points</h4>
                   <p className="mb-4">
-                    Morbi dapibus commodo porta. Sed faucibus tristique orci in
-                    tristique. Praesent quam nunc, fermentum eu feugiat sit.
+                    Your viewers can use their hard-earned channel points to
+                    donate and have their messages read aloud. This adds a fun
+                    new way for your community to engage with your streams and
+                    show their support.
                   </p>
                   <a className="fw-bold" href="https://fakeyou.com">
                     Sign up now
@@ -129,8 +131,9 @@ function IndexPage(props: Props) {
                   />
                   <h4 className="features-title mb-3">Over 2000 voices!</h4>
                   <p className="mb-4">
-                    Morbi dapibus commodo porta. Sed faucibus tristique orci in
-                    tristique. Praesent quam nunc, fermentum eu feugiat sit.
+                    We're proud to offer over 2000 text-to-speech voices for you
+                    to choose from. Whether you're looking for something funny,
+                    serious, or somewhere in between, we've got you covered.
                   </p>
                   <a className="fw-bold" href="https://fakeyou.com">
                     See all the voices on FakeYou
@@ -148,8 +151,11 @@ function IndexPage(props: Props) {
                   />
                   <h4 className="features-title mb-3">Bits</h4>
                   <p className="mb-4">
-                    Morbi dapibus commodo porta. Sed faucibus tristique orci in
-                    tristique. Praesent quam nunc, fermentum eu feugiat sit.
+                    Your viewers can use Twitch Bits to donate and have their
+                    messages read aloud. This makes it easy for anyone to get
+                    involved and support your stream.
+                    <br />
+                    <br />
                   </p>
                   <a className="fw-bold" href="https://fakeyou.com">
                     Sign up now
@@ -206,27 +212,27 @@ function IndexPage(props: Props) {
                   src="assets/title-shape.png"
                   alt=""
                 />
-                <h6 className="pre-heading fw-bold pt-2">Statistics</h6>
+                <h6 className="pre-heading fw-bold pt-2">It's Obvious</h6>
                 <img src="assets/title-shape.png" alt="" />
               </div>
               <h1 className="display-5 fw-bold mb-4 mt-3">
-                <span className="word">Our Insights</span>
+                <span className="word">Better Streams Grow</span>
               </h1>
               <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-                eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                We empower streamers to make incredible content. Use the power
+                of AI to do the hard work so you can focus on what matters.
               </p>
             </div>
             <div className="col-md-6">
               <div className="panel insights-panel h-100 panel-ani">
-                <h2 className="fw-bold mb-1">+2000</h2>
-                <p>TTS Voices in the library (and growing)</p>
+                <h2 className="fw-bold mb-1">2000+</h2>
+                <p>AI models and features to enrich your stream.</p>
                 <hr />
-                <h2 className="fw-bold mb-1">+10K</h2>
-                <p>Daily generated TTS or something</p>
+                <h2 className="fw-bold mb-1">40%</h2>
+                <p>Revenue boost by engaging your audience.</p>
                 <hr />
-                <h2 className="fw-bold mb-1">+1.1M</h2>
-                <p>Some kind of statistic here</p>
+                <h2 className="fw-bold mb-1">1+</h2>
+                <p>human centuries of content we’ve helped enrich.</p>
                 <img
                   className="red-glow insights-circle-1"
                   src="assets/circle-1.png"
@@ -274,7 +280,7 @@ function IndexPage(props: Props) {
                     aria-expanded="false"
                     aria-controls="collapseOne"
                   >
-                    What is Storyteller TTS?
+                    PowerStream TTS?
                   </button>
                 </h2>
                 <div
@@ -284,12 +290,9 @@ function IndexPage(props: Props) {
                   data-bs-parent="#accordionExample"
                 >
                   <div className="accordion-body">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-                    do eiusmod tempor incididunt ut labore et dolore magna
-                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-                    ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                    Duis aute irure dolor in reprehenderit in voluptate velit
-                    esse cillum dolore eu fugiat nulla pariatur.
+                    PowerStream TTS lets your audience inject AI TTS sound into
+                    your stream. You can engage with them directly and earn
+                    money from every use.
                   </div>
                 </div>
               </div>
@@ -303,7 +306,7 @@ function IndexPage(props: Props) {
                     aria-expanded="false"
                     aria-controls="collapseTwo"
                   >
-                    How do I use Storyteller TTS?
+                    PowerStream Autopilot?
                   </button>
                 </h2>
                 <div
@@ -313,12 +316,10 @@ function IndexPage(props: Props) {
                   data-bs-parent="#accordionExample"
                 >
                   <div className="accordion-body">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-                    do eiusmod tempor incididunt ut labore et dolore magna
-                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-                    ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                    Duis aute irure dolor in reprehenderit in voluptate velit
-                    esse cillum dolore eu fugiat nulla pariatur.
+                    Coming soon. Use our advanced AI body double to run your
+                    stream while you’re away. It can fill in for bathroom
+                    breaks, or run 24/7, directly engaging your audience with
+                    custom-tailored content and your own unique personality.
                   </div>
                 </div>
               </div>
@@ -332,7 +333,7 @@ function IndexPage(props: Props) {
                     aria-expanded="false"
                     aria-controls="collapseThree"
                   >
-                    What is this question?
+                    PowerStream Transformer?
                   </button>
                 </h2>
                 <div
@@ -342,12 +343,8 @@ function IndexPage(props: Props) {
                   data-bs-parent="#accordionExample"
                 >
                   <div className="accordion-body">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-                    do eiusmod tempor incididunt ut labore et dolore magna
-                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-                    ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                    Duis aute irure dolor in reprehenderit in voluptate velit
-                    esse cillum dolore eu fugiat nulla pariatur.
+                    Coming soon. Your community can donate to change your face
+                    and voice to that of popular characters and celebrities.
                   </div>
                 </div>
               </div>

packages/power.stream/src/pages/index/wsConfig.ts

@@ -15,36 +15,36 @@ export let wavesurferConfigs = [
     filename: "/assets/preview/monokuma.wav",
     title: "Monokuma",
   },
-  {
-    filename: "/assets/preview/monokuma.wav",
-    title: "Monokuma",
-  },
-  {
-    filename: "/assets/preview/monokuma.wav",
-    title: "Monokuma",
-  },
-  {
-    filename: "/assets/preview/monokuma.wav",
-    title: "Monokuma",
-  },
-  {
-    filename: "/assets/preview/monokuma.wav",
-    title: "Monokuma",
-  },
-  {
-    filename: "/assets/preview/monokuma.wav",
-    title: "Monokuma",
-  },
-  {
-    filename: "/assets/preview/monokuma.wav",
-    title: "Monokuma",
-  },
-  {
-    filename: "/assets/preview/monokuma.wav",
-    title: "Monokuma",
-  },
-  {
-    filename: "/assets/preview/monokuma.wav",
-    title: "Monokuma",
-  },
+  // {
+  //   filename: "/assets/preview/monokuma.wav",
+  //   title: "Monokuma",
+  // },
+  // {
+  //   filename: "/assets/preview/monokuma.wav",
+  //   title: "Monokuma",
+  // },
+  // {
+  //   filename: "/assets/preview/monokuma.wav",
+  //   title: "Monokuma",
+  // },
+  // {
+  //   filename: "/assets/preview/monokuma.wav",
+  //   title: "Monokuma",
+  // },
+  // {
+  //   filename: "/assets/preview/monokuma.wav",
+  //   title: "Monokuma",
+  // },
+  // {
+  //   filename: "/assets/preview/monokuma.wav",
+  //   title: "Monokuma",
+  // },
+  // {
+  //   filename: "/assets/preview/monokuma.wav",
+  //   title: "Monokuma",
+  // },
+  // {
+  //   filename: "/assets/preview/monokuma.wav",
+  //   title: "Monokuma",
+  // },
 ];