From 3f28a58cc71fa995eeb4b5330620dbd294476c4e Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Tue, 20 Aug 2024 22:59:38 -0700
Subject: [PATCH] added login/signup check on style video

---
 .../modals/CameraCapture/CameraCapture.scss   |  1 +
 .../v2/view/pages/style-video/StyleVideo.tsx  | 21 ++++++++-----------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/website/packages/fakeyou.com/src/components/modals/CameraCapture/CameraCapture.scss b/src/website/packages/fakeyou.com/src/components/modals/CameraCapture/CameraCapture.scss
index 0dde27642f..d91152fce9 100644
--- a/src/website/packages/fakeyou.com/src/components/modals/CameraCapture/CameraCapture.scss
+++ b/src/website/packages/fakeyou.com/src/components/modals/CameraCapture/CameraCapture.scss
@@ -27,6 +27,7 @@
 	.fy-camera-capture-slide {
 		position: absolute;
 		width: 100%;
+		height: 100%;
 	}
 
 	.fy-camera-capture-centered {
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 23c91d56be..ef22c8d9fc 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
@@ -12,7 +12,6 @@ import {
   Label,
   DropdownOptions,
   SessionFetchingSpinner,
-  LoginBlock,
   Modal,
 } from "components/common";
 import { EntityInput } from "components/entities";
@@ -32,7 +31,7 @@ import { AITools } from "components/marketing";
 
 export default function StyleVideo() {
   const { mediaToken: pageMediaToken } = useParams<{ mediaToken: string }>();
-  const { loggedIn, sessionFetched } = useSession();
+  const { loggedInOrModal, sessionFetched } = useSession();
   const [mediaToken, mediaTokenSet] = useState(pageMediaToken || "");
   const [IPAToken, IPATokenSet] = useState("");
   const [prompt, promptSet] = useState("");
@@ -73,7 +72,14 @@ export default function StyleVideo() {
   usePrefixedDocumentTitle("Style Video");
 
   const onClick = async () => {
-    if (mediaToken && selectedStyleValues.length > 0) {
+    if (
+      loggedInOrModal({
+        loginMessage: "Login to finish styling your video",
+        signupMessage: "Signup to finish styling your video",
+      }) &&
+      mediaToken &&
+      selectedStyleValues.length > 0
+    ) {
       const maxJobs = Math.min(3, selectedStyleValues.length);
       for (let i = 0; i < maxJobs; i++) {
         try {
@@ -203,15 +209,6 @@ export default function StyleVideo() {
     return <SessionFetchingSpinner />;
   }
 
-  if (!loggedIn) {
-    return (
-      <LoginBlock
-        title="You need to be logged in to use Video Style Transfer"
-        redirect="/style-video"
-      />
-    );
-  }
-
   return (
     <>
       <Container className="mt-3 mt-lg-5" type="panel">