diff --git a/src/website/packages/fakeyou.com/src/components/PremiumLock/PremiumLock.scss b/src/website/packages/fakeyou.com/src/components/PremiumLock/PremiumLock.scss index b71788129e..5d57465cc0 100644 --- a/src/website/packages/fakeyou.com/src/components/PremiumLock/PremiumLock.scss +++ b/src/website/packages/fakeyou.com/src/components/PremiumLock/PremiumLock.scss @@ -5,27 +5,26 @@ background-color: $panel-inner; pointer-events: none; overflow: hidden; - box-shadow: none !important; + border-radius: 0.5rem; + padding: 1rem; .overlay { position: absolute; - z-index: 5; + z-index: 10; top: 0; left: 0; width: 100%; height: 100%; - background-color: rgba($panel, 0.8); + background-color: rgba($panel-inner, 0.6); display: flex; justify-content: center; align-items: center; - color: rgba($white, 0.8); - font-size: 16px; + color: rgba($white, 0.9); + font-size: 15px; + font-weight: 500; pointer-events: all; - border: 1px solid rgba($primary, 0.4); + border: 2px solid rgba($primary, 0.4); border-radius: 0.5rem; - - span { - text-shadow: 0 0 10px rgba(0, 0, 0, 0.25); - } + padding-left: 1rem; } } diff --git a/src/website/packages/fakeyou.com/src/components/PremiumLock/PremiumLock.tsx b/src/website/packages/fakeyou.com/src/components/PremiumLock/PremiumLock.tsx index 0a51112f97..de0d55956c 100644 --- a/src/website/packages/fakeyou.com/src/components/PremiumLock/PremiumLock.tsx +++ b/src/website/packages/fakeyou.com/src/components/PremiumLock/PremiumLock.tsx @@ -13,6 +13,8 @@ interface PremiumLockProps { session?: any; sessionSubscriptionsWrapper: SessionSubscriptionsWrapper; showCtaButton?: boolean; + lockPosition?: "top" | "center"; + plural?: boolean; } export default function PremiumLock({ @@ -21,6 +23,8 @@ export default function PremiumLock({ sessionSubscriptionsWrapper, showCtaButton = false, large = false, + lockPosition = "center", + plural = false, }: PremiumLockProps) { const hasAccess = () => { switch (requiredPlan) { @@ -50,40 +54,92 @@ export default function PremiumLock({ children ) : ( - {children} -
-
- - {requiredPlan === "any" ? ( - - This feature requires a{" "} - - subscription plan. - - - ) : ( - - This feature requires a{" "} - {requiredPlan} subscription - - )} - - {showCtaButton && ( -
+ )} +
+ {lockPosition === "center" ? ( +
+ - )} -
+ {requiredPlan === "any" ? ( + + {plural + ? "These features require a" + : "This feature requires a"}{" "} + + subscription plan + + + ) : ( + + {plural + ? "These features require a" + : "This feature requires a"}{" "} + {requiredPlan} plan + + )} + + {showCtaButton && ( +
+ ) : ( +
+ + {requiredPlan === "any" ? ( + + {plural + ? "These features require a" + : "This feature requires a"}{" "} + + subscription plan + + + ) : ( + + + Upgrade to {requiredPlan} + {" "} + {plural ? "to use these features" : "to use this feature"} + + )} + + {showCtaButton && ( +
+ )}
)} diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/live_portrait/LivePortrait.tsx b/src/website/packages/fakeyou.com/src/v2/view/pages/live_portrait/LivePortrait.tsx index 14fc993677..3e5c88f25c 100644 --- a/src/website/packages/fakeyou.com/src/v2/view/pages/live_portrait/LivePortrait.tsx +++ b/src/website/packages/fakeyou.com/src/v2/view/pages/live_portrait/LivePortrait.tsx @@ -22,7 +22,6 @@ import { faLock, faPlus, faSparkles, - faStars, } from "@fortawesome/pro-solid-svg-icons"; import "./LivePortrait.scss"; import ThumbnailMediaPicker from "./ThumbnailMediaPicker"; @@ -53,6 +52,7 @@ import MotionEntityInput from "./MotionEntityInput"; import OutputThumbnailImage from "./OutputThumbnailImage"; import { useHistory } from "react-router-dom"; import { JobState } from "@storyteller/components/src/jobs/JobStates"; +import PremiumLock from "components/PremiumLock"; interface LivePortraitProps { sessionSubscriptionsWrapper: SessionSubscriptionsWrapper; @@ -110,7 +110,6 @@ export default function LivePortrait({ x: 0, y: 0, }); - const hasPremium = sessionSubscriptionsWrapper.hasPaidFeatures(); const [generatedVideoSrc, setGeneratedVideoSrc] = useState(""); const [sourceTokens, setSourceTokens] = useState([ ...PRECOMPUTED_SOURCE_TOKENS, @@ -992,31 +991,40 @@ export default function LivePortrait({
-
- { - setVisibility(prevVisibility => - prevVisibility === "private" ? "public" : "private" - ); - }} - checked={visibility === "private"} - /> + +
+ { + setVisibility(prevVisibility => + prevVisibility === "private" + ? "public" + : "private" + ); + }} + checked={visibility === "private"} + className="mb-0" + /> - { - setRemoveWatermark( - prevRemoveWatermark => !prevRemoveWatermark - ); - }} - checked={removeWatermark} - /> -
+ { + setRemoveWatermark( + prevRemoveWatermark => !prevRemoveWatermark + ); + }} + checked={removeWatermark} + className="mb-0" + /> +
+ - {!hasPremium && ( + {/* {!hasPremium && (
- )} + )} */}
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 acda78d1ac..1ad014caf4 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 @@ -20,7 +20,7 @@ import { EnqueueVSTResponse, } from "@storyteller/components/src/api/workflows/EnqueueVST"; import { Prompt } from "@storyteller/components/src/api/prompts/GetPrompts"; -import { useHistory, useParams } from "react-router-dom"; +import { Link, 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"; @@ -30,7 +30,7 @@ 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"; -import { Link } from "react-router-dom"; +import PremiumLock from "components/PremiumLock"; export default function StyleVideo() { const { mediaToken: pageMediaToken } = useParams<{ mediaToken: string }>(); @@ -52,9 +52,6 @@ export default function StyleVideo() { const { open, modalOpen } = useModal(); const history = useHistory(); const [enableSignUpBlock] = useState(false); - const proOrElite = - sessionSubscriptions?.hasActiveProSubscription() || - sessionSubscriptions?.hasActiveEliteSubscription(); const openStyleSelection = () => open({ @@ -105,9 +102,9 @@ export default function StyleVideo() { } else { // @ts-ignore window.dataLayer.push({ - "event": "enqueue_failure", - "page": "/style-video", - "user_id": "$user_id" + event: "enqueue_failure", + page: "/style-video", + user_id: "$user_id", }); console.log("Failed to enqueue job", res); } @@ -120,10 +117,14 @@ export default function StyleVideo() { const lengthOptions = [ { label: "3 seconds", value: 3000 }, - { disabled: !proOrElite, label: "5 seconds", value: 5000 }, - { disabled: !proOrElite, label: "7 seconds", value: 7000 }, + { label: "5 seconds", value: 5000 }, + { label: "7 seconds", value: 7000 }, ]; + const proOrElite = + sessionSubscriptions?.hasActiveProSubscription() || + sessionSubscriptions?.hasActiveEliteSubscription(); + const onPromptUpdate = (prompt: Prompt | null) => { promptSet(prompt?.maybe_positive_prompt || ""); negativePromptSet(prompt?.maybe_negative_prompt || ""); @@ -487,26 +488,37 @@ export default function StyleVideo() {
- { - lengthSet(target.value); - }, - options: lengthOptions, - value: length, - highlight: true, - }} - /> - - Subscribe to Pro or Elite for 5 or 7 second videos - + {sessionSubscriptions && ( + + { + lengthSet(target.value); + }, + options: lengthOptions, + value: length, + highlight: true, + }} + /> + + )} + + {!proOrElite && ( + + Subscribe to Pro or Elite for 5 or 7 second videos + + )}