From f6dc1fda6ad8d41d6aebbc10069c84dd29f206d6 Mon Sep 17 00:00:00 2001 From: wil Date: Tue, 30 Jan 2024 16:46:35 -0500 Subject: [PATCH] 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};