diff --git a/packages/fakeyou.com/public/fakeyou/Storyteller-Logo-1.png b/packages/fakeyou.com/public/fakeyou/Storyteller-Logo-1.png new file mode 100644 index 000000000..1ab61d283 Binary files /dev/null and b/packages/fakeyou.com/public/fakeyou/Storyteller-Logo-1.png differ diff --git a/packages/fakeyou.com/public/videos/landing-reel.mp4 b/packages/fakeyou.com/public/videos/landing-reel.mp4 new file mode 100644 index 000000000..16c9b414b Binary files /dev/null and b/packages/fakeyou.com/public/videos/landing-reel.mp4 differ diff --git a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss index 75fd08fe6..8f76bad0f 100644 --- a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss +++ b/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; + } } } diff --git a/packages/fakeyou.com/src/components/common/VideoFakeyou/VideoFakeyou.tsx b/packages/fakeyou.com/src/components/common/VideoFakeyou/VideoFakeyou.tsx index 86eceef8a..0ff353666 100644 --- a/packages/fakeyou.com/src/components/common/VideoFakeyou/VideoFakeyou.tsx +++ b/packages/fakeyou.com/src/components/common/VideoFakeyou/VideoFakeyou.tsx @@ -43,7 +43,7 @@ const VideoFakeyou = memo(forwardRef(({ onResponse, ...rest }: VideoFakeyouProps, ref) => { - console.log(`Video Player rerender: ${mediaToken}`); + //console.log(`Video Player rerender: ${mediaToken}`); const [mediaFile, setMediaFile] = useState(null); useEffect(()=>{ diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx index cc1125759..e8ffcbea9 100644 --- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx +++ b/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, diff --git a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx index 817dc103d..a96377a08 100644 --- a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx +++ b/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 ${ diff --git a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.scss b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.scss index 3ff22966d..c9033d7f8 100644 --- a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.scss +++ b/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; diff --git a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx index d7980aa8b..1396cb160 100644 --- a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx +++ b/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({
@@ -230,11 +241,18 @@ export default function TopNav({
{/* Search Bar */}
- {(!isOnLandingPage && !isOnLoginOrSignUpPage && !isOnStudioPage) || - (loggedIn && !isOnLoginOrSignUpPage && !isOnStudioPage) || + {(!isOnLandingPage && + !isOnLoginPage && + !isOnSignUpPage && + !isOnStudioPage) || + (loggedIn && + !isOnLoginPage && + !isOnSignUpPage && + !isOnStudioPage) || (isOnLandingPage && isScrolled && - !isOnLoginOrSignUpPage && + !isOnLoginPage && + !isOnSignUpPage && !isOnStudioPage) ? ( ; const domainConfigs: Record = { "storyteller.ai": { - logo: "/fakeyou/Storyteller-Logo-5.png", + logo: "/fakeyou/Storyteller-Logo-1.png", title: "Storyteller AI", link: "https://storyteller.ai", }, diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx index a67512dda..76acbfd3f 100644 --- a/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx +++ b/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 && } {domain.title === "FakeYou" ? ( <> @@ -63,7 +65,15 @@ function LandingPage(props: Props) { <> {/* STORYTELLER,AI */} {!isLoggedIn ? ( - + ) : ( )} diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel.tsx new file mode 100644 index 000000000..378bb8a58 --- /dev/null +++ b/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 ( +
+ +
+
+

Visuals and Audio with AI

+
+ We are combining generative AI and User Generated Content to radically + democratize both audio and video production. +
+
+
+ ); +} diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/StorytellerLanding.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/StorytellerLanding.tsx index 0814566a1..f388851c2 100644 --- a/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/StorytellerLanding.tsx +++ b/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; + ttsInferenceJobs: Array; + enqueueInferenceJob: ( + jobToken: string, + frontendInferenceJobType: FrontendInferenceJobType + ) => void; + inferenceJobsByCategory: Map>; + 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 ( <> - + {/* + + + {/*
@@ -65,9 +91,9 @@ export default function StorytellerLanding(props: StorytellerLandingProps) {
- + */} -
+ {/*
@@ -184,9 +210,9 @@ export default function StorytellerLanding(props: StorytellerLandingProps) {
-
+
*/} - + {/*

{t("communityTitle")}

@@ -218,7 +244,7 @@ export default function StorytellerLanding(props: StorytellerLandingProps) { className="dots-left-bottom me-3" /> - + */} ); } diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/commons.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/commons.tsx index 48dc49454..9871ebb1b 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/commons.tsx +++ b/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", }}> - Debug of a certain Key-Values set + {title} { Object.entries(keyValues).map(([key, val], index: number)=>{ return {`${key}`}{`${val}`} diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/compAdminPanel.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/compAdminPanel.tsx new file mode 100644 index 000000000..8cb8ec0a9 --- /dev/null +++ b/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(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 ( + + +
+
+