mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-08 02:52:12 +00:00
restored dev-upload
This commit is contained in:
Victor committed
1 parent
d6f21c198f
commit
e658c29fba
2 files changed
+247
-63
No files matched your search
@@ -1,68 +1,142 @@
|
||||
import React, { useState } from "react";
|
||||
import Panel from "components/common/Panel";
|
||||
import Container from "components/common/Container";
|
||||
import PageHeader from "components/layout/PageHeader";
|
||||
import { useMediaUploader, useSession } from "hooks";
|
||||
import { Button, Container, Panel } from "components/common";
|
||||
import { UploaderResponse } from "components/entities/EntityTypes";
|
||||
import { useSession } from "hooks";
|
||||
import { Button } from "components/common";
|
||||
import { faUpload } from "@fortawesome/pro-solid-svg-icons";
|
||||
import { FileType, GetFileTypeByExtension } from "@storyteller/components/src/utils/GetFileTypeByExtension";
|
||||
import { UploadMedia, UploadMediaResponse, } from "@storyteller/components/src/api/media_files/UploadMedia";
|
||||
import { UploadEngineAsset, UploadEngineAssetResponse, } from "@storyteller/components/src/api/media_files/UploadEngineAsset";
|
||||
import { MediaFileSubtype } from "@storyteller/components/src/api/enums/MediaFileSubtype";
|
||||
import { MediaFileClass } from "@storyteller/components/src/api/enums/MediaFileClass";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
enum UploadType {
|
||||
EngineAsset = "engine_asset",
|
||||
Image = "image",
|
||||
Audio = "audio",
|
||||
Video = "video",
|
||||
Unknown = "unknown",
|
||||
}
|
||||
|
||||
interface DevUploadProps {}
|
||||
|
||||
export default function DevUpload(props: DevUploadProps) {
|
||||
const [tokens, tokensSet] = useState<string[]>([]);
|
||||
const { engineSubtype, engineSubtypeChange, mediaClass, mediaClassChange, file, inputProps, isEngineAsset, isVideo, upload } = useMediaUploader({
|
||||
onSuccess: (res: UploaderResponse) => tokensSet([res.media_file_token, ...tokens])
|
||||
});
|
||||
|
||||
const { onChange } = inputProps;
|
||||
const { studioAccessCheck } = useSession();
|
||||
|
||||
let title = "Upload Generic File";
|
||||
let engineSubForm = <></>;
|
||||
const [file, fileSet] = useState<File | null>(null);
|
||||
const [maybeMediaFileSubtype, maybeMediaFileSubtypeSet] = useState<MediaFileSubtype | undefined>(undefined);
|
||||
const [uploadType, uploadTypeSet] = useState<UploadType>(UploadType.Unknown);
|
||||
const [tokens, tokensSet] = useState<string[]>([]);
|
||||
|
||||
if (isVideo) { title = "Upload Video"; }
|
||||
if (isEngineAsset) {
|
||||
title = "Upload Engine Asset";
|
||||
engineSubForm = (
|
||||
<>
|
||||
<div className="mb-3">
|
||||
<label htmlFor="fileClassSelect" className="form-label">Media Class</label>
|
||||
<select
|
||||
onChange={mediaClassChange}
|
||||
className="form-select"
|
||||
aria-label="Default select example"
|
||||
id="fileClassSelect"
|
||||
value={mediaClass}
|
||||
>
|
||||
<option value={MediaFileClass.Unknown}>Unknown</option>
|
||||
<option value={MediaFileClass.Audio}>Audio</option>
|
||||
<option value={MediaFileClass.Image}>Image</option>
|
||||
<option value={MediaFileClass.Video}>Video</option>
|
||||
<option value={MediaFileClass.Animation}>Animation</option>
|
||||
<option value={MediaFileClass.Character}>Character</option>
|
||||
<option value={MediaFileClass.Prop}>Prop</option>
|
||||
<option value={MediaFileClass.Scene}>Scene</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label htmlFor="fileSubtypeSelect" className="form-label">Engine Media File Subtype</label>
|
||||
<select
|
||||
onChange={engineSubtypeChange}
|
||||
className="form-select"
|
||||
aria-label="Default select example"
|
||||
id="fileSubtypeSelect"
|
||||
value={engineSubtype}
|
||||
>
|
||||
<option value={MediaFileSubtype.SceneImport}>Scene Import (default)</option>
|
||||
<option value={MediaFileSubtype.Mixamo}>Mixamo Animation</option>
|
||||
<option value={MediaFileSubtype.StorytellerScene}>Storyteller Scene</option>
|
||||
<option value={MediaFileSubtype.AnimationOnly}>Animation Only</option>
|
||||
</select>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
const handleFileChange = (event: any) => {
|
||||
const maybeFile = event.target.files[0];
|
||||
const fileType = GetFileTypeByExtension(maybeFile?.name || "");
|
||||
|
||||
let uploadType = UploadType.Unknown;
|
||||
|
||||
switch (fileType) {
|
||||
case FileType.Bvh:
|
||||
case FileType.Fbx:
|
||||
case FileType.Glb:
|
||||
case FileType.Gltf:
|
||||
case FileType.Obj:
|
||||
case FileType.Ron:
|
||||
uploadType = UploadType.EngineAsset;
|
||||
break;
|
||||
case FileType.Jpg:
|
||||
case FileType.Png:
|
||||
uploadType = UploadType.Image;
|
||||
break;
|
||||
case FileType.Mp3:
|
||||
case FileType.Wav:
|
||||
uploadType = UploadType.Audio;
|
||||
break;
|
||||
case FileType.Mp4:
|
||||
uploadType = UploadType.Video;
|
||||
break;
|
||||
case FileType.Unknown:
|
||||
default:
|
||||
uploadType = UploadType.Unknown;
|
||||
break;
|
||||
}
|
||||
|
||||
fileSet(maybeFile);
|
||||
uploadTypeSet(uploadType);
|
||||
};
|
||||
|
||||
const handleSubtypeChange = (ev: React.FormEvent<HTMLSelectElement>) => {
|
||||
const value = (ev.target as HTMLSelectElement).value;
|
||||
const maybeSubtype = value as MediaFileSubtype;
|
||||
maybeMediaFileSubtypeSet(maybeSubtype);
|
||||
}
|
||||
|
||||
const handleUpload = () => {
|
||||
if (!file) {
|
||||
console.error("no file specified for upload");
|
||||
return;
|
||||
}
|
||||
|
||||
switch(uploadType) {
|
||||
case UploadType.EngineAsset:
|
||||
UploadEngineAsset({
|
||||
uuid_idempotency_token: uuidv4(),
|
||||
file,
|
||||
media_file_subtype: maybeMediaFileSubtype,
|
||||
})
|
||||
.then((res: UploadEngineAssetResponse) => {
|
||||
if ("media_file_token" in res) {
|
||||
tokensSet([res.media_file_token, ...tokens]);
|
||||
fileSet(null);
|
||||
}
|
||||
});
|
||||
break;
|
||||
default:
|
||||
UploadMedia({
|
||||
uuid_idempotency_token: uuidv4(),
|
||||
file,
|
||||
source: "file",
|
||||
})
|
||||
.then((res: UploadMediaResponse) => {
|
||||
if ("media_file_token" in res) {
|
||||
tokensSet([res.media_file_token, ...tokens]);
|
||||
fileSet(null);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
let title = "Upload Generic File";
|
||||
let mediaFileSubtypeForm = <></>;
|
||||
|
||||
switch (uploadType) {
|
||||
case UploadType.Video:
|
||||
title = "Upload Video";
|
||||
break;
|
||||
|
||||
case UploadType.EngineAsset:
|
||||
title = "Upload Engine Asset";
|
||||
mediaFileSubtypeForm = (
|
||||
<>
|
||||
<div className="mb-3">
|
||||
<label htmlFor="fileSubtypeSelect" className="form-label">Engine Media File Subtype</label>
|
||||
<select
|
||||
onChange={handleSubtypeChange}
|
||||
className="form-select"
|
||||
aria-label="Default select example"
|
||||
id="fileSubtypeSelect"
|
||||
value={maybeMediaFileSubtype}
|
||||
>
|
||||
<option value={MediaFileSubtype.SceneImport}>Scene Import (default)</option>
|
||||
<option value={MediaFileSubtype.Mixamo}>Mixamo Animation</option>
|
||||
<option value={MediaFileSubtype.StorytellerScene}>Storyteller Scene</option>
|
||||
<option value={MediaFileSubtype.AnimationOnly}>Animation Only</option>
|
||||
</select>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
break;
|
||||
}
|
||||
|
||||
return studioAccessCheck(
|
||||
@@ -72,7 +146,7 @@ export default function DevUpload(props: DevUploadProps) {
|
||||
subText="Upload files to the server for testing."
|
||||
/>
|
||||
|
||||
{engineSubtype}
|
||||
{maybeMediaFileSubtype}
|
||||
|
||||
<Panel padding={true}>
|
||||
<div className="d-flex flex-column gap-5">
|
||||
@@ -80,22 +154,22 @@ export default function DevUpload(props: DevUploadProps) {
|
||||
|
||||
<div className="mb-3">
|
||||
<label htmlFor="formFile" className="form-label">Select File for Upload</label>
|
||||
<input {...{
|
||||
onChange,
|
||||
className: "form-control form-control-lg",
|
||||
type: "file",
|
||||
id: "formFile"
|
||||
}}/>
|
||||
<input
|
||||
className="form-control form-control-lg"
|
||||
id="formFile"
|
||||
type="file"
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{engineSubForm}
|
||||
{mediaFileSubtypeForm}
|
||||
|
||||
<div className="d-flex gap-3 justify-content-end">
|
||||
<Button
|
||||
disabled={!file}
|
||||
icon={faUpload}
|
||||
label="Upload Media"
|
||||
onClick={upload}
|
||||
onClick={handleUpload}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -107,4 +181,4 @@ export default function DevUpload(props: DevUploadProps) {
|
||||
</Panel>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
import React, { useState } from "react";
|
||||
import PageHeader from "components/layout/PageHeader";
|
||||
import { useMediaUploader, useSession } from "hooks";
|
||||
import { Button, Container, Panel } from "components/common";
|
||||
import { UploaderResponse } from "components/entities/EntityTypes";
|
||||
import { faUpload } from "@fortawesome/pro-solid-svg-icons";
|
||||
import { MediaFileSubtype } from "@storyteller/components/src/api/enums/MediaFileSubtype";
|
||||
import { MediaFileClass } from "@storyteller/components/src/api/enums/MediaFileClass";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
interface DevUploadProps {}
|
||||
|
||||
export default function DevUpload(props: DevUploadProps) {
|
||||
const [tokens, tokensSet] = useState<string[]>([]);
|
||||
const { engineSubtype, engineSubtypeChange, mediaClass, mediaClassChange, file, inputProps, isEngineAsset, isVideo, upload } = useMediaUploader({
|
||||
onSuccess: (res: UploaderResponse) => tokensSet([res.media_file_token, ...tokens])
|
||||
});
|
||||
|
||||
const { onChange } = inputProps;
|
||||
const { studioAccessCheck } = useSession();
|
||||
|
||||
let title = "Upload Generic File";
|
||||
let engineSubForm = <></>;
|
||||
|
||||
if (isVideo) { title = "Upload Video"; }
|
||||
if (isEngineAsset) {
|
||||
title = "Upload Engine Asset";
|
||||
engineSubForm = (
|
||||
<>
|
||||
<div className="mb-3">
|
||||
<label htmlFor="fileClassSelect" className="form-label">Media Class</label>
|
||||
<select
|
||||
onChange={mediaClassChange}
|
||||
className="form-select"
|
||||
aria-label="Default select example"
|
||||
id="fileClassSelect"
|
||||
value={mediaClass}
|
||||
>
|
||||
<option value={MediaFileClass.Unknown}>Unknown</option>
|
||||
<option value={MediaFileClass.Audio}>Audio</option>
|
||||
<option value={MediaFileClass.Image}>Image</option>
|
||||
<option value={MediaFileClass.Video}>Video</option>
|
||||
<option value={MediaFileClass.Animation}>Animation</option>
|
||||
<option value={MediaFileClass.Character}>Character</option>
|
||||
<option value={MediaFileClass.Prop}>Prop</option>
|
||||
<option value={MediaFileClass.Scene}>Scene</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label htmlFor="fileSubtypeSelect" className="form-label">Engine Media File Subtype</label>
|
||||
<select
|
||||
onChange={engineSubtypeChange}
|
||||
className="form-select"
|
||||
aria-label="Default select example"
|
||||
id="fileSubtypeSelect"
|
||||
value={engineSubtype}
|
||||
>
|
||||
<option value={MediaFileSubtype.SceneImport}>Scene Import (default)</option>
|
||||
<option value={MediaFileSubtype.Mixamo}>Mixamo Animation</option>
|
||||
<option value={MediaFileSubtype.StorytellerScene}>Storyteller Scene</option>
|
||||
<option value={MediaFileSubtype.AnimationOnly}>Animation Only</option>
|
||||
</select>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return studioAccessCheck(
|
||||
<Container type="padded" className="pt-4 pt-lg-5">
|
||||
<PageHeader
|
||||
title={title}
|
||||
subText="Upload files to the server for testing."
|
||||
/>
|
||||
|
||||
{engineSubtype}
|
||||
|
||||
<Panel padding={true}>
|
||||
<div className="d-flex flex-column gap-5">
|
||||
<h1>File Select</h1>
|
||||
|
||||
<div className="mb-3">
|
||||
<label htmlFor="formFile" className="form-label">Select File for Upload</label>
|
||||
<input {...{
|
||||
onChange,
|
||||
className: "form-control form-control-lg",
|
||||
type: "file",
|
||||
id: "formFile"
|
||||
}}/>
|
||||
</div>
|
||||
|
||||
{engineSubForm}
|
||||
|
||||
<div className="d-flex gap-3 justify-content-end">
|
||||
<Button
|
||||
disabled={!file}
|
||||
icon={faUpload}
|
||||
label="Upload Media"
|
||||
onClick={upload}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h2>Your uploads</h2>
|
||||
{tokens.map((token: string, key: number) => (
|
||||
<Link {...{ key, to: `/media/${token}` }}>{token}</Link>
|
||||
))}
|
||||
</div>
|
||||
</Panel>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user