From 33ef4202612b7886b7cef9f9873d389f126458ec Mon Sep 17 00:00:00 2001 From: Victor Date: Thu, 1 Aug 2024 16:35:41 -0700 Subject: [PATCH] replaced old upload endpoint with audio/image/video endpoints, fixed cover image input --- .../src/api/media_files/UploadAudioMedia.ts | 17 +++ .../src/api/media_files/UploadImageMedia.ts | 18 +++ .../src/api/media_files/UploadVideoMedia.ts | 20 +++ .../components/src/api/weights/GetWeight.ts | 3 +- .../CoverImageInput/CoverImageInput.scss | 4 + .../CoverImageInput/CoverImageInput.tsx | 9 +- .../useCoverImgUpload/useCoverImgUpload.tsx | 16 +-- .../useMediaUploader/useMediaUploader.tsx | 69 +++++---- .../hooks/useWeightFetch/useWeightFetch.tsx | 55 +++++-- .../view/pages/fbx_to_gltf/FbxToGltfPage.tsx | 1 - .../v2/view/pages/weight/WeightEditPage.tsx | 134 +++++++++--------- 11 files changed, 223 insertions(+), 123 deletions(-) create mode 100644 src/website/packages/components/src/api/media_files/UploadAudioMedia.ts create mode 100644 src/website/packages/components/src/api/media_files/UploadImageMedia.ts create mode 100644 src/website/packages/components/src/api/media_files/UploadVideoMedia.ts diff --git a/src/website/packages/components/src/api/media_files/UploadAudioMedia.ts b/src/website/packages/components/src/api/media_files/UploadAudioMedia.ts new file mode 100644 index 0000000000..947f1d843a --- /dev/null +++ b/src/website/packages/components/src/api/media_files/UploadAudioMedia.ts @@ -0,0 +1,17 @@ +import MakeMultipartRequest from "../MakeMultipartRequest"; + +export interface UploadAudioMediaRequest { + file: any; + maybe_title?: string; + maybe_visibility?: "public" | "private"; + uuid_idempotency_token: string; +} + +export interface UploadAudioMediaResponse { + media_file_token: string; + success: boolean; +} + +export const UploadAudioMedia = (request: UploadAudioMediaRequest) => { + return MakeMultipartRequest("/v1/media_files/upload/audio", request); +}; diff --git a/src/website/packages/components/src/api/media_files/UploadImageMedia.ts b/src/website/packages/components/src/api/media_files/UploadImageMedia.ts new file mode 100644 index 0000000000..81ed1e7f05 --- /dev/null +++ b/src/website/packages/components/src/api/media_files/UploadImageMedia.ts @@ -0,0 +1,18 @@ +import MakeMultipartRequest from "../MakeMultipartRequest"; + +export interface UploadImageMediaRequest { + file: any; + is_intermediate_system_file?: boolean; + maybe_title?: string; + maybe_visibility?: "public" | "private"; + uuid_idempotency_token: string; +} + +export interface UploadImageMediaResponse { + media_file_token: string; + success: boolean; +} + +export const UploadImageMedia = (request: UploadImageMediaRequest) => { + return MakeMultipartRequest("/v1/media_files/upload/image", request); +}; diff --git a/src/website/packages/components/src/api/media_files/UploadVideoMedia.ts b/src/website/packages/components/src/api/media_files/UploadVideoMedia.ts new file mode 100644 index 0000000000..5d1f96483f --- /dev/null +++ b/src/website/packages/components/src/api/media_files/UploadVideoMedia.ts @@ -0,0 +1,20 @@ +import MakeMultipartRequest from "../MakeMultipartRequest"; + +export interface UploadVideoMediaRequest { + file: any; + is_intermediate_system_file?: boolean; + maybe_scene_source_media_file_token?: string; + maybe_style_name?: string; + maybe_title?: string; + maybe_visibility?: "public" | "private"; + uuid_idempotency_token: string; +} + +export interface UploadVideoMediaResponse { + media_file_token: string; + success: boolean; +} + +export const UploadVideoMedia = (request: UploadVideoMediaRequest) => { + return MakeMultipartRequest("/v1/media_files/upload/video", request); +}; diff --git a/src/website/packages/components/src/api/weights/GetWeight.ts b/src/website/packages/components/src/api/weights/GetWeight.ts index 43d84836a4..1dd4fad90e 100644 --- a/src/website/packages/components/src/api/weights/GetWeight.ts +++ b/src/website/packages/components/src/api/weights/GetWeight.ts @@ -30,9 +30,8 @@ export interface Weight { export interface GetWeightRequest {} -export interface GetWeightResponse { +export interface GetWeightResponse extends Weight { success: boolean; - weight?: Weight; } export const GetWeight = MakeRequest< diff --git a/src/website/packages/fakeyou.com/src/components/common/CoverImageInput/CoverImageInput.scss b/src/website/packages/fakeyou.com/src/components/common/CoverImageInput/CoverImageInput.scss index ba80ee2bdd..2a20abab64 100644 --- a/src/website/packages/fakeyou.com/src/components/common/CoverImageInput/CoverImageInput.scss +++ b/src/website/packages/fakeyou.com/src/components/common/CoverImageInput/CoverImageInput.scss @@ -1,5 +1,9 @@ @import "scss/colours.scss"; +.fy-cover-img-empty { + width: 100%; +} + .fy-cover-img-input { // background-color: red; position: relative; diff --git a/src/website/packages/fakeyou.com/src/components/common/CoverImageInput/CoverImageInput.tsx b/src/website/packages/fakeyou.com/src/components/common/CoverImageInput/CoverImageInput.tsx index bf14159b37..9cd1767bb1 100644 --- a/src/website/packages/fakeyou.com/src/components/common/CoverImageInput/CoverImageInput.tsx +++ b/src/website/packages/fakeyou.com/src/components/common/CoverImageInput/CoverImageInput.tsx @@ -52,14 +52,17 @@ export default function CoverImageInput({ status, ...rest }: Props) { - const [editingImg, editingImgSet] = useState(0); - const transitions = useTransition(editingImg, basicTransition({})); + const [editingImg, editingImgSet] = useState(currentPath ? 0 : 1); + const transitions = useTransition( + editingImg, + basicTransition({ enter: { opacity: 1.0, position: "absolute" } }) + ); return (
{transitions((style, i) => !currentPath || i ? ( - + 1, placeholderIcon: faImage }} > diff --git a/src/website/packages/fakeyou.com/src/hooks/useCoverImgUpload/useCoverImgUpload.tsx b/src/website/packages/fakeyou.com/src/hooks/useCoverImgUpload/useCoverImgUpload.tsx index 6eb874cee5..47ead0c3f0 100644 --- a/src/website/packages/fakeyou.com/src/hooks/useCoverImgUpload/useCoverImgUpload.tsx +++ b/src/website/packages/fakeyou.com/src/hooks/useCoverImgUpload/useCoverImgUpload.tsx @@ -1,10 +1,12 @@ -import { useState } from 'react'; -import { UploadMedia, UploadMediaResponse } from "@storyteller/components/src/api/media_files/UploadMedia"; +import { useState } from "react"; +import { + UploadImageMedia, + UploadImageMediaResponse, +} from "@storyteller/components/src/api/media_files/UploadImageMedia"; import { FetchStatus } from "@storyteller/components/src/api/_common/SharedFetchTypes"; import { v4 as uuidv4 } from "uuid"; import { useFile } from "hooks"; - export default function useCoverImgUpload() { const fileProps = useFile({}); const [token, tokenSet] = useState(""); @@ -13,12 +15,10 @@ export default function useCoverImgUpload() { const upload = (e: any) => { if (fileProps.file && status < 2) { statusSet(FetchStatus.in_progress); - UploadMedia({ + UploadImageMedia({ uuid_idempotency_token: uuidv4(), file: fileProps.file, - source: "file", - }) - .then((res: UploadMediaResponse) => { + }).then((res: UploadImageMediaResponse) => { if ("media_file_token" in res) { statusSet(FetchStatus.success); tokenSet(res.media_file_token); @@ -28,4 +28,4 @@ export default function useCoverImgUpload() { }; return { fileProps, status, token, upload }; -}; \ No newline at end of file +} diff --git a/src/website/packages/fakeyou.com/src/hooks/useMediaUploader/useMediaUploader.tsx b/src/website/packages/fakeyou.com/src/hooks/useMediaUploader/useMediaUploader.tsx index f439adf36f..5a6979637a 100644 --- a/src/website/packages/fakeyou.com/src/hooks/useMediaUploader/useMediaUploader.tsx +++ b/src/website/packages/fakeyou.com/src/hooks/useMediaUploader/useMediaUploader.tsx @@ -6,7 +6,9 @@ import { MediaFilters, UploaderResponse, } from "components/entities/EntityTypes"; -import { UploadMedia } from "@storyteller/components/src/api/media_files/UploadMedia"; +import { UploadAudioMedia } from "@storyteller/components/src/api/media_files/UploadAudioMedia"; +import { UploadImageMedia } from "@storyteller/components/src/api/media_files/UploadImageMedia"; +import { UploadVideoMedia } from "@storyteller/components/src/api/media_files/UploadVideoMedia"; import { UploadEngineAsset } from "@storyteller/components/src/api/media_files/UploadEngineAsset"; import { MediaFileSubtype } from "@storyteller/components/src/api/enums/MediaFileSubtype"; import { GetFileTypeByExtension as extension } from "@storyteller/components/src/utils/GetFileTypeByExtension"; @@ -29,35 +31,6 @@ export default function useMediaUploader({ autoUpload, onSuccess = n }: Props) { MediaFileSubtype | undefined >(); - const createUpload = (inputFile: File, todo = n) => { - statusSet(FetchStatus.in_progress); - const fileExtension = extension(inputFile.name || ""); - const isEngineAsset = isSelectedType( - MediaFilters.engine_asset, - fileExtension - ); - const baseConfig = { uuid_idempotency_token: uuidv4(), file: inputFile }; - const engineConfig = { - ...baseConfig, - media_file_subtype: engineSubtype, - media_file_class: mediaClass, - }; - const mediaConfig = { ...baseConfig, source: "file" }; - const uploader = isEngineAsset - ? UploadEngineAsset(engineConfig) - : UploadMedia(mediaConfig); - - if (inputFile) { - uploader.then((res: UploaderResponse) => { - if ("media_file_token" in res) { - statusSet(FetchStatus.success); - onSuccess(res); - todo(); - } - }); - } - }; - const { file, clear, inputProps } = useFile({ ...(autoUpload ? { @@ -68,6 +41,42 @@ export default function useMediaUploader({ autoUpload, onSuccess = n }: Props) { : {}), }); + const createUpload = (inputFile: File, todo = n) => { + statusSet(FetchStatus.in_progress); + const fileExtension = extension(inputFile.name || ""); + const isAudio = isSelectedType(MediaFilters.audio, fileExtension); + const isEngineAsset = isSelectedType( + MediaFilters.engine_asset, + fileExtension + ); + const isImage = isSelectedType(MediaFilters.image, fileExtension); + // const isVideo = isSelectedType(MediaFilters.video, fileExtension); + const baseConfig = { uuid_idempotency_token: uuidv4(), file: inputFile }; + const engineConfig = { + ...baseConfig, + media_file_subtype: engineSubtype, + media_file_class: mediaClass, + }; + const mediaConfig = { ...baseConfig, source: "file" }; + + const uploader = () => { + if (isAudio) return UploadAudioMedia(mediaConfig); + if (isEngineAsset) return UploadEngineAsset(engineConfig); + if (isImage) return UploadImageMedia(mediaConfig); + else return UploadVideoMedia(mediaConfig); + }; + + if (inputFile) { + uploader().then((res: UploaderResponse) => { + if ("media_file_token" in res) { + statusSet(FetchStatus.success); + onSuccess(res); + todo(); + } + }); + } + }; + const upload = () => { createUpload(file, clear); }; diff --git a/src/website/packages/fakeyou.com/src/hooks/useWeightFetch/useWeightFetch.tsx b/src/website/packages/fakeyou.com/src/hooks/useWeightFetch/useWeightFetch.tsx index 887cdc8dc0..0652d7d918 100644 --- a/src/website/packages/fakeyou.com/src/hooks/useWeightFetch/useWeightFetch.tsx +++ b/src/website/packages/fakeyou.com/src/hooks/useWeightFetch/useWeightFetch.tsx @@ -1,27 +1,35 @@ import { useEffect, useState } from "react"; import { useHistory } from "react-router-dom"; import { FetchStatus } from "@storyteller/components/src/api/_common/SharedFetchTypes"; -import { GetWeight, Weight } from "@storyteller/components/src/api/weights/GetWeight"; +import { + GetWeight, + Weight, +} from "@storyteller/components/src/api/weights/GetWeight"; import { UpdateWeight } from "@storyteller/components/src/api/weights/UpdateWeight"; import { DeleteWeight } from "@storyteller/components/src/api/weights/DeleteWeight"; import { useCoverImgUpload } from "hooks"; interface Props { - onSuccess?: (res: Weight) => any, - onRemove?: (x: any) => void, - token: string + onSuccess?: (res: Weight) => any; + onRemove?: (x: any) => void; + token: string; } const n = (x?: any) => {}; -export default function useWeightFetch({ onRemove = n, onSuccess = n, token }: Props) { +export default function useWeightFetch({ + onRemove = n, + onSuccess = n, + token, +}: Props) { const [data, setData] = useState(null); const [status, statusSet] = useState(FetchStatus.ready); const [writeStatus, writeStatusSet] = useState(FetchStatus.paused); const [title, titleSet] = useState(""); const [visibility, visibilitySet] = useState("public"); const [descriptionMD, descriptionMDSet] = useState(""); - const isLoading = status === FetchStatus.ready || status === FetchStatus.in_progress; + const isLoading = + status === FetchStatus.ready || status === FetchStatus.in_progress; const fetchError = status === FetchStatus.error; const history = useHistory(); const coverImg = useCoverImgUpload(); @@ -37,8 +45,10 @@ export default function useWeightFetch({ onRemove = n, onSuccess = n, token }: P const update = () => { writeStatusSet(FetchStatus.in_progress); - UpdateWeight(token,{ - ...coverImg.token ? { cover_image_media_file_token: coverImg.token } : {}, + UpdateWeight(token, { + ...(coverImg.token + ? { cover_image_media_file_token: coverImg.token } + : {}), description_markdown: descriptionMD, description_rendered_html: data?.description_rendered_html || "", title, @@ -65,14 +75,18 @@ export default function useWeightFetch({ onRemove = n, onSuccess = n, token }: P onRemove(res); }); }; - + useEffect(() => { if (token && !data && status === FetchStatus.ready) { statusSet(FetchStatus.in_progress); GetWeight(token, {}) .then((res: any) => { if (res.success) { - let { creator_set_visibility, description_markdown, title: resTitle } = res; + let { + creator_set_visibility, + description_markdown, + title: resTitle, + } = res; statusSet(FetchStatus.success); titleSet(resTitle); @@ -80,7 +94,9 @@ export default function useWeightFetch({ onRemove = n, onSuccess = n, token }: P visibilitySet(creator_set_visibility); onSuccess(res); setData(res); - } else { statusSet(FetchStatus.error); } + } else { + statusSet(FetchStatus.error); + } }) .catch(err => { statusSet(FetchStatus.error); @@ -88,5 +104,18 @@ export default function useWeightFetch({ onRemove = n, onSuccess = n, token }: P } }, [status, onSuccess, token, data]); - return { coverImg, data, fetchError, isLoading, descriptionMD, onChange, remove, status, title, update, visibility, writeStatus }; -}; + return { + coverImg, + data, + fetchError, + isLoading, + descriptionMD, + onChange, + remove, + status, + title, + update, + visibility, + writeStatus, + }; +} diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/fbx_to_gltf/FbxToGltfPage.tsx b/src/website/packages/fakeyou.com/src/v2/view/pages/fbx_to_gltf/FbxToGltfPage.tsx index c07cb1a8dd..9f96bb81f3 100644 --- a/src/website/packages/fakeyou.com/src/v2/view/pages/fbx_to_gltf/FbxToGltfPage.tsx +++ b/src/website/packages/fakeyou.com/src/v2/view/pages/fbx_to_gltf/FbxToGltfPage.tsx @@ -10,7 +10,6 @@ import { Button, Container, Panel } from "components/common"; import PageHeader from "components/layout/PageHeader"; // import { useHistory, useParams } from "react-router-dom"; // import { v4 as uuidv4 } from "uuid"; -// import { UploadMedia } from "@storyteller/components/src/api/media_files/UploadMedia"; // import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob"; import FbxToGltfJobList from "./components/FbxToGltfJobList"; import // EnqueueFbxToGltf, diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/weight/WeightEditPage.tsx b/src/website/packages/fakeyou.com/src/v2/view/pages/weight/WeightEditPage.tsx index 3c04ee4460..b97bfd6824 100644 --- a/src/website/packages/fakeyou.com/src/v2/view/pages/weight/WeightEditPage.tsx +++ b/src/website/packages/fakeyou.com/src/v2/view/pages/weight/WeightEditPage.tsx @@ -65,74 +65,76 @@ export default function WeightEditPage({ let weightToken = weight?.creator?.user_token; if (isLoading) { - return -
- - - - -
- - + return ( + +
+ + + + +
+ + +
-
- ; + + ); } else { - if (!weightToken) { - return ( - - -
- } - /> - - ); - } + if (!weightToken) { + return ( + + +
+ } + /> + + ); + } - if (!canEditTtsModel(user?.user_token || "")) { - return ( - - -