diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx b/src/website/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx index 272a502648..e6bcd78d9b 100644 --- a/src/website/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx +++ b/src/website/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx @@ -49,6 +49,8 @@ import { GetMediaFileTitle } from "common/GetMediaFileTitle"; import { faCube, faStarShooting } from "@fortawesome/pro-duotone-svg-icons"; import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle"; import { GetWebsiteLink } from "@storyteller/components/src/env/GetWebsiteLink"; +import { AITools } from "components/marketing"; +import { useSession } from "hooks"; export default function MediaPage({ animationType, @@ -73,6 +75,9 @@ export default function MediaPage({ const [buttonLabel, setButtonLabel] = useState("Copy"); const [activeSlide, setActiveSlide] = useState({ url: "", token: "" }); const viewerCanMakeFeatured = canBanUsers() || false; + const { loggedIn, loggedInOrModal } = useSession(); + const [showAlert, setShowAlert] = useState(false); + const [isLoadingDL, setIsLoadingDL] = useState(false); // Inside MediaPage.tsx @@ -571,6 +576,26 @@ export default function MediaPage({ } }; + const handleDownloadClick = async ( + e: React.MouseEvent + ) => { + e.preventDefault(); + + if (!loggedIn) { + setIsLoadingDL(true); + setShowAlert(true); + await new Promise(resolve => setTimeout(resolve, 1500)); + setIsLoadingDL(false); + } + + const link = document.createElement("a"); + link.href = downloadLink; + link.download = downloadLink.split("/").pop() || "download"; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + }; + return ( <> @@ -718,10 +743,9 @@ export default function MediaPage({ icon={faArrowDownToLine} label="Download" className="flex-grow-1" - href={downloadLink} - download={downloadLink} variant="secondary" - target="_blank" + onClick={handleDownloadClick} + isLoading={isLoadingDL} /> )} {mediaFile?.media_type === MediaFileType.Audio && ( @@ -730,15 +754,33 @@ export default function MediaPage({ icon={faArrowDownToLine} square={true} variant="secondary" - href={downloadLink} - download={downloadLink} + onClick={handleDownloadClick} tooltip="Download" - target="_blank" + isLoading={isLoadingDL} /> )} + {showAlert && !loggedIn && ( +
+ + Signed in users can keep their generation history. + +
+ )} +
- {mediaFile?.maybe_model_weight_info && (
@@ -812,7 +853,6 @@ export default function MediaPage({
)} - {!!mediaDetails && ( @@ -826,7 +866,6 @@ export default function MediaPage({ {modMediaDetails} -
@@ -875,7 +914,6 @@ export default function MediaPage({
- {canEdit && ( <>
@@ -941,6 +979,13 @@ export default function MediaPage({
+ + + +

Try our other AI tools

+ +
+
); } diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/premium/PricingPage.tsx b/src/website/packages/fakeyou.com/src/v2/view/pages/premium/PricingPage.tsx index f42ef0a294..ab155c1def 100644 --- a/src/website/packages/fakeyou.com/src/v2/view/pages/premium/PricingPage.tsx +++ b/src/website/packages/fakeyou.com/src/v2/view/pages/premium/PricingPage.tsx @@ -337,7 +337,7 @@ function PricingPage(props: Props) { style={{ top: "20px", right: "20px" }} >