diff --git a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx index 93d54ebd3a..7a5eee65bc 100644 --- a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx +++ b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx @@ -448,7 +448,7 @@ export default function SideNav({
  • diff --git a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx index 9c10e9e16e..6bbb0fcea3 100644 --- a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx +++ b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx @@ -449,7 +449,7 @@ export default function TopNav({ {domain.titlePart === "FakeYou" && ( -
    +
    diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx index 87a1ec8488..4e339ca0c3 100644 --- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx +++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx @@ -9,7 +9,6 @@ import { ModerationIpBanListFc } from "./pages/moderation/moderation_ip_ban_list import { ModerationViewIpBanFc } from "./pages/moderation/moderation_view_ip_ban/ModerationViewIpBanFc"; import FaceAnimator from "./pages/face_animator"; import VideoMocap from "./pages/video_mocap"; -import VideoStyleTransfer from "./pages/video_styletransfer"; import { ProfileEditFc } from "./pages/profile/profile_edit/ProfileEditFc"; import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper"; @@ -816,14 +815,6 @@ class PageContainer extends React.Component< /> - - - - @@ -88,7 +88,7 @@ export default function VstSectionV1(props: VstSectionV1Props) { {/*
    - +
    */} diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV2/VstSectionV2.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV2/VstSectionV2.tsx index fbc48b703e..44df372329 100644 --- a/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV2/VstSectionV2.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV2/VstSectionV2.tsx @@ -61,22 +61,22 @@ export default function VstSectionV2(props: VstSectionV2Props) { { src: "/videos/landing/vst/1-2d_flat_anime.mp4", label: "2D Flat Anime", - ctaLink: "/video-styletransfer", + ctaLink: "/style-video", }, { src: "/videos/landing/vst/1-3d_cartoon.mp4", label: "3D Cartoon", - ctaLink: "/video-styletransfer", + ctaLink: "/style-video", }, { src: "/videos/landing/vst/1-ink_bw.mp4", label: "Ink B&W", - ctaLink: "/video-styletransfer", + ctaLink: "/style-video", }, { src: "/videos/landing/vst/1-origami.mp4", label: "Origami", - ctaLink: "/video-styletransfer", + ctaLink: "/style-video", }, ], }, @@ -87,22 +87,22 @@ export default function VstSectionV2(props: VstSectionV2Props) { { src: "/videos/landing/vst/2-2d_flat_anime.mp4", label: "2D Flat Anime", - ctaLink: "/video-styletransfer", + ctaLink: "/style-video", }, { src: "/videos/landing/vst/2-pop_art.mp4", label: "Pop Art", - ctaLink: "/video-styletransfer", + ctaLink: "/style-video", }, { src: "/videos/landing/vst/2-ink_splash.mp4", label: "Ink Splash", - ctaLink: "/video-styletransfer", + ctaLink: "/style-video", }, { src: "/videos/landing/vst/2-origami.mp4", label: "Origami", - ctaLink: "/video-styletransfer", + ctaLink: "/style-video", }, ], }, @@ -240,7 +240,7 @@ export default function VstSectionV2(props: VstSectionV2Props) { {/*
    - +
    */} diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioIntro.scss b/packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioIntro.scss deleted file mode 100644 index bd54e24c76..0000000000 --- a/packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioIntro.scss +++ /dev/null @@ -1,37 +0,0 @@ -.studio-intro-page { - display: flex; - flex-direction: column; - height: calc(100vh - 66px); - - .studio-intro-exporter { - background: rgba(#000, .5); - backdrop-filter: blur(10px); - border-radius: .5rem; - right: 1rem; - bottom: 1rem; - padding: .5rem; - position: absolute; - - - .exporter-title { - width: 100%; - - span { - opacity: .66; - font-size: .875rem; - height: 1em; - line-height: 1em; - display: block; - margin-bottom: .25rem; - } - } - .exporter-controls { - display: flex; - gap: .5rem; - } - } -} - -.result-video-wrapper { - max-width: 1100px; -} diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioIntroPage.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioIntroPage.tsx deleted file mode 100644 index 5e1744de5f..0000000000 --- a/packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioIntroPage.tsx +++ /dev/null @@ -1,142 +0,0 @@ -import React, { useCallback, useState } from "react"; -import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; -import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper"; -import { StudioNotAvailable } from "v2/view/_common/StudioNotAvailable"; -import { Button } from "components/common"; -import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle"; -import { useParams, useHistory } from "react-router-dom"; -import { useInferenceJobs } from "hooks"; -import { EnqueueEngineCompositing } from "@storyteller/components/src/api/engine_compositor/EnqueueEngineCompositing"; -import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob"; -import { v4 as uuidv4 } from "uuid"; -import "./StudioIntro.scss"; -import Scene3D from "components/common/Scene3D/Scene3D"; -import { EngineMode } from "components/common/Scene3D/EngineMode"; -import { SplitFirstPeriod } from "utils/SplitFirstPeriod"; - -interface Props { - sessionWrapper: SessionWrapper; - sessionSubscriptionsWrapper: SessionSubscriptionsWrapper; -} - -const PAGE_TITLE = "Storyteller Studio"; - -function StudioIntroPage(props: Props) { - // NB: The URL parameter might be a raw media token (for .scn.ron files), or it might - // have an appended suffix to assist the engine in loading the correct scene format. - // For example, this is a valid "mediaTokenSpec": `m_zk0qkm1tgsdbh6e3c9kedy34vaympd.glb` - const { mediaToken: mediaTokenSpec } = useParams<{ mediaToken: string }>(); - - const { base: mediaToken, maybeRemainder: maybeExtension } = - SplitFirstPeriod(mediaTokenSpec); - - const history = useHistory(); - - const inferenceJobs = useInferenceJobs(); - - // If the user saves the scene in the engine, we'll need to use the new token - // for subsequent steps of this flow. - const [savedMediaToken, setSavedMediaToken] = useState(mediaToken); - - // We don't show the "next step" buttons until the engine loads. - // Unfortunately the engine sometimes fires this twice, with one instance - // being called before the scene loads. Until this is fixed, we'll count the - // number of event fires and assume we must have two calls. - const [sceneIsLoadedCount, sceneIsLoadedCountSet] = useState(0); - - // If the scene is saved, we know the user must have interacted. - // This can serve as a second optional gate for enabling the next steps. - const [sceneIsSaved, sceneIsSavedSet] = useState(false); - - usePrefixedDocumentTitle(PAGE_TITLE); - - const onSaveCallback = useCallback( - (sceneMediaToken: string) => { - console.log(`Saved scene, new media token: ${sceneMediaToken}`); - - setSavedMediaToken(sceneMediaToken); - sceneIsSavedSet(true); // Just in case we missed the "scene loaded" event. - - // Replace the history state without causing a React re-render - window.history.replaceState( - null, - PAGE_TITLE, - `/studio-intro/${sceneMediaToken}` - ); - }, - [setSavedMediaToken, sceneIsSavedSet] - ); - - const onSceneReadyCallback = useCallback(() => { - sceneIsLoadedCountSet(sceneIsLoadedCount + 1); - }, [sceneIsLoadedCount, sceneIsLoadedCountSet]); - - if (!props.sessionWrapper.canAccessStudio()) { - return ; - } - - let assetDescriptor; - - // We should prefer to start the onboarding flow with an existing scene, but if - // one is unavailable, we should show the sample room. - if (maybeExtension !== undefined) { - assetDescriptor = { - sceneImportToken: mediaToken, - extension: maybeExtension, - }; - } else if (mediaToken) { - assetDescriptor = { - storytellerSceneMediaFileToken: mediaToken, - }; - } else { - assetDescriptor = { - objectId: "sample-room.gltf", - }; - } - - const onClick = () => { - // This opens the job modal. Needs to be disabled. - EnqueueEngineCompositing("", { - uuid_idempotency_token: uuidv4(), - media_file_token: savedMediaToken, - skybox: "meadow_4k", - }).then((res: any) => { - if (res && res.success) { - inferenceJobs.enqueue( - res.inference_job_token, - FrontendInferenceJobType.EngineComposition - ); - history.push(`/studio-intro/style/${res.inference_job_token}`); - } - }); - }; - - const sceneIsLoaded = sceneIsLoadedCount > 1 || sceneIsSaved; - - let progressButtons = <>; - - if (sceneIsLoaded) { - progressButtons = ( -
    -
    - ); - } - - return ( -
    - - - {progressButtons} -
    - ); -} - -export { StudioIntroPage }; diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioIntroResultPage.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioIntroResultPage.tsx deleted file mode 100644 index e17d40ca3e..0000000000 --- a/packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioIntroResultPage.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import React, { useEffect, useState } from "react"; -import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; -import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper"; -import { Button, Container, Panel } from "components/common"; -import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle"; -import { useHistory, useParams } from "react-router-dom"; -import "./StudioIntro.scss"; -import LoadingSpinner from "components/common/LoadingSpinner"; -import { useMedia, useInferenceJobs } from "hooks"; -import { BucketConfig } from "@storyteller/components/src/api/BucketConfig"; -import { MediaFileType } from "@storyteller/components/src/api/media_files"; -import { JobState } from "@storyteller/components/src/jobs/JobStates"; - -interface Props { - sessionWrapper: SessionWrapper; - sessionSubscriptionsWrapper: SessionSubscriptionsWrapper; -} - -// This page just needs to poll the job and show the video when it's done. - -function StudioIntroResultPage(props: Props) { - const [rething,rethingSet] = useState(false); - const { jobToken } = useParams<{ jobToken: string }>(); - const history = useHistory(); - const { enqueue, inferenceJobs } = useInferenceJobs(); - const job = inferenceJobs.find((item: any) => item.jobToken === jobToken); - - useEffect(() => { - if (!job && !rething) { - rethingSet(true); - enqueue(jobToken); - } - },[enqueue,job,jobToken,rething]); - - - // const [mediaToken, setMediaToken] = useState( - // "m_f5kp3hm74qeq16eq7536jb73jkbvkh" - // ); // Set the media token after polling success - // const [jobExists, setJobExists] = useState(null); - - // const job = useJobStatus({ jobToken }); - - const [mediaFile, setMediaFile] = useState(); - - const mediaToken = job?.maybeResultToken|| ""; - - useMedia({ - mediaToken, - onSuccess: (res: any) => { - setMediaFile(res); - }, - }); - - const mediaLink = - mediaFile && new BucketConfig().getGcsUrl(mediaFile.public_bucket_path); - - usePrefixedDocumentTitle("Storyteller Studio"); - - if (!jobToken) { - history.push("/"); - } - - const contentSwitch = () => { - switch (job?.jobState) { - case JobState.UNKNOWN: - case JobState.PENDING: - case JobState.STARTED: return ; - case JobState.ATTEMPT_FAILED: return
    -

    {`Attempt failed, retrying (attempt ${ job.attemptCount } )`}

    -
    ; - case JobState.COMPLETE_SUCCESS: return