back merging main

packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss

@@ -16,12 +16,17 @@
     padding-top: 7.25px !important;
     padding-bottom: 7.25px !important;
     border-radius: 0.5rem 0 0 0.5rem !important;
+    background-color: $input-dark !important;
     position: relative;
     z-index: 3;
 
     &::placeholder {
       color: rgba($white, 0.3) !important;
     }
+
+    &.landing-search {
+      background-color: rgba($input-dark, 0.5) !important;
+    }
   }
 }
 

packages/fakeyou.com/src/components/common/VideoFakeyou/VideoFakeyou.tsx

@@ -43,7 +43,7 @@ const VideoFakeyou = memo(forwardRef<Ref, VideoFakeyouProps>(({
   onResponse,
   ...rest
 }: VideoFakeyouProps, ref) => {
-  console.log(`Video Player rerender: ${mediaToken}`);
+  //console.log(`Video Player rerender: ${mediaToken}`);
 
   const [mediaFile, setMediaFile] = useState<MediaFileType|null>(null);
   useEffect(()=>{

packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx

@@ -74,7 +74,7 @@ export default memo(function VideoQuickTrim({
 
 
   const videoRefCallback = useCallback(node => {
-    console.log("videoRefCallback");
+    //console.log("videoRefCallback");
     if (node !== null) { 
       // DOM node referenced by ref has changed and exists
       videoRef.current = node;
@@ -233,7 +233,7 @@ export default memo(function VideoQuickTrim({
             trimDuration={trimDuration}
             duration={maxDuration}
             onChange={(val: QuickTrimData)=>{
-              console.log(val);
+              //console.log(val);
               setTrimState((curr)=>({
                 ...curr,
                 trimStart: val.trimStartSeconds,

packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx

@@ -53,9 +53,8 @@ export default function SideNav({
   const isMenuOpen = wrapper?.classList.contains("toggled");
   const isLoggedIn = sessionWrapper.isLoggedIn();
   const isOnLandingPage = window.location.pathname === "/";
-  const isOnLoginOrSignUpPage = window.location.pathname.includes(
-    "/login" || "/signup"
-  );
+  const isOnLoginPage = window.location.pathname.includes("/login");
+  const isOnSignUpPage = window.location.pathname.includes("/signup");
   const isOnStudioPage = window.location.pathname.includes("/studio");
 
   let history = useHistory();
@@ -107,7 +106,7 @@ export default function SideNav({
   }, []);
 
   const shouldNotShowSidebar =
-    (!isLoggedIn && (isOnLandingPage || isOnLoginOrSignUpPage)) ||
+    (!isLoggedIn && (isOnLandingPage || isOnLoginPage || isOnSignUpPage)) ||
     isOnStudioPage;
   const shouldShowSidebar = windowWidth >= 992 && !shouldNotShowSidebar;
   const sidebarClassName = `sidebar ${

packages/fakeyou.com/src/components/layout/TopNav/TopNav.scss

@@ -1,5 +1,9 @@
 @import "scss/colours.scss";
 
+.topbar-bg-transparent {
+  background-color: transparent;
+}
+
 .topbar-bg-dark {
   background-color: $bg !important;
   border-bottom: 1px solid transparent !important;

packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx

@@ -45,16 +45,16 @@ export default function TopNav({
   const [menuButtonIcon, setMenuButtonIcon] = useState(faBars);
   // const { t } = useLocalize("TopNav");
   const isOnLandingPage = window.location.pathname === "/";
-  const isOnLoginOrSignUpPage = window.location.pathname.includes(
-    "/login" || "/signup"
-  );
+  const isOnLoginPage = window.location.pathname.includes("/login");
+  const isOnSignUpPage = window.location.pathname.includes("/signup");
   const isOnStudioPage = window.location.pathname.includes("/studio");
 
   const { open } = useModal();
   const openModal = () => open({ component: InferenceJobsModal });
   const [isScrolled, setIsScrolled] = useState(false);
   const loggedIn = sessionWrapper.isLoggedIn();
-  const showNavItem = !loggedIn && (isOnLandingPage || isOnLoginOrSignUpPage);
+  const showNavItem =
+    !loggedIn && (isOnLandingPage || isOnLoginPage || isOnSignUpPage);
 
   const handleMenuButtonClick = () => {
     if (window.innerWidth < 1200) {
@@ -95,8 +95,15 @@ export default function TopNav({
   };
 
   useEffect(() => {
+    const topBarWrapper = document.getElementById("topbar-wrapper");
+
     const handleMenuToggle = (event: any) => {
       setMenuButtonIcon(event.detail.isOpen ? faXmark : faBars);
+      if (event.detail.isOpen) {
+        topBarWrapper?.classList.remove("topbar-wrapper-transparent");
+      } else {
+        topBarWrapper?.classList.add("topbar-wrapper-transparent");
+      }
     };
 
     window.addEventListener("menuToggle", handleMenuToggle);
@@ -185,8 +192,12 @@ export default function TopNav({
     <div
       id="topbar-wrapper"
       className={`position-fixed ${
-        !loggedIn && isOnLandingPage && !isScrolled ? "topbar-bg-dark" : ""
-      }`}
+        domain.title !== "FakeYou"
+          ? "topbar-bg-transparent"
+          : !loggedIn && isOnLandingPage && !isScrolled
+            ? "topbar-bg-dark"
+            : ""
+      }`.trim()}
     >
       <div className="topbar-nav">
         <div className="topbar-nav-left">
@@ -230,11 +241,18 @@ export default function TopNav({
         <div className="topbar-nav-center">
           {/* Search Bar */}
           <div className="d-none d-lg-block">
-            {(!isOnLandingPage && !isOnLoginOrSignUpPage && !isOnStudioPage) ||
-            (loggedIn && !isOnLoginOrSignUpPage && !isOnStudioPage) ||
+            {(!isOnLandingPage &&
+              !isOnLoginPage &&
+              !isOnSignUpPage &&
+              !isOnStudioPage) ||
+            (loggedIn &&
+              !isOnLoginPage &&
+              !isOnSignUpPage &&
+              !isOnStudioPage) ||
             (isOnLandingPage &&
               isScrolled &&
-              !isOnLoginOrSignUpPage &&
+              !isOnLoginPage &&
+              !isOnSignUpPage &&
               !isOnStudioPage) ? (
               <SearchBar
                 onFocus={onFocusHandler}

packages/fakeyou.com/src/scss/nav.scss

@@ -61,6 +61,10 @@ $topbar-height: 66px;
   padding-left: 260px;
   padding-top: $topbar-height;
   transition: all 0.2s ease;
+
+  &.no-page-padding-top {
+    padding-top: 0;
+  }
 }
 
 /* Sidebar Styles */
@@ -171,7 +175,11 @@ $topbar-height: 66px;
   background: $panel;
   border-bottom: 1px solid rgba(255, 255, 255, 0.04);
   z-index: 1000;
-  transition: all 0.1s ease;
+  transition: 0.15s;
+
+  &.topbar-wrapper-transparent {
+    background: none;
+  }
 }
 
 .topbar-nav {

packages/fakeyou.com/src/utils/domainConfig.ts

@@ -2,7 +2,7 @@ type DomainConfig = Record<string, any>;
 
 const domainConfigs: Record<string, DomainConfig> = {
   "storyteller.ai": {
-    logo: "/fakeyou/Storyteller-Logo-5.png",
+    logo: "/fakeyou/Storyteller-Logo-1.png",
     title: "Storyteller AI",
     link: "https://storyteller.ai",
   },

packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx

@@ -10,6 +10,7 @@ import Dashboard from "./Dashboard";
 import FakeYouLandingBody from "./fakeyou/FakeYouLandingBody";
 import { useDomainConfig } from "context/DomainConfigContext";
 import StorytellerLanding from "./storyteller/StorytellerLanding";
+import LandingVideoReel from "./components/LandingVideoReel";
 import {
   FrontendInferenceJobType,
   InferenceJob,
@@ -39,6 +40,7 @@ function LandingPage(props: Props) {
 
   return (
     <>
+      {domain.title === "Storyteller AI" && !isLoggedIn && <LandingVideoReel />}
       <Container type="panel">
         {domain.title === "FakeYou" ? (
           <>
@@ -63,7 +65,15 @@ function LandingPage(props: Props) {
           <>
             {/* STORYTELLER,AI */}
             {!isLoggedIn ? (
-              <StorytellerLanding />
+              <StorytellerLanding
+                sessionWrapper={props.sessionWrapper}
+                sessionSubscriptionsWrapper={props.sessionSubscriptionsWrapper}
+                inferenceJobs={props.inferenceJobs}
+                ttsInferenceJobs={props.ttsInferenceJobs}
+                enqueueInferenceJob={props.enqueueInferenceJob}
+                inferenceJobsByCategory={props.inferenceJobsByCategory}
+                enqueueTtsJob={props.enqueueTtsJob}
+              />
             ) : (
               <Dashboard sessionWrapper={props.sessionWrapper} />
             )}

packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel.tsx

@@ -0,0 +1,69 @@
+import { Button } from "components/common";
+import React, { useEffect } from "react";
+
+interface LandingVideoReelProps {}
+
+export default function LandingVideoReel(props: LandingVideoReelProps) {
+  const isOnLandingPage = window.location.pathname === "/";
+
+  useEffect(() => {
+    const contentWrapper = document.getElementById("page-content-wrapper");
+    const topBarWrapper = document.getElementById("topbar-wrapper");
+    const searchBar = document.querySelector(".search-field .form-control");
+
+    const handleScroll = () => {
+      if (window.scrollY > 100) {
+        topBarWrapper?.classList.remove("topbar-wrapper-transparent");
+        searchBar?.classList.remove("landing-search");
+      } else {
+        topBarWrapper?.classList.add("topbar-wrapper-transparent");
+        searchBar?.classList.add("landing-search");
+      }
+    };
+
+    if (isOnLandingPage) {
+      contentWrapper?.classList.add("no-page-padding-top");
+      topBarWrapper?.classList.add("topbar-wrapper-transparent");
+      searchBar?.classList.add("landing-search");
+      window.addEventListener("scroll", handleScroll);
+    } else {
+      contentWrapper?.classList.remove("no-page-padding-top");
+      topBarWrapper?.classList.remove("topbar-wrapper-transparent");
+      searchBar?.classList.remove("landing-search");
+      window.removeEventListener("scroll", handleScroll);
+    }
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      topBarWrapper?.classList.remove("topbar-wrapper-transparent");
+      searchBar?.classList.remove("landing-search");
+      contentWrapper?.classList.remove("no-page-padding-top");
+    };
+  }, [isOnLandingPage]);
+
+  return (
+    <div className="vh-100 d-flex align-items-center justify-content-center position-relative">
+      <video
+        autoPlay
+        muted
+        loop
+        className="position-absolute w-100 h-100"
+        style={{ objectFit: "cover" }}
+      >
+        <source src="/videos/landing-reel.mp4" type="video/mp4" />
+      </video>
+      <div
+        className="position-absolute w-100 h-100"
+        style={{ backgroundColor: "rgba(20, 20, 27, 0.6)", zIndex: 0 }}
+      />
+      <div className="text-center text-white d-flex flex-column align-items-center zi-2">
+        <h1 className="display-2 fw-bolder">Visuals and Audio with AI</h1>
+        <h5 className="fw-normal mb-3 mt-2 w-75 lh-base opacity-75">
+          We are combining generative AI and User Generated Content to radically
+          democratize both audio and video production.
+        </h5>
+        <Button label="Sign Up Now" to="/signup" className="mt-5" />
+      </div>
+    </div>
+  );
+}

packages/fakeyou.com/src/v2/view/pages/landing/storyteller/StorytellerLanding.tsx

@@ -1,24 +1,50 @@
-import { faDiscord, faTwitter } from "@fortawesome/free-brands-svg-icons";
-import {
-  faArrowRight,
-  faCompass,
-  faMessageDots,
-  faWaveformLines,
-} from "@fortawesome/pro-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Button, Container, Input, Panel, Select } from "components/common";
-import { useLocalize } from "hooks";
 import React from "react";
-import { Link } from "react-router-dom";
+import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
+import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper";
+import {
+  FrontendInferenceJobType,
+  InferenceJob,
+} from "@storyteller/components/src/jobs/InferenceJob";
+import { TtsInferenceJob } from "@storyteller/components/src/jobs/TtsInferenceJobs";
 
-interface StorytellerLandingProps {}
+interface StorytellerLandingProps {
+  sessionWrapper: SessionWrapper;
+  sessionSubscriptionsWrapper: SessionSubscriptionsWrapper;
+  inferenceJobs: Array<InferenceJob>;
+  ttsInferenceJobs: Array<TtsInferenceJob>;
+  enqueueInferenceJob: (
+    jobToken: string,
+    frontendInferenceJobType: FrontendInferenceJobType
+  ) => void;
+  inferenceJobsByCategory: Map<FrontendInferenceJobType, Array<InferenceJob>>;
+  enqueueTtsJob: (jobToken: string) => void;
+}
 
-export default function StorytellerLanding(props: StorytellerLandingProps) {
-  const { t } = useLocalize("LandingPage");
+export default function StorytellerLanding({
+  sessionWrapper,
+  sessionSubscriptionsWrapper,
+  inferenceJobs,
+  ttsInferenceJobs,
+  enqueueInferenceJob,
+  inferenceJobsByCategory,
+  enqueueTtsJob,
+}: StorytellerLandingProps) {
+  // const { t } = useLocalize("LandingPage");
 
   return (
     <>
-      <Container type="panel" className="py-5">
+      {/* <Container type="panel" className="py-5">
+      <FakeYouLandingHeader
+        sessionWrapper={sessionWrapper}
+        sessionSubscriptionsWrapper={sessionSubscriptionsWrapper}
+        inferenceJobs={inferenceJobs}
+        ttsInferenceJobs={ttsInferenceJobs}
+        enqueueInferenceJob={enqueueInferenceJob}
+        inferenceJobsByCategory={inferenceJobsByCategory}
+        enqueueTtsJob={enqueueTtsJob}
+      />
+
+      {/* <Container type="panel" className="py-5">
         <Panel clear={true} className="py-lg-5">
           <div className="row g-5 g-lg-5 flex-row-reverse">
             <div className="col-12 col-md-6">
@@ -65,9 +91,9 @@ export default function StorytellerLanding(props: StorytellerLandingProps) {
             </div>
           </div>
         </Panel>
-      </Container>
+      </Container> */}
 
-      <div className="panel rounded-0 py-5 my-5">
+      {/* <div className="panel rounded-0 py-5 my-5">
         <Container type="panel" className="py-lg-5">
           <Panel clear={true}>
             <div className="d-flex flex-column align-items-center rounded-0 mt-lg-4 pt-lg-4">
@@ -184,9 +210,9 @@ export default function StorytellerLanding(props: StorytellerLandingProps) {
             </div>
           </Panel>
         </Container>
-      </div>
+      </div> */}
 
-      <Container type="panel" className="pt-5 my-5">
+      {/* <Container type="panel" className="pt-5 my-5">
         <Panel padding={true}>
           <div className="d-flex flex-column align-items-center py-5">
             <h2 className="fw-bold mb-2">{t("communityTitle")}</h2>
@@ -218,7 +244,7 @@ export default function StorytellerLanding(props: StorytellerLandingProps) {
             className="dots-left-bottom me-3"
           />
         </Panel>
-      </Container>
+      </Container> */}
     </>
   );
 }

packages/fakeyou.com/src/v2/view/pages/video_styletransfer/commons.tsx

@@ -11,9 +11,11 @@ export const inferenceFailures = (fail = "") => {
 
 export function TableOfKeyValues(
 {
+  title,
   keyValues,
   height
 }:{
+  title: string;
   keyValues:{
     [key:string]:number|string|boolean|undefined
   };
@@ -24,11 +26,11 @@ export function TableOfKeyValues(
     height: height || "100%",
     overflowY: "scroll",
     overflowX: "clip",
-    border: "1px solid white",
-    borderTopLeftRadius: "1rem",
-    borderBottomLeftRadius: "1rem",
+    // border: "1px solid white",
+    // borderTopLeftRadius: "1rem",
+    // borderBottomLeftRadius: "1rem",
   }}><tbody>
-    <tr><th>Debug of a certain Key-Values set</th></tr>
+    <tr><th>{title}</th></tr>
     {
       Object.entries(keyValues).map(([key, val], index: number)=>{
         return <tr key={index}><td>{`${key}`}</td><td>{`${val}`}</td></tr>

packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/compAdminPanel.tsx

@@ -0,0 +1,110 @@
+import React, {
+  useState
+} from "react";
+import { useHistory } from "react-router-dom";
+import {
+  Accordion,
+  Button,
+  TempTextArea as TextArea,
+} from "components/common";
+
+import { mapRequest, VSTType } from './helpers';
+import { TableOfKeyValues } from "../../commons";
+import { Action } from "../../reducer";
+import EnqueueVideoStyleTransfer from "@storyteller/components/src/api/video_styleTransfer";
+
+export const CompAdminPanel = ({
+  parentPath,
+  vstValues,
+  dispatchPageState
+}:{
+  parentPath: string;
+  vstValues : VSTType;
+  dispatchPageState: (action: Action) => void;
+})=>{
+  const history = useHistory();
+  const exampleJSON = JSON.stringify(mapRequest(vstValues), null, 4);
+  const [jsonRequest, setJsonRequest] = useState<string>(exampleJSON);
+  const handleSendRequest = ()=>{
+    EnqueueVideoStyleTransfer(JSON.parse(jsonRequest)).then(res => {
+      if (res.success && res.inference_job_token) {
+        dispatchPageState({
+          type: "enqueueJobSuccess",
+          payload: {
+            inferenceJobToken: res.inference_job_token,
+          },
+        });
+      } else {
+        alert("Error, Check Console Log");
+        console.log(res);
+      }
+    });
+    dispatchPageState({ type: "enqueueJob" });
+    history.push(`${parentPath}/jobs`);
+  }
+
+  return (
+    <Accordion className="mt-4">
+        <Accordion.Item title={"Admin Panel"}>
+          <div className="row p-3 g-3">
+            <div className="col-8">
+              <TextArea
+                {...{
+                  label:"JSON Input",
+                  rows: 10,
+                  placeholder: "Paste JSON here and send request directly",
+                  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) =>
+                    setJsonRequest(e.target.value),
+                  value: jsonRequest,
+                  required: false,
+                }}
+              />
+            </div>
+            <div className="col-4 pt-5">
+              <Button
+                label="Console Log JSON Reqest"
+                variant="secondary"
+                onClick={()=>{
+                  console.log(JSON.parse(jsonRequest));
+                }}
+              />
+              <br/>
+              <Button
+                label="Send JSON"
+                onClick={handleSendRequest}
+              />
+            </div>
+          </div>
+          <div className="row p-3 g-3">
+            <div className="col-8">
+              <TableOfKeyValues
+                title="All values in the VST app state"
+                keyValues={vstValues}
+              />
+            </div>
+            <div className="col-4">
+              <p className="me-3"><b>Log Debug Values: </b></p>
+              <br/>
+              <Button
+                label="Console Log State"
+                variant="secondary"
+                onClick={()=>{
+                  console.log(vstValues);
+                }}
+              />
+              <br/>
+              <Button
+                label="Console Log Request"
+                variant="secondary"
+                onClick={()=>{
+                  const request = mapRequest(vstValues);
+                  console.log(request);
+                }}
+              />
+
+            </div>
+          </div>
+        </Accordion.Item>
+    </Accordion>
+  );
+}

packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/compStyleModal.tsx

@@ -53,7 +53,7 @@ export default function CompStyleModal({
             setOnSelectTimeStamp(new Date());
           }
         };
-        console.log(data);
+        //console.log(data);
         return (
           <div key={key}
             className="col-12 col-sm-6 col-xl-4 grid-item"

packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/pageVSTApp.tsx

@@ -14,6 +14,7 @@ import { mapRequest, VSTType } from "./helpers";
 
 import CompStyleModal from "./compStyleModal";
 import CompAdvanceOptions from "./compAdvanceOptions";
+import { CompAdminPanel } from "./compAdminPanel";
 
 export default function PageVSTApp({
   debug: debugProps,
@@ -137,25 +138,11 @@ export default function PageVSTApp({
           />
         </div>
         {debug && 
-          <div className="col-12 d-flex justify-content-end align-items-center">
-            <p className="me-3"><b>Debug Values: </b></p>
-            <Button
-              className="me-3"
-              label="Console Log State"
-              onClick={()=>{
-                console.log(vstValues);
-              }}
-              variant="secondary"
-            />
-            <Button
-              label="Console Log Request"
-              onClick={()=>{
-                const request = mapRequest(vstValues);
-                console.log(request);
-              }}
-              variant="secondary"
-            />
-          </div>
+          <CompAdminPanel
+            parentPath={parentPath}
+            dispatchPageState={dispatchPageState}
+            vstValues={vstValues}
+          />
         }
       </div>
     </Panel>