From 6e6a442ed8b9590f40dc069ba0bbf0c951291c37 Mon Sep 17 00:00:00 2001 From: wil Date: Tue, 30 Jan 2024 13:02:06 -0500 Subject: [PATCH 1/4] basic layout copied from Video Mocap --- .../src/components/common/index.tsx | 2 + .../fakeyou.com/src/v2/view/PageContainer.tsx | 14 ++++ .../storyteller_filter/StorytellerFilter.tsx | 73 ++++++++++++++++ .../components/tabContentLibrary.tsx | 27 ++++++ .../components/tabContentUpload.tsx | 84 +++++++++++++++++++ .../view/pages/storyteller_filter/index.tsx | 1 + .../storytellerFilterReducer.tsx | 53 ++++++++++++ .../v2/view/pages/video_mocap/VideoMocap.tsx | 3 +- 8 files changed, 255 insertions(+), 2 deletions(-) create mode 100644 packages/fakeyou.com/src/v2/view/pages/storyteller_filter/StorytellerFilter.tsx create mode 100644 packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/tabContentLibrary.tsx create mode 100644 packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/tabContentUpload.tsx create mode 100644 packages/fakeyou.com/src/v2/view/pages/storyteller_filter/index.tsx create mode 100644 packages/fakeyou.com/src/v2/view/pages/storyteller_filter/storytellerFilterReducer.tsx diff --git a/packages/fakeyou.com/src/components/common/index.tsx b/packages/fakeyou.com/src/components/common/index.tsx index 069b13cf3d..6431e33fc7 100644 --- a/packages/fakeyou.com/src/components/common/index.tsx +++ b/packages/fakeyou.com/src/components/common/index.tsx @@ -22,6 +22,7 @@ import Skeleton from "./Skeleton"; import Slider from "./Slider"; import Spinner from "./Spinner"; import SplitPanel from "./SplitPanel"; +import Tabs from "./Tabs"; import TempAudioPlayer from "./TempAudioPlayer"; import TempInput from "./TempInput"; import TempSelect from "./TempSelect"; @@ -53,6 +54,7 @@ export { Slider, Spinner, SplitPanel, + Tabs, TempAudioPlayer, TempInput, TempSelect, diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx index db4181f78a..75b7c7d119 100644 --- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx +++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx @@ -108,6 +108,7 @@ import UploadSdWeightPage from "./pages/upload/UploadSdWeightPage"; import { FooterNav } from "./nav/FooterNav"; import FbxToGltfPage from "./pages/fbx_to_gltf/FbxToGltfPage"; import UploadLoraWeightPage from "./pages/upload/UploadLoraWeightPage"; +import StorytellerFilterPage from "./pages/storyteller_filter/StorytellerFilter"; interface Props { sessionWrapper: SessionWrapper; @@ -818,6 +819,19 @@ class PageContainer extends React.Component< /> + + + + void; + inferenceJobs: Array; + inferenceJobsByCategory: Map>; +}){ + const { t } = useLocalize("StorytellerFilter"); + const { NO_FILE, FILE_UPLOADING, FILE_LOADED } = states; + const [pageState, dispatchPageState] = useReducer(reducer, { + status: NO_FILE, + }); + + const tabs = [ + { + label: t("tabTitle.upload"), + content: , + to: "/storyteller-filter/upload", + padding: true, + }, + { + label: t("tabTitle.library"), + content: , + to: "/storyteller-filter/select-media", + padding: true, + }, + ]; + + return( + + + +
+
+ + + +
+
+ + + +
+
+ + + ); +} \ No newline at end of file diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/tabContentLibrary.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/tabContentLibrary.tsx new file mode 100644 index 0000000000..2904252844 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/tabContentLibrary.tsx @@ -0,0 +1,27 @@ +import SelectModal from "components/common/SelectModal/SelectModal"; +import React from "react"; +import { Action, State } from "../storytellerFilterReducer"; + +export default function TabContentLibrary(props: { + t: Function; + pageState: State; + dispatchPageState: (action: Action) => void; +}){ + return ( +
+ +
+ ); +} diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/tabContentUpload.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/tabContentUpload.tsx new file mode 100644 index 0000000000..d1f604fce8 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/tabContentUpload.tsx @@ -0,0 +1,84 @@ +import React from "react"; +import { v4 as uuidv4 } from "uuid"; + +import { UploadMedia } from "@storyteller/components/src/api/media_files/UploadMedia"; +import { useFile } from "hooks"; + +import VideoInput from "components/common/VideoInput"; +import { states, Action, State } from "../storytellerFilterReducer"; + +export default function TabContentUpload({t, pageState, dispatchPageState}: { + t: Function; + pageState: State; + dispatchPageState: (action: Action) => void; +}) { + const videoProps = useFile({}); + const {NO_FILE, FILE_STAGED} = states; + + + const makeVideoUploadRequest = () => ({ + uuid_idempotency_token: uuidv4(), + file: videoProps.file, + source: "file", + type: "video", + }); + + const handleUploadVideo = () => { + dispatchPageState({type: 'uploadFile'}); + UploadMedia(makeVideoUploadRequest()).then(res => { + if (res.success && res.media_file_token) { + dispatchPageState({ + type: 'uploadFileSuccess', + payload:{ + mediaFileToken :res.media_file_token + } + }) + } + }); + }; + + // contains upload inout state and controls, see docs + if (pageState.status === NO_FILE || pageState.status === FILE_STAGED) { + return ( + <> +
+
+ { + if (pageState.status === NO_FILE && videoProps.file) + dispatchPageState({type: "stagedFile"}) + else if (pageState.status === FILE_STAGED && !videoProps.file) + dispatchPageState({type: "clearedFile"}) + } + }} + /> +
+
+ +
+
+
+ +
+
+
+ + ); + } + return ( +
+
+

{t("message.UnknownError")}

+
+
+ ); +} diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/index.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/index.tsx new file mode 100644 index 0000000000..63e195f307 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/index.tsx @@ -0,0 +1 @@ +export { default } from './StorytellerFilter'; \ No newline at end of file diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/storytellerFilterReducer.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/storytellerFilterReducer.tsx new file mode 100644 index 0000000000..665aefda57 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/storytellerFilterReducer.tsx @@ -0,0 +1,53 @@ + +export enum states{ + NO_FILE, + FILE_STAGED, + FILE_UPLOADING, + FILE_UPLOADED, + FILE_LOADED, + // MOCAPNET_ENQUEUEING, + // MOCAPNET_ENQUEUED, +} + +export type State = { + status: number; + mediaFileToken?: string; + inferenceJobToken?: string; +} + +export type Action = + | {type: 'uploadFile'} + | {type: 'stagedFile'} + | {type: 'clearedFile'} + | {type: 'uploadFileSuccess', payload:{ mediaFileToken: string}} + // | {type: 'enqueueMocapNet'} + // | {type: 'enqueueMocapNetSuccess', payload: {inferenceJobToken: string|undefined}} + +export function reducer (state: State, action: Action): State { + console.log(action); + switch(action.type){ + case 'stagedFile': + return {...state, status: states.FILE_STAGED} + case 'clearedFile': + return {...state, status: states.NO_FILE} + case 'uploadFile': + return {...state,status: states.FILE_UPLOADING}; + case 'uploadFileSuccess': + return { + ...state, + status: states.FILE_UPLOADED, + mediaFileToken: action.payload.mediaFileToken + } + // case 'enqueueMocapNet': + // return {...state, status:states.MOCAPNET_ENQUEUEING} + // case 'enqueueMocapNetSuccess': + // return { + // ...state, + // status: states.MOCAPNET_ENQUEUED, + // inferenceJobToken: action.payload.inferenceJobToken + // }; + default: + return {status: states.NO_FILE}; + + } +} \ No newline at end of file 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 adf112cec9..77cedbd15a 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 @@ -6,9 +6,8 @@ import { InferenceJob, } from "@storyteller/components/src/jobs/InferenceJob"; -import { BasicVideo, Button, Container, Panel } from "components/common"; +import { BasicVideo, Button, Container, Panel, Tabs } from "components/common"; import PageHeader from "components/layout/PageHeader"; -import Tabs from "components/common/Tabs"; import { useInferenceJobs, useLocalize } from "hooks"; import TabContentUpload from "./components/tabContentUpload"; From f6dc1fda6ad8d41d6aebbc10069c84dd29f206d6 Mon Sep 17 00:00:00 2001 From: wil Date: Tue, 30 Jan 2024 16:46:35 -0500 Subject: [PATCH 2/4] upload file and proceed to filter controls done --- .../src/components/common/ErrorMessage.tsx | 12 ++++ .../src/components/common/index.tsx | 6 +- .../storyteller_filter/StorytellerFilter.tsx | 62 +++++++------------ .../components/pageFilterControls.tsx | 54 ++++++++++++++++ .../components/pageVideoProvision.tsx | 60 ++++++++++++++++++ .../components/tabContentUpload.tsx | 24 ++++--- .../storytellerFilterReducer.tsx | 29 +++++---- 7 files changed, 184 insertions(+), 63 deletions(-) create mode 100644 packages/fakeyou.com/src/components/common/ErrorMessage.tsx create mode 100644 packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx create mode 100644 packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageVideoProvision.tsx diff --git a/packages/fakeyou.com/src/components/common/ErrorMessage.tsx b/packages/fakeyou.com/src/components/common/ErrorMessage.tsx new file mode 100644 index 0000000000..53ed728b6c --- /dev/null +++ b/packages/fakeyou.com/src/components/common/ErrorMessage.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { useLocalize } from "hooks"; +export default function Error({message}:{message?:string}){ + const {t} = useLocalize("App") + return ( +
+
+

{message ? message : t("error.unknownError")}

+
+
+ ); +} \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/common/index.tsx b/packages/fakeyou.com/src/components/common/index.tsx index 6431e33fc7..ecda0ea903 100644 --- a/packages/fakeyou.com/src/components/common/index.tsx +++ b/packages/fakeyou.com/src/components/common/index.tsx @@ -5,6 +5,7 @@ import Button from "./Button"; import Checkbox from "./Checkbox"; import Container from "./Container"; import CoverImageInput from "./CoverImageInput"; +import ErrorMessage from "./ErrorMessage" import FileActions from "./FileActions"; import FileDetails from "./FileDetails"; import FileWrapper from "./FileWrapper"; @@ -28,6 +29,7 @@ import TempInput from "./TempInput"; import TempSelect from "./TempSelect"; import TempTextArea from "./TempTextArea"; import TintSpinner from "./TintSpinner"; +import VideoInput from "./VideoInput"; export { AudioBlobPreview, @@ -37,6 +39,7 @@ export { Checkbox, Container, CoverImageInput, + ErrorMessage, FileActions, FileDetails, FileWrapper, @@ -59,5 +62,6 @@ export { TempInput, TempSelect, TempTextArea, - TintSpinner + TintSpinner, + VideoInput }; \ No newline at end of file diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/StorytellerFilter.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/StorytellerFilter.tsx index a6106ca49e..7949bff815 100644 --- a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/StorytellerFilter.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/StorytellerFilter.tsx @@ -1,17 +1,13 @@ import React, {useReducer } from 'react'; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; - - -import { useInferenceJobs, useLocalize } from "hooks"; +import { useLocalize } from "hooks"; import { FrontendInferenceJobType, InferenceJob } from '@storyteller/components/src/jobs/InferenceJob'; -import { BasicVideo, Button, Container, Panel, Tabs } from "components/common"; +import { Container, ErrorMessage } from "components/common"; import PageHeader from "components/layout/PageHeader"; -import TabContentUpload from "./components/tabContentUpload"; -import TabContentLibrary from "./components/tabContentLibrary"; - +import PageVideoProvision from './components/pageVideoProvision'; +import PageFilterControls from './components/pageFilterControls'; import { states, reducer } from "./storytellerFilterReducer"; @@ -23,26 +19,28 @@ export default function StorytellerFilter(props:{ inferenceJobs: Array; inferenceJobsByCategory: Map>; }){ + const debug=true; const { t } = useLocalize("StorytellerFilter"); - const { NO_FILE, FILE_UPLOADING, FILE_LOADED } = states; + const { NO_FILE, FILE_STAGED, FILE_UPLOADING, FILE_UPLOADED, FILE_LOADING, FILE_LOADED } = states; const [pageState, dispatchPageState] = useReducer(reducer, { status: NO_FILE, }); - const tabs = [ - { - label: t("tabTitle.upload"), - content: , - to: "/storyteller-filter/upload", - padding: true, - }, - { - label: t("tabTitle.library"), - content: , - to: "/storyteller-filter/select-media", - padding: true, - }, - ]; + const pagePicker = () => { + switch (pageState.status){ + case NO_FILE: + case FILE_STAGED: + case FILE_UPLOADING: + return + case FILE_UPLOADED: + case FILE_LOADING: + case FILE_LOADED: + return + default: + return + } + } + const currPage = pagePicker(); return( @@ -51,23 +49,7 @@ export default function StorytellerFilter(props:{ subText={t("headings.subtitle")} // imageUrl="/images/header/video-mocap.png" /> - -
-
- - - -
-
- - - -
-
- + {currPage} ); } \ No newline at end of file diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx new file mode 100644 index 0000000000..57d0b98005 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx @@ -0,0 +1,54 @@ +import React from "react"; +import { useMedia } from "hooks"; +import { BucketConfig } from "@storyteller/components/src/api/BucketConfig"; +import { states, Action, State } from "../storytellerFilterReducer"; +import { BasicVideo, ErrorMessage, Panel, Spinner } from "components/common"; + +export default function PageFilterControls({ + debug=false, t, pageState, dispatchPageState +}: { + debug?: boolean; + t: Function; + pageState: State; + dispatchPageState: (action: Action) => void; +}) { + useMedia({ + mediaToken: pageState.mediaFileToken, + onSuccess: (res: any) => { + // ratings.gather({ res, key: "token" }); + console.log(res) + dispatchPageState({ + type: 'loadFileSuccess', + payload: {mediaFile: res} + }) + }, + }); + + if (pageState.mediaFile){ + const mediaLink = new BucketConfig().getGcsUrl(pageState.mediaFile.public_bucket_path); + if (mediaLink) + return( + +
+ {/*

{t("message.fileUploaded")}

*/} + {debug &&

{`File Token: ${pageState.mediaFileToken}`}

} +
+ +
+
+ +
+
+ + ); + }else if (pageState.status <= states.FILE_LOADING){ + return ( + + {debug &&

{`File Token: ${pageState.mediaFileToken}`}

} +

Loading Files

+ + + ); + } + return ; +} \ No newline at end of file diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageVideoProvision.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageVideoProvision.tsx new file mode 100644 index 0000000000..095356ae63 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageVideoProvision.tsx @@ -0,0 +1,60 @@ +import React from "react"; +import { Redirect, useLocation } from "react-router-dom"; + +import { BasicVideo, Panel, Tabs } from "components/common"; + +import { Action, State } from "../storytellerFilterReducer"; +import TabContentUpload from "./tabContentUpload"; +import TabContentLibrary from "./tabContentLibrary"; + +export default function PageVideoProvision({ + debug=false, t, pageState, dispatchPageState +}: { + debug?: boolean; + t: Function; + pageState: State; + dispatchPageState: (action: Action) => void; +}) { + const tabs = [ + { + label: t("tabTitle.upload"), + content: , + to: "/storyteller-filter/upload", + padding: true, + }, + { + label: t("tabTitle.library"), + content: , + to: "/storyteller-filter/select-media", + padding: true, + }, + ]; + + //pick default tab using pathname + const { pathname } = useLocation(); + if (pathname === "/storyteller-filter" || pathname === "/storyteller-filter/") { + return ; + } + + return( + +
+
+ +
+
+ + + +
+
+ + ); +} \ No newline at end of file diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/tabContentUpload.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/tabContentUpload.tsx index d1f604fce8..b985ee9bc8 100644 --- a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/tabContentUpload.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/tabContentUpload.tsx @@ -3,18 +3,19 @@ import { v4 as uuidv4 } from "uuid"; import { UploadMedia } from "@storyteller/components/src/api/media_files/UploadMedia"; import { useFile } from "hooks"; - -import VideoInput from "components/common/VideoInput"; +import { ErrorMessage, VideoInput, Spinner } from "components/common"; import { states, Action, State } from "../storytellerFilterReducer"; -export default function TabContentUpload({t, pageState, dispatchPageState}: { +export default function TabContentUpload({ + debug=false, t, pageState, dispatchPageState +}: { + debug?: boolean; t: Function; pageState: State; dispatchPageState: (action: Action) => void; }) { const videoProps = useFile({}); - const {NO_FILE, FILE_STAGED} = states; - + const {NO_FILE, FILE_STAGED, FILE_UPLOADING} = states; const makeVideoUploadRequest = () => ({ uuid_idempotency_token: uuidv4(), @@ -73,12 +74,17 @@ export default function TabContentUpload({t, pageState, dispatchPageState}: { ); - } - return ( + }else if (pageState.status === FILE_UPLOADING){ + return(
-

{t("message.UnknownError")}

+

{t("message.fileUploading")}

+
+
+
- ); + ); + } + return ; } diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/storytellerFilterReducer.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/storytellerFilterReducer.tsx index 665aefda57..b0fd1cec6c 100644 --- a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/storytellerFilterReducer.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/storytellerFilterReducer.tsx @@ -1,27 +1,29 @@ +import { MediaFile } from "@storyteller/components/src/api/media_files/GetMediaFile"; export enum states{ NO_FILE, FILE_STAGED, FILE_UPLOADING, FILE_UPLOADED, + FILE_LOADING, FILE_LOADED, - // MOCAPNET_ENQUEUEING, - // MOCAPNET_ENQUEUED, } export type State = { status: number; mediaFileToken?: string; + mediaFile?: MediaFile; inferenceJobToken?: string; } export type Action = - | {type: 'uploadFile'} | {type: 'stagedFile'} | {type: 'clearedFile'} + | {type: 'uploadFile'} | {type: 'uploadFileSuccess', payload:{ mediaFileToken: string}} - // | {type: 'enqueueMocapNet'} - // | {type: 'enqueueMocapNetSuccess', payload: {inferenceJobToken: string|undefined}} + | {type: 'loadFile'} + | {type: 'loadFileSuccess', payload:{mediaFile: MediaFile}} + export function reducer (state: State, action: Action): State { console.log(action); @@ -38,14 +40,15 @@ export function reducer (state: State, action: Action): State { status: states.FILE_UPLOADED, mediaFileToken: action.payload.mediaFileToken } - // case 'enqueueMocapNet': - // return {...state, status:states.MOCAPNET_ENQUEUEING} - // case 'enqueueMocapNetSuccess': - // return { - // ...state, - // status: states.MOCAPNET_ENQUEUED, - // inferenceJobToken: action.payload.inferenceJobToken - // }; + case 'loadFile': + return {...state, status: states.FILE_LOADING} + case 'loadFileSuccess': + console.log("LOAD FILE SUCCESS"); + return { + ...state, + status: states.FILE_LOADED, + mediaFile: action.payload.mediaFile + } default: return {status: states.NO_FILE}; From 5be7ae5d7265d8c181839c631e15f30d7ed54778 Mon Sep 17 00:00:00 2001 From: wil Date: Tue, 30 Jan 2024 17:58:21 -0500 Subject: [PATCH 3/4] fixed up selected modal to deliver selected value on select, now can select video to filter page, as well as video mocap page --- .../common/SelectModal/SelectModal.tsx | 14 +++++++++- .../storyteller_filter/StorytellerFilter.tsx | 3 +- .../components/tabContentLibrary.tsx | 25 +++++++++++++++-- .../storytellerFilterReducer.tsx | 8 ++++++ .../v2/view/pages/video_mocap/VideoMocap.tsx | 4 ++- .../components/pageVideoMocapProgress.tsx | 10 +++++-- .../components/tabContentLibrary.tsx | 28 +++++++++++++++++-- .../pages/video_mocap/videoMocapReducer.tsx | 14 ++++++++-- 8 files changed, 92 insertions(+), 14 deletions(-) diff --git a/packages/fakeyou.com/src/components/common/SelectModal/SelectModal.tsx b/packages/fakeyou.com/src/components/common/SelectModal/SelectModal.tsx index b759f276ca..c727451f12 100644 --- a/packages/fakeyou.com/src/components/common/SelectModal/SelectModal.tsx +++ b/packages/fakeyou.com/src/components/common/SelectModal/SelectModal.tsx @@ -21,12 +21,14 @@ interface SelectModalProps { label?: string; tabs: TabConfig[]; modalTitle?: string; + onSelect?: (token: string)=>void; } const SelectModal = memo( - ({ label, tabs, modalTitle = "Select" }: SelectModalProps) => { + ({ label, tabs, modalTitle = "Select", onSelect }: SelectModalProps) => { const [isModalOpen, setIsModalOpen] = useState(false); const { token, setToken, weightTitle, setWeightTitle } = useToken(); + const [selectedValue, setSelectedValue] = useState(""); const [activeTab, setActiveTab] = useState(tabs[0].tabKey); const [mediaType, setMediaType] = useState( tabs[0].mediaTypeFilter || "all" @@ -42,6 +44,16 @@ const SelectModal = memo( setWeightType(currentTab?.mediaTypeFilter || "all"); }, [activeTab, tabs]); + useEffect(()=>{ + if(token && token !== selectedValue && onSelect){ + setSelectedValue(token); + onSelect(token); + }else if(weightTitle && weightTitle !== selectedValue && onSelect){ + setSelectedValue(weightTitle); + onSelect(weightTitle); + } + }, [token, weightTitle, selectedValue, onSelect]); + const openModal = () => { setIsModalOpen(true); }; diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/StorytellerFilter.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/StorytellerFilter.tsx index 7949bff815..2e223acdf9 100644 --- a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/StorytellerFilter.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/StorytellerFilter.tsx @@ -21,7 +21,7 @@ export default function StorytellerFilter(props:{ }){ const debug=true; const { t } = useLocalize("StorytellerFilter"); - const { NO_FILE, FILE_STAGED, FILE_UPLOADING, FILE_UPLOADED, FILE_LOADING, FILE_LOADED } = states; + const { NO_FILE, FILE_STAGED, FILE_UPLOADING, FILE_UPLOADED, FILE_SELECTED, FILE_LOADING, FILE_LOADED } = states; const [pageState, dispatchPageState] = useReducer(reducer, { status: NO_FILE, }); @@ -31,6 +31,7 @@ export default function StorytellerFilter(props:{ case NO_FILE: case FILE_STAGED: case FILE_UPLOADING: + case FILE_SELECTED: return case FILE_UPLOADED: case FILE_LOADING: diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/tabContentLibrary.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/tabContentLibrary.tsx index 2904252844..7608460c6f 100644 --- a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/tabContentLibrary.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/tabContentLibrary.tsx @@ -1,17 +1,30 @@ import SelectModal from "components/common/SelectModal/SelectModal"; import React from "react"; -import { Action, State } from "../storytellerFilterReducer"; - -export default function TabContentLibrary(props: { +import { states, Action, State } from "../storytellerFilterReducer"; +import { Button } from "components/common"; +export default function TabContentLibrary({ + t, pageState, dispatchPageState +}: { t: Function; pageState: State; dispatchPageState: (action: Action) => void; }){ + + const handleProceed = ()=>{ + dispatchPageState({type: "loadFile"}) + } + const handleOnSelect = (token:string)=>{ + dispatchPageState({ + type: "selectedFile", + payload: {mediaFileToken: token} + }); + }; return (
+ {pageState.status === states.FILE_SELECTED && +
); } diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/storytellerFilterReducer.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/storytellerFilterReducer.tsx index b0fd1cec6c..1362a3ab13 100644 --- a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/storytellerFilterReducer.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/storytellerFilterReducer.tsx @@ -3,6 +3,7 @@ import { MediaFile } from "@storyteller/components/src/api/media_files/GetMediaF export enum states{ NO_FILE, FILE_STAGED, + FILE_SELECTED, FILE_UPLOADING, FILE_UPLOADED, FILE_LOADING, @@ -19,6 +20,7 @@ export type State = { export type Action = | {type: 'stagedFile'} | {type: 'clearedFile'} + | {type: 'selectedFile', payload: { mediaFileToken: string}} | {type: 'uploadFile'} | {type: 'uploadFileSuccess', payload:{ mediaFileToken: string}} | {type: 'loadFile'} @@ -32,6 +34,12 @@ export function reducer (state: State, action: Action): State { return {...state, status: states.FILE_STAGED} case 'clearedFile': return {...state, status: states.NO_FILE} + case 'selectedFile': + return { + ...state, + status: states.FILE_SELECTED, + mediaFileToken: action.payload.mediaFileToken + } case 'uploadFile': return {...state,status: states.FILE_UPLOADING}; case 'uploadFileSuccess': 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 77cedbd15a..4da8349c19 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 @@ -129,7 +129,9 @@ export default function VideoMotionCapture(props: { icon={faArrowRotateLeft} iconFlip={true} label="Generate Another" - onClick={() => {}} //back to first state + onClick={() => { + dispatchPageState({type:"restart"}) + }} //back to first state variant="primary" /> diff --git a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/pageVideoMocapProgress.tsx b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/pageVideoMocapProgress.tsx index 77ec2d270a..e59f27083e 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/pageVideoMocapProgress.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/pageVideoMocapProgress.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, {useEffect} from "react"; import { v4 as uuidv4 } from "uuid"; import { EnqueueVideoMotionCapture } from "@storyteller/components/src/api/video_mocap"; @@ -21,8 +21,8 @@ export default function PageVideoMocapProgress({ pageState: State; dispatchPageState: (action: Action) => void; }) { - const { FILE_UPLOADING, FILE_UPLOADED, MOCAPNET_ENQUEUEING } = states; - + const { FILE_UPLOADING, FILE_UPLOADED, FILE_SELECTED, MOCAPNET_ENQUEUEING } = states; + const handleEnqueueMocapNet = () => { if (pageState.mediaFileToken) { const request = { @@ -43,6 +43,10 @@ export default function PageVideoMocapProgress({ } }; + if (pageState.status === FILE_SELECTED){ + handleEnqueueMocapNet(); + } + if (pageState.status === FILE_UPLOADING) { return (
diff --git a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx index 4136300a2e..3a748319aa 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx @@ -1,17 +1,33 @@ import SelectModal from "components/common/SelectModal/SelectModal"; -import React from "react"; -import { Action, State } from "../videoMocapReducer"; +import React, {useState} from "react"; +import { states, Action, State } from "../videoMocapReducer"; +import { Button } from "components/common"; -export default function TabContentLibrary(props: { +export default function TabContentLibrary({ + t, pageState, dispatchPageState +}: { t: Function; pageState: State; dispatchPageState: (action: Action) => void; }){ + const [token, setToken] = useState(); + const handleProceed = ()=>{ + if(token) + dispatchPageState({ + type: "selectedFile", + payload: {mediaFileToken: token} + }); + } + const handleOnSelect = (token:string)=>{ + setToken(token); + }; + return (
+ {token && +
); } diff --git a/packages/fakeyou.com/src/v2/view/pages/video_mocap/videoMocapReducer.tsx b/packages/fakeyou.com/src/v2/view/pages/video_mocap/videoMocapReducer.tsx index a9050fc6a9..236e747404 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_mocap/videoMocapReducer.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_mocap/videoMocapReducer.tsx @@ -4,6 +4,7 @@ export enum states{ FILE_STAGED, FILE_UPLOADING, FILE_UPLOADED, + FILE_SELECTED, MOCAPNET_ENQUEUEING, MOCAPNET_ENQUEUED, } @@ -15,20 +16,29 @@ export type State = { } export type Action = - | {type: 'uploadFile'} + | {type: 'restart'} | {type: 'stagedFile'} | {type: 'clearedFile'} + | {type: 'selectedFile', payload:{ mediaFileToken: string}} + | {type: 'uploadFile'} | {type: 'uploadFileSuccess', payload:{ mediaFileToken: string}} | {type: 'enqueueMocapNet'} | {type: 'enqueueMocapNetSuccess', payload: {inferenceJobToken: string|undefined}} export function reducer (state: State, action: Action): State { - console.log(action); switch(action.type){ + case 'restart': + return { status: states.NO_FILE } case 'stagedFile': return {...state, status: states.FILE_STAGED} case 'clearedFile': return {...state, status: states.NO_FILE} + case 'selectedFile': + return { + ...state, + status: states.FILE_SELECTED, + mediaFileToken: action.payload.mediaFileToken + } case 'uploadFile': return {...state,status: states.FILE_UPLOADING}; case 'uploadFileSuccess': From 7484cc7ef731752506d26a009da9bbbddaad8b0a Mon Sep 17 00:00:00 2001 From: wil Date: Tue, 30 Jan 2024 18:11:37 -0500 Subject: [PATCH 4/4] squashing warnings --- .../pages/video_mocap/components/pageVideoMocapProgress.tsx | 2 +- .../v2/view/pages/video_mocap/components/tabContentLibrary.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/pageVideoMocapProgress.tsx b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/pageVideoMocapProgress.tsx index e59f27083e..5e0b257bcd 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/pageVideoMocapProgress.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/pageVideoMocapProgress.tsx @@ -1,4 +1,4 @@ -import React, {useEffect} from "react"; +import React from "react"; import { v4 as uuidv4 } from "uuid"; import { EnqueueVideoMotionCapture } from "@storyteller/components/src/api/video_mocap"; diff --git a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx index 3a748319aa..1815023dbe 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx @@ -1,6 +1,6 @@ import SelectModal from "components/common/SelectModal/SelectModal"; import React, {useState} from "react"; -import { states, Action, State } from "../videoMocapReducer"; +import { Action, State } from "../videoMocapReducer"; import { Button } from "components/common"; export default function TabContentLibrary({