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 index d5314fae00..bd54e24c76 100644 --- 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 @@ -2,6 +2,34 @@ 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 { 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 index de4a957a80..360a8360c9 100644 --- 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 @@ -2,7 +2,7 @@ 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 { Button, SegmentButtons } from "components/common"; import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle"; import { useParams, useHistory } from "react-router-dom"; import { useInferenceJobs } from "hooks"; @@ -19,6 +19,7 @@ interface Props { } function StudioIntroPage(props: Props) { + const [camera,cameraSet] = useState("rotation"); const { mediaToken } = useParams<{ mediaToken: string }>(); const history = useHistory(); @@ -60,6 +61,7 @@ function StudioIntroPage(props: Props) { EnqueueEngineCompositing("", { uuid_idempotency_token: uuidv4(), media_file_token: savedMediaToken, + // maybe_camera_preset: camera // HERE IS THE CAMERA SELECT VALUE -V }).then((res: any) => { if (res && res.success) { inferenceJobs.enqueue(res.inference_job_token, true); // noModalPls = true @@ -68,6 +70,20 @@ function StudioIntroPage(props: Props) { }); }; + const cameraOpts = [{ + label: "Rotation", + value: "rotation" + },{ + label: "Zoom", + value: "zoom" + },{ + label: "Pan", + value: "pan" + },{ + label: "Static", + value: "static" + }]; + return (