diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.tsx b/src/website/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.tsx index 6f655bc032..d6944290bb 100644 --- a/src/website/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.tsx +++ b/src/website/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.tsx @@ -19,7 +19,7 @@ import { EnqueueVSTResponse, } from "@storyteller/components/src/api/workflows/EnqueueVST"; import { Prompt } from "@storyteller/components/src/api/prompts/GetPrompts"; -import { useParams } from "react-router-dom"; +import { useHistory, useParams } from "react-router-dom"; import { STYLE_OPTIONS, STYLES_BY_KEY } from "common/StyleOptions"; import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle"; import { StyleSelectionButton } from "./StyleSelection/StyleSelectionButton"; @@ -27,10 +27,12 @@ import useStyleStore from "hooks/useStyleStore"; import StyleSelectionList from "./StyleSelection/StyleSelectionList"; import { isMobile } from "react-device-detect"; import { AITools } from "components/marketing"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faLock } from "@fortawesome/pro-solid-svg-icons"; export default function StyleVideo() { const { mediaToken: pageMediaToken } = useParams<{ mediaToken: string }>(); - const { loggedInOrModal, sessionFetched } = useSession(); + const { loggedIn, loggedInOrModal, sessionFetched } = useSession(); const [mediaToken, mediaTokenSet] = useState(pageMediaToken || ""); const [IPAToken, IPATokenSet] = useState(""); const [prompt, promptSet] = useState(""); @@ -45,6 +47,8 @@ export default function StyleVideo() { const { setSelectedStyles, setCurrentImages, selectedStyleValues } = useStyleStore(); const { open, modalOpen } = useModal(); + const history = useHistory(); + const [enableSignUpBlock] = useState(false); const openStyleSelection = () => open({ @@ -205,6 +209,37 @@ export default function StyleVideo() { ); + const signupCTA = ( + <> + {!sessionFetched ? null : ( +
+ +

+ You need to be logged in to use Video Style Transfer +

+

+ Please login or sign up to upload a video. +

+
+
+
+ )} + + ); + if (!sessionFetched) { return ; } @@ -234,32 +269,45 @@ export default function StyleVideo() { minHeight: "400px", }} > - { - mediaTokenSet(target.value); - }, - type: "media", - }} - /> + {enableSignUpBlock && !loggedIn ? ( + signupCTA + ) : ( + { + mediaTokenSet(target.value); + }, + type: "media", + }} + /> + )}
-
@@ -439,15 +487,24 @@ export default function StyleVideo() { className="d-flex d-lg-none justify-content-center w-100 mt-5 position-fixed bottom-0 p-3 bg-panel" style={{ zIndex: 3 }} > -