From b5ce95b5925a74a5b0320729e993e40680ac5a90 Mon Sep 17 00:00:00 2001 From: BFlat Date: Sun, 12 May 2024 14:26:06 +0700 Subject: [PATCH 1/4] init --- .../src/components/layout/TopNav/TopNav.tsx | 15 +++ .../fakeyou.com/src/v2/view/PageContainer.tsx | 7 +- .../src/v2/view/pages/landing/LandingPage.tsx | 96 ++++++++++--------- .../PrelaunchLanding/PrelaunchLanding.scss | 57 +++++++++++ .../PrelaunchLanding/PrelaunchLanding.tsx | 35 +++++++ 5 files changed, 162 insertions(+), 48 deletions(-) create mode 100644 packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PrelaunchLanding/PrelaunchLanding.scss create mode 100644 packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PrelaunchLanding/PrelaunchLanding.tsx diff --git a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx index 2738440669..153dd1add6 100644 --- a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx +++ b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx @@ -188,6 +188,21 @@ export default function TopNav({ // { id: 4, name: "Text to Image", link: "/text-to-image" }, ]; + useEffect(() => { + const pageContentWrapper = document.getElementById("page-content-wrapper"); + if (pageContentWrapper) { + if (domain.titlePart === "Storyteller AI") { + pageContentWrapper.style.padding = "0px"; + } else { + pageContentWrapper.style.padding = ""; + } + } + }, [domain.titlePart]); + + if (domain.titlePart === "Storyteller AI") { + return null; + } + return (
- + @@ -681,7 +680,9 @@ class PageContainer extends React.Component< - + 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 ec302a15a9..fcc0a31cfa 100644 --- a/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx @@ -7,7 +7,7 @@ import { Container } from "components/common"; import FakeYouLandingHeader from "./fakeyou/FakeYouLandingHeader"; import Dashboard from "./Dashboard"; import { useDomainConfig } from "context/DomainConfigContext"; -import LandingVideoReel from "./components/LandingVideoReel/LandingVideoReel"; +// import LandingVideoReel from "./components/LandingVideoReel/LandingVideoReel"; import { FrontendInferenceJobType, InferenceJob, @@ -17,9 +17,13 @@ import "./LandingPage.scss"; // import VstSectionV1 from "./components/VstSectionV1"; import VstSectionV2 from "./components/VstSectionV2"; import FakeYouLandingBody from "./fakeyou/FakeYouLandingBody"; -import { WebsiteConfig, Website } from "@storyteller/components/src/env/GetWebsite"; +import { + WebsiteConfig, + Website, +} from "@storyteller/components/src/env/GetWebsite"; import OnboardingSelection from "./storyteller/OnboardingSelection"; -import TtsDemoSection from "./components/TtsDemoSection/TtsDemoSection"; +// import TtsDemoSection from "./components/TtsDemoSection/TtsDemoSection"; +import PrelaunchLanding from "./storyteller/PrelaunchLanding/PrelaunchLanding"; interface Props { sessionWrapper: SessionWrapper; @@ -62,56 +66,58 @@ function LandingPage(props: Props) { return ( <> {domain.website === Website.StorytellerAi && ( - + // + )} - {domain.website === Website.FakeYou ? ( - <> - {/* FAKEYOU.COM */} - {!isLoggedIn && ( - <> - - {/* */} - - - )} + { + domain.website === Website.FakeYou ? ( + <> + {/* FAKEYOU.COM */} + {!isLoggedIn && ( + <> + + {/* */} + + + )} - + - {!isLoggedIn && } - - ) : ( - <> - {/* STORYTELLER,AI */} + {!isLoggedIn && } + + ) : null + // <> + // {/* STORYTELLER,AI */} - {protectedStudioOnboarding} + // {protectedStudioOnboarding} - - + // + // - + // - - - )} + // + // + } ); diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PrelaunchLanding/PrelaunchLanding.scss b/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PrelaunchLanding/PrelaunchLanding.scss new file mode 100644 index 0000000000..a7dfe583f1 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PrelaunchLanding/PrelaunchLanding.scss @@ -0,0 +1,57 @@ +@import "scss/colours.scss"; + +.grid-container { + display: grid; + grid-template-columns: repeat(6, 1fr); + grid-template-rows: repeat(5, calc(100vw / 6 * 9 / 16)); + gap: 16px; + padding: 10px; + position: relative; + + .logo { + position: absolute; + margin-left: 4%; + top: 46%; + width: 40%; + } + + .waitlist-button { + position: absolute; + margin-left: 4%; + top: 63%; + padding: 1%; + width: 25%; + font-size: 20px; + font-weight: 500; + color: #fff; + background-color: $primary; + border-radius: 50px; + border: none; + cursor: pointer; + transition: all 0.2s; + + &:hover { + background-color: lighten($primary, 5%); + } + } +} + +.grid-item { + background-color: #ccc; + display: flex; + align-items: center; + justify-content: center; + border-radius: 0.5rem; + overflow: hidden; + transition: transform 0.2s; + pointer-events: all; + + &:hover { + transform: scale(1.1); + } +} + +.grid-item.blank { + background-color: transparent; + border: none; +} diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PrelaunchLanding/PrelaunchLanding.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PrelaunchLanding/PrelaunchLanding.tsx new file mode 100644 index 0000000000..a2d72fa5fb --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PrelaunchLanding/PrelaunchLanding.tsx @@ -0,0 +1,35 @@ +// Grid.tsx +import React from "react"; +import "./PrelaunchLanding.scss"; + +const PrelaunchLanding: React.FC = () => { + const totalGrids = 30; + const blankGrids = [13, 14, 15, 19, 20]; + + const renderGridItems = () => { + const gridItems = []; + for (let i = 1; i <= totalGrids; i++) { + const isBlank = blankGrids.includes(i); + gridItems.push( +
+ {!isBlank ? ( + + ) : null} +
+ ); + } + return gridItems; + }; + + return ( +
+ {renderGridItems()} + + + + +
+ ); +}; + +export default PrelaunchLanding; From 505c36784b5d66b362a96c6f7eb30f732ba2011b Mon Sep 17 00:00:00 2001 From: BFlat Date: Tue, 14 May 2024 06:42:26 +0700 Subject: [PATCH 2/4] prelaunch landing init --- .../PrelaunchLanding/PrelaunchLanding.scss | 117 +++++++++--- .../PrelaunchLanding/PrelaunchLanding.tsx | 172 ++++++++++++++++-- 2 files changed, 247 insertions(+), 42 deletions(-) diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PrelaunchLanding/PrelaunchLanding.scss b/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PrelaunchLanding/PrelaunchLanding.scss index a7dfe583f1..ac2f16b9ad 100644 --- a/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PrelaunchLanding/PrelaunchLanding.scss +++ b/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PrelaunchLanding/PrelaunchLanding.scss @@ -2,42 +2,30 @@ .grid-container { display: grid; - grid-template-columns: repeat(6, 1fr); - grid-template-rows: repeat(5, calc(100vw / 6 * 9 / 16)); + grid-template-columns: repeat(7, 1fr); + grid-template-rows: repeat(7, calc(100vw / 7 * (9 / 16))); gap: 16px; - padding: 10px; + padding: 16px; position: relative; - .logo { - position: absolute; - margin-left: 4%; - top: 46%; - width: 40%; + @media (max-width: 992px) { + grid-template-columns: repeat(5, 1fr); + grid-template-rows: repeat(5, calc(100vw / 5 * (9 / 16))); + gap: 16px; + padding: 16px; } - .waitlist-button { - position: absolute; - margin-left: 4%; - top: 63%; - padding: 1%; - width: 25%; - font-size: 20px; - font-weight: 500; - color: #fff; - background-color: $primary; - border-radius: 50px; - border: none; - cursor: pointer; - transition: all 0.2s; - - &:hover { - background-color: lighten($primary, 5%); - } + @media (max-width: 768px) { + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, calc(100vw / 3 * (9 / 16))); + gap: 12px; + padding: 12px; } } .grid-item { - background-color: #ccc; + position: relative; + background-color: rgba($white, 0.06); display: flex; align-items: center; justify-content: center; @@ -45,10 +33,85 @@ overflow: hidden; transition: transform 0.2s; pointer-events: all; + border: none; &:hover { transform: scale(1.1); } + + &.double-grid { + grid-column: span 2; + } + + &.triple-grid { + grid-column: span 3; + } + + &.grid-item-custom { + overflow: visible; + position: relative; + + &:hover { + transform: none; + } + } + + img { + cursor: pointer; + } + + .logo { + position: absolute; + left: 0; + top: 0; + margin-left: 20%; + margin-top: 10%; + width: 270%; + cursor: default; + + @media (max-width: 992px) { + margin-left: 22%; + margin-top: 15%; + } + } + + .waitlist-button { + position: absolute; + left: 0; + top: 0; + margin-left: 10%; + margin-top: 4%; + font-size: 20px; + font-weight: 500; + color: #fff; + background-color: $primary; + border-radius: 50px; + cursor: pointer; + transition: all 0.2s; + width: 84%; + padding: 2.5%; + border: 4px solid lighten($primary, 12%); + box-shadow: 0 0 15px rgba(255, 255, 255, 0.7); // Soft white glow + animation: glow 1.5s infinite alternate; + + &:hover { + background-color: lighten($primary, 5%); + } + + @media (max-width: 992px) { + margin-left: 8%; + margin-top: 2%; + } + } + + @keyframes glow { + from { + box-shadow: 0 0 50px rgba(255, 170, 168, 0.25); + } + to { + box-shadow: 0 0 25px rgba(255, 170, 168, 0.5); + } + } } .grid-item.blank { diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PrelaunchLanding/PrelaunchLanding.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PrelaunchLanding/PrelaunchLanding.tsx index a2d72fa5fb..32864634d1 100644 --- a/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PrelaunchLanding/PrelaunchLanding.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PrelaunchLanding/PrelaunchLanding.tsx @@ -1,19 +1,169 @@ // Grid.tsx -import React from "react"; +import React, { useEffect, useState } from "react"; import "./PrelaunchLanding.scss"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faArrowRight } from "@fortawesome/pro-solid-svg-icons"; +import { BucketConfig } from "@storyteller/components/src/api/BucketConfig"; +import { set } from "date-fns"; + +interface MediaItem { + token: string; + public_bucket_path: string; + maybe_creator: { + username: string; + }; +} const PrelaunchLanding: React.FC = () => { - const totalGrids = 30; - const blankGrids = [13, 14, 15, 19, 20]; + const totalGrids = 63; + const [mediaItems, setMediaItems] = useState([]); + const [blankGrids, setBlankGrids] = useState([15, 16, 17, 22, 23]); + const [screenSize, setScreenSize] = useState("lg"); + + useEffect(() => { + fetchMediaItems(); + updateGridsForScreenSize(); + window.addEventListener("resize", updateGridsForScreenSize); + return () => window.removeEventListener("resize", updateGridsForScreenSize); + }, []); + + const updateGridsForScreenSize = () => { + const screenWidth = window.innerWidth; + if (screenWidth < 768) { + setBlankGrids([7, 8, 9, 10, 11, 12]); + setScreenSize("sm"); + } else if (screenWidth < 992) { + setBlankGrids([12, 13, 14, 17, 18, 19]); + setScreenSize("md"); + } else { + setBlankGrids([15, 16, 17, 22, 23]); + setScreenSize("lg"); + } + }; + + const getCustomGridItemIndex = () => { + switch (screenSize) { + case "lg": + return 15; + case "md": + return 12; + case "sm": + return 7; + default: + return 15; + } + }; + + const fetchMediaItems = async () => { + try { + const response = await fetch( + "https://api.storyteller.ai/v1/media_files/list_featured?page_size=63&filter_media_classes=video" + ); + const data = await response.json(); + if (data.success) { + setMediaItems(data.results); + } + } catch (error) { + console.error("Error fetching media items:", error); + } + }; const renderGridItems = () => { const gridItems = []; + const customGridItemIndex = getCustomGridItemIndex(); + for (let i = 1; i <= totalGrids; i++) { const isBlank = blankGrids.includes(i); + if (screenSize === "sm") { + if (i === 10) { + gridItems.push( +
+ +
+ ); + i++; + continue; + } + } else if (screenSize === "md") { + if (i === 17) { + gridItems.push( +
+ +
+ ); + i += 2; + continue; + } + } else { + if (i === 22) { + gridItems.push( +
+ +
+ ); + i++; + continue; + } + } + + const mediaItem = mediaItems[i - 1]; + const bucketConfig = new BucketConfig(); + const gifUrl = mediaItem + ? bucketConfig.getCdnUrl( + mediaItem.public_bucket_path + "-thumb.gif", + 360, + 20 + ) + : ""; + gridItems.push( -
- {!isBlank ? ( - +
+ {isBlank ? ( + i === customGridItemIndex ? ( + Storyteller Logo + ) : null + ) : mediaItem ? ( + + window.open(`https://storyteller.ai/media/${mediaItem.token}`) + } + src={gifUrl} + className="w-100 h-100 object-fit-cover" + alt={`Video by ${mediaItem.maybe_creator.username}`} + /> ) : null}
); @@ -21,15 +171,7 @@ const PrelaunchLanding: React.FC = () => { return gridItems; }; - return ( -
- {renderGridItems()} - - - - -
- ); + return
{renderGridItems()}
; }; export default PrelaunchLanding; From 173060b4f3d27540850d9707079887733bdc9d38 Mon Sep 17 00:00:00 2001 From: BFlat Date: Tue, 14 May 2024 07:40:10 +0700 Subject: [PATCH 3/4] shuffle and grid small screen grid hieght fix --- .../PrelaunchLanding/PrelaunchLanding.scss | 1 + .../PrelaunchLanding/PrelaunchLanding.tsx | 12 ++++++++++-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PrelaunchLanding/PrelaunchLanding.scss b/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PrelaunchLanding/PrelaunchLanding.scss index ac2f16b9ad..728fef697a 100644 --- a/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PrelaunchLanding/PrelaunchLanding.scss +++ b/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PrelaunchLanding/PrelaunchLanding.scss @@ -45,6 +45,7 @@ &.triple-grid { grid-column: span 3; + height: 6rem; } &.grid-item-custom { diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PrelaunchLanding/PrelaunchLanding.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PrelaunchLanding/PrelaunchLanding.tsx index 32864634d1..1f246a0237 100644 --- a/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PrelaunchLanding/PrelaunchLanding.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PrelaunchLanding/PrelaunchLanding.tsx @@ -61,13 +61,21 @@ const PrelaunchLanding: React.FC = () => { ); const data = await response.json(); if (data.success) { - setMediaItems(data.results); + setMediaItems(shuffleArray(data.results)); } } catch (error) { console.error("Error fetching media items:", error); } }; + const shuffleArray = (array: any[]) => { + for (let i = array.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [array[i], array[j]] = [array[j], array[i]]; + } + return array; + }; + const renderGridItems = () => { const gridItems = []; const customGridItemIndex = getCustomGridItemIndex(); @@ -89,7 +97,7 @@ const PrelaunchLanding: React.FC = () => {
); - i++; + i += 2; continue; } } else if (screenSize === "md") { From 15c2f49e2e19a3749cb45922ffa6be9f91794519 Mon Sep 17 00:00:00 2001 From: BFlat Date: Tue, 14 May 2024 11:26:48 +0700 Subject: [PATCH 4/4] prelaunch landing bug fixes --- .../fakeyou.com/src/components/layout/TopNav/TopNav.tsx | 7 ++++--- .../storyteller/PrelaunchLanding/PrelaunchLanding.tsx | 3 +-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx index 153dd1add6..d245e6189d 100644 --- a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx +++ b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx @@ -190,16 +190,17 @@ export default function TopNav({ useEffect(() => { const pageContentWrapper = document.getElementById("page-content-wrapper"); + if (pageContentWrapper) { - if (domain.titlePart === "Storyteller AI") { + if (domain.titlePart === "Storyteller AI" && isOnLandingPage) { pageContentWrapper.style.padding = "0px"; } else { pageContentWrapper.style.padding = ""; } } - }, [domain.titlePart]); + }, [domain.titlePart, isOnLandingPage]); - if (domain.titlePart === "Storyteller AI") { + if (domain.titlePart === "Storyteller AI" && isOnLandingPage) { return null; } diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PrelaunchLanding/PrelaunchLanding.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PrelaunchLanding/PrelaunchLanding.tsx index 1f246a0237..6a9222d749 100644 --- a/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PrelaunchLanding/PrelaunchLanding.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PrelaunchLanding/PrelaunchLanding.tsx @@ -1,10 +1,8 @@ -// Grid.tsx import React, { useEffect, useState } from "react"; import "./PrelaunchLanding.scss"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faArrowRight } from "@fortawesome/pro-solid-svg-icons"; import { BucketConfig } from "@storyteller/components/src/api/BucketConfig"; -import { set } from "date-fns"; interface MediaItem { token: string; @@ -25,6 +23,7 @@ const PrelaunchLanding: React.FC = () => { updateGridsForScreenSize(); window.addEventListener("resize", updateGridsForScreenSize); return () => window.removeEventListener("resize", updateGridsForScreenSize); + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const updateGridsForScreenSize = () => {