From 19167cd00b311977fcd7d77cf2fd91d5f701d2ce Mon Sep 17 00:00:00 2001
From: Michael Huynh <michaelhuynh@Michaels-MacBook-Pro-2.local>
Date: Thu, 11 Jan 2024 13:02:45 -0800
Subject: [PATCH] Add Iframe

---
 packages/fakeyou.com/package.json             |   1 +
 .../src/components/layout/SideNav/SideNav.tsx |  29 +++-
 .../fakeyou.com/src/v2/view/PageContainer.tsx |  10 ++
 .../StorytellerStudioListPage.tsx             |  59 ++++++++
 .../vc_model_list/components/SsPageHero.tsx   | 131 ++++++++++++++++++
 5 files changed, 223 insertions(+), 7 deletions(-)
 create mode 100644 packages/fakeyou.com/src/v2/view/pages/storyteller_studio/vc_model_list/StorytellerStudioListPage.tsx
 create mode 100644 packages/fakeyou.com/src/v2/view/pages/storyteller_studio/vc_model_list/components/SsPageHero.tsx

diff --git a/packages/fakeyou.com/package.json b/packages/fakeyou.com/package.json
index 4b797df8cf..127cd3158b 100644
--- a/packages/fakeyou.com/package.json
+++ b/packages/fakeyou.com/package.json
@@ -60,6 +60,7 @@
     "react-dom": "^16.13.1",
     "react-drag-drop-files": "^2.3.9",
     "react-i18next": "^11.15.4",
+    "react-iframe": "^1.8.5",
     "react-infinite-scroll-component": "^6.1.0",
     "react-paginate": "^8.2.0",
     "react-range": "^1.8.14",
diff --git a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx
index 4c96394d52..4589e71cea 100644
--- a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx
+++ b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx
@@ -10,6 +10,7 @@ import {
   faFaceViewfinder,
   faCloudUpload,
   faWandMagicSparkles,
+  faCameraMovie,
 } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Button from "components/common/Button/Button";
@@ -39,9 +40,9 @@ export default function SideNav(props: SideNavProps) {
   const { t } = useLocalize("SideNav");
   let history = useHistory();
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
-  const fakeYouFrontendEnv =  FakeYouFrontendEnvironment.getInstance();
+  const fakeYouFrontendEnv = FakeYouFrontendEnvironment.getInstance();
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const isDevelopmentEnv = fakeYouFrontendEnv.isDevelopment()
+  const isDevelopmentEnv = fakeYouFrontendEnv.isDevelopment();
   const handleNavLinkClick = () => {
     const wrapper = document.getElementById("wrapper");
 
@@ -228,7 +229,9 @@ export default function SideNav(props: SideNavProps) {
   // NB(bt,2023-11-28): These are representative of tacotron2 jobs handled by two queueing systems:
   // The legacy queue (tts-inference-job) and the modern queue (inference-job). We'll add both totals
   // while we migrate off of the legacy system, then eventually kill the legacy statistic.
-  const ttsQueuedCount = queueStats.legacy_tts.pending_job_count + queueStats.inference.by_queue.pending_tacotron2_jobs;
+  const ttsQueuedCount =
+    queueStats.legacy_tts.pending_job_count +
+    queueStats.inference.by_queue.pending_tacotron2_jobs;
 
   return (
     <div
@@ -307,6 +310,21 @@ export default function SideNav(props: SideNavProps) {
           </NavLink>
         </li>
 
+        <li>
+          <NavLink
+            to="/storyteller-studio"
+            activeClassName="active-link"
+            onClick={handleNavLinkClick}
+          >
+            <FontAwesomeIcon
+              icon={faCameraMovie}
+              className="sidebar-heading-icon"
+            />
+            Storyteller Studio
+            {/* {t("videoStorytellerStudio")} */}
+          </NavLink>
+        </li>
+
         <hr className="mb-4 mt-3" />
         <li className="sidebar-heading">{t("communityTitle")}</li>
         <li>
@@ -365,10 +383,7 @@ export default function SideNav(props: SideNavProps) {
         <li className="sidebar-heading">{t("queueTitle")}</li>
         <li className="ps-4 fs-7 mb-5">
           <div>
-            {t("queueTts")}:{" "}
-            <span className="text-red">
-              {ttsQueuedCount}
-            </span>
+            {t("queueTts")}: <span className="text-red">{ttsQueuedCount}</span>
           </div>
           <div>
             {t("queueRvc")}:{" "}
diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx
index a78d123ef2..f74ca90bc9 100644
--- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx
+++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx
@@ -84,6 +84,7 @@ import { GenerateSpeechPage } from "./pages/generate_speech/GenerateSpeechPage";
 import VcModelViewPage from "./pages/vc/vc_model_view/VcModelViewPage";
 import VcModelEditPage from "./pages/vc/vc_model_edit/VcModelEditPage";
 import VcModelDeletePage from "./pages/vc/vc_model_delete/VcModelDeletePage";
+import { StorytellerStudioListPage } from "./pages/storyteller_studio/vc_model_list/StorytellerStudioListPage";
 import SideNav from "components/layout/SideNav/SideNav";
 import MobileMenu from "components/layout/MobileMenu/MobileMenu";
 import { TopNav } from "./nav/TopNav";
@@ -656,6 +657,15 @@ class PageContainer extends React.Component<
               />
             </Route>
 
+            <Route path="/storyteller-studio">
+              <StorytellerStudioListPage
+                sessionWrapper={this.props.sessionWrapper}
+                sessionSubscriptionsWrapper={
+                  this.props.sessionSubscriptionsWrapper
+                }
+              />
+            </Route>
+
             <Route path="/commissions">
               <CommunityCommissionsPage />
             </Route>
diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_studio/vc_model_list/StorytellerStudioListPage.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_studio/vc_model_list/StorytellerStudioListPage.tsx
new file mode 100644
index 0000000000..a64beafa5d
--- /dev/null
+++ b/packages/fakeyou.com/src/v2/view/pages/storyteller_studio/vc_model_list/StorytellerStudioListPage.tsx
@@ -0,0 +1,59 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
+import Iframe from "react-iframe";
+
+import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper";
+import { SsPageHero } from "./components/SsPageHero";
+
+interface Props {
+  sessionWrapper: SessionWrapper;
+  sessionSubscriptionsWrapper: SessionSubscriptionsWrapper;
+}
+
+function StorytellerStudioListPage(props: Props) {
+  return (
+    <div>
+      <SsPageHero
+        sessionWrapper={props.sessionWrapper}
+        sessionSubscriptionsWrapper={props.sessionSubscriptionsWrapper}
+      />
+
+      <div className="container">
+        <Iframe
+          url="https://engine.fakeyou.com?mode=studio"
+          width="100%"
+          height="900px"
+          id=""
+          className=""
+          display="block"
+          position="relative"
+        />
+        {/* <div className="alert alert-info">
+          <FontAwesomeIcon icon={faMoneyBill} className="me-2" />
+          <span className="fw-medium">
+            Get rewarded from our $15k prize pool for creating Voice to Voice
+            models!
+          </span>
+          <Link to="/commissions" className="fw-semibold ms-2">
+            See details <FontAwesomeIcon icon={faArrowRight} className="ms-1" />
+          </Link>
+        </div> */}
+      </div>
+    </div>
+  );
+}
+
+const LoadingIcon: React.FC = () => {
+  return (
+    <>
+      <span
+        className="spinner-border spinner-border-sm ms-3"
+        role="status"
+        aria-hidden="true"
+      ></span>
+      <span className="visually-hidden">Loading...</span>
+    </>
+  );
+};
+
+export { StorytellerStudioListPage };
diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_studio/vc_model_list/components/SsPageHero.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_studio/vc_model_list/components/SsPageHero.tsx
new file mode 100644
index 0000000000..110b672a42
--- /dev/null
+++ b/packages/fakeyou.com/src/v2/view/pages/storyteller_studio/vc_model_list/components/SsPageHero.tsx
@@ -0,0 +1,131 @@
+import React, { useMemo } from "react";
+import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
+import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper";
+import { Link } from "react-router-dom";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faStar,
+  faUser,
+  faArrowRight,
+  faMicrophoneStand,
+} from "@fortawesome/pro-solid-svg-icons";
+import { Analytics } from "../../../../../../common/Analytics";
+import { WebUrl } from "../../../../../../common/WebUrl";
+import { PageHeaderWithImage } from "../../../../_common/PageHeaderWithImage";
+import { useLocalize } from "hooks";
+
+interface Props {
+  sessionWrapper: SessionWrapper;
+  sessionSubscriptionsWrapper: SessionSubscriptionsWrapper;
+}
+
+export function SsPageHero(props: Props) {
+  const { t } = useLocalize("VcModelListPage");
+  const randomImage = useMemo(() => {
+    const images = ["mascot/may4th.webp"];
+
+    return images[Math.floor(Math.random() * images.length)];
+  }, []);
+
+  let signUpButton = <></>;
+  let viewPricingButton = <></>;
+  let upgradeButton = <></>;
+  let myProfileButton = <></>;
+
+  if (!props.sessionWrapper.isLoggedIn()) {
+    signUpButton = (
+      <>
+        <Link
+          to="/signup"
+          onClick={() => {
+            Analytics.ttsClickHeroSignup();
+          }}
+        >
+          <button type="button" className="btn btn-primary w-100">
+            {t("heroButtonSignUp")}
+            <FontAwesomeIcon icon={faArrowRight} className="ms-2" />
+          </button>
+        </Link>
+      </>
+    );
+    viewPricingButton = (
+      <>
+        <Link
+          to={WebUrl.pricingPageWithReferer("tts_hero_new")}
+          onClick={() => {
+            Analytics.ttsClickHeroViewPricing();
+          }}
+        >
+          <button type="button" className="btn btn-secondary w-100">
+            <FontAwesomeIcon icon={faStar} className="me-2" />
+            {t("heroButtonPricing")}
+          </button>
+        </Link>
+      </>
+    );
+  }
+
+  if (props.sessionWrapper.isLoggedIn()) {
+    let displayName = props.sessionWrapper.getDisplayName() as string; // NB: If logged in, should be string
+    let url = WebUrl.userProfilePage(displayName);
+    myProfileButton = (
+      <>
+        <Link
+          to={url}
+          onClick={() => {
+            Analytics.ttsClickHeroViewProfile();
+          }}
+        >
+          <button type="button" className="btn btn-secondary w-100">
+            <FontAwesomeIcon icon={faUser} className="me-2" />
+            {t("heroButtonProfile")}
+          </button>
+        </Link>
+      </>
+    );
+    if (!props.sessionSubscriptionsWrapper.hasPaidFeatures()) {
+      upgradeButton = (
+        <>
+          <Link
+            to={WebUrl.pricingPageWithReferer("tts_hero_user")}
+            onClick={() => {
+              Analytics.ttsClickHeroUpgradePlan();
+            }}
+          >
+            <button type="button" className="btn btn-primary w-100">
+              <FontAwesomeIcon icon={faStar} className="me-2" />
+              {t("heroButtonUpgradePlan")}
+            </button>
+          </Link>
+        </>
+      );
+    }
+  }
+
+  const titleIcon = (
+    <FontAwesomeIcon icon={faMicrophoneStand} className="me-3 me-lg-4" />
+  );
+  const title = <>Storyteller Studio</>;
+  const subText = <>Anyone can make films.</>;
+  const actionButtons = (
+    <>
+      {upgradeButton}
+      {signUpButton}
+      {viewPricingButton}
+      {myProfileButton}
+    </>
+  );
+
+  return (
+    <>
+      <PageHeaderWithImage
+        headerImage={randomImage}
+        titleIcon={titleIcon}
+        title={title}
+        subText={subText}
+        showButtons={true}
+        actionButtons={actionButtons}
+      />
+    </>
+  );
+}