diff --git a/packages/fakeyou.com/src/App.tsx b/packages/fakeyou.com/src/App.tsx index f3f71fa77f..aacbd5d7ea 100644 --- a/packages/fakeyou.com/src/App.tsx +++ b/packages/fakeyou.com/src/App.tsx @@ -206,6 +206,7 @@ function initInferenceJobsByCategoryMap(): Map< [] ); inferenceJobsByCategory.set(FrontendInferenceJobType.VoiceDesignerTts, []); + inferenceJobsByCategory.set(FrontendInferenceJobType.VideoMotionCapture, []); return inferenceJobsByCategory; } @@ -485,10 +486,8 @@ class App extends React.Component { frontendJobType: FrontendInferenceJobType ) => { const newJob = new InferenceJob(jobToken, frontendJobType); - let inferenceJobs = this.state.inferenceJobs.concat([newJob]); - this.setState({ - inferenceJobs: inferenceJobs, + inferenceJobs: [...this.state.inferenceJobs, newJob], }); }; diff --git a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/VideoInput/VideoInput.tsx b/packages/fakeyou.com/src/components/common/VideoInput/VideoInput.tsx similarity index 98% rename from packages/fakeyou.com/src/v2/view/pages/video_mocap/components/VideoInput/VideoInput.tsx rename to packages/fakeyou.com/src/components/common/VideoInput/VideoInput.tsx index 3f23c82050..1991fb28d7 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/VideoInput/VideoInput.tsx +++ b/packages/fakeyou.com/src/components/common/VideoInput/VideoInput.tsx @@ -2,7 +2,7 @@ import React, { useEffect } from "react"; import { useSpring } from "@react-spring/web"; import { FileDetails, FileWrapper, FileLabel } from "components/common"; import { faFileVideo, faVideo } from "@fortawesome/pro-solid-svg-icons"; -import "./style.scss"; +import "./videoinput.scss"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; interface Props { diff --git a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/VideoInput/index.tsx b/packages/fakeyou.com/src/components/common/VideoInput/index.tsx similarity index 100% rename from packages/fakeyou.com/src/v2/view/pages/video_mocap/components/VideoInput/index.tsx rename to packages/fakeyou.com/src/components/common/VideoInput/index.tsx diff --git a/packages/fakeyou.com/src/components/common/VideoInput/videoinput.scss b/packages/fakeyou.com/src/components/common/VideoInput/videoinput.scss new file mode 100644 index 0000000000..37337a34d8 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/VideoInput/videoinput.scss @@ -0,0 +1,5 @@ +@import "scss/colours.scss"; + +.upload-details { + background-color: rgba($panel, .85); +} \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/layout/InferenceJobsList/InferenceJobsList.tsx b/packages/fakeyou.com/src/components/layout/InferenceJobsList/InferenceJobsList.tsx index d6cf6cda6e..8b33cc9fa8 100644 --- a/packages/fakeyou.com/src/components/layout/InferenceJobsList/InferenceJobsList.tsx +++ b/packages/fakeyou.com/src/components/layout/InferenceJobsList/InferenceJobsList.tsx @@ -18,19 +18,26 @@ export default function InferenceJobsList({ failures, jobType, onSelect }: JobsL // let height = 0; // const transitions = useTransition(inferenceJobs,{ not right now }); - return inferenceJobs.length ?
-
{ t("core.heading") }
- { - inferenceJobs.map((job: InferenceJob, key: number) => - console.log(ref), - ...job }} />).reverse() - } -
: null; + if (inferenceJobs.length){ + return( +
+
{ t("core.heading") }
+ { + inferenceJobs.map((job: InferenceJob, key: number) => + ).reverse() + } +
+ ) + } + else{ + return null; + } + }; \ No newline at end of file diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss index 090b514b7f..26149cb445 100644 --- a/packages/fakeyou.com/src/scss/site-refresh.scss +++ b/packages/fakeyou.com/src/scss/site-refresh.scss @@ -12,6 +12,16 @@ styles with important tags: // Once the rollout is complete, this outer wrapper class can be removed. .fakeyou-refresh { + + //- BS5 classnames -// + .object-fit-cover{ + object-fit: cover; + } + .ratio-1x1 { + aspect-ratio: 1/1; + } + //-end--// + ::-webkit-scrollbar-thumb { background-color: rgba($secondary, 1); border-radius: 0.5rem; @@ -196,6 +206,9 @@ styles with important tags: color: #ffe600; } + .fill-secondary { + fill: $secondary; + } .alert-pricing { font-weight: 500 !important; font-size: 18px !important; diff --git a/packages/fakeyou.com/src/v2/view/pages/video_mocap/VideoMocap.tsx b/packages/fakeyou.com/src/v2/view/pages/video_mocap/VideoMocap.tsx index 1af03e7fac..286edfa1c4 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_mocap/VideoMocap.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_mocap/VideoMocap.tsx @@ -1,18 +1,18 @@ import React, { useState } from "react"; +import { Redirect, useLocation } from "react-router-dom"; -import { useLocalize } from "hooks"; import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper"; import { FrontendInferenceJobType, InferenceJob, } from "@storyteller/components/src/jobs/InferenceJob"; - -// import { PageVideoProvision } from "./components/pageVideoProvision"; import { PageInferenceStatuses } from "./components/pageInferenceStatuses"; + import { BasicVideo, Container, Panel } from "components/common"; import PageHeader from "components/layout/PageHeader"; import Tabs from "components/common/Tabs"; -import { Redirect, useLocation } from "react-router-dom"; +import { useLocalize } from "hooks"; + import TabContentUpload from "./components/tabContentUpload"; import TabContentLibrary from "./components/tabContentLibrary"; diff --git a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/VideoInput/style.scss b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/VideoInput/style.scss deleted file mode 100644 index 0666365c61..0000000000 --- a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/VideoInput/style.scss +++ /dev/null @@ -1,20 +0,0 @@ -@import "scss/colours.scss"; -@import "scss/_breakpoint.scss"; - -//TODO: PUSH TO TOP -.fill-secondary { - fill: $secondary; -} - -//TODO: PUSH TO TOP, given in BS5 -.object-fit-cover{ - object-fit: cover; -} -.ratio-1x1 { - aspect-ratio: 1/1; -} -//-end--// - -.upload-details { - background-color: rgba($panel, .85); -} \ No newline at end of file diff --git a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/pageInferenceStatuses.tsx b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/pageInferenceStatuses.tsx index 7448dc5644..fc1002c526 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/pageInferenceStatuses.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/pageInferenceStatuses.tsx @@ -24,7 +24,7 @@ export function PageInferenceStatuses (props:{ console.log("ENQUEUE INFERENCE JOB>>") enqueueInferenceJob( props.pageState.jobToken, - FrontendInferenceJobType.FaceAnimation + FrontendInferenceJobType.VideoMotionCapture ); }, [props.pageState.jobToken, enqueueInferenceJob]) @@ -33,7 +33,7 @@ export function PageInferenceStatuses (props:{ case "sample case": return "Sample Case, this should not have been shown"; default: - return "Uknown failure"; + return "Unknown failure"; } }; @@ -45,7 +45,7 @@ export function PageInferenceStatuses (props:{ Analytics.voiceConversionClickDownload(), - jobType: FrontendInferenceJobType.FaceAnimation, + jobType: FrontendInferenceJobType.VideoMotionCapture, }}/> ) diff --git a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentUpload.tsx b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentUpload.tsx index b4f7ca820a..015bbb6d17 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentUpload.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentUpload.tsx @@ -5,7 +5,7 @@ import { UploadMedia } from "@storyteller/components/src/api/media_files/UploadM import { EnqueueVideoMotionCapture } from "@storyteller/components/src/api/video_mocap"; import { useFile } from "hooks"; -import VideoInput from "v2/view/pages/video_mocap/components/VideoInput"; +import VideoInput from "components/common/VideoInput"; export default function TabContentUpload(props: { t: Function;